body {
  font-family: "Poppins", sans-serif;
  background-color: #fff;
}

/* .wrapper{
  width: 90%;
  width: 1024px;
  margin: 0 auto;
} */
.menu-panel {
  width: 60%;
  width: 1190px;
  margin: 0 auto;
}

header {
  border-bottom: #ccc solid 2px;
}

#mobile-nav-panel .bg-light {
  /* background-color: #000 !important; */
  /* z-index: -9999; */
  height: 6vh;
}

#mobile-nav-panel .navbar-brand {
  padding: 0px;
}

#mobile-nav-panel .navbar {
  /* padding: 0px 0 4px 0; */
}

#mobile-nav-panel ul.navbar-nav {
  /* background: #3e4f3e; */
}

#mobile-nav-panel ul.navbar-nav li {
  padding: 0 10px;
}

#mobile-nav-panel .navbar-light .navbar-nav .nav-link {
  color: #000;
}


#mobile-nav-panel li.nav-item:last-child {
  border-bottom: none;
}

#mobile-nav-panel .navbar-light .navbar-brand {
  color: #000;
  padding-left: 15px;
}

#mobile-nav-panel button.navbar-toggler {
  margin: 5px 10px;
}

#mobile-nav-panel .navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
  color: #000 !important;
}

#nav-bar-panel {
  background-color: #cd2f78;
}

#nav-bar-panel nav.nav.nav-masthead.justify-content-center a {
  color: #cd2f78;
}

/* ==========================Top nav bar */

#nav-container {
  position: fixed;
  height: 80vh;
  width: 100%;
  pointer-events: none;
}

#nav-container .bg {
  position: absolute;
  top: 56px;
  left: 0;
  width: 100%;
  height: calc(100% - 70px);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
  background: #000;
}

#nav-container:focus-within .bg {
  visibility: visible;
  /* opacity: 0.6; */
}

#nav-container * {
  visibility: visible;
}

#nav-container .button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  border-radius: 0;
  height: 45px;
  width: 30px;
  cursor: pointer;
  pointer-events: auto;
  margin-right: 25px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  float: right;
}

.icon-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: #000;
  transition: 0.3s;
}

.icon-bar+.icon-bar {
  margin-top: 5px;
}

#nav-container:focus-within .button {
  pointer-events: none;
}

#nav-container:focus-within .icon-bar:nth-of-type(1) {
  transform: translate3d(0, 8px, 0) rotate(45deg);
}

#nav-container:focus-within .icon-bar:nth-of-type(2) {
  opacity: 0;
}

#nav-container:focus-within .icon-bar:nth-of-type(3) {
  transform: translate3d(0, -8px, 0) rotate(-45deg);
}

#nav-content {
  margin-top: 50px;
  padding: 20px;
  width: 100%;
  max-width: 300px;
  position: absolute;
  top: 0;
  right: 0;
  height: calc(100% - 0px);
  background: rgba(27, 26, 26, 0.8);
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateX(100%);
  transition: transform 0.3s;
  will-change: transform;
  contain: paint;
  color: #fff;
  height: 100vh;
}

#nav-content ul {
  height: 85%;
  display: flex;
  flex-direction: column;
  background: none;
}

#nav-content li a {
  padding: 10px 5px;
  display: block;
  font-size: 1.2rem;
  transition: color 0.1s;
  color: #fff;
}

#nav-content li a:hover {
  color: #bf7497;
}

#nav-content li:not(.small)+.small {
  margin-top: auto;
}

#sidebar-wrapper {
  height: 100vh;
  /* Add height */
  overflow-y: auto;
  /* Add overflow-y */
  overflow-x: hidden;
  /* Add overflow-x */
  /* min-height: 100vh; */
  margin-left: 0rem;
  /* -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out; */
}

#nav-content #sidebar-wrapper .dropdown-item {
  /* background-color: #1a151573; */
  margin-left: 1.5rem;
  padding: 4px 5px;
}

.modal_header_rules {
  background: rgb(211, 65, 116);
  background: linear-gradient(90deg, rgba(211, 65, 116, 1) 0%, rgba(244, 166, 97, 1) 100%);
}

.small {
  display: flex;
  align-self: center;
}

.small a {
  font-size: 12px;
  font-weight: 400;
  color: #888;
}

.small a+a {
  margin-left: 15px;
}

.paymentSuccessAlert {
  margin-top: 3rem;
}

#nav-container:focus-within #nav-content {
  transform: none;
}

@media only screen and (max-width: 992px) {
  #mobile-nav-panel {
    display: none;
  }

  section#banner {
    margin-top: 56px;
  }

  #nav-container {
    z-index: 99;
    top: 0;
  }
}

section.nav-top-item.fixedNav {
  display: none;
}

