/* blue theme */
:root {
  --xen: #58454E;
  --blue: #63B3ED;
/*  --blue: #5f93ec;*/
/*  --blue: #6695B7;*/
  --blue-hover: #2A4365;
/*  --blue-hover: #447ec4;*/
  --yellow: #F4AE3D;
  --red: #e95626;
  --green: #00cf9e;
  --green-hover: #00ffc1;
  --white: #fff;
  --black: #000;
  --lightblack: #212121;
  --gray: #555;
  --sitebg: rgb(18, 18, 18);
  --text: #ccc;
  --lg1: #2f78d1;
  --lg2: #2B3C50;
  --lg3: rgb(18, 18, 18);
  --lg4: rgb(18, 18, 18);
  --boxborder: rgb(18, 18, 18);
  --nft1: rgba(22,156,156,1);
  --nft2: rgba(156,25,22,1);
}
/*
        @media (prefers-color-scheme: dark) {
            :root {
              --blue: rgb(144, 202, 249);
              --green: rgb(102, 187, 106);
              --white: #fff;
              --gray:  #555;
              --sitebg: rgb(18, 18, 18);
              --text: #ccc;
              --lg1: rgb(102, 187, 106);
              --lg2: rgb(144, 202, 249);
              --lg3: rgb(18, 18, 18);
              --lg4: rgb(18, 18, 18);
              --lg5: rgb(144, 202, 249);
              --lg6: rgb(18, 18, 18);
              --lg7: rgb(102, 187, 106);
              --boxborder: rgb(18, 18, 18);
              --tabbg: rgb(102, 187, 106);
              --tabfg: #000;
/*        --green: rgb(102, 187, 106);*/
/*        --green-hover: #92FF57;*/
            }
        }
*/
/*
        @media (prefers-color-scheme: light) {
            [data-theme="light"] {
              --xen: #58454E;
              --blue: #6695B7;
              --blue-hover: #447ec4;
              --yellow: #F4AE3D;
              --red: #e95626;
              --green: #00cf9e;
              --green-hover: #00ffc1;
              --white: #000;
              --black: #fff;
              --gray: #555;
              --sitebg: rgb(237,237, 237);
              --text: #333;
              --lg1: #2f78d1;
              --lg2: #2B3C50;
              --lg3: rgb(18, 18, 18);
              --lg4: rgb(18, 18, 18);
              --boxborder: rgb(18, 18, 18);
              --nft1: rgba(22,156,156,1);
              --nft2: rgba(156,25,22,1);
            }
        }
*/
.nft {
    background: rgb(156,25,22) !important;
    background: linear-gradient(315deg, var(--nft2) 0%, var(--nft1) 100%) !important;
    margin-top: 40px !important;
    border-radius: 20px !important;
}

