.cuff-on {
    padding: 40px 30px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(18 22 33/90%) 100%)
}
.cuff-on::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 250px;
    z-index: -1;
    position: absolute;
    background: linear-gradient(to top, transparent, #121621)
}
.cuff-on::after {
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(18 22 33/0%) 52%, rgb(18 22 33/0%) 69%, rgb(18 22 33/0%) 77%, rgb(18 22 33/0%) 88%, rgb(18 22 33/0%) 95%, rgb(18 22 33/95%) 100%)
}

/* Slider */
.widget-slider-image {
    margin: 0px -30px;
}
.widget-slider-image img {
    width: 100%;
    height: 330px;
    opacity: .3;
    object-fit: cover;
    object-position: center; 
}
.widget-body {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}
.widget-title a {
    font-size: 2em;
    color:#fff;
    font-weight: 600;
}
.widget-title small {
    color:#9c9ea8;
    display: block;
    padding:5px 0px;
    font-size: .9em;
    font-weight: 400;
}
.widget-footer {
    margin-top: 5px;
}
.widget-footer p {
    color:#fff;
    line-height: 20px;
    font-size: .86em;
}
.widget-actions ul li {
    margin-right: 20px;
}
.widget-actions ul li a span {
    text-transform: uppercase;
    display: block;
    color:#fbc607;
    font-size: .85em;
    font-weight: 600;
    margin-left:10px;
}
.widget-actions ul li a svg {
    overflow: visible;
    width: 32px;
    height: 32px;
}
.widget-actions #layer1 {
    z-index: 2;
}
.widget-actions  #layer2 {
    transform: scale(.5);
    transform-origin: right center;
    animation: pulse-me 3s linear infinite;
    z-index: 1
}
.widget-actions .cls-1 {
     fill: #fbc607
}
.widget-actions .cls-2  {
      fill: #010101
}
@keyframes pulse-me {
    0% {
        transform: scale(.5);
        opacity: 0
    }
    50% {
        opacity: .2
    }
    70% {
        opacity: .3
    }
    100% {
        transform: scale(1.4);
        opacity: 0
    }
}



.hmovie {
  margin: 0 -30px;
}

.hmovie-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background:linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, #121621 80%);
  z-index: 2;
}

.hmovie-slide::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #121621 80%);
  z-index: 1;
}

.hmovie-slide ul li:first-child {
  margin-left: 30px;
}

.hmovie-slide ul li {
  width: 175px;
  overflow: hidden;
  border-radius: 10px;
}

.hmovie-box img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.hmovie-box-on {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all .2s ease-in-out;
  background-image: linear-gradient(to bottom,rgba(0,0,0,0),#000);
}

.hmovie-box-on:hover {
  opacity: .7;
}


.hmovie-box-on-logo {
  padding-bottom: 30px;
}
.hmovie-box-on-tags {
 position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%,0);
    white-space: nowrap;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 2px 6px;
    line-height: 15px;
    background: #42e3d0;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.hmovie-box-on-logo img {
    width: 150px;
  height: 58px;
  object-fit: contain;
}

.hmovie-next,
.hmovie-prev {
  background-size: auto;
  background-color: #181a25;
  background-position: center;
  background-repeat: no-repeat;
  width: 48px;
  height: 48px;
  border-radius: 100%;
  box-shadow: 0 20px 30px 0 rgba(9, 9, 16, .5);
}

.hmovie-next:hover,
.hmovie-prev:hover {
  background-color: #a99e54;
}

.hmovie .swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none;
}

.hmovie-prev {
  top: 50%;
  left: 30px;
  transform: translate(0, -50%);
  background-image: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB3aWR0aD0nMTYnIGhlaWdodD0nMTYnIHZpZXdCb3g9JzAgMCAxNiAxNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTQuNTgyIDguNTkzaC0xMS4xN2w0Ljg4IDQuODhjLjM5LjM5LjM5IDEuMDMgMCAxLjQyLS4zOS4zOS0xLjAyLjM5LTEuNDEgMGwtNi41OS02LjU5Yy0uMzktLjM5LS4zOS0xLjAyIDAtMS40MWw2LjU4LTYuNmMuMzktLjM5IDEuMDItLjM5IDEuNDEgMCAuMzkuMzkuMzkgMS4wMiAwIDEuNDFsLTQuODcgNC44OWgxMS4xN2MuNTUgMCAxIC40NSAxIDFzLS40NSAxLTEgMXonIGZpbGw9JyNmZmYnIC8+PC9zdmc+);
}

.hmovie-next {
  top: 50%;
  right: 30px;
  transform: translate(0, -50%);
  background-image: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB3aWR0aD0nMTYnIGhlaWdodD0nMTYnIHZpZXdCb3g9JzAgMCAxNiAxNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMSA4LjU5M2gxMS4xN2wtNC44OCA0Ljg4Yy0uMzkuMzktLjM5IDEuMDMgMCAxLjQyLjM5LjM5IDEuMDIuMzkgMS40MSAwbDYuNTktNi41OWMuMzktLjM5LjM5LTEuMDIgMC0xLjQxbC02LjU4LTYuNmMtLjM5LS4zOS0xLjAyLS4zOS0xLjQxIDAtLjM5LjM5LS4zOSAxLjAyIDAgMS40MWw0Ljg3IDQuODloLTExLjE3Yy0uNTUgMC0xIC40NS0xIDFzLjQ1IDEgMSAxeicgZmlsbD0nI2ZmZicgLz48L3N2Zz4=);
}

.hmovie-prev:hover {
  background-image: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB3aWR0aD0nMTYnIGhlaWdodD0nMTYnIHZpZXdCb3g9JzAgMCAxNiAxNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTQuNTgyIDguNTkzaC0xMS4xN2w0Ljg4IDQuODhjLjM5LjM5LjM5IDEuMDMgMCAxLjQyLS4zOS4zOS0xLjAyLjM5LTEuNDEgMGwtNi41OS02LjU5Yy0uMzktLjM5LS4zOS0xLjAyIDAtMS40MWw2LjU4LTYuNmMuMzktLjM5IDEuMDItLjM5IDEuNDEgMCAuMzkuMzkuMzkgMS4wMiAwIDEuNDFsLTQuODcgNC44OWgxMS4xN2MuNTUgMCAxIC40NSAxIDFzLS40NSAxLTEgMXonIGZpbGw9JyMwMDAnIC8+PC9zdmc+);
}

.hmovie-next:hover {
  background-image: url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB3aWR0aD0nMTYnIGhlaWdodD0nMTYnIHZpZXdCb3g9JzAgMCAxNiAxNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMSA4LjU5M2gxMS4xN2wtNC44OCA0Ljg4Yy0uMzkuMzktLjM5IDEuMDMgMCAxLjQyLjM5LjM5IDEuMDIuMzkgMS40MSAwbDYuNTktNi41OWMuMzktLjM5LjM5LTEuMDIgMC0xLjQxbC02LjU4LTYuNmMtLjM5LS4zOS0xLjAyLS4zOS0xLjQxIDAtLjM5LjM5LS4zOSAxLjAyIDAgMS40MWw0Ljg3IDQuODloLTExLjE3Yy0uNTUgMC0xIC40NS0xIDFzLjQ1IDEgMSAxeicgZmlsbD0nIzAwMCcgLz48L3N2Zz4=);
}


.hmovie-box-on-text {
  padding: 0 0 30px;
  top: 50%;
  left: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 200;
  letter-spacing: 4px;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  background: url(../images/symbol.svg) center 27px no-repeat;
  background-size: 16px;
}

.hmovie-box-on-text span {
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}


.trend-movie {
  position: absolute;
  top: 0;
  left: 10px;
  height: 45px;
  border: 13px solid #42e3d0;
  border-top: 0;
  border-bottom: 15px solid transparent;
}

.trend-movie .trend-symbol {
  width: 11px;
  position: absolute;
  left: -5px;
  top: 3px;
}

