body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.84);
  /* background: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(https://gamingforgood.net/__static/assets/img/space-background.jpg) 50% 0% no-repeat fixed black; */
  background-image: url(https://gamingforgood.net/__static/assets/js/cos_page/src/img/BackgroundImg.png);
}
body, html {
  height: 100%;
}
* {
  box-sizing: border-box;
}
/* a {
    color: #b28ef4;
} */
footer a:hover {
  color: white !important;
}
#root {
  height: 100%;
}
@font-face {
  font-family: "PoetsenOne";
  src: url(https://gamingforgood.net/__static/assets/js/cos_page/src/fonts/PoetsenOne-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "Ellipsoideogram";
  src: url(https://gamingforgood.net/__static/assets/js/cos_page/src/fonts/Ellipsoideogram.ttf) format("truetype");
}
/*  ===============
        NAVBAR
    ===============  */
.navbar {
  min-height: 50px;
  padding: 0 30px;
  /* background-color: #6441a5; */
  background-color: #150D0C;
}
.navbar:after {
  content: "";
  display: table;
  clear: both;
}
.navbarLogo {
  padding-top: 5px;
}
.navbarGoal {
  margin-left: 40px;
  margin-top: 10px;
}
/* .navbarLinks {
  float: right;
} */
.navbarLinks {
  float: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.navbarLinks a {
  color: rgba(255,255,255,0.84) !important;
  /* line-height: 20px; */
  padding: 15px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.navbarLinks a:focus {
  outline: none;
}
.dropdown {
  /* background-color: white; */
  margin-top: -5px;
  background-color: #150D0C;
  border: 2px solid #6E4723;
  border-radius: 5px;
  box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.dropdown a {
  /* color: rgba(0, 0, 0, 0.84); */
  color: #371A09;
  display: block;
}
.dropdown a:hover {
  /* background-color: #ddd; */
  background-color: rgba(255, 255, 255, 0.2);
}
/*  ===============
        SEARCH
    ===============  */
.searchMenu {
  /* background-color: #1c122f; */
  background: linear-gradient(#723f2b, #593121, #34211B);
  border-bottom: 1px solid black;
  padding: 10px 20px;
  font-family: PoetsenOne;
}
.searchTitle {
  font-size: 14px;
  width: 150px;
  display: inline-block;
  text-align: right;
  vertical-align: top;
  padding-right: 15px;
  padding-top: 10px;
}
.searchBar>.fa {
  display: inline-block;
  font-size: 20px;
  margin: 0 5px;
  cursor: pointer;
  color: #FFB516;
}
.searchBar>.fa:hover {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 1px #6441A5;
}
.searchBar>.fa-question-circle {
  cursor: help;
}
.searchField input, .searchList {
  box-shadow: inset 0 0 20px #000000, inset 0 0 10px #000000, 0 0 2px #000000;
  border-top: none;
  border-left: 1px ridge rgba(0, 0, 0, 0.1);
  border-right: 1px ridge rgba(0, 0, 0, 0.1);
  border-bottom: 3px ridge rgba(175, 86, 50, 0.8);
  background-color: #311B13;
}
.searchField {
  display: inline-block;
  position: relative;
  width: calc(100% - 220px)
}
.searchField input{
  color: rgba(255,255,255,0.84);
  font-family: PoetsenOne;
  /* background-color: #110b1d; */
  /* border: 1px solid #4f3875; */
  min-height: 38px;
  font-size: 14px;
  width: 100%;
  border-radius: 2px;
}
.searchField input:focus {
  outline: none;
  /* box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3); */
  background-color: rgba(0, 0, 0, 0.1);
}
.searchFieldTags {
  position: absolute;
  top: 4px;
  left: 4px;
  max-width: calc(100% - 120px);
  color: #371A09;
}
.tag {
  /* font-weight: 500; */
  /* background-color: #281a42; */
  background-color: #FEB415;
  border-radius: 20px;
  display: inline-block;
  line-height: 19px;
  font-size: 11px;
  padding: 2px 4px;
  margin: 3px 2px;
  opacity: 0.5;
  box-shadow: -1px 3px #644028, 1px 3px #644028;
}
.tag.active {
  /* background-color: #6441a5; */
  opacity: 1 !important;
}
.tag.clickable:active {
  box-shadow: -0.5px 2px #644028, 0.5px 2px #644028 !important;
  transform: translateY(1px);
}
.clickable {
  cursor: pointer;
}
.clickable:hover {
  /* box-shadow: inset 0 0 6px #987EC7; */
  opacity: 0.8;
}
.tag .fa-times-circle {
  margin-left: 2px;
}
.subtag {
  font-size: 11px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  display: inline-block;
  padding: 0 3px;
  margin: 0 2px;
}
.subtag option {
  background-color: #CB9231;
}
.subtag.active {
  /* background-color: #503484; */
  background-color: #F0D897;
}
.tag .fa {
  font-size: 14px;
  /* color: rgba(255, 255, 255, 0.3); */
  color: rgba(250, 251, 212, 0.5);
}
.tag .fa:hover {
  /* color: rgba(255, 255, 255, 0.6); */
  color: rgba(250, 251, 212, 1);
}
.searchListWrap {
  margin-top: 20px;
}
.searchList .tag {
  background-color: #986B2B;
  color: #371A09;
  opacity: 1;
}
/* .searchList .clickable {
  background-color: rgb(98, 95, 105);
} */
.searchList .active {
  /* background-color: #6441A5; */
  background-color: #FEB415;
}
.searchList .subtag.active {
  background-color: #F0D897;
}
.searchList {
  /* background-color: #3a2660;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3); */
  padding: 4px 15px;
  display: inline-block;
  width: calc(100% - 150px)
}

.carouselButton {
  opacity: 0;
}
.carousel:hover .carouselButton {
  opacity: 1;
}

.raised_amount {
  display: none;
}
.emergency_row .raised_amount {
  display: block;
}

/* .newCookieNotice {
  position: absolute;
  z-index: 999999999;
  bottom: 0px;
  height: 230px;
  width:300px;
  left: 50px;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  background-color: white;
  padding: 10px;
  text-align: center;
  color: black;
} */
.newCookieNotice {
  position: absolute;
  z-index: 999999999;
  bottom: 0px;
  height: 230px;
  width:300px;
  left: 50px;
  padding: 10px;
  font-size: 14px;
  text-align: center;
  color: lightgoldenrodyellow;
  background-color: #55271F;
  border: 3px solid #753F26;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.5);
}
.newCookieNotice a {
  color: #FFB516 !important;
}

/* .newCookieNoticeBtn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  background-color: #6441a5;
  color: white;
  border-radius: 0;
} */
.newCookieNoticeBtn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  background-color: #FFB516;
  color: #523623;
  border-radius: 2px;
  font-family: PoetsenOne;
}

/** BETA BANNER **/

.copy_button:active, #download_apk_button:active { 
  /* Scaling button to 0.98 to its original size */ 
  transform: scale(0.98); 
  /* Lowering the shadow */ 
  box-shadow: 3px 2px 10px 1px rgba(0, 0, 0, 0.24); 
}

.beta_banner_beta_access {
  width: 33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.copy_button {
  outline: none;
  background-image: url("https://gamingforgood.net/__static/assets/img/frontpage/Btn_Copy.png");
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: none;
  background-repeat: no-repeat;
  background-size: 32px 32px;
  margin-top: 5px;
  cursor: pointer
}

#download_apk_button {
  outline: none;
  background-image: url("https://gamingforgood.net/__static/assets/img/frontpage/Btn_DownloadBluestacks.png");
  background-repeat: no-repeat;
  border: none;
  background-color: transparent;
  background-size: 100% 100%;
  width: 250px;
  height: 50px;
  margin-top: 40px;
}

#install_via_link_field_mobile {
  overflow: hidden;
  width: 288px;
  height: 30px;
  padding: 0 1.5%;
  border-radius: 5px;
  border-width: 0px;
  border-color: transparent;
  background-color: rgb(249, 248, 244);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 2.1;
  resize: none;
  font-weight: bold;
}
#install_via_link_field {
  overflow: hidden;
  width: 288px;
  height: 30px;
  margin: 7px 0 30px;
  padding: 0 1.5%;
  border-radius: 5px;
  border-width: 0px;
  border-color: transparent;
  background-color: rgb(249, 248, 244);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 2.1;
  resize: none;
  font-weight: bold;
}

#beta_banner_emailInput {
  display: none;
  overflow: hidden;
  width: 330px;
  height: 34px;
  min-height: 34px;
  margin: 7px 0 30px;
  padding: 0 1.5%;
  border-radius: 5px;
  border-width: 0px;
  border-color: transparent;
  background-color: rgb(249, 248, 244);
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 2.1;
  resize: none;
}

.status_prompt {
  pointer-events: none;
  position: absolute;
  color: #FFB516;
  font-family: PoetsenOne;
  text-align: center;
  background-image: linear-gradient( to right, transparent, rgba(85, 47, 32, 0.8), rgba(85, 47, 32, 0.95), rgba(85, 47, 32, 0.95), rgba(85, 47, 32, 0.95), rgba(85, 47, 32, 0.95), rgba(85, 47, 32, 0.95), rgba(85, 47, 32, 0.8), transparent );
}

.beta_banner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-image: url("https://gamingforgood.net/__static/assets/img/frontpage/Background_BETABanner.png");
  background-size: cover;
}
.beta_banner_child {
  width: 33%;
  height: 100%;
}
.beta_banner_cowboy {
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.beta_disclaimer_streaming_headline {
  font-size: 1.1vw;
  font-weight: bold;
  color: #dc461b;
  font-family: PoetsenOne;
}
#beta_cowboy {
  background-size: contain;
  height: 150%;
  width: 67%;
  background-repeat: no-repeat;
  background-image: url("https://gamingforgood.net/__static/assets/img/frontpage/Cowboy.png");
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
#speechBubble {
  width: 10%;
  position: absolute;
  height: 50%;
  margin-left: 12%;
  background-size: contain;
  background-repeat: no-repeat;
}
#speechBubble.playMyGame {
  background-image: url("https://gamingforgood.net/__static/assets/img/frontpage/SpeechBubble.png")
}
#speechBubble.seeYouInGame {
  background-image: url("https://gamingforgood.net/__static/assets/js/cos_page/src/img/magic_link/SpeechBubble_SeeYouInGame.png")
}
.beta_banner_disclaimer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 5% 0 2%;
}

#beta_downloadGuideBtn {
  background: linear-gradient(#8E2497, #590E74);
  border: 1px solid #AE54BB;
  color: rgba(255, 255, 255, 1);
  font-family: PoetsenOne;
  border-radius: 3px;
  box-shadow: -1px 3px #111, 1px 3px #111;
}

#beta_downloadNovTwentyTwenty {
  background: linear-gradient(#8E2497, #590E74);
  border: 1px solid #AE54BB;
  color: rgba(255, 255, 255, 1);
  font-family: PoetsenOne;
  border-radius: 3px;
  box-shadow: -1px 3px #111, 1px 3px #111;
}

.beta_banner_tooltip {
  width: 157px !important;
  background-color: #341710 !important;
  border-radius: 13px !important;
  opacity: 1 !important;
  padding: 8px !important;
}
.beta_banner_tooltip::after {
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top-color: #341710 !important;
  margin-left: -4px !important;
}