:root {
  --main-color: #333;
  --main-color-dark: #000;
  --main-color-light: #666;
  --ocean-blue: #b2f1ff;
  --ocean-blue-dark: #536a6f;
}

html, body {
  min-height: 100%;
    height: auto;
    scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

html {
    min-height: 100%;
}

* {
  font-display: swap;
}

.pretty-gradient {
  background: rgb(255,228,255);
  background: linear-gradient(45deg, rgba(255,228,255,1) 11%, rgba(209,244,255,1) 52%, rgba(213,255,218,1) 80%);
  border-radius: 10px;
  padding: 20px;
  margin: 14px 0 5px 0;
}

.pretty-gradient h2 {
  color: #86769b;
}

.pretty-gradient h2.count--h2,
.pretty-gradient span.type--span {
  color: #7da382;
}

.spinner-border {
  color: var(--main-color) !important;
}

[data-ad-id][style] {
  display: block !important;
}

body {
  padding: 0;
  /*font: 10px 'Avenir Next LT Pro';*/
  font-size: 10px;
  font-family: "Twemoji Country Flags", 'Poppins', sans-serif;
  font-display: swap;
  background: #fff;
  color: #333;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.btn-primary.btn {
    color: #fff !important;
    box-shadow: inset 0 1px var(--main-color-light);
    background-color: var(--main-color);
    border-color: var(--main-color-dark);
    border-width: 2px;
}

.btn-secondary.btn {
    color: #fff !important;
    box-shadow: inset 0 1px var(--main-color-light);
    background-color: var(--main-color);
    border-color: var(--main-color-dark);
    border-width: 2px;
}

.btn.btn-success,
.btn-primary.btn, .btn-secondary.btn {
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
}

.flush {
  width: 100%;
}

.pink-bg {
  background: #fe2c55;
}

.fullheight {
min-height: calc(100vh - 46px);
}

header {
  position: relative;
  padding: 10px 0;
}

.logged-in header {
  border-bottom: 1px solid #ddd;
}

.form-group {
  margin: 3rem 0;
}

.alert {
  border-width: 0 !important;
  padding: 1.5rem;
  border-left-width: 10px !important;
  border-radius: 0;
}

.alert p {
  font-size: 1.25rem;
}

header h1 {
  font-size: 1.5rem;
  margin-bottom: 0;
}

.start-helping-ctn h3, .start-helping-ctn h4 {
  color: #fff;
}

.container {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
  height: auto;
}

.modal-header {
  background: var(--main-color);
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}

.modal-header button {
  color: #fff !important;
  opacity: 1;
  text-shadow: none;
}

footer {
  color: #333 !important;
  padding-bottom: 2rem;
  font-size: 0.75rem;
}

footer a {
  color: var(--main-color) !important;
  text-decoration: underline;
}

.a--underline {
  text-decoration: underline;
}

.body {
  display: flex;
  flex: 1;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: auto;
  min-height: calc(100vh - 46px);
}

.bubble img, .bubble .img {
  height: 70px;
  border-radius: 35px;
}

.bubble .img,
.main-img.img {
  background-size: cover;
  background-position: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.main-img.img {
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

.img.small-img {
  height: 40px;
  width: 40px;
}

form.hot input[type='text'],
form.hot input[type='email'],
form.hot input[type='tel'],
form.hot input[type='password'] {
    border-color: #ccc;
    background: transparent !important;
    border-width: 2px;
    color: #333;
    height: auto;
}

form.hot label {
    opacity: 0.7;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.font--Avenir {
  font-family: "Twemoji Country Flags", 'Avenir Next LT Pro', sans-serif;
  font-display: swap;
}

.font--Overpass {
  font-family: 'Overpass Mono', sans-serif;
  font-display: swap;
}

.font--900 {
  font-weight: 900;
}

.login-or-signup form.hot {
    padding: 1rem;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,.35)
}

.bubble {
  background: #fff;
  color: #000;
  border-radius: 15px;
  padding: 10px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 2px solid #f3f3f3
}

.bubble > .row {
  display: flex;
  align-items: center;
}

.bubble .col {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}

body, html {
 font-size: 18px;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], .btn {
  font-size: 1.5rem;
  padding: 1rem;
  height: auto;
}

p {
    line-height: 150%;
}

.dim {
    opacity: 0.5;
}

#phone, input#name {
    background-color: transparent;
    color: #fff !important;
    border-width: 3px;
    border-color: #fff !important;
    font-size: 1.5rem;
    text-align: center;
}

#phone::placeholder, #name::placeholder {
  color: rgba(0,0,0,0.25) !important;
  text-align: center;
}



@media (max-width: 320px) {
  body,html {
    font-size: 10px;
  }
}

/* timepicker */
.modal-overlay {
    position: fixed;
    z-index: 999;
    top: -25%;
    left: 0;
    bottom: 0;
    right: 0;
    height: 125%;
    width: 100%;
    background: #000;
    display: none;
    will-change: opacity;
  }

.timepicker-modal {
    max-width: 325px;
    max-height: none;
    left: 50%;
    transform: translateX(-50%) !important;
  }

  .timepicker-container.modal-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0;
  }

  .timepicker-modal .text-primary {
    color: white !important;
  }

  /* Clock Digital Display */
  .timepicker-digital-display {
    -webkit-box-flex: 1;
    -webkit-flex: 1 auto;
        -ms-flex: 1 auto;
            flex: 1 auto;
    background-color: #26a69a;
    padding: 10px;
    font-weight: 300;
  }

  .timepicker-text-container {
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }

  .timepicker-span-hours,
  .timepicker-span-minutes,
  .timepicker-span-am-pm div {
    cursor: pointer;
  }

  .timepicker-span-hours {
    margin-right: 3px;
  }

  .timepicker-span-minutes {
    margin-left: 3px;
  }

  .timepicker-display-am-pm {
    font-size: 1.3rem;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    font-weight: 400;
  }

  /* Analog Clock Display */
  .timepicker-analog-display {
    -webkit-box-flex: 2.5;
    -webkit-flex: 2.5 auto;
        -ms-flex: 2.5 auto;
            flex: 2.5 auto;
  }

  .timepicker-plate {
    background-color: #eee;
    border-radius: 50%;
    width: 270px;
    height: 270px;
    overflow: visible;
    position: relative;
    margin: auto;
    margin-top: 25px;
    margin-bottom: 5px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }

  .timepicker-canvas,
  .timepicker-dial {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .timepicker-minutes {
    visibility: hidden;
  }

  .timepicker-tick {
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.87);
    line-height: 40px;
    text-align: center;
    width: 40px;
    height: 40px;
    position: absolute;
    cursor: pointer;
    font-size: 15px;
  }

  .timepicker-tick.active,
  .timepicker-tick:hover {
    background-color: rgba(38, 166, 154, 0.25);
  }

  .timepicker-dial {
    -webkit-transition: opacity 350ms, -webkit-transform 350ms;
    transition: opacity 350ms, -webkit-transform 350ms;
    transition: transform 350ms, opacity 350ms;
    transition: transform 350ms, opacity 350ms, -webkit-transform 350ms;
  }

  .timepicker-dial-out {
    opacity: 0;
  }

  .timepicker-dial-out.timepicker-hours {
    -webkit-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
  }

  .timepicker-dial-out.timepicker-minutes {
    -webkit-transform: scale(0.8, 0.8);
            transform: scale(0.8, 0.8);
  }

  .timepicker-canvas {
    -webkit-transition: opacity 175ms;
    transition: opacity 175ms;
  }

  .timepicker-canvas line {
    stroke: #26a69a;
    stroke-width: 4;
    stroke-linecap: round;
  }

  .timepicker-canvas-out {
    opacity: 0.25;
  }

  .timepicker-canvas-bearing {
    stroke: none;
    fill: #26a69a;
  }

  .timepicker-canvas-bg {
    stroke: none;
    fill: #26a69a;
  }

  /* Footer */
  .timepicker-footer {
    margin: 0 auto;
    padding: 5px 1rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  .timepicker-clear {
    color: #F44336;
  }

  .timepicker-close {
    color: #26a69a;
  }

  .timepicker-clear,
  .timepicker-close {
    padding: 0 20px;
  }

  .datepicker-modal {
    max-width: 325px;
    min-width: 300px;
    max-height: none;
    left: 50%;
    transform: translateX(-50%) scaleX(1) scaleY(1) !important;
  }

  .datepicker-container.modal-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0;
  }

  .datepicker-controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 280px;
    margin: 0 auto;
  }

  .datepicker-controls .selects-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .datepicker-controls .select-wrapper input {
    border-bottom: none;
    text-align: center;
    margin: 0;
  }

  .datepicker-controls .select-wrapper input:focus {
    border-bottom: none;
  }

  .datepicker-controls .select-wrapper .caret {
    display: none;
  }

  .datepicker-controls .select-year input {
    width: 50px;
  }

  .datepicker-controls .select-month input {
    width: 70px;
  }

  .month-prev, .month-next {
    margin-top: 4px;
    cursor: pointer;
    background-color: transparent;
    border: none;
  }

  /* Date Display */
  .datepicker-date-display {
    -webkit-box-flex: 1;
    -webkit-flex: 1 auto;
        -ms-flex: 1 auto;
            flex: 1 auto;
    background-color: #26a69a;
    color: #fff;
    padding: 20px 22px;
    font-weight: 500;
  }

  .datepicker-date-display .year-text {
    display: block;
    font-size: 1.5rem;
    line-height: 25px;
    color: rgba(255, 255, 255, 0.7);
  }

  .datepicker-date-display .date-text {
    display: block;
    font-size: 2.8rem;
    line-height: 47px;
    font-weight: 500;
  }

  /* Calendar */
  .datepicker-calendar-container {
    -webkit-box-flex: 2.5;
    -webkit-flex: 2.5 auto;
        -ms-flex: 2.5 auto;
            flex: 2.5 auto;
  }

  .datepicker-table {
    width: 280px;
    font-size: 1rem;
    margin: 0 auto;
  }

  .datepicker-table thead {
    border-bottom: none;
  }

  .datepicker-table th {
    padding: 10px 5px;
    text-align: center;
  }

  .datepicker-table tr {
    border: none;
  }

  .datepicker-table abbr {
    text-decoration: none;
    color: #999;
  }

  .datepicker-table td {
    border-radius: 50%;
    padding: 0;
  }

  .datepicker-table td.is-today {
    color: #26a69a;
  }

  .datepicker-table td.is-selected {
    background-color: #26a69a;
    color: #fff;
  }

  .datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled {
    color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
  }

  .datepicker-day-button {
    background-color: transparent;
    border: none;
    line-height: 38px;
    display: block;
    width: 100%;
    border-radius: 50%;
    padding: 0 5px;
    cursor: pointer;
    color: #000 !important;
  }

  .is-selected .datepicker-day-button {
    color: #fff !important;
  }

  .datepicker-day-button:focus {
    background-color: rgba(43, 161, 150, 0.25);
  }

  /* Footer */
  .datepicker-footer {
    width: 280px;
    margin: 0 auto;
    padding-bottom: 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  .datepicker-cancel,
  .datepicker-clear,
  .datepicker-today,
  .datepicker-done {
    color: #26a69a;
    padding: 0 1rem;
  }

  .datepicker-clear {
    color: #F44336;
  }

  /* Media Queries */
  @media only screen and (min-width: 601px) {
    .datepicker-modal {
      max-width: 625px;
    }
    .datepicker-container.modal-content {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
    }
    .datepicker-date-display {
      -webkit-box-flex: 0;
      -webkit-flex: 0 1 270px;
          -ms-flex: 0 1 270px;
              flex: 0 1 270px;
    }
    .datepicker-controls,
    .datepicker-table,
    .datepicker-footer {
      width: 320px;
    }
    .datepicker-day-button {
      line-height: 44px;
    }
  }

  /** dropdown **/
  .dropdown-content {
    background-color: #fff;
    margin: 0;
    display: none;
    min-width: 100px;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style: none;
    padding: 0;
    z-index: 9999;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }

  .dropdown-content:focus {
    outline: 0;
  }

  .dropdown-content li {
    clear: both;
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    min-height: 50px;
    line-height: 1.5rem;
    width: 100%;
    text-align: left;
  }

  .dropdown-content li:hover, .dropdown-content li.active {
    background-color: #eee;
  }

  .dropdown-content li:focus {
    outline: none;
  }

  .dropdown-content li.divider {
    min-height: 0;
    height: 1px;
  }

  .dropdown-content li > a, .dropdown-content li > span {
    font-size: 16px;
    color: #26a69a;
    display: block;
    line-height: 22px;
    padding: 14px 16px;
  }

  .dropdown-content li > span > label {
    top: 1px;
    left: 0;
    height: 18px;
  }

  .dropdown-content li > a > i {
    height: inherit;
    line-height: inherit;
    float: left;
    margin: 0 24px 0 0;
    width: 24px;
  }

  body.keyboard-focused .dropdown-content li:focus {
    background-color: #dadada;
  }

  .input-field.col .dropdown-content [type="checkbox"] + label {
    top: 1px;
    left: 0;
    height: 18px;
    -webkit-transform: none;
            transform: none;
  }

  .dropdown-trigger {
    cursor: pointer;
  }

  select {
    display: none;
  }

  select.browser-default {
    display: block;
  }

  select {
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    padding: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
  }

  .select-label {
    position: absolute;
  }

  .select-wrapper {
    position: relative;
    margin: 5px 10px;
  }

  .select-wrapper.valid + label,
  .select-wrapper.invalid + label {
    width: 100%;
    pointer-events: none;
  }

  .select-wrapper input.select-dropdown {
    display: none !important;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    height: 3rem;
    line-height: 3rem;
    width: 100%;
    font-size: 16px;
    margin: 0 0 8px 0;
    padding: 0;
    display: block;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    z-index: 1;
  }

  .select-wrapper input.select-dropdown:focus {
    border-bottom: 1px solid #26a69a;
  }

  .select-wrapper input.select-dropdown {
      color: #000 !important;
      margin-bottom: 0 !important;
  }

  .select-wrapper .caret {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 0;
    fill: rgba(0, 0, 0, 0.87);
  }

  .select-wrapper + label {
    position: absolute;
    top: -26px;
    font-size: 0.8rem;
  }

  select:disabled {
    color: rgba(0, 0, 0, 0.42);
  }

  .select-wrapper.disabled + label {
    color: rgba(0, 0, 0, 0.42);
  }

  .select-wrapper.disabled .caret {
    fill: rgba(0, 0, 0, 0.42);
  }

  .select-wrapper input.select-dropdown:disabled {
    color: rgba(0, 0, 0, 0.42);
    cursor: default;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }

  .select-wrapper i {
    color: rgba(0, 0, 0, 0.3);
  }

  .select-dropdown li.disabled,
  .select-dropdown li.disabled > span,
  .select-dropdown li.optgroup {
    color: rgba(0, 0, 0, 0.3);
    background-color: transparent;
  }

  body.keyboard-focused .select-dropdown.dropdown-content li:focus {
    background-color: rgba(0, 0, 0, 0.08);
  }

  .select-dropdown.dropdown-content li:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }

  .select-dropdown.dropdown-content li.selected {
    background-color: rgba(0, 0, 0, 0.03);
  }

  .prefix ~ .select-wrapper {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem);
  }

  .prefix ~ label {
    margin-left: 3rem;
  }

  .select-dropdown li img {
    height: 40px;
    width: 40px;
    margin: 5px 15px;
    float: right;
  }

  .select-dropdown li.optgroup {
    border-top: 1px solid #eee;
  }

  .select-dropdown li.optgroup.selected > span {
    color: rgba(0, 0, 0, 0.7);
  }

  .select-dropdown li.optgroup > span {
    color: rgba(0, 0, 0, 0.4);
  }

  .select-dropdown li.optgroup ~ li.optgroup-option {
    padding-left: 1rem;
  }

  .select-wrapper select {
    border-width: 0 0 3px !important;
  }

  .btn-flat {
    background: #fff;
    border: none;
    padding: 1rem;
    text-transform: uppercase;
  }

  /**
  * pace
  */

  .pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  .pace-inactive {
    display: none;
  }

  .pace .pace-progress {
    background: #29d;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
  }

  .pace .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
    opacity: 1.0;
    -webkit-transform: rotate(3deg) translate(0px, -4px);
    -moz-transform: rotate(3deg) translate(0px, -4px);
    -ms-transform: rotate(3deg) translate(0px, -4px);
    -o-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px);
  }

  .pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 15px;
    right: 15px;
    width: 14px;
    height: 14px;
    border: solid 2px transparent;
    border-top-color: #29d;
    border-left-color: #29d;
    border-radius: 10px;
    -webkit-animation: pace-spinner 400ms linear infinite;
    -moz-animation: pace-spinner 400ms linear infinite;
    -ms-animation: pace-spinner 400ms linear infinite;
    -o-animation: pace-spinner 400ms linear infinite;
    animation: pace-spinner 400ms linear infinite;
  }

  @-webkit-keyframes pace-spinner {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  }
  @-moz-keyframes pace-spinner {
    0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
  }
  @-o-keyframes pace-spinner {
    0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
  }
  @-ms-keyframes pace-spinner {
    0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
  }
  @keyframes pace-spinner {
    0% { transform: rotate(0deg); transform: rotate(0deg); }
    100% { transform: rotate(360deg); transform: rotate(360deg); }
  }

  /**
  * what the fuck
  */
 .money-amount {
  font-family: 'Overpass Mono';
  letter-spacing: -3px;
  font-weight: normal;
  background: #efefef;
  color: #444;
  display: inline-block;
  padding: 20px;
  box-sizing: border-box;
 }


 .left h2 {
   font-family: 'Overpass Mono' !important;
 }

 .well-bottom-txt {
  background: #efefef;
  font-family: 'Overpass Mono';
  padding: 0 10px 10px 0;
  color: #999;
 }

 .track--item .hash {
  font-weight: bold;
  text-transform: uppercase;
  background: #f5ff9f;
  font-family: 'Overpass Mono';
  padding: 4px 9px;
  /* border: 1px solid #b5bd6c; */
  border-radius: 3px;
  box-shadow: inset 0 1px #fff;
  border-bottom: 2px solid #cede3d;
 }

 .money-bg {
  background: url(/images/next-bg-repeat.png);
  position: absolute;
  left: 0;
  height: 170px;
  width: 100%;
  /* border-bottom: 2px solid #039352; */
  z-index: -1;
 }

  /**
  typed
  */
  .typed-cursor {
      opacity: 1;
      animation: blink .7s infinite;
  }


  /**
  *  ios toggle
  */

  input.apple-switch {
    position: relative;
    -webkit-appearance: none;
    outline: none;
    width: 50px;
    height: 30px;
    background-color: #fff;
    border: 1px solid #D9DADC;
    border-radius: 50px;
    box-shadow: inset -20px 0 0 0 #fff;
  }

  input.apple-switch:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    background: transparent;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
  }

  input.apple-switch:checked {
    box-shadow: inset 20px 0 0 0 #4ed164;
    border-color: #4ed164;
  }

  input.apple-switch:checked:after {
    left: 20px;
    box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
  }

  .black-link {
    color: #000;
    text-decoration: underline;

  }

  .loading {
    background: #fff;
    border-radius: 50%;
    border: 5px solid #fff;
    margin: 0 auto;
    display: inline-block;
    width: auto !important;
  }

  @keyframes blink {
      0% {
          opacity: 1;
      }
      50% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }

.a--logo {
  max-width: 324px;
  width: 100%;
}

/**
home page
*/
.hide {
  display: none;
}

.point--dim {
  color: #444;
}

.niches--well {
  background: #fff;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.20);
  border-radius: 10px;
}

input.form-control {
  border-width: 2px;
}

.btn.btn-primary.btn-reddit {
  background: #ff571e;
  border-color: #ff571e;
  color: #fff !important;
}

.btn.btn-primary.btn-reddit:active {
  color: #fff !important;
}

.animation-contain {
   position: relative;
      z-index: -1;
       width: 90vw;
      height: 90vh;
      position: absolute;
      display: flex;
      align-items: center;
      transform: translateX(-50%);
      max-width: 740px;
      left: 50%;
      overflow: hidden;

}

.animation-contain .right-button {
   display: none;
}

.surfer-boy {
  position: absolute;
  right: 0;
}

.waves--tiny {
  position: absolute;
  left: 50%;
  z-index: -1;
  bottom: 15%;
  width: 100%;
}

.waves--big {

}

.waves--tiny-col-1,
.waves--tiny-col-2 {
  background-image: url(/images/waves-1.png);
  background-repeat: no-repeat;
  width: 50px;
  height: 40px;
  display: inline-block;
}

.waves--tiny-col-2 {
  position: relative;
  top: 10px;
}