.trend-movie-text {
  bottom: 3px;
  left: -13px;
  width: 26px;
}

.trend-movie-text span {
  color: #000;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.trend-movie-text p {
  margin: -2px 0 0;
  color: #000;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1
}


.page-tab-reverse {
  margin-bottom: 5px;
  border-top: 1px solid #181a25;
}

.page-tab-reverse ul li:nth-child(n+2) {
  padding: 0 0 0 20px;
}

.page-tab-reverse ul li a {
  padding: 10px 0;
  color: #9291a0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4285em;
  text-transform: uppercase;
}

.page-tab-reverse ul li a:hover {
  color: #fff;
}

.page-tab-reverse ul li.page-tab-reverse-active a {
  color: #fbc607;
  box-shadow: 0 -1px 0 #fbc607;
}



.new-series-list {
    margin: 0 !important;
    padding: 0 0 20px
}
.area-info img {
    height: 165px
}
.area-info-on {
    width: 70%
}
.new-series-list {
    margin: -5px -10px !important;
    padding-left: 20px
}
.new-series-list ul li {
    padding: 5px
}


.new-series {
    margin: 40px 0 0
}
.new-series-box {
    overflow: hidden;
    border-radius: 10px
}
.new-series-box img {
    width: 100%;
    height: auto
}
.new-series-box-on {
    padding: 12px 16px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #171a27) 20%
}
.new-series-box-on span {
    color: #fff;
    font-size: 15px;
    font-weight: 600
}
.new-series-box-on:hover span {
    color: #fbc607
}
.new-series-box-on p {
    color: #9291a0;
    font-size: 11px;
    font-weight: 400;
    line-height: 19px
}


.area-info {
    flex: 1 1 20%;
    background-size: contain
}
.area-info::after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    background: rgba(25, 32, 37, .7)
}
.area-info img {
    width: 100%;
    height: 273px;
    object-fit: cover
}
.area-info-on {
    padding: 30px;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
    background: linear-gradient(rgba(25, 32, 37, 0) 0%, #181a25 20%)
}
.area-info-on span {
    color: #fff;
    font-size: 15px;
    font-weight: 600
}
.area-info-on p {
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4285em;
    color: rgba(255, 255, 255, .6)
}
.area-info-on a {
    margin: 20px 0 0;
    padding: 11px 15px;
    font-size: 12px;
    font-weight: 600;
    color: #20232a;
    border-radius: 5px;
    background: #fbc607;
    text-transform: uppercase;
    -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset;
    box-shadow: 0 0 0 0 rgba(34, 36, 38, .15) inset
}


.flow-left {
  margin: 0 20px 0 0;
}
.flow-write {
  overflow: hidden;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background:#1e2029;
}
.flow-write-header {
  background: #1e2029;
}
.flow-write-header ul li a {
  padding: 25px 20px;
  color: #6c7388;
  font-size: .9em;
  font-weight: 600;
  border-bottom: 4px solid transparent;
}
.flow-write-header ul li a svg {
  margin: 0 20px 0 0;
  width: 22px;
  height: 22px;
  fill: #6c7388;
}
.flow-write-header ul li.tab-active a {
  color: #fff;
  border-color: #61e3d0;
}
.flow-write-header ul li.tab-active a svg {
  fill: #fff;
}
.flow-write-header ul li:nth-child(n+2)::before {
  content: "";
  top: 50%;
  left: 0;
  width: 1px;
  height: 20px;
  position: absolute;
  background: #3f485f;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.flow-write-content {
  border-top: 1px solid rgba(63, 72, 95, 0.3);
  border-bottom: 1px solid rgba(63, 72, 95, 0.3);
}
.flow-write-content .form-element textarea {
  padding: 20px;
  min-height: 150px;
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}
.flow-write-content .image-upload-preview {
  margin: 0;
  padding: 20px;
  border-top: 1px solid #293145;
}
.flow-write-footer {
  padding: 20px 30px;
  background: #1e2029;
}
.flow-write-footer-left > ul {
  margin: -10px;
}
.flow-write-footer-left > ul > li {
  padding: 10px;
}
.flow-write-footer-left > ul > li > button > svg {
  width: 22px;
  height: 22px;
  color: #6c7388;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.flow-write-footer-left > ul > li > button:hover svg {
  color: #fff;
}
.flow-write-footer .form-element button {
  padding-top: 12px;
  padding-bottom: 12px;
}
.flow-nav {
  margin: 40px 0 0;
}
.flow-nav ul {
  border-bottom: 1px solid #3f485f;
}
.flow-nav ul li a {
  padding: 0 0 20px;
  color: #6c7388;
  font-size: .9em;
  font-weight: 600;
  border-bottom: 4px solid transparent;
}
.flow-nav ul li.active a {
  color: #fff;
  border-color: #61e3d0;
}
.flow-nav ul li:nth-child(n+2) {
  margin: 0 0 0 40px;
}
.flow-posts {
  margin: 20px 0 0;
}
.flow-posts > ul > li:nth-child(n+2) {
  margin: 20px 0 0;
}

.alert {
  padding: 20px;
  z-index: 1;
  overflow: hidden;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #1e2029;
  border-left: 2px solid #3f485f;
  -webkit-box-shadow: 0px 0px 2px #3f485f;
  -moz-box-shadow: 0px 0px 2px #3f485f;
  -ms-box-shadow: 0px 0px 2px #3f485f;
  -o-box-shadow: 0px 0px 2px #3f485f;
  box-shadow: 0px 0px 2px #3f485f;
}
.alert-icon {
  width: 22px;
  height: 22px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  background: #6c7388;
}
.alert-icon svg {
  width: 22px;
  height: 22px;
  color: #1e2029;
}
.alert-text {
  margin: 0 20px;
}
.alert-text span {
  color: #fff;
  font-size: .9em;
  font-weight: 500;
}
.alert-text a {
  margin: 5px 0 0;
  color: #6c7388;
  font-size: .9em;
  font-weight: 500;
}
.alert-close {
  top: 50%;
  right: 20px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.alert-close button svg {
  width: 18px;
  height: 18px;
  color: #6c7388;
}
.alert.warning {
  border-color: #FBBF14;
  -webkit-box-shadow: 0px 0px 2px #FBBF14;
  -moz-box-shadow: 0px 0px 2px #FBBF14;
  -ms-box-shadow: 0px 0px 2px #FBBF14;
  -o-box-shadow: 0px 0px 2px #FBBF14;
  box-shadow: 0px 0px 2px #FBBF14;
  background: rgba(251, 191, 20, 0.16);
}
.alert.warning .alert-icon {
  background: #FBBF14;
}
.alert.warning .alert-text span {
  color: #FBBF14;
}
.alert.warning .alert-close button svg {
  color: rgba(251, 191, 20, 0.5);
}
.alert.success {
  border-color: #61e3d0;
  -webkit-box-shadow: 0px 0px 2px #61e3d0;
  -moz-box-shadow: 0px 0px 2px #61e3d0;
  -ms-box-shadow: 0px 0px 2px #61e3d0;
  -o-box-shadow: 0px 0px 2px #61e3d0;
  box-shadow: 0px 0px 2px #61e3d0;
  background: rgba(79, 244, 97, 0.16);
}
.alert.success .alert-icon {
  background: #61e3d0;
}
.alert.success .alert-text span {
  color: #61e3d0;
}
.alert.success .alert-close button svg {
  color: rgba(79, 244, 97, 0.5);
}
.alert.error {
  border-color: #f44d4d;
  -webkit-box-shadow: 0px 0px 2px #f44d4d;
  -moz-box-shadow: 0px 0px 2px #f44d4d;
  -ms-box-shadow: 0px 0px 2px #f44d4d;
  -o-box-shadow: 0px 0px 2px #f44d4d;
  box-shadow: 0px 0px 2px #f44d4d;
  background: rgba(244, 77, 77, 0.16);
}
.alert.error .alert-icon {
  background: #f44d4d;
}
.alert.error .alert-text span {
  color: #f44d4d;
}
.alert.error .alert-close button svg {
  color: rgba(244, 77, 77, 0.5);
}
.alert.info {
  border-color: #006FB6;
  -webkit-box-shadow: 0px 0px 2px #006FB6;
  -moz-box-shadow: 0px 0px 2px #006FB6;
  -ms-box-shadow: 0px 0px 2px #006FB6;
  -o-box-shadow: 0px 0px 2px #006FB6;
  box-shadow: 0px 0px 2px #006FB6;
  background: rgba(0, 111, 182, 0.16);
}
.alert.info .alert-icon {
  background: #006FB6;
}
.alert.info .alert-text span {
  color: #006FB6;
}
.alert.info .alert-close button svg {
  color: rgba(0, 111, 182, 0.5);
}


.widget-box {
  padding: 20px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #1e2029;
}
.widget-box-head {
  margin: 0 0 20px;
}
.widget-box-head span {
  color: #fff;
  font-size: .9em;
  font-weight: 600;
}
.widget-box-head span strong {
  color: #61e3d0;
}
.widget-box-head .square-arrows button {
  width: auto;
  height: auto;
}
.widget-box-content > p {
  line-height: 1.6;
  color: #6c7388;
  font-size: .9em;
  font-weight: 500;
}
.widget-box-content > ul {
  margin: 20px 0 0;
}
.widget-box-content > ul > li {
  color: #6c7388;
  font-size: .9em;
  font-weight: 500;
}
.widget-box-content > ul > li:nth-child(n+2) {
  margin: 10px 0 0;
}
.widget-box-content-table-list {
  margin: 10px 0 0;
}
.widget-box-content-table-list ul {
  margin: 0 0 -10px;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.widget-box-content-table-list ul li span {
  color: #6c7388;
  font-size: .9em;
  font-weight: 500;
}
.widget-box-content-table-list ul li p {
  color: #fff;
  font-size: .9em;
  font-weight: 500;
}
.widget-box-content-list ul {
  margin: -5px;
}
.widget-box-content-list ul li {
  padding: 5px;
}
.widget-box-content-list ul li img {
  width: 100%;
}
.widget-box-content-list ul li .tooltip {
  padding: 7px 15px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}
.widget-box-content-list ul li:hover .tooltip {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -10px);
  -moz-transform: translate(-50%, -10px);
  -ms-transform: translate(-50%, -10px);
  -o-transform: translate(-50%, -10px);
  transform: translate(-50%, -10px);
}
.widget-box-content-friend-list ul {
  margin: -10px;
}
.widget-box-content-friend-list ul li {
  padding: 10px;
}
.widget-box-content-friend-list > a {
  margin: 20px 0 0;
  padding: 13px 15px;
  width: 100%;
  color: #fff;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  font-size: .9em;
  font-weight: 600;
  background: #42e3d0;
}
.widget-box-content-friend-list .requests-box {
  padding: 0;
}
.widget-box-tabs#group .requests-box-actions ul li button svg {
  fill: #6c7388;
}
.widget-box-tabs#group .requests-box-actions ul li button:hover svg {
  fill: #fff;
}
.widget-box-nav {
  margin: 0 0 20px;
}
.widget-box-nav ul li a {
  padding: 5px 0;
  color: #6c7388;
  font-size: .9em;
  font-weight: 600;
  border-bottom: 3px solid transparent;
}
.widget-box-nav ul li.tab-active a {
  color: #fff;
  border-color: #61e3d0;
}
.widget-box-nav ul li:nth-child(n+2) {
  margin: 0 0 0 20px;
}
.widget-box-list ul {
  margin: -10px;
}
.widget-box-list ul li {
  padding: 10px;
}
.widget-box-badge-info {
  margin: 20px 0 0;
}
.widget-box-badge-info span {
  color: #fff;
  font-size: .9em;
  font-weight: 600;
}
.widget-box-badge-info p {
  margin: 10px 0 0;
  line-height: 1.4;
  color: #6c7388;
  font-size: 0.85em;
  font-weight: 500;
}
.widget-box-badge-progress {
  margin: 40px 0 0;
}
.badges .progress {
  width: inherit !important;
  height: inherit; !important;
  transform: inherit !important;
}
.widget-box-activities ul li:nth-child(n+2) {
  margin: 20px 0 0;
}
.widget-box-quests ul li:nth-child(n+2) {
  margin: 30px 0 0;
}

