body {
  font-family:"Helvetica Neue", sans-serif;
  margin:0;
  text-align:center;
}

:root {
  color-scheme: light dark;
  --special-text-color: hsla(60, 100%, 50%, 0.5);
  --border-color: black;
}


@media (prefers-color-scheme: dark) {
  :root {
      --special-text-color: hsla(60, 50%, 70%, 0.75);
      --border-color: white;
  }
}

#root {
  text-align:center;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
}

#loader {
  position:absolute;
  width:20em;
  height:100px;
  top:25%;
  left:50%;
  margin-left:-10em;
  text-align:center;
  white-space: nowrap;
}

table {
  border-collapse: collapse;  
  border-spacing: 0;
  margin:auto;
  min-width:240px;
}

#container {
  margin:auto;
  margin:4vh 4vw;
  display:inline-block;
  text-align:left;
  max-width:calc(100% - 8vw);
}
#header {
  border-bottom:4px solid black;
  position:sticky;
  left:0;
  position:sticky;
  width:100%; 
  left:4vw;
  right:0;
  text-align:left;


  display:flex;
  justify-content:space-between;
}
th {
  position:sticky;
  left:0;
}
tr.sticky td {
  font-weight:bold;
  border:none;
  position:sticky;
  
  position: -webkit-sticky;
  z-index:1;
  top:0;
  background:white;
}

tr:hover td{
  background:#eee
}

tr.sticky td {
  padding-top:2em;
}
td.sticky {
  position:sticky;
  font-weight:bold;
  left:0;
  padding-left:4vw;
  background-color:white;
}
tr.sticky  td.sticky {
  z-index:2;
}


td {
  padding:0 1em 0 0;
  max-width:40%;
}

td:nth-last-child(1) {
  padding:0;
}


td > div {
  border:none;
  border-bottom:1px solid rgba(0,0,0,0.3);
  background:transparent;
  font-size:1em;
  padding:0.25em 0 0.25em;
  /* margin:0.25em 0.5em; */
  padding-right:0.5em;  
  white-space: nowrap;
  overflow:hidden;
  min-width:2em;
  max-width:15em;
  min-height:1.25em;
}

/* .sticky td div {
  border-color: transparent;
  
}
.sticky td div {
  border-color:inherit;
} */

tr:focus-within td div {
  border-bottom:1px solid black;
  color:rgba(0,0,0,0.90)

}

tr:not(:focus-within) td div {
  border-bottom:1px solid rgba(0,0,0,0.1);
  color:rgba(0,0,0,0.78)
}


#title {
  font-size:2em;
  font-weight:500;

}


td div:focus {
  outline: 1px solid Highlight; 
  background:Highlight;
  
  white-space: inherit;
}

#description {
  min-height:2em;
  box-sizing: border-box;
}

#description:hover {

  border: 1px dotted gray;
}
#description:focus {
  outline: 1px solid Highlight; 
  background:Highlight;
  
}

div#create {
  width:54px;
  height:54px;
  background:#DB4221  center / 24px no-repeat url(img/add_white_24dp.png);
  position:sticky;
  bottom:1em;
  left:calc(50% - 27px);
  margin-top:2em;
  border-radius:100%;
  /* box-shadow: 0px 10px 10px rgba(0,0,0,0.1) ; */
}
div#create:hover {
  background-color:rgb(174, 48, 20);
/* box-shadow: 0px 10px 10px rgba(0,0,0,0.1) ; */
}

div#toolbar {
  display:flex;
  justify-content:space-between;
  max-width:100%;
}
div#menu {
  overflow:hidden;
  height:48px;
  width:48px;
  top:4vh;
  right:4vw;
  position:fixed;
  z-index:1000;
}
div#menu:hover,
div.open#menu {
  overflow:initial;
  height:48px;
  width:48px;
  background:white;

}
div.menubutton {
  width:48px;
  height:48px;
  background: white center / 24px no-repeat url(img/more_vert-24px.svg);
  float:right;
  box-sizing:border-box;
  border-radius:100%;
}
div.menubutton:hover {
  background-color:#eee;
}
div.menuitem {
  clear:both;
  width:12em;
  height:48px;
  line-height:48px;
  background: center / contain no-repeat;
  border-bottom:1px solid black;
  background-origin: border-box;
  cursor: default;
  background-color:white;


}
div.menuitem:hover {
background-color:rgba(0,0,0,0.1);
}

.button#source {
  background-image: url(img/post_add-24px.svg);
}