body {
  font-family: 'Inter', sans-serif;
  color: #1F1F1F;
}

img {
  max-width: 100%;
  height: auto;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

.top-nav {
  background-color: #151436;
  margin-bottom: 30px;
  color: #9392AD;
}

.navbar-nav > .nav-item {
  margin: 10px;
}

.navbar a {
  color: #9392AD;
}

.search-bar {
  margin-left: 15px;
}

.search-bar input.search {
  border-radius: 20px!important;
  border: 0px;
  padding-left: 33px;
  max-width: 240px;
}

.search-bar i {
  color: #868686;
  position: absolute;
  top: 6px;
  left: 10px;
}

.navbar .btn-login {
  font-size: 38px;
  margin-left: 16px;
}

.dropdown-menu {
  background: #323164;
  border: 0;
}

.nav-item-child {
  padding: 10px 15px;
}

.nav-item-child:hover {
  background-color: #55538e;
}

.dropdown-submenu .dropdown-menu {
  right: auto;
  left: 100%;
  margin-top: -42px;
}

.container {
  max-width: 1140px;
}

section {
  margin-bottom: 40px;
}

.section-title {
  color: #1F1F1F;
  font-weight: bold;
  font-size: 25px;
  margin-bottom: 20px;
}

.section-title i {
  color: #6A58D2;
  margin-right: 10px;
}

/*
Grid Start

True Masonry by balazs_sziklai
https://codepen.io/balazs_sziklai*/

.grid-layout-1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 14px;
  grid-auto-rows: minmax(140px, auto);
  grid-auto-flow: dense;
}

.span-2 {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
  grid-row-end: span 3;
}

.span-4 {
  grid-column-end: span 3;
  grid-row-end: span 1;
}

/*End Grid*/

.grid-layout-1 .game-card__details {
  overflow: hidden;
  margin: .35714em;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  bottom: 65px;
  margin-bottom: -55px;
  opacity: 0;
}

.game-card__thumbnail {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  padding-top: 100%; /* For 1:1 ratio */
  margin: 0;
}

.game-card__thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h3.game-card__title {
  font-size: unset;
  margin: unset;
  line-height: unset;
  font-weight: bold;
}

.game-card__rating > i {
  color: #EAAA08;
}

.game-card__rating {
  font-size: 15px;
}

@media(hover: hover) and (pointer: fine) {
  .game-card:hover .game-card__thumbnail {
    background-color: #000;
  }
  .grid-layout-1 .game-card:hover .game-card__details {
    opacity: 1;
    transition: all 0.5s ease;
  }
  .game-card:hover .game-card__thumbnail img {
    opacity: 0.5;
    transform: scale(1.2);
    transition: all 0.5s ease;
  }
}

.grid-layout-2.row > * {
  padding: 0 6px;
}

.grid-layout-2 .game-card, .grid-layout-3 .game-card {
  border-radius: 16px;
  border: 1px solid #E2E2E2;
  padding: 12px;
  height: 100%;
}

.grid-layout-2 .item-grid {
  margin-bottom: 12px;
}

.grid-layout-2 .game-card__details {
  margin-top: 10px;
  color: #1F1F1F;
}

.grid-layout-2 .game-card__title, .grid-layout-3 .game-card__title {
  color: #1F1F1F;
}

.grid-layout-2 .game-card__rating, .grid-layout-3 .game-card__rating {
  margin-top: 6px;
  color: #1F1F1F;
}

.grid-layout-2 .first-item .game-card__details {
  margin-top: 0;
}

.grid-layout-2 .first-item .game-card__title {
  margin-bottom: 10px;
}

.grid-layout-2 .first-item .game-card__bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.grid-layout-2 .first-item .game-card__rating {
  float: left;
}

.grid-layout-2 .game-card__btn-play {
  background-color: #7158FA;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  float: right;
  margin-right: 25px;
}

.grid-layout-2, .grid-layout-3, .category-list-global {
  padding: 0 6px;
}

.grid-layout-3 .game-card__link {
  display: flex;
}

.grid-layout-3 .game-card__thumbnail {
  width: 70px;
  height: 70px;
  min-width: 70px;
  margin-right: 13px;
  padding-top: unset;
}

.grid-layout-3 .game-card__category {
  margin-top: 6px;
}

.grid-layout-2 .game-card:hover, .grid-layout-3 .game-card:hover, .category-list-global .category-item:hover {
  box-shadow: 0px 8px 8px -4px #10182808;
  box-shadow: 0px 20px 24px -4px #10182814;
  transition: all 0.5s ease;
}

.grid-layout-3.row > * {
  padding: 0 8px;
  margin-bottom: 16px;
}

