@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/passion-one');

:root {
  --content-primary: white;
  --primary: #bc73db;
}
[x-cloak] { display: none; }

/* Global */
a,
a:hover {
  text-decoration: none;
}

#view {
  font-family: 'Noto Sans', sans-serif;
  min-height: 100vh;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  color: #1a212e;
  font-family: 'Passion One', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Layout */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: 1240px;
}

div#content {
  flex:1;
  background: #f1f1f1;
  position: relative;
}

#content .container {
  padding-bottom: 60px;
  padding-top: 60px;
}

.with-hero #content {
  padding-top: 40px;
}

/* Navigation */
#nav {
  position: relative;
  z-index: 5;
}

#nav .navbar {
  background: var(--content-primary) !important;
  height: 80px;
}

#nav .nav-link .inline-icon {
  color: var(--primary);
  font-size: 12px;
  margin-left: 3px;
}

.nav-link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

.navbar-expand-lg .navbar-nav {
  align-items: center;
  font-weight: 600;
  gap: 20px;
  text-transform: uppercase;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.nav-link:focus,
.nav-link:hover {
  color: var(--primary) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--primary) !important;
  border-radius: 7px !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  color: white !important;
  padding: 14px 20px;
}

.nav-logo {
  margin-right: 30px;
  max-width: 100px;
}

.nav-logo img {
  max-width: 100%;
}

/* Header */
#header {
  background: #170303;
  min-height: 48vh;
  padding: 58px 0px;
  position: relative;
}

#header > .bg {
  overflow: hidden;
}

#header .bg {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#header .bg img {
  height: 100%;
  object-fit: cover;
  object-position: top;
  width: 100%;
}

#header .btn-primary {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  padding: 18px 20px;
}

#header .header-wrapper {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  overflow: hidden;
}

#header .header-wrapper:after {
  background: linear-gradient(360deg, #1a212e, #1a212ee6, transparent);
  bottom: 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

#header .header-wrapper .text {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  text-align: center;
  z-index: 5;
}

#header .header-wrapper .text h1 {
  color: white;
  font-size: 64px;
  margin-bottom: -10px;
  text-shadow: 2px 3px 0px #00000057;
}

#header .header-wrapper .text p {
  text-shadow: 1px 2px 0px #00000057;
}

.header-wrapper {
  align-items: center;
  background: #1a212e;
  border-radius: 10px;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 450px;
  justify-content: center;
  margin-bottom: -160px;
  position: relative;
  z-index: 5;
}

/* Footer */
#foot {
  background: #1a212e;
  color: #c5d8ff;
  margin-top: auto;
  padding: 60px 0px;
  position: relative;
}

#foot a {
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

#foot .extras {
  display: flex;
  gap: 40px;
  opacity: .55;
}

#foot .footer-bottom {
  align-items: center;
}

#foot .footer-bottom .ms-auto {
  text-align: right;
}

#foot .footer-bottom h1 {
  align-items: center;
  color: white;
  display: flex;
  font-size: 28px;
  height: 50px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

#foot .footer-bottom p {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.25px;
  margin: 0px;
  opacity: .45;
  text-transform: uppercase;
}

#foot .footer-top {
  padding-bottom: 50px;
  padding-top: 20px;
}

#foot .footer-top .links {
  display: flex;
  flex: 1;
  justify-content: space-between;
  text-align: center;
}

#foot .socials {
  align-items: center;
  display: flex;
  gap: 30px;
  height: 50px;
  justify-content: flex-end;
  margin-bottom: 8px;
}

#foot .socials a {
  font-size: 20px;
}

/* Buttons */
.btn-primary {
  align-items: center;
  background: var(--primary) !important;
  border-radius: 7px !important;
  color: white !important;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 1.24px;
  min-width: 170px;
  padding: 15px 20px;
  text-align: center;
  text-transform: uppercase;
}

