:root {
  --colorMain: #D65C54;
  --colorAnti: #fff;
  --colorAntiHover: #000;
}

html, body {
  margin:0;
  padding:0;
  font-family:Georgia,"Nimbus Roman No9 L",serif;
  color:#000;
  background-color: #fff;
  font-size:1vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.displayNone {
  display:none!important;
}

.select-css {
  height: fit-content;
	display: block;
	font-size: 0.7vw;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .3em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	color: #222;
	outline: none;
}
.select-css option {
	font-weight:normal;
}

.btn {
  font-size: 1vw;
  margin-top: 0.3vw;
  margin-bottom: 0.3vw;
  padding: 0.4em 0.7vw;
  border-radius: 4px;
  background-color: var(--colorMain);
  color: var(--colorAnti);
  border: 1px solid #666;
  display: inline-block;
  font-weight: lighter;
  transition-duration: 0.3s;
  cursor: pointer;
}

.btn:hover {
  color: var(--colorAntiHover);
}

.btnDelete {
  background-color: #ff0000;
  color: var(--colorAnti);
}

.btnDelete:hover {
  color: #000;
}

h1 {
  font-size: 1.8vw;
  text-align: center;
}

header {
  background-color: #000;
  color: #fff;
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 0.6vw; 
}

header a:link {text-decoration: none; color: #fff;}
header a:visited {text-decoration: none; color: #fff}
header a:active {text-decoration: none}
header a:hover {text-decoration: none; color: var(--colorMain)}

header a.logo {
  margin-left: 1vw;
  margin-top: 0.6vw;
  
  text-align: left;
  flex: 1 1 0px;
}

header a.logo svg {
  height:3vw;
}

header a.logo svg .logoBall {
  fill: var(--colorMain);
}

header a.logo svg .logoText {
  fill: #fff;
}

header nav {
  font-size:1.4vw;
  
  text-align: center;
  flex: 1 1 0px;
}

header div {
  flex: 1 1 0px;
  text-align: right;
  margin-right: 1vw;
}
footer {
  margin-top: auto;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
  width: 100%;
  background-color: #000;
  color: #ccc;

  text-align: center;
}

#userLogout, #userLogin {
  margin-top: auto;
}

#userLogin form {
  color: #323232;
  margin: 0 auto;
  margin-bottom: 10vw;
  font-size: 1.5em;
  width: 12vw;
}

#userLogin form input {
  width: 100%;
  margin-top: .5em;
  padding: .5em;
  margin-bottom: 1.6em;
}

#userLogout div {
  text-align: center;
}

#userData {
  width: 95%;
  align-self: center;
}

#userData .projects {
  margin-bottom: 1vw;
  display: flex;
  justify-content: space-between;
}



#userData .dataContainer {
  margin: auto;
  font-size: 0.8vw;
  font-family: Arial, Helvetica, sans-serif;
  border-left:1px solid #333;
  border-right:1px solid #333;
}

#userData .dataContainer .dataCols.header {
  background-color: var(--colorMain);
  color:#fff;
  border-bottom: 1px solid #333;
}

#userData .dataContainer .dataCols.footer {
  background-color: var(--colorMain);
}

#userData .dataContainer .dataCols {
  display: grid;
  grid-template-columns: repeat(7, minmax(100px, 1fr));
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

#userData .dataContainer .dataCols div {
  overflow:hidden;
  text-overflow: ellipsis ;
  white-space: nowrap ;
}

#userData .dataContainer .dataRow a:link {text-decoration:underline dotted; color: #333;}
#userData .dataContainer .dataRow a:visited {text-decoration:underline dotted; color: #333}
#userData .dataContainer .dataRow a:active {text-decoration: none}
#userData .dataContainer .dataRow a:hover {text-decoration: none; color: var(--colorMain)}

#userData .dataContainer .dataRow .dataCols div:nth-child(1) {
  margin-left: 0.2vw;
}

#userData .dataContainer .dataRow .dataCols div:nth-child(7) {
  margin-right: 0.2vw;
}

#userData .dataContainer .dataRow:nth-child(odd) {
  border-top:1px solid #999;
  border-bottom:1px solid #999;
}

#userData .dataContainer .dataRow:hover:not(.header, .footer) {
  background-color: #eee;
}

