body{
  font-family: Helvetica, sans-serif;
  width: 512px;
  margin: auto;
  text-align: center;
  position: relative;
  /* padding-top: 2rem; */
}

@import url(https://fonts.googleapis.com/css?family=Roboto:500);

/* Forms */
input{
  margin: 5px;
  font-size: 16px;
  padding: 3px;
}

select{
  margin: 6px;
  font-size: 16px;
  padding: 4;
  border: 1px solid black;
}

form.newlist{
  background-color: lightgrey;
  padding: 20px;
  padding-top: 25px;
}

form.editusers input[type=color]{
  width: 100px;
  height: 40px;
}

/* Login and register */

form#login{
  background-color: #f1f1f1;
  padding: 10px;
  padding-top: 15px;
  margin: 12px;
}
#login .loginalert{
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  margin: 10px;
  border: 1px solid;
  padding: 5px;
  border-radius: 3px;
}
div.loginalert{
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  margin: 10px;
  border: 1px solid;
  padding: 5px;
  border-radius: 3px;
}

/* collapsible */

button.collapsible {
  cursor: pointer;
  padding: 5px;
  font-size: 16px;
}
button.active, .collapsible:hover {
}
div.content {
  padding: 0 18px;
  margin: 5px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
button {
  cursor: pointer;
  padding: 5px;
  font-size: 16px;
}

h3.collapsible {
  cursor: pointer;
}
h3.active, .collapsible:hover {
}
ul.content {
  display: none;
  overflow: hidden;
}
h3.collapsible {
  cursor: pointer;
}

/* NAV-BAR */

#menu {
	background: #283854;
	color: #FFF;
	height: 45px;
	padding-left: 18px;
	border-radius: 0px;
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
}
#menu li {
	float: left;
	display: inline;
	position: relative;
}
#menu a {
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 16px;
}
#menu a.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}
#menu li a:hover {
	color: #000000;
	background: #F2F2F2;
  cursor: pointer;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 1.6em;
	content: "\2261";
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #444444;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FFFFFF;
	font-size: 16px;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #F2F2F2;
	color: #444444;
}
#menu li.logout{
  background-color: grey;
}
@media screen and (max-width: 800px){
	#menu {position:relative}
	#menu ul {background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:white}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
}

#menu.small {
	background: #283854;
	color: #FFF;
	height: 35px;
	padding-left: 18px;
	border-radius: 0px;
}
#menu.small a {
	display: block;
	line-height: 35px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 16px;
}
#menu.small label {
	line-height: 35px;
	text-align: center;
	position: absolute;
	left: 0px
}

/* List */

ul#list{
  list-style-type: none;
  text-align: left;
  padding-left: 0;
}
#list li{
  margin: 10px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid black;
  position: relative;
}
#list span.right{
  position: absolute;
  right: 10px;
  font-style: italic;
  color: #555555;
}

ul#paylist{
  list-style-type: none;
  text-align: left;
  padding-left: 0;
}
#paylist li{
  margin: 8px;
  padding: 8px;
  font-size: 15px;
  cursor: pointer;
  position: relative;
}
#paylist span.right{
  position: absolute;
  right: 10px;
  font-style: italic;
  color: #555555;
}
#paylist span.payer{
  color: black;
  font-style: bold;
  padding: 3px;
  border-radius: 3px;
}

ul#useraufstellung{
  width: 50%;
  list-style-type: none;
  text-align: left;
  padding-left: 0;
  margin: auto;
}
@media screen and (max-width: 800px) {
	ul#useraufstellung{
    width: 90%;
  }
}
#useraufstellung li{
  margin: 8px;
  padding: 8px;
  font-size: 15px;
  cursor: pointer;
  position: relative;
}
#useraufstellung span.right{
  position: absolute;
  right: 10px;
  font-style: italic;
  color: #555555;
}
#useraufstellung.finishedonly span.right{
  font-style: bold;
  color: black;
}
#useraufstellung span.payer{
  color: black;
  font-style: bold;
  padding: 3px;
  border-radius: 3px;
}
#useraufstellung hr{
  color: gray;
  width: 70%;
  height: 1px;
  border-width: 0px;
  background-color: gray;
}
#paylist hr{
  color: gray;
  width: 90%;
  height: 1px;
  border-width: 0px;
  background-color: gray;
}

ul#listusers{
  width: 50%;
  list-style-type: none;
  text-align: left;
  padding-left: 0;
  margin: auto;
}
#listusers li{
  margin: 8px;
  padding: 4px;
  font-size: 15px;
  cursor: pointer;
  position: relative;
}
#listusers a.right{
  position: absolute;
  right: 10px;
  font-style: italic;
  color: #555555;
}

p.description{
  color: #555555;
  font-style: italic;
}

#paylist span.timestamp{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  background-color: lightgrey;
  border-radius: 3px;
  padding: 3px;
  font-size: 13px;
}
#paylist span.righticon{
  position: absolute;
  right: 30px;
  font-size: 20px;
  color: #555555;
  margin: 0px;
}
#paylist a{
  color: black;
  decoration: none;
}

#itemdetails.content{
  padding: 10px;
}

/* Table */

table.finalcalculation{
  border-collapse: collapse;
  margin: auto;
  margin-top: 25px;
}
.finalcalculation table,th,td{
  border: 1px solid grey;
  text-align: center;
}
.finalcalculation td,th{
  padding: 5px;
}
.finalcalculation caption{
  caption-side:bottom;
  font-style: italic;
  color: grey;
}

/* Google Login */

.login-with-google-btn {
  transition: background-color .3s, box-shadow .3s;

  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);

  color: #757575;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;

  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 12px 11px;
}
.login-with-google-btn:hover{
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
  cursor:pointer;
}
.login-with-google-btn:active {
  background-color: #eeeeee;
}
.login-with-google-btn:focus {
  outline: none;
  box-shadow:
    0 -1px 0 rgba(0, 0, 0, .04),
    0 2px 4px rgba(0, 0, 0, .25),
    0 0 0 3px #c8dafc;
}
.login-with-google-btn:disabled {
  filter: grayscale(100%);
  background-color: #ebebeb;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
  cursor: not-allowed;
}

/* Responsive */

@media screen and (max-width: 500px) {
  body{
    width: auto;
    margin: 0 auto;
  }
}

/* donutchart */

#donutchart{
  position: absolute;
  width: 100%;
}

/* form */
form.editsettings{
  background-color: lightgrey;
  margin: 10px;
  padding: 8px;
}
form.editusers{
  background-color: lightblue;
  margin: 10px;
  padding: 8px;
}
form.editpoz{
  background-color: lightgreen;
  margin: 10px;
  padding: 8px;
}
form.delete{
  background-color: red;
  margin: 10px;
  padding: 18px;
}

/* back button */
a.backbutton{
  color: black;
  margin-top: 14px;
}

a.delete{
  color: black;
  font-style: bold;
}

i.fa{
  margin: 3px;
}

.back{
  background-color: #324057;
}