/* universal */
body{height:100%; margin: 0; padding: 0px;}
html{background: var(--main-bg-color); color: var(--main-text-color); font-family: "Roboto", sans-serif; position:relative; min-height:100%; height:100%;}
button{background-color: var(--button-bg-color); color: var(--button-text-color); padding: 6px; border-radius: 5px; margin-top: 15px; height: 40px; font-size: 18px; width: 100%; border: 0; cursor: pointer; cursor: pointer; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease 0s;outline: none;}
.center{position: relative; top: 50%; -webkit-transform: translateY(-60%); -ms-transform: translateY(-60%); transform: translateY(-60%); z-index: 1;}
h1{margin: 0; font-size: 25px; font-weight: 500; line-height:1.5em;}
h3{margin: 5px 0 10px 0; padding: 0; font-size: 20px; font-weight: bold;}
a{color:#21a0f1;}
label{display: inline-block; margin-bottom: 10px;}
#wrapper{ text-align: center; height: 100%;}
#status{display: none; background-color: var(--callout-bg-color); color: var(--callout-text-color); line-height: 45px; font-size: 25px; font-weight: bold; width: 100%; text-align: center; position: fixed; top: 0%; z-index: 100;}
.powered_by{display:none; font-size:18px; color: var(--main-text-color); margin-top:50px; margin-bottom:0;padding-bottom: 40px;line-height:1.5!important; width:80%!important; margin-left:auto; margin-right:auto;}
.underlined{text-decoration: underline; cursor: pointer;}

/* mobile menu */
#mobile_menu{display: none; z-index: 3; position:absolute; top: 100px; left: 0; width: 100%; background-color: var(--topmenu-bg-color); color: var(--topmenu-text-color); font-size:var(--topmenu-text-color); padding: 0 18px 26px 18px;}
#mobile_menu_items{margin: 45px 0 0 0; padding: 0; list-style: none;}
#mobile_menu_items li{margin: 16px 0px; font-size: 17px; font-weight: 400; cursor: pointer;}
.mobile_menu_link a{text-decoration: none; color: var(--mobilemenu-text-color);}
.fa-x:before {content: “\58”; padding-right: 5px;}

/* wallet choice modal */
#wallet_choice_wrapper{display: none; width: 342px; margin-left: auto; margin-right: auto; position: fixed; left: calc(50% - 190px);
  color: black; background-color:#d8d8d8!important; padding: 20px 20px 30px 20px; border-radius: 10px; box-shadow:rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,rgba(0, 0, 0, 0.06) 0px 0px 0px 1px!important;}
#wallet_choice{list-style: none; margin: 0; padding: 0;}
#wallet_choice li{border-radius: 5px; padding: 10px; margin: 10px 0; font-size: 20px!important; text-align: center; background-color:var(--alt-button-bg-color); cursor: pointer; box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px!important;}
#wallet_choice li span{vertical-align: bottom; height: 100%;}
#wallet_choice img{height: 18px; display: inline-block;}
#wallet_note{font-size: 12px;}

/* header nav */
#top_bg{position: absolute; z-index: 0; background-color: var(--topmenu-bg-color); top:0; left:0; width: 100%; height: 102px;}
#top_menu{padding: 26px 0 5px 0; max-width: 1000px; margin-left: auto; margin-right: auto;}
#top_menu_left{width: 150px; display: inline-block;}
#top_menu_right{display: inline-block; vertical-align: top; margin-top: 50px; text-align: right; width: calc(100% - 160px); white-space: nowrap; }
#top_menu_links{list-style: none; padding: 16px 14px;  margin-bottom: 40px;  margin-top: -40px;}
#top_menu_links li{display: inline-block; padding: 0 0 0 10px; cursor: pointer;}
#logo{cursor: pointer; height: 50px;}
#hamburger{margin-top: 0px; display: none; cursor: pointer; border: 2px solid var(--topmenu-text-color); padding: 12px 16px 12px 16px; color: var(--topmenu-text-color); font-size: 14px; font-weight: 500;}
.top_menu_link a{text-decoration: none; color: var(--topmenu-text-color); padding: 10px; font-weight: 400; font-size: 16px; }
a.selected{text-decoration: underline;}

/* wallet address */
.wallet_address_wrapper{cursor: pointer;}
#ethaddress{background: var(--modal-bg-color) !important; text-overflow: ellipsis;}

/* Balances */
#balances{margin-left: 10px;}

/* footer */
.logout, .clear_cache{display: inline-block; margin-top: 10px; cursor: pointer; text-decoration:underline;}

/* wallet page */
#main_container_outer{display: none; min-height: 100%; position: relative; z-index: 1;}
#main_container{text-align: left; max-width: 70%; min-width: 360px; margin-left: auto; margin-right: auto; min-height: 80%; position: relative;}
#breadcrumbs{margin: 10px 0 10px 10px; display: inline-block;}
.wallet_address_wrapper{text-align: right; margin: 10px 20px 0 0; white-space: nowrap; float: right; }
#home{cursor: pointer;}

/* nft ui card */
#nfts, #nft_detail{display: none; color: var(--main-text-color); border-radius: 5px; padding: 0px 0; text-align: center;}
#nft_count{display: none; width: 100%; text-align: center; padding: 0 0 9px 0; margin: 0; font-size: 20px; font-weight:400!important;}
#nftlist{list-style: none; padding: 0; margin: 0;}
#nftlist li{display: inline-block;color: var(--modal-text-color); background-color: var(--modal-bg-color);border-radius: 5px; padding: 20px; text-align: center; margin: 5px; box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px, rgb(0 0 0 / 6%) 0px 0px 0px 1px;}
#nftlist img, #nftlist object{width: 298px; height: 298px; object-fit: contain; border-radius: 5px; object-position: bottom;}
.nftitle{display: inline-block;font-size: 20px;font-weight: 600;padding: 15px 0px 0px 0px;width: 284px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.nft_details{display: inline-block; cursor: pointer;}
.imgcont{position: relative;}
.enlarge{color: #d8d8d8; cursor: pointer; position: absolute; display: inline-block; bottom: 10px; right: 5px; background: rgba(0, 0, 0, 0.36); width: 20px; height: 20px; padding: 5px; border-radius: 6px; z-index: 9;}
.file_spacer{height: 37px}

/* nft details page */
#nft_detail{display: none; padding: 20px;}
#nft_detail_image{display: inline-block; min-width: 300px; vertical-align: middle;}
#nft_image{width: 375px; display: block; margin: 0; padding: 0; border-radius: 5px;}
#nft_detail_text{ vertical-align: top; display: inline-block; max-width: 445px; width: 50%; position: relative; padding: 0 10px 0 10px; text-align: left;}
#nft_name{margin: 5px 0;}
#about_collection_header, #about_nft_header, #collection_title{padding: 20px 0 5px 0; font-size: 20px; font-weight: bold;}
#about_nft, #about_collection{border-radius: 5px;}
#nft_detail_text h1{font-size: 18px; margin: 0; padding: 0; font-weight: normal;}
#nft_detail_text p{margin: 0; line-height:1.5;}
#bigImgWrap{width: 100%; height: 100%; position:fixed; top:0;  left:0; z-index: 10; background: #1b2050a3;}
#bigImg{max-width: 100%; max-height: 100%; width: 100%; height: 100%; bottom: 0; left: 0; margin: auto; overflow: auto; position: fixed; right: 0; top: 0; -o-object-fit: contain; object-fit: contain;}
#bigImgCover{width: 100%; height: 100%; position:fixed; top:0;  left:0; z-index: 12; cursor: pointer;}


/* general modal */
#modal{display: none; position:fixed; left: 50%; top: 50%; z-index: 22;}
#modal_inner{position: relative; transform: translate(-50%, -50%); background-color: var(--modal-bg-color); color: var(--modal-text-color); padding: 30px; border-radius: 5px;}
#modal_text{ word-wrap: break-word; word-break: break-word; text-align: center; margin-right: 5px;}
#modal_text input{margin-bottom: 5px; margin-top: 15px; background-color: var(--modal-bg-color); color: var(--modal-text-color); border-radius: 5px; padding: 6px; font-size: 22px; width: calc(100% - 12px); border: 0;}
#modal_close{position: absolute; top: 0; right: 0; cursor: pointer; padding: 5px 10px 0 0; font-size: 20px; font-weight: 600; }
#modal_grey{display: none; background: #1b2050a3; width: 100%; height: 100%; position:fixed; top:0;  left:0; z-index: 10;}

/* wallet adress modal */
#advanced{position: absolute; z-index: 0; bottom: 4px; left: 4px;}
#transfer_address{display: inline-block; background-color: var(--callout-bg-color) !important; color: var(--callout-text-color) !important;}
#do_transfer{margin-top: 0; display: inline-block;}
#copy_address{white-space: nowrap;}


@media only screen and (max-width:  821px) {
  #nft_detail_text{vertical-align: top; display: inline-block; max-width: 505px; width: 100%; position: relative; padding: 0 0 0 0px; text-align: left; vertical-align: middle;}
  #nft_image {width: 375px; margin-left: auto; margin-right: auto; vertical-align: middle;}
}
@media only screen and (max-width: 1100px) {
  #nft_image { width:330px;}
  #main_container {max-width: 0;}
  #top_menu_links, #sub_menu_links{display:none;}
  #hamburger{display: inline-block;margin-right:5px;}
  #nft_detail_text {width: 100%; padding: 0 0 0 0px;}
  #logo{width:135px; height: auto; margin-left: 13px; margin-bottom: 10px;}
  #top_menu_right{margin-top: 0;}
  .wallet_address_wrapper{margin: 45px 13px 0 0;}
  #top_bg{height:82px;padding-bottom:20px;}
  #nft_count {font-weight: 400!important;}
  #breadcrumbs {margin: 45px 0 10px 13px; display: inline-block;}}