@charset "UTF-8";

/* source/scss/app.scss */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
@font-face {
  font-display: swap;
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 400;
  src: url(assets/fonts/funnel-display-v2-latin-regular.woff2) format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 700;
  src: url(assets/fonts/funnel-display-v2-latin-700.woff2) format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 800;
  src: url(assets/fonts/funnel-display-v2-latin-800.woff2) format("woff2");
}
body {
  font-family: "Funnel Display", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-rendering: geometricPrecision;
}
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}
p a {
  color: #BA69FF;
  text-decoration-color: #BA69FF;
}
p a::after {
  content: "\2197\fe0f";
}
button {
  background-color: transparent;
  border: none;
  padding: 0;
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #7700FF;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  border-radius: 50px;
  border: 3px solid transparent;
  transition:
    background-color 0.3s ease-out,
    color 0.3s ease-out,
    border-color 0.3s ease-out,
    box-shadow 0.3s ease-out;
  padding: 13px 20px;
  cursor: pointer;
  margin-bottom: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media (min-width: 768px) {
  .button {
    font-size: 18px;
  }
}
.button:hover {
  background-color: #111;
  color: #7700FF;
  border-color: #7700FF;
}
.button:focus,
.button:active {
  color: #fff;
  border-color: #471572;
  background-color: #471572;
}
.button[disabled] {
  border: 1px solid #909090;
  background: #E3E3E3;
  color: #909090;
  cursor: not-allowed;
}
.button--secondary {
  background-color: #BA69FF;
}
.button--secondary:hover {
  background-color: #111;
  color: #BA69FF;
  border-color: #BA69FF;
}
.button--tertiary {
  background-color: #111;
  color: #7700FF;
  border-color: #7700FF;
}
.button--tertiary:hover {
  background-color: #111;
  color: #BA69FF;
  border-color: #BA69FF;
}
.button--inactive {
  background-color: #393939;
  color: #909090;
}
.button--link {
  color: #EBD4FF;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.button--link:hover {
  color: #BA69FF;
}
.button--danger {
  color: #dc5755;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding-left: 10px;
  padding-right: 10px;
}
.button--danger:hover {
  color: #C00F0C;
}
.calendar {
  display: flex;
  flex-direction: row;
  height: 100dvh;
  color: #fff;
  background-color: #111;
  padding-top: 70px;
}
@media (min-width: 1224px) {
  .calendar {
    padding-top: 0;
  }
}
@media (min-width: 1224px) {
  .calendar {
    flex-direction: row;
  }
}
.calendar__overview {
  width: 100%;
  min-height: 60px;
  display: flex;
  background-color: #232323;
  padding: 40px 20px 20px;
  border-bottom: 1px solid #232323;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  justify-content: flex-start;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media (min-width: 768px) {
  .calendar__overview {
    width: calc(100% - 60px);
  }
}
@media (max-width: 1224px) {
  .calendar__overview {
    z-index: 900;
    position: fixed;
    bottom: 0;
    left: auto;
    right: 0;
    height: 90dvh;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(85dvh);
    transition: transform 0.1s ease;
    will-change: transform;
    touch-action: none;
    border: 1px solid #909090;
    cursor: grab;
    border-bottom: none;
    overflow-y: auto;
  }
  .calendar__overview:active {
    cursor: grabbing;
  }
}
@media (min-width: 1224px) {
  .calendar__overview {
    border-right: 1px solid #7700FF;
    border-bottom: none;
    min-width: 320px;
    width: 320px;
    height: auto;
    padding: 50px 10px 50px 20px;
    align-items: initial;
    position: relative;
    bottom: auto;
  }
}
.calendar__overview__head {
  position: relative;
}
@media (min-width: 1224px) {
  .calendar__overview__head {
    padding-bottom: 5px;
  }
}
.calendar__overview__head span {
  display: inline-block;
}
.calendar__overview__head__title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #909090;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.calendar__overview__head__title span {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  opacity: 0.6;
}
.calendar__overview__head__back {
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  gap: 15px;
  cursor: pointer;
  transition: color 0.2s ease-out;
}
@media (min-width: 1224px) {
  .calendar__overview__head__back {
    margin-bottom: 30px;
  }
}
.calendar__overview__head__back svg {
  border: 1px solid #7700FF;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px;
  transition: background-color 0.2s ease-out;
}
@media (min-width: 1224px) {
  .calendar__overview__head__back svg {
    width: 54px;
    height: 54px;
    padding: 15px;
  }
}
.calendar__overview__head__back svg path {
  transition: stroke 0.2s ease-out;
}
.calendar__overview__head__back:hover {
  color: #7700FF;
}
.calendar__overview__head__back:hover svg {
  background-color: #7700FF;
}
.calendar__overview__head h2 {
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  display: inline-block;
  margin: 0;
}
@media (min-width: 1224px) {
  .calendar__overview__head h2 {
    font-size: 22px;
  }
}
.calendar__overview__filter {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.calendar__overview__filter button {
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 7px 12px;
}
.calendar__overview .swiper {
  width: 100%;
  max-height: calc(100vh - 325px);
  min-height: 55px;
}
.calendar__overview .swiper-wrapper {
  max-height: calc(100vh - 325px);
}
.calendar__overview .swiper-slide {
  max-height: calc(100vh - 325px);
  position: relative;
  background-color: #232323;
  z-index: 23;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  padding-right: 10px;
  padding-bottom: 5px;
}
.calendar__overview .swiper-slide::after {
  content: "";
  flex: 0 1 calc(50% - 10px);
}
.calendar__overview__handle {
  border-radius: 3px;
  cursor: grab;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  padding: 10px 0;
}
@media (min-width: 1224px) {
  .calendar__overview__handle {
    display: none;
  }
}
.calendar__overview__posts {
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 22;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  align-items: center;
  width: 100%;
}
@media (max-width: 1224px) {
  .calendar__overview__posts {
    overflow-y: auto;
    max-height: calc(90dvh - 30px);
  }
}
.calendar__overview__posts .button--new-post {
  height: 50px;
  margin-bottom: 5px;
}
.calendar__overview__posts .button--new-manual-post {
  margin-top: -15px;
}
.calendar__overview__posts__current {
  cursor: pointer;
  padding: 0 45px 0 15px;
  height: 40px;
  min-width: 285px;
  max-width: 400px;
  flex: 1 0 100%;
  position: relative;
  display: flex;
  align-items: center;
  max-height: 40px;
  background-color: #232323;
  border-radius: 15px 15px 0 0;
}
.calendar__overview__posts__current::after {
  content: "";
  height: 1px;
  background-color: #909090;
  width: calc(100% - 30px);
  position: absolute;
  bottom: -1px;
  z-index: 25;
}
.calendar__overview__posts__current__arrow {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  transition: transform 0.2s ease-out;
}
.calendar__overview__posts__current .calendar__overview__posts__item {
  pointer-events: none;
  background-color: transparent;
  padding: 0;
  height: auto;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}
.calendar__overview__posts__container {
  position: relative;
  background-color: #232323;
  z-index: 23;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}
.calendar__overview__posts__wrapper {
  position: relative;
  background-color: #232323;
  z-index: 23;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  overflow-y: hidden;
}
@media (min-width: 1224px) {
  .calendar__overview__posts__wrapper {
    background-color: transparent;
    padding: 0;
  }
}
@media (max-width: 1224px) {
  .calendar__overview__posts__wrapper .swiper-wrapper {
    height: 100vh !important;
  }
}
.calendar__overview__posts__wrapper .swiper-slide {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex-wrap: wrap;
}
@media (max-width: 1224px) {
  .calendar__overview__posts__wrapper .swiper-slide {
    height: 100vh;
    max-height: calc(100% - 100px);
  }
}
.calendar__overview__posts.open .calendar__overview__posts__current__arrow {
  transform: translateY(-50%) rotate(180deg);
}
.calendar__overview__posts__item {
  height: 210px;
  width: 125px;
  padding: 10px;
  background-color: #393939;
  border-radius: 15px;
  border: 3px solid transparent;
  transition:
    box-shadow 0.2s ease-out,
    border-color 0.2s ease-out,
    color 0.2s ease-out;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(50% - 10px);
  gap: 5px;
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;
}
.calendar__overview__posts__item__image {
  width: 100%;
  height: 105px;
  border-radius: 15px;
  -o-object-fit: cover;
  object-fit: cover;
  background-color: #7700FF;
}
.calendar__overview__posts__item span {
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.calendar__overview__posts__item svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
}
.calendar__overview__posts__item svg path {
  stroke: #fff;
  transition: stroke 0.2s ease-out;
}
.calendar__overview__posts__item:hover {
  border-color: #7700FF;
  color: #7700FF;
}
.calendar__overview__posts__item:hover path {
  stroke: #7700FF;
}
.calendar__overview__posts__item:has(.calendar__delete:hover) {
  color: #fff;
}
.calendar__overview__posts__item:has(.calendar__delete:hover) svg path {
  stroke: #fff;
}
.calendar__overview__posts__item .calendar__delete {
  color: #fff;
  position: absolute;
  right: 10px;
  padding: 10px;
}
.calendar__overview__posts__item .calendar__delete:hover {
  cursor: pointer;
  color: #B795DE;
}
.calendar__overview__posts__item--active {
  background-color: #7700FF !important;
  font-weight: 700;
  box-shadow: none !important;
}
@media (min-width: 1224px) {
  .calendar__overview__posts__item--active {
    cursor: default;
  }
}
.calendar__overview__posts__item--active:hover {
  color: #fff !important;
}
.calendar__overview__posts__item--active:hover svg path {
  stroke: #fff !important;
}
.calendar__overview .calendar__noPosts {
  color: #B3B1BE;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  margin-bottom: 10px;
  display: none;
}
.calendar__overview .calendar__noPostsPerCategory {
  color: #B3B1BE;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  margin-bottom: 10px;
  height: 20px;
}
.calendar__overview:has(.calendar__overview__post) .calendar__noPosts {
  display: none;
}
.calendar__wrapper {
  width: 100%;
}
.calendar__wrapper .fc-scrollgrid {
  border: none !important;
}
.calendar__wrapper .fc-col-header-cell:before {
  content: none !important;
}
.calendar__wrapper .fc .fc-toolbar {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.calendar__wrapper thead th {
  padding-bottom: 5px;
}
.calendar__wrapper .fc-button-group {
  margin-left: 0 !important;
}
.calendar__wrapper .fc-header-toolbar {
  padding: 12px 15px;
  margin-bottom: 12px;
}
.calendar__wrapper .fc-col-header-cell a {
  color: #B3B1BE;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  font-size: 0;
}
.calendar__wrapper .fc-col-header-cell a::first-letter {
  font-size: 14px;
}
@media (min-width: 480px) {
  .calendar__wrapper .fc-col-header-cell a::first-letter {
    font-size: 10px;
  }
}
@media (min-width: 480px) {
  .calendar__wrapper .fc-col-header-cell a {
    font-size: 10px;
  }
}
.calendar__wrapper .fc-button {
  box-shadow: none !important;
  transition: color 0.2s ease-out;
  padding: 5px;
}
.calendar__wrapper .fc-button:hover {
  color: #B795DE !important;
}
.calendar__wrapper .fc-today-button {
  background-color: transparent !important;
  border: none !important;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  opacity: 1 !important;
  color: #fff !important;
  transition: color 0.2s ease-out;
}
.calendar__wrapper .fc-today-button:active,
.calendar__wrapper .fc-today-button:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
.calendar__wrapper .fc-today-button:hover {
  color: #B795DE !important;
}
.calendar__wrapper .fc-today-button:disabled {
  color: #7700FF !important;
}
.calendar__wrapper .fc-button-primary {
  background-color: transparent !important;
  border: none !important;
}
.calendar__wrapper .fc-toolbar-title {
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.calendar__wrapper .js-calendar {
  max-height: 100vh;
  width: 100%;
  box-sizing: border-box;
}
.calendar__wrapper .fc {
  height: 100%;
}
.calendar__wrapper .fc-event {
  background-color: #fff;
  color: #111;
  white-space: normal;
  padding: 5px;
}
@media (min-width: 768px) {
  .calendar__wrapper .fc-event {
    padding: 10px;
  }
}
.calendar__wrapper .fc-day {
  cursor: default;
}
.calendar__wrapper .fc-day .time {
  color: #909090;
}
.calendar__wrapper .fc-day:has(.fc-daygrid-event-harness) {
  cursor: pointer;
}
.calendar__wrapper .fc-day-events {
  position: relative;
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness {
  position: absolute;
  top: 0;
  width: calc(100% - 5px);
  border-radius: 15px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .calendar__wrapper .fc-day .fc-daygrid-event-harness {
    width: calc(100% - 20px);
  }
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness .fc-event {
  color: #fff;
  font-family: "Funnel Display";
  font-size: 4px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media (min-width: 768px) {
  .calendar__wrapper .fc-day .fc-daygrid-event-harness .fc-event {
    font-size: 10px;
  }
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness .fc-event small {
  color: #909090;
  font-family: "Funnel Display";
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(2) {
  z-index: 10;
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(2) .fc-event {
  background: #232323;
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(3) {
  top: 0;
  z-index: 10;
  transform: scale(0.95);
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(3) .fc-event {
  background: #393939;
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(2):nth-last-of-type(2) {
  top: 5px;
  z-index: 11;
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(2):nth-last-of-type(2) .fc-event {
  background: #232323;
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(4) {
  top: 0px;
  z-index: 10;
  transform: scale(0.9);
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(4) .fc-event {
  background: #909090;
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(2):nth-last-of-type(3) {
  top: 5px;
  z-index: 11;
  transform: scale(0.95);
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(2):nth-last-of-type(3) .fc-event {
  background: #393939;
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(3):nth-last-of-type(2) {
  top: 11px;
  z-index: 12;
}
.calendar__wrapper .fc-day .fc-daygrid-event-harness:nth-of-type(3):nth-last-of-type(2) .fc-event {
  background: #232323;
}
.calendar__wrapper .fc-day .fc-daygrid-day-top {
  flex-direction: row;
  margin-left: 8px;
  margin-top: 2px;
}
@media (min-width: 768px) {
  .calendar__wrapper .fc-day .fc-daygrid-day-top {
    margin-left: 10px;
    margin-top: 5px;
  }
}
.calendar__wrapper .fc-day .fc-daygrid-day-top a {
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}
@media (min-width: 480px) {
  .calendar__wrapper .fc-day .fc-daygrid-day-top a {
    font-size: 12px;
  }
}
@media (min-width: 1224px) {
  .calendar__wrapper .fc-day .fc-daygrid-day-top a {
    font-size: 16px;
  }
}
.calendar__wrapper .fc-day::before {
  content: "";
  width: calc(100% - 10px);
  transform: translateX(10px);
  height: 2px;
  background-color: #909090;
  display: block;
}
@media (min-width: 1224px) {
  .calendar__wrapper .fc-day::before {
    width: calc(100% - 20px);
  }
}
.calendar__wrapper .fc-day-today {
  background-color: #7700FF !important;
}
.calendar__wrapper .fc-day-today:before {
  content: none;
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness .fc-event {
  color: #181818;
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness .fc-event small {
  color: #393939;
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(2) {
  z-index: 10;
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(2) .fc-event {
  background: #fff;
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(3) {
  top: 0;
  z-index: 10;
  transform: scale(0.95);
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(3) .fc-event {
  background: #B3B1BE;
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(2):nth-last-of-type(2) {
  top: 5px;
  z-index: 11;
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(2):nth-last-of-type(2) .fc-event {
  background: #fff;
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(4) {
  top: 0px;
  z-index: 10;
  transform: scale(0.9);
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(1):nth-last-of-type(4) .fc-event {
  background: #909090;
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(2):nth-last-of-type(3) {
  top: 5px;
  z-index: 11;
  transform: scale(0.95);
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(2):nth-last-of-type(3) .fc-event {
  background: #B3B1BE;
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(3):nth-last-of-type(2) {
  top: 11px;
  z-index: 12;
}
.calendar__wrapper .fc-day-today .fc-daygrid-event-harness:nth-of-type(3):nth-last-of-type(2) .fc-event {
  background: #fff;
}
.calendar__wrapper .fc-day-future:not(.fc-day-other) {
  background-color: #181818 !important;
}
.calendar__wrapper .fc-day-past {
  opacity: 30%;
}
.calendar__wrapper .fc-day-other {
  opacity: 30%;
}
.calendar__wrapper .fc td,
.calendar__wrapper .fc th {
  border: none;
  background: none;
}
.calendar__wrapper .fc-daygrid-day {
  min-width: 150px;
}
.calendar__wrapper .fc-daygrid-day-frame {
  aspect-ratio: 1;
  max-height: 14.2857142857dvh;
}
.calendar__wrapper .fc-daygrid-day-events {
  padding: 0 5px;
  margin-top: 1px;
}
@media (min-width: 768px) {
  .calendar__wrapper .fc-daygrid-day-events {
    padding: 0 10px;
    margin-top: 10px;
  }
}
.calendar__wrapper .event-content {
  flex-direction: column;
  align-items: flex-start !important;
}
.calendar__wrapper .event-content .time {
  display: none;
}
@media (min-width: 768px) {
  .calendar__wrapper .event-content .time {
    display: inline-block;
  }
}
.chat {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  color: #fff;
  background-color: #232323;
  padding-top: 70px;
}
@media (min-width: 768px) {
  .chat {
    padding-top: 0;
  }
}
@media (min-width: 1224px) {
  .chat {
    flex-direction: row;
  }
}
.chat__overview {
  width: 100%;
  min-height: 60px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #18002A;
  align-items: center;
  position: relative;
  padding: 10px;
  border-bottom: 1px solid #232323;
}
@media (min-width: 768px) {
  .chat__overview {
    padding: 10px 20px;
  }
}
@media (min-width: 1224px) {
  .chat__overview {
    border-right: 1px solid #7700FF;
    border-bottom: none;
    min-width: 320px;
    max-width: 320px;
    height: auto;
    padding: 50px 20px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: initial;
  }
}
.chat__overview__head {
  position: relative;
}
@media (min-width: 1224px) {
  .chat__overview__head {
    padding-bottom: 5px;
  }
  .chat__overview__head:before {
    content: "";
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: 65px;
    background-color: #B795DE;
    z-index: 20;
    display: block;
  }
}
.chat__overview__head span {
  display: none;
}
@media (min-width: 600px) {
  .chat__overview__head span {
    display: inline-block;
  }
}
.chat__overview__head__back {
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  gap: 15px;
  cursor: pointer;
  transition: color 0.2s ease-out;
}
@media (min-width: 1224px) {
  .chat__overview__head__back {
    margin-bottom: 30px;
  }
}
.chat__overview__head__back svg {
  border: 1px solid #7700FF;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px;
  transition: background-color 0.2s ease-out;
}
@media (min-width: 1224px) {
  .chat__overview__head__back svg {
    width: 54px;
    height: 54px;
    padding: 15px;
  }
}
.chat__overview__head__back svg path {
  transition: stroke 0.2s ease-out;
}
.chat__overview__head__back:hover {
  color: #7700FF;
}
.chat__overview__head__back:hover svg {
  background-color: #7700FF;
}
.chat__overview__head h2 {
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  display: none;
}
@media (min-width: 1224px) {
  .chat__overview__head h2 {
    display: inline-block;
  }
}
.chat__overview__posts {
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 22;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid #393939;
  border-radius: 15px;
  height: 41px;
  overflow: hidden;
  transition: height 0.2s ease-out;
  top: 9px;
  right: 20px;
  max-width: 80%;
}
@media (min-width: 1224px) {
  .chat__overview__posts {
    border: none;
    background-color: transparent;
    height: auto;
    position: relative;
    top: auto;
    right: auto;
    max-width: none;
  }
}
.chat__overview__posts .button--new-post {
  height: 50px;
  margin-bottom: 5px;
}
@media (min-width: 1224px) {
  .chat__overview__posts .button--new-post {
    display: none;
  }
}
.chat__overview__posts__current {
  cursor: pointer;
  padding: 0 45px 0 15px;
  height: 40px;
  min-width: 285px;
  max-width: 400px;
  flex: 1 0 100%;
  position: relative;
  display: flex;
  align-items: center;
  max-height: 40px;
  background-color: #232323;
  border-radius: 15px 15px 0 0;
}
@media (min-width: 1224px) {
  .chat__overview__posts__current {
    display: none;
    max-width: none;
  }
}
.chat__overview__posts__current::after {
  content: "";
  height: 1px;
  background-color: #909090;
  width: calc(100% - 30px);
  position: absolute;
  bottom: -1px;
  z-index: 25;
}
.chat__overview__posts__current__arrow {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  transition: transform 0.2s ease-out;
}
.chat__overview__posts__current .chat__overview__posts__item {
  pointer-events: none;
  background-color: transparent;
  padding: 0;
  height: auto;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}
.chat__overview__posts__wrapper {
  position: relative;
  background-color: #232323;
  z-index: 23;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
}
@media (min-width: 1224px) {
  .chat__overview__posts__wrapper {
    background-color: transparent;
    padding: 0;
  }
}
@media (hover: hover) {
  .chat__overview__posts__wrapper {
    padding-right: 10px;
  }
}
.chat__overview__posts.open {
  height: 60dvh;
}
.chat__overview__posts.open .chat__overview__posts__current__arrow {
  transform: translateY(-50%) rotate(180deg);
}
.chat__overview__posts__item {
  width: 100%;
  height: 40px;
  padding: 10px 20px 10px 10px;
  background-color: #393939;
  border-radius: 15px;
  border: 3px solid transparent;
  transition:
    box-shadow 0.2s ease-out,
    border-color 0.2s ease-out,
    color 0.2s ease-out;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}
@media (min-width: 1224px) {
  .chat__overview__posts__item {
    font-size: 16px;
    padding: 10px 40px 10px 20px;
    border-radius: 30px;
    height: 55px;
    background-color: #232323;
  }
}
.chat__overview__posts__item span {
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.chat__overview__posts__item svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
}
.chat__overview__posts__item svg path {
  stroke: #fff;
  transition: stroke 0.2s ease-out;
}
.chat__overview__posts__item:hover {
  border-color: #7700FF;
  color: #7700FF;
}
.chat__overview__posts__item:hover path {
  stroke: #7700FF;
}
.chat__overview__posts__item:has(.chat__delete:hover) {
  color: #fff;
}
.chat__overview__posts__item:has(.chat__delete:hover) svg path {
  stroke: #fff;
}
.chat__overview__posts__item .chat__delete {
  right: 10px;
  transition: fill 0.2s ease-out;
  width: 30px;
  height: 30px;
  position: absolute;
  cursor: pointer;
  fill: #dc5755 !important;
}
.chat__overview__posts__item .chat__delete path {
  stroke: #232323 !important;
}
.chat__overview__posts__item .chat__delete:hover {
  fill: #C00F0C !important;
}
.chat__overview__posts__item .chat__delete:hover path {
  stroke: #232323 !important;
}
.chat__overview__posts__item--active {
  background-color: #7700FF !important;
  font-weight: 700;
  box-shadow: none !important;
}
@media (min-width: 1224px) {
  .chat__overview__posts__item--active {
    cursor: default;
  }
}
.chat__overview__posts__item--active .chat__delete path {
  stroke: #7700FF !important;
}
.chat__overview__posts__item--active:hover {
  color: #fff !important;
}
.chat__overview__posts__item--active:hover svg path {
  stroke: #fff !important;
}
.chat__overview__posts__item--active:hover .chat__delete path {
  stroke: #7700FF !important;
}
.chat__suggestions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  transition: opacity 0.2s ease-out;
  overflow: auto;
  height: 90%;
}
@media (min-width: 1224px) {
  .chat__suggestions {
    height: -moz-fit-content;
    height: fit-content;
  }
}
.chat__suggestions.hidden {
  opacity: 0;
  pointer-events: none;
}
.chat__suggestion {
  width: 100%;
  border-radius: 15px;
  border: 2px solid #393939;
  background-color: #111;
  padding: 20px;
  display: inline-block;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: #fff;
  cursor: pointer;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .chat__suggestion {
    font-size: 18px;
  }
}
@media (min-width: 1224px) {
  .chat__suggestion {
    width: calc(50% - 17px);
    margin-bottom: 30px;
  }
}
@media (min-width: 1366px) {
  .chat__suggestion {
    font-size: 22px;
    padding: 50px;
  }
}
@media (min-width: 1224px) {
  .chat__suggestion:nth-child(odd) {
    margin-right: 30px;
    width: calc(50% - 17px);
    margin-bottom: 30px;
  }
}
.chat__suggestion:hover {
  border-color: #7700FF;
}
.chat__suggestion div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.chat__suggestion div span {
  color: #909090;
}
.chat__suggestion svg path {
  stroke: #909090;
}
.chat__suggestion--highlight {
  background-color: #7700FF;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}
@media (min-width: 768px) {
  .chat__suggestion--highlight {
    font-size: 24px;
  }
}
@media (min-width: 1366px) {
  .chat__suggestion--highlight {
    font-size: 28px;
  }
}
.chat__suggestion--highlight svg path {
  stroke: #E3E3E3;
  fill: #E3E3E3;
}
.chat__suggestion--highlight div span {
  color: #E3E3E3;
}
.chat__wrapper {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background-color: #111;
  padding: 20px 15px 20px 20px;
}
@media (min-width: 1224px) {
  .chat__wrapper {
    padding: 37px 50px 50px;
  }
}
.chat__wrapper__head {
  color: #fff;
  position: relative;
  border-bottom: 2px solid #B795DE;
  padding-bottom: 20px;
  display: none;
}
@media (min-width: 768px) {
  .chat__wrapper__head {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
  }
}
.chat__wrapper__head img {
  display: none;
}
@media (min-width: 1224px) {
  .chat__wrapper__head img {
    display: block;
    width: 80px;
    height: 80px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 30px;
  }
}
.chat__wrapper__head h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 5px;
}
.chat__wrapper__head p {
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  padding-right: 180px;
  display: inline-block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat__wrapper__head button {
  position: absolute;
  top: 15px;
  right: 0;
}
.chat__wrapper__inner {
  flex: 1;
  padding-bottom: 30px;
  overflow-y: hidden;
  position: relative;
}
.chat__messages {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.chat__messages__wrapper {
  flex: 1;
  padding: 20px 5px 0 0;
  overflow-y: auto;
  height: 100%;
}
@media (min-width: 1224px) {
  .chat__messages__wrapper {
    padding: 30px;
  }
}
.chat__messages__wrapper::-webkit-scrollbar {
  width: 6px;
}
.chat__messages__wrapper::-webkit-scrollbar-track {
  background: #909090;
  border-radius: 4px;
  border: 2px solid #111;
  width: 4px;
}
.chat__messages__wrapper::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 4px;
  width: 6px;
}
.chat__messages__wrapper::-webkit-scrollbar-thumb:hover {
  background: #e0e0e0;
}
.chat__input {
  display: flex;
  padding: 20px;
  background-color: #232323;
  width: 100%;
  border: 2px solid #B795DE;
  border-radius: 30px;
  transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
  flex-direction: column;
  position: relative;
}
.chat__input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NyIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDQ3IDUwIiBmaWxsPSJub25lIj4KICAgIDxwYXRoIGQ9Ik0xNy4yMjAxIDE0LjYwNkMxNi40Njg5IDEzLjE4NDggMTYuMDkzMyAxMS41MDk4IDE2LjA5MzMgOS41ODEwN0MxNi4wOTMzIDcuNjUyMzMgMTYuNDY4OSA1Ljk3NzM3IDE3LjIyMDEgNC41NTYxOEMxNy45NzEzIDMuMTM1IDE5LjAzNzIgMi4wMzg2NyAyMC40MTc4IDEuMjY3MTdDMjEuNzk4NCAwLjQ3NTM2OCAyMy40MjI2IDAuMDc5NDY3OCAyNS4yOTA0IDAuMDc5NDY3OEMyNi4yODE5IDAuMDc5NDY3OCAyNy4xOTkzIDAuMTg5NTExIDI4LjA0MjcgMC40MDk1OTZDMjkuNjM0NyAwLjgyNTAwNiAyOS43NzQyIDIuNzg1NTggMjguNTc5NCAzLjkxNjY1TDE3LjQ2NTUgMTUuMDMwNkMxNy4zODA1IDE0Ljg5MjMgMTcuMjk4NyAxNC43NTA4IDE3LjIyMDEgMTQuNjA2WiIgZmlsbD0iI0JBNjlGRiIvPgogICAgPHBhdGggZD0iTTI5LjE3OTIgMTQuMjg0MUMzMC4wMzQ0IDEyLjkyMyAzMS4yOTcyIDExLjc2MDIgMzIuOTY3NSAxMC43OTU4QzM0LjYzNzggOS44MzE0NyAzNi4yNzYyIDkuMzE5MjcgMzcuODgyNiA5LjI1OTIzQzM5LjQ4OSA5LjE5OTE5IDQwLjk3MTQgOS41NzQxMSA0Mi4zMjk4IDEwLjM4NEM0My43MDU4IDExLjE4MzcgNDQuODYwOCAxMi4zOTIzIDQ1Ljc5NDcgMTQuMDA5OUM0Ni4yOTA0IDE0Ljg2ODYgNDYuNjUzOCAxNS43MTgxIDQ2Ljg4NDkgMTYuNTU4NkM0Ny4zMjEyIDE4LjE0NSA0NS42OTMgMTkuMjQ2MSA0NC4xMTYxIDE4Ljc3NjlMMjguOTM0MSAxNC43MDg5QzI5LjAxMTQgMTQuNTY2MiAyOS4wOTMxIDE0LjQyNDYgMjkuMTc5MiAxNC4yODQxWiIgZmlsbD0iI0JBNjlGRiIvPgogICAgPHBhdGggZD0iTTM1LjQzNzUgMjQuNDgwMUMzNy4wNDM5IDI0LjU0MDEgMzguNjgyMiAyNS4wNTIzIDQwLjM1MjYgMjYuMDE2N0M0Mi4wMjI5IDI2Ljk4MTEgNDMuMjg1NyAyOC4xNDM4IDQ0LjE0MDkgMjkuNTA1QzQ0Ljk5NiAzMC44NjYxIDQ1LjQxMjUgMzIuMzM3NCA0NS4zOTA0IDMzLjkxODdDNDUuMzg1OCAzNS41MTAyIDQ0LjkxNjYgMzcuMTE0OCA0My45ODI3IDM4LjczMjRDNDMuNDg2OSAzOS41OTEgNDIuOTMyOSA0MC4zMzA1IDQyLjMyMDYgNDAuOTUwOUM0MS4xNjQ5IDQyLjEyMTkgMzkuMzk3MiA0MS4yNjI0IDM5LjAxNTEgMzkuNjYyMkwzNC45NDcxIDI0LjQ4MDJDMzUuMTA5MyAyNC40NzU4IDM1LjI3MjggMjQuNDc1NyAzNS40Mzc1IDI0LjQ4MDFaIiBmaWxsPSIjQkE2OUZGIi8+CiAgICA8cGF0aCBkPSJNMjkuNzM2NyAzNC45OTc5QzMwLjQ4NzkgMzYuNDE5IDMwLjg2MzUgMzguMDk0IDMwLjg2MzUgNDAuMDIyOEMzMC44NjM1IDQxLjk1MTUgMzAuNDg3OSA0My42MjY1IDI5LjczNjcgNDUuMDQ3NkMyOC45ODU1IDQ2LjQ2ODggMjcuOTE5NiA0Ny41NjUyIDI2LjUzOSA0OC4zMzY3QzI1LjE1ODQgNDkuMTI4NSAyMy41MzQyIDQ5LjUyNDQgMjEuNjY2NCA0OS41MjQ0QzIwLjY3NDkgNDkuNTI0NCAxOS43NTc1IDQ5LjQxNDMgMTguOTE0IDQ5LjE5NDJDMTcuMzIyMSA0OC43Nzg4IDE3LjE4MjYgNDYuODE4MiAxOC4zNzc0IDQ1LjY4NzJMMjkuNDkxMyAzNC41NzMyQzI5LjU3NjMgMzQuNzExNSAyOS42NTgxIDM0Ljg1MzEgMjkuNzM2NyAzNC45OTc5WiIgZmlsbD0iI0JBNjlGRiIvPgogICAgPHBhdGggZD0iTTE3Ljc3NzYgMzUuMzE5N0MxNi45MjI0IDM2LjY4MDkgMTUuNjU5NiAzNy44NDM2IDEzLjk4OTMgMzguODA4QzEyLjMxOSAzOS43NzI0IDEwLjY4MDYgNDAuMjg0NiA5LjA3NDIyIDQwLjM0NDZDNy40Njc4NCA0MC40MDQ2IDUuOTg1NDQgNDAuMDI5NyA0LjYyNzAyIDM5LjIxOTlDMy4yNTEwMSAzOC40MjAxIDIuMDk2MDUgMzcuMjExNSAxLjE2MjEzIDM1LjU5MzlDMC42NjYzOSAzNC43MzUyIDAuMzAyOTY2IDMzLjg4NTcgMC4wNzE4NTU2IDMzLjA0NTJDLTAuMzY0MzYzIDMxLjQ1ODkgMS4yNjM3OCAzMC4zNTc3IDIuODQwNzIgMzAuODI2OUwxOC4wMjI3IDM0Ljg5NDlDMTcuOTQ1NCAzNS4wMzc2IDE3Ljg2MzcgMzUuMTc5MiAxNy43Nzc2IDM1LjMxOTdaIiBmaWxsPSIjQkE2OUZGIi8+CiAgICA8cGF0aCBkPSJNMTEuNTE5MyAyNS4xMjM4QzkuOTEyOTMgMjUuMDYzNyA4LjI3NDU3IDI0LjU1MTUgNi42MDQyMyAyMy41ODcxQzQuOTMzODkgMjIuNjIyOCAzLjY3MTEzIDIxLjQ2IDIuODE1OTUgMjAuMDk4OUMxLjk2MDc3IDE4LjczNzcgMS41NDQyNSAxNy4yNjY1IDEuNTY2NCAxNS42ODUxQzEuNTcwOTcgMTQuMDkzNiAyLjA0MDIyIDEyLjQ4OSAyLjk3NDEzIDEwLjg3MTVDMy40Njk4NyAxMC4wMTI4IDQuMDIzOSA5LjI3MzI5IDQuNjM2MjEgOC42NTI5MUM1Ljc5MTk0IDcuNDgxOTUgNy41NTk2IDguMzQxNDEgNy45NDE3NCA5Ljk0MTY3TDEyLjAwOTcgMjUuMTIzNkMxMS44NDc1IDI1LjEyOCAxMS42ODQgMjUuMTI4MSAxMS41MTkzIDI1LjEyMzhaIiBmaWxsPSIjQkE2OUZGIi8+Cjwvc3ZnPgo=);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: inputRotate 4s linear infinite;
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
.chat__input.loading {
  pointer-events: none;
  border: 2px solid #B795DE !important;
  box-shadow: none !important;
}
.chat__input.loading::before {
  opacity: 1;
}
.chat__input.loading .chat__input__textarea,
.chat__input.loading .chat__input__meta {
  opacity: 0;
}
.chat__input:has(.chat__input__mic.recording) {
  border-color: #7700FF;
}
.chat__input__submit,
.chat__input__mic {
  border-radius: 50%;
  width: 54px;
  height: 54px;
  background-color: #E3E3E3;
  border: 2px solid #909090;
  transition:
    border-color 0.2s ease-out,
    box-shadow 0.2s ease-out,
    background-color 0.2s ease-out;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.chat__input__submit svg,
.chat__input__mic svg {
  pointer-events: none;
}
.chat__input__submit svg path,
.chat__input__mic svg path {
  stroke: #B3B1BE;
}
.chat__input__submit:hover,
.chat__input__mic:hover {
  border-color: #7700FF;
}
.chat__input:has(.chat__input__textarea:focus) {
  border-color: #7700FF;
}
.chat__input:has(.chat__input__textarea:focus) .chat__input__submit {
  border-color: #7700FF;
}
.chat__input__mic {
  background-color: #7700FF !important;
  border-color: #7700FF;
  pointer-events: auto;
  position: relative;
}
.chat__input__mic svg {
  transition: opacity 0.2s ease-out;
}
.chat__input__mic svg path {
  stroke: #fff;
}
.chat__input__mic::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NyIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDQ3IDUwIiBmaWxsPSJub25lIj4KICAgIDxwYXRoIGQ9Ik0xNy4yMjAxIDE0LjYwNkMxNi40Njg5IDEzLjE4NDggMTYuMDkzMyAxMS41MDk4IDE2LjA5MzMgOS41ODEwN0MxNi4wOTMzIDcuNjUyMzMgMTYuNDY4OSA1Ljk3NzM3IDE3LjIyMDEgNC41NTYxOEMxNy45NzEzIDMuMTM1IDE5LjAzNzIgMi4wMzg2NyAyMC40MTc4IDEuMjY3MTdDMjEuNzk4NCAwLjQ3NTM2OCAyMy40MjI2IDAuMDc5NDY3OCAyNS4yOTA0IDAuMDc5NDY3OEMyNi4yODE5IDAuMDc5NDY3OCAyNy4xOTkzIDAuMTg5NTExIDI4LjA0MjcgMC40MDk1OTZDMjkuNjM0NyAwLjgyNTAwNiAyOS43NzQyIDIuNzg1NTggMjguNTc5NCAzLjkxNjY1TDE3LjQ2NTUgMTUuMDMwNkMxNy4zODA1IDE0Ljg5MjMgMTcuMjk4NyAxNC43NTA4IDE3LjIyMDEgMTQuNjA2WiIgZmlsbD0iI0JBNjlGRiIvPgogICAgPHBhdGggZD0iTTI5LjE3OTIgMTQuMjg0MUMzMC4wMzQ0IDEyLjkyMyAzMS4yOTcyIDExLjc2MDIgMzIuOTY3NSAxMC43OTU4QzM0LjYzNzggOS44MzE0NyAzNi4yNzYyIDkuMzE5MjcgMzcuODgyNiA5LjI1OTIzQzM5LjQ4OSA5LjE5OTE5IDQwLjk3MTQgOS41NzQxMSA0Mi4zMjk4IDEwLjM4NEM0My43MDU4IDExLjE4MzcgNDQuODYwOCAxMi4zOTIzIDQ1Ljc5NDcgMTQuMDA5OUM0Ni4yOTA0IDE0Ljg2ODYgNDYuNjUzOCAxNS43MTgxIDQ2Ljg4NDkgMTYuNTU4NkM0Ny4zMjEyIDE4LjE0NSA0NS42OTMgMTkuMjQ2MSA0NC4xMTYxIDE4Ljc3NjlMMjguOTM0MSAxNC43MDg5QzI5LjAxMTQgMTQuNTY2MiAyOS4wOTMxIDE0LjQyNDYgMjkuMTc5MiAxNC4yODQxWiIgZmlsbD0iI0JBNjlGRiIvPgogICAgPHBhdGggZD0iTTM1LjQzNzUgMjQuNDgwMUMzNy4wNDM5IDI0LjU0MDEgMzguNjgyMiAyNS4wNTIzIDQwLjM1MjYgMjYuMDE2N0M0Mi4wMjI5IDI2Ljk4MTEgNDMuMjg1NyAyOC4xNDM4IDQ0LjE0MDkgMjkuNTA1QzQ0Ljk5NiAzMC44NjYxIDQ1LjQxMjUgMzIuMzM3NCA0NS4zOTA0IDMzLjkxODdDNDUuMzg1OCAzNS41MTAyIDQ0LjkxNjYgMzcuMTE0OCA0My45ODI3IDM4LjczMjRDNDMuNDg2OSAzOS41OTEgNDIuOTMyOSA0MC4zMzA1IDQyLjMyMDYgNDAuOTUwOUM0MS4xNjQ5IDQyLjEyMTkgMzkuMzk3MiA0MS4yNjI0IDM5LjAxNTEgMzkuNjYyMkwzNC45NDcxIDI0LjQ4MDJDMzUuMTA5MyAyNC40NzU4IDM1LjI3MjggMjQuNDc1NyAzNS40Mzc1IDI0LjQ4MDFaIiBmaWxsPSIjQkE2OUZGIi8+CiAgICA8cGF0aCBkPSJNMjkuNzM2NyAzNC45OTc5QzMwLjQ4NzkgMzYuNDE5IDMwLjg2MzUgMzguMDk0IDMwLjg2MzUgNDAuMDIyOEMzMC44NjM1IDQxLjk1MTUgMzAuNDg3OSA0My42MjY1IDI5LjczNjcgNDUuMDQ3NkMyOC45ODU1IDQ2LjQ2ODggMjcuOTE5NiA0Ny41NjUyIDI2LjUzOSA0OC4zMzY3QzI1LjE1ODQgNDkuMTI4NSAyMy41MzQyIDQ5LjUyNDQgMjEuNjY2NCA0OS41MjQ0QzIwLjY3NDkgNDkuNTI0NCAxOS43NTc1IDQ5LjQxNDMgMTguOTE0IDQ5LjE5NDJDMTcuMzIyMSA0OC43Nzg4IDE3LjE4MjYgNDYuODE4MiAxOC4zNzc0IDQ1LjY4NzJMMjkuNDkxMyAzNC41NzMyQzI5LjU3NjMgMzQuNzExNSAyOS42NTgxIDM0Ljg1MzEgMjkuNzM2NyAzNC45OTc5WiIgZmlsbD0iI0JBNjlGRiIvPgogICAgPHBhdGggZD0iTTE3Ljc3NzYgMzUuMzE5N0MxNi45MjI0IDM2LjY4MDkgMTUuNjU5NiAzNy44NDM2IDEzLjk4OTMgMzguODA4QzEyLjMxOSAzOS43NzI0IDEwLjY4MDYgNDAuMjg0NiA5LjA3NDIyIDQwLjM0NDZDNy40Njc4NCA0MC40MDQ2IDUuOTg1NDQgNDAuMDI5NyA0LjYyNzAyIDM5LjIxOTlDMy4yNTEwMSAzOC40MjAxIDIuMDk2MDUgMzcuMjExNSAxLjE2MjEzIDM1LjU5MzlDMC42NjYzOSAzNC43MzUyIDAuMzAyOTY2IDMzLjg4NTcgMC4wNzE4NTU2IDMzLjA0NTJDLTAuMzY0MzYzIDMxLjQ1ODkgMS4yNjM3OCAzMC4zNTc3IDIuODQwNzIgMzAuODI2OUwxOC4wMjI3IDM0Ljg5NDlDMTcuOTQ1NCAzNS4wMzc2IDE3Ljg2MzcgMzUuMTc5MiAxNy43Nzc2IDM1LjMxOTdaIiBmaWxsPSIjQkE2OUZGIi8+CiAgICA8cGF0aCBkPSJNMTEuNTE5MyAyNS4xMjM4QzkuOTEyOTMgMjUuMDYzNyA4LjI3NDU3IDI0LjU1MTUgNi42MDQyMyAyMy41ODcxQzQuOTMzODkgMjIuNjIyOCAzLjY3MTEzIDIxLjQ2IDIuODE1OTUgMjAuMDk4OUMxLjk2MDc3IDE4LjczNzcgMS41NDQyNSAxNy4yNjY1IDEuNTY2NCAxNS42ODUxQzEuNTcwOTcgMTQuMDkzNiAyLjA0MDIyIDEyLjQ4OSAyLjk3NDEzIDEwLjg3MTVDMy40Njk4NyAxMC4wMTI4IDQuMDIzOSA5LjI3MzI5IDQuNjM2MjEgOC42NTI5MUM1Ljc5MTk0IDcuNDgxOTUgNy41NTk2IDguMzQxNDEgNy45NDE3NCA5Ljk0MTY3TDEyLjAwOTcgMjUuMTIzNkMxMS44NDc1IDI1LjEyOCAxMS42ODQgMjUuMTI4MSAxMS41MTkzIDI1LjEyMzhaIiBmaWxsPSIjQkE2OUZGIi8+Cjwvc3ZnPgo=);
  filter: grayscale(1) brightness(300%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: inputRotate 4s linear infinite;
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
.chat__input__mic.recording {
  background:
    linear-gradient(
      270deg,
      #7700ff,
      #9b44ff,
      #bb7fff,
      #d2aaff,
      #bb7fff,
      #9b44ff,
      #7700ff);
  background-size: 400% 400%;
  animation: backgroundGradient 20s linear infinite;
}
@keyframes backgroundGradient {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: -300% 0%;
  }
}
.chat__input__mic.recording svg {
  opacity: 0;
}
.chat__input__mic.recording::before {
  opacity: 1;
}
.chat__input__textarea {
  padding-right: 15px;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  overflow-y: auto;
  width: 100%;
  background-color: transparent;
  resize: none;
  outline: none !important;
  border: none !important;
  transition: opacity 0.2s ease-out;
}
.chat__input__textarea::-moz-placeholder {
  color: #B3B1BE;
}
.chat__input__textarea::placeholder {
  color: #B3B1BE;
}
.chat__input__meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  transition: opacity 0.2s ease-out;
}
.chat__input__meta__left {
  display: flex;
  filter: brightness(40%);
  cursor: not-allowed;
  flex-direction: row;
  gap: 20px;
  align-items: flex-end;
}
.chat__input__meta__left button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 0;
  cursor: not-allowed;
}
.chat__input__meta__left span {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: #fff;
}
.chat__input__meta__right {
  display: flex;
  flex-direction: row-reverse;
  gap: 15px;
}
.chat__input.inputted .chat__input__submit {
  background-color: #7700FF;
  border-color: #7700FF;
  pointer-events: auto;
}
.chat__input.inputted .chat__input__submit svg path {
  stroke: #fff;
}
.chat__input__actions {
  padding: 0 24px;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  display: flex;
  flex-direction: row;
}
.chat__input__actions__buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  gap: 12px;
  width: 100%;
}
.chat__input__actions__buttons .button {
  margin-bottom: 0;
}
.chat .message {
  max-width: 100%;
  padding: 10px 15px;
  line-height: 1.4;
  font-size: 14px;
  font-weight: 500;
}
@media (min-width: 768px) {
  .chat .message {
    max-width: min(70%, 900px);
    font-size: 16px;
  }
}
.chat .message.user {
  background: #7700FF;
  color: #fff;
  border-radius: 15px 0 15px 15px;
  align-self: flex-end;
  animation: messageFadeIn 0.3s ease-in;
}
.chat .message.response {
  background: #B3B1BE;
  color: #18002A;
  border-radius: 0 30px 30px 30px;
  align-self: flex-start;
  animation: messageFadeIn 0.3s ease-in;
}
.chat .message.response.generated-image {
  background:
    linear-gradient(
      270deg,
      #7700ff,
      #9b44ff,
      #bb7fff,
      #d2aaff,
      #bb7fff,
      #9b44ff,
      #7700ff);
  background-size: 400% 400%;
  animation: backgroundGradient 20s linear infinite;
}
@keyframes backgroundGradient {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: -300% 0%;
  }
}
.chat .message.response.generated-image {
  max-width: 50vh;
}
.chat .message.response.generated-image img {
  width: 100%;
  border-radius: 0 20px 20px 20px;
}
.chat .message.image-loading {
  position: relative;
  width: 100%;
  max-width: min(70%, 900px);
  height: 80px;
  border-radius: 0 15px 15px 15px;
  overflow: hidden;
  background:
    linear-gradient(
      270deg,
      #7700ff,
      #9b44ff,
      #bb7fff,
      #d2aaff,
      #bb7fff,
      #9b44ff,
      #7700ff);
  background-size: 400% 100%;
  background:
    linear-gradient(
      270deg,
      #7700ff,
      #9b44ff,
      #bb7fff,
      #d2aaff,
      #bb7fff,
      #9b44ff,
      #7700ff);
  background-size: 400% 400%;
  animation: backgroundGradient 40s linear infinite;
}
@keyframes backgroundGradient {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: -300% 0%;
  }
}
.chat .message.image-loading::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: transparent;
  background:
    linear-gradient(
      90deg,
      transparent 40%,
      #EBD4FF 49%,
      #EBD4FF 51%,
      transparent 60%);
  animation: skeletonShine 1s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
  background-size: inherit;
}
.chat__actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out, height 0.2s ease-out;
  position: relative;
  margin-top: 25px;
  height: 0;
}
.chat__actions.active {
  opacity: 1;
  pointer-events: auto;
  height: 60px;
}
.chat__actions__items {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
  display: flex;
  flex-direction: row;
  gap: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.chat__actions__items button {
  transition: all 0.2s ease-out;
  margin: 0;
}
.chat__actions__items__wrapper {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.chat__actions__items--text [data-action=overwriteText] {
  display: none;
}
.chat__actions__items--text.showEdit [data-action=overwriteText] {
  display: inline-block;
}
.chat__actions__items--text.showEdit [data-action=saveText] {
  display: none;
}
.chat__actions__items--image .chat__actions__items__wrapper--edit {
  display: none;
}
.chat__actions__items--image.showEdit .chat__actions__items__wrapper--generate {
  display: none;
}
.chat__actions__items--image.showEdit .chat__actions__items__wrapper--edit {
  display: flex;
}
.chat__actions__items.active {
  opacity: 1;
  pointer-events: auto;
}
@keyframes skeletonShine {
  0% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: 0;
  }
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes messageFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes inputRotate {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
.image-uploading {
  display: flex;
  width: 100%;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
@media (min-width: 768px) {
  .image-uploading {
    gap: 30px;
  }
}
.dropzone {
  border: 2px dashed #909090;
  border-radius: 15px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease;
  color: #909090;
  width: 100%;
  height: 142px;
  min-width: 120px;
  flex: 1 1;
}
.dropzone__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}
.dropzone p {
  margin: 0;
}
.dropzone.dragover,
.dropzone:hover {
  border-color: #a580ff;
  background-color: rgba(165, 128, 255, 0.08);
  color: #fff;
}
.preview-container {
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex-wrap: wrap;
}
@media (min-width: 480px) {
  .preview-container {
    gap: 15px;
  }
}
@media (min-width: 768px) {
  .preview-container {
    flex-wrap: nowrap;
    gap: 30px;
  }
}
.preview-container:empty {
  display: none;
}
.preview-container .preview-item {
  position: relative;
  transition: 0.2s;
  aspect-ratio: 1;
  width: clamp(72px, 11.8vw, 118px);
  height: clamp(72px, 11.8vw, 118px);
}
.preview-container .preview-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
}
@media (min-width: 768px) {
  .preview-container .preview-item img {
    border-radius: 15px;
  }
}
.preview-container .preview-item__remove {
  content: "\2715";
  width: 28px;
  height: 28px;
  cursor: pointer;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #393939;
  color: white;
  border: 1px solid #909090;
  padding: 0 5px;
  top: -8px;
  right: -8px;
  transition: 0.2s;
  border-radius: 50%;
}
.preview-container .preview-item__remove:hover {
  background: #dc5755;
}
input {
  color: #fff;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(5px);
  padding: 5px 0 15px;
}
@media (min-width: 768px) {
  input {
    padding: 10px 0 15px;
    font-size: 16px;
  }
}
input:disabled {
  pointer-events: none;
  opacity: 0.5;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #111 inset !important;
  -webkit-text-fill-color: #fff;
}
.input-container:has(input:focus) {
  outline: 3px solid #7700FF;
  border-color: #7700FF;
}
.input-container {
  border: 1px solid #B795DE;
  transition: outline 0.2s ease-out, border-color 0.2s ease-out;
  position: relative;
  margin-bottom: 20px;
  padding: 0 20px;
  border-radius: 50px;
  background: #111;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  outline: 0;
}
@media (min-width: 768px) {
  .input-container {
    height: 60px;
  }
}
.input-container + .input-container {
  margin-top: 10px;
}
.input-container--error {
  border-color: #C00F0C;
  outline: 3px solid #C00F0C;
}
.input-container--error .input-container__errorMessage {
  opacity: 1;
}
.input-container__errorMessage {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  bottom: -20px;
  transition: opacity 0.2s ease-out;
  color: #C00F0C;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  left: 0;
  padding-left: 20px;
}
.input-container__errorMessage::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzcwMF83NTY3KSI+CjxwYXRoIGQ9Ik04LjUgNkw1LjUgOU01LjUgNkw4LjUgOSIgc3Ryb2tlPSIjQzAwRjBDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxyZWN0IHg9IjEiIHk9IjEuNSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiByeD0iNiIgc3Ryb2tlPSIjQzAwRjBDIiBzdHJva2Utd2lkdGg9IjIiLz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNzAwXzc1NjciPgo8cmVjdCB5PSIwLjUiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgcng9IjciIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}
.input-container input {
  width: 100%;
  border: none;
  outline: none;
}
.input-container label {
  position: absolute;
  top: 17px;
  left: 20px;
  font-size: 16px;
  pointer-events: none;
  transition: all 0.2s ease;
  color: #B3B1BE;
  font-weight: 400;
  line-height: 1;
}
@media (min-width: 768px) {
  .input-container label {
    top: 22px;
    font-size: 14px;
  }
}
.input-container:has(.settings__textarea) {
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 30px;
}
.input-container:has(.settings__textarea) .settings__textarea {
  padding-right: 15px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  font-family: "Funnel Display", sans-serif;
  font-style: normal;
  line-height: normal;
  overflow-y: auto;
  width: 100%;
  background-color: transparent;
  resize: vertical;
  outline: none !important;
  border: none !important;
  transition: opacity 0.2s ease-out;
}
@media (min-width: 1224px) {
  .input-container:has(.settings__textarea) .settings__textarea {
    font-size: 16px;
  }
}
.input-container:has(.settings__textarea) .settings__textarea::-moz-placeholder {
  color: #B3B1BE !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: "Funnel Display", sans-serif !important;
}
.input-container:has(.settings__textarea) .settings__textarea::placeholder {
  color: #B3B1BE !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: "Funnel Display", sans-serif !important;
}
.input-container input:not(:-moz-placeholder) + label {
  top: 8px;
  font-size: 8px;
  font-weight: 400;
  line-height: 1;
}
.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
  top: 8px;
  font-size: 8px;
  font-weight: 400;
  line-height: 1;
}
@media (min-width: 768px) {
  .input-container input:not(:-moz-placeholder) + label {
    top: 10px;
    font-size: 10px;
  }
  .input-container input:focus + label,
  .input-container input:not(:placeholder-shown) + label {
    top: 10px;
    font-size: 10px;
  }
}
input[type=date] {
  text-transform: uppercase;
  transform: translateY(10px);
}
input[type=date]::-webkit-calendar-picker-indicator {
  background-color: #B795DE;
  color: white;
  border-radius: 50%;
  padding: 4px;
  cursor: pointer;
  transform: translateY(-4px);
}
@media (min-width: 768px) {
  input[type=date]::-webkit-calendar-picker-indicator {
    transform: translateY(-3px);
  }
}
input[type=time] {
  text-transform: uppercase;
  transform: translateY(10px);
}
input[type=time]::-webkit-calendar-picker-indicator {
  background-color: #B795DE;
  color: white;
  border-radius: 50%;
  padding: 4px;
  cursor: pointer;
  transform: translateY(-4px);
}
@media (min-width: 768px) {
  input[type=time]::-webkit-calendar-picker-indicator {
    transform: translateY(-3px);
  }
}
html,
body {
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
html:has(.login),
body:has(.login) {
  overflow-y: auto;
}
body::-moz-selection {
  background: #B795DE;
}
body::selection {
  background: #B795DE;
}
* {
  box-sizing: border-box;
}
*::-webkit-scrollbar {
  width: 6px;
}
*::-webkit-scrollbar-track {
  background: #909090;
  border-radius: 4px;
  border: 2px solid #111;
  width: 4px;
}
*::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 4px;
  width: 6px;
  cursor: grab;
}
*::-webkit-scrollbar-thumb:active {
  cursor: grabbing;
}
*::-webkit-scrollbar-thumb:hover {
  background: #e0e0e0;
}
main {
  transition: padding-left 0.2s ease-out;
  outline: none !important;
}
@media (min-width: 768px) {
  main {
    padding-left: 60px;
  }
}
.modal {
  position: fixed;
  z-index: 1550;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border: 3px solid #7700FF;
  background-color: #111;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.1s linear;
  border-radius: 15px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(100% - 40px, 900px);
  align-items: center;
  gap: 15px;
  max-height: 90dvh;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .modal {
    padding: 30px;
    gap: 30px;
  }
}
.modal.active {
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  opacity: 1;
}
.modal__title {
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  margin: 0;
}
@media (min-width: 1224px) {
  .modal__title {
    font-size: 35px;
  }
}
.modal__subtitle {
  color: #E3E3E3;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 !important;
}
@media (min-width: 1224px) {
  .modal__subtitle {
    font-size: 18px;
  }
}
.modal__inputRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 15px;
}
@media (min-width: 1224px) {
  .modal__inputRow {
    gap: 20px;
  }
}
.modal .input-container {
  margin: 0 !important;
  cursor: pointer;
}
.modal .input-container input {
  cursor: pointer;
}
.modal .input-container:has(#edit-modal-input-time) .input-container__errorMessage {
  display: none !important;
}
.modal .input-container:has(#edit-modal-input-date) {
  flex: 1 1 80%;
  width: auto !important;
}
.modal .input-container:has(#edit-modal-input-time) {
  flex: 1 1 20%;
  width: auto !important;
}
.modal .input-container:has(.modal__textarea) {
  height: auto;
  min-height: 70px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 30px;
}
.modal .input-container:has(.modal__textarea:focus) {
  border-color: #7700FF;
  outline: 3px solid #7700FF;
}
.modal .input-container:has(.modal__textarea:focus) .chat__input__submit {
  border-color: #7700FF;
}
.modal #edit-modal-input-date {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
@media (min-width: 1224px) {
  .modal #edit-modal-input-date {
    font-size: 16px;
  }
}
.modal #edit-modal-input-time {
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}
@media (min-width: 1224px) {
  .modal #edit-modal-input-time {
    font-size: 18px;
  }
}
.modal input::-moz-placeholder {
  color: #B3B1BE !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: "Funnel Display", sans-serif !important;
}
.modal input::placeholder {
  color: #B3B1BE !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: "Funnel Display", sans-serif !important;
}
.modal__textarea {
  padding-right: 15px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  font-family: "Funnel Display", sans-serif;
  font-style: normal;
  line-height: normal;
  overflow-y: auto;
  width: 100%;
  background-color: transparent;
  resize: none;
  outline: none !important;
  border: none !important;
  transition: opacity 0.2s ease-out;
}
@media (min-width: 1224px) {
  .modal__textarea {
    font-size: 16px;
  }
}
.modal__textarea::-moz-placeholder {
  color: #B3B1BE !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: "Funnel Display", sans-serif !important;
}
.modal__textarea::placeholder {
  color: #B3B1BE !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: "Funnel Display", sans-serif !important;
}
.modal button {
  margin: 0;
}
.modal__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 410px;
}
.modal__delete {
  transition: fill 0.2s ease-out;
  fill: #dc5755;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20px;
  left: 20px;
  cursor: pointer;
}
.modal__delete:hover {
  fill: #C00F0C;
}
.modal__back {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 20px;
  left: 20px;
  cursor: pointer;
  transition: opacity 0.2s ease-out;
}
.modal__back path {
  stroke: #fff;
  transition: stroke 0.2s ease-out;
}
.modal__back:hover path {
  stroke: #B795DE;
}
.modal__close {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.modal__close path {
  fill: #fff;
  transition: fill 0.2s ease-out;
}
.modal__close:hover path {
  fill: #B795DE;
}
.modal--dayOverview .modal__postItem {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 25%;
  height: auto;
  cursor: pointer;
  position: relative;
}
.modal--dayOverview .modal__postItem__edit {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  position: absolute;
  background: #7700FF;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  z-index: 50;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}
.modal--dayOverview .modal__postItem__inner {
  background-color: #393939;
  padding: 10px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  gap: 15px;
  transition: filter 0.2s ease-out;
}
.modal--dayOverview .modal__postItem__inner:hover {
  filter: opacity(0.7);
}
.modal--dayOverview .modal__postItem__inner:hover + .modal__postItem__edit {
  opacity: 1;
}
.modal--dayOverview .modal__postItem__inner:has(.input-container:hover) {
  filter: opacity(1);
}
.modal--dayOverview .modal__postItem__inner:has(.input-container:hover) + .modal__postItem__edit {
  opacity: 0;
}
.modal--dayOverview .modal__postItem__upper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.modal--dayOverview .modal__postItem img {
  height: 180px;
  width: 100%;
  background-color: #7700FF;
  border: none;
  border-radius: 5px;
}
.modal--dayOverview .modal__postWrapper {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
  width: 100%;
}
.modal[data-type=create] .modal__delete {
  display: none;
}
.navigation {
  background-color: #111;
  height: 100dvh;
  width: 61px;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
  transition: width 0.2s ease-out, border-right 0.2s ease-out;
  z-index: 1000;
  border-bottom: 2px solid #393939;
}
@media (min-width: 768px) {
  .navigation {
    border-right: 2px solid #7700FF;
    border-bottom: none;
  }
}
.navigation__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 80px;
}
.navigation__logo {
  width: 22px;
  animation: rotate 26s linear infinite;
}
.navigation__logo__wrapper {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  min-width: 160px;
  width: 160px;
  transition: width 0.2s ease-out;
  overflow: hidden;
}
@media (min-width: 768px) {
  .navigation__logo__wrapper {
    min-width: 25px;
    width: 25px;
  }
}
.navigation__logo__wrapper svg {
  min-width: 106px;
  width: 106px;
  position: relative;
  top: 2px;
}
@media (min-width: 768px) {
  .navigation__logo__wrapper svg {
    min-width: 131px;
    width: 131px;
  }
}
@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.navigation__action {
  background: transparent;
  border: none;
  outline: none;
  position: absolute;
  width: 20px;
  height: 20px;
  cursor: pointer;
  top: 60px;
  right: 20px;
  transition: top 0.2s ease-out, right 0.2s ease-out;
}
.navigation__action svg path {
  transition: stroke 0.3s ease-out;
}
.navigation__action:hover svg path {
  stroke: #B795DE;
}
.navigation__action__maximize,
.navigation__action__minimize,
.navigation__action__open,
.navigation__action__close {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
.navigation__action__open {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .navigation__action__open {
    opacity: 0;
    pointer-events: none;
  }
  .navigation__action__maximize {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (min-width: 768px) {
  .navigation--open + main {
    padding-left: 280px !important;
  }
}
.navigation--open .navigation__action__maximize,
.navigation--open .navigation__action__open {
  opacity: 0;
  pointer-events: none;
}
.navigation--open .navigation__action__close {
  opacity: 1;
  pointer-events: auto;
}
.navigation--open .navigation__action__minimize {
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  .navigation--open .navigation__action__close {
    opacity: 0;
    pointer-events: none;
  }
  .navigation--open .navigation__action__minimize {
    opacity: 1;
    pointer-events: auto;
  }
}
.navigation__nav {
  padding: 30px 0;
  border-top: 2px solid #393939;
  border-bottom: 2px solid #393939;
}
.navigation__item {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  text-decoration: none !important;
  gap: 10px;
  transition: color 0.3s ease-out;
  margin-bottom: 30px;
}
.navigation__item__icon {
  flex-shrink: 0;
}
.navigation__item span {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out, width 0.2s ease-out;
  width: 0;
  white-space: nowrap;
}
.navigation__item:last-child {
  margin-bottom: 0;
}
.navigation__item__inner a {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}
.navigation__item:not(.navigation__item--parent):hover span {
  color: #B795DE;
}
.navigation__item:not(.navigation__item--parent):hover .navigation__item__icon path {
  stroke: #B795DE;
}
.navigation__item a,
.navigation__item span {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  transition:
    color 0.3s ease-out,
    opacity 0.2s ease-out,
    width 0.2s ease-out;
  text-decoration: none !important;
}
.navigation__item a:hover span,
.navigation__item span:hover span {
  color: #B795DE;
}
.navigation__item a:hover .navigation__item__icon path,
.navigation__item span:hover .navigation__item__icon path {
  stroke: #B795DE;
}
.navigation__item .navigation__item__icon path {
  transition: stroke 0.3s ease-out;
}
.navigation__item__arrow {
  position: absolute;
  top: 5px;
  left: 0;
  transform: rotate(-90deg);
  transition: transform 0.3s ease-out, opacity 0.2s ease-out;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.navigation__item__arrow path {
  transition: fill 0.3s ease-out;
}
.navigation__item__arrow:hover path {
  fill: #B795DE;
}
.navigation__item--parent {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  transition: padding-left 0.2s ease-out;
  padding-left: 0;
}
.navigation__item--parent--open .navigation__item__arrow {
  transform: rotate(0);
}
.navigation__item--parent--open .navigation__item__children {
  opacity: 1;
  transition: height 0.2s ease-out, opacity 0.2s ease-out 0.2s;
  margin-top: 25px;
}
.navigation__item__children {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    height 0.2s ease-out 0.2s,
    opacity 0.2s ease-out,
    margin-top 0.2s ease-out;
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.navigation__item__child {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: margin-top 0.2s ease-out;
}
.navigation__item__child svg path {
  transition: stroke 0.2s ease-out;
}
.navigation__item__child:hover span {
  color: #B795DE;
}
.navigation__item__child:hover svg path {
  stroke: #B795DE;
}
.navigation__item__child--current span {
  color: #BA69FF !important;
}
.navigation__item__child--current svg path {
  stroke: #BA69FF !important;
}
.navigation__item--current--single span {
  color: #BA69FF !important;
}
.navigation__item--current--single svg path {
  stroke: #BA69FF !important;
}
.navigation__item--current .navigation__item__inner span {
  color: #BA69FF !important;
}
.navigation__item--current .navigation__item__inner svg path {
  stroke: #BA69FF !important;
}
.navigation__meta {
  margin-top: 30px;
}
.navigation__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
.navigation__footer::before {
  content: "";
  height: 2px;
  width: 100%;
  position: absolute;
  display: block;
  background-color: #393939;
  left: 50%;
  transform: translateX(-50%);
}
.navigation__footer__logout {
  padding: 20px;
  background: transparent;
  color: #E3E3E3;
  display: flex;
  align-items: center;
  outline: none;
  border: none;
  width: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  justify-content: center;
  cursor: pointer;
  transition: color 0.3s, gap 0.2s ease-out;
  gap: 0;
  text-decoration: none;
}
.navigation__footer__logout svg {
  flex-shrink: 0;
}
.navigation__footer__logout span {
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: width 0.2s ease-out, opacity 0.2s ease-out;
}
.navigation__footer__logout path {
  transition: stroke 0.3s;
}
.navigation__footer__logout:hover {
  color: #B795DE;
}
.navigation__footer__logout:hover path {
  stroke: #B795DE;
}
.navigation--open {
  width: 280px;
  border-right: 2px solid #7700FF;
}
@media (min-width: 768px) {
  .navigation--open {
    border-right: 2px solid #7700FF;
  }
}
.navigation--open .navigation__logo__wrapper {
  width: 160px;
}
.navigation--open .navigation__action {
  top: 20px;
  right: 20px;
}
.navigation--open .navigation__item--parent {
  padding-left: 20px;
}
.navigation--open .navigation__item__arrow {
  opacity: 1;
  pointer-events: auto;
}
.navigation--open .navigation__item span {
  opacity: 1;
  pointer-events: auto;
  width: -moz-fit-content;
  width: fit-content;
}
.navigation--open .navigation__footer__logout {
  gap: 10px;
}
.navigation--open .navigation__footer__logout span {
  width: -moz-fit-content;
  width: fit-content;
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 767px) {
  .navigation {
    width: calc(100% + 1px);
    height: 70px;
    overflow: hidden;
    transition: width 0.2s ease-out 0.5s, height 0.2s ease-out 0.2s;
  }
  .navigation__action {
    top: 20px;
  }
  .navigation__nav,
  .navigation__meta,
  .navigation__footer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
  }
  .navigation--open {
    height: 100dvh;
    width: 320px;
    transition: width 0.2s ease-out, height 0.2s ease-out 0.3s;
  }
  .navigation--open .navigation__nav,
  .navigation--open .navigation__meta,
  .navigation--open .navigation__footer {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease-out 0.5s;
  }
}
.onboarding {
  gap: 30px;
}
.onboarding__fractioning {
  color: #909090;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.onboarding .swiper {
  width: 100%;
}
.onboarding .swiper-pagination {
  bottom: 10px;
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: center;
}
@media (min-width: 768px) {
  .onboarding .swiper-pagination {
    gap: 40px;
  }
}
.onboarding .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  opacity: 1;
  background: #393939;
  transition: background-color 0.2s ease-out;
  margin: 0 !important;
}
.onboarding .swiper-pagination-bullet-active {
  background: #BA69FF;
}
.onboarding__slider {
  overflow-y: auto;
}
.onboarding__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  overflow: hidden;
  overflow-y: auto;
}
.onboarding__step .modal__subtitle {
  max-width: 720px;
  text-align: center;
}
.onboarding__step .input-container {
  max-width: calc(100% - 8px);
}
.onboarding__step .modal__title {
  text-align: center;
}
@media (min-width: 768px) {
  .onboarding__step--zero .modal__title {
    margin-top: 40px;
  }
}
.onboarding__step--zero .modal__subtitle {
  margin-top: 40px;
}
.onboarding__step--zero .modal__buttons {
  margin-top: 20px;
}
.onboarding__style-selector {
  padding: 30px 50px;
  background-color: #232323;
  border-radius: 15px;
  width: 100%;
}
.onboarding__style-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #B3B1BE;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: color 0.2s ease-out;
  width: -moz-fit-content;
  width: fit-content;
}
.onboarding__style-card p {
  margin: 0;
}
.onboarding__style-card img {
  width: 112px;
  border: 3px solid transparent;
  border-radius: 25px;
  padding: 6px;
  transition: border-color 0.2s ease-out;
}
.onboarding__style-card:hover img {
  border-color: #909090;
}
.onboarding__style-card.active {
  color: #fff;
  cursor: default;
}
.onboarding__style-card.active img {
  border-color: #7700FF;
}
.onboarding__post-length {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px 30px 40px;
  background-color: #232323;
  border-radius: 15px;
}
.onboarding__post-length p {
  margin: 0;
}
.onboarding__post-length__hint {
  color: #B3B1BE;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.onboarding__post-length__title {
  color: #E3E3E3;
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}
.onboarding__post-length__labels {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.onboarding__post-length .onboarding-range {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #7700FF;
  outline: none;
  padding: 0;
  margin: 0;
}
.onboarding__post-length .onboarding-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #232323;
  cursor: pointer;
  -webkit-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
  border: 4px solid #7700FF;
}
.onboarding__post-length .onboarding-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 4px solid #7700FF;
  border-radius: 50%;
  background: #232323;
  cursor: pointer;
  -moz-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
  position: relative;
}
.overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1500;
  background-color: rgba(24, 0, 42, 0.8);
  transition: opacity 0.2s ease-out;
  pointer-events: none;
  opacity: 0;
  top: 0;
  left: 0;
}
.overlay.active {
  pointer-events: auto;
  opacity: 1;
}
body:has(.dashboard) {
  overflow-x: hidden;
  overflow-y: hidden;
  outline: none !important;
  touch-action: none;
}
html:has(.dashboard) {
  background-color: #111;
  outline: none !important;
  touch-action: none;
  overflow-x: hidden;
  overflow-y: hidden;
}
.dashboard {
  display: flex;
  background-color: rgba(24, 0, 42, 0.95);
  height: 100dvh;
  width: 100vw;
  flex-direction: column;
  margin: 70px 0 0 0;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media (min-width: 768px) {
  .dashboard {
    margin-top: 0;
  }
}
.dashboard__menu {
  background-color: #232323;
  color: #fff;
  text-align: center;
  z-index: 50;
  position: relative;
  padding-bottom: 20px;
  padding-top: 5px;
}
@media (min-width: 768px) {
  .dashboard__menu {
    padding-bottom: 40px;
    padding-top: 30px;
  }
}
.dashboard__menu h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .dashboard__menu h1 {
    font-size: 35px;
  }
}
.dashboard__menu p {
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  margin-top: 10px;
}
@media (min-width: 768px) {
  .dashboard__menu p {
    font-size: 18px;
    margin-top: 20px;
  }
}
.dashboard__overlay.greet {
  opacity: 1;
  animation: fadeAway 0.3s linear forwards 1s;
}
.dashboard__overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(24, 0, 42, 0.95);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 60px;
  font-style: normal;
  line-height: normal;
  opacity: 0;
  pointer-events: none;
}
@keyframes fadeAway {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.dashboard__overlay span:nth-child(2) {
  font-size: 100px;
  font-weight: 800;
}
.dashboard__overlay span:nth-child(3) {
  font-size: 20px;
  font-weight: 400;
}
.dashboard__overlay img {
  width: 200px;
  animation: rotate 26s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.dashboard__chart {
  color: #fff;
  z-index: 40;
  position: absolute;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  will-change:
    transform,
    width,
    height;
  transition: width 0.1s ease, height 0.1s ease;
  padding: 20px;
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .dashboard__chart {
    width: 1000px;
    height: 700px;
  }
}
.dashboard__chart__background {
  pointer-events: none;
  width: 100vw;
  height: 100vw;
  flex-shrink: 0;
  background:
    radial-gradient(
      49.4% 32.83% at 50% 50%,
      rgba(17, 17, 17, 0) 0%,
      rgba(21, 16, 27, 0) 48.15%,
      #70F 52.05%,
      rgba(17, 17, 17, 0) 80.18%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(-30deg, -15deg);
}
.dashboard__chart__wrapper {
  height: 100%;
  width: 100%;
  cursor: move;
  outline: none !important;
  position: relative;
}
.dashboard__filter {
  cursor: grab;
  padding: 0 20px;
}
.dashboard__filter:active {
  cursor: grabbing;
}
.dashboard__filter__button {
  width: -moz-fit-content;
  width: fit-content;
  background-color: red;
  border-radius: 15px;
  color: red;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 12px;
}
@media (min-width: 768px) {
  .dashboard__filter__button {
    font-size: 16px;
    padding: 10px 16px;
  }
}
.dashboard__filter__button[disabled] {
  color: #B3B1BE;
  cursor: grab;
}
.dashboard__filter__button[disabled]:active {
  cursor: grabbing;
}
.dashboard__filter__button--active {
  color: #111;
  background-color: #7700FF;
  cursor: grab;
}
.dashboard__filter__button--active:active {
  cursor: grabbing;
}
.dashboard__agent {
  display: flex;
  flex-direction: column;
  position: absolute;
}
@media (min-width: 768px) {
  .dashboard__agent {
    width: 385px;
  }
}
.dashboard__agent:has(.dashboard__agent__actions):hover .dashboard__agent__actions,
.dashboard__agent:has(.dashboard__agent__actions):active .dashboard__agent__actions,
.dashboard__agent:has(.dashboard__agent__actions):focus .dashboard__agent__actions {
  opacity: 1;
  pointer-events: auto;
  z-index: 30;
}
.dashboard__agent::after,
.dashboard__agent::before {
  pointer-events: none;
}
.dashboard__agent[disabled] {
  cursor: move;
  border: none;
}
.dashboard__agent[disabled]::after {
  content: "BALD VERF\dcGBAR";
  color: #7700FF;
  font-size: 13px;
  font-weight: 800;
  line-height: normal;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
@media (min-width: 1224px) {
  .dashboard__agent[disabled]::after {
    font-size: 16px;
  }
}
.dashboard__agent[disabled]:hover {
  box-shadow: none;
}
.dashboard__agent[disabled] img {
  filter: grayscale(1) brightness(300%) contrast(20%);
}
.dashboard__agent#agent-ads {
  left: 50%;
  top: 60px;
}
@media (min-width: 1224px) {
  .dashboard__agent#agent-ads {
    right: 0;
    top: 60px;
  }
}
.dashboard__agent__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@media (min-width: 768px) {
  .dashboard__agent__head {
    gap: 15px;
  }
}
.dashboard__agent__head div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.dashboard__agent__head img {
  width: 130px;
}
@media (min-width: 768px) {
  .dashboard__agent__head img {
    width: 190px;
  }
}
.dashboard__agent__name {
  color: #fff;
  font-weight: 700;
  line-height: normal;
  font-size: 12px;
}
@media (min-width: 768px) {
  .dashboard__agent__name {
    font-size: 18px;
  }
}
.dashboard__agent__position {
  color: #B3B1BE;
  font-weight: 400;
  line-height: normal;
  font-size: 16px;
}
@media (min-width: 768px) {
  .dashboard__agent__position {
    font-size: 18px;
  }
}
.dashboard__agent__badges {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.dashboard__agent__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 15px;
  font-weight: 700;
  line-height: normal;
  border-radius: 15px;
  font-size: 8px;
}
@media (min-width: 768px) {
  .dashboard__agent__badge {
    font-size: 10px;
  }
}
.dashboard__agent__badge--manager {
  background-color: red;
  color: red;
}
.dashboard__agent__badge--sales {
  background-color: red;
  color: red;
}
.dashboard__agent__badge--marketing {
  background-color: red;
  color: red;
}
.dashboard__agent__settings {
  position: absolute;
  bottom: 22px;
  right: 20px;
  padding: 0;
  height: 20px;
  width: 20px;
  display: inline-block;
  z-index: 10;
  cursor: pointer;
}
.dashboard__agent__actions {
  display: flex;
  justify-content: center;
  cursor: move;
  transition: opacity 0.2s ease-out;
  opacity: 1;
  pointer-events: auto;
  z-index: 30;
  padding-top: 10px;
  gap: 5px;
}
@media (min-width: 768px) {
  .dashboard__agent__actions {
    padding-top: 15px;
    gap: 15px;
  }
}
.dashboard__agent__actions img {
  width: 20px;
  height: auto;
  aspect-ratio: 1;
  filter: grayscale(1) brightness(400%);
  pointer-events: none;
}
@media (min-width: 768px) {
  .dashboard__agent__actions img {
    width: 50px;
  }
}
.dashboard__agent__actions .dashboard__agent__action {
  background-color: #471572;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: normal;
  gap: 5px;
  cursor: pointer;
  transition: box-shadow 0.2s ease-out;
  aspect-ratio: 1;
  text-decoration: none;
  width: 40px;
  height: 40px;
}
@media (min-width: 768px) {
  .dashboard__agent__actions .dashboard__agent__action {
    font-size: 12px;
    gap: 10px;
    width: 100px;
    height: 100px;
  }
}
@media (max-width: 1023px) {
  .dashboard__agent__actions .dashboard__agent__action span {
    display: none;
  }
}
.dashboard__agent__actions .dashboard__agent__action[disabled] {
  background-color: #513f5e;
  border-color: #393939;
  cursor: move;
}
.dashboard__agent__actions .dashboard__agent__action[disabled] * {
  opacity: 0.3;
}
.dashboard__agent__actions .dashboard__agent__action[disabled]:hover {
  box-shadow: none;
}
.login {
  display: flex;
  flex-direction: row;
  max-width: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100dvh;
}
.login__logo {
  filter: brightness(0);
}
.login__banner {
  width: 40%;
  background-color: #b3b1ff;
  text-align: center;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login__banner h2 {
  color: #111;
  font-size: 35px;
  font-weight: 700;
  line-height: normal;
  margin-top: 10px;
  margin-bottom: 15px;
}
.login__banner p {
  color: #111;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 70px;
  max-width: 295px;
}
.login__banner span {
  font-size: 16px;
  color: #fff;
  line-height: normal;
  margin-top: 10px;
  display: inline-block;
}
.login__mockup {
  width: clamp(100px, 100% + 100px, 700px);
  -o-object-fit: contain;
  object-fit: contain;
  max-height: 50vh;
  margin-bottom: 70px;
}
.login__main {
  width: 60%;
  padding: 0 20px;
  background-color: #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login__main__inner {
  max-width: 528px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login__main h1 {
  color: #fff;
  font-size: 35px;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 5px;
}
.login__main h2 {
  color: #E3E3E3;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}
.login__main .input-container {
  width: 100%;
}
.login__main .input-container:last-of-type {
  margin-bottom: 50px;
}
.login__main #login-form {
  width: 100%;
  margin-top: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login__main button {
  width: 100%;
  max-width: 410px;
}
.login__main p {
  color: #E3E3E3;
  text-align: center;
}
@media (max-width: 799px) {
  .login {
    flex-direction: column;
  }
  .login__logo {
    max-width: 180px;
    margin-bottom: 10px;
  }
  .login__banner {
    width: 100%;
    padding: 20px;
  }
  .login__banner h2 {
    font-size: 28px;
    margin-bottom: 10px;
  }
  .login__banner p {
    margin-top: 5px;
    font-size: 16px;
    margin-bottom: 20px;
  }
  .login__banner .login__mockup {
    margin-top: 0;
    margin-bottom: 20px;
  }
  .login__banner span {
    margin-top: 0;
    font-size: 16px;
  }
  .login__main {
    width: 100%;
  }
  .login__main__inner {
    margin-top: 20px;
    margin-bottom: 60px;
  }
  .login__main h1 {
    font-size: 27px;
  }
  .login__main h2 {
    font-size: 16px;
  }
  .login__main .input-container:last-of-type {
    margin-bottom: 35px;
  }
  .login #login-form {
    margin-top: 10px;
  }
}
.settings {
  display: flex;
  flex-direction: column;
  background-color: #111;
  color: #fff;
}
@media (min-width: 1224px) {
  .settings {
    flex-direction: row;
  }
}
.settings__overview {
  height: 35px;
  display: flex;
  background-color: #232323;
  border-bottom: 1px solid #232323;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  justify-content: flex-start;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-right: 1px solid #7700FF;
  border-bottom: none;
  width: 100%;
  align-items: initial;
  position: relative;
  bottom: auto;
}
@media (min-width: 1224px) {
  .settings__overview {
    height: auto;
    min-height: 60px;
    padding: 50px 10px 50px 20px;
    min-width: 320px;
    width: 320px;
  }
}
.settings__overview__head {
  position: relative;
  padding-bottom: 20px;
  border-bottom: 1px solid #909090;
  display: none;
}
@media (min-width: 1224px) {
  .settings__overview__head {
    display: block;
  }
}
.settings__overview__head__title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #909090;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.settings__overview__head__title span {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  opacity: 0.6;
}
.settings__overview__head__back {
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  gap: 15px;
  cursor: pointer;
  transition: color 0.2s ease-out;
}
@media (min-width: 1224px) {
  .settings__overview__head__back {
    margin-bottom: 30px;
  }
}
.settings__overview__head__back svg {
  border: 1px solid #7700FF;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px;
  transition: background-color 0.2s ease-out;
}
@media (min-width: 1224px) {
  .settings__overview__head__back svg {
    width: 54px;
    height: 54px;
    padding: 15px;
  }
}
.settings__overview__head__back svg path {
  transition: stroke 0.2s ease-out;
}
.settings__overview__head__back:hover {
  color: #7700FF;
}
.settings__overview__head__back:hover svg {
  background-color: #7700FF;
}
.settings__overview__head h2 {
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  display: inline-block;
  margin: 0;
}
@media (min-width: 1224px) {
  .settings__overview__head h2 {
    font-size: 22px;
  }
}
.settings__overview__navi {
  display: flex;
  flex-direction: row;
  gap: 30px;
  padding-top: 30px;
}
@media (min-width: 1224px) {
  .settings__overview__navi {
    flex-direction: column;
  }
}
.settings__overview__navi__item {
  margin-bottom: 0;
  justify-content: flex-start;
  gap: 10px;
  color: #fff !important;
}
.settings__overview__navi__item svg path {
  stroke: #fff !important;
  transition: stroke 0.2s ease-out;
}
.settings__overview__navi__item:hover {
  color: #B795DE !important;
}
.settings__overview__navi__item:hover svg path {
  stroke: #B795DE !important;
}
.settings__overview__navi__item.active {
  background-color: #7700FF !important;
  color: #fff !important;
}
.settings__overview__navi__item.active:hover {
  color: #fff !important;
}
.settings__overview__navi__item.active svg path {
  stroke: #fff !important;
}
.settings__wrapper {
  padding: 100px 30px;
  width: 100%;
  overflow-y: auto;
  height: 100dvh;
}
@media (min-width: 1224px) {
  .settings__wrapper {
    padding: 100px 80px;
  }
}
.settings__save {
  position: fixed;
  right: 80px;
  top: 100px;
  z-index: 10;
}
.settings__head {
  display: flex;
  flex-direction: row;
  padding-bottom: 30px;
  border-bottom: 2px solid #909090;
  justify-content: space-between;
  scroll-margin-top: 30px;
}
.settings__head + .settings__inputs {
  padding-top: 30px;
}
.settings__head h2 {
  font-size: 22px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  margin: 0;
}
.settings__head p {
  margin: 0;
  color: #B3B1BE;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.settings__head__left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings__head__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.settings__head button {
  margin: 0;
}
.settings__inputs + .settings__head {
  margin-top: 100px;
}
.settings__inputs .input-container {
  margin-bottom: 40px;
}
.settings .settings__images {
  margin-top: 20px;
}
.settings .settings__images .image-uploading {
  justify-content: flex-start;
}
.settings .settings__images .settings-dropzone {
  border: 2px dashed #ccc;
  padding: 25px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.settings .settings__images .settings-dropzone.dragover {
  border-color: #666;
  background: #f9f9f9;
}
.settings .settings__images .settings-dropzone p {
  color: #666;
  font-size: 14px;
  margin: 0;
}
.settings .settings__images .settings-file-count {
  margin: 10px 0;
  font-size: 14px;
  color: #999;
}
.settings .settings__images .settings-preview {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.settings .settings__images .settings-preview .no-images {
  width: 100%;
  text-align: center;
  color: #aaa;
  padding: 15px 0;
  font-size: 14px;
}
.settings .settings__images .settings-preview-item {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #fafafa;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.settings .settings__images .settings-preview-item:hover {
  transform: scale(1.03);
}
.settings .settings__images .settings-preview-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.settings .settings__images .settings-preview-item .delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 4px;
  font-size: 12px;
  padding: 3px 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.settings .settings__images .settings-preview-item .delete-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}
.settings .settings__images .settings-preview-item:hover .delete-btn {
  opacity: 1;
}
.settings .settings__images .new-file {
  border-color: #3c8bfd;
  box-shadow: 0 0 4px rgba(60, 139, 253, 0.6);
}
.settings .settings__images .settings-upload-btn {
  margin: 30px auto;
  width: -moz-fit-content;
  width: fit-content;
}
.settings__connections {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 30px;
}
.settings__connections + .settings__head {
  margin-top: 100px;
}
.settings__connections__item {
  width: 100%;
  max-width: 370px;
  padding: 30px;
  background-color: #232323;
  border: 1px solid #393939;
  border-radius: 15px;
  transition:
    box-shadow 0.2s ease-out,
    border-color 0.2s ease-out,
    color 0.2s ease-out;
  cursor: pointer;
  color: #fff;
}
.settings__connections__item.connected .settings__connections__item__status b {
  color: #BA69FF;
}
.settings__connections__item__platform {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 28px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  margin-bottom: 30px;
}
.settings__connections__item__platform p {
  margin: 0;
}
.settings__connections__item__platform img {
  width: 35px;
  height: 35px;
}
.settings__connections__item__info {
  color: #B3B1BE;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.settings__connections__item button {
  margin: 30px 0 0;
}
.settings .onboarding__style-selector {
  background-color: transparent;
  padding-inline: 0;
  justify-content: space-between;
  max-width: 1000px;
  padding-top: 0;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/*# sourceMappingURL=app.min.css.map */