@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');

.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24
}

*{
	margin:0px;
	padding:0px;
	outline:0px;
}

:root{
	--color_amber: #FFBF00;

}

html{
	display:block;
	font-size:14px;
}

html, body{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}

body {
	font-family: 'Play', sans-serif;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	color:#FFF;
	background:#000000;
}

#bg-image{
	width:500px;
	display: block;
	margin:0px auto;
	transition: all 0.5s ease-in-out;
}

header{
	width: 100%;
	height: 75px;
	top: 0px;
	position: fixed;
	z-index: 1000;
	background-color: #333;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.25);
}

header #title{
	color: var(--color_amber);
	display:block;
	position: absolute;
	right: 2rem;
	top: 10px;
	font-size: 1.5rem;
}

header menu-top{
	position: absolute;
	display: flex;
	top:10px;
	left:2rem;
}

header menu-top div{
	margin-right: 1rem;
}

header menu-top div label{
	display: block;
	margin-bottom: 0.5rem;
}

header menu-top div select{
	background: #000;
	color:#FFF;
	padding:5px;
	width:15rem;
	border:1px solid var(--color_amber);
}

header menu-top div select option{
	background: #000;
}

header a#logout{
	color: #FFF;
	display:block;
	position: absolute;
	right: 2rem;
	top: 50px;
}

header #gbox{
	width: 100%;
    height: 5px;
    background: linear-gradient(45deg, #000000, var(--color_amber));
    background-size: 200% 200%;
    animation: gradientAnimation 5s ease infinite;
    position: absolute;
    bottom: 0px;
    display: none;
}

@keyframes gradientAnimation {
    0% {
        background-position: 200% 200%;
    }
    50% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 200%;
    }
}

main{
	position: absolute;
	top:75px;
	left:0px;
	right:0px;
	min-height:100%;
}

main sidebar{
	display:block;
	position:fixed;
	width:65px;
	height:100%;
	overflow-y:auto;
}

main sidebar menu-side{
	display:block;
	margin-top:50px;
}

main sidebar menu-side a.btn{
	display:block;
	width:50px;
	height:50px;
	cursor:pointer;
	margin:5px 5px 25px 5px;
	border-right:3px solid #333333;
	text-align: center;
}

main sidebar menu-side a.btn span{
	padding-top:0.5rem;
	font-size: 2.5rem;
	color:#FFF;
}

a.btn:hover, a.btn.active{
	border-color:var(--color_amber);
}

main content{
	display:block;
	position:absolute;
	left:65px;
	right:0px;
	margin:10px;
	padding-bottom: 5rem;
}

#bar-static{
	position: fixed;
	top:75px;
	right:10px;
	left:75px;
	background: #1C1C1C;
	padding-top:10px;
	z-index:100;
}

#bar-nonstatic{
	position: relative;
	padding-top: 2rem;
}

/* LOGIN */
form#login{
	opacity: 0;
    transition: all 0.5s ease-in-out;
	transform: translate(-50%, -50%);
	position:absolute;
	top:100px;
	left:50%;
	width:250px;
	border:1px solid var(--color_amber);
	border-radius:15px;
	text-align:center;
	padding:15px;
}

.show-form #bg-image {
  transform: scale(1.2);
  opacity: 0;
}

.show-form #login {
  opacity: 1;
}

form#login input, form#login button{
	width:230px;
	padding:5px;
	margin:5px;
	border:none;
}

#bar-btn{
	display: flex;
	padding: 1rem 1rem 0.5rem 1rem;
	margin:1rem 0rem 2rem 0rem;
	align-items: center;
}

#bar-btn input[type="button"]{
	background:var(--color_amber);
	padding:0.5rem;
	border:none;
	margin-right:1rem;
}

#bar-btn .bar-right{
	margin-left:auto;
	padding:0.5rem 1rem;
	border:1px solid var(--color_amber);
}

#bar-btn .info span span{
	color:var(--color_amber);
	font-size: 1.5rem;
}

input[type="button"]{
	cursor:pointer;
}


/* SERVICE WALLETS */

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
    gap:1rem;
    margin-bottom: 1rem;
}

.flex-item {
    border: 1px solid var(--color_amber);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    width:25rem;
    cursor: pointer;
}

.flex-item.not-active{
	border-color: red;
}

.flex-item:hover{
	background: rgba(255,221,30,0.25);
}

.title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.title span.tenant{
	font-size: 1rem;
	font-style: italic;
}

.address {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    text-decoration: none;
    color:#FFF;
    display: block;
}

.address:hover{
	text-decoration: underline;
}

.item-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.item-row.align-left {
	justify-content: left;
	gap:1rem;
}

.res-energy, .balance-usdt {
    text-align: left;
    margin-right: 2rem;
}

.res-bandwidth, .balance-trx {
    text-align: right;
    margin-left: 2rem;
}

.item-row button{
	background-color: var(--color_amber);
	padding:0.25rem 1rem;
	margin-top: 1rem;
	border: none;
	color: #000;
	float:left;
	cursor: pointer;
}

/* TRANS */

#accounts-list.list{
	width:24%;
	margin-right:1%;
	background:#333;
}

#accounts-list.list ul li{
	list-style-type: none;
	padding:0.5rem;
	cursor:pointer;
}