.area > ul {
  margin: -10px;
}
.area > ul > li {
  padding: 10px;
}
.widget-box-quests > a {
  margin: 30px 0 0;
  padding: 12px 15px;
  color: #6c7388;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  font-size: .9em;
  font-weight: 600;
  border: 1px solid #3f485f;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.widget-box-quests > a svg {
  margin: 0 0 0 10px;
  width: 22px;
  height: 22px;
  color: #6c7388;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.widget-box-quests > a:hover {
  color: #fff;
  border-color: transparent;
  background: #42e3d0;
}
.widget-box-quests > a:hover svg {
  color: #fff;
}
.widget-box-quests .progress-area {
  background: #121621;
}
.widget-box .requests-box,
.widget-box .notifications-box,
.widget-box .sidebar-quest-box {
  padding: 0;
}
.widget-box:nth-child(n+2) {
  margin: 20px 0 0;
}
.widget-box.no-friends .widget-box-content {
  user-select: none;
  position: relative;
}


.form-group {
  margin: -10px;
}
.form-group > button {
  right: 28px;
  color: #6c7388;
  font-size: .9em;
  font-weight: 600;
}
.form-element {
  padding: 10px;
}
.form-element > label {
  padding: 0 5px;
  top: 28px;
  left: 25px;
  cursor: text;
  user-select: none;
  color: #6c7388;
  font-size: .9em;
  font-weight: 500;
  background: #1e2029;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.form-element input {
  padding: 17px 18px;
  width: 100%;
  outline: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  color: #fff;
  background: transparent;
  font-size: .9em;
  font-weight: 600;
  border: 1px solid #3f485f;
  -webkit-transition: border 0.3s ease-in-out;
  -moz-transition: border 0.3s ease-in-out;
  -ms-transition: border 0.3s ease-in-out;
  -o-transition: border 0.3s ease-in-out;
  transition: border 0.3s ease-in-out;
}
.form-element input:focus {
  border-color: #42e3d0;
}
.form-element input:focus + label {
  top: 4px;
  left: 24px;
  font-size: 0.75em;
  font-weight: 500;
}
.form-element input:valid + label {
  top: 4px;
  left: 24px;
  font-size: 0.75em;
  font-weight: 500;
}
.form-element input:valid + .form-element-reset {
  display: block;
}
.form-element input::placeholder {
  color: #6c7388;
  font-size: inherit;
  font-weight: 500;
}
.form-element textarea {
  padding: 17px 18px;
  width: 100%;
  resize: none;
  outline: none;
  min-height: 100px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  color: #fff;
  background: transparent;
  font-size: .9em;
  font-weight: 600;
  border: 1px solid #3f485f;
  -webkit-transition: border 0.3s ease-in-out;
  -moz-transition: border 0.3s ease-in-out;
  -ms-transition: border 0.3s ease-in-out;
  -o-transition: border 0.3s ease-in-out;
  transition: border 0.3s ease-in-out;
}
.form-element textarea:focus {
  border-color: #42e3d0;
}
.form-element textarea:focus + label {
  top: 4px;
  left: 24px;
  font-size: 0.75em;
  font-weight: 500;
}
.form-element textarea:valid + label {
  top: 4px;
  left: 24px;
  font-size: 0.75em;
  font-weight: 500;
}
.form-element textarea::placeholder {
  color: #6c7388;
  font-size: inherit;
  font-weight: 500;
}
.form-element select {
  padding: 17px 52px 17px 18px;
  width: 100%;
  outline: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  font-size: .9em;
  font-weight: 600;
  border: 1px solid #3f485f;
  -webkit-transition: border 0.3s ease-in-out;
  -moz-transition: border 0.3s ease-in-out;
  -ms-transition: border 0.3s ease-in-out;
  -o-transition: border 0.3s ease-in-out;
  transition: border 0.3s ease-in-out;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%236c7388' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: calc(100% - 14px);
}
.form-element select option {
background: #1e2029;
}
.form-element select:focus {
  border-color: #42e3d0;
}
.form-element select:focus + label {
  top: 4px;
  left: 24px;
  font-size: 0.75em;
  font-weight: 500;
}
.form-element select:valid + label {
  top: 4px;
  left: 24px;
  font-size: 0.75em;
  font-weight: 500;
}
.form-element select::placeholder {
  color: #6c7388;
}
.form-element > button,
.form-element > a {
  padding: 15px 30px;
  outline: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  color: #14161d;
  background: #6c7388;
  font-size: .8em;
  font-weight: 600;
  border: 1px solid transparent;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}
