/* All Fonts */

@font-face {
  font-family:"poppings-sembold";
  src:url("../font/Poppins-SemiBold_0.ttf") format("woff"),
  url("../font/Poppins-SemiBold_0.ttf") format("opentype"),
  url("../font/Poppins-SemiBold_0.ttf") format("truetype");
}

@font-face {
  font-family:"poppings-bold";
  src:url("../font/Poppins-Bold_0.ttf") format("woff"),
  url("../font/Poppins-Bold_0.ttf") format("opentype"),
  url("../font/Poppins-Bold_0.ttf") format("truetype");
}

@font-face {
  font-family:"poppings-regular";
  src:url("../font/Poppins-Regular_0.ttf") format("woff"),
  url("../font/Poppins-Regular_0.ttf") format("opentype"),
  url("../font/Poppins-Regular_0.ttf") format("truetype");
}

@font-face {
  font-family:"poppings-medium-italic";
  src:url("../font/Poppins-MediumItalic_0.ttf") format("woff"),
  url("../font/Poppins-MediumItalic_0.ttf") format("opentype"),
  url("../font/Poppins-MediumItalic_0.ttf") format("truetype");
}



/* Fonts End */


#appcontainer {
  /* margin-bottom: 10vh;
  margin-top: 2vh; */
  margin-bottom: 10vh;
  margin-top: 2vh;
  width: 70%;
  margin: auto;
  min-height: 91vh;
  background-color: white;
  color: black;
  padding-bottom: 10vh;
}

