/*
Server details
*/

td.feature-no::after {
  margin-left: 10px;
  content: "✘";
  color: rgb(159, 60, 60);
}

/* Content node image editor */
.content-node-image-editor {
  max-width: 520px;
}
.content-node-image-dropzone {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 2px dashed #aaa;
  background: rgba(0, 0, 0, .08);
  text-align: center;
  transition: border-color .15s, background-color .15s;
}
.content-node-image-dropzone.is-dragging {
  border-color: #337ab7;
  background: rgba(51, 122, 183, .15);
}
.content-node-image-dropzone img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  cursor: zoom-in;
}
.content-node-image-help {
  margin: 8px 0;
}
.content-node-image {
  display: block;
  max-width: 100%;
  height: auto;
}
.content-category-image,
.content-article-image {
  margin-bottom: 20px;
}

.feature-yes::after {
  margin-left: 10px;
  content: "✔";
  color: rgb(60, 159, 60);
}

/* accordion */
.accordion {
  margin-bottom: 10px;
  background: rgba(32, 32, 32, 0.5);
  border: 1px solid rgb(32, 32, 32);
  padding: 0px;
}

.accordion__box-title {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgb(32, 32, 32);
}

.panel-body .panel-title.accordion__box-title {
  margin-bottom: 0 !important;
}

.panel-playground-component {
  border: 1px solid #ffffff9c;
  padding: 10px;
  margin-bottom: 10px;

  -webkit-box-shadow: 3px 2px 9px 1px #48484887;
  box-shadow: 3px 2px 9px 1px #48484887;
}

.playground-component-header {
  border-bottom: 1px solid;
  margin-bottom: 10px;
}

.playground-component-title {
  font-size: 1.3rem;
  line-height: 2rem;
}

.playground-component-description {
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1rem;
}

.accordion__box-title,
.accordion__box-content {
  padding: 10px;
}

.accordion__box-title:hover,
.accordion__box-title:active,
.accordion__box-title:focus {
  background: rgba(81, 81, 81, 0.5);
}

.accordion.active .accordion__box-title::after {
  rotate: 90deg;
}

.accordion__box-title::after {
  margin-top: 2px;
  content: ">";
  float: right;
  font-size: 12px;
  color: #c8c8c8;
}

