@charset "UTF-8";
/* ==========================================================================
1. Main colors
========================================================================== */
/* ==========================================================================
2. State colors
========================================================================== */
/* ==========================================================================
3. Social colors
========================================================================== */
/* ==========================================================================
4. Box shadows
========================================================================== */
/* ==========================================================================
0. Pageloader
========================================================================== */
.pageloader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fafafa;
  z-index: 999998;
  opacity: 0;
  transition: -webkit-opacity 0.35s ease-out;
  transition: opacity 0.35s ease-out;
  will-change: opacity;
  pointer-events: none;
}
.pageloader.is-active {
  opacity: 1;
}
.pageloader::after, .pageloader::before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border-radius: 100%;
  content: "";
  z-index: 999999;
}
.pageloader::after {
  margin-top: -100px;
  margin-left: -100px;
  width: 200px;
  height: 200px;
  background-color: rgba(110, 91, 219, 0.5);
  border: 3px solid rgba(110, 91, 219, 0.75);
  animation: page-loader-inner 1.5s infinite ease-out;
}
.pageloader::before {
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background-color: #6e5bdb;
  animation: page-loader-outer 1.5s infinite ease-in;
}

/* ==========================================================================
1. Keyframes
========================================================================== */
@keyframes page-loader-inner {
  0%, 40% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes page-loader-outer {
  0% {
    transform: scale(1);
  }
  100%, 40% {
    transform: scale(0);
    opacity: 0;
  }
}
/* ==========================================================================
2. Infraloader
========================================================================== */
.infraloader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s;
}
.infraloader.is-active {
  opacity: 1;
  z-index: 999997;
}
.infraloader.is-full {
  width: 100% !important;
  left: 0 !important;
}

@media (max-width: 767px) {
  .pageloader, .infraloader {
    width: 100% !important;
    left: 0 !important;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .pageloader, .infraloader {
    width: 100% !important;
    left: 0 !important;
  }
}
body {
  background: #EDF1F5;
  height: 100%;
  width: 100%;
  min-height: 100vh;
  font-family: Roboto, sans-serif;
  color: #344258;
  overflow-x: hidden;
}
body.is-frozen {
  overflow: hidden !important;
  position: fixed;
  top: 0;
  left: 0;
}
body.is-white {
  background: #fff !important;
}

/* ==========================================================================
2. Global Overlay
========================================================================== */
.app-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
  opacity: 0;
}
.app-overlay.is-active {
  opacity: 1 !important;
  z-index: 1000 !important;
}

/* ==========================================================================
3. Container
========================================================================== */
.container.is-fluid {
  margin: 0 !important;
}

/* ==========================================================================
4. View Wrappers
========================================================================== */
.view-wrapper {
  padding: 60px 12px;
  transition: all 0.3s;
}
.view-wrapper.is-side {
  width: calc(100% - 70px);
  margin-left: 70px;
}
.view-wrapper.is-full {
  padding: 60px 0 0 0;
}
.view-wrapper .view-wrap {
  padding: 20px 0;
}
.view-wrapper .view-wrap.is-headless {
  padding-top: 10px;
}

.inbox-wrapper {
  position: absolute;
  top: 58px;
  left: 0;
  width: 100%;
  height: calc(100% - 58px);
}

#profile {
  padding: 80px 0;
}

.main-container {
  width: 100%;
  transition: all 0.3s;
}
.main-container.has-sidebar {
  width: calc(100% - 300px);
  margin-left: 300px;
}

/* ==========================================================================
5. Columns
========================================================================== */
.columns.no-mb {
  margin-bottom: 0 !important;
}

.column.is-paddingless {
  padding: 0;
}
.column.no-padding-left {
  padding-left: 0;
}
.column.no-padding-right {
  padding-right: 0;
}

.card-row {
  display: flex;
  flex-wrap: wrap;
}
.card-row .card-flex {
  width: calc(25% - 16px);
  margin: 8px;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 6px;
}

/* ==========================================================================
6. Footer
========================================================================== */
.footer {
  background: #fafafa;
  padding-bottom: 6rem !important;
  padding-top: 6rem !important;
}
.footer .social-links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.footer .social-links a {
  color: #999;
  margin: 0 5px;
}
.footer .social-links a:hover {
  color: #6e5bdb;
}
.footer .footer-description {
  color: #999;
}
.footer .footer-column {
  padding-top: 20px;
}
.footer .footer-column .column-header {
  font-family: Montserrat, sans-serif;
  text-transform: uppercase;
  color: #6e5bdb;
  font-size: 1rem;
  font-weight: 700;
  margin: 10px 0;
}
.footer .footer-column .column-item {
  padding-bottom: 10px;
}
.footer .footer-column .column-item a {
  color: #999;
}
.footer .footer-column .column-item a:hover {
  color: #6e5bdb;
}
.footer .moto {
  display: block;
  color: #999;
  margin-top: 12px;
  font-size: 0.9rem;
}
.footer .moto svg {
  display: inline-block;
  height: 14px;
  width: 14px;
  stroke: #ff7273;
  fill: #ff7273;
}
.footer .small-footer-logo {
  height: 55px;
}

/* ==========================================================================
7. Copyright
========================================================================== */
.copyright .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.copyright .inner .left {
  font-size: 0.9rem;
  color: #999;
}
.copyright .inner .right img {
  display: block;
  width: 108px;
  margin-left: 20px;
}

/* ==========================================================================
8. Media Queries
========================================================================== */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .footer {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .footer .columns .column.is-4 {
    text-align: center;
  }
  .footer .columns .column.is-4 > div {
    max-width: 430px;
    margin: 20px auto;
  }
  .footer .columns .column.is-4 .moto {
    margin: 0;
  }
  .footer .columns .column.is-offset-2 .columns {
    display: flex;
    text-align: center;
  }
  .footer .columns .column.is-offset-2 .columns .footer-column {
    padding: 0;
  }
  .copyright .inner {
    justify-content: center;
  }
}
/* ==========================================================================
0. Main Navbar
========================================================================== */
.navbar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 19;
  height: 58px;
  width: 100%;
  background: #fcfefe;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid #e8e8e8;
  transition: all 0.3s;
}
.navbar.no-shadow {
  box-shadow: none !important;
}
.navbar.no-background {
  background: transparent !important;
  border-bottom-color: transparent !important;
}
.navbar.is-side {
  width: calc(100% - 70px);
  margin-left: 70px;
}
.navbar .navbar-brand {
  height: 58px;
  margin-left: 0 !important;
  margin-right: 20px;
}
.navbar .navbar-brand.is-fluid {
  margin-right: 0;
  margin-left: 10px !important;
}
.navbar .navbar-brand.is-title {
  display: flex;
  align-items: center;
}
.navbar .navbar-brand.is-title h2 {
  margin-left: 20px;
  color: #393a4f;
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
}
.navbar .navbar-brand .navbar-item {
  width: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 58px;
  min-width: 58px;
}
.navbar .navbar-brand .navbar-item img {
  max-height: 52px;
}
.navbar .navbar-brand .navbar-item:hover {
  background: #6e5bdb !important;
}
@media (max-width: 768px) {
  .navbar .navbar-brand .navbar-item {
    width: auto !important;
  }
}
.navbar .navbar-menu {
  margin-right: 0 !important;
}
.navbar .navbar-item {
  position: relative;
}
.navbar .navbar-item.is-icon {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.navbar .navbar-item.is-icon .icon-link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  transition: all 0.3s;
}
.navbar .navbar-item.is-icon .icon-link:hover, .navbar .navbar-item.is-icon .icon-link.is-active {
  background: #8070e0;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.navbar .navbar-item.is-icon .icon-link:hover svg, .navbar .navbar-item.is-icon .icon-link.is-active svg {
  stroke: #fafafa;
}
.navbar .navbar-item.is-icon .icon-link:hover .mdi, .navbar .navbar-item.is-icon .icon-link.is-active .mdi {
  color: #fafafa;
}
.navbar .navbar-item.is-icon .icon-link.is-primary:hover, .navbar .navbar-item.is-icon .icon-link.is-primary.is-active {
  background: #6e5bdb;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.navbar .navbar-item.is-icon .icon-link.is-primary:hover svg, .navbar .navbar-item.is-icon .icon-link.is-primary.is-active svg {
  stroke: #fff;
}
.navbar .navbar-item.is-icon .icon-link.is-primary:hover .mdi, .navbar .navbar-item.is-icon .icon-link.is-primary.is-active .mdi {
  color: #fafafa;
}
.navbar .navbar-item.is-icon .icon-link.is-primary.is-friends:hover svg, .navbar .navbar-item.is-icon .icon-link.is-primary.is-friends.is-active svg {
  fill: #fff;
}
.navbar .navbar-item.is-icon .icon-link.is-active .indicator {
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #6e5bdb;
}
.navbar .navbar-item.is-icon .icon-link svg {
  width: 18px;
  height: 18px;
  stroke: #999;
  transition: all 0.3s;
}
.navbar .navbar-item.is-icon .icon-link .mdi {
  font-size: 20px;
  color: #999;
  transition: all 0.3s;
}
.navbar .navbar-item.is-account {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}
.navbar .navbar-item.is-account .user-image {
  position: relative;
  max-height: 38px;
}
.navbar .navbar-item.is-account .user-image .indicator {
  display: block;
  position: absolute;
  top: 2px;
  right: -4px;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #1ce589;
}
.navbar .navbar-item.is-account img {
  height: 38px;
  width: 38px;
  max-height: 38px;
  border-radius: 50%;
}
.navbar .navbar-item.is-account.is-busy .indicator {
  background: #ff533d;
}
.navbar .navbar-item.is-account.is-opened .account-caret svg {
  transform: rotate(180deg);
}
.navbar .navbar-item .action-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 50%;
  padding: 0;
  display: none;
}
.navbar .navbar-item .action-button svg {
  height: 16px;
  width: 16px;
}
.navbar .navbar-item .nav-drop {
  position: absolute;
  top: 90%;
  left: 0;
  width: 340px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin-top: 5px;
  box-shadow: 0px 5px 43px rgba(0, 0, 0, 0.18) !important;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.2s;
  z-index: 100;
}
.navbar .navbar-item .nav-drop.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.navbar .navbar-item .nav-drop:after, .navbar .navbar-item .nav-drop:before {
  bottom: 100%;
  left: 7%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.navbar .navbar-item .nav-drop:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 4px;
  margin-left: -4px;
}
.navbar .navbar-item .nav-drop:before {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 7px;
  margin-left: -7px;
}
.navbar .navbar-item .nav-drop.is-status {
  left: calc(50% - 100px);
  width: 200px;
}
.navbar .navbar-item .nav-drop.is-status .inner .drop-image img {
  display: block;
  width: 170px;
  height: 170px;
  min-height: 170px;
  margin: 0 auto;
}
.navbar .navbar-item .nav-drop.is-status .inner .drop-text {
  padding: 0 10px 20px 10px;
  text-align: center;
}
.navbar .navbar-item .nav-drop.is-status .inner .drop-text h4 {
  font-size: 0.9rem;
  font-weight: 500;
}
.navbar .navbar-item .nav-drop.is-status .inner .drop-text p {
  font-size: 0.8rem;
  color: #999;
}
.navbar .navbar-item .nav-drop.is-right-arrow {
  right: 0 !important;
  left: unset !important;
}
.navbar .navbar-item .nav-drop.is-right-arrow:after {
  display: none !important;
}
.navbar .navbar-item .nav-drop.is-right-arrow:before {
  right: 16px !important;
  left: unset !important;
}
.navbar .navbar-item .nav-drop.is-account-dropdown {
  width: 300px;
  right: 0 !important;
  left: unset !important;
  max-height: unset !important;
}
.navbar .navbar-item .nav-drop.is-account-dropdown:before {
  right: 23px !important;
  left: unset !important;
}
.navbar .navbar-item .nav-drop.is-account-dropdown:after {
  display: none !important;
}
.navbar .navbar-item .nav-drop .inner {
  position: relative;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 4px 4px 0 0;
  background: #fff;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-header span, .navbar .navbar-item .nav-drop .inner .nav-drop-header a {
  display: block;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 500;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-header span.username, .navbar .navbar-item .nav-drop .inner .nav-drop-header a.username {
  font-weight: 600 !important;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-header a {
  height: unset;
  width: unset;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body {
  max-height: 420px;
  padding: 0 10px;
  overflow-y: auto;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body::-webkit-scrollbar {
  width: 5px;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages {
  padding: 8px 16px;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .media, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .media, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .media {
  align-items: stretch;
  margin: 0;
  padding: 0.75rem 0 !important;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .media img, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .media img, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .media img {
  height: 36px;
  width: 36px;
  max-height: 36px;
  border-radius: 50%;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .media .media-content span, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .media .media-content a, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .media .media-content span, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .media .media-content a, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .media .media-content span, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .media .media-content a {
  display: block;
  width: unset;
  height: unset;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .media .media-content a, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .media .media-content a, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .media .media-content a {
  font-size: 0.75rem;
  font-weight: 500;
  color: #344258;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .media .media-content a:hover, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .media .media-content a:hover, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .media .media-content a:hover {
  color: #6e5bdb;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .media .media-content span, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .media .media-content span, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .media .media-content span {
  font-size: 0.75rem;
  color: #999;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .media .media-content span a, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .media .media-content span a, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .media .media-content span a {
  color: #344258;
  display: inline-block;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .media .added-icon, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .media .added-icon, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .media .added-icon {
  width: 20px;
  height: 20px;
  margin: 0 15px;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .media .added-icon svg, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .media .added-icon svg, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .media .added-icon svg {
  height: 20px;
  width: 20px;
  stroke: #cecece;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .media .media-right.is-centered, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .media .media-right.is-centered, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .media .media-right.is-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.is-friend-requests .time, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-notifications .time, .navbar .navbar-item .nav-drop .inner .nav-drop-body.is-messages .time {
  font-size: 0.7rem;
  color: #999;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items {
  padding: 10px 0;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items hr {
  margin: 0.4rem 0 !important;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items .account-item {
  padding: 8px 16px;
  display: block;
  line-height: 1.2;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items .account-item .media {
  align-items: center;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items .account-item .media .media-left img {
  height: 35px;
  width: 35px;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items .account-item .media h3 {
  color: #393a4f;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.3s;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items .account-item .media .icon-wrap {
  height: 35px;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items .account-item .media .icon-wrap svg {
  width: 18px;
  height: 18px;
  stroke-width: 2px;
  stroke: #757a91;
  transition: all 0.3s;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items .account-item .media small {
  color: #757a91;
  font-size: 0.75rem;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items .account-item .media .media-right svg {
  width: 18px;
  height: 18px;
  margin: 0 16px;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items .account-item.is-active {
  background: #039be5;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items .account-item.is-active svg {
  stroke: #fff;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-body.account-items .account-item.is-active small {
  color: #fff;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 0 0 6px 6px;
  background: #fafafa;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-footer span, .navbar .navbar-item .nav-drop .inner .nav-drop-footer a {
  display: block;
  text-transform: uppercase;
  font-size: 0.65rem;
  font-weight: 500;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-footer a {
  color: #999;
  height: unset;
  width: unset;
}
.navbar .navbar-item .nav-drop .inner .nav-drop-footer a:hover {
  color: #6e5bdb;
}
.navbar .control {
  position: relative;
}
.navbar .control .input {
  position: relative;
  height: 38px;
  width: 400px;
  padding-right: 85px;
  padding-left: 38px;
  padding-bottom: 8px;
  background: #f4f6f9;
  border-color: #f4f6f9;
  transition: all 0.4s;
  z-index: 1;
}
.navbar .control .input:focus {
  background: #fff;
  border-color: #e3e3e3;
}
.navbar .control .input:not(:valid) ~ .reset-search {
  opacity: 0;
  pointer-events: none;
}
.navbar .control .input:focus ~ .search-icon svg {
  stroke: #999 !important;
}
.navbar .control .reset-search {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  width: 38px;
  opacity: 1;
  pointer-events: all;
  transition: all 0.3s;
  z-index: 1;
  cursor: pointer;
}
.navbar .control .reset-search svg {
  height: 18px;
  width: 18px;
  stroke: #999;
}
.navbar .control .search-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  width: 38px;
  z-index: 1;
}
.navbar .control .search-icon svg {
  height: 20px;
  width: 20px;
  stroke: #cecece;
  transition: all 0.3s;
}
.navbar .control .drop-icon {
  position: absolute;
  top: 0;
  right: -40px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  width: 38px;
  z-index: 1;
  cursor: pointer;
  transition: all 0.3s;
}
.navbar .control .drop-icon:hover svg {
  stroke: #999 !important;
}
.navbar .control .drop-icon svg {
  height: 20px;
  width: 20px;
  stroke: #cecece !important;
  transform: rotate(0);
  transition: all 0.3s;
}
.navbar .control .search-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 10px 0;
  margin-top: 12px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  box-shadow: 0 3px 10px 4px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.3s;
}
.navbar .control .search-options:after, .navbar .control .search-options:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.navbar .control .search-options:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 4px;
  margin-left: -4px;
}
.navbar .control .search-options:before {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}
.navbar .control .search-options .options-list li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 20px;
  transition: all 0.3s;
  cursor: pointer;
}
.navbar .control .search-options .options-list li svg {
  width: 18px;
  height: 18px;
  stroke: #cecece;
  stroke-width: 1px;
}
.navbar .control .search-options .options-list li.is-selected svg {
  stroke: #6e5bdb;
}
.navbar .control .search-options .options-list li.is-selected .option-description span:first-child {
  color: #6e5bdb;
}
.navbar .control .search-options .options-list li .option-description {
  display: block;
  margin: 0 15px;
}
.navbar .control .search-options .options-list li .option-description span {
  display: block;
}
.navbar .control .search-options .options-list li .option-description span:first-child {
  font-size: 0.9rem;
  font-weight: 500;
  color: #344258;
}
.navbar .control .search-options .options-list li .option-description span:nth-child(2) {
  font-size: 0.8rem;
  color: #999;
}
.navbar .control .search-options .options-list li:hover {
  background: #fafafa;
}
.navbar .control .search-options.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.navbar .control .search-options .is-close {
  margin: 16px 20px 6px 20px;
}
.navbar .control .search-options .is-close button {
  line-height: 0;
  width: 100%;
}

/* ==========================================================================
1. Mobile Navbar
========================================================================== */
.mobile-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
  transition: all 0.3s;
  border-bottom: solid 1px #dedede;
}
.mobile-navbar.is-active {
  transform: translateY(0);
}
.mobile-navbar .navbar-brand {
  margin-right: 0;
  display: flex;
}
.mobile-navbar .navbar-brand .logo {
  flex: 1;
  display: flex;
  justify-content: left;
  padding-left: 20px;
  background: transparent;
}
.mobile-navbar .navbar-brand .logo img {
  height: 40px;
  max-height: 40px;
}
.mobile-navbar .navbar-brand .dev-note {
  border-left: solid 1px #dedede;
}
.mobile-navbar .navbar-brand .navbar-item:hover {
  background: transparent !important;
}
.mobile-navbar .navbar-link {
  padding-right: 12px !important;
}
.mobile-navbar .navbar-item {
  min-width: unset !important;
  border-bottom: 0;
}
.mobile-navbar .navbar-item:hover {
  background: transparent !important;
}
.mobile-navbar .navbar-item.has-dropdown .navbar-link:after {
  border-color: #ddd;
}
.mobile-navbar .navbar-item.is-mobile-icon span:not(.menu-badge) {
  display: flex;
  align-items: center;
}
.mobile-navbar .navbar-item.is-mobile-icon span:not(.menu-badge) svg {
  height: 18px;
  width: 18px;
  stroke: #cecece;
  margin-right: 8px;
}
.mobile-navbar .navbar-burger {
  height: 58px;
  width: 58px;
  border-left: solid 1px #dedede;
}
.mobile-navbar .navbar-burger:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.mobile-navbar .navbar-burger span {
  background-color: #999;
}
.mobile-navbar .navbar-menu {
  background: #fafafa;
  width: 100%;
  border-top: solid 1px #dedede;
}
.mobile-navbar .navbar-menu .button {
  padding: 0;
  height: 36px;
  width: 100px;
}
.mobile-navbar .navbar-menu .navbar-link {
  color: #393a4f;
  font-weight: 600;
}
.mobile-navbar .navbar-menu .navbar-item {
  color: #999;
}
.mobile-navbar .navbar-menu .navbar-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.mobile-navbar .navbar-menu .navbar-link img {
  height: 32px;
  width: 32px;
  max-height: 32px !important;
  border-radius: 50%;
}
.mobile-navbar .navbar-menu .navbar-link svg {
  height: 20px;
  width: 20px;
  stroke-width: 1.2px;
  stroke: #6e5bdb;
}
.mobile-navbar .navbar-menu .navbar-link span {
  margin: 0 10px;
}
.mobile-navbar .navbar-menu .navbar-link span.is-heading {
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 400;
  text-transform: uppercase;
}
.mobile-navbar .navbar-menu .navbar-dropdown .menu-badge {
  margin-left: auto;
  height: 22px;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 3px 6px;
  line-height: 1.3;
  min-width: 22px;
  text-align: center;
  border-radius: 100px;
  background: #f0f0f0;
  color: #393a4f;
}
.mobile-navbar .navbar-menu .navbar-dropdown .button {
  height: 40px;
  display: block;
  width: calc(100% - 32px);
  font-size: 0.95rem;
  line-height: 2.3;
  margin: 8px 16px;
}
.mobile-navbar .navbar-menu .navbar-dropdown .navbar-item {
  font-size: 0.9rem;
  padding: 0.75rem 1.5rem !important;
}
.mobile-navbar .navbar-menu .navbar-dropdown .navbar-item.is-atcive, .mobile-navbar .navbar-menu .navbar-dropdown .navbar-item:hover {
  background: #475a78;
}

/* ==========================================================================
2. Options nav
========================================================================== */
.options-nav {
  position: fixed;
  top: 58px;
  left: 0;
  width: 100%;
  height: 50px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
  z-index: 5;
  transition: all 0.3s;
}
.options-nav.no-shadow {
  box-shadow: none;
}
.options-nav .nav-inner {
  display: flex;
}
.options-nav .nav-inner.is-friends .option-tabs, .options-nav .nav-inner.is-events .option-tabs {
  position: relative;
  display: flex;
  width: 210px;
}
.options-nav .nav-inner.is-friends .option-tabs .option-tab, .options-nav .nav-inner.is-events .option-tabs .option-tab {
  height: 50px;
  width: 33.3%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.options-nav .nav-inner.is-friends .option-tabs .option-tab.is-active span, .options-nav .nav-inner.is-events .option-tabs .option-tab.is-active span {
  font-weight: 500;
  color: #393a4f;
}
.options-nav .nav-inner.is-friends .option-tabs .option-tab.is-active:first-child ~ .option-naver, .options-nav .nav-inner.is-events .option-tabs .option-tab.is-active:first-child ~ .option-naver {
  margin-left: 0;
}
.options-nav .nav-inner.is-friends .option-tabs .option-tab.is-active:nth-child(2) ~ .option-naver, .options-nav .nav-inner.is-events .option-tabs .option-tab.is-active:nth-child(2) ~ .option-naver {
  margin-left: 33.3%;
}
.options-nav .nav-inner.is-friends .option-tabs .option-tab.is-active:nth-child(3) ~ .option-naver, .options-nav .nav-inner.is-events .option-tabs .option-tab.is-active:nth-child(3) ~ .option-naver {
  margin-left: 66.6%;
}
.options-nav .nav-inner.is-friends .option-tabs .option-tab span, .options-nav .nav-inner.is-events .option-tabs .option-tab span {
  display: block;
  color: #cecece;
  font-family: Roboto, sans-serif;
  font-size: 0.9rem;
}
.options-nav .nav-inner.is-friends .option-tabs .option-naver, .options-nav .nav-inner.is-events .option-tabs .option-naver {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2.6px;
  width: 33.3%;
  border-radius: 4px;
  background: #393a4f;
  transition: all 0.3s;
}
.options-nav .nav-inner.is-friends .end-group, .options-nav .nav-inner.is-events .end-group {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}
.options-nav .nav-inner.is-friends .end-group .is-icon, .options-nav .nav-inner.is-events .end-group .is-icon {
  border-left: 1px solid #e0e0e0;
}
.options-nav .nav-inner.is-friends .end-group .is-icon svg, .options-nav .nav-inner.is-events .end-group .is-icon svg {
  stroke: #999;
}
.options-nav .nav-inner.is-friends .end-group .is-friend-count, .options-nav .nav-inner.is-events .end-group .is-friend-count {
  padding: 0 20px;
  color: #999;
  font-family: Roboto, sans-serif;
  font-size: 0.95rem;
}
.options-nav .nav-inner .nav-item {
  height: 50px;
  display: flex;
  align-items: center;
}
.options-nav .nav-inner .nav-item.is-page-title {
  padding: 0 20px;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
}
.options-nav .nav-inner .nav-item.is-page-title h2 {
  font-family: Montserrat, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  color: #393a4f;
}
.options-nav .nav-inner .nav-item.is-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
}
.options-nav .nav-inner .nav-item.is-icon svg {
  height: 18px;
  width: 18px;
  stroke: #999;
}
.options-nav .nav-inner .nav-item.is-search {
  border-left: 1px solid #e0e0e0;
  width: 280px;
}
.options-nav .nav-inner .nav-item.is-search .control {
  padding: 0 16px;
  width: 100%;
}
.options-nav .nav-inner .nav-item.is-search .control input {
  border: none;
}

/* ==========================================================================
3. Explorer Menu
========================================================================== */
.explorer-menu {
  position: fixed;
  top: 58px;
  left: 0;
  width: 100%;
  height: calc(100% - 58px);
  background: #fff;
  opacity: 0;
  z-index: -1;
  transform: translateY(60px);
  transition: opacity 0.4s, transform 0.4s;
}
.explorer-menu.is-active {
  transform: translateY(0);
  opacity: 1;
  z-index: 11;
}
.explorer-menu .explorer-inner {
  position: relative;
  height: 100%;
  width: 100%;
}
.explorer-menu .explorer-inner .explorer-container {
  max-width: 840px;
  margin: 0 auto;
}
.explorer-menu .explorer-inner .explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.explorer-menu .explorer-inner .explorer-header h3 {
  font-family: Montserrat, sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  color: #393a4f;
}
.explorer-menu .explorer-inner .explorer-header .control {
  position: relative;
}
.explorer-menu .explorer-inner .explorer-header .control input {
  padding-right: 40px;
}
.explorer-menu .explorer-inner .explorer-header .control input:focus + .form-icon svg {
  stroke: #6e5bdb;
}
.explorer-menu .explorer-inner .explorer-header .control .form-icon {
  position: absolute;
  top: 0;
  right: 4px;
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.explorer-menu .explorer-inner .explorer-header .control .form-icon svg {
  height: 16px;
  width: 16px;
  stroke: #cecece;
  transition: stroke 0.3s;
}
.explorer-menu .explorer-inner .explore-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.explorer-menu .explorer-inner .explore-list .explore-item {
  text-align: center;
  width: calc(20% - 16px);
  margin: 8px;
  padding: 20px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
}
.explorer-menu .explorer-inner .explore-list .explore-item:hover {
  border-color: #e8e8e8;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.explorer-menu .explorer-inner .explore-list .explore-item:hover img {
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.explorer-menu .explorer-inner .explore-list .explore-item.is-coming-soon img {
  filter: grayscale(0.9);
}
.explorer-menu .explorer-inner .explore-list .explore-item img {
  display: block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin: 0 auto;
  transition: all 0.3s;
}
.explorer-menu .explorer-inner .explore-list .explore-item h4 {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #393a4f;
  margin-top: 6px;
}
.explorer-menu .explorer-inner .explore-list .explore-item .coming-soon {
  display: flex;
  justify-content: center;
  align-items: center;
  background: whitesmoke;
  color: #393a4f;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  max-width: 96px;
  padding: 4px 8px;
  border-radius: 100px;
  margin: 0 auto;
  position: relative;
  top: 3px;
}

/* ==========================================================================
0. Filters panel
========================================================================== */
.filters-panel {
  position: fixed;
  top: 107px;
  left: 0;
  height: calc(100% - 107px);
  width: 300px;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  transform: translateX(-100%);
  transition: all 0.3s;
  z-index: 2;
}
.filters-panel.is-active {
  transform: translateX(0);
}
.filters-panel .panel-inner {
  position: relative;
  width: 100%;
}
.filters-panel .panel-inner .panel-title {
  font-family: Montserrat, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #999;
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
}
.filters-panel .panel-inner .filter-block {
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
}
.filters-panel .panel-inner .filter-block label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #393a4f;
}
.filters-panel .panel-inner .filter-block .age-wrap {
  display: flex;
  align-items: center;
}
.filters-panel .panel-inner .filter-block .age-wrap .separator {
  text-align: center;
  padding: 0 8px;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #999;
}
.filters-panel .panel-inner .filter-block .age-wrap .field {
  margin-bottom: 0;
  max-width: 60px;
}
.filters-panel .panel-inner .filter-block .age-wrap .field .control input {
  height: 30px;
  text-align: center;
}
.filters-panel .panel-inner .filter-block .age-wrap .field .control input:focus {
  border-color: #757a91;
}

/* ==========================================================================
0. Base styles
========================================================================== */
.placeload {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  background: #fff;
}
.placeload.is-bold {
  border: none;
  background: none;
}
.placeload .inner-wrap {
  width: 100%;
}
.placeload .content-shape {
  height: 10px;
  margin-bottom: 10px;
  border-radius: 2px;
}
.placeload .content-shape.is-lg {
  height: 16px;
}
.placeload .button-shape {
  width: 130px;
  height: 38px;
  border-radius: 4px;
}

.loads {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeload;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: #eeeeee;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 1200px 104px;
  position: relative;
}
@keyframes placeload {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
/* ==========================================================================
1. Compose placeholder
========================================================================== */
.compose-placeload {
  height: 226px;
  margin-bottom: 20px;
  padding: 20px;
}
.compose-placeload .header {
  display: flex;
  align-items: center;
  height: 45px;
  margin-bottom: 1rem;
}
.compose-placeload .header .content-shape {
  width: 20%;
  margin-right: 8%;
}
.compose-placeload .body {
  display: flex;
  align-items: start;
  height: 100px;
  padding: 16px 0;
}
.compose-placeload .body .img {
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 50%;
}
.compose-placeload .body .content-shape {
  margin-top: 10px;
  margin-left: 20px;
}
.compose-placeload .body .content-shape:first-child {
  width: 45%;
}
.compose-placeload .body .content-shape:nth-child(2) {
  width: 25%;
}

/* ==========================================================================
2. Post placeholder
========================================================================== */
.post-placeload {
  background: #fff;
  width: 100%;
  padding: 0;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  position: relative;
  margin-bottom: 20px;
}
.post-placeload .header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.post-placeload .header .img {
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
}
.post-placeload .header .header-content {
  margin-left: 20px;
  width: 100%;
}
.post-placeload .header .header-content .content-shape:first-child {
  width: 60%;
}
.post-placeload .header .header-content .content-shape:nth-child(2) {
  width: 40%;
}
.post-placeload .image-placeholder {
  width: 100%;
  height: 350px;
}
.post-placeload .placeholder-footer {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 10px;
}
.post-placeload .placeholder-footer .footer-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
}
.post-placeload .placeholder-footer .footer-block .img {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
}
.post-placeload .placeholder-footer .footer-block .inner-wrap {
  margin-left: 10px;
}
.post-placeload .placeholder-footer .footer-block .inner-wrap .content-shape:first-child {
  width: 32%;
}
.post-placeload .placeholder-footer .footer-block .inner-wrap .content-shape:nth-child(2) {
  width: 24%;
}

/* ==========================================================================
3. List Placeloads
========================================================================== */
.stories-placeload, .list-placeload {
  height: 382px;
  padding: 20px;
  margin-bottom: 20px;
}
.stories-placeload .header, .list-placeload .header {
  height: 48px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.stories-placeload .header .content-shape, .list-placeload .header .content-shape {
  width: 55%;
}
.stories-placeload .body .flex-block, .list-placeload .body .flex-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 76px;
}
.stories-placeload .body .flex-block .img, .list-placeload .body .flex-block .img {
  height: 44px;
  width: 44px;
  min-width: 44px;
  border-radius: 50%;
}
.stories-placeload .body .flex-block .inner-wrap, .list-placeload .body .flex-block .inner-wrap {
  padding: 0 10px;
}
.stories-placeload .body .flex-block .inner-wrap .content-shape:first-child, .list-placeload .body .flex-block .inner-wrap .content-shape:first-child {
  width: 78%;
}
.stories-placeload .body .flex-block .inner-wrap .content-shape:nth-child(2), .list-placeload .body .flex-block .inner-wrap .content-shape:nth-child(2) {
  width: 54%;
}

/* ==========================================================================
4. Square widget Placeload
========================================================================== */
.mini-widget-placeload {
  height: 323px;
  padding: 20px;
  margin-bottom: 20px;
}
.mini-widget-placeload .body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 283px;
}
.mini-widget-placeload .body .img {
  margin-top: -20px;
  height: 50px;
  width: 50px;
  min-width: 45px;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}
.mini-widget-placeload .body .content-shape {
  margin: 0 auto 12px auto;
}
.mini-widget-placeload .body .content-shape:nth-child(2) {
  width: 38%;
}
.mini-widget-placeload .body .content-shape:nth-child(3) {
  width: 88% !important;
}
.mini-widget-placeload .body .content-shape:nth-child(4) {
  width: 64% !important;
}
.mini-widget-placeload .body .button-shape {
  margin: 24px auto 0 auto;
}

/* ==========================================================================
5. Weather widget placeload
========================================================================== */
.weather-widget-placeload {
  height: 450px;
  padding: 20px;
  margin-bottom: 20px;
}
.weather-widget-placeload .header {
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.weather-widget-placeload .header .inner-wrap .img {
  height: 60px;
  width: 60px;
  min-width: 45px;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}
.weather-widget-placeload .header .inner-wrap .content-shape {
  margin: 0 auto 12px auto;
}
.weather-widget-placeload .header .inner-wrap .content-shape:nth-child(2) {
  width: 44%;
}
.weather-widget-placeload .header .inner-wrap .content-shape:nth-child(3) {
  width: 88% !important;
}
.weather-widget-placeload .body {
  height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.weather-widget-placeload .body .inner-wrap .rect {
  height: 85px;
  width: 100%;
  min-width: 100%;
  border-radius: 4px;
  margin: 0 auto 30px auto;
}
.weather-widget-placeload .body .inner-wrap .content-shape {
  margin: 12px auto;
}
.weather-widget-placeload .body .inner-wrap .content-shape:nth-child(2) {
  width: 88%;
}
.weather-widget-placeload .body .inner-wrap .content-shape:nth-child(3) {
  width: 44%;
}

/* ==========================================================================
6. Questions menu placeload
========================================================================== */
.questions-menu-placeload {
  width: 100%;
}
.questions-menu-placeload .inner-wrap .content-shape {
  height: 22px;
  margin-bottom: 16px;
}
.questions-menu-placeload .inner-wrap .content-shape:first-child {
  max-width: 90%;
}
.questions-menu-placeload .inner-wrap .content-shape:nth-child(2) {
  max-width: 50%;
}
.questions-menu-placeload .inner-wrap .content-shape:nth-child(3) {
  max-width: 65%;
}
.questions-menu-placeload .inner-wrap .content-shape:nth-child(4) {
  max-width: 20%;
}

/* ==========================================================================
7. Questions settings placeload
========================================================================== */
.questions-settings-placeload {
  width: 100%;
}
.questions-settings-placeload.is-card {
  padding: 30px;
  margin-top: 30px;
}
.questions-settings-placeload.is-card .content-shape:nth-child(4) {
  margin-bottom: 0;
}
.questions-settings-placeload .inner-wrap .content-shape {
  height: 18px;
  margin-bottom: 16px;
}
.questions-settings-placeload .inner-wrap .content-shape:first-child {
  max-width: 30%;
}
.questions-settings-placeload .inner-wrap .content-shape:nth-child(2) {
  max-width: 60%;
}
.questions-settings-placeload .inner-wrap .content-shape:nth-child(3) {
  max-width: 75%;
}
.questions-settings-placeload .inner-wrap .content-shape:nth-child(4) {
  max-width: 30%;
}

/* ==========================================================================
8. Questions side placeload
========================================================================== */
.questions-side-placeload {
  width: 100%;
  padding: 30px;
  margin-bottom: 20px;
}
.questions-side-placeload:last-child {
  margin-bottom: 0;
}
.questions-side-placeload .inner-wrap .img {
  height: 60px;
  width: 60px;
  min-width: 45px;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}
.questions-side-placeload .inner-wrap .content-shape {
  height: 14px;
  margin-bottom: 16px;
}
.questions-side-placeload .inner-wrap .content-shape:nth-child(2) {
  max-width: 70%;
}
.questions-side-placeload .inner-wrap .content-shape:nth-child(3) {
  max-width: 90%;
}
.questions-side-placeload .inner-wrap .content-shape:nth-child(4) {
  max-width: 40%;
  margin-bottom: 0;
}

/* ==========================================================================
9. Questions single placeload
========================================================================== */
.questions-single-placeload {
  width: 100%;
}
.questions-single-placeload.is-header.is-spaced {
  margin-top: 30px;
}
.questions-single-placeload.is-header .content-shape:first-child {
  max-width: 70%;
  height: 18px;
}
.questions-single-placeload.is-card {
  padding: 30px;
  margin-top: 30px;
}
.questions-single-placeload.is-card .card-head {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.questions-single-placeload.is-card .card-head .img {
  height: 40px;
  width: 40px;
  min-width: 40x;
  border-radius: 50%;
}
.questions-single-placeload.is-card .card-head > .content-shape {
  width: 100%;
  height: 16px;
  max-width: 40%;
  margin: 0 0 0 12px;
}
.questions-single-placeload.is-card .content-shape {
  margin-bottom: 16px;
}
.questions-single-placeload.is-card .content-shape.is-body {
  height: 15px;
}
.questions-single-placeload.is-card .content-shape.is-body:nth-child(2) {
  max-width: 80%;
}
.questions-single-placeload.is-card .content-shape.is-body:nth-child(3) {
  max-width: 95%;
}
.questions-single-placeload.is-card .content-shape.is-body:nth-child(4) {
  max-width: 60%;
}
.questions-single-placeload.is-card .content-shape.is-body:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
9. Questions stats placeload
========================================================================== */
.questions-stats-placeload {
  width: 100%;
}
.questions-stats-placeload.is-header {
  margin-bottom: 20px;
  padding: 30px;
}
.questions-stats-placeload.is-header .inner-wrap {
  display: flex;
  align-items: center;
}
.questions-stats-placeload.is-header .inner-wrap .img {
  height: 80px;
  width: 80px;
  min-width: 80px;
  border-radius: 50%;
}
.questions-stats-placeload.is-header .inner-wrap > div {
  width: 100%;
  margin-left: 20px;
}
.questions-stats-placeload.is-header .inner-wrap .content-shape {
  width: 100%;
  height: 14px;
  max-width: 40%;
  margin-bottom: 12px;
}
.questions-stats-placeload.is-header .inner-wrap .content-shape:first-child {
  max-width: 50%;
}
.questions-stats-placeload.is-header .inner-wrap .content-shape:nth-child(2) {
  max-width: 30%;
}
.questions-stats-placeload.is-header .inner-wrap .content-shape:nth-child(3) {
  max-width: 20%;
}
.questions-stats-placeload.is-header .inner-wrap .content-shape:last-child {
  margin-bottom: 0;
}
.questions-stats-placeload.is-carousel {
  border: none;
  background: none;
}
.questions-stats-placeload.is-carousel .grid-title {
  padding: 14px 0;
}
.questions-stats-placeload.is-carousel .grid-title .content-shape {
  height: 16px;
  max-width: 20%;
}
.questions-stats-placeload.is-carousel .placeload-grid {
  display: flex;
}
.questions-stats-placeload.is-carousel .placeload-grid .grid-item {
  margin: 6px;
  width: calc(33% - 12px);
  height: 200px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
.questions-stats-placeload.is-carousel .placeload-grid .grid-item .img {
  height: 60px;
  width: 60px;
  min-width: 60x;
  border-radius: 50%;
  margin: 30px auto;
}
.questions-stats-placeload.is-carousel .placeload-grid .grid-item .shapes .content-shape {
  margin: 0 auto 10px;
  height: 12px;
}
.questions-stats-placeload.is-carousel .placeload-grid .grid-item .shapes .content-shape:first-child {
  max-width: 70%;
}
.questions-stats-placeload.is-carousel .placeload-grid .grid-item .shapes .content-shape:nth-child(2) {
  max-width: 30%;
}
.questions-stats-placeload.is-activity {
  border: none;
  background: none;
  margin-top: 20px;
}
.questions-stats-placeload.is-activity .activity-title {
  padding: 14px 0;
}
.questions-stats-placeload.is-activity .activity-title .content-shape {
  height: 16px;
  max-width: 20%;
}
.questions-stats-placeload.is-activity .unit-list {
  padding: 20px 0;
}
.questions-stats-placeload.is-activity .unit-list .unit {
  display: flex;
  padding-left: 12px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.questions-stats-placeload.is-activity .unit-list .unit:last-child {
  margin-bottom: 0;
}
.questions-stats-placeload.is-activity .unit-list .unit .img {
  height: 44px;
  width: 44px;
  min-width: 44px;
  border-radius: 50%;
}
.questions-stats-placeload.is-activity .unit-list .unit .unit-meta {
  width: 100%;
  margin-left: 20px;
}
.questions-stats-placeload.is-activity .unit-list .unit .unit-meta .content-shape {
  height: 14px;
}
.questions-stats-placeload.is-activity .unit-list .unit .unit-meta .content-shape:first-child {
  max-width: 60%;
}
.questions-stats-placeload.is-activity .unit-list .unit .unit-meta .content-shape:nth-child(2) {
  max-width: 30%;
  height: 12px;
}
.questions-stats-placeload.is-activity .unit-list .unit .unit-meta .content-shape:nth-child(3) {
  height: 10px;
  max-width: 20%;
}

/* ==========================================================================
10. Questions categories placeload
========================================================================== */
.questions-categories-placeload {
  width: 100%;
}
.questions-categories-placeload .is-tile-placeload {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 30px;
}
.questions-categories-placeload .is-tile-placeload.is-card {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.questions-categories-placeload .is-tile-placeload.is-card .img {
  max-width: 160px;
}
.questions-categories-placeload .is-tile-placeload.is-card .placeload-content {
  margin-top: 0;
  margin-left: 30px;
  width: 100%;
}
.questions-categories-placeload .is-tile-placeload.is-card .placeload-content .content-shape:first-child {
  max-width: 80%;
}
.questions-categories-placeload .is-tile-placeload.is-card .placeload-content .content-shape:nth-child(2) {
  max-width: 60%;
}
.questions-categories-placeload .is-tile-placeload.is-card .placeload-content .content-shape:nth-child(3) {
  max-width: 90%;
}
.questions-categories-placeload .is-tile-placeload.is-card .placeload-content .content-shape:nth-child(4) {
  max-width: 40%;
}
.questions-categories-placeload .is-tile-placeload .img {
  height: 140px;
  width: 100%;
  border-radius: 2px;
}
.questions-categories-placeload .is-tile-placeload .placeload-content {
  margin-top: 30px;
}
.questions-categories-placeload .is-tile-placeload .placeload-content .content-shape {
  height: 14px;
}
.questions-categories-placeload .is-tile-placeload .placeload-content .content-shape:first-child {
  max-width: 80%;
}
.questions-categories-placeload .is-tile-placeload .placeload-content .content-shape:nth-child(2) {
  max-width: 40%;
}

/* ==========================================================================
1. Main Extendable Class
========================================================================== */
.card {
  position: relative;
  margin-bottom: 1.5rem;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  box-shadow: none;
}
.card .card-heading {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px;
}
.card .card-heading .dropdown {
  margin-left: auto;
}
.card .card-heading .dropdown .button {
  padding: 0;
  background: none;
  border: none;
}
.card .card-heading .dropdown .button svg {
  stroke: #888da8;
}
.card .card-heading .dropdown.is-light svg {
  stroke: #fff;
}
.card .card-heading.is-bordered {
  border-bottom: 1px solid #e8e8e8;
}
.card .card-heading.is-bordered h4 {
  font-size: 0.95rem;
  color: #757a91;
  font-weight: 500;
}
.card .card-body {
  padding: 10px 16px;
}
.card .card-body.no-padding {
  padding: 0;
}
.card .card-footer {
  margin: 8px 16px 16px 16px;
  border-top: 1px solid #e8e8e8;
}
.card.is-weather-card {
  background-color: #6e5bdb;
  background-color: -webkit-linear-gradient(to right, #c2e9fb, #a1c4fd);
  background-color: linear-gradient(to right, #c2e9fb, #a1c4fd);
}
.card.is-weather-card .card-heading .dropdown.is-spaced > div .button:hover {
  background: #442dcc !important;
}
.card.is-weather-card .card-body {
  padding-top: 0;
}
.card.is-weather-card .temperature {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card.is-weather-card .temperature span {
  position: relative;
  display: block;
  font-size: 2.6rem;
  font-weight: 500;
  color: #fff;
}
.card.is-weather-card .temperature span:after {
  content: "";
  position: absolute;
  top: 10px;
  right: -18px;
  height: 14px;
  width: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.card.is-weather-card .weather-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card.is-weather-card .weather-icon div {
  text-align: center;
}
.card.is-weather-card .weather-icon h4 {
  font-size: 1.4rem;
  color: #fff;
}
.card.is-weather-card .weather-icon svg {
  stroke: #fff;
  height: 2.8rem;
  width: 2.8rem;
}
.card.is-weather-card .weather-icon .details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #fff;
}
.card.is-weather-card .weather-icon .details span {
  display: block;
  margin: 0 10px;
}
.card.is-weather-card .previsions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  padding: 15px;
  margin: 20px 0;
}
.card.is-weather-card .previsions .day {
  text-align: center;
  font-size: 0.7rem;
  color: #fff;
}
.card.is-weather-card .previsions .day * {
  display: block;
}
.card.is-weather-card .previsions .day span:first-child {
  text-transform: uppercase;
  font-size: 0.6rem;
  font-weight: 500;
}
.card.is-weather-card .previsions .day svg {
  margin: 3px auto;
  height: 18px;
  width: 18px;
}
.card.is-weather-card .current-date-location {
  margin-bottom: 20px;
}
.card.is-weather-card .current-date-location span {
  display: block;
  color: #fff;
}
.card.is-weather-card .current-date-location .date {
  font-size: 1.1rem;
  font-weight: 500;
}
.card.is-weather-card .current-date-location .location {
  font-size: 0.8rem;
}
.card.is-weather-card .current-date-location .location svg {
  height: 16px;
  width: 16px;
}
.card.is-birthday-card {
  background-color: #725fdc;
}
.card.is-birthday-card .card-heading {
  padding: 16px 16px 0 16px;
}
.card.is-birthday-card .card-heading .dropdown.is-spaced > div .button:hover {
  background: #34229a !important;
}
.card.is-birthday-card .card-heading > svg {
  stroke: #fff;
}
.card.is-birthday-card .card-body {
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 290px;
}
.card.is-birthday-card .card-body .birthday-avatar {
  position: relative;
  width: 45px;
  margin: 0 auto 16px auto;
}
.card.is-birthday-card .card-body .birthday-avatar img {
  display: block;
  height: 45px;
  width: 45px;
  border-radius: 50%;
}
.card.is-birthday-card .card-body .birthday-avatar .birthday-indicator {
  position: absolute;
  top: -6px;
  right: -14px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  border: 2px solid #725fdc;
  font-size: 0.7rem;
  color: #fff;
  font-weight: 500;
  background: #344258;
}
.card.is-birthday-card .card-body .birthday-content {
  text-align: center;
  color: #fff;
}
.card.is-birthday-card .card-body .birthday-content h4 {
  font-weight: 500;
}
.card.is-birthday-card .card-body .birthday-content p {
  font-size: 0.9rem;
}
.card.is-birthday-card .card-body .birthday-content button {
  line-height: 0;
  margin: 16px 0;
}
.card.is-new-job-card {
  background-color: #725fdc;
}
.card.is-new-job-card .card-heading {
  padding: 16px 16px 0 16px;
}
.card.is-new-job-card .card-heading .dropdown.is-spaced > div .button:hover {
  background: #442dcc !important;
}
.card.is-new-job-card .card-heading > svg {
  stroke: #fff;
}
.card.is-new-job-card .card-body {
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 290px;
}
.card.is-new-job-card .card-body .job-avatar {
  position: relative;
  width: 45px;
  margin: 0 auto 16px auto;
}
.card.is-new-job-card .card-body .job-avatar img {
  display: block;
  height: 45px;
  width: 45px;
  border-radius: 50%;
}
.card.is-new-job-card .card-body .job-content {
  text-align: center;
  color: #fff;
}
.card.is-new-job-card .card-body .job-content h4 {
  font-weight: 500;
}
.card.is-new-job-card .card-body .job-content p {
  font-size: 0.9rem;
}
.card.is-new-job-card .card-body .job-content button {
  line-height: 0;
  margin: 16px 0;
}
.card.is-ad .card-body {
  position: relative;
  display: flex !important;
  align-items: center;
  padding: 14px;
}
.card.is-ad .card-body img {
  display: block;
  max-width: 50% !important;
  flex-shrink: 2;
}
.card.is-ad .card-body .ad-text {
  padding-left: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: -20px;
}
.card.is-ad .card-body .ad-brand {
  position: absolute;
  bottom: 12px;
  right: 14px;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: #999;
}

/* ==========================================================================
0. Schedule widget
========================================================================== */
.schedule {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  margin: 10px 0 20px 0;
  overflow: visible;
  background: #fff;
}
.schedule .schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 16px 0 16px;
}
.schedule .schedule-header .month {
  text-align: center;
  padding: 4px 0;
  color: #393a4f;
  width: 40%;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s;
}
.schedule .schedule-header .month:hover {
  background: whitesmoke;
}
.schedule .schedule-header .nav-icon {
  height: 34px;
  width: 34px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  cursor: pointer;
}
.schedule .schedule-header .nav-icon:hover {
  background: whitesmoke;
}
.schedule .schedule-header .nav-icon svg {
  height: 20px;
  width: 20px;
  stroke: #999;
}
.schedule .schedule-calendar {
  position: relative;
  padding: 20px 20px 40px 20px;
}
.schedule .schedule-calendar .next-fab {
  position: absolute;
  bottom: -25px;
  right: 0;
  left: 0;
  margin: 0 auto;
  height: 50px;
  width: 50px;
  border: 1px solid #e2e2e2;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.07);
  cursor: pointer;
  transition: all 0.3s;
  transform: rotate(0);
}
.schedule .schedule-calendar .next-fab:hover {
  background: #fcfcfc;
}
.schedule .schedule-calendar .next-fab:hover svg {
  stroke: #6e5bdb;
}
.schedule .schedule-calendar .next-fab.is-toggled {
  transform: rotate(180deg);
  box-shadow: none;
}
.schedule .schedule-calendar .next-fab svg {
  height: 20px;
  width: 20px;
  transition: all 0.3s;
}
.schedule .schedule-calendar .calendar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.schedule .schedule-calendar .calendar-row:not(:first-of-type) {
  margin-top: 4px;
}
.schedule .schedule-calendar .calendar-row .day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  padding: 14px;
  color: #596367;
  border-radius: 50%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.schedule .schedule-calendar .calendar-row .day:hover {
  background: whitesmoke;
}
.schedule .schedule-calendar .calendar-row .day.day-name {
  color: #869ba1;
}
.schedule .schedule-calendar .calendar-row .day.event {
  position: relative;
  color: #fff;
}
.schedule .schedule-calendar .calendar-row .day.event:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  z-index: -1;
  transition: transform 0.25s ease-in-out;
}
.schedule .schedule-calendar .calendar-row .day.event.primary {
  background: #6e5bdb;
}
.schedule .schedule-calendar .calendar-row .day.event.primary:before {
  background: #6e5bdb;
}
.schedule .schedule-calendar .calendar-row .day.event.green {
  background: #1ce589;
}
.schedule .schedule-calendar .calendar-row .day.event.green:before {
  background: #1ce589;
}
.schedule .schedule-calendar .calendar-row .day.event.purple {
  background: #6e5bdb;
}
.schedule .schedule-calendar .calendar-row .day.event.purple:before {
  background: #6e5bdb;
}
.schedule .schedule-calendar .calendar-row .day.event.pink {
  background: #fa3275;
}
.schedule .schedule-calendar .calendar-row .day.event.pink:before {
  background: #fa3275;
}
.schedule .schedule-calendar .calendar-row .day.event.animate {
  position: static;
}
.schedule .schedule-calendar .calendar-row .day.event.animate:before {
  top: 160px;
  left: 55px;
  z-index: 1;
  will-change: transform;
}
.schedule .schedule-divider {
  height: 1px;
  background: #ededed;
}
.schedule .schedule-events {
  padding: 16px;
  display: none;
  background: #fafafa;
}
.schedule .schedule-events .schedule-events-title {
  margin-top: 16px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #999;
}
.schedule .schedule-events .schedule-event {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 16px;
}
.schedule .schedule-events .schedule-event .event-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 50%;
  color: #fff;
}
.schedule .schedule-events .schedule-event .event-date.primary {
  background: #6e5bdb;
}
.schedule .schedule-events .schedule-event .event-date.green {
  background: #1ce589;
}
.schedule .schedule-events .schedule-event .event-date.purple {
  background: #6e5bdb;
}
.schedule .schedule-events .schedule-event .event-date.pink {
  background: #fa3275;
}
.schedule .schedule-events .schedule-event .event-title {
  color: #596367;
  padding-left: 16px;
}
.schedule .schedule-events .schedule-event .event-title span {
  display: block;
}
.schedule .schedule-events .schedule-event .event-title span:first-child {
  font-size: 0.9rem;
  color: #393a4f;
}
.schedule .schedule-events .schedule-event .event-title span:nth-child(2) {
  color: #999;
  font-size: 0.85rem;
}
.schedule .schedule-events .button-wrap {
  margin-top: 16px;
}
.schedule .schedule-day-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  opacity: 1;
  transform: translate(0, 0);
  z-index: 1;
  overflow: hidden;
}
.schedule .schedule-day-container.animate-out {
  animation: day-container-out 0.15s ease-out forwards;
  will-change: transform;
}
.schedule .schedule-day-container.hidden {
  z-index: -100;
}
.schedule .schedule-day-container .day-header {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  height: 46px;
  padding: 16px;
  overflow: hidden;
  z-index: 2;
  transition: height 0.075s linear;
}
.schedule .schedule-day-container .day-header.day-header--large {
  height: 200px;
}
.schedule .schedule-day-container .day-header.day-header--large .day-header-content {
  font-weight: lighter;
  padding: 16px;
  height: 200px;
  padding-top: 46px;
}
.schedule .schedule-day-container .day-header.day-header--large .day-header-content .day-header-title .day-header-title-day {
  font-size: 2.4rem;
  font-weight: 600;
}
.schedule .schedule-day-container .day-header.day-header--large .day-header-content .day-header-title .day-header-title-month {
  font-size: 1rem;
  text-transform: uppercase;
}
.schedule .schedule-day-container .day-header.day-header--large .day-header-content .day-header-event {
  font-size: 1.2rem;
  font-weight: 600;
  padding-top: 16px;
}
.schedule .schedule-day-container .day-header .day-header-bg {
  position: absolute;
  top: 166px;
  left: 55px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  will-change: transform;
  transform: scale(1);
}
.schedule .schedule-day-container .day-header .day-header-bg.primary {
  background: #6e5bdb;
}
.schedule .schedule-day-container .day-header .day-header-bg.pink {
  background: #fa3275;
}
.schedule .schedule-day-container .day-header .day-header-bg.purple {
  background: #6e5bdb;
}
.schedule .schedule-day-container .day-header .day-header-bg.green {
  background: #1ce589;
}
.schedule .schedule-day-container .day-header .day-header-bg.animate {
  animation: day-header-grow 0.25s 0.05s ease-in-out forwards;
}
.schedule .schedule-day-container .day-header .day-header-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s ease-out;
  z-index: 4;
}
.schedule .schedule-day-container .day-header .day-header-close svg {
  height: 20px;
  width: 20px;
  stroke: #fcfcfc;
}
.schedule .schedule-day-container .day-header .day-header-close.animate {
  opacity: 1;
}
.schedule .schedule-day-container .day-header .day-header-content {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 8px;
  top: 0;
  left: 0;
  width: 100%;
  height: 46px;
  color: #fff;
  z-index: 3;
  opacity: 0;
  transform: translateY(18px);
}
.schedule .schedule-day-container .day-header .day-header-content.animate-in {
  animation: day-header-content-in 0.15s ease-out forwards;
}
.schedule .schedule-day-container .day-header .day-header-content .day-header-title {
  font-weight: normal;
}
.schedule .schedule-day-container .day-header .day-header-content .day-header-title .day-header-title-day, .schedule .schedule-day-container .day-header .day-header-content .day-header-title .day-header-title-month {
  display: inline;
  vertical-align: baseline;
}
.schedule .schedule-day-container .day-header .day-header-content .day-header-title .day-header-title-day {
  font-size: 18px;
}
.schedule .schedule-day-container .day-header .day-header-content .day-header-title .day-header-title-month {
  font-size: 18px;
}
.schedule .schedule-day-container .day-header .day-header-content .day-header-event {
  padding-top: 2px;
  font-size: 12px;
  font-weight: normal;
}
.schedule .schedule-day-container .day-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  z-index: 0;
  opacity: 0;
  padding-top: 216px;
  padding-left: 16px;
  padding-right: 16px;
  transform: translateY(35px);
  background: #fff;
}
.schedule .schedule-day-container .day-content.animate-in {
  animation: day-content-animate-in 0.2s ease-out forwards;
}
.schedule .schedule-day-container .day-content .event-details-wrap {
  display: none;
  padding: 20px 0;
}
.schedule .schedule-day-container .day-content .event-details-wrap.is-active {
  display: block;
}
.schedule .schedule-day-container .day-content .event-details-wrap .meta-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
.schedule .schedule-day-container .day-content .event-details-wrap .meta-block i {
  font-size: 24px;
  color: #999;
}
.schedule .schedule-day-container .day-content .event-details-wrap .meta-block .meta {
  margin-left: 20px;
}
.schedule .schedule-day-container .day-content .event-details-wrap .meta-block .meta span {
  display: block;
}
.schedule .schedule-day-container .day-content .event-details-wrap .meta-block .meta span:first-child {
  font-weight: 500;
  font-size: 0.9rem;
}
.schedule .schedule-day-container .day-content .event-details-wrap .meta-block .meta span:nth-child(2) {
  font-size: 0.8rem;
  color: #999;
}
.schedule .schedule-day-container .day-content .event-details-wrap .participants-wrap {
  padding: 16px 0;
}
.schedule .schedule-day-container .day-content .event-details-wrap .participants-wrap label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.schedule .schedule-day-container .day-content .event-details-wrap .participants-wrap .participants {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.schedule .schedule-day-container .day-content .event-details-wrap .participants-wrap .participants img {
  display: block;
  height: 53px;
  width: 53px;
  font-size: 0.8rem;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #e8e8e8;
}
.schedule .schedule-day-container .day-content .event-details-wrap .participants-wrap .participants img:not(:first-child):nth-child(1) {
  margin-left: -14px;
}
.schedule .schedule-day-container .day-content .event-details-wrap .participants-wrap .participants img:not(:first-child):nth-child(2) {
  margin-left: -14px;
}
.schedule .schedule-day-container .day-content .event-details-wrap .participants-wrap .participants img:not(:first-child):nth-child(3) {
  margin-left: -14px;
}
.schedule .schedule-day-container .day-content .event-details-wrap .participants-wrap .participants img:not(:first-child):nth-child(4) {
  margin-left: -14px;
}
.schedule .schedule-day-container .day-content .event-details-wrap .participants-wrap .participants img:not(:first-child):nth-child(5) {
  margin-left: -14px;
}
.schedule .schedule-day-container .day-content .event-details-wrap .participants-wrap .participants img:not(:first-child):nth-child(6) {
  margin-left: -14px;
}
.schedule .schedule-day-container .day-content .event-details-wrap .participants-wrap .participants .is-more {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 53px;
  width: 53px;
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #e8e8e8;
  margin-left: -14px;
}
.schedule .schedule-day-container .day-content .event-details-wrap .event-description label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.schedule .schedule-day-container .day-content .event-details-wrap .event-description p {
  font-size: 0.9rem;
  color: #999;
}
.schedule .schedule-day-container .day-content .event-details-wrap .button-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.schedule .schedule-day-container .day-content .event-details-wrap .button-wrap .button {
  width: 49%;
}
.schedule .schedule-day-container .day-content .event-details-wrap .img {
  margin-top: 16px;
  margin-bottom: 16px;
  width: 100%;
  height: 150px;
  background: #2c3144;
}

/* ==========================================================================
1. Widget Keyframes
========================================================================== */
@keyframes day-header-grow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(25);
  }
}
@keyframes day-container-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(45px);
    opacity: 0;
  }
}
@keyframes day-header-content-in {
  0% {
    transform: translateY(18px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes day-content-animate-in {
  0% {
    transform: translateY(35px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ==========================================================================
1. Main Class
========================================================================== */
button.button {
  line-height: 0;
}

.button {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 18px 22px;
  transition: all 0.3s;
}
.button.is-rounded {
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.button.icon-button {
  width: 32px;
  height: 32px;
  padding: 0;
}
.button.icon-button svg {
  height: 16px !important;
  width: 16px !important;
  stroke: #344258;
}
.button.icon-button.is-solid svg {
  stroke: #fff !important;
}
.button.has-icon svg {
  height: 16px;
  width: 16px;
  min-height: 16px;
  min-width: 16px;
  margin-right: 4px;
}
.button.default-raised:hover {
  box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  opacity: 0.8;
}
.button.is-phantom {
  background: transparent;
  border: 2px solid transparent;
}
.button.is-phantom.primary-button {
  color: #6e5bdb;
}
.button.is-phantom.primary-button:hover {
  border-color: #6e5bdb;
}
.button.is-phantom.accent-button {
  color: #6e5bdb;
}
.button.is-phantom.accent-button:hover {
  border-color: #6e5bdb;
}
.button.is-reversed-phantom {
  background: transparent;
  border: 1px solid transparent;
}
.button.is-reversed-phantom.primary-button {
  color: #6e5bdb;
}
.button.is-reversed-phantom.primary-button:hover {
  border-color: transparent !important;
  background: #6e5bdb;
  color: #fafafa;
}
.button.is-reversed-phantom.accent-button {
  color: #6e5bdb;
}
.button.is-reversed-phantom.accent-button:hover {
  border-color: transparent !important;
  background: #6e5bdb;
  color: #fafafa;
}
.button.is-solid.primary-button {
  background: #6e5bdb;
  border-color: #6e5bdb;
  color: #fff !important;
}
.button.is-solid.primary-button.raised:hover {
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
  opacity: 0.8;
}
.button.is-solid.secondary-button {
  background: #757a91;
  border-color: #757a91;
}
.button.is-solid.secondary-button.raised:hover {
  box-shadow: 0 14px 26px -12px rgba(117, 122, 145, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(117, 122, 145, 0.2) !important;
  opacity: 0.8;
}
.button.is-solid.accent-button {
  background: #6e5bdb;
  border-color: #6e5bdb;
  color: #fff;
}
.button.is-solid.accent-button.raised:hover {
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
  opacity: 0.8;
}
.button.is-solid.red-button {
  background: #ff7273;
  border-color: #ff7273;
  color: #fff;
}
.button.is-solid.red-button.raised:hover {
  box-shadow: 0 14px 26px -12px rgba(255, 114, 115, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 114, 115, 0.2) !important;
  opacity: 0.8;
}
.button.is-solid.green-button {
  background: #1ce589;
  border-color: #1ce589;
  color: #fff;
}
.button.is-solid.green-button.raised:hover {
  box-shadow: 0 14px 26px -12px rgba(28, 229, 137, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(28, 229, 137, 0.2) !important;
  opacity: 0.8;
}
.button.is-solid.blue-button {
  background: #039be5;
  border-color: #039be5;
  color: #fff;
}
.button.is-solid.blue-button.raised:hover {
  box-shadow: 0 14px 26px -12px rgba(3, 155, 229, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(3, 155, 229, 0.2) !important;
  opacity: 0.8;
}
.button.is-solid.grey-button {
  background: #f7f7f7;
  border-color: #f7f7f7;
}
.button.is-solid.grey-button svg {
  stroke: #344258 !important;
}
.button.is-solid.grey-button:hover {
  background: #f2f2f2;
  border-color: #f2f2f2;
}
.button.is-solid.dark-grey-button {
  background: #ededed;
  border-color: #ededed;
}
.button.is-solid.dark-grey-button svg {
  stroke: #344258 !important;
}
.button.is-solid.dark-grey-button:hover {
  background: #dedede;
  border-color: #dedede;
}
.button.light-button {
  background: transparent;
  border-color: #fff;
  color: #fff;
  font-weight: 500;
}
.button.light-button:hover {
  background: #fff;
  color: #393a4f;
}
.button.light-button.raised:hover {
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important !important;
  opacity: 0.8;
}

/* ==========================================================================
2. Like button
========================================================================== */
.like-wrapper .like-button {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0px 5px 43px rgba(0, 0, 0, 0.18);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  text-decoration: none;
  opacity: 1 !important;
  overflow: hidden;
}
.like-wrapper .like-button .like-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ff3f40;
  transform: scale(0);
  transition: all 0.4s;
  z-index: 0;
}
.like-wrapper .like-button i.not-liked {
  display: block;
  color: #ff3f40;
  position: relative;
  z-index: 1;
}
.like-wrapper .like-button i.is-liked {
  display: none;
  color: #fff;
  position: relative;
  z-index: 1;
}
.like-wrapper .like-button.is-active {
  box-shadow: 0px 5px 43px rgba(255, 114, 115, 0.18);
}
.like-wrapper .like-button.is-active .like-overlay {
  transform: scale(1);
}
.like-wrapper .like-button.is-active i.not-liked {
  display: none;
}
.like-wrapper .like-button.is-active i.is-liked {
  display: block;
}

/* ==========================================================================
3. Circle button
========================================================================== */
.fab-wrapper.is-share a {
  background: #8070e0;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.fab-wrapper.is-share a:hover {
  background: #9a8de6;
}
.fab-wrapper.is-share a:hover svg {
  stroke: #fff;
}
.fab-wrapper.is-comment a {
  background: #8070e0;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.fab-wrapper.is-comment a:hover {
  background: #9a8de6;
}
.fab-wrapper.is-comment a:hover svg {
  stroke: #fff;
}
.fab-wrapper .small-fab {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  color: #fcfcfc;
  opacity: 1;
  transition: all 0.3s;
}
.fab-wrapper .small-fab svg {
  width: 18px;
  height: 18px;
  transition: all 0.3s;
}
.fab-wrapper .small-fab.is-active {
  background: #6e5bdb;
}

/* ==========================================================================
4. Load more button
========================================================================== */
.load-more-wrap {
  padding: 10px 0 30px;
}
.load-more-wrap.narrow-top {
  padding-top: 20px 0;
}

.load-more-button {
  box-sizing: border-box;
  display: inline-block;
  width: 8em;
  height: 2.25em;
  padding: 0.5em 1em;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  color: #757a91 !important;
  white-space: nowrap;
  line-height: 1;
  font-size: 1em;
  text-decoration: none;
  transition: width 0.1s ease, height 0.4s ease, border-width 0.4s ease, border-radius 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
}
.load-more-button:focus {
  outline: none;
  border-color: #ddd;
}
.load-more-button:hover {
  background: #fafafa;
}
.load-more-button.loading {
  height: 24px;
  width: 24px;
  padding: 0;
  border-width: 2px;
  border-radius: 17px;
  border-color: #eee #eee #eee #999;
  background: #fff;
  font-size: 0;
  color: transparent;
  pointer-events: none;
  animation: spin 1.2s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ==========================================================================
1. Dropdown divider
========================================================================== */
.dropdown-divider {
  background-color: #e8e8e8;
}

/* ==========================================================================
2. Avatar dropdown
========================================================================== */
.dropdown .avatar-button {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.dropdown .avatar-button img {
  height: 22px;
  width: 22px;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}
.dropdown .avatar-button svg {
  transform: rotate(180deg);
  fill: #393a4f;
  height: 8px;
  width: 8px;
  margin: 0 4px;
}

/* ==========================================================================
2. Spaced dropdown
========================================================================== */
.card-heading .dropdown.is-spaced > div .button, .about-card .header .actions .dropdown.is-spaced > div .button {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
  border: none;
  border-radius: 50%;
  transition: all 0.3s;
}
.card-heading .dropdown.is-spaced > div .button:hover, .about-card .header .actions .dropdown.is-spaced > div .button:hover {
  background: whitesmoke;
}
.card-heading .dropdown.is-spaced > div .button svg, .about-card .header .actions .dropdown.is-spaced > div .button svg {
  height: 20px;
  width: 20px;
  transition: all 0.3s;
}

.dropdown.is-spaced.is-modern.is-active .caret {
  transform: rotate(180deg);
}
.dropdown.is-spaced.is-modern.is-active .main-icon {
  transform: rotate(360deg);
}
.dropdown.is-spaced.is-modern > div .button {
  min-width: 110px;
  border-radius: 100px;
}
.dropdown.is-spaced.is-modern > div .button .caret, .dropdown.is-spaced.is-modern > div .button .main-icon {
  transition: all 0.3s;
}
.dropdown.is-spaced.is-modern .dropdown-menu {
  margin-top: 6px;
}
.dropdown.is-spaced .dropdown-menu {
  box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.05);
  border-color: #e8e8e8;
  padding-top: 0;
  min-width: 280px;
}
.dropdown.is-spaced .dropdown-menu.has-margin {
  margin-top: 10px;
}
.dropdown.is-spaced .dropdown-menu .dropdown-content {
  border: 1px solid #e8e8e8;
  box-shadow: none;
}
.dropdown.is-spaced .dropdown-item {
  padding-right: 1rem !important;
  padding: 0.5rem 1rem;
}
.dropdown.is-spaced .dropdown-item.is-selected .checkmark {
  display: block !important;
}
.dropdown.is-spaced .dropdown-item.is-header h5 {
  font-weight: 500;
  margin-bottom: 10px;
  color: #757a91;
}
.dropdown.is-spaced .dropdown-item .media {
  align-items: center;
}
.dropdown.is-spaced .dropdown-item .media .media-content {
  line-height: 1.2;
}
.dropdown.is-spaced .dropdown-item .media h3 {
  font-weight: 500;
  font-size: 0.85rem;
  transition: all 0.3s;
  line-height: 1.2;
}
.dropdown.is-spaced .dropdown-item .media img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 20px;
}
.dropdown.is-spaced .dropdown-item .media svg {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  stroke-width: 1px;
  stroke: #757a91;
  transition: all 0.3s;
}
.dropdown.is-spaced .dropdown-item .media small {
  color: #757a91;
}
.dropdown.is-spaced .dropdown-item .media .checkmark {
  display: none;
}
.dropdown.is-spaced .dropdown-item .media .checkmark svg {
  margin-right: 0;
  margin-left: auto;
}
.dropdown.is-spaced .dropdown-item.is-title {
  background-color: transparent;
  margin-bottom: 10px;
}
.dropdown.is-spaced .dropdown-item.is-active {
  background: #039be5;
}
.dropdown.is-spaced .dropdown-item.is-active svg {
  stroke: #fff;
}
.dropdown.is-spaced .dropdown-item.is-active small {
  color: #fff;
}
.dropdown.is-spaced .dropdown-item:hover {
  background: #fafafa;
}
.dropdown.is-spaced .dropdown-item:hover h3 {
  color: #6e5bdb;
}
.dropdown.is-spaced .dropdown-item:hover svg {
  stroke: #6e5bdb;
}
.dropdown.is-spaced.is-accent .dropdown-item:hover {
  background: #fafafa;
}
.dropdown.is-spaced.is-accent .dropdown-item:hover h3 {
  color: #6e5bdb !important;
}
.dropdown.is-spaced.is-accent .dropdown-item:hover svg {
  stroke: #6e5bdb !important;
}
.dropdown.is-spaced.is-neutral .dropdown-item:hover {
  background: #fafafa;
}
.dropdown.is-spaced.is-neutral .dropdown-item:hover h3 {
  color: #393a4f !important;
}
.dropdown.is-spaced.is-neutral .dropdown-item:hover svg {
  stroke: #757a91 !important;
}

/* ==========================================================================
1. Main styles
========================================================================== */
.nav-tabs-wrapper .tabs ul.is-faded {
  border-bottom-color: transparent !important;
}
.nav-tabs-wrapper .tabs ul li a {
  color: #cecece;
  border-image-width: 2px;
}
.nav-tabs-wrapper .tabs ul li:hover a {
  border-bottom-color: inherit;
}
.nav-tabs-wrapper .tabs ul li.is-active a {
  color: #6e5bdb;
  border-bottom-color: #6e5bdb;
}
.nav-tabs-wrapper .tab-content {
  display: none;
  overflow: hidden;
  padding: 0 10px 10px 10px;
  animation: fadeInLeft 0.5s;
}
.nav-tabs-wrapper .tab-content.is-active {
  display: block;
}

/*! _special-mixins.scss | Friendkit | © Css Ninja. 2018-2019 */
/* ==========================================================================
Friendkit additional mixins
========================================================================== */
/*
    0. Multiline Ellipsis
*/
/* ==========================================================================
0. Multiline Ellipsis mixin
========================================================================== */
/* ==========================================================================
1. Base class
========================================================================== */
.modal {
  z-index: 1050;
}
.modal .modal-background {
  transition: all 0.3s;
}
.modal.is-xsmall .modal-content {
  width: 480px;
}
.modal.is-small .modal-content {
  width: 540px;
}
.modal.is-medium .modal-content {
  width: 720px;
}
.modal.is-large .modal-content {
  width: 840px;
}
.modal.is-xlarge .modal-content {
  width: 1200px;
}
.modal.is-xxl .modal-content {
  width: 1340px;
}
.modal.is-light-bg .modal-background {
  background: rgba(0, 0, 0, 0.4);
}
.modal .card {
  animation: modalScale 0.3s;
}
.modal .card .card-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}
.modal .card .card-heading h3 {
  font-size: 0.95rem;
  font-weight: 500;
}
.modal .card .card-heading .close-wrap {
  height: 30px;
  width: 30px;
}
.modal .card .card-heading .close-wrap .close-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s;
}
.modal .card .card-heading .close-wrap .close-modal:hover {
  background: #e8e8e8;
}
.modal .card .card-heading .close-wrap .close-modal svg {
  height: 18px;
  width: 18px;
  stroke: #757a91;
}
.modal .card .card-body {
  padding: 8px 12px;
}

/* ==========================================================================
2. Create group modal
========================================================================== */
.create-group-modal .card-heading {
  border-bottom: 1px solid #e8e8e8;
}
.create-group-modal .subheading {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e8e8e8;
}
.create-group-modal .subheading .group-avatar {
  position: relative;
  cursor: pointer;
}
.create-group-modal .subheading .group-avatar input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.create-group-modal .subheading .group-avatar .add-photo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  width: 42px;
  background: #ededed;
  border-radius: 4px;
}
.create-group-modal .subheading .group-avatar .add-photo svg {
  height: 18px;
  width: 18px;
  stroke: #757a91;
}
.create-group-modal .subheading .control input {
  margin: 0 10px;
  border: none !important;
}
.create-group-modal .card-body {
  padding: 0 !important;
}
.create-group-modal .card-body .inner {
  display: flex;
  align-items: start;
}
.create-group-modal .card-body .inner .left-section {
  width: 67%;
}
.create-group-modal .card-body .inner .left-section .search-subheader {
  border-bottom: 1px solid #e8e8e8;
  padding: 0 12px;
  height: 57px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.create-group-modal .card-body .inner .left-section .search-subheader .control {
  width: 100%;
  position: relative;
}
.create-group-modal .card-body .inner .left-section .search-subheader .control input {
  height: 32px;
  border-radius: 0;
  padding-left: 36px;
  font-size: 0.9rem;
  transition: all 0.3s;
}
.create-group-modal .card-body .inner .left-section .search-subheader .control input:focus {
  border-color: #cecece;
}
.create-group-modal .card-body .inner .left-section .search-subheader .control input:focus + .icon svg {
  stroke: #6e5bdb;
}
.create-group-modal .card-body .inner .left-section .search-subheader .control .icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
}
.create-group-modal .card-body .inner .left-section .search-subheader .control .icon svg {
  width: 18px;
  height: 18px;
  stroke: #cecece;
  transition: all 0.3s;
}
.create-group-modal .card-body .inner .left-section .user-list {
  height: 403px;
  padding: 12px 0;
  overflow-y: auto;
}
.create-group-modal .card-body .inner .left-section .user-list .friend-block {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 6px 12px;
  border-radius: 0;
  cursor: pointer;
}
.create-group-modal .card-body .inner .left-section .user-list .friend-block:hover {
  background: #f2f2f2;
}
.create-group-modal .card-body .inner .left-section .user-list .friend-block .friend-avatar {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.create-group-modal .card-body .inner .left-section .user-list .friend-block .friend-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: #393a4f;
  margin: 0 10px;
}
.create-group-modal .card-body .inner .left-section .user-list .friend-block .round-checkbox {
  margin-left: auto;
  margin-right: 12px;
}
.create-group-modal .card-body .inner .right-section {
  width: 33%;
  height: 460px;
  background: #f5f6f7;
  border-left: 1px solid #e8e8e8;
  overflow-y: auto;
}
.create-group-modal .card-body .inner .right-section .selected-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  min-height: 57px;
}
.create-group-modal .card-body .inner .right-section .selected-count span {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: #999;
}
.create-group-modal .card-body .inner .right-section .selected-count span:first-child {
  text-transform: uppercase;
  font-size: 0.7rem;
}
.create-group-modal .card-body .inner .right-section .selected-list {
  padding: 12px;
}
.create-group-modal .card-body .inner .right-section .selected-list .selected-friend-block {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-radius: 0;
}
.create-group-modal .card-body .inner .right-section .selected-list .selected-friend-block .image-wrapper {
  position: relative;
}
.create-group-modal .card-body .inner .right-section .selected-list .selected-friend-block .image-wrapper .checked-badge {
  position: absolute;
  bottom: 3px;
  right: -3px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18px;
  width: 18px;
  border: 2px solid #f5f6f7;
  border-radius: 50%;
  background: #757a91;
}
.create-group-modal .card-body .inner .right-section .selected-list .selected-friend-block .image-wrapper .checked-badge svg {
  height: 8px;
  width: 8px;
  stroke: #fafafa;
  stroke-width: 3px;
}
.create-group-modal .card-body .inner .right-section .selected-list .selected-friend-block .friend-avatar {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.create-group-modal .card-body .inner .right-section .selected-list .selected-friend-block .friend-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: #393a4f;
  margin: 0 14px;
}
.create-group-modal .card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 !important;
  padding: 8px;
}
.create-group-modal .card-footer button {
  margin-left: 12px;
  line-height: 0;
}

/* ==========================================================================
3. Albums help modal
========================================================================== */
.albums-help-modal .card, .videos-help-modal .card {
  overflow: hidden;
}
.albums-help-modal .card-heading, .videos-help-modal .card-heading {
  border-bottom: 1px solid #e8e8e8;
}
.albums-help-modal .card-body .content-block, .videos-help-modal .card-body .content-block {
  position: absolute;
  height: 248px;
  width: 454px;
  opacity: 0;
  transition: all 0.3s;
}
.albums-help-modal .card-body .content-block:first-child, .videos-help-modal .card-body .content-block:first-child {
  transform: translateX(-100%);
}
.albums-help-modal .card-body .content-block:nth-child(2), .videos-help-modal .card-body .content-block:nth-child(2) {
  transform: translateX(100%);
}
.albums-help-modal .card-body .content-block img, .videos-help-modal .card-body .content-block img {
  display: block;
  height: 140px;
  margin: 20px auto;
}
.albums-help-modal .card-body .content-block .help-text, .videos-help-modal .card-body .content-block .help-text {
  text-align: center;
  max-width: 350px;
  margin: 0 auto;
}
.albums-help-modal .card-body .content-block .help-text h3, .videos-help-modal .card-body .content-block .help-text h3 {
  font-weight: 500;
}
.albums-help-modal .card-body .content-block .help-text p, .videos-help-modal .card-body .content-block .help-text p {
  color: #999;
  font-size: 0.9rem;
}
.albums-help-modal .card-body .content-block.is-active, .videos-help-modal .card-body .content-block.is-active {
  transform: translateX(0);
  opacity: 1;
}
.albums-help-modal .card-body .slide-dots, .videos-help-modal .card-body .slide-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 258px 0 16px 0;
}
.albums-help-modal .card-body .slide-dots .dot, .videos-help-modal .card-body .slide-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e8e8e8;
  margin: 0 3px;
}
.albums-help-modal .card-body .slide-dots .dot.is-active, .videos-help-modal .card-body .slide-dots .dot.is-active {
  background: #6e5bdb;
}
.albums-help-modal .card-body .action, .videos-help-modal .card-body .action {
  text-align: center;
  margin-bottom: 16px;
}
.albums-help-modal .card-body .action button, .videos-help-modal .card-body .action button {
  line-height: 0;
  width: 160px;
}

/* ==========================================================================
4. Albums modal
========================================================================== */
.albums-modal .modal-content {
  max-width: calc(100% - 40px);
}
.albums-modal .card-heading {
  border-bottom: 1px solid #e8e8e8;
  justify-content: flex-start !important;
}
.albums-modal .card-heading .button {
  line-height: 0 !important;
  padding: 14px 18px !important;
  margin-left: auto;
  margin-right: 10px;
  cursor: pointer;
}
.albums-modal .card-heading .button i {
  font-size: 18px;
}
.albums-modal .card-body {
  padding: 0 !important;
  display: flex;
}
.albums-modal .card-body .left-section, .albums-modal .card-body .right-section {
  padding: 12px;
  height: 580px;
}
.albums-modal .card-body .left-section {
  width: 25%;
  background: #f5f6f7;
  border-right: 1px solid #e8e8e8;
}
.albums-modal .card-body .left-section .control {
  margin-bottom: 10px;
}
.albums-modal .card-body .left-section .control input {
  padding-left: 34px;
}
.albums-modal .card-body .left-section .control .icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #cecece;
}
.albums-modal .card-body .left-section .control .icon svg {
  width: 16px;
  height: 16px;
  transition: all 0.3s;
}
.albums-modal .card-body .left-section .album-form {
  margin-bottom: 20px;
}
.albums-modal .card-body .left-section .tagged-in-album {
  margin: 0 0 10px 0;
}
.albums-modal .card-body .left-section .tagged-in-album .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.albums-modal .card-body .left-section .tagged-in-album .head h4 {
  font-weight: 500;
  font-size: 0.85rem;
  color: #393a4f;
}
.albums-modal .card-body .left-section .tagged-in-album .head .button {
  height: 28px;
  width: 28px;
}
.albums-modal .card-body .left-section .tagged-in-album p {
  font-size: 0.8rem;
  color: #999;
  margin-bottom: 8px;
}
.albums-modal .card-body .left-section .album-tag-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user {
  position: relative;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(1) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(2) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(3) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(4) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(5) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(6) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(7) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(8) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(9) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(10) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(11) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(12) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(13) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(14) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(15) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(16) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(17) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(18) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(19) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(20) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(21) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(22) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(23) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(24) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(25) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(26) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(27) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(28) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(29) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(30) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(31) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(32) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(33) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(34) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(35) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(36) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(37) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(38) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(39) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(40) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(41) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(42) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(43) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(44) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(45) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(46) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(47) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(48) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(49) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(50) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(51) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(52) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(53) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(54) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(55) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(56) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(57) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(58) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(59) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(60) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(61) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(62) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(63) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(64) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(65) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(66) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(67) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(68) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(69) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(70) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(71) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(72) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(73) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(74) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(75) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(76) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(77) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(78) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(79) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(80) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(81) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(82) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(83) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(84) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(85) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(86) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(87) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(88) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(89) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(90) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(91) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(92) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(93) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(94) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(95) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(96) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(97) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(98) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:not(:first-child):nth-child(99) {
  margin-left: -12px;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user:hover .remove-tag {
  display: flex;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
  border: 3px solid #f5f6f7;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user .remove-tag {
  position: absolute;
  top: -5px;
  left: -7px;
  display: none;
  justify-content: center;
  align-items: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  border: 2px solid #fafafa;
  background: #999;
  cursor: pointer;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user .remove-tag:hover {
  background: #ff7273;
}
.albums-modal .card-body .left-section .album-tag-list .tagged-user .remove-tag svg {
  height: 12px;
  width: 12px;
  stroke: #fafafa;
}
.albums-modal .card-body .left-section .shared-album, .albums-modal .card-body .left-section .album-date {
  margin-bottom: 10px;
  margin-top: 0;
}
.albums-modal .card-body .left-section .shared-album .head, .albums-modal .card-body .left-section .album-date .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.albums-modal .card-body .left-section .shared-album .head h4, .albums-modal .card-body .left-section .album-date .head h4 {
  font-weight: 500;
  font-size: 0.85rem;
  color: #393a4f;
}
.albums-modal .card-body .left-section .shared-album .head .button, .albums-modal .card-body .left-section .album-date .head .button {
  height: 28px;
  width: 28px;
}
.albums-modal .card-body .left-section .shared-album p, .albums-modal .card-body .left-section .album-date p {
  font-size: 0.8rem;
  color: #999;
  margin-bottom: 8px;
}
.albums-modal .card-body .left-section .album-date {
  margin-top: 20px;
}
.albums-modal .card-body .right-section {
  width: 75%;
  overflow-y: auto;
}
.albums-modal .card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 !important;
  padding: 8px;
}
.albums-modal .card-footer button {
  margin-left: 6px;
  line-height: 0;
}
.albums-modal .card-footer .dropdown button {
  padding: 0 16px;
  height: 38px;
}
.albums-modal .card-footer .dropdown button svg {
  height: 16px;
  width: 16px;
}
.albums-modal .card-footer .dropdown button svg.main-icon {
  margin-right: 4px;
}
.albums-modal .card-footer .dropdown button i {
  font-size: 18px;
  margin-right: 4px;
}

/* ==========================================================================
5. Videos modal
========================================================================== */
.videos-modal .modal-content {
  max-width: calc(100% - 40px);
}
.videos-modal .modal-card {
  max-height: calc(100vh - 20px) !important;
}
.videos-modal .card-heading {
  border-bottom: 1px solid #e8e8e8;
  justify-content: flex-start !important;
}
.videos-modal .card-heading .button {
  line-height: 0 !important;
  padding: 14px 18px !important;
  margin-left: auto;
  margin-right: 10px;
  cursor: pointer;
}
.videos-modal .card-heading .button i {
  font-size: 18px;
  margin-right: 4px;
}
.videos-modal .card-body {
  padding: 0 !important;
}
.videos-modal .card-body .inner {
  display: flex;
}
.videos-modal .card-body .inner .left-section {
  width: 65%;
}
.videos-modal .card-body .inner .right-section {
  position: relative;
  width: 35%;
  border-left: 1px solid #e8e8e8;
}
.videos-modal .card-body .inner .right-section .comment-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #eff1f2;
  height: 50px;
  width: 100%;
  border-radius: 0 0 6px 0;
  border-top: 1px solid #dee2e5;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 16px;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner img {
  height: 32px;
  width: 32px;
  border-radius: 50%;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner .control {
  width: 100%;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner .control .textarea, .videos-modal .card-body .inner .right-section .comment-controls .controls-inner .control .emojionearea-editor {
  resize: none;
  height: 36px;
  max-height: 36px;
  min-height: 36px;
  border-radius: 100px;
  overflow: hidden;
  line-height: 1.6;
  font-size: 0.8rem;
  padding-left: 16px;
  margin: 0 6px;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner .emojionearea-editor {
  padding-left: 0 !important;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner .emojionearea-editor img {
  height: 18px;
  width: 18px;
  min-height: 18px;
  max-height: 18px;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner .emojionearea {
  overflow: visible !important;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner .emojionearea-picker {
  top: -230px;
  position: absolute;
  left: -50px;
  width: 310px;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner .emojionearea-picker .emojionearea-wrapper {
  width: 310px;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner .emojionearea-picker .emojionearea-wrapper img {
  height: 22px;
  width: 22px;
  min-height: 22px;
  max-height: 22px;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner .emojionearea-scroll-area {
  width: 310px;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner .emojionearea .emojionearea-button > div.emojionearea-button-open {
  background-position: 0 -22px;
}
.videos-modal .card-body .inner .right-section .comment-controls .controls-inner .emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn {
  width: 24px !important;
  height: 24px !important;
}
.videos-modal .card-body .inner .right-section .header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 12px;
  width: 100%;
}
.videos-modal .card-body .inner .right-section .header img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
}
.videos-modal .card-body .inner .right-section .header .user-meta {
  margin: 0 10px;
}
.videos-modal .card-body .inner .right-section .header .user-meta span {
  display: block;
}
.videos-modal .card-body .inner .right-section .header .user-meta span:first-child {
  font-size: 0.9rem;
  font-weight: 500;
}
.videos-modal .card-body .inner .right-section .header .user-meta span:first-child small {
  color: #999;
}
.videos-modal .card-body .inner .right-section .header .user-meta span:nth-child(2) {
  font-size: 0.8rem;
  color: #999;
}
.videos-modal .card-body .inner .right-section .header .button {
  line-height: 0;
  margin-left: auto;
  padding: 14px 18px;
}
.videos-modal .card-body .inner .right-section .header .dropdown .button {
  padding: 18px 6px;
  border: none;
  background: transparent;
}
.videos-modal .card-body .inner .right-section .header .dropdown .button svg {
  height: 18px;
  width: 18px;
}
.videos-modal .card-body .inner .right-section .header .dropdown .button img {
  border-radius: 50%;
}
.videos-modal .card-body .inner .right-section .header .dropdown .dropdown-menu {
  margin-top: 10px;
}
.videos-modal .card-body .inner .right-section .inner-content {
  padding: 12px;
}
.videos-modal .card-body .inner .right-section .inner-content .control {
  width: 100%;
}
.videos-modal .card-body .inner .right-section .inner-content .control input {
  padding-left: 34px;
}
.videos-modal .card-body .inner .right-section .inner-content .control input:focus + .icon svg {
  stroke: #6e5bdb;
}
.videos-modal .card-body .inner .right-section .inner-content .control .icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.videos-modal .card-body .inner .right-section .inner-content .control .icon svg {
  height: 18px;
  width: 18px;
  stroke: #cecece;
  transition: all 0.3s;
}
.videos-modal .card-body .inner .right-section .live-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #e8e8e8;
}
.videos-modal .card-body .inner .right-section .live-stats .social-count {
  display: flex;
  align-items: stretch;
}
.videos-modal .card-body .inner .right-section .live-stats .social-count .shares-count, .videos-modal .card-body .inner .right-section .live-stats .social-count .comments-count, .videos-modal .card-body .inner .right-section .live-stats .social-count .likes-count, .videos-modal .card-body .inner .right-section .live-stats .social-count .views-count {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 3px;
}
.videos-modal .card-body .inner .right-section .live-stats .social-count .shares-count span, .videos-modal .card-body .inner .right-section .live-stats .social-count .comments-count span, .videos-modal .card-body .inner .right-section .live-stats .social-count .likes-count span, .videos-modal .card-body .inner .right-section .live-stats .social-count .views-count span {
  display: block;
  font-size: 0.8rem;
  color: #888da8;
  margin: 0 5px;
}
.videos-modal .card-body .inner .right-section .live-stats .social-count .shares-count span.views, .videos-modal .card-body .inner .right-section .live-stats .social-count .comments-count span.views, .videos-modal .card-body .inner .right-section .live-stats .social-count .likes-count span.views, .videos-modal .card-body .inner .right-section .live-stats .social-count .views-count span.views {
  margin: 0 2px;
}
.videos-modal .card-body .inner .right-section .live-stats .social-count .shares-count svg, .videos-modal .card-body .inner .right-section .live-stats .social-count .comments-count svg, .videos-modal .card-body .inner .right-section .live-stats .social-count .likes-count svg, .videos-modal .card-body .inner .right-section .live-stats .social-count .views-count svg {
  height: 14px;
  width: 14px;
  stroke: #888da8;
}
.videos-modal .card-body .inner .right-section .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}
.videos-modal .card-body .inner .right-section .actions .action {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.videos-modal .card-body .inner .right-section .actions .action span {
  display: block;
  font-size: 0.8rem;
  margin: 0 4px;
  transition: all 0.3s;
}
.videos-modal .card-body .inner .right-section .actions .action svg {
  height: 16px;
  width: 16px;
  stroke: #888da8;
  transition: all 0.3s;
}
.videos-modal .card-body .inner .right-section .actions .action:hover span {
  color: #6e5bdb;
}
.videos-modal .card-body .inner .right-section .actions .action:hover svg {
  stroke: #6e5bdb;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tabs {
  margin-bottom: 0 !important;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tabs li a {
  font-size: 0.85rem;
  color: #cecece;
  font-weight: 400;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tabs li:hover a {
  border-bottom-color: #999;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tabs li.is-active a {
  font-weight: 500;
  color: #6e5bdb;
  border-bottom-color: #6e5bdb;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tab-content {
  background: #f5f6f7;
  height: 310px;
  padding: 20px 14px;
  overflow-y: auto;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tab-content .is-comment {
  border: none !important;
  padding-top: 0 !important;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tab-content .is-comment .media-left {
  margin-right: 10px;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tab-content .is-comment .media-left img {
  border-radius: 50%;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tab-content .is-comment .media-content {
  background: #fff;
  padding: 8px;
  border-radius: 12px;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tab-content .is-comment .media-content .username {
  font-size: 0.8rem;
  font-weight: 500;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tab-content .is-comment .media-content p {
  font-size: 0.75rem;
  color: #999;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tab-content .is-comment .media-content .comment-actions {
  display: flex;
  align-items: center;
  padding-top: 8px;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tab-content .is-comment .media-content .comment-actions span, .videos-modal .card-body .inner .right-section .tabs-wrapper .tab-content .is-comment .media-content .comment-actions a {
  display: block;
  font-size: 0.75rem;
}
.videos-modal .card-body .inner .right-section .tabs-wrapper .tab-content .is-comment .media-content .comment-actions span {
  margin: 0 20px;
  color: #999;
}

/* ==========================================================================
6. Share modal
========================================================================== */
.share-modal .card-heading {
  padding: 8px !important;
}
.share-modal .card-heading, .share-modal .share-inputs {
  border-bottom: 1px solid #e8e8e8;
}
.share-modal .card-heading .dropdown, .share-modal .share-inputs .dropdown {
  margin-left: 0 !important;
}
.share-modal .card-heading .dropdown .button, .share-modal .share-inputs .dropdown .button {
  padding: 10px 12px;
  background: #f5f6f7;
  color: #393a4f;
}
.share-modal .card-heading .dropdown .button svg, .share-modal .share-inputs .dropdown .button svg {
  height: 16px;
  width: 16px;
  margin: 0 4px;
  stroke: #393a4f;
}
.share-modal .card-heading .dropdown .button i, .share-modal .share-inputs .dropdown .button i {
  font-size: 20px;
  margin-right: 4px;
}
.share-modal .card-heading .dropdown .button img, .share-modal .share-inputs .dropdown .button img {
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
}
.share-modal .card-heading .dropdown .dropdown-menu, .share-modal .share-inputs .dropdown .dropdown-menu {
  width: 320px;
}
.share-modal .card-heading .dropdown .dropdown-menu .dropdown-content .dropdown-item, .share-modal .share-inputs .dropdown .dropdown-menu .dropdown-content .dropdown-item {
  cursor: pointer;
}
.share-modal .card-heading .dropdown .dropdown-menu .dropdown-content .dropdown-item:hover, .share-modal .share-inputs .dropdown .dropdown-menu .dropdown-content .dropdown-item:hover {
  background: #f5f5f5;
}
.share-modal .card-heading .dropdown .dropdown-menu .dropdown-content img, .share-modal .share-inputs .dropdown .dropdown-menu .dropdown-content img {
  height: 36px !important;
  width: 36px !important;
  border-radius: 50% !important;
  margin-right: 10px;
}
.share-modal .card-heading .dropdown .dropdown-menu .dropdown-content i, .share-modal .share-inputs .dropdown .dropdown-menu .dropdown-content i {
  font-size: 22px;
  margin-right: 16px;
  color: #999;
}
.share-modal .card-heading .dropdown .dropdown-menu .dropdown-content .media-content h3, .share-modal .share-inputs .dropdown .dropdown-menu .dropdown-content .media-content h3 {
  font-size: 0.85rem;
}
.share-modal .card-heading .dropdown .dropdown-menu .dropdown-content .media-content small, .share-modal .share-inputs .dropdown .dropdown-menu .dropdown-content .media-content small {
  color: #999;
}
.share-modal .card-heading .dropdown.is-active .button, .share-modal .share-inputs .dropdown.is-active .button {
  background: #6e5bdb;
  color: #fafafa;
}
.share-modal .card-heading .dropdown.is-active .button svg, .share-modal .share-inputs .dropdown.is-active .button svg {
  stroke: #fafafa;
}
.share-modal .share-inputs {
  border-bottom: none !important;
}
.share-modal .share-inputs .field {
  margin-bottom: 0 !important;
}
.share-modal .share-inputs .field .easy-autocomplete input {
  padding-left: 85px;
}
.share-modal .share-inputs .control {
  border-bottom: 1px solid #e8e8e8;
}
.share-modal .share-inputs .control.no-border {
  border-bottom-color: transparent;
}
.share-modal .share-inputs .control input {
  border: none;
  padding-left: 85px;
}
.share-modal .share-inputs .control .input-heading {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 70px;
  padding: 0 6px;
  background: #999;
  color: #fafafa;
  font-size: 0.8rem;
}
.share-modal .share-inputs .control .page-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.share-modal .share-inputs .control .page-controls .page-selection {
  padding: 8px;
}
.share-modal .share-inputs .control .page-controls .page-selection .page-selector img {
  display: block;
  position: relative;
  top: -1px;
  margin-right: 6px;
}
.share-modal .share-inputs .control .page-controls .alias {
  padding: 8px;
}
.share-modal .share-inputs .control .page-controls .alias img {
  display: block;
  height: 24px;
  width: 24px;
  border-radius: 50%;
}
.share-modal .card-body .emojionearea {
  margin-top: 10px;
  max-height: 32px;
  min-height: 32px;
  height: 32px;
  resize: none;
  border: none;
}
.share-modal .card-body .emojionearea-picker {
  right: -10px !important;
}
.share-modal .card-body .shared-publication {
  margin-top: 20px;
}
.share-modal .card-body .shared-publication .featured-image img {
  display: block;
}
.share-modal .card-body .shared-publication .publication-meta {
  border: 1px solid #e8e8e8;
  background: #f5f6f7;
  padding: 20px;
}
.share-modal .card-body .shared-publication .publication-meta .inner-flex {
  display: flex;
  align-items: start;
  margin-bottom: 20px;
}
.share-modal .card-body .shared-publication .publication-meta .inner-flex img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.share-modal .card-body .shared-publication .publication-meta .inner-flex p {
  font-size: 0.8rem;
  padding: 0 16px;
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
}
.share-modal .card-body .shared-publication .publication-meta .inner-flex p:before {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
}
.share-modal .card-body .shared-publication .publication-meta .inner-flex p:after {
  content: "";
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: #f5f6f7;
}
.share-modal .card-body .shared-publication .publication-meta .publication-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.share-modal .card-body .shared-publication .publication-meta .publication-footer .stats {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.share-modal .card-body .shared-publication .publication-meta .publication-footer .stat-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 10px;
}
.share-modal .card-body .shared-publication .publication-meta .publication-footer .stat-block i {
  margin-right: 2px;
  color: #999;
}
.share-modal .card-body .shared-publication .publication-meta .publication-footer .stat-block small {
  font-size: 0.75rem;
}
.share-modal .card-body .shared-publication .publication-meta .publication-footer .publication-origin small {
  text-transform: uppercase;
  color: #999;
  font-weight: 200;
  font-size: 0.65rem;
}
.share-modal .bottom-share-inputs {
  border-bottom: none !important;
}
.share-modal .bottom-share-inputs .field {
  margin-bottom: 0 !important;
}
.share-modal .bottom-share-inputs .field .easy-autocomplete input {
  padding-left: 85px;
}
.share-modal .bottom-share-inputs .control {
  border-top: 1px solid #e8e8e8;
}
.share-modal .bottom-share-inputs .control.no-border {
  border-bottom-color: transparent;
}
.share-modal .bottom-share-inputs .control input {
  border: none;
  padding-left: 85px;
}
.share-modal .bottom-share-inputs .control .input-heading {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 70px;
  padding: 0 6px;
  background: #999;
  color: #fafafa;
  font-size: 0.8rem;
}
.share-modal .bottom-share-inputs .control .page-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.share-modal .bottom-share-inputs .control .page-controls .page-selection {
  padding: 8px;
}
.share-modal .bottom-share-inputs .control .page-controls .page-selection .page-selector img {
  display: block;
  position: relative;
  top: -1px;
  margin-right: 6px;
}
.share-modal .bottom-share-inputs .control .page-controls .alias {
  padding: 8px;
}
.share-modal .bottom-share-inputs .control .page-controls .alias img {
  display: block;
  height: 24px;
  width: 24px;
  border-radius: 50%;
}
.share-modal .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 !important;
  padding: 8px;
  background: #f5f6f7;
  border-radius: 0 0 6px 6px;
}
.share-modal .card-footer .action-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.share-modal .card-footer .action-wrap .footer-action {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 34px;
  width: 34px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.share-modal .card-footer .action-wrap .footer-action i {
  font-size: 18px;
  color: #999;
}
.share-modal .card-footer .action-wrap .footer-action:hover {
  background: #e7e9ec;
}
.share-modal .card-footer .action-wrap .footer-action.is-active {
  background: #e7e9ec;
}
.share-modal .card-footer .action-wrap .footer-action.is-active i {
  color: #6e5bdb;
}
.share-modal .card-footer button {
  line-height: 0;
  margin-left: 4px;
  height: 32px !important;
  padding: 8px 22px;
}

/* ==========================================================================
6. Change cover and profile picture modals
========================================================================== */
.change-cover-modal .card .card-heading, .change-profile-pic-modal .card .card-heading {
  padding: 16px 28px;
}
.change-cover-modal .card .card-heading h3, .change-profile-pic-modal .card .card-heading h3 {
  font-size: 1rem;
}
.change-cover-modal .card .card-body .selection-placeholder, .change-profile-pic-modal .card .card-body .selection-placeholder {
  padding: 0 20px 30px 20px;
}
.change-cover-modal .card .card-body .selection-placeholder .selection-box, .change-profile-pic-modal .card .card-body .selection-placeholder .selection-box {
  padding: 40px;
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}
.change-cover-modal .card .card-body .selection-placeholder .selection-box:hover, .change-profile-pic-modal .card .card-body .selection-placeholder .selection-box:hover {
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.change-cover-modal .card .card-body .selection-placeholder .selection-box:hover .box-content img, .change-profile-pic-modal .card .card-body .selection-placeholder .selection-box:hover .box-content img {
  filter: grayscale(0);
  opacity: 1;
}
.change-cover-modal .card .card-body .selection-placeholder .selection-box:hover .box-content .box-text span:first-child, .change-profile-pic-modal .card .card-body .selection-placeholder .selection-box:hover .box-content .box-text span:first-child {
  color: #6e5bdb;
}
.change-cover-modal .card .card-body .selection-placeholder .selection-box .box-content, .change-profile-pic-modal .card .card-body .selection-placeholder .selection-box .box-content {
  text-align: center;
}
.change-cover-modal .card .card-body .selection-placeholder .selection-box .box-content img, .change-profile-pic-modal .card .card-body .selection-placeholder .selection-box .box-content img {
  display: block;
  max-height: 120px;
  margin: 0 auto;
  opacity: 0.5;
  transition: all 0.3s;
  filter: grayscale(1);
}
.change-cover-modal .card .card-body .selection-placeholder .selection-box .box-content .box-text, .change-profile-pic-modal .card .card-body .selection-placeholder .selection-box .box-content .box-text {
  margin: 10px 0;
}
.change-cover-modal .card .card-body .selection-placeholder .selection-box .box-content .box-text span, .change-profile-pic-modal .card .card-body .selection-placeholder .selection-box .box-content .box-text span {
  display: block;
}
.change-cover-modal .card .card-body .selection-placeholder .selection-box .box-content .box-text span:first-child, .change-profile-pic-modal .card .card-body .selection-placeholder .selection-box .box-content .box-text span:first-child {
  font-weight: 500;
  color: #393a4f;
  transition: color 0.3s;
}
.change-cover-modal .card .card-body .selection-placeholder .selection-box .box-content .box-text span:nth-child(2), .change-profile-pic-modal .card .card-body .selection-placeholder .selection-box .box-content .box-text span:nth-child(2) {
  font-size: 0.9rem;
  color: #999;
}

/* ==========================================================================
7. User photos modal
========================================================================== */
.user-photos-modal .card .card-heading {
  padding: 20px;
}
.user-photos-modal .card .card-heading h3 {
  font-size: 1rem;
}
.user-photos-modal .card .card-body {
  padding: 0 20px;
}
.user-photos-modal .card .card-body .tabs {
  margin-bottom: 0;
}
.user-photos-modal .card .card-body .tabs ul {
  border-color: transparent;
}
.user-photos-modal .card .card-body .tabs ul li.is-active {
  background: whitesmoke;
  border-radius: 8px;
  border: 1px solid #f2f2f2;
}
.user-photos-modal .card .card-body .tabs ul li.is-active a {
  color: #393a4f;
  font-weight: 500;
}
.user-photos-modal .card .card-body .tabs ul li a {
  font-size: 0.8rem;
  border-bottom-color: transparent !important;
}
.user-photos-modal .card .card-body .tab-content {
  padding: 20px 0;
  max-height: 395px;
  overflow-y: auto;
}
.user-photos-modal .card .card-body .tab-content .album-info {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-photos-modal .card .card-body .tab-content .album-info h4 {
  font-weight: 600;
  color: #393a4f;
}
.user-photos-modal .card .card-body .tab-content .album-info h4 small {
  font-size: 0.9rem;
  color: #999;
  font-weight: 400;
}
.user-photos-modal .card .card-body .tab-content .album-info .close-nested-photos {
  font-size: 0.9rem;
  font-weight: 500;
}
.user-photos-modal .card .card-body .image-grid, .user-photos-modal .card .card-body .album-image-grid {
  animation: fadeInLeft 0.5s;
}
.user-photos-modal .card .card-body .image-grid .column, .user-photos-modal .card .card-body .album-image-grid .column {
  padding: 0.5rem;
}
.user-photos-modal .card .card-body .image-grid .grid-image, .user-photos-modal .card .card-body .album-image-grid .grid-image {
  position: relative;
}
.user-photos-modal .card .card-body .image-grid .grid-image:hover img, .user-photos-modal .card .card-body .album-image-grid .grid-image:hover img {
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}
.user-photos-modal .card .card-body .image-grid .grid-image:hover .inner-overlay, .user-photos-modal .card .card-body .album-image-grid .grid-image:hover .inner-overlay {
  background: rgba(57, 58, 79, 0.2) !important;
}
.user-photos-modal .card .card-body .image-grid .grid-image input, .user-photos-modal .card .card-body .album-image-grid .grid-image input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.user-photos-modal .card .card-body .image-grid .grid-image input:checked + .inner .inner-overlay, .user-photos-modal .card .card-body .album-image-grid .grid-image input:checked + .inner .inner-overlay {
  background: rgba(57, 58, 79, 0.5);
}
.user-photos-modal .card .card-body .image-grid .grid-image input:checked + .inner .indicator, .user-photos-modal .card .card-body .album-image-grid .grid-image input:checked + .inner .indicator {
  display: flex;
}
.user-photos-modal .card .card-body .image-grid .grid-image .inner, .user-photos-modal .card .card-body .album-image-grid .grid-image .inner {
  position: relative;
}
.user-photos-modal .card .card-body .image-grid .grid-image .inner img, .user-photos-modal .card .card-body .album-image-grid .grid-image .inner img {
  display: block;
  border-radius: 4px;
  transition: all 0.3s;
}
.user-photos-modal .card .card-body .image-grid .grid-image .inner .inner-overlay, .user-photos-modal .card .card-body .album-image-grid .grid-image .inner .inner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(57, 58, 79, 0.1);
  border-radius: 4px;
  transition: all 0.3s;
  z-index: 0;
}
.user-photos-modal .card .card-body .image-grid .grid-image .inner .indicator, .user-photos-modal .card .card-body .album-image-grid .grid-image .inner .indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  justify-content: center;
  align-items: center;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  background: #6e5bdb;
  border: 2px solid #fff;
  z-index: 0;
}
.user-photos-modal .card .card-body .image-grid .grid-image .inner .indicator svg, .user-photos-modal .card .card-body .album-image-grid .grid-image .inner .indicator svg {
  height: 12px;
  width: 12px;
  stroke: #fafafa;
  stroke-width: 3px;
}
.user-photos-modal .card .card-body .album-wrapper {
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
}
.user-photos-modal .card .card-body .album-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.user-photos-modal .card .card-body .album-wrapper:hover .image-count svg {
  stroke: #6e5bdb !important;
}
.user-photos-modal .card .card-body .album-wrapper:hover .image-count span {
  color: #6e5bdb !important;
}
.user-photos-modal .card .card-body .album-wrapper .album-image img {
  display: block;
  border: 4px;
}
.user-photos-modal .card .card-body .album-wrapper .album-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-photos-modal .card .card-body .album-wrapper .album-meta .album-title {
  margin-top: 6px;
}
.user-photos-modal .card .card-body .album-wrapper .album-meta .album-title span {
  display: block;
}
.user-photos-modal .card .card-body .album-wrapper .album-meta .album-title span:first-child {
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #393a4f;
}
.user-photos-modal .card .card-body .album-wrapper .album-meta .album-title span:nth-child(2) {
  font-size: 0.8rem;
  color: #999;
}
.user-photos-modal .card .card-body .album-wrapper .album-meta .image-count {
  display: flex;
  align-items: center;
  margin-top: 6px;
}
.user-photos-modal .card .card-body .album-wrapper .album-meta .image-count svg {
  height: 20px;
  width: 20px;
  stroke: #cecece;
  transition: all 0.3s;
}
.user-photos-modal .card .card-body .album-wrapper .album-meta .image-count span {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: #999;
  margin: 0 4px;
  transition: 0.3s;
}
.user-photos-modal .card .card-footer {
  padding: 20px;
  margin: 0;
  border: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* ==========================================================================
8. Crop profile picture modal
========================================================================== */
.upload-crop-profile-modal .card .card-heading, .upload-crop-cover-modal .card .card-heading {
  padding: 20px;
}
.upload-crop-profile-modal .card .card-heading h3, .upload-crop-cover-modal .card .card-heading h3 {
  font-size: 1rem;
}
.upload-crop-profile-modal .card .card-body, .upload-crop-cover-modal .card .card-body {
  padding: 0 20px;
}
.upload-crop-profile-modal .card .card-body .profile-uploader-box, .upload-crop-profile-modal .card .card-body .cover-uploader-box, .upload-crop-cover-modal .card .card-body .profile-uploader-box, .upload-crop-cover-modal .card .card-body .cover-uploader-box {
  display: block;
  width: 100%;
  height: 300px;
  padding: 40px;
  border: 3px dashed #e8e8e8;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-crop-profile-modal .card .card-body .profile-uploader-box:hover .inner-content, .upload-crop-profile-modal .card .card-body .cover-uploader-box:hover .inner-content, .upload-crop-cover-modal .card .card-body .profile-uploader-box:hover .inner-content, .upload-crop-cover-modal .card .card-body .cover-uploader-box:hover .inner-content {
  position: relative;
}
.upload-crop-profile-modal .card .card-body .profile-uploader-box:hover .inner-content img, .upload-crop-profile-modal .card .card-body .cover-uploader-box:hover .inner-content img, .upload-crop-cover-modal .card .card-body .profile-uploader-box:hover .inner-content img, .upload-crop-cover-modal .card .card-body .cover-uploader-box:hover .inner-content img {
  opacity: 1;
  filter: grayscale(0);
}
.upload-crop-profile-modal .card .card-body .profile-uploader-box .inner-content, .upload-crop-profile-modal .card .card-body .cover-uploader-box .inner-content, .upload-crop-cover-modal .card .card-body .profile-uploader-box .inner-content, .upload-crop-cover-modal .card .card-body .cover-uploader-box .inner-content {
  display: block;
}
.upload-crop-profile-modal .card .card-body .profile-uploader-box .inner-content img, .upload-crop-profile-modal .card .card-body .cover-uploader-box .inner-content img, .upload-crop-cover-modal .card .card-body .profile-uploader-box .inner-content img, .upload-crop-cover-modal .card .card-body .cover-uploader-box .inner-content img {
  display: block;
  max-height: 110px;
  margin: 0 auto;
  opacity: 0.5;
  filter: grayscale(1);
  transition: all 0.3s;
}
.upload-crop-profile-modal .card .card-body .profile-uploader-box .inner-content span, .upload-crop-profile-modal .card .card-body .cover-uploader-box .inner-content span, .upload-crop-cover-modal .card .card-body .profile-uploader-box .inner-content span, .upload-crop-cover-modal .card .card-body .cover-uploader-box .inner-content span {
  display: block;
  text-align: center;
  color: #cecece;
  padding: 10px 0;
}
.upload-crop-profile-modal .card .card-body .profile-uploader-box input, .upload-crop-profile-modal .card .card-body .cover-uploader-box input, .upload-crop-cover-modal .card .card-body .profile-uploader-box input, .upload-crop-cover-modal .card .card-body .cover-uploader-box input {
  display: none;
}
.upload-crop-profile-modal .card .card-body .croppie-container .cr-boundary, .upload-crop-cover-modal .card .card-body .croppie-container .cr-boundary {
  background-image: url(http://cdn.thedesigninspiration.com/wp-content/uploads/2014/07/Icon-Pattern-l.jpg);
  background-repeat: repeat;
  background-size: cover;
}
.upload-crop-profile-modal .card .card-body .croppie-container .cr-viewport, .upload-crop-cover-modal .card .card-body .croppie-container .cr-viewport {
  box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.1);
}
.upload-crop-profile-modal .card .card-body .croppie-container .cr-slider, .upload-crop-cover-modal .card .card-body .croppie-container .cr-slider {
  cursor: pointer;
}
.upload-crop-profile-modal .card .card-body .upload-help, .upload-crop-cover-modal .card .card-body .upload-help {
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-crop-profile-modal .card .card-body .upload-help .profile-reset, .upload-crop-profile-modal .card .card-body .upload-help .cover-reset, .upload-crop-cover-modal .card .card-body .upload-help .profile-reset, .upload-crop-cover-modal .card .card-body .upload-help .cover-reset {
  display: block;
  color: #999;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  background: #e8e8e8;
  transition: all 0.3s;
}
.upload-crop-profile-modal .card .card-body .upload-help .profile-reset:hover, .upload-crop-profile-modal .card .card-body .upload-help .cover-reset:hover, .upload-crop-cover-modal .card .card-body .upload-help .profile-reset:hover, .upload-crop-cover-modal .card .card-body .upload-help .cover-reset:hover {
  background: #f0f0f0;
  color: #393a4f;
}
.upload-crop-profile-modal .card .card-footer, .upload-crop-cover-modal .card .card-footer {
  border-top: none;
  justify-content: center;
  margin: 20px;
}

/* ==========================================================================
9. End tour modal
========================================================================== */
.end-tour-modal .modal-content .card .card-body .image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  background: whitesmoke;
  margin: 0 auto 20px auto;
}
.end-tour-modal .modal-content .card .card-body .image-wrap img {
  display: block;
  height: 50px;
  width: 50px;
}
.end-tour-modal .modal-content .card .card-body h3 {
  font-weight: 500;
  font-size: 1.1rem;
  font-family: "montserrat", sans-serif;
}
.end-tour-modal .modal-content .card .card-body p {
  font-size: 0.9rem;
  color: #999;
  max-width: 330px;
  margin: 0 auto;
}
.end-tour-modal .modal-content .card .card-body .action {
  margin: 20px 0;
}
.end-tour-modal .modal-content .card .card-body .action .button {
  max-width: 180px;
  margin: 0 auto;
}

/* ==========================================================================
10. No stream modal
========================================================================== */
.no-stream-modal .modal-content .card .card-body .image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px auto;
}
.no-stream-modal .modal-content .card .card-body .image-wrap img {
  display: block;
  width: 200px;
}
.no-stream-modal .modal-content .card .card-body h3 {
  font-weight: 500;
  font-size: 1.1rem;
  font-family: "montserrat", sans-serif;
}
.no-stream-modal .modal-content .card .card-body p {
  font-size: 0.9rem;
  color: #999;
  max-width: 330px;
  margin: 0 auto;
}
.no-stream-modal .modal-content .card .card-body .action {
  margin: 20px 0;
}
.no-stream-modal .modal-content .card .card-body .action .button {
  max-width: 180px;
  margin: 0 auto;
}

/* ==========================================================================
11. Media Queries
========================================================================== */
@media (max-width: 767px) {
  .modal.albums-modal .card .card-heading h3, .modal.videos-modal .card .card-heading h3 {
    display: none;
  }
  .modal.albums-modal .card .card-heading .button, .modal.videos-modal .card .card-heading .button {
    margin-left: 0;
  }
  .modal.albums-modal .card .card-heading .close-wrap, .modal.videos-modal .card .card-heading .close-wrap {
    margin-left: auto;
  }
  .modal.albums-modal .card .card-body, .modal.videos-modal .card .card-body {
    flex-direction: column;
  }
  .modal.albums-modal .card .card-body .left-section, .modal.videos-modal .card .card-body .left-section {
    display: none;
    width: 100%;
  }
  .modal.albums-modal .card .card-body .right-section, .modal.videos-modal .card .card-body .right-section {
    width: 100%;
  }
  .modal.albums-help-modal img, .modal.videos-help-modal img {
    height: 110px !important;
  }
  .modal .modal-content {
    max-width: 340px;
  }
  .modal .modal-content .content-block {
    width: 314px;
  }
  .modal .modal-content .content-block img {
    height: 135px;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .modal.albums-modal .card .card-body .album-date .head h4, .modal.albums-modal .card .card-body .tagged-in-album .head h4, .modal.albums-modal .card .card-body .shared-album .head h4 {
    font-size: 0.75rem;
  }
  .modal.albums-modal .card .card-body .album-date .head p, .modal.albums-modal .card .card-body .tagged-in-album .head p, .modal.albums-modal .card .card-body .shared-album .head p {
    font-size: 0.7rem;
  }
}
/* ==========================================================================
1. Modal uploader (Album upload)
========================================================================== */
.modal-uploader .button {
  line-height: 0;
}
.modal-uploader .button.has-icon svg {
  height: 18px;
  width: 18px;
}
.modal-uploader .file-count {
  font-size: 0.85rem;
  color: #999;
  height: 38px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  margin: 0 10px;
}
.modal-uploader .file-count span {
  margin: 0 4px;
}
.modal-uploader #total-progress {
  opacity: 0;
  transition: opacity 0.3s linear;
}
.modal-uploader #previews .dz-success .progress {
  opacity: 0;
  transition: opacity 0.3s linear;
}
.modal-uploader #previews .delete {
  display: none;
}
.modal-uploader #previews .is-template.dz-success .start,
.modal-uploader #previews is-template.dz-success .cancel {
  display: none;
}
.modal-uploader #previews is-template.dz-success .delete {
  display: block;
}
.modal-uploader .preview-box {
  position: relative;
  background: #fff;
  width: 100%;
  border-radius: 3px;
}
.modal-uploader .preview-box:hover .remove-button {
  opacity: 1;
  background: #e8e8e8;
}
.modal-uploader .preview-box .remove-button {
  position: absolute;
  top: -10px;
  right: -12px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}
.modal-uploader .preview-box .remove-button:hover {
  background: #ff7273;
}
.modal-uploader .preview-box .remove-button:hover i {
  color: #fafafa;
}
.modal-uploader .preview-box .remove-button i {
  font-size: 14px;
  color: #999;
}
.modal-uploader .preview-box .preview img {
  display: block;
}
.modal-uploader .preview-box .preview-body {
  padding: 8px;
  border: 1px solid #e8e8e8;
}
.modal-uploader .preview-box .preview-body .name {
  display: block;
  max-width: 145px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-uploader .preview-box .preview-body .item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 500;
}
.modal-uploader .preview-box .preview-body .textarea {
  padding: 0;
  border: none;
  resize: none;
  color: #999;
}
.modal-uploader progress {
  vertical-align: baseline;
}
.modal-uploader .progress {
  display: flex;
  height: 0.2rem;
  margin: 0.4rem 0;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}
.modal-uploader .progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
  background-color: #6e5bdb;
  transition: width 0.6s ease;
}
.modal-uploader .progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}
.modal-uploader .progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}
.modal-uploader .upload-item-actions {
  margin-left: 20px;
}
.modal-uploader .upload-item-progress {
  margin-left: auto;
  min-width: 120px;
}

/* ==========================================================================
1. Live video
========================================================================== */
.video-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.video-wrap video {
  display: block;
  width: 100%;
  height: auto;
  min-height: 630px;
  border-radius: 0 0 0 6px;
}
.video-wrap .live {
  position: absolute;
  top: 0;
  left: 0;
  animation: opacity-shift 2s infinite;
  display: block;
  background: #ff2e1c;
  border-radius: 3px;
  color: #fff;
  padding: 8px 16px;
  margin-top: 20px;
  margin-left: 20px;
  font-size: 10px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: 1052;
}

/* ==========================================================================
0. Container
========================================================================== */
.datepicker-container {
  font-size: 12px;
  line-height: 30px;
  padding: 20px;
  border-radius: 5px;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 210px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #fff;
  direction: ltr !important;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.datepicker-container:before,
.datepicker-container:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  content: " ";
  border: 5px solid transparent;
}

/* ==========================================================================
1. Dropdown
========================================================================== */
.datepicker-dropdown {
  position: absolute;
  z-index: 999999 !important;
  box-sizing: content-box;
  border: 1px solid #ccc;
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}

.datepicker-inline {
  position: static;
}

.datepicker-top-left:before,
.datepicker-top-left:after,
.datepicker-top-right:before,
.datepicker-top-right:after {
  top: -5px;
  left: 10px;
  border-top: 0;
}

.datepicker-top-left:before,
.datepicker-top-right:before {
  border-bottom-color: #ccc;
}

.datepicker-top-left:after,
.datepicker-top-right:after {
  top: -4px;
  border-bottom-color: #fff;
}

.datepicker-bottom-left:before,
.datepicker-bottom-left:after,
.datepicker-bottom-right:before,
.datepicker-bottom-right:after {
  bottom: -5px;
  left: 10px;
  border-bottom: 0;
}

.datepicker-bottom-left:before,
.datepicker-bottom-right:before {
  border-top-color: #ccc;
}

.datepicker-bottom-left:after,
.datepicker-bottom-right:after {
  bottom: -4px;
  border-top-color: #fff;
}

.datepicker-top-right:before,
.datepicker-top-right:after,
.datepicker-bottom-right:before,
.datepicker-bottom-right:after {
  right: 10px;
  left: auto;
}

/* ==========================================================================
2. Panel
========================================================================== */
.datepicker-panel > ul:before,
.datepicker-panel > ul:after {
  display: table;
  content: " ";
}

.datepicker-panel > ul:after {
  clear: both;
}

.datepicker-panel > ul {
  width: 102%;
  margin: 0;
  padding: 0;
}

.datepicker-panel > ul:first-child li {
  line-height: 25px;
}

.datepicker-panel > ul:first-child li:nth-child(2) {
  line-height: 28px !important;
}

.datepicker-panel > ul > li {
  float: left;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
  text-align: center;
  background-color: #fff;
}

.datepicker-panel > ul > li:hover {
  background-color: #ededed;
  color: #444 !important;
  border-radius: 50px;
}

.datepicker-panel > ul > li.muted,
.datepicker-panel > ul > li.muted:hover {
  color: #999;
}

.datepicker-panel > ul > li.highlighted {
  color: #5d4394 !important;
  border-radius: 50px;
}

.datepicker-panel > ul > li.highlighted:hover {
  opacity: 0.8;
  color: #5d4394 !important;
}

.datepicker-panel > ul > li.picked,
.datepicker-panel > ul > li.picked:hover {
  color: #fff !important;
  background-color: #6e5bdb;
  border-radius: 50px;
}

.datepicker-panel > ul > li.picked {
  animation-name: gelatine;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
}

.datepicker-panel > ul > li.disabled,
.datepicker-panel > ul > li.disabled:hover {
  cursor: default;
  color: #ccc;
  background-color: #fff;
}

.datepicker-panel > ul > li.disabled.highlighted,
.datepicker-panel > ul > li.disabled:hover.highlighted {
  background-color: #e6f2ff;
}

.datepicker-panel > ul > li[data-view="years prev"],
.datepicker-panel > ul > li[data-view="year prev"],
.datepicker-panel > ul > li[data-view="month prev"],
.datepicker-panel > ul > li[data-view="years next"],
.datepicker-panel > ul > li[data-view="year next"],
.datepicker-panel > ul > li[data-view="month next"],
.datepicker-panel > ul > li[data-view=next] {
  font-size: 18px;
}

.datepicker-panel > ul > li[data-view="years current"],
.datepicker-panel > ul > li[data-view="year current"],
.datepicker-panel > ul > li[data-view="month current"] {
  width: 150px;
}

.datepicker-panel > ul[data-view=years] > li,
.datepicker-panel > ul[data-view=months] > li {
  line-height: 52.5px;
  width: 52.5px;
  height: 52.5px;
}

.datepicker-panel > ul[data-view=week] > li,
.datepicker-panel > ul[data-view=week] > li:hover {
  cursor: default;
  background-color: #fff;
}

.datepicker-hide {
  display: none;
}

/* ==========================================================================
1. Input and textarea shared styles
========================================================================== */
.input, .textarea {
  box-shadow: none !important;
}
.input.is-light::-webkit-input-placeholder, .textarea.is-light::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #cecece;
}
.input.is-light::-moz-placeholder, .textarea.is-light::-moz-placeholder { /* Firefox 19+ */
  color: #cecece;
}
.input.is-light:-ms-input-placeholder, .textarea.is-light:-ms-input-placeholder { /* IE 10+ */
  color: #cecece;
}
.input.is-light:-moz-placeholder, .textarea.is-light:-moz-placeholder { /* Firefox 18- */
  color: #cecece;
}
.input.is-dark, .textarea.is-dark {
  color: #97a7c1 !important;
}
.input.is-dark::-webkit-input-placeholder, .textarea.is-dark::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #677fa5 !important;
}
.input.is-dark::-moz-placeholder, .textarea.is-dark::-moz-placeholder { /* Firefox 19+ */
  color: #677fa5 !important;
}
.input.is-dark:-ms-input-placeholder, .textarea.is-dark:-ms-input-placeholder { /* IE 10+ */
  color: #677fa5 !important;
}
.input.is-dark:-moz-placeholder, .textarea.is-dark:-moz-placeholder { /* Firefox 18- */
  color: #677fa5 !important;
}

/* ==========================================================================
1. Input styles
========================================================================== */
.input {
  transition: all 0.3s;
}
.input:focus {
  border-color: #6e5bdb;
}
.input.is-sm {
  height: 32px;
  font-size: 0.9rem;
}
.input.no-radius {
  border-radius: 1px;
}
.input.is-fade:focus {
  border: 1px solid #ededed;
}
.input.is-bordered:focus {
  border-color: #757a91;
}

/* ==========================================================================
2. Textarea styles
========================================================================== */
.textarea.is-sm {
  font-size: 0.9rem;
  resize: none;
}
.textarea.no-radius {
  border-radius: 1px;
}
.textarea.is-fade:focus {
  border: 1px solid #ededed;
}

/* ==========================================================================
3. Control wrappers
========================================================================== */
.field label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #393a4f;
}

.control.has-icon {
  position: relative;
}
.control.has-icon .form-icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.control.has-icon .form-icon svg {
  height: 20px;
  width: 20px;
  stroke: #cecece;
  transition: all 0.3s;
}
.control.has-icon .input {
  padding-left: 40px;
}
.control.has-icon .input:focus + .form-icon svg {
  stroke: #6e5bdb;
}
.control.has-validation {
  position: relative;
}
.control.has-validation .error-icon {
  position: absolute;
  top: 0;
  right: 0;
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.control.has-validation .error-icon svg {
  height: 16px;
  width: 16px;
  stroke: #ff7273;
}
.control.has-validation .success-icon {
  position: absolute;
  top: 0;
  right: 0;
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.control.has-validation .success-icon svg {
  height: 16px;
  width: 16px;
  stroke: #1ce589;
}
.control.has-validation.has-error input {
  border-color: #ff7273;
}
.control.has-validation.has-error input + label {
  font-size: 0.75rem;
  color: #ff7273;
}
.control.has-validation.has-error .error-icon {
  opacity: 1;
}
.control.has-validation.has-error .success-icon {
  opacity: 0;
}
.control.has-validation.has-success input {
  border-color: #1ce589;
}
.control.has-validation.has-success .error-icon {
  opacity: 0;
}
.control.has-validation.has-success .success-icon {
  opacity: 1;
}

/* ==========================================================================
4. Combo Box
========================================================================== */
.is-combo .combo-label {
  font-weight: 500;
  font-size: 0.9rem;
  color: #999;
}
.is-combo .combo-box, .is-combo .image-combo-box, .is-combo .stacked-combo-box, .is-combo .user-combo-box {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 40px;
  margin-top: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.is-combo .combo-box.has-rounded-images .combo-item img, .is-combo .combo-box.has-rounded-images .item-icon img, .is-combo .image-combo-box.has-rounded-images .combo-item img, .is-combo .image-combo-box.has-rounded-images .item-icon img, .is-combo .stacked-combo-box.has-rounded-images .combo-item img, .is-combo .stacked-combo-box.has-rounded-images .item-icon img, .is-combo .user-combo-box.has-rounded-images .combo-item img, .is-combo .user-combo-box.has-rounded-images .item-icon img {
  border-radius: 50%;
}
.is-combo .combo-box.is-scrollable .box-dropdown .dropdown-inner, .is-combo .image-combo-box.is-scrollable .box-dropdown .dropdown-inner, .is-combo .stacked-combo-box.is-scrollable .box-dropdown .dropdown-inner, .is-combo .user-combo-box.is-scrollable .box-dropdown .dropdown-inner {
  max-height: 190px;
  overflow-y: auto;
}
.is-combo .combo-box .box-inner, .is-combo .image-combo-box .box-inner, .is-combo .stacked-combo-box .box-inner, .is-combo .user-combo-box .box-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.is-combo .combo-box .box-inner .combo-item, .is-combo .image-combo-box .box-inner .combo-item, .is-combo .stacked-combo-box .box-inner .combo-item, .is-combo .user-combo-box .box-inner .combo-item {
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 8px;
}
.is-combo .combo-box .box-inner .combo-item i, .is-combo .image-combo-box .box-inner .combo-item i, .is-combo .stacked-combo-box .box-inner .combo-item i, .is-combo .user-combo-box .box-inner .combo-item i {
  color: #999;
  font-size: 20px;
  margin-right: 8px;
}
.is-combo .combo-box .box-inner .combo-item .fa, .is-combo .image-combo-box .box-inner .combo-item .fa, .is-combo .stacked-combo-box .box-inner .combo-item .fa, .is-combo .user-combo-box .box-inner .combo-item .fa {
  font-size: 14px;
}
.is-combo .combo-box .box-inner .combo-item .fa.is-green, .is-combo .image-combo-box .box-inner .combo-item .fa.is-green, .is-combo .stacked-combo-box .box-inner .combo-item .fa.is-green, .is-combo .user-combo-box .box-inner .combo-item .fa.is-green {
  color: #1ce589;
}
.is-combo .combo-box .box-inner .combo-item .fa.is-blue, .is-combo .image-combo-box .box-inner .combo-item .fa.is-blue, .is-combo .stacked-combo-box .box-inner .combo-item .fa.is-blue, .is-combo .user-combo-box .box-inner .combo-item .fa.is-blue {
  color: #039be5;
}
.is-combo .combo-box .box-inner .combo-item .fa.is-orange, .is-combo .image-combo-box .box-inner .combo-item .fa.is-orange, .is-combo .stacked-combo-box .box-inner .combo-item .fa.is-orange, .is-combo .user-combo-box .box-inner .combo-item .fa.is-orange {
  color: #ff9700;
}
.is-combo .combo-box .box-inner .combo-item .fa.is-red, .is-combo .image-combo-box .box-inner .combo-item .fa.is-red, .is-combo .stacked-combo-box .box-inner .combo-item .fa.is-red, .is-combo .user-combo-box .box-inner .combo-item .fa.is-red {
  color: #ff7273;
}
.is-combo .combo-box .box-inner .combo-item img, .is-combo .image-combo-box .box-inner .combo-item img, .is-combo .stacked-combo-box .box-inner .combo-item img, .is-combo .user-combo-box .box-inner .combo-item img {
  display: block;
  height: 22px;
  width: 22px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-right: 8px;
}
.is-combo .combo-box .box-inner .combo-item img.is-stacked, .is-combo .image-combo-box .box-inner .combo-item img.is-stacked, .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked, .is-combo .user-combo-box .box-inner .combo-item img.is-stacked {
  height: 26px;
  width: 26px;
  border: 2px solid #fff;
  margin-right: 0 !important;
}
.is-combo .combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(1), .is-combo .image-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(1), .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(1), .is-combo .user-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(1) {
  margin-left: -9px;
}
.is-combo .combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(2), .is-combo .image-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(2), .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(2), .is-combo .user-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(2) {
  margin-left: -9px;
}
.is-combo .combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(3), .is-combo .image-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(3), .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(3), .is-combo .user-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(3) {
  margin-left: -9px;
}
.is-combo .combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(4), .is-combo .image-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(4), .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(4), .is-combo .user-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(4) {
  margin-left: -9px;
}
.is-combo .combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(5), .is-combo .image-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(5), .is-combo .stacked-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(5), .is-combo .user-combo-box .box-inner .combo-item img.is-stacked:not(:first-child):nth-child(5) {
  margin-left: -9px;
}
.is-combo .combo-box .box-inner .combo-item .avatar-container, .is-combo .image-combo-box .box-inner .combo-item .avatar-container, .is-combo .stacked-combo-box .box-inner .combo-item .avatar-container, .is-combo .user-combo-box .box-inner .combo-item .avatar-container {
  position: relative;
  display: block;
  height: 26px;
  width: 26px;
}
.is-combo .combo-box .box-inner .combo-item .avatar-container .avatar, .is-combo .image-combo-box .box-inner .combo-item .avatar-container .avatar, .is-combo .stacked-combo-box .box-inner .combo-item .avatar-container .avatar, .is-combo .user-combo-box .box-inner .combo-item .avatar-container .avatar {
  display: block;
  height: 26px;
  width: 26px;
  border-radius: 50%;
}
.is-combo .combo-box .box-inner .combo-item .avatar-container .badge, .is-combo .image-combo-box .box-inner .combo-item .avatar-container .badge, .is-combo .stacked-combo-box .box-inner .combo-item .avatar-container .badge, .is-combo .user-combo-box .box-inner .combo-item .avatar-container .badge {
  position: absolute;
  bottom: 0;
  right: -6px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin: 0;
}
.is-combo .combo-box .box-inner .combo-item span, .is-combo .image-combo-box .box-inner .combo-item span, .is-combo .stacked-combo-box .box-inner .combo-item span, .is-combo .user-combo-box .box-inner .combo-item span {
  display: block;
  color: #393a4f;
  font-size: 0.9rem;
  font-weight: 500;
  margin-left: 8px;
}
.is-combo .combo-box .box-inner .combo-item span.is-pushed, .is-combo .image-combo-box .box-inner .combo-item span.is-pushed, .is-combo .stacked-combo-box .box-inner .combo-item span.is-pushed, .is-combo .user-combo-box .box-inner .combo-item span.is-pushed {
  margin-left: 18px;
}
.is-combo .combo-box .box-chevron, .is-combo .image-combo-box .box-chevron, .is-combo .stacked-combo-box .box-chevron, .is-combo .user-combo-box .box-chevron {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
}
.is-combo .combo-box .box-chevron svg, .is-combo .image-combo-box .box-chevron svg, .is-combo .stacked-combo-box .box-chevron svg, .is-combo .user-combo-box .box-chevron svg {
  height: 18px;
  width: 18px;
  stroke: #393a4f;
  transform: rotate(0);
  transition: all 0.3s;
}
.is-combo .combo-box .box-dropdown, .is-combo .image-combo-box .box-dropdown, .is-combo .stacked-combo-box .box-dropdown, .is-combo .user-combo-box .box-dropdown {
  position: absolute;
  top: 32px;
  left: 0;
  width: 100%;
  z-index: 50;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.3s;
}
.is-combo .combo-box .box-dropdown.is-dropup, .is-combo .image-combo-box .box-dropdown.is-dropup, .is-combo .stacked-combo-box .box-dropdown.is-dropup, .is-combo .user-combo-box .box-dropdown.is-dropup {
  top: -165px;
  height: 148px;
}
.is-combo .combo-box .box-dropdown.is-dropup .dropdown-inner, .is-combo .image-combo-box .box-dropdown.is-dropup .dropdown-inner, .is-combo .stacked-combo-box .box-dropdown.is-dropup .dropdown-inner, .is-combo .user-combo-box .box-dropdown.is-dropup .dropdown-inner {
  overflow-y: auto;
}
.is-combo .combo-box .box-dropdown .dropdown-inner, .is-combo .image-combo-box .box-dropdown .dropdown-inner, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner, .is-combo .user-combo-box .box-dropdown .dropdown-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 10px;
  max-height: 190px;
  overflow-y: auto;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul {
  padding: 10px 0;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li {
  padding: 6px 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  margin-right: 8px;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon i, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon i, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon i, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon i {
  color: #999;
  font-size: 20px;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa {
  font-size: 16px;
  position: relative;
  top: 5px;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-green, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-green, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-green, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-green {
  color: #1ce589;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-blue, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-blue, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-blue, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-blue {
  color: #039be5;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-orange, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-orange, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-orange, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-orange {
  color: #ff9700;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-red, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-red, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-red, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .fa.is-red {
  color: #ff7273;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon img, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon img, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon img, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon img {
  display: block;
  height: 22px;
  width: 22px;
  -o-object-fit: contain;
     object-fit: contain;
  transition: opacity 0.3s;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon img.faded-img, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon img.faded-img, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon img.faded-img, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon img.faded-img {
  opacity: 0.4;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .avatar, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .avatar, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .avatar, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .avatar {
  display: block;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .item-icon .badge, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .item-icon .badge, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .item-icon .badge, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .item-icon .badge {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .checkmark, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .checkmark, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .checkmark, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .checkmark {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16px;
  width: 16px;
  margin-right: 8px;
  margin-left: auto;
  opacity: 0;
  transition: all 0.3s;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li .checkmark svg, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li .checkmark svg, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li .checkmark svg, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li .checkmark svg {
  stroke: #6e5bdb;
  stroke-width: 3px;
  height: 16px;
  width: 16px;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li span, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li span, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li span, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li span {
  display: block;
  color: #999;
  font-size: 0.9rem;
  font-weight: 500;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li:hover, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li:hover, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li:hover, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li:hover {
  background: #ededed;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon i, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon i, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon i, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon i {
  color: #393a4f;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon .faded-img, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon .faded-img, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon .faded-img, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon .faded-img {
  opacity: 1;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li.is-active span, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li.is-active span, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li.is-active span, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li.is-active span {
  color: #393a4f;
}
.is-combo .combo-box .box-dropdown .dropdown-inner ul li.is-active .checkmark, .is-combo .image-combo-box .box-dropdown .dropdown-inner ul li.is-active .checkmark, .is-combo .stacked-combo-box .box-dropdown .dropdown-inner ul li.is-active .checkmark, .is-combo .user-combo-box .box-dropdown .dropdown-inner ul li.is-active .checkmark {
  opacity: 1;
}
.is-combo .combo-box.is-active, .is-combo .image-combo-box.is-active, .is-combo .stacked-combo-box.is-active, .is-combo .user-combo-box.is-active {
  border-color: #e8e8e8;
}
.is-combo .combo-box.is-active .box-chevron svg, .is-combo .image-combo-box.is-active .box-chevron svg, .is-combo .stacked-combo-box.is-active .box-chevron svg, .is-combo .user-combo-box.is-active .box-chevron svg {
  transform: rotate(180deg);
}
.is-combo .combo-box.is-active .box-dropdown, .is-combo .image-combo-box.is-active .box-dropdown, .is-combo .stacked-combo-box.is-active .box-dropdown, .is-combo .user-combo-box.is-active .box-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.is-combo .help-text {
  font-size: 0.75rem;
  color: #999;
}
.is-combo .big-combo-box {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 58px;
  margin-top: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.is-combo .big-combo-box .box-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.is-combo .big-combo-box .box-inner .combo-item {
  display: flex;
  align-items: center;
  height: 58px;
  padding-left: 8px;
}
.is-combo .big-combo-box .box-inner .combo-item i {
  color: #6e5bdb;
  font-size: 1.6rem;
}
.is-combo .big-combo-box .box-inner .combo-item .combo-text {
  margin-left: 16px;
}
.is-combo .big-combo-box .box-inner .combo-item .combo-text span {
  display: block;
}
.is-combo .big-combo-box .box-inner .combo-item .combo-text span:first-child {
  color: #393a4f;
  font-size: 0.9rem;
  font-weight: 500;
}
.is-combo .big-combo-box .box-inner .combo-item .combo-text span:nth-child(2) {
  color: #999;
  font-size: 0.8rem;
  max-width: 330px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is-combo .big-combo-box .box-chevron {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 58px;
  width: 58px;
}
.is-combo .big-combo-box .box-chevron svg {
  height: 18px;
  width: 18px;
  stroke: #393a4f;
  transform: rotate(0);
  transition: all 0.3s;
}
.is-combo .big-combo-box .box-dropdown {
  position: absolute;
  top: 54px;
  left: 0;
  width: 100%;
  z-index: 50;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.3s;
}
.is-combo .big-combo-box .box-dropdown .dropdown-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 10px;
  max-height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
}
.is-combo .big-combo-box .box-dropdown .dropdown-inner ul {
  padding: 10px 0;
}
.is-combo .big-combo-box .box-dropdown .dropdown-inner ul li {
  padding: 6px 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.is-combo .big-combo-box .box-dropdown .dropdown-inner ul li .item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  min-height: 30px;
  min-width: 30px;
  margin-right: 16px;
}
.is-combo .big-combo-box .box-dropdown .dropdown-inner ul li .item-icon i {
  color: #999;
  font-size: 1.6rem;
}
.is-combo .big-combo-box .box-dropdown .dropdown-inner ul li .item-name span {
  display: block;
}
.is-combo .big-combo-box .box-dropdown .dropdown-inner ul li .item-name span:first-child {
  color: #393a4f;
  font-size: 0.9rem;
  font-weight: 500;
}
.is-combo .big-combo-box .box-dropdown .dropdown-inner ul li .item-name span:nth-child(2) {
  color: #999;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is-combo .big-combo-box .box-dropdown .dropdown-inner ul li:hover {
  background: #ededed;
}
.is-combo .big-combo-box .box-dropdown .dropdown-inner ul li.is-active .item-icon i {
  color: #6e5bdb;
}
.is-combo .big-combo-box .box-dropdown .dropdown-inner ul li.is-active span {
  color: #393a4f;
}
.is-combo .big-combo-box.is-active {
  border-color: #e8e8e8;
}
.is-combo .big-combo-box.is-active .box-chevron svg {
  transform: rotate(180deg);
}
.is-combo .big-combo-box.is-active .box-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* ==========================================================================
5. Custom select
========================================================================== */
.custom-select {
  width: 100%;
  z-index: 3;
}
.custom-select.is-dropup .select-drop {
  top: -100%;
}
.custom-select .select-box {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 40px 0 10px;
  height: 36px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #999999;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
}
.custom-select .select-box:hover {
  border-color: #e8e8e8;
}
.custom-select .select-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  transform: rotate(0);
}
.custom-select .select-icon svg {
  height: 20px;
  width: 20px;
  stroke: #bababa !important;
  transition: all 0.3s;
}
.custom-select .select-drop {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  min-height: 135px;
  max-height: 138px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  z-index: 5;
  transition: all 0.3s;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.custom-select .select-drop .drop-inner {
  position: relative;
  height: 100%;
  width: 100%;
  background: #fff;
}
.custom-select .select-drop .drop-inner .option-row {
  position: relative;
  display: flex;
  background: #fff;
}
.custom-select .select-drop .drop-inner .option-row input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
.custom-select .select-drop .drop-inner .option-row input:checked + .option-meta {
  background: #f2f2f2;
}
.custom-select .select-drop .drop-inner .option-row input:checked + .option-meta span {
  color: #393a4f;
}
.custom-select .select-drop .drop-inner .option-row input:checked + .option-meta svg.is-purple {
  stroke: #9c2bed;
}
.custom-select .select-drop .drop-inner .option-row .option-meta {
  padding: 12px;
  width: 100%;
  display: flex;
  align-items: center;
}
.custom-select .select-drop .drop-inner .option-row .option-meta img {
  display: block;
  max-height: 20px;
}
.custom-select .select-drop .drop-inner .option-row .option-meta svg {
  height: 20px;
  width: 20px;
  stroke: #cecece;
}
.custom-select .select-drop .drop-inner .option-row .option-meta svg.is-small {
  height: 14px;
  width: 14px;
}
.custom-select .select-drop .drop-inner .option-row .option-meta span {
  display: block;
  font-weight: 500;
  color: #999;
  font-size: 0.9rem;
  margin-left: 8px;
}
.custom-select.is-active .select-drop {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.custom-select.is-active .select-icon {
  transform: rotate(180deg);
}
.custom-select.is-accounts .option-meta img {
  max-height: 36px !important;
  border-radius: 50%;
}

/* ==========================================================================
1. Variables
========================================================================== */
/* ==========================================================================
2. Material Radio buttons
========================================================================== */
.material-radio {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.material-radio.is-accent .dot {
  background-color: #6e5bdb;
}
.material-radio.is-accent input:checked {
  background: transparent;
  border-color: #6e5bdb;
}
.material-radio.is-accent input:checked + .dot {
  transform: scale(1);
}
.material-radio.is-accent input:focus:checked,
.material-radio.is-accent input.focus:checked {
  background-color: transparent;
  border-color: #6e5bdb;
  box-shadow: 0 0 0 12px rgba(110, 91, 219, 0.1);
}
.material-radio.is-accent:active input:checked {
  background-color: transparent;
  border-color: #6e5bdb;
  box-shadow: 0 0 0 12px rgba(110, 91, 219, 0.1);
}
.material-radio.is-green .dot {
  background-color: #1ce589;
}
.material-radio.is-green input:checked {
  background: transparent;
  border-color: #1ce589;
}
.material-radio.is-green input:checked + .dot {
  transform: scale(1);
}
.material-radio.is-green input:focus:checked,
.material-radio.is-green input.focus:checked {
  background-color: transparent;
  border-color: #1ce589;
  box-shadow: 0 0 0 12px rgba(28, 229, 137, 0.1);
}
.material-radio.is-green:active input:checked {
  background-color: transparent;
  border-color: #1ce589;
  box-shadow: 0 0 0 12px rgba(28, 229, 137, 0.1);
}
.material-radio.is-blue .dot {
  background-color: #039be5;
}
.material-radio.is-blue input:checked {
  background: transparent;
  border-color: #039be5;
}
.material-radio.is-blue input:checked + .dot {
  transform: scale(1);
}
.material-radio.is-blue input:focus:checked,
.material-radio.is-blue input.focus:checked {
  background-color: transparent;
  border-color: #039be5;
  box-shadow: 0 0 0 12px rgba(3, 155, 229, 0.1);
}
.material-radio.is-blue:active input:checked {
  background-color: transparent;
  border-color: #039be5;
  box-shadow: 0 0 0 12px rgba(3, 155, 229, 0.1);
}
.material-radio.is-orange .dot {
  background-color: #ff9700;
}
.material-radio.is-orange input:checked {
  background: transparent;
  border-color: #ff9700;
}
.material-radio.is-orange input:checked + .dot {
  transform: scale(1);
}
.material-radio.is-orange input:focus:checked,
.material-radio.is-orange input.focus:checked {
  background-color: transparent;
  border-color: #ff9700;
  box-shadow: 0 0 0 12px rgba(255, 151, 0, 0.1);
}
.material-radio.is-orange:active input:checked {
  background-color: transparent;
  border-color: #ff9700;
  box-shadow: 0 0 0 12px rgba(255, 151, 0, 0.1);
}
.material-radio.is-red .dot {
  background-color: #ff7273;
}
.material-radio.is-red input:checked {
  background: transparent;
  border-color: #ff7273;
}
.material-radio.is-red input:checked + .dot {
  transform: scale(1);
}
.material-radio.is-red input:focus:checked,
.material-radio.is-red input.focus:checked {
  background-color: transparent;
  border-color: #ff7273;
  box-shadow: 0 0 0 12px rgba(255, 114, 115, 0.1);
}
.material-radio.is-red:active input:checked {
  background-color: transparent;
  border-color: #ff7273;
  box-shadow: 0 0 0 12px rgba(255, 114, 115, 0.1);
}
.material-radio .dot {
  position: absolute;
  top: calc(50% - 3px);
  left: 6.5px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #6e5bdb;
  transform: scale(0);
  z-index: 5;
  transition: all 0.3s;
}
.material-radio input,
.material-radio input:hover,
.material-radio input.hover {
  -webkit-appearance: none;
  border: 1.4px solid #cecece;
  border-radius: 13px;
  height: 19px;
  margin: 0;
  vertical-align: top;
  width: 19px;
}
.material-radio input:focus,
.material-radio input.focus {
  background-color: transparent;
  border-color: #cecece;
  box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.07);
  outline: none;
}
.material-radio input:disabled {
  border-color: rgba(0, 0, 0, 0.26);
}
.material-radio input:disabled:focus,
.material-radio input:disabled.focus {
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.26);
  box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.07);
}
.material-radio input:checked {
  background: transparent;
  border-color: #6e5bdb;
}
.material-radio input:checked + .dot {
  transform: scale(1);
}
.material-radio input:focus:checked,
.material-radio input.focus:checked {
  background-color: transparent;
  border-color: #6e5bdb;
  box-shadow: 0 0 0 12px rgba(110, 91, 219, 0.1);
}
.material-radio input:disabled:checked {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.26);
}
.material-radio input:disabled:focus:checked,
.material-radio input:disabled.focus:checked {
  background-color: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.26);
  box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.07);
}
.material-radio .radio-label {
  line-height: 30px;
  font-size: 0.9rem;
  margin: 0 10px;
}
.material-radio .radio-label small {
  font-weight: 600;
  color: #6e5bdb;
}
.material-radio:active input, .material-radio.active input {
  background-color: rgba(0, 0, 0, 0.07);
  border-color: #cecece;
  box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.07);
  outline: none;
}
.material-radio:active input:disabled, .material-radio.active input:disabled {
  background-color: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.26);
  box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.07);
}
.material-radio:active input:checked, .material-radio.active input:checked {
  background-color: rgba(110, 91, 219, 0.1);
  border-color: #6e5bdb;
  box-shadow: 0 0 0 12px rgba(110, 91, 219, 0.1);
}
.material-radio:active input:disabled:checked, .material-radio.active input:disabled:checked {
  background-color: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.26);
  box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.07);
}

/* ==========================================================================
1. Animated toggle
========================================================================== */
.animated-toggle {
  width: 46px;
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.animated-toggle input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.animated-toggle input:checked ~ .toggler {
  border-color: #6e5bdb;
}
.animated-toggle input:checked ~ .toggler .dark, .animated-toggle input:checked ~ .toggler .light {
  transform: translateX(100%) rotate(360deg);
}
.animated-toggle input:checked ~ .toggler .dark {
  opacity: 1;
}
.animated-toggle input:checked ~ .toggler .light {
  opacity: 0;
}
.animated-toggle.dark-toggle input:checked ~ .toggler {
  border-color: #7b8698;
}
.animated-toggle.dark-toggle .toggler .dark {
  background: #7b8698 !important;
  border-color: #7b8698 !important;
}
.animated-toggle .toggler {
  position: relative;
  display: block;
  height: 26px;
  width: 45px;
  border: 2px solid #6e5bdb;
  border-radius: 100px;
  transition: all 0.3s;
}
.animated-toggle .toggler .dark, .animated-toggle .toggler .light {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(0) rotate(0);
  transition: all 0.3s ease;
}
.animated-toggle .toggler .dark svg, .animated-toggle .toggler .light svg {
  stroke: #fff;
  height: 14px !important;
  width: 14px !important;
}
.animated-toggle .toggler .light {
  background: #6e5bdb !important;
  border-color: #6e5bdb !important;
  opacity: 1;
  z-index: 1;
}
.animated-toggle .toggler .dark {
  background: #6e5bdb;
  border-color: #6e5bdb;
  opacity: 0;
  z-index: 0;
}

/* ==========================================================================
2. Switch
========================================================================== */
.f-switch {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.f-switch.is-primary input:checked + i {
  background-color: #6e5bdb;
}
.f-switch.is-accent input:checked + i {
  background-color: #6e5bdb;
}
.f-switch.is-red input:checked + i {
  background-color: #ff7273;
}
.f-switch.is-blue input:checked + i {
  background-color: #039be5;
}
.f-switch i {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
  width: 46px;
  height: 26px;
  background-color: #e6e6e6;
  border-radius: 23px;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
}
.f-switch i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}
.f-switch i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
}
.f-switch:active i::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}
.f-switch:active input:checked + i::after {
  transform: translate3d(16px, 2px, 0);
}
.f-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.f-switch input:checked + i {
  background-color: #1ce589;
}
.f-switch input:checked + i::before {
  transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}
.f-switch input:checked + i::after {
  transform: translate3d(22px, 2px, 0);
}
.f-switch small {
  color: #999;
  position: relative;
  top: -4px;
}

/* ==========================================================================
1. Webui popover
========================================================================== */
.webui-popover {
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 10px 4px !important;
  background: #fff !important;
  color: #393a4f !important;
  border: none !important;
  margin-top: -20px !important;
}
.webui-popover.top > .webui-arrow {
  border-top-color: #fff !important;
}
.webui-popover.bottom-right > .webui-arrow {
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}
.webui-popover.top-right > .webui-arrow {
  border-right-color: transparent !important;
}
.webui-popover.top-right > .webui-arrow:after {
  border-top-color: #fff !important;
}
.webui-popover.top-left > .webui-arrow {
  border-top-color: #fff !important;
}
.webui-popover.left > .webui-arrow {
  border-left-color: transparent !important;
}
.webui-popover .webui-arrow {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}
.webui-popover .webui-arrow:after {
  border-top-color: transparent !important;
}
.webui-popover .webui-popover-title {
  background-color: #fff !important;
  border-bottom: none !important;
  font-weight: 500;
}
.webui-popover .webui-popover-content {
  font-size: 0.75rem !important;
}
.webui-popover .webui-popover-content .popover-flex-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 12px;
  font-size: 0.85rem;
}
.webui-popover .webui-popover-content .popover-flex-block .staff-avatar {
  height: 38px;
  width: 38px;
  border-radius: 50%;
}
.webui-popover .webui-popover-content .popover-flex-block .content-block {
  margin-left: 4px;
  color: #999;
}
.webui-popover .webui-popover-content .popover-flex-block .content-block span:first-child {
  font-weight: 500;
  color: #393a4f;
}
.webui-popover .webui-popover-content .popover-flex-block .content-block label, .webui-popover .webui-popover-content .popover-flex-block .content-block span {
  display: block;
}
.webui-popover .webui-popover-content .popover-flex-block .content-block label {
  color: #8d8fad;
  text-transform: uppercase;
  font-size: 70%;
}
.webui-popover .webui-popover-content .popover-flex-block .fa.fa-star, .webui-popover .webui-popover-content .popover-flex-block .fa.fa-star-half {
  color: #FFD700;
}
.webui-popover .webui-popover-content .popover-flex-block .icon-block {
  height: 38px;
  width: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.webui-popover .webui-popover-content .popover-flex-block .icon-block svg {
  height: 24px;
  width: 24px;
  stroke: #999;
  stroke-width: 1.3px;
}
.webui-popover .webui-popover-content .popover-flex-block .icon-block svg.is-medium {
  height: 26px;
  width: 26px;
}

/* ==========================================================================
2. User profile popovers
========================================================================== */
.profile-popover-block {
  position: relative;
}
.profile-popover-block .profile-popover-wrapper {
  padding: 8px 8px 0 8px;
}
.profile-popover-block .profile-popover-wrapper .popover-cover {
  position: relative;
  margin-bottom: 10px;
  min-height: 104px;
}
.profile-popover-block .profile-popover-wrapper .popover-cover img {
  display: block;
}
.profile-popover-block .profile-popover-wrapper .popover-cover .popover-avatar {
  position: absolute;
  right: 14px;
  bottom: -25px;
  width: 50px;
  height: 50px;
  min-width: 50px;
  z-index: 0;
}
.profile-popover-block .profile-popover-wrapper .popover-cover .popover-avatar img {
  display: block;
}
.profile-popover-block .profile-popover-wrapper .popover-cover .popover-avatar .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #fff;
}
.profile-popover-block .profile-popover-wrapper .popover-cover .popover-avatar .badge {
  position: absolute;
  right: -10px;
  bottom: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.profile-popover-block .profile-popover-wrapper .popover-meta span {
  display: block;
}
.profile-popover-block .profile-popover-wrapper .popover-meta span.user-meta, .profile-popover-block .profile-popover-wrapper .popover-meta span.page-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.profile-popover-block .profile-popover-wrapper .popover-meta span.user-meta .username, .profile-popover-block .profile-popover-wrapper .popover-meta span.user-meta .pagename, .profile-popover-block .profile-popover-wrapper .popover-meta span.page-meta .username, .profile-popover-block .profile-popover-wrapper .popover-meta span.page-meta .pagename {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
}
.profile-popover-block .profile-popover-wrapper .popover-meta span.job-title {
  font-size: 0.8rem;
  color: #6e5bdb;
  font-weight: 500;
  margin-bottom: 8px;
}
.profile-popover-block .profile-popover-wrapper .popover-meta .common-friends, .profile-popover-block .profile-popover-wrapper .popover-meta .user-location, .profile-popover-block .profile-popover-wrapper .popover-meta .page-activity, .profile-popover-block .profile-popover-wrapper .popover-meta .page-followers {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
}
.profile-popover-block .profile-popover-wrapper .popover-meta .common-friends .text, .profile-popover-block .profile-popover-wrapper .popover-meta .user-location .text, .profile-popover-block .profile-popover-wrapper .popover-meta .page-activity .text, .profile-popover-block .profile-popover-wrapper .popover-meta .page-followers .text {
  margin: 0 10px;
  color: #757a91;
}
.profile-popover-block .profile-popover-wrapper .popover-meta .common-friends svg, .profile-popover-block .profile-popover-wrapper .popover-meta .user-location svg, .profile-popover-block .profile-popover-wrapper .popover-meta .page-activity svg, .profile-popover-block .profile-popover-wrapper .popover-meta .page-followers svg {
  stroke: #888da8;
  width: 16px;
  height: 16px;
}
.profile-popover-block .popover-actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 5px 10px;
  z-index: 1;
}
.profile-popover-block .popover-actions .popover-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  max-width: 30px;
  margin: 0 2px;
  border-radius: 50%;
  transition: all 0.3s;
  cursor: pointer;
}
.profile-popover-block .popover-actions .popover-icon:hover {
  background: #6e5bdb;
}
.profile-popover-block .popover-actions .popover-icon:hover svg {
  stroke: #fff;
}
.profile-popover-block .popover-actions .popover-icon svg {
  width: 16px;
  height: 16px;
  stroke: #cecece;
}
.profile-popover-block .loader-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transition: all 0.3s;
  z-index: 0;
}
.profile-popover-block .loader-overlay.is-active {
  opacity: 1;
  z-index: 1;
}
.profile-popover-block .loader-overlay .loader.is-loading {
  height: 24px;
  width: 24px;
  min-height: 24px;
  min-width: 24px;
}

/* ==========================================================================
1. Main styles
========================================================================== */
.ggtooltip {
  position: absolute;
  z-index: 1030;
  display: block;
  padding: 5px;
  font-size: 11px;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: visible;
}

.ggtooltip.fade {
  opacity: 0;
  transition: opacity 0.6s linear;
}

.ggtooltip.fade.in {
  opacity: 1;
}

.ggtooltip.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.ggtooltip.top {
  margin-top: -3px;
}

.ggtooltip.right {
  margin-left: 3px;
}

.ggtooltip.bottom {
  margin-top: 3px;
}

.ggtooltip.left {
  margin-left: -3px;
}

.ggtooltip .ggtooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  border-radius: 4px;
  border: solid 1px #000000;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.ggtooltip .ggtooltip-arrow, .ggtooltip .ggtooltip-arrow-shadow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.ggtooltip.top .ggtooltip-arrow, .ggtooltip.top .ggtooltip-arrow-shadow {
  bottom: 1px;
  left: 50%;
  margin-left: -5px;
  border-top-color: #000000;
  border-width: 5px 5px 0;
}

.ggtooltip.top .ggtooltip-arrow-shadow {
  bottom: 0;
}

.ggtooltip.right .ggtooltip-arrow, .ggtooltip.right .ggtooltip-arrow-shadow {
  top: 50%;
  left: 1px;
  margin-top: -5px;
  border-right-color: #000000;
  border-width: 5px 5px 5px 0;
}

.ggtooltip.right .ggtooltip-arrow-shadow {
  left: 0;
}

.ggtooltip.left .ggtooltip-arrow, .ggtooltip.left .ggtooltip-arrow-shadow {
  top: 50%;
  right: 1px;
  margin-top: -5px;
  border-left-color: #000000;
  border-width: 5px 0 5px 5px;
}

.ggtooltip.left .ggtooltip-arrow-shadow {
  right: 0;
}

.ggtooltip.bottom .ggtooltip-arrow, .ggtooltip.bottom .ggtooltip-arrow-shadow {
  top: 1px;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #000000;
  border-width: 0 5px 5px;
}

.ggtooltip.bottom .ggtooltip-arrow-shadow {
  top: 0;
}

/* ==========================================================================
1. Round Checkboxes
========================================================================== */
.round-checkbox {
  position: relative;
}
.round-checkbox > div {
  display: flex;
  align-items: center;
}
.round-checkbox label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
  transition: all 0.3s;
}
.round-checkbox label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}
.round-checkbox input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}
.round-checkbox input[type=checkbox]:checked + label {
  background-color: #6e5bdb;
  border-color: #6e5bdb;
}
.round-checkbox input[type=checkbox]:checked + label:after {
  opacity: 1;
}
.round-checkbox.is-primary input[type=checkbox]:checked + label {
  background-color: #6e5bdb;
  border-color: #6e5bdb;
}
.round-checkbox.is-green input[type=checkbox]:checked + label {
  background-color: #1ce589;
  border-color: #1ce589;
}
.round-checkbox.is-blue input[type=checkbox]:checked + label {
  background-color: #039be5;
  border-color: #039be5;
}
.round-checkbox.is-orange input[type=checkbox]:checked + label {
  background-color: #ff9700;
  border-color: #ff9700;
}
.round-checkbox.is-red input[type=checkbox]:checked + label {
  background-color: #ff7273;
  border-color: #ff7273;
}
.round-checkbox.is-small {
  height: 22px;
  width: 22px;
}
.round-checkbox.is-small label {
  height: 22px;
  width: 22px;
}
.round-checkbox.is-small label:after {
  left: 4px;
  top: 4.5px;
  width: 13px;
  height: 8px;
  transform: rotate(-45deg) scale(0.65);
}
.round-checkbox.is-small span {
  position: relative;
  top: -2px;
  padding: 0 10px;
  cursor: default;
}

/* ==========================================================================
2. Basic checkbox
========================================================================== */
.basic-checkbox.is-accent .styled-checkbox:hover + label:before {
  background: #6e5bdb;
}
.basic-checkbox.is-accent .styled-checkbox:checked + label:before {
  background: #6e5bdb;
  border-color: #6e5bdb;
}
.basic-checkbox.is-accent .styled-checkbox:disabled + label {
  color: #6e5bdb;
}
.basic-checkbox.is-red .styled-checkbox:hover + label:before {
  background: #ff7273;
}
.basic-checkbox.is-red .styled-checkbox:checked + label:before {
  background: #ff7273;
  border-color: #ff7273;
}
.basic-checkbox.is-red .styled-checkbox:disabled + label {
  color: #ff7273;
}
.basic-checkbox.is-blue .styled-checkbox:hover + label:before {
  background: #039be5;
}
.basic-checkbox.is-blue .styled-checkbox:checked + label:before {
  background: #039be5;
  border-color: #039be5;
}
.basic-checkbox.is-blue .styled-checkbox:disabled + label {
  color: #039be5;
}
.basic-checkbox.is-green .styled-checkbox:hover + label:before {
  background: #1ce589;
}
.basic-checkbox.is-green .styled-checkbox:checked + label:before {
  background: #1ce589;
  border-color: #1ce589;
}
.basic-checkbox.is-green .styled-checkbox:disabled + label {
  color: #1ce589;
}
.basic-checkbox.is-orange .styled-checkbox:hover + label:before {
  background: #ff9700;
}
.basic-checkbox.is-orange .styled-checkbox:checked + label:before {
  background: #ff9700;
  border-color: #ff9700;
}
.basic-checkbox.is-orange .styled-checkbox:disabled + label {
  color: #ff9700;
}
.basic-checkbox .styled-checkbox {
  position: absolute;
  opacity: 0;
}
.basic-checkbox .styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}
.basic-checkbox .styled-checkbox + label:before {
  content: "";
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid #cecece;
  background: white;
}
.basic-checkbox .styled-checkbox:hover + label:before {
  background: #6e5bdb;
}
.basic-checkbox .styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.basic-checkbox .styled-checkbox:checked + label:before {
  background: #6e5bdb;
  border-color: #6e5bdb;
}
.basic-checkbox .styled-checkbox:disabled + label {
  color: #6e5bdb;
  cursor: auto;
}
.basic-checkbox .styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.basic-checkbox .styled-checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
  transform: rotate(45deg);
}

/* ==========================================================================
1. Bouncy animation
========================================================================== */
@keyframes bouncy {
  from, to {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
.bouncy {
  animation: bouncy 0.6s;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

/* ==========================================================================
2. Progress bar
========================================================================== */
@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}
/* ==========================================================================
3. Opacity
========================================================================== */
@keyframes opacity-shift {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/* ==========================================================================
4. Fade In
========================================================================== */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  animation: fadeIn 500ms ease-in-out;
}

/* ==========================================================================
4. Fade In Left
========================================================================== */
@keyframes fadeInLeft {
  from {
    transform: translate3d(20px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.preFadeInLeft {
  opacity: 0;
}

.fadeInLeft {
  opacity: 0;
  animation-name: fadeInLeft;
}

/* ==========================================================================
6. Fade in Up animation
========================================================================== */
@keyframes fadeInUp {
  from {
    transform: translate3d(0, 20px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.preFadeInUp {
  opacity: 0;
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
}

/* ==========================================================================
5. Wave
========================================================================== */
@keyframes wave {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(4.5);
    opacity: 0;
  }
}
/* ==========================================================================
6. Gelatine
========================================================================== */
@keyframes gelatine {
  from, to {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
.gelatine {
  animation: gelatine 0.6s;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

/* ==========================================================================
7. Modal scale
========================================================================== */
@keyframes modalScale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* ==========================================================================
8. Rotate
========================================================================== */
@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes gradientShift {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}
/* ==========================================================================
0. Links
========================================================================== */
a {
  color: #5c46d6;
  transition: all 0.3s;
}
a:hover {
  color: #5c46d6;
}
a.is-inverted {
  color: #6e5bdb;
}
a.standard-link {
  color: #039be5;
  text-decoration: underline;
}

/* ==========================================================================
1. Helpers
========================================================================== */
var {
  font-style: normal;
}

code {
  word-break: break-all;
}

.is-disabled {
  pointer-events: none;
  opacity: 0.4;
  cursor: default !important;
}

.no-click {
  pointer-events: none;
}

.is-vhidden {
  visibility: hidden !important;
}

.is-hidden {
  display: none !important;
}

.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

/* ==========================================================================
2. Background images
========================================================================== */
.has-background-image {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center;
}
.has-background-image.is-top {
  background-position: top !important;
}
.has-background-image.is-bottom {
  background-position: bottom !important;
}

/* ==========================================================================
3. Slimscroll
========================================================================== */
.has-slimscroll {
  overflow-x: hidden !important;
}
.has-slimscroll::-webkit-scrollbar {
  width: 6px !important;
}
.has-slimscroll::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

.has-slimscroll-md {
  overflow-x: hidden !important;
}
.has-slimscroll-md::-webkit-scrollbar {
  width: 4px !important;
}
.has-slimscroll-md::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

.has-slimscroll-xs {
  overflow-x: hidden !important;
}
.has-slimscroll-xs::-webkit-scrollbar {
  width: 2px !important;
}
.has-slimscroll-xs::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
4. Animated checkmark
========================================================================== */
.checkmark-wrapper .checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #6e5bdb;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  animation-delay: 0.4s;
}
.checkmark-wrapper .checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #6e5bdb;
  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
  animation-delay: 0.8s;
}
.checkmark-wrapper .checkmark.is-small {
  height: 36px;
  width: 36px;
}
.checkmark-wrapper .checkmark.is-xs {
  height: 24px;
  width: 24px;
}
.checkmark-wrapper .checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
  animation-delay: 0.8s;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #6e5bdb;
  }
}
/* ==========================================================================
5. Fancybox
========================================================================== */
.fancybox-content {
  display: inline-block;
}
.fancybox-content.hidden {
  display: none;
}

.morphing-btn-wrap, #morphing {
  width: 111.425px;
}

@media all and (min-width: 600px) {
  .fancybox-custom-layout .fancybox-bg {
    background: #6e5bdb;
  }
  .fancybox-custom-layout .fancybox-slide {
    background: #181e28;
    padding: 0 40px;
  }
  .fancybox-custom-layout .fancybox-slide img {
    border-radius: 6px;
  }
  .fancybox-custom-layout .fancybox-custom-layout.fancybox-is-open .fancybox-bg {
    opacity: 1;
  }
  .fancybox-custom-layout .fancybox-caption {
    background: #fff;
    bottom: 0;
    color: #6c6f73;
    left: auto;
    padding: 10px 0;
    right: 44px;
    top: 0;
    width: 350px;
  }
  .fancybox-custom-layout .fancybox-caption:before {
    display: none;
  }
  .fancybox-custom-layout .fancybox-caption a {
    text-decoration: none;
  }
  .fancybox-custom-layout .fancybox-caption a:hover {
    color: #6e5bdb;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fbfbfc;
    height: 50px;
    width: 100%;
    border-radius: 0 0 6px 0;
    border-top: 1px solid #dee2e5;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 16px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner img {
    height: 32px;
    width: 32px;
    border-radius: 50%;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .control {
    width: 100%;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .control .textarea, .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .control .emojionearea-editor {
    resize: none;
    height: 36px;
    max-height: 36px;
    min-height: 36px;
    border-radius: 100px;
    overflow: hidden;
    line-height: 1.6;
    font-size: 0.8rem;
    padding-left: 16px;
    margin: 0 6px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-editor {
    padding-left: 0 !important;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-editor img {
    height: 18px;
    width: 18px;
    min-height: 18px;
    max-height: 18px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea {
    overflow: visible !important;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-picker {
    top: -230px;
    position: absolute;
    left: -50px;
    width: 310px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-picker .emojionearea-wrapper {
    width: 310px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-picker .emojionearea-wrapper img {
    height: 22px;
    width: 22px;
    min-height: 22px;
    max-height: 22px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-scroll-area {
    width: 310px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea .emojionearea-button > div.emojionearea-button-open {
    background-position: 0 -22px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn {
    width: 24px !important;
    height: 24px !important;
  }
  .fancybox-custom-layout .fancybox-caption .header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12px;
    width: 100%;
  }
  .fancybox-custom-layout .fancybox-caption .header img {
    height: 42px;
    width: 42px;
    border-radius: 50%;
  }
  .fancybox-custom-layout .fancybox-caption .header .user-meta {
    margin: 0 10px;
  }
  .fancybox-custom-layout .fancybox-caption .header .user-meta span {
    display: block;
  }
  .fancybox-custom-layout .fancybox-caption .header .user-meta span:first-child {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
  }
  .fancybox-custom-layout .fancybox-caption .header .user-meta span:first-child small {
    color: #999;
  }
  .fancybox-custom-layout .fancybox-caption .header .user-meta span:nth-child(2) {
    text-align: left;
    font-size: 0.8rem;
    color: #999;
  }
  .fancybox-custom-layout .fancybox-caption .header .button {
    line-height: 0;
    margin-left: auto;
    padding: 14px 18px;
  }
  .fancybox-custom-layout .fancybox-caption .header .dropdown .button {
    padding: 18px 6px;
    border: none;
    background: transparent;
  }
  .fancybox-custom-layout .fancybox-caption .header .dropdown .button svg {
    height: 18px;
    width: 18px;
  }
  .fancybox-custom-layout .fancybox-caption .header .dropdown .dropdown-menu {
    margin-top: 10px;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content {
    padding: 12px;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content .control {
    width: 100%;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content .control input {
    padding-left: 34px;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content .control input:focus + .icon svg {
    stroke: #6e5bdb;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content .control .icon {
    position: absolute;
    top: 0;
    left: 0;
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content .control .icon svg {
    height: 18px;
    width: 18px;
    stroke: #cecece;
    transition: all 0.3s;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #e8e8e8;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count {
    display: flex;
    align-items: stretch;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .shares-count, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .comments-count, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .likes-count, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .views-count {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 3px;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .shares-count span, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .comments-count span, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .likes-count span, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .views-count span {
    display: block;
    font-size: 0.8rem;
    color: #888da8;
    margin: 0 5px;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .shares-count span.views, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .comments-count span.views, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .likes-count span.views, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .views-count span.views {
    margin: 0 2px;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .shares-count svg, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .comments-count svg, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .likes-count svg, .fancybox-custom-layout .fancybox-caption .live-stats .social-count .views-count svg {
    height: 14px;
    width: 14px;
    stroke: #888da8;
  }
  .fancybox-custom-layout .fancybox-caption .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 0 0;
  }
  .fancybox-custom-layout .fancybox-caption .actions .action {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .fancybox-custom-layout .fancybox-caption .actions .action span {
    display: block;
    font-size: 0.8rem;
    margin: 0 4px;
    transition: all 0.3s;
  }
  .fancybox-custom-layout .fancybox-caption .actions .action svg {
    height: 16px;
    width: 16px;
    stroke: #888da8;
    transition: all 0.3s;
  }
  .fancybox-custom-layout .fancybox-caption .actions .action:hover span {
    color: #6e5bdb;
  }
  .fancybox-custom-layout .fancybox-caption .actions .action:hover svg {
    stroke: #6e5bdb;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list {
    background: #f5f6f7;
    height: calc(100% - 270px);
    padding: 20px 14px 40px;
    overflow-y: auto;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list.no-auth {
    height: calc(100% - 165px);
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment {
    border: none !important;
    padding-top: 0 !important;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment.is-nested {
    margin-left: 40px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-left {
    margin-right: 10px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-left img {
    border-radius: 50%;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .username {
    font-size: 0.8rem;
    font-weight: 500;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content p {
    font-size: 0.75rem;
    color: #999;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions {
    display: flex;
    align-items: center;
    padding-top: 8px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions span, .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions a {
    display: block;
    font-size: 0.75rem;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions span {
    margin: 0 10px;
    color: #999;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions .likes-count {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: auto;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions .likes-count span {
    display: block;
    font-size: 0.75rem;
    color: #888da8;
    margin: 0 5px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions .likes-count span.views {
    margin: 0 2px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions .likes-count svg {
    height: 12px;
    width: 12px;
    stroke: #888da8;
  }
  .fancybox-custom-layout .fancybox-stage {
    right: 394px;
  }
  .fancybox-custom-layout .fancybox-toolbar {
    background: #6e5bdb;
    bottom: 0;
    left: auto;
    right: 0;
    top: 0;
    width: 44px;
    display: flex;
    flex-direction: column;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-body a {
    margin: 5px 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-body a.active {
    background: #4931d2;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-body a i {
    color: #ffffff;
    font-size: 26px;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-bottom a {
    width: 44px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: solid 1px rgba(255, 255, 255, 0.3);
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-bottom a.active {
    background: #0614f8;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-bottom a:hover {
    color: #cccffe;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-bottom a i {
    color: #ffffff;
    font-size: 26px;
  }
  .fancybox-custom-layout .fancybox-button {
    background: transparent;
  }
  .fancybox-custom-layout .fancybox-button div {
    padding: 2px;
  }
  .fancybox-custom-layout .fancybox-button[disabled] {
    color: #fff;
  }
  .fancybox-custom-layout .fancybox-button:not([disabled]) {
    color: #fff;
  }
  .fancybox-custom-layout .fancybox-button--arrow_right {
    right: 308px;
  }
}
.tabs.is-boxed li.is-active a {
  border-color: #e8e8e8;
}

/* ==========================================================================
6. Loaders
========================================================================== */
.subloader {
  position: fixed;
  top: 107px;
  left: 0;
  height: calc(100% - 107px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: -1;
  transition: all 0.3s;
}
.subloader.is-active {
  opacity: 1;
  z-index: 8;
}
.subloader.is-grey {
  background: #f4f4f4;
}
.subloader.is-white {
  background: #fff;
}
.subloader .loader {
  height: 5rem;
  width: 5rem;
}

/* ==========================================================================
7. Code highlight
========================================================================== */
pre {
  background-color: transparent !important;
  color: unset;
  font-size: 0.875em;
  overflow-x: auto;
  padding: 0 !important;
  white-space: pre;
  word-wrap: normal;
}

.hljs {
  display: block;
  overflow-x: auto;
  font-size: 0.875em;
  padding: 1.5em;
  background: #344258;
  overflow-x: auto;
  white-space: pre;
  border-radius: 8px;
  color: white;
}

.hljs-name,
.hljs-strong {
  font-weight: bold;
  color: #4FC1EA;
}

.hljs-code,
.hljs-emphasis {
  font-style: italic;
}

.hljs-tag {
  color: #909090;
}

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class {
  color: #ade5fc;
}

.hljs-string,
.hljs-bullet {
  color: #F39200 !important;
}

.hljs-type,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-quote,
.hljs-built_in,
.hljs-builtin-name {
  color: #ffa;
}

.hljs-attr {
  color: #68BB88;
}

.hljs-number,
.hljs-symbol,
.hljs-bullet {
  color: #d36363;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
  color: #fcc28c;
}

.hljs-comment,
.hljs-deletion,
.hljs-code {
  color: #888;
}

.hljs-regexp,
.hljs-link {
  color: #c6b4f0;
}

.hljs-meta {
  color: #fc9b9b;
}

.hljs-deletion {
  background-color: #fc9b9b;
  color: #333;
}

.hljs-addition {
  background-color: #a2fca2;
  color: #333;
}

.hljs a {
  color: inherit;
}

.hljs a:focus,
.hljs a:hover {
  color: inherit;
  text-decoration: underline;
}

/*

Animated message (from ajax example)

*/
/* Default styling */
#message {
  top: -200px;
  transition: all 0.5s;
}

/* When inside current slide */
.fancybox-slide--current #message {
  top: 0;
}

/* Different effect when fanyBox is closing; optional */
.fancybox-is-closing #message {
  top: 0;
  transform: scale(1.5);
}

/*

Advanced example - Customized layout

*/
@media all and (min-width: 600px) {
  /* Change color for backdrop */
  .element-block {
    /* Move caption area to the right side */
    /* Remove gradient from caption*/
    /* Adjust content area position */
    /* Align buttons at the right side  */
    /* Remove background from all buttons */
    /* Navigation arrows */
    /* Reposition right arrow */
  }
  .element-block .fancybox-custom-layout .fancybox-bg {
    background: #fcfaf9;
  }
  .element-block .fancybox-custom-layout.fancybox-is-open .fancybox-bg {
    opacity: 1;
  }
  .element-block .fancybox-custom-layout .fancybox-caption {
    background: #f1ecec;
    bottom: 0;
    color: #6c6f73;
    left: auto;
    padding: 30px 20px;
    right: 44px;
    top: 0;
    width: 256px;
  }
  .element-block .fancybox-custom-layout .fancybox-caption h3 {
    color: #444;
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 24px;
  }
  .element-block .fancybox-custom-layout .fancybox-caption a {
    color: #444;
  }
  .element-block .fancybox-custom-layout .fancybox-caption::before {
    display: none;
  }
  .element-block .fancybox-custom-layout .fancybox-stage {
    right: 300px;
  }
  .element-block .fancybox-custom-layout .fancybox-toolbar {
    background: #3b3b45;
    bottom: 0;
    left: auto;
    right: 0;
    top: 0;
    width: 44px;
  }
  .element-block .fancybox-custom-layout .fancybox-button {
    background: transparent;
  }
  .element-block .fancybox-custom-layout .fancybox-navigation .fancybox-button div {
    padding: 6px;
    background: #fcfaf9;
    border-radius: 50%;
    transition: opacity 0.2s;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    opacity: 0.7;
  }
  .element-block .fancybox-custom-layout .fancybox-navigation .fancybox-button:not([disabled]):hover div {
    opacity: 1;
  }
  .element-block .fancybox-custom-layout .fancybox-navigation .fancybox-button[disabled] {
    color: #999;
  }
  .element-block .fancybox-custom-layout .fancybox-navigation .fancybox-button:not([disabled]) {
    color: #333;
  }
  .element-block .fancybox-custom-layout .fancybox-button--arrow_right {
    right: 308px;
  }
}
/*

Advanced example - Morphing modal window

https://codepen.io/fancyapps/pen/rmwyXN

*/
.morphing-btn-wrap {
  display: inline-block;
  position: relative;
  text-align: center;
}

.morphing-btn {
  box-sizing: border-box;
  transition: color 0.3s 0.2s, width 0.2s 0s;
  white-space: nowrap;
}

.morphing-btn_circle {
  color: transparent !important;
  padding-left: 0;
  padding-right: 0;
  /* Override inline style rule */
  transition: color 0.2s 0s, width 0.3s 0.2s;
  width: 35.6px !important;
}

.morphing-btn-clone {
  backface-visibility: hidden;
  background: #ff5268;
  border-radius: 50%;
  position: fixed;
  transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
  z-index: 3;
}

.morphing-btn-clone_visible {
  display: block;
  transform: scale(1) !important;
}

.fancybox-morphing .fancybox-bg {
  background: #ff5268;
  opacity: 1;
}

.fancybox-morphing .fancybox-toolbar {
  right: 40px;
  top: 20px;
}

.fancybox-morphing .fancybox-button--close {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  color: #fff;
}

.fancybox-morphing .fancybox-button--close:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Styling for element used in example */
#morphing-content {
  backface-visibility: hidden;
  background: transparent;
  line-height: 2;
  margin: 0;
  padding: 6em 10vw;
  position: relative;
  z-index: 3;
}

#morphing-content * {
  color: #fff;
}

/*

Advanced example - Confirm dialog

https://codepen.io/fancyapps/pen/PmpePO

*/
.fc-container .fancybox-bg {
  background: #eee;
}

.fancybox-is-open.fc-container .fancybox-bg {
  opacity: 0.95;
}

.fc-content {
  box-shadow: 10px 10px 60px -25px;
  max-width: 550px;
}

/* Custom animation */
.fancybox-fx-material.fancybox-slide--previous,
.fancybox-fx-material.fancybox-slide--next {
  opacity: 0;
  transform: translateY(-60px) scale(1.1);
}

.fancybox-fx-material.fancybox-slide--current {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/*

Advanced example - Product quick view

*/
.quick-view-container {
  background: rgba(10, 10, 10, 0.85);
}

.quick-view-content {
  bottom: 0;
  height: calc(100% - 40px);
  left: 0;
  margin: auto;
  max-height: 650px;
  max-width: 980px;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 40px);
}

.quick-view-carousel {
  background: #fff;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 57%;
}

.quick-view-carousel .fancybox-stage {
  bottom: 30px;
}

.quick-view-aside {
  background: #fff;
  bottom: 30px;
  color: #777;
  left: auto;
  padding: 50px 0 30px 0;
  position: absolute;
  right: 0;
  top: 30px;
  width: 43%;
}

.quick-view-aside::before,
.quick-view-aside::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
}

.quick-view-aside::before {
  background: #f4f4f4;
  width: 8px;
}

.quick-view-aside::after {
  background: #e9e9e9;
  width: 1px;
}

.quick-view-aside > div {
  height: 100%;
  overflow: auto;
  padding: 5vh 30px 0 30px;
  text-align: center;
}

.quick-view-aside > div > p {
  font-size: 90%;
}

.quick-view-close {
  background: #f0f0f0;
  border: 0;
  color: #222;
  cursor: pointer;
  font-family: Arial;
  font-size: 14px;
  height: 44px;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  text-indent: -99999px;
  top: 30px;
  transition: all 0.2s;
  width: 44px;
}

.quick-view-close:hover {
  background: #e4e4e4;
}

.quick-view-close::before,
.quick-view-close::after {
  background-color: #222;
  content: "";
  height: 18px;
  left: 22px;
  position: absolute;
  top: 12px;
  width: 1px;
}

.quick-view-close:before {
  transform: rotate(-45deg);
}

.quick-view-close:after {
  transform: rotate(45deg);
}

.quick-view-bullets {
  bottom: 0;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-align: center;
  width: 100%;
  z-index: 99999;
}

.quick-view-bullets li {
  display: inline-block;
  vertical-align: top;
}

.quick-view-bullets li a {
  display: block;
  height: 30px;
  position: relative;
  width: 20px;
}

.quick-view-bullets li a span {
  background: #d4d2d2;
  border-radius: 99px;
  height: 10px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  text-indent: -99999px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
}

.quick-view-bullets li.active a span {
  background: #ff4453;
}

/*
// End of examples
*/
/* ==========================================================================
6. Hopscotch styles
========================================================================== */
.hopscotch-bubble {
  border: 1px solid #e8e8e8 !important;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06) !important;
  border-radius: 2px !important;
}
.hopscotch-bubble .hopscotch-bubble-container {
  background: #fff !important;
  position: relative !important;
  z-index: 2 !important;
}
.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .hopscotch-next {
  height: 32px;
  min-width: 80px;
  background: #fff;
  color: #393a4f;
  border-radius: 100px;
  border-color: #cecece;
  text-shadow: none !important;
  transition: all 0.3s;
}
.hopscotch-bubble .hopscotch-bubble-container .hopscotch-actions .hopscotch-next:hover {
  background: #6e5bdb;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
  border-color: #6e5bdb;
  color: #fff;
}
.hopscotch-bubble .hopscotch-arrow.down .hopscotch-bubble-arrow-border {
  position: relative !important;
  top: -6px !important;
  border-top: 17px solid #dbdbdb !important;
}
.hopscotch-bubble .hopscotch-arrow.up .hopscotch-bubble-arrow-border {
  position: relative !important;
  top: 6px !important;
  border-bottom: 17px solid #dbdbdb !important;
}
.hopscotch-bubble .hopscotch-arrow.right .hopscotch-bubble-arrow-border {
  position: relative !important;
  left: -6px !important;
  border-left: 17px solid #dbdbdb !important;
}
.hopscotch-bubble .hopscotch-arrow.left .hopscotch-bubble-arrow-border {
  position: relative !important;
  right: -6px !important;
  border-right: 17px solid #dbdbdb !important;
}

.hopscotch-highlight {
  position: relative !important;
  z-index: 1001 !important;
}

.chat-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  z-index: -1;
  transition: all 0.3s;
}
.chat-wrapper.is-active, .chat-wrapper.is-standalone {
  pointer-events: all !important;
  z-index: 1000 !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.chat-wrapper.is-standalone .chat-inner .chat-nav .close-chat {
  display: none !important;
}
.chat-wrapper .chat-inner {
  position: relative;
  height: 100%;
  width: 100%;
}
.chat-wrapper .chat-inner .chat-nav {
  position: absolute;
  top: 0;
  left: 60px;
  width: calc(100% - 60px);
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  z-index: 99;
}
.chat-wrapper .chat-inner .chat-nav .nav-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.chat-wrapper .chat-inner .chat-nav .nav-start .recipient-block {
  display: inherit;
  justify-content: inherit;
  align-items: inherit;
}
.chat-wrapper .chat-inner .chat-nav .nav-start .recipient-block .avatar-container {
  position: relative;
  height: 46px;
  width: 46px;
  border: 2px solid transparent;
}
.chat-wrapper .chat-inner .chat-nav .nav-start .recipient-block .avatar-container .user-avatar {
  border-radius: 50%;
}
.chat-wrapper .chat-inner .chat-nav .nav-start .recipient-block .username {
  margin-left: 8px;
}
.chat-wrapper .chat-inner .chat-nav .nav-start .recipient-block .username span {
  display: block;
}
.chat-wrapper .chat-inner .chat-nav .nav-start .recipient-block .username span:first-child {
  font-weight: 500;
  color: #757a91;
}
.chat-wrapper .chat-inner .chat-nav .nav-start .recipient-block .username span:nth-child(2) {
  display: flex;
  align-items: center;
}
.chat-wrapper .chat-inner .chat-nav .nav-start .recipient-block .username span:nth-child(2) svg {
  height: 14px;
  width: 14px;
  stroke: #888da8;
  margin-right: 4px;
}
.chat-wrapper .chat-inner .chat-nav .nav-start .recipient-block .username span:nth-child(2) span {
  font-size: 0.9rem;
  color: #888da8;
}
.chat-wrapper .chat-inner .chat-nav .nav-end {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.chat-wrapper .chat-inner .chat-nav .nav-end .dropdown {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
}
.chat-wrapper .chat-inner .chat-nav .nav-end .chat-nav-item.is-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
}
.chat-wrapper .chat-inner .chat-nav .nav-end .chat-nav-item.is-icon:last-child {
  margin-right: 4px;
}
.chat-wrapper .chat-inner .chat-nav .nav-end .chat-nav-item.is-icon svg {
  height: 20px;
  width: 20px;
  stroke: #888da8;
}
.chat-wrapper .chat-inner .chat-nav .nav-end .chat-nav-item.close-chat {
  border-radius: 50%;
}
.chat-wrapper .chat-inner .chat-nav .nav-end .chat-nav-item.close-chat:hover {
  background: #f0f0f0;
}
.chat-wrapper .chat-inner .chat-nav .nav-end .chat-nav-item.close-chat:hover svg {
  stroke: #757a91;
}
.chat-wrapper .chat-inner .chat-nav .nav-end .chat-search {
  margin: 0 8px;
}
.chat-wrapper .chat-inner .chat-nav .nav-end .chat-search .input:focus {
  border-color: #6e5bdb;
}
.chat-wrapper .chat-inner .chat-nav .nav-end .chat-search .input:focus + .form-icon svg {
  stroke: #6e5bdb;
}
.chat-wrapper .chat-inner .users-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 100%;
  background: #fff;
  border-right: 1px solid #e0e0e0;
}
.chat-wrapper .chat-inner .users-sidebar .header-item, .chat-wrapper .chat-inner .users-sidebar .user-item, .chat-wrapper .chat-inner .users-sidebar .footer-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 60px;
}
.chat-wrapper .chat-inner .users-sidebar .header-item img {
  height: 38px !important;
  width: 38px !important;
}
.chat-wrapper .chat-inner .users-sidebar .conversations-list {
  height: calc(100% - 120px);
  overflow-y: auto;
}
.chat-wrapper .chat-inner .users-sidebar .user-item {
  cursor: pointer;
}
.chat-wrapper .chat-inner .users-sidebar .user-item.is-active {
  background: whitesmoke;
}
.chat-wrapper .chat-inner .users-sidebar .user-item.is-active .user-status {
  border-color: whitesmoke !important;
}
.chat-wrapper .chat-inner .users-sidebar .user-item:hover {
  background: #ededed;
}
.chat-wrapper .chat-inner .users-sidebar .user-item .avatar-container {
  position: relative;
  height: 38px;
  width: 38px;
  border: 2px solid transparent;
}
.chat-wrapper .chat-inner .users-sidebar .user-item .avatar-container .user-avatar {
  border-radius: 50%;
}
.chat-wrapper .chat-inner .users-sidebar .user-item .avatar-container .user-status {
  position: absolute;
  top: -3px;
  right: -1px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: #999;
  border: 2px solid #fff;
}
.chat-wrapper .chat-inner .users-sidebar .user-item .avatar-container .user-status.is-online {
  background: #1ce589;
}
.chat-wrapper .chat-inner .users-sidebar .user-item .avatar-container .user-status.is-busy {
  background: #ff9700;
}
.chat-wrapper .chat-inner .users-sidebar .user-item .avatar-container .user-status.is-away {
  background: #ff7273;
}
.chat-wrapper .chat-inner .users-sidebar .footer-item {
  position: absolute;
  bottom: 0;
  left: 0;
}
.chat-wrapper .chat-inner .users-sidebar .footer-item .add-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  min-height: 42px;
  width: 42px;
  max-width: 42px;
  margin: 0 auto;
  border: 1.8px dashed #999;
  border-radius: 50%;
  transition: all 0.3s;
  cursor: pointer;
}
.chat-wrapper .chat-inner .users-sidebar .footer-item .add-button:hover {
  border: 1.8px solid #6e5bdb;
}
.chat-wrapper .chat-inner .users-sidebar .footer-item .add-button:hover svg {
  stroke: #6e5bdb;
}
.chat-wrapper .chat-inner .users-sidebar .footer-item .add-button svg {
  height: 18px;
  width: 18px;
  stroke: #999;
  transition: inherit;
}
.chat-wrapper .chat-inner .chat-body {
  position: absolute;
  bottom: 0;
  left: 60px;
  height: 100%;
  width: calc(100% - 60px);
  background: #f0f0f0;
  transition: all 0.3s;
}
.chat-wrapper .chat-inner .chat-body.is-opened {
  width: calc(100% - 460px);
}
.chat-wrapper .chat-inner .chat-body.is-opened .chat-action {
  width: calc(100% - 460px) !important;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner {
  position: relative;
  width: 100%;
  height: calc(100% - 60px);
  margin-top: 60px;
  padding: 20px 80px 60px 80px;
  overflow-y: auto;
  animation-name: fadeInLeft;
  animation-duration: 0.5s;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .date-divider {
  position: relative;
  margin-bottom: 40px;
  margin-top: 20px;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .date-divider hr {
  margin: 10px 0;
  background: #ccc;
  height: 1px;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .date-divider .date-divider-text {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 5px 10px;
  background-color: #f0f0f0;
  color: #ccc;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message {
  display: flex;
  align-items: start;
  margin-bottom: 30px;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message img {
  display: block;
  height: 42px;
  width: 42px;
  border-radius: 50%;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message .message-block span {
  display: block;
  width: 100%;
  font-size: 0.8rem;
  color: #999;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message .message-block .message-text {
  position: relative;
  display: block;
  width: auto;
  max-width: 320px;
  padding: 10px;
  border-radius: 3px;
  font-size: 0.9rem;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message .message-block .message-text:before {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-sent {
  flex-direction: row-reverse;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-sent img {
  margin-left: 20px;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-sent .message-block .message-text {
  color: #757a91;
  background-color: #fff;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-sent .message-block .message-text:before {
  right: -5px;
  border-top: 5px solid #fff;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-sent + .is-sent {
  margin-top: -16px !important;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-sent + .is-sent img {
  visibility: hidden;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-received img {
  margin-right: 20px;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-received .message-block span {
  text-align: right;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-received .message-block .message-text {
  color: #fafafa;
  background-color: #8878e1;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-received .message-block .message-text:before {
  left: -5px;
  border-top: 5px solid #8878e1;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-received + .is-received {
  margin-top: -16px !important;
}
.chat-wrapper .chat-inner .chat-body .chat-body-inner .chat-message.is-received + .is-received img {
  visibility: hidden;
}
.chat-wrapper .chat-inner .chat-action {
  position: fixed;
  bottom: 0;
  left: 60px;
  width: calc(100% - 60px);
  height: 60px;
  padding: 0 40px;
  background: #f0f0f0;
}
.chat-wrapper .chat-inner .chat-action .chat-action-inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}
.chat-wrapper .chat-inner .chat-action .chat-action-inner .control {
  position: relative;
  width: 100%;
}
.chat-wrapper .chat-inner .chat-action .chat-action-inner .control .textarea {
  resize: none;
  height: 44px;
  max-height: 44px;
  min-height: 44px;
  padding: 5px 9px;
  padding-left: 54px;
  transition: all 0.3s;
}
.chat-wrapper .chat-inner .chat-action .chat-action-inner .control .textarea:focus {
  border-color: #e8e8e8 !important;
}
.chat-wrapper .chat-inner .chat-action .chat-action-inner .control .compose-dropdown {
  position: absolute;
  top: 0;
  left: 0;
}
.chat-wrapper .chat-inner .chat-action .chat-action-inner .control .add-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  width: 44px;
}
.chat-wrapper .chat-inner .chat-action .chat-action-inner .control .add-button .button-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 34px;
  min-height: 34px;
  width: 34px;
  max-width: 34px;
  border: 1px solid #6e5bdb;
  border-radius: 4px;
  background: #6e5bdb;
  transition: all 0.3s;
  cursor: pointer;
}
.chat-wrapper .chat-inner .chat-action .chat-action-inner .control .add-button:hover .button-inner {
  border-color: #6e5bdb;
  background-color: #6e5bdb;
}
.chat-wrapper .chat-inner .chat-action .chat-action-inner .control .add-button:hover .button-inner svg {
  stroke: #fafafa;
}
.chat-wrapper .chat-inner .chat-action .chat-action-inner .control .add-button svg {
  height: 18px;
  width: 18px;
  stroke: #fafafa;
  transition: inherit;
}
.chat-wrapper .chat-inner .chat-panel {
  position: absolute;
  bottom: 0;
  right: 0;
  height: calc(100% - 60px);
  width: 400px;
  background: #fff;
  border-left: 1px solid #e8e8e8;
  transform: translateX(400px);
  transition: all 0.3s;
}
.chat-wrapper .chat-inner .chat-panel.is-opened {
  transform: translateX(0);
}
.chat-wrapper .chat-inner .chat-panel .panel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  width: 100%;
  background: #fff;
  padding: 16px;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-header h3 {
  font-size: 1.2rem;
  font-weight: 500;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-header .panel-close {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  transition: all 0.3s;
  cursor: pointer;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-header .panel-close:hover {
  background: #f0f0f0;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-header .panel-close:hover svg {
  stroke: #757a91;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-header .panel-close svg {
  height: 20px;
  width: 20px;
  stroke: #999;
  transition: inherit;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body {
  position: absolute;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: calc(100% - 60px);
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner {
  padding: 16px;
  animation-name: fadeInLeft;
  animation-duration: 0.5s;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .subheader {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 40px;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .subheader .action-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .subheader .action-icon i {
  font-size: 22px;
  color: #888da8;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .subheader .action-icon:hover {
  background: whitesmoke;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .details-avatar {
  position: relative;
  height: 110px;
  width: 110px;
  margin: 10px auto;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .details-avatar img {
  display: block;
  border-radius: 50%;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .details-avatar .call-me {
  position: absolute;
  bottom: 0;
  right: -12px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #6e5bdb;
  cursor: pointer;
  transition: all 0.3s;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .details-avatar .call-me:hover {
  background: #9a8de6;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .details-avatar .call-me i {
  font-size: 20px;
  color: #fafafa;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-meta h3 {
  text-align: center;
  color: #393a4f;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.2;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-meta h4 {
  font-size: 0.95rem;
  color: #999;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  transform: scale(0.84);
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon {
  width: 36px;
  height: 20px;
  background: #5F6062;
  position: relative;
  margin: 0 3px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon:before {
  content: "";
  position: absolute;
  top: -12.2px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 12.2px solid #5F6062;
  transition: all 0.3s ease-in-out;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 12.5px solid #5F6062;
  transition: all 0.3s ease-in-out;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon:hover {
  background: #757a91 !important;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon:hover:after {
  border-top: 12.5px solid #757a91 !important;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon:hover:before {
  border-bottom: 12.5px solid #757a91 !important;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-red {
  background: #ff7273;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-red:after {
  border-top: 12.5px solid #ff7273;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-red:before {
  border-bottom: 12.5px solid #ff7273;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-green {
  background: #1ce589;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-green:after {
  border-top: 12.5px solid #1ce589;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-green:before {
  border-bottom: 12.5px solid #1ce589;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-accent {
  background: #6e5bdb;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-accent:after {
  border-top: 12.5px solid #6e5bdb;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-accent:before {
  border-bottom: 12.5px solid #6e5bdb;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-blue {
  background: #039be5;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-blue:after {
  border-top: 12.5px solid #039be5;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-blue:before {
  border-bottom: 12.5px solid #039be5;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-orange {
  background: #ff9700;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-orange:after {
  border-top: 12.5px solid #ff9700;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-orange:before {
  border-bottom: 12.5px solid #ff9700;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-purple {
  background: #9c2bed;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-purple:after {
  border-top: 12.5px solid #9c2bed;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon.is-purple:before {
  border-bottom: 12.5px solid #9c2bed;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-badges .hexagon .mdi {
  position: relative;
  top: -2px;
  color: white;
  font-size: 18px;
  line-height: 16px;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-about {
  margin: 20px 0;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-about label {
  display: block;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 500;
  color: #888da8;
  margin-bottom: 16px;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-about .about-block {
  display: flex;
  align-items: start;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-about .about-block:last-child {
  margin-bottom: 0;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-about .about-block i {
  font-size: 22px;
  color: #757a91;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-about .about-block .about-text {
  margin-left: 12px;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-about .about-block .about-text span {
  display: block;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-about .about-block .about-text span:first-child {
  font-size: 0.8rem;
  font-weight: 500;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-about .about-block .about-text span:nth-child(2) {
  font-size: 0.8rem;
  color: #999;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-about .about-block .about-text a {
  color: #999;
}
.chat-wrapper .chat-inner .chat-panel .panel-inner .panel-body.is-user-details .panel-body-inner .user-about .about-block .about-text a:hover {
  color: #6e5bdb;
}

/* ==========================================================================
1. Add conversation modal
========================================================================== */
.add-conversation-modal .modal-content {
  overflow: visible;
}
.add-conversation-modal .modal-content img {
  height: 70px;
  width: 70px;
  display: block;
  margin: 0 auto;
}
.add-conversation-modal .modal-content .help-text {
  text-align: center;
  font-size: 0.9rem;
  padding: 10px 50px;
  color: #999;
}
.add-conversation-modal .modal-content .field {
  padding: 0 50px;
  margin-bottom: 0;
  margin-top: 16px;
}
.add-conversation-modal .modal-content .action {
  padding: 10px 50px 20px 50px;
}
.add-conversation-modal .modal-content .action button {
  line-height: 0;
}

/* ==========================================================================
1. General Layout
========================================================================== */
.card.is-new-content .tabs-wrapper {
  border-radius: 6px;
}
.card.is-new-content .tabs {
  border-radius: 6px 6px 0 0;
}
.card.is-new-content .tabs ul {
  background: #fcfcfc;
}
.card.is-new-content .tabs li {
  background: #fcfcfc;
}
.card.is-new-content .tabs li.is-active a {
  color: #757a91;
  font-weight: 500;
}
.card.is-new-content .tabs li.is-active a svg {
  stroke: #757a91;
}
.card.is-new-content .tabs li.close-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.card.is-new-content .tabs li.close-wrap .close-publish {
  margin: 0 16px;
  display: none;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s;
}
.card.is-new-content .tabs li.close-wrap .close-publish:hover {
  background: #e8e8e8;
}
.card.is-new-content .tabs li.close-wrap .close-publish svg {
  height: 18px;
  width: 18px;
  stroke: #757a91;
}
.card.is-new-content .tabs a {
  font-size: 0.9rem;
  color: #888da8;
  padding: 0.75em !important;
}
.card.is-new-content .tabs a svg {
  stroke: #888da8;
}
.card.is-new-content .compose {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
}
.card.is-new-content .compose .compose-form {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.card.is-new-content .compose img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
}
.card.is-new-content .compose .control {
  width: 100%;
  margin-left: 20px;
}
.card.is-new-content .compose .control .textarea {
  padding: 0;
  border-color: transparent;
  resize: none;
}
.card.is-new-content .compose-options {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px;
  border-radius: 0 0 6px 6px;
  background: #fff;
  cursor: pointer;
}
.card.is-new-content .compose-options .is-full {
  width: 100% !important;
  margin: 0 auto !important;
}
.card.is-new-content .compose-options .is-narrower {
  padding: 0.3rem 0.5rem !important;
}
.card.is-new-content .compose-options .compose-option {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 6px 16px;
  margin-right: 10px;
  background: #f7f7f7;
  border-radius: 500px;
  font-size: 0.85rem;
  color: #888da8;
  transition: all 0.3s;
}
.card.is-new-content .compose-options .compose-option.is-centered {
  margin: 0 auto;
}
.card.is-new-content .compose-options .compose-option:hover {
  background: #f2f2f2;
}
.card.is-new-content .compose-options .compose-option:hover svg {
  stroke: #393a4f;
}
.card.is-new-content .compose-options .compose-option span {
  display: block;
  padding: 0 8px;
}
.card.is-new-content .compose-options .compose-option svg {
  height: 20px;
  width: 20px;
  transition: all 0.3s;
}
.card.is-new-content .compose-options .compose-option img {
  display: block;
  height: 20px;
  width: 20px;
}
.card.is-new-content .compose-options .compose-option input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
.card.is-new-content .more-wrap {
  display: none;
  align-items: center;
  padding: 8px;
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 6px 6px;
  background: #fafafa;
}
.card.is-new-content .more-wrap .is-more {
  line-height: 0;
  height: 38px;
  padding: 6px;
  margin-right: 6px;
}
.card.is-new-content .more-wrap .is-more span {
  margin: 0 8px 0 4px;
}
.card.is-new-content .more-wrap .is-more svg {
  width: 16px;
  height: 16px;
}
.card.is-new-content .more-wrap .is-solid {
  line-height: 0;
}
.card.is-new-content .hidden-options {
  display: none;
  background: #f5f6f7;
  padding: 8px;
  border-top: 1px solid #e8e8e8;
  height: auto;
}
.card.is-new-content .hidden-options.is-opened {
  height: 350px !important;
  overflow: auto !important;
}
.card.is-new-content .hidden-options.is-opened::-webkit-scrollbar {
  width: 4px;
}
.card.is-new-content .hidden-options.is-opened::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.card.is-new-content .hidden-options .target-channels .channel {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
}
.card.is-new-content .hidden-options .target-channels .channel:hover {
  background: #edeef0;
}
.card.is-new-content .hidden-options .target-channels .channel .channel-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  margin: 0 10px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e8e8e8;
}
.card.is-new-content .hidden-options .target-channels .channel .channel-icon svg {
  height: 18px;
  width: 18px;
  stroke: #999;
  stroke-width: 1px;
}
.card.is-new-content .hidden-options .target-channels .channel .story-icon {
  position: relative;
  height: 40px;
  width: 40px;
  margin: 0 10px;
  border-radius: 50%;
  background: #e8e8e8;
  border: 1px solid #cecece;
}
.card.is-new-content .hidden-options .target-channels .channel .story-icon .plus-icon {
  position: absolute;
  bottom: -1px;
  right: -8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  width: 22px;
  border: 2px solid #e8e8e8;
  border-radius: 50%;
  background: #6e5bdb;
}
.card.is-new-content .hidden-options .target-channels .channel .story-icon .plus-icon svg {
  height: 10px;
  width: 10px;
  stroke-width: 3px;
  stroke: #fafafa;
}
.card.is-new-content .hidden-options .target-channels .channel .channel-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: #393a4f;
}
.card.is-new-content .hidden-options .target-channels .channel .dropdown {
  margin-left: auto;
}
.card.is-new-content .hidden-options .target-channels .channel .dropdown button {
  line-height: 0;
  height: 36px;
  padding: 6px;
}
.card.is-new-content .hidden-options .target-channels .channel .dropdown button span {
  margin: 0 4px;
}
.card.is-new-content .hidden-options .target-channels .channel .dropdown button svg {
  width: 16px;
  height: 16px;
}
.card.is-new-content .hidden-options .target-channels .channel .dropdown button i {
  font-size: 1.1rem;
}
.card.is-new-content .hidden-options .friends-list {
  margin-top: 10px;
  border-top: 1px solid #dedede;
}
.card.is-new-content .hidden-options .friends-list .list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 10px;
}
.card.is-new-content .hidden-options .friends-list .list-header span {
  color: #757a91;
  font-size: 0.8rem;
  font-weight: 500;
}
.card.is-new-content .hidden-options .friends-list .list-header .actions {
  display: flex;
  align-items: center;
}
.card.is-new-content .hidden-options .friends-list .list-header .actions a {
  display: block;
  margin-left: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #757a91;
}
.card.is-new-content .hidden-options .friends-list .list-header .actions a:first-child {
  margin-left: auto;
}
.card.is-new-content .hidden-options .friends-list .list-header .actions a:hover {
  color: #6e5bdb;
}
.card.is-new-content .hidden-options .friends-list .list-header .actions a.search-trigger {
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card.is-new-content .hidden-options .friends-list .list-header .actions a svg {
  height: 16px;
  width: 16px;
  stroke: #757a91;
}
.card.is-new-content .hidden-options .friends-list .list-header .control {
  position: relative;
}
.card.is-new-content .hidden-options .friends-list .list-header .control .input {
  padding-left: 36px;
  border-radius: 100px;
  transition: all 0.3s;
  font-size: 0.9rem;
}
.card.is-new-content .hidden-options .friends-list .list-header .control .input:focus {
  border-color: #e8e8e8;
}
.card.is-new-content .hidden-options .friends-list .list-header .control span {
  position: absolute;
  top: 0;
  left: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
}
.card.is-new-content .hidden-options .friends-list .list-header .control span svg {
  height: 18px;
  width: 18px;
  stroke: #cecece;
}
.card.is-new-content .hidden-options .friends-list .list-body {
  padding: 0 6px;
}
.card.is-new-content .hidden-options .friends-list .list-body .friend-block {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 6px 0;
  border-radius: 4px;
  cursor: pointer;
}
.card.is-new-content .hidden-options .friends-list .list-body .friend-block:hover .round-checkbox label {
  border-color: #6e5bdb;
}
.card.is-new-content .hidden-options .friends-list .list-body .friend-block .friend-avatar {
  height: 38px;
  width: 38px;
  margin: 0 10px;
  border-radius: 50%;
}
.card.is-new-content .hidden-options .friends-list .list-body .friend-block .friend-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: #393a4f;
}
.card.is-new-content.is-highlighted {
  position: relative !important;
  z-index: 1001 !important;
}
.card.is-new-content.is-highlighted .close-publish {
  display: flex !important;
}
.card.is-new-content.is-highlighted .more-wrap {
  display: flex;
}
.card.is-new-content.is-highlighted .hidden-options {
  display: block;
}
.card.is-post.is-nested {
  position: relative;
  margin-top: 20px !important;
  border-bottom-color: transparent;
  border-radius: 6px 6px 0 0;
}
.card.is-post.is-simple .post-actions {
  flex-direction: row-reverse !important;
}
.card.is-post.is-simple .card-footer {
  padding-top: 10px;
}
.card.is-post.has-nested .content-wrap .card-footer {
  margin-top: 16px;
}
.card.is-post .card-heading, .card.is-post .card-body {
  padding: 16px 16px 0 16px;
}
.card.is-post .card-footer {
  border: none;
  padding: 16px;
  margin: 0;
}
.card.is-post .user-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.card.is-post .user-block img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.card.is-post .user-block a, .card.is-post .user-block .time {
  display: block;
}
.card.is-post .user-block a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #393a4f;
  transition: color 0.3s;
}
.card.is-post .user-block a:hover {
  color: #4a4b67;
}
.card.is-post .user-block .time {
  font-size: 0.8rem;
  color: #999;
}
.card.is-post .user-block .user-info {
  padding: 0 10px;
}
.card.is-post .user-block .user-info a {
  line-height: 1.1;
}
.card.is-post .user-block .user-info a span {
  color: #6e5bdb;
  font-weight: 500;
}
.card.is-post .content-wrap .post-text p {
  color: #757a91;
  font-size: 0.9rem;
}
.card.is-post .content-wrap .post-text p a {
  color: #393a4f;
  font-weight: 500;
}
.card.is-post .content-wrap .post-text p a:hover {
  color: #6e5bdb;
}
.card.is-post .content-wrap .action-wrap {
  position: relative;
  margin-top: -22px !important;
}
.card.is-post .content-wrap .action-wrap .like-wrapper {
  position: absolute;
  bottom: -27px;
  right: 26px;
  max-height: 54px;
}
.card.is-post .content-wrap .action-wrap .fab-wrapper {
  position: absolute;
  bottom: -21px;
  max-height: 43px;
}
.card.is-post .content-wrap .action-wrap .fab-wrapper.is-share {
  right: 84px;
}
.card.is-post .content-wrap .action-wrap .fab-wrapper.is-comment {
  right: 131px;
}
.card.is-post .content-wrap .post-image {
  position: relative;
  margin: 10px 0;
}
.card.is-post .content-wrap .post-image img {
  display: block;
  border-radius: 3px;
}
.card.is-post .content-wrap .post-image .like-wrapper {
  position: absolute;
  bottom: -27px;
  right: 0;
  max-height: 54px;
}
.card.is-post .content-wrap .post-image .fab-wrapper {
  position: absolute;
  bottom: -21px;
  max-height: 43px;
}
.card.is-post .content-wrap .post-image .fab-wrapper.is-share {
  right: 58px;
}
.card.is-post .content-wrap .post-image .fab-wrapper.is-comment {
  right: 105px;
}
.card.is-post .content-wrap .post-image .triple-grid {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.card.is-post .content-wrap .post-image .triple-grid a.is-half {
  display: block;
  width: calc(50% - 0.25rem) !important;
  height: 100%;
}
.card.is-post .content-wrap .post-image .triple-grid img {
  display: block;
  margin-bottom: 0.5rem;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 50%;
}
.card.is-post .content-wrap .post-image .triple-grid .like-wrapper {
  position: absolute;
  bottom: -18px;
  right: 18px;
  max-height: 54px;
}
.card.is-post .content-wrap .post-image .triple-grid .fab-wrapper {
  position: absolute;
  bottom: -13px;
  max-height: 43px;
}
.card.is-post .content-wrap .post-image .triple-grid .fab-wrapper.is-share {
  right: 76px;
}
.card.is-post .content-wrap .post-image .triple-grid .fab-wrapper.is-comment {
  right: 123px;
}
.card.is-post .content-wrap .post-image .masonry-grid {
  position: relative;
  display: flex;
  align-items: center;
}
.card.is-post .content-wrap .post-image .masonry-grid img {
  display: block;
  margin-bottom: 0.5rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.card.is-post .content-wrap .post-image .masonry-grid .masonry-column-left {
  height: 100%;
  width: calc(61% - 0.5rem);
}
.card.is-post .content-wrap .post-image .masonry-grid .masonry-column-right {
  width: 39%;
  height: 100%;
  margin-left: 0.5rem;
}
.card.is-post .content-wrap .post-image .masonry-grid .like-wrapper {
  position: absolute;
  bottom: -18px;
  right: 0;
  max-height: 54px;
}
.card.is-post .content-wrap .post-image .masonry-grid .fab-wrapper {
  position: absolute;
  bottom: -13px;
  max-height: 43px;
}
.card.is-post .content-wrap .post-image .masonry-grid .fab-wrapper.is-share {
  right: 58px;
}
.card.is-post .content-wrap .post-image .masonry-grid .fab-wrapper.is-comment {
  right: 105px;
}
.card.is-post .content-wrap .post-link {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: start;
  padding: 12px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: whitesmoke;
  margin: 16px 0 10px 0;
}
.card.is-post .content-wrap .post-link.is-video .link-image {
  position: relative;
}
.card.is-post .content-wrap .post-link.is-video .link-image .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  background: rgba(52, 66, 88, 0.6);
}
.card.is-post .content-wrap .post-link.is-video .link-image .video-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 46px;
  width: 46px;
  background: #6e5bdb;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
}
.card.is-post .content-wrap .post-link.is-video .link-image .video-button img {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  left: 2px;
  z-index: 3;
}
.card.is-post .content-wrap .post-link.is-video .link-image .video-button:after {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #6e5bdb;
  animation: wave 1.6s infinite;
  animation-duration: 2s;
  transform-origin: center center;
  z-index: 0;
}
.card.is-post .content-wrap .post-link .link-image > img {
  display: block;
  height: 130px;
  width: 180px;
  min-width: 180px;
  border-radius: 6px;
  -o-object-fit: cover;
     object-fit: cover;
}
.card.is-post .content-wrap .post-link .link-content {
  margin-left: 12px;
}
.card.is-post .content-wrap .post-link .link-content h4 {
  margin-bottom: 4px;
}
.card.is-post .content-wrap .post-link .link-content h4 a {
  font-size: 1.1rem;
  font-weight: 500;
  color: #757a91;
}
.card.is-post .content-wrap .post-link .link-content h4 a:hover {
  color: #6e5bdb;
}
.card.is-post .content-wrap .post-link .link-content p {
  font-size: 0.9rem;
  color: #999;
}
.card.is-post .content-wrap .post-link .link-content small {
  text-transform: uppercase;
  font-size: 0.65rem;
  color: #757a91;
  margin-top: 8px;
}
.card.is-post .content-wrap .post-link .like-wrapper {
  position: absolute;
  bottom: -25px;
  right: 0;
  max-height: 54px;
}
.card.is-post .content-wrap .post-link .fab-wrapper {
  position: absolute;
  bottom: -20px;
  max-height: 43px;
}
.card.is-post .content-wrap .post-link .fab-wrapper.is-share {
  right: 58px;
}
.card.is-post .content-wrap .post-link .fab-wrapper.is-comment {
  right: 105px;
}
.card.is-post .content-wrap .post-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}
.card.is-post .content-wrap .post-actions .like-wrapper {
  margin: 0 2px;
}
.card.is-post .content-wrap .post-actions .like-wrapper .like-button {
  width: 36px;
  height: 36px;
  border: none;
}
.card.is-post .content-wrap .post-actions .like-wrapper .like-overlay {
  top: 0 !important;
  left: 0 !important;
  width: 36px;
  height: 36px;
}
.card.is-post .content-wrap .post-actions .like-wrapper i {
  font-size: 16px;
}
.card.is-post .content-wrap .post-actions .fab-wrapper {
  margin: 0 2px;
}
.card.is-post .content-wrap .post-actions .fab-wrapper .small-fab {
  width: 36px;
  height: 36px;
  border: none;
}
.card.is-post .content-wrap .post-actions .fab-wrapper .small-fab svg {
  height: 16px;
  width: 16px;
}
.card.is-post .content-wrap .card-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.card.is-post .content-wrap .card-footer .likers-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.card.is-post .content-wrap .card-footer .likers-group img {
  height: 38px;
  width: 38px;
  border-radius: 50%;
  border: 3px solid #fff;
}
.card.is-post .content-wrap .card-footer .likers-group img:not(:first-child) {
  margin-left: -12px;
}
.card.is-post .content-wrap .card-footer .likers-group .no-like {
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card.is-post .content-wrap .card-footer .likers-group .no-like svg {
  width: 24px;
  height: 24px;
}
.card.is-post .content-wrap .card-footer .likers-text {
  margin-left: 10px;
  line-height: 1.4;
}
.card.is-post .content-wrap .card-footer .likers-text p {
  font-size: 0.8rem;
  color: #888da8;
}
.card.is-post .content-wrap .card-footer .likers-text p a {
  color: #393a4f;
  font-weight: 500;
}
.card.is-post .content-wrap .card-footer .likers-text p a:hover {
  color: #6e5bdb;
}
.card.is-post .content-wrap .card-footer .social-count {
  margin-left: auto;
  display: flex;
  align-items: stretch;
}
.card.is-post .content-wrap .card-footer .social-count .shares-count, .card.is-post .content-wrap .card-footer .social-count .comments-count, .card.is-post .content-wrap .card-footer .social-count .likes-count {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 3px;
}
.card.is-post .content-wrap .card-footer .social-count .shares-count span, .card.is-post .content-wrap .card-footer .social-count .comments-count span, .card.is-post .content-wrap .card-footer .social-count .likes-count span {
  display: block;
  font-size: 0.9rem;
  color: #888da8;
  margin: 0 5px;
}
.card.is-post .content-wrap .card-footer .social-count .shares-count svg, .card.is-post .content-wrap .card-footer .social-count .comments-count svg, .card.is-post .content-wrap .card-footer .social-count .likes-count svg {
  height: 18px;
  width: 18px;
  stroke: #888da8;
}
.card.is-post .comments-wrap .comments-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}
.card.is-post .comments-wrap .comments-heading h4 {
  font-size: 1rem;
  font-weight: 500;
  color: #757a91;
}
.card.is-post .comments-wrap .comments-heading .close-comments {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s;
}
.card.is-post .comments-wrap .comments-heading .close-comments:hover {
  background: #e8e8e8;
}
.card.is-post .comments-wrap .comments-heading .close-comments svg {
  height: 18px;
  width: 18px;
  stroke: #757a91;
}
.card.is-post .comments-wrap .comments-body {
  padding: 16px;
  max-height: 450px;
  overflow-y: auto;
}
.card.is-post .comments-wrap .comments-body .comments-placeholder {
  text-align: center;
}
.card.is-post .comments-wrap .comments-body .comments-placeholder img {
  display: block;
  max-width: 80px;
  margin: 0 auto;
  opacity: 0.7;
}
.card.is-post .comments-wrap .comments-body .comments-placeholder h3 {
  margin-top: 10px;
  font-weight: 500;
  font-size: 1.3rem;
  color: #393a4f;
}
.card.is-post .comments-wrap .comments-body .comments-placeholder p {
  color: #999;
}
.card.is-post .comments-wrap .comments-body .is-comment {
  align-items: stretch;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-left img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content a {
  font-size: 0.9rem;
  font-weight: 500 !important;
  display: block;
  color: #393a4f;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content a:hover {
  color: #6e5bdb;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content .time {
  display: block;
  font-size: 0.8rem;
  color: #888da8;
  margin-bottom: 10px;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content p {
  font-size: 0.9rem !important;
  color: #757a91;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content .controls {
  padding: 8px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content .controls .like-count {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content .controls .like-count span {
  display: block;
  font-size: 0.9rem;
  color: #888da8;
  margin: 0 5px;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content .controls .like-count svg {
  position: relative;
  top: -1px;
  height: 14px;
  width: 14px;
  stroke: #888da8;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content .controls .like-count:hover span {
  color: #6e5bdb;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content .controls .like-count:hover svg {
  stroke: #6e5bdb;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content .controls .reply, .card.is-post .comments-wrap .comments-body .is-comment .media-content .controls .edit {
  margin: 0 5px;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content .controls .reply a, .card.is-post .comments-wrap .comments-body .is-comment .media-content .controls .edit a {
  font-size: 0.8rem;
  color: #888da8;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-content .controls .reply a:hover, .card.is-post .comments-wrap .comments-body .is-comment .media-content .controls .edit a:hover {
  color: #6e5bdb;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-right svg {
  height: 18px;
  width: 18px;
  stroke: #757a91;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-right .dropdown .button {
  padding: 4px !important;
  border-color: transparent !important;
}
.card.is-post .comments-wrap .comments-body .is-comment .media-right .dropdown .media {
  border: none !important;
  padding-top: 0 !important;
}
.card.is-post .comments-wrap .comments-body .is-comment .is-comment .media-left {
  position: relative;
}
.card.is-post .comments-wrap .comments-body .is-comment .is-comment .media-left:after {
  content: "";
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1.4px;
  height: calc(100% - 46px);
  background: #e8e8e8;
}
.card.is-post .comments-wrap .comments-body .is-comment .is-comment .media-left:before {
  content: "";
  position: absolute;
  top: calc(50% + 20px);
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 13px;
  width: 13px;
  border: 1px solid #e8e8e8;
  border-radius: 50%;
  background: #fff;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06) !important;
  z-index: 1;
}
.card.is-post .comments-wrap .comments-body .load-more .load-more-button {
  background: #e8e8e8;
  width: 80px;
  padding: 5px 16px;
  border-radius: 500px;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
.card.is-post .comments-wrap .comments-body .load-more .load-more-button:active, .card.is-post .comments-wrap .comments-body .load-more .load-more-button:focus {
  outline: none;
}
.card.is-post .comments-wrap .comments-body .load-more .load-more-button:hover {
  background: #f2f2f2;
}
.card.is-post .comments-wrap .comments-body .load-more .load-more-button svg {
  width: 22px;
  height: 22px;
  stroke: #888da8;
}
.card.is-post .comments-wrap .card-footer {
  margin: 0 !important;
  padding: 16px;
}
.card.is-post .comments-wrap .card-footer .post-comment {
  width: 100%;
}
.card.is-post .comments-wrap .card-footer .post-comment .media-left img {
  border-radius: 50%;
}
.card.is-post .comments-wrap .card-footer .post-comment .media-content .field {
  margin-bottom: 0;
}
.card.is-post .comments-wrap .card-footer .post-comment .media-content .textarea {
  border-color: #e8e8e8;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  resize: none;
}
.card.is-post .comments-wrap .card-footer .post-comment .actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
.card.is-post .comments-wrap .card-footer .post-comment .actions .action {
  margin-right: 15px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.card.is-post .comments-wrap .card-footer .post-comment .actions .action svg {
  width: 18px;
  height: 18px;
  stroke: #888da8;
  transition: all 0.3s;
}
.card.is-post .comments-wrap .card-footer .post-comment .actions .action:hover svg {
  stroke: #6e5bdb;
}
.card.is-post .comments-wrap .card-footer .post-comment .actions .action.is-auto {
  margin-left: auto;
}
.card.is-post .comments-wrap .card-footer .post-comment .actions .action.is-upload {
  position: relative;
}
.card.is-post .comments-wrap .card-footer .post-comment .actions .action.is-upload input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.card.is-post .comments-wrap .card-footer .post-comment .emojionearea-scroll-area::-webkit-scrollbar {
  width: 4px;
}
.card.is-post .comments-wrap .card-footer .post-comment .emojionearea-scroll-area::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.card .card-body .page-block, .card .card-body .add-friend-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px;
}
.card .card-body .page-block:not(:first-child), .card .card-body .add-friend-block:not(:first-child) {
  border-top: 1px solid #e8e8e8;
}
.card .card-body .page-block img, .card .card-body .add-friend-block img {
  height: 40px;
  width: 40px;
  max-height: 40px;
  border-radius: 50%;
}
.card .card-body .page-block .page-meta, .card .card-body .add-friend-block .page-meta {
  padding: 0 10px;
  line-height: 1.3;
}
.card .card-body .page-block .page-meta span, .card .card-body .add-friend-block .page-meta span {
  display: block;
}
.card .card-body .page-block .page-meta span:first-child, .card .card-body .add-friend-block .page-meta span:first-child {
  font-size: 0.85rem;
  color: #393a4f;
  font-weight: 500;
}
.card .card-body .page-block .page-meta span:nth-child(2), .card .card-body .add-friend-block .page-meta span:nth-child(2) {
  font-size: 0.7rem;
  color: #757a91;
}
.card .card-body .page-block .add-page, .card .card-body .page-block .add-friend, .card .card-body .add-friend-block .add-page, .card .card-body .add-friend-block .add-friend {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: 50%;
  transition: all 0.3s;
  cursor: pointer;
}
.card .card-body .page-block .add-page svg, .card .card-body .page-block .add-friend svg, .card .card-body .add-friend-block .add-page svg, .card .card-body .add-friend-block .add-friend svg {
  width: 18px;
  height: 18px;
  stroke: #888da8;
  transition: all 0.3s;
}
.card .card-body .page-block .add-page:hover, .card .card-body .page-block .add-friend:hover, .card .card-body .add-friend-block .add-page:hover, .card .card-body .add-friend-block .add-friend:hover {
  background: whitesmoke;
}
.card .card-body .page-block .add-page:hover svg, .card .card-body .page-block .add-friend:hover svg, .card .card-body .add-friend-block .add-page:hover svg, .card .card-body .add-friend-block .add-friend:hover svg {
  stroke: #6e5bdb;
}
.card .card-body .page-block .checkmark-wrapper, .card .card-body .add-friend-block .checkmark-wrapper {
  margin-left: auto;
  margin-right: 8px;
}
.card .card-body .story-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 16px;
}
.card .card-body .story-block:not(:first-child) {
  border-top: 1px solid #e8e8e8;
}
.card .card-body .story-block .img-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  max-height: 48px;
  min-width: 48px;
  border-radius: 50%;
  border: 1px solid #888da8;
}
.card .card-body .story-block .img-wrapper img {
  height: 38px;
  width: 38px;
  border-radius: 50%;
}
.card .card-body .story-block .add-story {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  width: 44px;
  max-height: 44px;
  min-width: 44px;
  border-radius: 50%;
  border: 2px dashed #e8e8e8;
  transition: all 0.3s;
}
.card .card-body .story-block .add-story svg {
  width: 18px;
  height: 18px;
  stroke: #e8e8e8;
}
.card .card-body .story-block .add-story:hover {
  border: 2px solid #6e5bdb;
}
.card .card-body .story-block .add-story:hover svg {
  stroke: #6e5bdb;
}
.card .card-body .story-block .story-meta {
  padding: 0 10px;
}
.card .card-body .story-block .story-meta span {
  display: block;
}
.card .card-body .story-block .story-meta span:first-child {
  font-size: 0.85rem;
  color: #393a4f;
  font-weight: 500;
}
.card .card-body .story-block .story-meta span:nth-child(2) {
  font-size: 0.8rem;
  color: #757a91;
}

/* ==========================================================================
2. Options summary
========================================================================== */
.options-summary {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  width: auto;
  color: #888da8;
  background: #f7f7f7;
  border-radius: 500px;
  transition: all 0.3s;
}
.options-summary:hover {
  background: #f2f2f2;
}
.options-summary .tagged-friend + span small {
  display: none !important;
}
.options-summary span {
  padding: 2px;
}
.options-summary span a {
  font-size: 0.8rem;
}
.options-summary .mood-display {
  padding: 0 4px;
  cursor: pointer;
}
.options-summary .mood-display img {
  position: relative;
  top: 2px;
  height: 14px !important;
  width: 14px !important;
}
.options-summary .mood-display span {
  font-size: 0.8rem;
  color: #6e5bdb;
  margin: 0 4px;
}
.options-summary .mood-display .action-text {
  color: #393a4f;
  margin-right: 4px;
}

/* ==========================================================================
3. Tag list
========================================================================== */
.tag-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 8px;
}
.tag-list.no-margin {
  margin: 0 !important;
}
.tag-list .tag-control {
  width: auto !important;
  padding-right: 6px;
  margin: 0 0 4px 0 !important;
}
.tag-list .tag-control.is-spaced {
  padding: 4px;
}
.tag-list .tag-control .is-link {
  background: #888da8 !important;
}

/* ==========================================================================
4. Autocompletes
========================================================================== */
.is-autocomplete {
  justify-content: center;
}
.is-autocomplete.is-active, .is-autocomplete:hover {
  background: transparent !important;
}
.is-autocomplete.is-dropup .easy-autocomplete-container {
  top: -260px !important;
  width: calc(100% - 40px);
  margin: 0 auto;
  right: 0;
}
.is-autocomplete .control {
  margin: 0 !important;
  position: relative;
}
.is-autocomplete .control.has-margin {
  margin-top: 8px !important;
}
.is-autocomplete .control.is-location-wrapper input, .is-autocomplete .control.is-gif-wrapper input {
  height: 32px;
  padding-left: 34px;
  font-size: 0.9rem;
  box-shadow: none;
  color: #999;
  transition: all 0.3s;
}
.is-autocomplete .control.is-location-wrapper input:focus, .is-autocomplete .control.is-gif-wrapper input:focus {
  border-color: #e8e8e8;
}
.is-autocomplete .control.is-location-wrapper input:focus + .icon, .is-autocomplete .control.is-gif-wrapper input:focus + .icon {
  color: #6e5bdb;
}
.is-autocomplete .control.is-gif-wrapper {
  position: relative;
}
.is-autocomplete .control.is-gif-wrapper input:focus ~ .gif-dropdown {
  opacity: 1;
  pointer-events: all;
}
.is-autocomplete .control.is-gif-wrapper .gif-dropdown {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.is-autocomplete .control.is-gif-wrapper .gif-dropdown::-webkit-scrollbar {
  width: 4px;
}
.is-autocomplete .control.is-gif-wrapper .gif-dropdown::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.is-autocomplete .control.is-gif-wrapper .gif-dropdown .inner {
  position: relative;
  display: flex;
}
.is-autocomplete .control.is-gif-wrapper .gif-dropdown .gif-block {
  display: block;
  margin: 0 auto;
  width: 33.3%;
  padding: 2px;
}
.is-autocomplete .control.is-gif-wrapper .gif-dropdown .gif-block img {
  display: block;
  border-radius: 0 !important;
  width: 100%;
  height: auto;
  margin-bottom: 4px;
}
.is-autocomplete .control .icon, .is-autocomplete .control .close-icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #cecece;
}
.is-autocomplete .control .icon svg, .is-autocomplete .control .close-icon svg {
  width: 16px;
  height: 16px;
  transition: all 0.3s;
}
.is-autocomplete .control .close-icon {
  left: unset !important;
  right: 0 !important;
  cursor: pointer;
}
.is-autocomplete .control .close-icon:hover svg {
  color: #393a4f;
}
.is-autocomplete .control .input-block {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  color: #fafafa;
  padding: 0 10px;
  height: 32px;
  width: auto;
  border-radius: 4px 0 0 4px;
  background: #757a91;
  transition: all 0.3s;
  cursor: pointer;
}
.is-autocomplete .control .input-block:hover {
  background: #83889c;
}
.is-autocomplete .control .easy-autocomplete {
  width: 100% !important;
}
.is-autocomplete .control .easy-autocomplete input {
  height: 32px;
  padding-left: 34px;
  font-size: 0.9rem;
  box-shadow: none;
  color: #999;
  transition: all 0.3s;
}
.is-autocomplete .control .easy-autocomplete input.is-subactivity {
  padding-left: 74px !important;
}
.is-autocomplete .control .easy-autocomplete input:focus {
  border-color: #e8e8e8;
}
.is-autocomplete .control .easy-autocomplete input:focus + .icon {
  color: #6e5bdb;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper.is-smaller {
  width: 22px !important;
  height: 22px !important;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper.is-smaller .autocpl-avatar {
  width: 22px !important;
  height: 22px !important;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper .autocpl-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper .autocpl-avatar.is-squared {
  border-radius: 8px !important;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .avatar-wrapper .avatar-badge {
  position: absolute;
  bottom: 0;
  right: -7px;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .icon-wrapper {
  position: relative;
  width: 22px;
  height: 22px;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .icon-wrapper .autocpl-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50% !important;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .entry-text {
  margin-left: 10px;
  line-height: 1.3;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .entry-text span {
  font-size: 0.8rem;
  color: #757a91;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .next-icon {
  margin-left: auto !important;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .next-icon i {
  font-size: 20px;
  color: #888da8;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .is-description {
  font-size: 0.7rem;
}
.is-autocomplete .control .easy-autocomplete .template-wrapper .right-content {
  margin-left: auto;
  font-size: 0.75rem;
  color: #999;
}
.is-autocomplete li {
  height: auto !important;
  padding-top: 8px;
  padding-bottom: 8px;
  border-left: none !important;
  border-right: none !important;
}
.is-autocomplete .easy-autocomplete-container {
  top: 120% !important;
  border: none !important;
  z-index: 10 !important;
}
.is-autocomplete .easy-autocomplete-container ul {
  border-radius: 4px !important;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
5. Feed v1 left menu
========================================================================== */
.feed-menu-v1 .main-menu {
  padding-right: 30px;
}
.feed-menu-v1 .main-menu li {
  transition: all 0.3s;
}
.feed-menu-v1 .main-menu li.is-active a {
  border-color: #6e5bdb;
}
.feed-menu-v1 .main-menu li.is-active a span {
  color: #393a4f;
  font-weight: 500;
}
.feed-menu-v1 .main-menu li.is-active a svg {
  stroke: #393a4f;
}
.feed-menu-v1 .main-menu li.is-active a .close-icon {
  transform: rotate(90deg);
  background: #e8e8e8;
}
.feed-menu-v1 .main-menu li.is-active a .close-icon svg {
  stroke: #393a4f;
}
.feed-menu-v1 .main-menu li:hover .close-icon {
  background: #e8e8e8;
}
.feed-menu-v1 .main-menu li:hover .close-icon svg {
  stroke: #393a4f;
}
.feed-menu-v1 .main-menu li a {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-left: 2px solid transparent;
}
.feed-menu-v1 .main-menu li a span {
  display: block;
  color: #393a4f;
  font-size: 0.9rem;
  margin-left: 10px;
}
.feed-menu-v1 .main-menu li a svg {
  position: relative;
  height: 18px;
  width: 18px;
  stroke: #757a91;
}
.feed-menu-v1 .main-menu li a .close-icon {
  height: 28px;
  width: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  border-radius: 50%;
  transition: all 0.3s;
}
.feed-menu-v1 .main-menu li a .close-icon svg {
  stroke: #cecece;
  height: 16px;
  width: 16px;
}
.feed-menu-v1 .submenu {
  padding-left: 50px;
  margin-bottom: 10px;
  display: none;
}
.feed-menu-v1 .submenu li.is-subactive a {
  color: #393a4f;
  font-weight: 500;
}
.feed-menu-v1 .submenu li a {
  display: flex;
  align-items: center;
  padding: 6px;
  font-size: 0.85rem;
  color: #757a91;
  border: none !important;
  transition: color 0.3s;
}
.feed-menu-v1 .submenu li a .tag {
  margin-left: auto;
  display: inherit;
  max-height: 19px;
  font-size: 0.75rem;
  border-radius: 100px;
  margin-right: 10px;
  background: #6e5bdb;
  color: #fff !important;
}

/* ==========================================================================
6. Media Queries
========================================================================== */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .compose .compose-form img {
    height: 36px !important;
    width: 36px !important;
  }
  .card .page-block img, .card .add-friend-block img {
    height: 32px !important;
    width: 32px !important;
  }
  .card .story-block .img-wrapper {
    height: 40px !important;
    width: 40px !important;
    max-height: 40px !important;
    min-width: 40px !important;
  }
  .card .story-block .img-wrapper img {
    height: 32px !important;
    width: 32px !important;
  }
  .card .story-block .add-story {
    height: 38px !important;
    width: 38px !important;
    max-height: 38px !important;
    min-width: 38px !important;
  }
  .list-placeload .img {
    height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
  }
  .stories-placeload .img {
    height: 38px !important;
    width: 38px !important;
    max-height: 38px !important;
    min-width: 38px !important;
  }
}
/*! _special-mixins.scss | Friendkit | © Css Ninja. 2018-2019 */
/* ==========================================================================
Friendkit additional mixins
========================================================================== */
/*
    0. Multiline Ellipsis
*/
/* ==========================================================================
0. Multiline Ellipsis mixin
========================================================================== */
/* ==========================================================================
0. Inbox layout
========================================================================== */
.inbox-wrapper .inbox-wrapper-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 16%;
  background: #f4f4f4 !important;
  border-right: 1px solid #dbdbdb;
  z-index: 1;
  transition: all 0.3s;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar .inbox-left-sidebar-inner {
  width: 100%;
  height: 100%;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar .inbox-left-sidebar-inner .compose {
  padding: 0 20px;
  min-height: 60px;
  display: flex;
  align-items: center;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar .inbox-left-sidebar-inner .compose .button {
  height: 40px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar .inbox-left-sidebar-inner .left-menu {
  padding: 10px 0;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar .inbox-left-sidebar-inner .left-menu a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 20px;
  padding: 10px;
  color: #aaaaaa;
  font-size: 0.95rem;
  border-radius: 4px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar .inbox-left-sidebar-inner .left-menu a.is-active {
  background-color: #6e5bdb;
  color: #fafafa;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar .inbox-left-sidebar-inner .left-menu a span {
  display: block;
  margin-left: 10px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar .inbox-left-sidebar-inner .left-menu a svg {
  height: 18px;
  width: 18px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar .inbox-left-sidebar-inner .close-menu {
  padding: 20px 50px;
  text-align: center;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar .inbox-left-sidebar-inner .close-menu a {
  display: flex;
  align-items: center;
  color: #999;
  cursor: pointer;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-left-sidebar .inbox-left-sidebar-inner .close-menu a svg {
  height: 20px;
  width: 20px;
  margin-right: 4px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  transition: all 0.3s;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container.is-left-opened {
  width: calc(100% - 280px);
  left: 280px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container.is-both-opened {
  width: 34%;
  left: 16%;
  right: 50%;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .messages {
  display: block;
  background-color: #fff;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .messages .action-buttons {
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e8e8e8;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .messages .action-buttons .button {
  max-height: 32px;
  padding: 4px 8px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .messages .action-buttons .button svg {
  height: 16px;
  width: 16px;
  stroke: #888da8;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .message-count {
  font-size: 0.9rem;
  color: #999;
  margin-left: 12px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 60px;
  height: calc(100% - 60px);
  max-height: calc(100% - 60px);
  overflow-y: auto;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner {
  padding: 20px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .message {
  display: block;
  background-color: #fff;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card {
  width: 100%;
  cursor: pointer;
  transition: all 0.3s;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card.is-active {
  background-color: #fcfcfc;
  box-shadow: 0px 5px 18px rgba(0, 0, 0, 0.11) !important;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card.is-active .msg-from a {
  color: #6e5bdb;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card.is-active .msg-attachment svg {
  stroke: #6e5bdb;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card.has-attachment .msg-attachment svg {
  display: block;
  transition: stroke 0.3s;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-from {
  color: #999;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-from a {
  font-weight: 500;
  color: #999;
  transition: color 0.3s;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-timestamp {
  float: right;
  padding: 0 20px;
  color: #999;
  font-size: 0.9rem;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-attachment {
  float: right;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-attachment svg {
  display: none;
  height: 16px;
  width: 16px;
  stroke: #999;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-subject {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-subject span {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #393a4f;
  margin: 0 4px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-subject svg {
  position: relative;
  top: -1px;
  height: 16px;
  width: 16px;
  stroke: #999;
  fill: none;
  cursor: pointer;
  transform: rotate(0);
  transition: all 0.3s;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-subject svg.is-active {
  transform: rotate(360deg);
  stroke: #6e5bdb;
  fill: #6e5bdb;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-snippet {
  color: #999;
  font-size: 0.9rem;
  padding-right: 20px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-snippet p {
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 2.4em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-snippet p:before {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .card .msg-snippet p:after {
  content: "";
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: #fff;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner strong {
  color: #5D5D5D;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-center-container .inbox-center-container-inner .inbox-messages .inbox-messages-inner .msg-check {
  padding: 0 20px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: #fff;
  transition: all 0.3s;
  border-left: 1px solid #dbdbdb;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner {
  position: relative;
  height: 100%;
  width: 100%;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-head .action-buttons {
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e8e8e8;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-head .action-buttons .button {
  max-height: 32px;
  padding: 4px 8px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-head .action-buttons .button svg {
  height: 16px;
  width: 16px;
  stroke: #888da8;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 60px;
  height: calc(100% - 60px);
  max-height: calc(100% - 60px);
  width: 100%;
  overflow-y: auto;
  border-left: none;
  padding: 1.25em !important;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
  transition: all 0.3s;
  animation-name: fadeInLeft;
  animation-duration: 0.5s;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner.is-active {
  display: block;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview-transition.is-first {
  margin-top: -36px !important;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview-transition .mail {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px auto;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  color: #fff;
  border: 1px solid #ccc;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview-transition .mail:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 1px;
  width: 40px;
  background: #888da8;
  transform: rotate(90deg);
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview-transition .mail:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  height: 1px;
  width: 40px;
  background: #888da8;
  transform: rotate(90deg);
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview-transition .mail svg {
  width: 20px;
  height: 20px;
  stroke: #888da8;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview {
  margin: 0 0 20px 0;
  padding: 30px;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
  border: 1px solid #e8e8e8;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview .avatar {
  display: flex;
  justify-content: center;
  align-items: center;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview .avatar img {
  width: 48px;
  border-radius: 50px;
  border: 2px solid #999;
  padding: 2px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview .box-inner .header {
  display: flex;
  align-items: center;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview .box-inner .header .meta {
  display: block;
  padding: 0 20px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview .box-inner .header .meta .name {
  font-weight: 500;
  color: #393a4f;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview .box-inner .header .meta .date {
  font-size: 0.9rem;
  color: #999;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview .box-inner .header .meta-right {
  text-align: right;
  margin-left: auto;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview .box-inner .header .meta-right .tag {
  font-weight: 500;
  background: #f7f7f7;
  color: #393a4f;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview .box-inner .header .meta-right svg {
  position: relative;
  top: 2px;
  height: 16px;
  width: 16px;
  stroke: #cecece;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .message-preview .box-inner .header .meta-right small {
  color: #999;
  font-size: 0.95rem;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments {
  padding-bottom: 40px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-header .paperclip {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px auto;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  color: #fff;
  border: 1px solid #ccc;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-header .paperclip:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 1px;
  width: 40px;
  background: #888da8;
  transform: rotate(90deg);
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-header .paperclip:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  height: 1px;
  width: 40px;
  background: #888da8;
  transform: rotate(90deg);
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-header .paperclip svg {
  width: 20px;
  height: 20px;
  stroke: #888da8;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner {
  display: flex;
  flex-wrap: wrap;
  max-width: 380px;
  margin: 0 auto;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box {
  width: calc(50% - 20px);
  margin: 0 10px 16px 10px;
  padding: 0;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box.has-file {
  justify-content: center;
  align-items: center;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box.has-file .box-inner {
  text-align: center;
  padding: 22px 12px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box.has-file .box-inner svg {
  stroke-width: 1.2px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box.has-file .box-inner h5 {
  font-weight: 500;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box.has-file .actions-group {
  display: flex;
  border-top: 1px solid #e8e8e8;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box.has-file .actions-group .action {
  width: 50%;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box.has-file .actions-group .action:first-child {
  border-right: 1px solid #e8e8e8;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box.has-file .actions-group .action:hover {
  background: #fafafa;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box.has-file .actions-group .action:hover svg {
  stroke: #393a4f;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box.has-file .actions-group .action svg {
  height: 18px;
  width: 18px;
  stroke: #888da8;
  transition: stroke 0.3s;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .attachments .attachments-inner .box img {
  display: block;
  border-radius: 2px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper {
  padding: 40px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper .reply-title {
  font-size: 1.1rem;
  color: #393a4f;
  font-weight: 500;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper .reply-title svg {
  height: 18px;
  width: 18px;
  stroke: #999;
  margin-left: 8px;
  cursor: pointer;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper .reply-wrapper-inner {
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 30px;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper .reply-wrapper-inner .flex-form {
  display: flex;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper .reply-wrapper-inner img {
  margin-top: 2px;
  height: 44px;
  width: 44px;
  border-radius: 50%;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper .reply-wrapper-inner .control {
  position: relative;
  width: 100%;
  margin-left: 10px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper .reply-wrapper-inner .control .textarea {
  border: none !important;
  margin-bottom: 20px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper .reply-wrapper-inner .control .reply-textarea {
  margin-bottom: 20px;
  min-height: 120px;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper .reply-wrapper-inner .control .reply-textarea p {
  font-style: normal;
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper .reply-wrapper-inner .control .ql-editor::before {
  font-style: normal;
  font-size: 1rem;
  color: #cecece;
}
.inbox-wrapper .inbox-wrapper-inner .inbox-message-container .inbox-message-container-inner .message-body .message-body-inner .reply-wrapper .reply-wrapper-inner .send-message {
  line-height: 0;
}

/* ==========================================================================
1. Action Buttons
========================================================================== */
.action-buttons .control.is-grouped {
  display: inline-block;
  margin-right: 16px;
}
.action-buttons .control.is-grouped:last-child {
  margin-right: 0;
}
.action-buttons .control.is-grouped .button {
  margin-right: -5px;
  border-radius: 0;
  background: #fff;
  transition: all 0.3s;
}
.action-buttons .control.is-grouped .button:first-child {
  border-radius: 5px 0 0 5px;
}
.action-buttons .control.is-grouped .button:last-child {
  border-radius: 0 5px 5px 0;
}
.action-buttons .control.is-grouped .button:hover {
  background: whitesmoke;
}
.action-buttons .control.is-grouped .button.is-solo {
  border-radius: 5px !important;
}
.action-buttons .control.is-grouped .button svg {
  transition: all 0.3s;
}

/* ==========================================================================
2. Media Queries
========================================================================== */
@media only screen and (max-width: 1300px) {
  .inbox-wrapper .message-count {
    display: none;
  }
}
@media (max-width: 767px) {
  .inbox-wrapper .action-buttons .is-grouped {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
  .inbox-wrapper .inbox-message-container .action-buttons .is-grouped.is-hidden-landscape {
    margin-left: auto !important;
  }
  .inbox-wrapper .inbox-center-container .action-buttons .is-grouped.is-hidden-landscape {
    margin-right: auto !important;
  }
  .inbox-left-sidebar .inbox-left-sidebar-inner .close-menu {
    padding: 0 30px !important;
  }
  .is-vhidden {
    display: none !important;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .inbox-left-sidebar {
    width: 21% !important;
  }
  .inbox-message-container {
    width: 45% !important;
  }
  .inbox-message-container .inbox-message-container-inner .message-body {
    padding: 1.25em !important;
  }
  .inbox-message-container .inbox-message-container-inner .message-body .message-preview {
    padding: 20px !important;
  }
  .inbox-center-container {
    left: 21% !important;
  }
  .inbox-center-container .action-buttons .is-grouped.is-arrows {
    display: none !important;
  }
}
/* ==========================================================================
1. Profile Layout
========================================================================== */
.cover-bg {
  position: relative;
}
.cover-bg:hover .cover-overlay {
  background: rgba(57, 58, 79, 0.5);
}
.cover-bg:hover .cover-edit {
  border-color: #fcfcfc;
  background: rgba(252, 252, 252, 0.1);
}
.cover-bg:hover .cover-edit i {
  transform: scale(1);
}
.cover-bg:hover .cover-edit span {
  opacity: 1;
}
.cover-bg .cover-image {
  display: block;
  border-radius: 3px;
  -o-object-position: top;
     object-position: top;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  max-height: 328px;
}
.cover-bg .avatar {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110px;
  width: 110px;
  border-radius: 50%;
  z-index: 1;
}
.cover-bg .avatar .avatar-image {
  position: relative;
  -o-object-fit: cover;
     object-fit: cover;
  height: 110px;
  width: 110px;
  border-radius: 50%;
  box-shadow: 0px 15px 32px rgba(0, 0, 0, 0.18) !important;
  z-index: 1;
}
.cover-bg .avatar .avatar-button {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #6e5bdb;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
  transform: rotate(0);
  transition: all 0.3s;
  cursor: pointer;
  z-index: 1;
}
.cover-bg .avatar .avatar-button:hover {
  background: #8474e1;
}
.cover-bg .avatar .avatar-button.is-active {
  transform: rotate(135deg);
}
.cover-bg .avatar .avatar-button svg {
  height: 18px;
  width: 18px;
  stroke: #fcfcfc;
}
.cover-bg .avatar .pop-button {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
  z-index: 0;
  transform: translate(0, 10px) rotate(260deg);
  transition: all 0.3s;
  cursor: pointer;
}
.cover-bg .avatar .pop-button .inner {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cover-bg .avatar .pop-button.pop-shift .inactive-icon {
  display: block;
}
.cover-bg .avatar .pop-button.pop-shift .active-icon {
  display: none;
}
.cover-bg .avatar .pop-button.pop-shift.is-shifted .inactive-icon {
  display: none;
}
.cover-bg .avatar .pop-button.pop-shift.is-shifted .active-icon {
  display: block;
}
.cover-bg .avatar .pop-button.is-center, .cover-bg .avatar .pop-button.is-far-right, .cover-bg .avatar .pop-button.is-left, .cover-bg .avatar .pop-button.is-far-left {
  background: #fff;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.cover-bg .avatar .pop-button.is-center:hover, .cover-bg .avatar .pop-button.is-far-right:hover, .cover-bg .avatar .pop-button.is-left:hover, .cover-bg .avatar .pop-button.is-far-left:hover {
  background: #6e5bdb;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.cover-bg .avatar .pop-button.is-center:hover svg, .cover-bg .avatar .pop-button.is-far-right:hover svg, .cover-bg .avatar .pop-button.is-left:hover svg, .cover-bg .avatar .pop-button.is-far-left:hover svg {
  stroke: #fafafa;
}
.cover-bg .avatar .pop-button.is-center svg, .cover-bg .avatar .pop-button.is-far-right svg, .cover-bg .avatar .pop-button.is-left svg, .cover-bg .avatar .pop-button.is-far-left svg {
  stroke: #757a91;
}
.cover-bg .avatar .pop-button.is-right {
  background: #6e5bdb;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.cover-bg .avatar .pop-button.is-right svg {
  stroke: #fafafa;
}
.cover-bg .avatar .pop-button.is-active.is-far-left {
  transform: translate(-240%, 30%) rotate(0);
}
.cover-bg .avatar .pop-button.is-active.is-left {
  transform: translate(-160%, -110%) rotate(0);
}
.cover-bg .avatar .pop-button.is-active.is-center {
  transform: translate(0, -170%) rotate(0);
}
.cover-bg .avatar .pop-button.is-active.is-right {
  transform: translate(160%, -110%) rotate(0);
}
.cover-bg .avatar .pop-button.is-active.is-far-right {
  transform: translate(240%, 30%) rotate(0);
}
.cover-bg .avatar .pop-button svg {
  height: 18px;
  width: 18px;
  stroke: #757a91;
  transition: all 0.3s;
}
.cover-bg .cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background: rgba(57, 58, 79, 0.18);
  z-index: 0;
  transition: all 0.3s;
}
.cover-bg .cover-edit {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  margin: 10px;
  padding: 2px 8px;
  border: 1.4px solid transparent;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
}
.cover-bg .cover-edit i {
  font-size: 20px;
  color: #fcfcfc;
  transition: all 0.3s;
  transform: scale(1.2);
}
.cover-bg .cover-edit span {
  opacity: 0;
  display: block;
  color: #fcfcfc;
  font-weight: 400;
  font-size: 0.85rem;
  margin: 0 10px;
  transition: all 0.3s;
}
.cover-bg .timeline-mobile-dropdown {
  position: absolute;
  top: 10px;
  right: 10px;
}
.cover-bg .timeline-mobile-dropdown div > .button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border-radius: 50%;
  border: 1.4px solid #fff;
  padding: 0;
}
.cover-bg .timeline-mobile-dropdown div > .button svg {
  height: 20px;
  width: 20px;
  stroke: #fff;
}

/* ==========================================================================
2. Profile Menu
========================================================================== */
.profile-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 0 0;
}
.profile-menu .button {
  font-size: 0.9rem;
  padding: 20px 22px;
  background: #fcfcfc;
  color: #999;
}
.profile-menu .button.is-active {
  background: #6e5bdb;
  border-color: #6e5bdb;
  color: #fcfcfc;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.profile-menu .button.has-min-width {
  width: 140px;
}
.profile-menu .dropdown > .button svg {
  height: 20px;
  width: 20px;
}

.profile-subheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.profile-subheader .subheader-start, .profile-subheader .subheader-end {
  width: 25%;
}
.profile-subheader .subheader-start svg {
  height: 18px;
  width: 18px;
  stroke: #6e5bdb;
  display: none;
}
.profile-subheader .subheader-start span {
  display: block;
  font-weight: 500;
}
.profile-subheader .subheader-start span:first-child {
  font-size: 1.6rem;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  color: #393a4f;
  line-height: 1.2;
}
.profile-subheader .subheader-start span:nth-child(2) {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 500;
  color: #999;
}
.profile-subheader .subheader-end {
  text-align: right;
}
.profile-subheader .subheader-middle {
  text-align: center;
}
.profile-subheader .subheader-middle h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #393a4f;
  line-height: 1.2;
}
.profile-subheader .subheader-middle span {
  display: block;
  font-size: 0.9rem;
  color: #999;
}

/* ==========================================================================
3. Box Headers
========================================================================== */
.box-heading {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-heading h4 {
  font-weight: 500;
  padding: 0 6px;
}
.box-heading .heading-search {
  position: relative;
  margin-left: 10px;
}
.box-heading .heading-search input {
  padding-left: 38px;
}
.box-heading .heading-search input:focus + .search-icon svg {
  stroke: #6e5bdb;
}
.box-heading .heading-search .search-icon {
  position: absolute;
  top: 0;
  right: 2px;
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-heading .heading-search .search-icon svg {
  height: 16px;
  width: 16px;
  stroke: #cecece;
  transition: stroke 0.3s;
}
.box-heading .dropdown.photos-dropdown.is-active div > .button svg, .box-heading .dropdown.friends-dropdown.is-active div > .button svg {
  transform: rotate(180deg);
}
.box-heading .dropdown.photos-dropdown div > .button, .box-heading .dropdown.friends-dropdown div > .button {
  width: auto !important;
  padding: 0 8px 0 12px;
  height: 34px;
  min-width: 110px;
  background: whitesmoke;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 100px;
}
.box-heading .dropdown.photos-dropdown div > .button svg, .box-heading .dropdown.friends-dropdown div > .button svg {
  height: 16px;
  width: 16px;
  stroke: #393a4f;
  transition: all 0.3s;
}
.box-heading .dropdown.photos-dropdown .dropdown-menu, .box-heading .dropdown.friends-dropdown .dropdown-menu {
  margin-top: 6px;
}
.box-heading .dropdown .button {
  width: 38px !important;
  height: 38px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: transparent;
}
.box-heading .dropdown .button svg {
  height: 20px;
  width: 20px;
  stroke: #888da8;
}
.box-heading .button-wrap .button {
  line-height: 0;
  width: 90px;
  font-weight: 500;
}
.box-heading .button-wrap .button.is-active {
  color: #6e5bdb;
  border-color: #6e5bdb;
}

/* ==========================================================================
4. Profile timeline
========================================================================== */
.profile-timeline {
  padding: 10px 0;
}
.profile-timeline .profile-post {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 30px;
}
.profile-timeline .profile-post.is-simple .post-actions {
  flex-direction: row-reverse !important;
}
.profile-timeline .profile-post .time {
  padding-right: 30px;
  position: relative;
}
.profile-timeline .profile-post .time .img-container {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile-timeline .profile-post .time .img-container:after {
  content: "";
  position: absolute;
  top: 60px;
  left: 24px;
  width: 1.4px;
  height: calc(100% - 30px);
  background: #e5e5e5;
}
.profile-timeline .profile-post .time .img-container img {
  display: block;
  height: 44px;
  width: 44px;
  min-width: 44px;
  border-radius: 50%;
}
.profile-timeline .profile-post .is-post {
  margin-bottom: 0;
  width: 100%;
}

.basic-infos-wrapper {
  padding-top: 10px;
}
.basic-infos-wrapper .is-profile-info .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
}
.basic-infos-wrapper .is-profile-info .info-row:not(:last-child) {
  border-bottom: 1px solid #e8e8e8;
}
.basic-infos-wrapper .is-profile-info .info-row span, .basic-infos-wrapper .is-profile-info .info-row a {
  display: block;
}
.basic-infos-wrapper .is-profile-info .info-row span {
  font-size: 0.85rem;
  font-weight: 500;
  color: #393a4f;
}
.basic-infos-wrapper .is-profile-info .info-row a {
  font-size: 0.9rem;
  font-weight: 400;
  color: #999;
}
.basic-infos-wrapper .is-profile-info .info-row i {
  font-size: 20px;
  color: #cecece;
  margin: 0 4px;
}
.basic-infos-wrapper .is-community, .basic-infos-wrapper .is-about {
  padding: 16px;
}
.basic-infos-wrapper .is-community h4, .basic-infos-wrapper .is-about h4 {
  margin-bottom: 16px;
  color: #999;
}
.basic-infos-wrapper .is-community .flex-block, .basic-infos-wrapper .is-about .flex-block {
  display: flex;
  align-items: center;
  margin: 16px 0;
}
.basic-infos-wrapper .is-community .flex-block a, .basic-infos-wrapper .is-about .flex-block a {
  color: #393a4f;
  font-weight: 500;
}
.basic-infos-wrapper .is-community .flex-block a:hover, .basic-infos-wrapper .is-about .flex-block a:hover {
  color: #6e5bdb;
}
.basic-infos-wrapper .is-community .flex-block p, .basic-infos-wrapper .is-about .flex-block p {
  font-size: 0.8rem;
  margin-left: 12px;
}
.basic-infos-wrapper .is-community .flex-block svg, .basic-infos-wrapper .is-about .flex-block svg {
  height: 16px;
  width: 16px;
}
.basic-infos-wrapper .is-friendkit {
  padding: 16px;
}
.basic-infos-wrapper .is-friendkit .title-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.basic-infos-wrapper .is-friendkit .title-wrap img {
  display: block;
  max-width: 30px;
}
.basic-infos-wrapper .is-friendkit .title-wrap h4 {
  color: #999;
}
.basic-infos-wrapper .is-friendkit p {
  font-size: 0.8rem;
}
.basic-infos-wrapper .is-friendkit .created {
  display: flex;
  align-items: center;
  margin-top: 16px;
}
.basic-infos-wrapper .is-friendkit .created svg {
  height: 16px;
  width: 16px;
  stroke: #999;
  margin-right: 8px;
}
.basic-infos-wrapper .is-friendkit .created span {
  display: block;
  color: #999;
  font-size: 0.8rem;
}

.is-photos-widget {
  padding: 10px 0 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.is-photos-widget img {
  display: block;
  width: calc(25% - 6px);
  margin-bottom: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  transition: all 0.3s;
}
.is-photos-widget img:hover {
  box-shadow: 0px 15px 32px rgba(0, 0, 0, 0.18) !important;
}

.is-videos-widget {
  padding: 10px 0 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.is-videos-widget .video-container {
  position: relative;
  display: block;
  width: calc(33% - 6px);
  min-height: 60px;
  margin-bottom: 12px;
  border-radius: 4px;
  transition: all 0.3s;
}
.is-videos-widget .video-container:hover img {
  box-shadow: 0px 15px 32px rgba(0, 0, 0, 0.18) !important;
}
.is-videos-widget .video-container img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}
.is-videos-widget .video-container .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  background: rgba(52, 66, 88, 0.6);
}
.is-videos-widget .video-container .video-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 34px;
  width: 34px;
  background: #6e5bdb;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
}
.is-videos-widget .video-container .video-button img {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  left: 1px;
  z-index: 3;
}
.is-videos-widget .video-container .video-button:after {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #6e5bdb;
  animation: wave 1.6s infinite;
  animation-duration: 2s;
  transform-origin: center center;
  z-index: 0;
}

.friend-cards-list {
  padding-top: 10px;
}
.friend-cards-list .is-friend-card .friend-item {
  padding: 12px;
  display: flex;
  align-items: center;
}
.friend-cards-list .is-friend-card .friend-item:not(:last-child) {
  border-bottom: 1px solid #e8e8e8;
}
.friend-cards-list .is-friend-card .friend-item img {
  display: block;
  height: 44px;
  width: 44px;
  border-radius: 50%;
}
.friend-cards-list .is-friend-card .friend-item .text-content {
  margin: 0 10px;
}
.friend-cards-list .is-friend-card .friend-item .text-content span, .friend-cards-list .is-friend-card .friend-item .text-content a {
  display: block;
}
.friend-cards-list .is-friend-card .friend-item .text-content a:first-child {
  font-weight: 500;
  font-size: 0.9rem;
  color: #393a4f;
}
.friend-cards-list .is-friend-card .friend-item .text-content a:nth-child(3) {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6e5bdb;
}
.friend-cards-list .is-friend-card .friend-item .text-content span {
  font-size: 0.75rem;
  color: #999;
}
.friend-cards-list .is-friend-card .friend-item .star-friend {
  height: 44px;
  width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  cursor: pointer;
}
.friend-cards-list .is-friend-card .friend-item .star-friend.is-active svg {
  transform: rotate(360deg);
  stroke: #6e5bdb;
  fill: #6e5bdb;
}
.friend-cards-list .is-friend-card .friend-item .star-friend svg {
  height: 20px;
  width: 20px;
  stroke: #999;
  transition: all 0.3s;
  transform: rotate(0);
}

.trip-cards-list {
  padding: 10px 0 0 0;
}
.trip-cards-list .is-trip-card .trip-item {
  padding: 12px;
  display: flex;
  align-items: center;
}
.trip-cards-list .is-trip-card .trip-item:not(:last-child) {
  border-bottom: 1px solid #e8e8e8;
}
.trip-cards-list .is-trip-card .trip-item img {
  display: block;
  height: 42px;
  width: 42px;
  border-radius: 50%;
}
.trip-cards-list .is-trip-card .trip-item .text-content {
  margin: 0 10px;
}
.trip-cards-list .is-trip-card .trip-item .text-content span, .trip-cards-list .is-trip-card .trip-item .text-content a {
  display: block;
}
.trip-cards-list .is-trip-card .trip-item .text-content a:first-child {
  font-weight: 500;
  font-size: 0.9rem;
  color: #393a4f;
}
.trip-cards-list .is-trip-card .trip-item .text-content a:nth-child(3) {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6e5bdb;
}
.trip-cards-list .is-trip-card .trip-item .text-content span {
  font-size: 0.85rem;
  color: #999;
}

/* ==========================================================================
5. Profile about
========================================================================== */
.profile-about {
  width: 100%;
  border-radius: 6px;
  display: flex;
}
.profile-about .left-menu {
  min-width: 260px;
}
.profile-about .left-menu .left-menu-inner {
  width: 100%;
  border-radius: 6px 0 0 6px;
}
.profile-about .left-menu .menu-item {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  transition: all 0.3s;
  cursor: pointer;
}
.profile-about .left-menu .menu-item.is-active .menu-icon {
  background: #6e5bdb;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.profile-about .left-menu .menu-item.is-active .menu-icon i, .profile-about .left-menu .menu-item.is-active .menu-icon span {
  color: #fcfcfc;
}
.profile-about .left-menu .menu-item .menu-icon {
  display: flex;
  align-items: center;
  height: 42px;
  width: 100%;
  padding: 0 12px;
  border-radius: 6px;
  background: transparent;
  transition: all 0.3s;
}
.profile-about .left-menu .menu-item i {
  font-size: 1.4rem;
  color: #cecece;
  transition: all 0.3s;
}
.profile-about .left-menu .menu-item span {
  margin: 0 8px;
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: #cecece;
  transition: color 0.3s;
}
.profile-about .right-content {
  padding-left: 30px;
  width: calc(100% - 260px);
  min-height: 420px;
}
.profile-about .right-content .content-section {
  display: none;
  animation: fadeInLeft 0.5s;
}
.profile-about .right-content .content-section.is-active {
  display: block;
}
.profile-about .right-content .content-section .flex-block {
  display: flex;
  align-items: center;
  transition: all 0.3s;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  background: #fff;
}
.profile-about .right-content .content-section .flex-block:hover .flex-block-meta .action-link {
  opacity: 1;
  pointer-events: all;
}
.profile-about .right-content .content-section .flex-block:hover .flex-block-meta .action-link:hover {
  color: #757a91;
}
.profile-about .right-content .content-section .flex-block:hover .go-button {
  transform: scale(1) rotate(360deg);
  opacity: 1;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.profile-about .right-content .content-section .flex-block:hover .go-button:hover {
  opacity: 0.9;
}
.profile-about .right-content .content-section .flex-block img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.profile-about .right-content .content-section .flex-block .flex-block-meta {
  margin-left: 10px;
}
.profile-about .right-content .content-section .flex-block .flex-block-meta span, .profile-about .right-content .content-section .flex-block .flex-block-meta .action-link {
  display: block;
}
.profile-about .right-content .content-section .flex-block .flex-block-meta span {
  color: #999;
  font-size: 0.9rem;
}
.profile-about .right-content .content-section .flex-block .flex-block-meta span a {
  color: #393a4f;
  font-size: 0.85rem;
  font-weight: 500;
}
.profile-about .right-content .content-section .flex-block .flex-block-meta .action-link {
  font-size: 0.75rem;
  color: #cecece;
  pointer-events: none;
  transition: all 0.3s;
}
.profile-about .right-content .content-section .flex-block .go-button {
  margin-left: auto;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  background: #6e5bdb;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  transform: scale(0) rotate(0);
  opacity: 0;
}
.profile-about .right-content .content-section .flex-block .go-button svg {
  height: 18px;
  width: 18px;
  stroke: #fcfcfc;
}
.profile-about .about-summary {
  transition: all 0.3s;
  padding: 30px;
  margin-bottom: 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  background: #fff;
}
.profile-about .about-summary h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
}
.profile-about .about-summary p {
  font-size: 0.95rem;
  color: #757a91;
}
.profile-about .glider-dots {
  padding: 20px 0;
}
.profile-about .glider-dots .glider-dot {
  width: 8px;
  height: 8px;
  margin: 4px;
}
.profile-about .glider-dots .glider-dot.active {
  background: #6e5bdb !important;
}
.profile-about .slider-timeline {
  position: relative;
}
.profile-about .slider-timeline .timeline-item {
  position: relative;
  padding: 20px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #dedede;
  margin-right: 1rem;
}
.profile-about .slider-timeline .timeline-item .image-container {
  position: relative;
}
.profile-about .slider-timeline .timeline-item .image-container > img {
  display: block;
  min-height: 160px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 2px;
}
.profile-about .slider-timeline .timeline-item .image-container .logo-container {
  position: absolute;
  bottom: -30px;
  right: 10px;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 50%;
}
.profile-about .slider-timeline .timeline-item .image-container .logo-container img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.profile-about .slider-timeline .timeline-item h3 {
  margin-top: 12px;
  font-size: 0.9rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}
.profile-about .slider-timeline .timeline-item > p {
  font-size: 0.8rem;
  color: #999;
}
.profile-about .slider-timeline .timeline-item .more {
  margin-top: 6px;
}
.profile-about .slider-timeline .timeline-item .more p {
  font-size: 0.9rem;
  color: #595b7b;
}
.profile-about .slider-timeline .timeline-item .date {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #999;
}

.friends-columns .column {
  padding: 0.5rem;
}

/* ==========================================================================
6. User Profile about
========================================================================== */
.about-card {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #dedede;
  background: #fff;
}
.about-card:not(:last-child) {
  margin-bottom: 30px;
}
.about-card .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.about-card .header .icon-title {
  display: flex;
  align-items: center;
}
.about-card .header .icon-title i {
  font-size: 22px;
  color: #cecece;
}
.about-card .header .icon-title h3 {
  color: #393a4f;
  font-weight: 500;
  font-size: 1.1rem;
  margin-left: 8px;
}
.about-card .header .actions {
  display: flex;
  align-items: center;
}
.about-card .header .actions .button-wrapper {
  position: relative;
}
.about-card .header .actions .button-wrapper .indicator {
  position: absolute;
  top: -8px;
  left: -8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  min-width: 24px;
  padding: 0 4px;
  background: #6e5bdb;
  border: 2px solid #fff;
  border-radius: 50%;
}
.about-card .header .actions .button-wrapper .indicator span {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fcfcfc;
}
.about-card .header .actions .button:first-child {
  margin-right: 8px;
}
.about-card .header .dropdown div > .button {
  margin-right: 0 !important;
}
.about-card .body {
  padding: 0 20px 20px 20px;
}
.about-card .body.has-flex-list {
  padding-left: calc(20px - 0.5rem);
  padding-right: calc(20px - 0.5rem);
  padding-bottom: calc(20px - 0.5rem);
}
.about-card .body .friend-small-card {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #dedede;
  background: #fff;
  transition: all 0.3s;
}
.about-card .body .friend-small-card:hover {
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.about-card .body .friend-small-card:hover .dropdown {
  opacity: 1;
  pointer-events: all;
}
.about-card .body .friend-small-card img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.about-card .body .friend-small-card .meta {
  margin-left: 12px;
}
.about-card .body .friend-small-card .meta span {
  display: block;
}
.about-card .body .friend-small-card .meta span:first-child {
  font-size: 0.9rem;
  font-weight: 500;
  color: #393a4f;
}
.about-card .body .friend-small-card .meta span:nth-child(2) {
  font-size: 0.9rem;
  color: #999;
}
.about-card .body .friend-small-card .dropdown {
  margin-left: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.about-card .body .friend-small-card .dropdown > div .button {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
  border: none;
  border-radius: 50%;
  transition: all 0.3s;
}
.about-card .body .friend-small-card .dropdown > div .button:hover {
  background: #f0f0f0;
}
.about-card .body .friend-small-card .dropdown > div .button svg {
  height: 20px;
  width: 20px;
}
.about-card .body .photo-list .photo-wrapper:hover .photo-overlay, .about-card .body .photo-list .photo-wrapper:hover .video-overlay, .about-card .body .photo-list .video-wrapper:hover .photo-overlay, .about-card .body .photo-list .video-wrapper:hover .video-overlay, .about-card .body .video-list .photo-wrapper:hover .photo-overlay, .about-card .body .video-list .photo-wrapper:hover .video-overlay, .about-card .body .video-list .video-wrapper:hover .photo-overlay, .about-card .body .video-list .video-wrapper:hover .video-overlay {
  opacity: 0.5;
}
.about-card .body .photo-list .photo-wrapper:hover .small-like, .about-card .body .photo-list .video-wrapper:hover .small-like, .about-card .body .video-list .photo-wrapper:hover .small-like, .about-card .body .video-list .video-wrapper:hover .small-like {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.about-card .body .photo-list .photo-wrapper .photo-overlay, .about-card .body .photo-list .photo-wrapper .video-overlay, .about-card .body .photo-list .video-wrapper .photo-overlay, .about-card .body .photo-list .video-wrapper .video-overlay, .about-card .body .video-list .photo-wrapper .photo-overlay, .about-card .body .video-list .photo-wrapper .video-overlay, .about-card .body .video-list .video-wrapper .photo-overlay, .about-card .body .video-list .video-wrapper .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  background: #393a4f;
  opacity: 0;
  transition: opacity 0.3s;
}
.about-card .body .photo-list .photo-wrapper .small-like, .about-card .body .photo-list .video-wrapper .small-like, .about-card .body .video-list .photo-wrapper .small-like, .about-card .body .video-list .video-wrapper .small-like {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 5;
  transition: all 0.3s;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
.about-card .body .photo-list .photo-wrapper .small-like.is-active .inner .like-overlay, .about-card .body .photo-list .video-wrapper .small-like.is-active .inner .like-overlay, .about-card .body .video-list .photo-wrapper .small-like.is-active .inner .like-overlay, .about-card .body .video-list .video-wrapper .small-like.is-active .inner .like-overlay {
  transform: scale(1);
}
.about-card .body .photo-list .photo-wrapper .small-like.is-active .inner svg, .about-card .body .photo-list .video-wrapper .small-like.is-active .inner svg, .about-card .body .video-list .photo-wrapper .small-like.is-active .inner svg, .about-card .body .video-list .video-wrapper .small-like.is-active .inner svg {
  stroke: #fff;
  fill: #fff;
}
.about-card .body .photo-list .photo-wrapper .small-like .inner, .about-card .body .photo-list .video-wrapper .small-like .inner, .about-card .body .video-list .photo-wrapper .small-like .inner, .about-card .body .video-list .video-wrapper .small-like .inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  background: #fff;
  border-radius: 50%;
}
.about-card .body .photo-list .photo-wrapper .small-like .inner .like-overlay, .about-card .body .photo-list .video-wrapper .small-like .inner .like-overlay, .about-card .body .video-list .photo-wrapper .small-like .inner .like-overlay, .about-card .body .video-list .video-wrapper .small-like .inner .like-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  background: #ff7273;
  border-radius: 50%;
  transform: scale(0);
  transition: all 0.3s;
}
.about-card .body .photo-list .photo-wrapper .small-like .inner svg, .about-card .body .photo-list .video-wrapper .small-like .inner svg, .about-card .body .video-list .photo-wrapper .small-like .inner svg, .about-card .body .video-list .video-wrapper .small-like .inner svg {
  position: relative;
  height: 14px;
  width: 14px;
  z-index: 1;
  transition: all 0.3s;
}
.about-card .body .photo-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: -0.5rem;
}
.about-card .body .photo-list .photo-wrapper {
  position: relative;
  width: calc(20% - 1rem);
  margin: 0.5rem;
  overflow: hidden;
}
.about-card .body .photo-list .photo-wrapper img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  border-radius: 4px;
}
.about-card .body .video-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: -0.5rem;
}
.about-card .body .video-list .video-wrapper {
  position: relative;
  width: calc(25% - 1rem);
  margin: 0.5rem;
  overflow: hidden;
}
.about-card .body .video-list .video-wrapper img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  border-radius: 4px;
}
.about-card .body .video-list .video-wrapper .video-overlay {
  opacity: 0.5 !important;
}
.about-card .body .video-list .video-wrapper .video-length {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #fcfcfc;
  font-weight: 500;
  font-size: 0.8rem;
}
.about-card .body .video-list .video-wrapper .video-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 34px;
  width: 34px;
  background: #6e5bdb;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
}
.about-card .body .video-list .video-wrapper .video-button img {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  left: 1px;
  z-index: 3;
}
.about-card .body .video-list .video-wrapper .video-button:after {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #6e5bdb;
  animation: wave 1.6s infinite;
  animation-duration: 2s;
  transform-origin: center center;
  z-index: 0;
}
.about-card .body .place-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: -0.5rem;
}
.about-card .body .place-list .place-wrapper {
  position: relative;
  width: calc(33% - 1rem);
  margin: 0.5rem;
  overflow: hidden;
  padding: 12px;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 4px;
  transition: all 0.3s;
}
.about-card .body .place-list .place-wrapper:hover {
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.about-card .body .place-list .place-wrapper img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  border-radius: 4px;
}
.about-card .body .place-list .place-wrapper .foot .place-name {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #393a4f;
  transition: color 0.3s;
}
.about-card .body .place-list .place-wrapper .foot .place-name:hover {
  color: #6e5bdb;
}
.about-card .body .place-list .place-wrapper .foot .rating {
  line-height: 1;
}
.about-card .body .place-list .place-wrapper .foot .rating svg {
  height: 14px;
  width: 14px;
  stroke: #cecece;
  fill: #cecece;
  transition: all 0.3s;
}
.about-card .body .place-list .place-wrapper .foot .rating svg.is-checked {
  stroke: #6e5bdb;
  fill: #6e5bdb;
}

/* ==========================================================================
7. Page Profile about
========================================================================== */
.page-about-card {
  padding: 20px;
}
.page-about-card .card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.page-about-card .card-title h4 {
  font-family: "Montserrat", sans-serif;
  color: #393a4f;
  font-size: 0.9rem;
}
.page-about-card .about-body .about-block .block-header {
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 0;
}
.page-about-card .about-body .about-block .block-header h4 {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 500;
  color: #999;
}
.page-about-card .about-body .about-block .block-content {
  padding: 10px 0;
}
.page-about-card .about-body .about-block .block-content .flex-inner {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.page-about-card .about-body .about-block .block-content .flex-inner.has-meta {
  align-items: flex-start;
  margin: 16px 0;
}
.page-about-card .about-body .about-block .block-content .flex-inner.has-meta .meta {
  margin-left: 12px;
}
.page-about-card .about-body .about-block .block-content .flex-inner.has-meta .meta span {
  display: block;
  padding: 0;
}
.page-about-card .about-body .about-block .block-content .flex-inner.has-meta .meta span:first-child {
  font-weight: 500;
  color: #393a4f;
}
.page-about-card .about-body .about-block .block-content .flex-inner.has-meta .meta span:nth-child(2) {
  color: #999;
  font-size: 0.85rem;
}
.page-about-card .about-body .about-block .block-content .flex-inner .mdi {
  font-size: 24px;
  color: #999;
}
.page-about-card .about-body .about-block .block-content .flex-inner svg {
  height: 16px;
  width: 16px;
  stroke: #999;
}
.page-about-card .about-body .about-block .block-content .flex-inner span {
  display: block;
  font-size: 0.9rem;
  padding: 0 10px;
}
.page-about-card .about-body .about-block .block-content .flex-inner span a {
  color: #999;
}
.page-about-card .about-body .about-block .block-content .flex-inner span a:hover {
  color: #6e5bdb;
}
.page-about-card .about-body .about-block .block-content .history-block {
  display: flex;
  margin-bottom: 10px;
}
.page-about-card .about-body .about-block .block-content .history-block .date {
  font-weight: 500;
  font-size: 0.9rem;
  color: #393a4f;
  margin-left: 8px;
}
.page-about-card .about-body .about-block .block-content .history-block .timeline ul {
  list-style-type: disc;
  padding-left: 30px;
}
.page-about-card .about-body .about-block .block-content .history-block .timeline ul li {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 12px;
}

/* ==========================================================================
8. Page community widgets
========================================================================== */
.community-content {
  display: flex;
  justify-content: space-between;
}
.community-content .community-info {
  width: 59%;
}
.community-content .community-info .page-followers {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #dedede;
}
.community-content .community-info .page-followers .header {
  margin-bottom: 20px;
}
.community-content .community-info .page-followers .header h3 {
  font-family: "Montserrat", sans-serif;
  color: #393a4f;
  font-size: 0.9rem;
  font-weight: 600;
}
.community-content .community-info .page-followers .followers {
  display: flex;
  flex-wrap: wrap;
}
.community-content .community-info .page-followers .followers .follower {
  width: calc(20% - 16px);
  margin: 8px;
}
.community-content .community-info .page-followers .followers .follower:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.community-content .community-info .page-followers .followers .follower img {
  display: block;
  border-radius: 50%;
  filter: grayscale(4);
  opacity: 0.8;
  transition: all 0.3s;
}
.community-content .community-info .page-followers .more-followers {
  padding: 30px 0 10px 0;
  text-align: center;
}
.community-content .community-info .page-followers .more-followers a {
  padding: 8px 24px;
  border-radius: 100px;
  background: #f7f7f7;
  color: #999;
  font-size: 0.9rem;
  transition: all 0.3s;
}
.community-content .community-info .page-followers .more-followers a:hover {
  background: #ededed;
  color: #393a4f;
}
.community-content .community-widgets {
  width: 39%;
}
.community-content .community-widgets .page-counts {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #dedede;
  display: flex;
  margin-bottom: 20px;
}
.community-content .community-widgets .page-counts .like-count, .community-content .community-widgets .page-counts .follow-count {
  margin: 10px 0;
  width: 50%;
}
.community-content .community-widgets .page-counts .like-count:first-child, .community-content .community-widgets .page-counts .follow-count:first-child {
  border-right: 1px solid #e8e8e8;
}
.community-content .community-widgets .page-counts .like-count span, .community-content .community-widgets .page-counts .follow-count span {
  display: block;
  text-align: center;
}
.community-content .community-widgets .page-counts .like-count span:first-child, .community-content .community-widgets .page-counts .follow-count span:first-child {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  color: #393a4f;
  font-size: 1.4rem;
}
.community-content .community-widgets .page-counts .like-count span:nth-child(2), .community-content .community-widgets .page-counts .follow-count span:nth-child(2) {
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #999;
}
.community-content .community-widgets .page-invites {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #dedede;
}
.community-content .community-widgets .page-invites .header h3 {
  font-size: 0.9rem;
}
.community-content .community-widgets .page-invites .header .control {
  margin-top: 8px;
  position: relative;
}
.community-content .community-widgets .page-invites .header .control input {
  padding-left: 36px;
}
.community-content .community-widgets .page-invites .header .control input:focus {
  border-color: #e8e8e8;
}
.community-content .community-widgets .page-invites .header .control input:focus + .search-icon svg {
  stroke: #6e5bdb;
}
.community-content .community-widgets .page-invites .header .control .search-icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.community-content .community-widgets .page-invites .header .control .search-icon svg {
  height: 16px;
  width: 16px;
  stroke: #cecece;
  transition: stroke 0.3s;
}
.community-content .community-widgets .page-invites .suggestions {
  padding: 10px 0 0 0;
}
.community-content .community-widgets .page-invites .suggestions .suggestion {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 0;
}
.community-content .community-widgets .page-invites .suggestions .suggestion:last-child {
  border-bottom: none;
}
.community-content .community-widgets .page-invites .suggestions .suggestion img {
  display: block;
  height: 36px;
  width: 36px;
  border-radius: 50%;
}
.community-content .community-widgets .page-invites .suggestions .suggestion .meta {
  margin-left: 10px;
}
.community-content .community-widgets .page-invites .suggestions .suggestion .meta span {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
}
.community-content .community-widgets .page-invites .suggestions .suggestion .button {
  margin-left: auto;
}
.community-content .community-widgets .page-invites .suggestions .suggestion .button:hover {
  border-color: #6e5bdb;
  background: #6e5bdb;
  color: #fcfcfc;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}

/* ==========================================================================
9. Photo Library
========================================================================== */
.image-grid-wrap {
  padding: 6px 0;
}
.image-grid-wrap .flex-1 {
  flex: 1;
}
.image-grid-wrap .flex-2 {
  flex: 2;
}
.image-grid-wrap .flex-3 {
  flex: 3;
}
.image-grid-wrap .image-row {
  display: flex;
}
.image-grid-wrap .image-row > div {
  position: relative;
  margin: 4px;
  height: 280px;
  border-radius: 2px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  cursor: pointer;
}
.image-grid-wrap .image-row > div:hover .overlay {
  opacity: 0.6;
  pointer-events: all;
}
.image-grid-wrap .image-row > div:hover .image-owner .avatar {
  transform: scale(1);
}
.image-grid-wrap .image-row > div:hover .image-owner .name {
  transform: translateY(0);
  opacity: 1;
}
.image-grid-wrap .image-row > div:hover .photo-time {
  transform: translateY(0);
  opacity: 1 !important;
}
.image-grid-wrap .image-row > div:hover .photo-like {
  transform: scale(1);
}
.image-grid-wrap .image-row > div .overlay {
  position: absolute;
  top: -4px;
  left: -4px;
  height: 100%;
  width: 100%;
  margin: 4px;
  background: #393a4f;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: all 0.3s;
}
.image-grid-wrap .image-row > div .image-owner {
  position: absolute;
  bottom: 14px;
  left: 14px;
  max-height: 40px;
  display: flex;
  align-items: center;
  z-index: 2;
}
.image-grid-wrap .image-row > div .image-owner .avatar {
  display: block;
  height: 38px;
  width: 38px;
  border-radius: 50%;
  border: 1.4px solid #fff;
  transform: scale(0);
  transition: all 0.3s;
}
.image-grid-wrap .image-row > div .image-owner .name {
  color: #fff;
  font-size: 0.9rem;
  margin-left: 8px;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.3s;
}
.image-grid-wrap .image-row > div .photo-time {
  position: absolute;
  top: 20px;
  left: 14px;
  color: #fff;
  font-size: 0.85rem;
  margin-left: 8px;
  opacity: 0;
  transform: translateY(5px);
  z-index: 2;
  transition: all 0.3s;
}
.image-grid-wrap .image-row > div .photo-like {
  position: absolute;
  top: 14px;
  right: 14px;
  height: 38px;
  width: 38px;
  border-radius: 50%;
  background: #fff;
  z-index: 2;
  transform: scale(0);
  transition: all 0.3s;
}
.image-grid-wrap .image-row > div .photo-like:hover .inner svg {
  stroke: #ff7273;
}
.image-grid-wrap .image-row > div .photo-like.is-liked {
  box-shadow: 0 14px 26px -12px rgba(255, 114, 115, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 114, 115, 0.2) !important;
}
.image-grid-wrap .image-row > div .photo-like.is-liked .inner .like-overlay {
  transform: scale(1);
}
.image-grid-wrap .image-row > div .photo-like.is-liked .inner svg {
  stroke: #fff;
  fill: #fff;
}
.image-grid-wrap .image-row > div .photo-like .inner {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}
.image-grid-wrap .image-row > div .photo-like .inner .like-overlay {
  position: absolute;
  top: -2px;
  left: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  border-radius: 50%;
  background: #ff494a;
  transform: scale(0);
  transition: all 0.3s;
  z-index: 1;
}
.image-grid-wrap .image-row > div .photo-like .inner svg {
  position: relative;
  height: 16px;
  width: 16px;
  stroke: #393a4f;
  z-index: 2;
  transition: all 0.3s;
}

/* ==========================================================================
10. Custom Lightbox
========================================================================== */
.custom-profile-lightbox {
  position: fixed;
  top: 58px;
  left: 0;
  height: calc(100% - 58px);
  width: 100%;
  background: #fff;
  z-index: -1;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.custom-profile-lightbox.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
  z-index: 3;
}
.custom-profile-lightbox .lightbox-inner {
  position: relative;
  height: 100%;
  width: 100%;
}
.custom-profile-lightbox .lightbox-inner .image-side {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% - 380px);
  background: #181e28;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap {
  position: relative;
  max-width: calc(100% - 160px);
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap:hover .meta-overlay {
  pointer-events: all;
  opacity: 0.6;
  z-index: 1;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap:hover .meta-block h3, .custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap:hover .meta-block p {
  opacity: 1;
  transform: translateY(0);
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap:hover .action-block .action-button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .image-loader {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #090b0f;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: all 0.3s;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .image-loader.is-active {
  pointer-events: all;
  opacity: 1;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .image-loader .loader {
  height: 3rem;
  width: 3rem;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .meta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #090b0f;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: all 0.3s;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .meta-block {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .meta-block h3 {
  font-family: "Montserrat", sans-serif;
  color: #ffffff;
  font-size: 0.8rem;
  max-width: 440px;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.3s;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .meta-block p {
  padding-top: 8px;
  color: #ffffff;
  font-size: 0.8rem;
  max-width: 540px;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.3s;
  transition-delay: 0.2s;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .action-block {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .action-block .action-button {
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1.2px solid #fff;
  margin: 0 5px;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: all 0.3s;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .action-block .action-button:hover svg {
  stroke: #6e5bdb;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .action-block .action-button:nth-child(2) {
  transition-delay: 0.1s;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .action-block .action-button:nth-child(3) {
  transition-delay: 0.2s;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .action-block .action-button:nth-child(4) {
  transition-delay: 0.3s;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap .action-block .action-button svg {
  height: 18px;
  width: 18px;
  stroke: #fff;
  transition: stroke 0.3s;
}
.custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap img {
  display: block;
  border-radius: 4px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 380px;
  background: #fff;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-loader {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all 0.3s;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-loader.is-active {
  pointer-events: all;
  opacity: 1;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-loader .loader {
  height: 3rem;
  width: 3rem;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 12px;
  width: 100%;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header .user-meta {
  margin: 0 10px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header .user-meta span {
  display: block;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header .user-meta span:first-child {
  font-size: 0.9rem;
  font-weight: 500;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header .user-meta span:first-child small {
  color: #999;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header .user-meta span:nth-child(2) {
  font-size: 0.8rem;
  color: #999;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header .button {
  line-height: 0;
  margin-left: auto;
  padding: 14px 18px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header .dropdown .button {
  padding: 18px 6px;
  border: none;
  background: transparent;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header .dropdown .button svg {
  height: 18px;
  width: 18px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header .dropdown .button img {
  border-radius: 50%;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .header .dropdown .dropdown-menu {
  margin-top: 10px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .inner-content {
  padding: 12px 12px 0 12px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .inner-content .control {
  width: 100%;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .inner-content .control input {
  padding-left: 34px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .inner-content .control input:focus + .icon svg {
  stroke: #6e5bdb;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .inner-content .control .icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .inner-content .control .icon svg {
  height: 18px;
  width: 18px;
  stroke: #cecece;
  transition: all 0.3s;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e8e8e8;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count {
  display: flex;
  align-items: stretch;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .shares-count, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .comments-count, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .likes-count, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .views-count {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 3px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .shares-count span, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .comments-count span, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .likes-count span, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .views-count span {
  display: block;
  font-size: 0.8rem;
  color: #888da8;
  margin: 0 5px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .shares-count span.views, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .comments-count span.views, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .likes-count span.views, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .views-count span.views {
  margin: 0 2px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .shares-count svg, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .comments-count svg, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .likes-count svg, .custom-profile-lightbox .lightbox-inner .sidebar-side .live-stats .social-count .views-count svg {
  height: 14px;
  width: 14px;
  stroke: #888da8;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .actions .action {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .actions .action span {
  display: block;
  font-size: 0.8rem;
  margin: 0 4px;
  transition: all 0.3s;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .actions .action svg {
  height: 16px;
  width: 16px;
  stroke: #888da8;
  transition: all 0.3s;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .actions .action:hover span {
  color: #6e5bdb;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .actions .action:hover svg {
  stroke: #6e5bdb;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list {
  background: #f5f6f7;
  height: calc(100% - 232px);
  padding: 20px 14px;
  overflow-y: auto;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment {
  border: none !important;
  padding-top: 0 !important;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment.is-nested {
  margin-left: 40px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-left {
  margin-right: 10px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-left img {
  border-radius: 50%;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-content {
  background: #fff;
  padding: 12px;
  border-radius: 8px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-content .username {
  font-size: 0.8rem;
  font-weight: 500;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-content p {
  font-size: 0.75rem;
  color: #999;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-content .comment-actions {
  display: flex;
  align-items: center;
  padding-top: 8px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-content .comment-actions span, .custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-content .comment-actions a {
  display: block;
  font-size: 0.75rem;
  color: #393a4f;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-content .comment-actions span {
  margin: 0 10px;
  color: #999;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-content .comment-actions .likes-count {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-content .comment-actions .likes-count span {
  display: block;
  font-size: 0.75rem;
  color: #888da8;
  margin: 0 5px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-content .comment-actions .likes-count span.views {
  margin: 0 2px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comments-list .is-comment .media-content .comment-actions .likes-count svg {
  height: 12px;
  width: 12px;
  stroke: #888da8;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fbfbfc;
  height: 50px;
  width: 100%;
  border-radius: 0 0 6px 0;
  border-top: 1px solid #dee2e5;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 16px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner img {
  height: 32px;
  width: 32px;
  border-radius: 50%;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .control {
  width: 100%;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .control .textarea, .custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .control .emojionearea-editor {
  resize: none;
  height: 36px;
  max-height: 36px;
  min-height: 36px;
  border-radius: 100px;
  overflow: hidden;
  line-height: 1.6;
  font-size: 0.8rem;
  padding-left: 16px;
  margin: 0 6px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .emojionearea-editor {
  padding-left: 0 !important;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .emojionearea-editor img {
  height: 18px;
  width: 18px;
  min-height: 18px;
  max-height: 18px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .emojionearea {
  overflow: visible !important;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .emojionearea-picker {
  top: -230px;
  position: absolute;
  left: -50px;
  width: 310px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .emojionearea-picker .emojionearea-wrapper {
  width: 310px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .emojionearea-picker .emojionearea-wrapper img {
  height: 22px;
  width: 22px;
  min-height: 22px;
  max-height: 22px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .emojionearea-scroll-area {
  width: 310px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .emojionearea .emojionearea-button > div.emojionearea-button-open {
  background-position: 0 -22px;
}
.custom-profile-lightbox .lightbox-inner .sidebar-side .comment-controls .controls-inner .emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn {
  width: 24px !important;
  height: 24px !important;
}

/* ==========================================================================
11. Profile friends
========================================================================== */
.friends-grid {
  padding: 20px 0;
}
.friends-grid .columns .column {
  padding: 0.5rem;
}
.friends-grid .friend-item {
  display: block;
  width: 100%;
  padding: 30px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fff;
  transition: all 0.3s;
}
.friends-grid .friend-item:hover {
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.friends-grid .friend-item:hover .avatar-wrap .circle {
  transform: scale(1);
}
.friends-grid .friend-item:hover .avatar-wrap .chat-button {
  transform: scale(1);
  opacity: 1;
}
.friends-grid .friend-item .avatar-wrap {
  position: relative;
  height: 96px;
  width: 96px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.friends-grid .friend-item .avatar-wrap .circle {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 1.4px solid #cecece;
  transform: scale(0.4);
  transition: all 0.3s;
  z-index: 1;
}
.friends-grid .friend-item .avatar-wrap .chat-button {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #6e5bdb;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  opacity: 0;
  transition: all 0.3s;
  z-index: 3;
}
.friends-grid .friend-item .avatar-wrap .chat-button svg {
  height: 14px;
  width: 14px;
  stroke: #fff;
  fill: #fff;
}
.friends-grid .friend-item .avatar-wrap img {
  position: relative;
  display: block;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  z-index: 2;
}
.friends-grid .friend-item h3 {
  font-family: "Montserrat", sans-serif;
  color: #393a4f;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 6px;
}
.friends-grid .friend-item p {
  color: #999;
  font-size: 0.8rem;
}

/* ==========================================================================
12. Media Queries
========================================================================== */
@media (max-width: 767px) {
  .profile-about {
    padding: 20px 0;
  }
  .profile-about .left-menu {
    margin-bottom: 20px;
  }
  .profile-about .right-content {
    width: 100% !important;
  }
  .community-content {
    flex-direction: column-reverse;
  }
  .community-content .community-widgets {
    margin-bottom: 20px;
  }
  .community-content .community-info, .community-content .community-widgets {
    width: 100% !important;
  }
  .custom-profile-lightbox .lightbox-inner .image-side {
    width: 100%;
    height: 180px;
  }
  .custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap {
    max-width: calc(100% - 80px);
  }
  .custom-profile-lightbox .lightbox-inner .sidebar-side {
    width: 100%;
    top: 180px;
    height: calc(100% - 180px);
    z-index: 10;
    background: #fff;
  }
  .image-grid-wrap .image-row > div {
    min-height: 280px;
  }
}
@media screen and (max-width: 400px) {
  .image-row {
    flex-direction: column;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .profile-about .right-content {
    width: calc(100% - 220px) !important;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .profile-about {
    padding: 20px 0;
  }
  .profile-about .left-menu {
    margin-bottom: 20px;
  }
  .profile-about .right-content {
    width: 100% !important;
  }
  .custom-profile-lightbox .lightbox-inner .image-side {
    width: 100%;
    height: 340px;
  }
  .custom-profile-lightbox .lightbox-inner .image-side .image-side-inner .image-wrap {
    max-width: calc(100% - 80px);
  }
  .custom-profile-lightbox .lightbox-inner .sidebar-side {
    width: 100%;
    top: 340px;
    height: calc(100% - 340px);
    z-index: 10;
    background: #fff;
  }
  .friends-grid .columns {
    display: flex;
  }
  .friends-grid .columns .friend-item {
    min-height: 216px;
  }
}
/* ==========================================================================
0. Layout
========================================================================== */
.friends-wrapper {
  position: relative;
  margin: 0 auto;
  top: 40px;
  padding: 0 6%;
  min-height: calc(100vh - 280px);
}
.friends-wrapper.has-sidebar .card-row .friend-card {
  width: calc(33.3% - 16px);
}
.friends-wrapper .card-row-wrap {
  display: none;
}
.friends-wrapper .card-row-wrap.is-active {
  display: block;
}
.friends-wrapper .card-row-placeholder {
  min-height: calc(100vh - 280px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.friends-wrapper .card-row {
  margin-top: 20px;
  padding-bottom: 60px;
}

/* ==========================================================================
1. Cards
========================================================================== */
.friend-card {
  position: relative;
  border-radius: 8px;
  padding: 20px;
  transition: box-shadow 0.3s;
}
.friend-card.has-shapes {
  overflow: hidden;
}
.friend-card.has-shapes .shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
  z-index: 0;
}
.friend-card:hover {
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.friend-card .shape {
  display: none;
}
.friend-card .star-friend {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 44px;
  width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  cursor: pointer;
}
.friend-card .star-friend.is-active svg {
  transform: rotate(360deg);
  stroke: #6e5bdb;
  fill: #6e5bdb;
}
.friend-card .star-friend svg {
  height: 20px;
  width: 20px;
  stroke: #cecece;
  fill: #cecece;
  transition: all 0.3s;
  transform: rotate(0);
}
.friend-card .img-container {
  position: relative;
  height: 90px;
  width: 90px;
  margin: 10px auto;
  z-index: 1;
}
.friend-card .img-container .avatar {
  display: block;
  border-radius: 50%;
}
.friend-card .img-container .avatar.is-placeholder {
  filter: grayscale(1);
  opacity: 0.3;
}
.friend-card .img-container .country {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  border: 3px solid #fff;
}
.friend-card .friend-info {
  text-align: center;
}
.friend-card .friend-info h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: #393a4f;
  line-height: 1;
  transition: color 0.3s;
}
.friend-card .friend-info p {
  font-family: Roboto, sans-serif;
  font-size: 0.85rem;
  color: #999;
}
.friend-card .friend-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.friend-card .friend-stats .stat-block {
  text-align: center;
  padding: 0 20px;
}
.friend-card .friend-stats .stat-block:nth-child(2) {
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
}
.friend-card .friend-stats .stat-block label {
  display: block;
  text-transform: uppercase;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.6rem;
  color: #999;
}
.friend-card .friend-stats .stat-block .stat-number {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #393a4f;
}
.friend-card .friend-actions {
  display: flex;
  justify-content: center;
  padding-top: 30px;
}
.friend-card .friend-actions .button {
  margin: 0 4px;
}
.friend-card .friend-actions .button:hover svg {
  stroke: #393a4f;
}
.friend-card .friend-actions .button svg {
  height: 16px;
  width: 16px;
  stroke: #ddd;
  transition: stroke 0.3s;
}

/* ==========================================================================
3. Media Queries
========================================================================== */
@media screen and (max-width: 1300px) {
  .friends-wrapper {
    padding: 0 !important;
  }
}
@media screen and (max-width: 1100px) {
  .friends-wrapper .card-row .friend-card {
    width: calc(33.3% - 16px);
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .friends-wrapper.has-sidebar .card-row .friend-card {
    width: calc(100% - 16px) !important;
  }
  .friends-wrapper .card-row .friend-card {
    width: calc(50% - 16px);
  }
  .friends-wrapper .card-row .friend-card .friend-actions {
    justify-content: center !important;
  }
  .options-nav .is-search {
    max-width: 180px !important;
  }
}
@media screen and (max-width: 767px) {
  .friends-wrapper .card-row .friend-card {
    width: calc(50% - 16px);
  }
  .friends-wrapper .card-row .friend-card .friend-actions {
    justify-content: center !important;
  }
  .options-nav .is-friends #show-filters {
    display: none !important;
  }
  .options-nav .is-friends .is-page-title h2 {
    font-size: 0.9rem;
  }
  .options-nav .is-friends .end-group {
    display: none !important;
  }
}
@media screen and (max-width: 560px) {
  .friends-wrapper .card-row .friend-card {
    width: calc(100% - 16px);
  }
}
/* ==========================================================================
1. Event page layout
========================================================================== */
.events-wrapper {
  position: absolute;
  top: 58px;
  left: 0;
  width: 100%;
  height: calc(100vh - 58px);
  background: #fff;
}
.events-wrapper .left-panel {
  position: fixed;
  top: 58px;
  left: 0;
  width: 260px;
  height: calc(100vh - 58px);
  background: #fff;
  border-right: 1px solid #e0e0e0;
}
.events-wrapper .left-panel .left-panel-inner {
  position: relative;
  height: 100%;
  width: 100%;
  padding-bottom: 60px;
}
.events-wrapper .left-panel .left-panel-inner a {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #dedede;
  transition: all 0.3s;
}
.events-wrapper .left-panel .left-panel-inner a.is-active {
  background: #f2f2f2;
}
.events-wrapper .left-panel .left-panel-inner a.is-active span.tag {
  background: #6e5bdb !important;
  color: #fff !important;
}
.events-wrapper .left-panel .left-panel-inner a.is-active span.date-block svg {
  stroke: #6e5bdb;
}
.events-wrapper .left-panel .left-panel-inner a span {
  display: block;
}
.events-wrapper .left-panel .left-panel-inner a span.date-block {
  display: flex;
  align-items: center;
}
.events-wrapper .left-panel .left-panel-inner a span.date-block svg {
  position: relative;
  top: -1px;
  height: 18px;
  width: 18px;
  margin-right: 6px;
  stroke: #cecece;
  transition: stroke 0.3s;
}
.events-wrapper .left-panel .left-panel-inner a span.date-block .month {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  color: #393a4f;
  font-size: 0.85rem;
  line-height: 1;
  width: 75px;
}
.events-wrapper .left-panel .left-panel-inner a span.meta-block {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.events-wrapper .left-panel .left-panel-inner a span.meta-block .time {
  font-size: 0.8rem;
  color: #999;
  line-height: 1;
}
.events-wrapper .left-panel .left-panel-inner a span.meta-block .type {
  display: inline-block;
}
.events-wrapper .left-panel .left-panel-inner a span.meta-block .type .tag {
  display: inline-block;
  border-radius: 100px;
  line-height: 2;
  transition: all 0.3s;
  background: #f2f2f2;
  color: #393a4f;
}
.events-wrapper .left-panel .left-panel-inner .add-event {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  transition: opacity 0.3s;
}
.events-wrapper .left-panel .left-panel-inner .add-event .button {
  height: 42px;
  width: 100%;
  border: 2px dashed #cecece;
  color: #999;
}
.events-wrapper .left-panel .left-panel-inner .add-event .button:hover {
  border: 2px solid #6e5bdb;
  background: #6e5bdb;
  color: #fafafa;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.events-wrapper .right-panel {
  position: fixed;
  top: 58px;
  right: 0;
  width: 380px;
  height: calc(100vh - 58px);
  background: #fff;
  border-left: 1px solid #e0e0e0;
}
.events-wrapper .right-panel .panel-header {
  display: flex;
  align-items: center;
  height: 60px;
  width: 100%;
  padding: 0 30px;
}
.events-wrapper .right-panel .panel-header h3 {
  font-size: 1rem;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
}
.events-wrapper .right-panel .panel-body {
  position: relative;
  height: calc(100% - 60px);
  overflow-y: auto;
  padding: 0 20px 20px 20px;
}
.events-wrapper .right-panel .panel-body .activity-block {
  display: flex;
  align-items: flex-start;
  padding: 10px 0;
}
.events-wrapper .right-panel .panel-body .activity-block img {
  display: block;
  height: 32px;
  width: 32px;
  min-width: 32px;
  border-radius: 50%;
}
.events-wrapper .right-panel .panel-body .activity-block .activity-meta {
  margin-left: 10px;
}
.events-wrapper .right-panel .panel-body .activity-block .activity-meta p {
  font-size: 0.85rem;
  color: #393a4f;
}
.events-wrapper .right-panel .panel-body .activity-block .activity-meta p a {
  font-weight: 500;
  color: #393a4f;
  transition: color 0.3s;
}
.events-wrapper .right-panel .panel-body .activity-block .activity-meta p a:hover {
  color: #6e5bdb;
}
.events-wrapper .right-panel .panel-body .activity-block .activity-meta span {
  display: block;
  font-size: 0.85rem;
  color: #999;
}
.events-wrapper .wrapper-inner {
  position: relative;
  width: calc(100% - 640px);
  height: 100%;
  margin-left: 260px;
  margin-right: 380px;
}
.events-wrapper .wrapper-inner .event-list {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.3s;
}
.events-wrapper .wrapper-inner .event-list .event-item {
  position: relative;
  width: 100%;
  padding: 40px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-inner-wrap {
  position: relative;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-inner-wrap .event-options {
  position: absolute;
  top: 5px;
  right: 0;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-inner-wrap .event-options:hover .button svg {
  animation: rotation 2s infinite linear;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-inner-wrap .event-options .button {
  background: transparent;
  border: none;
  padding: 0;
  height: 28px;
  width: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-inner-wrap .event-options .button svg {
  color: #757a91;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-title {
  font-size: 2rem;
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  color: #393a4f;
  line-height: 1.1;
  max-width: 520px;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-subtitle {
  display: flex;
  margin: 40px 0 10px 0;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-subtitle svg {
  height: 20px;
  width: 20px;
  margin-right: 6px;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-subtitle h3 {
  color: #999;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-content {
  display: flex;
  align-items: flex-start;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-content .event-owner {
  display: flex;
  align-items: center;
  min-width: 80px;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-content .event-owner img {
  display: block;
  height: 44px;
  width: 44px;
  min-width: 44px;
  border-radius: 50%;
  margin: 0 auto;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-content .event-owner .owner-meta {
  margin-left: 12px;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-content .event-owner .owner-meta span {
  display: block;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-content .event-owner .owner-meta span:first-child {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #393a4f;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-content .event-owner .owner-meta span:nth-child(2) {
  font-size: 0.9rem;
  color: #999;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-content .event-description p {
  color: #757a91;
  margin-bottom: 10px;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-content .event-description p:last-child {
  margin-bottom: 0;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-participants {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-participants .participants-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-participants .participants-group img {
  height: 38px;
  width: 38px;
  border-radius: 50%;
  border: 3px solid #fff;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-participants .participants-group img:not(:first-child) {
  margin-left: -12px;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-participants .participants-text {
  margin-left: 10px;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-participants .participants-text p {
  font-size: 0.8rem;
  color: #888da8;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-participants .participants-text p a {
  color: #393a4f;
}
.events-wrapper .wrapper-inner .event-list .event-item .event-participants .participants-text p a:hover {
  color: #6e5bdb;
}

/* ==========================================================================
2. Media Queries
========================================================================== */
@media only screen and (max-width: 1300px) {
  .events-wrapper .right-panel {
    width: 310px !important;
  }
  .events-wrapper .wrapper-inner {
    width: calc(100% - 570px) !important;
    margin-right: 310px !important;
  }
  .events-wrapper .wrapper-inner .event-list .event-item {
    padding: 40px;
  }
}
@media only screen and (max-width: 1200px) {
  .events-wrapper .right-panel {
    display: none !important;
  }
  .events-wrapper .wrapper-inner {
    width: calc(100% - 260px) !important;
    margin-right: 0 !important;
  }
  .events-wrapper .wrapper-inner .event-list .event-item {
    padding: 40px 60px;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .events-wrapper .right-panel, .events-wrapper .left-panel {
    display: none !important;
  }
  .events-wrapper .wrapper-inner {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .events-wrapper .wrapper-inner .event-list .event-item {
    padding: 40px 60px;
    height: auto;
  }
  .events-wrapper .wrapper-inner .event-list .event-item .event-title {
    font-size: 2rem !important;
  }
}
@media (max-width: 767px) {
  .events-wrapper .right-panel, .events-wrapper .left-panel {
    display: none !important;
  }
  .events-wrapper .wrapper-inner {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .events-wrapper .wrapper-inner .event-list .event-item {
    padding: 40px 30px;
    height: auto;
  }
  .events-wrapper .wrapper-inner .event-list .event-item .event-title {
    font-size: 1.6rem !important;
    max-width: 280px;
  }
  .events-wrapper .wrapper-inner .event-list .event-item .event-inner-wrap .event-content .event-owner {
    display: none;
  }
  .events-wrapper .wrapper-inner .event-list .event-item .event-inner-wrap .event-options {
    top: 0px;
    right: 0px;
  }
  .events-wrapper .wrapper-inner .event-list .event-item .event-inner-wrap .event-participants {
    margin-left: 0 !important;
  }
}
/* ==========================================================================
0. News header
========================================================================== */
.news-header {
  position: relative;
  top: -2px;
  width: 100%;
  height: calc(100vh - 60px);
}
.news-header .news-hero-wrapper {
  position: absolute;
  height: 100%;
  width: calc(100% - 360px);
  margin-right: 360px;
}
.news-header .news-hero-wrapper.is-primary .overlay-layer {
  background: rgba(110, 91, 219, 0.6);
}
.news-header .news-hero-wrapper.is-primary .overlay-layer:hover {
  background: rgba(110, 91, 219, 0.85);
}
.news-header .news-hero-wrapper.is-accent .overlay-layer {
  background: rgba(110, 91, 219, 0.6);
}
.news-header .news-hero-wrapper.is-accent .overlay-layer:hover {
  background: rgba(110, 91, 219, 0.85);
}
.news-header .news-hero-wrapper.is-blue .overlay-layer {
  background: rgba(3, 155, 229, 0.6);
}
.news-header .news-hero-wrapper.is-blue .overlay-layer:hover {
  background: rgba(3, 155, 229, 0.85);
}
.news-header .news-hero-wrapper.is-green .overlay-layer {
  background: rgba(28, 229, 137, 0.6);
}
.news-header .news-hero-wrapper.is-green .overlay-layer:hover {
  background: rgba(28, 229, 137, 0.85);
}
.news-header .news-hero-wrapper.is-red .overlay-layer {
  background: rgba(255, 114, 115, 0.6);
}
.news-header .news-hero-wrapper.is-red .overlay-layer:hover {
  background: rgba(255, 114, 115, 0.85);
}
.news-header .news-hero-wrapper .overlay-layer {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(57, 58, 79, 0.6);
  z-index: 1;
  transition: all 0.5s;
}
.news-header .news-hero-wrapper .overlay-layer:hover {
  background: rgba(57, 58, 79, 0.85);
}
.news-header .news-hero-wrapper .overlay-layer .text-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
}
.news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text {
  padding: 0 60px;
}
.news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text .tag {
  margin-bottom: 20px;
  text-transform: uppercase;
  height: 26px;
  border-radius: 50px;
  padding-left: 16px;
  padding-right: 16px;
  background: transparent;
  border: 1.2px solid white;
  color: white;
  margin-right: 6px;
}
.news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text h2 {
  font-family: Montserrat, sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  max-width: 640px;
  color: #fcfcfc;
  line-height: 1;
}
.news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text p {
  font-family: Montserrat, sans-serif;
  font-size: 1.3rem;
  font-weight: 300;
  max-width: 640px;
  color: #fcfcfc;
  margin: 10px 0;
}
.news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text .cta-wrap {
  padding: 10px 0;
}
.news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text .cta-wrap .button {
  font-size: 1rem;
  height: 47px;
  background: transparent;
  color: #fff;
  border: 1.4px solid #fff;
  min-width: 140px;
  margin-right: 6px;
}
.news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text .cta-wrap .button:hover {
  background: #fff;
  color: #393a4f;
}
.news-header .news-hero-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  height: 100%;
  background: #fff;
}
.news-header .news-hero-menu .stories {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.news-header .news-hero-menu .stories .story {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20%;
  border-right: 4px solid transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 20px;
}
.news-header .news-hero-menu .stories .story.is-active {
  border-right-color: #393a4f;
}
.news-header .news-hero-menu .stories .story.is-active:before {
  display: block;
}
.news-header .news-hero-menu .stories .story:before {
  content: "";
  display: none;
  position: absolute;
  top: 47%;
  left: -21px;
  height: 24px;
  width: 24px;
  background: #fff;
  z-index: 2;
  transform: rotate(45deg) translateY(-50%);
}
.news-header .news-hero-menu .stories .story.is-primary.is-active {
  border-right-color: #6e5bdb;
}
.news-header .news-hero-menu .stories .story.is-primary.is-active .avatar-wrap {
  border-color: #6e5bdb;
}
.news-header .news-hero-menu .stories .story.is-accent.is-active {
  border-right-color: #6e5bdb;
}
.news-header .news-hero-menu .stories .story.is-accent.is-active .avatar-wrap {
  border-color: #6e5bdb;
}
.news-header .news-hero-menu .stories .story.is-blue.is-active {
  border-right-color: #039be5;
}
.news-header .news-hero-menu .stories .story.is-blue.is-active .avatar-wrap {
  border-color: #039be5;
}
.news-header .news-hero-menu .stories .story.is-green.is-active {
  border-right-color: #1ce589;
}
.news-header .news-hero-menu .stories .story.is-green.is-active .avatar-wrap {
  border-color: #1ce589;
}
.news-header .news-hero-menu .stories .story.is-red.is-active {
  border-right-color: #ff7273;
}
.news-header .news-hero-menu .stories .story.is-red.is-active .avatar-wrap {
  border-color: #ff7273;
}
.news-header .news-hero-menu .stories .story .avatar-wrap {
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 50%;
  border: 1.4px solid #cecece;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.news-header .news-hero-menu .stories .story .avatar-wrap img {
  display: block;
  height: 36px;
  width: 36px;
  border-radius: 50%;
}
.news-header .news-hero-menu .stories .story .meta {
  margin-left: 20px;
}
.news-header .news-hero-menu .stories .story .meta span {
  display: block;
}
.news-header .news-hero-menu .stories .story .meta span:first-child {
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 500;
  color: #999;
}
.news-header .news-hero-menu .stories .story .meta span:nth-child(2) {
  font-size: 0.92rem;
  font-family: Montserrat, sans-serif;
  color: #393a4f;
  font-weight: 600;
}
.news-header .news-hero-menu .stories .story .meta span:nth-child(3) {
  font-size: 0.8rem;
  font-family: Montserrat, sans-serif;
  color: #999;
  font-weight: 500;
}

/* ==========================================================================
1. News Grid
========================================================================== */
.is-news {
  padding: 1rem;
}

.news-grid {
  display: flex;
  flex-wrap: wrap;
}
.news-grid .news-card {
  position: relative;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 6px;
  margin: 10px;
  width: calc(25% - 20px);
}
.news-grid .news-card .category {
  border-radius: 100px;
  padding-left: 0.95em;
  padding-right: 0.95em;
  background: #f0f0f0;
  color: #393a4f;
}
.news-grid .news-card.is-default {
  display: block;
  flex-direction: column;
}
.news-grid .news-card.is-default.is-inverted {
  background: #212a38;
}
.news-grid .news-card.is-default.is-inverted .news-content .news-title {
  font-weight: 600;
  color: #fcfcfc;
}
.news-grid .news-card.is-default.is-inverted .news-content p {
  font-weight: 400;
  color: #e8e8e8;
}
.news-grid .news-card.is-default.is-inverted .news-content .button-wrap .actions .action:hover {
  background: #2c384b;
}
.news-grid .news-card.is-default.is-inverted .news-content .button-wrap .actions .action:hover svg {
  stroke: #fcfcfc;
}
.news-grid .news-card.is-default:hover .avatar-wrap {
  height: 44px;
  width: 44px;
  min-width: 44px;
  border-color: #6e5bdb;
}
.news-grid .news-card.is-default .avatar-wrapper {
  position: absolute;
  top: 20px;
  right: 30px;
  height: 44px;
  width: 44px;
  min-width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.news-grid .news-card.is-default .avatar-wrap {
  height: 36px;
  width: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: 1.4px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.news-grid .news-card.is-default .avatar-wrap img {
  display: block;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border: 1.6px solid #fcfcfc;
}
.news-grid .news-card.is-default img {
  display: block;
  border-radius: 6px 6px 0 0;
  height: 160px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.news-grid .news-card.is-default .category {
  position: absolute;
  top: 30px;
  left: 30px;
}
.news-grid .news-card.is-default .news-content {
  padding: 20px 30px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 160px);
}
.news-grid .news-card.is-default .news-content .news-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: #393a4f;
  font-size: 1rem;
  margin: 0 0 10px 0;
}
.news-grid .news-card.is-default .news-content p {
  margin-top: auto;
  color: #999;
  font-size: 0.9rem;
}
.news-grid .news-card.is-default .news-content .button-wrap {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.news-grid .news-card.is-default .news-content .button-wrap .actions {
  height: 38px;
  display: flex;
  align-items: center;
}
.news-grid .news-card.is-default .news-content .button-wrap .actions .action {
  height: 38px;
  width: 38px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.news-grid .news-card.is-default .news-content .button-wrap .actions .action:hover {
  background: whitesmoke;
}
.news-grid .news-card.is-default .news-content .button-wrap .actions .action:hover svg {
  stroke: #393a4f;
}
.news-grid .news-card.is-default .news-content .button-wrap .actions .action.is-like.is-active svg {
  stroke: #ff7273 !important;
  fill: #ff7273 !important;
}
.news-grid .news-card.is-default .news-content .button-wrap .actions .action svg {
  height: 18px;
  width: 18px;
  stroke: #999;
}
.news-grid .news-card.is-wide {
  display: flex;
  align-items: center;
  padding: 30px;
  width: calc(50% - 20px);
}
.news-grid .news-card.is-wide.has-absolute-image img {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  max-height: 100%;
  max-width: 45%;
  -o-object-fit: contain;
     object-fit: contain;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content {
  display: flex;
  flex-direction: column;
  max-width: 55%;
  height: 100%;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content .category {
  position: absolute;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content .news-title {
  font-family: Montserrat, sans-serif;
  font-weight: bold;
  color: #393a4f;
  font-size: 1.3rem;
  margin: 26px 0 10px 0;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content p {
  margin-top: auto;
  color: #999;
  font-size: 0.9rem;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content p + p {
  margin-top: 10px;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content .button-wrap {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content .button-wrap .actions {
  height: 38px;
  display: flex;
  align-items: center;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content .button-wrap .actions .action {
  height: 38px;
  width: 38px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content .button-wrap .actions .action:hover {
  background: whitesmoke;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content .button-wrap .actions .action:hover svg {
  stroke: #393a4f;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content .button-wrap .actions .action.is-like.is-active svg {
  stroke: #ff7273 !important;
  fill: #ff7273 !important;
}
.news-grid .news-card.is-wide.has-absolute-image .news-content .button-wrap .actions .action svg {
  height: 18px;
  width: 18px;
  stroke: #999;
  transition: all 0.3s;
}

/* ==========================================================================
2. Media Queries
========================================================================== */
@media (max-width: 767px) {
  .news-header .news-hero-wrapper {
    width: 100%;
    margin: 0;
  }
  .news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text {
    padding: 0 30px;
  }
  .news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text h2 {
    font-size: 2rem;
  }
  .news-header .news-hero-menu {
    display: none;
  }
  .news-grid .news-card.is-default {
    width: calc(100% - 20px);
  }
  .news-grid .news-card.is-wide {
    width: calc(100% - 20px);
  }
  .news-grid .news-card.is-wide.has-absolute-image img {
    display: none;
  }
  .news-grid .news-card.is-wide.has-absolute-image .news-content {
    max-width: 100%;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .news-header .news-hero-wrapper {
    width: 100%;
    margin-right: 0;
  }
  .news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text {
    padding: 0 40px;
  }
  .news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text h2 {
    font-size: 3.4rem;
  }
  .news-header .news-hero-menu {
    display: none;
  }
  .news-grid .news-card.is-default {
    width: calc(50% - 20px);
  }
  .news-grid .news-card.is-wide {
    width: calc(50% - 20px);
  }
  .news-grid .news-card.is-wide.has-absolute-image img {
    display: none;
  }
  .news-grid .news-card.is-wide.has-absolute-image .news-content {
    max-width: 100%;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .news-header .news-hero-wrapper {
    width: calc(100% - 280px);
    margin-right: 280px;
  }
  .news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text {
    padding: 0 40px;
  }
  .news-header .news-hero-wrapper .overlay-layer .text-layer .hero-text h2 {
    font-size: 3.4rem;
  }
  .news-header .news-hero-menu {
    width: 280px;
  }
  .news-header .news-hero-menu .stories .story .avatar-wrap {
    height: 40px;
    width: 40px;
    min-width: 40px;
  }
  .news-header .news-hero-menu .stories .story .avatar-wrap img {
    height: 28px;
    width: 28px;
  }
  .news-header .news-hero-menu .stories .story .meta {
    margin-left: 10px;
  }
  .news-header .news-hero-menu .stories .story .meta span:first-child {
    font-size: 0.75rem;
  }
  .news-header .news-hero-menu .stories .story .meta span:nth-child(2) {
    font-size: 0.8rem;
  }
  .news-header .news-hero-menu .stories .story .meta span:nth-child(3) {
    font-size: 0.7rem;
  }
  .news-grid .news-card.is-default {
    width: calc(33.3% - 20px);
  }
  .news-grid .news-card.is-wide {
    width: calc(66.6% - 20px);
  }
  .news-grid .news-card.is-wide.has-absolute-image img {
    max-height: 78%;
  }
  .news-grid .news-card.is-wide.has-absolute-image .news-content {
    max-width: 60%;
  }
}
/* ==========================================================================
0. Questions Tabs
========================================================================== */
.question-tabs {
  margin-bottom: 20px !important;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}
.question-tabs.is-nav {
  margin-bottom: 0 !important;
  box-shadow: none !important;
  border: none;
}
.question-tabs.is-nav ul li a {
  padding: 1.25em;
  border-bottom: 2px solid transparent;
}
.question-tabs ul {
  border-color: transparent;
}
.question-tabs ul li.is-active a {
  color: #6e5bdb;
  border-bottom-color: #6e5bdb;
}
.question-tabs ul li a {
  color: #c6c6c6;
  border-bottom: 1px solid transparent;
  font-size: 0.9rem;
  padding: 1em;
}

/* ==========================================================================
1. Questions Wrapper & Layout
========================================================================== */
.questions-wrap, .questions-demo {
  margin: 60px 0;
}
.questions-wrap.is-smaller, .questions-demo.is-smaller {
  margin: 20px 0;
}
.questions-wrap .questions-menu, .questions-demo .questions-menu {
  margin-right: 40px;
  max-width: 250px;
}
.questions-wrap .questions-menu.questions-menu-fixed, .questions-demo .questions-menu.questions-menu-fixed {
  position: fixed;
  width: 100%;
  max-width: 250px;
  margin-top: 40px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s;
}
.questions-wrap .questions-menu.questions-menu-fixed.is-faded, .questions-demo .questions-menu.questions-menu-fixed.is-faded {
  opacity: 1;
  pointer-events: all;
}
.questions-wrap .questions-menu li.is-active a, .questions-demo .questions-menu li.is-active a {
  background: white;
}
.questions-wrap .questions-menu li.is-active a svg, .questions-demo .questions-menu li.is-active a svg {
  stroke: #6e5bdb;
}
.questions-wrap .questions-menu li.is-active a span, .questions-demo .questions-menu li.is-active a span {
  color: #6e5bdb;
}
.questions-wrap .questions-menu li a, .questions-demo .questions-menu li a {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  border-radius: 100px;
}
.questions-wrap .questions-menu li a svg, .questions-demo .questions-menu li a svg {
  height: 22px;
  height: 22px;
  margin-right: 10px;
  stroke: #999;
  transition: all 0.3s;
}
.questions-wrap .questions-menu li a span, .questions-demo .questions-menu li a span {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  color: #393a4f;
  transition: color 0.3s;
}

/* ==========================================================================
2. Question Content
========================================================================== */
.question-content {
  max-width: 640px;
  margin: 0 auto;
}
.question-content.is-large {
  max-width: 840px;
}
.question-content .top-single-header {
  margin: 0 0 20px 0;
}
.question-content .question-block {
  border-bottom: 1px solid #e3e3e3;
}
.question-content .question-block.is-top-spaced {
  margin-top: 30px;
}
.question-content .question-block .question-title {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  color: #393a4f;
  font-size: 1.6rem;
}
.question-content .question-block .question-title.is-link {
  transition: color 0.3s;
}
.question-content .question-block .question-title.is-link:hover {
  color: #6e5bdb;
}
.question-content .question-block .question-author {
  display: flex;
  align-items: center;
  padding: 20px 0;
}
.question-content .question-block .question-author img {
  display: block;
  height: 38px;
  width: 38px;
  min-width: 38px;
  border-radius: 50%;
}
.question-content .question-block .question-author .meta {
  margin-left: 12px;
}
.question-content .question-block .question-author .meta span {
  display: block;
}
.question-content .question-block .question-author .meta span:first-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #393a4f;
  font-size: 0.9rem;
}
.question-content .question-block .question-author .meta span:nth-child(2) {
  font-size: 0.85rem;
  color: #999;
}
.question-content .question-block .question-text p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #707298;
  font-size: 0.95rem;
  max-width: 680px;
}
.question-content .question-block .question-text .tags {
  padding-top: 10px;
}
.question-content .question-block .question-text .tags .tag {
  border-radius: 100px;
  line-height: 1;
}
.question-content .question-block .question-footer {
  padding: 20px 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 700px;
}
.question-content .question-block .question-footer .likes, .question-content .question-block .question-footer .report {
  display: flex;
  align-items: center;
}
.question-content .question-block .question-footer .likes .like-icon, .question-content .question-block .question-footer .report .like-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
  background: #ff7273;
  border-radius: 50%;
}
.question-content .question-block .question-footer .likes .like-icon svg, .question-content .question-block .question-footer .report .like-icon svg {
  height: 16px;
  width: 16px;
  stroke: #fff;
  fill: #fff;
}
.question-content .question-block .question-footer .likes .report-icon, .question-content .question-block .question-footer .report .report-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
  background: whitesmoke;
  border-radius: 50%;
}
.question-content .question-block .question-footer .likes .report-icon svg, .question-content .question-block .question-footer .report .report-icon svg {
  height: 16px;
  width: 16px;
  stroke: #999;
}
.question-content .question-block .question-footer .likes span, .question-content .question-block .question-footer .report span {
  display: block;
  font-weight: 500;
  margin-left: 10px;
  font-size: 0.9rem;
}
.question-content .question-block .answers-count {
  padding: 20px 4px;
}
.question-content .question-block .answers-count span {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #393a4f;
  font-size: 0.9rem;
}
.question-content .answer-block {
  padding: 10px 0;
  border-bottom: 1px solid #e3e3e3;
}
.question-content .answer-block.is-best .answer-author .avatar-wrap {
  border: 1.4px solid #1ce589;
}
.question-content .answer-block.is-best .answer-author .avatar-wrap .badge {
  display: flex;
}
.question-content .answer-block.is-best .answer-footer .upvote .upvote-icon {
  background: #1ce589;
}
.question-content .answer-block .answer-author {
  display: flex;
  align-items: center;
  padding: 20px 0;
}
.question-content .answer-block .answer-author .avatar-wrap {
  position: relative;
  height: 48px;
  width: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1.4px solid #999;
}
.question-content .answer-block .answer-author .avatar-wrap .avatar {
  display: block;
  height: 38px;
  width: 38px;
  min-width: 38px;
  border-radius: 50%;
}
.question-content .answer-block .answer-author .avatar-wrap .badge {
  position: absolute;
  top: -4px;
  right: -7px;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  border: 2px solid #fcfcfc;
  display: none;
  justify-content: center;
  align-items: center;
  background: #1ce589;
}
.question-content .answer-block .answer-author .avatar-wrap .badge svg {
  height: 12px;
  width: 12px;
  stroke: #fcfcfc;
  stroke-width: 3px;
}
.question-content .answer-block .answer-author .meta {
  margin-left: 12px;
}
.question-content .answer-block .answer-author .meta span {
  display: block;
}
.question-content .answer-block .answer-author .meta span:first-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #393a4f;
  font-size: 0.9rem;
}
.question-content .answer-block .answer-author .meta span:first-child .best-tag {
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 100px;
  background: #c1f8df;
  font-weight: 400;
  font-size: 0.75rem;
  color: #1ce589;
  font-family: "Roboto", sans-serif;
}
.question-content .answer-block .answer-author .meta span:nth-child(2) {
  font-size: 0.85rem;
  color: #999;
}
.question-content .answer-block .answer-text p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #707298;
  font-size: 0.95rem;
  max-width: 680px;
  margin-bottom: 20px;
}
.question-content .answer-block .answer-text p.code {
  padding: 30px;
  border-radius: 8px;
  background: #f5f5f8;
  font-size: 0.88rem;
  color: #5b5d7e;
}
.question-content .answer-block .answer-text p a {
  display: block;
  word-break: break-all;
  color: #039be5;
  text-decoration: underline;
}
.question-content .answer-block .answer-footer {
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 700px;
}
.question-content .answer-block .answer-footer .upvote, .question-content .answer-block .answer-footer .report {
  display: flex;
  align-items: center;
}
.question-content .answer-block .answer-footer .upvote .upvote-icon, .question-content .answer-block .answer-footer .report .upvote-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
  background: #ebebeb;
  border-radius: 50%;
}
.question-content .answer-block .answer-footer .upvote .upvote-icon svg, .question-content .answer-block .answer-footer .report .upvote-icon svg {
  height: 16px;
  width: 16px;
  stroke: #fff;
  stroke-width: 4px;
}
.question-content .answer-block .answer-footer .upvote .report-icon, .question-content .answer-block .answer-footer .report .report-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
  background: whitesmoke;
  border-radius: 50%;
}
.question-content .answer-block .answer-footer .upvote .report-icon svg, .question-content .answer-block .answer-footer .report .report-icon svg {
  height: 16px;
  width: 16px;
  stroke: #999;
}
.question-content .answer-block .answer-footer .upvote span, .question-content .answer-block .answer-footer .report span {
  display: block;
  font-weight: 500;
  margin-left: 10px;
  font-size: 0.9rem;
}
.question-content .more-answers {
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 680px;
}
.question-content .more-answers a {
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #999;
  padding: 6px 20px;
  background: #f2f2f2;
  border-radius: 100px;
  padding: 12px 20px;
  min-width: 188px;
  text-align: center;
  transition: all 0.3s;
}
.question-content .more-answers a:hover {
  background: #6e5bdb;
  color: #fff;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.question-content .more-answers a.is-loading {
  width: 42px;
}

/* ==========================================================================
3. Other questions
========================================================================== */
.other-questions .other-title {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  color: #5b5d7e;
  font-size: 1.2rem;
}
.other-questions .other-question {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #e0e0e0;
}
.other-questions .other-question .avatar-wrap {
  position: relative;
  height: 58px;
  width: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1.4px solid #999;
}
.other-questions .other-question .avatar-wrap .avatar {
  display: block;
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 50%;
}
.other-questions .other-question .avatar-wrap .badge {
  position: absolute;
  top: -4px;
  right: -7px;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  border: 2px solid #fcfcfc;
  display: none;
  justify-content: center;
  align-items: center;
  background: #1ce589;
}
.other-questions .other-question .avatar-wrap .badge svg {
  height: 12px;
  width: 12px;
  stroke: #fcfcfc;
  stroke-width: 3px;
}
.other-questions .other-question .meta {
  margin-left: 12px;
}
.other-questions .other-question .meta span, .other-questions .other-question .meta a {
  display: block;
}
.other-questions .other-question .meta span:first-child, .other-questions .other-question .meta a:first-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #5b5d7e;
  font-size: 1rem;
}
.other-questions .other-question .meta span:nth-child(2), .other-questions .other-question .meta a:nth-child(2) {
  font-size: 0.9rem;
  color: #999;
}
.other-questions .other-question .meta a {
  transition: color 0.3s;
}
.other-questions .other-question .meta a:hover {
  color: #6e5bdb;
}

/* ==========================================================================
4. Questions navigation bar
========================================================================== */
.questions-nav {
  position: fixed;
  top: 58px;
  left: 0;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #dedede;
  background: #fff;
  z-index: 18;
  transform: translateY(-100%);
  transition: all 0.3s;
}
.questions-nav.is-active {
  transform: translateY(0);
}
.questions-nav .inner {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.questions-nav .inner.is-scrollable {
  overflow-x: auto !important;
}
.questions-nav .inner .question-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  max-width: 640px;
}
.questions-nav .inner .question-summary img {
  display: block;
  height: 32px;
  width: 32px;
  min-width: 32px;
  border-radius: 50%;
}
.questions-nav .inner .question-summary .meta {
  margin-left: 12px;
}
.questions-nav .inner .question-summary .meta h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  color: #393a4f;
  font-size: 1rem;
}
.questions-nav .inner .question-summary .meta span {
  display: block;
  font-size: 0.8rem;
  color: #999;
}
.questions-nav .inner .question-summary .dropdown {
  margin-left: auto;
}
.questions-nav .inner .question-summary .dropdown:hover .button {
  background: #f0f0f0;
}
.questions-nav .inner .question-summary .dropdown:hover .button svg {
  stroke: #393a4f;
}
.questions-nav .inner .question-summary .dropdown .button {
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  transition: all 0.3s;
}
.questions-nav .inner .question-summary .dropdown .button svg {
  height: 20px;
  width: 20px;
  stroke: #999;
  transition: stroke 0.3s;
}
.questions-nav .inner .question-summary .dropdown .dropdown-menu {
  margin-top: 14px;
}
.questions-nav .inner .questions-nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
}
.questions-nav .inner .questions-nav-menu .menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px 6px 16px;
  border-radius: 100px;
  transition: all 0.3s;
}
.questions-nav .inner .questions-nav-menu .menu-item:hover svg {
  stroke: #6e5bdb;
}
.questions-nav .inner .questions-nav-menu .menu-item:hover span {
  color: #6e5bdb;
}
.questions-nav .inner .questions-nav-menu .menu-item.is-active {
  background: white;
}
.questions-nav .inner .questions-nav-menu .menu-item.is-active svg {
  stroke: #6e5bdb;
}
.questions-nav .inner .questions-nav-menu .menu-item.is-active span {
  color: #6e5bdb;
}
.questions-nav .inner .questions-nav-menu .menu-item svg {
  height: 16px;
  width: 16px;
  stroke: #cecece;
  transition: stroke 0.3s;
}
.questions-nav .inner .questions-nav-menu .menu-item span {
  color: #595b7b;
  font-size: 0.9rem;
  margin-left: 3px;
  transition: color 0.3s;
}

/* ==========================================================================
5. Questions Categories header
========================================================================== */
.categories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 20px;
}
.categories-header h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  color: #393a4f;
  font-size: 1.6rem;
}
.categories-header .control {
  position: relative;
}
.categories-header .control input {
  padding-bottom: 8px;
  padding-left: 36px;
}
.categories-header .control input:focus {
  border-color: #ededed;
}
.categories-header .control input:focus + .search-icon svg {
  stroke: #6e5bdb;
}
.categories-header .control .search-icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.categories-header .control .search-icon svg {
  height: 20px;
  width: 20px;
  stroke: #cecece;
  transition: stroke 0.3s;
}

/* ==========================================================================
6. Questions Category box
========================================================================== */
.category-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  border: 1px solid #dedede;
  border-radius: 8px;
  transition: all 0.3s;
}
.category-box.is-row {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.category-box.is-row img {
  margin: 0;
  min-height: 160px;
  max-height: 160px;
}
.category-box.is-row .box-content {
  padding-left: 40px;
}
.category-box.is-taller img {
  margin: 0;
  min-height: 140px;
  max-height: 140px;
}
.category-box:hover {
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.category-box:hover.is-primary {
  border-color: #6e5bdb;
}
.category-box:hover.is-primary img {
  filter: grayscale(0);
  opacity: 1;
}
.category-box:hover.is-primary .box-content h3 {
  color: #6e5bdb;
}
.category-box:hover.is-accent {
  border-color: #6e5bdb;
}
.category-box:hover.is-accent img {
  filter: grayscale(0);
  opacity: 1;
}
.category-box:hover.is-accent .box-content h3 {
  color: #6e5bdb;
}
.category-box:hover.is-green {
  border-color: #1ce589;
}
.category-box:hover.is-green img {
  filter: grayscale(0);
  opacity: 1;
}
.category-box:hover.is-green .box-content h3 {
  color: #1ce589;
}
.category-box:hover.is-blue {
  border-color: #039be5;
}
.category-box:hover.is-blue img {
  filter: grayscale(0);
  opacity: 1;
}
.category-box:hover.is-blue .box-content h3 {
  color: #039be5;
}
.category-box:hover.is-red {
  border-color: #ff7273;
}
.category-box:hover.is-red img {
  filter: grayscale(0);
  opacity: 1;
}
.category-box:hover.is-red .box-content h3 {
  color: #ff7273;
}
.category-box img {
  display: block;
  margin: 0 auto;
  min-height: 110px;
  max-height: 110px;
  margin-bottom: 30px;
  filter: grayscale(1);
  opacity: 0.6;
  transition: all 0.3s;
}
.category-box .box-content h3 {
  font-family: "Montserrat", sans-serif;
  color: #393a4f;
  margin-bottom: 6px;
  transition: color 0.3s;
}
.category-box .box-content p {
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  color: #999;
}

/* ==========================================================================
7. Questions Statistics
========================================================================== */
.stats-wrapper .stats-header {
  display: flex;
  align-items: center;
  background: #fff;
  width: 100%;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin-bottom: 10px;
}
.stats-wrapper .stats-header .avatar-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 96px;
  width: 96px;
  min-width: 96px;
  border-radius: 50%;
  border: 2px solid #cecece;
}
.stats-wrapper .stats-header .avatar-wrapper .avatar {
  display: block;
  height: 80px;
  width: 80px;
  border-radius: 50%;
}
.stats-wrapper .stats-header .avatar-wrapper .badge {
  position: absolute;
  top: 1px;
  right: -1px;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1ce589;
}
.stats-wrapper .stats-header .avatar-wrapper .badge svg {
  height: 13px;
  width: 13px;
  stroke: #fff;
  stroke-width: 4px;
}
.stats-wrapper .stats-header .user-info {
  margin-left: 20px;
}
.stats-wrapper .stats-header .user-info h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #393a4f;
  font-size: 1.1rem;
}
.stats-wrapper .stats-header .user-info p {
  color: #999;
  font-size: 0.85rem;
  font-family: "Roboto", sans-serif;
}
.stats-wrapper .stats-header .user-info .button {
  margin-top: 10px;
  height: 36px;
  min-width: 110px;
  border-radius: 100px;
  padding: 0;
  transition: all 0.3s;
}
.stats-wrapper .stats-header .user-info .button.is-follow {
  border: 1.6px solid #6e5bdb;
  color: #6e5bdb;
}
.stats-wrapper .stats-header .user-info .button.is-follow:hover {
  background: #6e5bdb;
  color: #fcfcfc;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.stats-wrapper .stats-header .main-stats {
  margin-left: auto;
  display: flex;
}
.stats-wrapper .stats-header .main-stats .stat-block {
  padding: 0 16px;
  text-align: center;
}
.stats-wrapper .stats-header .main-stats .stat-block.is-centered {
  border-left: 1px solid #dedede;
  border-right: 1px solid #dedede;
}
.stats-wrapper .stats-header .main-stats .stat-block h4 {
  text-transform: uppercase;
  font-size: 0.7rem;
  color: #393a4f;
  font-weight: 500;
}
.stats-wrapper .stats-header .main-stats .stat-block p {
  font-weight: bolder;
  font-size: 1.4rem;
  color: #707298;
}
.stats-wrapper .achievements .header {
  display: flex;
  align-items: center;
  padding: 10px;
}
.stats-wrapper .achievements .header h3 {
  font-family: "Montserrat", sans-serif;
  color: #595b7b;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.3s;
}
.stats-wrapper .achievements .achievements-carousel-wrap {
  position: relative;
  overflow: hidden;
  margin-top: -6px;
}
.stats-wrapper .achievements .achievements-carousel-wrap .achievements-loader {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background: #fff;
  opacity: 0;
  transition: all 0.3s;
  z-index: -1;
}
.stats-wrapper .achievements .achievements-carousel-wrap .achievements-loader.is-active {
  opacity: 1;
  z-index: 1;
}
.stats-wrapper .achievements .achievements-carousel-wrap .achievements-loader .loader {
  height: 2rem;
  width: 2rem;
}
.stats-wrapper .achievements .achievements-carousel {
  max-height: 250px;
}
.stats-wrapper .achievements .achievements-carousel .achievement {
  padding: 30px;
  border: 1px solid #dedede;
  background: #fff;
  border-radius: 8px;
  margin: 6px;
  outline: none !important;
  cursor: grab;
  transition: all 0.3s;
}
.stats-wrapper .achievements .achievements-carousel .achievement:hover {
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
  border-color: #6e5bdb;
}
.stats-wrapper .achievements .achievements-carousel .achievement img {
  display: block;
  height: 90px;
  margin: 0 auto;
}
.stats-wrapper .achievements .achievements-carousel .achievement h3 {
  margin-top: 20px;
  font-family: "Montserrat", sans-serif;
  color: #595b7b;
  font-size: 0.85rem;
  font-weight: 500;
}
.stats-wrapper .achievements .achievements-carousel .achievement p {
  color: #999;
  font-size: 0.8rem;
  min-height: 39px;
}
.stats-wrapper .quick-activity .header {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #e8e8e8;
}
.stats-wrapper .quick-activity .header h3 {
  font-family: "Montserrat", sans-serif;
  color: #595b7b;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.3s;
}
.stats-wrapper .quick-activity .activity-list {
  padding: 10px;
}
.stats-wrapper .quick-activity .activity-list .activity-item {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  padding: 16px;
}
.stats-wrapper .quick-activity .activity-list .activity-item.is-best .avatar-wrap {
  border: 1.4px solid #1ce589;
}
.stats-wrapper .quick-activity .activity-list .activity-item.is-best .avatar-wrap .badge {
  display: flex;
}
.stats-wrapper .quick-activity .activity-list .activity-item .avatar-wrap {
  position: relative;
  height: 48px;
  width: 48px;
  min-width: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1.4px solid #cecece;
}
.stats-wrapper .quick-activity .activity-list .activity-item .avatar-wrap .avatar {
  display: block;
  height: 38px;
  width: 38px;
  min-width: 38px;
  border-radius: 50%;
}
.stats-wrapper .quick-activity .activity-list .activity-item .avatar-wrap .badge {
  position: absolute;
  top: -4px;
  right: -7px;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  border: 2px solid #fcfcfc;
  display: none;
  justify-content: center;
  align-items: center;
  background: #1ce589;
}
.stats-wrapper .quick-activity .activity-list .activity-item .avatar-wrap .badge svg {
  height: 12px;
  width: 12px;
  stroke: #fcfcfc;
  stroke-width: 3px;
}
.stats-wrapper .quick-activity .activity-list .activity-item .meta {
  margin-left: 16px;
}
.stats-wrapper .quick-activity .activity-list .activity-item .meta span {
  display: block;
}
.stats-wrapper .quick-activity .activity-list .activity-item .meta span:first-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #393a4f;
  font-size: 0.9rem;
}
.stats-wrapper .quick-activity .activity-list .activity-item .meta span:first-child .best-tag {
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 100px;
  background: #c1f8df;
  font-weight: 400;
  font-size: 0.75rem;
  color: #1ce589;
  font-family: "Roboto", sans-serif;
}
.stats-wrapper .quick-activity .activity-list .activity-item .meta span:nth-child(2) {
  font-size: 0.9rem;
  font-family: "Roboto", sans-serif;
  color: #999;
  max-width: 450px;
}
.stats-wrapper .quick-activity .activity-list .activity-item .meta span:nth-child(2) a {
  color: #595b7b;
  transition: color 0.3s;
}
.stats-wrapper .quick-activity .activity-list .activity-item .meta span:nth-child(2) a:hover {
  color: #6e5bdb;
}
.stats-wrapper .quick-activity .activity-list .activity-item .meta small {
  margin-top: 6px;
  font-size: 0.75rem;
  color: #999;
}

/* ==========================================================================
8. Questions Settings
========================================================================== */
.questions-settings .settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 30px;
}
.questions-settings .settings-header h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  color: #393a4f;
  font-size: 1.6rem;
}
.questions-settings .settings-header .control {
  position: relative;
}
.questions-settings .settings-header .control input {
  padding-bottom: 8px;
  padding-left: 36px;
}
.questions-settings .settings-header .control input:focus {
  border-color: #ededed;
}
.questions-settings .settings-header .control input:focus + .search-icon svg {
  stroke: #6e5bdb;
}
.questions-settings .settings-header .control .search-icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.questions-settings .settings-header .control .search-icon svg {
  height: 20px;
  width: 20px;
  stroke: #cecece;
  transition: stroke 0.3s;
}
.questions-settings .settings-body .switch-block {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.questions-settings .settings-body .switch-block .meta {
  margin-left: 16px;
}
.questions-settings .settings-body .switch-block .meta span {
  display: block;
}
.questions-settings .settings-body .switch-block .meta span:first-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #393a4f;
  font-size: 0.9rem;
}
.questions-settings .settings-body .switch-block .meta span:nth-child(2) {
  font-size: 0.85rem;
  color: #999;
}

.questions-side-card {
  width: 100%;
  background: #fff;
  padding: 30px;
  border: 1px solid #dedede;
  border-radius: 8px;
  margin-bottom: 20px;
}
.questions-side-card img {
  display: block;
  max-width: 80px;
  margin: 0 auto 20px auto;
}
.questions-side-card h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #393a4f;
  font-size: 0.9rem;
}
.questions-side-card p {
  font-size: 0.9rem;
  color: #999;
}

/* ==========================================================================
9. Media Queries
========================================================================== */
@media (max-width: 767px) {
  .questions-nav .question-summary {
    max-width: 340px !important;
  }
  .questions-nav .question-summary .meta h4 {
    font-size: 0.85rem !important;
  }
  .questions-nav .question-summary .meta span {
    display: none !important;
  }
  .questions-nav .questions-nav-menu .menu-item {
    padding: 6px 16px !important;
  }
  .questions-nav .questions-nav-menu .menu-item svg {
    height: 18px !important;
    width: 18px !important;
  }
  .questions-nav .questions-nav-menu .menu-item span {
    display: none !important;
  }
  .questions-wrap {
    margin: 26px 0;
    padding: 0 10px;
  }
  .questions-wrap .column.is-4, .questions-wrap .column.is-3 {
    display: none;
  }
  .categories-header h2, .settings-header h2 {
    font-size: 1.3rem !important;
  }
  .categories-header .control, .settings-header .control {
    max-width: 200px;
  }
  .category-box.is-row {
    flex-direction: column !important;
  }
  .category-box.is-row img {
    min-height: 110px !important;
    max-height: 110px !important;
  }
  .category-box.is-row .box-content {
    padding-left: 0 !important;
    padding-top: 20px;
  }
  .category-box.is-taller img {
    min-height: 110px !important;
    max-height: 110px !important;
  }
  .category-box.is-taller .box-content {
    padding-left: 0 !important;
    padding-top: 20px;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .questions-nav .question-summary {
    margin: 0 auto;
    width: 100%;
    max-width: 640px;
  }
  .questions-wrap {
    margin: 30px 0;
    padding: 0 60px;
  }
  .questions-wrap .column.is-4, .questions-wrap .column.is-3 {
    display: none;
  }
  .category-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .category-box img {
    margin: 0 !important;
    min-height: none !important;
    max-height: none !important;
    max-width: 120px !important;
    min-width: 120px !important;
  }
  .category-box .box-content {
    padding-left: 40px !important;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .questions-nav .question-summary {
    margin: 0 auto;
    width: 100%;
    max-width: 640px;
  }
  .categories-tile-grid .tile.is-parent {
    padding: 0.5rem !important;
  }
  .category-box .box-content p {
    font-size: 0.8rem !important;
  }
  .questions-menu-fixed {
    max-width: 190px !important;
  }
  .questions-side-card {
    padding: 20px;
  }
  .questions-side-card img {
    max-width: 60px;
  }
  .questions-side-card p {
    font-size: 0.8rem;
  }
}
@media (max-width: 1300px) {
  .stats-wrapper .stats-header {
    flex-direction: column;
  }
  .stats-wrapper .stats-header .user-info {
    margin: 0;
  }
  .stats-wrapper .stats-header .main-stats {
    margin: 0 auto;
    margin-top: 20px;
  }
}
#questions-shadow-dom-home {
  max-width: 640px;
  margin: 0 auto;
}

/* ==========================================================================
0. Videos Sidebar (Desktop)
========================================================================== */
.videos-wrapper .videos-sidebar {
  position: fixed;
  top: 57px;
  left: 0;
  height: calc(100% - 56px);
  background: #fafcfc;
  border-right: 1px solid #e8e8e8;
  z-index: 10;
  transition: all 0.3s;
}
@media (max-width: 768px) {
  .videos-wrapper .videos-sidebar {
    display: none !important;
  }
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block {
  position: relative;
  margin: 20px 20px 0 20px;
  border-bottom: 1px solid #dedede;
  text-align: center;
  height: 200px;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .close-videos-sidebar {
  position: absolute;
  top: -22px;
  right: -22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .close-videos-sidebar:hover {
  background: #fff;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .close-videos-sidebar:hover svg {
  stroke: #393a4f;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .close-videos-sidebar svg {
  height: 16px;
  width: 16px;
  color: #999;
  transition: stroke 0.3s;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .avatar-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 74px;
  height: 74px;
  min-width: 74px;
  border: 1.4px solid #d8d8d8;
  border-radius: 50%;
  margin: 0 auto 6px auto;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .avatar-wrap img {
  display: block;
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 50%;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .avatar-wrap .badge {
  position: absolute;
  bottom: 2px;
  right: -3px;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  border: 2px solid #fcfcfc;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1ce589;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .avatar-wrap .badge svg {
  height: 10px;
  width: 10px;
  stroke: #fcfcfc;
  stroke-width: 4px;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #393a4f;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block p {
  font-size: 0.8rem;
  color: #999;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .user-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px 0;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .user-stats .stat-block {
  text-align: center;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .user-stats .stat-block span {
  display: block;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .user-stats .stat-block span:first-child {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.65rem;
  color: #393a4f;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-block .user-stats .stat-block span:last-child {
  font-size: 0.9rem;
  color: #999;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-menu {
  flex: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(100% - 230px);
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-menu .user-menu-inner {
  position: relative;
  height: 100%;
  max-height: 100%;
  width: 100%;
  overflow-y: auto;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-menu .user-menu-inner .separator {
  margin: 0 30px;
  border-bottom: 1px solid #dedede;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-menu .user-menu-inner .menu-block {
  padding: 20px 0;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-menu .user-menu-inner .menu-block ul li {
  display: flex;
  align-items: center;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-menu .user-menu-inner .menu-block ul li a {
  display: flex;
  align-items: center;
  padding: 10px 40px;
  border-left: 4px solid transparent;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-menu .user-menu-inner .menu-block ul li a.is-active {
  border-color: #6e5bdb;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-menu .user-menu-inner .menu-block ul li a.is-active span {
  color: #6e5bdb;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-menu .user-menu-inner .menu-block ul li a.is-active svg {
  stroke: #6e5bdb;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-menu .user-menu-inner .menu-block ul li a span {
  display: block;
  color: #393a4f;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .user-menu .user-menu-inner .menu-block ul li a svg {
  height: 18px;
  width: 18px;
  stroke: #cecece;
  margin-right: 20px;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .app-links {
  margin-top: auto;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 15px;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .app-links a {
  border: solid 2px #6d798c;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #57606f;
  margin: 20px 5px 0;
  transition: all 0.4s;
  font-size: 13px;
  font-weight: 600;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .app-links a img {
  height: 20px;
  margin-right: 6px;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .app-links a:hover {
  box-shadow: 0 2px 5px rgba(110, 91, 219, 0.4) !important;
  background: #ffffff;
  color: #6e5bdb;
  border: solid 2px #6e5bdb;
}
.videos-wrapper .videos-sidebar .videos-sidebar-inner .copyright {
  font-size: 12px;
  margin: 0 auto 20px;
}

/* ==========================================================================
1. Videos Home Layout
========================================================================== */
.videos-wrapper.is-home {
  padding-left: 0;
  padding-right: 0;
}
.videos-wrapper.is-home .home-wrapper {
  position: relative;
  top: -2px;
}
.videos-wrapper.is-home .home-wrapper .mobile-sidebar-trigger {
  position: absolute;
  z-index: 9;
  top: 10px;
  left: 30px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.videos-wrapper.is-home .home-wrapper .mobile-sidebar-trigger.is-home-v2 {
  position: absolute;
  top: 23px;
  left: 34px;
  z-index: 5;
}
.videos-wrapper.is-home .home-wrapper .mobile-sidebar-trigger.is-home-v2 svg {
  stroke: #999;
}
.videos-wrapper.is-home .home-wrapper .mobile-sidebar-trigger:hover svg {
  stroke: #fff;
}
.videos-wrapper.is-home .home-wrapper .mobile-sidebar-trigger svg {
  height: 20px;
  width: 20px;
  color: #fcfcfc;
  transition: stroke 0.3s;
}
.videos-wrapper.is-home .home-wrapper .video-header-wrap {
  margin-bottom: 0;
  max-height: 500px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .videos-wrapper.is-home .home-wrapper .video-header-wrap {
    height: auto !important;
  }
}
.videos-wrapper.is-home .home-wrapper .video-header-wrap .slick-dots {
  bottom: 20px !important;
}
.videos-wrapper.is-home .home-wrapper .video-header-wrap .slick-dots li {
  margin: 0;
}
.videos-wrapper.is-home .home-wrapper .video-header-wrap .slick-dots li button:before {
  color: #fcfcfc;
}
.videos-wrapper .home-content {
  padding: 0 30px 30px 30px;
}
.videos-wrapper .home-content .collections-header {
  display: flex;
}
.videos-wrapper .home-content .collections-header > a {
  margin-right: 30px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #cecece;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}
.videos-wrapper .home-content .collections-header > a.is-active {
  color: #393a4f;
  border-color: #6e5bdb;
}
.videos-wrapper .home-content .collections-header .search-button {
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  cursor: pointer;
}
.videos-wrapper .home-content .collections-header .search-button:hover svg {
  stroke: #393a4f;
}
.videos-wrapper .home-content .collections-header .search-button svg {
  position: relative;
  top: 2px;
  height: 16px;
  width: 16px;
  stroke: #cecece;
  transition: stroke 0.3s;
}
.videos-wrapper .home-content .collections-wrap {
  display: none;
  animation: fadeInLeft 0.5s;
}
.videos-wrapper .home-content .collections-wrap.is-active {
  display: block;
}
.videos-wrapper .home-content .collections-wrap .collection .header {
  display: flex;
  align-items: center;
}
.videos-wrapper .home-content .collections-wrap .collection .header h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #393a4f;
}
.videos-wrapper .home-content .collections-wrap .collection .header a {
  padding: 0 24px;
  color: #999;
  font-size: 0.8rem;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 10px 0;
  margin-left: -10px;
  margin-right: -10px;
}
@media (max-width: 768px) {
  .videos-wrapper .home-content .collections-wrap .collection .video-collection {
    margin-left: 0;
    margin-right: 0;
  }
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode {
  margin-bottom: 10px;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode.history {
  display: flex;
  width: 100%;
  margin-bottom: 30px;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode.history .episode-thumbnail {
  height: 200px;
  width: 150px;
  border-radius: 6px;
  margin-right: 20px;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-thumbnail {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #393a4f;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-thumbnail:hover .episode-overlay {
  background: rgba(57, 58, 79, 0.4);
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-thumbnail:hover .play-button {
  opacity: 1;
  color: #6e5bdb;
  font-size: 48px;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-thumbnail .episode-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  background: rgba(57, 58, 79, 0);
  transition: all 0.3s;
  z-index: 1;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-thumbnail .episode-duration {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 3px 6px;
  background: black;
  border-radius: 4px;
  color: #fcfcfc;
  font-size: 0.7rem;
  z-index: 2;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-thumbnail .episode-duration.free {
  background: #0aaa41 !important;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-thumbnail .play-button {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  opacity: 0;
  transition: all 0.3s;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-thumbnail .play-button svg {
  height: 38px;
  width: 38px;
  stroke-width: 1px;
  stroke: #fcfcfc;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-thumbnail img {
  display: block;
  border-radius: 6px;
  width: 100%;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-meta {
  display: flex;
  margin-top: 8px;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-meta img {
  display: block;
  height: 32px;
  width: 32px;
  min-width: 32px;
  border-radius: 50%;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-meta .info {
  margin-left: 8px;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-meta .info span {
  display: block;
  line-height: 1.2;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-meta .info span:first-child {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: #393a4f;
}
.videos-wrapper .home-content .collections-wrap .collection .video-collection .episode .episode-meta .info span:last-child {
  font-family: "Roboto", sans-serif;
  font-size: 0.8rem;
  color: #999;
}

/* ==========================================================================
2. Player Layout
========================================================================== */
.videos-wrapper.has-player .player-wrapper {
  position: relative;
  top: -2px;
  display: flex;
}
.videos-wrapper.has-player .player-wrapper .video-side {
  flex-grow: 2;
}
.videos-wrapper.has-player .meta-box {
  padding: 30px;
  background: #fff;
}
.videos-wrapper.has-player .meta-box .video-title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #393a4f;
}
.videos-wrapper.has-player .meta-box .video-subtitle {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}
.videos-wrapper.has-player .meta-box .video-subtitle .views-count {
  color: #999;
}
.videos-wrapper.has-player .meta-box .video-subtitle .quick-actions {
  display: flex;
  align-items: center;
}
.videos-wrapper.has-player .meta-box .video-subtitle .quick-actions .quick-action {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  margin: 0 3px;
  border-radius: 50%;
  transition: all 0.3s;
}
.videos-wrapper.has-player .meta-box .video-subtitle .quick-actions .quick-action:hover {
  background: #f2f2f2;
}
.videos-wrapper.has-player .meta-box .video-subtitle .quick-actions .quick-action:hover svg {
  stroke: #393a4f;
}
.videos-wrapper.has-player .meta-box .video-subtitle .quick-actions .quick-action.is-mobile {
  display: none;
}
.videos-wrapper.has-player .meta-box .video-subtitle .quick-actions .quick-action svg {
  height: 20px;
  width: 20px;
  stroke: #cecece;
  transition: stroke 0.3s;
}
.videos-wrapper.has-player .meta-box .video-owner {
  display: flex;
  align-items: center;
}
.videos-wrapper.has-player .meta-box .video-owner img {
  display: block;
  height: 44px;
  width: 44px;
  min-width: 44px;
  border-radius: 50%;
}
.videos-wrapper.has-player .meta-box .video-owner .meta {
  margin-left: 12px;
}
.videos-wrapper.has-player .meta-box .video-owner .meta span {
  display: block;
}
.videos-wrapper.has-player .meta-box .video-owner .meta span:first-child {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #393a4f;
}
.videos-wrapper.has-player .meta-box .video-owner .meta span:nth-child(2) {
  color: #999;
  font-size: 0.8rem;
}
.videos-wrapper.has-player .meta-box .video-owner .button {
  margin-left: auto;
  background: #6e5bdb;
  border-color: #6e5bdb;
  color: #fff;
  border-radius: 100px;
  min-width: 130px;
}
.videos-wrapper.has-player .meta-box .video-owner .button:hover {
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.videos-wrapper.has-player .video-description hr {
  margin: 1rem 0;
}
.videos-wrapper.has-player .video-description h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #393a4f;
  margin-bottom: 10px;
}
.videos-wrapper.has-player .video-description p,
.videos-wrapper.has-player .video-description ul li {
  font-family: "Roboto", sans-serif;
  color: #797a9e;
  font-size: 0.95rem;
  max-width: 640px;
}
.videos-wrapper.has-player .video-description .additional-description {
  display: none;
  padding-top: 30px;
}
.videos-wrapper.has-player .video-description .video-description-more {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #999;
  text-transform: uppercase;
  transition: color 0.3s;
}
.videos-wrapper.has-player .video-description .video-description-more:hover {
  color: #6e5bdb;
}
.videos-wrapper.has-player .comments-wrap {
  padding: 20px 40px;
}
.videos-wrapper.has-player .comments-count {
  padding: 20px 0;
}
.videos-wrapper.has-player .comment-box {
  max-width: 720px;
}
.videos-wrapper.has-player .comment-box .avatar-wrap,
.videos-wrapper.has-player .is-comment .avatar-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  min-width: 54px;
  border: 1.4px solid #cecece;
  border-radius: 50%;
}
.videos-wrapper.has-player .comment-box .avatar-wrap.is-smaller,
.videos-wrapper.has-player .is-comment .avatar-wrap.is-smaller {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-width: 1px;
}
.videos-wrapper.has-player .comment-box .avatar-wrap.is-smaller img,
.videos-wrapper.has-player .is-comment .avatar-wrap.is-smaller img {
  width: 32px;
  height: 32px;
  min-width: 32px;
}
.videos-wrapper.has-player .comment-box .avatar-wrap.is-smaller .badge,
.videos-wrapper.has-player .is-comment .avatar-wrap.is-smaller .badge {
  right: -3px;
  height: 18px;
  width: 18px;
}
.videos-wrapper.has-player .comment-box .avatar-wrap.is-smaller .badge svg,
.videos-wrapper.has-player .is-comment .avatar-wrap.is-smaller .badge svg {
  height: 8px;
  width: 8px;
  stroke-width: 4px;
}
.videos-wrapper.has-player .comment-box .avatar-wrap img,
.videos-wrapper.has-player .is-comment .avatar-wrap img {
  display: block;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
}
.videos-wrapper.has-player .comment-box .avatar-wrap .badge,
.videos-wrapper.has-player .is-comment .avatar-wrap .badge {
  position: absolute;
  top: -2px;
  right: -5px;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  border: 2px solid #fcfcfc;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1ce589;
}
.videos-wrapper.has-player .comment-box .avatar-wrap .badge svg,
.videos-wrapper.has-player .is-comment .avatar-wrap .badge svg {
  height: 10px;
  width: 10px;
  stroke: #fcfcfc;
  stroke-width: 4px;
}
.videos-wrapper.has-player .comment-box .control,
.videos-wrapper.has-player .is-comment .control {
  position: relative;
}
.videos-wrapper.has-player .comment-box .control .textarea,
.videos-wrapper.has-player .is-comment .control .textarea {
  padding-bottom: 58px;
  border-color: transparent;
  transition: all 0.3s;
}
.videos-wrapper.has-player .comment-box .control .textarea:focus,
.videos-wrapper.has-player .is-comment .control .textarea:focus {
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.videos-wrapper.has-player .comment-box .control .button,
.videos-wrapper.has-player .is-comment .control .button {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.videos-wrapper.has-player .comment-box .control .button:hover,
.videos-wrapper.has-player .is-comment .control .button:hover {
  background: #6e5bdb;
  border-color: #6e5bdb;
  color: #fcfcfc;
  border-radius: 100px;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.videos-wrapper.has-player .is-comment {
  padding: 16px 0;
  margin: 0 !important;
}
.videos-wrapper.has-player .is-comment .comment-meta h4 a {
  color: #393a4f;
  transition: color 0.3s;
}
.videos-wrapper.has-player .is-comment .comment-meta h4 a:hover {
  color: #6e5bdb;
}
.videos-wrapper.has-player .is-comment .comment-meta h4 small {
  color: #999;
  font-size: 0.85rem;
}
.videos-wrapper.has-player .is-comment .comment-meta p {
  max-width: 640px;
  font-size: 0.95rem;
  color: #6a6c93;
}
.videos-wrapper.has-player .is-comment .comment-meta p .mention {
  color: #6e5bdb;
  font-weight: 500;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 640px;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-stats {
  display: flex;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-stats .stat {
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-stats .stat.is-likes svg {
  position: relative;
  top: -2px;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-stats .stat.is-dislikes svg {
  position: relative;
  top: 2px;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-stats .stat span {
  display: block;
  font-size: 0.9rem;
  color: #999;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-stats .stat svg {
  height: 18px;
  width: 18px;
  min-width: 20px;
  stroke: #cecece;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-actions {
  display: flex;
  align-items: center;
  height: 40px;
  width: 96px;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-actions .comment-action {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  min-width: 30px;
  margin: 0 2px;
  border: 1px solid #e8e8e8;
  border-radius: 50%;
  transition: all 0.3s;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-actions .comment-action:nth-child(2) svg {
  position: relative;
  top: 2px;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-actions .comment-action.is-like:hover {
  border-color: #1ce589;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-actions .comment-action.is-like:hover svg {
  stroke: #1ce589;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-actions .comment-action.is-dislike:hover {
  border-color: #ff7273;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-actions .comment-action.is-dislike:hover svg {
  stroke: #ff7273;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-actions .comment-action.is-reply:hover {
  border-color: #393a4f;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-actions .comment-action.is-reply:hover svg {
  stroke: #393a4f;
}
.videos-wrapper.has-player .is-comment .comment-stats-wrap .comment-actions .comment-action svg {
  height: 14px;
  width: 14px;
  stroke: #cecece;
  transition: stroke 0.3s;
}
.videos-wrapper.has-player .is-comment .nested-replies .header {
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.videos-wrapper.has-player .is-comment .nested-replies .header.is-active svg {
  transform: rotate(180deg);
}
.videos-wrapper.has-player .is-comment .nested-replies .header span {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: #393a4f;
}
.videos-wrapper.has-player .is-comment .nested-replies .header svg {
  height: 16px;
  width: 16px;
  margin-left: 4px;
  stroke: #393a4f;
  transition: all 0.3s;
}
.videos-wrapper.has-player .is-comment .nested-replies .nested-comments {
  display: none;
  padding: 10px 0;
}
.videos-wrapper.has-player .is-comment .nested-replies .nested-comments .is-nested {
  margin: 0;
}
.videos-wrapper.has-player .related-list {
  margin: 0 !important;
  padding: 20px;
}
.videos-wrapper.has-player .related-list .related-label {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #e8e8e8;
}
.videos-wrapper.has-player .related-list .autoplay,
.videos-wrapper.has-player .related-list .related-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}
.videos-wrapper.has-player .related-list .autoplay .autoplay-title,
.videos-wrapper.has-player .related-list .autoplay .related-title,
.videos-wrapper.has-player .related-list .related-label .autoplay-title,
.videos-wrapper.has-player .related-list .related-label .related-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #393a4f;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.videos-wrapper.has-player .related-list .autoplay .autoplay-toggle,
.videos-wrapper.has-player .related-list .related-label .autoplay-toggle {
  display: flex;
  align-items: center;
}
.videos-wrapper.has-player .related-list .autoplay .autoplay-toggle span,
.videos-wrapper.has-player .related-list .related-label .autoplay-toggle span {
  position: relative;
  top: -1px;
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #999;
}
.videos-wrapper.has-player .related-list .autoplay .autoplay-toggle .f-switch,
.videos-wrapper.has-player .related-list .related-label .autoplay-toggle .f-switch {
  transform: scale(0.8);
}
.videos-wrapper.has-player .related-list .autoplay .autoplay-toggle .close-related-videos,
.videos-wrapper.has-player .related-list .related-label .autoplay-toggle .close-related-videos {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.videos-wrapper.has-player .related-list .autoplay .autoplay-toggle .close-related-videos:hover,
.videos-wrapper.has-player .related-list .related-label .autoplay-toggle .close-related-videos:hover {
  background: #fff;
}
.videos-wrapper.has-player .related-list .autoplay .autoplay-toggle .close-related-videos:hover svg,
.videos-wrapper.has-player .related-list .related-label .autoplay-toggle .close-related-videos:hover svg {
  stroke: #393a4f;
}
.videos-wrapper.has-player .related-list .autoplay .autoplay-toggle .close-related-videos svg,
.videos-wrapper.has-player .related-list .related-label .autoplay-toggle .close-related-videos svg {
  height: 16px;
  width: 16px;
  color: #999;
  transition: stroke 0.3s;
}
.videos-wrapper.has-player .related-list .related-card + .media {
  border-top: none;
  margin-top: 0;
}
.videos-wrapper.has-player .related-list .related-card .media-left {
  margin-right: 0.75rem;
}
.videos-wrapper.has-player .related-list .related-card .media-left img {
  display: block;
  border-radius: 6px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 130px;
  min-width: 130px;
  height: auto;
  max-height: 88px;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.videos-wrapper.has-player .related-list .related-card .video-meta .related-title {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  max-width: 200px;
  color: #393a4f;
  transition: color 0.3s;
}
.videos-wrapper.has-player .related-list .related-card .video-meta .related-title:hover {
  color: #6e5bdb;
}
.videos-wrapper.has-player .related-list .related-card .video-meta .submeta {
  display: flex;
  align-items: center;
}
.videos-wrapper.has-player .related-list .related-card .video-meta .submeta img {
  display: block;
  height: 26px;
  width: 26px;
  min-width: 26px;
  border-radius: 50%;
}
.videos-wrapper.has-player .related-list .related-card .video-meta .submeta .info {
  margin-left: 6px;
}
.videos-wrapper.has-player .related-list .related-card .video-meta .submeta .info span {
  display: block;
}
.videos-wrapper.has-player .related-list .related-card .video-meta .submeta .info .video-views,
.videos-wrapper.has-player .related-list .related-card .video-meta .submeta .info .video-account {
  display: block;
  color: #999;
}
.videos-wrapper.has-player .related-list .related-card .video-meta .submeta .info .video-account {
  font-size: 0.7rem;
}
.videos-wrapper.has-player .related-list .related-card .video-meta .submeta .info .video-views {
  font-size: 0.6rem;
}

/* ==========================================================================
3. Media Queries
========================================================================== */
@media (min-width: 1301px) {
  .videos-sidebar {
    width: 280px;
  }
  .videos-wrapper.is-home .home-wrapper {
    width: calc(100% - 280px);
    margin-left: 280px;
  }
  .videos-wrapper.has-player .player-wrapper {
    width: calc(100% - 280px);
    margin-left: 280px;
  }
}
@media (max-width: 1300px) {
  .videos-sidebar {
    width: 250px;
  }
  .videos-wrapper.is-home .home-wrapper {
    width: calc(100% - 250px);
    margin-left: 250px;
  }
  .videos-wrapper.has-player .player-wrapper {
    width: calc(100% - 250px);
    margin-left: 250px;
  }
}
@media (max-width: 767px) {
  .videos-sidebar .videos-sidebar-inner .user-block .close-videos-sidebar {
    display: flex !important;
  }
  .videos-wrapper.is-home .home-wrapper {
    width: 100% !important;
    margin: 0 !important;
  }
  .videos-wrapper.is-home .home-wrapper .mobile-sidebar-trigger {
    display: flex;
  }
  .videos-wrapper.is-home .home-wrapper .mobile-sidebar-trigger.is-home-v2 {
    left: 20px;
  }
  .videos-wrapper.is-home .home-wrapper .video-header {
    max-height: 500px;
  }
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner {
    padding: 0;
  }
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner .video-caption .caption-block {
    width: 90%;
  }
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner .video-caption .caption-block h2 {
    font-size: 1.4rem;
  }
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner .video-caption .caption-block .video-meta span.rating {
    display: none;
  }
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner .video-caption .caption-block .description,
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner .video-caption .caption-block .caption-actions {
    display: none;
  }
  .videos-wrapper.is-home .home-content {
    padding: 0 10px 10px 10px;
  }
  .videos-wrapper.is-home .home-content .collections-header.is-home-v2 {
    padding-left: 30px;
  }
  .videos-wrapper.has-player .player-wrapper {
    width: 100% !important;
    margin: 0 !important;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .meta-box {
    margin: 0;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .meta-box.video-description p {
    font-size: 0.85rem;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .meta-box.video-meta .video-title {
    font-size: 1rem;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .meta-box .video-subtitle {
    flex-direction: column;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .meta-box .video-subtitle .quick-actions {
    margin-left: -10px;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .meta-box .video-subtitle .quick-actions .quick-action.is-mobile {
    display: flex;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .meta-box .video-owner .button {
    display: none;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .comments-wrap {
    padding: 20px;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .comments-wrap .is-comment .comment-meta h4 a {
    font-size: 0.85rem;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .comments-wrap .is-comment .comment-meta p {
    font-size: 0.85rem;
  }
  .videos-wrapper.has-player .player-wrapper .related-side {
    position: fixed;
    right: 0;
    max-height: calc(100% - 58px);
    overflow-y: auto;
    transform: translateX(100%);
    transition: all 0.3s;
  }
  .videos-wrapper.has-player .player-wrapper .related-side.is-opened {
    transform: translateX(0);
  }
  .videos-wrapper.has-player .player-wrapper .related-side .close-related-videos {
    display: flex !important;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .videos-sidebar .videos-sidebar-inner .user-block .close-videos-sidebar {
    display: flex !important;
  }
  .videos-wrapper.is-home .home-wrapper {
    width: 100% !important;
    margin: 0 !important;
  }
  .videos-wrapper.is-home .home-wrapper .mobile-sidebar-trigger {
    display: flex;
  }
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner .video-caption .caption-block {
    width: 65%;
  }
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner .video-caption .caption-block h2 {
    font-size: 1.3rem;
  }
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner .video-caption .caption-block .description {
    font-size: 0.75rem;
  }
  .videos-wrapper.is-home .home-content .collections-header.is-home-v2 {
    padding-left: 52px;
  }
  .videos-wrapper.is-home .home-content .collections-wrap .collection .video-collection .episode {
    width: calc(33% - 20px);
  }
  .videos-wrapper.is-home .home-content .collections-wrap .collection .video-collection .episode:nth-last-child(4) {
    display: none;
  }
  .videos-wrapper.has-player .player-wrapper {
    width: 100%;
    margin: 0;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .meta-box .video-subtitle .quick-actions .quick-action.is-mobile {
    display: flex;
  }
  .videos-wrapper.has-player .player-wrapper .related-side {
    position: fixed;
    right: 0;
    max-height: calc(100% - 58px);
    overflow-y: auto;
    transform: translateX(100%);
    transition: all 0.3s;
  }
  .videos-wrapper.has-player .player-wrapper .related-side.is-opened {
    transform: translateX(0);
  }
  .videos-wrapper.has-player .player-wrapper .related-side .close-related-videos {
    display: flex !important;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner .video-caption .caption-block {
    width: 60%;
  }
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner .video-caption .caption-block h2 {
    font-size: 1.8rem;
  }
  .videos-wrapper.is-home .home-wrapper .video-header .cover-caption .caption-inner .video-caption .caption-block .description {
    font-size: 0.75rem;
  }
  .videos-wrapper.is-home .home-content .collections-wrap .collection .video-collection .episode {
    width: calc(33% - 20px);
  }
  .videos-wrapper.is-home .home-content .collections-wrap .collection .video-collection .episode:nth-last-child(4) {
    display: none;
  }
  .videos-wrapper.has-player .player-wrapper .video-side .meta-box .video-subtitle .quick-actions .quick-action.is-mobile {
    display: flex;
  }
  .videos-wrapper.has-player .player-wrapper .related-side {
    position: fixed;
    right: 0;
    max-height: calc(100% - 58px);
    overflow-y: auto;
    transform: translateX(100%);
    transition: all 0.3s;
  }
  .videos-wrapper.has-player .player-wrapper .related-side .close-related-videos {
    display: flex !important;
  }
  .videos-wrapper.has-player .player-wrapper .related-side.is-opened {
    transform: translateX(0);
  }
}
/*! _special-mixins.scss | Friendkit | © Css Ninja. 2018-2019 */
/* ==========================================================================
Friendkit additional mixins
========================================================================== */
/*
    0. Multiline Ellipsis
*/
/* ==========================================================================
0. Multiline Ellipsis mixin
========================================================================== */
/* ==========================================================================
1. Landing Hero
========================================================================== */
.landing-hero-wrapper {
  position: relative;
  background-color: #fff;
  background-image: -webkit-linear-gradient(40deg, #fff 50%, #8070e0 50%);
}
.landing-hero-wrapper #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.landing-hero-wrapper .landing-caption h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 5rem;
  font-weight: bold;
  color: #fcfcfc;
  line-height: 1;
  text-shadow: 5px 5px #503ad4, 10px 10px #503ad4;
}
.landing-hero-wrapper .landing-caption h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
  color: #fcfcfc;
  padding: 0 10px;
  text-shadow: 2px 2px #503ad4, 5px 5px #503ad4;
}
.landing-hero-wrapper .landing-caption .button {
  margin: 20px 10px;
  height: 48px;
  text-transform: uppercase;
  font-size: 0.95rem;
  min-width: 190px;
  color: #6e5bdb;
}
.landing-hero-wrapper .landing-caption .button:hover {
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}

.header-logo {
  height: 44px;
  width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #6e5bdb;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
  background: #6e5bdb;
  margin: 10px auto;
}
.header-logo img {
  display: block;
  height: 32px;
  width: 32px;
}

/* ==========================================================================
2. Landing page content
========================================================================== */
.landing-wrapper.is-grey {
  background: #fafafa;
}
.landing-wrapper .made-with {
  max-width: 640px;
  margin: 0 auto 3rem auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.landing-wrapper .made-with .made-block {
  width: calc(25% - 10px);
  margin: 10px;
}
.landing-wrapper .made-with .made-block .block-icon {
  height: 90px;
  width: 90px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e8e8e8;
  border-radius: 50%;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.landing-wrapper .made-with .made-block .block-icon img {
  display: block;
  max-width: 60px;
}
.landing-wrapper .made-with .made-block .block-title {
  text-align: center;
  margin-top: 12px;
}
.landing-wrapper .made-with .made-block .block-title h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #393a4f;
}
.landing-wrapper .screen-wrapper {
  border-bottom: 1.4px solid #e8e8e8;
  overflow: hidden;
}
.landing-wrapper .screen-wrapper img {
  display: block;
  border-radius: 8px 8px 0 0;
  border: 1px solid #e8e8e8;
  border-bottom: none;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
  max-width: 940px;
  margin: 0 auto;
}
.landing-wrapper .landing-icon-box {
  text-align: center;
  margin-bottom: 20px;
}
.landing-wrapper .landing-icon-box svg {
  height: 30px;
  width: 30px;
  stroke-width: 1.4px;
  margin: 0 auto;
}
.landing-wrapper .landing-icon-box img {
  display: block;
  height: 54px;
  width: 54px;
  margin: 0 auto 4px auto;
}
.landing-wrapper .landing-icon-box h3 {
  font-family: "Montserrat", sans-serif;
  color: #393a4f;
  font-weight: 500;
  font-size: 0.95rem;
}
.landing-wrapper .landing-icon-box p {
  font-size: 0.9rem;
  color: #999;
}

/* ==========================================================================
3. Side Features
========================================================================== */
.side-feature h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  color: #393a4f;
  font-size: 1.8rem;
}
.side-feature p {
  color: #999;
  font-size: 1.1rem;
  max-width: 440px;
}
.side-feature img {
  display: block;
  max-width: 460px;
  margin: 0 auto;
}

/* ==========================================================================
4. Demos Section
========================================================================== */
.demos-wrapper {
  background: #fafafa;
}
.demos-wrapper .demos-title h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  color: #393a4f;
}
.demos-wrapper .demos-list {
  padding: 80px 0;
}
.demos-wrapper .demos-list .demo-item {
  position: relative;
  display: block;
  overflow: hidden;
}
.demos-wrapper .demos-list .demo-item:hover img {
  filter: grayscale(0);
  opacity: 1;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.demos-wrapper .demos-list .demo-item:hover .go-arrow {
  transform: translate(0, 0);
}
.demos-wrapper .demos-list .demo-item .go-arrow {
  position: absolute;
  bottom: -20px;
  right: -20px;
  height: 80px;
  width: 80px;
  background: #5c46d6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(80px, 80px);
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
  transition: all 0.3s;
  z-index: 2;
}
.demos-wrapper .demos-list .demo-item .go-arrow:hover {
  background: #6e5bdb;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.demos-wrapper .demos-list .demo-item .go-arrow svg {
  position: relative;
  top: -6px;
  left: -6px;
  height: 22px;
  width: 22px;
  stroke: #fff;
}
.demos-wrapper .demos-list .demo-item img {
  display: block;
  border: 1px solid #e8e8e8;
  filter: grayscale(0.8);
  opacity: 0.85;
  transition: all 0.3s;
}
.demos-wrapper .demos-list h3 {
  padding: 16px 0;
  color: #393a4f;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.8rem;
  font-family: "Montserrat", sans-serif;
  transition: color 0.3s;
}

/* ==========================================================================
5. CTA Section
========================================================================== */
.cta-wrapper .cta-title {
  text-align: center;
}
.cta-wrapper .cta-title h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  color: #393a4f;
}
.cta-wrapper .cta-title .custom-button {
  display: flex;
  align-items: center;
  margin: 10px auto;
  max-width: 200px;
  border: 2px solid #D3F4ED;
  border-radius: 100px;
  transition: all 0.3s;
}
.cta-wrapper .cta-title .custom-button:hover {
  background: #D3F4ED;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.cta-wrapper .cta-title .custom-button:hover span {
  color: #393a4f;
}
.cta-wrapper .cta-title .custom-button img {
  display: block;
  height: 50px;
  width: 50px;
}
.cta-wrapper .cta-title .custom-button span {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #8EDFCF;
  margin-left: 12px;
  transition: color 0.3s;
}
.cta-wrapper .people-img {
  display: block;
  max-width: 480px;
  margin: 0 auto;
}

/* ==========================================================================
6. Media Queries
========================================================================== */
@media (max-width: 767px) {
  .landing-hero-wrapper .landing-caption {
    text-align: center;
  }
  .landing-hero-wrapper .landing-caption h2 {
    margin-top: 40px;
    font-size: 2.6rem;
    color: #6e5bdb;
    text-shadow: 5px 5px white, 10px 10px white;
  }
  .landing-hero-wrapper .landing-caption h3 {
    color: #6e5bdb;
    text-shadow: 2px 2px white, 4px 4px white;
  }
  .landing-hero-wrapper .landing-caption .buttons .button {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .side-feature img {
    max-width: 340px;
  }
  .landing-wrapper .made-with {
    flex-wrap: wrap;
  }
  .landing-wrapper .made-with .made-block {
    width: calc(45% - 10px);
  }
  .landing-wrapper .screen-wrapper img {
    max-width: 100%;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .landing-hero-wrapper .landing-caption {
    text-align: center;
  }
  .landing-hero-wrapper .landing-caption img {
    max-width: 580px;
  }
  .landing-hero-wrapper .landing-caption h2 {
    color: #6e5bdb;
    text-shadow: 5px 5px white, 10px 10px white;
  }
  .landing-hero-wrapper .landing-caption h3 {
    color: #6e5bdb;
    text-shadow: 2px 2px white, 4px 4px white;
  }
  .landing-hero-wrapper .landing-caption .buttons .button {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .landing-wrapper.icons-section .columns {
    display: flex;
  }
  .landing-wrapper .screen-wrapper img {
    max-width: 100%;
  }
  .side-feature h3, .side-feature p {
    text-align: center;
    margin: 0 auto;
  }
  .side-feature img {
    max-width: 450px;
    margin: 0 auto;
    display: block;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .cta-wrapper .people-img {
    max-width: 600px;
  }
  #tour-start {
    display: none !important;
  }
}
/* ==========================================================================
0. Signup page layout
========================================================================== */
.fake-nav {
  height: 55px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.fake-nav img {
  display: block;
  max-width: 48px;
}

.signup-wrapper {
  min-height: 100vh;
  position: relative;
}
.signup-wrapper .process-bar-wrap {
  padding: 30px 0 0 0;
}
.signup-wrapper .process-bar {
  height: 18px;
  background: #fff;
  border-radius: 100px;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.signup-wrapper .process-bar .progress-wrap {
  position: relative;
  margin: 0 12px;
  width: calc(100% - 24px);
  height: 6px;
  border-radius: 100px;
}
.signup-wrapper .process-bar .progress-wrap .track, .signup-wrapper .process-bar .progress-wrap .bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 100px;
}
.signup-wrapper .process-bar .progress-wrap .track {
  background: #eaeaea;
  width: 100%;
}
.signup-wrapper .process-bar .progress-wrap .bar {
  background: #6e5bdb;
  width: 0;
  transition: width 0.4s;
}
.signup-wrapper .process-bar .progress-wrap .dot {
  position: absolute;
  top: calc(50% - 19px);
  height: 38px;
  width: 38px;
  background: #fff;
  border-radius: 50%;
  border: 1.4px solid #e8e8e8;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.signup-wrapper .process-bar .progress-wrap .dot.is-first {
  left: -19px;
}
.signup-wrapper .process-bar .progress-wrap .dot.is-second {
  left: calc(25% - 19px);
}
.signup-wrapper .process-bar .progress-wrap .dot.is-third {
  left: calc(50% - 19px);
}
.signup-wrapper .process-bar .progress-wrap .dot.is-fourth {
  left: calc(75% - 19px);
}
.signup-wrapper .process-bar .progress-wrap .dot.is-fifth {
  right: -19px;
}
.signup-wrapper .process-bar .progress-wrap .dot.is-active {
  border-color: #6e5bdb;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.signup-wrapper .process-bar .progress-wrap .dot.is-active svg {
  stroke: #6e5bdb;
}
.signup-wrapper .process-bar .progress-wrap .dot.is-current {
  border-color: #6e5bdb;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.signup-wrapper .process-bar .progress-wrap .dot.is-current svg {
  stroke: #6e5bdb;
}
.signup-wrapper .process-bar .progress-wrap .dot svg {
  height: 16px;
  width: 16px;
  stroke: #cecece;
  transition: stroke 0.3s;
}
.signup-wrapper .outer-panel {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 133px);
}
.signup-wrapper .outer-panel .outer-panel-inner {
  width: 100%;
}
.signup-wrapper .process-title {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}
.signup-wrapper .process-title h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400 !important;
  font-size: 1.2rem;
}
.signup-wrapper .process-title .step-title {
  animation: fadeInUp 0.5s;
  display: none;
}
.signup-wrapper .process-title .step-title.is-active {
  display: block;
}
.signup-wrapper .process-panel-wrap {
  display: none;
  animation: fadeInLeft 0.5s;
  max-width: 940px;
  margin: 0 auto;
  padding: 20px 0;
}
.signup-wrapper .process-panel-wrap.is-active {
  display: block;
}
.signup-wrapper .process-panel-wrap.is-narrow {
  max-width: 540px;
}
.signup-wrapper .process-panel-wrap .account-type {
  width: 100%;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
}
.signup-wrapper .process-panel-wrap .account-type img {
  display: block;
  margin: 0 auto 20px auto;
  max-height: 140px;
}
.signup-wrapper .process-panel-wrap .account-type h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400 !important;
  font-size: 0.9rem;
}
.signup-wrapper .process-panel-wrap .account-type p {
  color: #999;
  font-size: 0.9rem;
}
.signup-wrapper .process-panel-wrap .account-type .button {
  margin-top: 20px;
  border-width: 1.4px;
  color: #999;
}
.signup-wrapper .process-panel-wrap .account-type .button:hover, .signup-wrapper .process-panel-wrap .account-type .button.is-loading {
  border-color: #6e5bdb;
  background: #6e5bdb;
  color: #fff;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.signup-wrapper .process-panel-wrap .form-panel {
  width: 100%;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 30px;
}
.signup-wrapper .process-panel-wrap .form-panel .field {
  border: 1px solid #e8e8e8;
  padding: 4px 8px 8px 8px;
  border-radius: 6px;
  background: #fcfcfc;
  margin-bottom: 20px;
}
.signup-wrapper .process-panel-wrap .form-panel .field:last-child {
  margin-bottom: 0;
}
.signup-wrapper .process-panel-wrap .form-panel .field label {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 500;
  color: #757a91;
  padding-left: 8px;
}
.signup-wrapper .process-panel-wrap .form-panel .field .control input {
  border: none;
  height: 30px;
  background: #fcfcfc;
}
.signup-wrapper .process-panel-wrap .form-panel .success-image {
  display: block;
  max-width: 120px;
  margin: 0 auto;
}
.signup-wrapper .process-panel-wrap .form-panel .success-text {
  text-align: center;
  margin: 12px auto;
  max-width: 370px;
}
.signup-wrapper .process-panel-wrap .form-panel .success-text h3 {
  font-weight: 500;
  color: #393a4f;
}
.signup-wrapper .process-panel-wrap .form-panel .success-text p {
  font-size: 0.9rem;
  color: #999;
}
.signup-wrapper .process-panel-wrap .form-panel .success-text .button {
  margin: 20px auto 0 auto;
  max-width: 280px;
  border: 1.4px solid #6e5bdb;
  color: #6e5bdb;
}
.signup-wrapper .process-panel-wrap .form-panel .success-text .button:hover, .signup-wrapper .process-panel-wrap .form-panel .success-text .button.is-loading {
  border-color: #6e5bdb;
  background: #6e5bdb;
  color: #fff;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.signup-wrapper .process-panel-wrap .photo-upload .preview {
  position: relative;
  height: 120px;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1.4px solid #cecece;
  margin: 0 auto;
}
.signup-wrapper .process-panel-wrap .photo-upload .preview img {
  display: block;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.signup-wrapper .process-panel-wrap .photo-upload .preview .upload-button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #cecece;
  transition: all 0.3s;
}
.signup-wrapper .process-panel-wrap .photo-upload .preview .upload-button:hover {
  background: #6e5bdb;
}
.signup-wrapper .process-panel-wrap .photo-upload .preview .upload-button svg {
  height: 14px;
  width: 14px;
  stroke: #fff;
  stroke-width: 3px;
}
.signup-wrapper .process-panel-wrap .photo-upload .limitation {
  margin-top: 20px;
  text-align: center;
}
.signup-wrapper .process-panel-wrap .photo-upload .limitation small {
  color: #999;
}
.signup-wrapper .process-panel-wrap .buttons {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.signup-wrapper .process-panel-wrap .buttons .button {
  min-width: 90px;
}
.signup-wrapper .process-panel-wrap .buttons .button.is-next:hover {
  border-color: #6e5bdb;
  background: #6e5bdb;
  color: #fcfcfc;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}

/* ==========================================================================
1. Crop Modal
========================================================================== */
.crop-modal .modal-card {
  max-width: 100%;
}
.crop-modal .modal-card-body {
  position: relative;
  min-height: 330px;
  overflow: hidden;
}
.crop-modal .modal-card-body .cropper-wrapper {
  margin: 0 auto;
}
.crop-modal .modal-card-body .cropper-wrapper .button {
  min-width: 70px;
  height: 34px;
  border-radius: 100px;
  outline: none !important;
  background: #6e5bdb;
  border-color: #6e5bdb;
  color: #fff;
}

/* ==========================================================================
12. Media Queries
========================================================================== */
@media (max-width: 767px) {
  .signup-wrapper .outer-panel .outer-panel-inner {
    max-width: 330px;
    margin: 0 auto;
  }
  .signup-wrapper .outer-panel .outer-panel-inner .account-type {
    position: relative;
    text-align: left;
  }
  .signup-wrapper .outer-panel .outer-panel-inner .account-type img {
    display: none;
  }
  .signup-wrapper .outer-panel .outer-panel-inner .account-type .button {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
  }
  .signup-wrapper .process-bar-wrap {
    max-width: 320px;
    margin: 0 auto;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .signup-wrapper .outer-panel .outer-panel-inner {
    max-width: 740px;
    margin: 0 auto;
  }
  .signup-wrapper .outer-panel .outer-panel-inner .columns {
    display: flex;
  }
  .signup-wrapper .outer-panel .outer-panel-inner .columns .account-type {
    padding: 20px;
  }
  .signup-wrapper .outer-panel .outer-panel-inner .columns .account-type img {
    height: 110px;
  }
}
/* ==========================================================================
0. Login page layout
========================================================================== */
.login-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.login-wrapper .hero.is-login {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.login-wrapper .hero.is-login .login-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 10;
  background: rgba(2, 14, 24, 0.5);
}
.login-wrapper .hero.is-login .hero-body {
  position: absolute;
  z-index: 11;
  height: 100%;
  width: 100%;
  overflow-y: auto !important;
}
.login-wrapper .hero.is-login .left-caption {
  max-width: 400px;
  margin: 0 auto;
  z-index: 11;
}
.login-wrapper .hero.is-login .left-caption h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 3.2rem;
  color: #f3f4f5;
  line-height: 1.3;
}
.login-wrapper .hero.form-hero {
  position: relative;
  z-index: 100;
}
.login-wrapper .hero.form-hero .logo-wrap {
  z-index: 100;
  position: absolute;
  top: calc(50% - 50px);
  left: -50px;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-wrapper .hero.form-hero .logo-wrap .wrap-inner {
  height: 86px;
  width: 86px;
  border-radius: 50%;
  background: #6e5bdb;
  background-size: 400% 400%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-wrapper .hero.form-hero .logo-wrap .wrap-inner img {
  display: block;
  max-width: 54px;
}
.login-wrapper .form-wrapper {
  max-width: 540px;
  min-width: 380px;
  margin: 0 auto;
}
.login-wrapper .form-wrapper .avatar {
  position: relative;
  height: 110px;
  width: 110px;
  border-radius: 50%;
  margin: 0 auto 40px auto;
  border: 1.4px solid #cecece;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f2f3fa;
}
.login-wrapper .form-wrapper .avatar .badge {
  position: absolute;
  top: 0;
  right: 0;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1ce589;
}
.login-wrapper .form-wrapper .avatar .badge svg {
  height: 14px;
  width: 14px;
  stroke: #fff;
  stroke-width: 4px;
}
.login-wrapper .form-wrapper .avatar img {
  display: block;
  width: auto;
  height: 70px;
  margin: 20px;
}
.login-wrapper .form-wrapper .login-form .field .control {
  position: relative;
}
.login-wrapper .form-wrapper .login-form .field .control .input {
  height: 40px;
  padding-left: 40px;
  margin-bottom: 6px;
}
.login-wrapper .form-wrapper .login-form .field .control .input:focus {
  border-color: #6e5bdb;
}
.login-wrapper .form-wrapper .login-form .field .control .input:focus + .input-icon svg {
  stroke: #6e5bdb;
}
.login-wrapper .form-wrapper .login-form .field .control .input-icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-wrapper .form-wrapper .login-form .field .control .input-icon svg {
  height: 18px;
  width: 18px;
  stroke: #cecece;
  transition: stroke 0.3s;
}
.login-wrapper .form-wrapper .login-form .field .control button, .login-wrapper .form-wrapper .login-form .field .control .button {
  height: 46px;
  font-size: 0.95rem;
  margin-top: 20px;
}
.login-wrapper .form-wrapper .msg {
  font-size: 14px;
  display: flex;
  width: 100%;
  max-width: 400px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  justify-content: center;
}
.login-wrapper .form-wrapper .msg.error {
  color: #6e5bdb;
}
.login-wrapper .form-wrapper .msg.success {
  color: #00c4a7;
}
.login-wrapper .form-wrapper .forgot-password {
  padding: 1.2rem 0 !important;
  display: flex;
}
.login-wrapper .form-wrapper .forgot-password a {
  color: #999;
  font-size: 0.9rem;
}
.login-wrapper .form-wrapper .forgot-password a:hover {
  color: #6e5bdb;
}
.login-wrapper .form-wrapper .forgot-password a:nth-child(2) {
  margin-left: auto;
}

/* ==========================================================================
2. Media Queries
========================================================================== */
@media (max-width: 767px) {
  .login-wrapper .logo-wrap {
    display: none !important;
  }
  .login-wrapper .form-wrapper {
    min-width: 320px !important;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .login-wrapper .hero.is-login .left-caption h2 {
    font-size: 2.5rem;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .login-wrapper .logo-wrap {
    display: none !important;
  }
}
.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow-y: auto;
  padding: 50px 0;
}
.register-container .uploader {
  margin: 20px auto 0;
}
.register-container .uploader .el-upload__text {
  font-size: 12px;
}
.register-container .el-alert {
  max-width: 400px;
  margin-left: 10px;
  margin-right: 10px;
}
.register-container .el-form-item {
  margin-bottom: 10px;
}
.register-container .el-form-item__label {
  font-size: 13px;
  color: #638dbb;
  margin-bottom: 4px !important;
  padding-bottom: 0;
}
.register-container .register-form-container {
  padding: 0 10px;
}
.register-container .register-form-container .register-user-form .register-info {
  max-width: 1200px;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border-top: 1px solid rgba(110, 91, 219, 0.5);
}
.register-container .register-form-container .register-user-form .register-info p {
  font-size: 13px;
  padding: 0 10px;
  margin-top: -20px;
  width: -moz-fit-content;
  width: fit-content;
  color: #6e5bdb;
  text-transform: uppercase;
  font-weight: bold;
  background-color: #ffffff;
  margin-bottom: 8px;
}
.register-container .register-form-container .register-user-form .register-info .form-el-description {
  display: block;
  color: #969696;
  margin-top: 0px;
  font-size: 11px;
}
.register-container .register-form-container .reg-form {
  width: 100%;
  max-width: 800px;
  border-radius: 5px;
  margin: 20px 20px 40px 20px;
  padding: 30px;
}
.register-container .register-form-container .reg-form .line {
  justify-content: center;
  text-align: center;
  color: #c5c5c5;
}
.register-container .register-form-container .reg-form .divider {
  width: 100%;
  display: flex;
  position: relative;
  margin-top: 30px;
}
.register-container .register-form-container .reg-form .divider h3 {
  font-size: 16px;
  background: #FFFFFF;
  display: inline-block;
  margin-right: 10px;
  color: #1952bb;
}
.register-container .register-form-container .reg-form .divider .d-line {
  flex: 1;
  display: block;
  height: 2px;
  background: #c5c5c5;
  margin-top: 10px;
}
.register-container .register-form-container .el-submit {
  padding: 0 10px;
}
.register-container .register-form-container .el-submit .el-button {
  width: 100%;
  background: #6e5bdb;
  border-color: #6e5bdb;
}

/* ==========================================================================
0. Elements Sidebar
========================================================================== */
.elements-sidebar {
  position: fixed;
  top: 58px;
  left: 0;
  width: 300px;
  height: calc(100% - 58px);
  background: #fff;
  border-right: 1px solid #e8e8e8;
}
.elements-sidebar .header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.elements-sidebar .header h3 {
  text-transform: uppercase;
}
.elements-sidebar .elements-list {
  position: relative;
  height: calc(100% - 60px);
  overflow-y: auto;
}
.elements-sidebar .elements-list .element-menu {
  border-top: 1px solid #e8e8e8;
}
.elements-sidebar .elements-list .element-menu .menu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.elements-sidebar .elements-list .element-menu .menu-trigger:hover, .elements-sidebar .elements-list .element-menu .menu-trigger.is-active {
  background: whitesmoke;
}
.elements-sidebar .elements-list .element-menu .menu-trigger:hover span, .elements-sidebar .elements-list .element-menu .menu-trigger.is-active span {
  color: #393a4f;
}
.elements-sidebar .elements-list .element-menu .menu-trigger:hover svg, .elements-sidebar .elements-list .element-menu .menu-trigger.is-active svg {
  stroke: #393a4f;
}
.elements-sidebar .elements-list .element-menu .menu-trigger.is-active svg {
  transform: rotate(90deg);
}
.elements-sidebar .elements-list .element-menu .menu-trigger span {
  display: block;
  color: #999;
  transition: color 0.3s;
}
.elements-sidebar .elements-list .element-menu .menu-trigger svg {
  height: 16px;
  width: 16px;
  stroke: #999;
  transition: all 0.3s;
}
.elements-sidebar .elements-list .element-menu .submenu-wrap {
  display: none;
  padding: 10px 20px;
}
.elements-sidebar .elements-list .element-menu .submenu-wrap ul {
  padding-left: 30px;
}
.elements-sidebar .elements-list .element-menu .submenu-wrap ul li a {
  display: flex;
  padding: 6px 0;
  color: #999;
  font-size: 0.9rem;
}
.elements-sidebar .elements-list .element-menu .submenu-wrap ul li a.is-active {
  color: #6e5bdb;
}

/* ==========================================================================
1. Elements Wrap
========================================================================== */
.elements-wrap {
  width: calc(100% - 300px);
  min-height: 100vh;
  margin-left: 300px;
  padding: 56px 30px 30px 30px;
}
.elements-wrap .element-block {
  margin-top: 30px;
  width: 100%;
  padding: 30px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}
.elements-wrap .element-block h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  color: #393a4f;
}
.elements-wrap .element-block p {
  margin: 10px 0;
  font-size: 0.9rem;
  color: #999;
}
.elements-wrap .element-block .ui-elements {
  margin-top: 20px;
}
.elements-wrap .code-block {
  margin-top: 30px;
  width: 100%;
  background: #344258;
  border: 1px solid #344258;
  border-radius: 8px;
}

/* ==========================================================================
2. Media Queries
========================================================================== */
@media (max-width: 767px) {
  .elements-sidebar {
    display: none;
  }
  .elements-wrap {
    width: 100%;
    margin-left: 0;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .elements-sidebar {
    display: none;
  }
  .elements-wrap {
    width: 100%;
    margin-left: 0;
  }
}
.anime-filter {
  min-height: 70px;
  display: flex;
  padding: 10px 30px 20px;
}
.anime-filter .filter-item {
  margin-right: 20px;
}
.anime-filter .filter-item.f-mob {
  display: none;
}
.anime-filter .filter-item .label {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 7px;
}
.anime-filter .left-filter {
  flex: 1;
  display: flex;
}
.anime-filter .right-filter {
  margin-left: auto;
  text-align: right;
}
.anime-filter .right-filter .filter-item {
  margin-right: 0;
}
@media (max-width: 768px) {
  .anime-filter {
    flex-direction: column-reverse;
    padding: 10px 0 20px 5px;
  }
  .anime-filter .filter-item {
    margin-right: 5px !important;
  }
  .anime-filter .filter-item.f-mob {
    display: block;
  }
  .anime-filter .filter-item.f-not-mob {
    display: none;
  }
  .anime-filter .right-filter {
    display: flex;
    text-align: left;
    margin-left: 0;
  }
  .anime-filter .right-filter .filter-item.hr {
    display: flex;
    justify-content: flex-start;
    float: left;
    width: 100%;
  }
  .anime-filter .right-filter .filter-item.hr .label {
    margin-right: 5px !important;
  }
  .anime-filter .right-filter .filter-item.hr .el-input {
    flex: 1;
  }
  .anime-filter .right-filter .el-select {
    margin-left: 0 !important;
  }
  .anime-filter.only-hr {
    flex-direction: row !important;
  }
}

.anime-list {
  padding: 20px 30px;
}
@media (max-width: 768px) {
  .anime-list {
    padding: 10px 5px;
  }
}
.anime-list .card {
  margin-bottom: 5px;
}
.anime-list .anime-box-wrapper:hover .anime-box {
  box-shadow: 0 6px 8px rgba(49, 54, 68, 0.05), 0 7px 22px rgba(49, 54, 68, 0.08);
}
.anime-list .anime-box-wrapper:hover .anime-title {
  color: #ffa502 !important;
}
.anime-list .anime-box {
  display: flex;
  flex-direction: row;
  height: 280px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 4px 6px rgba(49, 54, 68, 0.05), 0 5px 20px rgba(49, 54, 68, 0.08);
  border: 0;
}
@media (max-width: 768px) {
  .anime-list .anime-box {
    flex-direction: column;
    height: auto !important;
  }
  .anime-list .anime-box .thumb-wrapper {
    width: 100% !important;
  }
  .anime-list .anime-box .anime-info .card-heading {
    padding-left: 10px;
  }
  .anime-list .anime-box .anime-info p.description {
    height: 100%;
    margin-bottom: 15px !important;
  }
  .anime-list .anime-box .anime-info .card-footer {
    position: relative !important;
  }
}
.anime-list .anime-box .thumb-wrapper {
  position: relative;
  width: 200px;
  overflow: hidden;
}
.anime-list .anime-box .thumb-wrapper .going-status {
  position: absolute;
  top: 10px;
  left: 0;
  font-size: 10px;
  text-transform: uppercase;
  color: #ffffff;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 3px 5px;
}
.anime-list .anime-box .thumb-wrapper .going-status.going {
  background: rgba(10, 170, 65, 0.9);
  box-shadow: 0 2px 4px rgba(10, 170, 65, 0.16), 0 2px 4px rgba(10, 170, 65, 0.23);
}
.anime-list .anime-box .thumb-wrapper .going-status.completed {
  background: rgba(110, 91, 219, 0.9);
  box-shadow: 0 2px 4px rgba(110, 91, 219, 0.16), 0 2px 4px rgba(110, 91, 219, 0.23);
}
.anime-list .anime-box .thumb-wrapper img {
  width: 100%;
}
.anime-list .anime-box .thumb-wrapper .anime-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 10px;
  background: rgba(54, 54, 54, 0.8);
  min-height: 52px;
  color: rgba(243, 244, 245, 0.9);
  font-weight: 500;
  font-size: 14px;
}
.anime-list .anime-box .anime-info {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fafcfc;
}
.anime-list .anime-box .anime-info p.description {
  height: calc(100% - 100px);
  overflow-y: auto;
  padding: 10px 20px;
  margin-bottom: 30px;
}
.anime-list .anime-box .anime-info p.description * {
  font-family: Roboto, "sans-serif" !important;
  font-size: 12px !important;
  color: #696e84 !important;
}
.anime-list .anime-box .anime-info .card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: #eff7fb;
  display: flex;
  align-items: center;
}
.anime-list .anime-box .anime-info .card-footer .anime-categories {
  padding-left: 10px;
}
.anime-list .anime-box .anime-info .card-footer .anime-categories a {
  background: #6e5bdb;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  padding: 3px 8px;
  font-weight: 500;
  margin-right: 10px;
}

.anime-save-actions {
  margin-left: auto;
}
.anime-save-actions a i {
  font-size: 26px;
}

.el-popover {
  padding: 9px !important;
}

.anime-list-actions li.divider {
  height: 1px;
  background: #e5e5e5;
  width: 100%;
  margin: 4px 0;
}
.anime-list-actions li a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px 30px 5px 5px;
  border-radius: 4px;
  margin-bottom: 3px;
}
.anime-list-actions li a:hover {
  background: #f2f3fa;
}
.anime-list-actions li a i {
  margin-right: 5px;
  font-size: 15px;
}
.anime-list-actions li a i.el-icon-circle-check {
  color: #0aaa41;
}
.anime-list-actions li a i.el-icon-video-play {
  color: #f1c40f;
}
.anime-list-actions li a i.el-icon-collection-tag, .anime-list-actions li a i.el-icon-bell {
  color: #393a4f;
}
.anime-list-actions li a span {
  color: #393a4f;
  font-size: 13px;
  font-weight: 500;
}
.anime-list-actions li a.active {
  background: rgba(123, 237, 159, 0.5);
  position: relative;
}
.anime-list-actions li a.active:after {
  font-family: element-icons !important;
  content: "\e6da";
  speak: none;
  position: absolute !important;
  right: 4px;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #0aaa41;
}
.anime-list-actions li a.active:hover:after {
  content: "\e6db";
}

.anime-save-actions a {
  padding: 5px 3px;
}
.anime-save-actions i {
  font-size: 24px;
}

.add-action-toggle {
  padding-top: 4px;
}
.add-action-toggle.on-detail .action-toggle-btn {
  display: inline-flex;
  padding: 3px 10px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
.add-action-toggle.on-detail .action-toggle-btn.btn-default {
  border: solid 1px #393a4f;
}
.add-action-toggle.on-detail .action-toggle-btn.btn-default i,
.add-action-toggle.on-detail .action-toggle-btn.btn-default span {
  color: #393a4f !important;
}
.add-action-toggle.on-detail .action-toggle-btn.btn-green {
  background: #0aaa41;
}
.add-action-toggle.on-detail .action-toggle-btn.btn-yellow {
  background: #f1c40f;
}
.add-action-toggle.on-detail .action-toggle-btn.btn-red {
  background: #ff4757;
}
.add-action-toggle.on-detail .action-toggle-btn i,
.add-action-toggle.on-detail .action-toggle-btn span {
  color: #ffffff !important;
}
.add-action-toggle.on-detail .action-toggle-btn i {
  font-size: 16px !important;
}
.add-action-toggle i {
  font-size: 24px;
  margin-left: 4px;
  color: #393a4f;
}
.add-action-toggle i.text-green {
  color: #0aaa41 !important;
}
.add-action-toggle i.text-red {
  color: #ff4757 !important;
}
.add-action-toggle i.text-yellow {
  color: #f1c40f !important;
}

.anime-cover-wrapper {
  z-index: 1;
  width: 100%;
}
.anime-cover-wrapper .anime-cover {
  height: 300px;
  background: #2b2d42;
  overflow: hidden;
  width: 100%;
}
@media (max-width: 768px) {
  .anime-cover-wrapper .anime-cover {
    height: auto !important;
  }
}
.anime-cover-wrapper .anime-cover .layer {
  height: 300px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}
@media (max-width: 768px) {
  .anime-cover-wrapper .anime-cover .layer {
    height: auto !important;
  }
}
.anime-cover-wrapper .anime-cover img {
  width: 100%;
}

.anime-detail {
  z-index: 10;
  position: relative;
}
.anime-detail-header {
  padding: 20px 40px 0 40px;
  background: #fafafa;
  display: flex;
}
.anime-detail-header * {
  font-size: 13px;
}
@media (max-width: 768px) {
  .anime-detail-header .anime-thumb {
    display: none;
  }
  .anime-detail-header .description {
    width: 100%;
    overflow: hidden;
  }
}
.anime-detail-header .anime-thumb {
  width: 240px;
  height: auto;
  margin-right: 30px;
}
.anime-detail-header .anime-thumb img {
  z-index: 10000;
  margin-top: -150px;
  background-color: rgba(212, 230, 245, 0.5);
  border-radius: 4px;
  box-shadow: 0 0 29px rgba(49, 54, 68, 0.25);
  margin-bottom: 20px;
}
.anime-detail-header .anime-thumb .anime-state-control {
  margin-bottom: 10px;
  display: flex;
}
.anime-detail-header .description {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 800px;
  font-family: Roboto, "sans-serif";
}
.anime-detail-header .description h3 {
  font-size: 24px;
}
.anime-detail-header .description p {
  flex: 1;
  display: block;
}
.anime-detail-header .description .tabs {
  width: auto;
  margin-top: auto;
  margin-bottom: 0;
}
.anime-detail-header .description .tabs li {
  padding: 0 20px;
}
.anime-detail-header .description .tabs li:first-child {
  padding-left: 0;
}
.anime-detail-header .description .tabs li.is-active a {
  border-color: #6e5bdb !important;
  color: #6e5bdb;
}
.anime-detail-header .description .tabs li a {
  padding-bottom: 15px;
}
.anime-detail-body {
  padding: 40px;
  display: flex;
}
@media (max-width: 768px) {
  .anime-detail-body .short-desc {
    display: none;
  }
  .anime-detail-body .anime-info {
    padding: 0 !important;
  }
}
.anime-detail-body .short-desc {
  width: 240px;
}
.anime-detail-body .short-desc .basic-info {
  background: #fff;
  border-radius: 4px;
  padding: 20px 15px;
  margin-bottom: 15px;
}
.anime-detail-body .short-desc .basic-info .tag {
  color: #ffffff;
  padding: 3px 5px;
  border-radius: 10px;
  margin-bottom: 5px;
  margin-right: 5px;
  font-size: 11px;
  text-decoration: none;
}
.anime-detail-body .short-desc ul li {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.anime-detail-body .short-desc ul li span:first-child {
  flex: 1;
  color: #393a4f;
  font-weight: 600;
}
.anime-detail-body .short-desc ul li span:last-child a {
  color: #6e5bdb;
  display: block;
  border-radius: 10px;
}
.anime-detail-body .short-desc ul li span:last-child a:hover {
  background: #f2f3fa;
}
.anime-detail-body .short-desc ul li span:last-child a.director {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.anime-detail-body .short-desc ul li span:last-child a.director img {
  height: 50px;
  width: auto;
  border-radius: 10px;
  margin-right: 10px;
}
.anime-detail-body .short-desc * {
  font-size: 13px;
}
.anime-detail-body .short-desc strong,
.anime-detail-body .short-desc b {
  font-weight: 500 !important;
  margin-bottom: 10px !important;
  width: 100px !important;
  display: inline-block;
}
.anime-detail-body .anime-info {
  padding: 0 40px;
  flex: 1;
  max-width: 900px;
}
.anime-detail-body .anime-info .anime-info-section {
  margin-bottom: 20px;
}
.anime-detail-body .anime-info .anime-info-section-title {
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  color: #393a4f;
}
.anime-detail-body .anime-info .anime-info-section-body {
  padding-top: 10px;
}
.anime-detail-body .anime-info .anime-info-section-body .trailer {
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  background: #222222;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anime-detail-body .anime-info .anime-info-section-body .trailer iframe {
  border-radius: 10px;
  height: 100% !important;
}
.anime-detail-body .anime-info .anime-info-section-body .ani-wrapper img {
  border-radius: 5px;
  max-height: 200px;
}
.anime-detail-body .anime-info .anime-info-section-body .ani-wrapper span {
  font-size: 14px;
  color: #393a4f;
  transition: all 0.3s;
}
.anime-detail-body .anime-info .anime-info-section-body .ani-wrapper:hover span {
  color: #6e5bdb;
}
.anime-detail-body .anime-info .anime-info-section-body .director {
  height: 80px;
  display: flex;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 10px;
  overflow: hidden;
}
.anime-detail-body .anime-info .anime-info-section-body .director .img-wrap {
  width: 80px;
  height: 100%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.anime-detail-body .anime-info .anime-info-section-body .director .img-wrap i {
  font-size: 32px;
}
.anime-detail-body .anime-info .anime-info-section-body .director img {
  margin-right: 10px;
  height: 100%;
}
.anime-detail-body .anime-info .anime-info-section-body .director span {
  font-size: 13px;
  padding-top: 5px;
  text-align: left;
  color: #666666 !important;
}
.anime-detail-body .anime-info .anime-info-section-body .director:hover span {
  color: #6e5bdb !important;
}
.anime-detail-body .anime-info .anime-info-section-body .actor-list .actor-wrapper {
  height: 80px;
  display: flex;
  background: #ffffff;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 15px;
}
.anime-detail-body .anime-info .anime-info-section-body .actor-list .actor-wrapper img {
  height: 100%;
  border-radius: 5px;
}
.anime-detail-body .anime-info .anime-info-section-body .actor-list .actor-wrapper .actor {
  flex: 1;
  display: flex;
}
.anime-detail-body .anime-info .anime-info-section-body .actor-list .actor-wrapper .actor img {
  margin-right: 10px;
}
.anime-detail-body .anime-info .anime-info-section-body .actor-list .actor-wrapper .actor span {
  font-size: 13px;
  padding-top: 5px;
  text-align: left;
}
.anime-detail-body .anime-info .anime-info-section-body .actor-list .actor-wrapper .v-actor {
  margin-left: auto;
  flex: 1;
  justify-content: flex-end;
  display: flex;
  background: #f8f9fa;
}
.anime-detail-body .anime-info .anime-info-section-body .actor-list .actor-wrapper .v-actor span {
  flex: 1;
  text-align: right;
  font-size: 13px;
  padding-top: 5px;
  margin-right: 10px;
}
.anime-detail-body .anime-info .home-content {
  padding: 0;
}
.anime-detail-body .anime-info .home-content .collections-wrap {
  padding: 0;
}
.anime-detail-body .anime-info .home-content .collections-wrap .box-heading {
  background: transparent !important;
  border: 0;
}
.anime-detail-body .anime-info .home-content .collections-wrap .episode .episode-thumbnail {
  overflow: hidden;
  border-radius: 8px;
}

.episode-list {
  height: calc(100% - 180px);
  padding-bottom: 70px;
  overflow: hidden;
  position: relative;
  overflow-y: auto;
}
@media (max-width: 768px) {
  .episode-list {
    overflow: visible;
  }
}
.episode-list .el-collapse {
  border: 0 !important;
}
.episode-list .el-collapse .el-collapse-item__header {
  background-color: #f1f2fa !important;
  border-bottom: 0 !important;
  border-radius: 5px;
  padding: 0 10px;
}
.episode-list .el-collapse .el-collapse-item {
  padding: 0 20px;
  margin-bottom: 10px;
}
.episode-list .el-collapse .el-collapse-item__wrap {
  background-color: #f1f2fa !important;
  border-bottom: 0 !important;
  border-radius: 5px;
  margin-top: -5px;
}
.episode-list .field {
  margin: 0 0 5px 20px;
}
.episode-list .field .control {
  display: flex;
  align-items: center;
}
.episode-list .field .control .input {
  background: #f2f3fa;
  height: 30px;
  flex: 1;
  margin-right: 10px;
}
.episode-list .field .control .sort-btn {
  height: 30px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  border: none;
  font-size: 13px;
  font-weight: 500;
  padding: 0 4px !important;
  margin-top: 10px !important;
  border-radius: 5px;
  color: #6e5bdb !important;
}
.episode-list .field .control .sort-btn i {
  margin-left: 5px;
}
.episode-list .field .control .sort-btn:hover {
  text-transform: none;
}
.episode-list .list-wrapper {
  display: block;
  height: 100%;
}
@media (max-width: 768px) {
  .episode-list .list-wrapper {
    overflow-y: visible;
  }
}
.episode-list a {
  display: flex;
  align-items: center;
  text-align: left;
  border: solid 1px #ababab;
  margin: 5px 20px 10px;
  padding: 6px 12px;
  border-radius: 5px;
  color: #666666 !important;
  font-size: 13px;
  text-decoration: none !important;
}
.episode-list a span:last-child {
  flex: 1;
  padding-left: 5px;
}
.episode-list a i {
  margin-right: 5px;
}
.episode-list a:hover {
  color: #6e5bdb !important;
  text-decoration: none;
}
.episode-list a.active {
  color: #6e5bdb !important;
  border: solid 1px #6e5bdb;
}

.episode-anime-detail {
  padding: 13px;
}
.episode-anime-detail .info-box {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.episode-anime-detail .info-box img {
  border-radius: 8px;
}
.episode-anime-detail .info-box p {
  text-align: justify;
}
.episode-anime-detail .info-box a {
  margin-left: auto;
  margin-top: 10px;
}
.episode-anime-detail .divider {
  height: 1px;
  background: #dedede;
  width: 100%;
}
.episode-anime-detail .related {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}
.episode-anime-detail .related .related-item {
  background: #f2f3fa;
  margin-bottom: 10px;
  border-radius: 5px;
  padding-bottom: 10px;
}
.episode-anime-detail .related > h3 {
  margin-right: auto;
  color: #6e5bdb;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.episode-anime-detail .related a {
  position: relative;
  display: flex;
  margin-bottom: 10px;
}
.episode-anime-detail .related a .anime-thumbnail {
  border-radius: 8px;
  height: 120px;
  width: 100%;
  background-size: cover;
}
.episode-anime-detail .related a:hover h3 {
  color: #6e5bdb;
}

.watch-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #f39c12;
}
.watch-warning i {
  font-size: 32px;
  margin-bottom: 20px;
}
.watch-warning span {
  font-size: 16px;
}

.episode-header {
  display: flex;
  margin-bottom: 15px;
}
.episode-header .sort-item {
  flex: 1;
}

.ep-atitle {
  width: 100%;
  font-weight: 600;
  display: block;
  text-align: left;
  padding: 5px 20px;
  font-size: 20px;
}

.comment-actions.custom-actions {
  display: flex;
}
.comment-actions.custom-actions .actions {
  text-align: left;
  margin-right: auto;
  padding-top: 0 !important;
}
.comment-actions.custom-actions .time {
  margin: 0 !important;
}
.comment-actions.custom-actions .time time {
  text-align: left !important;
}

.anime-author {
  background: #ffffff;
  border-bottom: solid 1px #dedede;
  border-radius: 4px;
  text-align: center;
  padding-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.anime-author h4 {
  flex: 1;
  color: #393a4f;
  font-weight: 600;
  margin-bottom: 10px;
}
.anime-author img {
  width: 90%;
  height: auto;
  border-radius: 5px;
}
.anime-author .author-anime-btn {
  border-radius: 4px;
  padding: 6px 10px;
  background-color: #393a4f;
  margin: 5px 10px;
  width: 90%;
  display: block;
  color: #ffffff;
}
.anime-author .author-anime-btn:hover {
  background: #6e5bdb;
}

/* ==========================================================================
0. Resets
========================================================================== */
@media screen and (min-width: 1297px) {
  .container.is-custom {
    max-width: 1240px;
    width: 1240px;
  }
}
@media screen and (min-width: 1088px) {
  .container.is-custom {
    max-width: 1140px;
    width: 1140px;
  }
}
/* ==========================================================================
1. Mobile (max-width: 767px)
========================================================================== */
@media (max-width: 767px) {
  .view-wrap.is-headless {
    padding-top: 10px !important;
  }
  .column.no-padding-left {
    padding-left: 0.75rem;
  }
  .column.no-padding-right {
    padding-right: 0.75rem;
  }
  .column.no-side-padding-mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mobile-navbar .nav-drop {
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  .explorer-menu .explorer-container {
    padding: 0 20px;
  }
  .explorer-menu .explorer-container .explorer-header .control {
    max-width: 200px;
  }
  .explorer-menu .explorer-container .explore-list {
    max-height: 528px;
  }
  .explorer-menu .explorer-container .explore-list .explore-item {
    padding: 4px 0;
    width: calc(33.3% - 16px);
  }
  .explorer-menu .explorer-container .explore-list .explore-item img {
    height: 50px;
    width: 50px;
  }
  .card.is-post .likers-text {
    display: none;
  }
  .card.is-post .post-link {
    flex-direction: column;
  }
  .card.is-post .post-link .link-image {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-height: 180px;
  }
  .card.is-post .post-link .link-image > img {
    width: 100% !important;
    height: 100% !important;
    max-height: 180px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .card.is-post .post-link .link-content {
    margin-left: 0 !important;
    padding: 16px 6px;
  }
  .chat-wrapper .chat-search {
    display: none !important;
  }
  .chat-wrapper .chat-body {
    width: calc(100% - 60px) !important;
  }
  .chat-wrapper .chat-body-inner {
    padding: 20px 10px 60px 10px !important;
  }
  .chat-wrapper .chat-action {
    padding: 0 10px !important;
  }
  .chat-wrapper .chat-panel {
    width: calc(100% - 60px) !important;
  }
  .modal-content {
    max-height: calc(100vh - 80px) !important;
  }
  .inbox-wrapper {
    overflow: hidden;
  }
  .inbox-wrapper .reply-wrapper {
    padding: 20px 10px !important;
  }
  .inbox-wrapper .reply-wrapper .reply-wrapper-inner {
    padding: 10px !important;
  }
  .control.is-grouped {
    margin-bottom: 8px;
  }
  .inbox-left-sidebar {
    width: 260px !important;
    transform: translateX(-260px);
  }
  .inbox-left-sidebar.is-opened-mobile {
    transform: translateX(0);
  }
  .inbox-center-container {
    width: 100% !important;
    left: 0 !important;
  }
  .inbox-center-container .action-buttons {
    padding: 10px 20px !important;
  }
  .inbox-message-container {
    width: 100% !important;
    transform: translateX(100%);
  }
  .inbox-message-container.is-opened-mobile {
    transform: translateX(0);
  }
  .inbox-message-container .message-body {
    padding: 1.25em 0.5em !important;
  }
  .inbox-message-container .message-body .message-preview .header {
    flex-direction: column !important;
    text-align: center !important;
  }
  .inbox-message-container .message-body .message-preview .header .meta-right {
    margin: 10px 0 !important;
    text-align: center !important;
  }
  .cover-bg .cover-image {
    min-height: 180px !important;
  }
  .profile-subheader {
    justify-content: center !important;
    margin-top: 50px !important;
  }
  .profile-about {
    flex-direction: column;
    margin-top: -30px;
  }
  .profile-about .left-menu {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
  .profile-about .left-menu .left-menu-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .profile-about .left-menu .left-menu-inner .menu-item {
    padding: 0 10px;
  }
  .profile-about .left-menu .left-menu-inner .menu-item .menu-icon {
    padding: 0 16px;
  }
  .profile-about .left-menu .left-menu-inner .menu-item span {
    display: none;
  }
  .profile-about .right-content {
    padding: 0;
  }
  .about-timeline .timeline-item .button {
    display: none;
  }
  .about-card .video-wrapper {
    width: calc(50% - 8px) !important;
  }
  .about-card .place-wrapper {
    width: calc(100% - 8px) !important;
  }
}
/* ==========================================================================
2. Tablet Landscape
========================================================================== */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .container {
    max-width: 100%;
  }
  .container .column {
    padding: 0.5rem;
  }
  .is-hidden-landscape {
    display: none !important;
  }
  .mobile-navbar .navbar-brand .navbar-item:nth-child(2) {
    margin-left: auto !important;
  }
  .explorer-menu .explorer-container .explorer-header {
    padding-left: 40px;
    padding-right: 40px;
  }
  .chat-wrapper .chat-body-inner {
    padding: 20px 20px 60px 20px !important;
  }
  .chat-wrapper .chat-action {
    padding: 0 20px !important;
  }
  .reply-wrapper {
    padding: 20px 0 !important;
  }
  .reply-wrapper .reply-wrapper-inner {
    padding: 10px !important;
  }
  .inbox-left-sidebar .compose {
    padding: 20px 10px !important;
  }
  .inbox-left-sidebar .left-menu a {
    margin: 0 10px !important;
    padding: 10px !important;
  }
  .action-buttons .button {
    margin-bottom: 4px !important;
  }
  .profile-about .left-menu {
    max-width: 220px;
    min-width: 220px;
  }
  .friend-cards-list .is-friend-card .friend-item .text-content a {
    font-size: 0.8rem !important;
  }
  .friend-cards-list .is-friend-card .friend-item .text-content span {
    font-size: 0.65rem !important;
  }
}
/* ==========================================================================
3. Tablet Portrait
========================================================================== */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .columns.has-portrait-padding {
    padding: 0 40px;
  }
  .column.no-padding-left {
    padding-left: 0.75rem;
  }
  .column.no-padding-right {
    padding-right: 0.75rem;
  }
  .mobile-navbar .navbar-brand .navbar-item:nth-child(2) {
    margin-left: auto !important;
  }
  .explorer-menu .explorer-container .explorer-header {
    padding-left: 40px;
    padding-right: 40px;
  }
  .chat-wrapper .chat-body {
    width: calc(100% - 60px) !important;
  }
  .chat-wrapper .chat-body-inner {
    padding: 20px 40px 60px 40px !important;
  }
  .inbox-wrapper {
    overflow: hidden;
  }
  .inbox-left-sidebar {
    width: 260px !important;
    transform: translateX(-260px);
  }
  .inbox-left-sidebar.is-opened-mobile {
    transform: translateX(0);
  }
  .inbox-center-container {
    width: 100% !important;
    left: 0 !important;
  }
  .inbox-center-container .action-buttons {
    padding: 10px 20px !important;
  }
  .inbox-message-container {
    width: 100% !important;
    transform: translateX(100%);
  }
  .inbox-message-container.is-opened-mobile {
    transform: translateX(0);
  }
  .cover-bg .cover-image {
    min-height: 180px !important;
  }
  .profile-subheader {
    justify-content: center !important;
    margin-top: 50px !important;
  }
  .profile-about {
    flex-direction: column;
    margin-top: -30px;
  }
  .profile-about .left-menu {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
  .profile-about .left-menu .left-menu-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .profile-about .left-menu .left-menu-inner .menu-item {
    padding: 0 10px;
  }
  .profile-about .left-menu .left-menu-inner .menu-item .menu-icon {
    padding: 0 16px;
  }
  .profile-about .right-content {
    padding: 0;
  }
}
.agile {
  position: relative;
}

.agile--rtl .agile__actions, .agile--rtl .agile__dots, .agile--rtl .agile__slides, .agile--rtl .agile__track {
  flex-direction: row-reverse;
}

.agile:active, .agile :active, .agile:focus, .agile :focus {
  outline: none;
}

.agile__list {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.agile__track {
  flex-direction: row;
  flex-wrap: nowrap;
}

.agile__actions, .agile__track {
  display: flex;
}

.agile__actions {
  justify-content: space-between;
}

.agile__slides {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.agile--disabled .agile__slides {
  display: block;
}

.agile__slide {
  display: block;
  flex-grow: 1;
  flex-shrink: 0;
}

.agile--fade .agile__slide {
  opacity: 0;
  position: relative;
  z-index: 0;
}

.agile--fade .agile__slide--active {
  opacity: 1;
  z-index: 2;
}

.agile--fade .agile__slide--expiring {
  opacity: 1;
  transition-duration: 0s;
  z-index: 1;
}

.agile__nav-button[disabled] {
  cursor: default;
}

.agile__dots {
  align-items: center;
  display: flex;
  list-style: none;
  padding: 0;
  white-space: nowrap;
}

.agile__dot button {
  cursor: pointer;
  display: block;
  font-size: 0;
  line-height: 0;
}

.agile__dots {
  bottom: 10px;
  flex-direction: column;
  right: 30px;
  position: absolute;
}

.agile__dot {
  margin: 5px 0;
}

.agile__dot button {
  background-color: transparent;
  border: 1px solid #fff;
  cursor: pointer;
  display: block;
  height: 10px;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  transition-duration: 0.3s;
  width: 10px;
}

.agile__dot--current button, .agile__dot:hover button {
  background-color: #fff;
}

.agile__dots {
  bottom: 10px;
  flex-direction: column;
  right: 30px;
  position: absolute;
}

.agile__dot {
  margin: 5px 0;
}

.agile__dot button {
  background-color: transparent;
  border: 1px solid #fff;
  cursor: pointer;
  display: block;
  height: 10px;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  transition-duration: 0.3s;
  width: 10px;
}

.agile__dot--current button, .agile__dot:hover button {
  background-color: #fff;
}

body.compensate-for-scrollbar {
  overflow: hidden;
}

.fancybox-active {
  height: auto;
}

.fancybox-is-hidden {
  left: -9999px;
  margin: 0;
  position: absolute !important;
  top: -9999px;
  visibility: hidden;
}

.fancybox-container {
  -webkit-backface-visibility: hidden;
  height: 100%;
  left: 0;
  outline: none;
  position: fixed;
  -webkit-tap-highlight-color: transparent;
  top: 0;
  touch-action: manipulation;
  transform: translateZ(0);
  width: 100%;
  z-index: 99992;
}

.fancybox-container * {
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .fancybox-inner {
    display: flex;
    flex-direction: column;
  }
}

.fancybox-bg,
.fancybox-inner,
.fancybox-outer,
.fancybox-stage {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.fancybox-outer {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

.fancybox-bg {
  background: #1e1e1e;
  opacity: 0;
  transition-duration: inherit;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71);
}

.fancybox-is-open .fancybox-bg {
  opacity: 0.9;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fancybox-caption,
.fancybox-infobar,
.fancybox-navigation .fancybox-button,
.fancybox-toolbar {
  direction: ltr;
  opacity: 0;
  position: absolute;
  transition: opacity 0.25s ease, visibility 0s ease 0.25s;
  visibility: hidden;
  z-index: 99997;
}

.fancybox-show-caption .fancybox-caption,
.fancybox-show-infobar .fancybox-infobar,
.fancybox-show-nav .fancybox-navigation .fancybox-button,
.fancybox-show-toolbar .fancybox-toolbar {
  opacity: 1;
  transition: opacity 0.25s ease 0s, visibility 0s ease 0s;
  visibility: visible;
}

.fancybox-infobar {
  color: #ccc;
  font-size: 13px;
  -webkit-font-smoothing: subpixel-antialiased;
  height: 44px;
  left: 0;
  line-height: 44px;
  min-width: 44px;
  mix-blend-mode: difference;
  padding: 0 10px;
  pointer-events: none;
  top: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.fancybox-toolbar {
  right: 0;
  top: 0;
}
@media (max-width: 768px) {
  .fancybox-toolbar {
    display: none;
  }
}

.fancybox-stage {
  direction: ltr;
  overflow: visible;
  transform: translateZ(0);
  z-index: 99994;
}
@media (max-width: 768px) {
  .fancybox-stage {
    width: 100%;
    max-height: 400px;
  }
}

.fancybox-is-open .fancybox-stage {
  overflow: hidden;
}

.fancybox-slide {
  -webkit-backface-visibility: hidden;
  display: none;
  height: 100%;
  left: 0;
  outline: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 44px;
  position: absolute;
  text-align: center;
  top: 0;
  transition-property: transform, opacity;
  white-space: normal;
  width: 100%;
  z-index: 99994;
}

.fancybox-slide:before {
  content: "";
  display: inline-block;
  font-size: 0;
  height: 100%;
  vertical-align: middle;
  width: 0;
}

.fancybox-is-sliding .fancybox-slide,
.fancybox-slide--current,
.fancybox-slide--next,
.fancybox-slide--previous {
  display: block;
}

.fancybox-slide--image {
  overflow: hidden;
  padding: 44px 0;
}

.fancybox-slide--image:before {
  display: none;
}

.fancybox-slide--html {
  padding: 6px;
}

.fancybox-content {
  background: #fff;
  display: inline-block;
  margin: 0;
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 44px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}

.fancybox-slide--image .fancybox-content {
  animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
  -webkit-backface-visibility: hidden;
  background: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  left: 0;
  max-width: none;
  overflow: visible;
  padding: 0;
  position: absolute;
  top: 0;
  transform-origin: top left;
  transition-property: transform, opacity;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 99995;
}

.fancybox-can-zoomOut .fancybox-content {
  cursor: zoom-out;
}

.fancybox-can-zoomIn .fancybox-content {
  cursor: zoom-in;
}

.fancybox-can-pan .fancybox-content,
.fancybox-can-swipe .fancybox-content {
  cursor: grab;
}

.fancybox-is-grabbing .fancybox-content {
  cursor: grabbing;
}

.fancybox-container [data-selectable=true] {
  cursor: text;
}

.fancybox-image,
.fancybox-spaceball {
  background: transparent;
  border: 0;
  height: 100%;
  left: 0;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
  position: absolute;
  top: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
}

.fancybox-spaceball {
  z-index: 1;
}

.fancybox-slide--iframe .fancybox-content,
.fancybox-slide--map .fancybox-content,
.fancybox-slide--video .fancybox-content {
  height: 100%;
  overflow: visible;
  padding: 0;
  width: 100%;
}

.fancybox-slide--video .fancybox-content {
  background: #000;
}

.fancybox-slide--map .fancybox-content {
  background: #e5e3df;
}

.fancybox-slide--iframe .fancybox-content {
  background: #fff;
}

.fancybox-iframe,
.fancybox-video {
  background: transparent;
  border: 0;
  display: block;
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.fancybox-iframe {
  left: 0;
  position: absolute;
  top: 0;
}

.fancybox-error {
  background: #fff;
  cursor: default;
  max-width: 400px;
  padding: 40px;
  width: 100%;
}

.fancybox-error p {
  color: #444;
  font-size: 16px;
  line-height: 20px;
  margin: 0;
  padding: 0;
}

.fancybox-button {
  background: rgba(30, 30, 30, 0.6);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;
  height: 44px;
  margin: 0;
  padding: 10px;
  position: relative;
  transition: color 0.2s;
  vertical-align: top;
  visibility: inherit;
  width: 44px;
}

.fancybox-button,
.fancybox-button:link,
.fancybox-button:visited {
  color: #ccc;
}

.fancybox-button:hover {
  color: #fff;
}

.fancybox-button:focus {
  outline: none;
}

.fancybox-button.fancybox-focus {
  outline: 1px dotted;
}

.fancybox-button[disabled],
.fancybox-button[disabled]:hover {
  color: #888;
  cursor: default;
  outline: none;
}

.fancybox-button div {
  height: 100%;
}

.fancybox-button svg {
  display: block;
  height: 100%;
  overflow: visible;
  position: relative;
  width: 100%;
}

.fancybox-button svg path {
  fill: currentColor;
  stroke-width: 0;
}

.fancybox-button--fsenter svg:nth-child(2),
.fancybox-button--fsexit svg:nth-child(1),
.fancybox-button--pause svg:nth-child(1),
.fancybox-button--play svg:nth-child(2) {
  display: none;
}

.fancybox-progress {
  background: #ff5268;
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: 0;
  transition-property: transform;
  transition-timing-function: linear;
  z-index: 99998;
}

.fancybox-close-small {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #ccc;
  cursor: pointer;
  opacity: 0.8;
  padding: 8px;
  position: absolute;
  right: -12px;
  top: -44px;
  z-index: 401;
}

.fancybox-close-small:hover {
  color: #fff;
  opacity: 1;
}

.fancybox-slide--html .fancybox-close-small {
  color: currentColor;
  padding: 10px;
  right: 0;
  top: 0;
}

.fancybox-slide--image.fancybox-is-scaling .fancybox-content {
  overflow: hidden;
}

.fancybox-is-scaling .fancybox-close-small,
.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
  display: none;
}

.fancybox-navigation .fancybox-button {
  background-clip: content-box;
  height: 100px;
  opacity: 0;
  position: absolute;
  top: calc(50% - 50px);
  width: 70px;
}

.fancybox-navigation .fancybox-button div {
  padding: 7px;
}

.fancybox-navigation .fancybox-button--arrow_left {
  left: 0;
  padding: 31px 26px 31px 6px;
}

.fancybox-navigation .fancybox-button--arrow_right {
  padding: 31px 6px 31px 26px;
  right: 0;
}

.fancybox-caption {
  bottom: 0;
  color: #eee;
  font-size: 14px;
  font-weight: 400;
  left: 0;
  line-height: 1.5;
  padding: 25px 44px;
  right: 0;
  text-align: center;
  z-index: 99996;
}

.fancybox-caption:before {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAD6CAQAAADKSeXYAAAAYklEQVQoz42RwQ3AMAgDjfcfup8WoRykfBAK5mQHKSz5rbXJPis1hjiV3CIqgG0hLZPkVkA4p4x5oR1bVeDrdCLrW2Q0D5bcwY3TGMHbdw3mPRuOtaspYP1w//G1OIcW148H0DMCqI/3mMMAAAAASUVORK5CYII=);
  background-repeat: repeat-x;
  background-size: contain;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -44px;
  z-index: -1;
}

.fancybox-caption a,
.fancybox-caption a:link,
.fancybox-caption a:visited {
  color: #ccc;
  text-decoration: none;
}

.fancybox-caption a:hover {
  color: #fff;
  text-decoration: underline;
}

.fancybox-loading {
  animation: a 1s linear infinite;
  background: transparent;
  border: 4px solid #888;
  border-bottom-color: #fff;
  border-radius: 50%;
  height: 50px;
  left: 50%;
  margin: -25px 0 0 -25px;
  opacity: 0.7;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 50px;
  z-index: 99999;
}
@keyframes a {
  to {
    transform: rotate(1turn);
  }
}
.fancybox-animated {
  transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
}

.fancybox-fx-slide.fancybox-slide--previous {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.fancybox-fx-slide.fancybox-slide--next {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.fancybox-fx-slide.fancybox-slide--current {
  opacity: 1;
  transform: translateZ(0);
}

.fancybox-fx-fade.fancybox-slide--next,
.fancybox-fx-fade.fancybox-slide--previous {
  opacity: 0;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.fancybox-fx-fade.fancybox-slide--current {
  opacity: 1;
}

.fancybox-fx-zoom-in-out.fancybox-slide--previous {
  opacity: 0;
  transform: scale3d(1.5, 1.5, 1.5);
}

.fancybox-fx-zoom-in-out.fancybox-slide--next {
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
}

.fancybox-fx-zoom-in-out.fancybox-slide--current {
  opacity: 1;
  transform: scaleX(1);
}

.fancybox-fx-rotate.fancybox-slide--previous {
  opacity: 0;
  transform: rotate(-1turn);
}

.fancybox-fx-rotate.fancybox-slide--next {
  opacity: 0;
  transform: rotate(1turn);
}

.fancybox-fx-rotate.fancybox-slide--current {
  opacity: 1;
  transform: rotate(0deg);
}

.fancybox-fx-circular.fancybox-slide--previous {
  opacity: 0;
  transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
}

.fancybox-fx-circular.fancybox-slide--next {
  opacity: 0;
  transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
}

.fancybox-fx-circular.fancybox-slide--current {
  opacity: 1;
  transform: scaleX(1) translateZ(0);
}

.fancybox-fx-tube.fancybox-slide--previous {
  transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
}

.fancybox-fx-tube.fancybox-slide--next {
  transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
}

.fancybox-fx-tube.fancybox-slide--current {
  transform: translateZ(0) scale(1);
}

@media (max-height: 576px) {
  .fancybox-caption {
    padding: 12px;
  }
  .fancybox-slide {
    padding-left: 6px;
    padding-right: 6px;
  }
  .fancybox-slide--image {
    padding: 6px 0;
  }
  .fancybox-slide--image .fancybox-close-small {
    background: #4e4e4e;
    color: #f2f4f6;
    height: 36px;
    opacity: 1;
    padding: 6px;
    right: 0;
    top: 0;
    width: 36px;
  }
}
.fancybox-share {
  background: #f4f4f4;
  border-radius: 3px;
  max-width: 90%;
  padding: 30px;
  text-align: center;
}

.fancybox-share h1 {
  color: #222;
  font-size: 35px;
  font-weight: 700;
  margin: 0 0 20px;
}

.fancybox-share p {
  margin: 0;
  padding: 0;
}

.fancybox-share__button {
  border: 0;
  border-radius: 3px;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  line-height: 40px;
  margin: 0 5px 10px;
  min-width: 130px;
  padding: 0 15px;
  text-decoration: none;
  transition: all 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.fancybox-share__button:link,
.fancybox-share__button:visited {
  color: #fff;
}

.fancybox-share__button:hover {
  text-decoration: none;
}

.fancybox-share__button--fb {
  background: #3b5998;
}

.fancybox-share__button--fb:hover {
  background: #344e86;
}

.fancybox-share__button--pt {
  background: #bd081d;
}

.fancybox-share__button--pt:hover {
  background: #aa0719;
}

.fancybox-share__button--tw {
  background: #1da1f2;
}

.fancybox-share__button--tw:hover {
  background: #0d95e8;
}

.fancybox-share__button svg {
  height: 25px;
  margin-right: 7px;
  position: relative;
  top: -1px;
  vertical-align: middle;
  width: 25px;
}

.fancybox-share__button svg path {
  fill: #fff;
}

.fancybox-share__input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d7d7d7;
  border-radius: 0;
  color: #5d5b5b;
  font-size: 14px;
  margin: 10px 0 0;
  outline: none;
  padding: 10px 15px;
  width: 100%;
}

.fancybox-thumbs {
  background: #ddd;
  bottom: 0;
  display: none;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  padding: 2px 2px 4px;
  position: absolute;
  right: 0;
  -webkit-tap-highlight-color: transparent;
  top: 0;
  width: 212px;
  z-index: 99995;
}

.fancybox-thumbs-x {
  overflow-x: auto;
  overflow-y: hidden;
}

.fancybox-show-thumbs .fancybox-thumbs {
  display: block;
}

.fancybox-show-thumbs .fancybox-inner {
  right: 212px;
}

.fancybox-thumbs__list {
  font-size: 0;
  height: 100%;
  list-style: none;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  position: absolute;
  position: relative;
  white-space: nowrap;
  width: 100%;
}

.fancybox-thumbs-x .fancybox-thumbs__list {
  overflow: hidden;
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
  width: 7px;
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 10px;
}

.fancybox-thumbs__list a {
  backface-visibility: hidden;
  background-color: rgba(0, 0, 0, 0.1);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  float: left;
  height: 75px;
  margin: 2px;
  max-height: calc(100% - 8px);
  max-width: calc(50% - 4px);
  outline: none;
  overflow: hidden;
  padding: 0;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  width: 100px;
}

.fancybox-thumbs__list a:before {
  border: 6px solid #ff5268;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 99991;
}

.fancybox-thumbs__list a:focus:before {
  opacity: 0.5;
}

.fancybox-thumbs__list a.fancybox-thumbs-active:before {
  opacity: 1;
}

@media (max-width: 576px) {
  .fancybox-thumbs {
    width: 110px;
  }
  .fancybox-show-thumbs .fancybox-inner {
    right: 110px;
  }
  .fancybox-thumbs__list a {
    max-width: calc(100% - 10px);
  }
}
@keyframes modal-video {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-video-inner {
  from {
    transform: translate(0, 100px);
  }
  to {
    transform: translate(0, 0);
  }
}
.modal-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000000;
  cursor: pointer;
  opacity: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.3s;
  animation-name: modal-video;
  transition: opacity 0.3s ease-out;
}

.modal-video-close {
  opacity: 0;
}

.modal-video-close .modal-video-movie-wrap {
  transform: translate(0, 100px);
}

.modal-video-body {
  max-width: 940px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: table;
}

.modal-video-inner {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.modal-video-movie-wrap {
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
  background-color: #333;
  animation-timing-function: ease-out;
  animation-duration: 0.3s;
  animation-name: modal-video-inner;
  transform: translate(0, 0);
  transition: transform 0.3s ease-out;
}

.modal-video-movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-video-close-btn {
  position: absolute;
  z-index: 2;
  top: -35px;
  right: -35px;
  display: inline-block;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border: none;
  background: transparent;
}

.modal-video-close-btn:before {
  transform: rotate(45deg);
}

.modal-video-close-btn:after {
  transform: rotate(-45deg);
}

.modal-video-close-btn:before,
.modal-video-close-btn:after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #fff;
  border-radius: 5px;
  margin-top: -6px;
}

@media (max-width: 768px) {
  .fancybox-custom-layout .fancybox-bg {
    background: #6e5bdb;
  }
  .fancybox-custom-layout .fancybox-slide {
    background: #181e28;
    padding: 0 40px;
  }
  .fancybox-custom-layout .fancybox-slide img {
    border-radius: 6px;
  }
  .fancybox-custom-layout .fancybox-custom-layout.fancybox-is-open .fancybox-bg {
    opacity: 1;
  }
  .fancybox-custom-layout .fancybox-caption {
    display: block;
    background: #fff;
    bottom: 0;
    color: #6c6f73;
    padding: 10px 0;
  }
  .fancybox-custom-layout .fancybox-caption:before {
    display: none;
  }
  .fancybox-custom-layout .fancybox-caption a {
    text-decoration: none;
  }
  .fancybox-custom-layout .fancybox-caption a:hover {
    color: #6e5bdb;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fbfbfc;
    height: 50px;
    width: 100%;
    border-radius: 0 0 6px 0;
    border-top: 1px solid #dee2e5;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 16px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner img {
    height: 32px;
    width: 32px;
    border-radius: 50%;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .control {
    width: 100%;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .control .textarea,
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .control .emojionearea-editor {
    resize: none;
    height: 36px;
    max-height: 36px;
    min-height: 36px;
    border-radius: 100px;
    overflow: hidden;
    line-height: 1.6;
    font-size: 0.8rem;
    padding-left: 16px;
    margin: 0 6px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-editor {
    padding-left: 0 !important;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-editor img {
    height: 18px;
    width: 18px;
    min-height: 18px;
    max-height: 18px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea {
    overflow: visible !important;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-picker {
    top: -230px;
    position: absolute;
    left: -50px;
    width: 310px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-picker .emojionearea-wrapper {
    width: 310px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-picker .emojionearea-wrapper img {
    height: 22px;
    width: 22px;
    min-height: 22px;
    max-height: 22px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea-scroll-area {
    width: 310px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea .emojionearea-button > div.emojionearea-button-open {
    background-position: 0 -22px;
  }
  .fancybox-custom-layout .fancybox-caption .comment-controls .controls-inner .emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn {
    width: 24px !important;
    height: 24px !important;
  }
  .fancybox-custom-layout .fancybox-caption .header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12px;
    width: 100%;
  }
  .fancybox-custom-layout .fancybox-caption .header img {
    height: 42px;
    width: 42px;
    border-radius: 50%;
  }
  .fancybox-custom-layout .fancybox-caption .header .user-meta {
    margin: 0 10px;
  }
  .fancybox-custom-layout .fancybox-caption .header .user-meta span {
    display: block;
  }
  .fancybox-custom-layout .fancybox-caption .header .user-meta span:first-child {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
  }
  .fancybox-custom-layout .fancybox-caption .header .user-meta span:first-child small {
    color: #999;
  }
  .fancybox-custom-layout .fancybox-caption .header .user-meta span:nth-child(2) {
    text-align: left;
    font-size: 0.8rem;
    color: #999;
  }
  .fancybox-custom-layout .fancybox-caption .header .button {
    line-height: 0;
    margin-left: auto;
    padding: 14px 18px;
  }
  .fancybox-custom-layout .fancybox-caption .header .dropdown .button {
    padding: 18px 6px;
    border: none;
    background: transparent;
  }
  .fancybox-custom-layout .fancybox-caption .header .dropdown .button svg {
    height: 18px;
    width: 18px;
  }
  .fancybox-custom-layout .fancybox-caption .header .dropdown .dropdown-menu {
    margin-top: 10px;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content {
    padding: 12px;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content .control {
    width: 100%;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content .control input {
    padding-left: 34px;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content .control input:focus + .icon svg {
    stroke: #6e5bdb;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content .control .icon {
    position: absolute;
    top: 0;
    left: 0;
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .fancybox-custom-layout .fancybox-caption .inner-content .control .icon svg {
    height: 18px;
    width: 18px;
    stroke: #cecece;
    transition: all 0.3s;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #e8e8e8;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count {
    display: flex;
    align-items: stretch;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .shares-count,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .comments-count,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .likes-count,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .views-count {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 3px;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .shares-count span,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .comments-count span,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .likes-count span,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .views-count span {
    display: block;
    font-size: 0.8rem;
    color: #888da8;
    margin: 0 5px;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .shares-count span.views,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .comments-count span.views,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .likes-count span.views,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .views-count span.views {
    margin: 0 2px;
  }
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .shares-count svg,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .comments-count svg,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .likes-count svg,
  .fancybox-custom-layout .fancybox-caption .live-stats .social-count .views-count svg {
    height: 14px;
    width: 14px;
    stroke: #888da8;
  }
  .fancybox-custom-layout .fancybox-caption .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 0 0;
  }
  .fancybox-custom-layout .fancybox-caption .actions .action {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .fancybox-custom-layout .fancybox-caption .actions .action span {
    display: block;
    font-size: 0.8rem;
    margin: 0 4px;
    transition: all 0.3s;
  }
  .fancybox-custom-layout .fancybox-caption .actions .action svg {
    height: 16px;
    width: 16px;
    stroke: #888da8;
    transition: all 0.3s;
  }
  .fancybox-custom-layout .fancybox-caption .actions .action:hover span {
    color: #6e5bdb;
  }
  .fancybox-custom-layout .fancybox-caption .actions .action:hover svg {
    stroke: #6e5bdb;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list {
    background: #f5f6f7;
    padding: 20px 14px;
    overflow-y: auto;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment {
    border: none !important;
    padding-top: 0 !important;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment.is-nested {
    margin-left: 40px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-left {
    margin-right: 10px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-left img {
    border-radius: 50%;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .username {
    font-size: 0.8rem;
    font-weight: 500;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content p {
    font-size: 0.75rem;
    color: #999;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions {
    display: flex;
    align-items: center;
    padding-top: 8px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions span,
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions a {
    display: block;
    font-size: 0.75rem;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions span {
    margin: 0 10px;
    color: #999;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions .likes-count {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: auto;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions .likes-count span {
    display: block;
    font-size: 0.75rem;
    color: #888da8;
    margin: 0 5px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions .likes-count span.views {
    margin: 0 2px;
  }
  .fancybox-custom-layout .fancybox-caption .comments-list .is-comment .media-content .comment-actions .likes-count svg {
    height: 12px;
    width: 12px;
    stroke: #888da8;
  }
  .fancybox-custom-layout .fancybox-stage {
    position: relative;
    width: 100%;
    height: 300px;
  }
  .fancybox-custom-layout .fancybox-toolbar {
    background: #6e5bdb;
    position: relative;
    width: 100%;
    height: 44px;
    display: flex;
    flex-direction: row-reverse;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-header {
    margin-left: auto;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-body a {
    margin: 5px 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-body a.active {
    background: #0614f8;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-body a i {
    color: #ffffff;
    font-size: 26px;
  }
  .fancybox-custom-layout .fancybox-toolbar .toolbar-bottom {
    display: none;
  }
  .fancybox-custom-layout .fancybox-caption {
    position: relative;
    height: calc(100% - 344px) !important;
    overflow-y: auto;
  }
  .fancybox-custom-layout .fancybox-button {
    background: transparent;
  }
  .fancybox-custom-layout .fancybox-button div {
    padding: 2px;
  }
  .fancybox-custom-layout .fancybox-button[disabled] {
    color: #fff;
  }
  .fancybox-custom-layout .fancybox-button:not([disabled]) {
    color: #fff;
  }
  .fancybox-custom-layout .fancybox-button--arrow_right {
    right: 308px;
  }
}
.watch-header {
  display: flex;
}
.watch-header .user-meta {
  flex: 1;
}

.ep-action {
  transition: all 0.1s;
  cursor: pointer;
  text-decoration: none !important;
  font-size: 13px !important;
  margin-left: 10px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  padding: 2px 2px;
}
.ep-action i {
  font-size: 16px;
  margin-right: 4px;
}
.ep-action span {
  margin-top: 2px;
}
.ep-action.active {
  padding: 2px 6px;
  background: #6e5bdb;
  border-radius: 4px;
}
.ep-action.active i,
.ep-action.active span {
  color: #ffffff;
}
.ep-action.active:hover i,
.ep-action.active:hover span {
  color: #ffffff !important;
}
.ep-action:hover * {
  color: #6e5bdb !important;
}

.group-collapse .el-collapse-item__header {
  line-height: 16px;
  text-align: left;
  font-size: 12px !important;
}
.group-collapse a {
  border-bottom: solid 1px red;
}

.el-collapse-item__content .list-wrapper li {
  border-bottom: dotted 1px #5a76a6;
}
.el-collapse-item__content .list-wrapper li:last-child {
  border-bottom: 0;
}
.el-collapse-item__content .list-wrapper li a {
  padding: 0 !important;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #6e5bdb;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
.detail-loader {
  min-height: 500px;
  height: 100% !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-component {
  border-bottom: solid 1px #dedede;
  height: 100%;
}
.comment-component .wrapper {
  position: relative !important;
  display: inline-block;
  width: 100%;
  padding: 10px 20px;
  border-radius: 5px;
}
.comment-component .wrapper .el-textarea__inner {
  border: solid 2px #dbdfe4;
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.comment-component .comment-control {
  display: flex;
  align-items: center;
  border: solid 2px #dbdfe4;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  height: 32px;
}
.comment-component .comment-control .comment-features {
  flex: 1;
  padding-left: 5px;
}
.comment-component .comment-control .comment-btn {
  margin-left: auto;
}
.comment-component .comment-control .comment-btn a {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-bottom-right-radius: 5px;
  margin-right: -2px;
  text-decoration: none;
  font-weight: bold;
  color: #778289;
  text-transform: uppercase;
  font-size: 12px;
}
.comment-component .comment-control .comment-btn a span {
  margin-right: 4px;
}
.comment-component .comment-control .comment-btn a i {
  font-size: 16px;
}
.comment-component .comment-control .comment-btn a:hover span, .comment-component .comment-control .comment-btn a:hover i {
  color: #6e5bdb;
}
.comment-component .emoji-invoker {
  left: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}
.comment-component .emoji-invoker:hover {
  transform: scale(1.1);
}
.comment-component .emoji-invoker > svg {
  fill: #b1c6d0;
}
.comment-component .emoji-picker {
  position: absolute;
  z-index: 1000;
  left: 1.5rem;
  font-family: Montserrat;
  border: 1px solid #ccc;
  width: 15rem;
  height: 20rem;
  overflow: scroll;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 1px 1px 8px #c7dbe6;
}
.comment-component .emoji-picker__search {
  display: flex;
}
.comment-component .emoji-picker__search > input {
  flex: 1;
  border-radius: 10rem;
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  outline: none;
}
.comment-component .emoji-picker h5 {
  margin-bottom: 0;
  color: #b1b1b1;
  text-transform: uppercase;
  font-size: 0.8rem;
  cursor: default;
}
.comment-component .emoji-picker .emojis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.comment-component .emoji-picker .emojis:after {
  content: "";
  flex: auto;
}
.comment-component .emoji-picker .emojis span {
  padding: 0.2rem;
  cursor: pointer;
  border-radius: 5px;
}
.comment-component .emoji-picker .emojis span:hover {
  background: #ececec;
  cursor: pointer;
}

.comment-action-emitter {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none !important;
  margin-right: 5px;
  margin-left: -10px;
}
.comment-action-emitter i {
  margin-right: 0;
  font-size: 16px;
}
.comment-action-emitter span {
  margin-left: 4px !important;
}
.comment-action-emitter img {
  height: 16px;
}
.comment-action-emitter:hover i, .comment-action-emitter:hover span {
  color: #6e5bdb !important;
}

.comment-reactions a {
  text-decoration: none;
}
.comment-reactions li a {
  display: flex;
  align-items: center;
  padding: 5px 5px;
  border-radius: 4px;
}
.comment-reactions li a:hover {
  background: #f2f3fa;
}
.comment-reactions li a:hover span {
  color: #6e5bdb;
}
.comment-reactions li a img {
  height: 16px;
  margin-right: 10px;
}
.comment-reactions li a span {
  font-size: 12px;
  color: #666666;
}

.more-comments {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-left: 45px;
  text-decoration: none !important;
  transition: all 0.25s;
  padding: 8px 0;
  border-radius: 4px;
}
.more-comments:hover {
  color: #4931d2;
  background: rgba(110, 91, 219, 0.05);
}
.more-comments span, .more-comments i {
  font-weight: 500;
  color: #6e5bdb !important;
}
.more-comments span {
  margin-right: 5px;
}

.comment-loader {
  margin-left: 50px;
}

.payment-modal {
  background: #0a3d62;
}

.payment-page {
  height: calc(100vh - 60px);
  overflow: hidden;
  position: relative;
  padding: 20px;
  display: flex;
}
@media (max-width: 768px) {
  .payment-page {
    flex-direction: column;
    padding: 10px;
  }
}
.payment-page .payment-methods {
  display: flex;
  flex-direction: column;
}
.payment-page .payment-methods h1 {
  margin-bottom: 20px;
  color: #6e5bdb;
  font-weight: 600;
}
@media (max-width: 768px) {
  .payment-page .payment-methods {
    flex-direction: row;
  }
  .payment-page .payment-methods h1 {
    display: none;
  }
}
.payment-page .payment-methods a {
  display: flex;
  padding: 4px 20px;
  color: #344258;
  font-size: 12px;
  text-transform: uppercase;
  border-radius: 5px;
  margin: 6px 0;
  font-weight: 600;
  transition: all 0.2s;
}
.payment-page .payment-methods a.is-active {
  background: #6e5bdb;
  color: #ffffff;
  padding: 8px 20px;
  margin: 0 0;
}
.payment-page .payment-body {
  background: #ffffff;
  flex: 1;
  margin-left: 20px;
  border-radius: 10px;
  padding: 20px;
  overflow-y: auto;
  height: calc(100vh - 100px);
}
@media (max-width: 768px) {
  .payment-page .payment-body {
    margin-left: 0;
    margin-top: 20px;
    padding: 10px;
    height: 100% !important;
    overflow-y: visible;
  }
}
.payment-page .payment-control {
  width: 260px;
  margin-right: 30px;
}
@media (max-width: 768px) {
  .payment-page {
    overflow: auto !important;
    height: auto !important;
    flex-direction: column;
  }
  .payment-page .payment-info {
    height: auto !important;
  }
  .payment-page .payment-control {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
}
.payment-page .code-form {
  background: #ffffff;
  margin-top: 20px;
  margin-left: 0;
}
.payment-page .payment-info {
  padding: 20px;
  flex: 1;
  border: 0 !important;
}
.payment-page .payment-info * {
  font-size: 13px !important;
  text-align: justify;
}
.payment-page .payment-info table {
  max-width: 100% !important;
  width: 100% !important;
  margin-bottom: 20px;
}
.payment-page .payment-info table td {
  padding: 5px;
}
.payment-page .payment-info table td * {
  font-size: 12px !important;
}
.payment-page .payment-info ol {
  margin-left: 30px;
}
.payment-page .payment-info h3 {
  color: #6e5bdb;
  font-size: 20px !important;
  font-weight: 600;
}
.payment-page .p-btn {
  background: #6e5bdb;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 0;
  border-radius: 10px;
  color: #ffffff;
  font-weight: 500;
}

.payment-qpay {
  max-width: 450px;
  margin: 0 auto;
}
.payment-qpay .stepper {
  margin: 20px 0 0;
}
.payment-qpay .stepper .el-step__description {
  margin-top: 10px;
}
.payment-qpay .stepper .is-success {
  color: #6e5bdb !important;
  border-color: #6e5bdb !important;
}
.payment-qpay .payment-options {
  background: #ffffff;
  border-radius: 10px;
  width: 100%;
  align-items: center;
  padding: 20px 20px;
}
.payment-qpay .payment-options .p-header {
  display: flex;
  align-items: center;
  max-width: 300px;
  margin: 0 auto;
}
.payment-qpay .payment-options .p-header h2 {
  text-align: left;
  width: 100%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 20px;
  color: #6e5bdb;
  flex: 1;
}
.payment-qpay .payment-options .p-header a {
  color: #606266;
}
.payment-qpay .payment-options .p-header a i {
  font-size: 18px;
}
.payment-qpay .payment-options .p-header a:hover {
  color: #6e5bdb;
}
.payment-qpay .payment-options strong {
  max-width: 300px;
  margin: 0 auto;
  text-align: left;
  display: block;
  width: 100%;
  color: #6e5bdb;
  text-transform: uppercase;
  font-weight: 500;
}
.payment-qpay .payment-options .choices {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.payment-qpay .payment-options .choices a {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #606266;
  border-radius: 10px;
  margin: 10px auto;
  padding: 15px 20px;
  position: relative;
  overflow: hidden;
}
.payment-qpay .payment-options .choices a h4 {
  color: #47494c;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  flex: 1;
}
.payment-qpay .payment-options .choices a .price {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  color: #606266;
}
.payment-qpay .payment-options .choices a:hover {
  border-color: #6e5bdb;
}
.payment-qpay .payment-options .choices a.active {
  border-color: #6e5bdb;
}
.payment-qpay .payment-options .choices a.active h4 {
  color: #6e5bdb;
}
.payment-qpay .payment-options .choices a.active .price {
  color: #6e5bdb;
}
.payment-qpay .payment-options .choices a .check {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 28px;
  width: 28px;
  border-bottom: solid 14px #6e5bdb;
  border-right: solid 14px #6e5bdb;
  box-sizing: border-box;
  border-left: solid 14px transparent;
  border-top: solid 14px transparent;
  color: #ffffff !important;
}
.payment-qpay .payment-options .choices a .check i {
  position: absolute;
  bottom: -12px;
  right: -14px;
  z-index: 10;
  color: #ffffff !important;
}
.payment-qpay .payment-options .btn-process {
  background: #6e5bdb;
  border: 0 !important;
  font-weight: 600;
  margin: 20px auto 0;
  color: #ffffff;
  padding: 13px 0;
  text-transform: uppercase;
  font-size: 14px;
  border-radius: 8px;
  width: 300px;
}
.payment-qpay .payment-options .btn-process:hover {
  background: #5c46d6;
}
.payment-qpay .payment-options .btn-process.disabled {
  cursor: not-allowed;
}
.payment-qpay .payment-options .btn-process.btn-cancel {
  background: transparent !important;
  border: solid 1px #6e5bdb !important;
  width: 100%;
  color: #6e5bdb;
  font-size: 12px;
  cursor: pointer;
}
.payment-qpay .payment-btn {
  margin-top: 20px;
  max-width: 300px;
}
.payment-qpay .qpay-render {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 350px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .payment-qpay .qpay-render {
    width: 100%;
    max-width: 100%;
    padding: 20px 0;
  }
}
.payment-qpay .qpay-render .qpay-img {
  height: 220px;
  width: 220px;
  margin: 40px auto 20px;
}
@media (max-width: 768px) {
  .payment-qpay .qpay-render .qpay-img {
    display: none;
  }
}
.payment-qpay .qpay-render .deeplink {
  display: none !important;
  padding-left: 10px;
}
@media (max-width: 768px) {
  .payment-qpay .qpay-render .deeplink {
    display: block !important;
    margin-bottom: 10px;
  }
}
.payment-qpay .qpay-render .deeplink h3 {
  font-size: 12px;
  text-align: center;
  margin-bottom: 10px;
}
.payment-qpay .qpay-render .deeplink ul {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.payment-qpay .qpay-render .deeplink ul li {
  flex: 1;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.payment-qpay .qpay-render .deeplink ul li a {
  color: #6e5bdb;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  width: 100%;
  border: none !important;
  padding-bottom: 5px;
}
.payment-qpay .qpay-render .deeplink ul li a img {
  border-radius: 6px;
  height: 50px;
  width: 50px;
  margin-bottom: 6px;
}
.payment-qpay .qpay-render .deeplink ul li a span {
  line-height: 14px;
  height: 24px;
  color: #344258;
}
.payment-qpay .qpay-render .counter {
  color: #6e5bdb;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}
.payment-qpay .qpay-render .el-alert {
  padding: 5px 8px !important;
}
.payment-qpay .qpay-render .warning-txt {
  font-size: 12px;
  margin-top: 10px;
  padding: 5px;
}
.payment-qpay .qpay-result .success {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: 20px auto;
  height: 160px;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.payment-qpay .qpay-result .success i {
  font-size: 40px;
  color: #2ecc71;
  margin-bottom: 10px;
  display: block;
}
.payment-qpay .qpay-result .success p {
  color: #2ecc71;
  font-weight: 600;
}
.payment-qpay .qpay-result .error {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: 20px auto;
  height: 200px;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.payment-qpay .qpay-result .error i {
  font-size: 40px;
  color: #e74c3c;
  margin-bottom: 10px;
  display: block;
}
.payment-qpay .qpay-result .error p {
  color: #e74c3c;
  font-weight: 600;
  font-size: 10px;
}

.payment-card {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}
.payment-card .el-form {
  max-width: 400px;
  width: calc(100% - 40px);
}

.payment-choose-option {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: calc(100vh - 110px);
  text-align: center;
}
.payment-choose-option i {
  font-size: 64px;
  opacity: 0.25;
}
.payment-choose-option p {
  font-size: 30px;
  font-weight: bold;
  opacity: 0.25;
}

.content-payment {
  z-index: 1000;
}

@media (max-width: 768px) {
  .fancybox-inner.pay-full .fancybox-caption {
    display: none;
  }
  .fancybox-inner.pay-full .fancybox-stage {
    height: 100vh !important;
    max-height: 100vh !important;
  }
  .fancybox-inner.pay-full .fancybox-stage .el-alert {
    display: none;
  }
}

.st-v2 {
  padding-bottom: 50px;
}
.st-v2 .el-icon-check {
  font-size: 13px !important;
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  .st-v2 {
    padding-bottom: 10px;
  }
}

.qr-v2 {
  background: transparent !important;
  padding-left: 20px;
  padding-right: 20px;
}
.qr-v2 .qpay-img {
  height: 220px;
  width: 220px;
  margin: 40px auto 20px;
}
@media (max-width: 768px) {
  .qr-v2 .qpay-img {
    display: none;
  }
}

.qpay-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.qpay-actions button {
  text-align: center;
  width: 100% !important;
}

.slider {
  position: relative;
  min-height: 500px;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}
@media (max-width: 768px) {
  .slider {
    min-height: 200px !important;
    width: 100%;
    border-radius: 0;
  }
}
.slider .el-carousel {
  height: 100% !important;
  flex: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.slider .el-carousel .el-carousel__container {
  height: 100%;
}
.slider .slide-item {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.slider .slide-item .cover {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: block;
  background-size: cover;
  background-position: center center;
  z-index: 0;
}
.slider .slide-item .cover-caption {
  background: rgba(255, 255, 255, 0.5);
  margin-left: 50px;
  z-index: 2;
  padding: 20px;
  border-radius: 5px;
}
.slider .slide-item .cover-caption h2 {
  font-family: "Roboto", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #6e5bdb;
}
.slider .slide-item .cover-caption .description {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #1c1c1c;
  padding: 12px 0;
  max-width: 400px;
}
.slider .slide-item .cover-caption .caption-actions {
  display: flex;
  align-items: center;
  padding: 10px 0;
  max-width: 400px;
}
.slider .slide-item .cover-caption .caption-actions .button {
  min-width: 130px;
  background: #222222;
  border-color: #222222;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.slider .slide-item .cover-caption .caption-actions .button span {
  margin-right: 10px;
}
.slider .slide-item .cover-caption .caption-actions .button:hover {
  background: #6e5bdb;
  border-color: #6e5bdb;
  box-shadow: 0 14px 26px -12px rgba(110, 91, 219, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(110, 91, 219, 0.2) !important;
}
.slider .slide-item .cover-caption .caption-actions .button:hover i {
  margin-left: 5px;
  color: #ffffff;
}
.slider .slide-item .cover-caption .caption-actions .button i {
  transition: all 0.3s;
  margin-top: 1px;
  color: #6e5bdb;
  font-size: 18px;
}

/* ==========================================================================
1. Main colors
========================================================================== */
/* ==========================================================================
2. State colors
========================================================================== */
/* ==========================================================================
3. Social colors
========================================================================== */
/* ==========================================================================
4. Box shadows
========================================================================== */
.dark-mode {
  background: #181d23;
  height: 100% !important;
  min-height: 100vh;
}
.dark-mode .navbar {
  background: #222932;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3) !important;
  border-bottom: solid 1px transparent;
}
.dark-mode .navbar .control .input {
  background-color: #303a47;
  color: #7b8698;
}
.dark-mode .navbar .control .input::-moz-placeholder {
  color: #60748d;
}
.dark-mode .navbar .control .input::placeholder {
  color: #60748d;
}
.dark-mode .navbar .control .input:active, .dark-mode .navbar .control .input:focus, .dark-mode .navbar .control .input:hover {
  border-color: #414e60 !important;
}
.dark-mode .navbar .control .search-icon svg {
  stroke: #60748d !important;
}
.dark-mode .navbar .navbar-item a svg {
  stroke: #7b8698 !important;
}
.dark-mode .navbar .navbar-item a:hover svg {
  stroke: #fff !important;
}
.dark-mode .navbar .nav-drop {
  background: #353f4d;
  border: solid 1px #353f4d;
}
.dark-mode .navbar .nav-drop .media-content a {
  color: #7b8698 !important;
}
.dark-mode .navbar .nav-drop.is-active::before {
  border-bottom-color: #3d4959 !important;
}
.dark-mode .navbar .nav-drop-header {
  background: #3d4959 !important;
  border-bottom: solid 1px #3d4959 !important;
}
.dark-mode .navbar .nav-drop-header span {
  color: #7b8698;
}
.dark-mode .navbar .nav-drop-body .account-item-header {
  background: #3d4959 !important;
  border-bottom: dashed 1px #3d4959;
}
.dark-mode .navbar .nav-drop-body .account-item-header .stat-block span {
  color: #7b8698 !important;
}
.dark-mode .navbar .nav-drop-body .account-item .media h3 {
  color: #7b8698 !important;
}
.dark-mode .navbar .nav-drop-body .account-item:hover h3,
.dark-mode .navbar .nav-drop-body .account-item:hover small {
  color: rgba(255, 255, 255, 0.8) !important;
}
.dark-mode .mobile-navbar .navbar-brand > a {
  background: #222932;
}
.dark-mode .mobile-navbar .navbar-item,
.dark-mode .mobile-navbar .navbar-burger {
  border-left: solid 1px #374250;
}
.dark-mode .mobile-navbar .navbar-burger span {
  background: #7b8698;
}
.dark-mode .mobile-navbar .navbar-menu {
  background: #303a47;
  border-top: solid 1px #303a47 !important;
}
.dark-mode .mobile-navbar .navbar-menu .mobile-nav-profile {
  border-bottom: solid 1px #455366 !important;
}
.dark-mode .mobile-navbar .navbar-menu .navbar-item {
  color: #7b8698;
}
.dark-mode .mobile-navbar .navbar-menu .navbar-dropdown a {
  border-left: 0;
}
.dark-mode .mobile-navbar .navbar-menu .navbar-dropdown a span {
  color: #7b8698;
}
.dark-mode .mobile-navbar .navbar-menu .navbar-dropdown a svg {
  stroke: #7b8698 !important;
}
.dark-mode .mobile-navbar .navbar-menu .navbar-dropdown .is-active {
  background: #6e5bdb;
  border-radius: 4px;
}
.dark-mode .mobile-navbar .navbar-menu .navbar-dropdown .is-active span {
  color: #fff;
}
.dark-mode .mobile-navbar .navbar-menu .navbar-dropdown .is-active svg {
  stroke: #fff !important;
}
.dark-mode .v-suggestions .suggestions {
  background: #2e3844;
}
.dark-mode .v-suggestions .items {
  border-color: #2e3844;
}
.dark-mode .v-suggestions .items li {
  border-bottom: solid 1px #374250;
}
.dark-mode .v-suggestions .items li .search-text {
  color: #7b8698;
}
.dark-mode .v-suggestions .items li:hover {
  background: #222932;
}
.dark-mode .v-suggestions .items li:hover .search-text {
  color: #7b8698;
}
.dark-mode .slider {
  background: #222932;
}
.dark-mode .schedule {
  background: #222932;
  border: solid 1px transparent;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
}
.dark-mode .schedule li {
  border-bottom: solid 1px #2e3844;
}
.dark-mode .schedule li strong {
  color: #7b8698;
}
.dark-mode .schedule li span img {
  border-color: #374250;
}
.dark-mode .fb-box {
  background: #222932;
  border-color: #222932;
}
.dark-mode .videos-sidebar {
  background: #222932;
  border-right: solid 1px transparent;
}
.dark-mode .videos-sidebar .user-menu .separator {
  border-bottom: solid 1px #374250 !important;
}
.dark-mode .videos-sidebar .menu-block a {
  cursor: pointer;
}
.dark-mode .videos-sidebar .menu-block a svg {
  stroke: #7b8698 !important;
}
.dark-mode .videos-sidebar .menu-block a span {
  color: #7b8698 !important;
}
.dark-mode .videos-sidebar .menu-block a.is-active svg, .dark-mode .videos-sidebar .menu-block a.is-active:hover svg {
  stroke: #6e5bdb !important;
}
.dark-mode .videos-sidebar .menu-block a.is-active span, .dark-mode .videos-sidebar .menu-block a.is-active:hover span {
  color: #6e5bdb !important;
}
.dark-mode .videos-sidebar .menu-block a:hover svg {
  stroke: #cecece !important;
}
.dark-mode .videos-sidebar .menu-block a:hover span {
  color: #cecece !important;
}
.dark-mode .videos-sidebar .copyright {
  color: #7b8698;
}
.dark-mode .videos-sidebar .app-links a:hover {
  background: transparent !important;
  border-color: #cecece;
}
.dark-mode .episode-thumbnail {
  background-color: #222932 !important;
}
.dark-mode .episode-duration {
  background-color: #181d23;
}
.dark-mode .episode-duration.free {
  background-color: #0aaa41 !important;
}
.dark-mode .episode-meta span {
  color: #7b8698 !important;
}
.dark-mode .episode-meta span:last-child {
  color: #626d7e !important;
}
.dark-mode .anime-filter .filter-item .label {
  color: #7b8698;
}
.dark-mode .anime-list .card {
  border: solid 1px #181d23 !important;
}
.dark-mode .anime-list .card .anime-box .thumb-wrapper {
  background-color: rgba(34, 41, 50, 0.9);
}
.dark-mode .anime-list .card .anime-box .thumb-wrapper .anime-title {
  background-color: rgba(34, 41, 50, 0.9);
}
.dark-mode .anime-list .card .anime-box .anime-info {
  background-color: #222932;
}
.dark-mode .anime-list .card .anime-box .anime-info .user-info a {
  color: #7b8698;
}
.dark-mode .anime-list .card .anime-box .anime-info .card-footer {
  background-color: #303a47;
}
.dark-mode .anime-list .card .anime-box .add-action-toggle i {
  color: #7b8698;
}
.dark-mode .anime-detail-header {
  background: #303a47;
}
.dark-mode .anime-detail-header .action-toggle-btn.btn-default {
  border-color: #7b8698;
}
.dark-mode .anime-detail-header .action-toggle-btn.btn-default span,
.dark-mode .anime-detail-header .action-toggle-btn.btn-default i {
  color: #7b8698 !important;
}
.dark-mode .anime-detail-header .description h3,
.dark-mode .anime-detail-header .description p {
  color: #7b8698 !important;
}
.dark-mode .anime-detail-header .description .tabs ul {
  border-bottom: solid 1px transparent !important;
}
.dark-mode .anime-detail-header .description .tabs ul a {
  color: #7b8698;
  border-bottom: solid 1px transparent !important;
}
.dark-mode .anime-detail-header .description .tabs ul a:hover {
  color: #6e5bdb;
}
.dark-mode .anime-detail-header .description .tabs ul li.is-active a {
  color: #6e5bdb;
  border-bottom: solid 1px #6e5bdb !important;
}
.dark-mode .anime-detail-body .basic-info {
  background: #303a47;
}
.dark-mode .anime-detail-body .basic-info li span:first-child {
  color: #7b8698;
}
.dark-mode .anime-detail-body .basic-info li span:last-child {
  color: #7b8698;
}
.dark-mode .anime-detail-body .anime-author {
  background: #303a47 !important;
}
.dark-mode .anime-detail-body .anime-author h4 {
  color: #7b8698;
}
.dark-mode .anime-detail-body .anime-author .author-anime-btn {
  background: #6e5bdb;
}
.dark-mode .anime-detail-body .anime-info-section-title {
  color: #7b8698;
}
.dark-mode .anime-detail-body .anime-info-section-body .director {
  background-color: #303a47 !important;
}
.dark-mode .anime-detail-body .anime-info-section-body .director .img-wrap {
  background-color: #222932 !important;
}
.dark-mode .anime-detail-body .anime-info-section-body .director a span {
  color: #7b8698 !important;
}
.dark-mode .anime-detail-body .anime-info-section-body .ani-wrapper span {
  color: #7b8698;
}
.dark-mode .anime-detail-body .anime-info .actor-wrapper {
  background-color: #303a47 !important;
}
.dark-mode .anime-detail-body .anime-info .actor-wrapper .v-actor {
  background: #222932 !important;
}
.dark-mode .anime-detail-body .anime-info .actor-wrapper span {
  color: #7b8698;
}
.dark-mode .header-tabs {
  background: #222932;
}
.dark-mode .header-tabs a:hover {
  background: #303a47;
  color: rgba(255, 255, 255, 0.8);
}
.dark-mode .header-tabs a.is-active {
  background: #303a47;
  color: rgba(255, 255, 255, 0.8);
}
.dark-mode .content-page {
  background: #181d23;
}
.dark-mode .content-page .content-wrapper * {
  background: #181d23 !important;
  border-color: #222932;
}
.dark-mode .content-page .content-wrapper strong {
  color: #7b8698 !important;
}
.dark-mode .content-page .content-wrapper p,
.dark-mode .content-page .content-wrapper td,
.dark-mode .content-page .content-wrapper span {
  color: #6d798c !important;
}
.dark-mode .payment-info.card {
  background: transparent !important;
  border: solid 1px #181d23;
}
.dark-mode .payment-info.card p,
.dark-mode .payment-info.card strong,
.dark-mode .payment-info.card li,
.dark-mode .payment-info.card span {
  color: #7b8698;
}
.dark-mode .payment-card .el-form-item__label {
  color: #5a75a6 !important;
}
.dark-mode .payment-card .el-input__inner {
  background: #3f4c5d;
}
.dark-mode .payment-page .payment-methods a {
  color: #485e85;
}
.dark-mode .payment-page .payment-methods a.is-active {
  color: #ffffff;
}
.dark-mode .payment-page .payment-body {
  background: #242f43;
}
.dark-mode .payment-page .payment-choose-option i, .dark-mode .payment-page .payment-choose-option p {
  color: #485e85;
}
.dark-mode .payment-page .payment-qpay .el-step__icon {
  background: #242f43 !important;
  border-color: #C0C4CC;
}
.dark-mode .payment-page .payment-qpay .el-step__description, .dark-mode .payment-page .payment-qpay .el-step__icon-inner {
  color: #C0C4CC;
}
.dark-mode .payment-page .payment-qpay .is-success .el-step__icon {
  background: #242f43 !important;
  border-color: #6e5bdb;
}
.dark-mode .payment-page .payment-qpay .is-success .el-step__description, .dark-mode .payment-page .payment-qpay .is-success .el-step__icon-inner {
  color: #6e5bdb;
}
.dark-mode .payment-page .qpay-render .warning-txt {
  color: #5a75a6;
}
.dark-mode .payment-page .qpay-render .deeplink h3 {
  color: #889cbf !important;
  font-weight: 600;
}
.dark-mode .payment-page .qpay-render .deeplink a span {
  color: #889cbf !important;
  font-weight: 600;
}
.dark-mode .payment-options {
  background: #242f43;
}
.dark-mode .payment-options .p-header a {
  color: #5a75a6;
}
.dark-mode .payment-options .p-header a:hover {
  color: #6e5bdb;
}
.dark-mode .payment-options .choices a {
  border: solid 1px #5a75a6;
}
.dark-mode .payment-options .choices a h4, .dark-mode .payment-options .choices a span {
  color: #5a75a6;
}
.dark-mode .payment-options .choices a span.price {
  color: #6e5bdb;
}
.dark-mode .payment-options .choices a.active {
  border: solid 1px #6e5bdb;
}
.dark-mode .payment-options .choices a.active h4, .dark-mode .payment-options .choices a.active span.price {
  color: #6e5bdb;
}
.dark-mode .mobile-search-result .search-item {
  border-color: #333d4a;
}
.dark-mode .mobile-search-result .search-item .search-text {
  color: #7b8698;
}
.dark-mode .fancybox-toolbar {
  background: #2f3542;
}
.dark-mode .fancybox-toolbar .toolbar-body a.active {
  background: #242933;
}
.dark-mode .fancybox-caption {
  background: #181d23;
}
.dark-mode .fancybox-caption .ep-atitle {
  color: #7b8698;
}
.dark-mode .fancybox-caption .header .user-meta span {
  color: #7b8698;
}
.dark-mode .fancybox-caption .header .button {
  background: #6e5bdb;
  border-color: #6e5bdb;
  color: #fff;
}
.dark-mode .fancybox-caption .live-stats {
  border-bottom-color: #333d4a;
}
.dark-mode .fancybox-caption .episode-list .el-collapse {
  border: 0 !important;
}
.dark-mode .fancybox-caption .episode-list .el-collapse .el-collapse-item__header {
  background-color: #1d2636 !important;
  border-bottom: 0 !important;
  border-radius: 5px;
  color: #5a76a6 !important;
  padding: 0 10px;
}
.dark-mode .fancybox-caption .episode-list .el-collapse .el-collapse-item {
  padding: 0 20px;
  margin-bottom: 10px;
}
.dark-mode .fancybox-caption .episode-list .el-collapse .el-collapse-item__wrap {
  background-color: #1d2636 !important;
  border-bottom: 0 !important;
  border-radius: 5px;
  margin-top: -5px;
}
.dark-mode .fancybox-caption .episode-list .control .input {
  background: #333d4a;
  color: rgba(255, 255, 255, 0.8);
  border-color: #333d4a;
}
.dark-mode .fancybox-caption .episode-list .control .input::-moz-placeholder {
  color: #2c3541;
}
.dark-mode .fancybox-caption .episode-list .control .input::placeholder {
  color: #2c3541;
}
.dark-mode .fancybox-caption .episode-list .list-wrapper ul li a {
  background: #2a333e;
  border-color: #2a333e;
  color: #7588a1 !important;
}
.dark-mode .fancybox-caption .episode-list .list-wrapper ul li a.active {
  color: #6e5bdb !important;
}
.dark-mode .fancybox-caption .episode-anime-detail p {
  color: #7b8698;
}
.dark-mode .fancybox-caption .episode-anime-detail .related-item {
  background: #222932;
}
.dark-mode .fancybox-caption .episode-anime-detail .related-item h3 {
  color: #7b8698;
}
.dark-mode .fancybox-caption .comment-component .wrapper .el-textarea .el-textarea__inner {
  background: #3f4c5d;
  border-color: #3b4756;
  color: rgba(255, 255, 255, 0.8);
}
.dark-mode .fancybox-caption .comment-component .wrapper .comment-control {
  border-color: #3b4756;
}
.dark-mode .fancybox-caption .comment-component .wrapper .comment-control .comment-btn a {
  color: #b1c6d0;
}
.dark-mode .fancybox-caption .comment-component .comments-list {
  background: #222932;
}
.dark-mode .fancybox-caption .comment-component .comments-list .is-comment .media-content {
  background: #303a47;
}
.dark-mode .page-title {
  color: #6e5bdb;
}
.dark-mode .history-timeline .time .img-container {
  border-color: #374250;
  background: #374250;
}
.dark-mode .history-timeline .card {
  background: #303a47;
  border-color: #303a47;
}
.dark-mode .history-timeline .card .user-info a {
  color: #7b8698;
}
.dark-mode .history-timeline .card .watch-time {
  color: #7b8698;
}

.dark-mode .el-tabs__nav-wrap::after {
  background-color: #2a333e;
}
.dark-mode .el-tabs__item {
  color: #6d798c;
  text-transform: uppercase;
  font-size: 12px;
}
.dark-mode .el-tabs__item.is-active {
  color: #6e5bdb;
}
.dark-mode .el-input__inner {
  background-color: #303a47;
  border-color: #303a47;
  color: #7b8698;
}
.dark-mode .el-input__inner:focus, .dark-mode .el-input__inner:active {
  border-color: #222932;
}
.dark-mode .load-more-wrap a {
  border: solid 1px transparent;
  background-color: #6e5bdb;
  color: #fff !important;
}
.dark-mode .el-popover {
  background-color: #2a333e !important;
}
.dark-mode .el-popper {
  background-color: #2a333e !important;
}
.dark-mode .post-placeload {
  background: #222932;
  border-color: #222932;
}
.dark-mode .post-placeload .image-placeholder {
  background: linear-gradient(to right, #28303b 8%, #262e38 18%, #28303b 33%);
}
.dark-mode .post-placeload .placeholder-footer .img,
.dark-mode .post-placeload .placeholder-footer .content-shape {
  background: #2e3844 !important;
}

.price-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.content-price-box {
  height: 200px;
  width: 400px;
  background: #ffffff;
  display: flex;
}
.content-price-box h2 {
  font-weight: 500px;
}
.content-price-box .price-actions {
  width: 100%;
}

.add-video-page {
  max-width: 600px;
  padding: 20px;
}
.add-video-page .el-form {
  background: #ffffff;
}
.add-video-page .el-form h2 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: solid 1px #dedede;
  padding: 12px 20px;
}
.add-video-page .el-form h2 svg {
  color: #6e5bdb;
  font-size: 16px;
  margin-right: 10px;
  stroke: #6e5bdb;
}
.add-video-page .el-form h2 span {
  color: #6e5bdb;
}
.add-video-page .el-form .el-upload {
  width: 100%;
}
.add-video-page .el-form .el-upload-dragger {
  width: 100%;
}
.add-video-page .el-form .form-group {
  padding: 20px;
}
.add-video-page .el-form .el-button {
  width: 100%;
}

.v--modal-background-click {
  background-color: rgba(0, 0, 0, 0.5);
}

.v--modal-box {
  overflow: visible !important;
}

.v--modal {
  background-color: rgba(0, 0, 0, 0.015) !important;
  overflow: visible !important;
}

.app_dialog {
  min-height: 70%;
  background: transparent;
  max-width: 100%;
}
.app_dialog .el-carousel {
  height: 100%;
  min-height: 70%;
  width: auto !important;
  border-radius: 10px;
  background-color: transparent !important;
  overflow: visible !important;
}
.app_dialog .el-carousel.el-carousel--horizontal {
  overflow: visible !important;
}
.app_dialog .el-carousel__container {
  height: 100%;
  min-height: 70%;
  border-radius: 10px;
}
.app_dialog .el-carousel__container .el-carousel__arrow i {
  color: #6e5bdb !important;
  font-size: 28px;
}
.app_dialog .el-carousel__container .el-carousel__arrow i.el-icon-arrow-left {
  margin-left: 15px;
}
.app_dialog .el-carousel__container .el-carousel__arrow i.el-icon-arrow-right {
  margin-right: 20px;
}
.app_dialog .el-carousel .el-carousel__indicators .is_active .el-carousel__button {
  background: #6e5bdb !important;
}
.app_dialog .el-carousel__item {
  background-color: rgba(0, 0, 0, 0.015);
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 20px;
}
.app_dialog .dialog-close {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 100;
  border: solid 2px #6e5bdb;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app_dialog .dialog-thumbnail {
  width: auto !important;
  border-radius: 10px;
}

.payment-warning {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.payment-warning .warning-box {
  border: solid 1px #6e5bdb;
  padding: 50px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
  text-align: center;
}
.payment-warning .warning-box h3 {
  font-size: 18px;
  color: #6e5bdb;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.payment-warning .warning-box h3 i {
  margin-right: 10px;
}
@media (max-width: 768px) {
  .payment-warning .warning-box h3 {
    flex-direction: column;
    font-size: 16px;
  }
  .payment-warning .warning-box h3 i {
    font-size: 24px;
    margin-bottom: 10px;
    margin-right: 0;
  }
}
.payment-warning .warning-box p {
  color: rgba(110, 91, 219, 0.9);
}
.payment-warning .warning-box a {
  background: #6e5bdb;
  border-radius: 5px;
  margin-top: 20px;
  padding: 5px 20px;
  color: #ffffff;
}

.home-header {
  padding: 20px 30px 0;
}
@media (max-width: 768px) {
  .home-header {
    padding: 0;
  }
}

.navbar-end {
  padding-right: 20px;
}

.fb-box {
  border: solid 1px #e8e8e8;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  height: 144px;
}

.fancybox-container {
  z-index: 10000;
}

.slick-dots {
  z-index: 100;
}

.schedule {
  height: 348px;
  padding: 10px 0;
  margin-top: 0;
  margin-bottom: 10px;
}
.schedule h3 {
  color: #6e5bdb;
  font-size: 15px;
  font-weight: 500;
  padding-left: 15px;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: flex;
}
.schedule h3 i {
  margin-right: 6px;
  font-size: 22px;
}
.schedule ul {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.schedule ul li {
  flex: 1;
  border-bottom: solid 1px #dedede;
  display: flex;
  align-items: center;
  padding: 3px 15px 0px;
}
.schedule ul li:last-child {
  border-bottom: 0;
}
.schedule ul li.active {
  align-items: center;
}
.schedule ul li.active strong {
  background: #6e5bdb;
  border-radius: 50%;
  color: #ffffff;
  padding: 6px;
  margin-left: 0px;
  font-size: 14px;
  margin-right: 12px;
}
.schedule ul li.active span img {
  border: solid 2px #6e5bdb;
}
.schedule ul li strong {
  color: #393a4f;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 16px;
  margin-right: 15px;
  width: 33px;
  text-align: center;
}
.schedule ul li a {
  display: flex;
  align-items: center;
  height: 40px;
  padding-top: 5px;
}
.schedule ul li span {
  margin: 0 2px;
}
.schedule ul li span img {
  height: 31px;
  width: 31px;
  border-radius: 50%;
  border: solid 1px #f3f4fa;
}
.schedule ul li span:hover img {
  border: solid 2px #6e5bdb;
}

.fancybox-stage {
  background: #000000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fancybox-stage .video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.movie-collection .movie {
  overflow: hidden;
  border-radius: 14px;
  position: relative;
  padding-bottom: 10px;
}
.movie-collection .movie .episode-thumbnail {
  border-radius: 14px !important;
  background-size: 100% auto;
  background-position: center;
}
.movie-collection .movie .episode-thumbnail .episode-duration {
  bottom: 20px;
}
.movie-collection .movie .episode-thumbnail .episode-duration .m-price {
  font-weight: bold;
}
.movie-collection .movie .episode-thumbnail .episode-duration.free {
  background-color: #0aaa41 !important;
}
.movie-collection .video {
  overflow: hidden;
  position: relative;
}
.movie-collection .video .episode-thumbnail {
  border-radius: 14px !important;
  overflow: hidden;
  background-size: 100% auto;
  background-position: center;
}

.v-description {
  text-align: justify;
  margin: 0 20px;
}

.fb-button {
  background: #3b5998 !important;
  color: #ffffff;
}
.fb-button:hover {
  color: #ffffff;
}

.navbar .control .input {
  border: none;
  padding-left: 40px !important;
  border-radius: 20px;
}
.navbar .control .input:hover, .navbar .control .input:focus, .navbar .control .input:active {
  background: transparent;
  border: solid 1px #dedede;
}

.v-suggestions .suggestions {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0px 5px 43px rgba(0, 0, 0, 0.18) !important;
}

.search-item {
  display: flex;
  align-items: center;
}
.search-item .search-img {
  height: 50px;
  margin-right: 10px;
}
.search-item .search-text {
  font-size: 12px;
}

.el-tabs__item {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

.el-tabs__item:hover {
  color: #6e5bdb;
}

.el-tabs__item.is-active {
  color: #6e5bdb;
}

.el-tabs__active-bar {
  background-color: #6e5bdb;
}

.mobile-search-page {
  padding: 20px;
}
.mobile-search-page .mobile-search-result {
  margin-top: 20px;
}
.mobile-search-page .mobile-search-result .search-item {
  padding: 10px 0;
  border-bottom: dotted 1px #dedede;
}
.mobile-search-page .mobile-search-result .search-item .search-img {
  height: 100px;
  border-radius: 5px;
}
.mobile-search-page .mobile-search-result .search-item .search-text {
  font-size: 15px;
  color: #545454;
  font-weight: 600;
}

.mobile-nav-profile {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: solid 1px #dedede;
  padding-bottom: 10px;
}
.mobile-nav-profile img {
  display: block;
  height: 60px;
  width: 60px;
  max-height: 60px;
  overflow: hidden;
  border-radius: 50%;
  background: #363636;
  border: solid 1px #6e5bdb;
}
.mobile-nav-profile p {
  color: #6e5bdb;
}
.mobile-nav-profile .user-stats {
  display: flex;
}
.mobile-nav-profile .user-stats .stat-block {
  margin: 0 20px;
}
.mobile-nav-profile .user-stats .stat-block span {
  font-size: 13px;
}
.mobile-nav-profile .user-stats .stat-block span:last-child {
  font-weight: 600;
  color: #6e5bdb;
}

.status-badge {
  position: absolute;
  right: 15px;
  top: -5px;
  width: 60px;
}
.status-badge img {
  width: 100%;
}

.header-tabs {
  margin: 20px;
  background: #ffffff;
  border-radius: 4px;
  padding: 5px;
}
.header-tabs a {
  color: #666666;
  padding: 5px 20px;
  display: flex;
  text-align: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 4px;
  font-weight: 600;
}
.header-tabs a:hover {
  background-color: #f1f2fa;
  color: #6e5bdb;
}
.header-tabs a.is-active {
  background: #6e5bdb;
  color: #ffffff;
}

.content-page {
  margin: 10px 20px 20px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.content-page .content-img {
  width: 100%;
  background: #dedede;
  margin-bottom: 20px;
}
.content-page p,
.content-page span,
.content-page div {
  font-size: 13px !important;
  text-align: justify;
  color: #666666 !important;
  background: #ffffff !important;
}
.content-page table {
  max-width: 100% !important;
  width: 100% !important;
  margin-bottom: 20px;
}
.content-page table td {
  padding: 5px;
}
.content-page table td * {
  font-size: 12px !important;
}
.content-page ol {
  margin-left: 30px;
}

.account-item-header {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 3px;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: dashed 1px #e5e5e5;
}
.account-item-header .avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
}
.account-item-header .avatar > img {
  height: 60px !important;
  max-height: 60px !important;
  width: 60px !important;
  border: solid 1px #6e5bdb;
}
.account-item-header .avatar h3 {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 5px;
  margin-top: 5px;
  color: #6e5bdb;
  text-transform: uppercase;
}
.account-item-header .avatar a {
  background: #6e5bdb;
  color: #ffffff;
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.account-item-header .user-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 5px;
}
.account-item-header .user-stats .stat-block {
  text-align: center;
  margin: 0 10px;
}
.account-item-header .user-stats .stat-block span {
  display: block;
}
.account-item-header .user-stats .stat-block span:first-child {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.65rem;
  color: #393a4f;
}
.account-item-header .user-stats .stat-block span:last-child {
  font-size: 0.9rem;
  color: #999;
}

.is-account-dropdown:before {
  border-bottom-color: #ffffff !important;
}
.is-account-dropdown .nav-drop-body {
  padding-top: 0 !important;
  overflow: hidden;
}

.page-title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #393a4f;
  margin-top: 20px;
  margin-bottom: 20px;
}

.history-timeline {
  max-width: 500px;
  padding-left: 20px;
}
.history-timeline .img-container {
  border: solid 3px #ffffff;
  background-size: cover !important;
  background-position: center center;
  transition: all 0.3s;
  height: 55px !important;
  width: 55px !important;
  margin-left: -3px;
}
.history-timeline:hover {
  cursor: pointer;
}
.history-timeline:hover .img-container {
  border-color: #6e5bdb;
}
.history-timeline:hover a {
  color: #6e5bdb !important;
}
.history-timeline .content-wrap {
  padding: 10px;
  display: flex;
}
.history-timeline .content-wrap .user-block {
  flex: 1;
}
.history-timeline .content-wrap a {
  font-weight: 600 !important;
  font-size: 14px !important;
}
.history-timeline .content-wrap .ep-number {
  color: #6e5bdb;
  font-size: 12px;
}
.history-timeline .content-wrap .watch-time {
  font-size: 12px;
  margin-left: auto;
}

.watch-no-info-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.watch-no-info-box i {
  font-size: 36px;
  margin-bottom: 10px;
}
.watch-no-info-box span {
  font-size: 16px;
}

.detail-btn {
  text-decoration: none !important;
}

.modal-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: #222222;
}

.poster {
  background-size: cover;
  background-position: center;
}

.nav-to-auth {
  margin-top: 30px;
}
.nav-to-auth.mini .price-info {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #f3f4f5;
}
.nav-to-auth.mini .price-info strong {
  background: #02BF83;
  color: #ffffff;
  padding: 3px 5px;
  border-radius: 3px;
}
.nav-to-auth.mini .price-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}
.nav-to-auth.mini a {
  height: 40px !important;
  font-weight: 600;
  border-radius: 6px;
  margin: 0 10px;
  border: solid 1px #02BF83;
  color: #02BF83;
}
.nav-to-auth.mini a span {
  font-size: 12px;
}
.nav-to-auth.mini a:hover {
  color: #02a672;
  border: solid 1px #02a672;
}
.nav-to-auth a {
  display: inline-flex;
  border: solid 1px #e08e0b;
  border-radius: 12px;
  height: 70px;
  width: 120px;
  margin: 0 15px;
  color: #e08e0b;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  text-decoration: none;
}
.nav-to-auth a i {
  font-size: 20px;
  margin-bottom: 5px;
}
.nav-to-auth a span {
  font-size: 11px;
  text-transform: uppercase;
}
.nav-to-auth a:hover {
  color: #f39c12;
  border: solid 1px #f39c12;
}

.old-link {
  margin-top: 20px;
  max-width: 380px;
  font-size: 14px;
  border: dashed 1px #6e5bdb;
  border-radius: 6px;
  padding: 15px;
}
.old-link a {
  text-decoration: underline;
}
.old-link p {
  text-align: justify-all !important;
  margin-bottom: 10px;
  color: #6e5bdb;
}
.old-link ul {
  padding-left: 10px;
}
.old-link ul li {
  display: flex;
}
.old-link ul li strong {
  margin-right: 10px;
}
@media (max-width: 768px) {
  .old-link {
    margin-top: 0;
    padding: 10px;
  }
  .old-link ul, .old-link li, .old-link strong, .old-link span, .old-link p {
    font-size: 13px;
  }
}

.fb-payment {
  border: dashed 1px #6e5bdb;
  color: #363636;
  padding: 15px;
  border-radius: 8px;
  font-size: 12px;
  margin: 30px 20px 0;
}
.fb-payment strong {
  color: #6e5bdb;
}

.dark-mode .fb-payment {
  border: dashed 1px #6e5bdb;
  color: #e5e5e5;
}

.home-title {
  font-size: 18px;
  color: #7b8698;
  font-weight: 600;
}

.mob-block {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.mob-block .close-btn {
  position: absolute;
  top: 20px;
  left: 20px;
}
.mob-block .close-btn i {
  color: #6d798c;
  font-size: 24px;
  font-weight: bold;
  color: #6e5bdb;
}
.mob-block p {
  font-weight: 600;
  font-size: 16px;
  color: #6d798c;
}
.mob-block .app-links {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 15px;
}
.mob-block .app-links a {
  border: solid 2px #6d798c;
  border-radius: 6px;
  padding: 4px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #57606f;
  margin: 20px 10px 0;
  transition: all 0.4s;
  font-size: 13px;
  font-weight: 600;
  height: 40px;
}
.mob-block .app-links a img {
  height: 20px;
  margin-right: 6px;
}
.mob-block .app-links a:hover {
  box-shadow: 0 2px 5px rgba(110, 91, 219, 0.4) !important;
  background: transparent !important;
  color: #6e5bdb;
  border: solid 2px #cecece;
}

.desktop-img {
  display: block;
}
@media (max-width: 768px) {
  .desktop-img {
    display: none;
  }
}

.mobile-img {
  display: none;
}
@media (max-width: 768px) {
  .mobile-img {
    display: block;
    width: 100%;
  }
}

.other-page {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
}
.other-page .mobile-nav-profile {
  border-bottom: 0 !important;
  background: #ced6e0 !important;
  padding: 10px 20px;
  border-radius: 8px;
}
.other-page .mobile-nav-profile img {
  margin-bottom: 10px;
}
.other-page .mobile-nav-profile .stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.other-page ul {
  display: flex;
  flex-direction: column;
  flex: 1;
  list-style: none;
  margin-top: 15px;
}
.other-page ul li a {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  color: #7b8698;
  border-bottom: dotted 1px #dedede;
}
.other-page ul li a i {
  font-size: 20px;
  margin-right: 10px;
}
.other-page ul li a span {
  margin-left: 10px;
}
.other-page .logout-btn {
  margin-top: auto;
  color: #6e5bdb;
  display: flex;
  align-items: center;
  border: solid 1px #6e5bdb;
  padding: 6px 10px;
  text-align: center;
  justify-content: center;
  border-radius: 6px;
}
.other-page .logout-btn i {
  font-size: 18px;
}
.other-page .logout-btn span {
  margin-left: 10px;
}

.dark-mode .other-page .mobile-nav-profile {
  border-bottom: 0 !important;
  background: #222932 !important;
}
.dark-mode .other-page ul li a {
  border-bottom: dotted 1px #222932;
}

.igui_seekbar_progress,
.igui_seekbar_scrubber {
  background-color: #6e5bdb !important;
}

.video-player {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.plyr {
  width: 100% !important;
}

@keyframes plyr-progress {
  to {
    background-position: 25px 0;
  }
}
@keyframes plyr-popup {
  0% {
    opacity: 0.5;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes plyr-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.plyr {
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: subpixel-antialiased;
  align-items: center;
  direction: ltr;
  display: flex;
  flex-direction: column;
  font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  height: 100%;
  line-height: 1.7;
  max-width: 100%;
  min-width: 200px;
  position: relative;
  text-shadow: none;
  transition: box-shadow 0.3s ease;
  z-index: 0;
}

.plyr audio, .plyr iframe, .plyr video {
  display: block;
  height: 100%;
  width: 100%;
}

.plyr button {
  font: inherit;
  line-height: inherit;
  width: auto;
}

.plyr:focus {
  outline: 0;
}

.plyr--full-ui {
  box-sizing: border-box;
}

.plyr--full-ui *, .plyr--full-ui ::after, .plyr--full-ui ::before {
  box-sizing: inherit;
}

.plyr--full-ui a, .plyr--full-ui button, .plyr--full-ui input, .plyr--full-ui label {
  touch-action: manipulation;
}

.plyr__badge {
  background: #4a5764;
  border-radius: 2px;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  padding: 3px 4px;
}

.plyr--full-ui ::-webkit-media-text-track-container {
  display: none;
}

.plyr__captions {
  animation: plyr-fade-in 0.3s ease;
  bottom: 0;
  color: #fff;
  display: none;
  font-size: 14px;
  left: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  transition: transform 0.4s ease-in-out;
  width: 100%;
}

.plyr__captions .plyr__caption {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 185%;
  padding: 0.2em 0.5em;
  white-space: pre-wrap;
}

.plyr__captions .plyr__caption div {
  display: inline;
}

.plyr__captions span:empty {
  display: none;
}

@media (min-width: 480px) {
  .plyr__captions {
    font-size: 16px;
    padding: 20px;
  }
}
@media (min-width: 768px) {
  .plyr__captions {
    font-size: 18px;
  }
}
.plyr--captions-active .plyr__captions {
  display: block;
}

.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
  transform: translateY(-40px);
}

.plyr__control {
  background: 0 0;
  border: 0;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  padding: 7px;
  position: relative;
  transition: all 0.3s ease;
}

.plyr__control svg {
  display: block;
  fill: currentColor;
  height: 18px;
  pointer-events: none;
  width: 18px;
}

.plyr__control:focus {
  outline: 0;
}

.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
  outline: 0;
}

a.plyr__control {
  text-decoration: none;
}

a.plyr__control::after, a.plyr__control::before {
  display: none;
}

.plyr__control.plyr__control--pressed .icon--not-pressed, .plyr__control.plyr__control--pressed .label--not-pressed, .plyr__control:not(.plyr__control--pressed) .icon--pressed, .plyr__control:not(.plyr__control--pressed) .label--pressed {
  display: none;
}

.plyr--full-ui ::-webkit-media-controls {
  display: none;
}

.plyr__controls {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  text-align: center;
}

.plyr__controls .plyr__progress__container {
  flex: 1;
  min-width: 0;
}

.plyr__controls .plyr__controls__item {
  margin-left: 2.5px;
}

.plyr__controls .plyr__controls__item:first-child {
  margin-left: 0;
  margin-right: auto;
}

.plyr__controls .plyr__controls__item.plyr__progress__container {
  padding-left: 2.5px;
}

.plyr__controls .plyr__controls__item.plyr__time {
  padding: 0 5px;
}

.plyr__controls .plyr__controls__item.plyr__progress__container:first-child, .plyr__controls .plyr__controls__item.plyr__time + .plyr__time, .plyr__controls .plyr__controls__item.plyr__time:first-child {
  padding-left: 0;
}

.plyr__controls:empty {
  display: none;
}

.plyr [data-plyr=airplay], .plyr [data-plyr=captions], .plyr [data-plyr=fullscreen], .plyr [data-plyr=pip] {
  display: none;
}

.plyr--airplay-supported [data-plyr=airplay], .plyr--captions-enabled [data-plyr=captions], .plyr--fullscreen-enabled [data-plyr=fullscreen], .plyr--pip-supported [data-plyr=pip] {
  display: inline-block;
}

.plyr__menu {
  display: flex;
  position: relative;
}

.plyr__menu .plyr__control svg {
  transition: transform 0.3s ease;
}

.plyr__menu .plyr__control[aria-expanded=true] svg {
  transform: rotate(90deg);
}

.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
  display: none;
}

.plyr__menu__container {
  animation: plyr-popup 0.2s ease;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  color: #4a5764;
  font-size: 16px;
  margin-bottom: 10px;
  position: absolute;
  right: -3px;
  text-align: left;
  white-space: nowrap;
  z-index: 3;
}

.plyr__menu__container > div {
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.plyr__menu__container::after {
  border: 4px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.9);
  content: "";
  height: 0;
  position: absolute;
  right: 15px;
  top: 100%;
  width: 0;
}

.plyr__menu__container [role=menu] {
  padding: 7px;
}

.plyr__menu__container [role=menuitem], .plyr__menu__container [role=menuitemradio] {
  margin-top: 2px;
}

.plyr__menu__container [role=menuitem]:first-child, .plyr__menu__container [role=menuitemradio]:first-child {
  margin-top: 0;
}

.plyr__menu__container .plyr__control {
  align-items: center;
  color: #4a5764;
  display: flex;
  font-size: 14px;
  padding: 4px 11px;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  width: 100%;
}

.plyr__menu__container .plyr__control > span {
  align-items: inherit;
  display: flex;
  width: 100%;
}

.plyr__menu__container .plyr__control::after {
  border: 4px solid transparent;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.plyr__menu__container .plyr__control--forward {
  padding-right: 28px;
}

.plyr__menu__container .plyr__control--forward::after {
  border-left-color: rgba(74, 87, 100, 0.8);
  right: 5px;
}

.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after, .plyr__menu__container .plyr__control--forward:hover::after {
  border-left-color: currentColor;
}

.plyr__menu__container .plyr__control--back {
  font-weight: 500;
  margin: 7px;
  margin-bottom: 3px;
  padding-left: 28px;
  position: relative;
  width: calc(100% - 14px);
}

.plyr__menu__container .plyr__control--back::after {
  border-right-color: rgba(74, 87, 100, 0.8);
  left: 7px;
}

.plyr__menu__container .plyr__control--back::before {
  background: rgba(114, 133, 151, 0.2);
  box-shadow: 0 1px 0 #fff;
  content: "";
  height: 1px;
  left: 0;
  margin-top: 4px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
}

.plyr__menu__container .plyr__control--back.plyr__tab-focus::after, .plyr__menu__container .plyr__control--back:hover::after {
  border-right-color: currentColor;
}

.plyr__menu__container .plyr__control[role=menuitemradio] {
  padding-left: 7px;
}

.plyr__menu__container .plyr__control[role=menuitemradio]::after, .plyr__menu__container .plyr__control[role=menuitemradio]::before {
  border-radius: 100%;
}

.plyr__menu__container .plyr__control[role=menuitemradio]::before {
  background: rgba(0, 0, 0, 0.1);
  content: "";
  display: block;
  flex-shrink: 0;
  height: 16px;
  margin-right: 10px;
  transition: all 0.3s ease;
  width: 16px;
}

.plyr__menu__container .plyr__control[role=menuitemradio]::after {
  background: #fff;
  border: 0;
  height: 6px;
  left: 12px;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  width: 6px;
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  background: #6e5bdb;
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus::before, .plyr__menu__container .plyr__control[role=menuitemradio]:hover::before {
  background: rgba(0, 0, 0, 0.1);
}

.plyr__menu__container .plyr__menu__value {
  align-items: center;
  display: flex;
  margin-left: auto;
  margin-right: -5px;
  overflow: hidden;
  padding-left: 25px;
  pointer-events: none;
}

.plyr--full-ui input[type=range] {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  border-radius: 26px;
  color: #6e5bdb;
  display: block;
  height: 19px;
  margin: 0;
  padding: 0;
  transition: box-shadow 0.3s ease;
  width: 100%;
}

.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  height: 5px;
  -webkit-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -webkit-user-select: none;
  user-select: none;
  background-image: linear-gradient(to right, currentColor var(--value, 0), transparent var(--value, 0));
}

.plyr--full-ui input[type=range]::-webkit-slider-thumb {
  background: #fff;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2);
  height: 13px;
  position: relative;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 13px;
  -webkit-appearance: none;
  margin-top: -4px;
}

.plyr--full-ui input[type=range]::-moz-range-track {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  height: 5px;
  -moz-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -moz-user-select: none;
       user-select: none;
}

.plyr--full-ui input[type=range]::-moz-range-thumb {
  background: #fff;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2);
  height: 13px;
  position: relative;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 13px;
}

.plyr--full-ui input[type=range]::-moz-range-progress {
  background: currentColor;
  border-radius: 2.5px;
  height: 5px;
}

.plyr--full-ui input[type=range]::-ms-track {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  height: 5px;
  -ms-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  user-select: none;
  color: transparent;
}

.plyr--full-ui input[type=range]::-ms-fill-upper {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  height: 5px;
  -ms-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  user-select: none;
}

.plyr--full-ui input[type=range]::-ms-fill-lower {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  height: 5px;
  -ms-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  user-select: none;
  background: currentColor;
}

.plyr--full-ui input[type=range]::-ms-thumb {
  background: #fff;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2);
  height: 13px;
  position: relative;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 13px;
  margin-top: 0;
}

.plyr--full-ui input[type=range]::-ms-tooltip {
  display: none;
}

.plyr--full-ui input[type=range]:focus {
  outline: 0;
}

.plyr--full-ui input[type=range]::-moz-focus-outer {
  border: 0;
}

.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
  outline: 0;
}

.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
  box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
  outline: 0;
}

.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
  box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
  outline: 0;
}

.plyr__poster {
  background-color: #000;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.2s ease;
  width: 100%;
  z-index: 1;
}

.plyr--stopped.plyr__poster-enabled .plyr__poster {
  opacity: 1;
}

.plyr__time {
  font-size: 14px;
}

.plyr__time + .plyr__time::before {
  content: "⁄";
  margin-right: 10px;
}

@media (max-width: 767px) {
  .plyr__time + .plyr__time {
    display: none;
  }
}
.plyr__tooltip {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  color: #4a5764;
  font-size: 14px;
  font-weight: 500;
  left: 50%;
  line-height: 1.3;
  margin-bottom: 10px;
  opacity: 0;
  padding: 5px 7.5px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 10px) scale(0.8);
  transform-origin: 50% 100%;
  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
  white-space: nowrap;
  z-index: 2;
}

.plyr__tooltip::before {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255, 255, 255, 0.9);
  bottom: -4px;
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2;
}

.plyr .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr .plyr__control:hover .plyr__tooltip, .plyr__tooltip--visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.plyr .plyr__control:hover .plyr__tooltip {
  z-index: 3;
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
  left: 0;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 0 100%;
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip::before, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip::before {
  left: 16px;
}

.plyr__controls > .plyr__control:last-child .plyr__tooltip {
  left: auto;
  right: 0;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 100% 100%;
}

.plyr__controls > .plyr__control:last-child .plyr__tooltip::before {
  left: auto;
  right: 16px;
  transform: translateX(50%);
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip, .plyr__controls > .plyr__control:first-child.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:first-child:hover .plyr__tooltip, .plyr__controls > .plyr__control:last-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:last-child.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:last-child:hover .plyr__tooltip {
  transform: translate(0, 0) scale(1);
}

.plyr__progress {
  left: 6.5px;
  margin-right: 13px;
  position: relative;
}

.plyr__progress input[type=range], .plyr__progress__buffer {
  margin-left: -6.5px;
  margin-right: -6.5px;
  width: calc(100% + 13px);
}

.plyr__progress input[type=range] {
  position: relative;
  z-index: 2;
}

.plyr__progress .plyr__tooltip {
  font-size: 14px;
  left: 0;
}

.plyr__progress__buffer {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  border-radius: 100px;
  height: 5px;
  left: 0;
  margin-top: -2.5px;
  padding: 0;
  position: absolute;
  top: 50%;
}

.plyr__progress__buffer::-webkit-progress-bar {
  background: 0 0;
}

.plyr__progress__buffer::-webkit-progress-value {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  -webkit-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr__progress__buffer::-moz-progress-bar {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  -moz-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr__progress__buffer::-ms-fill {
  border-radius: 100px;
  -ms-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr--loading .plyr__progress__buffer {
  animation: plyr-progress 1s linear infinite;
  background-image: linear-gradient(-45deg, rgba(35, 41, 47, 0.6) 25%, transparent 25%, transparent 50%, rgba(35, 41, 47, 0.6) 50%, rgba(35, 41, 47, 0.6) 75%, transparent 75%, transparent);
  background-repeat: repeat-x;
  background-size: 25px 25px;
  color: transparent;
}

.plyr--video.plyr--loading .plyr__progress__buffer {
  background-color: rgba(255, 255, 255, 0.25);
}

.plyr--audio.plyr--loading .plyr__progress__buffer {
  background-color: rgba(193, 201, 209, 0.66);
}

.plyr__volume {
  align-items: center;
  display: flex;
  max-width: 110px;
  min-width: 80px;
  position: relative;
  width: 20%;
}

.plyr__volume input[type=range] {
  margin-left: 5px;
  margin-right: 5px;
  position: relative;
  z-index: 2;
}

.plyr--is-ios .plyr__volume {
  min-width: 0;
  width: auto;
}

.plyr--audio {
  display: block;
}

.plyr--audio .plyr__controls {
  background: #fff;
  border-radius: inherit;
  color: #4a5764;
  padding: 10px;
}

.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
  background: #6e5bdb;
  color: #fff;
}

.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(193, 201, 209, 0.66);
}

.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
  background-color: rgba(193, 201, 209, 0.66);
}

.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
  background-color: rgba(193, 201, 209, 0.66);
}

.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.plyr--audio .plyr__progress__buffer {
  color: rgba(193, 201, 209, 0.66);
}

.plyr--video {
  background: #000;
  overflow: hidden;
}

.plyr--video.plyr--menu-open {
  overflow: visible;
}

.plyr__video-wrapper {
  background: #000;
  height: 100%;
  margin: auto;
  overflow: hidden;
  width: 100%;
}

.plyr__video-embed, .plyr__video-wrapper--fixed-ratio {
  height: 0;
  padding-bottom: 56.25%;
}

.plyr__video-embed iframe, .plyr__video-wrapper--fixed-ratio video {
  border: 0;
  left: 0;
  position: absolute;
  top: 0;
}

.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
  padding-bottom: 240%;
  position: relative;
  transform: translateY(-38.28125%);
}

.plyr--video .plyr__controls {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  bottom: 0;
  color: #fff;
  left: 0;
  padding: 20px 5px 5px;
  position: absolute;
  right: 0;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  z-index: 3;
}

@media (min-width: 480px) {
  .plyr--video .plyr__controls {
    padding: 35px 10px 10px;
  }
}
.plyr--video.plyr--hide-controls .plyr__controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
  background: #6e5bdb;
  color: #fff;
}

.plyr__control--overlaid {
  background: rgba(110, 91, 219, 0.8);
  border: 0;
  border-radius: 100%;
  color: #fff;
  display: none;
  left: 50%;
  padding: 15px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.plyr__control--overlaid svg {
  left: 2px;
  position: relative;
}

.plyr__control--overlaid:focus, .plyr__control--overlaid:hover {
  background: #6e5bdb;
}

.plyr--playing .plyr__control--overlaid {
  opacity: 0;
  visibility: hidden;
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
  display: block;
}

.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(255, 255, 255, 0.25);
}

.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
  background-color: rgba(255, 255, 255, 0.25);
}

.plyr--full-ui.plyr--video input[type=range]::-ms-track {
  background-color: rgba(255, 255, 255, 0.25);
}

.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.plyr--video .plyr__progress__buffer {
  color: rgba(255, 255, 255, 0.25);
}

.plyr:fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:fullscreen video {
  height: 100%;
}

.plyr:fullscreen .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:fullscreen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:fullscreen .plyr__captions {
    font-size: 21px;
  }
}
.plyr:-webkit-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-webkit-full-screen video {
  height: 100%;
}

.plyr:-webkit-full-screen .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-webkit-full-screen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:-webkit-full-screen .plyr__captions {
    font-size: 21px;
  }
}
.plyr:-moz-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-moz-full-screen video {
  height: 100%;
}

.plyr:-moz-full-screen .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-moz-full-screen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:-moz-full-screen .plyr__captions {
    font-size: 21px;
  }
}
.plyr:-ms-fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-ms-fullscreen video {
  height: 100%;
}

.plyr:-ms-fullscreen .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-ms-fullscreen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:-ms-fullscreen .plyr__captions {
    font-size: 21px;
  }
}
.plyr--fullscreen-fallback {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
  bottom: 0;
  display: block;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000000;
}

.plyr--fullscreen-fallback video {
  height: 100%;
}

.plyr--fullscreen-fallback .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr--fullscreen-fallback.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr--fullscreen-fallback .plyr__captions {
    font-size: 21px;
  }
}
.plyr__ads {
  border-radius: inherit;
  bottom: 0;
  cursor: pointer;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.plyr__ads > div, .plyr__ads > div iframe {
  height: 100%;
  position: absolute;
  width: 100%;
}

.plyr__ads::after {
  background: rgba(35, 41, 47, 0.8);
  border-radius: 2px;
  bottom: 10px;
  color: #fff;
  content: attr(data-badge-text);
  font-size: 11px;
  padding: 2px 6px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  z-index: 3;
}

.plyr__ads::after:empty {
  display: none;
}

.plyr__cues {
  background: currentColor;
  display: block;
  height: 5px;
  left: 0;
  margin: -2.5px 0 0;
  opacity: 0.8;
  position: absolute;
  top: 50%;
  width: 3px;
  z-index: 3;
}

.plyr__preview-thumb {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  margin-bottom: 10px;
  opacity: 0;
  padding: 3px;
  pointer-events: none;
  position: absolute;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 50% 100%;
  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
  z-index: 2;
}

.plyr__preview-thumb--is-shown {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.plyr__preview-thumb::before {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255, 255, 255, 0.9);
  bottom: -4px;
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2;
}

.plyr__preview-thumb__image-container {
  background: #c1c9d1;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.plyr__preview-thumb__image-container img {
  height: 100%;
  left: 0;
  max-height: none;
  max-width: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.plyr__preview-thumb__time-container {
  bottom: 6px;
  left: 0;
  position: absolute;
  right: 0;
  white-space: nowrap;
  z-index: 3;
}

.plyr__preview-thumb__time-container span {
  background-color: rgba(0, 0, 0, 0.55);
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  padding: 3px 6px;
}

.plyr__preview-scrubbing {
  bottom: 0;
  filter: blur(1px);
  height: 100%;
  left: 0;
  margin: auto;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.3s ease;
  width: 100%;
  z-index: 1;
}

.plyr__preview-scrubbing--is-shown {
  opacity: 1;
}

.plyr__preview-scrubbing img {
  height: 100%;
  left: 0;
  max-height: none;
  max-width: none;
  -o-object-fit: contain;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%;
}

.plyr--no-transition {
  transition: none !important;
}

.plyr__sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  border: 0 !important;
  height: 1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.plyr [hidden] {
  display: none !important;
}

.media-slider {
  padding: 0 30px 30px 38px;
  overflow-x: hidden;
}
@media (max-width: 768px) {
  .media-slider {
    padding: 0 30px 20px 30px;
  }
}
.media-slider h2 {
  color: #303133;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: -8px;
  padding-left: 0;
  margin-bottom: 10px;
}
.media-slider .vhl-navigation {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0;
}
.media-slider .vhl-navigation .vhl-btn-right, .media-slider .vhl-navigation .vhl-btn-left {
  background: transparent;
  box-shadow: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 100%;
  width: 80px;
  border-radius: 0;
}
.media-slider .vhl-navigation .vhl-btn-right svg, .media-slider .vhl-navigation .vhl-btn-left svg {
  fill: #ffffff;
  height: 32px !important;
  width: 32px !important;
  font-size: 32px;
}
.media-slider .vhl-navigation .vhl-btn-right svg polyline, .media-slider .vhl-navigation .vhl-btn-left svg polyline {
  color: #6e5bdb;
  font-size: 32px;
}
.media-slider .vhl-navigation .vhl-btn-left {
  background: linear-gradient(90deg, #EDF1F5 0%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 100%);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  margin-left: -10px !important;
}
.media-slider .vhl-navigation .vhl-btn-left svg {
  margin-left: -30px !important;
}
.media-slider .vhl-navigation .vhl-btn-right {
  background: linear-gradient(270deg, #EDF1F5 0%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 100%);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  margin-right: -10px;
}
.media-slider .vhl-navigation .vhl-btn-right svg {
  margin-right: -30px !important;
}
.media-slider .vhl-item {
  overflow: hidden;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
@media (min-width: 1200px) {
  .media-slider .vhl-item {
    padding: 0 5px 0 0 !important;
  }
}
@media (max-width: 1200px) {
  .media-slider .vhl-item {
    padding-left: 13px !important;
  }
}
@media (max-width: 768px) {
  .media-slider .vhl-item {
    width: 100%;
    height: auto;
  }
}
.media-slider .media-item {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 1px;
  margin-top: 0;
}
.media-slider .media-item:first-child {
  padding-left: 0 !important;
}
.media-slider .media-item .img-wrap {
  width: 100%;
  height: 100%;
}
.media-slider .media-item img {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  min-height: 50px;
  background-position: center left;
  background-size: cover;
}
.media-slider .media-item img.poster-vr {
  display: none;
}
@media (max-width: 680px) {
  .media-slider .media-item img.poster-vr {
    display: block;
    margin-bottom: 15px;
  }
  .media-slider .media-item img.poster-hz {
    display: none;
  }
}
.media-slider .media-item .badge {
  position: absolute;
  right: 20px;
  top: 10px;
  border-radius: 5px;
  font-size: 12px;
  padding: 2px 10px;
  color: #ffffff;
  background: rgba(13, 17, 24, 0.8);
  z-index: 11;
}
.media-slider .media-item .badge.free {
  background: rgba(10, 170, 65, 0.8) !important;
}
.media-slider .media-item .hover-item {
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(13, 17, 24, 0.25);
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-slider .media-item:hover {
  cursor: pointer;
}
.media-slider .media-item:hover .hover-item {
  z-index: 10;
  opacity: 1;
}
.media-slider .media-item:hover .hover-item .play-button i {
  font-size: 28px;
}

.dark-mode .media-slider h2 {
  color: #6d798c;
}
.dark-mode .media-slider .vhl-navigation .vhl-btn-right svg polyline, .dark-mode .media-slider .vhl-navigation .vhl-btn-left svg polyline {
  color: rgba(245, 245, 241, 0.8);
}
.dark-mode .media-slider .vhl-navigation .vhl-btn-left {
  background: linear-gradient(90deg, #0D1118 0%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
}
.dark-mode .media-slider .vhl-navigation .vhl-btn-right {
  background: linear-gradient(270deg, #0D1118 0%, rgba(13, 17, 24, 0) 100%, rgba(0, 0, 0, 0) 100%);
}

.media-loader {
  padding: 0 !important;
}
.media-loader .column {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  margin-top: 10px;
}
.media-loader .column:first-child {
  padding-left: 5px !important;
}
.media-loader .post-placeload {
  margin-bottom: 0 !important;
}

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55px;
  background: #ffffff;
  z-index: 1000;
}
@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
  }
  .bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #7b8698;
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .bottom-nav a svg {
    width: 18px;
    height: 18px;
  }
  .bottom-nav a span {
    margin-top: 4px;
    font-size: 9.6px;
    font-weight: 500;
    text-transform: uppercase;
  }
  .bottom-nav a.is-active {
    border-top: solid 1px #6e5bdb;
    padding-top: 3px;
  }
  .bottom-nav a.is-active span, .bottom-nav a.is-active svg {
    color: #6e5bdb;
  }
}

.dark-mode .bottom-nav {
  background: #222932;
  border-top: solid 1px #374250;
}
.dark-mode .bottom-nav a {
  padding-top: 3px;
}
.dark-mode .bottom-nav a.is-active {
  margin-top: -1px;
  padding-top: 4px;
}

.page-watch {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #181d23;
  z-index: 10000;
}
.page-watch .loader-wrap {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-login {
  background: #181A20;
  padding: 20px !important;
  height: 100vh;
}
.qr-login-inner {
  position: relative;
  border-radius: 20px;
  height: calc(100vh - 40px);
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
}
.qr-login .qr-max {
  display: flex;
  height: calc(100vh - 40px);
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  position: relative;
  background-color: rgba(35, 38, 47, 0.9);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
@media (max-width: 768px) {
  .qr-login .qr-max {
    flex-direction: column-reverse;
  }
  .qr-login .qr-max .qr-section {
    margin-bottom: 20px;
  }
  .qr-login .qr-max .app-section {
    margin-right: 0;
  }
}
.qr-login .qr-max .qr-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-image: linear-gradient(to top, rgba(24, 26, 32, 0), #020203);
  opacity: 0.9;
}
.qr-login .qr-max .qr-info-wrap {
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.qr-login .qr-max .qr-info-wrap-inner {
  display: flex;
  flex-direction: column-reverse;
}
.qr-login .qr-max .app-section, .qr-login .qr-max .qr-section {
  z-index: 2;
}
.qr-login .qr-max .qr-login-footer {
  position: absolute;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  z-index: 2;
  text-align: center;
  width: 70%;
}
.qr-login .qr-max .qr-login-footer a {
  width: 100%;
  border: solid 1px #5a7298;
  border-radius: 6px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  color: #5a7298;
}
.qr-login .qr-max .qr-login-footer p {
  color: #475a78;
  text-transform: uppercase;
  font-size: 13px;
}
.qr-login .app-section {
  margin-right: 25px;
}
.qr-login .qr-wrap {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}
.qr-login .qr-wrap-inner {
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.qr-login .app-links {
  display: flex;
  justify-content: center;
}
.qr-login .app-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #57606f;
  margin: 0 10px;
  transition: all 0.4s;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border: solid 1px rgba(87, 96, 111, 0.4);
}
.qr-login .app-links a:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.qr-login .app-links a img {
  height: 53px;
}
@media (max-width: 768px) {
  .qr-login .app-links a img {
    height: 40px;
  }
}
.qr-login .qr-info {
  color: rgba(255, 255, 255, 0.9);
  margin: 20px 0;
  font-size: 13px;
  text-align: center;
  max-width: 400px;
  font-weight: 600;
  text-transform: uppercase;
}
.qr-login .qr-info strong {
  color: #ff4757;
}
.qr-login .logo-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}

.login-wrapper {
  background-color: #23262f;
}

.login-banner {
  border-top-right-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  height: calc(100vh - 40px);
  overflow: hidden;
}

.main-msg {
  margin-top: 50px;
}

@media (max-width: 768px) {
  .vm--modal {
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    height: 100vh !important;
  }
}
.login-modal {
  height: 100%;
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  background: #2e323d;
}
@media (max-width: 768px) {
  .login-modal {
    flex-direction: column-reverse;
  }
}
.login-modal-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 400px !important;
}
@media (max-width: 768px) {
  .login-modal-form {
    width: 100%;
    height: 60vh;
    padding-bottom: 20px;
  }
}
.login-modal-form form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px !important;
  align-items: center;
  text-align: left;
  padding: 0 !important;
}
.login-modal-form form input {
  height: 40px;
  width: 100%;
  margin-right: 0 !important;
  background-color: #23262f !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border: 0;
  outline: none;
  max-width: 400px !important;
  padding: 0 20px;
}
.login-modal-form form input:focus, .login-modal-form form input:active {
  background-color: #23262f !important;
}
.login-modal-form form input:-webkit-autofill,
.login-modal-form form input:-webkit-autofill:hover,
.login-modal-form form input:-webkit-autofill:focus,
.login-modal-form form input:-webkit-autofill:active {
  -webkit-transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
  transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
.login-modal-form form button {
  height: 40px;
  width: 100%;
  background: linear-gradient(to left, #FC4C4E, #C31162);
  border: 0 !important;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
}
.login-modal-form form button:hover, .login-modal-form form button:focus {
  background: linear-gradient(to left, #FC4C4E, #C31162);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  color: #fff;
}
.login-modal-form form a {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #FC4C4E;
}
.login-modal-form form label {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 7px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}
.login-modal-form .msg {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 5px;
}
.login-modal-form .msg.error {
  color: #ff4757;
}
.login-modal-form .msg.success {
  color: #0aaa41;
}
.login-modal-qr {
  width: 40%;
  background: #181A20;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 30px;
  height: 100%;
  position: relative;
}
@media (max-width: 768px) {
  .login-modal-qr {
    width: 100%;
    height: 40vh;
  }
  .login-modal-qr .qr-info {
    font-size: 14px !important;
  }
}
.login-modal-qr .qr-wrap {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}
.login-modal-qr .qr-wrap-inner {
  background: #fff;
  padding: 10px;
  border-radius: 8px;
}
.login-modal-qr .qr-info {
  color: rgba(255, 255, 255, 0.9);
  margin: 30px 0 0;
  font-size: 16px;
  text-align: center;
  font-weight: 600;
}
.login-modal-qr .qr-info strong {
  color: #ff4757;
}
.login-modal .close-modal {
  text-decoration: none;
  position: absolute;
  top: 15px;
  right: 15px;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: inline-flex;
  border: solid 1px #ff4757;
  align-items: center;
  justify-content: center;
}
.login-modal .close-modal i {
  color: #ff4757;
}

.slides-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-actions {
  width: 100%;
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  padding: 5px 28px;
}
.form-actions > span {
  display: inline-flex;
  justify-content: flex-start;
  flex: 1;
}
.form-actions a {
  color: #ffffff;
  font-size: 16px;
}

.login-btn {
  margin-top: 4px;
  height: 54px;
}