/* DEFAULT COMPONENTS */
.default-autocomplete-input{
	position: relative;
	display: flex;
	flex-direction: column;
}
.default-autocomplete-input .autocomplete-list{
	position: absolute;
	z-index: 9999;
	top: 100%;
	left: 0;
	display: flex;
	flex-direction: column;
	padding: 1.5vh;
	width: calc(100% - 3vh);
	max-height: 20vh;
	overflow-y: scroll;
	background: white;
	border-radius: 5px;
	visibility: hidden;
	opacity: 0;
	box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.01),
		0px 0px 4px rgba(3, 7, 18, 0.02),
		0px 0px 9px rgba(3, 7, 18, 0.04),
		0px 0px 15px rgba(3, 7, 18, 0.05),
		0px 0px 24px rgba(3, 7, 18, 0.06);
}
.default-autocomplete-input .autocomplete-list span{
	padding: 1vh;
}
.default-autocomplete-input input:focus ~ .autocomplete-list{
	visibility: visible;
	opacity: 1;
}
select.default-input,
input.default-input{
	border: 1px solid #CCC;
	border-radius: 5px;
	padding: 1.5vh 5vw;
	background: transparent;
	font-size: 1.8vh;
}
input.default-input:focus{
	outline: none;
	border-color: black;
}
button.default-button{
	background: white;
	color: black;
	border: 1px solid #CCC;
	border-radius: 5px;
	padding: 1.5vh 5vw;
	font-size: 1.8vh;
	font-weight: bold;
}
button.default-button.default-info-button{
	background: darkblue;
	color: white;
	border-color: darkblue;
}
button.default-button.default-success-button{
	background: darkgreen;
	color: white;
	border-color: darkgreen;
}
button.default-button.default-danger-button{
	background: darkred;
	color: white;
	border-color: darkred;
}
button.default-button.default-ternary-button{
	background: rebeccapurple;
	color: white;
	border-color: rebeccapurple;
}
/* DEFAULT COMPONENTS */

/* BOTTOM SHEET */
#cover{
	position: absolute;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: black;
	visibility: hidden;
	opacity: 0;
}
#cover.active{
	opacity: 0.5;
	visibility: visible;
}
bottom-sheet{
	display: flex;
	flex-direction: column;
	position: fixed;
	z-index: 999;
	bottom: 0;
	left: 0;
	background: white;
	padding: 2vh;
	width: calc(100vw - 4vh);
	max-height: 96vh;
	overflow-y: scroll;
	visibility: visible;
	opacity: 0;
	transform: translateY(100vh);
	box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.01),
		0px 0px 4px rgba(3, 7, 18, 0.02),
		0px 0px 9px rgba(3, 7, 18, 0.04),
		0px 0px 15px rgba(3, 7, 18, 0.05),
		0px 0px 24px rgba(3, 7, 18, 0.06);

}
bottom-sheet.active{
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}
bottom-sheet .header{
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #EEE;
	padding-bottom: 2vh;
}
bottom-sheet .header h2{
	font-size: 2vh;
	margin: 0;
}
bottom-sheet .header button{
	margin-left: auto;
	border-color: transparent;
}
bottom-sheet form{
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-top: 2vh;
	gap: 1.5vh;
}
bottom-sheet form .form-group{
	display: flex;
	flex-direction: column;
	gap: 0.8vh;
}
bottom-sheet form .form-group label{
	opacity: .7;
}
bottom-sheet form .form-group input{
	/*width: calc(100% - 10vw);*/
}
/* BOTTOM SHEET */

/* BOTTOM NAVBAR */
bottom-navbar{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: auto;
	padding: 1.5vh 0;
	padding-bottom: 4vh;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	background: white;
	box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.01),
		0px 0px 4px rgba(3, 7, 18, 0.02),
		0px 0px 9px rgba(3, 7, 18, 0.04),
		0px 0px 15px rgba(3, 7, 18, 0.05),
		0px 0px 24px rgba(3, 7, 18, 0.06);
}
bottom-navbar a{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: darkgrey;
	gap: 0.6vh;
}
bottom-navbar a.active{
	color: black;
}
bottom-navbar a span{
	font-size: 1.6vh;
}
/* BOTTOM NAVBAR */