.top-menu-bg {
  background-color: #fff;
  /* box-shadow: #ccc 0px 1px 0px; */
}

/* ================ Custom css =========================== */
#top-banner-panel {
  background-color: #171717;
  padding: 2% 0 2% 0;
}

.common-btn {
  background: rgb(211, 65, 116);
  background: linear-gradient(90deg, rgba(211, 65, 116, 1) 0%, rgba(244, 166, 97, 1) 100%);
  border: none;
}

.trail-btn {
  background: #034245;
  background: linear-gradient(90deg, #034245 0%, #3be386 100%);
  border: none;
}

.leaderbord {

  border: #d34174 solid 1px;
  background: none;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 600;

  /* color:#000; */
  /* width: 48%; */

  background: linear-gradient(45deg, rgba(244, 166, 97, 1), rgba(211, 65, 116, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;

}

.leaderbord img {
  width: 16%;
}



.card {
  width: auto;
  border: none;
  box-shadow: 0px 4px 5px 1px #D9D9D9;
  border-radius: 12px;
}

.circle-image img {
  border: 6px solid #fff;
  border-radius: 100%;
  padding: 0px;
  top: -28px;
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  z-index: 1;
  background: #e7d184;
  cursor: pointer;
}

.campain-body {
  border: #ccc solid 1px;
  border-radius: 10px;
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: block;
  }

  .navbar .nav-item:hover .nav-link {}

  .navbar .nav-item:hover .dropdown-menu {
    display: block;
  }

  .navbar .nav-item .dropdown-menu {
    margin-top: 0;
  }
}

/* ============ desktop view .end// ============ */

/*======================================
//--//-->   FOOTER
======================================*/
/* footer {
  position: fixed;
  height: 100px;
  bottom: 0;
  width: 100%;
  z-index: 999;
} */
#footer-menu-panel nav ul li {
  list-style-type: none;
}

#footer-menu-panel .navbar {
  overflow: hidden;
  background-color: #fff;
  /* position: fixed; */
  bottom: 0;
  width: 60%;
  z-index: 999;
  margin: 0px auto;
}

#footer-menu-panel .navbar a {
  float: left;
  display: block;
  color: #000;
  text-align: center;
  padding: 2px 4px;
  text-decoration: none;
  font-size: 16px;
}

#footer-menu-panel .navbar a:hover {
  color: #d03a76;
}

#footer-menu-panel .navbar a.active {
  /* background-color: #04AA6D; */
  color: #d03a76;
}

/* -------------------------- */

#footer-menu-panel .footerbody {
  overflow: hidden;
  background-color: #000;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  margin: 0px;
}

#footer-menu-panel .footerbody a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 2px 4px;
  text-decoration: none;
  font-size: 16px;
}

#footer-menu-panel .footerbody a:hover {
  color: #cd2f78;
}

/* ----------------------------------bootstrap footer */
#footer-menu-panel .navbar #account-panel {
  margin-top: 5%;
}

/* =========================================
                    Dark css 
===========================================*/
/* body.bodyDark .top-menu-bg {
 
  box-shadow: #898484 0px 1px 0px;
} */
.containerDark .title-a {
  color: #fff;
}

body.bodyDark #nav-container .icon-bar {
  background-color: #fff;

}

body.bodyDark #mobile-nav-panel .navbar-light .navbar-nav .nav-link {
  color: #fff;
}

body.bodyDark #mobile-nav-panel .navbar-light .navbar-nav .nav-link:hover {
  color: #cd2f78;
}

body.bodyDark #mobile-nav-panel .navbar-light .navbar-nav .nav-link.active {
  color: #fff;
}

body.bodyDark #mobile-nav-panel .navbar-light .navbar-nav .nav-link.active:hover {}

body.bodyDark h3,
body.bodyDark h4 {
  color: #fff;
}

.containerDark .card-body {
  background: #121212;
  box-shadow: #222 4px 4px 7px;
  border: #545454 solid 1px;
  border-radius: 0px 0px 20px 20px;
}

.containerDark .d-flex.justify-content-between.align-items-center {
  padding: 10px;
}

.containerDark .card {
  box-shadow: #545454 4px 4px 7px;
  border-radius: 20px;
}

.containerDark .card-text.text-center {
  color: #fff;
  text-shadow: 1px 2px 5px #141200;
}

ul.footerbody li a {
  color: #fff;
}

.bodyDark .campain-body {
  border: #5E5E5E solid 1px;
  border-radius: 10px;

}

.bodyDark #account-panel p {
  color: #fff;
}

.bodyDark #account-panel {
  margin-top: 15%;
}

section#account-panel {
  margin-top: 6%;
}

section#tournament-panel {
  margin-top: 6%;
}