.btn.btn-primary {
  background: #333333;
  border: none;
  box-shadow: none;
  border: 3px solid #333;
  font-family: 'Avenir Next LT Pro', sans-serif;
  font-weight: 900;
  color: #fff !important;
  padding: 10px 30px;
  margin-top: 20px;
  font-display: swap;
}

.btn.btn-primary:active {
  background: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
  box-shadow: none !important;
}

@media (max-width: 550px) {
  h1 {
      font-size: 3rem;
  }

  .animation-contain {
      position: static;
      margin: 0 auto;
      width: 100%;
      transform: none;
      z-index: 1;
      align-items: flex-start;
  }

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

  .animation-contain .surfer-boy {
      right: 10px;
  }

  .top--part {
      display: none;
  }

   .animation-contain .right-button {
      display: block;
      width: 50vw;
  }
}

html.has-animation {
  overflow: hidden;
}

.step--well {
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
  border-bottom: 2px solid #2f91a7;
}

span.size {
  background: #86ca86;
  color: #000;
  padding: 5px 10px;
  border-radius: 50px;
  border: 1px solid darkgreen;
  font-size: .75rem;
  box-shadow: inset 0 1px #ffffff85;
  margin: 0 0 15px 15px;
  font-family: 'Overpass Mono';
}

span.size.size--huge {
  background: red;
  color: #fff;
  border-color: red;
}

