@charset "UTF-8";

* {
  box-sizing: border-box;
}
input:focus, textarea:focus, button:focus, a:focus {
  outline: 0;
}
input.text,
input[type=text],
input[type=button],
input[type=submit],
.input-checkbox {
  -webkit-appearance: none;
  border-radius: 0;
}
html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after {
  content: "";
  content: none;
}
q:before, q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font-size: inherit;
  color: inherit;
  border-radius: 0;
  background: none;
  letter-spacing: inherit;
  font-family: inherit;
}
button:hover {
  cursor: pointer;
}
body {
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  font-family: "Poppins", sans-serif;
  color: #262335;
}
strong, b {
  font-weight: 700;
}
strong {
  color: #5840B0;
}

a {
  word-wrap: break-word;
}
p {
  word-wrap: break-word;
}
img {
  max-width: 100%;
  height: auto;
}
article h1, article h2, article h3, article h4, article h5, article h6 {
  margin: 20px 0;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
article h1 {
  font-size: 72px;
}
article h2 {
  font-size: 56px;
}
article h3 {
  font-size: 38px;
}
article h4 {
  font-size: 28px;
}
article h5 {
  font-size: 24px;
}
article h6 {
  font-size: 20px;
}
article p {
  margin: 25px 0;
  font-size: 13px;
  line-height: 28px;
}
article ol, article ul {
  padding-left: 10px;
  margin: 25px 0;
  font-size: 13px;
  line-height: 28px;
}
article ul {
  list-style-type: disc;
  margin-left: 7px;
  text-align: justify;
}
.justify-between {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.align-center {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.justify-end {
  display: flex;
  justify-content: flex-end;
}
.gap-5 {
  gap: 5px;
}
.gap-15 {
  gap: 15px;
}
.m-0 {
  margin: 0 !important;
}
.mt-1 {
  margin-top: 10px !important;
}
.mt-2 {
  margin-top: 20px !important;
}
.mb-1 {
  margin-bottom: 10px !important;
}
.mb-2 {
  margin-bottom: 20px !important;
}
.d-block {
  display: block;
}
.text-l {
  font-size: 1.2rem;
}
.text-s {
  font-size: 11px;
  line-height: 16px;
  color: rgba(147, 143, 167, 0.77);
}
.text-s strong {
  color: rgba(24, 24, 24, 0.77);
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right;
}
.narrow-text {
  max-width: 900px;
  margin: auto;
}
.color-primary {
  color: #F44856;
}
.color-red {
  color: #F44856 !important;
}
.color-green {
  color: #27AE60 !important;
}
.color-blue {
  color: #25C2CC !important;
}

.color-main {
  color: #5840B0 !important;
}
.color-main-lighter {
  color: rgba(88, 64, 176, 0.33) !important;
}
.color-main-sub {
  color: #DADADA !important;
}
.color-text {
  color: #262335 !important;
}
.bg-red {
  color: #fff;
  background-color: #EB5757;
}
.bg-purple {
  color: #fff;
  background-color: #BB6BD9;
}
.heading {
  position: relative;
  font-weight: 600;
  font-size: 38px;
  line-height: 84px;
  margin: 0;
  display: block;
}
.heading strong {
  color: #5840B0;
  font-weight: 600;
}
.buttons {
  display: flex;
}
.buttons .button {
  margin-bottom: 5px;
  margin-right: 13px;
}
.arrow-link {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: #5840B0;
}
.arrow-link::before {
  content: "";
  margin-right: 15px;
  width: 32px;
  height: 32px;
  background-image: url("../img/arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
}
.arrow-link:hover {
  text-decoration: underline;
}
.button {
  border: none;
  display: inline-block;
  padding: 11px 25px;
  background: #5840B0;
  border-radius: 50px;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  transition: 0.4s;
}
.button:hover {
  cursor: pointer;
  opacity: 0.8;
}
.button i {
  margin-right: 10px;
}
.button--with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button--with-icon img, .button--with-icon i, .button--with-icon svg {
  margin-right: 10px;
}
.button--icon-right i {
  margin-right: 0;
  margin-left: 10px;
}
.button--full-width {
  width: 100%;
  margin: 10px 0;
}
.button--without-text i {
  margin-right: 0;
}
.button--outline {
  background: none;
  border: 1px solid #5840B0;
  color: #262335;
}
.button--outline:hover {
  color: #fff;
  background: #5840B0;
  border-color: #5840B0;
  opacity: 1;
}
.button--outline:hover img, .button--outline:hover i, .button--outline:hover svg {
  filter: brightness(0) invert(1);
}
.button--white {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.button--green {
  border-color: #27AE60;
  color: #27AE60;
}
.button--green:hover {
  color: #fff;
  background-color: #27AE60;
}
.button--orange {
  border-color: #F2994A;
  color: #F2994A;
}
.button--orange:hover {
  color: #fff;
  background-color: #F2994A;
}
.button--gray {
  color: #333333;
  border-color: #A0A0A0;
}
.button--gray:hover {
  color: #fff;
  border-color: #333333;
  background-color: #333333;
}
.button--gradient {
  background: linear-gradient(to right, #f44856, #FF9B49);
  color: #fff;
}
.button--gradient:hover {
  opacity: 0.85;
}
.button--dark {
  background: #262335;
}
.button--google, .button--facebook {
  position: relative;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button--google img, .button--facebook img {
  position: absolute;
  left: 25px;
}
.button--google {
  color: #181818;
  background: #fff;
  border: 1px solid #E3E3EA;
}
.button--google:hover {
  border-color: #5840B0;
}
.button--facebook {
  background: #3C66C4;
  color: #FFFFFF;
}
.button--facebook:hover {
  opacity: 0.85;
}
.button--send i {
  margin-left: 13px;
  margin-right: 0;
  opacity: 0.33;
  transition: 0.3s;
}
.button--send:hover {
  opacity: 1;
}
.button--send:hover i {
  opacity: 1;
}
.button--small {
  padding: 5px 25px;
}
.button--supersmall {
  font-size: 13px;
  padding: 2px 20px;
}
.button:disabled, .button.disabled {
  opacity: 0.2;
  pointer-events: none;
}
.logout-button {
  width: 53px;
  height: 53px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logout-button i {
  margin-right: 0;
}
.or-spacer {
  margin: 15px 0 15px;
  color: #6C6C7A;
  font-size: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.or-spacer::before, .or-spacer::after {
  content: "";
  flex: auto;
  height: 1px;
  border-bottom: 2px dashed #E3E3EA;
}
.or-spacer::before {
  margin-right: 10px;
}
.or-spacer::after {
  margin-left: 10px;
}
.invert-black {
  filter: brightness(0);
}
.invert-white {
  filter: brightness(0) invert(1);
}
.icon-button {
  border: none;
  padding: 0;
  cursor: pointer;
  color: #DADADA;
  transition: 0.3s;
}
.icon-button:hover {
  color: #5840B0;
}
hr {
  margin: 24px 0;
  display: block;
  border: none;
  height: 1px;
  background: rgba(88, 64, 176, 0.1);
}
table {
  margin: 15px 0;
  width: 100%;
}
table td {
  padding: 10px 12px;
  font-size: 12px;
}
table thead {
  font-weight: 400;
  font-size: 11px;
  color: rgba(38, 35, 53, 0.77);
}
table thead td {
  background: rgba(88, 64, 176, 0.1);
  vertical-align: middle;
}
table thead td:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
table thead td:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
table tbody td {
  color: rgba(38, 35, 53, 0.77);
  border-bottom: 1px solid rgba(88, 64, 176, 0.1);
  vertical-align: middle;
}
table tbody td a:hover {
  text-decoration: underline;
}
table tbody tr:hover td {
  background: rgba(88, 64, 176, 0.03);
}
.tr--checked {
  background: rgba(88, 64, 176, 0.03);
}
.card table tbody tr:last-child td {
  border-bottom: 0;
}
.table-middle td {
  vertical-align: middle;
}
html {
  scroll-behavior: smooth;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 30px;
}
.col-1 {
  grid-column: 1 span;
}
@media only screen and (max-width: 768px) {
  .col-1 {
    grid-column: 1;
  }
}
.col-2 {
  grid-column: 2 span;
}
@media only screen and (max-width: 768px) {
  .col-2 {
    grid-column: 1;
  }
}
.col-3 {
  grid-column: 3 span;
}
@media only screen and (max-width: 768px) {
  .col-3 {
    grid-column: 1;
  }
}
.col-4 {
  grid-column: 4 span;
}
@media only screen and (max-width: 768px) {
  .col-4 {
    grid-column: 1;
  }
}
.col-5 {
  grid-column: 5 span;
}
@media only screen and (max-width: 768px) {
  .col-5 {
    grid-column: 1;
  }
}
.col-6 {
  grid-column: 6 span;
}
@media only screen and (max-width: 768px) {
  .col-6 {
    grid-column: 1;
  }
}
.col-7 {
  grid-column: 7 span;
}
@media only screen and (max-width: 768px) {
  .col-7 {
    grid-column: 1;
  }
}
.col-8 {
  grid-column: 8 span;
}
@media only screen and (max-width: 768px) {
  .col-8 {
    grid-column: 1;
  }
}
.col-9 {
  grid-column: 9 span;
}
@media only screen and (max-width: 768px) {
  .col-9 {
    grid-column: 1;
  }
}
.col-10 {
  grid-column: 10 span;
}
@media only screen and (max-width: 768px) {
  .col-10 {
    grid-column: 1;
  }
}
.col-11 {
  grid-column: 11 span;
}
@media only screen and (max-width: 768px) {
  .col-11 {
    grid-column: 1;
  }
}
body {
  background-color: #F7F7F7;
}
#top {
  position: absolute;
  top: 0;
  opacity: 0;
}
.container {
  margin: auto;
  width: 100%;
  max-width: 1340px;
  padding: 0 20px;
}
.main {
  padding-top: 100px;
}
@media only screen and (max-width: 1024px) {
  .main {
    padding-top: 70px;
  }
}
.flex {
  display: flex;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .flex-between {
    display: block;
  }
}
.justify-center {
  justify-content: center;
}
.flex-align-center {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .flex-align-center {
    display: block;
  }
}
.space-between {
  justify-content: space-between;
  align-items: center;
}
.duo-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
}
@media only screen and (max-width: 768px) {
  .duo-col {
    grid-template-columns: 1fr;
  }
}
.page-heading {
  margin: 40px 0 15px;
  font-size: 36px;
}
@media only screen and (max-width: 768px) {
  .page-heading {
    font-size: 32px;
    line-height: 1.4;
  }
}
.scroll-to-top {
  position: fixed;
  z-index: 50;
  left: 25px;
  bottom: 70px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEE8F0 100%);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  width: 60px;
  height: 60px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .scroll-to-top {
    display: none;
  }
}
.nav {
  margin: 25px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(88, 64, 176, 0.1);
}
.nav__item {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  margin-right: 35px;
  font-weight: 500;
  font-size: 13px;
  color: rgba(38, 35, 53, 0.77);
}
.nav__item img, .nav__item i {
  font-size: 20px;
  margin-right: 10px;
  color: rgba(88, 64, 176, 0.33);
}
.nav__item.current {
  color: #5840B0;
}
.nav__item.current::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 3px;
  width: 100%;
  background: #5840B0;
}
.nav__item.current img, .nav__item.current i {
  font-size: 20px;
  margin-right: 10px;
  color: #5840B0;
}
.nav--right {
  text-align: right;
  justify-content: flex-end;
}
.nav--right .nav__item {
  margin-right: 0;
  margin-left: 35px;
}
.badge {
  display: inline-block;
  position: relative;
  background: #DCD6EF;
  color: #5840B0;
  border-radius: 10px;
  padding: 2px 20px;
  font-size: 12px;
}
.badge strong {
  color: inherit;
  text-transform: uppercase;
  margin-right: 5px;
}
.badge i {
  position: absolute;
  left: 20px;
}
@media only screen and (max-width: 768px) {
  .badge i {
    top: 15px;
  }
}
.badge--error {
  color: #fff;
  background: #EB5757;
}
.badge--warning {
  color: #fff;
  background: #F2C94C;
}
.badge--main {
  color: #fff;
  background: #BB6BD9;
}
.badge--success {
  color: #fff;
  background: #6FCF97;
}
.dropdown {
  position: absolute;
  right: 0;
  display: none;
  z-index: 5;
  background-color: #fff;
  box-shadow: 0px 5px 30px rgba(96, 10, 206, 0.1);
  border-radius: 4px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
}
.dropdown__item {
  display: block;
  color: rgba(38, 35, 53, 0.77);
  padding: 8px 20px;
  min-width: 120px;
  border-bottom: 1px solid #eee;
}
.dropdown__item i {
  margin-right: 15px;
  color: rgba(38, 35, 53, 0.33);
}
.dropdown__item:hover {
  color: #5840B0;
  background: rgba(38, 35, 53, 0.1);
}
.dropdown__item:hover i {
  color: #5840B0;
}
.dropdown__item:last-child {
  border-bottom: none;
}
.has-dropdown {
  position: relative;
  border: none;
  background: none;
  color: rgba(66, 66, 91, 0.56);
}
.has-dropdown:hover > .dropdown {
  display: block;
}
.pagination {
  display: flex;
}
.pagination .button {
  padding: 0;
  margin-left: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(88, 64, 176, 0.05);
  color: rgba(88, 64, 176, 0.77);
}
.pagination .button i, .pagination .button img {
  margin-right: 0;
}
.pagination .button.current {
  color: #fff;
  background: #5840B0;
}
.page-header {
  position: relative;
  padding: 160px 0 200px;
  min-height: 550px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .page-header {
    padding: 115px 0 25px;
    min-height: 310px;
  }
}
.page-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.page-header::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.33;
}
.page-header .container {
  position: relative;
  z-index: 5;
}
.page-header__before-title {
  margin: 0 0 15px;
  color: #F44856;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@media only screen and (max-width: 1024px) {
  .page-header__before-title {
    font-size: 44px;
  }
}
.page-header__title {
  margin: 0;
  font-weight: 300;
  font-size: 64px;
  line-height: 40px;
}
.page-header__sub-title {
  margin: 25px 0 0;
}
.page-header__date {
  margin: 25px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  opacity: 0.66;
}
.page-header__date img {
  margin-right: 8px;
  margin-top: 3px;
  filter: brightness(0) invert(1);
}
.card {
  margin: 7px 0;
  background: #FFFFFF;
  border: 1px solid #EDE9F8;
  border-radius: 10px;
  padding: 10px 20px;
}
.card p {
  margin: 0;
}
.card__title {
  font-size: 18px;
  font-weight: 600;
  min-height: 40px;
  padding: 10px 0;
  margin: 0;
}
.toggle {
  position: relative;
  width: 38px;
  height: 20px;
}
.toggle__button {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background: #5840B0;
  opacity: 0.33;
  transition: 0.3s;
  cursor: pointer;
}
.toggle__button::after {
  position: absolute;
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 8px;
  background: #fff;
  left: 3px;
  top: 3px;
  transition: 0.3s;
}
.toggle input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
}
.toggle input:checked ~ .toggle__button {
  opacity: 1;
}
.toggle input:checked ~ .toggle__button::after {
  transform: translateX(18px);
}
.radio {
  position: relative;
  width: 14px;
  height: 14px;
}
.radio__button {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(88, 64, 176, 0.73);
  transition: 0.3s;
  cursor: pointer;
}
.radio__button::after {
  position: absolute;
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #5840B0;
  left: 2px;
  top: 2px;
  opacity: 0;
  transition: 0.3s;
}
.radio input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
}
.radio input:checked ~ .radio__button::after {
  opacity: 1;
}
.radio input:disabled ~ .radio__button {
  background: rgba(88, 64, 176, 0.73);
  opacity: 0.2;
}
.search-input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
}
.search-input input {
  padding: 8px 20px !important;
}
.search-input i, .search-input svg, .search-input img {
  opacity: 0.33;
  position: absolute;
  right: 20px;
}
.stat-card {
  padding: 23px 20px;
}
.stat-card--with-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: right;
}
.stat-card__icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(88, 64, 176, 0.2);
  border-radius: 10px;
}
.stat-card__icon i, .stat-card__icon img, .stat-card__icon svg {
  font-size: 22px;
}
.stat-card__title {
  margin: 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
}
.stat-card p {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 28px;
}
.user {
  display: grid;
  grid-template-columns: 80px auto;
  grid-gap: 20px;
  align-items: center;
}
.user p {
  line-height: 1.4;
}
.user .avatar img {
  width: 80px;
  height: 80px;
}
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 900;
  padding: 49px 0;
  transition: 0.5s;
}
@media only screen and (max-width: 1024px) {
  .header {
    padding: 15px 0;
    position: fixed;
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  }
}
.header .container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.header__logo {
  margin-right: 10px;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1200px) {
  .header__logo {
    max-width: 200px;
  }
}
.header__menu {
  justify-content: center;
  display: flex;
}
@media only screen and (max-width: 1024px) {
  .header__menu {
    padding: 20px;
    display: block;
    position: fixed;
    left: 0;
    top: 66px;
    background: #fff;
    width: 100%;
    height: calc(100vh - 66px);
    transform: translateX(-100%);
    transition: 0.3s;
    text-align: center;
  }
}
.header__menu__item {
  padding: 15px 24px;
  margin: 0 2px;
  line-height: 1;
  font-weight: 500;
  border-radius: 100px;
  text-transform: lowercase;
  transition: 0.5s;
}
@media only screen and (max-width: 1200px) {
  .header__menu__item {
    padding: 12px 14px;
  }
}
.header__menu__item.active {
  color: #5840B0;
  background: rgba(88, 64, 176, 0.05);
}
.header__menu__item:hover {
  color: #5840B0;
}
.header__right {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .header__right {
    flex-wrap: wrap;
    flex-direction: column;
    position: fixed;
    left: 0;
    bottom: 66px;
    width: 100%;
    transform: translateX(-100%);
    transition: 0.3s;
    text-align: center;
  }
}
.header__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .header__nav {
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
  }
}
.header .button {
  padding: 14px 25px;
}
.header .buttons .button {
  margin-left: 13px;
  margin-right: 0;
}
@media only screen and (max-width: 1024px) {
  .header .buttons .button {
    margin: 0 5px;
  }
}
.header .notifications {
  margin-right: 15px;
}
.header .notifications__item {
  position: relative;
  margin-right: 15px;
}
.header .notifications__item i {
  font-size: 22px;
}
.header .notifications__item span {
  position: absolute;
  top: -11px;
  right: -5px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background-color: #F44856;
  color: #fff;
  border: 2px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.header__burger {
  display: none;
  z-index: 6000;
  border: none;
  background: none;
}
@media only screen and (max-width: 1024px) {
  .header__burger {
    display: block;
  }
}
.header__burger span {
  display: block;
  margin: 7px 0;
  width: 30px;
  height: 2px;
  background-color: #262335;
  transition: 0.5s;
}
.nav-active .header__right {
  transform: translateX(0);
}
.nav-active .header__menu {
  transform: translateX(0);
}
.nav-active .header__burger span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}
.nav-active .header__burger span:nth-child(2) {
  opacity: 0;
}
.nav-active .header__burger span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