/* =============================================
    Sign in / Sign up
*/
figure.site-img {
  text-align: center;
  display: block;
  margin-bottom: 15%;
  margin-top: 13%;
}

/* =============================================
    Description
*/



.description-top-panel {
  background: rgb(211, 65, 116);
  background: linear-gradient(90deg, rgba(211, 65, 116, 1) 0%, rgba(244, 166, 97, 1) 100%);
  height: 20vh;
}


img.img-fluid.blank-img {
  width: 300px;
  max-width: 100%;
  height: 400px;
}


.description {
  margin-top: 10px;
}

.description .logo {
  width: 550px !important;
  height: 310px;
}

.description .play_btn {
  padding: 6px 30px;
}

.description .icon {
  width: 20px !important;
}

.description .banner {
  width: 320px !important;
  height: 300px !important;
}

.description .banner_1st {
  height: 180px !important;
  width: 100%;
}

.mt-10 {
  margin-top: 3.5rem;
}

.common-bg {
  background: rgb(211, 65, 116);
  background: linear-gradient(90deg, rgba(211, 65, 116, 1) 0%, rgba(244, 166, 97, 1) 100%);
}





/* ================================Custom Responsive ============================= */


@media screen and (min-width: 2560px) {}

@media screen and (max-width: 1600px) {
  .description-play-btn {
    top: 40%;
    left: 48%;
  }
}

@media screen and (max-width: 1500px) {
  .description-btn {
    left: 48%;
    top: 35%;
  }

  #leader-lod-btn {
    left: 40%;
    margin-top: 7%;
  }

  #description-bottom-img {
    margin-top: 12%;
    left: 40%;
  }

}

@media screen and (max-width: 1400px) {
  #footer-menu-panel .navbar {
    width: 85%;
  }

  .description-play-btn {
    left: 50%;
  }

}

@media screen and (max-width: 1280px) {
  .description-btn {
    left: 48%;
    top: 35%;
  }

  #leader-lod-btn {
    margin-top: 10%;
  }

  #footer-menu-panel .navbar {
    width: 90%;
  }

}





@media screen and (max-width: 1024px) {
  .top-menu-bg {
    background-color: #fff;
    box-shadow: #ccc 0px 1px 0px;
    /* border-bottom: #ccc solid; */
  }

  #footer-menu-panel .navbar {
    width: 90%;
  }

  header {
    border-bottom: none;
  }

  #description-bottom-img {
    margin-top: 16%;
  }

  .leaderboard_title {
    padding: 0 10px;
  }
}


@media screen and (max-width: 990px) {
  .wrapper {
    width: 100%;
  }

  section.nav-top-item {
    margin-bottom: 3%;
  }

  .title-a {
    margin-top: 20%;
  }

  #leader-lod-btn {
    margin-top: 13%;
    left: 33%;
  }

  body.bodyDark .top-menu-bg {
    box-shadow: #898484 0px 1px 0px;
  }

  #footer-menu-panel .navbar {
    width: 100%;
  }

  .leaderboard_title {
    padding: 0 10px;
  }


}


@media screen and (max-width: 860px) {
  #description-bottom-img {
    margin-top: 20%;
    left: 33%;
  }

  .leaderboard_title {
    padding: 0 10px;
  }
}

@media screen and (max-width: 769px) {
  section#account-panel {
    margin-top: 10%;
  }

  section#tournament-panel {
    margin-top: 10%;
  }

  .leaderboard_title {
    padding: 0 10px;
  }

  .description {
    margin-top: 68px!important;
  }
  
  .description .logo {
    width: 500px !important;
    height: 235px;
  }

}

@media screen and (max-width: 575px) {
  .description {
    margin-top: 68px!important;
  }
  
  .description .logo {
    width: 315px !important;
    height: 220px;
  }

}

@media screen and (max-width: 425px) {

  .leaderbord {
    margin: 10px 0;
  }


  .description {
    margin-top: 68px!important;
  }
  
  .description .logo {
    width: 315px !important;
    height: 220px;
  }



  #leader-lod-btn {
    margin-top: 20%;
  }

  .leaderbord {
    width: 98.5%;
    font-size: 0.9rem;
  }

  .leaderbord img {
    width: 18%;
  }

  section#tournament-panel {
    margin-top: 16%;
  }

  .leaderboard_title {
    padding: 0 12px;
  }



}

@media screen and (max-width:390px) {

  .common-btn {
    width: 80%;
  }

  #description-bottom-img {
    margin-top: 55%;
  }

  .leaderboard_title {
    padding: 0 10px;
  }



}

@media screen and (max-width:360px) {
  .leaderboard_title {
    padding: 0 7px;
  }

  .paymentSuccessAlert {
    margin-top: 15%;
  }
}

@media screen and (max-width:320px) {
  .leaderboard_title {
    padding: 0 5px;
  }

}