.nftinner p {padding: 0 10px;margin: 10px 0;color: #fff;}
.nftinner {
    padding: 0px;
}
.xenft {text-align: center !important;vertical-align: top;width: 90px;height: 80px;position: relative;}
.xenft img{width: 70px;height: 50px;margin-left: 16px;}
.nft-Ruby {background: linear-gradient(315deg, hsl(360, 0%, 0%) 10%, hsl(1, 75%, 38%) 90%);color: #fff;}
.nft-Opal {background: linear-gradient(315deg, hsl(1, 100%, 50%) 10%, hsl(45, 75%, 38%) 90%);}
.nft-Topaz {background: linear-gradient(315deg, hsl(30, 100%, 50%) 10%, hsl(89, 75%, 38%) 90%);}
.nft-Emerald {background: linear-gradient(315deg, hsl(60, 100%, 50%) 10%, hsl(129, 75%, 38%) 90%);color:#fff;}
.nft-Aquamarine {background: linear-gradient(315deg, hsl(120, 100%, 50%) 10%, hsl(173, 75%, 38%) 90%);}
.nft-Sapphire {background: linear-gradient(315deg, hsl(180, 100%, 50%) 10%, hsl(216, 75%, 38%) 90%);}
.nft-Amethyst {background: linear-gradient(315deg, hsl(240, 100%, 50%) 10%, hsl(270, 75%, 38%) 90%);}
.nft-Xenturion {background: linear-gradient(315deg, hsl(300, 100%, 50%) 10%, hsl(360, 0%, 0%) 90%);}
.nft-Limited {background: linear-gradient(315deg, hsl(263, 75%, 45%) 10%, hsl(42, 75%, 45%) 90%);}
.nft-Rare {background: linear-gradient(315deg, hsl(169, 75%, 45%) 10%, hsl(210, 75%, 45%) 50%, hsl(305, 75%, 45%) 90%);}
.nft-Epic {background: linear-gradient(315deg, hsl(169, 75%, 45%) 10%, hsl(210, 75%, 45%) 50%, hsl(305, 75%, 45%) 90%);}
.nft-Legendary {background: linear-gradient(315deg, hsl(169, 75%, 45%) 10%, hsl(210, 75%, 45%) 50%, hsl(305, 75%, 45%) 90%);}
.nft-Exotic {background: linear-gradient(315deg, hsl(169, 75%, 45%) 10%, hsl(210, 75%, 45%) 50%, hsl(305, 75%, 45%) 90%);}
.nft-Xunicorn {background: linear-gradient(315deg, hsl(169, 75%, 45%) 10%, hsl(210, 75%, 45%) 50%, hsl(305, 75%, 45%) 90%);}
.nft-Stake {background: linear-gradient(90deg, hsl(50, 10%, 36%) 0%, hsl(50, 10%, 12%) 50%, hsl(50, 10%, 5%) 100%);}

html {
    height: 100%;
}
body {
    font-family: -apple-system,'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.1rem;
    color: var(--text);
    /* background-color: var(--sitebg); */
    background: radial-gradient(circle, rgb(48, 59, 51) 0%, rgb(0, 0, 0) 100%);
    line-height: 26px;
    margin: 0;
    position: relative;
    padding: 0;
    min-height: 100%;
/*            background-image: url(/img/earth-moon-sun-skyscrapers.png);*/
/*            background-repeat: no-repeat;*/
/*            background-position: center;*/
/*            background-blend-mode: color;*/
/*            background-size: cover;*/
}
#container {
    margin: 50px 10px 0 0;
}
.big {
    color: var(--sitebg);
    padding: 16px 16px 16px 64px;
    white-space: nowrap;
    background: linear-gradient(90deg, var(--lg1) 0%, var(--lg2) 35%, var(--lg3) 100%);
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 10px 10px 0px 0px;
    position: relative;
}
h2,h3 {
    float: left;
    margin: 0px 0 0px 20px;
    color: var(--white);
    padding: 4px 15px 4px 10px;
    border-radius: 10px;
}
h2 {
    padding: 4px 15px 8px 10px;
}
h4 {
    color: var(--white);
    margin: 10px 0 10px 20px
}
.tabactive {
    cursor: default;
    color: var(--white);
    background: linear-gradient(315deg, var(--lg1) 0%, var(--lg2) 100%) !important;
    border-radius: 10px 10px 0 0;
    transition: all .4s ease-in-out;
}
.tabinactive {
    cursor: pointer;
    color: var(--text);
    background: var(--sitebg);
    border-radius: 10px 10px 0 0;
    font-size: 16px;
    transition: all .4s ease-in-out;
}
.big {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 700;
    padding: 14px;
    margin-top: 10px;
    text-align: center;
    color: var(--blue);
}
.xmlogo {
/*  height: 48px !important;*/
/*  max-height: 2.5rem !important;*/
  vertical-align: middle;
  height: 82px !important;
  max-height: unset !important;
}
.icon {
  max-width: unset;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  vertical-align: top;
}
.is-active .icon {
/*            width: 42px;*/
/*            height: 42px;*/
}
.menu {
    font-size: 1.2rem;
    color: var(--blue);
    margin: 10px 0 10px 20px;
}
.menu a:hover {
    color: var(--blue-hover);
    text-decoration: none;
}
.menu a {
    color: var(--blue);
    text-decoration: none;
}
#xmMenu {
  display: unset;
  line-height: 0;
}
#xmMenu .dropdown-menu {
  background: var(--blue-hover);
}
.navbar-item, .navbar-link {
  color: var(--white);
}
a.navbar-item:hover {
  background-color: var(--sitebg);
  color: var(--blue);
}
#chainpicker {
  background-color: var(--blue-hover);
}
#dropdown-chain button {
  border: solid 1px var(--blue-hover);
  box-shadow: none;
}
#dropdown-chain button:hover {
  background: var(--blue-hover);
}
.dropdown-item {
  color: var(--white);
}
a.dropdown-item:hover {
  background-color: var(--sitebg);
  color: var(--blue);
}
.link{margin-right: 10px;margin-top: 20px;}
.button {
    font-size: 18px;
    background: none;
    border-radius: 50px;
    border: solid 1px var(--blue);
    cursor: pointer;
    color: var(--white);
    font-weight: 700;
    box-shadow: 1px 0px 3px var(--text);
}
.button:hover { 
    background: linear-gradient(11deg,var(--lg3) 0%,var(--lg2) 35%,var(--lg1) 100%);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 5px 15px;
    color: var(--white);
}
.button.is-active, .button:active {
  border-color: var(--blue);
  color: var(--text);
}
.button.is-focused, .button:focus {
  border-color: var(--blue);
  color: var(--text);
}
.button.is-success {
  background-color: #25855A;
  border-color: transparent;
  color: #fff;
}
.link .button{margin-right: 10px;}
.addbutton {
  font-weight: 400;
  background: linear-gradient(11deg, var(--yellow) 0%, var(--yellow) 35%, var(--yellow) 100%);
/*    background: linear-gradient(11deg, var(--lg1) 0%, var(--lg2) 35%, var(--lg3) 100%);*/
  border: solid 1px var(--yellow);
  color: var(--black);
  line-height: 24px;
}
.addbutton:hover {
  background: linear-gradient(11deg, var(--green) 0%, var(--green) 35%, var(--green) 100%);
  color: var(--black);
  border: solid 1px var(--green);
}
.closebutton {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 99999;
  color: var(--white);
  padding: 10px;
  border: none !important;
}
.pagination {
  display: none;
  user-select: none;
/*            font-size: 14px;*/
/*            align-items: flex-start;*/
/*            float: right;*/
/*            margin-top: 15px;*/
/*            margin-bottom: 15px;*/
}