/*
MENUS
*/
.center-buttons {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.center-buttons a {
  text-decoration: none;
}

.content-menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.content-menu a {
  margin: 10px;
  text-decoration: none;
}

/*
SHOP
*/
.store__success {
  font-size: 19px;
}

.store__success img {
  max-width: 90%;
  display: block;
  margin: 0 auto;
}

h3.product__category {
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
  margin-bottom: 40px;
}

.product {
  max-width: 250px;
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.product__image {
  width: 100%;
  height: 200px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.product__name {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}

.product__price {
  font-size: 16px;
  font-weight: 600;
}

.product__description {
  font-size: 12px;
  line-height: 16px;
  width: 100%;
}

.product .form-control {
  height: inherit;
  padding: 0;
  font-size: 18px;
  width: 100px;
  display: inline-block;
}

/*
 * Flex Helpers
 */
.flex-center-align {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/*
 * Animations
 */
.rainbow_text_animated,
.rainbow_text_animated td,
.rainbow_text_animated a {
  background: linear-gradient(to right,
      #6666ff,
      #0099ff,
      #00ff00,
      #ff3399,
      #6666ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: rainbow_animation 2s ease-in-out infinite;
  background-size: 300% 100%;
}

@keyframes rainbow_animation {

  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }
}

/*
 * ICONS
 */

/* Crop the file assets/img/icons/tf_icon_32.png. It contain icons of 32x32px in 16 columns and 21 rows */
.img-icon {
  width: 30px;
  display: inline-block;
  text-align: center;
  margin-right: 2px;
}

.player-info .img-icon img {
  max-width: 1rem;
  max-height: 1rem;
}

i.icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
  vertical-align: baseline;
}

.player-info i.icon {
  vertical-align: top;
  width: 32px;
  height: 24px;
  margin: 0;
}

i.icon::before {
  content: "";
  position: absolute;
  background-image: url(../img/icons/tf_icon_32.png);
  background-repeat: no-repeat;
  background-size: 512px 672px;
  width: 32px;
  height: 32px;
  top: 0;
  left: 0;
}

table i.icon,
.table i.icon {
  height: 1rem;
  vertical-align: middle;
}

table i.icon::before,
.table i.icon::before {
  top: -0.5rem;
}

i.icon-cps::before {
  background-image: url(../img/icons/cps.png);
  /* background-size: -34px -4px; */
  background-size: 32px 32px;
  transform: scale(0.75);
}

i.icon-heart::before {
  background-position: -34px -4px;
  width: 24px;
  height: 24px;
}

i.icon-name::before {
  background-position: -100px -32px;
  width: 28px;
  height: 28px;
  transform: scale(0.85);
}

i.icon-spouse::before {
  background-position: -258px -418px;
  width: 26px;
  height: 26px;
}

i.icon-level::before {
  background-position: -450px -2px;
  width: 30px;
  height: 30px;
  transform: scale(0.8);
}

i.icon-vip::before {
  background-position: -322px -388px;
  width: 26px;
  height: 26px;
}

i.icon-money::before {
  background-position: -96px -416px;
  width: 32px;
  height: 32px;
  transform: scale(0.75);
}

i.icon-guild::before {
  background-position: -226px -290px;
  width: 29px;
  height: 29px;
  transform: scale(0.85);
}

i.icon-hp::before {
  background-position: -162px -98px;
  width: 28px;
  height: 28px;
  transform: scale(0.85);
}

i.icon-mp::before {
  background-position: -196px -96px;
  width: 30px;
  height: 30px;
  transform: scale(0.8);
}

i.icon-dead::before {
  background-position: -194px -3px;
  width: 24px;
  height: 24px;
}

i.icon-mana::before {
  background-position: -392px -515px;
  width: 24px;
  height: 24px;
}

i.icon-spi::before {
  background-position: -389px -514px;
  width: 24px;
  height: 24px;
}

i.icon-str::before {
  background-position: -226px -323px;
  width: 26px;
  height: 26px;
  transform: scale(0.92);
}

i.icon-agi::before {
  background-position: -418px -4px;
  width: 30px;
  height: 30px;
  transform: scale(0.8);
}

i.icon-win::before {
  background-position: -448px -34px;
  width: 24px;
  height: 24px;
}

i.icon-lost::before {
  background-position: -484px -33px;
  width: 24px;
  height: 24px;
}

/* Weapon icons */
i.icon-class::before,
i.icon-sword::before {
  background-position: -226px -2px;
  height: 24px;
  width: 24px;
}

i.icon-shield::before {
  background-position: -130px -292px;
  width: 28px;
  height: 28px;
  transform: scale(0.85);
}

i.icon-bow::before {
  background-position: -322px -226px;
  width: 28px;
  height: 28px;
  transform: scale(0.85);
}

i.icon-staff::before {
  background-position: -191px -226px;
  width: 30px;
  height: 30px;
  transform: scale(0.8);
}

i.icon-staff-ice::before {
  background-position: -290px -225px;
  width: 30px;
  height: 30px;
  transform: scale(0.8);
}

i.icon-staff-fire::before {
  background-position: -259px -224px;
  width: 30px;
  height: 30px;
  transform: scale(0.8);
}

i.icon-dagger::before {
  background-position: -134px -196px;
  width: 24px;
  height: 24px;
}

i.icon-prayer-beads::before {
  background-position: -450px -418px;
  width: 28px;
  height: 28px;
  transform: scale(0.85);
}

i.icon-gun::before {
  background-position: -192px -256px;
  width: 30px;
  height: 30px;
  transform: scale(0.8);
}

i.icon-glove::before {
  background-position: -290px -323px;
  width: 28px;
  height: 28px;
  transform: scale(0.85);
}

i.icon-tornado::before {
  background-position: -194px -68px;
  width: 28px;
  height: 28px;
  transform: scale(0.85);
}

/*
 * Generic floating corner items
 */
.floating-footer {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 1rem;
}


.swal-wide{
  width:1200px !important;
  max-width: 100%;
}

/*
 * CART
 */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}

.cart-table th,
.cart-table td {
  padding: 8px;
  text-align: left;
  vertical-align: middle;
}

.cart-table input[type="number"] {
  width: 58px;
}

.hidden {
  display: none !important;
}

.cart-item-image {
  width: 38px;
  height: 38px;
  object-fit: cover;
  vertical-align: middle;
}

.cart-form,
.cart-checkout-form {
  display: inline-block;
  margin: 0 4px 4px 0;
}

.cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-continue-shopping {
  margin-right: auto;
}

.cart-payment-methods {
  width: 100%;
  margin-top: 18px;
}

.cart-payment-methods th,
.cart-payment-methods td {
  padding: 8px;
  text-align: left;
}

.cart-payment-button {
  padding: 0px;
  border: 0;
  background: #c0c0c0e3;
  filter: grayscale(0.5);
  line-height: 0;
  overflow: hidden;
  border-radius: 10px;
  padding: 5px;
}

.cart-payment-button:hover {
  background: #c0c0c0;
  filter: grayscale(0);
}

.cart-payment-button img {
  max-width: 120px;
  /* max-height: 40px; */
  object-fit: contain;
  color: #000;
  line-height: 2rem;
}

.cart-toast {
  margin: 0 0 15px;
  padding: 10px 14px;
  color: #f7e9ba;
  background: #26321d;
  border: 1px solid #728b3f;
}

.cart-toast-floating {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.floating-cart {
  width: 230px;
  padding: 12px;
  color: #f7e9ba;
  background: #111d25;
  border: 1px solid #728b3f;
}

.floating-cart-items {
  max-height: 25vh;
  overflow-y: scroll;
  scrollbar-gutter: auto;
  background: rgba(54, 54, 54, 0.28);
  padding: 2px 5px;
}

.floating-cart-hidden {
  display: none;
}

.floating-cart-title {
  margin-bottom: 8px;
  font-weight: bold;
}

.floating-cart-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0;
}

.floating-cart-item-image {
  width: 26px;
  height: 26px;
  object-fit: cover;
}

.floating-cart-item-name {
  flex: 1;
}

.floating-cart-empty-hidden {
  display: none;
}

.floating-cart-continue {
  display: block;
  margin-top: 8px;
}

.floating-cart-item-quantity::before {
  content: 'x';
}

.floating-cart-button {
  display: block;
  margin-top: 10px;
  text-align: center;
}

#floating-cart-item-template {
  display: none;
}

.manual-payment-qr {
  text-align: center;
}

/* Alerts */
.alert ul {
  padding-left: 20px;
}
.alert li {
  list-style: disc;
}
.alert strong {
  font-weight: bold;
}

/* JS Tree */
.jstree-anchor {
  overflow: hidden;
  max-width: 90%;
  text-overflow: ellipsis;
}

div.advanced-tree {
  overflow: hidden;
}

/* Content Tree */
#content-tree .cms-node-actions {
  display: inline-flex !important;
  position: relative;
  z-index: 2;
  visibility: visible !important;
  opacity: 1 !important;
  gap: 4px;
  margin-right: 10px;
}
#content-tree .cms-node-actions button,
#content-tree .cms-node-actions a {
  min-width: 20px;
  padding: 0 3px;
  border: 0;
  /* background: transparent; */
}
#content-tree .cms-sticky-icon {
  width: 16px;
  margin-right: 4px;
  text-align: center;
}
#content-tree .cms-sticky-0 {
  color: #999;
  opacity: .45;
}
#content-tree .cms-sticky-1 {
  color: #d98c00;
}
#content-tree .cms-sticky-2 {
  color: #c0392b;
}