.b-load-more-wrapper {
  text-align: center;
  margin-top: 30px;
}

.btn-load-more {
  background-color: #F9F5FF;
  border: 1px solid #7158FA;
  border-radius: 30px;
  padding: 10px 20px;
  color: #7158FA;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-muted {
  color: #A1A1A1;
}

.category-list-global .row > * {
  padding: 0 8px;
  margin-bottom: 16px;
}

.category-list-global .category-item {
  display: flex;
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

.category-item__details {
  padding: 9px;
}

.category-item__thumbnail {
  margin: 0;
}

.category-item__title {
  font-size: 16px;
  font-weight: bold;
  color: #1F1F1F;
}

.category-list-global .category-item:hover {
  transform: scale(1.1);
  transition: all 0.5s ease;
}

@media screen and (max-width: 768px){ /* Mobile Device */
  .grid-layout-2 .first-item .game-card__bottom {
    position: unset;
    margin-top: 10px;
  }
  .top-user {
    width: 80px;
    margin: 10px;
  }
  .leaderboard-cell.username {
      min-width: unset;
  }
  .leaderboard-cell.user-xp {
      margin-top: 12px;
      position: absolute;
      right: 0;
  }
  .leaderboard-cell.rank {
      display: none;
  }
}

@media screen and (max-width: 992px){ /* Mobile Device */
  .dropdown-submenu .dropdown-menu {
    margin-top: unset;
  }
}

.game-content {
  overflow: hidden;
  border-radius: 18px;
}

.game-iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 700px;
}

.game-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.rating > i {
  color: #EAAA08;
}

.play-count > i {
  color: #2f9cfd;
}

.content-wrapper {
  margin-top: 25px;
}

.single-title {
  font-weight: bold;
  font-size: 35px;
}

.single-game__header {
  width: 100%;
  border-bottom: 1px solid #E2E2E2;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.single-game__header .btn {
  margin-bottom: 8px;
}

.single-game__header-left {
  float: left;
}

.single-game__header-right {
  float: right;
}

.single-game__actions .dropdown-menu {
  background-color: #fff;
  border: 1px solid #EAECF0;
  box-shadow: 0px 1px 3px 0px #1018281A;
}

.single-game__subheading {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.single-game__tag-list, .single-game__category-list {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.single-game__tag-list .tag-item, .single-game__category-list .category-item {
  background-color: #EDEDED;
  padding: 8px 16px;
  border-radius: 8px;
  margin-right: 8px;
  margin-bottom: 6px;
  white-space: nowrap;
}

.single-game__tag-list .tag-item a, .single-game__category-list .category-item a {
  color: #868686;
}

.single-game__tag-list .tag-item:hover, .single-game__category-list .category-item:hover {
  background-color: #D7D7D7;
}

#content-leaderboard {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #EAECF0;
  box-shadow: 0px 1px 3px 0px #1018281A;
}

#content-leaderboard table {
  margin: 0;
}

.btn-capsule > i {
  margin-right: 9px;
}

.btn-capsule {
  border-radius: 20px;
  border: 1px solid #D0D5DD;
}

.btn-circle, .btn-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #D0D5DD;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-circle:hover, .btn-capsule:hover {
  background-color: #6A58D2;
  color: #fff;
}

.btn-circle.dropdown-toggle::after {
  display: none;
}

.image-404 {
  margin: 5rem 1rem;
}

.splash .btn-play {
  border-radius: 60px;
  height: 45px;
  font-weight: 500;
  color: #7158FA;
  background: #FFF;
}

.splash .btn-play::before {
  content: "";
  display: inline-block;
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #7158FA;
  vertical-align: middle;
  margin-right: 10px;
  position: relative;
  top: -2px;
}

.chevron-left::before, .chevron-right::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
}

.chevron-right::before {
  border-width: 5px 0 5px 5px; /* Adjust size as needed */
  border-color: transparent transparent transparent black; /* Chevron color */
}

.chevron-left::before {
  border-width: 5px 5px 5px 0; /* Adjust size as needed */
  border-color: transparent black transparent transparent; /* Chevron color */
}


/* Comments */

.comment-user-avatar {
  position: absolute;
  width: 50px;
  height: 50px;
}
.comment-user-avatar img {
  border-radius: 50%;
}
.comment-avatar {
  float: left;
  width: 50px;
  height: 50px;
}
.comment-avatar img {
  border-radius: 50%;
}
.comment-input {
  margin-left: 65px;
}
.comment-btn-post {
  text-align: right;
}
.comment-p {
  margin-top: 23px;
}
.comment-p .comment-date {
  float: right;
  color: #666;
  font-size: 0.8em;
}
.comment-username {
  font-weight: bold;
}
.comment-details {
  margin-left: 65px;
}
.comment-text {
  white-space: pre-line;
}
.color-red {
  color: #bb4d4d;
}
i.disabled {
  opacity: 0.5;
  pointer-events: none; 
}