#telegram-root{
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
	background: whitesmoke;
	position: relative;
	padding-bottom: 20vh;
}
#telegram-root .home-header{
	display: flex;
	flex-direction: column;
	padding: 2vh;
	gap: 1vh;
	background: #191919;
	color: white;
}
#telegram-root .home-header img{
	width: 20vw;
}
#telegram-root .home-header h3{
	margin: 0;
	font-weight: 600;
}
#telegram-root .balances-container{
	display: flex;
	flex-direction: column;
	margin: 2vh;
	padding: 2vh;
	gap: 1vh;
	background: white;
	border-radius: 10px;
}
#telegram-root .balances-container h4{
	margin: 0;
	color: grey;
}
#telegram-root .balances-container label{
	margin-top: 2vh;
	font-size: 1.4vh;
	color: darkgrey;
}
#telegram-root .balances-container h2{
	margin: 0;
}
#telegram-root .balances-container hr{
	border: none;
	height: 1px;
	width: 100%;
	background: #EEE;
}
#telegram-root .action-tiles{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 2vh;
	margin: 2vh;
	margin-top: 0;
}
#telegram-root .action-tiles .action-tile{
	display: flex;
	flex-direction: column;
	background: white;
	padding: 2vh;
	border-radius: 10px;
	gap: 1vh;
}
#telegram-root .action-tiles .action-tile i{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6vh;
	height: 6vh;
	font-size: 3vh;
	border-radius: 5px;
	background: #191919;
	color: white;
}
#telegram-root .action-tiles .action-tile small{
	opacity: .7;
}
#telegram-root .action-tiles .action-tile span{
	font-size: 2.5vh;
	font-weight: bolder;
}
#telegram-root .action-tiles .action-tile-info i{
	background: darkblue;
}
#telegram-root .action-tiles .action-tile-success i{
	background: darkgreen;
}
#telegram-root .action-tiles .action-tile-danger i{
	background: darkred;
}
#telegram-root .action-tiles .action-tile-ternary i{
	background: rebeccapurple;
}

#telegram-root header{
	display: flex;
	align-items: center;
	padding: 2vh;
}
#telegram-root header h2{
	margin: 0;
}
#telegram-root header .header-trailing{
	display: flex;
	gap: 1vw;
	margin-left: auto;
}
#telegram-root header .header-trailing button{}

#telegram-root section{
	display: flex;
	flex-direction: column;
	gap: 1vh;
	padding: 2vh;
	padding-top: 0;
}
#telegram-root section .section-filters{
	display: flex;
	flex-direction: column;
	padding: 1vh;
	border-radius: 5px;
	background: white;
	gap: 1vh;
}
#telegram-root section .section-filters .filters-row{
	display: flex;
	align-items: center;
	gap: 4vw;
}
#telegram-root section .section-filters .filters-row input{
	width: calc(100% - 10vw);
}
#telegram-root section .section-filters .filters-row button{
	width: fit-content;
	padding: 1.5vh;
	border: 1px solid #CCC;
	border-radius: 5px;
	background: white;
}
#telegram-root section .section-filters .filters-row button.active{
	background: black;
	color: white;
	border-color: black;
}
#telegram-root section .cards-container{
	display: flex;
	flex-direction: column;
	gap: 1vh;
	margin-top: 2vh;
}
#telegram-root section .cards-container .list-card{
	display: flex;
	flex-direction: column;
	gap: 1vh;
	padding: 1.5vh;
	padding-top: 2vh;
	background: white;
	border-radius: 5px;
}
#telegram-root section .cards-container .list-card .card-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#telegram-root section .cards-container .list-card .card-row h3{
	margin: 0;
	font-size: 1.8vh;
}
#telegram-root section .cards-container .list-card .card-row span{
	font-size: 1.6vh;
	color: grey;
}
#telegram-root section .cards-container .list-card .card-actions{
	display: flex;
	align-items: center;
	gap: 1vh;
}
#telegram-root section .cards-container .list-card .card-actions button{
	width: 100%;
}