body {
  margin: 0;
  width: 100vw;
  height: 100vh;
}

input, select, button {
  background: transparent;
  border: none;
}

input {
  width: 100%;
}

input:focus {
  outline: none;
}

select, button {
  cursor: pointer;
}

/* template specific */
.if[show], .if[hide] {
  display: none;
}

/* flex (extra) */
.flex, .expand {
  display: flex;
}

.grow, .expand > * {
  flex: 1;
}

.shrink {
  flex: 0;
}

.col {
  display: flex;
  flex-direction: column;
}

/* position (extra) */
.rel {
  position: relative;
}

.abs {
  position: absolute;
}

/* center (extra) */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* noselect (extra) */
.noselect {
  user-select: none;
  cursor: grab;
}

/* shortucts (extra) */
.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.gap-3 {
  gap: 3rem;
}

.gap-4 {
  gap: 4rem;
}

.gap-5 {
  gap: 5rem;
}

.gap-6 {
  gap: 6rem;
}

.gap-7 {
  gap: 7rem;
}

.gap-8 {
  gap: 8rem;
}

.gap-9 {
  gap: 9rem;
}

.gap-10 {
  gap: 10rem;
}

.pad-1 {
  padding: 1rem;
}

.pad-2 {
  padding: 2rem;
}

.pad-3 {
  padding: 3rem;
}

.pad-4 {
  padding: 4rem;
}

.pad-5 {
  padding: 5rem;
}

.pad-6 {
  padding: 6rem;
}

.pad-7 {
  padding: 7rem;
}

.pad-8 {
  padding: 8rem;
}

.pad-9 {
  padding: 9rem;
}

.pad-10 {
  padding: 10rem;
}

.rpad-1 {
  padding-right: 1rem;
}

.rpad-2 {
  padding-right: 2rem;
}

.rpad-3 {
  padding-right: 3rem;
}

.rpad-4 {
  padding-right: 4rem;
}

.rpad-5 {
  padding-right: 5rem;
}

.rpad-6 {
  padding-right: 6rem;
}

.rpad-7 {
  padding-right: 7rem;
}

.rpad-8 {
  padding-right: 8rem;
}

.rpad-9 {
  padding-right: 9rem;
}

.rpad-10 {
  padding-right: 10rem;
}

.lpad-1 {
  padding-left: 1rem;
}

.lpad-2 {
  padding-left: 2rem;
}

.lpad-3 {
  padding-left: 3rem;
}

.lpad-4 {
  padding-left: 4rem;
}

.lpad-5 {
  padding-left: 5rem;
}

.lpad-6 {
  padding-left: 6rem;
}

.lpad-7 {
  padding-left: 7rem;
}

.lpad-8 {
  padding-left: 8rem;
}

.lpad-9 {
  padding-left: 9rem;
}

.lpad-10 {
  padding-left: 10rem;
}

.hpad-1 {
  padding-left: 1rem;
}

.hpad-1 {
  padding-right: 1rem;
}

.hpad-2 {
  padding-left: 2rem;
}

.hpad-2 {
  padding-right: 2rem;
}

.hpad-3 {
  padding-left: 3rem;
}

.hpad-3 {
  padding-right: 3rem;
}

.hpad-4 {
  padding-left: 4rem;
}

.hpad-4 {
  padding-right: 4rem;
}

.hpad-5 {
  padding-left: 5rem;
}

.hpad-5 {
  padding-right: 5rem;
}

.hpad-6 {
  padding-left: 6rem;
}

.hpad-6 {
  padding-right: 6rem;
}

.hpad-7 {
  padding-left: 7rem;
}

.hpad-7 {
  padding-right: 7rem;
}

.hpad-8 {
  padding-left: 8rem;
}

.hpad-8 {
  padding-right: 8rem;
}

.hpad-9 {
  padding-left: 9rem;
}

.hpad-9 {
  padding-right: 9rem;
}

.hpad-10 {
  padding-left: 10rem;
}

.hpad-10 {
  padding-right: 10rem;
}

.vpad-1 {
  padding-top: 1rem;
}

.vpad-1 {
  padding-bottom: 1rem;
}

.vpad-2 {
  padding-top: 2rem;
}

.vpad-2 {
  padding-bottom: 2rem;
}

.vpad-3 {
  padding-top: 3rem;
}

.vpad-3 {
  padding-bottom: 3rem;
}

.vpad-4 {
  padding-top: 4rem;
}

.vpad-4 {
  padding-bottom: 4rem;
}

.vpad-5 {
  padding-top: 5rem;
}