/* Feed */
.meta {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 12px;
  letter-spacing: 1.25px;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.meta.muted time {
  color: inherit !important;
}

.meta time {
  font-size: inherit !important;
}

.muted {
  color: #656b76;
}

.post-feed .indicators {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.post-feed .indicators > div {
  background: #bcbdc1;
  border-radius: 100px;
  cursor: pointer;
  display: block;
  height: 12px;
  width: 12px;
}

.post-feed .indicators > div.active {
  background: #1a212e;
  border-radius: 6px;
  height: 20px;
  transform: rotate(45deg);
  width: 20px;
}
.placeholder-image {
  background: url(../images/placeholder.jpeg);
  background-size: cover;
  height: 100%;
  width: 100%;
}

/* Cards / Items */
.item .image {
  border-radius: 10px;
  height: 306px;
  overflow: hidden;
  width: 592px;
}

.item .read-more a {
  align-items: center;
  color: var(--primary);
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  letter-spacing: 1.25px;
  margin-top: 15px;
  text-transform: uppercase;
}

.item .text {
  flex: 1;
}

.item .text h1 {
  font-size: 51px;
  letter-spacing: 0;
}

.item .text p {
  font-size: 14px;
  line-height: 26px;
  margin: 0px;
}

.item .text time {
  color: var(--primary);
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.25px;
  margin-bottom: 3px;
  text-transform: uppercase;
}

/* Small Cards */
.small .item {
  flex: 1;
}

.small .item .image {
  height: 205px;
  width: 100%;
}

.small .item .image img {
  height: 100%;
  width: 100%;
}

.small .item h1 {
  font-size: 32px;
}

.small .placeholder-image {
  background-position: center;
}

/* Server Wrapper */
.server-wrapper {
  display: flex;
}

.server-wrapper > .col {
  flex: 1;
  text-align: center;
}

.server-wrapper .col {
  border-radius: 7px;
  flex: 1;
  padding: 20px;
}

/* ============================================== */
#header .muted {
    color: #c2c8d3;
}
.card {
    border: none;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 4%), 0 8px 10px -6px rgb(0 0 0 / 3%);
    border-radius: 10px;
}
.card .card-body {
    padding: 30px;
}
.card.page .card-body {
    padding: 40px;
}

.card .text {
    line-height: 2;
    font-weight: 600;
    color: #4b4b4b;
}

.no-hero #content .container {
    padding-top: 40px;
}

.sidebar .nav-link.active {
    color: var(--primary);
}

.sidebar .nav-link {
    color: #000000;
}

.user-card h3 {
    margin: 0px;
    font-size: 26px;
}

.user-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.user-card img {
    max-width: 105px;
}

.user-card p {
    font-family: 'Passion One', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary);
    margin:0;
}

.card.page .card-header {
    border: none;
    padding: 25px;
}

.rule-sections .card.page .card-body {
    padding: 25px;
}

.rule-sections .card.page .card-body p {
    margin: 0px;
}

.avatar {
    overflow: hidden;
    max-width: 24px;
    border-radius: 6px;
}

.avatar img {
    max-width: 100%;
}

.meta.muted {
    align-items: center;
}

.meta.muted time {
    margin-bottom: 0px !important;
}
.featured-packages .package:first-child {
    outline: 2px solid #bc73db;
    box-shadow: 0px 0px 30px #bc73db75;
}
.active>.page-link, .page-link.active {
    background: #000000;
    border-color: transparent;
    color: white !important;
    box-shadow: none !important;
}
.space-y-4 > * {
    margin-bottom: 25px;
}
.with-sidebar .page {
    margin-bottom: 30px;
}
.comment {
    background: #f7f7f7;
    border: 1px solid #e1e1e1;
    border-radius: 0px;
    border-left: 3px #000000 solid !important;
}

.comment .small.mb-0.ms-2 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.25px;
    font-size: 12px;
    color: grey;
}

.comment img {
    border-radius: 6px;
}

.font-bold {
    font-weight: 600;
    font-size: 15px;
}

.comment .card-body {
    padding: 20px 25px;
}

.comment .card-footer {
    border-color: #d5d5d5 !important;
    padding: 14px 25px;
}
@media only screen and (max-width: 768px) {
  .package-actions {flex-wrap:wrap;flex: 0 0 100%;}
  .package-actions .btn-primary {
      flex: 1;
  }
  .featured-packages {
    display: none !important;
  }
  div#user-stats .row {
      flex-direction: column;
      gap: 25px;
  }
  .stats-grid {
    display: block !important;
  }
  .store-sidebar, .stats-sidebar {
      width: 100% !important;
      margin-top: 30px !important;
  }
  .stats-sidebar {
    margin-bottom:30px !important;
  }
  .card-icon {
      display: none !important;
  }
  .card-icon {
      display: none !important;
  }
  .store-header .text-left {
      display: none !important;
  }
  .store-header .ml-auto {
      margin-right: auto !important;
      flex: 1 !important;
  }
  .user-btn {
      text-align: left !important;
  }
  .user-btn .avatar {
      order: -1 !important;
  }
  .store-header .divider {
      display: none !important;
  }
  .card-btn {
      margin-left: auto !important;
  }
}
@media only screen and (min-width: 768px) {
  
  .sticky-sidebar {
    position: sticky;
    top: 2rem; 
    align-self: flex-start; 
    z-index: 2; 
  }
}

