@font-face {
  font-family: main;
  src: url(../Font/NEUZEITGRO/NEUZEITGRO-REG.OTF);
}

@font-face {
  font-family: main-bold;
  src: url(../Font/NEUZEITGRO/URW_NEUZEITGRO_BOLD.TTF);
}

@font-face {
  font-family: alt;
  src: url(../Font/Carbon/CARBONREGULAR.OTF);
}

body {
  background-color: #111111;
  font-family: main;
  color: #888fa4;
  overflow-x: hidden;
  max-width: 100%;
}

h1 {
  color: #ffffff;
  font-size: 42px;
  text-align: center;
}

h2 {
  color: #ffffff;
  font-size: 26px;
  text-align: center;
}

p {
  font-size: 16px;
}

li {
  font-size: 16px;
}

a {
  font-weight: bold;
  color: #79bef6;
  text-decoration: none;
}

a:visited {
  color: #79bef6;  
}

.lb {
  display: block;
}

.lbc {
  display: table;
  text-align: center;
  margin: auto;
}

.lbr {
  display: table;
  margin-left: auto;
}

.centeredBox {
  width: 1000px;
  height: 200px;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  margin: auto;

  font-family: main;
  font-size: 20pt;
}

.iframeLegalBody {
  background-color: #333333;
}

.iframeLegal {
  background-color: #333333;
  font-family: alt;
  font-size: 16px;
  color: #ffffff;
  white-space: pre-wrap;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #030a20; 
}

::-webkit-scrollbar-thumb {
  background: #3e82b1; 
}

::-webkit-scrollbar-thumb:hover {
  background: #5da1d0; 
}

/*--------------------------------
Main Styles
--------------------------------*/

.checkbox {
  display: inline-block;
  background-image: url("../Image/checkbox_off.png");
  background-repeat: no-repeat;
  background-position: center top;
  width: 48px;
  height: 48px;
  margin: 6px;
  vertical-align: middle;
}

.checkboxChecked {
  display: inline-block;
  background-image: url("../Image/checkbox_checked.png");
  background-repeat: no-repeat;
  background-position: center top;
  width: 48px;
  height: 48px;
  margin: 6px;
  vertical-align: middle;
}