.form-element > button svg,
.form-element > a svg {
  width: 22px;
  height: 22px;
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.form-element > button:active,
.form-element > a:active {
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
}
.form-element > button.button-first,
.form-element > a.button-first {
  background: #42e3d0;
}
.form-element > button.button-second,
.form-element > a.button-second {
  background: #42e3d0;
}
.form-element > button.button-third,
.form-element > a.button-third {
  color: #fff;
  background: transparent;
  border-color: #fff;
}
.form-element > button.button-third svg,
.form-element > a.button-third svg {
  fill: none;
  color: #fff;
}
.form-element > button.button-third.active,
.form-element > a.button-third.active {
  color: #fff;
  background: #42e3d0;
  border-color: transparent;
}
.form-element > button.button-third.active svg,
.form-element > a.button-third.active svg {
  color: #fff;
}
.form-element > button.just-icon svg,
.form-element > a.just-icon svg {
  margin: 0;
}
.form-element-end-icon {
  top: 50%;
  right: 14px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.form-element-end-icon button {
  padding: 14px;
}
.form-element-end-icon button svg {
  width: 22px;
  height: 22px;
  color: #6c7388;
}
.form-element-icon {
  top: 15px;
  left: 15px;
}
.form-element-icon + input {
  padding: 17px 18px 17px 65px;
}
.form-element-icon + input:valid + label, .form-element-icon + input:focus + label {
  left: 70px;
}
.form-element-icon + input + label {
  left: 70px;
}
.form-element-reset {
  top: 23px;
  right: 29px;
  display: none;
}
.form-element-reset button svg {
  width: 22px;
  height: 22px;
  color: #6c7388;
}
.form-link a {
  color: #6c7388;
  font-size: .9em;
  font-weight: 600;
  -webkit-transition: color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}
.form-link a:hover {
  color: #fff;
}
.form-actionbar {
  bottom: 13px;
  width: calc(100% - 20px);
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  -ms-border-radius: 0 0 6px 6px;
  -o-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  border: 1px solid #3f485f;
  background: #1e2029;
}
.form-actionbar ul li {
  padding: 5px;
}
.form-actionbar ul li button {
  padding: 5px;
}
.form-actionbar ul li button svg {
  width: 22px;
  height: 22px;
  fill: #6c7388;
}
.form-actionbar + textarea {
  margin: 0 0 43px;
  min-height: 194px;
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  -ms-border-radius: 6px 6px 0 0;
  -o-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}

.poll-box {
  margin: 20px 0 0;
  padding: 30px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #282c3a;
  -webkit-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.12);
  -moz-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.12);
  -ms-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.12);
  -o-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.12);
  box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.12);
}
.poll-header span {
  color: #fff;
  font-size: .9em;
  font-weight: 600;
}
.poll-header p {
  margin: 5px 0 0;
  color: #6c7388;
  font-size: 0.85em;
  font-weight: 500;
}
.poll-content {
  margin: 30px 0 0;
}
.poll-vote ul li:nth-child(n+2) {
  margin: 15px 0 0;
}
.poll-result ul li:nth-child(n+2) {
  margin: 20px 0 0;
}
.poll-footer {
  margin: 30px 0 0;
}
.poll-footer .form-element button {
  padding-top: 12px;
  padding-bottom: 12px;
}
.poll-create {
  padding: 20px;
}
.poll-create-box span {
  color: #fff;
  font-size: .9em;
  font-weight: 600;
}
.poll-create-box .form-group {
  margin: 10px -10px -10px;
}
.poll-create-box .form-element input {
  padding: 17px 61px 17px 18px;
}
.poll-create-box-delete {
  top: 50%;
  right: 10px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.poll-create-box-delete button {
  padding: 10px;
  border-left: 1px solid #3f485f;
}
.poll-create-box-delete button svg {
  width: 22px;
  height: 22px;
  color: #6c7388;
}
.poll-create-box:nth-child(n+2) {
  margin: 20px 0 0;
}

.image-upload-button label {
  cursor: pointer;
}
.image-upload-button label input {
  display: none;
}
.image-upload-button label span svg {
  width: 22px;
  height: 22px;
  color: #6c7388;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.image-upload-button label span:hover svg {
  color: #fff;
}
.image-upload-preview {
  margin: 10px 0 0;
}
.image-upload-preview ul {
  margin: -10px;
}
.image-upload-preview ul li {
  padding: 10px;
}
.image-upload-preview ul li a img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #1e2029;
}
.image-upload-preview ul li button {
  top: 20px;
  right: 20px;
  width: 22px;
  height: 22px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  background: #fff;
}
.image-upload-preview ul li button svg {
  width: 16px;
  height: 16px;
  color: #1e2029;
}

.tab-content {
  display: none;
}
.tab-content.tab-active {
  display: block;
}

