:root {
  --background: #222;
  --button: #444;
  --buttonActive: #777;
  --buttonHover: #555;
  --headingHover: #303030;
  --cursor: #f00;
  --cursorEdit: #0f0;
  --dim: #777;
  --link: #f5f;
  --firstLevel: #0ff;
  --secondLevel: #fa0;
  --thirdLevel: #88f;
  --text: #eee;
  --timestamp: #aa1;
  --sync: #0f0;
  --conflict: #f00;
  --insync: #ff0
}
* {box-sizing: border-box; margin: 0; padding: 0; outline: none;}
html, input, textarea {font-family: Consolas, monaco, monospace;}
button, input[type="button"]{
  background-color: var(--background);
  border: none;
  color: var(--text);
  cursor: pointer;
}
textarea {overflow-y: hidden;}
body {background-color: var(--background); color: var(--text);}
pre {font-family: inherit; white-space: pre-wrap;}
.orgpage {display: flex; flex-flow: column; height: 100vh; position: relative;}
a {
  -webkit-touch-callout: none;
  color: var(--text);
  height: 100%;
  text-decoration: none;
}
a.orglink {color: var(--link);}
input[type="number"],input[type="text"],textarea {
  background: transparent;
  border: none;
  color: inherit;
  min-width: 0;
  width: 100%;
}
.orgicon {
  background-color: var(--button);
  cursor: pointer;
  flex-shrink: 0;
  height: 48px;
  line-height: 40px;
  padding: 4px 8px;
  position: relative;
  text-align: center;
  user-select: none;
}
.orgicon b {display: none;}
.orgnotice {
  display: block;
  font-style: italic;
  line-height: 200%;
  padding: 32px 0;
  text-align: center;
}
.orgnotify, .orgcalendar {
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 8;
}
.orgnotify .orgmessage {margin-bottom: 3px;}
.orgnotify > div, .orgcalendar > div {
  background-color: var(--background);
  border: 2px solid var(--buttonActive);
  border-radius: 3px;
  box-shadow: 0 16px 16px -16px var(--buttonActive);
  left: 50%;
  line-height: 200%;
  max-height: 100vh;
  overflow-y: auto;
  padding: 2px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
  z-index: 9;
}
.orgnotify input {
  background-color: var(--text);
  color: var(--background);
  height: 32px;
  margin: 2px 0;
  padding: 0 8px;
}
.orgview .orgicon {float: right; margin-bottom: -2px;}
.orgtime .orgicon, .orgrepeat .orgicon, .orgwarn .orgicon{background-color: var(--background);}
.orgnotify .orgicon,
.orgrepeat div .orgicon,
.orgwarn div .orgicon {display: block; margin-bottom: 2px;}
.orgtime, .orgrepeat, .orgwarn {align-items: center; display: flex; padding-right: 2px;}
.orgtime input {
  appearance: none;
  background: var(--button);
  flex: 1;
  height: 25px;
}
.orgtime input::-webkit-slider-thumb{
  appearance: none;
  background: var(--buttonActive);
  height: 40px;
  width: 25px;
}
.orgtime input::-moz-range-thumb{
  background: var(--buttonActive);
  height: 40px;
  width: 25px;
}
.orgrepeat{margin-bottom: 2px;}
.orgrepeat > div, .orgwarn > div{
  flex: 1;
}
.orgrepeat a.orgicon, .orgwarn a.orgicon {
  border: 1px solid var(--dim);
}
.orgrepeat a.orgicon:nth-child(2),
.orgrepeat a.orgicon:nth-child(3){
  line-height: 1;
}
.orgrepeat div div,
.orgwarn div div {display: grid; grid-auto-columns: 1fr; height: 50px; }
.orgwarn div div .orgicon,
.orgrepeat div div .orgicon {height: 23px; line-height: .8;}
.orgnotify .orgicon:last-child {margin-bottom: 0;}
.orgnotify .grid .orgicon,
.orgcalendar .grid .orgicon {margin: 0; width: 100%;}
.orgcalendar button, .orgcalendar input[type="button"], .orgcalendar b {height: 40px;}
.orgcalendar button {background-color: var(--button);}
.orgcalendar input[type="button"]{border: 1px solid var(--dim);}
.orgcalendar .selected{background-color: var(--buttonActive);}
.orgmonth .orgicon:nth-child(3){grid-column-start: 3; grid-column-end: 6;}
.orgdate {color: var(--firstLevel);}
.orgday {color: var(--secondLevel);}
.orgnavbar {background-color: var(--background); width: 100%; flex: 0 0 48px;}
.orgnavbar + .orgnavbar {flex: 0 0 40px;}
.orgnavbar + .orgnavbar .orgicon {height: 40px; line-height: 32px; color: var(--text);}
.orgnavbar:first-child .orgicon {background: none;}
.orgnavbar + *:not(.orgnavbar)
 {flex: 0 1 auto; overflow-y: auto;}