.pagination a:hover, .pagination .pagecounter:hover {
    background-color: var(--blue);
    color: var(--sitebg);
}
/*        .pagination a {
    cursor: pointer;
}*/
.pagination .pagecounter {
    cursor: default;
}
.pagination a, .pagination .pagecounter {
    background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
/*            background-color: rgba(255,255,255,0.1);*/
    color: var(--blue);
    text-align: center;
    margin-right: 10px;
    padding: 5px 15px 5px 15px;
    border-radius: 5px;
}
#currentMintPage, #currentStakePage {
    display: inline-flex;
    font-size: 24px;
    padding: 10px;
}
.icon-tabler {
    margin-right: 5px;
}         
.export {
    float: right;
    font-size: 1.5rem;
    margin: 10px 10px 0 0;
}
label {
/*            margin-left: 15px;*/
    font-weight: 700;
    line-height: 32px;
    margin-right: 10px;
}
.label {
    margin-left: 15px;
    font-weight: 700;
    line-height: 32px;
    margin-right: 10px;
    color: var(--white) !important;
}
input {
    padding: 10px;
    border: solid 1px var(--blue);
    max-width: 80%;
    border-radius: 10px;
    color: var(--blue) !important;
    background-color: var(--black);
    outline: 0;
    transition: all .2s ease-in-out;
}
input:focus {
    border: solid 1px var(--blue);
}
.input, .select select, .textarea {
	background-color: #2b444b;
	border-color: #dbdbdb;
	border-radius: 4px;
  color: var(--blue) !important;
	border: none;
	border-bottom: solid 1px #7f7f7f;
}
#xenvalue {
    line-height: 34px;
    margin-left: 10px;
}
#xenamount {
  color: var(--yellow);
}
.xencalc {
  position: sticky;
  top: 197px;
  background: var(--black);
  z-index: 8;
}
#chain {
    font-size: 32px;
    margin-right: 10px;
    border-radius: 10px;
    padding: 2px 2px 4px 10px;
    background: linear-gradient(90deg, var(--lg1) 0%, var(--lg2) 90%, var(--lg3) 100%);
    color: var(--sitebg);
    border: none;
    z-index: 999999;
    position: relative;
}
#addresses, #tokenids, #dbxaddresses, #dbxenftaddresses, #fenixaddresses {
    font-size: 18px;
    font-family: monospace;
    border: solid 1px var(--xen);
    border-radius: 10px;
    padding: 5px 5px 5px 10px;
    overflow: hidden;
    width: 100%;
    background-color: var(--sitebg);
    color: var(--xen);
}
#addresses:focus, #tokenids:focus, #dbxaddresses:focus, #dbxenftaddresses:focus, #fenixaddresses:focus {
    color: var(--blue);
    border-radius: 10px;
    border: solid 1px var(--blue);
    outline: none;
    overflow: hidden;
}
#emptystakes, #emptynfts, #emptynftstakes, #emptynftburn {
    height: 200px;
}
@media (max-width: 1060px) {
    #globalstats tr td:nth-child(2) {font-size: 1rem !important;}
    #addAddress, #backup {
        margin-left: 0;
    }
    #addAddresses, #backup {
        margin-left: 0;
    }
    .xencalc {position: unset;}
}
#csvdata {
    color: var(--blue);
    background-color: #111;
    border-radius: 10px;
    border: none;
    outline: none;
    overflow: unset;
    font-family: monospace;
    padding: 10px;
    box-shadow: 1px 1px 10px var(--blue);
    margin-right: 10px;
}
dialog::backdrop {
    background: rgb(144, 202, 249,0.6);
}
dialog {
    border-radius: 10px;
    border: solid 1px var(--blue);
    background: var(--sitebg);
    padding: 0 10px 10px 10px;
}
dialog form {
    margin: 0 10px;
}
dialog h1 {
    margin-top: 0;
    border: none;
    background: linear-gradient(90deg, var(--blue) 0%, var(--sitebg) 100%);
    color: #fff;
    padding: 14px;
    margin: 0 0 10px 0;
    position: relative;
}
dialog p {
    color: var(--white);
    cursor: move;
}
dialog button {
    float: right;
    margin-left: 10px;
    display: block !important;
}
#dlgmint th {
    color: var(--blue);
}
#dlgmintbody td {
    color: var(--text);
}
#dlgmintbody tr td:first-child {
  cursor: pointer;
}
dialog#dlgpush {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 400px;
    margin: 0;
    height: fit-content;
}
#xenstats td, #dlgmint td {
  color: var(--white);
  border: solid 1px var(--lg2);
  font-size: 16px;
}
#xenstats td:nth-child(2), #dlgmint td:nth-child(2) {
  color: var(--blue);
  font-size: 14px;
}
@media screen and (min-width: 1060px) {
  #dlgmint {
    width:42%;
  }
}
form {
    margin-bottom: 10px;
}
label, .textblock {
    display: block;
}
.inline-block {
    display: inline-block;
}
button {
    vertical-align: top;
}
button#btncopy {
    background: linear-gradient(11deg, var(--lg1) 0%, var(--lg2) 35%, var(--lg3) 100%);
    color: var(--text);
}
button#btncancel {
    color: var(--text);
    background: var(--lg2);
}
textarea {
    margin-bottom: 10px;
}
fieldset {
    border: none;
    margin: 0;
    padding: 0 15px 0 0;
}
legend {
    font-size: 1.4rem;
    margin-bottom: 10px;
}
.form {
    margin-bottom: 20px;
    padding: 10px;
    clear: both;
}