span.size.size--medium {
  background: orange;
  border-color: #88672a;
}

span.size.size--tiny {
  background: #00ff00;
}

ul.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  padding-bottom: 30px;
  zoom: 0.8;
}

ul.steps li {
  display: inline-block;
  position: relative;
  border-bottom: 3px solid #333;
  margin: 0 20px;
  opacity: 0.25;
}

ul.steps li.active {
  opacity: 1;
}

ul.steps li span {
  position: absolute;
  width: 100%;
  bottom: -25px;
  text-align: center;
  left: 0;
  font-weight: 900;
}

ul.steps li h2,h3 {
  display: inline;
}

ul.steps li h3 {
  padding: 0 20px;
  font-size: 1.25rem;
}

.badge-cool,
.badge--cool {
  background: #2c4146;
  color: #00d0ff;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding: 10px;
  position: relative;
}

.badge-cool--color {
  color: #2c4146 !important;
}

.badge--cool span,
.badge-cool span {
  position: absolute;
  background: red;
  color: #fff;
  left: 100px;
  padding: 5px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 10px;
}

span.people-placeholder {
  font-weight: bold;
}

.step--heading {
  font-weight: 900;
  font-size: 1.25rem;
}

.alert--step {
  border-width: 0 !important;
  padding: 1.5rem;
  border-left-width: 10px !important;
  border-radius: 0;
  background: linear-gradient(180deg, #f9f28d, #fffcda);
  margin-left: -1rem;
  width: calc(100% + 2rem);
}

.step--checkboxes label,
.step--checkboxes input[type=checkbox] {
  cursor: pointer;
}

.report {
  padding: 10px;
  border-radius: 10px;
  margin: 0 0 1rem 0;
}

.report--people-desc {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
}

.report--subreddits {
  margin-left: 50px;
  padding-left: 10px;
  border-left: 3px solid;
}

.report--subreddit {
  border: 2px solid #ff730f;
  background: #ff730f;
  color: #fff;
  padding: 5px;
  font-size: .8rem;
  display: inline-block;
  margin: 0 5px 5px 0;
  border-radius: 10px;
}

body.white-bg {
  background: #fff;
}

body.white-bg .badge-cool,
body.white-bg .badge--cool {
  color: #fff;
}

input[type=text].input--header-search {
  font-size: 1rem;
  padding: 8px 16px;
  border-radius: 7px;
  border: 1px solid #ccc;
  background: #fff;
  font-family: 'Avenir Next LT Pro', sans-serif;
  outline: none !important;
  caret-color: #333 !important;
  font-display: swap;
}

.row--search-result {
  display: flex;
  align-items: center;
  height: 60px;
  cursor: pointer;
}

.max-1000 {
  max-width: 1000px;
}

.idea--prepend {
  background: #eee;
  padding: 2px 5px;
}

/*.row--search-result:hover {
  background: #fffb79;
  border-color: yellow;
}*/

.yellow-blob {
  background:#fffcba; border-left: 4px solid yellow; box-shadow: 0 1px 5px rgba(0,0,0,0.05); border-bottom: 1px solid #e2dfa0;
}

nav ul.pagination {
  align-items: center;
  justify-content: center;
}

.btn.btn-primary--dark {
  background: #333;
  color: #fff !important;
  font-size: 0.78rem;
}

.btn.btn-primary--dark:active {
  opacity: 0.25 !important;
  color: #fff !important;
}

.cursor--pointer {
  cursor: pointer;
}

.row--subreddit-selected {
  background: #ffffb3;
}

.subreddit--pills span {
  background: #ff7716;
  color: #fff;
  margin: 5px;
  font-size: 0.75rem;
  padding: 5px 15px;
  border-radius: 10px;
  display: inline-block;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  font-family: 'Avenir Next LT Pro', sans-serif;
  box-shadow: inset 0 1px rgba(255,255,255,0.35), 0 2px 3px rgba(0,0,0,0.12);
  border: 1px solid #ff7716;
  font-display: swap;
}

.modal-shower {
  position: fixed;
  font-size: 1.5rem;
  background: rgba(255,255,255,0.8);
  width: 75px;
  height: 75px;
  top: 20vh;
  right: 20px;
  z-index: 11;
  text-align: center;
  display: flex;
  align-items: center;
  border-radius: 50px;
  justify-content: center;
  border: 2px solid #333;
  border-bottom-color: #ccc;
  box-shadow: 0 0 5px rgba(0,0,0,0.25);
  cursor: pointer;
}

.modal-shower:active {
  opacity: 0.6;
}

.modal-shower.modal-shower--overlay {
  position: static;
  display: flex;
  color: #333;
  text-decoration: none;
  height: 50px;
  width: 50px;
  font-size: 1rem;
}

.modal-shower > div {
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#toggles{
  width:60px;
  margin:50px auto;
  text-align:center;
  position: relative;
  top: 3px;
  }
  .ios-toggle,.ios-toggle:active{
  position:absolute;
  top:-5000px;
  height:0;
  width:0;
  opacity:0;
  border:none;
  outline:none;
  }

  #toggles{
    width:60px;
    margin: auto 10px;
    text-align:center;
    }
    .ios-toggle,.ios-toggle:active{
    position:absolute;
    top:-5000px;
    height:0;
    width:0;
    opacity:0;
    border:none;
    outline:none;
    }
    .checkbox-label{
    display:block;
    position:relative;
    padding:10px;
    font-size:12px;
    line-height:16px;
    width:100%;
    height:24px;
    /*border-radius*/
    -webkit-border-radius:18px;
       -moz-border-radius:18px;
            border-radius:18px;
    background:#f8f8f8;
    cursor:pointer;
    }
    .checkbox-label:before{
    content:'';
    display:block;
    position:absolute;
    z-index:1;
    line-height:22px;
    text-indent:40px;
    height:22px;
    width:22px;
    /*border-radius*/
    -webkit-border-radius:100%;
       -moz-border-radius:100%;
            border-radius:100%;
    top:1px;
    left:0px;
    right:auto;
    background:white;
    /*box-shadow*/
    -webkit-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
       -moz-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
            box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
    }
    .checkbox-label:after{
    display:block;
    position:absolute;
    z-index:0;
    top:0px;
    left:-300px;
    padding:10px;
    height:100%;
    width:300px;
    text-align:right;
    color:#bfbfbf;
    white-space:nowrap;
    }
    .ios-toggle:checked + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 20px #dc3545, 0 0 0 2px #dc3545;
       -moz-box-shadow:inset 0 0 0 20px #dc3545, 0 0 0 2px #dc3545;
            box-shadow:inset 0 0 0 20px #dc3545, 0 0 0 2px #dc3545;
    }
    .ios-toggle:checked + .checkbox-label:before{
    left:calc(100% - 22px);
    /*box-shadow*/
    -webkit-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
       -moz-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
            box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
    }
    .ios-toggle:checked + .checkbox-label:after{
    left:78px;
    width:26px;
    }
    /* GREEN CHECKBOX */

    #checkbox1 + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 0px #4dd82a,0 0 0 2px #dddddd;
       -moz-box-shadow:inset 0 0 0 0px #4dd82a,0 0 0 2px #dddddd;
            box-shadow:inset 0 0 0 0px #4dd82a,0 0 0 2px #dddddd;
    }
    #checkbox1:checked + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 18px #4dd82a, 0 0 0 2px #4dd82a;
       -moz-box-shadow:inset 0 0 0 18px #4dd82a, 0 0 0 2px #4dd82a;
            box-shadow:inset 0 0 0 18px #4dd82a, 0 0 0 2px #4dd82a;
    }
    #checkbox1:checked + .checkbox-label:after{
    color:rgba(19,191,17,1);
    }
    /* RED CHECKBOX */

    #checkbox2 + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;
       -moz-box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;
            box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;
    }
    #checkbox2:checked + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;
       -moz-box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;
            box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;
    }
    #checkbox2:checked + .checkbox-label:after{
    color:#f35f42;
    }
    /* BLUE CHECKBOX */

    .ios-toggle.blue-track#darkmode_toggle + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 0px #ddd,0 0 0 2px #dddddd;
       -moz-box-shadow:inset 0 0 0 0px #ddd,0 0 0 2px #dddddd;
            box-shadow:inset 0 0 0 0px #ddd,0 0 0 2px #dddddd;
    }
    .ios-toggle.blue-track#darkmode_toggle:checked + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 20px #ccc,0 0 0 2px #cdcdcd;
       -moz-box-shadow:inset 0 0 0 20px #ccc,0 0 0 2px #cdcdcd;
            box-shadow:inset 0 0 0 20px #ccc,0 0 0 2px #cdcdcd;
    }
    .ios-toggle.blue-track#darkmode_toggle:checked + .checkbox-label:after{
    color:#ccc;
    }

