:root {
  --first: #f47c7c;
  --second: #ef9f9f;
  --third: #fad4d4;
  --fourth: #fff2f2; 
}
:root {
  --first: #884939;
  --second: #caa653;
  --third: #967248;
  --fourth: #e9e995;
}
:root {
  --first: #f1fafb;
  --second: #a0e4f1;
  --third: #9dc6ff;
  --fourth: #4993fa;
}
:root {
  --first: #defbc2;
  --second: #90d26d;
  --third: #459d72;
  --fourth: #342b2b;
}
:root {
  --first: #f4abc4;
  --first: #edcfd9;
  --first: #ffff;
  --first: hsl(242deg 19% 91%);
  --second: #595b83;
  --third: #333456;
  --fourth: #060930;
}
/* ['#3b5f41', '#66a96b', '#98e19a', '#c5f5c2'] */

h1{
  font-weight:600;
  margin:0;
}
h2{
  font-weight: 500;
  margin:0;
}
h3{
  font-weight: 400;
  margin:0;
}
* {
  font-family: 'Poppins', sans-serif;
}

body {
  background: var(--third);
}
header {
  padding:10px 50px;;
  font-size:20px;
  background-color: var(--first);
  min-height:30px;
}
.user .pic , .product .pic {
  height:100px;
  width:100px;
  border-radius: 50%;
}
.user .name , .product .name{
  font-size: 17px;
  position: absolute;
  bottom:5px;
  text-align: center;
  width:100%;
}
.user .name {
  position:relative;
  white-space: pre;;
}
.product .price {
  position: absolute;
  font-size:17px;
  top:5px;
  width:100%;
  text-align: center;
  /* left:40px; */
  /* color:red; */
}
.user , .product {
  display: inline-block;
  width:200px;
  height:200px;;
  text-align: center;
  cursor: pointer;
  /* padding:20px; */
  margin:10px;
  border-radius:50%;
  position: relative;
  backdrop-filter: contrast(0.5);
  background-size: auto 45%;
  background-position: center;
  background-repeat:no-repeat;
}
.user {
  height: 150px;
  width:150px;
  background:var(--second);
  border-radius:10px;
  text-align: center;;
  padding:10px 25px;
  box-sizing: border-box;
}
#users {
  width: 100%;
  height: 100%;
  min-height: 400px;
  margin: 10px 0;
}
#users , #products {
  border-radius:30px;
  padding: 30px;
  box-sizing: border-box;
  height: calc(100% - 170px);
  display: inline-block;
  justify-content: center;
  background: transparent;
  vertical-align:top;
  color:white;
  /* background-color: #ffd8a9; */
}
#products {
  margin:10px;
  width:calc(70% - 20px);
}
#bill {
  border-radius:30px;
  margin-top:10px;
  background-color: var(--second);
  width:calc(30%);
  padding: 30px;
  box-sizing: border-box;
  position:relative;
}
#products, #bill {
  display: inline-block;
  float:left;
  height:calc(100vh - 80px);
}
body, html, main{
  width:100%;
  margin:0;
  /* height: 100%;; */
}
footer {
  position: absolute;
  bottom:0;
  height:70px;
  width: 100%;
}
#total {
  position:absolute;
  bottom:10px;
  right:10px;
  border-radius:20px;
  padding:20px;
  background:var(--first);
  cursor: pointer;
}
#bill-items{
  position:absolute;
  top:100px;
  left:0;
  width:100%;
}
#bill item{
  background:rgb(255,255,255, 0.2);
  color:white;
  font-size:18px;
  display:block;
  position:relative;
  width:calc(100 - 60px);
  box-sizing: border-box;
  padding:10px;
  height:50px;
  margin:10px 30px;
  border-radius:20px;
}
item span {
  position: absolute;
}
item .bill-item-qt {
  left:20px;
}
.bill-item-qt span  {
  position:absolute;
}
.bill-item-pos {
  left:40px;
}
.bill-item-actual-qt {
  left:20px;
  width:17px;
  text-align: center;
}
item .bill-item-pos , item .bill-item-neg {
  background-color: var(--second);
  padding:0 3px;
  border-radius:50%;
  line-height:18px;
  top:5px;
  cursor:pointer;
}
item .bill-item-product {
  left:90px;
}
item .bill-item-price {
  right:30px;
}
#te-betalen{
  position:absolute;
  left:30px;
  font-size:20px;
  color:white;
  bottom:30px;
}

.log-item {
  font-size:17px;
  padding:10px;
  position:relative;
  color:white;
  margin: 20px 0;
}
.log-item span {
  display:block;
  position:absolute;
}
.log-item-time {
  left:40px;
}
.log-item-event {
  left:250px;
}
.log-item-product {
  left:500px;
}

.log-item-qt {
  left:480px;
}

.log-item-price {
  left:700px;
}
#history-button {    
  position: absolute;
  top: 30px;
  right: 30px;
  width: 22px;
  cursor: pointer;
  border-radius: 14px;
  background-color: var(--first);
  padding: 9px;
}
#firebaseui-auth-container {
  margin-top:10vh;
}

#icon {
  width:300px;
  margin-left:calc(50% - 150px);
  margin-bottom:50px;
  margin-top: 100px;;
}

#logout {
  position: absolute;
  right:30px;
  top:8px;
  cursor: pointer;
  right: 30px;
  width: 22px;
  border-radius: 14px;
  background-color: var(--second);
  padding: 6px;
}
#profile-picture {
  position: absolute;
  top:8px;
  left:8px;
  width:35px;
  height:35px;
  border-radius:50%;
  cursor:pointer;
}
.user {
  backdrop-filter: none;
}

#profile-change {
  color:white;
  padding:20px;
}

article {
  max-width: 700px;
  box-sizing: border-box;
  padding:100px;
  color:white;
}

button {
  background-color: var(--second);
  color:var(--first);
  border:none;
  padding: 6px 13px;
  border-radius: 20px;
  cursor:pointer;
}

.active {
  background-color: var(--first);
  color: var(--fourth)
}