.main-wrapper{
  width: 100%;
  overflow-x: auto;
  padding: 0 10px;
  box-sizing: border-box;
  scrollbar-color: var(--green) black;
}

.responsive-table{
  display: inline-block;
  min-width: 100%;
  box-sizing: border-box;
}

.responsive-table > table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table > table td, th {
}

#xen-estimates, .table-dark {
    background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(144, 180, 207, 0.31)) !important;
}
.box {
    background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(144, 180, 207, 0.31)) !important;
/*    background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;*/
    box-shadow: none;
    transition: all .2s ease-in-out;
}
table th {
    color: var(--white);
}
.shadow {
  box-shadow: 0 1rem 2.5rem #1b405e;
}
.box {
    margin: 0 10px;
    border: solid 1px var(--boxborder);
    border-radius: 10px;
}
th, td {
    padding: 10px;
    text-align: left;
    white-space: nowrap;
    font-size: 18px;
}
td:first-child {
  font-weight: 700;
}
td[data-label] {
  text-align: right !important;
  font-family: ui-monospace,Mono,"Courier New",monospace;
  color: var(--green);
  font-weight: 600;
}
td[data-label="Address"] {
    text-align: left;
}
th {
    color: var(--white);
}
tr:hover > td {
    background: rgba(255, 255, 255, 0.08);
}
td[data-label="Estimated XEN"], td[data-label="Progress"], td[data-label="mintReward"] {
    color: var(--blue-hover);
}
td[data-label="Estimated XEN"], td[data-label="mintReward"] {
    cursor: pointer;
}
#wallets td:nth-child(n+1):nth-child(-n+2), #wallets td:nth-child(n+12):nth-child(-n+13) {
    text-align: left;
}
#wallets td:nth-child(n+3):nth-child(-n+10), .wallets th:nth-child(n+3):nth-child(-n+10) {
    text-align: right;
}
#stakes {
    width: unset;
}
#stakes td:nth-child(n+1):nth-child(-n+2), #stakes td:nth-child(n+4), #stakes td:nth-child(n+6) {
    text-align: left;
}
#stakes td:nth-child(n+3):nth-child(-n+7) {
    text-align: right;
}
#nfts tr, #nftstakes tr {
    border-bottom: solid 10px var(--sitebg);
}
#xenftimg img {
    width: 0%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all ease-in .2s;
}
#backdrop {
    width: 100%;
    height: 100%;
    background: rgb(144, 202, 249,0.6);
    position: absolute;
    top: 0;
    left: 0;
}
#theme {
    font-size: 36px;
    position: absolute;
    top: 10px;
    right: 5px;
    cursor: pointer;
}
.nameit {
    cursor: pointer;
    font-size: 32px;
}
.pr {
    position: relative;
}
.claimtime {
    color:  var(--blue);
}
.tab{display: inline-block;margin-right: 10px;}
.tablabel {
    display: table;
    color: var(--blue);
}
.tabtext {
    font-size: 1em;
    padding: 10px 10px 0px 0;
    border-radius: 0 10px;
    display: inline-block;
    background: linear-gradient(222deg,#fff,var(--lg2),#fff, var(--gray));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.fiat {
    font-size: 0.7em;
    display: block;
}
.fiat::after {
    font-variant: super;
}
.sub {font-size: 12px;line-height: 12px;}
#xenusdvalue2 sub {
  font-size: 85%;
  color: var(--green);
}
.tabs sup {
  color: transparent;
}
.tabs span:hover sup {
  display: inline-block !important;
  color: var(--green) !important;
}
.tabs span sup {
  color: transparent !important;
}
.dflex {display: flex;}
@media screen and (max-width: 600px) {
  .col50 {width: 100%;}
  #address{display: block;margin: 5px 0 5px 0;}

  div[role="progressbar"] {display: none;}
}
@media (max-width: 1060px) {
    .tab{display: block;margin-bottom: 10px;}
    .tablabel {font-size: 1.5vw;display: inline-block;}
    .tabtext {font-size: 1.5vw;padding-top: 0;float: right;}
    .dblock{display: block !important;}
    .dnone-md{display: none;}
}
a {
    text-decoration: none;
    color: var(--blue);
}
a:hover {
    text-decoration: none;
    color: var(--white);
}
.remove {
    text-decoration: none !important;
}
a.action, button.action {
    cursor: pointer;
}
a.action:hover {
    text-decoration: none !important;
}
.disabledlink {
    color: var(--gray);
    pointer-events: none;
}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mb15 {margin-bottom: 15px;}
.ml0 {margin-left: 0;}
.mr0 {margin-right: 0;}
.m0{margin: 0;}
.ml10 {margin-left: 10px;}
.p10 {padding: 10px;}
.pt15 {padding-top: 15px;}
.vam {vertical-align: middle;}
.ht{padding: 0 10px;margin: 10px 0;}
.line{border: solid 1px var(--gray);}
.relative{position: relative;}
.dib {display: inline-flex;font-size:1.4rem;border-radius: 10px 10px 0 0 !important;}
.dnone, .nonft {display: none;}
.float-right{float: right;}
.text-center {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}
#countdown{position: absolute;right: 12px;font-size: 8px;top: 3px;color: var(--white);}
#cc{display:none; border: none;padding: 0;margin: 0;}
.estimated{
    float: unset;
    background: linear-gradient(222deg,#fff,var(--nft1),#fff, var(--lg1));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 1.5em;
    font-weight: 700;
}
.titlegradient {
  background: linear-gradient(222deg,#fff,var(--nft1),#fff, var(--lg1));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
#globalstats tr td:nth-child(2) {text-align: right;font-size: 20px;}
#globalstats th, #globalstats td {
    white-space: unset;
    padding: 5px;
}
.number {
    text-align: right;
}
.copyclipboard {
    cursor: pointer;
    margin-left: 5px;
}
#message {
    display: none;
    position: fixed;
    z-index: 10000000;
    top: 42px;
    right: 5px;
    height: auto;
    width: 200px;
    background-color: var(--yellow);
    color: var(--black);
    padding: 5px 20px;
}
.footer {
  background: unset;
  width: 100%;
  text-align: center;
  border-top: solid 0.5px #ccc;
}
.textright {
    text-align: right;
}
.white {
    color: var(--white);
}
.text {
    color: var(--text);
}
.blue {
    color:  var(--blue);
}
.bluehighlight {
    color:  var(--lg1);
}
.green {
    color: var(--green) !important;
}
.yellow {
    color: var(--yellow) !important;
}
.red {
    color: var(--red) !important;
}
/*        .shadow {
    box-shadow: 4px 4px 16px var(--blue);
}*/
@media screen and (min-width: 1060px) {
    .col50 {
        flex: 1;
        width: 50%;
        float: left;
    }
}
.col100 {width: 100%;}
.clearfix {clear: both;}

#gt {
  position: absolute;
  text-align: unset !important;
  width: unset !important;
  animation: linear infinite;
  animation-name: run;
  animation-duration: 15s;
}
@-webkit-keyframes run {
  0% {
    left: -32px;
  }
  100% {
    left: 100%;
  }
}
.spin {
    animation: spin 2s linear infinite;
}
.xm-loader {
  color: #FFF;
  margin-top: 40px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 48px;
  letter-spacing: 4px;
  box-sizing: border-box;
  display: none;
  z-index: 1000000;
  border: solid 50px #ffffff33;
  background: #000;
  border-radius: 40px;
}
.xm-loader::before {
  content: '';
  position: absolute;
  right: 70.6px;
  bottom: 10px;
  height: 28px;
  width: 4.5px;
  background: currentColor;
  box-sizing: border-box;
  animation: animloader1 1s linear infinite alternate;
}
.xm-loader::after {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  left: 125px;
  top: 2px;
  border-radius: 50%;
  background: red;
  box-sizing: border-box;
  animation: animloader 1s linear infinite alternate;
}
.xm-modal {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 margin: auto;
}

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-wrap {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hidden;
    background-color: var(--sitebg);
    z-index: 9999999;
    padding-left: 100%;
    box-sizing: content-box;
    cursor: pointer;
}
.ticker-wrap .ticker {
    display: inline-block;
    height: 40px;
    padding-top: 5px;
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 50s;
    animation-duration: 50s;
}
.ticker-wrap .ticker__item {
    display: inline-block;
    padding: 0;
}
.ticker__item span {
    margin-left: 15px;
}
@keyframes animloader {
  0% {
    transform: translate(0px, 0px) scaleX(1);
  }
  14% {
    transform: translate(-12px, -16px) scaleX(1.05);
  }
  28% {
    transform: translate(-27px, -28px) scaleX(1.07);
  }
  42% {
    transform: translate(-46px, -35px) scaleX(1.1);
  }
  57% {
    transform: translate(-70px, -37px) scaleX(1.1);
  }
  71% {
    transform: translate(-94px, -32px) scaleX(1.07);
  }
  85% {
    transform: translate(-111px, -22px) scaleX(1.05);
  }
  100% {
    transform: translate(-125px, -9px) scaleX(1);
  }
}
@keyframes animloader1 {
  0% {
    box-shadow: 0 -6px, -122.9px -8px;
  }
  25%, 75% {
    box-shadow: 0 0px, -122.9px -8px;
  }
  100% {
    box-shadow: 0 0px, -122.9px -16px;
  }
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    } 
}
@keyframes morph {
  0% { background-color: rgb(0,0,0,1);}
  50% { background-color: rgb(0,0,0,0.7);}
  100% { background-color: rgb(0,0,0,1);}
}
@keyframes pop{
  50%  {transform: scale(1.2);}
}
.pop {animation: pop 0.3s linear 1;color: var(--green);}
.sortable{border-spacing:0}
.sortable tbody tr:nth-child(odd){}
.sortable td,.sortable th{padding:10px}
.sortable td:first-child,.sortable th:first-child{border-top-left-radius:4px}
.sortable td:last-child,.sortable th:last-child{border-top-right-radius:4px}
.sortable th{color:var(--blue);cursor:pointer;font-weight:normal;text-align:left;font-size: 18px;font-weight: 700;vertical-align:baseline;white-space:nowrap}
.sortable th:hover{color:var(--blue-hover)}
.sortable th:hover::after{color:inherit;font-size:1.2em;content:' \25BA'}
.sortable th::after{font-size:1.2em;color:transparent;content:' \25BA'}
.sortable th.dir-d{color:var(--blue)}
.sortable th.dir-d::after{color:inherit;content:' \25B2'}
.sortable th.dir-u{color:var(--blue)}
.sortable th.dir-d:hover{color:var(--blue-hover)}
.sortable th.dir-u:hover{color:var(--blue-hover)}
.sortable th.dir-u::after{color:inherit;content:' \25BC'}
.sortable th.no-sort {
  pointer-events: none;
}
.sortable th::after {
    color: var(--gray);
    content: ' \21F5';
}
.sortable th.no-sort::after {
    content: '';
}
@keyframes growProgressBar {
  0%, 33% { --pgpercentage: 0;}
  100% { --pgpercentage: var(--value);}
}
@property --pgpercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
span[role="progressbar"] {
  --size: 2.5rem;
  --fg: var(--blue);
  --bg: var(--gray);
  --pgpercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: 
    radial-gradient(closest-side, #fff 80%, transparent 0 99.9%, #fff 0),
    conic-gradient(var(--fg) calc(var(--pgpercentage) * 1%), var(--bg) 0)
    ;
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 4);
  font-weight: 700;
  color: var(--fg);
  margin-left: 0.5rem;
}
span[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
}
.privacy {color: transparent !important;text-shadow: 0 0 15px rgb(255 255 255 / 90%) !important;}
.privacy:hover {color: transparent !important;}
#otherchains {
    text-align: center;
    color: var(--green-hover);
}
.xm-progress {
    background: #555;
    z-index: 9;
    position: fixed;
    top: 45px;
    width: 100%;
}
.progress-bar { 
    height: 5px;
    background-color: #ee303c;
    border-radius: 4px;
    transition: 0.4s linear;
    transition-property: width, background-color;  
}

