@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,500;1,500&family=Asap+Condensed:wght@200;400;600&family=PT+Sans+Narrow:wght@400;700&family=Inter:wght@300;400;700&display=swap&Inter:wght@300;400;500;700');

/* Inherit fonts for inputs and buttons */
input, button, textarea, select { font: inherit; }

/* Safari button fixes */
input[type=text], input[type=button], input[type=submit] { -webkit-appearance: none; -webkit-border-radius: 0; }

/* CSS Variables */

:root {
      
    /* define light / dark once here */  
    --light-algo-img: url('/img/algo-a-64.png') no-repeat center center;
    --light-links-main: #0074cc;
    
    --light-logo-color: #fff;
    --light-logo-shadow: rgba(0, 0, 0, 0.6);
    --light-bg-main: #fdfdfd;
    --light-text: #000000;    
	
	--light-titlebar-bg: #fff;
    --light-titlebar-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
    --light-searchbar-bg: #fff;
    --light-searchbar-focus-bg: linear-gradient(0deg, rgba(252,252,252,1) 0%, rgba(244,244,244,1) 100%);
    
    --light-rd-grad-bg: linear-gradient(0deg, hsl(0deg 0% 100%) 0%, hsl(0deg 0% 100%) 21%, hsl(0deg 0% 99%) 30%, hsl(0deg 0% 99%) 39%, hsl(0deg 0% 98%) 46%, hsl(0deg 0% 98%) 54%, hsl(0deg 0% 97%) 61%, hsl(0deg 0% 97%) 69%, hsl(0deg 0% 97%) 79%, hsl(0deg 0% 96%) 100%);
	--light-papyrus: url("/img/papyrus.png");
	--light-pitem-bg: linear-gradient(#f6f6f6, #fbfbfb) padding-box, linear-gradient(to right, darkblue, darkorchid) border-box;
	
	--light-top-header-bg: #eee;
	--light-asset-list-row: #eee;
	--light-asa-details-row: #f8f8f8;
	--light-tx-list-row: #f5f5f5; 
	--light-tx-list-hover: #f8f8f8 !important;
	--light-tx-type-bubble-bg: #eaeaea;
	--light-side-nav-bg: #f8f8f8 url("/img/diagonal-waves.png") repeat;
	--light-square-bg: url('/img/repeated-square.png');
	--light-blizzard-bg: url('/img/blizzard.png');
	--light-tx-amount-bg: linear-gradient(to right, #f6f6f6, #fbfbfb);
	
	--light-button-color: #fff;
	--light-hr-fade: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	--light-a-visited: #003a66;
	--light-spin-bg: repeating-linear-gradient(-55deg, #fcfcfc, #fcfcfc 5px, #FFF 5px, #FFF 10px);
	--light-favs-list-hover-bg: #efefef;
	--light-hb-bg: linear-gradient(180deg,#fff,#f5f5fa);
	
	--light-hpitem-bg-g: #f1faf7;
	--light-hpitem-bg-r: #fcf6f5;
	--light-hpitem-bg-n: #fafafa;
	
	--light-acs-bg: linear-gradient(0deg, #fdfdfd 0%, #f5f5f5 100%);
	--light-acs-bs: 0 2px 5px 0 rgb(213 217 217 / 50%);
	
		
	/* dark */
	--dark-algo-img: url('/img/algo-a-64-w.png') no-repeat center center;
	--dark-links-main: rgb(68, 147, 248);
	
	--dark-logo-color: #000;
	--dark-logo-shadow: rgba(250, 250, 250, 0.6);
	--dark-bg-main: #1a1a1a;
	--dark-text: #ffffff;
		
	--dark-titlebar-bg: #161b22;
	--dark-titlebar-shadow: rgba(255, 255, 255, 0.3) 0px 2px 4px;
	--dark-searchbar-bg: #1b1b1b;
	--dark-searchbar-focus-bg: linear-gradient(0deg, rgba(3, 3, 3, 1) 0%, rgba(11, 11, 11, 1) 100%);
	
	--dark-rd-grad-bg: linear-gradient(0deg, hsl(0 0% 0%) 0%, hsl(0 0% 10%) 21%, hsl(0 0% 11%) 30%, hsl(0 0% 11%) 39%, hsl(0 0% 12%) 46%, hsl(0 0% 12%) 54%, hsl(0 0% 13%) 61%, hsl(0 0% 13%) 69%, hsl(0 0% 13%) 79%, hsl(0 0% 14%) 100%);
	--dark-papyrus: url("/img/papyrus-dark.png");
	--dark-pitem-bg: linear-gradient(#4a4a4a, #3a3a3a) padding-box, linear-gradient(to right, darkblue, darkorchid) border-box;
	
	--dark-top-header-bg: #161b22;
	--dark-asset-list-row: #333;
	--dark-asa-details-row: #333;
	--dark-tx-list-row: #333;
	--dark-tx-list-hover: #404040 !important;
	--dark-tx-type-bubble-bg: #5b5b5b;
	--dark-side-nav-bg: #1a1a1a;
	--dark-square-bg: url('/img/random-grey-variations.png');
	--dark-blizzard-bg: url('/img/blizzard-dark.png');
	--dark-tx-amount-bg: linear-gradient(to right, #2e2e2e, #3a3a3a);
	
	--dark-button-color: #4b4b4b;
	--dark-hr-fade: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
	--dark-a-visited: #3997de;
	--dark-spin-bg: repeating-linear-gradient(-55deg, #3a3a3a, #3a3a3a 5px, #2a2a2a 5px, #2a2a2a 10px);
	--dark-favs-list-hover-bg:  #3a3a3a;
	--dark-hb-bg: linear-gradient(180deg, #2a2a2a, #35353a);
	
	--dark-hpitem-bg-g: #1a3b35;   /* Dark teal/green */
	--dark-hpitem-bg-r: #3b201b;   /* Dark reddish-brown */
	--dark-hpitem-bg-n: #2a2a2a;   /* Dark neutral gray */
	
	--dark-acs-bg: linear-gradient(0deg, #2a2a2a 0%, #3a3a3a 100%);
	--dark-acs-bs: 0 2px 5px 0 rgb(213 217 217 / 50%);
	
	/* Define Variable Names - Set Light as default */
	
	--algo-img: var(--light-algo-img);
	--links-main: var(--light-links-main);
	
	--logo-color: var(--light-logo-color);
	--logo-shadow: var(--light-logo-shadow);
	--bg-color: var(--light-bg-main);
	--text-color: var(--light-text);
	
	--titlebar-bg: var(--light-titlebar-bg);
	--titlebar-shadow: var(--light-titlebar-shadow);
	--searchbar-bg: var(--light-searchbar-bg);
	--searchbar-focus-bg: var(--light-searchbar-focus-bg);
	
	--rd-grad-bg: var(--light-rd-grad-bg);
	--papyrus: var(--light-papyrus);
	--pitem-bg: var(--light-pitem-bg);
	
	--top-header-bg: var(--light-top-header-bg);
	--asset-list-row: var(--light-asset-list-row);
	--asa-details-row: var(--light-asa-details-row);
	--tx-list-row: var(--light-tx-list-row);
	--tx-list-hover: var(--light-tx-list-hover);
	--tx-type-bubble-bg: var(--light-tx-type-bubble-bg);
	--side-nav-bg: var(--light-side-nav-bg);
	--square-bg: var(--light-square-bg);
	--blizzard-bg: var(--light-blizzard-bg);
	--tx-amount-bg: var(--light-tx-amount-bg);
	
	--button-color: var(--light-button-color);
	--hr-fade: var(--light-hr-fade);
	--a-visited: var(--light-a-visited);
	--spin-bg: var(--light-spin-bg);
	--favs-list-hover-bg:  var(--light-favs-list-hover-bg);
	--hb-bg: var(--light-hb-bg);
	
	--hpitem-bg-g: var(--light-hpitem-bg-g);
	--hpitem-bg-r: var(--light-hpitem-bg-r);
	--hpitem-bg-n: var(--light-hpitem-bg-n);
	
	--acs-bg: var(--light-acs-bg);
	--acs-bs: var(--light-acs-bs);
	
}

/* 3. System preference: if user's system is dark, override *unless* data-theme is forcibly "light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
	
	--algo-img: var(--dark-algo-img);
	--links-main: var(--dark-links-main);
	
	--logo-color: var(--dark-logo-color);
	--logo-shadow: var(--dark-logo-shadow);
    --bg-color: var(--dark-bg-main);
    --text-color: var(--dark-text);
    
    --titlebar-bg: var(--dark-titlebar-bg);
    --titlebar-shadow: var(--dark-titlebar-shadow);
    --searchbar-bg: var(--dark-searchbar-bg);
    --searchbar-focus-bg: var(--dark-searchbar-focus-bg);
    
    --rd-grad-bg: var(--dark-rd-grad-bg);
    --papyrus: var(--dark-papyrus);
    --pitem-bg: var(--dark-pitem-bg);
    
    --top-header-bg: var(--dark-top-header-bg);
    --asset-list-row: var(--dark-asset-list-row);
    --asa-details-row: var(--dark-asa-details-row);
   	--tx-list-row: var(--dark-tx-list-row);
   	--tx-list-hover: var(--dark-tx-list-hover);
   	--tx-type-bubble-bg: var(--dark-tx-type-bubble-bg);
   	--side-nav-bg: var(--dark-side-nav-bg);
   	--square-bg: var(--dark-square-bg);
   	--blizzard-bg: var(--dark-blizzard-bg);
   	--tx-amount-bg: var(--dark-tx-amount-bg);
   	
   	--button-color: var(--dark-button-color);
   	--hr-fade: var(--dark-hr-fade);
   	--a-visited: var(--dark-a-visited);
   	--spin-bg: var(--dark-spin-bg);
   	--favs-list-hover-bg:  var(--dark-favs-list-hover-bg);
   	--hb-bg: var(--dark-hb-bg);
   	
   	--hpitem-bg-g: var(--dark-hpitem-bg-g);
	--hpitem-bg-r: var(--dark-hpitem-bg-r);
	--hpitem-bg-n: var(--dark-hpitem-bg-n);
	
	--acs-bg: var(--dark-acs-bg);
	--acs-bs: var(--dark-acs-bs);
  }   
}
   
/* 4. Forced Light: user overrides system preference and always uses light */
:root[data-theme="light"] {
	
	--algo-img: var(--light-algo-img);
	--links-main: var(--light-links-main);
	
	--logo-color: var(--light-logo-color);
	--logo-shadow: var(--light-logo-shadow);
	--bg-color: var(--light-bg-main);
	--text-color: var(--light-text);
	
	--titlebar-bg: var(--light-titlebar-bg);
	--titlebar-shadow: var(--light-titlebar-shadow);
	--searchbar-bg: var(--light-searchbar-bg);
	--searchbar-focus-bg: var(--light-searchbar-focus-bg);
  
	--rd-grad-bg: var(--light-rd-grad-bg);
	--papyrus: var(--light-papyrus);
	--pitem-bg: var(--light-pitem-bg);
  
	--top-header-bg: var(--light-top-header-bg);
	--asset-list-row: var(--light-asset-list-row);
	--asa-details-row: var(--light-asa-details-row);
	--tx-list-row: var(--light-tx-list-row);
	--tx-list-hover: var(--light-tx-list-hover);
	--tx-type-bubble-bg: var(--light-tx-type-bubble-bg);
	--side-nav-bg: var(--light-side-nav-bg);
	--square-bg: var(--light-square-bg);
	--blizzard-bg: var(--light-blizzard-bg);
	--tx-amount-bg: var(--light-tx-amount-bg);
	
	--button-color: var(--light-button-color);
	--hr-fade: var(--light-hr-fade);
	--a-visited: var(--light-a-visited);
	--spin-bg: var(--light-spin-bg);
	--favs-list-hover-bg:  var(--light-favs-list-hover-bg);
	--hb-bg: var(--light-hb-bg);
	
	--hpitem-bg-g: var(--light-hpitem-bg-g);
	--hpitem-bg-r: var(--light-hpitem-bg-r);
	--hpitem-bg-n: var(--light-hpitem-bg-n);
	
	--acs-bg: var(--light-acs-bg);
	--acs-bs: var(--light-acs-bs);
}

/* 5. Forced Dark: user overrides system preference and always uses dark */
:root[data-theme="dark"] {
	
	--algo-img: var(--dark-algo-img);
	--links-main: var(--dark-links-main);
	
	--logo-color: var(--dark-logo-color);
	--logo-shadow: var(--dark-logo-shadow);
	--bg-color: var(--dark-bg-main);
	--text-color: var(--dark-text);
	
	--titlebar-bg: var(--dark-titlebar-bg);
	--titlebar-shadow: var(--dark-titlebar-shadow);
	--searchbar-bg: var(--dark-searchbar-bg);
	--searchbar-focus-bg: var(--dark-searchbar-focus-bg);
  
	--rd-grad-bg: var(--dark-rd-grad-bg);
	--papyrus: var(--dark-papyrus);
	--pitem-bg: var(--dark-pitem-bg);
  
	--top-header-bg: var(--dark-top-header-bg);
	--asset-list-row: var(--dark-asset-list-row);
	--asa-details-row: var(--dark-asa-details-row);
	--tx-list-row: var(--dark-tx-list-row);
	--tx-list-hover: var(--dark-tx-list-hover);
	--tx-type-bubble-bg: var(--dark-tx-type-bubble-bg);
	--side-nav-bg: var(--dark-side-nav-bg);
	--square-bg: var(--dark-square-bg);
	--blizzard-bg: var(--dark-blizzard-bg);
	--tx-amount-bg: var(--dark-tx-amount-bg);
	
	--button-color: var(--dark-button-color);
	--hr-fade: var(--dark-hr-fade);
	--a-visited: var(--dark-a-visited);
	--spin-bg: var(--dark-spin-bg);
	--favs-list-hover-bg:  var(--dark-favs-list-hover-bg);
	--hb-bg: var(--dark-hb-bg);
	
   	--hpitem-bg-g: var(--dark-hpitem-bg-g);
	--hpitem-bg-r: var(--dark-hpitem-bg-r);
	--hpitem-bg-n: var(--dark-hpitem-bg-n);
	
	--acs-bg: var(--dark-acs-bg);
	--acs-bs: var(--dark-acs-bs);
}

/* Desktop only customizations, move hovers here when done */
@media only screen and (min-width: 768px) {
	
	#titlebar { padding-left: 1.5rem !important; }
	#titlebar h1 { display: block !important; }
	
	.titlebar-star { width: 44px; height: 40px; margin: 0; padding: 0; border: none; }	
	
	.rd { margin: 1.5rem 1.5rem !important; padding: 1rem .5rem !important; }
	
	.bpad { margin: 1rem 1rem .5rem 2rem !important; padding: 1rem .5rem 0rem !important; }
	.rd-grad { padding: .5rem 1rem !important; overflow: hidden; }	
	
	.header-box { padding: 0 0 0 0rem !important; }
	
	.wallet-container { display: flex; }
	
	.wallet-container .rd { margin: 1.5rem 0.5rem 1.5rem 1.5rem !important; }
	.wallet-container .rd:last-child { margin-left: 1rem !important; margin-right: 1.5rem !important; }	
	
	.wallet-left { width: 60%; }
	.wallet-right { width: 35%; }
	
	.online-status-text { display: inline !important; }
	
	.asset-list li { padding: .6rem .5rem !important; }
	
	.asa-icon-w-lg { width: 80% !important; }
	
	.account-fiat-total-container { padding: 0 .5rem !important; }
	
	.card { padding: .5rem 1rem !important; }
	
	.full-screen-width {
	  position: static !important;
	  left: auto !important;
	  right: auto !important;
	  margin-left: 0vw !important;
	  margin-right: 0vw !important;
	  max-width: none !important;
	  width: auto !important;
	}
	
	.right-content { float: right; margin: .5rem 0 0 0; }
	
	.ww-tx {  }
	
	table.tx-list tr:hover:not(.theadrow) { background-color: var(--tx-list-hover); }
	
	table.tx-list td a:hover { color: #149aff; }
	
	.copy-this-a:hover, .copy-this-d:hover { font-size: 1.2rem; }
	.copy-c:hover { font-size: .8rem !important; }
	.copy-c:active { font-size: .7rem !important; }
	.fav-star:hover { -webkit-text-stroke: 1px #000; font-size: 1.2rem;  transition-duration: .5s; }
	.top-stargazer:hover { color: #008cff; }
	
	.nav-arrow a:hover { color: #008cff; }
	.larger-txt a:hover { padding: .5rem .9rem; color: #fff; background-color: #0074cc; border-radius: 9px;  }
	
	.sidebar-links a:hover { border: 1px solid #eee; color: #3f3f3f; }
	.favs-list li:hover { background: var(--favs-list-hover-bg); }
	
	.non-holding:hover { filter: none; opacity: 1.0; } 
	.header-box a:hover { font: bold; color: #5f9c73; background-color: #f0f0f0; }
	
	#round-cube-icon { display: flex !important; }
	.hp-article-date { display: inline !important; }
	
	.hp-hover-wrap:hover { box-shadow: 0 0 30px 20px rgba(255, 255, 100, 0.4); }
	
	.footer a:hover { color: #333333; }
	
	.hb-wrapper a:hover { color: #008cff; }
	.hb-wrapper a:hover:after { width: 100%; }
	
	a:hover.text-3d { 
		text-shadow: 
	    -2px 2px 0px #0074cc,
	    -2px 4px 0px #0074cc,
	    -4px 2px 0px #0074cc,
	    -4px 4px 0px #0074cc,
	    -6px 2px 0px #0074cc,
	    -6px 4px 0px #0074cc,
	    -8px 2px 0px #0074cc,
	    -8px 4px 0px #0074cc,
	    -10px 2px 0px #0074cc,
	    -10px 4px 0px #0074cc,
	     -1px -1px 0 #0074cc,  
	     1px -1px 0 #0074cc,  
	    -1px  1px 0 #0074cc,  
	     1px  1px 0 #0074cc;	
	}
	
	#news-feed .left { transform: rotate(-10deg); }
	
	a:hover .ctitle { color: #0096cc; }
	
	.asa-search-results a:hover { background-color: #E5E4E2; border-radius: 5px; }
		
}

/* Small Screen Mobile Styles */
@media only screen and (max-width: 768px) {	
    
    a.text-3d { font-size: 1.6rem; }
    
    .top-stargazer { font-size: 1.1rem; }
    
    .asset-header-container {
        flex-direction: column !important;
        align-items: center !important;
    }

    .asset-header-container h1 {
        flex: none !important;
        width: 100% !important;
    }

    .button-row {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
	
	.vestige-container { margin-left: 0rem; }
	
	.coll-flex-grid { display: block !important; }
	
  	.spin-btn { width: 160px !important; margin-left: .5rem; }
  	
  	button.wallet-searchButton { -webkit-appearance: none; appearance: none; }
  	
  	.mono { display: inline !important; }
  	
  	.btn-whiteg { padding: 0 24px !important; height: 34px !important; font-size: .8rem !important; } 
  	.fl-right-btn { margin-left: 12px !important; margin-right: 0 !important;  }
  	
  	.card-asa-display { width: 260px !important; height: 260px !important; }
  	
  .transaction-container {
    width: 100vw; /* Ensure the container fills the viewport width */
    overflow-x: scroll; /* Enable horizontal scrolling */
    overflow: scroll;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS devices */
  }
  
  tx-list.table {
    min-width: 600px; /* Set a minimum width for the table to ensure it doesn't shrink below this width */
  }
  
  .txaddr { font-size: .8rem; }  	
  .tx-amount-pay { width: 100% !important; }
  .tx-detail-params { margin: 0 !important; }
  
  .hp-box-container { flex-direction: column; }
  .hp-box { flex: none; }
  
  .dd-label { min-width: 120px !important; font-weight: 500; margin-bottom: .5rem; }
  .data-display .dd-row { flex-direction: column;  }
   
  .footer { text-align: center; }
  .footer span.ls { float: none !important; }
  .footer img.rs { display: block; margin: 1rem auto; padding-top: 44px; float: none !important; }
  .gwmim { width: 46px !important; height: 46px !important; }  
  .footer-menu { display: block; }
  

  #news-feed {
    flex-direction: column;
    align-items: center; /* Centers content when stacked */
  }

  #news-feed .left, 
  #news-feed .right {
    flex: 0 0 auto; /* Reset flex properties */
    width: 100%; /* Make both take full width */
    justify-content: center; /* Center content */
  }

  #news-feed .left {
    transform: none !important; /* Remove rotation for better readability */
  }
  
  #news-feed .right { display: block !important; }
  #news-feed span.no-rap { margin-right: 0 !important; } 
}

/* Start Main CSS */

body {  
	margin: 0; padding: 0;
	font-family: 'Fira Sans', sans-serif; text-rendering: optimizeSpeed; line-height: 1.5;
	background: var(--bg-color);			
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	transition: background-color 0.3s, color 0.3s;
}

header, footer {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
}

main {
	padding: 0;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: auto;
}

a:visited { color: var(--a-visited); }
a:link { color: var(--links-main); }

h1, h2, h3, h4, .titlebar-title { font-family: 'Inter', sans-serif; }

label { color: var(--text-color); }

.rd {
	margin: 1em .3em;
	padding: 0;
	border-radius: 9px;
	background: var(--bg-color);
	border: 1px solid #fff;
	color: var(--text-color);	
}

.favs-container h3 { border-bottom: 1px solid #eaeaea; }
#favs-accounts-home { margin: 1.5rem 0; }
.coll-header h4 { margin: 0; padding: 0; }

.rd-top { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; }
.rd-glow { box-shadow: -1px -1px 6px 2px #35a1ff, 1px 1px 6px 2px #1aaf2b; }
.rd-inset { box-shadow: inset 0 0 6px; }
.rd-orb { box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; }
.rd-soft { box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; }

.bpad { margin: 1em .5em;  }
.bpad h1 { margin: 0; padding: 0; font-size: 1.4rem; font-family: 'Fira Sans', sans-serif; color: var(--text-color); }

.rd-grad { background-image: var(--rd-grad-bg); }

#titlebar { margin: 0; padding: 0 0 6px 1rem; background: var(--titlebar-bg); box-shadow: var(--titlebar-shadow); }

.title-container { display: flex; flex-wrap: nowrap; margin-right: 0.5rem;  }

.titlebar-title { margin: 0; padding: 0; font-family: 'Fira Sans', sans-serif; font-size: 1.8rem; }
.titlebar-title a { text-decoration: none; color: var(--logo-color); }

.titlebar-star { width: 33px; height: 30px; margin: 0; padding: 0; border: none; }

.titlebar-star:hover {
	-webkit-animation: rotate-scale-up 0.65s linear both;
	        animation: rotate-scale-up 0.65s linear both;
}

.algo-price-header { margin: 0 0 .2rem 0; }
.algo-price-header a { color: var(--text-color); text-decoration: none; }
.aprice { font-size: .8rem; }
.aprice-green { color: #5D9C59 !important; }
.aprice-red { color: #DF2E38 !important; }
.aprice-neutral { color: grey !important; }

.wallet-connect-header { flex-grow: 1; text-align: right; width: auto; margin-top: 0rem; margin-right: 0rem; margin-bottom: 2px; border: 0px solid blue; }

.wc-btn { margin-top: 1rem; margin-bottom: 1rem; border-radius: 9px; padding: .5rem 1rem; }

.btn-whiteg.pera { background-color: #FFEE55; color: #000; margin: 1rem 1rem; }
.btn-whiteg.defly { background-color: #000; color: #fff; margin: 1rem 1rem; }
.pera-color { background-color: #FFEE55 !important; }

header form {  margin: 0 auto; display: inline; width: 100%; }
.header-form { display: inline; margin-left: 5em; text-align: center; }

.search-form { display: flex; flex-wrap: nowrap; align-items: center; }

.search-term { 
	flex-grow: 1;
	width: 100%;
  	padding: 0.3rem 0.5rem;
	margin: 0 0 0 0;	
	border: 1px solid #d7d7d7;	
	border-radius: 9px 0px 0px 9px;	
	outline: 0;
}

.search-term:focus {
	border-color: #66afe9;
	background: var(--searchbar-focus-bg);
	outline: 0;
  }
  
.top-searchbox-button { 	
	margin: 0 1.5rem 0 0px;	
	padding: 0.3rem;
	width: 46px;
	cursor: pointer;
	background: #dcdcdc; 
	color: #fff !important;
	border: 1px solid #ccc;
	border-radius: 0px 9px 9px 0px !important; 
	text-shadow: 1px 1px 1px #bbbbbb;
}

.header-container { display: flex; }
.header-box { width: 100%; padding: 0 0 0 1rem; color: #dfdfdf; }

.header-box h2 { display: inline-block; padding-right: .5rem; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1rem; white-space: nowrap; }
.header-box a { text-decoration: none; font-weight: 500; }
.header-box h2 a { color: #80b993; }
.header-box .current a { color: #5f9c73; font-size: 1.1rem; font-weight: bold; border-bottom: 1px solid #000; }
.hb-bump { padding-left: .5rem; }
.header-box-left { align-items: center; margin-bottom: 1rem; }
.header-box-right { white-space: nowrap; overflow: hidden; } 

.header-box-value { margin: 2.5rem 1rem 0 0; width: 100%; font-size: 1.5rem; color: #5D9C59; text-align: right;  }
.header-box-value span {  }

#wallet-searchContainer { display: flex; margin: .5rem 0; text-align: right; align-items: center; justify-content: flex-end; }

#wallet-searchInput { 
	padding: 0.3rem 0.5rem;
	margin: 0 0 0rem 0;	
	border: 1px solid #d7d7d7;	
	border-radius: 9px;	
	outline: 0;
	width: 70%;
	max-width: 150px;	
}

#walletInput { color: var(--text-color); background-color: var(--searchbar-bg); }
#walletInput::placeholder { font-size: .75rem; } 

.wallet-searchButton { margin: 0; border: 1px solid #d7d7d7; border-radius: 9px; background: #eee; color: #000; -moz-appearance: none; -webkit-appearance: none; appearance: none;  }

.sidepanelstyle-container {	
	padding: 1rem .5rem;
	font-size: .9rem;	
}

.sidepanelstyle-container ul { list-style-type: none; text-align: left; margin: 0; }
.sidepanelstyle-container ul li { margin-bottom: .5rem; }

.index-favs-container { margin: 0 auto; max-width: 50%; text-align: center; border: 1px solid #eee; border-radius: 9px; }

.sidepanelstyle-container .favs-container h2 { margin: 0; padding: 0; }

ul.favs-list { list-style-type: none; margin: 0; padding: 0; }

.favs-list li { margin: 0; padding: 0 .5rem 0 .5rem; border-radius: 9px; }

.wallet-container {  }
.wallet-left {  }

.fav-star { margin-left: .5rem; font-size: 1rem; color: #f5ec00; transition-duration: .5s; cursor: pointer; }
.fav-star-on { color: #f5ec00;  }
.fav-star-off { color: #e3e3e3;  }

.share-acct { margin-left: 1rem; font-size: 1rem; }

.coll-header-title { margin: 0; padding: .5rem .5rem; background: var(--top-header-bg); border: 1px solid #ebebeb; border-radius: 9px; }

.coll-header-right { display: flex; flex-direction: row-reverse; margin: 0 1rem 1rem 0; text-align: right;  }

.coll-header-right span { display: inline; margin: 0 .25rem 0 0; padding: 0 1rem; background: #eee; border: 1px solid #ddd; border-top: none; border-radius: 0px 0px 5px 5px; }
.coll-header-right span.active { background: #f5f5f5;  background-image: linear-gradient(180deg,#fff,#f5f5fa); box-shadow: 0 4px 11px 0 rgb(37 44 97 / 15%), 0 1px 3px 0 rgb(93 100 148 / 20%); }

.coll-header-right span a { margin: 0; padding: 0; font-weight: 500; text-decoration: none; color: #777777; }
.coll-header-right span a.active { color: #000; font-weight: bold; padding-bottom: 1rem;  }

.asset-list, .asset-list li { margin: 0; border: 0; list-style: none; }
.asset-list { padding: 0; }

.asset-list li { padding: .5rem .5rem; border-radius: 9px; transition: opacity 0.3s ease-in-out; /* Add CSS transition */ }
.asset-list li:nth-child(odd) { background: var(--asset-list-row); }
.asset-list li:first-of-type {  }

.section-amount { }
.asset-list .bal { color: var(--text-color); }
.asset-list .bal-fiat { color: #7b7b7b; }
.asset-list .lbl-units { }

.asa-row { display: flex; padding: 0 .5rem; }
.row-ctr { margin: .5rem 0; justify-content: center; }
.asa-row-box { flex: 1; }
.asa-row-box:first-child { margin-right: 20px; }

.asa-iconbox {  
	padding: 0 1.5rem 0 0;   
	display: flex;
	flex-direction: column;
	justify-content: center; 
} 

.asa-namebox {  }
.asa-namebox h1 { font-size: 1.4rem; margin: 0; padding: 0; }

a.lbl-asa-name { color: var(--text-color); font: 1rem !important; font-family: 'Fira Sans', sans-serif; text-decoration: none; white-space: nowrap; }
.lbl-asa-sname { color: #acacac; font-size: .8rem; }
.lbl-asa-acnt { margin-top: .5rem; color: #acacac; font-size: .8rem; }
.wallet-right .lbl-asa-acnt { margin-bottom: 1.5rem; }


.asa-label-inline { display: inline; }

.asa-icon-w { width: 36px; height: 36px; padding: 0 !important; vertical-align: bottom; }
.asa-icon-w2 { width: 42px; height: 42px; padding: 0 24px 0 0; vertical-align: bottom; }

.asa-icon-w-med { width: 100%; height: auto; max-width: 200px; padding: 0 0 1rem 0; text-align: center; vertical-align: bottom; }
.asa-icon-w-lg { width: 100%; height: auto; max-width: 600px; padding: 0; text-align: center; vertical-align: bottom; } /* ASA icon display */

.asa-icon-w-lg.img-error {
    margin-top: 3rem;
}

.asa-format-label {	
    display: inline-block;
	margin-left: 12px;
	padding: 2px 6px;
    outline: 0;
    cursor: pointer;
    font-weight: 500;
    line-height: 20px;
    vertical-align: middle;
    border: 1px solid;
    border-radius: 6px;
    color: #24292e;
    background-color: #fafbfc;
    border-color: #d9dbdc;
    box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset;
    transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    transition-property: color, background-color, border-color;
}

.asa-format-label:hover {
    background-color: #f3f4f6;
    border-color: #d9dbdc;
    transition-duration: 0.1s;
}

.asa-row-amt { text-align: right; border: 0px solid blue; }

.asa-row-amt-none {  }

.algo-addr { word-wrap: break-word; font-size: .8rem; }
.algo-addr-main { width: 100%; font-size: 1.1rem; }
.algo-addr-main a { text-decoration: none; }
.algo-bal { font-weight: bold; }

.algo-addr-main .wd a { color: var(--text-color); }

.account-status-container { }
.account-status { padding: .2rem .75rem; height: 1.5rem; border: 1px solid #e2e2e2; border-radius: 9px; text-align: center; white-space: nowrap; background: var(--acs-bg); box-shadow: var(--acs-bs); color: var(--text-color); }
.account-status:first-of-type { margin: 0 0 0 1rem; }
.account-online { color: #5f9c73; }
.account-offline { color: #dcdcdc; }
.account-rekey { color: #eaee00; }
.online-status-text { display: none; }
.account-label { margin: 0 1rem; }
.as-nfd { width: 16px; height: 16px; border: none; text-decoration: none; position: relative; top: 2px; }

.right-content { text-align: right; border: 0px solid red;  }
.right-content a { text-decoration: none; }

.account-fiat-total-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; padding: 0 1rem; }
.acc-desc { display: inline-block; padding: 1rem 0; text-align: left; color: #7b7b7b; }
.acc-amount { text-align: right; color: #7b7b7b; font-weight: 500; border-top: 1px dotted #888; }

.wallet-right { padding: .25rem .75rem; font-size: .9rem; white-space: normal; overflow: hidden; text-overflow: ellipsis; }
.tx-wr i { vertical-align: middle; }
.tx-s-note, .tx-s-note a { display: inline-block; margin-bottom: 1rem; font-size: .7rem; color: #bcbcbc; text-overflow: ellipsis; }
.tx-s-note a {  }

.algo-logo-sm { width: 12px; height: 12px; }
.wallet-right h4 { text-align: center; }

/* Assets */
.asset-display {  }

.asset-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 1rem;
    gap: 20px;
}

/* Let h1 grow naturally and wrap text */
.asset-header-container h1 {
    margin: 0 auto;
    text-align: center;
    flex: 1 1 auto;
    word-break: break-word;
}

/* Buttons aligned right */
.asset-header-buttons {
    flex-shrink: 0;
}

.button-row {
    display: flex;
    gap: 20px;
}

.nft-display-left { width: 59%; }
.nft-display-right { width: 39%; }

.asa-nft { 
	min-width: 240px;
	max-width: 1080px;
	max-height: 1080px;
	border-radius: 9px;
	box-shadow: 0px 0px 0px #747474;
}

.asa-nft-med { 
	margin: 0 auto 1rem;
	min-width: 200px; 
	max-width: 240px; 
	max-height: 240px;
	border-radius: 9px;
	box-shadow: 0px 0px 0px #747474;
	display: flex;
	justify-content: center; /* centers horizontally */
	align-items: center;
}

.img-error { max-width: 320px !important; max-height: 320px !important; }

.asa-details {
	font-family: 'Asap Condensed', sans-serif;
	font-size: .9rem;
	margin: 0 0 1.5rem 0;
	padding: 0;
	list-style: none;	
	border: 1px solid #cdcdcd;
	border-radius: 9px;
	box-shadow: 0px 1px 0px 0px #f5f5f5;
}

.asa-details li:nth-child(odd) {
    background-color: var(--asa-details-row);
    border-radius: 9px;
}

.asa-details li:first-of-type {
	margin-top: 0px;
}

.asa-details li:last-of-type {
	margin-bottom: 0px;
}

.asa-details li {
	padding: 6px .6rem; 
	font-weight: 500;
}

.asa-details > li > div { float: right; display: inline-block; margin: 0; text-align: right; font-weight: normal; clear: both; }

.asa-details-open a { font-size: .8rem; }
.asa-details-url a { font-size: .5rem; }

.asa-link { word-wrap: break-word; white-space: pre-wrap; word-break: break-word; }

.copy-clipboard-s { display: inline-block; width: 24px; height: 24px; vertical-align: middle; cursor: pointer; }
.copy-c { cursor: pointer; text-decoration: none; }

.card h3, .card h4, .tx-detail-params h3, .login-text h3, #asa-share-panel h3, #share-acct h3, #share-tx h3 { margin: 0 0 .6em 0; padding-left: .25rem; border-bottom: 1px solid #efefef; font-size: 1.3rem; color: #5f9c73; text-align: left; }
.card h4 { margin-top: .6rem; font-size: 1.1rem !important; }

.traits-lbl { margin-top: 1em; }

.p-item { display: inline-block; margin: 1rem .5rem .5rem; padding: .5rem .4rem; border-radius: 9px; font-family: 'Asap Condensed', sans-serif; font-size: .9rem; text-align: center; min-width: 86px; }
.p-item-desc { display: block !important; text-align: left; } 
.p-item-url  { display: block !important; text-align: left; }

.gradient-border {
  background: var(--pitem-bg);
  border-radius: 9px;
  border: 2px solid transparent;
}

.tab-asset-page { margin: 2rem 0 !important; }

.vestige-chart-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 600px;
  max-height: 400px;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin: 0 auto;
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically */
}

.responsive-iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  object-fit: contain;
  border-radius: 9px;
}

.asset-pera-swap { text-align: center; }
.asset-pera-swap iframe { border: none; }

/* Collection */
.collection-content { margin: 1rem 0 0 0; padding: .5rem 0; text-align: center; border: 1px solid #eee; border-radius: 9px; }

.coll-header { font-size: .9rem; }
.coll-title { margin: 0; padding: 0; text-align: left; font-weight: bold; }

.coll-flex-grid { display: flex; margin-bottom: 1rem; }
.col { flex: 1; margin: 0 .5rem; }

.coll-nft { display: inline-block; max-width: 200px; max-height: 200px; border-radius: 9px; }
.coll-titlebox { display: block; text-align: center; }

.coll-item a { text-decoration: none; }
.coll-item .ctitle { display: block; font-weight: bold; }

.coll-desc { display: inline-block; margin-right: 4rem; font-size: .8rem; color: #868686; }

/* Utils */
.vertical-align { position: relative; top: 50%; transform: translateY(-50%); } /* vericaly align anything https://stackoverflow.com/a/28424339 */
.center-box { display:flex; align-items: center; justify-content: center; } /* https://medium.com/@miya.miah.w/css-align-items-property-in-center-ec571a686be7 */

.center-img { margin: 0 auto; text-align: center; vertical-align: middle; }

.algo-logo { width: 12px; height: 12px; }
.algo-logo-pay { margin-top: 4px; margin-left: 5px; width: 20px; height: 20px; }
.algo-bal-pay { font-size: 1.3rem; font-weight: bold; }

.mono { font-family: 'SF Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; line-height: 1.8; display: inline-block; }
td .mono a { white-space: nowrap; }

.space-plus { margin: 3rem 2rem; }
.error-msg { text-align: center; }
.ctr { text-align: center; }
.rcs { border-radius: 9px; }

.footer { color: #8b8b8b; margin: 0; padding: 4rem; font-size: .8rem; }
.footer a { text-decoration: none; color: #797979; white-space: nowrap; }
.footer img.rs { float: right; }
.footer span.ls { }
.footer-menu { display: inline; }

.gwmim { width: 32px; height: 32px; }

.debug { font-size: .6em; }

.rimg { width: 100%; height: auto; }
.rimg-nft { width: 100%; height: auto; }

.copy-this-a, .copy-this-d { margin-left: 5px;  color: #0074cc; cursor: pointer; transition-duration: .5s; }

.full-screen-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

.wd { display: inline; margin-right: .5rem; overflow: hidden; word-wrap: break-word; white-space: pre-wrap; word-break: break-word; text-overflow: ellipsis; }
.wds { display: inline; margin-right: .5rem; }
.nounderline a { text-decoration: none; }

.btn-load-more-assets { font-weight: 500; }

.lbl-gray { color: #dadada; }
.lbl-center { display: inline-block; width: 100%; text-align: center; margin-top: .5rem; }
.asset-loading-spinner { color: #484848; }

.tradingview-widget-container { min-height: 6rem; }

.s-small { font-size: .5rem; }

.pera-link { color: #000 !important; text-decoration: none; }

/* Transaction Detail */

.transaction-container {
	font-size: .9rem;
	margin: 1rem 0rem;
	overflow-x: auto;
	max-width: 100%;
}

.transaction-container h2 { text-align: left; margin: 0 0 0 1rem; padding: 0; font-size: 1.1rem; font-weight: bold; }

.tx-list { margin: 1rem 3rem 2rem 0; }

table.tx-list { width: 100%; border-collapse: collapse; }

table.tx-list tr { background-color: var(--bg-color); }
table.tx-list tr:nth-child(even) { background-color: var(--tx-list-row); }
table.tx-list td:first-of-type { text-align: left; }
table.tx-list td { text-align: center; }

.txaddr { min-width: 100px; }
.txrn { word-break: normal !important; }

.tx-list .theadrow { color: #FFF; background: #a8a8a8; }
.tx-list .theadrow th { padding-top: .3rem; border-bottom: 1px solid #979797;  }

.txid { border-radius: 9px 0px 0px 0px; min-width: 140px; }
.txround { min-width: 100px; }
.txunits { padding-right: 20px;  border-radius: 0px 9px 0px 0px; }
.tx-age { font-size: .8rem; }  
.tx-detail-item { display: inline; }

table.tx-list td { padding: .2rem .5rem; }
table.tx-list td a { text-decoration: none; }

ul.tx-list li { display: flex; margin-bottom: .5rem; border-radius: 9px; }
ul.tx-list li:nth-child(odd) { background: #f3f3f3; }
ul.tx-list li div { margin-left: auto; }

.div-r { margin-left: auto; margin-right: 3rem; }

fieldset.tx-details { display: inline; margin-right: 3rem; padding: 2rem 3rem; border-radius: 9px; border: 1px solid #d7d7d7; background-color: #fcfffd; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; }
fieldset.tx-details legend { margin: 0 0rem; padding: 0 1rem; font-size: 1.2rem; font-weight: bold; text-shadow: 0px 1px 0px white; }

.tx-text-lbl { display: inline-block; font-weight: 500; padding-right: 1rem; min-width: 80px; }
.tx-text-lbl-action { font-weight: bold; margin: 0; padding-right: 1rem; font-style: italic; font-size: 1.2rem; }

.tx-details { margin: 3rem 0; transition: 0.3s box-shadow ease; display: flex;
  justify-content: center;
  align-items: flex-start; }
h3.tx-details  { margin: 0 3rem 0 3rem; }

ul.tx-details { list-style: none; }
ul.tx-details li { margin-bottom: 2rem; }

.tx-amount { 
	display: flex; max-width: 440px; 
	margin: 0; padding: 2rem;
	background-image: var(--tx-amount-bg);  	 
	border: 1px solid #e8e8e8; border-radius: 9px; box-shadow: inset 0px 0px 0px 1px #fff; }
	 
.tx-amount-pay { display: inline-block; width: 50%; margin-left: 0; }


.tx-asa-img-cont { display: flex; padding: 0 2rem; justify-content: center; align-items: center; }

.asa-icon-w-tx { width: 32px; height: 32px; padding: 0 !important;  }

.tx-label-gray { color: #a6a6a6; }

.tx-list-note-icon { margin-left: .2rem; color: #a6a6a6; }

.tx-note {
	margin: 3rem 3rem 6rem;
	word-wrap: break-word;
	white-space: pre-wrap;
	word-break: break-word; 
}

.tx-note-display, .note-base64 { word-break: break-word; }

.tx-list-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.tx-detail-params { margin: 0 2rem 0 0; padding: 2rem; background: var(--titlebar-bg); font-size: .8rem; border-radius: 9px; box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px inset; }
.tx-detail-params h3 { border-bottom: 1px solid #a8a8a8; }
.tx-detail-params hr, .fine-line { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }

.pagination {
  text-align: center;
  margin: 20px 0;
}

.pagination button {
  
  padding: 6px 12px;
  margin: 12px 6px;
  cursor: pointer;
  outline: 1px solid #494a4f;
  border-radius: 9px;
  border: none;
  background-color: #eee;
}

.pagination button.active, .pagination button.active:hover {
  background-color: #149aff;
  color: white;
}

.pagination button:hover {
	background-color: #dcdcdc;	
}

.tx-type-bubble { display: inline-block; min-width: 38px; padding: 0px 4px 1px; border: 1px solid #c4c4c4; background: var(--tx-type-bubble-bg); color: var(--text-color); font-size: .8rem; text-shadow: 0px 1px 1px rgba(212, 212, 212, 0.8); border-radius: 9px; text-align: center; }

#tx-raw-details, #app-view-program, #nfd-avatar-full { max-height: 90%; max-width: 90%; width: initial; height: initial; font-size: .7rem !important; overflow: scroll;  }


/* Data Display Rows */

.data-display { margin: 2rem 2rem; text-align: center; border: 0px solid red; 
	display: flex;
  	flex-direction: column;
  	justify-content: center; /* Center vertically */
  	align-items: center; /* Center horizontally */
} 

.data-display .dd-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; /* Align row items to the start */
  width: 100%;
  max-width: 1000px;
  margin-bottom: 10px; /* Spacing between rows */
  border: 0px solid blue;
}

.dd-label {
	text-align: left;
	margin-right: 1rem; /* Adjust the spacing between label and data */
	min-width: 200px;
	font-weight: 500;
}

.dd-data {
  text-align: left;
  flex-grow: 1; /* Ensures the data section takes up the remaining space */
  word-break: break-word;
}

.dd-label-padding .dd-label { align-self: flex-start; margin-top: 0rem; }

/* Round Detail */

.top-header { padding: 1rem 1rem !important; background-color: var(--top-header-bg); border-radius: 9px; border: 1px solid #dadada; box-shadow: 0.2px 0.5px 0.5px hsl(0deg 0% 0% / 0.49); }

.tx-detail-header { background-image: var(--blizzard-bg); background-repeat: repeat;  } 
.tx-detail-header h2 { margin: 0; padding: 0; text-align: left; font-weight: bold; color: var(--text-color); }

.nav-arrow { float: right; height: auto; border: 0px solid red; display: flex; align-items: center; justify-content: center; }
.nav-arrow a { color: var(--text-color); text-decoration: none; }

.round-header { background-image: url("/img/cubes.png"); background-repeat: repeat;  }

.round-header h3 { margin: 0; padding: 0; }

.round-browse { display: inline-block; margin-top: 1rem; }

.div-padder { margin: 1rem 3rem; }

#round-cube-icon { display: none; }

/* About */

.about-header h2 { text-align: left; font-weight: bold; }

/* Search */

.search-result-container {	
	width: 100%;
}

.search-result-container h2 {
	margin: 0;
}

.search-result-container h3 {
	margin: 0;
	padding: 0;
}

.search-results-list {
	
}

.asa-search-results {
	list-style-type: none; /* Removes the default bullets */
    padding: 0 1rem;
    margin: 0;
}

.nft-form-container { width: 80%; font-size: .9rem; } 

/* Common */

.algorand-symbol { display: inline-block; margin: 0 4px 0 2px; width: 12px; height: 12px; background: var(--algo-img); background-size: 12px 12px; }
.algorand-symbol-24 { display: inline-block; margin: 0 4px 0 4px; width: 24px; height: 24px; background: var(--algo-img); background-size: 24px 24px; }
.algorand-symbol-32 { display: inline-block; margin: 0 4px 0 4px; width: 32px; height: 32px; background: var(--algo-img); background-size: 32px 32px; }
.algorand-symbol-64 { display: inline-block; margin: 0 4px 0 4px; width: 64px; height: 64px; background: var(--algo-img); background-size: 64px 64px; }

.larger-txt { font-size: 1.4rem; }

.algorand-bg-gray { background: url('/img/algorand-algo-logo-gray.png') no-repeat, var(--square-bg) repeat; background-size: 80px 80px; background-position: calc(100% - 3rem) 100%; font-size: larger; }
.current-round-title { margin: 0; padding: 0; }

.wallet-bg-gray { background: var(--bg-color) url('/img/wallet-icon-gray-600.png') no-repeat !important; background-size: 100px 100px !important; background-position: calc(100% - 4rem) 100% !important; color: var(--text-color); }

.nfd-name {  }

.site-green { color: #5f9c73; }

.card-asa-display { 
	
	display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 2rem auto;
    padding: 20px;
    position: relative;
	width: 350px;
	height: 350px;
	border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

.asa-text {	
	position: absolute;
    bottom: 0;
	padding: 2rem;
	
	color: #fff;
	font-size: 2rem;
	text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px;
	
    /* Add responsive font size */
    font-size: calc(1vw + .5rem);
    max-width: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nfd-asa-display {
	background: rgb(234,72,23);
	background: linear-gradient(47deg, rgba(234,72,23,1) 0%, rgba(255,119,77,1) 55%);
	background-color: #ff8100;	
	background-image: url('/img/vendors/nfd-logo-l.jpg'); 
	
	background-position: top right;
    background-repeat: no-repeat;
    background-origin: padding-box;
    background-clip: padding-box;
    background-size: 80px 80px; 
}

.lofty-asa-display {
	background: rgb(77 63 237);	
	background-image: url('/img/vendors/lofty-logo-400.jpg');
	
	background-position: top right;
    background-repeat: no-repeat;
    background-origin: padding-box;
    background-clip: padding-box;
    background-size: 80px 80px; 
}

.tinyman-asa-display {
	background: #f2fe67;	
	background-image: url('/img/vendors/tinyman-icon-512.png');
    
    background-position: top right;
    background-repeat: no-repeat;
    background-origin: padding-box;
    background-clip: padding-box;
    background-size: 80px 80px; 
}

.account-status-container .nfd-name { font-weight: 500; font-size: 1.4rem; border-bottom: 1px dashed #FF602E; }

.nfd-avatar {
	margin-right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    object-fit: cover; /* This ensures the image covers the circular area without distortion */
    vertical-align: middle;
    box-shadow: 0 0 0 2px #FF602E;
}

.non-holding {
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.5s ease; 
	transition: opacity 0.5s ease; 
}

.summary-row { display: flex; }
.s-right-r { display: inline-block; float: right; text-align: right; ; }

.no-nft-img { border-radius: 9px; box-shadow: 1px 1px 0px #747474; }

.a2a_kit a { 
	margin-bottom: 20px;
	margin-right: 20px; 
}

.line-fade {
    border: 0;
    height: 1px;
    background-image: var(--hr-fade);
}

dl {
      display: grid;
      /* Two columns: one sized to fit the widest label, the other expands */
      grid-template-columns: max-content 1fr;
      gap: 0.25rem 1rem; /* row gap, column gap */
      margin: 0;
      padding: 0;
    }

    /* Labels (titles) */
    dt {
      font-weight: bold;
      text-align: left;
    }

    /* Descriptions (values) */
    dd {
      margin: 0; /* Remove default indentation */
    }

/* NFT collection pagnination */

.nc-pagination {
    display: flex;
    list-style-type: none;
    padding: 0;
    justify-content: center; 
}

.nc-pagination li {
    margin: 0 5px;
    border: 1px solid #ccc;
    padding: 0;
    border-radius: 5px;
}

.nc-pagination li a {
    text-decoration: none;
    color: #007bff;
    display: flex; /* Flexbox to center the content */
    align-items: stretch; /* Center content vertically */
    padding: 8px 12px; /* Move padding from li to the anchor */
    width: 100%; /* Ensure anchor covers entire li */
    height: 100%; /* Ensure anchor covers the height of li */
}

.nc-pagination li strong {
    font-weight: bold;
    color: #000; 
    display: flex; /* Flexbox to center the content */
    align-items: stretch; /* Center content vertically */  
}

.nc-pagination li {
    display: inline-block;
}

.nc-pagination li.current {
	background-color: #f0f0f0;
	white-space: nowrap;
	
}

.nc-pagination li strong {
    
    margin: 8px 12px;
    border-radius: 5px;
}

.nc-pagination li:not(:last-child) {
    margin-right: 10px;
}

.nc-pagination li:hover {
    background-color: #e8e8e8;
    cursor: pointer;
}

.nc-pagination li a:hover {
    text-decoration: underline;
}




/* bubble-label CSS */
.bubble-label {
  appearance: none;
  background-color: #FAFBFC;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: #24292E;
  cursor: pointer;
  display: inline-block;
  font-size: .9rem;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0 .5rem;
  padding: 6px 16px;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
}

.bubble-label:hover {
  background-color: #F3F4F6;
  text-decoration: none;
  transition-duration: 0.1s;
}

.bubble-label:disabled {
  background-color: #FAFBFC;
  border-color: rgba(27, 31, 35, 0.15);
  color: #959DA5;
  cursor: default;
}

.bubble-label:active {
  background-color: #EDEFF2;
  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
  transition: none 0s;
}

.bubble-label:focus {
  outline: 1px transparent;
}

.bubble-label:before {
  display: none;
}

.bubble-label:-webkit-details-marker {
  display: none;
}

/* Blue and White Gradient Style 3D Buttons */

.btn-blueg {
	margin: .3rem 0 .3rem .5rem;
    display: inline-block;
    outline: 0;
    border: 0;
    cursor: pointer;
    will-change: box-shadow,transform;
    background: radial-gradient( 100% 100% at 100% 0%, #89E5FF 0%, #5468FF 100% );
    box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px rgb(58 65 111 / 50%);
    padding: 0 32px;
    border-radius: 9px !important;
    color: #fff;
    height: 42px;
    font-size: 18px;
    text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
    transition: box-shadow 0.15s ease,transform 0.15s ease;
}
    
.btn-blueg:hover { box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #3c4fe0; transform: translateY(-2px); }
    
.btn-blueg:active { box-shadow: inset 0px 3px 7px #3c4fe0; transform: translateY(2px); }
    
.btn-whiteg	{
    display: inline-block;
    outline: 0;
    border: 0;
    cursor: pointer;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    will-change: box-shadow,transform;
    background: #FCFCFD;
    box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
    height: 42px;
    padding: 0 32px;
    font-size: 18px;
    border-radius: 9px;
    color: #36395a;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    }
    
.btn-whiteg:hover {
        box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
        transform: translateY(-2px);
    }
    
.btn-whiteg:active {
        box-shadow: inset 0px 3px 7px #d6d6e7;
        transform: translateY(2px);
    }


.btn-whiteg-small {
    display: inline-block;
    outline: 0;
    border: 0;
    cursor: pointer;
    color: rgb(72, 76, 122);
    height: 38px;
    padding: 8px 24px;
    border-radius: 9px;
    background-image: linear-gradient(180deg,#fff,#f5f5fa);
    box-shadow: 0 4px 11px 0 rgb(37 44 97 / 15%), 0 1px 3px 0 rgb(93 100 148 / 20%);
    transition: all .2s ease-out;
 }
 
.btn-whiteg-small:hover{
    box-shadow: 0 8px 22px 0 rgb(37 44 97 / 15%), 0 4px 6px 0 rgb(93 100 148 / 20%);
 }
                
.fl-right-btn { position: absolute; top: 0.5rem; right: 1rem; }                    
.namebox-rel { position: relative; }    

.sm-ama-btn {
	
	display: inline-block;
	outline: 0;
	cursor: pointer;
	border-radius: 9px;
	box-shadow: 0 2px 5px 0 rgb(213 217 217 / 50%);
	background: var(--button-color);
	border: 1px solid #d7d7d7;
	font-size: .8rem;
	height: 31px;
	margin-top: .5rem;
	padding: 0 12px;
	text-align: center;
	font-weight: 400;
	color: var(--text-color);
}

.sm-ama-btn:hover {
	background-color: var(--tx-list-hover);
	border-color: #D5D9D9;
}

    
/* Spin button */   

.spin-btn {
	margin-top: .5rem;
	cursor: pointer;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 1.0rem;
	width: 172px;
	height: auto;
	position: relative;
	color: #5f9c73;
	z-index: 1;
	transition: all 0.5s ease-in-out;
	border-radius: 3px;
	padding: 0;
	overflow: hidden;
	border: none;
	background: var(--spin-bg);
}

.spin-btn a { display: inline-block; color: #5f9c73; text-decoration: none; }

.spin-btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, #bbb);
  animation: spin-btn-right 2s linear infinite;
  transition: 0.5s ease-in-out;
}

.spin-btn:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #bbb);
  animation: spin-btn-bottom 2s linear infinite;
  animation-delay: 1s;
  transform: translateY(-100%);
}

.spin-btn span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px;
}

.spin-btn span:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, transparent, #bbb);
  animation: spin-btn-left 2s linear infinite;
}

.spin-btn span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to top, transparent, #bbb);
  animation: spin-btn-top 2s linear infinite;
  animation-delay: 1s;
  transform: translateY(-100%);
}

.spin-btn:hover:before {
  background: linear-gradient(to right, transparent, #d5ff00);
}

.spin-btn:hover:after {
  background: linear-gradient(to bottom, transparent, #d5ff00);
}

.spin-btn span:hover:before {
  background: linear-gradient(to top, transparent, #d5ff00);
}

.spin-btn span:hover:after {
  background: linear-gradient(to left, transparent, #d5ff00);
}

.spin-btn:hover a { color: #008cff; }

.spin-btn:active:before {
  background: linear-gradient(to right, transparent, #00a7fc);
}

.spin-btn:active:after {
  background: linear-gradient(to bottom, transparent, #00a7fc);
}

.spin-btn span:active:before {
  background: linear-gradient(to top, transparent, #00a7fc);
}

.spin-btn span:active:after {
  background: linear-gradient(to left, transparent, #00a7fc);
}

.spin-btn:active { color: #00a7fc; }
.spin-btn:focus { outline: none; } 

@keyframes spin-btn-right {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes spin-btn-top {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(-100%);
  }
}

@keyframes spin-btn-left {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes spin-btn-bottom {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100%);
  }
}

/* Hover button */

.hb-wrapper {
	width: 100%;
}

.hb-wrapper a {
  display: block;  
  line-height: 40px;
  font-size: 1rem;
  text-decoration: none;
  color: var(--text-color);
  border: 1px solid var(--asset-list-row);
  border-radius: 9px;
  letter-spacing: 2px;
  text-align: center;
  padding: 3px 7px;
  position: relative;
  transition: all .35s;
  background-image: var(--hb-bg);
  box-shadow: 0 4px 11px 0 rgb(37 44 97 / 15%), 0 1px 3px 0 rgb(93 100 148 / 20%);
}

.hb-wrapper a:active { padding: 3px 5px 3px 9px; }

.hb-wrapper a span {
  position: relative;
  z-index: 1;
}

.hb-wrapper a:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: 9px;
  background: #eee;
  transition: all .35s;
}

/* Frameworks */

/* 
	Simple Responsive Grid Cards
		
	https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe */

.card {
	padding: 0rem .5rem;
	height: auto;
	border: 0px solid #dbdbdb;
	border-radius: 9px;
}

.cards {
  margin: 1rem auto;
  display: grid;
  grid-gap: 1rem;
}

/* CSS Tabs -- https://codepen.io/alvarotrigo/pen/GRMbzBR -- compiled SCSS max tabs is 5 */

.tab-wrap {
  transition: 0.3s box-shadow ease;
  border-radius: 9px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  list-style: none;
  background-color: var(--bg-color);
  margin: 40px 3rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.tab-wrap:hover {
  box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
}

.tab {
  display: none;
}
.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 1;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 1;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 1;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 1;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(5) ~ .tab__content:nth-of-type(5) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 1;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:first-of-type:not(:last-of-type) + label {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.tab:not(:first-of-type):not(:last-of-type) + label {
  border-radius: 0;
}
.tab:last-of-type:not(:first-of-type) + label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.tab:checked + label {
  background-color: #fff;
  box-shadow: 0 -1px 0 #fff inset;
  cursor: default;
  font-weight: 500;
}
.tab:checked + label:hover {
  box-shadow: 0 -1px 0 #fff inset;
  background-color: #fff;
}
.tab + label {
  box-shadow: 0 -1px 0 #eee inset;
  border-radius: 9px 9px 0 0;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #333;
  flex-grow: 3;
  text-align: center;
  background-color: #f2f2f2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  transition: 0.3s background-color ease, 0.3s box-shadow ease;
  height: 50px;
  box-sizing: border-box;
  padding: 15px;
}
.tab + label:hover {
  background-color: #f9f9f9;
  box-shadow: 0 1px 0 #f4f4f4 inset;
}
.tab__content {
  padding: 10px 25px;
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 0;
  left: 0;
  transform: translateY(-3px);
  border-radius: 9px;
}

.tab-wrap h1, h2 {
  margin: 0;
  text-align: center;
  font-weight: 400;
  color: var(--text-color);
}

.tab-wrap h2 {
  font-size: 1em;
  margin-bottom: 30px;
}

.tab-wrap h3 {
  font-weight: 400;
}

.tab-wrap p {
  line-height: 1.6;
  margin-bottom: 20px;
}

/* CSS Tabs Panels - https://codepen.io/Wendy-Ho/pen/MWWBvmd */

.ho-wrapper {
  display:flex;
  flex-direction: column;
  align-items: center;
}

.ho-wrapper .htab {
  cursor: pointer;
  padding:	10px 20px;
  margin:	0px 2px;
  display:inline-block;
  color: var(--text-color);
}

.ho-wrapper .panels {
  min-height: 200px;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  padding: 20px;  
}

.ho-wrapper .panel {
  display:none;
  animation: fadein .8s;
}

@keyframes fadein {
    from { opacity:0; }
    to { opacity:1; }
}

.ho-wrapper .panel-title {
  font-size:1.5em;
  font-weight:bold
}

.ho-wrapper .radio {
  display:none;
}

.ho-wrapper #one:checked ~ .panels #one-panel,
.ho-wrapper #two:checked ~ .panels #two-panel,
.ho-wrapper #three:checked ~ .panels #three-panel {
  display:block
}

.ho-wrapper #one:checked ~ .tabs #one-tab,
.ho-wrapper #two:checked ~ .tabs #two-tab,
.ho-wrapper #three:checked ~ .tabs #three-tab {
  
  color: #5e7089;
  border-bottom: 2px solid #000;
  font-weight: bold;
}


/* Screen larger than 600px? 2 column */
@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 900px? 3 columns 
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
} */

/* Hamburger Menu - https://codepen.io/parhammofidi/pen/vmZbzr */

#hamburger {
	cursor: pointer;
	font-size: 2em;
	margin-right: 1rem;
	color: #a8a8a8;
	text-shadow: 0.2px 0.5px 0.5px hsl(0deg 0% 0% / 0.49);
}

#sideNavigation {
	display: flex;
	flex-direction: column;
	background: var(--side-nav-bg);		
	height: 100%;
	left: 0;
	overflow-x: hidden;
	position: fixed;
	top: 0;
	transition: 0.5s;
	width: 0;
	z-index: 100;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);	
}

#sideNavigation #sideNavigationCloseLink {
	font-size: 3em;
	padding: 0em;
	position: absolute;
	right: 0.5em;
	top: .75rem;	
}

main { transition: margin-left .5s; }

.sidebar-links { margin: .5rem 0 1rem 0.5rem; }
.sidebar-links a { padding: 2px 10px; background-color: #ddd; color: #565656; border-radius: 9px; text-decoration: none; border: 1px solid transparent; }
.inner-tx-d { padding: 0px 0px 1px !important; min-width: 24px !important; }

.favs-container h2, .favs-container h3 { color: var(--text-color); }

.favs-header h2 { display: inline-block; margin-left: 1rem !important;  vertical-align: text-bottom; font-weight: 500; color: var(--text-color); }
.favs-header h3, .sidepanelstyle-container p { color: var(--text-color); }
.logo-favs { filter: brightness(0) invert(1); width: 32px; height: 30px; display: inline; }


/* Homepage boxes */

.hp-box-container { display: flex; justify-content: space-between; }

.hp-box {
  flex: 1;
  min-height: 200px; 
  margin: .5rem 1rem;
  border-radius: 9px;
  box-shadow: 0.2px 0.5px 0.5px hsl(0deg 0% 0% / 0.49);  
}

.hp-round-list { list-style: none; margin: 0; padding: 0; }

ul.hp-round-list li { text-align: center; }

.hp-head {
	padding: .5rem 0 .5rem .8rem;
	border-radius: 7px 7px 9px 0px;
	box-shadow: 0.2px 0.5px 0.5px hsl(0deg 0% 0% / 0.49);
	color: #fff;
	font-weight: bold;
	text-align: left;
	white-space: nowrap;
}

.hp-head h3 { margin: 0; padding: 0; display: inline-block; padding-right: .2rem; font-size: 1rem; }
.hp-head h3 a { color: #fff; text-decoration: none; }

.hp-head-1 { background-image: linear-gradient(to right bottom, #5f9c73, #2d9b89, #0097a2, #0090b8, #0086c4, #0083cc, #007fd3, #007ad9, #007ee2, #0083ec, #0088f5, #008cff);}
.hp-head-2 { background-image: linear-gradient(to right bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); }
.hp-head-3 { background-image: linear-gradient(to left bottom, #eeeeee, #e8e8e9, #e2e2e4, #dcdde0, #d6d7db, #d0d2d7, #caced3, #c4c9cf, #bdc3ca, #b6bec6, #afb8c1, #a8b3bc); }

.hp-child-cont { display: flex; }
.hp-child { flex: 1; border: 1px solid red; width: 50%; }

.hp-box-1 { border: 1px solid #5f9c73; background-image: var(--blizzard-bg); background-repeat: repeat; min-width: 320px; }
.hp-box-2 { border: 1px solid #d16ba5; background-image: var(--papyrus); background-repeat: repeat; }
.hp-box-3 { border: 1px solid #eeeeee; background-image: url("/img/cubes.png"); background-repeat: repeat; min-width: 330px; }

.round-list-wrap { margin: 0 auto; padding: 0 2rem;  }

#blockInfo {  }
#dots span { opacity: 0; }

.info-hp { float: right; margin-right: 1rem; margin-top: 1px; color: #fff !important; text-decoration: none; }
.info-hp a { color: #fff !important; }

.price-watch-wrap { margin: 0; padding: .5rem 1rem; }

.hp-price-main { text-align: center; }
.hp-price-24h { margin-right: .3rem; font-size: 1.2rem !important; }
.hp-price-display { font-size: 2rem; font-weight: bold; }

.hp-item-group { text-align: center; }
.hp-item { display: inline-block; margin: .5rem .5rem; padding: .25rem .3rem; border-radius: 9px; font-family: 'Asap Condensed', sans-serif; font-size: .9rem; color: var(--text-color); text-align: center; min-width: 64px; }

.hp-price-gbg-aprice-green { border: 1px solid #5f9c73; background-color: var(--hpitem-bg-g); }
.hp-price-gbg-aprice-red { border: 1px solid #ce4141; background-color: var(--hpitem-bg-r); }
.hp-price-gbg-aprice-neutral { border: 1px solid #000; background-color: var(--hpitem-bg-n); }

.hp-pstats { font-family: 'Asap Condensed', sans-serif; text-align: center; font-size: 1rem; }

.hp-marquee span { display: inline-block; margin-right: 12rem; }

.hp-bw-paused { text-decoration: none; }

.hp-article-date { display: none; }

/* Homepage trending module */

.hp-trending-assets {  }
.hp-trending-assets ul { list-style: none; margin: 6px 0 0 6px; padding: 0; }
.hp-trending-assets ul li { margin: 0; padding: 0; }

.hp-f-tm { width: 150px; height: auto; min-height: 100px; border: none; outline: none; border-radius: 5px; }
.hp-f-tl { text-decoration: none; }

.block-watch-wrap { overflow: scroll; height: 160px; min-width: 290px; display: flex; justify-content: center; }

.bw-first { }

.block-watch-list { margin: 0; padding: .5rem 1rem; list-style-type: none; }
.block-watch-list li { font-size: .8rem; width: 100%; padding: .2rem 0; }
.block-watch-list li i { margin-right: 4px; } 

.block-watch-list li.block-item {  }

.tpsd { display: block; text-align: center; font-weight: bold; }

.rss-color { color: #F7931A; }

#news-feed-container {  }
#news-feed { display: flex; justify-content: center; gap: 22px;  }
#news-feed .left { display: flex; flex: 0 0 30%; /* 0 grow, 0 shrink, 25% basis */ align-items: center; text-transform: uppercase; font-size: 1.4rem; font-family: 'Fira Sans', sans-serif !important; font-weight: bold; }
#news-feed .left a { text-decoration: none; }

#news-feed .hp-center { display: flex; justify-content: center; align-items: center; flex: 1; gap: 44px; }
.hp-hover-wrap { display: inline-block; position: relative; border-radius: 50%; transition: box-shadow 0.3s ease; background: transparent; }
.hp-nft-circle { display: block; width: 108px; height: 108px; text-decoration: none; border: none; background: transparent; pointer-events: none; border-radius: 50%; }

#news-feed .right { 
	/* display: flex; justify-content: center; flex: 1; */
	display: flex;
	flex-direction: column; /* Stack children vertically */
	justify-content: flex-start; /* Align items to the top */
	align-items: flex-start; /* Align items to the left */
	
}
#news-feed .right h3 a { display: inline-block; font-family: 'Fira Sans', sans-serif !important;  }

#news-feed .right ul { list-style: none; margin: 0; padding: 0; }	
#news-feed .right li { padding-bottom: 6px; }
#news-feed span.no-rap { margin-right: 2rem; white-space: nowrap; } 

.text-3d {
  color: #fff;
  text-shadow: 
    -2px 2px 0px rgba(0, 0, 0, 0.6),
    -2px 4px 0px rgba(0, 0, 0, 0.6),
    -4px 2px 0px rgba(0, 0, 0, 0.6),
    -4px 4px 0px rgba(0, 0, 0, 0.6),
    -6px 2px 0px rgba(0, 0, 0, 0.6),
    -6px 4px 0px rgba(0, 0, 0, 0.6),
    -8px 2px 0px rgba(0, 0, 0, 0.6),
    -8px 4px 0px rgba(0, 0, 0, 0.6),
    -10px 2px 0px rgba(0, 0, 0, 0.6),
    -10px 4px 0px rgba(0, 0, 0, 0.6),
     -1px -1px 0 black,  
     1px -1px 0 black,  
    -1px  1px 0 black,  
     1px  1px 0 black;
  font-size: 2rem;
  font-weight: bold;
  text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
  text-decoration: none;
}

a.text-3d { color: #fff; }

/* jQuery Toast */


.custom-toast-container {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1050;
    margin-bottom: 1rem;
    line-height: 1rem;
}

.custom-toast p {
	margin: .2rem;
	padding: .1rem;
}

.custom-toast {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s, transform 0.3s;
    width: 330px;
    height: auto;
    padding: 10px 15px;
    background-color: #ffffff;
    border-radius: 140px;
    box-shadow: 0 9px 10px rgb(0 0 0 / 29%);
    margin-right: 1rem;
    align-items: center;
    display: flex;
    margin-bottom: 0.5rem;
}

.custom-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.custom-toast .icon-container {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.custom-toast .icon-container > svg {
    height: 34px;
}

.custom-toast .content-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.custom-toast .content-container .title {
    font-weight: 600;
    font-size: 15px;
}

.custom-toast .content-container .message {
    font-size: 14px;
    font-weight: 400;
    color: #111215;
}

.custom-toast > button {
    background-color: transparent;
    font-size: 25px;
    color: #9b9dab;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    height: 34px;
    width: 34px;
}

.custom-toast.success .icon-container > svg {
    fill: #47D764;
}

.custom-toast.success .content-container .title {
    color: #47d764;
}

.custom-toast.error .icon-container > svg {
    fill: #ff355b;
}

.custom-toast.error .content-container .title {
    color: #ff355b;
}

.custom-toast.info .icon-container > svg {
    fill: #2F86EB;
}

.custom-toast.info .content-container .title {
    color: #2F86EB;
}

.custom-toast.warning .icon-container > svg {
    fill: #FFC021;
}

.custom-toast.warning .content-container .title {
    color: #FFC021;
}

.custom-toast-container .custom-toast:last-child {
    margin-bottom: 1rem;
}

@media (max-width: 568px) {
    .custom-toast {
        margin: auto 0.5rem;
        left: 0;
        right: 0;
        width: calc(100% - 1rem);
        margin-bottom: 0.5rem;
    }

    .custom-toast-container {
        margin: 0;
    }
}

/**
 * Setup keyframes for pulsing animation
 */
@-webkit-keyframes loadingPlaceholders {
	0% {
		background-color: lightgray;
	}
	50% {
		background-color: #e5e5e5;
	}
	100% {
		background-color: lightgray;
	}
}
@keyframes loadingPlaceholders {
	0% {
		background-color: lightgray;
	}
	50% {
		background-color: #e5e5e5;
	}
	100% {
		background-color: lightgray;
	}
}

/**
 * Style the placeholder - https://jsfiddle.net/cferdinandi/0ew9raa4/
 */
.placeholder {
  -webkit-animation: loadingPlaceholders 1.5s ease-in infinite;
          animation: loadingPlaceholders 1.5s ease-in infinite;
  background-color: #e5e5e5;
  border-radius: 9px;
}

.placeholder-hero {
	height: 20em;
}

.placeholder-heading {
	height: 3em;
	width: 55%;
}

.placeholder-sentence {
	height: 1.5em;
	margin: 0 2rem 0.5em 2rem;
	
}

.placeholder-sentence-last {
	width: 85%;
}

.placeholder-paragraph {
	height: 8em;
	margin-top: 1.625em;
}

.placeholder-btn {
	height: 3em;
	width: 8em;

}

.placeholder-thumbnail {
	border-radius: 50%;
	height: 9em;
	width: 9em;
}

.placeholder-hero,
.placeholder-heading,
.placeholder-paragraph,
.placeholder-btn,
.placeholder-thumbnail {
	margin-bottom: 1.625em;
}

.bx-viewport { padding-bottom: 12px; }

/** bxSlider CSS v4.2.17
	VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
  position: relative;
  margin-bottom: 60px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
  /*fix flickering when used background-image instead of <img> (on Chrome)*/
  -webkit-perspective: 1000;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /* fix other elements on the page moving (in Chrome) */
  -webkit-transform: translateZ(0);
}
/** THEME
===================================*/
.bx-wrapper {

}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url('images/bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #666;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('images/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('images/controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('images/controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('images/controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}

.bx-controls { display: none; }
.bx-wrapper:hover .bx-controls { display: block; }

/* end bx-slider */

/* CSS Ribbon */

.ribbon {
  --f: 10px; /* control the folded part */  
  position: absolute;
  top: 0;
  text-align: center;
  color: #fff;
  font-size: 1rem;
  padding: .2em 2.5em;
  background: var(--c, #CC333F);
  border-bottom :var(--f) solid #0007;
  clip-path: polygon(100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
}

.ribbon a { color: #fff; text-decoration: none; }

.ribbon-right {
  right: 0;
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
}
.ribbon-left {
  left: 0;
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
}

/* a fix for firefox that show some strange lines*/
@supports (-moz-appearance:none) {
  .ribbon {
    background:
      linear-gradient(to top,#0000 1px,#0005 0 var(--f),#0000 0) border-box,
      linear-gradient(var(--c,#45ADA8) 0 0) 50%/
       calc(100% - 2px) calc(100% - 2px) no-repeat border-box;
    border-bottom-color: #0000;
   }
}

/* jquery modal css */
.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em}.blocker.behind{background-color:transparent}.modal{display:none;vertical-align:middle;position:relative;z-index:2;max-width:500px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}

/**
 * ----------------------------------------
 * animation rotate-scale-up, used in title menu star ani
 * ----------------------------------------
 */
 
@-webkit-keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}

/*! pretty-print-json v3.0.4 ~~ https://pretty-print-json.js.org ~~ MIT License */
.json-container{font-family:menlo,consolas,monospace;font-style:normal;font-weight:700;line-height:1.4em;font-size:.9rem;transition:background-color 400ms}a.json-link{text-decoration:none;border-bottom:1px solid;outline:0}a.json-link:hover{background-color:transparent;outline:0}ol.json-lines{white-space:normal;padding-inline-start:3em;margin:0}ol.json-lines>li{white-space:pre;text-indent:.7em;line-height:1.5em;padding:0}ol.json-lines>li::marker{font-family:system-ui,sans-serif;font-weight:400;color:#696969}.json-boolean,.json-key,.json-mark,.json-null,.json-number,.json-string,a.json-link,ol.json-lines>li{transition:all 400ms}.json-container{background-color:#fff}.json-key{color:brown}.json-string{color:olive}.json-number{color:navy}.json-boolean{color:teal}.json-null{color:#696969}.json-mark{color:#000}a.json-link{color:purple}a.json-link:visited{color:#708090}a.json-link:hover{color:#8a2be2}a.json-link:active{color:#708090}ol.json-lines>li:nth-child(odd){background-color:#dcdcdc}ol.json-lines>li:nth-child(even){background-color:#f5f5f5}ol.json-lines>li:hover{background-color:#fffacd}@media (prefers-color-scheme:dark){ol.json-lines{--colorGraphite:#303030;--colorCharcoal:#222222;--colorTar:#161616}.json-container{background-color:#000}.json-key{color:#cd5c5c}.json-string{color:khaki}.json-number{color:#00bfff}.json-boolean{color:#3cb371}.json-null{color:#ff8c00}.json-mark{color:silver}a.json-link{color:#ba55d3}a.json-link:visited{color:#708090}a.json-link:hover{color:violet}a.json-link:active{color:#708090}ol.json-lines>li::marker{color:silver}ol.json-lines>li:nth-child(odd){background-color:var(--colorCharcoal)}ol.json-lines>li:nth-child(even){background-color:var(--colorTar)}ol.json-lines>li:hover{background-color:#696969}}

/* jquery dropdown v1.0.0 ~ https://github.com/visma-meglerfront/sweet-dropdown ~~ https://sweet-dropdown.adepto.as ~ Dual licensed under the MIT and GPL licenses */
.dropdown-menu{position:absolute;z-index:9999999;display:none;opacity:0;top:0;left:0;-webkit-transition:opacity 0.2s, -webkit-transform 0.2s;transition:opacity 0.2s, transform 0.2s;-webkit-transform:translateY(-20px) scale(0.93);transform:translateY(-20px) scale(0.93);border-radius:3px}.dropdown-menu.dropdown-opened{opacity:1;-webkit-transform:none !important;transform:none !important}.dropdown-menu.fixed{position:fixed}.dropdown-menu.dropdown-anchor-left-top,.dropdown-menu.dropdown-anchor-left-center,.dropdown-menu.dropdown-anchor-left-bottom{-webkit-transform:translateX(-20px) scale(0.93);transform:translateX(-20px) scale(0.93)}.dropdown-menu.dropdown-anchor-right-top,.dropdown-menu.dropdown-anchor-right-center,.dropdown-menu.dropdown-anchor-right-bottom{-webkit-transform:translateX(20px) scale(0.93);transform:translateX(20px) scale(0.93)}.dropdown-menu .dropdown-anchor{border:7px solid #fff}.dropdown-menu .dropdown-anchor,.dropdown-menu .dropdown-anchor::after{position:absolute;content:'';display:inline-block}.dropdown-menu .dropdown-anchor::after{border:6px solid #fff}.dropdown-menu.dark .dropdown-anchor,.dropdown-menu.dark .dropdown-anchor::after{border-color:#32363F}.dropdown-menu.grey-anchor .dropdown-anchor,.dropdown-menu.grey-anchor .dropdown-anchor::after{border-color:#f6f6f6}.dropdown-menu.accent-anchor .dropdown-anchor,.dropdown-menu.accent-anchor .dropdown-anchor::after{border-color:#F57C00}.dropdown-menu.dropdown-anchor-top-left:not(.dropdown-overlay-trigger),.dropdown-menu.dropdown-anchor-top-center:not(.dropdown-overlay-trigger),.dropdown-menu.dropdown-anchor-top-right:not(.dropdown-overlay-trigger){margin-top:10px}.dropdown-menu.dropdown-anchor-top-left .dropdown-anchor,.dropdown-menu.dropdown-anchor-top-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-top-right .dropdown-anchor{border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;top:-14px}.dropdown-menu.dropdown-anchor-top-left .dropdown-anchor::after,.dropdown-menu.dropdown-anchor-top-center .dropdown-anchor::after,.dropdown-menu.dropdown-anchor-top-right .dropdown-anchor::after{border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;margin-top:-5px;margin-left:-6px}.dropdown-menu.dropdown-anchor-top-left.dropdown-anchor-top-left .dropdown-anchor,.dropdown-menu.dropdown-anchor-top-center.dropdown-anchor-top-left .dropdown-anchor,.dropdown-menu.dropdown-anchor-top-right.dropdown-anchor-top-left .dropdown-anchor{left:15px}.dropdown-menu.dropdown-anchor-top-left.dropdown-anchor-top-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-top-center.dropdown-anchor-top-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-top-right.dropdown-anchor-top-center .dropdown-anchor{left:calc(50% - 7px)}.dropdown-menu.dropdown-anchor-top-left.dropdown-anchor-top-right .dropdown-anchor,.dropdown-menu.dropdown-anchor-top-center.dropdown-anchor-top-right .dropdown-anchor,.dropdown-menu.dropdown-anchor-top-right.dropdown-anchor-top-right .dropdown-anchor{left:calc(100% - 28px)}.dropdown-menu.dropdown-anchor-right-top:not(.dropdown-overlay-trigger),.dropdown-menu.dropdown-anchor-right-center:not(.dropdown-overlay-trigger),.dropdown-menu.dropdown-anchor-right-bottom:not(.dropdown-overlay-trigger){margin-left:-10px}.dropdown-menu.dropdown-anchor-right-top .dropdown-anchor,.dropdown-menu.dropdown-anchor-right-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-right-bottom .dropdown-anchor{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;left:100%}.dropdown-menu.dropdown-anchor-right-top .dropdown-anchor::after,.dropdown-menu.dropdown-anchor-right-center .dropdown-anchor::after,.dropdown-menu.dropdown-anchor-right-bottom .dropdown-anchor::after{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;margin-left:-7px;margin-top:-6px}.dropdown-menu.dropdown-anchor-right-top.dropdown-anchor-right-top .dropdown-anchor,.dropdown-menu.dropdown-anchor-right-center.dropdown-anchor-right-top .dropdown-anchor,.dropdown-menu.dropdown-anchor-right-bottom.dropdown-anchor-right-top .dropdown-anchor{top:11px}.dropdown-menu.dropdown-anchor-right-top.dropdown-anchor-right-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-right-center.dropdown-anchor-right-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-right-bottom.dropdown-anchor-right-center .dropdown-anchor{top:calc(50% - 7px)}.dropdown-menu.dropdown-anchor-right-top.dropdown-anchor-right-bottom .dropdown-anchor,.dropdown-menu.dropdown-anchor-right-center.dropdown-anchor-right-bottom .dropdown-anchor,.dropdown-menu.dropdown-anchor-right-bottom.dropdown-anchor-right-bottom .dropdown-anchor{top:calc(100% - 26px)}.dropdown-menu.dropdown-anchor-bottom-left:not(.dropdown-overlay-trigger),.dropdown-menu.dropdown-anchor-bottom-center:not(.dropdown-overlay-trigger),.dropdown-menu.dropdown-anchor-bottom-right:not(.dropdown-overlay-trigger){margin-top:-10px}.dropdown-menu.dropdown-anchor-bottom-left .dropdown-anchor,.dropdown-menu.dropdown-anchor-bottom-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-bottom-right .dropdown-anchor{border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;top:100%}.dropdown-menu.dropdown-anchor-bottom-left .dropdown-anchor::after,.dropdown-menu.dropdown-anchor-bottom-center .dropdown-anchor::after,.dropdown-menu.dropdown-anchor-bottom-right .dropdown-anchor::after{border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;margin-top:-7px;margin-left:-6px}.dropdown-menu.dropdown-anchor-bottom-left.dropdown-anchor-bottom-left .dropdown-anchor,.dropdown-menu.dropdown-anchor-bottom-center.dropdown-anchor-bottom-left .dropdown-anchor,.dropdown-menu.dropdown-anchor-bottom-right.dropdown-anchor-bottom-left .dropdown-anchor{left:15px}.dropdown-menu.dropdown-anchor-bottom-left.dropdown-anchor-bottom-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-bottom-center.dropdown-anchor-bottom-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-bottom-right.dropdown-anchor-bottom-center .dropdown-anchor{left:calc(50% - 7px)}.dropdown-menu.dropdown-anchor-bottom-left.dropdown-anchor-bottom-right .dropdown-anchor,.dropdown-menu.dropdown-anchor-bottom-center.dropdown-anchor-bottom-right .dropdown-anchor,.dropdown-menu.dropdown-anchor-bottom-right.dropdown-anchor-bottom-right .dropdown-anchor{left:calc(100% - 28px)}.dropdown-menu.dropdown-anchor-left-top:not(.dropdown-overlay-trigger),.dropdown-menu.dropdown-anchor-left-center:not(.dropdown-overlay-trigger),.dropdown-menu.dropdown-anchor-left-bottom:not(.dropdown-overlay-trigger){margin-left:10px}.dropdown-menu.dropdown-anchor-left-top .dropdown-anchor,.dropdown-menu.dropdown-anchor-left-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-left-bottom .dropdown-anchor{border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;left:-14px}.dropdown-menu.dropdown-anchor-left-top .dropdown-anchor::after,.dropdown-menu.dropdown-anchor-left-center .dropdown-anchor::after,.dropdown-menu.dropdown-anchor-left-bottom .dropdown-anchor::after{border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;margin-left:-5px;margin-top:-6px}.dropdown-menu.dropdown-anchor-left-top.dropdown-anchor-left-top .dropdown-anchor,.dropdown-menu.dropdown-anchor-left-center.dropdown-anchor-left-top .dropdown-anchor,.dropdown-menu.dropdown-anchor-left-bottom.dropdown-anchor-left-top .dropdown-anchor{top:11px}.dropdown-menu.dropdown-anchor-left-top.dropdown-anchor-left-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-left-center.dropdown-anchor-left-center .dropdown-anchor,.dropdown-menu.dropdown-anchor-left-bottom.dropdown-anchor-left-center .dropdown-anchor{top:calc(50% - 7px)}.dropdown-menu.dropdown-anchor-left-top.dropdown-anchor-left-bottom .dropdown-anchor,.dropdown-menu.dropdown-anchor-left-center.dropdown-anchor-left-bottom .dropdown-anchor,.dropdown-menu.dropdown-anchor-left-bottom.dropdown-anchor-left-bottom .dropdown-anchor{top:calc(100% - 26px)}.dropdown-menu.max-height ul{max-height:184px}.dropdown-menu ul{min-width:160px;list-style:none;background:#FFF;box-shadow:0 3px 5px rgba(0,0,0,0.1);overflow:auto;padding:5px 0;margin:0}.dropdown-menu ul li{list-style:none;padding:0;margin:0;line-height:18px}.dropdown-menu ul li>a,.dropdown-menu ul li label{display:block;color:#555;text-decoration:none;line-height:18px;padding:5px 15px;white-space:nowrap;transition:all 0.1s}.dropdown-menu ul li>a svg,.dropdown-menu ul li label svg{height:14px;width:18px;vertical-align:middle;margin-left:-2px;margin-right:4px;margin-top:-3px}.dropdown-menu ul li>a svg path,.dropdown-menu ul li>a svg polygon,.dropdown-menu ul li label svg path,.dropdown-menu ul li label svg polygon{transition:fill 0.1s;fill:#0b0b0b}.dropdown-menu ul li>a span.greenSVG svg path,.dropdown-menu ul li>a span.greenSVG svg polygon,.dropdown-menu ul li label span.greenSVG svg path,.dropdown-menu ul li label span.greenSVG svg polygon{fill:#B7D968}.dropdown-menu ul li>a .flag,.dropdown-menu ul li label .flag{padding-bottom:1px}.dropdown-menu ul li>a:not(.grey):hover,.dropdown-menu ul li>a:hover,.dropdown-menu ul li label:not(.grey):hover,.dropdown-menu ul li label:hover{background-color:#F57C00;color:#FFF;cursor:pointer}.dropdown-menu ul li>a:not(.grey):hover svg path,.dropdown-menu ul li>a:not(.grey):hover svg polygon,.dropdown-menu ul li>a:hover svg path,.dropdown-menu ul li>a:hover svg polygon,.dropdown-menu ul li label:not(.grey):hover svg path,.dropdown-menu ul li label:not(.grey):hover svg polygon,.dropdown-menu ul li label:hover svg path,.dropdown-menu ul li label:hover svg polygon{fill:#fff}.dropdown-menu ul li>a.active,.dropdown-menu ul li label.active{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default;pointer-events:none;color:#999;background:#f6f6f6}.dropdown-menu ul li>a.grey:hover,.dropdown-menu ul li label.grey:hover{cursor:default}.dropdown-menu ul li>a.disabled,.dropdown-menu ul li>a.disabled:hover,.dropdown-menu ul li>a.disabled:active,.dropdown-menu ul li label.disabled,.dropdown-menu ul li label.disabled:hover,.dropdown-menu ul li label.disabled:active{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default;pointer-events:none;cursor:default;color:#999}.dropdown-menu ul li.title{padding:7.5px 15px;background:#f6f6f6;color:#999;font-family:"Roboto","Open Sans",sans-serif;font-size:12px;text-transform:uppercase;border:0;border-top-left-radius:3px;border-top-right-radius:3px}.dropdown-menu ul li.title.grey{background:#999;color:#F57C00}.dropdown-menu ul li.title.light{background:#f6f6f6;color:#fccfa2}.dropdown-menu ul li.title.accent{background:#F57C00;color:#fccfa2}.dropdown-menu ul li>a:hover small.grey{opacity:0.75;color:#fff}.dropdown-menu ul li:first-child.divider{display:none}.dropdown-menu.right-aligned{text-align:right}.dropdown-menu.right-aligned ul li a svg{margin-right:0;margin-left:4px}.dropdown-menu .divider{height:1px;background:#e0e0e0;margin:5px 1px;overflow:hidden}.dropdown-menu.dark.assign-dropdown ul li a{color:#fff}.dropdown-menu.dark.assign-dropdown ul li a:hover{background:#F57C00;color:#fff}.dropdown-menu.dark ul{background:#32363F}.dropdown-menu.dark ul li>a,.dropdown-menu.dark ul li label{color:#939aaa}.dropdown-menu.dark ul li>a svg path,.dropdown-menu.dark ul li>a svg polygon,.dropdown-menu.dark ul li label svg path,.dropdown-menu.dark ul li label svg polygon{fill:#778093}.dropdown-menu.dark ul li>a.active,.dropdown-menu.dark ul li label.active{color:#7f889a;background:#393d48}.dropdown-menu.dark ul li>a.active.green,.dropdown-menu.dark ul li label.active.green{background:#B7D968;color:#fff}.dropdown-menu.dark ul li>a.active.green svg path,.dropdown-menu.dark ul li>a.active.green svg polygon,.dropdown-menu.dark ul li label.active.green svg path,.dropdown-menu.dark ul li label.active.green svg polygon{fill:#fff}.dropdown-menu.dark ul li>a.active.accent,.dropdown-menu.dark ul li label.active.accent{background:#F57C00;color:#fff}.dropdown-menu.dark ul li>a.active.accent svg path,.dropdown-menu.dark ul li>a.active.accent svg polygon,.dropdown-menu.dark ul li label.active.accent svg path,.dropdown-menu.dark ul li label.active.accent svg polygon{fill:#fff}.dropdown-menu.dark ul .divider{background:rgba(255,255,255,0.08)}@media screen and (max-width: 420px){.dropdown-menu ul li>a{line-height:32px;padding-left:24px;padding-right:24px}}