html {line-height: 1.15;-webkit-text-size-adjust: 100%;}body {margin: 0;}main {display: block;}h1 {font-size: 2em;margin: 0.67em 0;}hr {box-sizing: content-box;height: 0;overflow: visible;}pre {font-family: monospace, monospace;font-size: 1em;}a {background-color: transparent;}abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}b, strong {font-weight: bolder;}code, kbd, samp {font-family: monospace, monospace;font-size: 1em;}small {font-size: 80%;}sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sub {bottom: -0.25em;}sup {top: -0.5em;}img {border-style: none;}button, input, optgroup, select, textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;}button, input {overflow: visible;}button, select {text-transform: none;}button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}fieldset {padding: 0.35em 0.75em 0.625em;}legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}progress {vertical-align: baseline;}textarea {overflow: auto;}[type="checkbox"], [type="radio"] {box-sizing: border-box;padding: 0;}[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}details {display: block;}summary {display: list-item;}template {display: none;}[hidden] {display: none;}[v-cloak] {display: none;}

#app{
	flex-grow: 1;
	padding: 70px 40px 0;
}

body{
	/* background-color: #f4f4f4; */
	font-family: 'Montserrat', sans-serif;
  background-image: url('http://localhost/nft-staking-frontend/assets/img/bg.jpg');
  background-size: cover;
}

.parallax {
  /* The image used */
	


  /* Full height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sidebar{
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	width: 400px;
	position: fixed;
    top: 0;
    bottom: 0;

}

.sidebar .top{

	display: flex;
	align-items: center;
	flex-direction: column;
	width: 400px;

}

.sidebar .bottom{

	display: flex;
	align-items: center;
	flex-direction: column;
	width: 400px;
	margin-bottom: 80px;

}

.content{
	display: flex;
	min-height: 100vh;
	padding-left: 400px;
}

.logo-wrapper{
	margin-top: 70px;
	margin-bottom: 70px;
	display: flex;
	align-items: center;
}

.logo-wrapper img{
	margin-right: 24px;
}

.logo-wrapper p{
	margin-bottom: 0;;
}

.nav-btn{
	width: 260px;
    margin-bottom: 20px;
    padding: 20px 12px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	background-color: #1b1b1b;
	border-radius: 23px;
	color: white;
}

.nav-label{
	margin: 0;
	color: inherit;
	font-size: 16px;
	font-weight: 600;
}

.nav-btn.selected{

	background-color: #9EDDFB;
	color: black;

	
}
.nav-btn:hover{

	background-color: #9EDDFB;
	color: black;
	
}

.nav-btn.selected .nav-label{
	color: inherit;
}

.page-title{
	color: white;
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 0;
	margin-top: 0;
}

.stake-overview .overview-title
{
	color: #fff;
	font-size: 33px;
	font-weight: 600;
	font-style: italic;
	text-transform: uppercase;
}

#connect-wallet{
	color: black;
	background-color: #9EDDFB;
	border-radius: 20px;
	text-align: center;
	width: 50%;
	padding: 40px 0;
	border: none;
	font-size: 1.5em;
	font-weight: 600;
}

.notices{
	flex-grow: 1;
}

.notice-col{
	display: flex;

}

.metamask-notice{
	margin: 0 auto;
	display: flex;
    align-items: center;
}

.metamask-notice > div{

color: black;
    background-color: white;
    border-radius: 20px;
    text-align: center;
    padding: 40px;
}


.not-staked, .staked{
	display: flex;
	row-gap: 20px;

}

.stake-overview{
	margin-bottom: 25px;
	row-gap: 30px;
}

.nft-card{
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: black;
	padding: 12px 12px;
	border-radius: 20px;

}

.nft-card img{
	border-radius: 30px;
	width: 100%;
}

.token-id{
	font-size: 20px;
	font-weight: 600;
	color: white;
	margin: 8px 0;
}

.nft-actions{
	/* display: flex;
    row-gap: 8px;
    flex-wrap: wrap;
    justify-content: space-around; */
    margin: 8px 0;
}

.nft-actions button{
	background-color: #9EDDFB;
    border-radius: 50px;
    padding: 8px 26px;
    color: black;
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    margin-bottom: 8px;
	text-transform: uppercase;
}

.nft-col {
    width: 274px;
}

.welcome-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.search-box{
	background-color: white;
	border-radius: 20px;
	padding: 20px;
}

.search-box input{
	border: none;
	outline: none;
}

.invalid, .invalid input{
	background-color: #FF9494;
}

.home.selected svg *
{
	fill: #79BAC0;
}

.selected:not(.home) svg, .selected:not(.home) svg *{
	stroke: #79BAC0;
}

.browse p{
	text-transform: uppercase;
}

.clear-search{
	cursor: pointer;
}

.stake-detail{
	font-size: 12px;
	color: #888888;
	margin: 0;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
}

.highlight{
	color: white !important;
}

.space-between{
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.claimed{
	background-color: #ffecd6;
}

.transactions{
	padding: 20px;
    background-color: white;
    border-radius: 20px;
	row-gap: 8px;

}

.nft-transaction {
    display: flex;
	align-items: center;
}

.transaction-title{
	
	margin: 0 8px;
	font-weight: 600;

}

.tcol-1 {
    width: 200px;
}

.tcol-2 {
    width: 125px;
	text-align: center;
}
.tcol-3 {
    width: 100px;
	text-align: center;
}

.rewards-container{
	padding: 20px;
    background-color: white;
    border-radius: 20px;
	row-gap: 8px;
}

.rewards-container *{
	margin: 0;
}

.reward-totals{
	display: flex;
	justify-content: space-evenly;

}
.reward-totals div{
	display: flex;
	flex-direction: column;
	text-align: center;
}

.rewards-title{
	font-weight: 700;
}

.nft-transaction.heading span {
	font-weight: 600;
}



.zero-ownership {
    text-align: center;
    background-color: #9EDDFB;
    width: 400px;
    margin: 0 auto;
    padding: 20px 40px;
    border-radius: 20px;
    top: calc(50% - 140px);
    position: relative;
}

.zero-ownership .buy-leslies{
	color: black;
	font-weight: 600;
	font-size: 1.5em;
	text-decoration: none;

}