.progress-striped .progress-bar {   
    background-color: var(--green);
    width: 100%;
    animation: progressAnimationStrike 300s;
}

@keyframes progressAnimationStrike {
    from { width: 0 }
    to { width: 100% }
}

ul {
    list-style: none;
    margin: 1em 0 1em 0 !important;
}

.calendar {
    background: var(--sitebg);
/*            width: 90%;*/
/*            max-width: 40rem;*/
/*            margin: 0 auto;*/
    display: grid;
    grid-template-rows: 4rem auto 0rem;
    box-shadow: 0 1rem 2.5rem #1b405e;
    border-radius: 20px;
}
.cal_header, .cal_footer {
    padding: 0 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(197deg, var(--lg1) 0%, var(--lg2) 35%, var(--lg3) 100%);
}
.cal_body {
    position: relative;
    border-top: 1px solid var(--gray);
/*    border-bottom: 1px solid var(--gray);*/
}
.cal_body-days {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1rem;
    padding-inline-start: 0;
}
.cal_body-days li {
    flex: 1;
    font-weight: bold;
    text-transform: capitalize;
    text-align: center;
    color: var(--blue);
    margin: 0 1px;
}
.cal_body-dates {
  display: flex;
  flex-wrap: wrap;
  margin: -10px !important;
  user-select: none;
  overflow-x: hidden;
  text-align: center;
  padding-top: 1rem;
}

