@import 'src/fonts/font.css';

:root {
	--main-blue: #005197;
	--main-radius: 8px;
	--main-grey: #2F2F2F;
	--light-blue: #0088CC;
	--dark-blue: #303757;
}

body {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  background-color: var(--body-color);
}

* {transition: 0.3s ease-in-out; font-family: "Montserrat", serif;}
button:focus {outline: none;}
input:focus {outline: none;}
textarea:focus {outline: none;}
ul, li {padding: 0;margin: 0;list-style: none;}

::-webkit-scrollbar {background: rgba(255, 255, 255, 1); width: 7px;, height: 2px;}
::-webkit-scrollbar-thumb {background: #999999; border-radius: 0px;}
::-webkit-scrollbar-track-piece {background: transparent;}

#main-block {
	margin-left: auto;
	margin-right: auto;
	background: transparent;
	text-align: center;
	border: 0px solid transparent;
	width: 100%;
}

#main-header-block {
	width: 100%;
	height: 50px;
	background-color: white;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#main-header-block > div {
	flex-grow: 1;
	padding: 20px;
}

#main-header-block > div:nth-of-type(1) {text-align: left;}
#main-header-block > div:nth-of-type(2) {text-align: right;}
#main-header-block > div:nth-of-type(1) > div {
	font-size: 18pt;
	letter-spacing: 1.5px;
	font-weight: bold;
	user-select: none;
	padding: 4px;
}
#main-header-block > div:nth-of-type(1) > div > a {text-decoration: none; color: var(--main-blue);}
#main-header-block > div:nth-of-type(1):visited {color: var(--main-blue);}
#main-header-block > div:nth-of-type(1):active {color: var(--main-blue);}

#main-search-input {
	background-color: white;
	color: var(--dark-grey);
	padding: 6px;
	width: 90%;
	height: 25px;
	font-size: 14pt;
	letter-spacing: -0.5px;
	border: 2px solid var(--main-blue);
	border-bottom: 2px solid var(--main-blue);
	border-radius: var(--main-radius);
}
#main-search-input:focus {
	border: 2px solid transparent;
	border-bottom: 2px solid var(--main-blue);
	border-radius: 0px;
}

#main-wallet-block {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding: 6px;
	margin-top: 70px;
	background-color: white;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	display: none;
}

#main-wallet-block > div {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	font-size: 14pt;
}
#main-wallet-block > div > span:nth-of-type(1) {
	width: 120px;
	letter-spacing: 0.5px;
	font-weight: bold;
	user-select: none;
}
#main-wallet-block > div > span:nth-of-type(2) {
	width: 100%;
	letter-spacing: 0.5px;
	word-break: break-all;
}
#main-wallet-block > div > span {
	padding: 6px;
	border: 2px solid transparent;
}

#main-transactions-block {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	margin-top: 30px;
	background-color: white;
	display: none;
}

#main-transactions-block > div {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	background-color: white;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	word-break: break-all;
	padding: 6px;
	font-size: 14pt;
}
#main-transactions-block > div > div {padding: 5px; letter-spacing: 1px;}
#main-transactions-block > div > div:nth-of-type(1) {font-size: 15pt;}
#main-transactions-block > div > div:nth-of-type(2) > span {font-size: 14pt;}

#no-transactions-block, #error-block {
	display: none;
	margin-top: 40px;
	font-size: 14pt;
	font-weight: bold;
	letter-spacing: 1px;
}