.bulletPoint {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/*--------------------------------
Align DIV NW
--------------------------------*/

.alignNW_Outer {
  position: absolute;
  z-index: 1;
}

.alignNW_Middle {
  position: relative;
}

.alignNW_Inner {

}

/*--------------------------------
Align DIV N
--------------------------------*/

.alignN_Outer {
  position: absolute;
  left: 50%;
  z-index: 1;
}

.alignN_Middle {
  position: relative;
  left: -50%;
}

.alignN_Inner {

}

/*--------------------------------
Align DIV NE
--------------------------------*/

.alignNE_Outer {
  position: absolute;
  right: 0;
  z-index: 1;
}

.alignNE_Middle {
  position: relative;
}

.alignNE_Inner {

}

/*--------------------------------
Align DIV W
--------------------------------*/

.alignW_Outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.alignW_Middle {
  display: table-cell;
  vertical-align: middle;
}

.alignW_Inner {
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------
Align DIV C 
--------------------------------*/

.alignC_Outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.alignC_Middle {
  display: table-cell;
  vertical-align: middle;
}

.alignC_Inner {
  display: table;
  text-align: center;
  margin: auto;
}

/*--------------------------------
Align DIV E
--------------------------------*/

.alignE_Outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  right: 0;
}

.alignE_Middle {
  display: table-cell;
  vertical-align: middle;
}

.alignE_Inner {
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------
Align DIV SW
--------------------------------*/

.alignSW_Outer {
  display: table;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.alignSW_Middle {

}

.alignSW_Inner {

}

/*--------------------------------
Align DIV S
--------------------------------*/

.alignS_Outer {
  display: table;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
}

.alignS_Middle {
  position: relative;
  left: -50%;
}

.alignS_Inner {

}

/*--------------------------------
Align DIV SE
--------------------------------*/

.alignSE_Outer {
  display: table;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.alignSE_Middle {
  position: relative;
}

.alignSE_Inner {

}

/*--------------------------------
Loading
--------------------------------*/

.loadingIcon {
  height: 240px;
}

.loadingIconSmall {
  vertical-align: middle;
  height: 56px;
}

.loadingIconTDOverlayWrap {
  position: absolute;
  width: 120px;
  height: 120px;
}

.loadingIconTDOverlayInner {
  position: relative;
  top: -220%;
  left: 100%;
}

.loadingIconTDOverlay {
  height: 120px;
}

.moduleTagline {
  font-size: 20px;
  text-align: center;
}

.moduleTaglineSmall {
  font-size: 16px;
  text-align: center;
}

.successText {
  font-size: 20px;
  text-align: center;
  color: #33ff33;
}

.failureText {
  font-size: 20px;
  text-align: center;
  color: #ff3333;
}

.failureWalletText {
  font-size: 30px;
  text-align: center;
  color: #ff3333;
}

.failureWalletDescriptionText {
  font-size: 20px;
  text-align: center;
  font-style: italic;
  color: #777777;
}

.promptText {
  font-size: 20px;
  text-align: center;
  color: #ffff33;
}

.promptOKText {
  font-size: 20px;
  text-align: center;
  color: #ffffff;
}

.promptCancelText {
  font-size: 20px;
  text-align: center;
  color: #ffffff;
}

.noticeWalletText {
  font-size: 22px;
  text-align: center;
}

.responseLargeText {
  font-size: 22px;
  text-align: center;
}

.getMetaMaskText {
  font-size: 20px;
  text-align: center;
  color: #999999;
}

.invalidNetworkText {
  font-size: 20px;
  text-align: center;
  color: #999999;
}

.signInPromptText {
  font-family: alt;
  font-size: 28px;
  text-align: center;
  color: #ffffff;
}

.signInDescriptionText {
  font-family: main;  
  font-size: 20px;
  text-align: center;
  color: #999999;
}

.mainBody {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.mainBodyNoScrollH {
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
}

.navbarWrap {
  width: 1200px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
}

.navbar {
  font-family: alt;
  font-size: 20px;
  text-align: right;
  color: #ffffff;
  width: 100%;
  min-height: 48px;
  position: relative;
  z-index: 10000;
  text-transform: uppercase;
}

.navbarLink {
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbarAvatarImg {
  vertical-align: middle;
}

.navbarAvatarFill {
  display: inline-block;
  height: 48px;
  width: 1px;
  vertical-align: middle;
}

.navbarLinkWrap {
  display: inline-block;
  margin-left: 14px;
  margin-right: 14px;
  margin-top: 12px;
  height: 24px;
}

.navbarLinkWrapNoHover {
  display: inline-block;
  margin-left: 14px;
  margin-right: 14px;
  height: 48px;
}

.navbarLinkWrap:hover {
  display: inline-block;
  margin-left: 14px;
  margin-right: 14px;
  height: 24px;
  background-image: url("../Image/navbar_hover.png");
  background-repeat: no-repeat;
  background-position: center bottom;
}

.navbarLinkMenuWrap {
  display: none;
  position: relative;
}

.navbarLinkMenu {
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0px);
  background: #050505;
  border: 2px solid #999999;
  box-shadow: 6px 6px 10px #000;
}

.navbarLinkMenuItem {
  margin-left: 14px;
  margin-right: 14px;
  margin-top: 12px;
  margin-bottom: 8px;
  height: 22px;
  text-align: center;
  white-space: nowrap;
}

.navbarLinkMenuItem:hover {
  margin-left: 14px;
  margin-right: 14px;
  margin-top: 12px;
  margin-bottom: 8px;
  background-image: url("../Image/navbar_hover.png");
  background-repeat: no-repeat;
  background-position: center bottom;
}

.navbarLogo {
  position: absolute;
  top: 0;
  left; 0;
  z-index: 10100;
  margin-top: 6px;
}

.adminInfo {
  display: inline-block;
  font-size: 20px;
  color: #ffffff;
}

.adminInfoValue {
  display: inline-block;
  font-size: 20px;
  color: #999999;
}

.adminInfoDate {
  display: inline-block;
  font-size: 16px;
  color: #999999;
}

.adminInfoValueXPConsumption {
  display: inline-block;
  font-size: 16px;
  color: #999999;
}

.homeDivider {
  background-image: url("../Image/home_divider.png");
  background-repeat: no-repeat;
  background-position: center top;
  padding: 22px 0px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  min-height: 240px;
}

.homeDividerLong {
  background-image: url("../Image/home_divider_long.png");
  background-repeat: no-repeat;
  background-position: center top;
  padding: 22px 0px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  min-height: 240px;
}

.homeDividerTitle {
  font-family: alt;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 30px;
  color: #ffffff;
}

.lineDivider {
  background-image: url("../Image/line_divider.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.copyright {
  font-family: main;
  font-size: 18px;
  text-align: center;
  margin-bottom: 30px;
}

.foooterLinks {
  text-transform: uppercase;
  font-size: 20px;
  color: #ffffff;
}

.oneColumn {
  width: 700px;
  align: center;
  margin-left: auto;
  margin-right: auto;
}

.oneColumnMinHeight {
  width: 700px;
  min-height: 250px;
  align: center;
  margin-left: auto;
  margin-right: auto;
}

.oneColumnWide {
  width: 1000px;
  align: center;
  margin-left: auto;
  margin-right: auto;
}

.oneColumnFAQ {
  width: 1000px;
  align: center;
  margin-left: auto;
  margin-right: auto;
}

.twoColumnTable {
  width: 1200px;
  border-spacing: 50px 10px;
  border-collapse: separate;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.twoColumnTableTD {
  width: 600px;
  vertical-align: top;
}

.twoColumnTableTitle {
  font-size: 30px;
  color: #ffffff;
}

.threeColumnTableGrid {
  width: 1200px;
  border-spacing: 2px;
  border-collapse: separate;
}

.threeColumnTableGridTD {
  width: 400px;
  vertical-align: middle;
  text-align: center;
}

.cryptoElementonStat {
  font-size: 22px;
}

.gotoModule {
  display: table;
  width: 100%;
  text-align: center;
  font-size: 22px;
}

/*--------------------------------
Home
--------------------------------*/

.homeTitleMajor {
  color: #ffffff;
  font-size: 80px;
  text-align: center;
}

.homeTitleMajorAlt {
  color: #999999;
  font-size: 50px;
  text-align: center;
}

.homeTitleMinor {
  color: #ffffff;
  font-size: 34px;
}

.homeSectionText {
  color: #888fa4;
  font-size: 19px;
}

.headerCTK {
  background-image: url("../Image/home/CTK.png");
  background-repeat: no-repeat;
  background-position: center top;
  width: 1170px;
  min-height: 540px;
  text-align: center;
  margin-top: 70px;
}

.headerCTKText {
  font-size: 48px;
  color: #ffffff;
}

.footerCTK {
  background-image: url("../Image/home/CTK.png");
  background-repeat: no-repeat;
  background-position: center top;
  width: 1200px;
  min-height: 540px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);  
  text-align: center;
}

.footerCTKText {
  font-size: 32px;
}

/*--------------------------------
FAQ
--------------------------------*/

.faqQuestion {
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
}

.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/*--------------------------------
Pagination
--------------------------------*/

.pageTitle {
  font-family: alt;
  display: table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 22px;
  text-transform: uppercase;
}

.page {
  font-family: alt;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin: 2px;
  cursor: pointer;
}

.pageNumber {
  position: absolute;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
}

.pageArrowImg {
  vertical-align: middle;
  padding: 4px;
  cursor: pointer;
  user-select: none;
}

.pageNoItems {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  font-family: main-bold;
  font-size: 40px;
  color: #ffffff;
}

.elementonAnchor {
  cursor: pointer;
}

.elementonTableGrid {
  width: 1050px;
  border-spacing: 0px;
  border-collapse: separate;
  margin: auto;
}

.elementonTableGridTR {
  background-image: url("../Image/elementon_table_row_bg.png");
  background-repeat: no-repeat;
  background-position-y: 160px;
}

.elementonTableGridTD {
  width: 390px;
  vertical-align: middle;
  text-align: center;
}

.elementonTableCell {
  margin-top: 40px;
  margin-bottom: 40px;
}

.teamTableGrid {
  width: 1050px;
  border-spacing: 0px;
  border-collapse: separate;
  margin: auto;
}

.teamTableGridTD {
  width: 390px;
  vertical-align: middle;
  text-align: center;
}

.teamTableCell {
  margin-bottom: 90px;
}

.teamTableCellDelete {
  margin-bottom: 10px;
}

.teamTableCellTitle {
  font-family: main-bold;
  font-size: 60px;
  color: #ffffff;
}

.teamTableCellElementonTitle {
  font-family: alt;
  font-size: 20px;
  color: #999999;
  text-transform: uppercase;
}

.teamStatsBar {
  background-image: url(../Image/stats_bar.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 800px;
  height: 62px;
  margin: 0px;
  color: #ffffff;
}

.teamStatsBar td {
  text-align: center;
  vertical-align: middle;
  font-family: alt;
  font-size: 16px;
  text-transform: uppercase;
  color: #ffffff;
}

.teamStatsBarPrefix  {
  display: inline-block;
  margin-left: 8px;
}

.teamStatsBarPrefixNoMargin  {
  display: inline-block;
}

.teamStatsBarAvgLvl  {
  display: inline-block;
  font-family: main-bold;
  font-size: 36px;
  text-align: right;
  margin-right: 20px;
}

.teamStatsBarBattleCount  {
  display: inline-block;
  font-family: main-bold;
  font-size: 36px;
  text-align: right;
  margin-right: 20px;
}

.teamStatsBarBattleWonCount {
  display: inline-block;
}

.teamStatsBarBattleLostCount {
  display: inline-block;
}

.teamStatsBarLastPlayed {
  display: inline-block;
}

.teamTableEdit {
  border-spacing: 10px;
}

.teamTableCellElementonEmpty {
  background-image: url(../Image/elementon_team_slot_bg.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  border-spacing: 0px;
}

.teamTableCellElementon {
  background-image: url(../Image/elementon_team_slot_bg.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  border-spacing: 0px;
  cursor: pointer;
}

.teamEmptySlot {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(0.66666, -0.66666)
}

.teamSlotElementonTitle {
  font-family: alt;
  font-size: 20px;
  border-spacing: 0px;
  color: #999999;
  text-transform: uppercase;
}

.teamTitleEdit {
  width: 600px;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: main-bold;
  font-size: 70px;
  margin: 10px;
  text-align: center;
}

/*--------------------------------
Elementon Popup
--------------------------------*/

.elementonPopupFadeBG {
  display: none;
  position: fixed;
  background-image: url(../Image/FadeBG.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

.elementonPopup {
  display: none;
  position: fixed;
  background-image: url(../Image/elementon_adopt_popup_bg.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 1080px;
  height: 623px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.elementonPopupCloseDiv {
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.elementonPopupButton {
  font-family: alt;
  text-transform: uppercase;
  cursor: pointer;
}

.elementonPopupButtonText {
  font-family: alt;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  color: #000000;
  font-size: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -3px;
  white-space: nowrap;
}

.elementonPopupImg {
  position: absolute;
  text-align: center;
  left: 150px;
  transform: translate(-50%, -50%);
}

.elementonPopupTable {
  width: 700px;
  padding: 20px;
  color: #ffffff;
  font-family: alt;
  font-size: 16px;
  text-transform: uppercase;
}

.elementonPopupTableOverlay {
  width: 700px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  color: #ffffff;
  font-family: alt;
  font-size: 16px;
  text-transform: uppercase;
  position: absolute;
  top: 20px;
  z-index: 300;
}

.elementonPopupTableOverlayIcons {
  width: 700px;
  height: 160px;
  text-align: right;
  padding-top: 20px;
  padding-left: 14px;
  padding-right: 14px;
  color: #ffffff;
  font-family: alt;
  font-size: 16px;
  text-transform: uppercase;
  position: absolute;
  top: 20px;
  z-index: 100;
}

.elementonPopupTableInner {
  width: 100%;
  color: #ffffff;
  font-family: alt;
  font-size: 16px;
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.elementonPopupTabIcon {
  display: inline-block;
  text-align: right;  
}

.elementonPopupTableStatLabel {
  color: #ffffff;
  font-size: 20px;
  padding-right: 20px;
}

.elementonPopupTableStats {
  border-spacing: 0px;
}

.elementonPopupTableStat {
  background-image: url("../Image/elementon_stat_bar_empty.png");
  background-repeat: no-repeat;
  background-position: left center;
  width: 176px;
  min-width: 176px;
  height: 6px;
}

.elementonPopupTableStatBack {
  position: absolute;
  width: 210px;
  height: 6px;
}

.elementonPopupTableStatBar {
  display: block;
  position: relative;
  vertical-align: middle;
}

.elementonPopupTableStatOverlayWrap {
  position: relative;
  left: 100%;
  top: -4px;
}

.elementonPopupTableStatOverlay {
  display: none;
  position: absolute;
  color: #ffffff;
  background: #050505;
  font-size: 20px;
  border: 1px solid #999999;
  padding: 2px;
  margin-left: 10px;
  transform: translate(0px, -50%);
}

.elementonPopupTitle {
  display: inline-block;
  font-family: main-bold;
  font-size: 80px;
  max-width: 600px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: none;
}

.elementonPopupTitleEdit {
  display: inline-block;
  vertical-align: top;
  margin-top: 20px;
  margin-left: 10px;
  cursor: pointer;
}

.elementonPopupTitleInput {
  display: none;
  width: 600px;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: main-bold;
  font-size: 80px;
}

.elementonPopupGen {
  display: inline-block;
  margin-right: 20px;
}

.elementonPopupLevel {
  display: inline-block;
}

.elementonPopupType {
  display: inline-block;
}

.elementonPopupRarity {
  display: inline-block;
}

.elementonPopupDivider {
  width: 100%;
  height: 1px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.elementonPopupDividerTab {
  width: 100%;
  height: 1px;
  margin-top: 32px;
}

.elementonPopupDesc {
  overflow-y: auto;
  white-space: pre-wrap;
  max-height: 230px;
}

.elementonPopupTabs {
  background-image: url("../Image/tab_divider_popup.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  width: 100%;
  height: 180px;
  margin-top: 10px;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 200;
}

.elementonPopupTabsHeaderFill {
  height: 148px;
}

.elementonPopupTabsMarginFill {
  display: inline-block;
  width: 16px;
}

.elementonPopupTab {
  background-image: url("../Image/popup_tab_deselected.png");
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  margin-right: -50px;
  width: 190px;
  height: 33px;
  font-family: alt;
  cursor: pointer;
}

.elementonPopupTabSelected {
  background-image: url("../Image/popup_tab_selected.png");
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  margin-right: -50px;
  width: 190px;
  height: 33px;
  font-family: alt;
  cursor: pointer;
}

.elementonPopupTabText {
  vertical-align: middle;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  text-transform: uppercase;
  font-size: 16px;
  color: #60636d;
}

.elementonPopupTabTextSelected {
  vertical-align: middle;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  text-transform: uppercase;
  font-size: 16px;
  color: #ffffff;
}

.elementonPopupTabPage {
  display: none;
  width: 700px;
  margin-top: 28px;
  padding-left: 20px;
  padding-right: 20px;
  color: #ffffff;
  font-family: alt;
  font-size: 16px;
  text-transform: uppercase;
}

.elementonPopupAttacks {
  overflow-y: auto;
  max-height: 350px;
}

.elementonPopupAttacksSkillTitle {
  font-size: 22px;
  color: #999999;
}

.elementonPopupAttacksSkillTitleLevelUnlock {
  font-size: 16px;
  color: #ffff00;
}

.marketplaceNoticeText {
  font-size: 20px;
}

.marketplaceSellFee {
  display: inline-block;
  color: #00ff00;
}

/*--------------------------------
Account Tabs
--------------------------------*/

.accountTabContent {
  border-spacing: 0px;
  border-collapse: separate;
  margin: auto;
}

.accountTable {
  width: 800px;
  border-spacing: 8px;
  text-align: left;
}

.accountTableCell {
  background-color: #444444;
  color: #ffffff;
  width: 100%;
  border-radius: 16px;
  padding: 12px;
  font-size: 20px;
}

.accountTableCellEdit {
  background-color: #111111;
  color: #ffffff;
  width: 80%;
  padding: 12px;
  font-size: 20px;
}

.accountTabDescriptionText {
  font-size: 16px;
  text-align: left;
  font-style: italic;
  color: #777777;
}

/*--------------------------------
Elementon Mini Stats
--------------------------------*/

.elementonMiniStats {
  display: none;
  position: absolute;
  background-image: url(../Image/mini_stat_box.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 110px;
  height: 331px;
  transform: translate(-70px, -100%);
  z-index: -50;
  margin: 0px;
}

.elementonMiniStatsTable {
  width: 110px;
  border-spacing: 0px;
}

.elementonMiniStatsTable td {
  text-align: center;
  vertical-align: middle;
  font-family: alt;
  font-size: 14px;
  text-transform: uppercase;
}

.elementonMiniStatsBattleCount {
  font-family: main-bold;
  font-size: 50px;
  color: #ffffff;
  text-transform: none;
}

.elementonMiniStatsBattleWonCount {
  font-family: main-bold;
  font-size: 22px;
  color: #ffffff;
  text-transform: none;
}

.elementonMiniStatsBattleLostCount {
  font-family: main-bold;
  font-size: 22px;
  color: #ffffff;
  text-transform: none;
}

/*--------------------------------
Adoption Center
--------------------------------*/

.elementonInfoBar {
  font-family: alt;
  background-image: url(../Image/elementon_info_bar.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 200px;
  height: 40px;
}

.elementonInfoBarCell {
  display: table-cell;
  padding: 0px;
  vertical-align: middle;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  width: 50%;
}

.elementonInfoSingleLine {
  font-family: alt;
  display: table-cell;
  padding: 0px;
  vertical-align: middle;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  width: 50%;
}

.elementonInfoBarCellEthIcon {
  vertical-align: middle;
  margin-bottom: 3px;
}

.elementonAdoptTable {
  display: table;
  width: 100%;
  background: #00ffff;
}

.elementonAdoptTableCell {
  display: table-cell;
  text-align: center;
  background: #00ffff;
}

.elementonAdoptTableCellTitle {
  font-family: alt;
  font-size: 20px;
  color: #999999;
  text-transform: uppercase;
  margin-top: 20px;
}

.elementonAdoptSortFilterTable {
  width: 100%;
  text-align: left;
}

.elementonAdoptSortFilterPrefix {
  font-family: alt;
  font-size: 16px;
  color: #ffffff;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.elementonAdoptSortFilterSuffix {
  display: inline-block;
  font-family: alt;
  font-size: 16px;
  color: #ffffff;
  text-transform: uppercase;
  vertical-align: top;
  white-space: nowrap;
}

.elementonAdoptSortFilterInputText {
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: alt;
  font-size: 16px;
  text-transform: uppercase;
}

.elementonAdoptSortFilterInputSelect {
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: alt;
  font-size: 16px;
  text-transform: uppercase;
}

/*--------------------------------
List Elementon
--------------------------------*/

.elementonListedPriceLabel {
  font-size: 22px;
  color: #999999;
}

.elementonListedPrice {
  font-size: 22px;
  color: #ffffff;
}

.actionButton {
  display: table;
  cursor: pointer;
  background-image: url(../Image/button_action.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 240px;
  height: 48px;
  font-size: 22px;
  text-transform: uppercase;
  text-align: center;
  margin: 6px;
  color: #ffffff;
}

.actionButtonLong {
  display: table;
  cursor: pointer;
  background-image: url(../Image/button_action_long.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 320px;
  height: 48px;
  font-size: 22px;
  text-transform: uppercase;
  text-align: center;
  margin: 6px;
  color: #ffffff;
}

.actionButtonShort {
  display: table;
  cursor: pointer;
  background-image: url(../Image/button_action_short.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 140px;
  height: 48px;
  font-size: 22px;
  text-transform: uppercase;
  text-align: center;
  margin: 6px;
  color: #ffffff;
}

.actionButtonIcon {
  display: table;
  cursor: pointer;
  background-image: url(../Image/button_action_icon.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 100px;
  height: 48px;
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  margin: 6px;
  color: #ffffff;
}

.actionButtonSignIn {
  display: table;
  cursor: pointer;
  background-image: url(../Image/button_action_sign_in.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 450px;
  height: 48px;
  font-size: 22px;
  text-transform: uppercase;
  text-align: center;
  margin: 6px;
  color: #ffffff;
}

.commandButton {
  display: table;
  cursor: pointer;
  background-image: url(../Image/button_command.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 240px;
  height: 48px;
  font-size: 22px;
  text-transform: uppercase;
  text-align: center;
  margin: 6px;
  color: #ffffff;
}

.specialButton {
  display: table;
  cursor: pointer;
  background-image: url(../Image/button_special.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 240px;
  height: 48px;
  font-size: 22px;
  text-transform: uppercase;
  text-align: center;
  margin: 6px;
  color: #ffffff;
}

.actionButtonText {
  font-family: alt;
  padding: 0px;
  display: table-cell;
  vertical-align: middle;
  user-select: none;
  z-index: 1;
}

.actionButtonIconText {
  font-family: alt;
  padding: 0px;
  display: table-cell;
  vertical-align: middle;
  z-index: 1;
}

.commandButtonText {
  font-family: alt;
  padding: 0px;
  display: table-cell;
  vertical-align: middle;
  user-select: none;
  text-shadow: 2px 2px 5px #000;
  z-index: 1;
}

.filledButton {
  display: table;
  cursor: pointer;
  background-image: url(../Image/button_filled.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 240px;
  height: 48px;
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  margin: 6px;
  color: #ffffff;
}

.filledButtonText {
  color: #050505;
  padding: 0px;
  display: table-cell;
  vertical-align: middle;
  user-select: none;
  z-index: 1;
}

.showButton {
  display: inline-block;
  cursor: pointer;
  background-image: url(../Image/show_button.png);
  background-repeat: no-repeat;
  background-position: center top;
  width: 72px;
  height: 22px;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  margin: 6px;
  color: #ffffff;
}

.showButtonText {
  font-family: alt;
  padding: 0px;
  vertical-align: middle;
  user-select: none;
  position: relative;
  top: 50%;
  transform: translate(0px, -50%);
  z-index: 1;
}

.elementonActionButton {
  position: relative;
  text-align: center;
  
  img {
    width: 100%;
  }
}

.elementonActionButtonText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  width: 100%;
  text-transform: uppercase;
  color: #ffffff;
}

.elementonApprovalForAllDescriptionText {
  font-size: 15px;
  text-align: left;
  font-style: italic;
  color: #777777;
}

.elementonApprovalForAllDescriptionTextApproved {
  display: inline-block;
  color: #00ff00;
}

.elementonApprovalForAllDescriptionTextNotApproved {
  display: inline-block;
  color: #ff0000;
}

/*--------------------------------
Form
--------------------------------*/

.formInput {
  width: 100%;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: alt;
  font-size: 20px;
}

.formInputSelect {
  width: 100%;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: alt;
  font-size: 20px;
}

.formInputStatic {
  width: 100%;
  background: #050505;
  color: #ffffff;
  font-family: alt;
  font-size: 20px;
  text-transform: none;
}

.formWrap {
  background: #050505;
  padding: 20px;
  border: 2px solid #282828;
  width: 700px;
}

.formTable {
  position: relative;
  border-spacing: 16px;
  font-family: alt;
  font-size: 18px;
  text-transform: uppercase;
  width: 100%;
}

.formPrefix {
  text-align: right;
  color: #999999;
  white-space: nowrap;
}

.formDescriptionText {
  font-size: 15px;
  text-align: left;
  font-style: italic;
  color: #777777;
}

.formInputTextarea {
  width: 100%;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-size: 16px;
}

.formInputSignIn {
  width: 100%;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: alt;
  font-size: 34px;
}

.formInputRedeemCode {
  width: 100%;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: alt;
  font-size: 34px;
}

/*--------------------------------
Create Account
--------------------------------*/

.createAccountForm {
  background-repeat: no-repeat;
  background-position: center top;
  width: 1200px;
  height: 600px;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -100;
}

.createAccountInput {
  width: 100%;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: alt;
  font-size: 20px;
}

.createAccountInputSelect {
  width: 100%;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: alt;
  font-size: 20px;
}

.createAccountInputStatic {
  width: 100%;
  background: #050505;
  color: #ffffff;
  font-family: alt;
  font-size: 20px;
  text-transform: none;
}

.createAccountInputTC {
  width: 100%;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: alt;
  font-size: 20px;
}

.createAccountFormWrap {
  background: #050505;
  padding: 20px;
  border: 2px solid #282828;
  width: 700px;
}

.createAccountFormTable {
  position: relative;
  border-spacing: 16px;
  font-family: alt;
  font-size: 18px;
  text-transform: uppercase;
  width: 100%;
}

.createAccountFormPrefix {
  vertical-align: top;
  text-align: right;
  color: #999999;
  white-space: nowrap;
}

.createAccountFormAgreement {
  font-family: main;
  font-size: 14px;
  text-transform: none;
  text-align: center;
  color: #ffffff;
}

.createAccountTCFrame {
  background-color: #333333;
  width: 100%;
  height: 500px;
  border: 2px solid #48506c;
}

.createAccountDescriptionText {
  font-size: 15px;
  text-align: left;
  font-style: italic;
  color: #777777;
}

/*--------------------------------
Account
--------------------------------*/

.accountCurveBarBacking {
  background-color: #040b1f;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 600px;
  z-index: -200;
}

.accountCurveBar {
  background-image: url("../Image/curve_bar.png");
  background-repeat: no-repeat;
  background-position: center top;
  width: 1200px;
  height: 600px;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -100;
}

.accountProfileLayer {
  width: 1200px;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -90;
}

.accountHeaderLayer {
  width: 1200px;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
}

.accountTabs {
  background-image: url("../Image/tab_divider.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 1200px;
  height: 150px;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
}

.accountTab {
  background-image: url("../Image/folder_tab_deselected.png");
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  margin-right: -10px;
  width: 194px;
  height: 43px;
  font-family: alt;
  cursor: pointer;
}

.accountTabSelected {
  background-image: url("../Image/folder_tab_selected.png");
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  margin-right: -10px;
  width: 194px;
  height: 43px;
  font-family: alt;
  cursor: pointer;
}

.accountTabText {
  vertical-align: middle;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  text-transform: uppercase;
  font-size: 20px;
}

.accountTabTextSelected {
  vertical-align: middle;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  text-transform: uppercase;
  font-size: 20px;
  color: #999999;
}

.accountHeaderTableEdit {
  vertical-align: middle;
  margin-top: 4px;
  cursor: pointer;
}

.accountHeaderTable {
  font-family: alt;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  width: 1100px;
}

.accountHeaderTableUsername {
  display: inline-block;
  font-family: alt;
  color: #ffffff;
  font-size: 20px;
  text-align: left;
  margin-left: 10px;
  white-space: nowrap;
  text-transform: none;
}

.accountHeaderTableLocation {
  display: inline-block;
  font-family: alt;
  font-size: 20px;
  text-align: left;
  margin-left: 10px;
  white-space: nowrap;
  text-transform: none;
}

.accountHeaderTableUsernameInput {
  display: none;
  background: #050505;
  border: 2px solid #282828;
  font-family: alt;
  font-size: 20px;
  color: #ffffff;
  text-align: left;
  width: 250px;
  margin-left: 10px;
}

.accountHeaderTableLocationInput {
  display: none;
  background: #050505;
  border: 2px solid #282828;
  font-family: alt;
  font-size: 18px;
  color: #ffffff;
  text-align: left;
  margin-left: 10px;
}

.accountHeaderTableAddress {
  font-family: alt;
  color: #ffffff;
  text-align: right;
  white-space: nowrap;
}

.accountHeaderTableWalletAddress {
  display: inline-block;
  font-family: alt;
  color: #ffffff;
  text-align: right;
  white-space: nowrap;
}

.accountHeaderTableNumber {
  font-family: main-bold;
  font-size: 100px;
  color: #ffffff;
  text-transform: none;
}

.accountSortFilterPrefix {
  font-family: alt;
  font-size: 16px;
  color: #ffffff;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.accountSortFilterSuffix {
  display: inline-block;
  font-family: alt;
  font-size: 16px;
  color: #ffffff;
  text-transform: uppercase;
  vertical-align: top;
}

.accountSortFilterInputSelect {
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: alt;
  font-size: 16px;
  text-transform: uppercase;
}

/*--------------------------------
Edit Page
--------------------------------*/

.editorTabContent {
  border-spacing: 0px;
  border-collapse: separate;
  margin: auto;
}

.editorTable {
  width: 800px;
  border-spacing: 8px;
  text-align: left;
}

.editorTableCell {
  background-color: #444444;
  color: #ffffff;
  width: 100%;
  border-radius: 16px;
  padding: 12px;
  font-size: 20px;
}

.editorTableCellEdit {
  background-color: #111111;
  color: #ffffff;
  width: 80%;
  padding: 12px;
  font-size: 20px;
}

.editorTableDescriptionText {
  font-size: 16px;
  text-align: left;
  font-style: italic;
  color: #777777;
}

.editorIcon {
  vertical-align: middle;
  margin-top: 4px;
  cursor: pointer;
}

.editorLabel {
  font-family: alt;
  font-size: 26px;
  color: #ffffff;
  text-align: left;
  margin-left: 10px;
}

.editorInput {
  background: #050505;
  border: 2px solid #282828;
  font-family: alt;
  font-size: 26px;
  color: #ffffff;
  text-align: left;
  margin-left: 10px;
}

.editorTitle {
  display: inline-block;
  font-family: alt;
  color: #ffffff;
  font-size: 34px;
  text-align: left;
  margin-left: 10px;
  white-space: nowrap;
  text-transform: none;
}

.editorTitleInput {
  display: none;
  background: #050505;
  border: 2px solid #282828;
  font-family: alt;
  font-size: 34px;
  color: #ffffff;
  text-align: left;
  margin-left: 10px;
}

/*--------------------------------
Drag-and-Drop Upload
--------------------------------*/

.dropZone {
  border: 2px solid #ffffff;
  width: 350px;
  height: 350px;
}

.dropZoneText {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

/*--------------------------------
Model Viewer
--------------------------------*/

.modelViewerProgressBar {
  display: none;
  visibility: hidden;
}

/*--------------------------------
Dropdown
--------------------------------*/

/* Style The Dropdown Button */
.dropbtn {
  background-color: #3b3b3b;
  color: #ffffff;
  padding: 12px;
  border: none;
  cursor: pointer;
  font-family: alt;
  font-size: 16pt;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  font-family: alt;
  font-size: 16pt;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: left;
  white-space: nowrap;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #79bef6;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #79bef6;
  color: black;
}

/*--------------------------------
Collapsible
--------------------------------*/

.collapsible {
  background-color: #444;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  border-radius: 16px;
  padding: 12px;
  font-size: 20px;
}

.collapsibleContent {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/*--------------------------------
Collection
--------------------------------*/

.collectionBlockchainTitle {
  color: #ffffff;
  font-size: 24px;
}

.collectionBlockchainInputSelect {
  width: 100%;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-family: alt;
  font-size: 20px;
}

.collectionDeployTable {
  border: 1px solid;
  padding: 0px;
  border-spacing: 0px;
  text-align: left;
}

.collectionDeployTable td {
  border: 1px solid;  
  padding: 8px;
  border-spacing: 1px;
}

.collectionDeployTable th {
  border: 1px solid;  
  padding: 8px;
  border-spacing: 1px;
  font-weight: bold;
}

.collectionContractAddressText {
  font-family: monospace;
  font-size: 12pt;
}

/*--------------------------------
OGA
--------------------------------*/

.ogaRigWrapper {
  display: inline-block;
  text-align: left;
}

.ogaRigRoot {
  width: 400px;
  height: 400px;
  transform: scale(1.0, -1.0);
  text-align: left;
}

.ogaTitle {
  color: #ffffff;
  font-size: 20px;
}

.ogaBlockchainTitle {
  color: #999999;
  font-size: 16px;
  font-style: italic;
}

.ogaDetail {
  color: #ffffff;
  font-size: 16px;
  font-style: italic;
}

/*--------------------------------
API Docs
--------------------------------*/

table.apiDocsTable {
  border: 1px solid #888fa4;
  border-collapse: collapse;
  border-color: #888fa4;
  padding: 8px;
  font-size: 16px;
}

table.apiDocsTable td {
  border: 1px solid #888fa4;
  border-collapse: collapse;
  border-color: #888fa4;
  padding: 8px;
  font-size: 16px;
}

.apiDocsTitle {
  font-size: 22px;  
  color: #ffffff;
}

.apiDocsHeader {
  color: #888fa4;
  background-color: #212636;
  font-weight: bold;
}

.apiDocsKey {
  color: #888fa4;
}

.apiDocsValue {
  color: #ffffff;
}

.apiDocsValueDescription {
  color: #888fa4;
}

.apiDocsRequestBody {
  color: #ffffff;
  padding-top: 20px;
  font-size: 18px;
}

.apiDocsTry {
  color: #ffffff;
  padding-top: 20px;
  font-size: 18px;
}

.apiDocsTrySubmit {
  text-align: center;
}

.apiDocsOutputTitle {
  padding-top: 20px;
  font-size: 18px;
}

.apiDocsOutput {
  width: 100%;
  height: 240px;
  background: #050505;
  border: 2px solid #282828;
  color: #ffffff;
  font-size: 16px;
}

/*--------------------------------
Redeem
--------------------------------*/

.redeemDescriptionText {
  font-family: alt;
  font-size: 32px;
  text-align: center;
  color: #ffffff;
}