#accounts-list.list ul li:hover{
	background: var(--color_amber);
	color:#000;
}

#transactions{
	margin-top:-0.75rem;
	display: none;
	width:75%;
}

.flex{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

#transactions li{
	list-style-type: none;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255,221,30,0.25);
}

#transactions li .trans-row{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	margin-bottom:0.5rem;
}

#transactions li .trans-row span{
	margin-right:1rem;
}

span.transID{
	color:#333;
	font-size:0.75rem;
}

span.transDT, span.transArrow{
	color:var(--color_amber);
	font-size:1rem;
}

span.transFROM, span.transTO{
	color:#FFF;
	font-size:1rem;
}

span.transAmount{
	color:var(--color_amber);
	font-size:1.5rem;
	margin-left: auto;
}

/* DASH */

table#balance-snapshot, table#margin-snapshot{
	width:100%;
	border-collapse: collapse;
	border: 3px solid var(--color_amber);
}

table#balance-snapshot td, table#margin-snapshot td{
	padding: 10px;
	text-align:left;
	border:1px dotted var(--color_amber);
}

table#balance-snapshot tr.section-header, table#margin-snapshot tr.section-header{
	color:#000;
	background:var(--color_amber);
	font-weight: bold;
}


table#balance-snapshot td:last-child, table#margin-snapshot td:last-child{
	width:20%;
}



/*OLD
table#table_wallets, table#table_transactions{
	width:100%;
	border-collapse: collapse;
  	border: 3px solid var(--color_amber);
}

table#table_wallets thead, table#table_transactions thead{
	color:#000;
	background:var(--color_amber);
	text-align:center;
}

table#table_wallets td, table#table_transactions td{
	padding: 10px;
	text-align:left;
	border:1px dotted var(--color_amber);
}

table#table_wallets th, table#table_transactions th{
	padding: 10px;
	font-size: 1.25rem;
}


table#table_wallets tbody td a{
	color:#FFF;
}

table#table_wallets tbody tr:nth-child(2n) {
	background: #333;
}

table#table_wallets td:nth-child(1){
	width: 5%;
	text-align: center;
}

table#table_wallets td:nth-child(2){
	width: 12%;
}

table#table_wallets td:nth-child(3){
	width: 20%;
}

table#table_wallets td:nth-child(4), table#table_wallets td:nth-child(5), table#table_wallets td:nth-child(6), table#table_wallets td:nth-child(7), table#table_wallets td:nth-child(8),table#table_wallets td:nth-child(9),table#table_wallets td:nth-child(10),table#table_wallets td:nth-child(11),table#table_wallets td:nth-child(12){
	width: 7%;
}

table#table_wallets tbody td:nth-child(1) span{
	display:inline-block;
	cursor:pointer;
}

table#table_wallets tbody td:nth-child(1) span:hover{
  background:var(--color_amber);
}

table#table_wallets tbody tr[data-res-capacity-marker="adom"] td:nth-child(12) {
	background:rgba(255,0,0,0.5);
}

table#table_wallets tbody td:nth-child(3) span#marker{
	font-size:1.25rem;
	vertical-align:middle;
}

table#table_wallets tbody tr[data-res-capacity-marker="katom"] td:nth-child(12) {
	background:rgba(255,165,0,0.5);
}

table#table_wallets tbody tr[data-res-capacity-marker="yarok"] td:nth-child(12) {
	background:rgba(0,255,0,0.5);
}

table#table_transactions td:nth-child(1) span, table#table_transactions th:nth-child(1) span{
	cursor:pointer;
}

table#table_transactions td:nth-child(1) span.checked::before, table#table_transactions th:nth-child(1) span.checked::before{
	content: 'check_box';
	color:#0F0;
}

table#table_transactions td:nth-child(1) span:not(.checked)::before, table#table_transactions th:nth-child(1) span:not(.checked)::before{
	content: 'check_box_outline_blank';
}

modal{
	display:none;
}

modal div.input-group {
	width:90%;
	margin:0px auto 1rem auto;
}

modal div.input-group label {
	display: block;
	margin-bottom:0.5rem;
}

modal input, modal select{
	width: 100%;
	margin:0px auto;
	padding: 0.5rem;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

modal input:invalid {
	border-color: #ff7b7b;
}

form.full-screen{
	width:100%;
}

form.full-screen fieldset{
	border:1px solid var(--color_amber);
	margin:1rem;
	padding:1rem;
	display: flex;
	flex-wrap: wrap;
}

form.full_screen fieldset legend{
	background:var(--color_amber);
	color:#000;
	padding:0.25rem;
}

form.full_screen fieldset label{
	line-height:2rem;
	margin-right:1rem;
}
form.full_screen input[type="text"], form.full_screen input[type="number"], form.full_screen textarea{
	border: 1px solid var(--color_amber);
	padding:0.5rem;
	width: calc(100% - 1rem - 2px);
}

form.full_screen div.break{
	flex-basis: 100%;
	height:1rem;
}

form.full_screen #btn_wrap{
	text-align:right;
	margin-top:1rem;
}

form.full_screen input[type="button"]{
	width:15rem;
	background:var(--color_amber);
	padding:0.5rem;
	border:none;
}

legend span.btn_del_input{
	vertical-align: middle;
	font-size: 1rem;
	color:#F00;
	cursor:pointer;
}

*/