.vpad-5 {
  padding-bottom: 5rem;
}

.vpad-6 {
  padding-top: 6rem;
}

.vpad-6 {
  padding-bottom: 6rem;
}

.vpad-7 {
  padding-top: 7rem;
}

.vpad-7 {
  padding-bottom: 7rem;
}

.vpad-8 {
  padding-top: 8rem;
}

.vpad-8 {
  padding-bottom: 8rem;
}

.vpad-9 {
  padding-top: 9rem;
}

.vpad-9 {
  padding-bottom: 9rem;
}

.vpad-10 {
  padding-top: 10rem;
}

.vpad-10 {
  padding-bottom: 10rem;
}

.mar-1 {
  margin: 1rem;
}

.mar-2 {
  margin: 2rem;
}

.mar-3 {
  margin: 3rem;
}

.mar-4 {
  margin: 4rem;
}

.mar-5 {
  margin: 5rem;
}

.mar-6 {
  margin: 6rem;
}

.mar-7 {
  margin: 7rem;
}

.mar-8 {
  margin: 8rem;
}

.mar-9 {
  margin: 9rem;
}

.mar-10 {
  margin: 10rem;
}

.rmar-1 {
  margin-right: 1rem;
}

.rmar-2 {
  margin-right: 2rem;
}

.rmar-3 {
  margin-right: 3rem;
}

.rmar-4 {
  margin-right: 4rem;
}

.rmar-5 {
  margin-right: 5rem;
}

.rmar-6 {
  margin-right: 6rem;
}

.rmar-7 {
  margin-right: 7rem;
}

.rmar-8 {
  margin-right: 8rem;
}

.rmar-9 {
  margin-right: 9rem;
}

.rmar-10 {
  margin-right: 10rem;
}

.lmar-1 {
  margin-left: 1rem;
}

.lmar-2 {
  margin-left: 2rem;
}

.lmar-3 {
  margin-left: 3rem;
}

.lmar-4 {
  margin-left: 4rem;
}

.lmar-5 {
  margin-left: 5rem;
}

.lmar-6 {
  margin-left: 6rem;
}

.lmar-7 {
  margin-left: 7rem;
}

.lmar-8 {
  margin-left: 8rem;
}

.lmar-9 {
  margin-left: 9rem;
}

.lmar-10 {
  margin-left: 10rem;
}

.vmar-1 {
  margin-top: 1rem;
}

.vmar-1 {
  margin-bottom: 1rem;
}

.vmar-2 {
  margin-top: 2rem;
}

.vmar-2 {
  margin-bottom: 2rem;
}

.vmar-3 {
  margin-top: 3rem;
}

.vmar-3 {
  margin-bottom: 3rem;
}

.vmar-4 {
  margin-top: 4rem;
}

.vmar-4 {
  margin-bottom: 4rem;
}

.vmar-5 {
  margin-top: 5rem;
}

.vmar-5 {
  margin-bottom: 5rem;
}

.vmar-6 {
  margin-top: 6rem;
}

.vmar-6 {
  margin-bottom: 6rem;
}

.vmar-7 {
  margin-top: 7rem;
}

.vmar-7 {
  margin-bottom: 7rem;
}

.vmar-8 {
  margin-top: 8rem;
}

.vmar-8 {
  margin-bottom: 8rem;
}

.vmar-9 {
  margin-top: 9rem;
}

.vmar-9 {
  margin-bottom: 9rem;
}

.vmar-10 {
  margin-top: 10rem;
}

.vmar-10 {
  margin-bottom: 10rem;
}

.hmar-1 {
  margin-left: 1rem;
}

.hmar-1 {
  margin-right: 1rem;
}

.hmar-2 {
  margin-left: 2rem;
}

.hmar-2 {
  margin-right: 2rem;
}

.hmar-3 {
  margin-left: 3rem;
}

.hmar-3 {
  margin-right: 3rem;
}

.hmar-4 {
  margin-left: 4rem;
}

.hmar-4 {
  margin-right: 4rem;
}

.hmar-5 {
  margin-left: 5rem;
}

.hmar-5 {
  margin-right: 5rem;
}

.hmar-6 {
  margin-left: 6rem;
}

.hmar-6 {
  margin-right: 6rem;
}

.hmar-7 {
  margin-left: 7rem;
}

.hmar-7 {
  margin-right: 7rem;
}

.hmar-8 {
  margin-left: 8rem;
}

.hmar-8 {
  margin-right: 8rem;
}

.hmar-9 {
  margin-left: 9rem;
}

.hmar-9 {
  margin-right: 9rem;
}