.post {
  overflow: hidden;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #1e2029;
}
.post-header {
  padding: 20px;
}
.post-content {
  padding: 0 20px;
}
.post-content > p {
  line-height: 22px;
  line-height: 1.6;
  color: #fff;
  font-size: .8em;
  font-weight: 500;
}
.post-content > p:nth-child(n+2) {
  margin: 20px 0 0;
}
.post-content-image {
  margin: 20px -20px 0;
}
.post-content-image img {
  width: 100%;
}
.post-content-images {
  margin: 20px 0 0;
}
.post-content-images ul {
  margin: -5px;
}
.post-content-images ul li {
  padding: 5px;
}
.post-content-images ul li img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
}
.post-content-images ul li:nth-child(1) img, .post-content-images ul li:nth-child(2) img {
  height: 240px;
}
.post-content-images-on {
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: rgba(64, 208, 79, 0.9);
}
.post-content-images-on span {
  color: #fff;
  font-size: 1.5em;
  font-weight: 600;
}
.post-action {
  margin: 20px 20px 0;
  padding: 20px 0;
  border-top: 1px solid rgba(63, 72, 95, 0.3);
}
.post-action .reactions > ul > li > img {
  border-color: #1e2029;
}
.post-action .reactions > ul > li .tooltip {
  left: 0;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.post-action .reactions > ul > li:hover .tooltip {
  -webkit-transform: translate(0, -10px);
  -moz-transform: translate(0, -10px);
  -ms-transform: translate(0, -10px);
  -o-transform: translate(0, -10px);
  transform: translate(0, -10px);
}
.post-action .reactions .mobile-reactions .tooltip {
  width: 104px;
}
.post-action .reactions .mobile-reactions .tooltip ul {
  margin: 0;
}
.post-action .reactions .mobile-reactions .tooltip ul li {
  padding: 0;
}
.post-action .reactions .mobile-reactions .tooltip ul li img {
  width: 22px;
  height: 22px;
}
.post-action .reactions .mobile-reactions .tooltip ul li:nth-child(n+2) {
  margin: 5px 0 0;
}
.post-action > ul {
  margin: 0 -10px;
}
.post-action > ul > li {
  padding: 0 10px;
}
.post-action > ul > li button {
  color: #fff;
  font-size: .8em;
  font-weight: 600;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.post-action > ul > li button:hover {
  color: #4ff461;
}
.post-footer {
  padding: 10px 20px;
  background: #21232e;
  border-top: 1px solid rgba(63, 72, 95, 0.3);
}
.post-footer > ul > li > button {
  padding: 10px 40px;
  color: #6c7388;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  font-size: .8em;
  font-weight: 600;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.post-footer > ul > li > button svg {
  width: 22px;
  height: 22px;
  color: #6c7388;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.post-footer > ul > li > button span {
  margin: 0 0 0 10px;
}
.post-footer > ul > li > button:hover {
  color: #fff;
  background: #293145;
  -webkit-box-shadow: 3px 20px 20px 0 rgba(28, 33, 47, 0.4);
  -moz-box-shadow: 3px 20px 20px 0 rgba(28, 33, 47, 0.4);
  -ms-box-shadow: 3px 20px 20px 0 rgba(28, 33, 47, 0.4);
  -o-box-shadow: 3px 20px 20px 0 rgba(28, 33, 47, 0.4);
  box-shadow: 3px 20px 20px 0 rgba(28, 33, 47, 0.4);
}
.post-footer > ul > li > button:hover svg {
  color: #42e3d0;
}
.post-footer > ul > li > button.active {
  color: #fff;
  background: #1b1d24;
  -webkit-box-shadow: 3px 20px 20px 0 rgba(28, 33, 47, 0.4);
  -moz-box-shadow: 3px 20px 20px 0 rgba(28, 33, 47, 0.4);
  -ms-box-shadow: 3px 20px 20px 0 rgba(28, 33, 47, 0.4);
  -o-box-shadow: 3px 20px 20px 0 rgba(28, 33, 47, 0.4);
  box-shadow: 3px 20px 20px 0 rgba(28, 33, 47, 0.4);
}
.post-footer > ul > li > button.active svg {
  color: #4ff461;
}
.post-comment {
  border-top: 1px solid rgba(63, 72, 95, 0.3);
}
.post-comment > ul > li:nth-child(n+2) {
  border-top: 1px solid rgba(63, 72, 95, 0.3);
}
.post-comment-box {
  padding: 20px;
  background: #1e2029;
}
.post-comment-box .user-medium-text > span {
  line-height: 1.4;
}
.post-comment-box-action {
  margin: 20px 0 0;
}

.post-comment-box-action > ul {
  margin: 0 -10px;
}
.post-comment-box-action > ul > li {
  padding: 0 10px;
}
.post-comment-box-action > ul > li button {
  color: #6c7388;
  font-size: 0.85em;
  font-weight: 600;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.post-comment-box-action > ul > li button:hover {
  color: #4ff461;
}
.post-comment-box-action > ul > li button img {
  margin: 0 10px 0 0;
}
.post-comment-box-action > ul > li > span {
  color: #6c7388;
  font-size: 0.85em;
  font-weight: 500;
}
.post-comment-box-action .reactions > ul > li > img {
  width: 24px;
  height: 24px;
  border-color: #1e2029;
}
.post-comment-box-action .reactions span {
  font-size: 0.85em;
  font-weight: 600;
}
.post-comment-box-action .options-drop-content {
  bottom: 100%;
  -webkit-transform: translate(0, 20px);
  -moz-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  -o-transform: translate(0, 20px);
  transform: translate(0, 20px);
}
.post-comment-more {
  border-top: 1px solid rgba(63, 72, 95, 0.3);
}
.post-comment-more button {
  padding: 20px;
  width: 100%;
  color: #fff;
  font-size: .8em;
  font-weight: 600;
}
.post-comment-more button strong {
  color: #4ff461;
}
.post-comment-write {
  padding: 20px;
  border-top: 1px solid rgba(63, 72, 95, 0.3);
}
.post-comment-write .user-medium {
  margin: 0 20px 0 0;
}
.post-comment-reply-box {
  padding: 20px 40px;
  background: #1e2029;
  border-top: 1px solid rgba(63, 72, 95, 0.3);
}


.user-mini {
  margin: 5px 0 0;
}
.user-mini a img {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}
.user-mini span {
  margin: 0 0 0 5px;
  color: #fff;
  font-size: 0.85em;
  font-weight: 600;
}
.user-medium-image img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}
.user-medium-text {
  margin: 0 0 0 10px;
  min-width: 0;
}
.user-medium-text > span {
  color: #6c7388;
  font-size: .8em;
  font-weight: 500;
}
.user-medium-text > span a {
  color: #fff;
  font-size: inherit;
  font-weight: 600;
}
.user-medium-text > span .badge {
  margin: 0 0 0 10px;
}
.user-medium-text p {
  margin: 5px 0 0;
  color: #e7e7e7;
  line-height: 20px;
  font-size: 0.85em;
  font-weight: 500;
}

.post-action {
  margin: 20px 20px 0;
  padding: 20px 0;
  border-top: 1px solid rgba(63, 72, 95, 0.3);
}
.post-action .reactions > ul > li > img {
  border-color: #1e2029;
}
.post-action .reactions > ul > li .tooltip {
  left: 0;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.post-action .reactions > ul > li:hover .tooltip {
  -webkit-transform: translate(0, -10px);
  -moz-transform: translate(0, -10px);
  -ms-transform: translate(0, -10px);
  -o-transform: translate(0, -10px);
  transform: translate(0, -10px);
}
.post-action .reactions .mobile-reactions .tooltip {
  width: 104px;
}
.post-action .reactions .mobile-reactions .tooltip ul {
  margin: 0;
}
.post-action .reactions .mobile-reactions .tooltip ul li {
  padding: 0;
}
.post-action .reactions .mobile-reactions .tooltip ul li img {
  width: 22px;
  height: 22px;
}
.post-action .reactions .mobile-reactions .tooltip ul li:nth-child(n+2) {
  margin: 5px 0 0;
}
.post-action > ul {
  margin: 0 -10px;
}
.post-action > ul > li {
  padding: 0 10px;
}
.post-action > ul > li button {
  color: #fff;
  font-size: .8em;
  font-weight: 600;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.post-action > ul > li button:hover {
  color: #4ff461;
}

.reactions > ul > li > img {
  width: 32px;
  height: 32px;
  cursor: pointer;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  border: 4px solid #121621;
}
.reactions > ul > li:nth-child(n+2) {
  margin: 0 0 0 -10px;
}
.reactions > ul > li:hover > .tooltip {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -20px);
  -moz-transform: translate(-50%, -20px);
  -ms-transform: translate(-50%, -20px);
  -o-transform: translate(-50%, -20px);
  transform: translate(-50%, -20px);
}
.reactions span {
  margin: 0 0 0 5px;
  color: #fff;
  font-size: .8em;
  font-weight: 600;
}
.reactions-drop {
  left: 0;
  bottom: calc(100% + 10px);
  padding: 10px;
  width: 362px;
  opacity: 0;
  z-index: 50;
  visibility: hidden;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  background: #121621;
  -webkit-transform: translate(0, 20px);
  -moz-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  -o-transform: translate(0, 20px);
  transform: translate(0, 20px);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.reactions-drop ul {
  margin: -5px;
}
.reactions-drop ul li {
  padding: 5px;
}
.reactions-drop ul li button img {
  width: 34px;
  height: 34px;
  -webkit-transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -ms-transition: transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.reactions-drop ul li button .tooltip {
  padding: 5px 10px;
}
.reactions-drop ul li button .tooltip small {
  font-size: 0.75em;
  font-weight: 600;
}
.reactions-drop ul li button:hover img {
  -webkit-transform: translate(0, -5px);
  -moz-transform: translate(0, -5px);
  -ms-transform: translate(0, -5px);
  -o-transform: translate(0, -5px);
  transform: translate(0, -5px);
}
.reactions-drop ul li button:hover .tooltip {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -20px);
  -moz-transform: translate(-50%, -20px);
  -ms-transform: translate(-50%, -20px);
  -o-transform: translate(-50%, -20px);
  transform: translate(-50%, -20px);
}
.reactions-drop.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.post .tooltip {
  padding: 15px;
  position: absolute !important;
  bottom: calc(100% - 10px);
  left: 50%;
  opacity: 0;
  z-index: 10;
  visibility: hidden;
  pointer-events: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  white-space: nowrap;
  -webkit-transform: translate(-50%, 0px);
  -moz-transform: translate(-50%, 0px);
  -ms-transform: translate(-50%, 0px);
  -o-transform: translate(-50%, 0px);
  transform: translate(-50%, 0px);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: #1e2029;
  -webkit-box-shadow: 3px 20px 20px 0 rgba(18, 22, 33, 0.4);
  -moz-box-shadow: 3px 20px 20px 0 rgba(18, 22, 33, 0.4);
  -ms-box-shadow: 3px 20px 20px 0 rgba(18, 22, 33, 0.4);
  -o-box-shadow: 3px 20px 20px 0 rgba(18, 22, 33, 0.4);
  box-shadow: 3px 20px 20px 0 rgba(18, 22, 33, 0.4);
}
.post .tooltip small {
  color: #fff;
  font-size: .8em;
  font-weight: 600;
}
.post .tooltip small img {
  margin: 0 10px 0 0;
  width: 22px;
  height: 22px;
}
.post .tooltip span {
  color: #fff;
  font-size: .8em;
  font-weight: 500;
}
.post .tooltip p {
  color: #fff;
  font-size: 0.85em;
  font-weight: 600;
}
.post .tooltip ul {
  margin: 10px -2px -2px;
}
.post .tooltip ul li {
  padding: 2px 0;
  color: #fff;
  font-size: .8em;
  font-weight: 500;
}
.tooltip-area:hover .post .tooltip {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -10px);
  -moz-transform: translate(-50%, -10px);
  -ms-transform: translate(-50%, -10px);
  -o-transform: translate(-50%, -10px);
  transform: translate(-50%, -10px);
}

.checkbox label {
  cursor: pointer;
}
.checkbox label input {
  display: none;
}
.checkbox label input[type=radio] + .poll-box .checkbox-icon {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}
.checkbox label input[type=radio] + .poll-box .checkbox-icon::before {
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border: none;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  background: #1e2029;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.checkbox label input:checked + .poll-box .checkbox-icon {
  background: #42e3d0;
  border-color: transparent;
}
.checkbox label input:checked + .poll-box .checkbox-icon::before {
  opacity: 1;
}
.poll-box .checkbox-icon {
  width: 22px;
  height: 22px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #1e2029;
  border: 1px solid #3f485f;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.poll-box .checkbox-icon::before {
  content: "";
  top: 3px;
  left: 7px;
  width: 6px;
  height: 12px;
  opacity: 0;
  position: absolute;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  border-top: 0 solid transparent;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  border-left: 0 solid transparent;
}
.poll-box .checkbox-text {
  margin: 0 0 0 10px;
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
}
.comments-write {
  padding: 20px;
  background: #1e2029;
}


.comments-write .user-medium {
  margin: 0 20px 0 0;
}
.comments-write .form-group button:disabled {
  opacity: 0.5;
}
.comments-write .form-element input {
  padding: 17px 80px 17px 18px;
}
.comments-reply {
  display: none;
  border-top: 1px solid rgba(63, 72, 95, 0.3);
}


.see-more {
  margin: 30px 0 0;
}
.see-more button {
  width: 100%;
  padding: 20px;
  overflow: hidden;
  color: #fff;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  font-size: .8em;
  font-weight: 600;
  background: #1e2029;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.see-more button:disabled {
  opacity: 0.7;
  pointer-events: none;
}
.see-more button:active {
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
}


.quests-box{
  overflow: hidden;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #1c212f;
}
.badges-box {
  padding: 32px 28px 0;
  /* overflow: hidden; */
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #181a25;
}
.quests-box-cover img {
  width: 100%;
}
.quests-box-exp{
  top: 10px;
  right: -6px;
}
.badges-box-cover>.badges-box-exp{
  position: absolute;
  top: 20px;
  right: -6px;
}
.badges-box-exp span{
  height: 32px;
  padding: 0 14px;
  border-radius: 200px;
  background-color: #293249;
  color: #fff;
  box-shadow: 3px 5px 20px 0 rgb(0 0 0 / 12%);
  font-size: .875rem;
  font-weight: 700;
  line-height: 32px;
}
.quests-box-exp span{
  padding: 10px 15px;
  color: #fff;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  text-transform: uppercase;
  font-size: 0.75em;
  font-weight: 700;
  background: #1c212f;
  -webkit-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.12);
  -moz-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.12);
  -ms-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.12);
  -o-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.12);
  box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.12);
}
.quests-box-exp span svg,
.badges-box-exp span svg {
  margin: -1px 5px 0 0;
  width: 8px;
  height: 8px;
  fill: #4ff461;
}
.quests-box-content {
  padding: 20px;
}
.badges-box-content{
  padding: 20px 0;
}
.quests-box-icon{
  margin: -46px -6px 0;
}
.badges-box-icon {
  top: 32px;
  left: 28px;
}
.quests-box-icon img{
  width: 58px;
  height: 58px;
  object-fit: cover;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  border: 6px solid #1c212f;
}
.badges-box-icon img {
  width: 32px;
  height: 35px;
  object-fit: cover;
}
.quests-box-text,
.badges-box-text {
  margin: 0 0 40px;
}
.quests-box-text span,
.badges-box-text span {
  margin: 10px 0 0;
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
}
.quests-box-text p,
.badges-box-text p{
  margin: 5px 0 0;
  line-height: 1.4;
  color: #6c7388;
  font-size: 0.85em;
  font-weight: 500;
}
.quests-box-progress,
.badges-box-progress {
  margin-top: auto;
}
.quests-box-completed-user,
.badges-box-completed-user {
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(63, 72, 95, 0.3);
}
.quests-box-completed-user ul li img,
.badges-box-completed-user ul li img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  border: 4px solid #1c212f;
}
.quests-box-completed-user ul li:nth-child(n+2),
.badges-box-completed-user ul li:nth-child(n+2) {
  margin: 0 0 0 -10px;
}
.quests-box-completed-user-text,
.badges-box-completed-user-text {
  margin: 0 0 0 20px;
}
.quests-box-completed-user-text span,
.badges-box-completed-user-text span,
.badges-box-empty-user-text span {
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
}
.quests-box-completed-user-text p{
  color: #6c7388;
  font-size: 0.75em;
  font-weight: 500;
}
.badges-box-completed-user-text p {
  color: #6c7388;
  font-size: 0.75em;
  font-weight: 500;
  margin: 5px 0 0;
  white-space: nowrap;
}
.badges-box-empty-user-text p {
  color: #6c7388;
  font-size: 0.75em;
  font-weight: 500;
  white-space: nowrap;
}
.badges-box-cover img{
  width: 82px;
  height: 90px;
  object-fit: cover;
}
.quests-top {
  padding: 20px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #1c212f;
}
.quests-top .form-element button {
  width: 100%;
}
.quests-list {
  margin: 20px 0 0;
  border-collapse: separate;
  border-spacing: 0 20px;
}
.quests-list-header-box {
  padding: 0 20px;
}
.quests-list-header-box span {
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
}
.quests-list-body-row {
  background: #1c212f;
}
.quests-list-body-box {
  padding: 20px;
}
.quests-list-body-box span {
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
}
.quests-list-body-box span svg {
  margin: 2px 5px 0 0;
  width: 8px;
  height: 8px;
  fill: #4ff461;
}
.quests-list-body-box p {
  color: #6c7388;
  font-size: 0.95em;
  font-weight: 500;
}
.quests-list-body-box:first-child {
  max-width: 250px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.quests-list-body-box:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.quests-list .progress-area {
  width: 200px;
}
.quests-list .progress-text {
  margin: 0 0 0 20px;
}
.quests-name img {
  margin: 0 15px 0 0;
  width: 30px;
  height: 30px;
}
.all-quests {
  margin: 40px 0 0;
}

.watch-cover {
  top: 0;
  left: 0;
}
.watch-cover img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: top;
}
.watch-cover::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 5;
  background: rgba(18, 22, 33, 0.8);
}
.flow .tab-active {
    border-bottom: inherit !important;
}