/* Content Tree Overwrites */
.jstree-default .jstree-wholerow-clicked,
.jstree-default .jstree-wholerow-hovered {
  background:#7070706e !important;
  /* background:-webkit-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
  background:linear-gradient(to bottom, #beebff 0%, #a8e4ff 100%) */
}
.jstree-anchor {
  /* color: #464646;
  text-shadow: 0 1px 1px #fff; */
}


:root {
  --admin-bar-height: 54px;
}

html.isAdmin {
  margin-top: var(--admin-bar-height);
}

/* ADMIN BAR */
.admin-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  color: #fff;
  background: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.admin-bar__mobile-checkbox,
.admin-bar__mobile-toggle {
  display: none;
}

.admin-bar__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  height: var(--admin-bar-height);
}

.admin-bar__link,
.admin-bar__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.admin-bar__link:hover,
.admin-bar__link:focus-visible,
.admin-bar__dropdown-toggle:hover,
.admin-bar__dropdown-toggle:focus-visible {
  color: #000;
  background: #fff;
}

.admin-bar__group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.admin-bar__dropdown {
  position: relative;
}

.admin-bar__dropdown summary {
  cursor: pointer;
  list-style: none;
}

.admin-bar__dropdown summary::-webkit-details-marker {
  display: none;
}