.cal_body-dates > * {
  flex-basis: calc((100% - 120px) / 7);
  margin: 8px !important;
}

.cal_body-dates li {
  font-weight: bold;
  height: 2.5rem;
}
.cal_body-dates li.prev,
.cal_body-dates li.next {
    color: var(--gray);
}
.cal_body-dates li.active {
    background: #DE6E46;
    color: #ffffff;
    border-radius: 50%;
}
.cal_body-dates li .circle {
    border: 2px solid var(--blue);
    border-radius: 50%;
    cursor: pointer;
    padding: 5px;
    position: relative;
}
.cal_body-dates li b {
  color: var(--white);
  position: absolute;
  top: -10px;
  right: -14px;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0.8rem;
  line-height: 0.8rem;
}
.cal_body-dates li .circle-warn {
  border: 2px solid var(--red);
}
.cal_body-dates li .circle-warn span {
  color: var(--red);
}
.cal_body-dates .today {
  border-bottom: 3px solid var(--green) !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
/*.today span {
  background: var(--green) !important;
  border-color: var(--green) !important;
}
*/
.today {
  color: var(--green) !important;
}
.cal_body-dates .today-warn {
  border-bottom: 3px solid var(--red) !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
.today-warn span {
}
.today-warn {
  color: var(--red) !important;
}
.cal_footer {
    color: #333333;
    font-weight: bold;
}
.cal_footer .add {
    text-decoration: none;
    color: inherit;
    border: 2px solid #DE6E46;
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    padding-top: 0.25rem;
    display: grid;
    place-items: center;
}
.cal_body-dates li.circle span.bl {
    top: unset;
    right: unset;
    bottom: -0.75rem;
    left: -0.5rem;
    background: var(--sitebg);
    border: solid 3px var(--blue);
}
.cal_body-dates li.circle span.br {
    top: unset;
    bottom: -0.75rem;
    background: var(--sitebg);
    border: solid 3px var(--green);
}
/*        .cal_body-dates li.circle:hover, .cal_body-dates li.circle:hover span {*/
/*            background: var(--blue);*/
/*            color: var(--lg3);*/

/*        }*/
/*        .cal_body-dates li.circle:hover span {*/
/*            border-color: var(--lg2);*/
/*        }*/
.cal_body-dates li.today:hover {
  background: transparent;
  color: var(--blue);
}
#caltoday{cursor: pointer;}
#prevmonth, #nextmonth {
    cursor: pointer;
    vertical-align: middle;
}
#prevmonth {
    margin-right: 10px;
}
#nextmonth {
    margin-left: 10px;
}
#calmonth,#calyear {color: var(--blue);}
h3#caltoday:hover #calmonth, h3#caltoday:hover #calyear {
    display: none;
}
h3#caltoday:hover::after {
    content: "This Month";
    color: var(--blue);
}