/* Mobile Bottom Menu */
.appBottomMenu {
    min-height: 56px;
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #E1E1E1;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: env(safe-area-inset-bottom);
    /* background: #00678f; */
    /* background: #35a8cd; */
    
    /* border-top-color: #1B283B; */
    background-image: linear-gradient(to bottom,#00678f 0%,#54a0bd 100%)!important;
    width: 60%;
    margin: auto;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

.appBottomMenu .item {
    font-size: 9px;
    letter-spacing: 0;
    text-align: center;
    width: 100%;
    height: 56px;
    line-height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.appBottomMenu a img {
    margin: 1px auto 3px auto;
    font-size: 26px;
    line-height: 1em;
    color: #141515;
    transition: 0.1s all;
    display: block;
    margin-top: 1px;
    margin-bottom: 3px;
    width: 25px;
}

.appBottomMenu .item strong {
    margin-top: 4px;
    display: block;
    color: #ffffff;
    font-weight: 400;
    transition: 0.1s all;
    text-transform: uppercase;
    font-family: "poppings-sembold";
}
/* Mobile Bottom Menu End */

/* Mobile Header */

.appHeader {
    min-height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    z-index: 999;
    /* background: #17678f; */
    /* background: #35a8cd; */
    color: #141515;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 10%), 0 1px 3px 0 rgb(0 0 0 / 8%);
    background-image: linear-gradient(to bottom,#00678f 0%,#54a0bd 100%)!important;
    /* background-image: linear-gradient(to bottom,#fdcb05 0%,#857533 100%)!important; */
  }

  .appHeader .pageTitle {
    color: #fff;
  }

  .appHeader .pageTitle {
    font-size: 17px;
    font-weight: 500;
    padding: 0 10px;
    width: 45%;
  }

  .appHeader .pageTitle .mobile_logo {
    max-height: 42px;
  }

  .appHeader .left,
  .appHeader .right {
    height: 56px;
    display: flex;
    align-items: center;
    position: absolute;
  }

  .appHeader .right {
    right: 8px;
    top: 0;
  }

  .appHeader .left .headerButton,
  .appHeader .right .headerButton {
    min-width: 36px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #141515;
    position: relative;
  }


  
  .appHeader .right .headerButton img {
    width: 18px;
  }

  .appHeader .username p{

    margin: 0px;
    color: #217a9f;
    background-color: white;
    text-align: center;
    border-radius: 10px;
    font-size: 12px;
    padding: 5px;
    font-family: 'poppings-sembold';
    text-transform: capitalize;
    
  }

/* Mobile Header End */

/* Categories Page */

.categories .category_box {
  /* background-color: #196c93; */
  padding: 10px;
  margin: 10px;
  text-align: center;
  border-radius: 10px;
  box-shadow: inset -1px 0px 2px 0px rgb(0 0 0 / 75%);
  -webkit-box-shadow: inset -1px 0px 2px 0px rgb(0 0 0 / 75%)
}

.categories .cat_heading {
  margin-top: 3vh;
  margin-bottom: 3vh;
  text-align: center;
  text-transform: uppercase;
}

.categories .cat_heading h2{
  font-family: "poppings-sembold";
}

.categories .category_box img {
  width: 50px;
}

.categories .category_box a {
  display: block;
}

.categories .category_box p {
  margin: 0px;
  color: white;
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
  text-transform: uppercase;
  font-family: "poppings-sembold";
}

.gradient_first {
  background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
}

.gradient_second {
  background-image: linear-gradient(to top, #c71d6f 0%, #d09693 100%);
}

.gradient_third {
  background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
}

.gradient_fourth {
  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
}


/*  Login CSS */

.login {
  /* margin-top: 2vh;
  margin-bottom: 2vh; */
  padding-top: 1vh;
}

.login .heading {
  margin: auto;
  text-align: center;
  padding-top: 22px;
  padding-bottom: 22px;
}

.login .heading h2 {
  font-family: 'poppings-bold';
}

.login .heading p {
  font-size: 14px;
  font-family: 'poppings-regular';
}

.login .login_content {
  margin: auto;
  width: 50%;
  /* padding: 20px; */
}

.login .login_content .fields {
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  min-height: 25vh;
  display: flex;
  width: 100%;
  background-color: #d8d8d861;
  box-shadow: 6px 6px 7px 0px rgb(201 201 201 / 75%);
  -webkit-box-shadow: 6px 6px 7px 0px rgb(201 201 201 / 75%);
  -moz-box-shadow: 6px 6px 7px 0px rgb(201 201 201 / 75%);
  border: 1px solid #cfcece;
  flex-direction: column;
}

.login .login_content .fields small {
  text-align: center;
  font-size: 11px;
  font-family: 'poppings-sembold';
  padding: 12px;
}

.login .login_content .fields .form-group {
  width: 100%;
  padding: 16px 10px;
  padding-bottom: 0px;
}

.login .login_content .fields label {
  font-family: 'poppings-regular';
}

.login .login_content .fields .form-control {
  background-color: #ffffff;
  font-family: 'poppings-regular';
}

.login .login_content .login_button button {
  width: 100%;
  background-color: aqua;
  margin: auto;
  margin-top: 5vh;
  background-image: linear-gradient(to bottom, #00678f 0%, #54a0bd 100%) !important;
  color: white;
  font-family: 'poppings-sembold';
  font-size: 17px !important;
}

.login .login_content .register {
  text-align: center;
  margin-top: 2vh;
}

.login .login_content .register p {
  font-family: 'poppings-regular';
}

.login .login_content .register a {
  color: black;
  background-color: #ffcb05;
  padding: 10px;
  border-radius: .25rem;
  box-shadow: 4px 5px 2px 0px rgb(0 0 0 / 75%);
  -webkit-box-shadow: 4px 5px 2px 0px rgb(0 0 0 / 75%);
  -moz-box-shadow: 4px 5px 2px 0px rgb(0 0 0 / 75%);
  font-family: 'poppings-sembold';
  
}


/*  Register CSS */

.register {
  /* margin-top: 2vh;
  margin-bottom: 2vh; */
  padding-top: 3vh;
}

.register .heading {
  margin: auto;
  text-align: center;
}

.register .heading h2 {
  font-family: 'poppings-bold';
}

.register .heading p {
  font-size: 14px;
  font-family: 'poppings-regular';
}

.register .login_content {
  margin: auto;
  width: 50%;
}

.register .login_content .fields {
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  min-height: 25vh;
  display: flex;
  width: 100%;
  background-color: #d8d8d861;
  box-shadow: 6px 6px 7px 0px rgb(201 201 201 / 75%);
  -webkit-box-shadow: 6px 6px 7px 0px rgb(201 201 201 / 75%);
  -moz-box-shadow: 6px 6px 7px 0px rgb(201 201 201 / 75%);
  border: 1px solid #cfcece;
  flex-direction: column;
}

.register .login_content .fields small {
  text-align: center;
  font-size: 11px;
  font-family: 'poppings-sembold';
  padding: 8px
}

.register .login_content .fields .form-group {
  width: 100%;
  padding: 9px 10px;
    padding-bottom: 0px;
}

.register .login_content .fields label {
  font-family: 'poppings-regular';
}

.register .login_content .fields .form-control {
  background-color: #ffffff;
  font-family: 'poppings-regular';
}

.register .login_content .login_button button {
  width: 100%;
  background-color: aqua;
  margin: auto;
  margin-top: 5vh;
  background-image: linear-gradient(to bottom, #00678f 0%, #54a0bd 100%) !important;
  color: white;
  font-family: 'poppings-sembold';
  font-size: 17px !important;
}

.register .login_content .login {
  text-align: center;
  margin-top: 0vh;
}

.register .login_content .login p {
  font-family: 'poppings-regular';
}

.register .login_content .login a {
  color: black;
  background-color: #ffcb05;
  padding: 10px;
  border-radius: .25rem;
  box-shadow: 4px 5px 2px 0px rgb(0 0 0 / 75%);
  -webkit-box-shadow: 4px 5px 2px 0px rgb(0 0 0 / 75%);
  -moz-box-shadow: 4px 5px 2px 0px rgb(0 0 0 / 75%);
  font-family: 'poppings-sembold';
}

/* Temprary CSS */

.game_leaderboard .game_header{
  display: flex;
  flex-direction: row;
}

.leftside_ads{
  position: fixed;
    left: 2%;
    top: 15%;
    min-width: 160px;
}


.rightside_ads{
  position: fixed;
    right: 2%;
    top: 15%;
    min-width: 160px;
}
.sidebarbanners {
  position: fixed;
  margin-top: 2%;
  min-width: 160px;
}