.hmar-10 {
  margin-left: 10rem;
}

.hmar-10 {
  margin-right: 10rem;
}

:root {
  --primary-color: #fee;
  --secondary-color: #000;
  --shadow-color: #433;
  --remove-color: red;
  --highlight-color: #756;
  --schedule-color: #557;
  --stats-color: #462;
}

body {
  background: var(--shadow-color);
}

input {
  accent-color: var(--schedule-color);
}

body, input, select, button {
  color: var(--primary-color);
}

body, input {
  font-size: 24px;
}

input, select, button {
  border-bottom: 1px solid var(--primary-color);
}

.remove {
  color: var(--remove-color);
  cursor: pointer;
  user-select: none;
}

.modal-bg {
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(5px);
}

.modal-container {
  z-index: 100;
}
.modal-container .modal {
  min-width: 30vw;
  background: rgba(0, 0, 0, 0.2156862745);
  color: var(--primary-color);
  padding: 1rem;
  border-radius: 1rem;
}
.modal-container .modal .title {
  font-size: 2rem;
}
.modal-container .modal a {
  color: #ddd;
  text-decoration: none;
}
.modal-container .modal .space:hover {
  filter: blur(0px) !important;
}
.modal-container .spaces:hover .space {
  filter: blur(1px);
}

.tasks {
  overflow-y: scroll;
  overflow-x: hidden;
  margin-left: -0.5rem;
  margin-right: -1rem;
}

.app-name {
  cursor: copy;
}

.task-items .item {
  padding-right: 1rem;
  padding-left: 0.5rem;
  padding-bottom: 0.25rem;
}
.task-items .item:hover {
  background: rgba(0, 0, 0, 0.2274509804);
  border-radius: 5px;
}
.task-items .item:active {
  background: rgba(0, 0, 0, 0.337254902);
}

#task-manager {
  display: flex;
  flex-direction: column;
}

.fill {
  width: 100%;
  height: 100%;
}

#calendar {
  overflow-y: scroll;
  height: 100%;
}
#calendar .schedule {
  background: var(--schedule-color);
  width: 100%;
  top: 0;
  overflow: hidden;
}
#calendar .timeslot {
  height: 2rem;
  align-items: center;
  background: inherit;
}
#calendar .timeslot .name {
  overflow: scroll;
  white-space: nowrap;
  padding-bottom: 0.5rem;
}
#calendar .timeslot .hour-marker {
  display: block;
  width: 100%;
  text-align: right;
  color: var(--secondary-color);
  white-space: nowrap;
}
#calendar .timeslot:not([quarter="0"]) .hour-marker {
  font-size: small;
}
#calendar .timeslot.now {
  background: var(--highlight-color);
}
#calendar .timeslot.dragtask {
  filter: brightness(1.4);
}

#stats {
  height: 0;
}
#stats .sim {
  min-height: calc(100vh - 10rem);
  border: 1px solid var(--primary-color);
  margin-bottom: 5rem;
  background: var(--stats-color);
}
#stats .graph #mermaid {
  margin: auto;
  display: block;
}
#stats .graph #mermaid span {
  color: var(--secondary-color) !important;
}
#stats .graph #mermaid .node rect {
  stroke: var(--primary-color);
  fill: var(--highlight-color);
}
#stats .graph #mermaid .flowchart-link {
  stroke: var(--secondary-color);
}
#stats .graph #mermaid #mermaid_flowchart-pointEnd {
  stroke: var(--secondary-color);
  fill: var(--highlight-color);
}
#stats .graph:empty {
  display: none;
}
#stats #task-graph .graph-items {
  overflow: hidden;
}
#stats #task-graph .lines {
  top: 50%;
  left: 50%;
}
#stats #task-graph .line-count {
  color: var(--secondary-color);
  font-size: smaller;
}
#stats #task-graph .line {
  left: 0;
}
#stats #task-graph .line .line-path {
  stroke-width: 1.25px;
  fill: none;
  marker-end: url(#arrow);
}
#stats #task-graph .line, #stats #task-graph #arrow {
  overflow: visible;
  stroke: var(--secondary-color);
  fill: var(--highlight-color);
}
#stats #task-graph #arrow {
  z-index: 2;
}
#stats #task-graph particle-element {
  transform: translate(-50%, -50%);
}
#stats #task-graph particle-element .name {
  background: var(--highlight-color);
  color: var(--secondary-color);
  border: 1px solid var(--primary-color);
  padding: 0.5rem;
  font-size: smaller;
  z-index: 3;
  white-space: nowrap;
}

/*# sourceMappingURL=styles.css.map */