.options-drop-content {
  right: 0;
  opacity: 0;
  z-index: 50;
  visibility: hidden;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  -webkit-transform: translate(0px, -20px);
  -moz-transform: translate(0px, -20px);
  -ms-transform: translate(0px, -20px);
  -o-transform: translate(0px, -20px);
  transform: translate(0px, -20px);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: #1e2029;
  -webkit-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.9);
  -moz-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.9);
  -ms-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.9);
  -o-box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.9);
  box-shadow: 3px 5px 20px 0 rgba(18, 22, 33, 0.9);
}
.options-drop-content ul {
  padding: 10px 0;
}
.options-drop-content ul li a {
  padding: 10px 20px;
  white-space: nowrap;
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.options-drop-content ul li a svg {
  margin: 0 20px 0 0;
  width: 22px;
  height: 22px;
  color: #6c7388;
  -webkit-transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -ms-transition: transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.options-drop-content ul li a img {
  margin: 0 20px 0 0;
  width: 22px;
  height: 22px;
}
.options-drop-content ul li a svg.no-stroke {
  fill: #6c7388;
}
.options-drop-content ul li a:hover {
  color: #61e3d0;
  background: #181b23;
}

.options-drop-content ul li a:hover.second {
  color: #f44d4d;
}
.options-drop-content ul li a.active {
  color: #4ff461;
  background: #181d29;
}
.options-drop-content ul li a.active svg {
  color: #4ff461;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.options-drop-content ul:nth-child(n+2) {
  border-top: 1px solid #272e42;
}
.options-drop.active button svg {
  fill: #fff;
}
.options-drop.active .options-drop-content {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

.options-drop button svg {
  width: 22px;
  height: 22px;
  fill: #6c7388;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.options-drop button:hover svg {
  fill: #fff;
}


.progress-area {
  width: 100%;
  height: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background: #121621;
}
.progress-bar {
  width: 70%;
  height: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #4f90f4, #42e3d0)
}
.progress-text {
  margin: 20px 0 0;
}
.progress-text span {
  color: #fff;
  text-transform: uppercase;
  font-size: 0.75em;
  font-weight: 700;
}
.progress-text p {
  color: #6c7388;
  font-size: 0.75em;
  font-weight: 500;
}


/*Group*/

.group-box {
  overflow: hidden;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #1c212f;
}
.group-box-cover img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  background: #11141d;
}
.group-box-content {
  margin: -43px 0 0;
  padding: 0 20px 30px;
}
.group-box-content .your-friends {
  margin: 30px 0 0;
}
.group-box-content .your-friends ul li:last-child a.last {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  color: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  justify-content: center;
  font-size: 0.85em;
  font-weight: 700;
  background: #7750F8;
  border: 4px solid #1c212f;
}
.group-box-privacy {
  top: 31px;
  right: 20px;
}
.group-box-privacy span {
  width: 44px;
  height: 44px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #7750F8;
}
.group-box-privacy span svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}
.group-box-avatar a img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  border: 6px solid #1c212f;
}
.group-box-name {
  margin: 10px 0 0;
  min-width: 0;
}
.group-box-name span {
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
}
.group-box-name p {
  margin: 5px 0 0;
  color: #6c7388;
  font-size: 0.95em;
  font-weight: 500;
}
.group-box-stats {
  margin: 30px 0 0;
}
.group-box-stats ul li {
  padding: 0 20px;
}
.group-box-stats ul li span {
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
}
.group-box-stats ul li p {
  margin: 5px 0 0;
  color: #6c7388;
  text-transform: uppercase;
  font-size: 0.75em;
  font-weight: 500;
}
.group-box-stats ul li:nth-child(n+2)::before {
  content: "";
  top: 50%;
  left: 0;
  width: 1px;
  height: 20px;
  position: absolute;
  background: #3f485f;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.group-box-footer {
  padding: 10px;
  background: #202535;
  border-top: 1px solid rgba(63, 72, 95, 0.3);
}
.group-box-footer button {
  padding: 10px 20px;
  width: 100%;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.group-box-footer button svg {
  width: 22px;
  height: 22px;
  fill: #6c7388;
  -webkit-transition: fill 0.3s ease-in-out;
  -moz-transition: fill 0.3s ease-in-out;
  -ms-transition: fill 0.3s ease-in-out;
  -o-transition: fill 0.3s ease-in-out;
  transition: fill 0.3s ease-in-out;
}
.group-box-footer button:hover {
  background: #7750F8;
}
.group-box-footer button:hover svg {
  fill: #fff;
}
.group-management ul {
  margin: -10px;
}
.group-management ul li {
  padding: 10px;
}
.group-management-box {
  overflow: hidden;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #1c212f;
}
.group-management-box-cover img {
  width: 100%;
  height: 70px;
  object-fit: cover;
}
.group-management-box-cover span {
  width: 100%;
  height: 70px;
  background: #202535;
  border-bottom: 1px dashed #3f485f;
}
.group-management-box-content {
  margin: -43px 0 0;
  padding: 0 30px;
}
.group-management-box-avatar a img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  border: 6px solid #1c212f;
}
.group-management-box-avatar a span {
  width: 80px;
  height: 80px;
  z-index: 1;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  background: #1c212f;
  border: 1px dashed #3f485f;
}
.group-management-box-avatar a span svg {
  width: 22px;
  height: 22px;
  fill: #7750F8;
}
.group-management-box-name {
  margin: 15px 0 0;
}
.group-management-box-name span {
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
}
.group-management-box-name p {
  margin: 5px 0 0;
  color: #6c7388;
  font-size: 0.95em;
  font-weight: 500;
}
.group-management-box-footer {
  padding: 30px;
}
.group-management-box-footer .form-element > button,
.group-management-box-footer .form-element > a {
  width: 100%;
}
.group-profile-top {
  margin: -107px -30px 0;
  background: #1c212f;
}
.group-profile-cover img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}
.group-profile-cover::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(to top, transparent, #121621);
}
.group-profile-info {
  padding: 30px 30px 30px 170px;
}
.group-profile-info-right ul {
  margin: 0 -30px;
}
.group-profile-info-right ul li {
  padding: 0 30px;
}
.group-profile-info-right ul li > span {
  color: #fff;
  font-size: 1.3em;
  font-weight: 700;
  text-transform: uppercase;
}
.group-profile-info-right ul li > p {
  margin: 5px 0 0;
  color: #6c7388;
  font-size: 0.75em;
  font-weight: 500;
  text-transform: uppercase;
}
.group-profile-info-right ul li:nth-child(n+2)::before {
  content: "";
  top: 50%;
  left: 0;
  width: 1px;
  height: 20px;
  position: absolute;
  background: #3f485f;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.group-profile-info-right-buttons {
  margin: 0 0 0 40px;
}
.group-profile-info-right-buttons .form-element button,
.group-profile-info-right-buttons .form-element a {
  padding: 12px 17px;
}
.group-profile-info-right-buttons .form-element button.button-second svg,
.group-profile-info-right-buttons .form-element a.button-second svg {
  fill: #fff;
}
.group-profile-visibility span {
  padding: 10px 15px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  color: #7750F8;
  font-size: 0.95em;
  font-weight: 700;
  background: rgba(119, 80, 248, 0.1);
}
.group-profile-visibility span svg {
  margin: 0 10px 0 0;
  width: 22px;
  height: 22px;
  fill: #7750F8;
}
.group-profile-avatar {
  padding: 10px;
  top: -40px;
  left: 30px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  background: #1c212f;
}
.group-profile-avatar img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}
.group-profile-name {
  margin: 0 0 0 20px;
}
.group-profile-name h1 {
  color: #fff;
  font-size: 1.3em;
  font-weight: 700;
}
.group-profile-name p {
  margin: 5px 0 0;
  color: #6c7388;
  font-size: 0.75em;
  font-weight: 500;
  text-transform: uppercase;
}
.group-profile-nav {
  margin: 20px 0 0;
}
.group-profile-content {
  margin: 20px 0 0;
}
.group-profile-content-left {
  margin: 0 20px 0 0;
}
.group-profile-content-left > ul > li:nth-child(n+2) {
  margin: 20px 0 0;
}
.group-profile-stats ul {
  margin: -10px;
}
.group-profile-stats ul li {
  padding: 10px;
}
.group-profile-stats .stats {
  padding: 30px 20px;
}
.group-profile-stats .stats.primary, .group-profile-stats .stats.secondary {
  background-position: 100% 100%;
}
.group-profile-desc {
  margin: 20px 0 0;
}