.page-link {
    color: black !important;
    font-weight: 600;
    font-size: 14px;
    box-shadow: none !important;
    padding: 10px 15px;
}

.disabled>.page-link, .page-link.disabled {
    background: white;
    color: grey !important;
}

.btn-primary h2 {
    color: inherit;
    margin: 0;
    font-size: 26px;
}

.page-link {
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: 1px;
}

.wrapper--art:before {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    background-color: inherit;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    mask-position: bottom;
    -webkit-mask-position: bottom;
}
.blocky:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="5.23" viewBox="0 0 38.22 5.23"><rect width="38.22" height="5.23" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="5.23" viewBox="0 0 38.22 5.23"><rect width="38.22" height="5.23" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 110px 8px;
    mask-size: 110px 8px;
    height: 8px;
    top: -8px;
}
.pointedSm:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="110.128" height="8.291" viewBox="0 0 110.128 8.291"><polygon points="55.064 .658 0 8.291 55.064 8.291 110.128 8.291 55.064 .658" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="110.128" height="8.291" viewBox="0 0 110.128 8.291"><polygon points="55.064 .658 0 8.291 55.064 8.291 110.128 8.291 55.064 .658" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 110px 8px;
    mask-size: 110px 8px;
    height: 8px;
    top: -8px;
}
.pointed:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="12.911" viewBox="0 0 181.383 12.911"><polygon points="90.691 0 0 12.911 90.691 12.911 181.383 12.911 90.691 0" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="12.911" viewBox="0 0 181.383 12.911"><polygon points="90.691 0 0 12.911 90.691 12.911 181.383 12.911 90.691 0" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 181px 12px;
    mask-size: 181px 12px;
    height: 12px;
    top: -12px;
}
.curveSm:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="7.009" viewBox="0 0 76 7.009"><path d="m63.752,5.662c-6.966-1.487-10.52-3.518-18.55-4.82-3.048-.494-5.565-.692-7.202-.783-1.638.09-4.155.289-7.202.783-8.03,1.302-11.584,3.333-18.55,4.82C9.392,6.271,5.215,6.949,0,7.009h76c-5.215-.06-9.392-.738-12.248-1.348Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="7.009" viewBox="0 0 76 7.009"><path d="m63.752,5.662c-6.966-1.487-10.52-3.518-18.55-4.82-3.048-.494-5.565-.692-7.202-.783-1.638.09-4.155.289-7.202.783-8.03,1.302-11.584,3.333-18.55,4.82C9.392,6.271,5.215,6.949,0,7.009h76c-5.215-.06-9.392-.738-12.248-1.348Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 7px;
    mask-size: 76px 7px;
    height: 7px;
    top: -7px;
}
.curve:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140.957" height="15.743" viewBox="0 0 140.957 15.743"><path d="m118.242,12.69c-12.92-3.368-19.511-7.969-34.405-10.917-5.652-1.119-10.321-1.568-13.358-1.773-3.038.205-7.706.654-13.358,1.773-14.894,2.948-21.485,7.549-34.405,10.917-5.296,1.381-13.044,2.916-22.715,3.053h140.957c-9.672-.137-17.42-1.672-22.716-3.053Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="140.957" height="15.743" viewBox="0 0 140.957 15.743"><path d="m118.242,12.69c-12.92-3.368-19.511-7.969-34.405-10.917-5.652-1.119-10.321-1.568-13.358-1.773-3.038.205-7.706.654-13.358,1.773-14.894,2.948-21.485,7.549-34.405,10.917-5.296,1.381-13.044,2.916-22.715,3.053h140.957c-9.672-.137-17.42-1.672-22.716-3.053Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 140px 15px;
    mask-size: 140px 15px;
    height: 15px;
    top: -15px;
}
.curveLg:before {
  -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="20.257" viewBox="0 0 181.383 20.257"><path d="m152.153,16.329c-16.626-4.334-25.107-10.254-44.272-14.048-7.273-1.44-13.28-2.018-17.189-2.281-3.909.264-9.916.842-17.189,2.281-19.165,3.794-27.647,9.714-44.272,14.048-6.815,1.777-16.785,3.752-29.23,3.928h181.383c-12.446-.176-22.415-2.151-29.23-3.928Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="181.383" height="20.257" viewBox="0 0 181.383 20.257"><path d="m152.153,16.329c-16.626-4.334-25.107-10.254-44.272-14.048-7.273-1.44-13.28-2.018-17.189-2.281-3.909.264-9.916.842-17.189,2.281-19.165,3.794-27.647,9.714-44.272,14.048-6.815,1.777-16.785,3.752-29.23,3.928h181.383c-12.446-.176-22.415-2.151-29.23-3.928Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 181px 20px;
    mask-size: 181px 20px;
    height: 20px;
    top: -20px;
}
.waveXs:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="7.2" viewBox="0 0 38.22 7.2"><path d="m19.11,7.17C4.85,6.86,0,0,0,0v7.2h38.22V0s-4.85,6.86-19.11,7.17Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38.22" height="7.2" viewBox="0 0 38.22 7.2"><path d="m19.11,7.17C4.85,6.86,0,0,0,0v7.2h38.22V0s-4.85,6.86-19.11,7.17Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 37px 7px;
    mask-size: 37px 7px;
    height: 7px;
    top: -7px;
}
.waveSm:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="8.733" viewBox="0 0 76 8.733"><path d="m38,0h0s0,0,0,0h0C25.644,8.733,0,8.703,0,8.703v.029h76v-.029S50.356,8.733,38,0Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="8.733" viewBox="0 0 76 8.733"><path d="m38,0h0s0,0,0,0h0C25.644,8.733,0,8.703,0,8.703v.029h76v-.029S50.356,8.733,38,0Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 8px;
    mask-size: 76px 8px;
    height: 8px;
    top: -8px;
}
.wave:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="11.584" viewBox="0 0 76 11.584"><path d="m38.034.029v-.029c-.005.005-.011.01-.017.015-.005-.005-.011-.01-.017-.015v.029C25.631,11.583.034,11.56.034,11.56v.024h75.966v-.024s-25.598.023-37.966-11.531Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="76" height="11.584" viewBox="0 0 76 11.584"><path d="m38.034.029v-.029c-.005.005-.011.01-.017.015-.005-.005-.011-.01-.017-.015v.029C25.631,11.583.034,11.56.034,11.56v.024h75.966v-.024s-25.598.023-37.966-11.531Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 76px 11px;
    mask-size: 76px 11px;
    height: 11px;
    top: -11px;
}
.waveLg:before {
    -webkit-mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="144" height="21.958" viewBox="0 0 144 21.958"><path d="m72.032.056v-.056c-.01.01-.022.018-.032.028-.01-.01-.021-.018-.032-.028v.056C62.241,21.316,0,21.913,0,21.913v.045h144v-.045S81.759,21.316,72.032.056Z" fill="%23231f20" stroke-width="0"/></svg>');
    mask-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="144" height="21.958" viewBox="0 0 144 21.958"><path d="m72.032.056v-.056c-.01.01-.022.018-.032.028-.01-.01-.021-.018-.032-.028v.056C62.241,21.316,0,21.913,0,21.913v.045h144v-.045S81.759,21.316,72.032.056Z" fill="%23231f20" stroke-width="0"/></svg>');
    -webkit-mask-size: 144px 21px;
    mask-size: 144px 21px;
    height: 21px;
    top: -21px;
}

