:root {
  --grey-00: #696161;
  --grey-01: #b0b1b3;
  --grey-02: #d0cbcb;
  --grey-03: #ebeaea;
  --grey-04: #f6f6f6;
  --grey-05: #fdfdfd;
  --black: #332827;
  --white: #ffffff;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Ew-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM70w-.ttf) format('truetype');
}
@-webkit-keyframes bg-heartbeat {
  0%,
  100% {
    background-color: #696161;
  }
  50% {
    background-color: #69cb82;
  }
}
@keyframes bg-heartbeat {
  0%,
  100% {
    background-color: #696161;
  }
  50% {
    background-color: #69cb82;
  }
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
html,
body {
  border: 0;
  font-family: "Helvetica-Neue", "Helvetica", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
div,
span,
object,
iframe,
img,
table,
caption,
thead,
tbody,
tfoot,
tr,
tr,
td,
article,
aside,
canvas,
details,
figure,
hgroup,
menu,
nav,
footer,
header,
section,
summary,
mark,
audio,
video {
  border: 0;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cit,
code,
del,
dfn,
em,
ins,
q,
samp,
small,
strong,
sub,
sup,
b,
i,
hr,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
legend,
label {
  border: 0;
  margin: 0;
  padding: 0;
}
article,
aside,
canvas,
figure,
figure img,
figcaption,
hgroup,
footer,
header,
nav,
section,
audio,
video {
  display: block;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
table caption,
table th,
table td {
  text-align: left;
  vertical-align: middle;
}
a img {
  border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}
h1 {
  font-size: 22px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 18px;
}
h4 {
  font-size: 16px;
}
h5 {
  font-size: 14px;
}
h6 {
  font-size: 12px;
}
p {
  line-height: 1.4;
}
p a {
  text-decoration: underline;
  font-weight: 600;
}
a {
  display: inline-block;
  text-decoration: none;
  color: #332827;
}
img {
  display: block;
  width: 100%;
}
ul {
  list-style: none;
}
ul li {
  position: relative;
  display: block;
  padding-left: 15px;
  line-height: 1.2;
}
ul li::before {
  content: "\f105";
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
}
strong {
  font-weight: 500;
  color: #332827;
}
em {
  font-style: normal;
  font-weight: 600;
}
hr {
  display: block;
  height: 2px;
  width: 100%;
  background: #f6f6f6;
}
button,
.button {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 70px;
  padding: 0;
  background: #f6f6f6;
  border: 1px solid #f6f6f6;
  color: #332827;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 20px;
  -webkit-transition: background 0.1s linear, color 0.1s linear, border-color 0.1s linear;
  transition: background 0.1s linear, color 0.1s linear, border-color 0.1s linear;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
button:hover,
.button:hover {
  background: #fdfdfd;
}
button:active,
.button:active {
  background: #ebeaea;
}
button.square,
.button.square {
  width: 70px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 70px;
          flex: 0 0 70px;
}
button.xl,
.button.xl {
  height: 90px;
  border-radius: 30px;
}
button.xl.square,
.button.xl.square {
  width: 90px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 90px;
          flex: 0 0 90px;
}
button.xl i,
.button.xl i {
  width: 90px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 90px;
          flex: 0 0 90px;
  font-size: 25px;
}
button.xl span,
.button.xl span {
  font-size: 22px;
}
button.xl span:first-child,
.button.xl span:first-child {
  padding-left: 40px;
}
button.xl span:last-child,
.button.xl span:last-child {
  padding-right: 40px;
}
button.xs,
.button.xs {
  height: 50px;
  border-radius: 15px;
}
button.xs.square,
.button.xs.square {
  width: 50px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50px;
          flex: 0 0 50px;
}
button.xs i,
.button.xs i {
  width: 50px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50px;
          flex: 0 0 50px;
  font-size: 20px;
}
button.xs span,
.button.xs span {
  font-size: 14px;
}
button.xs span:first-child,
.button.xs span:first-child {
  padding-left: 20px;
}
button.xs span:last-child,
.button.xs span:last-child {
  padding-right: 20px;
}
button.xxs,
.button.xxs {
  height: 40px;
  border-radius: 10px;
}
button.xxs.square,
.button.xxs.square {
  width: 40px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40px;
          flex: 0 0 40px;
}
button.xxs i,
.button.xxs i {
  width: 40px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40px;
          flex: 0 0 40px;
  font-size: 18px;
}
button.xxs span,
.button.xxs span {
  font-size: 12px;
}
button.xxs span:first-child,
.button.xxs span:first-child {
  padding-left: 20px;
}
button.xxs span:last-child,
.button.xxs span:last-child {
  padding-right: 20px;
}
button > i,
.button > i {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 70px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 70px;
          flex: 0 0 70px;
  font-size: 20px;
}
button > i.round,
.button > i.round {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30px;
          flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin: 0 10px;
  border-radius: 50%;
  font-size: 16px;
}
button > span,
.button > span {
  font-size: 18px;
  font-weight: 600;
}
button > span:first-child,
.button > span:first-child {
  padding-left: 30px;
}
button > span:last-child,
.button > span:last-child {
  padding-right: 30px;
}
button.flyover,
.button.flyover {
  position: fixed;
  z-index: 80;
  right: 10px;
  bottom: 90px;
}
button.btn-confirm,
.button.btn-confirm {
  width: 100%;
  position: relative;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  background: #332827;
  border-radius: 50px;
}
button.btn-confirm .drag-rail,
.button.btn-confirm .drag-rail {
  position: absolute;
  z-index: 1;
  top: 9px;
  left: 10px;
  right: 10px;
  display: block;
  height: 50px;
  padding: 0;
}
button.btn-confirm .drag-handle,
.button.btn-confirm .drag-handle {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
  width: 80px;
  color: #696161;
  font-size: 18px;
  background: #ffffff;
  border-radius: 25px;
  left: 0;
}
button.btn-confirm .drag-handle::before,
.button.btn-confirm .drag-handle::before {
  display: block;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
button.btn-confirm .text,
.button.btn-confirm .text {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 70%;
          flex: 0 0 70%;
  color: #ffffff;
  font-size: 16px;
}
button.btn-confirm.back,
.button.btn-confirm.back {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
button.btn-confirm.back .drag-handle,
.button.btn-confirm.back .drag-handle {
  right: 0;
  left: auto;
}
button.btn-confirm.success,
.button.btn-confirm.success {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #69cb82;
  -webkit-transition: background .2s;
  transition: background .2s;
}
button.btn-confirm.success .drag-rail,
.button.btn-confirm.success .drag-rail {
  opacity: 0;
  -webkit-transition: opacity .1s linear;
  transition: opacity .1s linear;
}
button.btn-confirm.success .text,
.button.btn-confirm.success .text {
  padding: 0 30px;
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  min-height: 80px;
  padding: 10px 20px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 24px;
  color: #332827;
  background: #ffffff;
  border: 2px solid #ebeaea;
  border-radius: 20px;
  outline-style: none !important;
  resize: vertical;
  -webkit-transition: background 0.1s linear, border-color 0.1s linear;
  transition: background 0.1s linear, border-color 0.1s linear;
  resize: none;
  -webkit-appearance: textfield;
  /* iOS skin fix for date and time */
  -moz-appearance: textfield;
  /* iOS skin fix for date and time */
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus {
  border: 2px solid #332827;
}
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: default;
}
input[type="text"]:-moz-read-only,
input[type="password"]:-moz-read-only,
input[type="number"]:-moz-read-only,
input[type="date"]:-moz-read-only,
input[type="time"]:-moz-read-only,
textarea:-moz-read-only {
  color: #696161;
  border: 2px solid #ebeaea;
}
input[type="text"]:read-only,
input[type="password"]:read-only,
input[type="number"]:read-only,
input[type="date"]:read-only,
input[type="time"]:read-only,
textarea:read-only {
  color: #696161;
  border: 2px solid #ebeaea;
}
input[type="text"].error,
input[type="password"].error,
input[type="number"].error,
input[type="date"].error,
input[type="time"].error,
textarea.error {
  color: #f86556;
}
input[type="text"].xs,
input[type="password"].xs,
input[type="number"].xs,
input[type="date"].xs,
input[type="time"].xs,
textarea.xs {
  min-height: 60px;
  font-size: 18px;
}
.badge {
  position: absolute;
  z-index: 10;
  top: 0px;
  right: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #ebeaea;
  width: 15px;
  height: 15px;
  border-radius: 7px;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: Montserrat, Arial, sans-serif;
}
.badge:empty {
  display: none;
}
.icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0 !important;
      -ms-flex: 0 0 40px !important;
          flex: 0 0 40px !important;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border-radius: 15px;
  background: #f6f6f6;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.icon::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.checkbox {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 30px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.checkbox > i {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 30px;
  height: 30px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30px;
          flex: 0 0 30px;
  margin-right: 10px;
  font-size: 20px;
  border-radius: 6px;
  color: #332827;
  border: 2px solid #696161;
  -webkit-transition: background 0.1s, border-color 0.1s;
  transition: background 0.1s, border-color 0.1s;
}
.checkbox > i::before {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform .1s ease;
  transition: -webkit-transform .1s ease;
  transition: transform .1s ease;
  transition: transform .1s ease, -webkit-transform .1s ease;
}
.checkbox > i::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
}
.checkbox > input {
  display: none;
}
.checkbox > input:checked ~ i {
  color: #ffffff;
  background: #69cb82;
  border-color: #69cb82;
}
.checkbox > input:checked ~ i::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.checkbox > input:disabled ~ i,
.checkbox > input:disabled ~ span {
  opacity: 0.5;
  cursor: default;
}
.checkbox > span {
  position: relative;
  z-index: 0;
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.1;
}
.radio {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 30px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.radio > i {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 24px;
  height: 24px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 24px;
          flex: 0 0 24px;
  margin-right: 10px;
  border-radius: 24px;
  font-size: 12px;
  color: #ffffff;
  border: 2px solid #696161;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: background 0.1s, border-color 0.1s;
  transition: background 0.1s, border-color 0.1s;
}
.radio > i::before {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform .1s ease;
  transition: -webkit-transform .1s ease;
  transition: transform .1s ease;
  transition: transform .1s ease, -webkit-transform .1s ease;
}
.radio > i::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 26px;
}
.radio > input {
  display: none;
}
.radio > input:checked ~ i {
  color: #ffffff;
  background: #69cb82;
  border-color: #69cb82;
}
.radio > input:checked ~ i::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.radio > input:disabled ~ i,
.radio > input:disabled ~ span {
  opacity: 0.5;
  cursor: default;
}
.radio > span {
  position: relative;
  z-index: 0;
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.1;
}
.switch,
[class*="switch-"] {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 30px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.switch i,
[class*="switch-"] i {
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 60px;
  height: 30px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
          flex: 0 0 60px;
  border-radius: 50px;
  font-size: 20px;
  background: #696161;
  -webkit-transition: background 0.1s, border-color 0.1s;
  transition: background 0.1s, border-color 0.1s;
  cursor: pointer;
}
.switch i::before,
[class*="switch-"] i::before {
  content: "";
  position: relative;
  z-index: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  display: block;
  width: 18px;
  height: 18px;
  background: #ffffff;
  margin-left: 7px;
  border-radius: 20px;
  -webkit-transition: -webkit-transform .1s ease;
  transition: -webkit-transform .1s ease;
  transition: transform .1s ease;
  transition: transform .1s ease, -webkit-transform .1s ease;
}
.switch i::after,
[class*="switch-"] i::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50px;
}
.switch input,
[class*="switch-"] input {
  display: none;
}
.switch input:checked ~ i,
[class*="switch-"] input:checked ~ i {
  background: #69cb82;
}
.switch input:checked ~ i::before,
[class*="switch-"] input:checked ~ i::before {
  -webkit-transform: translateX(28px);
          transform: translateX(28px);
}
.switch input:disabled ~ i,
[class*="switch-"] input:disabled ~ i,
.switch input:disabled ~ span,
[class*="switch-"] input:disabled ~ span {
  opacity: 0.5;
  cursor: default;
}
.switch > span,
[class*="switch-"] > span {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  padding-left: 10px;
  font-size: 18px;
}
.switch.loading,
[class*="switch-"].loading {
  pointer-events: none;
}
.switch.loading i,
[class*="switch-"].loading i,
.switch.loading input:checked ~ i,
[class*="switch-"].loading input:checked ~ i {
  opacity: 1;
  background: #ebeaea;
  -webkit-animation: bg-heartbeat 1s linear infinite;
          animation: bg-heartbeat 1s linear infinite;
}
.switch.loading span,
[class*="switch-"].loading span {
  opacity: 1;
}
.clickable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
}
.action,
.action-default {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  background: #ffffff !important;
}
.action:hover,
.action-default:hover {
  background: #f6f6f6 !important;
}
.action .mark,
.action-default .mark {
  color: #d0cbcb !important;
}
.action-disabled,
[state="disabled"] .action {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  background: #ffffff !important;
  color: #b0b1b3 !important;
}
.action-disabled .icon,
[state="disabled"] .action .icon {
  background: #ffffff !important;
  color: #b0b1b3 !important;
}
.action-disabled p,
[state="disabled"] .action p {
  color: #b0b1b3 !important;
}
.action-disabled .mark,
[state="disabled"] .action .mark {
  color: #696161 !important;
}
.action-upcoming,
[state="upcoming"] .action {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  background: #69c9d7 !important;
  color: #ffffff !important;
}
.action-upcoming:hover,
[state="upcoming"] .action:hover {
  background: #34a7b9 !important;
}
.action-upcoming .icon,
[state="upcoming"] .action .icon {
  background: #ffffff !important;
  color: #69c9d7 !important;
}
.action-upcoming p,
[state="upcoming"] .action p {
  color: #ffffff !important;
}
.action-upcoming .mark,
[state="upcoming"] .action .mark {
  color: #ffffff !important;
}
.action-warning,
[state="warning"] .action {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  background: #ffb55c !important;
  color: #ffffff !important;
}
.action-warning:hover,
[state="warning"] .action:hover {
  background: #f09d37 !important;
}
.action-warning .icon,
[state="warning"] .action .icon {
  background: #ffffff !important;
  color: #ffb55c !important;
}
.action-warning p,
[state="warning"] .action p {
  color: #ffffff !important;
}
.action-warning .mark,
[state="warning"] .action .mark {
  color: #ffffff !important;
}
.action-urgent,
[state="urgent"] .action {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  background: #f86556 !important;
  color: #ffffff !important;
}
.action-urgent:hover,
[state="urgent"] .action:hover {
  background: #dd4d3e !important;
}
.action-urgent .icon,
[state="urgent"] .action .icon {
  background: #ffffff !important;
  color: #f86556 !important;
}
.action-urgent p,
[state="urgent"] .action p {
  color: #ffffff !important;
}
.action-urgent .mark,
[state="urgent"] .action .mark {
  color: #ffffff !important;
}
.action-complete,
[state="complete"] .action {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  background: #69cb82 !important;
  color: #ffffff !important;
}
.action-complete:hover,
[state="complete"] .action:hover {
  background: #58ad6e !important;
}
.action-complete .icon,
[state="complete"] .action .icon {
  background: #ffffff !important;
  color: #69cb82 !important;
}
.action-complete p,
[state="complete"] .action p {
  color: #ffffff !important;
}
.action-complete .mark,
[state="complete"] .action .mark {
  color: #ffffff !important;
}
.action-complete .mark i,
[state="complete"] .action .mark i {
  height: 30px;
  width: 30px;
  margin-left: 6px;
  background: url(../img/mark.svg) center no-repeat;
}
.action-complete .mark i::before,
[state="complete"] .action .mark i::before {
  display: none;
}
[state="default"] {
  --bg-state: #d0cbcb;
  --bg-darkstate: #332827;
}
[state="upcoming"] {
  --bg-state: #69c9d7;
  --bg-darkstate: #34a7b9;
  --bg-fadestate: rgba(105, 201, 215, 0.2);
}
[state="warning"] {
  --bg-state: #ffb55c;
  --bg-darkstate: #f09d37;
  --bg-fadestate: rgba(255, 181, 92, 0.2);
}
[state="urgent"] {
  --bg-state: #f86556;
  --bg-darkstate: #dd4d3e;
  --bg-fadestate: rgba(248, 101, 86, 0.2);
}
[state="complete"] {
  --bg-state: #69cb82;
  --bg-darkstate: #58ad6e;
  --bg-fadestate: rgba(105, 203, 130, 0.2);
}
.notif-upcoming {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  border-color: #69c9d7 !important;
  border-style: solid;
  border-width: 2px;
}
.notif-upcoming:hover {
  background: rgba(105, 201, 215, 0.2) !important;
}
.notif-upcoming .icon {
  background: rgba(105, 201, 215, 0.2) !important;
  color: #34a7b9 !important;
}
.notif-warning {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  border-color: #ffb55c !important;
  border-style: solid;
  border-width: 2px;
}
.notif-warning:hover {
  background: rgba(255, 181, 92, 0.2) !important;
}
.notif-warning .icon {
  background: rgba(255, 181, 92, 0.2) !important;
  color: #f09d37 !important;
}
.notif-urgent {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  border-color: #f86556 !important;
  border-style: solid;
  border-width: 2px;
}
.notif-urgent:hover {
  background: rgba(248, 101, 86, 0.2) !important;
}
.notif-urgent .icon {
  background: rgba(248, 101, 86, 0.2) !important;
  color: #dd4d3e !important;
}
.notif-complete {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  border-color: #69cb82 !important;
  border-style: solid;
  border-width: 2px;
}
.notif-complete:hover {
  background: rgba(105, 203, 130, 0.2) !important;
}
.notif-complete .icon {
  background: rgba(105, 203, 130, 0.2) !important;
  color: #58ad6e !important;
}
.tag,
[class*="tag-"] {
  padding: 6px 16px;
  border-radius: 25px;
  font-weight: 600;
}
.tag-upcoming {
  background: #69c9d7 !important;
  color: #ffffff !important;
}
.tag-warning {
  background: #ffb55c !important;
  color: #ffffff !important;
}
.tag-urgent {
  background: #f86556 !important;
  color: #ffffff !important;
}
.tag-complete {
  background: #69cb82 !important;
  color: #ffffff !important;
}
.modal {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  opacity: 0;
}
.modal.from-top .modal-container {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  border-radius: 0 0 20px 20px;
}
.modal.from-bottom .modal-container {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.modal[is-opened="false"] {
  -webkit-transition: opacity .2s linear .2s, -webkit-transform 0.1s ease .4s;
  transition: opacity .2s linear .2s, -webkit-transform 0.1s ease .4s;
  transition: transform 0.1s ease .4s, opacity .2s linear .2s;
  transition: transform 0.1s ease .4s, opacity .2s linear .2s, -webkit-transform 0.1s ease .4s;
}
.modal[is-opened="true"] {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  -webkit-transition: opacity .1s linear .1s, -webkit-transform 0.1s;
  transition: opacity .1s linear .1s, -webkit-transform 0.1s;
  transition: transform 0.1s, opacity .1s linear .1s;
  transition: transform 0.1s, opacity .1s linear .1s, -webkit-transform 0.1s;
}
.modal[is-opened="true"] .modal-container {
  -webkit-transform: translate(0);
          transform: translate(0);
  opacity: 1;
  -webkit-transition: opacity 0.2s linear 0.3s, -webkit-transform 0.3s cubic-bezier(0.25, 0.7, 0.2, 1) 0.3s;
  transition: opacity 0.2s linear 0.3s, -webkit-transform 0.3s cubic-bezier(0.25, 0.7, 0.2, 1) 0.3s;
  transition: transform 0.3s cubic-bezier(0.25, 0.7, 0.2, 1) 0.3s, opacity 0.2s linear 0.3s;
  transition: transform 0.3s cubic-bezier(0.25, 0.7, 0.2, 1) 0.3s, opacity 0.2s linear 0.3s, -webkit-transform 0.3s cubic-bezier(0.25, 0.7, 0.2, 1) 0.3s;
}
.modal > .overlay {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #696161;
  opacity: 0.5;
}
.modal .modal-container {
  overflow: hidden;
  position: absolute;
  z-index: 1;
  width: 100%;
  border-radius: 20px;
  font-size: 18px;
  background: #ffffff;
  opacity: 0;
  -webkit-transition: opacity 0.1s linear 0.2s, -webkit-transform 0.3s cubic-bezier(0.55, 0.09, 0.68, 0.53);
  transition: opacity 0.1s linear 0.2s, -webkit-transform 0.3s cubic-bezier(0.55, 0.09, 0.68, 0.53);
  transition: transform 0.3s cubic-bezier(0.55, 0.09, 0.68, 0.53), opacity 0.1s linear 0.2s;
  transition: transform 0.3s cubic-bezier(0.55, 0.09, 0.68, 0.53), opacity 0.1s linear 0.2s, -webkit-transform 0.3s cubic-bezier(0.55, 0.09, 0.68, 0.53);
}
.modal .modal-container > .content {
  max-height: 60vh;
  padding: 10px;
  overflow-y: scroll;
}
.modal .modal-container .header .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.modal.full[is-opened="true"] .modal-container {
  border-radius: 0;
}
.modal.full .modal-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  outline-style: scroll;
  border-radius: 0;
  background: #ffffff;
}
.modal.full .modal-container > .header {
  position: relative;
  z-index: 10;
  padding: 10px 0;
}
.modal.full .modal-container > .header .module .text {
  color: #ffffff;
}
.modal.full .modal-container > .header .module .icon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40px;
          flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0 10px 0;
}
.modal.full .modal-container > .content {
  max-height: none;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  padding: 20px 20px 100px;
}
.modal.flyover {
  position: fixed;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  -webkit-transform: translate(-100%, -100%);
          transform: translate(-100%, -100%);
}
.modal.flyover[is-opened="false"] {
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0);
}
.modal.flyover .modal-container {
  position: relative;
  -webkit-box-shadow: 0 10px 10px rgba(51, 40, 39, 0.2);
          box-shadow: 0 10px 10px rgba(51, 40, 39, 0.2);
}
.toasts-container {
  position: fixed;
  z-index: 9999;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 0 5px;
}
.toasts-container.bottom {
  bottom: 100px;
}
.toasts-container.top {
  top: 70px;
}
.toasts-container .toast {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  opacity: 0;
  -webkit-transition: opacity .3s, -webkit-transform .3s ease;
  transition: opacity .3s, -webkit-transform .3s ease;
  transition: transform .3s ease, opacity .3s;
  transition: transform .3s ease, opacity .3s, -webkit-transform .3s ease;
}
.toasts-container .toast.active {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.toast {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  color: #ffffff;
  margin: 5px 0;
}
.toast::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #69c9d7;
  opacity: .9;
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
  border-radius: 15px;
}
.toast > i {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
          flex: 0 0 60px;
  width: 60px;
  height: 60px;
  margin: 0;
  font-size: 32px;
}
.toast span {
  position: relative;
  z-index: 1;
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
  padding: 20px 20px 20px 0;
  line-height: 1.2;
  font-size: 18px;
}
.toast .toast-close {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
          flex: 0 0 60px;
  width: 60px;
  height: 60px;
  color: #FFF;
  background: none;
  border: none;
  cursor: pointer;
}
.toast .toast-close i {
  font-size: 18px;
}
.toast.error::before {
  background: #f86556;
}
.toast.warning::before {
  background: #ffb55c;
}
.toast.success::before {
  background: #69cb82;
}
.wrapper {
  display: none;
}
.wrapper.open {
  display: block;
  height: auto;
}
.calendar-week {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  height: 70px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 70px;
          flex: 0 0 70px;
}
.calendar-day {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  color: #696161 !important;
}
.calendar-day:nth-last-child(-n+2) {
  color: #b0b1b3 !important;
}
.calendar-day.event {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
  background: rgba(105, 201, 215, 0.2) !important;
}
.calendar-day.event:hover {
  background: rgba(52, 167, 185, 0.2) !important;
}
.calendar-day.event .num {
  color: #69c9d7 !important;
  border-color: #69c9d7 !important;
}
.calendar-day.event i.complete {
  color: #69cb82 !important;
  font-size: 12px;
}
.calendar-day.event i.complete::before {
  content: "\f058";
}
.calendar-day.event i.warning {
  color: #ffb55c !important;
  font-size: 12px;
}
.calendar-day.event i.warning::before {
  content: "\f06a";
}
.calendar-day.event i.urgent {
  color: #f86556 !important;
  font-size: 12px;
}
.calendar-day.event i.urgent::before {
  content: "\f06a";
}
.calendar-day.event i.upcoming {
  color: #69c9d7 !important;
  font-size: 12px;
}
.calendar-day.today {
  background: #f6f6f6 !important;
}
.calendar-day.today .num {
  font-weight: 700;
  color: #332827 !important;
  border-color: #b0b1b3 !important;
}
.calendar-day .num:not(:empty) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  width: 100%;
  padding-top: 2px;
  border-top: 2px solid #ebeaea;
  font-size: 1.2em !important;
}
.calendar-day .events {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30px;
          flex: 0 0 30px;
  min-width: 80%;
  color: #d0cbcb !important;
}
.calendar-day .events i {
  font-size: 8px;
}
.comment-radio {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.comment-radio > i {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
  font-size: 60px;
  background: #f6f6f6 !important;
  border-radius: 2px;
  border-radius: 20px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: background .1s, color .1s;
  transition: background .1s, color .1s;
}
.comment-radio > i::before {
  -webkit-transition: -webkit-transform .1s ease;
  transition: -webkit-transform .1s ease;
  transition: transform .1s ease;
  transition: transform .1s ease, -webkit-transform .1s ease;
}
.comment-radio > i::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 26px;
}
.comment-radio > input {
  display: none;
}
.comment-radio > input:checked ~ i {
  background: rgba(105, 203, 130, 0.2) !important;
  color: #58ad6e;
}
.comment-radio > input:checked ~ i::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.comment-radio > input:disabled ~ i,
.comment-radio > input:disabled ~ span {
  opacity: 0.5;
  cursor: default;
}
.comment-radio:nth-child(1) > input:checked ~ i {
  background: rgba(105, 203, 130, 0.2) !important;
  color: #58ad6e;
}
.comment-radio:nth-child(2) > input:checked ~ i {
  background: rgba(255, 181, 92, 0.2) !important;
  color: #f09d37;
}
.comment-radio:nth-child(3) > input:checked ~ i {
  background: rgba(248, 101, 86, 0.2) !important;
  color: #dd4d3e;
}
.comment-section {
  display: none;
}
.comment-section.open {
  display: block;
}
.comment-section:not(.current) .comment-next {
  display: none;
}
.nav-injection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.keyboard {
  padding-bottom: 10px;
  padding-left: 10px;
}
.keyboard .key {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
  padding: 10px 10px 0 0;
}
html {
  height: 100%;
}
body {
  overflow: hidden;
  position: relative;
  z-index: 0;
  height: 100%;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: #332827;
  background: #ffffff;
}
#app {
  height: 100%;
}
.view {
  height: 100%;
  max-width: 768px;
  margin: auto;
  -webkit-box-shadow: 0 0 30px rgba(37, 50, 55, 0.2);
          box-shadow: 0 0 30px rgba(37, 50, 55, 0.2);
}
.modal {
  max-width: 768px;
  margin: auto;
}
main {
  position: relative;
  z-index: 0;
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  padding-bottom: 70px;
  background: #fdfdfd;
}
@media screen and (min-width: calc(1024px + 1px)) {
  main {
    /* width */
    /* Track */
    /* Handle */
    /* Handle on hover */
  }
  main::-webkit-scrollbar {
    width: 6px;
  }
  main::-webkit-scrollbar-track {
    background: #b0b1b3;
  }
  main::-webkit-scrollbar-thumb {
    background: #ebeaea;
  }
  main::-webkit-scrollbar-thumb:hover {
    background: #ebeaea;
  }
}
/* STATES COLOR HELPERS */
.color-state {
  background: var(--color-state) !important;
}
.bg-state {
  background: var(--bg-state) !important;
}
.bg-darkstate {
  background: var(--bg-darkstate) !important;
}
.bg-fadestate {
  background: var(--bg-fadestate) !important;
}
/* COLOR HELPERS */
.white {
  color: #ffffff !important;
}
.black {
  color: #332827 !important;
}
.grey-00 {
  color: #696161 !important;
}
.grey-01 {
  color: #b0b1b3 !important;
}
.grey-02 {
  color: #d0cbcb !important;
}
.grey-03 {
  color: #ebeaea !important;
}
.grey-04 {
  color: #f6f6f6 !important;
}
.grey-05 {
  color: #fdfdfd !important;
}
.blue {
  color: #69c9d7 !important;
}
.green {
  color: #69cb82 !important;
}
.red {
  color: #f86556 !important;
}
.orange {
  color: #ffb55c !important;
}
.darkblue {
  color: #34a7b9 !important;
}
.darkgreen {
  color: #58ad6e !important;
}
.darkred {
  color: #dd4d3e !important;
}
.darkorange {
  color: #f09d37 !important;
}
.hover-white:hover {
  color: #ffffff !important;
}
.hover-black:hover {
  color: #332827 !important;
}
.hover-grey-00:hover {
  color: #696161 !important;
}
.hover-grey-01:hover {
  color: #b0b1b3 !important;
}
.hover-grey-02:hover {
  color: #d0cbcb !important;
}
.hover-grey-03:hover {
  color: #ebeaea !important;
}
.hover-grey-04:hover {
  color: #f6f6f6 !important;
}
.hover-grey-05:hover {
  color: #fdfdfd !important;
}
.hover-blue:hover {
  color: #69c9d7 !important;
}
.hover-green:hover {
  color: #69cb82 !important;
}
.hover-orange:hover {
  color: #ffb55c !important;
}
.hover-red:hover {
  color: #f86556 !important;
}
.hover-darkblue:hover {
  color: #34a7b9 !important;
}
.hover-darkgreen:hover {
  color: #58ad6e !important;
}
.hover-darkorange:hover {
  color: #f09d37 !important;
}
.hover-darkred:hover {
  color: #dd4d3e !important;
}
/* BACKGROUND COLOR HELPERS */
.no-bg {
  background: none !important;
}
.bg-white {
  background: #ffffff !important;
}
.bg-black {
  background: #332827 !important;
}
.bg-grey-00 {
  background: #696161 !important;
}
.bg-grey-01 {
  background: #b0b1b3 !important;
}
.bg-grey-02 {
  background: #d0cbcb !important;
}
.bg-grey-03 {
  background: #ebeaea !important;
}
.bg-grey-04 {
  background: #f6f6f6 !important;
}
.bg-grey-05 {
  background: #fdfdfd !important;
}
.bg-blue {
  background: #69c9d7 !important;
}
.bg-green {
  background: #69cb82 !important;
}
.bg-orange {
  background: #ffb55c !important;
}
.bg-red {
  background: #f86556 !important;
}
.bg-darkblue {
  background: #34a7b9 !important;
}
.bg-darkgreen {
  background: #58ad6e !important;
}
.bg-darkorange {
  background: #f09d37 !important;
}
.bg-darkred {
  background: #dd4d3e !important;
}
.bg-fadeblue {
  background: rgba(105, 201, 215, 0.2) !important;
}
.bg-fadegreen {
  background: rgba(105, 203, 130, 0.2) !important;
}
.bg-fadeorange {
  background: rgba(255, 181, 92, 0.2) !important;
}
.bg-fadered {
  background: rgba(248, 101, 86, 0.2) !important;
}
.bg-fadedarkblue {
  background: rgba(105, 201, 215, 0.2) !important;
}
.bg-fadedarkgreen {
  background: rgba(88, 173, 110, 0.2) !important;
}
.bg-fadedarkorange {
  background: rgba(240, 157, 55, 0.2) !important;
}
.bg-fadedarkred {
  background: rgba(221, 77, 62, 0.2) !important;
}
.hover-bg-white:hover {
  background: #ffffff !important;
}
.hover-bg-black:hover {
  background: #332827 !important;
}
.hover-bg-grey-00:hover {
  background: #696161 !important;
}
.hover-bg-grey-01:hover {
  background: #b0b1b3 !important;
}
.hover-bg-grey-02:hover {
  background: #d0cbcb !important;
}
.hover-bg-grey-03:hover {
  background: #ebeaea !important;
}
.hover-bg-grey-04:hover {
  background: #f6f6f6 !important;
}
.hover-bg-grey-05:hover {
  background: #fdfdfd !important;
}
.hover-bg-blue:hover {
  background: #69c9d7 !important;
}
.hover-bg-green:hover {
  background: #69cb82 !important;
}
.hover-bg-orange:hover {
  background: #ffb55c !important;
}
.hover-bg-red:hover {
  background: #f86556 !important;
}
.hover-bg-darkblue:hover {
  background: #34a7b9 !important;
}
.hover-bg-darkgreen:hover {
  background: #58ad6e !important;
}
.hover-bg-darkorange:hover {
  background: #f09d37 !important;
}
.hover-bg-darkred:hover {
  background: #dd4d3e !important;
}
.hover-bg-fadewhite:hover {
  background: rgba(255, 255, 255, 0.6) !important;
}
.hover-bg-fadeblue:hover {
  background: rgba(105, 201, 215, 0.2) !important;
}
.hover-bg-fadegreen:hover {
  background: rgba(105, 203, 130, 0.2) !important;
}
.hover-bg-fadeorange:hover {
  background: rgba(255, 181, 92, 0.2) !important;
}
.hover-bg-fadered:hover {
  background: rgba(248, 101, 86, 0.2) !important;
}
.hover-bg-fadedarkblue:hover {
  background: rgba(52, 167, 185, 0.2) !important;
}
.hover-bg-fadedarkgreen:hover {
  background: rgba(88, 173, 110, 0.2) !important;
}
.hover-bg-fadedarkorange:hover {
  background: rgba(240, 157, 55, 0.2) !important;
}
.hover-bg-fadedarkred:hover {
  background: rgba(221, 77, 62, 0.2) !important;
}
/* BORDER COLOR HELPERS */
.no-border {
  border: none !important;
}
[class*="border-"] {
  border-style: solid;
  border-width: 2px;
  border-color: #ebeaea;
}
.border-white {
  border-color: #ffffff !important;
}
.border-black {
  border-color: #332827 !important;
}
.border-grey-00 {
  border-color: #696161 !important;
}
.border-grey-01 {
  border-color: #b0b1b3 !important;
}
.border-grey-02 {
  border-color: #d0cbcb !important;
}
.border-grey-03 {
  border-color: #ebeaea !important;
}
.border-grey-04 {
  border-color: #f6f6f6 !important;
}
.border-grey-05 {
  border-color: #fdfdfd !important;
}
.border-blue {
  border-color: #69c9d7 !important;
}
.border-green {
  border-color: #69cb82 !important;
}
.border-orange {
  border-color: #ffb55c !important;
}
.border-red {
  border-color: #f86556 !important;
}
.border-darkblue {
  border-color: #34a7b9 !important;
}
.border-darkgreen {
  border-color: #58ad6e !important;
}
.border-darkorange {
  border-color: #f09d37 !important;
}
.border-darkred {
  border-color: #dd4d3e !important;
}
.border-fadeblue {
  border-color: rgba(105, 201, 215, 0.2) !important;
}
.border-fadegreen {
  border-color: rgba(105, 203, 130, 0.2) !important;
}
.border-fadeorange {
  border-color: rgba(255, 181, 92, 0.2) !important;
}
.border-fadered {
  border-color: rgba(248, 101, 86, 0.2) !important;
}
.hover-border-white:hover {
  border-color: #ffffff !important;
}
.hover-border-black:hover {
  border-color: #332827 !important;
}
.hover-border-grey-00:hover {
  border-color: #696161 !important;
}
.hover-border-grey-01:hover {
  border-color: #b0b1b3 !important;
}
.hover-border-grey-02:hover {
  border-color: #d0cbcb !important;
}
.hover-border-grey-03:hover {
  border-color: #ebeaea !important;
}
.hover-border-grey-04:hover {
  border-color: #f6f6f6 !important;
}
.hover-border-grey-05:hover {
  border-color: #fdfdfd !important;
}
.hover-border-blue:hover {
  border-color: #69c9d7 !important;
}
.hover-border-green:hover {
  border-color: #69cb82 !important;
}
.hover-border-orange:hover {
  border-color: #ffb55c !important;
}
.hover-border-red:hover {
  border-color: #f86556 !important;
}
.hover-border-darkblue:hover {
  border-color: #34a7b9 !important;
}
.hover-border-darkgreen:hover {
  border-color: #58ad6e !important;
}
.hover-border-darkorange:hover {
  border-color: #f09d37 !important;
}
.hover-border-darkred:hover {
  border-color: #dd4d3e !important;
}
/* MARGIN & PADDING HELPERS */
.no-margin {
  margin: 0 !important;
}
.no-padding {
  padding: 0 !important;
}
.margin-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.margin-10 {
  margin: 10px !important;
}
.margin-top-10 {
  margin-top: 10px !important;
}
.margin-bottom-10 {
  margin-bottom: 10px !important;
}
.margin-left-10 {
  margin-left: 10px !important;
}
.margin-right-10 {
  margin-right: 10px !important;
}
.margin-15 {
  margin: 15px !important;
}
.margin-top-15 {
  margin-top: 15px !important;
}
.margin-bottom-15 {
  margin-bottom: 15px !important;
}
.margin-left-15 {
  margin-left: 15px !important;
}
.margin-right-15 {
  margin-right: 15px !important;
}
.margin-20 {
  margin: 20px !important;
}
.margin-top-20 {
  margin-top: 20px !important;
}
.margin-bottom-20 {
  margin-bottom: 20px !important;
}
.margin-left-20 {
  margin-left: 20px !important;
}
.margin-right-20 {
  margin-right: 20px !important;
}
.padding-5 {
  padding: 5px !important;
}
.padding-top-5 {
  padding-top: 5px !important;
}
.padding-bottom-5 {
  padding-bottom: 5px !important;
}
.padding-left-5 {
  padding-left: 5px !important;
}
.padding-right-5 {
  padding-right: 5px !important;
}
.padding-10 {
  padding: 10px !important;
}
.padding-top-10 {
  padding-top: 10px !important;
}
.padding-bottom-10 {
  padding-bottom: 10px !important;
}
.padding-left-10 {
  padding-left: 10px !important;
}
.padding-right-10 {
  padding-right: 10px !important;
}
.padding-20 {
  padding: 20px !important;
}
.padding-left-20 {
  padding-left: 20px !important;
}
.padding-right-20 {
  padding-right: 20px !important;
}
.padding-top-20 {
  padding-top: 20px !important;
}
.padding-bottom-20 {
  padding-bottom: 20px !important;
}
.margin-left-20 {
  margin-left: 20px !important;
}
.margin-right-20 {
  margin-right: 20px !important;
}
/* TEXT HELPERS */
.text-nowrap {
  white-space: nowrap;
}
.word-wrap {
  width: 100%;
  word-wrap: break-word;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-ellipsis {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-highlight {
  color: #ffffff;
  border-radius: 6px;
}
.font-xl {
  font-size: 1.2em !important;
}
.font-xxl {
  font-size: 1.6em !important;
}
.font-xxxl {
  font-size: 2em !important;
}
.font-m {
  font-size: 1em !important;
}
.font-xs {
  font-size: .8em !important;
}
.font-xxs {
  font-size: .6em !important;
}
.font-xxxs {
  font-size: .4em !important;
}
.weight-500,
.text-regular {
  font-weight: 500;
}
.weight-600,
.text-medium {
  font-weight: 600;
}
.weight-700,
.text-bold {
  font-weight: 700;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.initialcase {
  text-transform: initial;
}
.underline {
  text-decoration: underline;
}
/* LAYOUT HELPERS */
.flex,
[class*="flex-"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flex[class*="-start"],
[class*="flex-"][class*="-start"] {
  -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important;
}
.flex[class*="-end"],
[class*="flex-"][class*="-end"] {
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
}
.flex[class*="-center"],
[class*="flex-"][class*="-center"] {
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
}
.flex[class*="-middle"],
[class*="flex-"][class*="-middle"] {
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}
.flex[class*="-space"],
[class*="flex-"][class*="-space"] {
  -webkit-box-pack: justify !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important;
}
.flex[class*="-evenly"],
[class*="flex-"][class*="-evenly"] {
  -webkit-box-pack: space-evenly !important;
      -ms-flex-pack: space-evenly !important;
          justify-content: space-evenly !important;
}
.flex[class*="-wrap"],
[class*="flex-"][class*="-wrap"] {
  -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
}
.flex[class*="-nowrap"],
[class*="flex-"][class*="-nowrap"] {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important;
}
.flex[class*="-column"],
[class*="flex-"][class*="-column"] {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
}
.flex[class*="-full"],
[class*="flex-"][class*="-full"] {
  width: 100%;
}
.flex[class*="-gap"],
[class*="flex-"][class*="-gap"] {
  gap: 10px;
}
.flex[class*="-gap-2"],
[class*="flex-"][class*="-gap-2"] {
  gap: 2px;
}
.flex[class*="-gap-5"],
[class*="flex-"][class*="-gap-5"] {
  gap: 5px;
}
.flex[class*="-gap-10"],
[class*="flex-"][class*="-gap-10"] {
  gap: 10px;
}
.flex[class*="-gap-15"],
[class*="flex-"][class*="-gap-15"] {
  gap: 15px;
}
.flex[class*="-gap-20"],
[class*="flex-"][class*="-gap-20"] {
  gap: 20px;
}
.flexchild[class*="-20"],
[class*="flexchild-"][class*="-20"] {
  -webkit-box-flex: 20%;
      -ms-flex: 20%;
          flex: 20%;
}
.flexchild[class*="-50"],
[class*="flexchild-"][class*="-50"] {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 50%;
          flex: 0 1 50%;
}
.flexchild[class*="-100"],
[class*="flexchild-"][class*="-100"] {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
}
.min-height[class*="-100"],
[class*="min-height-"][class*="-100"] {
  min-height: 100%;
}
.position[class*="-relative"],
[class*="position-"][class*="-relative"] {
  position: relative;
}
.position[class*="-sticky"],
[class*="position-"][class*="-sticky"] {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
}
.position[class*="-absolute"],
[class*="position-"][class*="-absolute"] {
  position: absolute;
  z-index: 1;
}
.position[class*="-fixed"],
[class*="position-"][class*="-fixed"] {
  position: fixed;
  z-index: 1;
}
.position[class*="-z-0"],
[class*="position-"][class*="-z-0"] {
  z-index: 0;
}
.position[class*="-z-1"],
[class*="position-"][class*="-z-1"] {
  z-index: 1;
}
.position[class*="-z-2"],
[class*="position-"][class*="-z-2"] {
  z-index: 2;
}
.position[class*="-z-3"],
[class*="position-"][class*="-z-3"] {
  z-index: 3;
}
.position[class*="-z-4"],
[class*="position-"][class*="-z-4"] {
  z-index: 4;
}
.position[class*="-z-5"],
[class*="position-"][class*="-z-5"] {
  z-index: 5;
}
.position[class*="-z-6"],
[class*="position-"][class*="-z-6"] {
  z-index: 6;
}
.position[class*="-z-7"],
[class*="position-"][class*="-z-7"] {
  z-index: 7;
}
.position[class*="-z-8"],
[class*="position-"][class*="-z-8"] {
  z-index: 8;
}
.position[class*="-z-9"],
[class*="position-"][class*="-z-9"] {
  z-index: 9;
}
.position[class*="-z-10"],
[class*="position-"][class*="-z-10"] {
  z-index: 10;
}
.position[class*="-bottom"],
[class*="position-"][class*="-bottom"] {
  bottom: 0;
}
.position[class*="-top"],
[class*="position-"][class*="-top"] {
  top: 0;
}
.position[class*="-left"],
[class*="position-"][class*="-left"] {
  left: 0;
}
.position[class*="-right"],
[class*="position-"][class*="-right"] {
  right: 0;
}
.width-40 {
  width: 40px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40px;
          flex: 0 0 40px;
}
.width-50 {
  width: 50px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50px;
          flex: 0 0 50px;
}
.width-60 {
  width: 60px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
          flex: 0 0 60px;
}
.width-70 {
  width: 70px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 70px;
          flex: 0 0 70px;
}
.width-90 {
  width: 90px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 90px;
          flex: 0 0 90px;
}
.fullwidth {
  width: 100%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}
.height-50 {
  height: 50px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50px;
          flex: 0 0 50px;
}
.height-60 {
  height: 60px !important;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
          flex: 0 0 60px;
}
.height-70 {
  height: 70px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 70px;
          flex: 0 0 70px;
}
.height-90 {
  height: 90px;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 90px;
          flex: 0 1 90px;
}
.min-height-50 {
  min-height: 50px;
}
.min-height-60 {
  min-height: 60px;
}
.min-height-70 {
  min-height: 70px;
}
.min-height-90 {
  min-height: 90px;
}
/* OTHER HELPERS */
.hidden {
  display: none !important;
}
.invisible {
  display: block;
  width: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
}
.stretch {
  height: 100%;
}
.full-max-width {
  max-width: 100%;
}
.no-scroll,
.no-overflow {
  overflow: hidden !important;
}
.no-select {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.scroll-x {
  overflow-x: scroll;
}
.scroll-y {
  overflow-y: scroll;
}
.no-shadow {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.shadow {
  -webkit-box-shadow: 2px 8px 40px rgba(51, 40, 39, 0.15);
          box-shadow: 2px 8px 40px rgba(51, 40, 39, 0.15);
}
.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.dashed {
  border-style: dashed !important;
  border-color: #f6f6f6;
}
.rounded-15 {
  border-radius: 15px;
}
.rounded-20,
.rounded {
  border-radius: 20px;
}
.rounded-30 {
  border-radius: 30px;
}
.rounded-40 {
  border-radius: 40px;
}
.spacer {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20px;
          flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
}
.cursor-pointer {
  cursor: pointer !important;
}
.cursor-grab {
  cursor: -webkit-grab !important;
  cursor: grab !important;
}
/* RESPONSIVE HELPERS */
@media screen and (max-width: 1024px) {
  .hidden-mobile {
    position: fixed;
    z-index: -999;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    visibility: hidden;
  }
}