/* Main Styles */
/* body {
  height: 100vh;
} */

main {
  /* padding-bottom: 8em; */
  margin: 0;
}

.hide {
  display: none;
}
  
/* Nav styles */
.sidebar {
  width: 100%;
  height: 100%;
  position: absolute;
  background: white;
  z-index: 9999;
}

nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;  
  flex-flow: column wrap;
  background: white;
/*   border: 2px solid gray; */
  border-top: 1px solid #eee;
}

.navbar {
  box-shadow: none;
}

.navbar-header {
  margin: auto;
  left: -28px;
  position: relative;
  font-size: 1.2em;
}
  
.nav-bar {
  display: flex;
  flex-flow: row wrap;  
}

.nav-bar > .navbar__item {
  padding: 1em;
  text-align: center;
  flex: 1;
}

.navbar__item > a {
  text-decoration: none;
}

.spot-logo {
  padding: 1em;
  text-align: center;
  font-size: 3em;
  line-height: 1em;  
}

/* User Account View */
.user-account__view {
  /* padding: 0 1em; */
}

.user-account-info {
  padding-top: 1em;
  /* padding-left: 4em; */
  /* padding-right: 4em; */
}

.user-account-info-details {
  display: flex;
  /* justify-content: center; */
}

.user-account-info-details-picture {
  background-color: orange;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  margin-right: .5em;
}

.user-account-info-balance > div {
  /* text-align: center; */
  font-size: 1.25em;
}

.user-account-info-balance > div:first-child {
  font-weight: 500;
}

.user-account-info-navbar {
  position: fixed;
  right: 0.5em;
  padding-top: 0.5em;
}

.user-account-info-manage-balance-button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 1em;
  font-weight: 600;
}

.user-account-info-navbar-left {
  display: flex;
}

.user-account-info-navbar-left > div {
  padding-right: 1em;
}

/* .user-account-info-navbar-right > div {
  padding-right: .5em;
} */

.user-account-info-navbar-right {
  display: flex;
  margin-left: auto;
}

.user-account-info__container {
  background-color: white;
  position: fixed;
  width: 100%;
  height: 100%;
  /* border-bottom: 1px solid #eee; */
  padding: 1em;
}

.user-account-info-cta-btn {
  padding: 1.5em 0;
}

.user-account-info-links {
  padding-top: 2em;
}

.user-account-info-links > div {
  padding-bottom: .5em;
}

.user-profile-info__component {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 2em;
}

.user-profile-contract-record-money-details {
  width: 150px;
  text-align: right;
  font-weight: 500;
}

.user-profile-contract-record-user-profile-details {
  width: 150px;
}

.user-profile-contract-record-user-profile-details-picture {
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  margin-right: .5em;  
}

.user-profile-contract-record-user-profile-details-picture > img {
  border-radius: 50%;
  width: 50px;
}

.user-profile-info-picture {
  display: flex;
}

.user-profile-info-picture > img {
  border-radius: 50%;
  width: 50px;
}

.user-account-info-navbar-left {
  display: flex;
}

.user-account-info-navbar-left > div {
  padding-right: .5em;
}

/* .user-account-info-navbar-right > div {
  padding-right: .5em;
} */

.user-account-info-navbar-right {
  display: flex;
  margin-left: auto;
}

.user-profile-contract-record {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 0;
}

.search-input-field {
  width: 100%;
}

.search-result-item {
  display: flex;
  padding: 1em 2em;
}

.search-result-item-name {
  margin-right: 1em;
}

.other-profile-detail-info-picture > img {
  border-radius: 50%;
  width: 150px;  
}

.other-profile-detail-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.other-profile-detail-info > div {
  padding: .5em 0;
}

.other-profile-detail-back-button {
  padding: 1em 0 0 1em;
}

.other-profile-detail-info-picture {
  padding-top: 0;
} 

.new-contract-type-option__field {
  display: flex;
}

.contract-detail-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 2em;
  border-bottom: 1px solid lightgray; 
}

.contract-detail-overview-payment__butt on {
  width: 150px;
}

.contract-detail-overview-total {
  width: 150px;
  text-align: right;
}

.contract-detail-payment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 2em;
}

.contract-detail-sign__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 40%;
  margin: 0 auto;
}

.user-info-pending-title, .user-info-active-title, .user-info-completed-title {
  border-bottom: 1px solid black;
}

.user-profile-contract__component {
  position: static;
}

/* New Contract View Styles */

.new-contract-fields > div {
  padding-bottom: 1em;
}

.green-text { color: green; }

.red-text { color: red; }

.new-contract-type-option-lend__button {
  margin-right: .25em;
}

.new-contract__view  {
  padding: 1em 1em 0 1em;
}

.user-profile-contract-record-payment-details-header {
  font-weight: 500;
}

.new-contract-error-fields {
  margin-top: 2em;
}

.is-lend-form-control > div {
  display: inline-block;
}

.is-lend-form-control > div {
  margin-right: 1.5em;
}