#header.small {
    min-height: 27vh;
}

.small .header-wrapper {
    height: 250px;
}

/* */
.card-header {
    padding: 25px;
    text-align: center;
    background: transparent;
    border-color: #e3e3e3;
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    color: #1a212e;
    font-family: 'Passion One', sans-serif;
    font-size: 23px;
    line-height: 1;
}
.user-meta {
    display: flex;
    gap: 10px;
    flex: 1;
    align-items: center;
}

.stat-col .list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    padding: 18px 25px;
    justify-content: space-between;
}

.stat-col .card-body {
    padding: 0px;
}

.list-group-numbered>.list-group-item::before {
    font-size: 13px;
    color: grey;
}

.stat-col span.float-right {
    background: #f0f0f0;
    min-width: 56px;
    text-align: center;
    border-radius: 100px;
    color: grey;
    font-size: 13px;
    position: relative;
    padding: 3px;
    top: 0px;
    font-weight: 800;
}

.user-meta a {
    font-weight: 600;
    font-size: 15px;
}

.stat-dd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
}

.stat-dd small {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    display: block;
    color: grey;
}

.stat-dd dd {
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 0px;
    line-height: 1;
    font-family: 'Passion One', sans-serif;
}

.top-stats .stat-col .card-body {
    padding: 25px;
    display: flex;
    align-items: center;
}