@media (min-width: 768px) {
  .modal-shower, .modal--filters {
    display: none;
  }
}


@media (max-width: 768px) {
  .right-hand-filters {
    display: none;
  }

  div.col-md.report--share-ctn {
    justify-content: center !important;
  }

  h2.report--heading {
    margin-bottom: 0 !important;
    text-align: center;
  }
}

.ring-container {
  position: relative;
  width: 60px;
  height: 60px;
}

.circle {
  width: 15px;
  height: 15px;
  background-color: #62bd19;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 20px;
}

.ringring {
  border: 3px solid #62bd19;
  -webkit-border-radius: 30px;
  height: 25px;
  width: 25px;
  position: absolute;
  left: 15px;
  top: 15px;
  -webkit-animation: pulsate 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0.0
}

.notyf {
  font-family: 'Avenir Next LT Pro', sans-serif;
  font-size: 1rem;
  font-display: swap;
}

.notyf .notyf__icon--error {
  display: none;
}

@-webkit-keyframes pulsate {
  0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

@media (max-width: 560px) {
  /*html, body {
    font-size: 11px;
  }*/
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

/**
ads
*/

.block-ideas--group {
  background: transparent !important;
  margin: 0 auto;
  border-radius: 10px;
  max-width: 500px;
  border: 1px solid #ddd;
  box-shadow: 0 0 5px rgba(0,0,0,0.05), inset 0 1px #fff;
}

.block-ideas--mock-link {
  color: blue;
  font-weight: bold;
}

h5.heading--mini {
  font-size: 0.8rem;
  text-transform: uppercase;
}

.a--button-link {
  text-decoration: none !important;
  color: #333 !important;
  border-radius: 30px;
  display: block;
  padding: 2rem;
  position: relative;
  height: 100%;
  background: #fff;
}

.a--button-link h2 {
  font-size: 1.25rem;
  /*text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);*/
}

.nl-to-br {
  /* white-space: pre-line;
  word-wrap: break-word; */
}

input.select2-search__field {
  font-family: 'Avenir Next LT Pro', sans-serif !important;
  padding: 10px !important;
  font-display: swap;
}

.admin-left-menu {
  display: none !important;
}

@media (min-width: 600px) {
  body.body--logged-in .admin-left-menu {
    display: flex !important;
    position: fixed;
    flex: 1;
    width: 50px;
    left: 0;
    background: #333;
    top: 0;
    box-shadow: inset -2px 0 rgba(0,0,0,0.25);
    height: 100vh;
    align-items: center;
    color: #ddd;
    text-align: center;
  }

  body.body--logged-in .admin-left-menu a {
    color: #fff;
  }
}

.a--copy--link {
  font-size: 0.8rem;
  text-decoration: underline;
}

.tag--span {
  background: #eee;
  border-radius: 5px;
  padding: 3px;
}

.tag--span a {
  color: #333 !important;
}

.dropdown-menu {
  box-shadow: 0 1px 8px rgb(0 0 0 / 10%);
}

a.favorited {
  color: #ffc83d !important;
  background: #ffffba;
  border-color: yellow !important;
  height: 25px;
  width: 25px;
  border: 1px solid #ccc;
  border-radius: 25%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgb(0 0 0 / 10%);
  text-decoration: none !important;
}

a.favorited--base {
  color: #333;
  font-size: 1rem;
}

/** fix select2 issues */

.select2-selection.select2-selection--single {
  height: auto !important;
  padding: 5px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-results__option,
.select2-search__field {
  font-family: 'Avenir Next LT Pro',sans-serif !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
  padding: 0 3px !important;
}