/* Utils
---------------------------------------- */
.u-red{
  color: red !important;
}


/* Fonts
---------------------------------------- */
.sk-circle {
  margin: 1em auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*
  _  __               _                ____                _   _
 | |/ /___   ___   __| | ___   ___    / ___|_ __ ___  __ _| |_(_)__   _____
 | ' // _ \ / _ \ / _` |/ _ \ / _ \  | |   | '__/ _ \/ _` | __| |\ \ / / _ \
 | . \ (_) | (_) | (_| | (_) | (_) | | |___| | |  __/ (_| | |_| | \ V /  __/
 |_|\_\___/ \___/ \__,_|\___/ \___/   \____|_|  \___|\__,_|\__|_|  \_/ \___|


 * @author		Stuart Blackett (stuart@koodoocreative.co.uk)
 * @copyright	Copyright (c) 2012 - Koodoo Creative Ltd.
 * @link			http://www.koodoocreative.co.uk
 * @created		11th April 2017
 * @version		Version 1.0

 -----------------------------------------------------------------------------
 Custom CSS file override for Twitter Bootstrap CSS framework
 -----------------------------------------------------------------------------

*/
/* Global
----------------------------------------------------------------------------- */
.u-hide {
  display: none;
}
.u-hidden {
  visibility: hidden;
}
.row.no-gutter {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutter > [class^="col-"],
.row.no-gutter > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}
.row.same-height {
  overflow: hidden;
}
.row.same-height > [class*="col-"] {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}
* {
  font-family: "proxima-nova";
  font-weight: 500;
}
body {
  background: #fff;
}
p {
  color: #374d73;
}
a:hover {
  text-decoration: none;
}
button {
  border: none;
}
section {
  padding-top: 2em;
  padding-bottom: 2em;
}
@media (max-width: 767px), (max-width: 991px), (max-width: 1199px) {
  .desktop {
    display: none !important;
  }
}
.mobile {
  display: none;
}
@media (max-width: 767px), (max-width: 991px), (max-width: 1199px) {
  .mobile {
    display: block;
  }
}
@media (max-width: 767px), (max-width: 991px) {
  .mobile-center {
    text-align: center;
  }
}
.button {
  padding: 1.3em 2.5em;
  text-align: center;
  transition: opacity 0.2s ease-in-out;
  line-height: normal;
  font-size: inherit;
  cursor: pointer;
}
.button.-brand {
  background: #20aab4;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}
.button.-brand:hover {
  color: #fff;
}
.button.-save {
  padding: 1.2em 2.5em;
  background: #20aab4;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}
.button.-save:hover {
  color: #fff;
}
.button.-close {
  padding: 1.2em 2.5em;
  background: #374d73;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}
.button.-close:hover {
  color: #fff;
}
.button.-darkblue {
  padding: 1.2em 2.5em;
  background: #374d73;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}
.button.-darkblue:hover {
  color: #fff;
}
.button.-send {
  padding: 1.3em 5em;
}
.button.-remove {
  background: #ed7273;
  color: #fff;
}
.button.-remove span {
  color: #fff;
}
.button.-remove:hover {
  color: #fff;
  text-decoration: none;
}
.button.-ok {
  background: #1faab4;
}
.button.-ok span {
  color: #fff;
}
.button.-training {
  background: #20aab4;
  border: 3px solid #20aab4;
  border-radius: 4px;
  padding: 0;
}
.button.-training span.icon {
  float: left;
  display: inline-block;
  padding: 1.8em;
  margin-bottom: 0;
  margin-left: 0;
  margin-top: 0;
  background: url(../../img/icons/icon-bulb.png) no-repeat center center #fff;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}
.button.-training span.text {
  padding-left: 80px;
  padding-top: 15px;
  text-align: left;
  display: block;
  font-weight: bold;
}
.button.-wide {
  width: 250px;
}
.button:hover {
  text-decoration: none;
  zoom: 1;
  filter: alpha(opacity=80);
  opacity: 0.8;
}
img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.rocket-brand {
  display: block;
  background: url(../../img/icons/icon-rocket.png) no-repeat;
  width: 134px;
  height: 57px;
  margin: 0 auto 2em;
}
.crunch-form {
  padding-left: 20em;
  padding-right: 20em;
}
@media (max-width: 767px), (max-width: 991px) {
  .crunch-form {
    padding-left: 0;
    padding-right: 0;
  }
}
/* Font(s)
----------------------------------------------------------------------------- */
.wf-loading {
  visibility: hidden;
}
.wf-active {
  visibility: visible;
}
/* Header
----------------------------------------------------------------------------- */
header {
  line-height: inherit;
}
@media (max-width: 767px) {
  .header-buttons {
    display: none;
  }
}
.header-button {
  display: block;
  padding-bottom: 2em;
  padding-top: 2em;
  text-align: center;
  background: #fff;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -ms-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
.header-button.-active {
  background: #f0f4fa;
}
.header-button.-content span {
  background: url(../../img/icons/icon-content.png) no-repeat left top;
}
.header-button.-contact span {
  background: url(../../img/icons/icon-contact.png) no-repeat left top;
}
.header-button.-theme span {
  background: url(../../img/icons/icon-theme.png) no-repeat left top;
}
.header-button.-push span {
  background: url(../../img/icons/icon-push.png) no-repeat left top;
}
.header-button.-sms span {
  background: url(../../img/icons/icon-sms.png) no-repeat left top;
}
.header-button.-status {
  background: #20aab4;
}
.header-button.-status span {
  padding-left: 0;
  color: #fff;
}
.header-button.-status:hover {
  background: #374d73;
}
.header-button.-status:hover span {
  color: #fff;
}
.header-button.-pay {
  background: #20aab4;
  transition: background 200ms, opacity 200ms;
}
.header-button.-pay span {
  background: url(../../img/icons/icon-publish-header.png) no-repeat left top;
  background-size: contain;
  color: #fff;
}
.header-button.-pay:hover {
  background: #374d73;
}
.header-button.-pay:hover span {
  color: #fff;
}
.header-button.-dash {
  text-align: left;
  padding-left: 3em;
  padding-right: 3em;
  background: #20aab4;
}
.header-button.-dash span {
  background: url(../../img/icons/icon-back-dash.png) no-repeat left center;
  font-weight: 400;
  color: #fff;
}
.header-button.-dash:hover span {
  color: #fff;
}
.header-button span {
  font-weight: bold;
  color: #374d73;
  display: inline-block;
  min-height: 25px;
  padding-left: 40px;
}
@media (max-width: 767px) {
  .header-button span {
    font-size: 12px;
  }
}
.header-button:hover {
  zoom: 1;
  filter: alpha(opacity=80);
  opacity: 0.8;
}
.header-button:hover span {
  color: #374d73;
  text-decoration: none;
}
/* Preloader.
----------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: visibility 200ms, opacity 200ms;
}
.preloader .preloader__body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0em;
  border-radius: 4px;
  background: #fff;
  text-align: center;
  transition: padding 200ms;
}
.preloader--show {
  visibility: visible;
  opacity: 1;
}
.preloader--show .preloader__body {
  padding: 2em 4em;
}
/* Global Page Layouts
---------------------------------------------------------------------------- */
.blank-page-title {
  text-align: center;
  margin: 2em 0 3em 0;
  color: #374d73;
}
.blank-page-title .blank-page-title__header {
  font-weight: bold;
}
.blank-page-title .blank-page-title__sub {
  margin: 1em 0 0 0;
  padding: 0 25%;
  color: #374d73;
}
@media (max-width: 767px) {
  .blank-page-title .blank-page-title__sub {
    padding: 0;
  }
}
.blank-page-header {
  background: #fff;
  padding: 1em 0;
  position: relative;
  min-height: 53px;
  box-sizing: content-box;
}
.blank-page-header::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 100%;
  background: #20aab4;
  left: 0;
  top: 0;
}
/* Layouts.form */
.form-layout {
  margin-bottom: 2em;
}
.form-layout .form-layout__column {
  height: 100%;
}
.form-layout .form-layout__column--grey {
  background: #f8fafd;
}
.form-layout .form-layout__column--white {
  background: #fff;
}
.form-layout .form-layout__inner {
  padding: 3em;
}
.form-layout .form-layout__title {
  font-size: 18px;
  font-weight: bold;
  color: #374d73;
  margin: 0 0 1em 0;
}
.form-layout .form-layout__title--brand {
  color: #20aab4;
}
.form-layout .form-group {
  margin: 1em 0;
}
.form-layout .form-group .form-label {
  color: #374d73;
  margin-bottom: 10px;
}
.form-layout .form-group .form-control {
  border-radius: 0;
  border: 1px solid #374d73;
  padding: 20px;
  resize: vertical;
}
.form-layout .form-group.has-error .form-control {
  border-color: #ed7273;
}
.form-layout .form-group.has-error .form-label {
  color: #ed7273;
}
/* Override input submit styles */
.button-submit {
  font-size: inherit !important;
  display: block !important;
  background: #20aab4 !important;
  color: #fff !important;
  cursor: pointer !important;
  width: 100% !important;
  font-family: inherit !important;
}
.button-submit--darkblue {
  background: #374d73 !important;
  font-size: 14px !important;
  padding: 0 !important;
}
.button-submit:hover {
  background: #20aab4 !important;
}
.youtube-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  visibility: hidden;
  opacity: 0;
  z-index: 10000;
  transition: opacity 200ms, visibility 200ms;
}
.youtube-modal--show {
  visibility: visible;
  opacity: 1;
}
.youtube-modal .youtube-modal__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.youtube-modal .youtube-modal__inner .youtube-modal__title {
  color: #fff;
  padding: 1em 0;
  margin: 0;
}
/* Build Your Own.
----------------------------------------------------------------------------- */
.theme-selection {
  margin: 3em 0;
}
.theme-selection .theme-selection__phone {
  position: relative;
  background: url(../../img/previews/preview-iphone.png) no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 auto 3em auto;
  width: 200px;
  height: 412px;
}
@media (max-width: 767px) {
  .theme-selection .theme-selection__phone {
    margin: 0 auto 1em auto;
  }
}
.theme-selection .theme-selection__phone .theme-selection__template {
  position: absolute;
  width: 172px;
  height: 304px;
  top: 47px;
  left: 14px;
}
.build-own-tutorial-video {
  margin: 0 auto;
  display: block;
}
.expired-block {
  text-align: center;
}
.expired-block .expired-block__icon {
  display: block;
  height: auto;
  margin: 4em auto;
}
.expired-block .expired-block__icon--publish {
  width: 80px;
}
.expired-block .expired-block__icon--help {
  width: auto;
  height: 118px;
}
.publish-checkmark {
  padding: 12px 0 12px 40px;
  color: #374d73;
}
.publish-checkmark--complete {
  background: url(../../img/icons/icon-tick-complete.png) no-repeat left center;
  background-size: 28px 28px;
}
.publish-checkmark--incomplete {
  background: url(../../img/icons/icon-tick-incomplete.png) no-repeat left center;
  color: #e1e4ea;
  background-size: 28px 28px;
}
.publish-discount {
  padding: 1em;
  border-radius: 5px;
  background: #f8fafd;
}
.publish-discount__image {
  float: left;
  margin-right: 1em;
}
.publish-discount__text {
  margin-top: 0.6em;
  color: #374d73;
  padding-right: 1em;
}
.summary-item {
  position: relative;
  padding: 2px 0 2px 80px;
  color: #374d73;
}
.summary-item--total {
  font-size: 1.4em;
  font-weight: bold;
  margin-top: 1em;
}
.summary-item .summary-item__price {
  position: absolute;
  top: 2px;
  left: 0;
  color: #20aab4;
  font-weight: bold;
}
.summary-item .summary-item__price::before {
  content: "£";
}
.publish-addon-button {
  padding: 1.2em 2.5em 1.2em 60px;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
  background: url(../../img/icons/icon-plus-white.png) #20aab4 no-repeat;
  background-size: 14px 14px;
  background-position: 24px 50%;
  text-align: left;
  transition: background 200ms, opacity 200ms;
  cursor: pointer;
}
.publish-addon-button:hover {
  color: #fff;
  opacity: 0.8;
}
.publish-addon-button.-active {
  background-image: url(../../img/icons/icon-cross-white.png);
  background-color: #374d73;
  background-size: auto;
  color: #fff;
}
.status-header .status-header__stage {
  color: #20aab4;
  font-size: 1.4em;
  font-weight: bold;
}
/* Support Page.
----------------------------------------------------------------------------- */
.support-video {
  padding: 1em;
  background: #fff;
  display: block;
  border-radius: 5px;
  cursor: pointer;
}
.support-video--gray {
  background: #eeeeee;
}
.support-video__title {
  font-weight: bold;
}
.support-video__icon {
  display: block;
  width: 17px;
  height: 17px;
  float: right;
  background: url(../../img/icons/icon-camera.png) no-repeat;
  margin-top: 10px;
}
/* System Start Blocks.
----------------------------------------------------------------------------- */
.start-block {
  margin: 10px 0;
  padding: 2em;
  background: #fff;
}
.start-block .start-block__title {
  font-weight: bold;
  color: #374d73;
  font-size: 20px;
}
.start-block .start-block__title .start-block__number {
  font-weight: inherit;
  color: #20aab4;
}
.start-block .start-block__sub {
  margin: 10px 0 0 0;
}
.start-block .start-block__link {
  color: #20aab4;
  border-bottom: 1px solid #fff;
  text-decoration: none !important;
  transition: color 200ms, border-color 200ms;
}
.start-block .start-block__link:hover {
  color: #374d73;
  border-color: #374d73;
}
/* Dashboard Load App Block.
----------------------------------------------------------------------------- */
.dashboard-search-clear {
  color: #d9534f;
  font-size: 22px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}
.dashboard-app {
  padding: 1em;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-radius: 5px;
  background: #fff;
  text-align: center;
  height: 260px;
  margin: 1em 0;
  transition: transform 200ms, box-shadow 200ms;
}
.dashboard-app.-hide {
  display: none;
}
.dashboard-app:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 10px 5px #eeeeee;
}
.dashboard-app .dashboard-app__name {
  font-weight: 700;
  color: #374d73;
  margin: 1em 0;
}
.dashboard-app .dashboard-app__image {
  width: 100%;
  padding-top: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.dashboard-app .dashboard-app__image.-rocket {
  background-size: auto;
}
/* Buy Rocket Pro Modal.
----------------------------------------------------------------------------- */
.package-upgrade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100000;
}
.package-upgrade__close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  color: #ddd;
  transition: color 100ms;
}
.package-upgrade__close:hover {
  color: #20aab4;
}
.package-upgrade__brand {
  display: block;
  margin: 0px auto 20px auto;
}
.package-upgrade__title {
  font-weight: 700;
  font-size: 26px;
  color: #374d73;
  line-height: 1.41;
  text-align: center;
}
.package-upgrade__text {
  font-weight: 400;
  text-align: center;
  color: #374d73;
  font-size: 14px;
  line-height: 20px;
}
.package-upgrade__text a {
  color: #20aab4 !important;
  text-decoration: none !important;
  font-weight: 700;
}
.package-upgrade__content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0px auto;
  transform: translate(0, -50%);
  width: 40%;
  height: auto;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
}
@media (max-width: 1200px) {
  .package-upgrade__content {
    width: 80%;
  }
}
.upgrade-blur {
  filter: blur(3px);
}
/* Buy Rocket Pro Stats Page.
----------------------------------------------------------------------------- */
.upgrade-stats {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  margin: 0px auto;
  max-width: 600px;
  z-index: 100000;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
/* Sidebar
----------------------------------------------------------------------------- */
.sidebar {
  background: #fff;
  left: 0;
  overflow: scroll;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
  border-right: 1px solid #e1e1e1;
}
.sidebar.-training {
  background: #20aab4;
}
@media (max-width: 767px) {
  .sidebar {
    display: none;
  }
}
.sidebar .sidebar-inner {
  padding-left: 3em;
  padding-right: 3em;
}
.sidebar .sidebar-inner h4 {
  text-transform: none;
  font-size: 26px;
}
.sidebar .sidebar-inner .resource__link {
  background: url(../../img/icons/icon-resource.png) no-repeat top left;
  padding-left: 2em;
}
.sidebar .sidebar-inner .resource__link .resource__title {
  color: #374d73;
}
.sidebar .sidebar-inner .resource__link .resource__sub {
  color: #8a93a0;
}
.sidebar .sidebar-inner .sidebar__title {
  font-size: 16px;
}
.sidebar .sidebar-inner .sidebar-nav {
  padding: 0;
}
.sidebar-item {
  display: block;
  margin-bottom: 0.5em;
}
.sidebar-item .sidebar-item__text {
  color: #8a93a0;
}
.sidebar-item.-social {
  padding-left: 2em;
}
.sidebar-item.-social.-twitter {
  background: url(../../img/icons/icon-twitter.png) no-repeat;
}
.sidebar-item.-social.-facebook {
  background: url(../../img/icons/icon-facebook.png) no-repeat;
}
.sidebar-item.-social.-instagram {
  background: url(../../img/icons/icon-instagram.png) no-repeat;
}
.sidebar-item.-social.-linkedin {
  background: url(../../img/icons/icon-linkedin.png) no-repeat;
}
.sidebar-item .sidebar-item__link {
  color: #8a93a0;
  font-family: "proxima-nova";
  font-weight: bold;
}
.sidebar-item .sidebar-item__link:hover,
.sidebar-item .sidebar-item__link:active,
.sidebar-item .sidebar-item__link:focus {
  text-decoration: none;
  color: #20aab4;
}
.sidebar-item .sidebar-item__help {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  float: right;
  margin: 0 5px;
  cursor: pointer;
}
.sidebar-item .sidebar-item__help.-info {
  background: url(../../img/icons/icon-help.png) no-repeat;
  margin-top: 2px;
}
.sidebar-item .sidebar-item__help.-video {
  background: url(../../img/icons/icon-camera.png) no-repeat;
  margin-top: 5px;
}
.sidebar-item .sidebar-item__help.-external {
  background: url(../../img/icons/icon-external.png) no-repeat;
  margin-top: 2px;
}
.sidebar-item--resource {
  background: url(../../img/icons/icon-resource.png) no-repeat top left;
  padding-left: 2em;
}
.sidebar-item--resource .sidebar-item__link {
  color: #374d73;
}
/* Free App Timer
---------------------------------------------------------------------------- */
.free-timer {
  background: #20aab4;
  padding: 10px 2em 0 2em;
  margin-top: -14px;
  /* Fix the gap */
}
.free-timer .free-timer__title {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin: 1em 0;
}
.free-timer .free-timer-clock {
  background: #1897a0;
  padding: 0 1em 0 1em;
}
.free-timer .free-timer-clock .free-timer__number {
  font-size: 2em;
  color: #fff;
  text-align: center;
  font-weight: bold;
}
.free-timer .free-timer-clock .free-timer__label {
  text-transform: uppercase;
  text-align: center;
  display: block;
  font-weight: normal;
  color: #fff;
}
/* Jobs Tab
---------------------------------------------------------------------------- */
.hourly-salary .input-group-addon {
  border-right: 1px solid #ccc;
}
/* Rewards Tab
---------------------------------------------------------------------------- */
.reward-star {
  float: left;
}
.reward-step-pass {
  float: right;
  width: initial !important;
}
.reward-button {
  border-radius: 4px;
  display: inline-block;
  padding: 1em 1.2em;
  margin-right: 0.5em;
}
.reward-button.-add {
  background: #20aab4;
}
.reward-button.-remove {
  background: #374d73;
}
.reward-button span {
  color: #fff;
  font-size: 16px;
}
/* Customer Data Page
----------------------------------------------------------------------------- */
.customer-modal {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
}
.customer-modal .customer-modal__inner {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 2em;
  border-radius: 3px;
  width: 70%;
  min-width: 480px;
}
.customer-modal .customer-modal__title {
  margin-bottom: 1em;
}
.customer-modal .customer-modal__message {
  display: block;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 3px;
  outline: none;
  resize: vertical;
  min-height: 280px;
}
.customer-modal .customer-modal__buttons {
  display: block;
  width: 100%;
  border-radius: 3px;
  outline: none;
  resize: vertical;
  height: 40px;
}
.customer-push-modal {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
}
.customer-push-modal .customer-push-modal__inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 2em;
  border-radius: 3px;
}
.customer-push-modal .customer-push-modal__title {
  margin-bottom: 1em;
}
.customer-push-modal .customer-push-modal__message {
  display: block;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 3px;
  outline: none;
  resize: vertical;
  height: 100px;
}
.customer-push-modal .customer-push-modal__submit {
  cursor: pointer;
}
.customer-push-modal .customer-push-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
  color: #ccc;
  font-size: 2rem;
  cursor: pointer;
}
.customer-push-modal .customer-push-modal__spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  z-index: 2001;
  transition: opacity 200ms, visibility 200ms;
}
.customer-push-modal .customer-push-modal__spinner .sk-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.customer-push-modal.-active .customer-push-modal__spinner {
  opacity: 1;
  visibility: visible;
}
.customer-push-modal.-active .customer-push-modal__close {
  display: none;
}
.customer-resource-modal {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
}
.customer-resource-modal .customer-resource-modal__inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 2em;
  border-radius: 3px;
}
.customer-resource-modal .customer-resource-modal__title {
  margin-bottom: 1em;
}
.customer-resource-modal .customer-resource-modal__message {
  display: block;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 3px;
  outline: none;
  resize: vertical;
  height: 100px;
}
.customer-resource-modal .customer-resource-modal__submit {
  cursor: pointer;
}
.customer-resource-modal .customer-resource-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
  color: #ccc;
  font-size: 2rem;
  cursor: pointer;
}
.customer-resource-modal .customer-resource-modal__spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  z-index: 2001;
  transition: opacity 200ms, visibility 200ms;
}
.customer-resource-modal .customer-resource-modal__spinner .sk-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.customer-resource-modal.-active .customer-resource-modal__spinner {
  opacity: 1;
  visibility: visible;
}
.customer-resource-modal.-active .customer-resource-modal__close {
  display: none;
}

/* Chat containers */
.chat-container {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  width:600px;
}

/* Darker chat container */
.darker {
  border-color: #ccc;
  background-color: #ddd;
  text-align: right;
}

/* Clear floats */
.chat-container::after {
  content: "";
  clear: both;
  display: table;
}

/* Style images */
.chat-container img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

/* Style the right image */
.chat-container img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

/* Style time text */
.time-right {
  float: right;
  color: #aaa;
}

/* Style time text */
.time-left {
  float: left;
  color: #999;
}

.customer-chat-modal {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
}
.customer-chat-modal .customer-chat-modal__inner {
  position: absolute;
  left: 10%;
  top: 10px;
  width: 80%;
  background: #fff;
  padding: 2em;
  border-radius: 3px;
}
@media only screen and (min-width: 600px) {
  .customer-chat-modal .customer-chat-modal__inner {
    left: 20%;
    width: 60%;
  }
}
.customer-chat-modal .customer-chat-modal__title {
  margin-bottom: 1em;
}
.customer-chat-modal .customer-chat-modal__message {
  display: block;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 3px;
  outline: none;
  resize: vertical;
  height: 100px;
}
.customer-chat-modal .customer-chat-modal__submit {
  cursor: pointer;
}
.customer-chat-modal .customer-chat-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
  color: #ccc;
  font-size: 2rem;
  cursor: pointer;
}
.customer-chat-modal .customer-chat-modal__spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  z-index: 2001;
  transition: opacity 200ms, visibility 200ms;
}
.customer-chat-modal .customer-chat-modal__content {
  max-height: calc(100vh - 460px);
  overflow: auto;
  min-height: 80px;
}
.customer-chat-modal .customer-chat-modal__spinner .sk-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.customer-chat-modal.-active .customer-chat-modal__spinner {
  opacity: 1;
  visibility: visible;
}
.customer-chat-modal.-active .customer-chat-modal__close {
  display: none;
}



.customer-edit-modal {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
}
.customer-edit-modal .customer-edit-modal__inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 2em;
  border-radius: 3px;
}
.customer-edit-modal .customer-edit-modal__title {
  margin-bottom: 1em;
}
.customer-edit-modal .customer-edit-modal__message {
  display: block;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 3px;
  outline: none;
  resize: vertical;
  height: 100px;
}
.customer-edit-modal .customer-edit-modal__submit {
  cursor: pointer;
}
.customer-edit-modal .customer-edit-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
  color: #ccc;
  font-size: 2rem;
  cursor: pointer;
}
.customer-edit-modal .customer-edit-modal__spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  z-index: 2001;
  transition: opacity 200ms, visibility 200ms;
}
.customer-edit-modal .customer-edit-modal__spinner .sk-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.customer-edit-modal.-active .customer-edit-modal__spinner {
  opacity: 1;
  visibility: visible;
}
.customer-edit-modal.-active .customer-edit-modal__close {
  display: none;
}



.customer-page .pagination li a {
  color: #20aab4;
}
.customer-page .pagination li.active a {
  background: #20aab4;
  border-color: #20aab4;
  color: #fff;
}
.customer-table th {
  font-weight: 700;
  color: #374d73;
  border: none;
}
.customer-table th,
.customer-table td {
  padding: 10px 0px !important;
}
.customer-table .customer-table__device {
  width: 16px;
  height: 20px;
  display: block;
  margin: auto;
}
.customer-table .customer-table__device--ios {
  background: url(../../img/icons/icon-apple.png) no-repeat 0 0;
}
.customer-table .customer-table__device--android {
  background: url(../../img/icons/icon-android.png) no-repeat 0 0;
}
.customer-table .customer-table__gender {
  font-size: 22px;
  text-align: center;
  color: #424A56;
}
.customer-table .customer-table__location {
  font-size: 22px;
  text-align: center;
  color: #20aab4;
}
.customer-table .customer-table__switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}
.customer-table .customer-table__switch input {
  display: none;
}
.customer-table .customer-table__switch input:checked + span,
.customer-table .customer-table__switch input:focus + span {
  background-color: #20aab4;
}
.customer-table .customer-table__switch input:checked + span::before,
.customer-table .customer-table__switch input:focus + span::before {
  transform: translateX(18px);
}
.customer-table .customer-table__switch span {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}
.customer-table .customer-table__switch span::before {
  position: absolute;
  content: "";
  border-radius: 50%;
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.customer-resource-holder{
  width: 100%;
  height: 200px;
  background: #efefef;
  border: 1px dashed;
  text-align: center;
  padding: 5px;
}
/* Login / Forgotten Password / Register
----------------------------------------------------------------------------- */
.form {
  padding: 2em;
}
@media (max-width: 767px) {
  .form {
    padding: 0;
  }
}
.form__area {
  padding-left: 8em;
  padding-right: 8em;
}
@media (max-width: 767px) {
  .form__area {
    padding-left: 0;
    padding-right: 0;
  }
}
/* Glyphicons (CDN)
----------------------------------------------------------------------------- */
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('//netdna.bootstrapcdn.com/bootstrap/3.0.3/fonts/glyphicons-halflings-regular.eot');
  src: url('//netdna.bootstrapcdn.com/bootstrap/3.0.3/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.3/fonts/glyphicons-halflings-regular.woff') format('woff'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.3/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.3/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
.glyphicon-ok:before {
  content: "\e013";
}
.glyphicon-remove:before {
  content: "\e014";
}
.glyphicon-menu-hamburger:before {
  content: "\e236";
}
/* Bootstrap Overrides
----------------------------------------------------------------------------- */
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-5ths.small-gap,
.col-sm-5ths.small-gap,
.col-md-5ths.small-gap,
.col-lg-5ths.small-gap {
  padding-right: 1px;
  padding-left: 1px;
}
.col-xs-5ths {
  width: 20%;
  float: left;
}
@media (min-width: 768px) {
  .col-sm-5ths {
    width: 20%;
    float: left;
  }
}
@media (min-width: 992px) {
  .col-md-5ths {
    width: 20%;
    float: left;
  }
}
@media (min-width: 1200px) {
  .col-lg-5ths {
    width: 20%;
    float: left;
  }
}
/* Font Based Icons (Name Space mr-)
----------------------------------------------------------------------------- */
@font-face {
  font-family: 'mobilerocket';
  src: url('../fonts/mobilerocket.eot?rock2017');
  src: url('../fonts/mobilerocket.eot?rock2017#iefix') format('embedded-opentype'), url('../fonts/mobilerocket.ttf?rock2017') format('truetype'), url('../fonts/mobilerocket.woff?rock2017') format('woff'), url('../fonts/mobilerocket.svg?rock2017#mobilerocket') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="mr-"],
[class*=" mr-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'mobilerocket' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mr-account-group-1:before {
  content: "\e900";
}
.mr-alarm-clock:before {
  content: "\e901";
}
.mr-back-pack:before {
  content: "\e902";
}
.mr-bed:before {
  content: "\e903";
}
.mr-beer-glass:before {
  content: "\e904";
}
.mr-bicycle-cruiser:before {
  content: "\e905";
}
.mr-binoculars:before {
  content: "\e906";
}
.mr-birthday-cake:before {
  content: "\e907";
}
.mr-bubble-chat-smiley-2:before {
  content: "\e908";
}
.mr-bubble-chat-typing-3:before {
  content: "\e909";
}
.mr-bus-1:before {
  content: "\e90a";
}
.mr-calendar-1:before {
  content: "\e90b";
}
.mr-calendar-2:before {
  content: "\e90c";
}
.mr-cap-academic:before {
  content: "\e90d";
}
.mr-car-1:before {
  content: "\e90e";
}
.mr-check-badge:before {
  content: "\e90f";
}
.mr-check-shield:before {
  content: "\e910";
}
.mr-cheeseburger:before {
  content: "\e911";
}
.mr-clock-1:before {
  content: "\e912";
}
.mr-close-badge:before {
  content: "\e913";
}
.mr-close-shield:before {
  content: "\e914";
}
.mr-cocktail-2:before {
  content: "\e915";
}
.mr-color-bucket:before {
  content: "\e916";
}
.mr-credit-card-hand:before {
  content: "\e917";
}
.mr-design-mug:before {
  content: "\e918";
}
.mr-dice-1:before {
  content: "\e919";
}
.mr-doctor-2:before {
  content: "\e91a";
}
.mr-eco-nature:before {
  content: "\e91b";
}
.mr-fork-knife:before {
  content: "\e91c";
}
.mr-fork-spoon:before {
  content: "\e91d";
}
.mr-glass-soda:before {
  content: "\e91e";
}
.mr-heart:before {
  content: "\e91f";
}
.mr-heart-beat:before {
  content: "\e920";
}
.mr-hotdog:before {
  content: "\e921";
}
.mr-lady-2:before {
  content: "\e922";
}
.mr-leaf:before {
  content: "\e923";
}
.mr-lock-close-2:before {
  content: "\e924";
}
.mr-mask-double:before {
  content: "\e925";
}
.mr-mobile-phone-3:before {
  content: "\e926";
}
.mr-music-note-1:before {
  content: "\e927";
}
.mr-nurse:before {
  content: "\e928";
}
.mr-paint-palette:before {
  content: "\e929";
}
.mr-pencil-3:before {
  content: "\e92a";
}
.mr-phone-3:before {
  content: "\e92b";
}
.mr-pizza:before {
  content: "\e92c";
}
.mr-police-officer:before {
  content: "\e92d";
}
.mr-pound-sign-circle:before {
  content: "\e92e";
}
.mr-recycle:before {
  content: "\e92f";
}
.mr-satellite-dish:before {
  content: "\e930";
}
.mr-search:before {
  content: "\e931";
}
.mr-skull-2:before {
  content: "\e932";
}
.mr-sneakers:before {
  content: "\e933";
}
.mr-sport-player:before {
  content: "\e934";
}
.mr-spy:before {
  content: "\e935";
}
.mr-store:before {
  content: "\e936";
}
.mr-surgeon:before {
  content: "\e937";
}
.mr-telemarketer:before {
  content: "\e93b";
}
.mr-travel-bag-1:before {
  content: "\e93c";
}
.mr-tree-small-1:before {
  content: "\e941";
}
.mr-video-camera:before {
  content: "\e944";
}
.mr-video-clip-2:before {
  content: "\e950";
}
.mr-wallet-2:before {
  content: "\e95e";
}
.mr-weight:before {
  content: "\e96d";
}
.mr-yin-yang:before {
  content: "\e977";
}
.mr-badge-1:before {
  content: "\e938";
}
.mr-bank-2:before {
  content: "\e939";
}
.mr-basket-2:before {
  content: "\e93a";
}
.mr-bookmark-all-1:before {
  content: "\e93d";
}
.mr-bookmark-article:before {
  content: "\e93e";
}
.mr-camera-2:before {
  content: "\e93f";
}
.mr-check-list:before {
  content: "\e940";
}
.mr-chef:before {
  content: "\e942";
}
.mr-coffee-mug-1:before {
  content: "\e943";
}
.mr-crown-1:before {
  content: "\e945";
}
.mr-dumbell:before {
  content: "\e946";
}
.mr-email-1:before {
  content: "\e947";
}
.mr-email-send-2:before {
  content: "\e948";
}
.mr-eye-dropper-1:before {
  content: "\e949";
}
.mr-fax-machine:before {
  content: "\e94a";
}
.mr-flag-1:before {
  content: "\e94b";
}
.mr-flash-2:before {
  content: "\e94c";
}
.mr-gender-female:before {
  content: "\e94d";
}
.mr-gender-maile:before {
  content: "\e94e";
}
.mr-headphone-1:before {
  content: "\e94f";
}
.mr-id-card-double:before {
  content: "\e951";
}
.mr-infomation-circle:before {
  content: "\e952";
}
.mr-key-1:before {
  content: "\e953";
}
.mr-link-2:before {
  content: "\e954";
}
.mr-location-pin-3:before {
  content: "\e955";
}
.mr-logo-facebook:before {
  content: "\e956";
}
.mr-logo-twitter-bird:before {
  content: "\e957";
}
.mr-megaphone-1:before {
  content: "\e958";
}
.mr-microphone-2:before {
  content: "\e959";
}
.mr-mobile-phone-1:before {
  content: "\e95a";
}
.mr-new-sticker-circle:before {
  content: "\e95b";
}
.mr-painting-canvas:before {
  content: "\e95c";
}
.mr-pen-3:before {
  content: "\e95d";
}
.mr-pencil-ruler:before {
  content: "\e95f";
}
.mr-phone-book:before {
  content: "\e960";
}
.mr-phone-signal-full:before {
  content: "\e961";
}
.mr-picture-2:before {
  content: "\e962";
}
.mr-pin-1:before {
  content: "\e963";
}
.mr-present-box:before {
  content: "\e964";
}
.mr-profile-picture:before {
  content: "\e965";
}
.mr-qr-code:before {
  content: "\e966";
}
.mr-rank-army-3:before {
  content: "\e967";
}
.mr-rank-army-star-1:before {
  content: "\e968";
}
.mr-receipt-1:before {
  content: "\e969";
}
.mr-rss-feed:before {
  content: "\e96a";
}
.mr-ruler-1:before {
  content: "\e96b";
}
.mr-scissors-2:before {
  content: "\e96c";
}
.mr-share:before {
  content: "\e96e";
}
.mr-shopping-cart-1:before {
  content: "\e96f";
}
.mr-sign-handicap:before {
  content: "\e970";
}
.mr-target:before {
  content: "\e971";
}
.mr-television:before {
  content: "\e972";
}
.mr-thumbs-down-2:before {
  content: "\e973";
}
.mr-thumbs-up-2:before {
  content: "\e974";
}
.mr-trophy:before {
  content: "\e975";
}
.mr-video-camera-2:before {
  content: "\e976";
}
/* Bootstrap Overrides
----------------------------------------------------------------------------- */
.col-lg-3.small-gap,
.col-lg-4.small-gap {
  padding-right: 1px;
  padding-left: 1px;
}
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-15 {
  width: 20%;
  float: left;
}
@media (min-width: 768px) {
  .col-sm-15 {
    width: 20%;
    float: left;
  }
}
@media (min-width: 992px) {
  .col-md-15 {
    width: 20%;
    float: left;
  }
}
@media (min-width: 1200px) {
  .col-lg-15 {
    width: 20%;
    float: left;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
}
.checkbox-inline {
  color: #374d73;
  font-weight: bold;
}
.has-error .form-control {
  border: 1px solid #ed7273;
  box-shadow: 0;
}
.has-error .form-control-feedback {
  color: #ed7273;
}
.has-error .help-block {
  color: #ed7273;
}
.has-success .form-control-feedback {
  color: #1faab4;
}
.form-group {
  position: relative;
}
.text-area .form-control-feedback {
  top: 5px;
}
.form-control-feedback {
  top: 30px;
  right: 5px;
}
/* Toastr Alerts
---------------------------------------------------------------------------- */
#toast-container > div {
  opacity: 1;
}
#toast-container > .toast-error {
  background-color: #ed7273 !important;
}
#toast-container > .toast-success {
  background-color: #1faab4 !important;
}
#toast-container > .toast-warning {
  background-color: #ed7273 !important;
}
/* Sections
----------------------------------------------------------------------------- */
.section-title {
  font-size: 26px;
}
@media (max-width: 767px) {
  .system {
    padding-left: 0 !important;
  }
  .system .u-ml1 {
    margin-left: 0 !important;
  }
}
/* Device Preview(s)
----------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .preview {
    text-align: center;
  }
}
@media (max-width: 767px) {
  .preview {
    display: none;
  }
}
.previews {
  display: inline-block;
  margin: 0 0 0 2em;
  padding: 0;
  vertical-align: middle;
}
.preview__item {
  display: inline-block;
  margin-right: 1em;
}
.preview__item a {
  display: block;
  width: 22px;
  height: 22px;
}
.preview__item:last-child {
  margin-right: 0;
}
.preview__item.-apple a {
  background: url(../../img/icons/icon-apple.png) no-repeat;
}
.preview__item.-android a {
  background: url(../../img/icons/icon-android.png) no-repeat;
}
.preview__item.-windows a {
  background: url(../../img/icons/icon-windows.png) no-repeat;
}
.preview__item.-active a {
  background-position: 0 -40px;
}
.preview-frame {
  position: relative;
}
@media (max-width: 1199px) {
  .preview-frame {
    margin: 10px auto;
  }
}
.preview-frame.-apple {
  background: url(../../img/previews/preview-iphone.png) no-repeat;
  background-size: contain;
  width: 345px;
  height: 709px;
}
.preview-frame.-apple #app_frame {
  width: 300px;
  height: 545px;
  left: 23px;
  position: absolute;
  top: 78px;
}
.theme-style {
  width: 345px;
  margin: 1em 0 0 0;
  padding: 10px 20px;
  appearance: none;
  background: url("../../img/icons/icon-down-arrow.png") no-repeat #fff !important;
  background-size: 10px 7px !important;
  background-position: 95% center !important;
  outline: none;
}
/* Modifyable Content
---------------------------------------------------------------------------- */
.ui-sortable-disabled .app-block:hover {
  cursor: initial;
}
.app-block {
  padding: 2em 3em;
  background: #fff;
  border: 2px dashed #e1e1e1;
  margin-bottom: 1em;
}
.app-block .tile-title-area:not(.-no-handle) {
  cursor: move;
}
.app-block.-hidden {
  background: #f0f4fa;
}
.delete-area,
.edit-area,
.password-area {
  display: none;
}
.tile-title-area {
  background: url(../../img/icons/icon-drag.png) no-repeat left 25px;
  padding-left: 65px;
  padding-top: 10px;
}
.tile-title-area.-dark {
  background: url(../../img/icons/icon-drag-dark.png) no-repeat left center;
}
.tile-title-area.-no-handle {
  background: none;
}
.tile-title {
  font-size: 18px;
}
/* Resource Centre
---------------------------------------------------------------------------- */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: #374d73;
}
.upload-tabs {
  padding: 0.5em;
}
.upload-tabs .nav-tabs {
  border: none;
}
.upload-tabs .nav-tabs li {
  padding: 2em 1em;
  text-align: center;
  background: #f6f8fc;
}
.upload-tabs .nav-tabs li.active {
  background: #f0f4fa;
  border-right: 2px dashed #e1e1e1;
  border-left: 2px dashed #e1e1e1;
  border-top: 2px dashed #e1e1e1;
  color: #374d73;
}
.upload-tabs .nav-tabs li.active a {
  background: none;
  border: none;
}
.upload-tabs .nav-tabs li a {
  font-size: 17px;
  font-weight: bold;
  color: #374d73;
}
.upload-tabs .nav-tabs li a:hover {
  background: none;
  border: none;
}
.upload-tabs .nav-tabs li:last-child {
  margin-right: 0;
}
.upload-tabs .tab-content {
  background: #f0f4fa;
  border: 2px dashed #e1e1e1;
}
.upload-tabs .tab-pane {
  min-height: 205px;
  padding-bottom: 3em;
  padding-top: 3em;
}
.resource-item {
  margin-bottom: 1em;
  height: 165px;
  color: #fff;
  text-align: center;
  padding-bottom: 2em;
  padding-top: 2em;
  display: block;
  position: relative;
}
.resource-item.-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.resource-item.-image.selected:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../../img/icons/icon-image-selected.png) no-repeat center center;
}
.resource-item.-doc {
  background: #20aab4;
}
.resource-item.-pdf {
  background: #ed7273;
}
.resource-item.-media {
  background: #20aab4;
}
.resource-item span.resource-item__icon {
  display: block;
  width: 100%;
  height: 61px;
  margin-bottom: 1em;
}
.resource-item span.resource-item__icon.-pdf {
  background: url(../../img/icons/icon-pdf.png) no-repeat center center;
}
.resource-item span.resource-item__icon.-doc {
  background: url(../../img/icons/icon-doc.png) no-repeat center center;
}
.resource-item span.resource-item__icon.-media {
  background: url(../../img/icons/icon-media.png) no-repeat center center;
}
.resource-item span.resource-item__file {
  display: block;
}
.resource-item.selected span.resource-item__icon {
  background: url(../../img/icons/icon-image-selected.png) no-repeat center center;
}
.resource-item:hover,
.resource-item:active {
  color: #fff;
  text-decoration: none;
}
.upload-progress {
  display: none;
}
.upload-progress .progress {
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  background: none;
}
.upload-progress .progress-bar {
  background: #20aab4;
}
.delete-block {
  display: none;
}
/* Dropzone Specific
----------------------------------------------------------------------------- */
.dz-message {
  text-align: center;
}
.dz-message span {
  color: #374d73;
}
.dz-message span.dropzone-title {
  font-size: 18px;
  font-weight: bold;
}
.dz-preview {
  display: none;
}
/* Button Block (Hide / Lock / Edit / Delete)
----------------------------------------------------------------------------- */
.button-block .divide-vertical {
  display: inline-block;
  width: 1px;
  height: 65px;
  border: 1px solid #f0f4fa;
  vertical-align: middle;
}
.button-block .button {
  border-radius: 4px;
  display: inline-block;
  padding: 1.5em;
  margin-right: 0.5em;
}
.button-block .button.yes-delete,
.button-block .button.no-delete {
  display: inline-block;
  height: 65px;
  width: 65px;
  font-size: 16px;
}
.button-block .button span.button-block__text {
  color: #fff;
  display: none;
  padding-right: 1em;
}
.button-block .button span.button-block__icon {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  height: 23px;
  width: 23px;
}
.button-block .button span.button-block__icon.-hide {
  background: url(../../img/icons/icon-hide-white.png) no-repeat center center;
}
.button-block .button span.button-block__icon.-lock {
  background: url(../../img/icons/icon-lock-white.png) no-repeat center center;
}
.button-block .button span.button-block__icon.-title {
  background: url(../../img/icons/icon-title-white.png) no-repeat center center;
}
.button-block .button span.button-block__icon.-edit {
  background: url(../../img/icons/icon-edit-white.png) no-repeat center center;
}
.button-block .button span.button-block__icon.-delete {
  background: url(../../img/icons/icon-bin.png) no-repeat center center;
  height: 26px;
  padding-bottom: 5px;
  width: 34px;
}
.button-block .button.-hide {
  background: #20aab4;
}
.button-block .button.-lock {
  background: #20a2ff;
}
.button-block .button.-title {
  background: #fb7428;
}
.button-block .button.-edit {
  background: #374d73;
}
.button-block .button.-delete {
  border-radius: 0;
  margin-right: 0;
  padding-bottom: 0;
  padding-top: 0;
  position: relative;
  top: 15px;
}
.button-block .button.-delete span.button-block__text {
  font-size: 10px;
  display: block;
  text-align: center;
  color: #ed7273;
  text-transform: uppercase;
  padding-right: 0;
}
.button-block .button.-delete span.button-block__icon {
  display: block;
}
/* Form Specific
----------------------------------------------------------------------------- */
.form__label {
  color: #374d73;
  font-weight: bold;
}
.form__input {
  border-radius: 4px;
  background: #f0f4fa;
  border: 1px solid #e7ebf4;
  color: #374d73;
  box-shadow: none;
  height: 50px;
}
.form__input.-light {
  background: #fff;
}
.form__input:focus {
  box-shadow: none;
}
.form__input.-datepick {
  background: url(../../img/icons/icon-calendar.png) no-repeat 95% #f0f4fa;
}
textarea.form__input,
.text-editor.form__input {
  resize: none;
  height: 250px;
}
.select2 {
  height: 50px;
}
.select2 .select2-selection {
  height: 50px;
  padding: 10px 0px;
  border: 1px solid #e7ebf4;
  outline: none;
}
.select2 .select2-selection .select2-selection__arrow {
  height: 50px;
}
.select2 .select2-selection .select2-selection__rendered {
  color: #374d73;
}
.select2 .select2-selection .select2-selection__arrow {
  color: #374d73;
}
/* Quill Editor CSS Overrides
--------------------------------------------------------------------------- */
.ql-toolbar.ql-snow {
  padding: 1em;
  border-radius: 4px;
  border: 1px solid #f0f4fa;
  color: #374d73;
}
.edit-form.-lighter .ql-toolbar.ql-snow {
  background: #fff;
}
.ql-container.ql-snow {
  border: none;
}
.ql-snow .ql-stroke {
  color: #20aab4;
}
.ql-showHtml::after {
  content: '[source]';
}
.text-editor-html-view {
  width: 100%;
  margin: 0px;
  background: #1d1d1d;
  box-sizing: border-box;
  color: #cccccc;
  font-size: 15px;
  outline: none;
  padding: 20px;
  line-height: 24px;
  font-family: Consolas, Menlo, Monaco;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: none;
  display: none;
  resize: none;
}
.u-danger {
  color: #d9534f;
}
/* Image Picker CSS
---------------------------------------------------------------------------- */
/* Image Picker CSS
---------------------------------------------------------------------------- */
ul.thumbnails.image_picker_selector {
  overflow: auto;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  background: #f0f4fa;
  border-radius: 2px;
  border: 1px solid #e7ebf4;
  padding: 0.5em;
  height: 200px;
  overflow-y: auto;
}
ul.thumbnails.image_picker_selector ul {
  overflow: auto;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
ul.thumbnails.image_picker_selector li.group {
  width: 100%;
}
ul.thumbnails.image_picker_selector li.group_title {
  float: none;
}
ul.thumbnails.image_picker_selector li {
  width: 33.33333333%;
  float: left;
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 0.2em;
}
ul.thumbnails.image_picker_selector li .thumbnail {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
ul.thumbnails.image_picker_selector li .thumbnail img {
  -webkit-user-drag: none;
}
div.resources-image {
  background: none;
  border: none;
  border-radius: 0;
  padding: 2px;
  position: relative;
}
div.resources-image.selected:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../../img/icons/icon-image-selected.png) no-repeat center center;
}
div.resources-item {
  background: #20aab4;
}
div.resources-item img {
  padding-top: 1em;
  padding-bottom: 1em;
}
div.resources-item.selected {
  background: #ed7273;
}
div.resources-item p {
  display: block;
  margin-top: 1em;
  color: #fff;
  text-align: center;
}
/* Icon Selection
---------------------------------------------------------------------------- */
.icon-selection {
  background: #f0f4fa;
  border-radius: 2px;
  border: 1px solid #e7ebf4;
  padding: 0.5em;
}
.icon-select {
  padding: 0.7em 0.5em;
  display: block;
  border: 1px solid #e7ebf4;
  background: #f0f4fa;
  height: 44px;
  margin-bottom: 0.8em;
  width: 100%;
}
.icon-select.-selected {
  background: #ed7273;
  text-decoration: none;
}
.icon-select.-selected span {
  color: #fff;
}
.icon-select span {
  display: block;
  font-size: 22px;
  text-align: center;
}
/* Update Panel(s) - Theme etc Change
---------------------------------------------------------------------------- */
.update-panel {
  padding: 0.5em 1em 1em;
  margin-bottom: 2em;
}
.update-panel.-choose {
  border: 2px dashed #e1e1e1;
  background: #f0f4fa;
  padding-top: 4em;
}
.update-panel.-image {
  background: #f0f4fa;
  padding-top: 4em;
  padding-bottom: 4em;
  min-height: 250px;
}
.update-panel.-chosen__colour {
  background: #f0f4fa;
  height: 292px;
  padding-top: 135px;
}
.update-panel.-chosen__image {
  height: 262px;
  background-repeat: no-repeat;
  background-position: center center;
}
.update-panel__header {
  margin-bottom: 2em;
}
.update-panel__heading {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  display: block;
  font-size: 26px;
  text-transform: none;
}
.update-panel__heading.-strikethrough {
  position: relative;
  z-index: 1;
}
.update-panel__heading.-strikethrough:before {
  border-top: 2px solid #e1e1e1;
  content: "";
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
}
.update-panel__heading.-strikethrough span {
  background: #fff;
  padding: 0 35px;
}
.update__panel__title {
  text-transform: none;
  color: #374d73;
  font-weight: normal;
  font-size: 18px;
}
.background-tabs {
  padding: 0.5em;
}
.background-tabs .nav-tabs {
  border: none;
}
.background-tabs .nav-tabs li {
  padding: 2em 1em;
  text-align: center;
  background: #f6f8fc;
}
.background-tabs .nav-tabs li.active {
  background: #f0f4fa;
  border-right: 2px dashed #e1e1e1;
  border-left: 2px dashed #e1e1e1;
  border-top: 2px dashed #e1e1e1;
}
.background-tabs .nav-tabs li.active a {
  background: none;
  border: none;
}
.background-tabs .nav-tabs li.active a:hover {
  color: #374d73;
}
.background-tabs .nav-tabs li a {
  font-size: 17px;
  font-weight: bold;
  color: #374d73;
}
.background-tabs .nav-tabs li a:hover {
  background: none;
  border: none;
  color: #374d73;
}
.background-tabs .nav-tabs li:last-child {
  margin-right: 0;
}
.background-tabs .tab-content {
  background: #f0f4fa;
  padding-left: 1em;
  padding-right: 1em;
}
.background-tabs .tab-content .active {
  margin-top: -1px;
}
.background-tabs .tab-pane {
  min-height: 205px;
  padding-bottom: 3em;
  padding-top: 3em;
}
.template-choice {
  margin-bottom: 1em;
  height: 165px;
  color: #fff;
  text-align: center;
  padding-bottom: 2em;
  padding-top: 2em;
  display: block;
  position: relative;
}
.template-choice.-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.template-choice.-image.-selected {
  border: 5px solid #20aab4;
}
/* Mini Colours CSS
--------------------------------------------------------------------------- */
.minicolors {
  position: relative;
}
.minicolors-sprite {
  background-image: url(../../img/jquery.minicolors.png);
}
.minicolors-swatch {
  position: absolute;
  vertical-align: middle;
  background-position: -80px 0;
  border: solid 1px #ccc;
  cursor: text;
  padding: 0;
  margin: 0;
  display: inline-block;
}
.minicolors-swatch-color {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.minicolors input[type=hidden] + .minicolors-swatch {
  width: 28px;
  position: static;
  cursor: pointer;
}
.minicolors input[type=hidden][disabled] + .minicolors-swatch {
  cursor: default;
}
/* Panel */
.minicolors-panel {
  position: absolute;
  width: 173px;
  background: white;
  border: solid 1px #CCC;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  box-sizing: content-box;
  display: none;
}
.minicolors-panel.minicolors-visible {
  display: block;
}
/* Panel positioning */
.minicolors-position-top .minicolors-panel {
  top: -154px;
}
.minicolors-position-right .minicolors-panel {
  right: 0;
}
.minicolors-position-bottom .minicolors-panel {
  top: auto;
}
.minicolors-position-left .minicolors-panel {
  left: 0;
}
.minicolors-with-opacity .minicolors-panel {
  width: 194px;
}
.minicolors .minicolors-grid {
  position: relative;
  top: 1px;
  left: 1px;
  width: 150px;
  height: 150px;
  background-position: -120px 0;
  cursor: crosshair;
}
.minicolors .minicolors-grid-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
}
.minicolors-slider-saturation .minicolors-grid {
  background-position: -420px 0;
}
.minicolors-slider-saturation .minicolors-grid-inner {
  background-position: -270px 0;
  background-image: inherit;
}
.minicolors-slider-brightness .minicolors-grid {
  background-position: -570px 0;
}
.minicolors-slider-brightness .minicolors-grid-inner {
  background-color: black;
}
.minicolors-slider-wheel .minicolors-grid {
  background-position: -720px 0;
}
.minicolors-slider,
.minicolors-opacity-slider {
  position: absolute;
  top: 1px;
  left: 152px;
  width: 20px;
  height: 150px;
  background-color: white;
  background-position: 0 0;
  cursor: row-resize;
}
.minicolors-slider-saturation .minicolors-slider {
  background-position: -60px 0;
}
.minicolors-slider-brightness .minicolors-slider {
  background-position: -20px 0;
}
.minicolors-slider-wheel .minicolors-slider {
  background-position: -20px 0;
}
.minicolors-opacity-slider {
  left: 173px;
  background-position: -40px 0;
  display: none;
}
.minicolors-with-opacity .minicolors-opacity-slider {
  display: block;
}
/* Pickers */
.minicolors-grid .minicolors-picker {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 12px;
  height: 12px;
  border: solid 1px black;
  border-radius: 10px;
  margin-top: -6px;
  margin-left: -6px;
  background: none;
}
.minicolors-grid .minicolors-picker > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  border: solid 2px white;
  box-sizing: content-box;
}
.minicolors-picker {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 2px;
  background: white;
  border: solid 1px black;
  margin-top: -2px;
  box-sizing: content-box;
}
/* Swatches */
.minicolors-swatches,
.minicolors-swatches li {
  margin: 5px 0 3px 5px;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.minicolors-swatches .minicolors-swatch {
  position: relative;
  float: left;
  cursor: pointer;
  margin: 0 4px 0 0;
}
.minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
  margin-right: 7px;
}
.minicolors-swatch.selected {
  border-color: #000;
}
/* Inline controls */
.minicolors-inline {
  display: inline-block;
}
.minicolors-inline .minicolors-input {
  display: none !important;
}
.minicolors-inline .minicolors-panel {
  position: relative;
  top: auto;
  left: auto;
  box-shadow: none;
  z-index: auto;
  display: inline-block;
}
/* Default theme */
.minicolors-theme-default .minicolors-swatch {
  height: 20px;
  left: 5px;
  top: 15px;
  width: 20px;
}
.minicolors-theme-default .minicolors-swatches .minicolors-swatch {
  margin-bottom: 2px;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
  left: auto;
  right: 5px;
}
.minicolors-theme-default .minicolors-input {
  padding-left: 2.5em;
}
.minicolors-theme-default.minicolors-position-right .minicolors-input {
  padding-right: 26px;
  padding-left: inherit;
}
/* Calendar Edit Area.
--------------------------------------------------------------------------- */
.calendar-event {
  padding: 10px;
  background: #20aab4;
  border-radius: 5px;
  margin-bottom: 1em;
}
.calendar-event__remove {
  float: right;
  color: red;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.calendar-event__title {
  color: #fff;
  font-size: 18px;
}
.calendar-event__title--date {
  font-weight: bold;
  margin-bottom: 10px;
}
/* View Change(s)
--------------------------------------------------------------------------- */
.page-content {
  margin-top: 2em;
  margin-bottom: 2em;
}
.list-items {
  margin-top: 2em;
  margin-bottom: 2em;
}
.list-item__element {
  background: #f0f4fa;
  list-style: none;
  padding: 2em;
  margin-bottom: 1em;
}
.gallery-images {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  background: #f0f4fa;
  border: 1px solid #e1e1e1;
  padding: 0.5em;
  border-radius: 4px;
}
/* Push Notifications Page
---------------------------------------------------------------------------- */
.push-group {
  padding: 2.5em;
  border: 1px solid #20aab4;
  border-radius: 2px;
  margin-bottom: 1em;
  position: relative;
}
.push-group .push-group__title {
  font-weight: 700;
  font-size: 2rem;
  color: #374d73;
}
@media (max-width: 1199px) {
  .push-group .push-group__title {
    text-align: center;
    margin: 10px 0px;
  }
}
.push-group .push-group__count {
  font-size: 16px;
  margin: 0px;
  color: #374d73;
}
@media (max-width: 1199px) {
  .push-group .push-group__count {
    text-align: center;
    margin: 10px 0px;
  }
}
.push-group .push-group__delete {
  text-align: right;
  padding-top: 2px;
}
.push-group .push-group__delete .glyphicon {
  color: #ed7273;
}
.push-group .push-group__checkbox {
  position: relative;
  padding-left: 35px;
  padding-top: 2px;
  margin: 0px;
  color: #374d73;
}
@media (max-width: 1199px) {
  .push-group .push-group__checkbox {
    margin: 10px 0px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
.push-group .push-group__checkbox input {
  display: none;
}
.push-group .push-group__checkbox input:checked ~ .push-group__checkbox__box::after {
  opacity: 1;
  width: 6px;
  height: 12px;
  border-width: 0px 3px 3px 0px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.push-group .push-group__checkbox input:disabled ~ .push-group__checkbox__box::after {
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: #8a93a0;
  width: 10px;
  height: 10px;
  opacity: 1;
}
.push-group .push-group__checkbox .push-group__checkbox__box {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #eff4fa;
  border-radius: 5px;
  border: 1px solid #c8d9ee;
  /* Checkmark */
}
.push-group .push-group__checkbox .push-group__checkbox__box::after {
  content: "";
  opacity: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 0px;
  height: 0px;
  border: solid #20aab4;
  border-width: 0px;
  transition: opacity 200ms, width 200ms, height 200ms, background 200ms, border-width 200ms, transform 400ms;
}
.push-groups-section {
  display: none;
}
.push-group-button {
  margin-right: 0px;
  margin-left: auto;
}
@media (max-width: 1199px) {
  .push-group-button {
    margin: 10px auto;
  }
}
.push-send-button {
  margin-right: auto;
  margin-left: 0px;
}
@media (max-width: 1199px) {
  .push-send-button {
    margin: 10px auto;
  }
}
.create-group-button {
  height: 50px;
  line-height: 3px;
  width: 100%;
  display: block;
}
.global-panel {
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  border-radius: 5px;
}
.push-characters {
  bottom: 10px;
  right: 20px;
}
.push-characters__num {
  color: #20aab4;
}
.push-messages {
  margin: 1em;
  padding: 1em;
  background: #f0f4fa;
}
.push-message {
  padding: 1em;
}
.push-message .push-message__date {
  border: 1px solid #e7ebf4;
  background: #fff;
  padding: 1em;
  display: inline-block;
  min-width: 170px;
  position: relative;
}
@media (max-width: 1199px) {
  .push-message .push-message__date {
    width: 100%;
  }
}
.push-message .push-message__date .push-message__delete {
  position: absolute;
  left: 5px;
  top: 5px;
  color: #ed7273;
}
.push-message .push-message_date__day {
  color: #374d73;
  font-size: 66px;
  font-weight: bold;
}
.push-message .push-message_date__month {
  color: #374d73;
  font-size: 22px;
  font-weight: normal;
}
.push-message .push-message__text {
  color: #374d73;
  padding-top: 2em;
  padding-bottom: 2em;
}
/* Stats Page
----------------------------------------------------------------------------- */
#appStats {
  display: block;
  margin: 1em auto 4em;
}
.stat-block.-horizontal [class*=col] {
  padding-left: 0;
  padding-right: 0;
}
.stat-block.-vertical .stat-block__number {
  font-size: 18px;
}
.stat-block.-vertical .stat-block__area {
  color: #374d73;
  text-align: center;
  font-size: 34px;
  font-weight: bold;
}
.button.-brand.-download {
  padding: 1.3em 4em;
}
.download-block {
  background: #f6f8fc;
  padding: 1em;
}
.stat-block__area {
  background: #f6f8fc;
  padding: 1em;
}
.stat-block__text,
.download-block__text {
  display: block;
  width: 100%;
  color: #374d73;
  font-size: 18px;
  margin-bottom: 0.5em;
}
.stat-block__icon,
.download-block__icon {
  display: block;
}
.stat-block__icon.-apple,
.download-block__icon.-apple {
  background: url(../../img/icons/icon-stat-apple.png) no-repeat;
  width: 22px;
  height: 27px;
  margin: 1em auto;
}
.stat-block__icon.-android,
.download-block__icon.-android {
  background: url(../../img/icons/icon-stat-android.png) no-repeat;
  margin: 1em auto;
  width: 23px;
  height: 27px;
}
.stat-block__icon.-notifications,
.download-block__icon.-notifications {
  background: url(../../img/icons/icon-notifications.png) no-repeat;
  margin: 1em auto;
  width: 32px;
  height: 27px;
}
.stat-block__icon.-csv,
.download-block__icon.-csv {
  background: url(../../img/icons/icon-csv.png) no-repeat;
  margin: 1.5em auto;
  width: 53px;
  height: 57px;
}
.stat-block__icon.-male,
.download-block__icon.-male {
  background: url(../../img/icons/icon-male.png) no-repeat;
  margin: 1.5em auto;
  width: 14px;
  height: 48px;
}
.stat-block__icon.-female,
.download-block__icon.-female {
  background: url(../../img/icons/icon-female.png) no-repeat;
  margin: 1.5em auto;
  width: 14px;
  height: 48px;
}
.stat-block__number {
  padding: 1em;
  background: #20aab4;
  color: #fff;
  font-weight: bold;
  font-size: 34px;
  text-align: center;
}
.tool-tip {
  position: relative;
}
.tool-tip__text {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 1em;
  margin-top: 10px;
  min-width: 140px;
  background: rgba(248, 251, 252, 0.9);
  color: #8a93a0;
  text-align: center;
  border: 1px solid #eeeeef;
  border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  cursor: default;
  transition: opacity 200ms, visibility 200ms;
  /* Arrow */
}
.tool-tip__text::before,
.tool-tip__text::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
}
.tool-tip__text::before {
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #eeeeef transparent;
  z-index: 1;
}
.tool-tip__text::after {
  margin-left: -9px;
  border-width: 9px;
  border-style: solid;
  border-color: transparent transparent rgba(248, 251, 252, 0.7) transparent;
  z-index: 2;
}
.tooltip__text--right {
  left: 100%;
  top: 50%;
  transform: translate(0, -50%);
  margin-top: 0px;
  margin-left: 10px;
}
.tooltip__text--right::before,
.tooltip__text--right::after {
  bottom: 50%;
  left: 0px;
  transform: translate(-100%, 50%);
  margin: 0;
}
.tooltip__text--right::before {
  border-color: transparent #eeeeef transparent transparent;
}
.tooltip__text--right::after {
  border-color: transparent rgba(248, 251, 252, 0.7) transparent transparent;
}
.tool-tip:hover .tool-tip__text {
  visibility: visible;
  opacity: 1;
}
/* Utilities
----------------------------------------------------------------------------- */
.u-mt1 {
  margin-top: 1em;
}
.u-mt2 {
  margin-top: 2em;
}
.u-mt3 {
  margin-top: 3em;
}
.u-mb0 {
  margin-bottom: 0;
}
.u-mb1 {
  margin-bottom: 1em;
}
.u-mb2 {
  margin-bottom: 2em;
}
.u-mb3 {
  margin-bottom: 3em;
}
.u-mr1 {
  margin-right: 1em;
}
.u-mr2 {
  margin-right: 2em;
}
.u-ml1 {
  margin-left: 1em;
}
.u-ml2 {
  margin-left: 2em;
}
.u-mauto {
  margin-right: auto;
  margin-left: auto;
}
.u-pt0 {
  padding-top: 0;
}
.u-p1 {
  padding: 1em;
}
.u-pt1 {
  padding-top: 1em;
}
.u-pt2 {
  padding-top: 2em;
}
.u-pt3 {
  padding-top: 3em;
}
.u-pb1 {
  padding-bottom: 1em;
}
.u-pb2 {
  padding-bottom: 2em;
}
.u-pr1 {
  padding-right: 1em;
}
.u-pr2 {
  padding-right: 2em;
}
.u-pr3 {
  padding-right: 3em;
}
.u-pl1 {
  padding-left: 1em;
}
.u-pl2 {
  padding-left: 2em;
}
.u-block {
  display: block;
}
.u-inline-block {
  display: inline-block;
}
.u-relative {
  position: relative;
}
.u-img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.u-absolute {
  position: absolute;
}
.u-fullwidth {
  width: 100%;
}
.u-dividing-line {
  height: 1px;
  width: 100%;
  display: block;
  background: #e1e1e1;
}
.u-dividing-line.-preview {
  width: 350px;
}
@media (max-width: 1199px) {
  .u-dividing-line.-preview {
    margin: 10px auto;
  }
}
/* Theme
----------------------------------------------------------------------------- */
.t-bg-white {
  background: #fff;
}
.t-black {
  color: #000;
}
.t-white {
  color: #fff;
}
.t-darkblue {
  color: #374d73;
}
.t-brand {
  color: #20aab4;
}
.t-blue {
  color: #20a2ff;
}
.t-bodycopy {
  color: #8a93a0;
}
.t-medium {
  font-weight: 500;
}
.t-bold {
  font-weight: 700;
}
/* Spinner
----------------------------------------------------------------------------- */
.sk-circle {
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #20aab4;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}