#userData .dataContainer .dataRow .edit {
  border: 1px solid #000;
  margin-left: 0.2vw;
  margin-right: 0.2vw;
  margin-top: 0.4vw;
  margin-bottom: 1vw;
  padding: 0.5vw;
  display:flex;
}

#userData .dataContainer .dataRow .edit .editCols:not(:first-child) {
  padding-left: 1vw;
  margin-left: 1vw;
  border-left: 1px solid #000;
}

#userData .dataContainer .dataRow .edit .editCols:nth-child(1) label {
  display:inline-block;
  min-width: 5vw;
}

#userData .dataContainer .dataRow .edit .editCols:nth-child(2) label {
  display:inline-block;
  min-width: 3vw;
}

#userData .dataContainer .dataRow .edit .editCols:nth-child(3) label {
  display:inline-block;
  min-width: 4vw;
}

#userData .dataContainer .dataRow .edit .editCols:nth-child(5) {
  display: flex;
  align-items: center;
}

#userData .dataContainer .dataRow .edit .editCols input {
  font-size: 0.6vw;
  padding-left: 0.3vw;
  padding-bottom: 0.1vw;
  padding-top: 0.1vw;
  margin-bottom: 0.3vw;
  width: 10vw;
}

#userData .dataContainer .dataRow .edit .editCols textarea {
  vertical-align: baseline;
  height: 90%;
}

#users {
  width: 95%;
  align-self: center;
}

#users h2 {
  text-align: center;
}

#users .usersSelectorContainer {
  display: flex;
  justify-content: space-between;
}

#users .usersSelectorContainer button {
  padding: 0.5vw;
}

#users .dataContainer {
  border: 1px solid #000;
  width: 40%;
  margin:auto;
  padding: 1vw;
}

#users .dataContainer .dataRow input {
  font-size: 0.8vw;
  padding-left: 0.3vw;
  margin-bottom: 0.3vw;
  width: 10vw;
}

#users .dataContainer .dataRow {
  display: flex;
}

#users .dataContainer .dataRow:hover {
  background-color: #ddd;
}

#users .dataContainer .dataRow:nth-child(odd) {
  margin-top: 0.6vw;
  margin-bottom: 0.6vw;
}

#users .dataContainer .dataRow .dataCol1 {
  width: 30%;
}

#users .dataContainer button {
  margin-top: 1vw;
}

#users .dataContainer .buttonContainer {
  display:flex;
  justify-content: space-between;
  margin-top: 2vw;
}

#project {
  width: 95%;
  align-self: center;
}

#project h2 {
  text-align: center;
}

#project .projectSelectorContainer {
  display: flex;
  justify-content: space-between;
}

#project .projectSelectorContainer button {
  padding: 0.5vw;
}

#project .dataContainer {
  border: 1px solid #000;
  width: 40%;
  margin:auto;
  padding: 1vw;
}

#project .dataContainer .dataRow input, #project .dataContainer .dataRow textarea {
  font-size: 0.8vw;
  padding-left: 0.3vw;
  margin-bottom: 0.3vw;
  width: 10vw;
}

#project .dataContainer hr {
  width: 100%;
  border: 1px solid #ccc;
}

#project .dataContainer .usersContainer  {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}


#project .dataContainer .usersContainer .user {
  white-space: nowrap;
  margin-top: 0.5vw;
  margin-bottom: 0.5vw;
  margin-right: 1vw;
}

#project .dataContainer .usersContainer .user:hover {
  background-color: #ddd;
}

#project .dataContainer h3 {
  text-align: center;
}

#project .dataContainer .dataRow {
  display: flex;
}

#project .dataContainer .dataRow:hover {
  background-color: #ddd;
}

#project .dataContainer .dataRow:nth-child(odd) {
  margin-top: 0.6vw;
  margin-bottom: 0.6vw;
}

#project .dataContainer .dataRow .dataCol1 {
  width: 30%;
}

#project .dataContainer .buttonContainer {
  display:flex;
  justify-content: space-between;
  margin-top: 2vw;
}

#extension {
  width: 95%;
  align-self: center;
}

#extension h2 {
  text-align: center;
}

#extension .row {
  display:flex;
  font-family: 'Courier New', Courier, monospace;
  margin-bottom: 0.3vw;
}

#extension .row .date {
  margin-right: 1vw;
}