/*$green: rgb(92, 185, 71);*/
.text-green {
  color: #69c04e; }

.flex-container, .jr-crop-toolbar {
  display: flex; }

.no-text-decoration {
  text-decoration: none; }

.bar-transparent {
  background-color: transparent;
  color: #68697B; }
  .bar-transparent ion-header-bar {
    background-color: transparent;
    background-size: 0;
    border-bottom-color: transparent;
    color: #68697B; }
    .bar-transparent ion-header-bar button {
      color: #68697B;
      -webkit-transform: scale(2) translateX(1vw) translateY(2vh);
      -moz-transform: scale(2) translateX(1vw) translateY(2vh);
      -ms-transform: scale(2) translateX(1vw) translateY(2vh);
      -o-transform: scale(2) translateX(1vw) translateY(2vh);
      transform: scale(2) translateX(1vw) translateY(2vh); }
    .bar-transparent ion-header-bar .bigger-icon {
      font-size: 140%; }

.bar-balanced {
  /*  border: 0 !important;*/
  background-color: #69c04e !important; }
  .bar-balanced ion-header-bar {
    background-color: #69c04e !important; }
  .bar-balanced .bar .title {
    font-size: 13px; }
  .bar-balanced .title {
    color: white; }

.bar-blue {
  background-color: #378BCA !important; }
  .bar-blue.bg-grid {
    background-image: url(../../images/routine-background.svg);
    background-size: cover; }
  .bar-blue .bar-balanced {
    background-color: #378BCA !important; }
  .bar-blue ion-header-bar {
    background-color: #378BCA !important; }
  .bar-blue .title {
    color: white; }
  .bar-blue .button {
    color: white; }

.login-container .trade-mark {
  margin-left: -100%;
  margin-right: -100%;
  color: white; }
  .login-container .trade-mark h1, .login-container .trade-mark h2, .login-container .trade-mark h3, .login-container .trade-mark h4, .login-container .trade-mark h5 {
    display: inline-block; }

.login-container .trade-mark,
.login-container .text-row {
  white-space: nowrap; }

.login-container input {
  -webkit-user-select: auto !important;
  -khtml-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  -o-user-select: auto !important;
  user-select: auto !important; }
  .login-container input::-webkit-input-placeholder {
    color: #666; }

.login-container ion-content {
  top: 0; }

.login-container .button {
  border-width: 0;
  border-radius: 50px;
  margin-bottom: 0;
  margin: 0 auto 5vh auto; }

.login-container.landing {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/leave-for-school-square.jpg");
  background-position: 75% 10%;
  -webkit-background-size: cover;
  background-size: cover; }
  .login-container.landing .login-logo {
    margin-top: 6vh;
    margin-bottom: 6vh; }

.login-container.selectprofile .login-panel {
  top: 5vh;
  bottom: 0;
  left: 10%;
  right: 10%; }

.login-container .slide-container {
  margin-top: 5vh; }

.login-container.landing .slide-container {
  margin-top: 15vh; }

.login-container.landing .login-container.signin .login-panel, .login-container.signup .login-panel {
  color: white; }

.login-container .button-social-media {
  width: 45px;
  height: 45px;
  text-align: center;
  vertical-align: middle;
  margin-left: 10px;
  margin-right: 10px; }
  .login-container .button-social-media.apple-signup {
    margin: 0px; }
  .login-container .button-social-media.apple {
    width: inherit; }
    .login-container .button-social-media.apple img {
      height: 47px; }
  .login-container .button-social-media i {
    font-size: 200%; }
    .login-container .button-social-media i:before {
      line-height: 50px; }

.login-container .button-social-media[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none; }

.login-container .learn-slider-container {
  height: 70%;
  position: relative; }
  .login-container .learn-slider-container .slider-slide img {
    max-height: 50%;
    max-width: 90%; }
  .login-container .learn-slider-container .slider-slide .text {
    padding-left: 10%;
    padding-right: 10%;
    color: #999999; }
    .login-container .learn-slider-container .slider-slide .text h1, .login-container .learn-slider-container .slider-slide .text h2, .login-container .learn-slider-container .slider-slide .text h3, .login-container .learn-slider-container .slider-slide .text h4, .login-container .learn-slider-container .slider-slide .text h5 {
      color: inherit; }

.login-container .learn-button-container {
  height: 30% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f6f7; }
  .login-container .learn-button-container .button {
    width: 40%;
    margin-bottom: 4vh; }

.login-container .login-instruction {
  position: absolute;
  left: 75%;
  top: 28%;
  color: white; }
  .login-container .login-instruction.instruction-left {
    left: 10%;
    top: 37%; }
    .login-container .login-instruction.instruction-left p {
      -moz-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
      -webkit-transform: rotate(-20deg);
      transform: rotate(-20deg); }
  .login-container .login-instruction p {
    white-space: nowrap;
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg); }
  .login-container .login-instruction .login-arrow-down-left {
    background-image: url("../images/arrow-down-left.svg");
    background-repeat: no-repeat;
    height: 40px; }
  .login-container .login-instruction .login-arrow-down-right {
    background-image: url("../images/arrow-down-right.svg");
    background-repeat: no-repeat;
    height: 40px;
    background-position: right; }

.login-container .login-panel {
  -webkit-perspective: 2000;
  -moz-perspective: 2000;
  -ms-perspective: 2000;
  perspective: 2000;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  position: absolute;
  top: 10vh;
  bottom: 10vh;
  left: 30%;
  right: 30%; }
  .login-container .login-panel h1,
  .login-container .login-panel h2,
  .login-container .login-panel h3,
  .login-container .login-panel h4,
  .login-container .login-panel h5 {
    font-weight: bold;
    color: inherit; }
  .login-container .login-panel .button-green,
  .login-container .login-panel .button-blue {
    font-size: 18px; }
  .login-container .login-panel .login-logo img {
    max-height: 16vh;
    max-width: 100%; }
  .login-container .login-panel .item-input {
    padding-top: 1px;
    padding-bottom: 0px; }
  .login-container .login-panel .footer {
    z-index: 100;
    background: white;
    position: absolute;
    width: 100%;
    height: 15%;
    bottom: 0; }
    .login-container .login-panel .footer p {
      position: absolute; }

.login-container .login-cancel-icon {
  position: absolute;
  left: 9%; }
  .login-container .login-cancel-icon img {
    height: 30px; }

.login-container .login-initial-buttons {
  width: 100%; }

.login-container .login-error {
  position: absolute;
  top: 20%;
  color: #FBC010;
  left: 0;
  right: 0; }
  .login-container .login-error.padding {
    left: 20px;
    right: 20px; }

.login-container .signup-container {
  position: absolute;
  bottom: 5%;
  width: 100%; }

.login-container .item {
  opacity: .8; }

.login-container .login-form-container {
  max-width: 100%;
  height: 30%; }
  .login-container .login-form-container > button {
    margin-top: 10px; }

.login-container .strike {
  margin-left: 9%;
  margin-right: 9%;
  margin-top: 40px;
  margin-bottom: 10px; }

.login-container .label-halves label {
  max-height: 37px;
  height: 50%; }

.login-container .label-thirds label {
  max-height: 37px;
  height: 33%; }

.login-container .login-form-container.signin {
  height: 25%; }

.login-container .login-form-container.signin-token .item-input-inset {
  width: 130%;
  margin-left: -15%; }

.login-container .login-button-container {
  max-width: 100%;
  height: 37.5%; }
  .login-container .login-button-container .button {
    width: 80%; }
  .login-container .login-button-container > button,
  .login-container .login-button-container > label,
  .login-container .login-button-container .text-row {
    margin-bottom: 8%; }
  .login-container .login-button-container > button,
  .login-container .login-button-container > label,
  .login-container .login-button-container .text-row:first-child {
    margin-bottom: initial; }
  .login-container .login-button-container .item-checkbox.checkbox-s {
    border-width: 0;
    vertical-align: middle;
    padding-left: 20px;
    margin-bottom: .5em;
    display: inline-block;
    vertical-align: -webkit-baseline-middle; }
    .login-container .login-button-container .item-checkbox.checkbox-s + .text-tos {
      vertical-align: sub; }
    .login-container .login-button-container .item-checkbox.checkbox-s .checkbox {
      left: 0;
      padding-left: 0; }
      .login-container .login-button-container .item-checkbox.checkbox-s .checkbox input:checked:before,
      .login-container .login-button-container .item-checkbox.checkbox-s .checkbox input:checked + .checkbox-icon:before {
        background-color: #69c04e;
        border-color: #4b9544; }

.login-container .login-profiles-container {
  height: 55%;
  position: absolute;
  bottom: 15%;
  width: 100%;
  overflow: scroll; }
  .login-container .login-profiles-container.padding {
    padding-bottom: 0;
    padding-left: 15px;
    padding-right: 15px; }
  .login-container .login-profiles-container .border-padding {
    border-top: 1px solid #ddd; }
    .login-container .login-profiles-container .border-padding .item-icon-left {
      padding-left: 70px; }
  .login-container .login-profiles-container a {
    border-left: 0;
    border-right: 0; }
    .login-container .login-profiles-container a.item {
      padding-top: 25px;
      padding-bottom: 25px; }
    .login-container .login-profiles-container a .icon img, .login-container .login-profiles-container a .icon span {
      height: 30px;
      width: 30px; }
      .login-container .login-profiles-container a .icon img.shorter, .login-container .login-profiles-container a .icon span.shorter {
        height: 25px; }
    .login-container .login-profiles-container a .icon span {
      text-align: center;
      line-height: 100%; }
    .login-container .login-profiles-container a .icon.icon-profile img, .login-container .login-profiles-container a .icon.icon-profile span {
      height: 40px;
      width: 40px;
      border-radius: 50%;
      border: 2px solid #67aada;
      color: #67aada; }
      .login-container .login-profiles-container a .icon.icon-profile img h2, .login-container .login-profiles-container a .icon.icon-profile span h2 {
        font-size: 32px;
        color: #67aada; }
      .login-container .login-profiles-container a .icon.icon-profile img.parent-profile, .login-container .login-profiles-container a .icon.icon-profile span.parent-profile {
        border: 2px solid #69c04e; }
        .login-container .login-profiles-container a .icon.icon-profile img.parent-profile h2, .login-container .login-profiles-container a .icon.icon-profile span.parent-profile h2 {
          color: #69c04e; }

.login-container .padding {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-top: 0; }

.login-container .list {
  margin-bottom: 20px;
  border-radius: 0 !important; }
  .login-container .list label {
    border-radius: 0 !important;
    border-color: #68697B; }
  .login-container .list input {
    font-size: 16px; }

.login-container .horizontal-rule {
  margin-bottom: 10px; }

.login-container a {
  color: inherit; }

.login-container .header {
  width: 100%;
  height: 25%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 25px;
  position: relative; }
  .login-container .header h5 {
    font-size: 16px; }

.login-container hr {
  border-top: 0;
  border-color: #cfd9e1; }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .login-container .login-panel .login-button-container {
    margin-top: 5%; }
  .login-container .login-panel .trade-mark h3 {
    font-size: 120%; }
  .login-container .login-panel .button {
    font-size: 25px; }
  .login-container .login-panel .login-logo .trade-mark {
    font-size: 200%; }
  .login-container.landing {
    background-position: 66% 28%;
    -webkit-background-size: 220%;
    background-size: 220%; }
    .login-container.landing .login-panel .trade-mark h3 {
      font-size: 120%; }
    .login-container.landing .login-panel .button {
      font-size: 25px; }
    .login-container.landing .login-panel .login-logo .trade-mark {
      font-size: 200%; } }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .login-container.landing {
    background-position: 75% 28%;
    -webkit-background-size: 160%;
    background-size: 160%; } }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .login-container .login-button-container > button,
  .login-container .login-button-container > label,
  .login-container .login-button-container .text-row {
    margin-bottom: 10%; } }

@media only screen and (max-device-width: 767px) {
  .login-container .login-panel {
    left: 18%;
    right: 18%; }
  .login-container .login-logo img {
    max-width: 22vh; }
  .login-container .learn-button-container .button {
    width: 70%; }
  .login-container.landing {
    background-position: 65% 25%;
    -webkit-background-size: 250%;
    background-size: 250%; }
  .login-container .button {
    width: 100%; } }

.accept-migrate {
  bottom: 0;
  position: absolute;
  width: 100%; }

.jr-crop-toolbar i {
  font-size: 150%; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0; }

[nav-view-transition][nav-view-direction] {
  background-color: transparent; }

.routine-content {
  position: relative;
  height: 60%; }

.bg-light-blue {
  background-color: #67aada;
  color: white;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 0; }

.bg-light-yellow {
  background-color: #f6e864;
  color: white; }

.bg-light-grey {
  background-color: #999999; }

.bg-lighter-grey {
  background-color: #f5f6f7; }

.bg-green {
  background-color: #69c04e;
  color: white; }

.spinner {
  stroke: #69c04e; }
  .spinner path {
    stroke: #69c04e; }

.text-light-yellow {
  color: #f6e864; }

.text-light-grey {
  color: #999999 !important; }

.text-grey {
  color: #666 !important; }

.text-orange {
  color: #FF7600; }

.text-red {
  color: #E64C30; }

.ui-datepicker {
  z-index: 99999 !important; }

.dimension-zero {
  height: 0px !important;
  width: 1px !important;
  padding: 0px !important; }

.birthday-picker .ui-datepicker-header:before {
  content: 'Set Birthday' !important;
  margin-left: auto;
  margin-right: auto; }

.remind-popup .popup .popup-buttons .button {
  font-size: 14px; }

.popup-buttons {
  padding: 7.5px; }

.bg-light-blue .card,
.bg-light-yellow .card,
.bg-light-grey .card,
.bg-lighter-grey .card,
.bg-green .card {
  color: #444; }

.card.margin-top, .prize-list-widget .card.prize-card {
  margin-top: 30px; }

.float-right {
  float: right; }

.float-left {
  float: left; }

.font-lighter {
  font-weight: lighter !important; }

.less-padding-vertical {
  padding-top: 5px;
  padding-bottom: 5px; }

.no-margin-vertical {
  margin-bottom: 0 !important;
  margin-top: 0 !important; }

.no-margin-horizontal {
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: 0 !important; }

.vertical-align-middle {
  vertical-align: middle; }

.capitalize {
  text-transform: capitalize; }

.bold {
  font-weight: bold; }

.no-border-radius {
  border-radius: 0 !important; }

.no-padding {
  padding: 0 !important; }

.no-padding-left {
  padding-left: 0; }

.no-padding-top {
  padding-top: 0; }

.no-padding-right {
  padding-right: 0; }

.no-padding-horizontal {
  padding-left: 0;
  padding-right: 0; }

.padding-top-double {
  padding-top: 20px; }

.nowrap, .routine-container .routine-tasks .no-routine-text, .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .task-stats span {
  white-space: nowrap; }

.text-wrap {
  white-space: normal; }
  .text-wrap.item-toggle > span {
    white-space: inherit; }
  .text-wrap > .toggle {
    top: 50% !important;
    transform: translateY(-35%);
    -webkit-transform: translateY(-35%); }

.item h3 {
  white-space: normal; }

.transparent {
  opacity: 0; }

.opaque-5 {
  opacity: .5; }

.circle {
  border-radius: 50%; }

.underline {
  text-decoration: underline; }

.absolute {
  position: absolute; }

.relative {
  position: relative; }

.width-wrapper {
  max-width: 1200px;
  margin: 0 auto; }

.scroll > .width-wrapper {
  padding-bottom: 100px; }

.font-inherit.icon:before {
  font-size: inherit !important; }

.font-24 {
  font-size: 24px; }
  .font-24.icon:before {
    font-size: 24px !important; }

.font-custom {
  font-size: 14px;
  font-weight: lighter !important; }

.font-small {
  font-size: 14px; }

.width-full {
  width: 100%; }

.button-outline-blue {
  background-color: white;
  color: #67aada;
  border-radius: 5px;
  border: 1px solid #67aada; }

.strike {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap; }
  .strike > span {
    position: relative;
    display: inline-block; }
    .strike > span:before, .strike > span:after {
      content: "";
      position: absolute;
      top: 50%;
      width: 9999px;
      height: 1px;
      background: #999999; }
    .strike > span:before {
      right: 100%;
      margin-right: 15px; }
    .strike > span:after {
      left: 100%;
      margin-left: 15px; }
  .strike.green > span {
    color: #69c04e; }
    .strike.green > span:before, .strike.green > span:after {
      background: #69c04e; }

.va-middle {
  vertical-align: middle; }

.va-sub {
  vertical-align: sub; }

.card-task {
  position: absolute;
  width: 30%;
  text-align: center;
  margin: 0; }

.original-info {
  color: #69c04e;
  font-weight: bold; }

.routine-info .original-info {
  color: yellow; }

.tray-bottom {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 0;
  border-bottom: 1px solid #FBC010; }

.slider {
  height: 100%;
  width: 100%;
  position: absolute; }

.slide-box-right-buttons-container,
.slide-box-left-buttons-container {
  position: absolute;
  width: 8% !important;
  height: 100%;
  top: 0;
  bottom: 0; }

.slide-box-left-buttons-container {
  left: 0 !important;
  z-index: 10; }

.slide-box-right-buttons-container {
  right: 0 !important;
  z-index: 1; }
  .slide-box-right-buttons-container + .slider .onboarding-slide {
    padding-left: 8%;
    padding-right: 8%; }
    .slide-box-right-buttons-container + .slider .onboarding-slide img {
      max-width: 80%;
      max-height: 80%; }

.modal-wrapper .login-container {
  z-index: 11; }

.migrate-panel {
  position: relative;
  height: 70%;
  left: 0;
  right: 0;
  top: 10vh;
  bottom: 10vh; }
  .migrate-panel .button,
  .migrate-panel .text-row {
    vertical-align: -webkit-baseline-middle; }

.onboarding-slide {
  height: 100%;
  background-color: #378BCA;
  color: white;
  padding: 15px;
  text-align: center;
  line-height: 34px; }
  .onboarding-slide.padding {
    padding: 35px; }
  .onboarding-slide div,
  .onboarding-slide h3,
  .onboarding-slide > img,
  .onboarding-slide button:last-child,
  .onboarding-slide > i {
    margin-top: 20px; }
  .onboarding-slide h3 {
    margin-bottom: 20px; }
  .onboarding-slide > i {
    font-size: 1000%; }
  .onboarding-slide h1,
  .onboarding-slide h2,
  .onboarding-slide h3,
  .onboarding-slide h4,
  .onboarding-slide h5 {
    color: inherit; }
  .onboarding-slide h5 {
    padding-left: 40px;
    padding-right: 40px; }
  .onboarding-slide img {
    max-height: 50%; }
    .onboarding-slide img.inline-image {
      width: initial;
      height: 25px;
      vertical-align: middle; }
  .onboarding-slide .button.button-positive.button-outline {
    color: white;
    border-color: white; }
  .onboarding-slide a {
    text-decoration: none;
    color: inherit; }
  .onboarding-slide md-icon {
    margin: 0;
    height: 15%;
    width: 15%; }

i.icon-circle {
  width: 45px;
  height: 45px;
  border: 1px solid;
  border-radius: 50%;
  text-align: center;
  line-height: initial; }
  i.icon-circle:before {
    vertical-align: middle; }

.inactive-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: black;
  opacity: .7;
  vertical-align: baseline;
  border-radius: inherit;
  color: #D4A004; }
  .inactive-overlay.activatable {
    color: #69c04e; }
  .inactive-overlay span {
    position: absolute;
    right: 8px;
    bottom: 8px; }
    .inactive-overlay span p {
      font-size: 150%;
      display: inline; }
    .inactive-overlay span i {
      font-size: 170%;
      margin-left: 10px;
      display: inline; }

.col .inactive-overlay span {
  position: relative;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  top: 5px;
  right: 0;
  bottom: 0; }
  .col .inactive-overlay span p {
    color: #69c04e;
    vertical-align: super; }
  .col .inactive-overlay span i {
    font-size: 200%; }

.note {
  color: #999999;
  padding: 10px;
  text-align: center; }
  .note i:first-child {
    margin-right: 5px; }
    .note i:first-child:before {
      vertical-align: middle;
      font-size: 150%; }
  .note.lower-left {
    position: absolute;
    bottom: 60px;
    left: 10px; }

.hide-visibility {
  visibility: hidden; }
  .hide-visibility:before {
    width: 0; }

.hide {
  display: none; }

.hide-1px {
  width: 1px;
  height: 1px; }

.pointer:hover {
  cursor: pointer; }

.text-right {
  text-align: right; }

.text-left {
  text-align: left; }

.bullet-point {
  float: left; }

@keyframes JUMP-CENTER-75 {
  0% {
    transform: translate3d(75%, -50%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(75%, -50%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; }
  50% {
    transform: translate3d(75%, -43%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(75%, -43%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-out; }
  55% {
    transform: translate3d(75%, -42%, 0) rotate(0) scale(1, 0.95) ;
    -webkit-transform: translate3d(75%, -42%, 0) rotate(0) scale(1, 0.95) ;
    animation-timing-function: ease-in; }
  65% {
    transform: translate3d(75%, -44%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(75%, -44%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-out; }
  95% {
    transform: translate3d(75%, -50%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(75%, -50%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; }
  100% {
    transform: translate3d(75%, -50%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(75%, -50%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; } }

@keyframes JUMP-CENTER-71 {
  0% {
    transform: translate3d(71%, -50%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(71%, -50%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; }
  50% {
    transform: translate3d(71%, -43%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(71%, -43%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-out; }
  55% {
    transform: translate3d(71%, -42%, 0) rotate(0) scale(1, 0.95) ;
    -webkit-transform: translate3d(71%, -42%, 0) rotate(0) scale(1, 0.95) ;
    animation-timing-function: ease-in; }
  65% {
    transform: translate3d(71%, -44%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(71%, -44%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-out; }
  95% {
    transform: translate3d(71%, -50%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(71%, -50%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; }
  100% {
    transform: translate3d(71%, -50%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(71%, -50%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; } }

@keyframes JUMP-CENTER-20 {
  0% {
    transform: translate3d(20%, -50%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(20%, -50%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; }
  50% {
    transform: translate3d(20%, -43%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(20%, -43%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-out; }
  55% {
    transform: translate3d(20%, -42%, 0) rotate(0) scale(1, 0.9) ;
    -webkit-transform: translate3d(20%, -42%, 0) rotate(0) scale(1, 0.9) ;
    animation-timing-function: ease-in; }
  65% {
    transform: translate3d(20%, -44%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(20%, -44%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-out; }
  95% {
    transform: translate3d(20%, -50%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(20%, -50%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; }
  100% {
    transform: translate3d(20%, -50%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(20%, -50%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; } }

@keyframes JUMP {
  0% {
    transform: translate3d(0, 0, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; }
  50% {
    transform: translate3d(0%, 7%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(0%, 7%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-out; }
  55% {
    transform: translate3d(0%, 8%, 0) rotate(0) scale(1, 0.9) ;
    -webkit-transform: translate3d(0%, 8%, 0) rotate(0) scale(1, 0.9) ;
    animation-timing-function: ease-in; }
  65% {
    transform: translate3d(0%, 6%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(0%, 6%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-out; }
  95% {
    transform: translate3d(0%, 0, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(0%, 0, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; }
  100% {
    transform: translate3d(0%, 0, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(0%, 0, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; } }

@-webkit-keyframes JUMP {
  0% {
    transform: translate3d(0, 0, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; }
  50% {
    transform: translate3d(0%, 7%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(0%, 7%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-out; }
  55% {
    transform: translate3d(0%, 8%, 0) rotate(0) scale(1, 0.9) ;
    -webkit-transform: translate3d(0%, 8%, 0) rotate(0) scale(1, 0.9) ;
    animation-timing-function: ease-in; }
  65% {
    transform: translate3d(0%, 6%, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(0%, 6%, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-out; }
  95% {
    transform: translate3d(0%, 0, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(0%, 0, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; }
  100% {
    transform: translate3d(0%, 0, 0) rotate(0) scale(1, 1) ;
    -webkit-transform: translate3d(0%, 0, 0) rotate(0) scale(1, 1) ;
    animation-timing-function: ease-in; } }

@-webkit-keyframes ANIM-BORDER-COLOR-PULSE {
  0% {
    border-color: transparent; }
  100% {
    border-color: #69c04e; } }

@-moz-keyframes ANIM-BORDER-COLOR-PULSE {
  0% {
    border-color: transparent; }
  100% {
    border-color: #69c04e; } }

@-o-keyframes ANIM-BORDER-COLOR-PULSE {
  0% {
    border-color: transparent; }
  100% {
    border-color: #69c04e; } }

@keyframes ANIM-BORDER-COLOR-PULSE {
  0% {
    border-color: transparent; }
  100% {
    border-color: #69c04e; } }

@-webkit-keyframes ANIM-OPACITY-PULSE {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-moz-keyframes ANIM-OPACITY-PULSE {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-o-keyframes ANIM-OPACITY-PULSE {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes ANIM-OPACITY-PULSE {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes ANIM-BORDER-WIDTH-PULSE {
  0% {
    border-width: 2px; }
  100% {
    border-width: 0; } }

@-moz-keyframes ANIM-BORDER-WIDTH-PULSE {
  0% {
    border-width: 2px; }
  100% {
    border-width: 0; } }

@-o-keyframes ANIM-BORDER-WIDTH-PULSE {
  0% {
    border-width: 2px; }
  100% {
    border-width: 0; } }

@keyframes ANIM-BORDER-WIDTH-PULSE {
  0% {
    border-width: 2px; }
  100% {
    border-width: 0; } }

@-webkit-keyframes ANIM-SCALE-PULSE {
  0% {
    transform: scale(1, 1) ;
    -webkit-transform: scale(1, 1) ;
    -moz-transform: scale(1, 1) ;
    -ms-transform: scale(1, 1) ;
    -o-transform: scale(1, 1) ; }
  100% {
    transform: scale(0.8, 0.8) ;
    -webkit-transform: scale(0.8, 0.8) ;
    -moz-transform: scale(0.8, 0.8) ;
    -ms-transform: scale(0.8, 0.8) ;
    -o-transform: scale(0.8, 0.8) ; } }

@-moz-keyframes ANIM-SCALE-PULSE {
  0% {
    transform: scale(1, 1) ;
    -webkit-transform: scale(1, 1) ;
    -moz-transform: scale(1, 1) ;
    -ms-transform: scale(1, 1) ;
    -o-transform: scale(1, 1) ; }
  100% {
    transform: scale(0.8, 0.8) ;
    -webkit-transform: scale(0.8, 0.8) ;
    -moz-transform: scale(0.8, 0.8) ;
    -ms-transform: scale(0.8, 0.8) ;
    -o-transform: scale(0.8, 0.8) ; } }

@-o-keyframes ANIM-SCALE-PULSE {
  0% {
    transform: scale(1, 1) ;
    -webkit-transform: scale(1, 1) ;
    -moz-transform: scale(1, 1) ;
    -ms-transform: scale(1, 1) ;
    -o-transform: scale(1, 1) ; }
  100% {
    transform: scale(0.8, 0.8) ;
    -webkit-transform: scale(0.8, 0.8) ;
    -moz-transform: scale(0.8, 0.8) ;
    -ms-transform: scale(0.8, 0.8) ;
    -o-transform: scale(0.8, 0.8) ; } }

@keyframes ANIM-SCALE-PULSE {
  0% {
    transform: scale(1, 1) ;
    -webkit-transform: scale(1, 1) ;
    -moz-transform: scale(1, 1) ;
    -ms-transform: scale(1, 1) ;
    -o-transform: scale(1, 1) ; }
  100% {
    transform: scale(0.8, 0.8) ;
    -webkit-transform: scale(0.8, 0.8) ;
    -moz-transform: scale(0.8, 0.8) ;
    -ms-transform: scale(0.8, 0.8) ;
    -o-transform: scale(0.8, 0.8) ; } }

@-webkit-keyframes ANIM-BOX-SHADOW-TRANSPARENT {
  0% {
    box-shadow: 3px 3px 3px #999999; }
  100% {
    box-shadow: 0 0 0; } }

@-moz-keyframes ANIM-BOX-SHADOW-TRANSPARENT {
  0% {
    box-shadow: 3px 3px 3px #999999; }
  100% {
    box-shadow: 0 0 0; } }

@-o-keyframes ANIM-BOX-SHADOW-TRANSPARENT {
  0% {
    box-shadow: 3px 3px 3px #999999; }
  100% {
    box-shadow: 0 0 0; } }

@keyframes ANIM-BOX-SHADOW-TRANSPARENT {
  0% {
    box-shadow: 3px 3px 3px #999999; }
  100% {
    box-shadow: 0 0 0; } }

@keyframes ANIM-FADEIN-SCALE-OPAC {
  0%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1);
    transform: scale3d(0.1, 0.1, 0.1); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes ANIM-LOOP-X {
  0% {
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0); }
  100% {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0); } }

@-webkit-keyframes ANIM-ROTATE {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg); } }

@-moz-keyframes ANIM-ROTATE {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg); } }

@-ms-keyframes ANIM-ROTATE {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg); } }

.fade-in-slow {
  -webkit-animation-name: ANIM-FADEIN-SCALE-OPAC;
  animation-name: ANIM-FADEIN-SCALE-OPAC;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s; }

.fade-in {
  -webkit-animation-name: ANIM-FADEIN-SCALE-OPAC;
  animation-name: ANIM-FADEIN-SCALE-OPAC;
  -webkit-animation-duration: .75s;
  animation-duration: .75s; }

.fade-in-fast {
  -webkit-animation-name: ANIM-FADEIN-SCALE-OPAC;
  animation-name: ANIM-FADEIN-SCALE-OPAC;
  -webkit-animation-duration: .5s;
  animation-duration: .5s; }

.loop-x {
  -webkit-animation: ANIM-LOOP-X 30s linear infinite normal;
  /* Safari 4+ */
  -moz-animation: ANIM-LOOP-X 30s linear infinite normal;
  /* Fx 5+ */
  -o-animation: ANIM-LOOP-X 30s linear infinite normal;
  /* Opera 12+ */
  animation: ANIM-LOOP-X 30s linear infinite normal; }

.spin {
  -webkit-animation: ANIM-ROTATE 3s linear infinite normal;
  /* Safari 4+ */
  -moz-animation: ANIM-ROTATE 3s linear infinite normal;
  /* Fx 5+ */
  -o-animation: ANIM-ROTATE 3s linear infinite normal;
  /* Opera 12+ */
  animation: ANIM-ROTATE 3s linear infinite normal; }

.opacity-pulse {
  -webkit-animation: ANIM-OPACITY-PULSE 1s ease-in-out infinite alternate;
  /* Safari 4+ */
  -moz-animation: ANIM-OPACITY-PULSE 1s ease-in-out infinite alternate;
  /* Fx 5+ */
  -o-animation: ANIM-OPACITY-PULSE 1s ease-in-out infinite alternate;
  /* Opera 12+ */
  animation: ANIM-OPACITY-PULSE 1s ease-in-out infinite alternate; }

.border-pulse {
  position: relative;
  /*box-shadow: 5px 5px 5px $light-grey;*/
  /*@include animation-2(ANIM-BORDER-COLOR-PULSE, $border-pulse-duration, $border-pulse-curve, infinite, alternate, ANIM-SCALE-PULSE, $border-pulse-duration, $border-pulse-curve, infinite, alternate);*/
  -webkit-animation: ANIM-BORDER-COLOR-PULSE 1s ease-in-out infinite alternate;
  /* Safari 4+ */
  -moz-animation: ANIM-BORDER-COLOR-PULSE 1s ease-in-out infinite alternate;
  /* Fx 5+ */
  -o-animation: ANIM-BORDER-COLOR-PULSE 1s ease-in-out infinite alternate;
  /* Opera 12+ */
  animation: ANIM-BORDER-COLOR-PULSE 1s ease-in-out infinite alternate;
  /*@include animation(ANIM-BOX-SHADOW-TRANSPARENT, $border-pulse-duration, $border-pulse-curve, infinite, alternate);*/ }
  .border-pulse.button-kid2 {
    border: 3px solid #4b9544;
    border-radius: 50%;
    background-size: 106%; }

.scale-pulse {
  -webkit-animation: ANIM-BORDER-COLOR-PULSE 1s ease-in-out infinite alternate, ANIM-SCALE-PULSE 1s ease-in-out infinite alternate;
  /* Safari 4+ */
  -moz-animation: ANIM-BORDER-COLOR-PULSE 1s ease-in-out infinite alternate, ANIM-SCALE-PULSE 1s ease-in-out infinite alternate;
  /* Fx 5+ */
  -o-animation: ANIM-BORDER-COLOR-PULSE 1s ease-in-out infinite alternate, ANIM-SCALE-PULSE 1s ease-in-out infinite alternate;
  /* Opera 12+ */
  animation: ANIM-BORDER-COLOR-PULSE 1s ease-in-out infinite alternate, ANIM-SCALE-PULSE 1s ease-in-out infinite alternate; }

.drop-shadow {
  -webkit-filter: drop-shadow(4px 4px rgba(6, 6, 6, 0.6)); }

.token-container {
  /*overflow: scroll;*/ }

.rotate-infinite {
  transform-origin: center center;
  -webkit-transform-origin: center center;
  -webkit-animation: ANIM-ROTATE 1s linear infinite ;
  /* Safari 4+ */
  -moz-animation: ANIM-ROTATE 1s linear infinite ;
  /* Fx 5+ */
  -o-animation: ANIM-ROTATE 1s linear infinite ;
  /* Opera 12+ */
  animation: ANIM-ROTATE 1s linear infinite ; }
  .rotate-infinite.origin-left-20 {
    transform-origin: 20% center;
    -webkit-transform-origin: 20% center; }
  .rotate-infinite.origin-bottom-right {
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%; }
  .rotate-infinite.slow {
    -webkit-animation: ANIM-ROTATE 2s linear infinite ;
    /* Safari 4+ */
    -moz-animation: ANIM-ROTATE 2s linear infinite ;
    /* Fx 5+ */
    -o-animation: ANIM-ROTATE 2s linear infinite ;
    /* Opera 12+ */
    animation: ANIM-ROTATE 2s linear infinite ; }
  .rotate-infinite.slower {
    -webkit-animation: ANIM-ROTATE 4s linear infinite ;
    /* Safari 4+ */
    -moz-animation: ANIM-ROTATE 4s linear infinite ;
    /* Fx 5+ */
    -o-animation: ANIM-ROTATE 4s linear infinite ;
    /* Opera 12+ */
    animation: ANIM-ROTATE 4s linear infinite ; }
  .rotate-infinite.slowest {
    -webkit-animation: ANIM-ROTATE 8s linear infinite ;
    /* Safari 4+ */
    -moz-animation: ANIM-ROTATE 8s linear infinite ;
    /* Fx 5+ */
    -o-animation: ANIM-ROTATE 8s linear infinite ;
    /* Opera 12+ */
    animation: ANIM-ROTATE 8s linear infinite ; }
  .rotate-infinite.minutely {
    -webkit-animation: ANIM-ROTATE 60s linear infinite ;
    /* Safari 4+ */
    -moz-animation: ANIM-ROTATE 60s linear infinite ;
    /* Fx 5+ */
    -o-animation: ANIM-ROTATE 60s linear infinite ;
    /* Opera 12+ */
    animation: ANIM-ROTATE 60s linear infinite ; }

.jump {
  -webkit-animation: JUMP 1s linear infinite ;
  /* Safari 4+ */
  -moz-animation: JUMP 1s linear infinite ;
  /* Fx 5+ */
  -o-animation: JUMP 1s linear infinite ;
  /* Opera 12+ */
  animation: JUMP 1s linear infinite ;
  transform-origin: center bottom;
  -webkit-transform-origin: center bottom; }

.jump-center {
  -webkit-animation: JUMP-CENTER-71 1s linear infinite ;
  /* Safari 4+ */
  -moz-animation: JUMP-CENTER-71 1s linear infinite ;
  /* Fx 5+ */
  -o-animation: JUMP-CENTER-71 1s linear infinite ;
  /* Opera 12+ */
  animation: JUMP-CENTER-71 1s linear infinite ;
  transform-origin: center bottom;
  -webkit-transform-origin: center bottom; }
  .jump-center.delay-500 {
    -webkit-animation-delay: 500ms;
    /* Chrome, Safari, Opera */
    animation-delay: 500ms; }
  .jump-center.delay-1000 {
    -webkit-animation-delay: 1000ms;
    /* Chrome, Safari, Opera */
    animation-delay: 1000ms; }
  .jump-center.delay-2000 {
    -webkit-animation-delay: 2000ms;
    /* Chrome, Safari, Opera */
    animation-delay: 2000ms; }

.card-bouncy, .task-chart:before, .task-chart:after {
  transition: 500ms cubic-bezier(0.68, 0, 0.265, 1.55) all !important;
  -webkit-transition: 500ms cubic-bezier(0.68, 0, 0.265, 1.55) all !important;
  -moz-transition: 500ms cubic-bezier(0.68, 0, 0.265, 1.55) all !important;
  -o-transition: 500ms cubic-bezier(0.68, 0, 0.265, 1.55) all !important; }
  .card-bouncy.task-complete, .task-complete.task-chart:before, .task-complete.task-chart:after {
    transition: 500ms cubic-bezier(0.68, 0, 0.265, 1) all !important;
    -webkit-transition: 500ms cubic-bezier(0.68, 0, 0.265, 1) all !important;
    -moz-transition: 500ms cubic-bezier(0.68, 0, 0.265, 1) all !important;
    -o-transition: 500ms cubic-bezier(0.68, 0, 0.265, 1) all !important; }

.note {
  margin: 15px 10px 0 10px; }

.card {
  border-radius: 5px;
  box-shadow: none;
  margin: 15px 10px; }

.card-task .item {
  border-width: 0px; }

.border-top {
  border-top-width: 1px !important; }

.border-right {
  border-right-width: 1px !important; }

.card-task .item p {
  color: #999999;
  font-size: 100%; }

.item {
  overflow: visible; }

.item .text-routine {
  width: 100%;
  font-size: 22px;
  text-align: center;
  -webkit-font-smoothing: subpixel-antialiased; }
  .item .text-routine span {
    vertical-align: sub; }

.item[ng-click]:active,
.item[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  .item[ng-click]:active .item,
  .item[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  .item[ng-click]:active.item-red,
  .item[ng-click].activated.item-red {
    color: #fff !important; }
    .item[ng-click]:active.item-red span,
    .item[ng-click].activated.item-red span {
      color: #fff; }
  .item[ng-click]:active img,
  .item[ng-click].activated img {
    opacity: 0.7; }
  .item[ng-click]:active p,
  .item[ng-click].activated p {
    color: #fff; }

.list[ng-click]:active,
.list[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  .list[ng-click]:active .item,
  .list[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  .list[ng-click]:active.item-red,
  .list[ng-click].activated.item-red {
    color: #fff !important; }
    .list[ng-click]:active.item-red span,
    .list[ng-click].activated.item-red span {
      color: #fff; }
  .list[ng-click]:active img,
  .list[ng-click].activated img {
    opacity: 0.7; }
  .list[ng-click]:active p,
  .list[ng-click].activated p {
    color: #fff; }

.card-foreground[ng-click]:active,
.card-foreground[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  .card-foreground[ng-click]:active .item,
  .card-foreground[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  .card-foreground[ng-click]:active.item-red,
  .card-foreground[ng-click].activated.item-red {
    color: #fff !important; }
    .card-foreground[ng-click]:active.item-red span,
    .card-foreground[ng-click].activated.item-red span {
      color: #fff; }
  .card-foreground[ng-click]:active img,
  .card-foreground[ng-click].activated img {
    opacity: 0.7; }
  .card-foreground[ng-click]:active p,
  .card-foreground[ng-click].activated p {
    color: #fff; }

.col[ng-click]:active,
.col[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  .col[ng-click]:active .item,
  .col[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  .col[ng-click]:active.item-red,
  .col[ng-click].activated.item-red {
    color: #fff !important; }
    .col[ng-click]:active.item-red span,
    .col[ng-click].activated.item-red span {
      color: #fff; }
  .col[ng-click]:active img,
  .col[ng-click].activated img {
    opacity: 0.7; }
  .col[ng-click]:active p,
  .col[ng-click].activated p {
    color: #fff; }

.add-child-inner[ng-click]:active,
.add-child-inner[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  .add-child-inner[ng-click]:active .item,
  .add-child-inner[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  .add-child-inner[ng-click]:active.item-red,
  .add-child-inner[ng-click].activated.item-red {
    color: #fff !important; }
    .add-child-inner[ng-click]:active.item-red span,
    .add-child-inner[ng-click].activated.item-red span {
      color: #fff; }
  .add-child-inner[ng-click]:active img,
  .add-child-inner[ng-click].activated img {
    opacity: 0.7; }
  .add-child-inner[ng-click]:active p,
  .add-child-inner[ng-click].activated p {
    color: #fff; }

.edit-pic-icon[ng-click]:active,
.edit-pic-icon[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  .edit-pic-icon[ng-click]:active .item,
  .edit-pic-icon[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  .edit-pic-icon[ng-click]:active.item-red,
  .edit-pic-icon[ng-click].activated.item-red {
    color: #fff !important; }
    .edit-pic-icon[ng-click]:active.item-red span,
    .edit-pic-icon[ng-click].activated.item-red span {
      color: #fff; }
  .edit-pic-icon[ng-click]:active img,
  .edit-pic-icon[ng-click].activated img {
    opacity: 0.7; }
  .edit-pic-icon[ng-click]:active p,
  .edit-pic-icon[ng-click].activated p {
    color: #fff; }

.routine-action-button[ng-click]:active,
.routine-action-button[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  .routine-action-button[ng-click]:active .item,
  .routine-action-button[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  .routine-action-button[ng-click]:active.item-red,
  .routine-action-button[ng-click].activated.item-red {
    color: #fff !important; }
    .routine-action-button[ng-click]:active.item-red span,
    .routine-action-button[ng-click].activated.item-red span {
      color: #fff; }
  .routine-action-button[ng-click]:active img,
  .routine-action-button[ng-click].activated img {
    opacity: 0.7; }
  .routine-action-button[ng-click]:active p,
  .routine-action-button[ng-click].activated p {
    color: #fff; }

.button-positive[ng-click]:active,
.button-positive[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  .button-positive[ng-click]:active .item,
  .button-positive[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  .button-positive[ng-click]:active.item-red,
  .button-positive[ng-click].activated.item-red {
    color: #fff !important; }
    .button-positive[ng-click]:active.item-red span,
    .button-positive[ng-click].activated.item-red span {
      color: #fff; }
  .button-positive[ng-click]:active img,
  .button-positive[ng-click].activated img {
    opacity: 0.7; }
  .button-positive[ng-click]:active p,
  .button-positive[ng-click].activated p {
    color: #fff; }

.icon[ng-click]:active,
.icon[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  .icon[ng-click]:active .item,
  .icon[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  .icon[ng-click]:active.item-red,
  .icon[ng-click].activated.item-red {
    color: #fff !important; }
    .icon[ng-click]:active.item-red span,
    .icon[ng-click].activated.item-red span {
      color: #fff; }
  .icon[ng-click]:active img,
  .icon[ng-click].activated img {
    opacity: 0.7; }
  .icon[ng-click]:active p,
  .icon[ng-click].activated p {
    color: #fff; }

.button-right-options[ng-click]:active,
.button-right-options[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  .button-right-options[ng-click]:active .item,
  .button-right-options[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  .button-right-options[ng-click]:active.item-red,
  .button-right-options[ng-click].activated.item-red {
    color: #fff !important; }
    .button-right-options[ng-click]:active.item-red span,
    .button-right-options[ng-click].activated.item-red span {
      color: #fff; }
  .button-right-options[ng-click]:active img,
  .button-right-options[ng-click].activated img {
    opacity: 0.7; }
  .button-right-options[ng-click]:active p,
  .button-right-options[ng-click].activated p {
    color: #fff; }

.enable-routine[ng-click]:active,
.enable-routine[ng-click].activated {
  background-color: transparent !important;
  border-color: transparent;
  color: #D9D9D9; }
  .enable-routine[ng-click]:active .item,
  .enable-routine[ng-click].activated .item {
    background-color: transparent !important; }
  .enable-routine[ng-click]:active.item-red,
  .enable-routine[ng-click].activated.item-red {
    color: #D9D9D9 !important; }
    .enable-routine[ng-click]:active.item-red span,
    .enable-routine[ng-click].activated.item-red span {
      color: #D9D9D9; }
  .enable-routine[ng-click]:active img,
  .enable-routine[ng-click].activated img {
    opacity: 0.7; }
  .enable-routine[ng-click]:active p,
  .enable-routine[ng-click].activated p {
    color: #D9D9D9; }

.button-change-routine[ng-click]:active,
.button-change-routine[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  .button-change-routine[ng-click]:active .item,
  .button-change-routine[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  .button-change-routine[ng-click]:active.item-red,
  .button-change-routine[ng-click].activated.item-red {
    color: #fff !important; }
    .button-change-routine[ng-click]:active.item-red span,
    .button-change-routine[ng-click].activated.item-red span {
      color: #fff; }
  .button-change-routine[ng-click]:active img,
  .button-change-routine[ng-click].activated img {
    opacity: 0.7; }
  .button-change-routine[ng-click]:active p,
  .button-change-routine[ng-click].activated p {
    color: #fff; }

img[ng-click]:active,
img[ng-click].activated {
  background-color: #D9D9D9 !important;
  border-color: transparent;
  color: #fff; }
  img[ng-click]:active .item,
  img[ng-click].activated .item {
    background-color: #D9D9D9 !important; }
  img[ng-click]:active.item-red,
  img[ng-click].activated.item-red {
    color: #fff !important; }
    img[ng-click]:active.item-red span,
    img[ng-click].activated.item-red span {
      color: #fff; }
  img[ng-click]:active img,
  img[ng-click].activated img {
    opacity: 0.7; }
  img[ng-click]:active p,
  img[ng-click].activated p {
    color: #fff; }

p[ng-click]:active,
p[ng-click].activated {
  transform: translateY(4px);
  -webkit-transform: translateY(4px); }

.item.item-red {
  background-color: #fbe4e0;
  color: #b93a25; }

.item.item-blue {
  background-color: #dee8f2;
  color: #3c80a5; }
  .item.item-blue h2,
  .item.item-blue h3,
  .item.item-blue i,
  .item.item-blue .horizontal-flex {
    color: #3c80a5 !important; }

.list.card {
  border: 1px solid #999999; }

.item.item-body h1 {
  margin-top: 0; }

.list-inset .item:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px; }

.list-inset .item:last-child {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px; }

.list-inset .border-radius {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px; }

.list-inset .item:last-of-type {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px; }

.card .item:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px; }

.card .item:last-child {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px; }

.task-reward p {
  color: inherit !important;
  white-space: nowrap; }

.task-flag {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  background-color: #ed7b59;
  border: 2px solid #E64C30;
  color: white;
  margin-left: -.5%;
  margin-right: -.5%;
  margin-top: -.5%;
  padding-top: 3%;
  padding-bottom: 3%; }
  .task-flag p {
    color: white !important; }

.task-timer {
  position: absolute;
  right: 5%;
  width: 50%; }
  .task-timer .task-timer-icon {
    max-height: 83.9px;
    width: 100%; }
  .task-timer.disabled {
    -webkit-filter: saturate(30%); }

.routine-container .card.card-task .task-icon-wrapper {
  height: 30vh;
  width: 30vh;
  margin-top: 40px;
  left: 50%;
  transform: translateX(-50%); }

.card-task .task-icon-wrapper {
  background-image: url("../images/icon-circle.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  height: 75%; }
  .card-task .task-icon-wrapper .thumbnail-wrapper {
    border: 8px solid #67aada;
    transition: border-color 1000ms; }

.card-task .task-icon {
  position: absolute;
  border-radius: 50%; }
  .card-task .task-icon.bigger-icon {
    height: 90%;
    width: auto; }

.card-task .avatar-icon-wrapper {
  background: none; }

.card-task .avatar-icon {
  border: 5px solid #67aada; }

.card-task .task-time-minimum-bar {
  fill: #67aada;
  transform: translate3d(40px, 0, 0) rotate(0) scale(0, 1) ;
  -webkit-transform: translate3d(40px, 0, 0) rotate(0) scale(0, 1) ; }

.card.card-task {
  padding-top: 0;
  border: 1px solid #ddd;
  border-radius: 12px;
  border: solid #5795B6 4px;
  top: 46%;
  height: 88%;
  width: 40%;
  z-index: 20; }
  .card.card-task .task-top {
    height: 85%; }
    .card.card-task .task-top .task-reward {
      width: 40%; }
      .card.card-task .task-top .task-reward .task-reward-worth {
        top: 28px;
        left: 16px; }
        .card.card-task .task-top .task-reward .task-reward-worth p {
          font-size: 22px; }
    .card.card-task .task-top .task-icon-wrapper {
      background-image: none; }
    .card.card-task .task-top .task-icon.bigger-icon {
      height: 100%;
      width: auto;
      border: 10px solid #67aada;
      transition: 1s ease border-color ;
      -webkit-transition: 1s ease border-color ;
      -moz-transition: 1s ease border-color ;
      -o-transition: 1s ease border-color ; }
    .card.card-task .task-top .task-timer-color-group {
      transition: 1s ease fill ;
      -webkit-transition: 1s ease fill ;
      -moz-transition: 1s ease fill ;
      -o-transition: 1s ease fill ; }
  .card.card-task .task-bottom {
    height: 15%;
    padding: 15px; }
  .card.card-task .task-icon-wrapper {
    margin-top: 55px; }
  .card.card-task .task-timer {
    width: 38%; }

.card.card-task.timer-low .task-timer-color-group {
  fill: #FBC010; }

.card.card-task.timer-low .task-top .task-icon.bigger-icon {
  border-color: #FBC010; }

.card.card-task.timer-low .thumbnail-wrapper {
  border-color: #FBC010; }

.card.card-task.timer-lower .task-timer-color-group, .card.card-task.timer-due .task-timer-color-group {
  fill: #E64C30; }

.card.card-task.timer-lower .task-top .task-icon.bigger-icon, .card.card-task.timer-due .task-top .task-icon.bigger-icon {
  border-color: #E64C30; }

.card.card-task.timer-lower .thumbnail-wrapper, .card.card-task.timer-due .thumbnail-wrapper {
  border-color: #E64C30; }

.card-task.task-waiting-0 {
  transform: translate3d(120%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(120%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-0 {
  z-index: 0; }

.card-task.task-waiting-1 {
  transform: translate3d(190%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(190%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-1 {
  z-index: 1; }

.card-task.task-waiting-2 {
  transform: translate3d(260%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(260%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-2 {
  z-index: 2; }

.card-task.task-waiting-3 {
  transform: translate3d(330%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(330%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-3 {
  z-index: 3; }

.card-task.task-waiting-4 {
  transform: translate3d(400%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(400%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-4 {
  z-index: 4; }

.card-task.task-waiting-5 {
  transform: translate3d(470%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(470%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-5 {
  z-index: 5; }

.card-task.task-waiting-6 {
  transform: translate3d(540%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(540%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-6 {
  z-index: 6; }

.card-task.task-waiting-7 {
  transform: translate3d(610%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(610%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-7 {
  z-index: 7; }

.card-task.task-waiting-8 {
  transform: translate3d(680%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(680%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-8 {
  z-index: 8; }

.card-task.task-waiting-9 {
  transform: translate3d(750%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(750%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-9 {
  z-index: 9; }

.card-task.task-waiting-10 {
  transform: translate3d(820%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(820%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-10 {
  z-index: 10; }

.card-task.task-waiting-11 {
  transform: translate3d(890%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(890%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-11 {
  z-index: 11; }

.card-task.task-waiting-12 {
  transform: translate3d(960%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(960%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-12 {
  z-index: 12; }

.card-task.task-waiting-13 {
  transform: translate3d(1030%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1030%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-13 {
  z-index: 13; }

.card-task.task-waiting-14 {
  transform: translate3d(1100%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1100%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-14 {
  z-index: 14; }

.card-task.task-waiting-15 {
  transform: translate3d(1170%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1170%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-15 {
  z-index: 15; }

.card-task.task-waiting-16 {
  transform: translate3d(1240%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1240%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-16 {
  z-index: 16; }

.card-task.task-waiting-17 {
  transform: translate3d(1310%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1310%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-17 {
  z-index: 17; }

.card-task.task-waiting-18 {
  transform: translate3d(1380%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1380%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-18 {
  z-index: 18; }

.card-task.task-waiting-19 {
  transform: translate3d(1450%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1450%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-19 {
  z-index: 19; }

.card-task.task-waiting-20 {
  transform: translate3d(1520%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1520%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-20 {
  z-index: 20; }

.card-task.task-waiting-21 {
  transform: translate3d(1590%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1590%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-21 {
  z-index: 21; }

.card-task.task-waiting-22 {
  transform: translate3d(1660%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1660%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-22 {
  z-index: 22; }

.card-task.task-waiting-23 {
  transform: translate3d(1730%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1730%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-23 {
  z-index: 23; }

.card-task.task-waiting-24 {
  transform: translate3d(1800%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1800%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-24 {
  z-index: 24; }

.card-task.task-waiting-25 {
  transform: translate3d(1870%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1870%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-25 {
  z-index: 25; }

.card-task.task-waiting-26 {
  transform: translate3d(1940%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(1940%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-26 {
  z-index: 26; }

.card-task.task-waiting-27 {
  transform: translate3d(2010%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2010%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-27 {
  z-index: 27; }

.card-task.task-waiting-28 {
  transform: translate3d(2080%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2080%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-28 {
  z-index: 28; }

.card-task.task-waiting-29 {
  transform: translate3d(2150%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2150%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-29 {
  z-index: 29; }

.card-task.task-waiting-30 {
  transform: translate3d(2220%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2220%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-30 {
  z-index: 30; }

.card-task.task-waiting-31 {
  transform: translate3d(2290%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2290%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-31 {
  z-index: 31; }

.card-task.task-waiting-32 {
  transform: translate3d(2360%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2360%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-32 {
  z-index: 32; }

.card-task.task-waiting-33 {
  transform: translate3d(2430%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2430%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-33 {
  z-index: 33; }

.card-task.task-waiting-34 {
  transform: translate3d(2500%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2500%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-34 {
  z-index: 34; }

.card-task.task-waiting-35 {
  transform: translate3d(2570%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2570%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-35 {
  z-index: 35; }

.card-task.task-waiting-36 {
  transform: translate3d(2640%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2640%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-36 {
  z-index: 36; }

.card-task.task-waiting-37 {
  transform: translate3d(2710%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2710%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-37 {
  z-index: 37; }

.card-task.task-waiting-38 {
  transform: translate3d(2780%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2780%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-38 {
  z-index: 38; }

.card-task.task-waiting-39 {
  transform: translate3d(2850%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2850%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-39 {
  z-index: 39; }

.card-task.task-waiting-40 {
  transform: translate3d(2920%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2920%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-40 {
  z-index: 40; }

.card-task.task-waiting-41 {
  transform: translate3d(2990%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(2990%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-41 {
  z-index: 41; }

.card-task.task-waiting-42 {
  transform: translate3d(3060%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(3060%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-42 {
  z-index: 42; }

.card-task.task-waiting-43 {
  transform: translate3d(3130%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(3130%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-43 {
  z-index: 43; }

.card-task.task-waiting-44 {
  transform: translate3d(3200%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(3200%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-44 {
  z-index: 44; }

.card-task.task-waiting-45 {
  transform: translate3d(3270%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(3270%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-45 {
  z-index: 45; }

.card-task.task-waiting-46 {
  transform: translate3d(3340%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(3340%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-46 {
  z-index: 46; }

.card-task.task-waiting-47 {
  transform: translate3d(3410%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(3410%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-47 {
  z-index: 47; }

.card-task.task-waiting-48 {
  transform: translate3d(3480%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(3480%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-48 {
  z-index: 48; }

.card-task.task-waiting-49 {
  transform: translate3d(3550%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(3550%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-49 {
  z-index: 49; }

.card-task.task-waiting-50 {
  transform: translate3d(3620%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(3620%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }

.z-index-50 {
  z-index: 50; }

.card-task.task-running.task-waiting-0 {
  transform: translate3d(71%, -50%, 0) rotateX(0deg) rotateY(-360deg) rotateZ(0deg) scale3d(1, 1, 1) ;
  -webkit-transform: translate3d(71%, -50%, 0) rotateX(0deg) rotateY(-360deg) rotateZ(0deg) scale3d(1, 1, 1) ;
  z-index: -1; }

.transition-enabled-5000.ng-hide {
  opacity: 0; }

.transition-enabled-5000 {
  opacity: 1; }

.transition-enabled-5000 {
  -webkit-transition: all 5s linear;
  transition: all 5s linear; }

.transition-enabled-500.ng-hide {
  opacity: 0; }

.transition-enabled-500 {
  opacity: 1; }

.transition-enabled-500 {
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear; }

.transition-enabled-1000.ng-hide-add.ng-hide-add-active {
  opacity: 0; }

.transition-enabled-100 {
  -webkit-transition: all 100ms linear;
  transition: all 100ms linear; }

.transition-enabled-1000.ng-hide-add {
  opacity: 1; }

.transition-enabled-1000 {
  transition: 1000ms linear all ;
  -webkit-transition: 1000ms linear all ;
  -moz-transition: 1000ms linear all ;
  -o-transition: 1000ms linear all ; }

.transition-enabled-500,
.task-icon-wrapper,
.task-timer,
.task-reward,
.task-text-scaled {
  transition: 500ms linear all ;
  -webkit-transition: 500ms linear all ;
  -moz-transition: 500ms linear all ;
  -o-transition: 500ms linear all ; }

.card-task.task-complete.task-complete-0 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(335deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(335deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-1 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-24deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-24deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-2 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-23deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-23deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-3 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-22deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-22deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-4 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(339deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(339deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-5 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-20deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-20deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-6 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-19deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-19deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-7 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-18deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-18deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-8 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(343deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(343deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-9 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-16deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-16deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-10 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-15deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-15deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-11 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-14deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-14deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-12 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(347deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(347deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-13 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-12deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-12deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-14 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-11deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-11deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-15 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-10deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-10deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-16 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(351deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(351deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-17 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-8deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-8deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-18 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-7deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-7deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-19 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-6deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-6deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-20 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(355deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(355deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-21 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-4deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-4deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-22 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-3deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-3deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-23 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-2deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-2deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-24 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(359deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(359deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-25 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-26 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(1deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(1deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-27 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(2deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(2deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-28 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-357deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-357deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-29 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(4deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(4deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-30 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(5deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(5deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-31 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(6deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(6deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-32 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-353deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-353deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-33 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(8deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(8deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-34 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(9deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(9deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-35 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(10deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(10deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-36 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-349deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-349deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-37 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(12deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(12deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-38 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(13deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(13deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-39 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(14deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(14deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-40 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-345deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-345deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-41 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(16deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(16deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-42 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(17deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(17deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-43 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(18deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(18deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-44 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-341deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-341deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-45 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(20deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(20deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-46 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(21deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(21deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-47 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(22deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(22deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-48 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-337deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-337deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-49 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(24deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(24deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-complete.task-complete-50 {
  transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(25deg) scale3d(0.65, 0.65, 1) ;
  -webkit-transform: translate3d(-65%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(25deg) scale3d(0.65, 0.65, 1) ;
  z-index: -1;
  transform-origin: 15% 50%;
  -webkit-transform-origin: 15% 50%; }

.card-task.task-running.task-complete-place-holder {
  background-image: url(../images/card-outline.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 30%;
  height: 70%;
  top: 50%;
  margin-left: -15%;
  -moz-transform: rotate(10deg) translateY(-50%) scale(0.5);
  -ms-transform: rotate(10deg) translateY(-50%) scale(0.5);
  -webkit-transform: rotate(10deg) translateY(-50%) scale(0.5);
  transform: rotate(10deg) translateY(-50%) scale(0.5); }

.card-task.task-complete-place-holder .task-icon {
  font-size: 400%;
  color: white; }

.center-horizontal {
  margin-left: auto;
  margin-right: auto; }
  .center-horizontal.item {
    margin-left: auto !important;
    margin-right: auto !important; }

.card-task.center-horizontal {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%); }

.inline-block {
  display: inline-block; }

.slack-prompt-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }

.slack-prompt-bg {
  transform: translateZ(-100px);
  -webkit-transform: translateZ(-100px); }

.routine-finish-cover,
.reward-cover,
.routine-start-prompt,
.slack-prompt {
  z-index: 50;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

.routine-start-prompt {
  z-index: 300 !important; }
  .routine-start-prompt .buttons-container div i {
    vertical-align: middle; }

.routine-finish-cover,
.routine-start-prompt,
.slack-prompt {
  color: white;
  background-color: rgba(102, 172, 220, 0.8); }

.slack-prompt {
  padding-top: 1%; }
  .slack-prompt h1,
  .slack-prompt h2 {
    color: inherit; }
  .slack-prompt .image-container {
    width: 45%; }
  .slack-prompt .button-start-routine {
    margin-top: 0; }
  .slack-prompt .image-container {
    background: url(../images/starburst.svg) no-repeat center;
    width: 50%;
    height: 50%;
    position: relative; }
    .slack-prompt .image-container .slack-icon-holder {
      background-image: url(../images/slack-icon-circle.svg);
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      width: 130px;
      height: 130px;
      top: 42% !important; }
      .slack-prompt .image-container .slack-icon-holder img {
        position: absolute;
        width: 70%;
        height: 70%;
        border-radius: 50%; }
        .slack-prompt .image-container .slack-icon-holder img.bigger-icon {
          width: 90%;
          height: 90%; }

.routine-start-prompt .prompt-wrap {
  padding-top: 100px;
  padding-bottom: 100px;
  width: 75%;
  height: 100%;
  position: relative;
  margin: 0 auto; }

.routine-start-prompt h2 {
  margin-bottom: 20px; }

.routine-start-prompt h1 {
  font-size: 250%;
  margin-bottom: 20px; }

.routine-start-prompt hr {
  width: 9%;
  height: 3px;
  margin: auto;
  background-color: white;
  border: none;
  margin-top: 4%;
  margin-bottom: 4%; }

.routine-start-prompt img {
  width: 6%; }

.routine-start-prompt .buttons-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%); }
  .routine-start-prompt .buttons-container i {
    font-size: 125%; }

.no-routine-scheduled {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  color: white; }
  .no-routine-scheduled .message {
    text-align: center; }
  .no-routine-scheduled h2 {
    font-size: 50px; }
  .no-routine-scheduled h3,
  .no-routine-scheduled h4,
  .no-routine-scheduled h5,
  .no-routine-scheduled h2,
  .no-routine-scheduled h1 {
    color: inherit; }
  .no-routine-scheduled .exclamation-icon {
    width: 80px;
    margin: 20px auto 20px auto; }
    .no-routine-scheduled .exclamation-icon img {
      width: 100%;
      height: auto; }

.button-start-routine {
  background-repeat: no-repeat;
  background-size: contain;
  width: 300px;
  height: 50px;
  background-color: #69c04e;
  border-radius: 100px; }
  .button-start-routine.button-manage-prizes {
    width: 240px;
    background-color: white; }
    .button-start-routine.button-manage-prizes h2 {
      color: #FF7600;
      font-size: 100%; }
  .button-start-routine:active {
    background: #006e2e;
    /* Old browsers */
    background: -moz-linear-gradient(top, #006e2e 0%, #00891d 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #006e2e 0%, #00891d 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #006e2e 0%, #00891d 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006e2e', endColorstr='#00891d', GradientType=0);
    transform: translateY(2px);
    -webkit-transform: translateY(2px); }
  .button-start-routine:after {
    content: url(../images/button-start-routine-touch.svg);
    display: none; }
  .button-start-routine span,
  .button-start-routine h2 {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%); }

.button-change-routine {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  text-decoration: underline; }
  .button-change-routine h1,
  .button-change-routine h2,
  .button-change-routine h3,
  .button-change-routine h4,
  .button-change-routine h5 {
    text-decoration: inherit;
    display: inline-block; }
  .button-change-routine:active {
    transform: translateY(2px);
    -webkit-transform: translateY(2px); }

.spacer {
  height: 30px; }

.manage-prizes-button-area,
.routine-mode-prizes {
  display: grid;
  padding-top: 0;
  text-align: center; }
  .manage-prizes-button-area .button-start-routine,
  .routine-mode-prizes .button-start-routine {
    color: #FF7600; }
  .manage-prizes-button-area img,
  .routine-mode-prizes img {
    width: 12%; }

.manage-prizes-button-area .star-count,
.routine-mode-prizes .star-count {
  vertical-align: middle;
  margin-bottom: 10px; }

.button-modal-message {
  background-image: url(../images/button-start-routine.svg);
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 210px;
  margin: 2% auto; }
  .button-modal-message h1,
  .button-modal-message h2,
  .button-modal-message h3,
  .button-modal-message h4,
  .button-modal-message h5 {
    color: white;
    margin: 5px 15px; }
  .button-modal-message:active {
    background-image: url(../images/button-start-routine-touch.svg);
    transform: translateY(2px);
    -webkit-transform: translateY(2px); }

.reward-cover {
  background-color: white;
  color: #666;
  opacity: .8; }

.reward-cover > div,
.routine-finish-cover > div {
  position: absolute; }

.reward-cover img,
.routine-finish-cover img {
  width: 15%; }

.reward-cover h1 {
  display: inline; }

.routine-finish-cover > div,
.routine-start-prompt > div {
  text-align: center; }

.routine-finish-cover h1,
.routine-finish-cover h2 {
  color: white;
  text-align: center; }

.routine-start-prompt h1,
.routine-start-prompt h2,
.routine-start-prompt h3,
.routine-start-prompt h4,
.routine-start-prompt h5 {
  color: white;
  white-space: nowrap;
  text-align: center; }

.center-vertical {
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%); }

.center-horizontal.center-vertical {
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%); }

.routine-prompt-thumbs-up {
  width: 40%;
  max-width: 150px;
  margin: 2% auto 0 auto; }
  .routine-prompt-thumbs-up img {
    width: 100%; }

h3.modal-message {
  color: #67aada;
  font-size: 30px;
  margin-top: 5%; }

h4.modal-message {
  color: #67aada;
  font-size: 22px;
  margin-bottom: 0; }

.routine-timer {
  width: 80%;
  height: 60px;
  margin-top: 1.5%;
  position: relative;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0); }
  .routine-timer .task-time-container {
    background-image: url("../images/timeline-shape.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    width: 100%;
    height: 30%;
    position: absolute;
    -webkit-transform: translateZ(0); }
    .routine-timer .task-time-container.center-vertical {
      -webkit-transform: translateY(-50%) translateZ(0); }
    .routine-timer .task-time-container .task-time-floater {
      transition: 1s ease all ;
      -webkit-transition: 1s ease all ;
      -moz-transition: 1s ease all ;
      -o-transition: 1s ease all ;
      height: 100%;
      display: table-cell;
      vertical-align: top;
      background-color: #dce8f0;
      border: 1px solid #c2d7e5; }
      .routine-timer .task-time-container .task-time-floater.slack {
        background-color: #f5f6f7; }
      .routine-timer .task-time-container .task-time-floater.started {
        background-color: #67aada; }
        .routine-timer .task-time-container .task-time-floater.started.timer-low {
          background-color: #FBC010; }
        .routine-timer .task-time-container .task-time-floater.started.timer-lower, .routine-timer .task-time-container .task-time-floater.started.timer-due {
          background-color: #E64C30; }
      .routine-timer .task-time-container .task-time-floater.complete {
        background-color: #61A25C;
        /*background-color: $green;*/ }
      .routine-timer .task-time-container .task-time-floater:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px; }
      .routine-timer .task-time-container .task-time-floater:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px; }
  .routine-timer .routine-timer-foot {
    color: #666;
    white-space: nowrap;
    position: absolute; }
    .routine-timer .routine-timer-foot svg {
      width: 60px;
      height: 60px; }
      .routine-timer .routine-timer-foot svg circle {
        transition-property: fill;
        transition-duration: 1s; }
    .routine-timer .routine-timer-foot.timer-start {
      position: absolute;
      left: -3%;
      top: 110%; }
    .routine-timer .routine-timer-foot.timer-left {
      left: -3.3%;
      z-index: 50; }
    .routine-timer .routine-timer-foot .timer-icon-holder {
      width: 60px;
      height: 60px;
      position: relative; }
      .routine-timer .routine-timer-foot .timer-icon-holder img {
        position: absolute;
        max-width: 50%;
        max-height: 50%;
        border-radius: 50%; }
      .routine-timer .routine-timer-foot .timer-icon-holder .thumbnail-wrapper {
        width: 50%;
        height: 50%;
        position: absolute;
        left: 25%;
        top: 25%; }
      .routine-timer .routine-timer-foot .timer-icon-holder.timer-low circle {
        fill: #FBC010; }
      .routine-timer .routine-timer-foot .timer-icon-holder.timer-lower circle, .routine-timer .routine-timer-foot .timer-icon-holder.timer-due circle {
        fill: #E64C30; }
    .routine-timer .routine-timer-foot.timer-right {
      left: 97%; }

.prize-select {
  font-size: 11px; }

.star-count {
  margin-top: 5px;
  margin-bottom: 5px; }

.reward-milestone {
  background-image: url("../images/prize-milestone.svg");
  width: 50px;
  height: 50px;
  position: relative;
  transform: translateY(-35%);
  -moz-transform: translateY(-35%);
  -ms-transform: translateY(-35%);
  -webkit-transform: translateY(-35%);
  opacity: 0; }

.routine-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

h1,
h2 {
  font-family: "proxima_nova_soft_semibold";
  color: #68697B;
  font-weight: bold; }

h3,
h4 {
  font-family: "proxima_nova_soft_semibold";
  color: #68697B; }

h5,
h6 {
  font-family: "proxima_nova_soft_medium";
  color: #68697B; }

.nav-bar-container h1 {
  font-weight: inherit; }

.nav-bar-container button {
  font-size: 17px; }

.nav-bar-container .right-buttons {
  -webkit-box-align: center ;
  -ms-flex-align: center ;
  -webkit-align-items: center ;
  -moz-align-items: center ;
  align-items: center ; }

body,
input,
button,
select,
textarea {
  font-family: "proxima_nova_soft_regular"; }

input[type="text"] {
  height: auto; }

input[type="number"] {
  height: auto; }

input.input-placeholder:before {
  content: attr(placeholder);
  color: #999999;
  font-weight: bolder;
  width: 100%; }

input.input-placeholder:focus:before {
  content: "";
  width: 0; }

.kid-font {
  font-family: "proxima_nova_soft_regular" !important; }
  .kid-font h1,
  .kid-font h2 {
    font-family: "proxima_nova_soft_bold" !important;
    font-weight: bold; }
  .kid-font h5 {
    font-family: "proxima_nova_soft_medium"; }

.routine-container .routine-header {
  height: 18%; }
  .routine-container .routine-header .column {
    width: 30%; }
  .routine-container .routine-header .column-two {
    width: 40%; }
    .routine-container .routine-header .column-two h1 span {
      white-space: nowrap; }

.routine-container.paused {
  -webkit-filter: grayscale(1); }

.routine-container .routine-tasks {
  color: white;
  z-index: 1;
  height: 100%;
  position: relative;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden; }
  .routine-container .routine-tasks.paused {
    -webkit-filter: grayscale(1); }
  .routine-container .routine-tasks .routine-tasks-background {
    position: absolute;
    z-index: -10;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: white;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0); }
    .routine-container .routine-tasks .routine-tasks-background h1,
    .routine-container .routine-tasks .routine-tasks-background h2,
    .routine-container .routine-tasks .routine-tasks-background h3,
    .routine-container .routine-tasks .routine-tasks-background h4,
    .routine-container .routine-tasks .routine-tasks-background h5 {
      color: inherit; }
  .routine-container .routine-tasks .no-routine-text {
    font-size: 5vw; }
  .routine-container .routine-tasks .sailboat-background {
    background: none; }
    .routine-container .routine-tasks .sailboat-background.sky {
      width: 100%;
      height: 50px;
      background-color: #d2ebec; }
    .routine-container .routine-tasks .sailboat-background.waves {
      width: 100%;
      height: 88px;
      background-color: #d2ebec;
      background-repeat: repeat-x, repeat-x, no-repeat;
      background-position-x: left, left, center;
      background-position-y: bottom, bottom, top;
      background-size: auto, auto, 80px 80px;
      background-image: url("../images/no-routine-wave-front.svg"), url("../images/no-routine-wave-back.svg"), url("../images/no-routine-sailboat.svg");
      display: -webkit-box ;
      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box ;
      /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox ;
      /* TWEENER - IE 10 */
      display: -webkit-flex ;
      /* NEW - Chrome */
      display: flex ; }
    .routine-container .routine-tasks .sailboat-background.water {
      background-color: #66abdc;
      height: 100px;
      width: 100%;
      padding-top: 40px; }
      .routine-container .routine-tasks .sailboat-background.water h1 {
        color: white; }
  .routine-container .routine-tasks .swipe-instruction {
    position: absolute;
    left: 14%;
    height: 20%;
    width: 10%;
    background-image: url("../images/swipe-instruction.svg");
    background-repeat: no-repeat;
    white-space: nowrap; }
  .routine-container .routine-tasks .swipe-right-instruction {
    position: absolute;
    top: 8%;
    right: 3%;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    height: 20%;
    width: 10%;
    background-image: url("../images/swipe-instruction.svg");
    background-repeat: no-repeat;
    white-space: nowrap; }
  .routine-container .routine-tasks .task-reward {
    background-size: contain; }
  .routine-container .routine-tasks .dragging {
    z-index: 100 !important; }

.swipe-instruction p {
  transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg); }

.swipe-right-instruction p {
  transform: scaleX(-1) rotate(10deg);
  -webkit-transform: scaleX(-1) rotate(10deg);
  padding-right: 200%; }

#stay-in-place {
  position: absolute;
  height: 100%; }
  #stay-in-place h3 {
    text-align: center;
    margin-top: 10px;
    font-weight: bold; }

#slide-up-to-place {
  position: fixed;
  display: -webkit-box ;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box ;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox ;
  /* TWEENER - IE 10 */
  display: -webkit-flex ;
  /* NEW - Chrome */
  display: flex ;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 230px;
  background-color: white; }

@media (max-width: 767px) and (orientation: portrait) {
  #slide-up-to-place {
    width: 100%;
    height: 170px; } }

@media (max-width: 767px) and (orientation: landscape) {
  #slide-up-to-place {
    height: 80px; } }

#slide-up-inner {
  display: -webkit-box ;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box ;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox ;
  /* TWEENER - IE 10 */
  display: -webkit-flex ;
  /* NEW - Chrome */
  display: flex ;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  flex: 1 0 auto;
  min-width: 320px;
  height: 100%;
  width: 60%; }
  #slide-up-inner .slide-up-img {
    display: -webkit-box ;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box ;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox ;
    /* TWEENER - IE 10 */
    display: -webkit-flex ;
    /* NEW - Chrome */
    display: flex ;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    width: 80px; }
    #slide-up-inner .slide-up-img img {
      width: 100%;
      border-radius: 50%; }

@media (max-width: 767px) and (orientation: landscape) {
  #slide-up-inner .slide-up-img {
    width: 50px; } }
  #slide-up-inner .slide-up-text {
    padding: 20px;
    width: 210px; }

@media (max-width: 767px) and (orientation: landscape) {
  #slide-up-inner .slide-up-text {
    display: -webkit-box ;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box ;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox ;
    /* TWEENER - IE 10 */
    display: -webkit-flex ;
    /* NEW - Chrome */
    display: flex ;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 0px 20px;
    height: 80px;
    width: 300px; } }

@media (min-width: 768px) and (orientation: landscape) {
  #slide-up-inner .slide-up-text {
    width: 30%; } }

@media (min-width: 768px) and (orientation: portrait) {
  #slide-up-inner .slide-up-text {
    width: 50%; } }
    #slide-up-inner .slide-up-text h5 {
      padding-top: 8px;
      font-weight: bolder;
      width: 90%; }

@media (max-width: 767px) and (orientation: landscape) {
  #slide-up-inner .slide-up-text h5 {
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; } }
    #slide-up-inner .slide-up-text h6 {
      margin-bottom: 16px;
      width: 90%; }

@media (max-width: 767px) and (orientation: landscape) {
  #slide-up-inner .slide-up-text h6 {
    margin: 0;
    padding: 3px 0px 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; } }
    #slide-up-inner .slide-up-text .progress-bar {
      margin-bottom: 20px; }

@media (max-width: 767px) and (orientation: landscape) {
  #slide-up-inner .slide-up-text .progress-bar {
    height: 10px;
    border-radius: 6px;
    background-color: #e2e2e2; } }

.slide-up-font {
  font-size: 14px; }
  @media (min-width: 768px) {
    .slide-up-font {
      font-size: 16px; } }

.footer-box {
  position: relative;
  height: 22%;
  overflow: hidden; }

.slide-card-in {
  bottom: 0;
  transition: all 1s, transform 1s;
  -webkit-transition: all 1s, -webkit-transform 1s; }

.slide-card-out {
  bottom: -250px;
  transition: all 1s, transform 1s;
  -webkit-transition: all 1s, -webkit-transform 1s; }

.routine-container .routine-footer {
  height: 22%;
  position: relative;
  display: block;
  padding-bottom: 0px; }
  .routine-container .routine-footer .routine-name span {
    font-size: 66%; }
  .routine-container .routine-footer .timer-remaining {
    background-image: url(../images/timer-area.svg);
    background-repeat: no-repeat;
    background-size: contain;
    color: #68697B;
    width: 30%;
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 8%;
    padding-right: 8%; }
    .routine-container .routine-footer .timer-remaining .timer-icon {
      display: inline-block;
      width: 20%;
      left: 13%;
      position: absolute; }
    @media (max-width: 767px) {
      .routine-container .routine-footer .timer-remaining {
        display: none; } }

.clear-fix:after {
  content: "";
  display: table;
  clear: both; }

.icon-avatar {
  margin-left: 13.4%;
  color: white; }
  .icon-avatar .avatar-thumbnail-background {
    background-image: url("../images/avatar-circle.svg");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    z-index: 0; }
  .icon-avatar .avatar-thumbnail-border {
    border: 2px solid #67aada;
    border-radius: 50%; }

.icon-avatar .avatar-thumbnail {
  position: relative;
  width: 40px;
  height: 40px;
  z-index: 5; }
  @media (min-width: 768px) {
    .icon-avatar .avatar-thumbnail {
      height: 60px;
      width: 60px; } }

.avatar-thumbnail img {
  position: absolute;
  top: 48%;
  left: 48%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  height: 89%;
  width: 88%; }

.avatar-thumbnail i {
  line-height: 100%;
  font-size: 350%;
  vertical-align: middle; }

.avatar-thumbnail h1,
.avatar-thumbnail h2,
.avatar-thumbnail h3 {
  color: inherit; }

.avatar-status-container {
  height: 55px;
  padding-top: 2%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex; }
  .avatar-status-container .avatar-status {
    padding-top: 8%;
    padding-left: 3%;
    height: 100%;
    width: 100%; }

@media (min-width: 1025px) and (orientation: landscape) {
  .avatar-status-container .avatar-status {
    padding-top: 4%; } }
    .avatar-status-container .avatar-status .avatar-name {
      margin-left: 10%;
      font-size: 120%;
      white-space: nowrap;
      position: relative;
      z-index: 1000;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      max-width: 100px; }
      @media (min-width: 768px) {
        .avatar-status-container .avatar-status .avatar-name {
          max-width: 150px; } }
      @media (min-width: 1024px) {
        .avatar-status-container .avatar-status .avatar-name {
          max-width: 300px; } }
    .avatar-status-container .avatar-status .avatar-reward {
      margin-top: 1%;
      margin-left: 10%;
      width: 100%;
      position: relative;
      z-index: 1000;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      align-items: baseline; }
      .avatar-status-container .avatar-status .avatar-reward img {
        flex-shrink: 0;
        width: 15px; }
  .avatar-status-container .circle-wrapper {
    height: 100%;
    margin-left: -2px; }
    .avatar-status-container .circle-wrapper .avatar-status-semi-circle {
      height: 100%; }

.routine-button {
  background-repeat: no-repeat;
  background-size: 96%;
  width: 60px;
  height: 60px;
  position: relative;
  margin-right: 5%; }
  .routine-button:active {
    transform: translateY(2px);
    -webkit-transform: translateY(2px); }
  .routine-button.disabled {
    -webkit-filter: grayscale(80%); }
  .routine-button:last-child {
    margin-right: 13.4%; }

.routine-button-clock {
  transition: 200ms ease-in-out all ;
  -webkit-transition: 200ms ease-in-out all ;
  -moz-transition: 200ms ease-in-out all ;
  -o-transition: 200ms ease-in-out all ;
  transform: translate3d(-4px, -4px, 0);
  -webkit-transform: translate3d(-4px, -4px, 0);
  fill: white;
  height: 33%;
  -webkit-filter: drop-shadow(4px 4px rgba(6, 6, 6, 0.1)); }
  .routine-button-clock:hover {
    fill: #999999; }
  .routine-button-clock:active, .routine-button-clock.activated {
    transform: translate3d(-2px, -2px, 0);
    -webkit-transform: translate3d(-2px, -2px, 0);
    -webkit-filter: drop-shadow(2px 2px rgba(6, 6, 6, 0.1));
    fill: #999999; }

.button-lock {
  background-image: url(../images/button-lock.svg); }
  .button-lock:active {
    background-image: url(../images/button-lock-touch.svg); }
  .button-lock.locked {
    background-image: url(../images/button-lock-unlocked.svg); }
  .button-lock.locked:active {
    background-image: url(../images/button-lock-unlocked-touch.svg); }

.button-pause {
  background-image: url(../images/button-pause.svg); }
  .button-pause:active {
    background-image: url(../images/button-pause-touch.svg); }
  .button-pause:after {
    content: url(../images/button-pause-touch.svg);
    display: none; }

.button-reset {
  background-image: url(../images/button-reset.svg); }
  .button-reset:active {
    background-image: url(../images/button-reset-touch.svg); }
  .button-reset:after {
    content: url(../images/button-reset-touch.svg);
    display: none; }

.button-kid2 {
  background-image: url(../images/mode-switch-button3.svg); }
  .button-kid2:active {
    background-image: url(../images/mode-switch-button3-touch.svg); }
  .button-kid2:after {
    content: url(../images/mode-switch-button3-touch.svg);
    display: none; }

.routine-container .icon-control {
  margin-right: 10px; }

.text-muted {
  color: #666; }

input.text-muted {
  color: #666 !important; }

.text-muted-light {
  color: #999999; }

.text-muted-light-blue {
  color: #67aada; }

.clear-item-padding-left {
  margin-left: -16px; }

.clear-item-padding-top {
  margin-top: -16px; }

.clear-item-padding-right {
  margin-right: -16px; }

.clear-item-padding-bottom {
  margin-bottom: -16px; }

@font-face {
  font-family: "brili-icons";
  src: url("../fonts/brili-icons.eot");
  src: url("../fonts/brili-icons.eot?#iefix") format("embedded-opentype"), url("../fonts/brili-icons.woff") format("woff"), url("../fonts/brili-icons.ttf") format("truetype"), url("../fonts/brili-icons.svg#brili-icons") format("svg");
  font-weight: normal;
  font-style: normal; }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "brili-icons";
    src: url("../fonts/brili-icons.svg#brili-icons") format("svg"); } }

@font-face {
  font-family: "proxima_nova_soft_regular";
  src: url("../fonts/proxima-nova-soft-regular.ttf") format("truetype"); }

@font-face {
  font-family: "proxima_nova_soft_medium";
  src: url("../fonts/proxima-nova-soft-medium.ttf") format("truetype"); }

@font-face {
  font-family: "proxima_nova_soft_semibold";
  src: url("../fonts/proxima-nova-soft-semibold.ttf") format("truetype"); }

@font-face {
  font-family: "proxima_nova_soft_bold";
  src: url("../fonts/proxima-nova-soft-bold.ttf") format("truetype"); }

/*@font-face {
  font-family: "source-sans-pro-black";
  src: url(../fonts/SourceSansPro-Black.otf) format("opentype");
}

@font-face {
  font-family: "source-sans-pro-bold";
  src: url(../fonts/SourceSansPro-Bold.otf) format("opentype");
}

@font-face {
  font-family: "source-sans-pro-extra-light";
  src: url(../fonts/SourceSansPro-ExtraLight.otf) format("opentype");
}

@font-face {
  font-family: "source-sans-pro-light";
  src: url(../fonts/SourceSansPro-Light.otf) format("opentype");
}

@font-face {
  font-family: "source-sans-pro";
  src: url(../fonts/SourceSansPro-Regular.otf) format("opentype");
}

@font-face {
  font-family: "source-sans-pro-semi-bold";
  src: url(../fonts/SourceSansPro-Semibold.otf) format("opentype");
}*/
.routine-task-history-container {
  background-color: white; }
  .routine-task-history-container .task-update-place-holder {
    height: 136px; }
    .routine-task-history-container .task-update-place-holder h5 {
      color: inherit; }

.routine-task-history-placeholder {
  background-image: url(../images/animation-routine-task-update.gif);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 10em; }
  .routine-task-history-placeholder .routine-task-history-placeholder-cover {
    width: 100%;
    height: 100%; }

.no-routine-placeholder {
  height: 272px; }

.routine-task-history-widget {
  background-color: white; }
  .routine-task-history-widget .routine-header {
    border-top: 1px solid #ddd;
    align-items: center; }
    .routine-task-history-widget .routine-header .icon {
      width: 25px;
      height: 25px; }
      .routine-task-history-widget .routine-header .icon img:first-child {
        width: 25px;
        height: 25px; }
    .routine-task-history-widget .routine-header span {
      font-size: 10px; }
    .routine-task-history-widget .routine-header .routine-state-text i {
      margin-left: 10px; }
  .routine-task-history-widget .tasks-container {
    background-color: #f5f6f7;
    border-top: 1px solid #ddd;
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    height: 100px; }
    .routine-task-history-widget .tasks-container .tasks-slider {
      position: absolute;
      transform: translateX(2000px); }
      .routine-task-history-widget .tasks-container .tasks-slider .task-container {
        width: 80px; }
        .routine-task-history-widget .tasks-container .tasks-slider .task-container .task-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          position: relative; }
          .routine-task-history-widget .tasks-container .tasks-slider .task-container .task-icon .border-overlay {
            border: 4px solid #67aada;
            position: absolute;
            width: 106%;
            height: 106%;
            border-radius: inherit;
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            top: -3%;
            left: -3%;
            right: -3%;
            bottom: -3%;
            -webkit-backface-visibility: hidden;
            -webkit-transform: translateZ(0); }
          .routine-task-history-widget .tasks-container .tasks-slider .task-container .task-icon.active .border-overlay {
            border-color: #4b9544; }
          .routine-task-history-widget .tasks-container .tasks-slider .task-container .task-icon img {
            border-radius: inherit;
            width: 100%;
            height: 100%; }
          .routine-task-history-widget .tasks-container .tasks-slider .task-container .task-icon .image-overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden; }
            .routine-task-history-widget .tasks-container .tasks-slider .task-container .task-icon .image-overlay div {
              padding: 2px 5px;
              width: 100%; }
              .routine-task-history-widget .tasks-container .tasks-slider .task-container .task-icon .image-overlay div i {
                font-size: 140%; }
              .routine-task-history-widget .tasks-container .tasks-slider .task-container .task-icon .image-overlay div span {
                font-size: 70%; }
              .routine-task-history-widget .tasks-container .tasks-slider .task-container .task-icon .image-overlay div.dark {
                background-color: black;
                color: white; }
        .routine-task-history-widget .tasks-container .tasks-slider .task-container .task-name {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          margin-bottom: 0; }

.no-background {
  background-color: transparent; }
  .no-background div {
    background-color: inherit; }

.no-border {
  border: 0; }
  .no-border div {
    border: inherit; }

.sign-out {
  margin-left: 10px;
  margin-right: 10px; }

.button-blue {
  background-color: #67aada;
  border-color: #5694b6; }

.button-green {
  background-color: #69c04e;
  border-color: #4b9544; }

a.button-green, a.button-blue {
  color: white; }

.button-green,
.button-blue {
  border-width: 0;
  border-radius: 5px;
  color: white; }
  .button-green:not(.button-small),
  .button-blue:not(.button-small) {
    font-size: 18px;
    font-weight: bold; }
  .button-green.font-small,
  .button-blue.font-small {
    font-size: 14px; }
  .button-green.item-icon-right .icon:before,
  .button-blue.item-icon-right .icon:before {
    /*font-size: inherit;*/
    font-size: 24px !important; }
  .button-green i,
  .button-blue i {
    margin-right: 16px; }
    .button-green i.icon-kid2,
    .button-blue i.icon-kid2 {
      font-size: 1.3em; }

.button-facebook {
  background-color: #3d5a98;
  border-color: #2b4778;
  color: white; }

.float-left {
  float: left; }

.float-right {
  float: right; }

.clear-fix:after {
  content: "";
  display: table;
  clear: both; }

.button.back-button.activated {
  color: #326323; }

.overflow-ellipsis {
  text-overflow: ellipsis; }

.tab-content-container {
  background-color: #f5f6f7; }

.profile-container {
  background-color: #f5f6f7; }
  .profile-container .profile-thumbnail {
    background-color: #f5f6f7;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    cursor: pointer; }
    .profile-container .profile-thumbnail .button-delete-task,
    .profile-container .profile-thumbnail .button-task-analytics {
      position: absolute;
      bottom: 6px; }
    .profile-container .profile-thumbnail .button-delete-task {
      right: 20px; }
    .profile-container .profile-thumbnail .button-task-analytics {
      left: 15px; }
    .profile-container .profile-thumbnail .button-right-container {
      bottom: 10px;
      height: initial; }
    .profile-container .profile-thumbnail .profile-wrap {
      display: inline-block;
      position: relative; }
    .profile-container .profile-thumbnail img {
      height: 100px;
      width: 100px;
      border-radius: 50%;
      border: 4px solid #67aada; }
    .profile-container .profile-thumbnail.prize-thumbnail img {
      height: 125px;
      width: 125px; }
    .profile-container .profile-thumbnail a {
      font-size: 70px; }
    .profile-container .profile-thumbnail p {
      margin-bottom: 0;
      min-height: 20px; }
    .profile-container .profile-thumbnail .icon-wrap {
      width: 45px;
      height: 45px;
      display: inline-block;
      position: absolute;
      left: 50%;
      bottom: 3px; }
      .profile-container .profile-thumbnail .icon-wrap img {
        width: 100%;
        height: 100%; }
      .profile-container .profile-thumbnail .icon-wrap .edit-pic-icon {
        width: 45px;
        height: 45px;
        position: absolute;
        left: 50%;
        background-color: #f5f6f7;
        border-radius: 50%;
        cursor: pointer; }
  .profile-container .profile-info .profile-info-header {
    background-color: #67aada;
    color: white;
    padding: 5px 10px;
    font-weight: bold; }
    .profile-container .profile-info .profile-info-header h1,
    .profile-container .profile-info .profile-info-header h2,
    .profile-container .profile-info .profile-info-header h3,
    .profile-container .profile-info .profile-info-header h4,
    .profile-container .profile-info .profile-info-header h5 {
      background-color: inherit;
      color: inherit; }
  .profile-container .profile-info input {
    font-size: 16px; }
  .profile-container .profile-info .icon:before {
    font-size: 16px; }
  .profile-container .item .icon-weekday {
    font-size: 12px; }
  .profile-container .item-icon-left {
    padding-left: 0;
    margin-right: 10px; }
    .profile-container .item-icon-left img {
      border-radius: 50%;
      width: 30px;
      height: 30px; }
  .profile-container .redeem-stars i {
    font-size: 22px;
    color: #FFC10D;
    margin-right: 5px;
    line-height: 15px; }
  .profile-container .prize-thumbnail {
    padding-top: 40px;
    padding-bottom: 30px; }
    .profile-container .prize-thumbnail img {
      border: 0; }

.item-either-or {
  padding: 0;
  border: 0;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex; }
  .item-either-or .strike {
    min-width: 20%; }
  .item-either-or div.item-either-or-item {
    color: #999999;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    border-radius: inherit;
    border: 1px solid #e1e5e9;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 50%;
    text-align: center; }
    .item-either-or div.item-either-or-item:first-child {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px; }
    .item-either-or div.item-either-or-item:last-child {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px; }
    .item-either-or div.item-either-or-item.item-selected {
      background-color: #67aada;
      color: white; }
      .item-either-or div.item-either-or-item.item-selected:before {
        content: "\f10f"; }
    .item-either-or div.item-either-or-item:before {
      font-family: 'brili-icons';
      content: "\f110";
      margin-right: 3px; }
  .item-either-or.item-either-or-clear div.item-either-or-item {
    color: #999999;
    border-width: 0; }
    .item-either-or.item-either-or-clear div.item-either-or-item:before {
      color: #999999;
      font-size: 200%; }
    .item-either-or.item-either-or-clear div.item-either-or-item.item-selected {
      color: #67aada;
      font-weight: bold;
      background-color: transparent; }
      .item-either-or.item-either-or-clear div.item-either-or-item.item-selected:before {
        color: inherit; }
  .item-either-or.item-either-or-vertical div.item-either-or-item {
    display: -webkit-box ;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box ;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox ;
    /* TWEENER - IE 10 */
    display: -webkit-flex ;
    /* NEW - Chrome */
    display: flex ;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: center ;
    -ms-flex-align: center ;
    -webkit-align-items: center ;
    -moz-align-items: center ;
    align-items: center ;
    font-size: 150%; }
    .item-either-or.item-either-or-vertical div.item-either-or-item:before {
      margin-top: 10%;
      font-size: 75%; }

.flex-start {
  justify-content: flex-start !important;
  -webkit-justify-content: flex-start !important; }

.flex-center {
  justify-content: center !important;
  -webkit-justify-content: center !important; }

.flex-wrap {
  flex-wrap: wrap; }

.space-around {
  justify-content: space-around !important;
  -webkit-justify-content: space-around !important; }

.flex-start {
  justify-content: flex-start;
  -webkit-justify-content: flex-start; }

.flex-end {
  justify-content: flex-end;
  -webkit-justify-content: flex-end; }

.flex-basis-30 {
  flex-basis: 30% !important;
  -webkit-flex-basis: 30% !important; }

.flex-basis-20 {
  flex-basis: 20% !important;
  -webkit-flex-basis: 20% !important; }

.flex-basis-10 {
  flex-basis: 10% !important;
  -webkit-flex-basis: 10% !important; }

.flex-basis-5 {
  flex-basis: 5% !important;
  -webkit-flex-basis: 5% !important; }

.align-self-center {
  -webkit-align-self: center;
  align-self: center; }

.align-items-center, .jr-crop-toolbar {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  -webkit-align-items: center !important;
  -moz-align-items: center !important;
  align-items: center !important; }

.align-items-end {
  -webkit-box-align: flex-end !important;
  -ms-flex-align: flex-end !important;
  -webkit-align-items: flex-end !important;
  -moz-align-items: flex-end !important;
  align-items: flex-end !important; }

.horizontal-flex {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  align-items: baseline; }
  .horizontal-flex i.icon-weekday {
    margin-right: 3px; }

.vertical-flex {
  display: -webkit-box ;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box ;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox ;
  /* TWEENER - IE 10 */
  display: -webkit-flex ;
  /* NEW - Chrome */
  display: flex ;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap; }

.inline-flex {
  display: inline-flex !important;
  display: -webkit-inline-flex !important;
  align-items: baseline; }

.flex-2 span {
  flex-basis: 40%;
  -webkit-flex-basis: 40%;
  flex-grow: 1;
  -webkit-flex-grow: 1; }

.margin-right {
  margin-right: 16px; }

.flex-direction-col-reverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse; }

.flex-end {
  justify-content: flex-end;
  -webkit-justify-content: flex-end; }

.space-between {
  justify-content: space-between !important;
  -webkit-justify-content: space-between !important; }

.space-around {
  justify-content: space-around !important;
  -webkit-justify-content: space-around !important; }

.justify-center, .jr-crop-toolbar {
  justify-content: center !important;
  -webkit-justify-content: center !important; }

.justify-left {
  justify-content: left !important;
  -webkit-justify-content: flex-start !important; }

.placeholder {
  transition: 200ms ease-in-out all ;
  -webkit-transition: 200ms ease-in-out all ;
  -moz-transition: 200ms ease-in-out all ;
  -o-transition: 200ms ease-in-out all ; }

.popup-container .popup {
  border-radius: 5px;
  color: #68697B;
  padding: 10px; }
  .popup-container .popup .popup-head h3 {
    font-size: 20px; }
  .popup-container .popup .popup-body {
    text-align: center;
    font-size: 16px; }

.button-right-container {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border: 1px solid transparent; }
  .button-right-container .button-right-options {
    width: 80px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex; }
    .button-right-container .button-right-options p {
      margin: auto; }
    .button-right-container .button-right-options.disable {
      background-color: #FF7600; }
    .button-right-container .button-right-options.delete {
      background-color: #de4b38; }
    .button-right-container .button-right-options:last-of-type {
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px; }
  .button-right-container i {
    font-size: 40px;
    color: #E54D30; }
  .button-right-container button.button.button-clear {
    min-height: 79px; }
    .button-right-container button.button.button-clear img {
      width: 25px;
      margin-top: 10px; }
    .button-right-container button.button.button-clear.prize-editor {
      min-height: inherit; }
      .button-right-container button.button.button-clear.prize-editor img {
        margin-top: 0px; }

.list-inset {
  margin: 15px 10px;
  border-radius: 5px; }
  .list-inset .item.item-input {
    padding: 8px 0 8px 16px; }
    .list-inset .item.item-input input {
      color: #68697B; }
  .list-inset.add-delete-button-container {
    display: -webkit-box ;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box ;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox ;
    /* TWEENER - IE 10 */
    display: -webkit-flex ;
    /* NEW - Chrome */
    display: flex ;
    margin-right: 25%;
    margin-left: 25%; }

.prize-list-inset-container {
  display: -webkit-box ;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box ;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox ;
  /* TWEENER - IE 10 */
  display: -webkit-flex ;
  /* NEW - Chrome */
  display: flex ;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center; }

.prize-list-inset {
  display: -webkit-box ;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box ;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox ;
  /* TWEENER - IE 10 */
  display: -webkit-flex ;
  /* NEW - Chrome */
  display: flex ;
  -webkit-flex-direction: column;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  margin-top: 20px;
  margin-bottom: 40px;
  background-color: #f5f6f7;
  max-width: 380px;
  min-width: 260px;
  border-radius: 5px; }
  .prize-list-inset input {
    background-color: white;
    color: #68697B;
    width: 100%;
    border: none; }
  .prize-list-inset label {
    margin-bottom: 25px; }
  .prize-list-inset .prize-item {
    padding: 8px 0 8px 5px; }
    .prize-list-inset .prize-item.prize-item-name {
      padding: 8px 0 8px 12px;
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden; }
  .prize-list-inset .prize-value {
    background: url("../images/prize-icon-star.svg") no-repeat left center;
    background-size: contain;
    padding-left: 28px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden; }
  .prize-list-inset .button-green {
    margin-top: 30px;
    border-radius: 100px;
    height: 22px;
    text-align: center;
    text-align: -webkit-center;
    max-width: 80%; }
    .prize-list-inset .button-green span {
      bottom: 5px; }

.item-icon-right .icon {
  right: 0; }

.card .item.item-blue,
.item.item-icon-right.item-blue {
  border: 1px solid #ccc; }
  .card .item.item-blue:active a img,
  .item.item-icon-right.item-blue:active a img {
    opacity: 0.7; }

.item-icon-right .icon {
  right: 0; }

.routine-select-container {
  height: initial !important; }

.task-stats {
  display: -webkit-box ;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box ;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox ;
  /* TWEENER - IE 10 */
  display: -webkit-flex ;
  /* NEW - Chrome */
  display: flex ; }

.list-container {
  background-color: #f5f6f7;
  height: 100%; }
  .list-container .no-margin-bottom .card:last-child {
    margin-bottom: 0; }
  .list-container .list a {
    margin: 0; }
  .list-container .list .item i.icon-checkmark-unchecked:before,
  .list-container .list .item i.icon-checkmark:before,
  .list-container .list .item i.icon-checkmark-semibold:before {
    font-size: 20px; }
  .list-container .list .item i.icon-checkmark-unchecked:before {
    color: #999999; }
  .list-container .list .item i.icon-checkmark:before,
  .list-container .list .item i.icon-checkmark-semibold:before {
    color: #67aada; }
  .list-container .selected-day {
    color: #67aada; }
  .list-container .note {
    margin-top: 15px;
    margin-bottom: 15px; }
  .list-container .card {
    overflow: visible;
    box-shadow: none;
    padding-top: 0;
    padding-bottom: 0; }
    .list-container .card.dragging {
      opacity: .7;
      border: 4px dashed #666 !important; }
      .list-container .card.dragging .icon-reorder:before {
        color: #69c04e; }
    .list-container .card.card-background {
      position: relative;
      background-color: #f5f6f7;
      z-index: 10; }
    .list-container .card .card-foreground {
      border-radius: inherit;
      position: relative;
      z-index: 20; }
      .list-container .card .card-foreground a {
        border-width: 0px; }
    .list-container .card .item:last-child {
      margin: 0; }
    .list-container .card .task-endpoint {
      position: absolute;
      width: 0;
      height: 0;
      border-top: 25px solid #ed7b59;
      border-right: 25px solid transparent;
      z-index: 30; }
    .list-container .card.card-routine {
      border-radius: 10px;
      margin-top: 15px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      line-height: 0; }
      .list-container .card.card-routine.active {
        transition: 300ms ease-out all ;
        -webkit-transition: 300ms ease-out all ;
        -moz-transition: 300ms ease-out all ;
        -o-transition: 300ms ease-out all ;
        -webkit-transition-delay: 500ms ;
        transition-delay: 500ms ;
        transform: translate3d(-5px, -5px, 0);
        -webkit-transform: translate3d(-5px, -5px, 0);
        border-color: #4b9544;
        box-shadow: 5px 5px #4b9544; }
      .list-container .card.card-routine.dynamic-slack {
        margin-bottom: 0;
        border-bottom: 0; }
        .list-container .card.card-routine.dynamic-slack + .card {
          margin-top: 0;
          border-top: 0; }
      .list-container .card.card-routine .item {
        border-radius: inherit; }
        .list-container .card.card-routine .item.item-thumbnail-left {
          min-height: 70px;
          padding-left: 65px; }
          .list-container .card.card-routine .item.item-thumbnail-left.item-task {
            padding: 8px; }
            .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content {
              display: flex; }
              .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .task-stats {
                font-size: 12px;
                color: #999999; }
                .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .task-stats span:not(last-child) {
                  margin-right: 5px; }
                .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .task-stats i {
                  margin-right: 1px; }
                  .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .task-stats i:before {
                    font-size: 15px; }
                  .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .task-stats i.icon-checkmark, .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .task-stats i.icon-checkmark-bold, .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .task-stats i.icon-clock {
                    color: #69c04e; }
                  .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .task-stats i.icon-star-outline {
                    color: #FBC010; }
              .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-thumbnail {
                flex: 2;
                max-width: 100px;
                text-align: center;
                justify-content: center;
                display: flex;
                align-items: center; }
                .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-thumbnail img.task-thumbnail {
                  border: 2px solid #5694b6;
                  border-radius: 50%;
                  margin: 0px 5px 5px;
                  width: 60px;
                  height: 60px; }
                .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-thumbnail .task-type {
                  font-size: 11px; }
              .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info {
                flex: 4;
                position: relative;
                padding-left: 15px; }
                .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info h3 {
                  font-size: 20px !important; }
                .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container {
                  display: flex; }
                  .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .task-stats,
                  .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .task-type {
                    display: none;
                    flex: 4;
                    align-items: flex-end; }
                    .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .task-stats > span,
                    .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .task-type > span {
                      margin-right: 10px;
                      margin-bottom: 10px; }
                  .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .sparkline {
                    flex: 5; }
                    .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .sparkline .task-sparkline {
                      height: 40px;
                      margin-top: 7px;
                      text-align: center; }
                      .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .sparkline .task-sparkline canvas {
                        width: 100% !important; }
                      .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .sparkline .task-sparkline span.loader {
                        margin-top: 15px;
                        margin-right: 20px; }
                        .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .sparkline .task-sparkline span.loader svg path {
                          fill: #eee; }
                  .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .dragorder {
                    flex: 1.5;
                    display: flex;
                    flex-direction: column; }
                    .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .dragorder > div {
                      flex: 1;
                      text-align: right;
                      display: flex;
                      align-items: flex-end;
                      justify-content: flex-end;
                      margin: 0px -10px -10px 0px; }
                      .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .dragorder > div .drag-icon i {
                        font-size: 30px; }
                        .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content .col-info .bottom-container .dragorder > div .drag-icon i:before {
                          font-size: inherit; }
          .list-container .card.card-routine .item.item-thumbnail-left > img:first-child {
            top: 0;
            left: 0;
            height: 100%;
            border-top-left-radius: inherit;
            border-bottom-left-radius: inherit; }
          .list-container .card.card-routine .item.item-thumbnail-left h3 {
            font-size: 16px;
            min-height: 38px; }
          .list-container .card.card-routine .item.item-thumbnail-left .thumbnail-left {
            position: absolute;
            left: 2.5px;
            height: 60px;
            width: 60px;
            top: 10px; }
            .list-container .card.card-routine .item.item-thumbnail-left .thumbnail-left svg {
              height: 100%;
              width: 100%; }
        .list-container .card.card-routine .item h2 {
          color: #666;
          font-size: 18px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-right: 35px;
          min-height: 21px; }
        .list-container .card.card-routine .item .secondary-text {
          font-size: .8em; }
        .list-container .card.card-routine .item .horizontal-flex {
          font-size: 11px;
          margin-top: 10px;
          margin-bottom: -5px;
          color: #999999; }
          .list-container .card.card-routine .item .horizontal-flex.routine-list {
            margin-top: 0px; }
          .list-container .card.card-routine .item .horizontal-flex.task-content {
            margin-top: 0; }
          .list-container .card.card-routine .item .horizontal-flex i {
            margin-right: 3px; }
            .list-container .card.card-routine .item .horizontal-flex i:before {
              font-size: 15px; }
            .list-container .card.card-routine .item .horizontal-flex i.icon-checkmark, .list-container .card.card-routine .item .horizontal-flex i.icon-checkmark-bold, .list-container .card.card-routine .item .horizontal-flex i.icon-clock {
              color: #69c04e; }
            .list-container .card.card-routine .item .horizontal-flex i.icon-star-outline {
              color: #FBC010; }
          .list-container .card.card-routine .item .horizontal-flex span img {
            width: 25px;
            border: none;
            vertical-align: middle; }
        .list-container .card.card-routine .item.item-icon-right .icon {
          top: 10px;
          align-items: flex-start; }
          .list-container .card.card-routine .item.item-icon-right .icon img:first-child {
            position: absolute;
            width: 30px;
            height: 30px;
            top: 0;
            right: 0; }

.task-analytics-placeholder {
  position: relative; }
  .task-analytics-placeholder img {
    width: 100%;
    max-height: 350px;
    -webkit-filter: opacity(0.6) saturate(0.6); }
  .task-analytics-placeholder div.button {
    position: absolute;
    max-width: 90%;
    font-size: 4vw; }

.task-chart {
  background: #f7ebd4;
  position: relative; }
  .task-chart.loaded:before {
    transform: scale(1, 1) ;
    -webkit-transform: scale(1, 1) ;
    -moz-transform: scale(1, 1) ;
    -ms-transform: scale(1, 1) ;
    -o-transform: scale(1, 1) ; }
  .task-chart.loaded:after {
    opacity: 0.25; }
  .task-chart > .button {
    position: absolute; }
  .task-chart .button-clear {
    color: #937a46 !important; }
  .task-chart:before {
    transform: scale(1, 0) ;
    -webkit-transform: scale(1, 0) ;
    -moz-transform: scale(1, 0) ;
    -ms-transform: scale(1, 0) ;
    -o-transform: scale(1, 0) ;
    transform-origin: center top;
    -webkit-transform-origin: center top;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    z-index: 9999; }
  .task-chart:after {
    opacity: 0;
    content: '';
    width: 100%;
    height: 32px;
    background: #f7d487;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0; }
  .task-chart path.domain {
    stroke: none; }
  .task-chart g.tick line {
    stroke: none; }
  .task-chart .c3-ygrids line {
    stroke: #f1e6c6;
    stroke-dasharray: none;
    stroke-width: 2px; }
  .task-chart .c3 svg {
    font-family: proxima_nova_soft_medium !important; }
  .task-chart text {
    fill: #937a46; }
  .task-chart g {
    /*&.c3-brush {
      & + g {
        &.c3-axis-x {
          opacity: 0;
        }
      }
    }*/ }
    .task-chart g.c3-axis.c3-axis-x {
      opacity: 0 !important; }

analytics-task div {
  background: none; }
  analytics-task div button {
    font-family: proxima_nova_soft_semibold;
    min-width: 23% !important; }

.icon-kid img {
  border-radius: 50%;
  border: 2px solid #5694b6;
  margin-right: 10px;
  width: 125px; }

.kid-thumbnail-centered {
  padding: 0 0 0 0; }
  .kid-thumbnail-centered.redemption-screen {
    margin-right: 20px; }

.list-container .card.card-routine .item.item-icon-right .kid-profile.icon img:first-child {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -5px;
  right: 317px;
  margin-top: 10px; }

.progress-bar {
  border-radius: 8px;
  height: 16px;
  background-color: #e2e2e2;
  border: none; }

.progress-bar-bar {
  border-radius: 8px;
  width: 0px;
  background-color: #73cac1;
  height: 100%; }

.progress-bar-row {
  border-radius: 8px;
  background-color: #e2e2e2;
  padding: 0px; }

.bar-button {
  border-radius: 18px;
  width: 156px;
  height: 36px;
  background-color: #69c04e;
  color: white;
  font-size: 90%;
  font-weight: bolder;
  vertical-align: middle;
  text-align: center;
  line-height: 36px; }

.kid-profile-background {
  background-color: white !important; }

.prize-edit-background {
  background-color: #f5f6f7; }

.kid-profile-back-button {
  margin-bottom: -20px; }

.kid-profile-prize-header {
  background-color: #67aada !important;
  color: white;
  padding: 8px 0px;
  font-weight: bold;
  line-height: 100%;
  width: 100%; }
  .kid-profile-prize-header .width-wrapper {
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 18px; }
  .kid-profile-prize-header.redemption-screen {
    background-color: #69c04e !important;
    line-height: 30px;
    font-size: 1.5em; }

.kid-profile-container {
  background-color: #f5f6f7;
  padding-bottom: 0 !important; }

.kid-prize-profile-view ion-header-bar {
  top: 0 !important; }

.redemption-screen-padding {
  margin-bottom: 30px;
  display: -webkit-box ;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box ;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox ;
  /* TWEENER - IE 10 */
  display: -webkit-flex ;
  /* NEW - Chrome */
  display: flex ;
  flex-flow: row nowrap;
  justify-content: center; }

.kid-image-padding {
  padding-top: 20px; }
  .kid-image-padding.redemption-screen {
    padding-top: 35px;
    margin-left: 15px;
    margin-right: 15px; }

.kid-redemption-profile-image {
  border-radius: 50%;
  width: 80px;
  height: 80px; }

.cookie-placeholder {
  height: 187px;
  width: 282px; }

.kid-profile {
  text-align: center;
  background-color: white; }
  .kid-profile .profile-initial-container {
    display: -webkit-box ;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box ;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox ;
    /* TWEENER - IE 10 */
    display: -webkit-flex ;
    /* NEW - Chrome */
    display: flex ;
    justify-content: center; }
  .kid-profile .profile-initial-text {
    width: 72px;
    height: 72px;
    color: #67aada;
    font-size: 60px;
    border-radius: 50%;
    border: 3px solid #67aada; }
  .kid-profile .icon-star-outline:before {
    margin-right: 10px; }
  .kid-profile.text-center {
    margin-top: 15px; }
  .kid-profile .change-stars-box {
    display: -webkit-box ;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box ;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox ;
    /* TWEENER - IE 10 */
    display: -webkit-flex ;
    /* NEW - Chrome */
    display: flex ;
    flex-flow: row nowrap;
    justify-content: center; }
  .kid-profile .change-stars-area-left {
    margin-left: 50px;
    margin-right: 10px; }
    .kid-profile .change-stars-area-left label {
      width: 150px; }
  .kid-profile .change-stars-area-right {
    margin-left: 10px;
    margin-right: 50px; }
  .kid-profile .current-star-display {
    display: inherit;
    padding-bottom: 25px; }
    .kid-profile .current-star-display .icon-star-outline:before {
      font-size: 150%;
      color: #FBC010;
      margin-right: 5px; }
    .kid-profile .current-star-display.icon-star-outline {
      color: #FBC010;
      font-size: 150%; }
    .kid-profile .current-star-display .progress-bar {
      background-color: #e2e2e2; }
  .kid-profile .current-prize-display {
    display: grid; }
    .kid-profile .current-prize-display.with-current-prize {
      display: flex;
      margin-top: 35px;
      margin-bottom: 40px; }
  .kid-profile h3 {
    font-size: 20px;
    font-weight: bolder;
    margin-bottom: 0px; }
  .kid-profile h4 {
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 15px; }
    .kid-profile h4.same-line {
      display: flex;
      margin-right: 10px; }
  .kid-profile .select-active-prize-button {
    border: 0;
    margin: 0 0 40px 0;
    padding: 10px;
    height: 120%;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: white;
    background-color: #69c04e;
    width: 200px;
    font-weight: bolder;
    font-size: 12px;
    line-height: 100%; }

.error {
  border: 2px solid #FBC010 !important; }

.prize-rounded-corner {
  border-radius: 16px;
  border: 1px solid #e1e5e9; }
  .prize-rounded-corner.earned-prize {
    background-color: #fff; }

.prize-selected {
  background-color: #ddd !important; }

.prize-border {
  border: 1px solid #ddd; }

.plus-minus-buttons {
  border-radius: 50%; }

.plus-minus-buttons span {
  width: 25px;
  text-align: center;
  display: block;
  background-color: #69c04e;
  color: white;
  border-radius: 100%;
  -moz-border-radius: 100%;
  height: 25px;
  font-size: 2.5em;
  line-height: 26px; }
  .plus-minus-buttons span.subtract-button {
    line-height: 20px;
    background-color: #b93a25; }

.redeem-button {
  background-color: #FBC010;
  color: white;
  border-radius: 30px;
  border-width: 0;
  vertical-align: sub;
  min-width: 120px;
  font-size: 120%;
  font-weight: bold; }
  .redeem-button.plus-minus-buttons {
    background-color: #67aada; }
  .redeem-button.activated, .redeem-button:hover {
    transform: translateY(2px);
    -webkit-transform: translateY(2px);
    background-color: #D4A004; }

.prize-list-widget .prize-card {
  margin-bottom: 0; }

.prize-container {
  display: -webkit-box ;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box ;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox ;
  /* TWEENER - IE 10 */
  display: -webkit-flex ;
  /* NEW - Chrome */
  display: flex ;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
  align-content: flex-start;
  background-color: #f5f6f7;
  padding: 0 5px; }

.prize-card {
  display: -webkit-box ;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box ;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox ;
  /* TWEENER - IE 10 */
  display: -webkit-flex ;
  /* NEW - Chrome */
  display: flex ;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  flex: 1 1 auto;
  width: 310px;
  max-width: 360px;
  min-width: 270px;
  padding: 20px;
  margin: 8px 8px 0; }
  .prize-card .prize-thumbnail {
    display: -webkit-box ;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box ;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox ;
    /* TWEENER - IE 10 */
    display: -webkit-flex ;
    /* NEW - Chrome */
    display: flex ;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: 50%; }
    .prize-card .prize-thumbnail.earned-prize-image {
      width: 70px; }
  .prize-card .prize-image {
    width: 100%; }
    .prize-card .prize-image.earned-prize-image {
      width: 88%; }
  .prize-card .prize-description {
    display: -webkit-box ;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box ;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox ;
    /* TWEENER - IE 10 */
    display: -webkit-flex ;
    /* NEW - Chrome */
    display: flex ;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-left: 10px;
    min-width: 140px;
    overflow: hidden; }
    .prize-card .prize-description.earned-prize-description {
      padding-left: 30px; }
    .prize-card .prize-description h5 {
      font-size: 14px;
      font-weight: bold;
      line-height: 100%; }
      .prize-card .prize-description h5.earned-prize-description {
        margin-bottom: 0px; }
    .prize-card .prize-description h6 {
      font-size: 12px;
      text-align: left;
      line-height: 100%;
      margin: 0px 0px 10px 0px; }
      .prize-card .prize-description h6.earned-prize-description {
        margin-top: auto;
        margin-bottom: auto; }
    .prize-card .prize-description .icon-star-outline {
      color: #FBC010;
      font-size: 24pt; }

.prize-none-container {
  display: -webkit-box ;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box ;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox ;
  /* TWEENER - IE 10 */
  display: -webkit-flex ;
  /* NEW - Chrome */
  display: flex ;
  justify-content: center;
  align-items: center;
  flex: 0 1 auto;
  margin: 5px 0; }
  .prize-none-container .prize-none-button {
    display: -webkit-box ;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box ;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox ;
    /* TWEENER - IE 10 */
    display: -webkit-flex ;
    /* NEW - Chrome */
    display: flex ;
    justify-content: center;
    align-items: center;
    width: 310px;
    padding: 8px 2px; }

.no-border {
  border: 0 !important; }

.tabs-striped .tabs {
  border-top: 1px solid #e1e5e9 !important; }

.tabs-striped .tab-item.tab-item-active,
.tabs-striped .tab-item.active,
.tabs-striped .tab-item.activated {
  border-color: #67aada;
  border-width: 0 0 4px 0;
  margin-top: 0px; }

a.dial-placeholder {
  visibility: hidden;
  flex-basis: 20%; }

.tabs-bottom .tabs {
  height: 55px;
  padding-bottom: 2px; }

.bar-header {
  transition: 500ms ease-in-out background-color ;
  -webkit-transition: 500ms ease-in-out background-color ;
  -moz-transition: 500ms ease-in-out background-color ;
  -o-transition: 500ms ease-in-out background-color ; }
  .bar-header .title-center.header-item {
    left: 0 !important;
    right: 0 !important;
    font-family: proxima_nova_soft_semibold;
    text-overflow: ellipsis;
    margin: 0 auto;
    max-width: 55%; }
  .bar-header .right-buttons {
    display: inline-flex !important;
    display: -webkit-inline-flex !important;
    font-size: 17px; }
    .bar-header .right-buttons button {
      font-size: inherit; }
      .bar-header .right-buttons button i {
        font-size: inherit; }

.loading-placeholder svg {
  width: 40%;
  margin-left: 30%; }

.nav-home:before,
.nav-home-selected:before,
.nav-routines:before,
.nav-routines-selected:before,
.nav-kid:before,
.nav-kid-selected:before,
.nav-alert:before,
.nav-alert-selected:before,
.nav-setting:before,
.nav-setting-selected:before,
.nav-prize:before,
.nav-prize-selected:before,
.nav-profile:before,
.nav-profile-selected:before,
.icon-checkmark:before,
.icon-checkmark-semibold:before,
.icon-checkmark-bold:before,
.icon-checkmark-bolder:before,
.icon-clock:before,
.icon-stopwatch:before,
.trash-can-icon:before,
.icon-arrow-right:before,
.icon-star-outline:before,
.icon-star:before,
.icon-weekday:before,
.icon-delete-button:before,
.icon-delete-button-touch:before,
.icon-checkmark-unchecked:before,
.icon-avatar-stand:before,
.icon-avatar-run:before,
.icon-add-plus:before,
.icon-add-plus-bold:before,
.icon-duplicate-routine-divided,
.icon-edit-routine,
.icon-lock-square-green,
.icon-lock-square-orange,
.icon-kid2:before,
.icon-kid2-selected:before,
.icon-kid3:before,
.icon-kid3-selected:before,
.icon-reorder:before,
.icon-trophy:before,
.icon-trophy-selected:before {
  display: inline-block;
  font-family: "brili-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 70%;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased; }

.nav-home:before {
  content: "\f11d"; }

.activated .nav-home:before,
.nav-home:active:before {
  content: "\f11f";
  color: #67aada; }

.nav-home-selected:before {
  content: "\f11e";
  color: #67aada; }

.nav-profile:before {
  content: "\f201"; }

.nav-profile-selected:before {
  content: "\f201";
  color: #67aada; }

.activated .nav-profile:before,
.nav-profile:active:before {
  content: "\f206";
  color: #67aada; }

.nav-routines:before {
  content: "\f123"; }

.activated .nav-routines:before,
.nav-routines:active:before {
  content: "\f125";
  color: #67aada; }

.nav-routines-selected:before {
  content: "\f124";
  color: #67aada; }

.nav-kid:before {
  content: "\f120"; }

.activated .nav-kid:before,
.nav-kid:active:before {
  content: "\f122";
  color: #67aada; }

.nav-kid-selected:before {
  content: "\f121";
  color: #67aada; }

.icon-reorder:before {
  content: "\f15a";
  color: #67aada; }

.icon-kid2:before {
  content: "\f154"; }

.activated .icon-kid2:before,
.icon-kid2:active:before {
  content: "\f156";
  color: #67aada; }

.icon-kid2-selected:before {
  content: "\f154";
  color: #67aada; }

.icon-kid3:before {
  content: "\f15f"; }

.activated .icon-kid3:before,
.icon-kid3:active:before {
  content: "\f161";
  color: #67aada; }

.icon-kid3-selected:before {
  content: "\f15f";
  color: #67aada; }

.nav-alert:before {
  content: "\f11a"; }

.nav-alert:active:before {
  content: "\f11c";
  color: #67aada; }

.nav-alert-selected:before {
  content: "\f11b";
  color: #67aada; }

.nav-setting:before {
  content: "\f127"; }

.activated .nav-setting:before,
.nav-setting:active:before {
  content: "\f129";
  color: #67aada; }

.nav-setting-selected:before {
  content: "\f128";
  color: #67aada; }

.nav-prize:before {
  content: "\f200"; }

.activated .nav-prize:before,
.nav-prize:active:before {
  content: "\f205";
  color: #67aada; }

.nav-prize-selected:before {
  content: "\f200";
  color: #67aada; }

.icon-arrow-right:before {
  content: "\f12a"; }

.trash-can-icon:before {
  content: "\f13f"; }

.icon-checkmark:before {
  content: "\f10d"; }

.icon-checkmark-semibold:before {
  content: "\f10c"; }

.icon-checkmark-bold:before {
  content: "\f10e"; }

.icon-checkmark-bolder:before {
  content: "\f10b"; }

.icon-checkmark-unchecked:before {
  content: "\f110"; }

.icon-clock:before {
  content: "\f111"; }

.icon-stopwatch:before {
  content: "\f13e"; }

.icon-delete-button:before {
  content: "\f113"; }

.icon-delete-button.activated:before {
  content: "\f114"; }

.icon-lock-square-green:before {
  content: "\f14f"; }

.icon-lock-square-orange:before {
  content: "\f150"; }

.icon-trophy:before {
  content: "\f15b"; }

.icon-trophy.icon-selected:before {
  content: "\f15c"; }

.icon-trophy-selected:before {
  content: "\f15c"; }

button.activated .icon-delete-button:before,
button:active .icon-delete-button:before {
  content: "\f114"; }

.icon-delete-button-touch:before {
  content: "\f114"; }

.icon-star-outline:before {
  content: "\f13d"; }

.icon-star:before {
  content: "\f132"; }

.icon-star-outline.icon-selected:before {
  content: "\f132"; }

.ion-trophy.icon-selected,
.icon-star-outline.icon-selected,
.icon-trophy.icon-selected {
  color: #FBC010 !important; }

.icon-add-plus:before {
  content: "\f12e"; }

.icon-add-plus-bold:before {
  content: "\f131"; }

.icon-avatar-run:before {
  content: "\f143"; }

.icon-avatar-stand:before {
  content: "\f142"; }

.icon-duplicate-routine-divided:before {
  content: "\f148"; }

.icon-edit-routine:before {
  content: "\f147"; }

.icon-weekday {
  width: 16px;
  height: 16px;
  line-height: 100%;
  color: #999999;
  padding: 1px;
  border-radius: 50%;
  border: 1px solid #ccc;
  text-align: center; }
  .icon-weekday.icon-selected {
    border-color: #4b9544;
    color: #4b9544; }

.icon-initial {
  width: 25px;
  height: 25px;
  margin-right: 10px;
  line-height: 100%;
  color: #999999;
  border-radius: 50%;
  border: 2px solid #999999;
  text-align: center;
  text-align: -webkit-center; }
  .icon-initial.icon {
    height: 25px;
    font-size: 20px;
    text-align: center;
    align-items: center !important;
    justify-content: center;
    -webkit-justify-content: center; }
  .icon-initial img {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important; }

.button-clear {
  color: white !important; }
  .button-clear.activated {
    color: #326323 !important; }

.button-bold {
  font-family: 'proxima_nova_soft_semibold'; }

.button-profile-icon {
  font-size: 160%; }

.bar-info-right {
  float: right;
  margin-right: 10px; }

.bar-info-energized {
  background-color: #ed7b59;
  color: white; }

.bar-info-calm {
  background-color: #67aada;
  color: white; }

ion-content .scroll > .profile-info,
ion-content .scroll > .list-category {
  padding-bottom: 100px; }

.routine-task-edit.overflow-scroll > .scroll {
  position: static;
  height: inherit;
  -webkit-transform: translate3d(0, 0, 0); }

.list-category {
  background-color: transparent; }
  .list-category .icon {
    font-size: 20px; }

.profile-thumbnail.routine-header {
  color: #fff;
  padding: 20px 15px 10px 15px;
  background-image: url(../images/routine-background.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  max-width: 100%; }
  .profile-thumbnail.routine-header .icon.icon-initial {
    color: white;
    border-color: white;
    width: 40px;
    height: 40px;
    display: inline-flex; }
  .profile-thumbnail.routine-header .icon img {
    width: 40px;
    height: 40px; }

.routine-identity .routine-name-left {
  float: left;
  max-width: 80%; }
  .routine-identity .routine-name-left h2 {
    font-size: 17px;
    color: #fff; }
  .routine-identity .routine-name-left .weekly-schedule .icon-weekday {
    color: white;
    border: 1px solid #fff;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    font-size: 12px; }
    .routine-identity .routine-name-left .weekly-schedule .icon-weekday.icon-selected {
      border-color: #69c04e; }

.routine-identity .profile-img {
  float: right;
  max-width: 20%;
  position: relative;
  margin-top: 20px; }
  .routine-identity .profile-img .icon.icon-kid img {
    width: 75px;
    height: 75px;
    border: 1px solid white;
    margin-right: 0px; }
    .routine-identity .profile-img .icon.icon-kid img.thicker {
      border-width: 3.5px; }
  .routine-identity .profile-img .icon.icon-initial.thicker {
    border-width: 3.5px; }

/*input[type="range"] {
  -webkit-appearance: none;
  background-size: 99% 3px;
 }*/
input[type=range]::-webkit-slider-runnable-track {
  height: 3px;
  background: #bbb;
  position: relative;
  z-index: 10; }

input[type="range"]::-webkit-slider-thumb {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #fff;
  border: 3px solid #67aada;
  box-shadow: -3px 2px 4px #ccc;
  cursor: pointer;
  -webkit-appearance: none;
  top: -19px; }

.range.range-slider input::-webkit-slider-thumb:before {
  background: #67aada;
  height: 3px;
  top: 16px;
  left: -2000px; }

input[type=range]::-moz-focus-outer {
  border: 0; }

.routine-time-schedule p {
  margin-bottom: 0; }

.routine-time-schedule .routine-time-schedule-prompt {
  padding-left: 15%;
  padding-right: 15%;
  font-size: 150%; }

.routine-time-schedule .routine-duration {
  margin-top: -10px;
  width: 20%;
  margin-left: auto;
  margin-right: auto;
  line-height: 90%; }

.time-display-modal {
  background-color: #f5f6f7;
  color: #666; }
  .time-display-modal > .routine-time-current-tod:first-child {
    margin-top: 40px; }

.routine-time-modal .slider-slide {
  overflow: scroll; }

.routine-time-current-tod span {
  width: initial; }

.routine-time-current-tod .duration-hour,
.routine-time-current-tod .duration-minute,
.routine-time-current-tod .duration-meridiem {
  font-size: 300%; }

.routine-time-current-tod .duration-minute + .duration-meridiem {
  margin-left: 10px; }

.routine-time-current-tod .duration-meridiem {
  vertical-align: baseline; }

.routine-time-slide-container {
  min-height: 60px;
  position: relative; }
  .routine-time-slide-container .routine-time-current-tod,
  .routine-time-slide-container .arrow-left,
  .routine-time-slide-container .arrow-right,
  .routine-time-slide-container .routine-time-start-estimate,
  .routine-time-slide-container .routine-time-end-estimate {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    -webkit-transform: translate3d(0, -50%, 0);
    transition: 500ms cubic-bezier(0.68, 0, 0.265, 1.55) all !important;
    -webkit-transition: 500ms cubic-bezier(0.68, 0, 0.265, 1.55) all !important;
    -moz-transition: 500ms cubic-bezier(0.68, 0, 0.265, 1.55) all !important;
    -o-transition: 500ms cubic-bezier(0.68, 0, 0.265, 1.55) all !important; }
  .routine-time-slide-container .routine-time-current-tod {
    width: 35%; }
    .routine-time-slide-container .routine-time-current-tod .duration-hour,
    .routine-time-slide-container .routine-time-current-tod .duration-minute {
      font-size: 250%; }
    .routine-time-slide-container .routine-time-current-tod .duration-meridiem {
      font-size: initial; }
  .routine-time-slide-container .arrow-left {
    padding-left: 10px;
    padding-right: 10px;
    width: 25%; }
  .routine-time-slide-container .arrow-right {
    padding-left: 10px;
    padding-right: 10px;
    width: 25%; }
  .routine-time-slide-container .routine-time-start-estimate {
    width: 35%; }
  .routine-time-slide-container .routine-time-end-estimate {
    width: 35%; }
  .routine-time-slide-container.schedule-from-start .routine-time-current-tod {
    transform: translate3d(10%, -50%, 0);
    -webkit-transform: translate3d(10%, -50%, 0); }
  .routine-time-slide-container.schedule-from-start .arrow-left {
    transform: translate3d(-200%, -50%, 0);
    -webkit-transform: translate3d(-200%, -50%, 0); }
  .routine-time-slide-container.schedule-from-start .arrow-right {
    transform: translate3d(150%, -50%, 0);
    -webkit-transform: translate3d(150%, -50%, 0); }
  .routine-time-slide-container.schedule-from-start .routine-time-start-estimate {
    transform: translate3d(-300%, -50%, 0);
    -webkit-transform: translate3d(-300%, -50%, 0); }
  .routine-time-slide-container.schedule-from-start .routine-time-end-estimate {
    transform: translate3d(175%, -50%, 0);
    -webkit-transform: translate3d(175%, -50%, 0); }
  .routine-time-slide-container.schedule-from-end .routine-time-current-tod {
    transform: translate3d(175%, -50%, 0);
    -webkit-transform: translate3d(175%, -50%, 0); }
  .routine-time-slide-container.schedule-from-end .arrow-left {
    transform: translate3d(150%, -50%, 0);
    -webkit-transform: translate3d(150%, -50%, 0); }
  .routine-time-slide-container.schedule-from-end .arrow-right {
    transform: translate3d(400%, -50%, 0);
    -webkit-transform: translate3d(400%, -50%, 0); }
  .routine-time-slide-container.schedule-from-end .routine-time-start-estimate {
    transform: translate3d(10%, -50%, 0);
    -webkit-transform: translate3d(10%, -50%, 0); }
  .routine-time-slide-container.schedule-from-end .routine-time-end-estimate {
    transform: translate3d(500%, -50%, 0);
    -webkit-transform: translate3d(500%, -50%, 0); }

.timer-set {
  display: inline-block;
  vertical-align: baseline; }

.duration-hour,
.duration-minute {
  width: 30%;
  text-align: center; }
  .duration-hour h1,
  .duration-minute h1 {
    margin-bottom: 0;
    font-size: 400%;
    display: inline; }
  .duration-hour p,
  .duration-minute p {
    margin-top: 0; }

.duration-hour {
  color: #67aada; }
  .duration-hour span {
    color: #67aada; }

.duration-minute {
  color: #67aada;
  /*color: $green;*/ }
  .duration-minute span {
    color: #67aada;
    /*color: $green;*/ }

.middle-colon {
  color: #67aada;
  /*color: $green;*/
  font-size: 200%; }
  .middle-colon h1 {
    color: #ccc;
    font-size: 200%; }

.duration-meridiem {
  color: #67aada;
  /*color: $green;*/ }

.irs-slider {
  transform: scale(1.5, 1.5) ;
  -webkit-transform: scale(1.5, 1.5) ;
  -moz-transform: scale(1.5, 1.5) ;
  -ms-transform: scale(1.5, 1.5) ;
  -o-transform: scale(1.5, 1.5) ; }

.timer-slider {
  margin: 10px 25px; }
  .timer-slider.minute {
    /*.irs-bar-edge,
    .irs-bar {
      border-top: 1px solid $green-border;
      border-bottom: 1px solid $green-border;
      background: $green;
      background: linear-gradient(to top, $green-border 0%, $green 100%);
    }*/
    margin-bottom: 0; }
  .timer-slider .range-label {
    width: 20%;
    margin-bottom: 0;
    font-size: 125%; }
  .timer-slider .range.range-slider.range-minutes input::-webkit-slider-thumb {
    background-color: #fff;
    border: 3px solid #69c04e; }
  .timer-slider .range.range-slider.range-minutes input::-webkit-slider-thumb:before {
    background: #69c04e;
    height: 3px;
    top: 16px;
    left: -2000px; }
  .timer-slider + .description-bottom {
    padding-top: 0; }
  .timer-slider + .routine-time-button {
    padding-top: 40px; }
    .timer-slider + .routine-time-button .button {
      min-width: 80%; }

.routine-info {
  margin-top: 40px; }

.routine-info-row span,
.routine-info span {
  margin-right: 8px; }
  .routine-info-row span.routine-action-button,
  .routine-info span.routine-action-button {
    border: 2px white solid;
    border-radius: 10px;
    background-color: #378BCA; }
    .routine-info-row span.routine-action-button i,
    .routine-info span.routine-action-button i {
      margin-left: 15px;
      margin-right: 15px;
      font-size: 200%;
      vertical-align: sub; }
  .routine-info-row span.float-right,
  .routine-info span.float-right {
    margin-right: 0px; }
  .routine-info-row span i,
  .routine-info span i {
    margin-right: 8px;
    font-size: 16px; }
  .routine-info-row span i.icon-star-outline,
  .routine-info span i.icon-star-outline {
    color: #FBC010;
    font-size: 18px; }
  .routine-info-row span i.ion-ios-information-outline, .routine-info-row span i.ion-ios-bell-outline,
  .routine-info span i.ion-ios-information-outline,
  .routine-info span i.ion-ios-bell-outline {
    font-size: 150%;
    vertical-align: middle; }
  .routine-info-row span i.ion-ios-bell-outline,
  .routine-info span i.ion-ios-bell-outline {
    color: yellow;
    margin-right: 0; }

.routine-info-row + .routine-info,
.routine-info + .routine-info {
  margin-top: 0; }

.profile-thumbnail {
  position: relative; }

.task-reward-kid {
  position: absolute;
  width: 125px;
  top: -2px;
  left: -2px;
  color: #fff;
  font-weight: bold; }
  .task-reward-kid img.triangle {
    position: absolute;
    border-radius: 0;
    width: 100%;
    height: auto;
    top: -10px;
    left: 0;
    border: none;
    z-index: 1000; }
  .task-reward-kid span {
    display: inline-block;
    margin-top: 15px;
    margin-left: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000; }
    .task-reward-kid span i {
      font-size: 22px;
      color: #FFC10D;
      margin-right: 5px; }

.task-reward-kids {
  width: 100px;
  height: auto;
  position: absolute;
  top: -2px;
  left: -2px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  border-top-left-radius: 8px; }
  .task-reward-kids img.triangle {
    width: 100%; }
  .task-reward-kids span {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 8px;
    margin-top: 8px;
    display: flex;
    align-items: baseline; }
    .task-reward-kids span i {
      color: #FFC10D;
      font-size: 22px;
      margin-right: 5px; }
    .task-reward-kids span p.manage-kids-stars {
      display: inline-block;
      color: #fff; }

.task-reward {
  background-image: url("../images/rewardtag-triangle.svg");
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  position: absolute;
  width: 40%;
  font-weight: bolder;
  font-size: larger;
  height: 50%;
  padding-top: 5.5%;
  padding-right: 11%; }
  .task-reward .task-reward-worth {
    position: absolute;
    top: 16px;
    left: 16px; }
  .task-reward i {
    color: #FFC10D;
    font-size: 110%;
    margin-right: 3px; }

.kids-container {
  background-color: #f5f6f7; }
  .kids-container .note {
    margin-top: 15px;
    margin-bottom: 5px; }
  .kids-container .card-task-container {
    width: 33%;
    display: inline-block !important; }
    .kids-container .card-task-container:first-child {
      padding-top: 20px; }
    .kids-container .card-task-container .card-task {
      width: 100%;
      border: 1px solid #ddd;
      box-shadow: none;
      position: relative;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      margin-top: 0;
      margin-bottom: 0; }
      .kids-container .card-task-container .card-task .border-right {
        border-right: 1px solid #ddd; }
      .kids-container .card-task-container .card-task .border-bottom {
        border-bottom: 1px solid #ddd; }
      .kids-container .card-task-container .card-task .padding-top {
        padding-top: 10px; }
      .kids-container .card-task-container .card-task .no-text-align {
        text-align: initial;
        margin-left: 10px; }
      .kids-container .card-task-container .card-task .redeemable-reward {
        background-color: #69c04e;
        color: white;
        border-radius: 10px;
        border-width: 0;
        vertical-align: sub;
        width: 160px;
        font-size: 80%; }
      .kids-container .card-task-container .card-task .redeem-button {
        background-color: #FBC010;
        color: white;
        border-radius: 30px;
        border-width: 0;
        vertical-align: sub;
        min-width: 120px;
        line-height: 1.3;
        font-size: 100%; }
        .kids-container .card-task-container .card-task .redeem-button.activated, .kids-container .card-task-container .card-task .redeem-button:hover {
          transform: translateY(2px);
          -webkit-transform: translateY(2px);
          background-color: #D4A004; }
      .kids-container .card-task-container .card-task .task-icon-wrapper {
        height: 45px;
        width: 45px;
        margin-left: auto;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0; }
        .kids-container .card-task-container .card-task .task-icon-wrapper .task-icon {
          width: 90%;
          height: 90%; }
        .kids-container .card-task-container .card-task .task-icon-wrapper .avatar-icon {
          border: 2px solid #67aada; }
        .kids-container .card-task-container .card-task .task-icon-wrapper h1 {
          color: #67aada; }
      .kids-container .card-task-container .card-task.add-child {
        background-color: transparent;
        border-style: dashed;
        color: #cfd9e1;
        border-color: #cfd9e1;
        border-width: 3px; }
        .kids-container .card-task-container .card-task.add-child .item {
          background-color: #ffffff; }
          .kids-container .card-task-container .card-task.add-child .item:first-child {
            padding: 2px; }
          .kids-container .card-task-container .card-task.add-child .item p {
            opacity: .5; }
        .kids-container .card-task-container .card-task.add-child .task-icon-wrapper {
          background: none;
          height: 143px;
          width: 90px;
          margin-left: auto;
          margin-right: auto;
          margin-top: 5%;
          margin-bottom: 5%; }
          .kids-container .card-task-container .card-task.add-child .task-icon-wrapper .task-icon {
            width: 90%;
            height: 90%; }
          .kids-container .card-task-container .card-task.add-child .task-icon-wrapper .avatar-icon {
            border: 2px solid #67aada; }
          .kids-container .card-task-container .card-task.add-child .task-icon-wrapper h1 {
            color: #67aada; }
      .kids-container .card-task-container .card-task .item {
        background-color: initial; }
        .kids-container .card-task-container .card-task .item p {
          font-size: 100%;
          text-decoration: none !important; }
          .kids-container .card-task-container .card-task .item p i + span {
            vertical-align: super; }
        .kids-container .card-task-container .card-task .item .profile-name {
          color: #68697B; }
          .kids-container .card-task-container .card-task .item .profile-name h1,
          .kids-container .card-task-container .card-task .item .profile-name h2,
          .kids-container .card-task-container .card-task .item .profile-name h3,
          .kids-container .card-task-container .card-task .item .profile-name h4,
          .kids-container .card-task-container .card-task .item .profile-name h5 {
            color: inherit; }
        .kids-container .card-task-container .card-task .item .profile-reward-name {
          color: #999999; }
          .kids-container .card-task-container .card-task .item .profile-reward-name h2,
          .kids-container .card-task-container .card-task .item .profile-reward-name h3,
          .kids-container .card-task-container .card-task .item .profile-reward-name h4,
          .kids-container .card-task-container .card-task .item .profile-reward-name h5 {
            color: inherit;
            font-size: 13px; }
          .kids-container .card-task-container .card-task .item .profile-reward-name h1 {
            color: inherit;
            font-size: 16px;
            padding-left: 5px;
            margin-right: auto; }
        .kids-container .card-task-container .card-task .item .icon-add-plus {
          font-size: 15px; }
        .kids-container .card-task-container .card-task .item .icon {
          font-size: 250%; }
          .kids-container .card-task-container .card-task .item .icon.icon-star {
            color: #FBC010; }
        .kids-container .card-task-container .card-task .item.row .col .icon-avatar-stand.activated:before, .kids-container .card-task-container .card-task .item.row .col .icon-avatar-stand:hover:before,
        .kids-container .card-task-container .card-task .item.row .col .icon-avatar-run.activated:before,
        .kids-container .card-task-container .card-task .item.row .col .icon-avatar-run:hover:before {
          transform: scale(1.2, 1.2);
          -webkit-transform: scale(1.2, 1.2); }
        .kids-container .card-task-container .card-task .item.row .col .icon-avatar-stand + span,
        .kids-container .card-task-container .card-task .item.row .col .icon-avatar-run + span {
          vertical-align: super; }

.bigger-icon {
  font-size: 160%; }

.toast {
  border-radius: 12px;
  background-color: #67aada;
  color: white;
  padding: 10px;
  text-align: center;
  z-index: 1000;
  opacity: 0;
  position: absolute;
  bottom: 10%;
  width: 70%;
  left: 15%;
  box-shadow: 0px 5px 5px #5694b6; }
  .toast p {
    margin-bottom: 5px; }

.no-transition {
  -webkit-transition-duration: 0s !important;
  transition-duration: 0s !important; }

.animate-enter-slide-left.ng-enter,
.animate-enter-slide-left.ng-hide-remove,
.animate-enter-slide-right.ng-enter,
.animate-enter-slide-right.ng-hide-remove,
.animate-leave-slide-left.ng-leave,
.animate-leave-slide-left.ng-hide-add,
.animate-leave-slide-right.ng-leave,
.animate-leave-slide-right.ng-hide-add,
.animate-enter-slide.ng-enter,
.animate-enter-slide.ng-leave,
.animate-enter-slide.ng-hide-add,
.animate-enter-slide.ng-hide-remove,
.animate-enter-rotate.ng-hide-remove,
.animate-enter-rotate.ng-hide-add,
.animate-enter-rotate.ng-enter,
.animate-enter-rotate.ng-leave .animate-enter-width.ng-enter,
.animate-enter-width.ng-hide-remove,
.animate-move.ng-move,
.animate-enter-height.ng-enter,
.animate-enter-height.ng-hide-remove,
.animate-leave-left.ng-leave,
.animate-leave-left.ng-hide-add,
.animate-enter-right.ng-enter,
.animate-enter-right.ng-move,
.animate-enter-right.ng-hide-remove,
.animate-class,
.fade-in-opacity.ng-enter,
.fade-in-opacity.ng-hide-remove,
.fade-out-opacity.ng-hide-add,
.fade-out-opacity.ng-leave,
.animate-enter.ng-enter,
.animate-leave.ng-leave,
.animate-enter.ng-hide-remove,
.animate-leave.ng-hide-add {
  transition: 600ms cubic-bezier(0.68, 0, 0.265, 1.55) all ;
  -webkit-transition: 600ms cubic-bezier(0.68, 0, 0.265, 1.55) all ;
  -moz-transition: 600ms cubic-bezier(0.68, 0, 0.265, 1.55) all ;
  -o-transition: 600ms cubic-bezier(0.68, 0, 0.265, 1.55) all ; }
  .animate-enter-slide-left.ng-enter.delay-1000,
  .animate-enter-slide-left.ng-hide-remove.delay-1000,
  .animate-enter-slide-right.ng-enter.delay-1000,
  .animate-enter-slide-right.ng-hide-remove.delay-1000,
  .animate-leave-slide-left.ng-leave.delay-1000,
  .animate-leave-slide-left.ng-hide-add.delay-1000,
  .animate-leave-slide-right.ng-leave.delay-1000,
  .animate-leave-slide-right.ng-hide-add.delay-1000,
  .animate-enter-slide.ng-enter.delay-1000,
  .animate-enter-slide.ng-leave.delay-1000,
  .animate-enter-slide.ng-hide-add.delay-1000,
  .animate-enter-slide.ng-hide-remove.delay-1000,
  .animate-enter-rotate.ng-hide-remove.delay-1000,
  .animate-enter-rotate.ng-hide-add.delay-1000,
  .animate-enter-rotate.ng-enter.delay-1000,
  .animate-enter-rotate.ng-leave .animate-enter-width.ng-enter.delay-1000,
  .animate-enter-width.ng-hide-remove.delay-1000,
  .animate-move.ng-move.delay-1000,
  .animate-enter-height.ng-enter.delay-1000,
  .animate-enter-height.ng-hide-remove.delay-1000,
  .animate-leave-left.ng-leave.delay-1000,
  .animate-leave-left.ng-hide-add.delay-1000,
  .animate-enter-right.ng-enter.delay-1000,
  .animate-enter-right.ng-move.delay-1000,
  .animate-enter-right.ng-hide-remove.delay-1000,
  .animate-class.delay-1000,
  .fade-in-opacity.ng-enter.delay-1000,
  .fade-in-opacity.ng-hide-remove.delay-1000,
  .fade-out-opacity.ng-hide-add.delay-1000,
  .fade-out-opacity.ng-leave.delay-1000,
  .animate-enter.ng-enter.delay-1000,
  .animate-leave.ng-leave.delay-1000,
  .animate-enter.ng-hide-remove.delay-1000,
  .animate-leave.ng-hide-add.delay-1000 {
    -webkit-transition-delay: 1s ;
    transition-delay: 1s ; }
  .animate-enter-slide-left.ng-enter.delay-1500,
  .animate-enter-slide-left.ng-hide-remove.delay-1500,
  .animate-enter-slide-right.ng-enter.delay-1500,
  .animate-enter-slide-right.ng-hide-remove.delay-1500,
  .animate-leave-slide-left.ng-leave.delay-1500,
  .animate-leave-slide-left.ng-hide-add.delay-1500,
  .animate-leave-slide-right.ng-leave.delay-1500,
  .animate-leave-slide-right.ng-hide-add.delay-1500,
  .animate-enter-slide.ng-enter.delay-1500,
  .animate-enter-slide.ng-leave.delay-1500,
  .animate-enter-slide.ng-hide-add.delay-1500,
  .animate-enter-slide.ng-hide-remove.delay-1500,
  .animate-enter-rotate.ng-hide-remove.delay-1500,
  .animate-enter-rotate.ng-hide-add.delay-1500,
  .animate-enter-rotate.ng-enter.delay-1500,
  .animate-enter-rotate.ng-leave .animate-enter-width.ng-enter.delay-1500,
  .animate-enter-width.ng-hide-remove.delay-1500,
  .animate-move.ng-move.delay-1500,
  .animate-enter-height.ng-enter.delay-1500,
  .animate-enter-height.ng-hide-remove.delay-1500,
  .animate-leave-left.ng-leave.delay-1500,
  .animate-leave-left.ng-hide-add.delay-1500,
  .animate-enter-right.ng-enter.delay-1500,
  .animate-enter-right.ng-move.delay-1500,
  .animate-enter-right.ng-hide-remove.delay-1500,
  .animate-class.delay-1500,
  .fade-in-opacity.ng-enter.delay-1500,
  .fade-in-opacity.ng-hide-remove.delay-1500,
  .fade-out-opacity.ng-hide-add.delay-1500,
  .fade-out-opacity.ng-leave.delay-1500,
  .animate-enter.ng-enter.delay-1500,
  .animate-leave.ng-leave.delay-1500,
  .animate-enter.ng-hide-remove.delay-1500,
  .animate-leave.ng-hide-add.delay-1500 {
    -webkit-transition-delay: 1500ms ;
    transition-delay: 1500ms ; }
  .animate-enter-slide-left.ng-enter.delay-3000,
  .animate-enter-slide-left.ng-hide-remove.delay-3000,
  .animate-enter-slide-right.ng-enter.delay-3000,
  .animate-enter-slide-right.ng-hide-remove.delay-3000,
  .animate-leave-slide-left.ng-leave.delay-3000,
  .animate-leave-slide-left.ng-hide-add.delay-3000,
  .animate-leave-slide-right.ng-leave.delay-3000,
  .animate-leave-slide-right.ng-hide-add.delay-3000,
  .animate-enter-slide.ng-enter.delay-3000,
  .animate-enter-slide.ng-leave.delay-3000,
  .animate-enter-slide.ng-hide-add.delay-3000,
  .animate-enter-slide.ng-hide-remove.delay-3000,
  .animate-enter-rotate.ng-hide-remove.delay-3000,
  .animate-enter-rotate.ng-hide-add.delay-3000,
  .animate-enter-rotate.ng-enter.delay-3000,
  .animate-enter-rotate.ng-leave .animate-enter-width.ng-enter.delay-3000,
  .animate-enter-width.ng-hide-remove.delay-3000,
  .animate-move.ng-move.delay-3000,
  .animate-enter-height.ng-enter.delay-3000,
  .animate-enter-height.ng-hide-remove.delay-3000,
  .animate-leave-left.ng-leave.delay-3000,
  .animate-leave-left.ng-hide-add.delay-3000,
  .animate-enter-right.ng-enter.delay-3000,
  .animate-enter-right.ng-move.delay-3000,
  .animate-enter-right.ng-hide-remove.delay-3000,
  .animate-class.delay-3000,
  .fade-in-opacity.ng-enter.delay-3000,
  .fade-in-opacity.ng-hide-remove.delay-3000,
  .fade-out-opacity.ng-hide-add.delay-3000,
  .fade-out-opacity.ng-leave.delay-3000,
  .animate-enter.ng-enter.delay-3000,
  .animate-leave.ng-leave.delay-3000,
  .animate-enter.ng-hide-remove.delay-3000,
  .animate-leave.ng-hide-add.delay-3000 {
    -webkit-transition-delay: 3000ms !important ;
    transition-delay: 3000ms !important ; }
  .animate-enter-slide-left.ng-enter.delay-6000,
  .animate-enter-slide-left.ng-hide-remove.delay-6000,
  .animate-enter-slide-right.ng-enter.delay-6000,
  .animate-enter-slide-right.ng-hide-remove.delay-6000,
  .animate-leave-slide-left.ng-leave.delay-6000,
  .animate-leave-slide-left.ng-hide-add.delay-6000,
  .animate-leave-slide-right.ng-leave.delay-6000,
  .animate-leave-slide-right.ng-hide-add.delay-6000,
  .animate-enter-slide.ng-enter.delay-6000,
  .animate-enter-slide.ng-leave.delay-6000,
  .animate-enter-slide.ng-hide-add.delay-6000,
  .animate-enter-slide.ng-hide-remove.delay-6000,
  .animate-enter-rotate.ng-hide-remove.delay-6000,
  .animate-enter-rotate.ng-hide-add.delay-6000,
  .animate-enter-rotate.ng-enter.delay-6000,
  .animate-enter-rotate.ng-leave .animate-enter-width.ng-enter.delay-6000,
  .animate-enter-width.ng-hide-remove.delay-6000,
  .animate-move.ng-move.delay-6000,
  .animate-enter-height.ng-enter.delay-6000,
  .animate-enter-height.ng-hide-remove.delay-6000,
  .animate-leave-left.ng-leave.delay-6000,
  .animate-leave-left.ng-hide-add.delay-6000,
  .animate-enter-right.ng-enter.delay-6000,
  .animate-enter-right.ng-move.delay-6000,
  .animate-enter-right.ng-hide-remove.delay-6000,
  .animate-class.delay-6000,
  .fade-in-opacity.ng-enter.delay-6000,
  .fade-in-opacity.ng-hide-remove.delay-6000,
  .fade-out-opacity.ng-hide-add.delay-6000,
  .fade-out-opacity.ng-leave.delay-6000,
  .animate-enter.ng-enter.delay-6000,
  .animate-leave.ng-leave.delay-6000,
  .animate-enter.ng-hide-remove.delay-6000,
  .animate-leave.ng-hide-add.delay-6000 {
    -webkit-transition-delay: 6000ms !important ;
    transition-delay: 6000ms !important ; }
  .animate-enter-slide-left.ng-enter.delay-12000,
  .animate-enter-slide-left.ng-hide-remove.delay-12000,
  .animate-enter-slide-right.ng-enter.delay-12000,
  .animate-enter-slide-right.ng-hide-remove.delay-12000,
  .animate-leave-slide-left.ng-leave.delay-12000,
  .animate-leave-slide-left.ng-hide-add.delay-12000,
  .animate-leave-slide-right.ng-leave.delay-12000,
  .animate-leave-slide-right.ng-hide-add.delay-12000,
  .animate-enter-slide.ng-enter.delay-12000,
  .animate-enter-slide.ng-leave.delay-12000,
  .animate-enter-slide.ng-hide-add.delay-12000,
  .animate-enter-slide.ng-hide-remove.delay-12000,
  .animate-enter-rotate.ng-hide-remove.delay-12000,
  .animate-enter-rotate.ng-hide-add.delay-12000,
  .animate-enter-rotate.ng-enter.delay-12000,
  .animate-enter-rotate.ng-leave .animate-enter-width.ng-enter.delay-12000,
  .animate-enter-width.ng-hide-remove.delay-12000,
  .animate-move.ng-move.delay-12000,
  .animate-enter-height.ng-enter.delay-12000,
  .animate-enter-height.ng-hide-remove.delay-12000,
  .animate-leave-left.ng-leave.delay-12000,
  .animate-leave-left.ng-hide-add.delay-12000,
  .animate-enter-right.ng-enter.delay-12000,
  .animate-enter-right.ng-move.delay-12000,
  .animate-enter-right.ng-hide-remove.delay-12000,
  .animate-class.delay-12000,
  .fade-in-opacity.ng-enter.delay-12000,
  .fade-in-opacity.ng-hide-remove.delay-12000,
  .fade-out-opacity.ng-hide-add.delay-12000,
  .fade-out-opacity.ng-leave.delay-12000,
  .animate-enter.ng-enter.delay-12000,
  .animate-leave.ng-leave.delay-12000,
  .animate-enter.ng-hide-remove.delay-12000,
  .animate-leave.ng-hide-add.delay-12000 {
    -webkit-transition-delay: 12000ms !important ;
    transition-delay: 12000ms !important ; }
  .animate-enter-slide-left.ng-enter.slow,
  .animate-enter-slide-left.ng-hide-remove.slow,
  .animate-enter-slide-right.ng-enter.slow,
  .animate-enter-slide-right.ng-hide-remove.slow,
  .animate-leave-slide-left.ng-leave.slow,
  .animate-leave-slide-left.ng-hide-add.slow,
  .animate-leave-slide-right.ng-leave.slow,
  .animate-leave-slide-right.ng-hide-add.slow,
  .animate-enter-slide.ng-enter.slow,
  .animate-enter-slide.ng-leave.slow,
  .animate-enter-slide.ng-hide-add.slow,
  .animate-enter-slide.ng-hide-remove.slow,
  .animate-enter-rotate.ng-hide-remove.slow,
  .animate-enter-rotate.ng-hide-add.slow,
  .animate-enter-rotate.ng-enter.slow,
  .animate-enter-rotate.ng-leave .animate-enter-width.ng-enter.slow,
  .animate-enter-width.ng-hide-remove.slow,
  .animate-move.ng-move.slow,
  .animate-enter-height.ng-enter.slow,
  .animate-enter-height.ng-hide-remove.slow,
  .animate-leave-left.ng-leave.slow,
  .animate-leave-left.ng-hide-add.slow,
  .animate-enter-right.ng-enter.slow,
  .animate-enter-right.ng-move.slow,
  .animate-enter-right.ng-hide-remove.slow,
  .animate-class.slow,
  .fade-in-opacity.ng-enter.slow,
  .fade-in-opacity.ng-hide-remove.slow,
  .fade-out-opacity.ng-hide-add.slow,
  .fade-out-opacity.ng-leave.slow,
  .animate-enter.ng-enter.slow,
  .animate-leave.ng-leave.slow,
  .animate-enter.ng-hide-remove.slow,
  .animate-leave.ng-hide-add.slow {
    -webkit-transition: 2000ms cubic-bezier(0.68, 0, 0.265, 1.55) all;
    /* Chrome */
    transition: 2000ms cubic-bezier(0.68, 0, 0.265, 1.55) all; }
  .animate-enter-slide-left.ng-enter.slower,
  .animate-enter-slide-left.ng-hide-remove.slower,
  .animate-enter-slide-right.ng-enter.slower,
  .animate-enter-slide-right.ng-hide-remove.slower,
  .animate-leave-slide-left.ng-leave.slower,
  .animate-leave-slide-left.ng-hide-add.slower,
  .animate-leave-slide-right.ng-leave.slower,
  .animate-leave-slide-right.ng-hide-add.slower,
  .animate-enter-slide.ng-enter.slower,
  .animate-enter-slide.ng-leave.slower,
  .animate-enter-slide.ng-hide-add.slower,
  .animate-enter-slide.ng-hide-remove.slower,
  .animate-enter-rotate.ng-hide-remove.slower,
  .animate-enter-rotate.ng-hide-add.slower,
  .animate-enter-rotate.ng-enter.slower,
  .animate-enter-rotate.ng-leave .animate-enter-width.ng-enter.slower,
  .animate-enter-width.ng-hide-remove.slower,
  .animate-move.ng-move.slower,
  .animate-enter-height.ng-enter.slower,
  .animate-enter-height.ng-hide-remove.slower,
  .animate-leave-left.ng-leave.slower,
  .animate-leave-left.ng-hide-add.slower,
  .animate-enter-right.ng-enter.slower,
  .animate-enter-right.ng-move.slower,
  .animate-enter-right.ng-hide-remove.slower,
  .animate-class.slower,
  .fade-in-opacity.ng-enter.slower,
  .fade-in-opacity.ng-hide-remove.slower,
  .fade-out-opacity.ng-hide-add.slower,
  .fade-out-opacity.ng-leave.slower,
  .animate-enter.ng-enter.slower,
  .animate-leave.ng-leave.slower,
  .animate-enter.ng-hide-remove.slower,
  .animate-leave.ng-hide-add.slower {
    -webkit-transition: 5400ms cubic-bezier(0.68, 0, 0.265, 1.55) all;
    /* Chrome */
    transition: 5400ms cubic-bezier(0.68, 0, 0.265, 1.55) all; }
  .animate-enter-slide-left.ng-enter.insanelyslow,
  .animate-enter-slide-left.ng-hide-remove.insanelyslow,
  .animate-enter-slide-right.ng-enter.insanelyslow,
  .animate-enter-slide-right.ng-hide-remove.insanelyslow,
  .animate-leave-slide-left.ng-leave.insanelyslow,
  .animate-leave-slide-left.ng-hide-add.insanelyslow,
  .animate-leave-slide-right.ng-leave.insanelyslow,
  .animate-leave-slide-right.ng-hide-add.insanelyslow,
  .animate-enter-slide.ng-enter.insanelyslow,
  .animate-enter-slide.ng-leave.insanelyslow,
  .animate-enter-slide.ng-hide-add.insanelyslow,
  .animate-enter-slide.ng-hide-remove.insanelyslow,
  .animate-enter-rotate.ng-hide-remove.insanelyslow,
  .animate-enter-rotate.ng-hide-add.insanelyslow,
  .animate-enter-rotate.ng-enter.insanelyslow,
  .animate-enter-rotate.ng-leave .animate-enter-width.ng-enter.insanelyslow,
  .animate-enter-width.ng-hide-remove.insanelyslow,
  .animate-move.ng-move.insanelyslow,
  .animate-enter-height.ng-enter.insanelyslow,
  .animate-enter-height.ng-hide-remove.insanelyslow,
  .animate-leave-left.ng-leave.insanelyslow,
  .animate-leave-left.ng-hide-add.insanelyslow,
  .animate-enter-right.ng-enter.insanelyslow,
  .animate-enter-right.ng-move.insanelyslow,
  .animate-enter-right.ng-hide-remove.insanelyslow,
  .animate-class.insanelyslow,
  .fade-in-opacity.ng-enter.insanelyslow,
  .fade-in-opacity.ng-hide-remove.insanelyslow,
  .fade-out-opacity.ng-hide-add.insanelyslow,
  .fade-out-opacity.ng-leave.insanelyslow,
  .animate-enter.ng-enter.insanelyslow,
  .animate-leave.ng-leave.insanelyslow,
  .animate-enter.ng-hide-remove.insanelyslow,
  .animate-leave.ng-hide-add.insanelyslow {
    -webkit-transition: 54000ms cubic-bezier(0.68, 0, 0.265, 1.55) all;
    /* Chrome */
    transition: 54000ms cubic-bezier(0.68, 0, 0.265, 1.55) all; }
  .animate-enter-slide-left.ng-enter.fast,
  .animate-enter-slide-left.ng-hide-remove.fast,
  .animate-enter-slide-right.ng-enter.fast,
  .animate-enter-slide-right.ng-hide-remove.fast,
  .animate-leave-slide-left.ng-leave.fast,
  .animate-leave-slide-left.ng-hide-add.fast,
  .animate-leave-slide-right.ng-leave.fast,
  .animate-leave-slide-right.ng-hide-add.fast,
  .animate-enter-slide.ng-enter.fast,
  .animate-enter-slide.ng-leave.fast,
  .animate-enter-slide.ng-hide-add.fast,
  .animate-enter-slide.ng-hide-remove.fast,
  .animate-enter-rotate.ng-hide-remove.fast,
  .animate-enter-rotate.ng-hide-add.fast,
  .animate-enter-rotate.ng-enter.fast,
  .animate-enter-rotate.ng-leave .animate-enter-width.ng-enter.fast,
  .animate-enter-width.ng-hide-remove.fast,
  .animate-move.ng-move.fast,
  .animate-enter-height.ng-enter.fast,
  .animate-enter-height.ng-hide-remove.fast,
  .animate-leave-left.ng-leave.fast,
  .animate-leave-left.ng-hide-add.fast,
  .animate-enter-right.ng-enter.fast,
  .animate-enter-right.ng-move.fast,
  .animate-enter-right.ng-hide-remove.fast,
  .animate-class.fast,
  .fade-in-opacity.ng-enter.fast,
  .fade-in-opacity.ng-hide-remove.fast,
  .fade-out-opacity.ng-hide-add.fast,
  .fade-out-opacity.ng-leave.fast,
  .animate-enter.ng-enter.fast,
  .animate-leave.ng-leave.fast,
  .animate-enter.ng-hide-remove.fast,
  .animate-leave.ng-hide-add.fast {
    -webkit-transition: 300ms cubic-bezier(0.68, 0, 0.265, 1.55) all;
    /* Chrome */
    transition: 300ms cubic-bezier(0.68, 0, 0.265, 1.55) all; }

.animate-class.scale[class*="-add"] {
  transform: scale(150%, 150%) ;
  -webkit-transform: scale(150%, 150%) ;
  -moz-transform: scale(150%, 150%) ;
  -ms-transform: scale(150%, 150%) ;
  -o-transform: scale(150%, 150%) ;
  font-size: 150% !important; }

.animate-enter-width.ng-enter,
.animate-enter-width.ng-hide-remove {
  transform: scale(0, 1) ;
  -webkit-transform: scale(0, 1) ;
  -moz-transform: scale(0, 1) ;
  -ms-transform: scale(0, 1) ;
  -o-transform: scale(0, 1) ; }
  .animate-enter-width.ng-enter.left,
  .animate-enter-width.ng-hide-remove.left {
    transform-origin: left center;
    -webkit-transform-origin: left center; }
  .animate-enter-width.ng-enter.right,
  .animate-enter-width.ng-hide-remove.right {
    transform-origin: right center;
    -webkit-transform-origin: right center; }

.animate-enter-width.ng-enter.ng-enter-active,
.animate-enter-width.ng-hide-remove.ng-hide-remove-active {
  transform: scale(1, 1) ;
  -webkit-transform: scale(1, 1) ;
  -moz-transform: scale(1, 1) ;
  -ms-transform: scale(1, 1) ;
  -o-transform: scale(1, 1) ; }

.animate-enter-height.ng-enter,
.animate-enter-height.ng-hide-remove {
  transform: scale(1, 0) ;
  -webkit-transform: scale(1, 0) ;
  -moz-transform: scale(1, 0) ;
  -ms-transform: scale(1, 0) ;
  -o-transform: scale(1, 0) ; }
  .animate-enter-height.ng-enter.top,
  .animate-enter-height.ng-hide-remove.top {
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0; }

.animate-enter-height.ng-enter.ng-enter-active,
.animate-enter-height.ng-hide-remove.ng-hide-remove-active {
  transform: scale(1, 1) ;
  -webkit-transform: scale(1, 1) ;
  -moz-transform: scale(1, 1) ;
  -ms-transform: scale(1, 1) ;
  -o-transform: scale(1, 1) ; }

.fade-in-opacity.ng-enter,
.fade-in-opacity.ng-hide-remove,
.fade-out-opacity.ng-hide-add.ng-hide-add-active,
.fade-out-opacity.ng-leave.ng-leave-active {
  opacity: 0;
  /*
  &.translate-z--50 {
    @include translate3d(0, 0, -50px);
  }*/ }

.fade-in-opacity.ng-enter.ng-enter-active,
.fade-in-opacity.ng-hide-remove.ng-hide-remove-active,
.fade-out-opacity.ng-hide-add,
.fade-out-opacity.ng-leave {
  opacity: 1;
  /*&.translate-z--50 {
    @include translate3d(0, 0, -50px);
  }*/ }

.animate-enter.ng-enter,
.animate-enter.ng-hide-remove {
  transform: scale(0, 0) ;
  -webkit-transform: scale(0, 0) ;
  -moz-transform: scale(0, 0) ;
  -ms-transform: scale(0, 0) ;
  -o-transform: scale(0, 0) ; }
  .animate-enter.ng-enter.translate-z--50,
  .animate-enter.ng-hide-remove.translate-z--50 {
    transform: translate3d(0, 0, -50px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0, 0, 0) ;
    -webkit-transform: translate3d(0, 0, -50px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0, 0, 0) ;
    /*@include translate3d-rotate-scale(0, 0, -50px, 0, 0, 0, important);*/ }
  .animate-enter.ng-enter.translate-z--300,
  .animate-enter.ng-hide-remove.translate-z--300 {
    transform: translate3d(0, 0, -300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0, 0, 0) ;
    -webkit-transform: translate3d(0, 0, -300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0, 0, 0) ;
    /*@include translate3d-rotate-scale(0, 0, -50px, 0, 0, 0, important);*/ }

.animate-enter-right.ng-enter,
.animate-enter-right.ng-hide-remove {
  transform: translateX(100%);
  -webkit-transform: translateX(100%); }

.animate-leave-left.ng-leave,
.animate-leave-left.ng-hide-add,
.animate-enter-right.ng-enter.ng-enter-active,
.animate-enter-right.ng-hide-remove.ng-hide-remove-active {
  transform: translateX(0);
  -webkit-transform: translateX(0); }

.animate-leave-left.ng-leave-active,
.animate-leave-left.ng-hide-add-active {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%); }

.animate-leave.ng-leave,
.animate-enter.ng-enter.ng-enter-active,
.animate-enter.ng-hide-remove-active {
  transform: scale(1, 1) ;
  -webkit-transform: scale(1, 1) ;
  -moz-transform: scale(1, 1) ;
  -ms-transform: scale(1, 1) ;
  -o-transform: scale(1, 1) ; }
  .animate-leave.ng-leave.translate-z--50,
  .animate-enter.ng-enter.ng-enter-active.translate-z--50,
  .animate-enter.ng-hide-remove-active.translate-z--50 {
    transform: translate3d(0, 0, -50px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 0) ;
    -webkit-transform: translate3d(0, 0, -50px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 0) ;
    /*@include translate3d-rotate-scale(0, 0, -50px, 0, 1, 1, important);*/ }
  .animate-leave.ng-leave.translate-z--300,
  .animate-enter.ng-enter.ng-enter-active.translate-z--300,
  .animate-enter.ng-hide-remove-active.translate-z--300 {
    transform: translate3d(0, 0, -300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 0) ;
    -webkit-transform: translate3d(0, 0, -300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 0) ;
    /*@include translate3d-rotate-scale(0, 0, -50px, 0, 0, 0, important);*/ }

.animate-leave.ng-leave.ng-leave-active,
.animate-leave.ng-hide-add-active {
  transform: scale(0, 0) ;
  -webkit-transform: scale(0, 0) ;
  -moz-transform: scale(0, 0) ;
  -ms-transform: scale(0, 0) ;
  -o-transform: scale(0, 0) ; }

.animate-move.ng-move {
  transform: scale(0, 0) ;
  -webkit-transform: scale(0, 0) ;
  -moz-transform: scale(0, 0) ;
  -ms-transform: scale(0, 0) ;
  -o-transform: scale(0, 0) ; }
  .animate-move.ng-move.right {
    transform: scale(0, 1) ;
    -webkit-transform: scale(0, 1) ;
    -moz-transform: scale(0, 1) ;
    -ms-transform: scale(0, 1) ;
    -o-transform: scale(0, 1) ;
    transform-origin: center right;
    -webkit-transform-origin: center right; }
  .animate-move.ng-move.left {
    transform: scale(0, 1) ;
    -webkit-transform: scale(0, 1) ;
    -moz-transform: scale(0, 1) ;
    -ms-transform: scale(0, 1) ;
    -o-transform: scale(0, 1) ;
    transform-origin: center left;
    -webkit-transform-origin: center left; }

.animate-move.ng-move.ng-move-active {
  transform: scale(1, 1) ;
  -webkit-transform: scale(1, 1) ;
  -moz-transform: scale(1, 1) ;
  -ms-transform: scale(1, 1) ;
  -o-transform: scale(1, 1) ; }

.animate-move.ng-move-stagger,
.animate-enter.ng-enter-stagger {
  /* this will have a 100ms delay between each successive leave animation */
  -webkit-transition-delay: 250ms ;
  transition-delay: 250ms ;
  /* in case the stagger doesn't work then these two values
   must be set to 0 to avoid an accidental CSS inheritance */
  -webkit-transition-duration: 0s ;
  transition-duration: 0s ; }

.animate-enter-slide.ng-enter,
.animate-enter-slide.ng-leave,
.animate-enter-slide.ng-hide-add,
.animate-enter-slide.ng-hide-remove,
.animate-enter-rotate.ng-hide-remove,
.animate-enter-rotate.ng-hide-add,
.animate-enter-rotate.ng-enter,
.animate-enter-rotate.ng-leave {
  /*@include transition(all, 500ms, linear);*/
  -webkit-backface-visibility: hidden;
  overflow: hidden; }

.animate-leave-slide-left.ng-leave.ng-leave-active,
.animate-leave-slide-left.ng-hide-add.ng-hide-add-active,
.animate-enter-slide-left.ng-enter,
.animate-enter-slide-left.ng-hide-remove {
  transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
  transform-origin: 100% 0;
  -webkit-transform-origin: 100% 0;
  visibility: hidden; }

.animate-enter-slide-right.ng-enter.ng-enter-active,
.animate-enter-slide-right.ng-hide-remove.ng-hide-remove-active,
.animate-enter-slide-left.ng-enter.ng-enter-active,
.animate-enter-slide-left.ng-hide-remove.ng-hide-remove-active {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  visibility: visible; }

.animate-leave-slide-left.ng-leave,
.animate-leave-slide-left.ng-hide-add,
.animate-leave-slide-right.ng-leave,
.animate-leave-slide-right.ng-hide-add {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  visibility: visible; }

.animate-enter-slide-right.ng-enter,
.animate-enter-slide-right.ng-hide-remove,
.animate-leave-slide-right.ng-leave.ng-leave-active,
.animate-leave-slide-right.ng-hide-add.ng-hide-add-active {
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  transform-origin: 100% 0;
  -webkit-transform-origin: 100% 0;
  visibility: hidden; }

.animate-enter-slide.ng-enter {
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  transform-origin: 100% 0;
  -webkit-transform-origin: 100% 0;
  visibility: hidden; }

.animate-enter-slide.ng-enter.ng-enter-active {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  visibility: visible; }

.animate-enter-slide.ng-leave {
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0; }

.animate-enter-slide.ng-leave-active {
  transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0); }

.animate-enter-slide.ng-hide-remove {
  -webkit-transform: scaleX(0) ;
  -moz-transform: scaleX(0) ;
  -ms-transform: scaleX(0) ;
  -o-transform: scaleX(0) ;
  transform: scaleX(0) ;
  transform-origin: 100% 0;
  -webkit-transform-origin: 100% 0; }

.animate-enter-slide.ng-hide-add {
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0; }

.animate-enter-slide.ng-hide-remove-active {
  -webkit-transform: scaleX(1) ;
  -moz-transform: scaleX(1) ;
  -ms-transform: scaleX(1) ;
  -o-transform: scaleX(1) ;
  transform: scaleX(1) ; }

.animate-enter-slide.ng-hide-add-active {
  -webkit-transform: scaleX(0) ;
  -moz-transform: scaleX(0) ;
  -ms-transform: scaleX(0) ;
  -o-transform: scaleX(0) ;
  transform: scaleX(0) ; }

.animate-enter-rotate.ng-hide-remove,
.animate-enter-rotate.ng-enter {
  -webkit-transform: rotateY(90deg) translateX(100%);
  -moz-transform: rotateY(90deg) translateX(100%);
  -ms-transform: rotateY(90deg) translateX(100%);
  -o-transform: rotateY(90deg) translateX(100%);
  transform: rotateY(90deg) translateX(100%);
  transform-origin: top right;
  -webkit-transform-origin: top right;
  visibility: hidden; }

.animate-enter-rotate.ng-hide-remove.ng-hide-remove-active,
.animate-enter-rotate.ng-enter.ng-enter-active {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
  visibility: visible; }

.animate-enter-rotate.ng-hide-add,
.animate-enter-rotate.ng-leave {
  transform-origin: center left;
  -webkit-transform-origin: center left; }

.animate-enter-rotate.ng-hide-add-active,
.animate-enter-rotate.ng-leave-active {
  -webkit-transform: rotateY(-90deg) translateX(-100%);
  -moz-transform: rotateY(-90deg) translateX(-100%);
  -ms-transform: rotateY(-90deg) translateX(-100%);
  -o-transform: rotateY(-90deg) translateX(-100%);
  transform: rotateY(-90deg) translateX(-100%); }

.animate-line-height {
  transition: 1000ms linear line-height ;
  -webkit-transition: 1000ms linear line-height ;
  -moz-transition: 1000ms linear line-height ;
  -o-transition: 1000ms linear line-height ;
  padding-top: 0;
  padding-bottom: 0; }

.animate-line-height.ng-hide,
.animate-line-height.ng-leave-active {
  line-height: 0px; }

.animate-line-height.ng-hide-add,
.animate-line-height.ng-hide-remove {
  display: block !important; }

.animate-height {
  transition: 100ms linear all ;
  -webkit-transition: 100ms linear all ;
  -moz-transition: 100ms linear all ;
  -o-transition: 100ms linear all ; }
  .animate-height.top {
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0; }

.animate-height.ng-hide,
.animate-height.ng-leave-active {
  transform: scale(1, 0) ;
  -webkit-transform: scale(1, 0) ;
  -moz-transform: scale(1, 0) ;
  -ms-transform: scale(1, 0) ;
  -o-transform: scale(1, 0) ; }

.platform-android .action-sheet-wrapper button {
  padding-left: 16px;
  padding-right: 16px; }

.platform-android .popover {
  margin-top: 10px; }
  .platform-android .popover.popover-bottom {
    margin-top: -10px; }

.time-float-left {
  float: left;
  margin-top: 2px; }

.time-float-right {
  float: right; }

.toggle.toggle-royal input:checked + .track {
  border-color: #67aada;
  background-color: #67aada; }

input[type="time"] {
  padding-top: 0px;
  font-size: 16px;
  color: #67aada;
  height: auto; }

select.ui-timepicker-select {
  padding-top: 0px;
  font-size: 16px;
  color: #67aada;
  height: auto;
  border: 0; }

.purchase-modal {
  top: 0 !important;
  min-height: 100% !important;
  color: #999999; }
  .purchase-modal ion-item {
    border-left: 0;
    border-right: 0; }
  .purchase-modal .description {
    white-space: initial; }
  .purchase-modal .bar-info-energized {
    background-color: #FF7600; }
  .purchase-modal .modal-header {
    color: #999999;
    background-color: white; }
  .purchase-modal .product-header {
    color: inherit;
    background-color: #f5f6f7; }
    .purchase-modal .product-header i {
      color: #67aada;
      font-size: 150%; }
      .purchase-modal .product-header i:before {
        font-weight: bolder; }
    .purchase-modal .product-header .row span.current {
      color: #FF7600;
      text-align: right; }
    .purchase-modal .product-header.selected {
      background-color: #999999;
      color: white; }
      .purchase-modal .product-header.selected i {
        color: inherit;
        vertical-align: middle; }
      .purchase-modal .product-header.selected .row span.current {
        color: white; }
      .purchase-modal .product-header.selected + span {
        vertical-align: middle; }
      .purchase-modal .product-header.selected .purchased {
        color: white; }
  .purchase-modal .product-detail .price {
    color: #67aada; }
  .purchase-modal .product-detail .row:first-child {
    padding-top: 10px;
    padding-bottom: 10px; }
  .purchase-modal .product-detail .description {
    white-space: initial; }
  .purchase-modal .product-detail .feature {
    color: #666;
    list-style: disc;
    font-size: 14px;
    white-space: normal; }
  .purchase-modal .purchased .purchase-expiration {
    color: #666; }
    .purchase-modal .purchased .purchase-expiration p {
      color: inherit; }
    .purchase-modal .purchased .purchase-expiration .current {
      color: #FF7600; }
  .purchase-modal .button ion-spinner svg {
    vertical-align: middle; }
  .purchase-modal .purchase-container p {
    color: #67aada; }
  .purchase-modal .purchase-button.disabled {
    background-color: #999999; }
  .purchase-modal .purchase-button {
    background-color: #69c04e;
    color: white;
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
    display: block;
    transition: 300ms ease-in-out all ;
    -webkit-transition: 300ms ease-in-out all ;
    -moz-transition: 300ms ease-in-out all ;
    -o-transition: 300ms ease-in-out all ; }
    .purchase-modal .purchase-button .spinner path {
      stroke: #67aada; }
    .purchase-modal .purchase-button p {
      font-size: inherit;
      color: inherit; }
    .purchase-modal .purchase-button .purchase-trial {
      font-size: 70%; }
    .purchase-modal .purchase-button:hover {
      background-color: #67aada;
      color: white;
      transform: translate3d(-4px, -4px, 0);
      -webkit-transform: translate3d(-4px, -4px, 0);
      box-shadow: 2px 2px white, 4px 4px #67aada; }
      .purchase-modal .purchase-button:hover .spinner path {
        stroke: white; }
    .purchase-modal .purchase-button.activated, .purchase-modal .purchase-button:active {
      transform: translate3d(0, 2px, 0);
      -webkit-transform: translate3d(0, 2px, 0);
      box-shadow: none; }
  .purchase-modal .purchase-disclaimer p {
    white-space: normal;
    text-align: center; }

.pin-code-modal {
  border-color: #AEC0D1;
  border-radius: 5px;
  border-width: 2px; }
  .pin-code-modal .pin-code-container {
    margin-right: auto;
    text-align: center;
    padding-top: 10px; }
    .pin-code-modal .pin-code-container .lock {
      width: 60px;
      height: 60px;
      margin: 0 auto 10px; }
      .pin-code-modal .pin-code-container .lock .lock-icon {
        background-repeat: no-repeat;
        background-size: cover;
        height: 60px;
        background-image: url(../images/button-lock.svg);
        position: relative; }
        .pin-code-modal .pin-code-container .lock .lock-icon.unlocked {
          background-image: url(../images/button-lock-unlocked.svg); }
    .pin-code-modal .pin-code-container h5 {
      margin-bottom: 20px; }
    .pin-code-modal .pin-code-container .pin-dots.shake {
      -webkit-animation: SHAKE-HORIZONTAL .5s ease-in-out; }

@-webkit-keyframes SHAKE-HORIZONTAL {
  0% {
    -webkit-transform: translateX(0); }
  20% {
    -webkit-transform: translateX(-10px); }
  40% {
    -webkit-transform: translateX(10px); }
  60% {
    -webkit-transform: translateX(-10px); }
  80% {
    -webkit-transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0); } }
    .pin-code-modal .pin-code-container .pin-dots .dot {
      display: inline-block;
      vertical-align: top;
      width: 7px;
      height: 7px;
      background-image: url(../images/blankdot.svg);
      margin: 3px; }
      .pin-code-modal .pin-code-container .pin-dots .dot.on {
        background-image: url(../images/greendot.svg); }
    .pin-code-modal .pin-code-container .logout {
      margin-top: 20px; }
      .pin-code-modal .pin-code-container .logout p a {
        color: #68697B; }
    .pin-code-modal .pin-code-container .pin-code-key-pad {
      margin: 0 auto;
      text-align: center;
      width: 240px;
      height: 200px;
      background-color: #fff;
      overflow: hidden; }
      .pin-code-modal .pin-code-container .pin-code-key-pad .inner {
        width: 243px;
        position: relative; }
      .pin-code-modal .pin-code-container .pin-code-key-pad button {
        float: left;
        font-size: larger;
        color: white;
        border: none;
        outline: none;
        background-color: #69c04e;
        width: 80px;
        height: 50px;
        margin-right: 1px;
        margin-bottom: 1px; }
        .pin-code-modal .pin-code-container .pin-code-key-pad button:active {
          background-color: #51A446; }
        .pin-code-modal .pin-code-container .pin-code-key-pad button.close, .pin-code-modal .pin-code-container .pin-code-key-pad button.backspace {
          font-size: 120%; }

.sliding-alert-bubble {
  background-color: #f5f6f7; }
  .sliding-alert-bubble img {
    float: left;
    width: 10%; }
  .sliding-alert-bubble h1 {
    position: relative; }

.redeem-stars-modal i.icon-star {
  font-size: 22px;
  color: #FFC10D;
  margin: 0 5px;
  line-height: 15px; }

.redeem-stars-modal input.starts-to-redeem {
  width: 100px; }

.instruction-modal {
  top: 5%;
  right: 7.5%;
  bottom: 5%;
  left: 7.5%;
  min-height: 240px;
  width: 85%;
  background-color: rgba(0, 0, 0, 0.7); }
  .instruction-modal h1,
  .instruction-modal h2,
  .instruction-modal h3,
  .instruction-modal h4,
  .instruction-modal h5 {
    color: white;
    text-align: center;
    width: 66%;
    display: inline-block; }
  .instruction-modal h3 {
    font-size: 30px; }
  .instruction-modal .instruction-button {
    margin-top: 10px;
    font-size: 22px; }
  .instruction-modal svg {
    max-width: 30%; }

.instruction-button {
  background-color: #69c04e;
  color: white;
  font-weight: bold;
  border-radius: 10px;
  border-width: 0;
  padding: 10px 40px; }
  .instruction-button:active, .instruction-button.activated {
    transform: translate3d(0, 2px, 0);
    -webkit-transform: translate3d(0, 2px, 0); }

.popover {
  max-width: 350px; }

.popover-routine {
  background-color: #ed7b59 !important; }
  .popover-routine .instruction-button {
    background-color: inherit; }
  .popover-routine .popover-arrow:after {
    background-color: #ed7b59 !important; }

.popover-tabs {
  background-color: #69c04e !important; }

.language-selection-modal ion-content {
  padding: 16px; }

.language-selection-modal .description {
  font-size: 16px; }

.language-selection-modal i {
  margin-left: 5px; }
  .language-selection-modal i:before {
    font-family: 'brili-icons';
    content: "\f110";
    margin-right: 3px; }
  .language-selection-modal i.checked:before {
    content: "\f10f";
    color: #67aada; }
  .language-selection-modal i.checked + span {
    color: #67aada; }

.popover-routine-action {
  width: auto;
  height: auto;
  border-radius: 5px; }
  .popover-routine-action .list-inset {
    min-width: 225px; }
    .popover-routine-action .list-inset .item {
      border-left: 0;
      border-right: 0;
      color: #999999;
      border-bottom: 1px solid #ccc; }
      .popover-routine-action .list-inset .item h3 {
        font-size: 18px; }
      .popover-routine-action .list-inset .item p {
        font-size: 16px; }
      .popover-routine-action .list-inset .item.lower-padding {
        padding-right: 5px;
        padding-left: 5px; }
        .popover-routine-action .list-inset .item.lower-padding p {
          float: left; }
        .popover-routine-action .list-inset .item.lower-padding .popover-routine-settings {
          float: right; }
          .popover-routine-action .list-inset .item.lower-padding .popover-routine-settings i {
            margin-left: 5px; }
            .popover-routine-action .list-inset .item.lower-padding .popover-routine-settings i:before {
              font-family: 'brili-icons';
              content: "\f110";
              margin-right: 3px; }
            .popover-routine-action .list-inset .item.lower-padding .popover-routine-settings i.checked:before {
              content: "\f10f";
              color: #67aada; }
            .popover-routine-action .list-inset .item.lower-padding .popover-routine-settings i.checked + span {
              color: #67aada; }
      .popover-routine-action .list-inset .item.item-icon-right {
        border-radius: 5px;
        border: 1px solid #ccc;
        margin-top: 10px;
        margin-bottom: 10px; }
        .popover-routine-action .list-inset .item.item-icon-right i {
          font-size: 26px;
          margin-right: 24px; }
      .popover-routine-action .list-inset .item.highlight {
        color: white;
        background-color: #67aada;
        border-radius: 5px;
        border: none;
        margin-bottom: 0; }
        .popover-routine-action .list-inset .item.highlight p {
          color: white; }
        .popover-routine-action .list-inset .item.highlight i {
          margin-right: 5px; }
    .popover-routine-action .list-inset .icon-duplicate-routine-divided {
      font-size: 100%;
      color: #67aada; }

.popover-arrow {
  display: none;
  position: absolute;
  display: block;
  top: -17px;
  width: 30px;
  height: 19px;
  overflow: hidden; }
  .popover-arrow:after {
    background-color: white;
    position: absolute;
    top: 12px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    content: '';
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }

.popover-bottom .popover-arrow {
  top: auto;
  bottom: -10px; }
  .popover-bottom .popover-arrow:after {
    top: -6px; }

.popover-tabs,
.popover-routine {
  height: initial;
  border-radius: 10px;
  padding: 15px; }
  .popover-tabs h1,
  .popover-tabs h2,
  .popover-tabs h3,
  .popover-tabs h4,
  .popover-tabs h5,
  .popover-routine h1,
  .popover-routine h2,
  .popover-routine h3,
  .popover-routine h4,
  .popover-routine h5 {
    color: white;
    font-size: inherit; }
  .popover-tabs p,
  .popover-routine p {
    color: white;
    font-size: 18px; }
  .popover-tabs .popover-arrow:after,
  .popover-routine .popover-arrow:after {
    background-color: #69c04e; }
  .popover-tabs .instruction-button,
  .popover-routine .instruction-button {
    margin-top: 10px;
    border: 2px solid white;
    font-size: inherit; }

.button.button-positive {
  background-color: #67aada;
  border-color: #5694b6;
  border-radius: 5px; }

.button.button-default {
  border-radius: 5px; }

/*.terms-of-service {
  padding: 7px 7px 16px 7px;
  cursor: auto;

  input[type=checkbox] {
   font-size: 200%;
   margin-right: 7px;
  }
}*/
.terms-of-service-modal .button.button-clear {
  font-size: 16px; }

.terms-of-service-modal i {
  font-style: italic; }

.terms-of-service-modal .padding {
  padding: 20px; }

.terms-of-service-modal .right-align {
  float: right; }

.user-speed-dial-top .user-speed-dial {
  top: 32px; }
  .user-speed-dial-top .user-speed-dial md-fab-trigger button {
    background-color: transparent !important;
    border-width: 0px; }
    .user-speed-dial-top .user-speed-dial md-fab-trigger button md-icon {
      width: 100%;
      height: 100%; }

.user-speed-dial-bottom .user-speed-dial {
  bottom: -15px; }
  .user-speed-dial-bottom .user-speed-dial.is-iphone-above-10 {
    bottom: 28px; }
  .user-speed-dial-bottom .user-speed-dial md-fab-trigger button md-icon {
    vertical-align: -7%; }

.user-speed-dial {
  position: absolute;
  z-index: 500;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%); }
  .user-speed-dial md-fab-speed-dial.md-scale .md-fab-action-item {
    transform: scale(0, 0) ;
    -webkit-transform: scale(0, 0) ;
    -moz-transform: scale(0, 0) ;
    -ms-transform: scale(0, 0) ;
    -o-transform: scale(0, 0) ; }
  .user-speed-dial md-fab-speed-dial.md-fling .md-fab-action-item {
    opacity: 0; }
  .user-speed-dial md-fab-actions {
    position: absolute;
    left: 0; }
  .user-speed-dial .md-button {
    padding: 0; }
    .user-speed-dial .md-button img {
      max-height: 100%;
      max-width: 100%; }
  .user-speed-dial md-fab-trigger button {
    background-color: white !important;
    border: 1px solid #67aada;
    transform: scale(1.6, 1.6) ;
    -webkit-transform: scale(1.6, 1.6) ;
    -moz-transform: scale(1.6, 1.6) ;
    -ms-transform: scale(1.6, 1.6) ;
    -o-transform: scale(1.6, 1.6) ; }
    .user-speed-dial md-fab-trigger button.md-button.md-fab {
      box-shadow: none;
      z-index: 30; }
    .user-speed-dial md-fab-trigger button md-icon {
      width: 25px;
      height: 25px; }
      .user-speed-dial md-fab-trigger button md-icon svg .st0,
      .user-speed-dial md-fab-trigger button md-icon svg .cls-1 {
        transition: 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) fill ;
        -webkit-transition: 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) fill ;
        -moz-transition: 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) fill ;
        -o-transition: 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) fill ; }
    .user-speed-dial md-fab-trigger button .icon {
      color: #67aada; }
    .user-speed-dial md-fab-trigger button svg {
      fill: #67aada; }
      .user-speed-dial md-fab-trigger button svg .cls-1 {
        fill: #67aada; }
    .user-speed-dial md-fab-trigger button:active {
      background-color: #67aada !important; }
      .user-speed-dial md-fab-trigger button:active md-icon svg .st0,
      .user-speed-dial md-fab-trigger button:active md-icon svg .cls-1 {
        fill: white; }
  .user-speed-dial md-fab-trigger .icon {
    font-size: 400%; }
  .user-speed-dial md-fab-actions button {
    color: #fafafa !important;
    background-color: rgba(33, 33, 33, 0.75) !important; }
  .user-speed-dial md-fab-actions .icon {
    font-size: 200%;
    color: currentColor; }

.with-reward {
  margin-right: 65px; }

ion-view.kid-init-view,
ion-view.profile-init-view,
ion-view.prize-edit-view {
  background-color: #f5f6f7; }

@media (max-height: 1400px) {
  .routine-start-prompt .prompt-wrap {
    padding-top: 255px;
    padding-bottom: 175px; } }

@media (max-height: 1200px) {
  .routine-start-prompt .prompt-wrap {
    padding-top: 170px;
    padding-bottom: 100px; } }

@media (max-width: 930px) {
  .kids-container .card-task-container {
    width: 80%;
    margin-left: 10%; }
  .kids-container .card-task .with-reward {
    margin-right: 180px; } }

@media (max-width: 830px) {
  .kid-font h1 {
    font-size: 26px;
    margin-bottom: 2px; }
  .routine-container .routine-header .column-two p {
    margin-bottom: 0; }
  .routine-button {
    width: 50px;
    height: 50px; }
  .avatar-status-container .circle-wrapper {
    height: 85%; }
    .avatar-status-container .circle-wrapper .avatar-status-semi-circle {
      height: 100%; }
  .card.card-task .task-top .task-reward .task-reward-worth {
    top: 18px; }
    .card.card-task .task-top .task-reward .task-reward-worth p {
      font-size: 18px; }
  .routine-timer {
    height: 50px; }
    .routine-timer .routine-timer-foot svg,
    .routine-timer .routine-timer-foot .timer-icon-holder {
      width: 50px;
      height: 50px; } }

@media (max-height: 800px) {
  .routine-start-prompt .prompt-wrap {
    padding-top: 50px;
    padding-bottom: 50px; }
  .button-back-routine {
    bottom: 20px; } }

@media (max-width: 737px) {
  .routine-button {
    width: 45px;
    height: 45px; }
  .avatar-status-container .avatar-status {
    height: 78%; }
  .avatar-status-container .circle-wrapper {
    height: 78%; }
    .avatar-status-container .circle-wrapper .avatar-status-semi-circle {
      height: 100%; }
  .routine-timer {
    height: 45px; }
    .routine-timer .routine-timer-foot svg,
    .routine-timer .routine-timer-foot .timer-icon-holder {
      width: 45px;
      height: 45px; } }

@media (min-width: 680px) {
  .pin-code-modal .pin-code-container .lock {
    display: none; }
  .routine-time-modal {
    top: 16%;
    bottom: 16%; } }

@media (max-width: 679px) {
  .instruction-modal {
    top: 0;
    left: 0;
    z-index: 10;
    overflow: hidden;
    min-height: 100%;
    width: 100%; }
  .routine-button:last-child {
    margin-right: 0; } }

@media (max-width: 600px) {
  .kids-container .card-task-container {
    width: 100%;
    margin-left: inherit; }
  .with-reward {
    margin-right: 65px; } }

@media (max-width: 479px) {
  .routine-container .routine-header .avatar-status-container {
    display: none; }
  .routine-container .routine-header div.column {
    width: 50%; }
  .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content > div.col2 {
    width: 45%;
    padding: 0; }
    .list-container .card.card-routine .item.item-thumbnail-left.item-task .task-content > div.col2 h2 {
      margin-right: 0; } }

@media (max-height: 600px) {
  .routine-start-prompt .prompt-wrap {
    padding-top: 30px;
    padding-bottom: 30px; }
  .login-container .header {
    height: 17%;
    padding-top: 20px;
    margin-bottom: 3%; }
  .login-container .login-button-container {
    height: 47.5%;
    margin-top: 10px; }
    .login-container .login-button-container .item-checkbox.checkbox-s {
      margin-left: -25px; }
  .card.card-task .task-top .task-icon.bigger-icon {
    border-width: 5px; } }

@media (max-height: 500px) {
  .kid-font h1 {
    margin-bottom: 0; }
  .routine-container .routine-header .column-two p {
    margin-bottom: 0; }
  .prompt-wrap h1 {
    font-size: 28px;
    margin-bottom: 20px; }
  .routine-start-prompt hr {
    margin-top: 3%;
    margin-bottom: 3%; }
  .button-start-routine {
    width: 190px;
    height: 35px; }
  h2 {
    font-size: 20px; }
  .card.card-task .task-top .task-icon-wrapper {
    margin-top: 45px; }
  .routine-timer {
    height: 55px;
    margin-top: 0.5%; }
    .routine-timer .routine-timer-foot svg,
    .routine-timer .routine-timer-foot .timer-icon-holder {
      width: 55px;
      height: 55px; }
  .timer-remaining {
    display: none; } }

@media only screen and (max-device-width: 767px) {
  .instruction-modal h3 {
    font-size: 26px; }
  .instruction-modal .instruction-button {
    font-size: 22px; }
  .login-container .login-instruction {
    top: 150%; }
    .login-container .login-instruction.instruction-left {
      top: 150%; }
  .popover-tabs,
  .popover-routine {
    font-size: 80%;
    padding: 10px; }
  .pin-code-modal .pin-code-container .pin-code-key-pad {
    margin: 0 auto;
    text-align: center;
    width: 225px;
    height: 240px;
    background-color: #fff;
    overflow: hidden; }
    .pin-code-modal .pin-code-container .pin-code-key-pad .inner {
      width: 228px;
      position: relative; }
    .pin-code-modal .pin-code-container .pin-code-key-pad button {
      float: left;
      font-size: larger;
      color: white;
      border: none;
      outline: none;
      background-color: #69c04e;
      width: 75px;
      height: 60px;
      margin-right: 1px;
      margin-bottom: 1px; }
  .no-routine-scheduled {
    width: 66%; }
    .no-routine-scheduled .message h2 {
      font-size: 28px; }
  .card.card-task .task-top .task-icon.bigger-icon {
    border-width: 5px; }
  .routine-container .card.card-task .task-icon-wrapper {
    height: 22vh;
    width: 22vh; }
    .routine-container .card.card-task .task-icon-wrapper .thumbnail-wrapper {
      border-width: 5px; } }

@media only screen and (max-width: 767px) and (max-height: 545px) and (orientation: landscape) {
  .manage-prizes-button-area {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .manage-prizes-button-area.routine-mode-prizes {
      display: grid;
      margin-top: 0px; }
    .manage-prizes-button-area img {
      width: 12%; }
    .manage-prizes-button-area .font-custom {
      vertical-align: middle; }
  .spacer {
    height: 15px; }
  .login-panel .strike {
    display: none; }
  .item-checkbox.checkbox-s {
    float: left; }
    .item-checkbox.checkbox-s + span {
      vertical-align: -webkit-baseline-middle; }
  .button-change-routine {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px; }
    .button-change-routine h1,
    .button-change-routine h2,
    .button-change-routine h3,
    .button-change-routine h4,
    .button-change-routine h5 {
      margin: 2px; }
  .onboarding-slide h3 {
    font-size: 18px; }
  .onboarding-slide img.inline-image {
    width: initial; }
  .instruction-modal h3 {
    font-size: 22px; }
  .instruction-modal .instruction-button {
    font-size: 16px; }
  .pin-code-modal .lock {
    display: none; }
  .pin-code-modal .pin-code-container h5 {
    margin-top: 0;
    margin-bottom: 12px; }
  .pin-code-modal .pin-code-container .pin-code-key-pad {
    width: 225px;
    height: 180px; }
    .pin-code-modal .pin-code-container .pin-code-key-pad .inner {
      width: 228px; }
    .pin-code-modal .pin-code-container .pin-code-key-pad button {
      width: 75px;
      height: 45px; }
  .pin-code-modal .pin-code-container .logout {
    margin-top: 12px; }
  .pin-code-modal .avatar-status-container {
    height: auto;
    padding-top: 0;
    color: #68697B; }
    .pin-code-modal .avatar-status-container .avatar-status {
      background-image: none;
      padding-left: 0; }
      .pin-code-modal .avatar-status-container .avatar-status .avatar-name {
        display: none; }
      .pin-code-modal .avatar-status-container .avatar-status .avatar-reward {
        margin-left: 5px;
        padding-top: 8px; }
        .pin-code-modal .avatar-status-container .avatar-status .avatar-reward img {
          margin-right: 5px; }
    .pin-code-modal .avatar-status-container .avatar-status-semi-circle {
      display: none; }
  .instruction-modal {
    padding-top: 20px; }
  .profile-container .task-reward {
    padding-left: 45px; }
  .login-container .login-panel .login-logo {
    border-bottom: none; }
    .login-container .login-panel .login-logo:before, .login-container .login-panel .login-logo:after {
      display: none; }
  .login-container .login-panel .login-greeting {
    top: 15%; }
  .login-container .header {
    height: 10%;
    margin-bottom: 1%;
    padding: 0; }
  .login-container .login-button-container {
    height: 65%;
    margin-top: 0; }
  .login-container .horizontal-rule {
    display: none; }
  .kid-font h1 {
    font-size: 22px;
    margin-bottom: 3px; }
  .routine-header {
    padding-top: 10px; }
  .routine-container .routine-header .column {
    padding: 0; }
  .avatar-status-container {
    height: auto;
    padding-top: 0;
    color: #68697B;
    z-index: -10; }
    .avatar-status-container .avatar-status {
      background-image: none;
      padding-left: 0; }
      .avatar-status-container .avatar-status .avatar-name {
        display: none; }
      .avatar-status-container .avatar-status .avatar-reward {
        margin-left: 5px;
        padding-top: 8px; }
        .avatar-status-container .avatar-status .avatar-reward img {
          margin-right: 5px; }
    .avatar-status-container .avatar-status-semi-circle {
      display: none; }
  .card.card-task {
    top: 43%; }
  .routine-container .routine-tasks .swipe-instruction {
    left: 9%; }
  .routine-start-prompt .prompt-wrap {
    padding-top: 20px;
    padding-bottom: 20px; }
  .routine-start-prompt h1 {
    font-size: 26px; }
  .routine-start-prompt hr {
    margin-top: 2%;
    margin-bottom: 2%; }
  .routine-start-prompt h2 span {
    font-size: 26px; }
  .routine-start-prompt .button-start-routine {
    width: 190px;
    height: 35px; }
  .routine-start-prompt h2 {
    font-size: 20px; }
  .timer-remaining {
    display: none; }
  .routine-timer {
    margin-top: 0; }
  .card.card-task .task-top {
    height: 80%; }
    .card.card-task .task-top .task-reward .task-reward-worth {
      top: 12px;
      left: 10px; }
    .card.card-task .task-top .task-icon-wrapper {
      margin-top: 30px; }
  .card.card-task .task-bottom {
    height: 20%;
    padding: 7px 10px; }
  .slack-prompt .slack-greeting-margin {
    margin-top: 5px; }
  .slack-prompt .slack-reward-margin {
    margin-top: 5px;
    margin-bottom: 5px; }
  .slack-prompt .image-container {
    width: 50%; }
    .slack-prompt .image-container .slack-icon-holder {
      width: 90px;
      height: 90px;
      top: 42% !important; }
  .button-back-routine {
    width: 175px;
    height: 30px;
    bottom: 5px; }
    .button-back-routine h2 {
      font-size: 18px; }
  .routine-prompt-thumbs-up {
    width: 20%;
    margin: 2% auto 0 auto; }
    .routine-prompt-thumbs-up img {
      width: 100%; }
  h3.modal-message {
    margin-top: 0;
    margin-bottom: 0; }
  h4.modal-message {
    margin-top: 0;
    margin-bottom: 0; }
  .bar-button {
    height: 18px;
    border-radius: 9px;
    font-size: 80%;
    line-height: 18px; }
  .routine-container .card.card-task .task-icon-wrapper {
    height: 26vh;
    width: 26vh; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
  .kid-font h1 {
    font-size: 22px; }
  .routine-container .routine-header .column-one {
    display: none; }
  .routine-button {
    width: 40px;
    height: 40px; }
  .routine-start-prompt img {
    width: 6%; }
  .routine-container .routine-tasks .swipe-instruction {
    top: 19%;
    left: 3%; }
    .routine-container .routine-tasks .swipe-instruction p {
      padding-left: 110%; }
  .routine-container .routine-tasks .swipe-right-instruction {
    bottom: 3%;
    right: 3%;
    top: auto;
    transform: scaleY(-1) scaleX(-1);
    -webkit-transform: scaleY(-1) scaleX(-1); }
    .routine-container .routine-tasks .swipe-right-instruction p {
      padding-bottom: 40%;
      padding-right: 510%;
      transform: scaleY(-1) scaleX(-1) rotate(-10deg);
      -webkit-transform: scaleY(-1) scaleX(-1) rotate(-10deg); }
  .card.card-task {
    height: 70%;
    width: 66%; }
    .card.card-task .task-top {
      height: 80%; }
      .card.card-task .task-top .task-icon-wrapper {
        margin-top: 30px; }
      .card.card-task .task-top .task-reward {
        width: 40%; }
        .card.card-task .task-top .task-reward .task-reward-worth {
          top: 8px;
          left: 8px; }
          .card.card-task .task-top .task-reward .task-reward-worth p {
            font-size: 16px; }
    .card.card-task .task-bottom {
      height: 20%;
      padding: 8px 10px 0px 10px; }
  .card-task.task-running.task-waiting-0 {
    transform: translate3d(20%, -50%, 0) rotateX(0deg) rotateY(-360deg) rotateZ(0deg) scale3d(1, 1, 1) ;
    -webkit-transform: translate3d(20%, -50%, 0) rotateX(0deg) rotateY(-360deg) rotateZ(0deg) scale3d(1, 1, 1) ; }
  .jump-center {
    -webkit-animation: JUMP-CENTER-20 1s linear infinite ;
    /* Safari 4+ */
    -moz-animation: JUMP-CENTER-20 1s linear infinite ;
    /* Fx 5+ */
    -o-animation: JUMP-CENTER-20 1s linear infinite ;
    /* Opera 12+ */
    animation: JUMP-CENTER-20 1s linear infinite ; }
  .card-task.task-waiting-0 {
    transform: translate3d(75%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(75%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-1 {
    transform: translate3d(130%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(130%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-2 {
    transform: translate3d(185%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(185%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-3 {
    transform: translate3d(240%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(240%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-4 {
    transform: translate3d(295%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(295%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-5 {
    transform: translate3d(350%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(350%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-6 {
    transform: translate3d(405%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(405%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-7 {
    transform: translate3d(460%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(460%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-8 {
    transform: translate3d(515%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(515%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-9 {
    transform: translate3d(570%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(570%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-10 {
    transform: translate3d(625%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(625%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-11 {
    transform: translate3d(680%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(680%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-12 {
    transform: translate3d(735%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(735%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-13 {
    transform: translate3d(790%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(790%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-14 {
    transform: translate3d(845%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(845%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-15 {
    transform: translate3d(900%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(900%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-16 {
    transform: translate3d(955%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(955%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-17 {
    transform: translate3d(1010%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1010%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-18 {
    transform: translate3d(1065%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1065%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-19 {
    transform: translate3d(1120%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1120%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-20 {
    transform: translate3d(1175%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1175%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-21 {
    transform: translate3d(1230%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1230%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-22 {
    transform: translate3d(1285%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1285%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-23 {
    transform: translate3d(1340%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1340%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-24 {
    transform: translate3d(1395%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1395%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-25 {
    transform: translate3d(1450%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1450%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-26 {
    transform: translate3d(1505%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1505%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-27 {
    transform: translate3d(1560%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1560%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-28 {
    transform: translate3d(1615%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1615%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-29 {
    transform: translate3d(1670%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1670%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-30 {
    transform: translate3d(1725%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1725%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-31 {
    transform: translate3d(1780%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1780%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-32 {
    transform: translate3d(1835%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1835%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-33 {
    transform: translate3d(1890%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1890%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-34 {
    transform: translate3d(1945%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(1945%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-35 {
    transform: translate3d(2000%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2000%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-36 {
    transform: translate3d(2055%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2055%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-37 {
    transform: translate3d(2110%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2110%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-38 {
    transform: translate3d(2165%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2165%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-39 {
    transform: translate3d(2220%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2220%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-40 {
    transform: translate3d(2275%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2275%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-41 {
    transform: translate3d(2330%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2330%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-42 {
    transform: translate3d(2385%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2385%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-43 {
    transform: translate3d(2440%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2440%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-44 {
    transform: translate3d(2495%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2495%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-45 {
    transform: translate3d(2550%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2550%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-46 {
    transform: translate3d(2605%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2605%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-47 {
    transform: translate3d(2660%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2660%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-48 {
    transform: translate3d(2715%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2715%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-49 {
    transform: translate3d(2770%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2770%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-waiting-50 {
    transform: translate3d(2825%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(2825%, -50%, -300px) rotateX(0deg) rotateY(-1080deg) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-0 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(335deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(335deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-1 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-24deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-24deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-2 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-23deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-23deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-3 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-22deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-22deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-4 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(339deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(339deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-5 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-20deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-20deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-6 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-19deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-19deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-7 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-18deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-18deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-8 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(343deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(343deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-9 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-16deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-16deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-10 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-15deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-15deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-11 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-14deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-14deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-12 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(347deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(347deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-13 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-12deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-12deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-14 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-11deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-11deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-15 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-10deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-10deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-16 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(351deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(351deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-17 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-8deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-8deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-18 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-7deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-7deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-19 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-6deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-6deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-20 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(355deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(355deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-21 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-4deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-4deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-22 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-3deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-3deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-23 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-2deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-2deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-24 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(359deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(359deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-25 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(0deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(0deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-26 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(1deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(1deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-27 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(2deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(2deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-28 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-357deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-357deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-29 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(4deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(4deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-30 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(5deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(5deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-31 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(6deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(6deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-32 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-353deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-353deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-33 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(8deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(8deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-34 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(9deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(9deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-35 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(10deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(10deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-36 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-349deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-349deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-37 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(12deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(12deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-38 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(13deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(13deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-39 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(14deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(14deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-40 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-345deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-345deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-41 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(16deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(16deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-42 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(17deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(17deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-43 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(18deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(18deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-44 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-341deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-341deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-45 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(20deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(20deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-46 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(21deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(21deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-47 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(22deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(22deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-48 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-337deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(-337deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-49 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(24deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(24deg) scale3d(0.65, 0.65, 1) ; }
  .card-task.task-complete.task-complete-50 {
    transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(25deg) scale3d(0.65, 0.65, 1) ;
    -webkit-transform: translate3d(-80%, -50%, -300px) rotateX(0deg) rotateY(0) rotateZ(25deg) scale3d(0.65, 0.65, 1) ; }
  .slack-prompt .slack-greeting-margin {
    margin-top: 10px; }
  .slack-prompt .image-container {
    width: 75%; }
    .slack-prompt .image-container .slack-icon-holder {
      width: 100px;
      height: 100px;
      top: 50% !important; }
  .button-back-routine {
    width: 175px;
    height: 30px;
    bottom: 15px; }
    .button-back-routine h2 {
      font-size: 18px; }
  .routine-timer {
    height: 40px;
    margin-top: 10px;
    -webkit-transform: translateZ(0) translateX(-4%); }
    .routine-timer .routine-timer-foot svg,
    .routine-timer .routine-timer-foot .timer-icon-holder {
      width: 40px;
      height: 40px; }
    .routine-timer .routine-timer-foot p {
      font-size: 80%; }
  .routine-footer .timer-remaining {
    display: none; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
  .manage-prizes-button-area {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .manage-prizes-button-area.routine-mode-prizes {
      display: grid; }
    .manage-prizes-button-area img {
      width: 12%; }
    .manage-prizes-button-area .font-custom {
      vertical-align: middle; }
  .spacer {
    height: 15px; }
  .routine-container .routine-tasks .sailboat-background.sky {
    height: 6px; }
  .routine-container .routine-tasks .sailboat-background.waves {
    height: 58px;
    background-size: 60px 12px, 60px 12px, 54px 54px; }
  .routine-container .routine-tasks .sailboat-background.water {
    padding-top: 6px; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 40 / 71) {
  .login-container .login-panel {
    top: 5%;
    bottom: 5%; }
  .prize-card {
    width: 290px; } }

@media only screen and (max-width: 568px) and (max-height: 320px) and (orientation: landscape) {
  .manage-prizes-button-area {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .manage-prizes-button-area.routine-mode-prizes {
      display: grid; }
    .manage-prizes-button-area img {
      width: 12%; }
    .manage-prizes-button-area .font-custom {
      vertical-align: middle; }
  .spacer {
    height: 15px; }
  .kid-font h1 {
    margin-bottom: 0; }
  .routine-button {
    width: 40px;
    height: 40px; }
  .routine-start-prompt h1 {
    font-size: 22px; }
  .routine-start-prompt h2 span {
    font-size: 22px; }
  .routine-start-prompt .button-start-routine {
    width: 180px;
    height: 30px; }
  .routine-start-prompt h2 {
    font-size: 18px; }
  .card.card-task .task-top {
    height: 80%; }
    .card.card-task .task-top .task-reward .task-reward-worth {
      top: 8px;
      left: 8px; }
    .card.card-task .task-top .task-timer {
      top: 10px; }
  .card.card-task .task-icon-wrapper {
    margin-top: 28px; }
  .card.card-task .task-bottom {
    height: 20%;
    padding: 5px 7px; }
  .routine-timer {
    height: 35px;
    margin-top: 0; }
    .routine-timer .routine-timer-foot svg,
    .routine-timer .routine-timer-foot .timer-icon-holder {
      width: 35px;
      height: 35px; }
  .prize-card {
    width: 260px; } }

@media only screen and (max-width: 480px) and (orientation: landscape) {
  .manage-prizes-button-area {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .manage-prizes-button-area.routine-mode-prizes {
      display: grid; }
    .manage-prizes-button-area img {
      width: 12%; }
    .manage-prizes-button-area .font-custom {
      vertical-align: middle; }
  .spacer {
    height: 15px; }
  .routine-container .routine-tasks .swipe-instruction {
    left: 6%; }
  .kid-font h1 {
    font-size: 20px; }
  .card.card-task .task-top .task-icon-wrapper {
    margin-top: 22px; }
  .card.card-task .task-top .task-reward .task-reward-worth {
    top: 6px;
    left: 6px; }
    .card.card-task .task-top .task-reward .task-reward-worth p {
      font-size: 80%; } }

@media only screen and (min-device-height: 568px) and (max-device-height: 736px) and (orientation: portrait) {
  .routine-start-prompt .prompt-wrap {
    padding-top: 70px;
    padding-bottom: 40px; }
    .routine-start-prompt .prompt-wrap h1 {
      font-size: 32px; }
  .button-start-routine {
    width: 250px;
    height: 45px; }
    .button-start-routine h2 {
      font-size: 24px; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 40 / 71) and (orientation: landscape) {
  .manage-prizes-button-area {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .manage-prizes-button-area.routine-mode-prizes {
      display: grid; }
  .spacer {
    height: 15px; } }

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .manage-prizes-button-area {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .manage-prizes-button-area.routine-mode-prizes {
      display: grid; }
    .manage-prizes-button-area img {
      width: 12%; }
    .manage-prizes-button-area .font-custom {
      vertical-align: middle; }
  .spacer {
    height: 15px; }
  .routine-container .routine-tasks .sailboat-background.sky {
    height: 10px; }
  .routine-container .routine-tasks .sailboat-background.waves {
    height: 70px;
    background-size: 80px 16px, 80px 16px, 64px 64px; }
  .routine-container .routine-tasks .sailboat-background.water {
    padding-top: 3px; } }

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3) {
  .manage-prizes-button-area {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .manage-prizes-button-area.routine-mode-prizes {
      display: grid; }
    .manage-prizes-button-area img {
      width: 12%; }
    .manage-prizes-button-area .font-custom {
      vertical-align: middle; }
  .spacer {
    height: 15px; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: portrait) {
  .kids-container .card-task .task-icon-wrapper {
    width: 80px;
    height: 80px; }
  .task-reward-kids {
    width: 52%;
    font-size: 12px; }
    .task-reward-kids span {
      margin-left: 5px;
      margin-right: 5px; }
      .task-reward-kids span i {
        margin-right: 0px; } }

@media only screen and (max-width: 667px) {
  .routine-identity .profile-img .icon.icon-kid img {
    width: 50px;
    height: 50px; }
  .routine-identity .profile-img .icon.icon-initial {
    margin-right: 0; }
  .routine-info {
    margin-top: 20px; }
    .routine-info span {
      margin-right: 5px; }
      .routine-info span i {
        margin-right: 5px; }
      .routine-info span i.icon-star-outline {
        color: #FBC010;
        font-size: 18px; } }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .toast {
    width: 40%;
    left: 30%; }
  .profile-container .profile-thumbnail {
    padding-top: 20px;
    padding-bottom: 20px; }
    .profile-container .profile-thumbnail img {
      height: 130px;
      width: 130px; }
    .profile-container .profile-thumbnail a {
      font-size: 100px; }
  .profile-container .task-reward {
    width: 17%;
    height: 80%;
    padding-left: 65px;
    padding-top: 30px;
    top: -5px;
    left: -5px; }
  .kids-container .card-task .task-icon-wrapper {
    height: 110px;
    width: 110px; }
  .task-reward-kids {
    width: 85px; }
  .instruction-modal {
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; }
    .instruction-modal .instruction-button {
      margin-top: 20px; }
  .pin-code-modal .pin-code-container .lock {
    display: inline-block; }
  .prize-list-inset {
    min-width: 380px; }
  .routine-container .routine-tasks .sailboat-background.sky {
    height: 75px; }
  .routine-container .routine-tasks .sailboat-background.waves {
    height: 110px;
    background-size: auto, auto, 100px 100px; }
  .routine-container .routine-tasks .sailboat-background.water {
    padding-top: 75px; }
  .routine-container .card.card-task .task-icon-wrapper {
    height: 24vw;
    width: 24vw;
    margin-top: 50px; } }

@media only screen and (min-device-width: 1024px) and (max-device-height: 768px) and (orientation: landscape) {
  .manage-prizes-button-area.routine-mode-prizes {
    display: grid; }
  .manage-prizes-button-area img {
    width: 12%; }
  .manage-prizes-button-area .font-custom {
    vertical-align: middle; }
  .spacer {
    height: 15px; }
  .routine-start-prompt .prompt-wrap {
    padding-top: 90px;
    padding-bottom: 100px; }
  .button-back-routine {
    bottom: 65px; }
  .task-reward {
    width: 53%;
    height: 50%; }
  .card.card-task .task-top .task-reward .task-reward-worth {
    top: 20px;
    left: 20px; }
    .card.card-task .task-top .task-reward .task-reward-worth p {
      font-size: 150%; }
  .task-reward-kids {
    width: 100px; }
  .prize-edit-background {
    padding: 60px 0px; } }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .login-container .login-instruction {
    top: 35%; }
  .no-routine-scheduled .message h2 {
    font-size: 35px; }
  .no-routine-scheduled .exclamation-icon {
    width: 70px; }
  .card.card-task {
    height: 60%; }
  .slack-prompt .slack-greeting-margin {
    margin-top: 70px; }
  .slack-prompt .image-container .slack-icon-holder {
    top: 50% !important; }
  .prize-edit-background {
    padding: 80px 0px; }
  .routine-container .card-task .task-icon-wrapper {
    height: 22vh;
    width: 22vh; } }

.thumbnail-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover !important;
  background-position: center center !important; }
  .thumbnail-wrapper.with-border {
    border: 4px solid #67aada; }
  .thumbnail-wrapper > img {
    min-width: 100% !important;
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 !important; }

.prize-edit-background .profile-wrap {
  width: 20vh;
  height: 20vh; }

@media only screen and (min-device-width: 768px) {
  .task-content h3 {
    font-size: 25px !important; }
  .task-content .col-thumbnail {
    max-width: 80px !important; }
    .task-content .col-thumbnail .task-stats,
    .task-content .col-thumbnail .task-type {
      display: none; }
  .task-content .col-info .task-stats,
  .task-content .col-info .task-type {
    display: -webkit-box !important;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box !important;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox !important;
    /* TWEENER - IE 10 */
    display: -webkit-flex !important;
    /* NEW - Chrome */
    display: flex !important; }
  .task-content .col-info canvas {
    height: 60px !important;
    margin-top: -30px !important; }
  .prize-edit-background {
    padding: 80px 0px; }
  .prize-list-inset {
    min-width: 400px; } }

.subscription-modal {
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  min-height: 100% !important;
  min-width: 100% !important; }
  .subscription-modal .subscription-modal-content {
    width: 70%;
    left: 15%; }
  .subscription-modal .brili-adult-content {
    flex-direction: column;
    display: flex;
    align-items: center; }
    .subscription-modal .brili-adult-content img {
      max-width: 200px;
      border-radius: 10px; }
  .subscription-modal .download-brili-adult {
    display: flex;
    flex-direction: row;
    justify-content: space-between; }
    .subscription-modal .download-brili-adult img {
      height: 32px; }
    .subscription-modal .download-brili-adult.adult-android {
      justify-content: center;
      align-items: center; }
      .subscription-modal .download-brili-adult.adult-android img {
        height: 50px; }
    .subscription-modal .download-brili-adult.adult-ios {
      justify-content: center;
      align-items: center; }
      .subscription-modal .download-brili-adult.adult-ios img {
        height: 50px; }
  .subscription-modal ion-content {
    padding: 16px;
    font-size: 16px; }
  .subscription-modal ion-item {
    border-left: 0;
    border-right: 0; }
  .subscription-modal .description {
    white-space: initial; }
  .subscription-modal .bar-info-energized {
    background-color: #FF7600; }
  .subscription-modal .modal-header {
    color: #999999;
    background-color: white; }
  .subscription-modal .product-header {
    color: inherit;
    background-color: #f5f6f7; }
    .subscription-modal .product-header i {
      color: #67aada;
      font-size: 150%; }
      .subscription-modal .product-header i:before {
        font-weight: bolder; }
    .subscription-modal .product-header .row span.current {
      color: #FF7600;
      text-align: right; }
    .subscription-modal .product-header.selected {
      background-color: #999999;
      color: white; }
      .subscription-modal .product-header.selected i {
        color: inherit;
        vertical-align: middle; }
      .subscription-modal .product-header.selected .row span.current {
        color: white; }
      .subscription-modal .product-header.selected + span {
        vertical-align: middle; }
      .subscription-modal .product-header.selected .purchased {
        color: white; }
  .subscription-modal .button ion-spinner svg {
    vertical-align: middle; }
  .subscription-modal .purchase-container p {
    color: #67aada; }
  .subscription-modal .purchase-button.disabled {
    background-color: #999999; }
  .subscription-modal .purchase-button {
    background-color: #69c04e;
    color: white;
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
    display: block;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    width: 100%;
    transition: 300ms ease-in-out all ;
    -webkit-transition: 300ms ease-in-out all ;
    -moz-transition: 300ms ease-in-out all ;
    -o-transition: 300ms ease-in-out all ; }
    .subscription-modal .purchase-button .spinner path {
      stroke: #67aada; }
    .subscription-modal .purchase-button p {
      font-size: inherit;
      color: inherit;
      margin-bottom: 2px; }
    .subscription-modal .purchase-button:hover {
      background-color: #67aada;
      color: white;
      transform: translate3d(-4px, -4px, 0);
      -webkit-transform: translate3d(-4px, -4px, 0);
      box-shadow: 2px 2px white, 4px 4px #67aada; }
      .subscription-modal .purchase-button:hover .spinner path {
        stroke: white; }
    .subscription-modal .purchase-button.activated, .subscription-modal .purchase-button:active {
      transform: translate3d(0, 2px, 0);
      -webkit-transform: translate3d(0, 2px, 0);
      box-shadow: none; }
  .subscription-modal .purchase-disclaimer p {
    white-space: normal;
    text-align: center; }

.subscription-disclaimer {
  font-size: 0.75em;
  text-align: center; }

.coupon-modal .result-failure {
  background: #FBC010; }

.coupon-modal .result-success {
  background: #ABEBC6; }

/* STRIPE MODAL */
.stripe-modal ion-content {
  padding: 16px; }
  .stripe-modal ion-content .header-container .logo {
    margin: 70px auto 30px;
    text-align: center; }
    .stripe-modal ion-content .header-container .logo img {
      height: 80px; }
  .stripe-modal ion-content .header-container h1,
  .stripe-modal ion-content .header-container p {
    text-align: center; }
  .stripe-modal ion-content .header-container h1 {
    font-size: 36px; }
  .stripe-modal ion-content .header-container p.email {
    font-size: 16px; }
  .stripe-modal ion-content .main-container {
    width: 100%; }
    .stripe-modal ion-content .main-container form .form-row {
      padding: 10px; }
      .stripe-modal ion-content .main-container form .form-row h2 {
        text-align: center;
        font-size: 1.6rem;
        color: #4B4B4B; }
    .stripe-modal ion-content .main-container form .StripeElement {
      background-color: white;
      padding: 8px 12px;
      border-radius: 4px;
      border: 1px solid transparent;
      box-shadow: 0 1px 3px 0 #e6ebf1;
      -webkit-transition: box-shadow 150ms ease;
      transition: box-shadow 150ms ease; }
    .stripe-modal ion-content .main-container form .StripeElement--focus {
      box-shadow: 0 1px 3px 0 #cfd7df; }
    .stripe-modal ion-content .main-container form .StripeElement--invalid {
      border-color: #fa755a; }
    .stripe-modal ion-content .main-container form .StripeElement--complete {
      border-color: #6FB900; }
    .stripe-modal ion-content .main-container form .StripeElement--webkit-autofill {
      background-color: #fefde5 !important; }
    .stripe-modal ion-content .main-container form #card-errors {
      text-align: center;
      padding-top: 8px;
      color: #f53d3d; }
    .stripe-modal ion-content .main-container form .button-container {
      padding-left: 16px;
      padding-right: 16px;
      margin-top: 20px; }

/* The below is required to make Stripe 3D authentication dialog controls to be clickable */
body.modal-open > div:nth-child(1) iframe {
  pointer-events: auto; }

input, textarea {
  -webkit-user-select: auto !important;
  -khtml-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  -o-user-select: auto !important;
  user-select: auto !important; }

.ajust-whitespace {
  height: auto !important; }