.orgnavbar h1 {font-size: 130%; font-weight: 300;}
.orglist {list-style: none;}
.orglist li {border-left: 8px solid var(--background);}
.orgfiles li {cursor: pointer; height: 48px;}
.orgview li, .orgview > pre {
  cursor: pointer;
  padding: 3px 0 2px 24px;
  -webkit-tap-highlight-color: rgba(128, 128, 128, 0);
}
.orgsearch li {
  align-items: baseline;
  display: flex;
  font-size: 90%;
  line-height: 1.8;
  white-space: pre-wrap;
}
.nocursor > li {border-left-color: var(--button) !important;}
.orglist li:focus {background: var(--headingHover);}
.orgfiles li:first-child {border-top: 1px solid var(--background);}
.orgview li:before {
  color: inherit;
  content: "* ";
  float: left;
  font-size: 120%;
  margin: 0 -8px 0 -16px;
}
.orgnotes > li:first-child{min-height: 24px; padding-left: 8px;}
.orgnotes > li:first-child:before{content: ""}
.orgfiles input {height: 47px; padding: 0 5px 1px;}
.orgfiles span {padding-left: 5px;}
.orglist .orgicon:first-child {background: none; height: 36px;}
.orgview {font-size: 90%;}
.orgview li.inedit {margin-top: -1px;}
.orgview .title {padding: 0 0 3px 0;}
.orgview .body {clear: both; color: var(--text);}
.orgview .body:empty {display: none;}
.orgview textarea {color: var(--text); padding-top: 3px;}
.orgsearch span {cursor: pointer;}
.orgsearchslot {background-color: var(--button); border-bottom: 1px solid var(--background);}
.orgsearchslot:first-child{border-top: 2px solid var(--background);}
.orgsearchslot span{ padding-left: 5px;}
.orgsearch li > span {flex: 1;}
.orgbuffertext{color: var(--dim);}
.orgbuffertext textarea {padding-top: 0;}
.sync0, .sync0 a {color: var(--sync);} /* sync: SYNC */
.sync1, .sync1 a {color: var(--text);} /* sync: MODIFIED */
.sync2, .sync2 a {color: var(--conflict);} /* sync: CONFLICT */
.sync3, .sync3 a {color: var(--insync);} /* sync: INSYNC */
.sync3 span:after{content: "...";}

/* Utils */
.border {
  border-bottom: 1px solid var(--button);
  border-top: 1px solid var(--button);
}
.cf:after {content: "";clear: both; display: table;}
.collapsed > :first-child:after {content: "...";}
.collapsed > :first-child ~ * {
  line-height: 0;
  overflow: hidden;
}
#cursor {border-left-color: var(--cursor)}
.inedit, .nocursor .inedit {border-left-color: var(--cursorEdit) !important;}
.flex {align-items: center; display: flex;}
.flex > *:not(.orgicon) {flex: 1;}
.hidden {display: none;}
.nowrap {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.grid {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(126px,1fr));
}
.grid3{grid-template-columns: 1fr 1fr 1fr;}
.grid7{grid-template-columns: repeat(7, 1fr); grid-gap: 2px;}
.grid8{grid-template-columns: repeat(8, 1fr); grid-gap: 2px;}
.gridrow {display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; grid-gap: 2px;}
.lvl1 {color: var(--firstLevel);}
.lvl2 {color: var(--secondLevel) !important;}
.lvl0 {color: var(--thirdLevel);}
.orgtodo {color: var(--text); font-weight: bold;}
.orgarchive .title, .orgarchive .orgtodo{color: var(--dim);}
.pri {color: #080; font-style: italic;}
.tag {float: right;}
.sch,.dl,.cls,.collapsible, .orgdim {color: var(--dim);}
.ts {color: var(--timestamp);}

@media (max-width: 480px){ /* for tiny screens */
  
}
/* stylelint-disable-next-line unit-whitelist */
@media (min-width: 481px){
  body{
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-gap: 2px;
  }
  .orgicon:hover {background-color: var(--buttonHover);}
  .orgicon b {
    background: var(--background);
    color: var(--text);
    display: block;
    font-size: 12px;
    left: 2px;
    line-height: 1.1;
    padding: 2px;
    position: absolute;
    top: 2px;
  }
  .orgcalendar .orgicon.clock:hover,
  .orgcalendar .orgicon.repeat:hover,
  .orgcalendar .orgicon.warn:hover,
  .orgcalendar .orgicon.delay:hover {
    background-color: var(--background);
    cursor: default;
  }
  .orgtime .orgicon:hover,
  .orgrepeat .orgicon:hover,
  .orgwarn .orgicon:hover{
    background-color: var(--buttonHover);
    cursor: pointer;
  }
  .orgrepeat a.orgicon.selected:hover, .orgwarn a.orgicon.selected:hover{
    background-color: var(--buttonActive);
  }
  .orglist li:not(.inedit):hover,
  .orgsearch li:hover button {background: var(--headingHover);}
  .orgnotify > div:first-child {width: 50%;}
  .orgcalendar > div:first-child {width: 400px;}
  input[type="button"]:hover {background-color: var(--buttonHover);}
  input[type="button"].selected:hover {background-color: var(--buttonActive);}
}