.top-stats .user {
    line-height: 1;
    flex: 1;
}

.top-stats .user h3 {
    margin: 0px;
}

.top-stats .avatar {width: 84px;position: relative;height: 84px;max-width: none;}

.top-stats .user .label {
    display: inline-flex;
    padding: 5px 20px;
    font-family: 'Passion One', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 15px;
    color: white;
    background: var(--primary) !important;
    border-radius: 6px;
}
/* ======================= */
div#store-toggle {
    background: #bc73db;
    border-radius: 10px;
    padding: 32px;
    text-align: center;
    margin-bottom: 25px;
    text-shadow: 1px 2px 0px #0000003b;
    cursor: pointer;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

div#store-toggle * {
    margin: 0;
    line-height: 1;
}

div#store-toggle h1 {
  font-size: 30px;
    color: white;
}

#store-toggle p {
    font-family: 'Passion One', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
    opacity: .75;
}

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

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.store .card-header h1, .store .card-header p {
    margin: 0;
    line-height: 1;
}

.store .card-header h1 {
    font-size: 24px;
}

.store .card-header p {
    font-size: 17px;
    color: #bc73db;
}
.store-sidebar, .stats-sidebar {
    flex: 0 0 auto;
    width: 30%;
}
.user-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

.user-btn .avatar {
    order: 5;
    max-width: 39px;
}

.card-btn {
    width: 42px;
    height: 42px;
    background: #bc73db38;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 19px;
    cursor: pointer;
}

.store .card-header .divider {
    width: 1px;
    height: 42px;
    background: #e5e5e5;
}

.store .card-header {
    align-items: center;
    gap: 20px;
}

.card-icon {
    max-width: 50px;
}

.card-icon img {
    max-width: 100%;
}

.card-text h3 {font-size:40px;position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;}

.card-text h3:after {
    content: "";
    width: 65px;
    height: 5px;
    background: var(--primary);
    margin-top: 5px;
}

.recent-users {
    align-items: center;
    justify-content: center;
}
.recent-block {
    display: flex;
    align-items: center;
    background: rgb(255 255 255);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 4%), 0 8px 10px -6px rgb(0 0 0 / 3%);
    padding: 15px !important;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 30px;
}

.recent-users {
    display: flex;
    width: 100%;
}

.recent-users img {
    max-width: 100%;
    border-radius: 4px;
}

.r-user {
    width: 24px;
    text-align: center;
    margin-right: 10px;
    border-radius: 5px;
}

.recent-block .icon i {
    font-size: 17px;
    position: relative;
    top: 0px;
    color: black;
}

.recent-block .icon {
    display: flex;
    margin-right: 15px;
}
.top-donor-block {
    display: flex;
    background: rgb(255 255 255);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 4%), 0 8px 10px -6px rgb(0 0 0 / 3%);
    align-items: center;
    border-radius: 10px;
}

.u-avatar {
    width: 90px;
    height: 90px;
    overflow: hidden;
    margin-top: -10px;
}

.u-avatar img {
    width: 64px;
    margin-left: 10px;
}

.s-name {
    font-size: 18px;
    color: black;
    font-family: 'Passion One', sans-serif;
    font-weight: 700 !important;
    font-size: 21px;
    line-height: 1;
    text-transform: uppercase;
}

.s-desc {
    font-size: 14px;
    margin-top: -3px;
}

.featured-packages {
    position: relative;
    z-index: 5;
    color: white;
    width: 100%;
    padding: 0 30px;
    max-width: 900px;
    margin-top: 10px;
}

.featured-packages h4 {color: inherit;}