.navigation-slide {
  padding: 0 40px;
  overflow: hidden;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #1c212f;
}
.navigation-slide ul li a {
  padding: 27px 30px;
  border-bottom: 4px solid transparent;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.navigation-slide ul li a svg {
  width: 22px;
  height: 22px;
  fill: #6c7388;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.navigation-slide ul li a span {
  top: 50%;
  opacity: 0;
  visibility: hidden;
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: translate(0, calc(-50% + 20px));
  -moz-transform: translate(0, calc(-50% + 20px));
  -ms-transform: translate(0, calc(-50% + 20px));
  -o-transform: translate(0, calc(-50% + 20px));
  transform: translate(0, calc(-50% + 20px));
}
.navigation-slide ul li a:hover {
  border-color: #4ff461;
}
.navigation-slide ul li a:hover svg {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(0, -20px);
  -moz-transform: translate(0, -20px);
  -ms-transform: translate(0, -20px);
  -o-transform: translate(0, -20px);
  transform: translate(0, -20px);
}
.navigation-slide ul li a:hover span {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.navigation-slide ul li:first-child::before {
  content: "";
  top: 50%;
  left: 0;
  width: 1px;
  height: 20px;
  position: absolute;
  background: #3f485f;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.navigation-slide ul li::after {
  content: "";
  top: 50%;
  right: 0;
  width: 1px;
  height: 20px;
  position: absolute;
  background: #3f485f;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.navigation-slide ul li.active a {
  border-color: #4ff461;
}
.navigation-slide ul li.active a svg {
  fill: #4ff461;
}
.navigation-slide.user-profile-content-info-nav ul li a span {
  top: 0;
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.navigation-slide.user-profile-content-info-nav ul li a:hover span {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.navigation-slide.user-profile-content-reactions-nav ul li a span {
  top: 0;
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.navigation-slide.user-profile-content-reactions-nav ul li a:hover span {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.navigation-slide.user-profile-content-reactions-nav ul li:first-child::before {
  height: 40px;
}
.navigation-slide.user-profile-content-reactions-nav ul li::after {
  height: 40px;
}


.organized-modal {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 999;
  background: rgba(18, 22, 33, 0.9);
}
.organized-modal-body {
  margin: 50px auto;
  width: 100%;
  max-width: 800px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #1c212f;
}
.organized-modal-close {
  top: -20px;
  right: -20px;
}
.organized-modal-close button {
  width: 40px;
  height: 40px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  background: #7750F8;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  -ms-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.organized-modal-close button svg {
  width: 20px;
  height: 20px;
  color: #fff;
}
.organized-modal-close button:hover {
  background: #40d04f;
}
.organized-modal-sidebar {
  border-right: 1px solid #272e42;
}
.organized-modal-sidebar-profile-cover img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  -webkit-border-radius: 6px 0 0 0;
  -moz-border-radius: 6px 0 0 0;
  -ms-border-radius: 6px 0 0 0;
  -o-border-radius: 6px 0 0 0;
  border-radius: 6px 0 0 0;
}
.organized-modal-sidebar-profile-content {
  margin: -40px 0 0;
  padding: 0 30px 30px;
}
.organized-modal-sidebar-profile-content img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  border: 6px solid #1c212f;
}
.organized-modal-sidebar-profile-content span {
  margin: 10px 0 0;
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
}
.organized-modal-sidebar-profile-content p {
  margin: 5px 0 0;
  color: #6c7388;
  font-size: 0.85em;
  font-weight: 500;
}
.organized-modal-sidebar-menu {
  padding: 20px 20px 20px 57px;
  background: #202535;
  border-top: 1px solid #272e42;
  border-bottom: 1px solid #272e42;
}
.organized-modal-sidebar-menu ul {
  margin: -10px 0;
}
.organized-modal-sidebar-menu ul li a {
  padding: 10px 0;
  white-space: nowrap;
  color: #fff;
  font-size: 0.95em;
  font-weight: 500;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.organized-modal-sidebar-menu ul li a:hover {
  color: #7750F8;
}
.organized-modal-sidebar-menu ul li.tab-active a {
  color: #7750F8;
}
.organized-modal-sidebar-menu button {
  margin: 20px 0 0;
  color: #fff;
  font-size: 0.95em;
  font-weight: 500;
  -webkit-transition: color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}
.organized-modal-sidebar-menu button:hover {
  color: #f44d4d;
}
.organized-modal-sidebar-buttons {
  padding: 30px;
}
.organized-modal-sidebar-buttons button {
  width: 100%;
}
.organized-modal-content {
  max-height: 500px;
  overflow-y: auto;
}
.organized-modal-content-head {
  padding: 30px;
  top: 0;
  background: #1c212f;
}
.organized-modal-content-head span {
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
}
.organized-modal-content-head span strong {
  color: #4ff461;
}
.organized-modal-content-search {
  margin: 0 0 10px;
}
.organized-modal-content-in {
  padding: 5px 30px 30px;
}
.organized-modal-content-in > ul.landscape {
  margin: -10px;
}
.organized-modal-content-in > ul.landscape > li {
  padding: 10px;
}
.organized-modal-content-in > ul.landscape .user-box {
  padding: 15px;
  background: #202535;
}
.organized-modal-content-in > ul.landscape .user-box-content {
  margin: 0;
  padding: 0;
}
.organized-modal-content-in > ul.landscape .user-box-footer ul {
  margin: -5px;
}
.organized-modal-content-in > ul.landscape .user-box-footer ul li {
  padding: 5px;
}
.organized-modal-content-in > ul.landscape .user-box-footer ul li button {
  padding: 10px 15px;
  border: 1px solid transparent;
}
.organized-modal-content-in > ul.landscape .user-box-footer ul li:nth-child(1) button {
  background: rgba(119, 80, 248, 0.1);
}
.organized-modal-content-in > ul.landscape .user-box-footer ul li:nth-child(1) button svg {
  color: #7750F8;
}
.organized-modal-content-in > ul.landscape .user-box-footer ul li:nth-child(2) button {
  background: #262c3f;
}
.organized-modal-content-in > ul.landscape .user-box-footer ul li:nth-child(2) button svg {
  color: #6c7388;
}
.organized-modal-content-in > ul.landscape .user-box-footer ul li:nth-child(3) button {
  background: rgba(244, 77, 77, 0.1);
}
.organized-modal-content-in > ul.landscape .user-box-footer ul li:nth-child(3) button svg {
  color: #f44d4d;
}
.organized-modal-content-privacy ul {
  margin: -10px;
}
.organized-modal-content-privacy ul li {
  padding: 10px;
}
.organized-modal-content-alert ul li p {
  line-height: 1.6;
  color: #6c7388;
  font-size: 0.95em;
  font-weight: 500;
}
.organized-modal-content-alert ul li:nth-child(n+2) {
  margin: 20px 0 0;
}
.group-create-modal .organized-modal-content {
  max-height: 572px;
}

.group-management-modal .organized-modal-content,
.group-edit-modal .organized-modal-content {
  max-height: 609px;
}

@media (max-width: 767px) {
  .organized-modal {
      overflow-y: auto;
  }

}