.admin-bar__dropdown-toggle {
  border: 0;
}

.admin-bar__dropdown[open] .admin-bar__dropdown-toggle {
  color: #000;
  background: #fff;
}

.admin-bar__dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 190px;
  padding: 4px;
  background: #000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
  display: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}

.admin-bar__dropdown[open] + .admin-bar__dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.admin-bar__dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.admin-bar__dropdown-link:hover,
.admin-bar__dropdown-link:focus-visible {
  color: #000;
  background: #fff;
}

@media (max-width: 768px) {
  .admin-bar__mobile-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin-bar__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--admin-bar-height);
    padding: 0 14px;
    color: #fff;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
  }

  .admin-bar__mobile-toggle .fa-times {
    display: none;
  }

  .admin-bar__mobile-checkbox:checked + .admin-bar__mobile-toggle {
    color: #000;
    background: #fff;
  }

  .admin-bar__mobile-checkbox:checked + .admin-bar__mobile-toggle .fa-bars {
    display: none;
  }

  .admin-bar__mobile-checkbox:checked + .admin-bar__mobile-toggle .fa-times {
    display: inline-block;
  }

  .admin-bar__mobile-checkbox:focus-visible + .admin-bar__mobile-toggle {
    outline: 2px solid #fff;
    outline-offset: -2px;
  }

  .admin-bar__inner {
    display: none;
    align-items: stretch;
    flex-direction: column;
    padding: 0 10px;
    height: auto;
  }

  .admin-bar__mobile-checkbox:checked ~ .admin-bar__inner {
    display: flex;
  }

  .admin-bar__link,
  .admin-bar__dropdown-toggle {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
  }

  .admin-bar__group {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .admin-bar__group > .admin-bar__link {
    flex: 1;
    width: auto;
  }

  .admin-bar__dropdown-toggle {
    justify-content: center;
    width: 44px;
  }

  .admin-bar__dropdown-menu {
    position: static;
    flex: 0 0 100%;
    min-width: 0;
    width: 100%;
    margin: 0 0 4px;
    padding: 4px 0 0 28px;
    box-shadow: none;
    transform: none;
  }

  .admin-bar__dropdown-link {
    min-height: 40px;
    padding: 9px 12px;
  }
}


/* CMS Content (View) */
.panel-content-article img,
.panel-news img,
.panel-content-category img {
  max-width: 100%;
}

.blog-content {
  margin-bottom: 2rem;
}

.panel-content-category > .content-category-description {
  margin-bottom: 1.5rem;
}

.blog-content .short-story {
  margin: 0.5rem 0;
}