/* NEW COMMENT SYSTEM */

#tpl-comment-section {
  margin-top: 30px;
  margin-bottom: 20px;
}

#comment-form {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 1px solid #E2E2E2;
}
.comment-profile-avatar {
  margin-right: 20px;
}
.comment-profile-avatar img {
  border-radius: 50%;
  float: left;
  width: 3.6rem;
  height: 3.6rem;
  max-width: 50px;
  max-height: 50px;
}
.comment-form-wrapper {
  background: #fff;
  margin-bottom: 30px;
  box-shadow: 0px 4px 8px 0px rgba(50, 50, 50, 0.1);
  border: 1px solid #E2E2E2;
  border-radius: 12px;
  padding: 15px;
  width: 100%;
}
.comment-form-wrapper textarea {
  padding: 0;
  border: 0;
}
.post-comment-btn-wrapper {
  float: right;
  margin-top: 15px;
}
textarea#comment-input {
  height: 100px;
}
.user-comment-wrapper {
  display: flex;
}
.tpl-user-comment {
  border-bottom: 1px solid #E2E2E2;
  margin-bottom: 30px;
}
.tpl-comment-children .tpl-user-comment:last-child {
  border-bottom: none;
}
img.tpl-user-comment-avatar {
  border-radius: 50%;
  float: left;
  width: 3.6rem;
  height: 3.6rem;
  max-width: 50px;
  max-height: 50px;
  margin-right: 20px;
}
.tpl-comment-children img.tpl-user-comment-avatar {
  max-width: 40px;
  max-height: 40px;
}
.tpl-comment-author {
  font-weight: bold;
}
.tpl-user-comment .comment-content {
  margin-bottom: 20px;
  width: 100%;
}
.tpl-comment-timestamp {
  margin-top: 3px;
  font-size: 15px;
  color: #797979;
}
.tpl-comment-text {
  margin-top: 13px;
  white-space: unset;
}
.comment-actions {
  margin-top: 15px;
}
.comment-action-right {
  float: right;
}
.comment-action-left {
  float: left;
}
.tpl-comment-children {
  display: block;
  margin-left: 70px;
}
.tpl-reply-form {
  display: flex;
}
.comment-reply-wrapper {
  margin-left: 70px;
  background: #fff;
  margin-bottom: 30px;
  box-shadow: 0px 4px 8px 0px rgba(50, 50, 50, 0.1);
  border: 1px solid #E2E2E2;
  border-radius: 12px;
  padding: 15px;
  width: 100%;
}
.comment-reply-wrapper textarea {
  padding: 0;
  border: 0;
}
.reply-action-buttons {
  float: right;
  margin-top: 15px;
}
.tpl-btn-cancel-reply {
  color: #797979;
}
#tpl-btn-load-more-comments {
  color: #797979;
}
.comment-require-login-wrapper {
  display: flex;
  margin-bottom: 40px;
}
.comment-require-login-wrapper .comment-alert {
  padding: 10px;
  background-color: #EDEDED;
  text-align: center;
  width: 100%;
  border-radius: 8px;
}

/* END COMMENT */

/*TOP PLAYERS */
.top-3 {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 40px;
}
.top-user {
  display: inline-block;
  text-align: center;
  margin: 15px;
  position: relative;
  white-space: nowrap;
}
.top-avatar img {
  border-radius: 50%;
  display: block;
}
.top-number {
  width: 40px;
  color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 20%;
  transform: translate(-50%, -50%);
}
.top-username {
  font-weight: bold;
  margin-top: 30px;
}
.top-xp {
  font-style: italic;
}
.rank-1 .top-avatar img {
  width: 120px;
}
.top-number img {
  margin-bottom: 7px;
}
.leaderboard-table {
  clear: both;
  display: block;
  width: 100%;
}
.leaderboard-row {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #E2E2E2;
  margin-top: 15px;
  white-space: nowrap;
  position:relative;
}
.leaderboard-cell {
  vertical-align: middle;
  padding: 0 10px;
  display: inline-block;
}
.leaderboard-user-avatar img {
  width: 50px;
  border-radius: 50%;
  display: block;
}
.leaderboard-cell.username {
  font-weight: bold;
  min-width: 160px;
}
.leaderboard-cell.rank {
  float: right;
}
.level-badge {
  float: left;
  margin-right: 10px;
}