.featured-packages .package {
    cursor: pointer;
    background: #ffffff1a;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    backdrop-filter: blur(7px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 4%), 0 8px 10px -6px rgb(0 0 0 / 3%);
}

.featured-packages .package-text h4,.featured-packages .package-text p {
    margin: 0;
}

.featured-packages .package-text h4 {
    font-size: 19px;
}

.featured-packages .package-text p {
    font-family: 'Passion One', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.featured-packages .package-icon {
    background: #ffffff1a;
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

.featured-packages .price {
    color: #adff56 !important;
}

.store #header .header-wrapper .text h1 {
    font-size: 46px;
}

.modal-content {
    border: none !important;
}

.modal-header {
    text-align: center;
    justify-content: center;
    display: flex;
}

.modal-title {
    font-size: 30px !important;
    flex: 1;
}

.modal-header .btn-close {
    position: absolute;
    right: 20px;
    display: none;
}

.modal-dialog {
    margin-top: 100px !important;
    max-width: 580px !important;
}

.modal-body {
    padding: 25px;
}

.form-control-lg {
    font-size: 20px;
    text-align: center;
    color: black;
    font-family: 'Passion One', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.form-control {
    box-shadow: none !important;
    border: 2px solid var(--primary) !important;
    background: #bc73db0f !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black !important;
}

.form-control::placeholder {
    color: var(--primary);
}

.btn {
    border-color: transparent !important;
}

.btn-block {
    width: 100%;
}

.category-list .icon {
    width: 42px;
    height: 42px;
    background: #bc73db29;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 19px;
    cursor: pointer;
}

.category-item h4 {margin: 0px;}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.category-item {
    border: 1px solid #dddddd;
    flex: 1;
    background: var(--primary);
    padding: 16px 20px;
    border-radius: 8px;
    background: #c4c4c438;
    min-width:200px;
}

/* */
.stats-sidebar {
    text-align: center;
}

.stats-sidebar .user-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    color: grey;
    margin-top: 15px;
}

.stats-sidebar .rank span {
    background: #1a212e;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 20px;
    min-width: 140px;
    border-radius: 7px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
}

.stats-sidebar .username {
    font-weight: 900;
    font-size: 20px;
    color: black;
}

.stats-sidebar .user-small-meta {
    font-weight: 600;
    font-size: 14px;
    margin-top: 5px;
    color: #979797;
}

.stats-sidebar .stats-avatar {
    width: 120px;
    height: 120px;
    background: #f7f7f7;
    border-radius: 100px;
    margin: 0 auto;
}

.stats-sidebar .stats-avatar {
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 18px;
}

.stats-sidebar .stats-avatar img {
    max-width: 70px;
}

.stats-sidebar {
    position: relative;
}

.player-indcation {
    position: absolute;
    background: #f32d1e;
    width: 12PX;
    height: 12PX;
    border-radius: 100PX;
    TOP: 0;
    RIGHT: 0;
    MARGIN: 25px;
    box-shadow: 0px 0px 30px red;
}

.player-indcation.online {
    background: #52c956;
    box-shadow: 0px 0px 30px #52c956;
}

li.list-group-item.header {
    border: none;
    background: #f1f1f1;
    color: #84888f;
    padding: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.list-group-item {
    padding: 15px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-bg-primary {
    background: #bc73db !important;
}

.list-group .badge {
    padding: 5px 6px;
}

.package-text h2,.package-text p {
    margin: 0;
}

.packages {
    gap: 25px;
    flex-direction: column;
}

.package-image {
    width: 65px;
    height: 65px;
    background: #f1f1f1;
    border-radius: 8px;
}
strong.total {
    color: #b8f570;
}
.login-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding-top: 65px;
}

a,a:hover,a:focus {
    color: #bc73db;
}

.package .card-body {
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    gap: 20px;
}

.package-text .price {
    font-weight: 700;
    margin-top: -3px;
    color: #70c94c;
}

.package-text h2 {
    font-size: 26px;
}
.checkout-actions .btn {
    padding: 20px !important;
    height: auto;
}

.btn-success {
    background: #1a212e !important;
}
.btn {
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    font-size:14px;
    padding: 15px 20px;
    height: 53px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.package-actions {
    gap: 15px;
    display: flex;
}

.btn-info {
    background: #f0e0f7 !important;
    color: #bc73db !important;
}