.footer {
  padding: 80px 0 60px;
  background: #262335;
  color: rgba(255, 255, 255, 0.77);
}
@media only screen and (max-width: 768px) {
  .footer {
    padding: 45px 0 25px;
  }
}
.footer > .container {
  display: grid;
  grid-template-columns: 350px auto 160px;
  grid-gap: 80px;
}
@media only screen and (max-width: 1200px) {
  .footer > .container {
    grid-template-columns: 280px auto 160px;
    grid-gap: 45px;
  }
}
@media only screen and (max-width: 1024px) {
  .footer > .container {
    grid-template-columns: 240px auto 160px;
    grid-gap: 25px;
  }
}
@media only screen and (max-width: 768px) {
  .footer > .container {
    display: block;
  }
}
.footer__logo {
  filter: brightness(0) invert(1);
}
.footer__nav {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
}
@media only screen and (max-width: 1024px) {
  .footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .footer__nav {
    margin: 45px 0;
  }
}
.footer__nav a {
  font-weight: 500;
}
.footer__nav a:hover {
  color: #fff;
}
.footer__socials h5 {
  color: #fff;
  margin: 0;
  font-weight: 600;
  font-size: 22px;
}
.footer__socials__icons {
  margin-top: 20px;
  display: flex;
}
.footer__socials__icons a {
  width: 28px;
  height: 28px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 13px;
  background: #fff;
  opacity: 0.77;
  color: #262335;
}
.footer__socials__icons a:hover {
  opacity: 1;
}
.footer__copyright .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.footer__copyright p {
  font-size: 13px;
}
.footer__copyright p a:hover {
  color: #fff;
}
.footer__copyright .go-top {
  font-weight: 500;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.footer__copyright .go-top img {
  margin-left: 8px;
}
.form-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px;
}
@media only screen and (max-width: 768px) {
  .form-trio {
    grid-gap: 15px;
    grid-template-columns: repeat(2, 1fr);
  }
}
.form-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 32px;
}
@media only screen and (max-width: 768px) {
  .form-duo {
    grid-gap: 15px;
  }
}
.error-text {
  font-size: 11px;
  text-align: center;
  color: #EB5757;
  opacity: 0.77;
  margin-top: 3px;
}
.form-control {
  margin: 15px 0;
}
.form-control label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(38, 35, 53, 0.66);
}
.form-control input, .form-control textarea, .form-control select {
  display: block;
  width: 100%;
  background-color: #fff;
  border: 1px solid #E3E3EA;
  padding: 15px 20px;
  border-radius: 100px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.form-control input:disabled, .form-control textarea:disabled, .form-control select:disabled {
  background: #FAF9FC;
  border-color: #E3E3EA;
  color: rgba(24, 24, 24, 0.2);
}
.form-control select {
  background-image: url("../img/select.svg");
  background-position: calc(100% - 15px) center;
  background-repeat: no-repeat;
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
  /* For IE10 */
}
.form-control select::-ms-expand {
  display: none;
}
.form-control textarea {
  border-radius: 25px;
  height: 120px;
}
.form-control--error input, .form-control--error textarea, .form-control--error select {
  border-color: #EB5757;
}
.form-control--with-icon {
  position: relative;
}
.form-control--with-icon i {
  font-size: 17px;
  position: absolute;
  right: 20px;
  top: 41px;
  color: #5840B0;
  opacity: 0.33;
}
.modal--fix {
  top: 36px !important;
}
.file-input {
  position: relative;
  margin: 0;
  display: inline-block;
}
.file-input input {
  left: 0;
  top: 0;
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.file-input__label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 45px;
  border: 1px solid #5840B0;
  transition: 0.3s;
}
.file-input__label:hover {
  border-color: #5840B0;
  cursor: pointer;
}
.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.input-with-icon input {
  width: 100%;
}
.input-with-icon i {
  position: absolute;
  right: 15px;
  color: rgba(24, 24, 24, 0.66);
}
.custom-checkbox {
  display: flex;
  position: relative;
}
.custom-checkbox label {
  font-weight: 300;
  font-size: 11px;
  line-height: 1.5;
  padding-left: 35px;
}
.custom-checkbox label p {
  margin: 0;
  font-weight: 300;
  font-size: 11px;
  line-height: 1.5;
}
.custom-checkbox label::before {
  position: absolute;
  left: 0;
  top: 5px;
  content: "";
  width: 18px;
  height: 18px;
  border: 1px solid #E3E3EA;
  border-radius: 4px;
}
.custom-checkbox label::after {
  position: absolute;
  left: 5px;
  top: 10px;
  content: "";
  width: 10px;
  height: 10px;
  background: #FFFFFF;
  border-radius: 2px;
  opacity: 0;
}
.custom-checkbox input {
  opacity: 0;
  position: absolute;
}
.custom-checkbox input:checked ~ label::after {
  opacity: 1;
}
.custom-input-file-button {
  position: relative;
}
.custom-input-file-button input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.form-control--validation {
  position: relative;
  margin: 0;
}
.form-control--validation .validation-icon::before, .form-control--validation .validation-icon::after {
  position: absolute;
  right: 15px;
  opacity: 0;
  transition: 0.3s;
}
.form-control--validation .validation-icon::before {
  content: "×";
  color: #EB5757;
  font-size: 25px;
  bottom: 6px;
}
.form-control--validation .validation-icon::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #27AE60;
  font-size: 14px;
  bottom: 14px;
}
.form-control--validation input:invalid, .form-control--validation textarea:invalid {
  border-bottom-color: #EB5757;
  border-bottom-width: 2px;
  outline: none;
  box-shadow: none;
}
.form-control--validation input:invalid ~ .validation-icon::before, .form-control--validation textarea:invalid ~ .validation-icon::before {
  opacity: 1;
}
.form-control--validation input:not(:-moz-placeholder-shown):valid, .form-control--validation textarea:not(:-moz-placeholder-shown):valid {
  border-bottom-color: #27AE60;
  border-bottom-width: 2px;
}
.form-control--validation input:not(:-ms-input-placeholder):valid, .form-control--validation textarea:not(:-ms-input-placeholder):valid {
  border-bottom-color: #27AE60;
  border-bottom-width: 2px;
}
.form-control--validation input:not(:placeholder-shown):valid, .form-control--validation textarea:not(:placeholder-shown):valid {
  border-bottom-color: #27AE60;
  border-bottom-width: 2px;
}
.form-control--validation input:not(:-moz-placeholder-shown):valid ~ .validation-icon::after, .form-control--validation textarea:not(:-moz-placeholder-shown):valid ~ .validation-icon::after {
  opacity: 1;
}
.form-control--validation input:not(:-ms-input-placeholder):valid ~ .validation-icon::after, .form-control--validation textarea:not(:-ms-input-placeholder):valid ~ .validation-icon::after {
  opacity: 1;
}
.form-control--validation input:not(:placeholder-shown):valid ~ .validation-icon::after, .form-control--validation textarea:not(:placeholder-shown):valid ~ .validation-icon::after {
  opacity: 1;
}
.popup {
  display: none;
  position: fixed;
  z-index: 5000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
  align-items: center;
  justify-content: center;
}
.popup__content {
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 40px rgba(96, 10, 206, 0.2);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
@media only screen and (max-width: 1024px) {
  .popup__content {
    max-height: 100%;
    overflow-y: scroll;
  }
}
.popup__close {
  border: none;
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 32px;
  color: #6C6C7A;
  font-weight: 300;
}
.popup__close:hover {
  cursor: pointer;
  opacity: 0.7;
}
.popup__title {
  margin: 0;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.04em;
  color: #5840B0;
  padding-bottom: 10px;
}
.popup-login, .popup-register {
  color: #A0A0A0;
  font-size: 14px;
  line-height: 17px;
}
.popup-login .popup__content, .popup-register .popup__content {
  padding: 40px;
  width: 420px;
  max-width: 100%;
}
@media only screen and (max-width: 768px) {
  .popup-login .popup__content, .popup-register .popup__content {
    padding: 25px 20px;
  }
}
.popup-login .popup__title, .popup-register .popup__title {
  text-align: center;
}
.popup-login h4, .popup-register h4 {
  margin: 15px 0;
  font-weight: 300;
  font-size: 22px;
  line-height: 29px;
  color: #42425B;
}
.popup-login .button-login img, .popup-login .button-login i, .popup-login .button-login svg, .popup-register .button-login img, .popup-register .button-login i, .popup-register .button-login svg {
  filter: brightness(0) invert(1);
}
.popup-login .button--outline, .popup-register .button--outline {
  margin-bottom: 15px;
}
.password-strength {
  margin: 10px 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 10px;
}
.password-strength span {
  border-radius: 10px;
  height: 6px;
  width: 100%;
  background: rgba(88, 64, 176, 0.25);
}
.password-strength span:nth-child(-n+9) {
  background: #6FCF97;
}
.password-strength span:nth-child(-n+6) {
  background: #F2C94C;
}
.password-strength span:nth-child(-n+3) {
  background: #EB5757;
}
.password-strength .limit ~ span {
  background: rgba(88, 64, 176, 0.25);
}
.alert {
  position: relative;
  background: #EDE9F8;
  border: 1px solid #5840B0;
  border-radius: 10px;
  margin: 10px 0;
  padding: 15px 17px;
  display: grid;
  grid-template-columns: 50px auto;
  grid-gap: 14px;
  align-items: center;
  font-weight: 400;
  font-size: 13px;
  line-height: 28px;
  color: rgba(38, 35, 53, 0.77);
}
.alert i {
  font-size: 16px;
}
.alert__icon {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(88, 64, 176, 0.2);
  border-radius: 10px;
  height: 50px;
}
.alert strong {
  font-weight: 600;
}
.alert__close {
  position: absolute;
  right: 2px;
  border: none;
  background: none;
  padding: 15px;
  font-size: 32px;
  color: #5840B0;
}
.alert__close:hover {
  cursor: pointer;
  opacity: 0.6;
}
.alert--green {
  background: #DDF5E7;
  border-color: #6FCF97;
}
.alert--green strong, .alert--green i, .alert--green .alert__close {
  color: #219653;
}
.alert--red {
  background: #FFE8E8;
  border-color: #EB5757;
}
.alert--red strong, .alert--red i, .alert--red .alert__close {
  color: #EB5757;
}
.alert--orange {
  background: #FFF8E4;
  border-color: #F2994A;
}
.alert--orange strong, .alert--orange i, .alert--orange .alert__close {
  color: #F2994A;
}
.box {
  background: #FFFFFF;
  box-shadow: 0px 5px 30px rgba(96, 10, 206, 0.1);
  border-radius: 10px;
}
.hero {
  padding: 55px 0 25px;
}
@media only screen and (max-width: 1024px) {
  .hero {
    padding-top: 0;
  }
}
.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 80px;
}
.hero__title {
  margin: 45px 0 25px;
  font-weight: 600;
  font-size: 72px;
  line-height: 84px;
}
@media only screen and (max-width: 1024px) {
  .hero__title {
    font-size: 48px;
    line-height: 1.2;
  }
}
.hero__title strong {
  color: #5840B0;
  font-weight: 600;
}
.hero .buttons {
  margin-top: 35px;
}
.hero__features {
  margin-top: 70px;
  display: flex;
}
.hero__features__item {
  position: relative;
  border-radius: 90px;
  margin-right: 36px;
  margin-left: 15px;
  width: 60px;
  height: 60px;
  background: #FFFFFF;
  box-shadow: 0px 0px 40px rgba(96, 10, 206, 0.2);
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 1200px) {
  .hero__features__item {
    width: 40px;
    height: 40px;
    margin-right: 15px;
  }
}
.hero__features__item::before {
  content: "";
  width: 90px;
  height: 90px;
  border-radius: 90px;
  background: #fff;
  position: absolute;
  left: -15px;
  top: -15px;
  z-index: -1;
  box-shadow: 0px 0px 40px rgba(96, 10, 206, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
@media only screen and (max-width: 1200px) {
  .hero__features__item::before {
    width: 60px;
    height: 60px;
    left: -10px;
    top: -10px;
  }
}
@media only screen and (max-width: 1200px) {
  .hero__features__item img {
    max-width: 28px;
  }
}
.hero__img {
  position: absolute;
  right: -50px;
  bottom: -70px;
  max-width: 60vw;
}
@media only screen and (max-width: 1024px) {
  .hero__img {
    bottom: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .hero__img {
    display: none;
  }
}
.features {
  margin: 45px 0;
}
.features .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
}
@media only screen and (max-width: 1200px) {
  .features .container {
    grid-gap: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .features .container {
    display: block;
  }
}
.features__item {
  padding: 40px 50px;
  padding-right: 20px;
  display: grid;
  grid-template-columns: 100px auto;
  grid-gap: 30px;
}
@media only screen and (max-width: 1200px) {
  .features__item {
    padding: 30px 30px;
    padding-right: 15px;
    display: grid;
    grid-template-columns: 80px auto;
    grid-gap: 20px;
  }
}
@media only screen and (max-width: 1024px) {
  .features__item {
    display: block;
  }
}
@media only screen and (max-width: 768px) {
  .features__item {
    margin: 15px 0;
    display: grid;
  }
}
.features__item__icon {
  height: 100px;
  border: 2px dashed rgba(88, 64, 176, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 1200px) {
  .features__item__icon {
    width: 80px;
    height: 80px;
  }
}
@media only screen and (max-width: 1024px) {
  .features__item__icon {
    margin-bottom: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .features__item__icon {
    margin-bottom: 0;
  }
}
.features__item h3 {
  margin: 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
}
.features__item p {
  margin: 12px 0 0;
  font-size: 13px;
}
.packages {
  margin: 105px 0;
  background-image: url("../img/shapes1.svg");
  background-position: center top;
  background-repeat: no-repeat;
}
.packages--2 {
  background-image: url("../img/shapes2.svg");
}
.packages__header {
  text-align: center;
  margin-bottom: 60px;
}
.packages__header p {
  max-width: 100%;
  width: 690px;
  margin: 20px auto;
}
.packages__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
}
@media only screen and (max-width: 1200px) {
  .packages__grid {
    grid-gap: 15px;
  }
}
@media only screen and (max-width: 1024px) {
  .packages__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.packages__grid__item {
  padding: 45px 25px 50px;
  text-align: center;
}
@media only screen and (max-width: 1024px) {
  .packages__grid__item {
    padding: 45px 15px 50px;
  }
}
.packages__grid__item__title {
  font-size: 20px;
  line-height: 42px;
  margin: 0;
}
.packages__grid__item__title strong {
  font-size: 38px;
  display: block;
  margin-top: 10px;
}
.packages__grid__item p {
  font-size: 13px;
}
.packages__grid__item__price {
  margin: 0 0 10px;
  color: #5840B0;
  font-size: 38px;
  line-height: 1;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.packages__grid__item__price small {
  font-size: 24px;
}
.packages__grid__item__price ins {
  display: block;
  text-decoration: line-through;
  opacity: 0.33;
  font-size: 20px;
}
.packages__grid__item__price ins small {
  font-size: 18px;
}
.packages__grid__item .button {
  color: #5840B0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: auto;
}
.packages__grid__item .button img {
  visibility: hidden;
  width: 0;
  transition: 0.3s;
}
.packages__grid__item .button:hover {
  color: #fff;
}
.packages__grid__item .button:hover img {
  visibility: visible;
  width: 24px;
  margin-left: 10px;
}
.smarttv {
  padding-bottom: 300px;
}
@media only screen and (max-width: 1200px) {
  .smarttv {
    padding-bottom: 180px;
  }
}
@media only screen and (max-width: 1024px) {
  .smarttv {
    padding-bottom: 80px;
  }
}
.smarttv .container {
  display: grid;
  grid-template-columns: 3fr 4fr 2fr;
  grid-gap: 25px;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .smarttv .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .smarttv .container {
    display: block;
  }
}
.smarttv .container > .heading {
  text-align: center;
  grid-column: 1/4;
  margin-bottom: 140px;
}
@media only screen and (max-width: 1200px) {
  .smarttv .container > .heading {
    margin-bottom: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .smarttv .container > .heading {
    margin-bottom: 25px;
    font-size: 24px;
    line-height: 1.2;
  }
}
.smarttv__left .heading {
  font-weight: 600;
  font-size: 56px;
  line-height: 78px;
  letter-spacing: -0.04em;
}
@media only screen and (max-width: 1200px) {
  .smarttv__left .heading {
    font-size: 48px;
    line-height: 1.2;
  }
}
@media only screen and (max-width: 768px) {
  .smarttv__left .heading {
    font-size: 36px;
    text-align: center;
  }
}
.smarttv__img {
  position: relative;
}
.smarttv__img img {
  position: absolute;
  left: -240px;
  top: -220px;
  max-width: 800px;
}
@media only screen and (max-width: 1200px) {
  .smarttv__img img {
    position: inherit;
    left: inherit;
    top: inherit;
    max-width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .smarttv__img img {
    margin-top: 25px;
  }
}
.smarttv .button {
  margin-top: 15px;
}
.stats {
  margin: 50px 0 100px;
  padding-bottom: 160px;
  text-align: center;
  background-image: url("../img/stats-bg.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
}
.stats__grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 15px;
}
@media only screen and (max-width: 768px) {
  .stats__grid {
    margin-top: 45px;
    display: block;
  }
}
.stats__grid__item {
  border-right: 2px dashed rgba(88, 64, 176, 0.2);
}
@media only screen and (max-width: 768px) {
  .stats__grid__item {
    margin: 25px 0;
    border: 0;
  }
}
.stats__grid__item:last-child {
  border-right: none;
}
.stats__grid__item p {
  margin: 0;
}
.stats__grid__item big {
  display: block;
  color: #5840B0;
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.04em;
}
@media only screen and (max-width: 1200px) {
  .stats__grid__item big {
    font-size: 48px;
  }
}
@media only screen and (max-width: 1024px) {
  .stats__grid__item big {
    font-size: 36px;
  }
}
.breadcrumbs {
  margin-top: 45px;
  padding-bottom: 7px;
}
@media only screen and (max-width: 1024px) {
  .breadcrumbs {
    margin-top: 15px;
  }
}
.breadcrumbs .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.breadcrumbs .container::before {
  content: "";
  height: 1px;
  width: calc(100% - 40px);
  background: rgba(88, 64, 176, 0.1);
  position: absolute;
  top: -10px;
  left: 20px;
}
.breadcrumbs__nav {
  display: flex;
  align-items: center;
}
.breadcrumbs__nav__item {
  display: block;
  color: #5840B0;
  font-weight: 500;
  font-size: 13px;
}
.breadcrumbs__nav__item:last-of-type {
  color: #262335;
}
.breadcrumbs__nav__spacer {
  margin: 0 12px;
}
.breadcrumbs .report {
  color: #5840B0;
}
.dashboard {
  margin-bottom: 140px;
  position: relative;
  display: grid;
  grid-template-columns: 333px auto;
  background: #FDFCFF;
  border: 1px solid #EDE9F8;
  border-radius: 10px;
}
@media only screen and (max-width: 1024px) {
  .dashboard {
    display: block;
    margin-left: -20px;
    width: calc(100% + 40px);
  }
}
.dashboard__aside {
  position: relative;
  background-color: #262335;
  padding: 40px 20px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
@media only screen and (max-width: 1024px) {
  .dashboard__aside {
    display: none;
    margin-top: -10px;
    border-radius: 0;
  }
}
@media only screen and (max-width: 1024px) {
  .dashboard__aside--active {
    display: block;
  }
}
.dashboard__aside--light {
  background: #DDDCE2;
}
.dashboard__aside--light .aside-menu__item {
  color: rgba(38, 35, 53, 0.77);
  border-bottom-color: rgba(38, 35, 53, 0.1);
}
.dashboard__aside--light .aside-menu__item i {
  color: rgba(38, 35, 53, 0.33);
}
.dashboard__aside--light .aside-menu__item--current {
  background: #5840B0;
  color: #fff;
}
.dashboard__aside--light .aside-menu__item--current i {
  color: #fff;
}
.dashboard__aside--light .aside-menu__item:hover {
  background: rgba(88, 64, 176, 0.33);
  color: #fff;
}
.dashboard__aside--light .aside-menu__item:hover i {
  color: #fff;
}
.dashboard__aside--light .aside-button img {
  filter: brightness(0);
}
.dashboard__aside--primary {
  background: #5840B0;
}
.dashboard__content {
  background-color: #FDFCFF;
  padding: 30px 30px 30px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
@media only screen and (max-width: 1024px) {
  .dashboard__content {
    padding: 30px 20px 45px;
  }
}
.dashboard__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
}
.dashboard__header .nav {
  width: 100%;
  margin-top: 0;
}
.dashboard__header--has-nav .dashboard__header__left {
  margin-bottom: -40px;
}
@media only screen and (max-width: 768px) {
  .dashboard__header--has-nav .dashboard__header__left {
    margin-bottom: 0;
  }
}
.dashboard__header .heading {
  position: relative;
  display: inline-block;
  font-size: 28px;
  line-height: 1;
}
.dashboard__header .heading .count {
  position: absolute;
  right: -40px;
  top: 0;
  font-size: 15px;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .dashboard__header .heading .count {
    position: inherit;
    right: inherit;
    top: inherit;
    display: inline-block;
    padding-top: 5px;
    height: 20px;
    width: 20px;
    font-size: 10px;
  }
}
.dashboard__header p {
  margin: 10px 0;
}
.dashboard--text .dashboard__aside {
  padding-top: 10px;
}
.small-heading {
  margin: 25px 0;
  font-size: 18px;
}
.aside-avatar {
  position: relative;
  text-align: center;
}
.aside-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 40px;
}
.aside-avatar__edit {
  right: calc(50% - 65px);
  top: -12px;
  border: none;
  padding: 10px;
  position: absolute;
}
.aside-avatar__edit img {
  width: 16px;
  height: 16px;
}
.aside-name {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  color: #fff;
}
.current-package {
  background: #423F54;
  border-radius: 4px;
  color: #938FA7;
  padding: 2px 13px;
  font-size: 13px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 5px auto;
}
.current-package strong {
  color: #fff;
}
.aside-title {
  margin: 10px 0;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #7D7892;
  opacity: 0.77;
}
.transfer {
  position: relative;
  background: rgba(125, 120, 146, 0.33);
  border-radius: 10px;
  height: 6px;
}
.transfer span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 10px;
}
.transfer-summary {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(125, 120, 146, 0.33);
}
.transfer-summary strong {
  color: #fff;
  font-weight: 400;
}
.aside-search {
  margin: 20px 0;
  position: relative;
}
.aside-search input {
  font-family: "Poppins", sans-serif;
  padding: 15px;
  background: #FFFFFF;
  display: block;
  width: 100%;
  border: 1px solid #E3E3EA;
  border-radius: 100px;
}
.aside-search button {
  border: none;
  padding: 5px;
  position: absolute;
  right: 15px;
  top: 10px;
}
.aside-menu__item {
  font-size: 14px;
  padding: 10px 22px;
  display: grid;
  grid-template-columns: 20px auto;
  grid-gap: 15px;
  align-items: center;
  font-weight: 500;
  transition: 0.4s;
  color: rgba(255, 255, 255, 0.77);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.aside-menu__item span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aside-menu__item i {
  font-size: 18px;
  justify-self: center;
  color: #fff;
  text-align: center;
  transition: 0.4s;
  opacity: 0.33;
}
.aside-menu__item--current {
  background: rgba(88, 64, 176, 0.33);
  color: #fff;
}
.aside-menu__item--current i {
  opacity: 1;
}
.aside-menu__item:hover {
  background: rgba(88, 64, 176, 0.33);
  color: #fff;
}
.aside-menu__item:hover i {
  color: #fff;
}
.aside-menu__item .count {
  font-size: 11px;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.aside-menu__item small {
  font-weight: 400;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.77);
}
.aside-menu__item small b {
  color: #DADADA;
}
.aside-button {
  margin: 25px auto;
  display: flex;
  align-items: center;
}
.aside-button img {
  margin-right: 10px;
}
.toggle-aside {
  margin-top: 0;
  border-radius: 10px;
  border: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  display: none;
}
@media only screen and (max-width: 1024px) {
  .toggle-aside {
    display: block;
  }
}
.message {
  padding: 25px 22px;
}
.message__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 768px) {
  .message__top {
    flex-direction: column-reverse;
  }
  .message__top > div {
    width: 100%;
  }
}
.message__top__left {
  display: grid;
  grid-template-columns: 50px auto;
  grid-gap: 14px;
  align-items: center;
}
.message__title {
  margin: 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.message__title small {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #5840B0;
}
.message__content {
  display: grid;
  grid-template-columns: auto 170px;
  grid-gap: 24px;
  align-items: end;
}
@media only screen and (max-width: 1024px) {
  .message__content {
    display: block;
  }
}
@media only screen and (max-width: 1024px) {
  .message__content .button {
    margin-top: 10px;
  }
}
.message article p {
  margin: 12px 0;
  font-size: 13px;
  line-height: 24px;
  color: #838098;
}
.message__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.message__meta i {
  font-size: 13px;
  color: #5840B0;
  opacity: 0.33;
}
.message__meta .badge {
  margin: 0;
  margin-right: 5px;
}
.message__date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 14px;
  color: #262335;
}
.message__date i {
  font-size: 13px;
  color: #5840B0;
  opacity: 0.33;
}
.message__date span {
  color: #938FA7;
}
.message__date strong {
  color: #5840B0;
}
.avatar {
  display: flex;
  align-items: center;
}
.avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.chat-info {
  margin: 15px 0;
  text-align: center;
  color: #A0A0A0;
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;
}
.chat-spacer {
  margin: 5px 0 15px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: rgba(38, 35, 53, 0.66);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-spacer::before, .chat-spacer::after {
  content: "";
  flex: auto;
  height: 2px;
  border-bottom: 2px dashed rgba(88, 64, 176, 0.2);
}
.chat-spacer::before {
  margin-right: 10px;
}
.chat-spacer::after {
  margin-left: 10px;
}
.chat-message {
  margin: 20px 0;
  display: grid;
  grid-template-columns: 86px auto;
}
@media only screen and (max-width: 768px) {
  .chat-message {
    grid-template-columns: 66px auto;
  }
}
.chat-message__author {
  font-weight: 600;
  font-size: 14px;
}
.chat-message__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.chat-message__bubble {
  max-width: calc(100% - 86px);
  padding: 0 20px;
  margin: 2px 0;
  background: rgba(88, 64, 176, 0.05);
  border-radius: 20px;
  border-top-left-radius: 0;
}
@media only screen and (max-width: 768px) {
  .chat-message__bubble {
    max-width: 100%;
  }
}
.chat-message__bubble p {
  margin: 10px 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 28px;
  color: rgba(38, 35, 53, 0.77);
  opacity: 0.77;
}
.chat-message__bubble--success {
  padding: 0;
}
.chat-message__bubble--success .chat-message__bubble__header {
  background-color: #D8F9E6;
  color: #181818;
  font-weight: bold;
  font-size: 13px;
  padding: 12px 20px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.chat-message__bubble--success .chat-message__bubble__header i {
  font-size: 18px;
  opacity: 0.66;
  margin-right: 5px;
}
.chat-message__bubble--success .chat-message__bubble__inner {
  background-color: #fff;
  border: 1px solid #D8F9E6;
  padding: 20px 20px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.chat-message__bubble--success .chat-message__bubble__inner .button {
  padding: 8px 15px;
  height: inherit;
}
.chat-message__bubble--sended {
  position: relative;
}
.chat-message__bubble--sended::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  position: absolute;
  right: -25px;
  top: 15px;
  color: #25C2CC;
}
@media only screen and (max-width: 768px) {
  .chat-message__bubble--sended::after {
    display: none;
  }
}
.chat-message__date {
  padding: 10px 20px;
  font-weight: 400;
  font-size: 11px;
  color: rgba(147, 143, 167, 0.77);
}
.chat-message--out {
  grid-template-columns: auto 86px;
}
@media only screen and (max-width: 768px) {
  .chat-message--out {
    grid-template-columns: auto 66px;
  }
}
.chat-message--out .chat-message__inner {
  order: 1;
  align-items: flex-end;
}
.chat-message--out .chat-message__author {
  order: 2;
  justify-self: end;
  text-align: right;
}
.chat-message--out .chat-message__bubble {
  border-radius: 20px;
  border-top-right-radius: 0;
  background: rgba(111, 207, 151, 0.1);
}
.chat-message .file {
  margin: 15px 0;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #5840B0;
}
.chat-message .file b {
  margin-right: 5px;
}
.chat-message .file i {
  margin-right: 10px;
  color: rgba(66, 66, 91, 0.66);
  font-size: 18px;
}
.answer-form__message {
  display: grid;
  grid-template-columns: 50px auto;
  grid-gap: 20px;
  align-items: center;
}
.answer-form__bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.answer-form .file-input {
  margin-right: 18px;
}
.dashboard .packages__grid {
  grid-gap: 20px;
  margin-bottom: 45px;
}
.dashboard .packages__grid__item {
  padding: 25px 10px 40px;
}
.dashboard .packages__grid__item__title {
  font-weight: 600;
  font-size: 20px;
}
.rotate {
  animation: rotation 1s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.heading-min {
  margin-bottom: -15px !important;
}
.no--shadow {
  box-shadow: none !important;
  border: 1px solid #EDE9F8 !important;
}

.upload-avatar {
        
border: 2px dashed #E3E3EA;
border-radius: 15px;
padding: 20px;
font-size: 12px;
margin-top: 15px;
margin-bottom: 15px;
}

.upload-avatar span {
position: relative;
display: inline-block;
overflow: hidden;
cursor: default;
}

.upload-avatar input {
width: 310px !important;
right: 0px !important;
}

.upload-avatar-button {
        
position: absolute !important;
left: 50px;
top: 85px;
width: 320px !important;
cursor: pointer;
opacity: 0;
}

.faq h6 {
margin: 20px 0;
}

.faq p {
text-align: justify;
}

.star-fb {
font-size: 24px;
margin-bottom: 5px;
cursor: pointer;
margin-left: 2px;
margin-right: 2px;
}

.star-active, .star-active2 {
color: orange; 
}

.star-active {
        font-size: 24px;
}

.star-active2 {
color: orange; 
font-size: 16px !important;
margin-left: 0px !important;
margin-right: 4px !important;
}

.feedback-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
}

.feedback {
width: 100%;
border: 1px solid #E3E3EA;
padding: 20px;
border-radius: 5px;
font-size: 13px;
line-height: 18px;
}

.stars {
margin-top: 10px;
}

.feedback-user {
display: flex;
width: 100%;
border-top: 1px solid #E3E3EA;
margin-top: 10px;
padding-top: 10px;
opacity: 0.7;
}