/*new items for timeline view*/
.bg-xm1 {
  background: linear-gradient(90deg, var(--lg1) 0%, var(--lg2) 35%, var(--lg3) 100%);
}
.vline{padding-left: 16px;position: relative;margin-left: 10px;margin-right: -10px;}
.vline span::after {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -10px;
    width: 1px;
    background-color: var(--lg1);
}
div.vline.pr:hover {
  transform:
    perspective(400px)
    rotateX(45deg)
    scale(0.9);
  box-shadow: 0px 20px 100px #555;
  transition:0.5s ease all;
}
div.vline.pr {
  transition:0.5s ease all;
}
.bullet{position: relative;padding-left: 16px;}
.bullet::before {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 0px;
    left: -5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--green);
}
.bullet-0::before {
  background-color: var(--green);
}
.bullet-1::before {
  background-color: var(--yellow);
}
.bullet-2::before {
  background-color: var(--red);
}
.penalty {font-size: 14px;color: var(--red);}
.tl-item {
  display: flex;
  padding-top: 0;
  padding-bottom: 0;
  user-select: none;
}
.tl-item-active .tl-item:hover {
  background-color: unset !important;
  color: var(--green-hover) !important;
}
.tl-item-active {
  font-size: 24px;
  color: var(--yellow);
  font-weight: 700;
/*          background: linear-gradient(90deg, var(--lg3) 0%, var(--lg2) 85%, var(--lg1) 100%);*/
}
.tl-item div {
    border-bottom: solid 1px #333;
}
.tl-item:hover {
    background-color: #1d1c1c;
    color: var(--green);
    cursor: pointer;
}
#tl-mintnfts object, #tl-stakenfts object {
  height: auto;
  max-height: 400px;
  max-width: 100%;
}
#collexp {
  cursor: pointer;
}
.actions, .tlborder {
  border-left: solid 1px var(--lg1);
}
.actions > * {
  margin: 0 10px 0 10px;
}
.tabs ul {
  border-bottom-color: var(--blue-hover);
}
.tabs li {
    margin-left: 0.5rem;
}
.tabs.is-boxed li.is-active a {
  background-color: var(--blue-hover);
  border-color: transparent;
}
.tabs.is-boxed li.is-active a:hover {
  background-color: var(--blue-hover);
  border-color: transparent;
  color: var(--white);
}
.tabs li.is-active a {
  color: var(--white);
}
.tabs.is-boxed a:hover {
  background-color: transparent;
/*          background-color: var(--green);*/
  border-bottom-color: transparent;
  color: var(--yellow);
/*          border-color: var(--green);*/
}
.tabs a {
  color: var(--white);
  font-weight: 500;
}
.tabs a:hover {
  color: var(--white);
}
.tabs li.is-active a {
    font-size: 1.4rem;
}
.tabs {
  position: sticky;
  vertical-align: top;
  max-height: 100vh;
  overflow-y: auto;
  top: 0px;
  bottom: 0;
  padding: 0;
  margin-top: 20px;
  z-index: 8;
  background: var(--black);
}
.navbar.is-white .navbar-start .navbar-link::after {border-color: var(--white)}
a.navbar-item:focus-within, .navbar.is-black .navbar-brand>a.navbar-item:focus, .navbar.is-black .navbar-brand>a.navbar-item:hover{background-color: unset;}
.navbar, .navbar-end, .navbar-start {
  display: block !important;
}
.navbar.is-fixed-top {
  top: 51px;
}
@media screen and (min-width: 1024px) {
  .navbar-dropdown {
    background-color: #fff;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 2px solid #dbdbdb;
    box-shadow: 0 8px 8px rgba(10,10,10,.1);
    font-size: .875rem;
    left: 0;
    position: fixed;
    z-index: 20;
    display: block;
    min-width: unset;
    top: unset;
  }
}
.navbar-burger {
  display: block;
}
.level-item {
    position: relative;
}
.checkbox:hover, .radio:hover {
  color: var(--blue-hover);
}
.tl-details {
  box-shadow: 0 1rem 2.5rem #1b405e;
}
.tl-details .level-item.has-text-centered:first-child::after {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 1px;
    background-color: var(--lg1);
}
.tl-even {
  background-color: var(--lightblack);
}
.tlborder:hover {
  border-left: solid 1px var(--red);
}
.has-text-info {color: var(--yellow) !important;}
.has-text-success {color: var(--green) !important;}
.heading{font-weight: 700;}
/*.nftimage{height: 30vw;background-repeat: no-repeat;}*/
.nftimage {
  height: 27vw;
  background-repeat: no-repeat;
  max-width: 17vw;
}
.nftimage{
  transform:
    perspective(800px)
    rotateY(25deg) scale(0.9)
    rotateX(10deg);
  transition: 0.4s ease all;
  box-shadow: 0px 20px 100px #777;
}
.nftimage:hover {
  box-shadow: none;
  transform:
    perspective(800px)
    rotateY(0deg)
    translateY(-50px)
    rotateX(0deg)
    scale(1.2);
}
.chainlogo {
    vertical-align: bottom;
    width: 32px;
    height: 32px;
    margin-right: 5px;
    border-radius: 100%;
}
.plslogo {width: 16px;height: 16px;vertical-align: baseline;}
.separator {
  border-bottom: dashed 2px var(--blue) !important;
}
input, .title, span[data-xa], #gweis {
  font-family: ui-monospace,Mono,"Courier New",monospace;
  font-weight: 600;
}
.subtitle {
  font-family: ui-monospace,Mono,"Courier New",monospace;
  font-weight: 700;
}
.vtop{vertical-align: top;}
.nfthumb{width: 50px;height: 50px;}
.modal-close{top: 50px;background: red;}
[data-tooltip]:not(.is-disabled)::before, [data-tooltip]:not(.is-loading)::before, [data-tooltip]:not([disabled])::before {
  background: linear-gradient(11deg, var(--lg1) 0%, var(--lg2) 35%, var(--lg3) 100%);
  border-radius: 8px;
  border: solid 1px #353c44;
  width: 220px;
}
[data-tooltip]:not(.is-disabled).has-tooltip-multiline::before, [data-tooltip]:not(.is-loading).has-tooltip-multiline::before, [data-tooltip]:not([disabled]).has-tooltip-multiline::before {
  white-space: pre;
  z-index: 10;
}
span[data-tooltip] {
  border-bottom: none;
}
@media (max-width: 767px) {
  h1 {font-size: 3vw;}
  .tabactive {font-size: 4vw;}
  .tabinactive {font-size: 2.5vw;}
  .tab{display: block;margin-bottom: 10px;}
  .tablabel {font-size: 4vw;display: inline-block;}
  .tabtext {font-size: 4vw;padding-top: 0;float: right;}
  .fiat {font-size: 4vw;}
  #chain {font-size: 16px;}
  .button {font-size: 2.5vw;}
  .dnone-sm{display: none;}
  .dflex {display: block;}
  .dblock{display: block !important;}
  #xenftimg img {width: 90%;}
  dialog#dlgpush {width: 100%;}
  .tl-item-active div span, .tl-item-active div p.vtop {font-size: 4vw;line-height: 4vw;}
  span[role="progressbar"] {font-size: calc(var(--size) / 4) !important;}
  .dib{font-size: 2.5vw;}
  .tabs li.is-active a {font-size: 2.5vw;}
  .nftimage{height: 28vw;background-repeat: no-repeat;}
  #activeChain{font-size: 4vw;}
  .nftimage {transform: none;transition: none;}
  small{font-size: 3vw;}
  .xencalc {position: unset;}
  .xmlogo {max-height: 1.5rem !important;}
}
.drop-area {
  border: 2px dashed #ccc;
  border-radius: 20px;
  min-height: 200px;
  max-height: 600px;
  overflow: auto;
  padding: 10px;
}
#drop-area:hover {
  border: dashed 2px var(--green);
}
#drop-area:hover svg {
  stroke: var(--green);
}
.drop-area.highlight {
  border-color: var(--green);
}
#drop-area.highlight svg {
  stroke: var(--green);
}
.drop-area input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  opacity: 0;
  cursor: pointer;
}
#drop-area thead th {
  color: var(--text);
  border: none;
}
#droppedfiles td:nth-child(1) {
  color: var(--green);
}
#droppedfiles td:nth-child(2) {
  color: var(--blue);
}
#droppedfiles td {
	border: none;
}
.drop-area table {
  background: transparent;
}
.section {position: sticky;padding:0;top: 50px;bottom: 0;z-index: 9;}
article .tile {overflow-wrap: anywhere;}
#logger{max-height: 700px;overflow: auto;}