/* END TOP PLAYERS */

.sidebar .widget {
  margin-bottom: 16px;
}

.widget-title {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 14px;
}

.widget-game-list {
  padding: 16px;
  border: 1px solid #E2E2E2;
  border-radius: 12px;
}

.widget-game-list .widget-title {
  border-bottom: 1px solid #E2E2E2;
  padding-bottom: 12px;
}

.wgt-list-game-grid {
  padding: 0 6px;
}

.wgt-list-game-grid .wgt-list-game__item {
  padding: 5px;
}

.wgt-list-game__thumbnail {
  position: relative;
  padding-top: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.wgt-list-game__thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
 }

.wgt-list-game-vertical .wgt-list-game__item {
  margin-bottom: 14px;
}

.wgt-list-game-vertical .wgt-list-game__meta {
  padding-left: 0;
}

.wgt-list-game-vertical .wgt-list-game__title {
  color: #1F1F1F;
  font-weight: bold;
}

.single-category__header, .single-post-list__header, .single-tag__header, .single-search__header {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.single-category__header .section-title {
  margin: 6px 0;
}

.single-category__icon {
  margin-right: 10px;
}

.single-category__meta, .single-post-list__meta, .single-tag__meta, .single-search__meta {
  background-color: #EDEDED;
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 8px;
  color: #868686;
}

.single-category .category-description {
  background-color: #ededed;
  padding: 8px 16px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.single-page__header, .single-post__header {
  margin-bottom: 25px;
}

.single-page__content, .single-post__content {
  margin-bottom: 40px;
}

.single-post-list__header .section-title, .single-tag__header .section-title, .single-search__header .section-title {
  margin-bottom: 0;
}

.single-post-list__card {
  border: 1px solid #E2E2E2;
  padding: 12px;
  border-radius: 16px;
  margin-bottom: 18px;
}

.single-post-list__card:hover {
  box-shadow: 0px 20px 24px -4px #10182814;
}

.single-post-list__details {
  overflow: hidden;
}

.single-post-list__title a {
  font-weight: bold;
  font-size: 18px;
  color: #1F1F1F;
}

.single-post-list__thumbnail {
  margin: 0;
  margin-bottom: 6px;
}

.single-post-list__thumbnail img {
  margin-top: auto;
  margin-bottom: auto;
  max-height: 100%;
  border-radius: 12px;
}

.single-post-list__date {
  font-size: 14px;
  font-style: italic;
}

.single-post-list__bottom {
  margin-top: 12px;
}

.single-post__meta {
  font-style: italic;
}

.pagination-wrapper {
  margin-top: 20px;
}

.pagination .page-item .page-link {
  background-color: #fff;
  border: none;
  border-radius: 8px;
  color: #475467;
  margin: 6px;
  padding: 8px 14px;
}

.pagination .page-item .page-link:hover {
  background-color: #F1F3F4;
}

.pagination .page-item.disabled .page-link {
  background-color: #E8ECEE;
  color: #182230;
}

footer {
  background-color: #151436;
  color: #9392AD;
}

footer h1, footer h2, footer h3, footer h4 {
  color: #EEEEEE;
}

.footer a, .footer-copyright a {
  color: #EEEEEE;
}

.footer-widget {
  padding: 50px 0;
}

footer .widget-wrapper {
  margin-bottom: 20px;
}

footer .line-separator {
  border-top: 1px solid #4D4C67;
}

.footer-copyright {
  text-align: center;
  background-color: #151436;
}

.footer-copyright .container {
  position: relative;
}

.dsb-panel {
  position: absolute;
  right: 0;
}

#mobile-play {
    position: relative;
}
.mobile-thumb-play {
    background: #000000;
    overflow: hidden;
}
.mobile-thumb-play img {
    width: 100%;
    opacity: 0.7;
}
#mobile-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 75px;
    text-align: center;
    color: #fff;
    transform: translate(-50%, -50%);
}
#mobile-back-button {
    display: none;
    align-items: center;
    position: fixed;
    z-index: 101;
    top: 100px;
    left: 0;
    width: 56px;
    height: 46px;
    background: rgb(255, 255, 255);
    box-shadow: rgb(0 0 0 / 24%) 0px 16px 32px;
    border-radius: 0px 16px 16px 0px;
    overflow: hidden;
    cursor: pointer;
}
#mobile-back-button i {
  color: #94a2a2;
  font-size: 30px;
  margin-left: 14px;
}
#mobile-play .label-play-game {
  font-size: 30px;
  font-weight: bold;
  position: relative;
  top: -10px;
}