:root {
    --main-app-color: rgb(15,15,15);
    --app-accent-color: hsl(200, 2%, 85%);
    --option-select-color: #EEEEEE;

    --form-max-width: 1200px;
    --form-label-margin: 1rem;
    --form-row-horizontal-gap: 20px;
    --form-checkbox-gap: 7px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-weight: normal; vertical-align: baseline; background: transparent;}

body {font-family: var(--font-system); color: var(--text-color);}

main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}

html {box-sizing: border-box; font-size: 20px; }

*, *:before, *:after {box-sizing: inherit;}

img {max-width: 100%;}

ul {list-style: none;} /* we'll restore bullets as needed for content */

blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 1rem; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

table {border-collapse: separate; border-spacing: 0; text-align: left;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
td img {vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;}

input, select {vertical-align: middle;}

pre {white-space: pre-line;}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}

small {font-size: .8rem;}

strong {font-weight: bold;}

sub, sup {font-size: .8rem; line-height: 0; position: relative;}
sup {top: -0.5rem;}
sub {bottom: -0.25rem;}

pre, code, kbd, samp {font-family: monospace, sans-serif;}

a.button, button, input, select, textarea {margin: 0;}

ins {background-color: var(--highlight-color); color: #000; text-decoration: none;}
mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;}

blockquote {padding: 2rem; border-left: 1px solid #333;}

.clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */



html {
    font-family : -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
    scroll-behavior: smooth;
}

h1 {
    margin-bottom: 1rem;
}

[x-cloak], .hidden { display: none; }

a {
    color: #4183c4;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

svg.smallicon {
    width: 0.9rem;
    height: 0.9rem;
    fill: black;    
    padding-right: 10px;
}

svg.icon {
    width: 1.3rem;
    height: 1.3rem;
    fill: black;    
    padding-right: 10px;
    vertical-align: top;
}

svg.personicon {
    width: 1.1rem;
    height: 1.1rem;
    fill: black;    
    vertical-align: top;
}

svg.bigicon {
    width: 1.7rem;
    height: 1.7rem;
    fill: black;    
    vertical-align: top;
}


button.icon {
    background-color: transparent;
    line-height: 1.3rem;
}

button.icon-only {
    background-color: transparent;
    border: none;
    padding: 0;
}

.buttons > * {
    margin: 5px 10px;
}

.avatar-big {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    margin: 0 10px 0 0;
  }

  .avatar-medium {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin: 0 10px 0 0;
  }


  .avatar-small {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
  }


#at-user-info-dialog {
    position: absolute;
    right: 0px;
    top: 60px;
    width: 320px;
    max-width: 100vw;
    padding: 20px;
    margin: 0px;
    left: unset;
    background-color: white;
    border: 0px none black;
    box-shadow: 0 24px 54px rgba(0, 0, 0, .15), 0 4.5px 13.5px rgba(0, 0, 0, .08);
}

#at-app-list-dialog {
    position: absolute;
    right: unset;
    top: 60px;
    width: 480px;
    max-width: 100vw;
    padding: 20px;
    margin: 0px;
    left: 0px;
    background-color: white;
    border: 0px none black;
    border-radius: 8px;
    box-shadow: 0 24px 54px rgba(0, 0, 0, .15), 0 4.5px 13.5px rgba(0, 0, 0, .08);    
}


#at-app-list-dialog > .app-list {
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 75vh;
}

.app-list > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.6rem;
    height: 96px;
    width: 96px;
    text-align: center;
    padding: 10px 5px;
}

.app-list > a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .15), 0 4.5px 13.5px rgba(0, 0, 0, .08);    
    border-radius: 6px;;
}

.app-list > a > img {
    width: 48px;
    height: 48px;
}

.user-info {
    display: grid;
    grid-template-columns: auto 1fr auto
}

.user-account-details {
    overflow-x: hidden;
    grid-column: 2 / span 2;
}

.user-account-details > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-account-details .user-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000000;
}

.user-account-details .user-email {
    font-size: 0.65rem;
    font-weight: 400;
    color: #000000;
}


.user-info > a:first-of-type {
    grid-column: 3;
    text-align: right;
    font-size: 0.8rem;
    color: #666666;
    margin-bottom: 15px;
}
  
.user-info > div:first-child {
    grid-column: 1 / span 2;
    font-size: 0.8rem;
    color: #666666;
    margin-bottom: 15px;
}


  .avatar {
    width: 2rem;
    height: auto;
    border-radius: 50%;
  }
    
  .logo {
    margin-top: 10px;
    width: auto;
    height: 20px;
  }
  

body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
    height: 100vh;
}

header {
    flex-basis: 100%;
    display: flex;
    height: 52px;
    background-color: rgb(15,15,15);
    gap: 20px;
    padding: 5px 10px;
    align-items: center;
  }

  header > a {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
  }
  
  header > a:first-child {
  }
  
  header > a:first-child svg {
    fill: white;
    width: 1.4rem;
    height: 1.4rem;
  }
  
  header > .user_controls {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin-left: auto;
    height: 100%;
  }
  
  header > .user_controls > a{
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  header > .user_controls > a:hover {
    background-color: rgba(255,255,255,0.2);
  }
  
  header svg {
    fill: white;
    height: 1.2rem;
    width: 1.2rem;
  }  

  nav.main {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: flex-start;
    background-color: rgb(230,230,230);
    color: white;
    width: 10rem;
    flex-basis: 10rem;
  }

  nav.main menu {
    width: 100%;
    display: flex;
    gap: 10px;
    flex-direction: column;
    list-style: none;
    padding: 10px 0px 20px 0px;
    margin: 0;
  }
  
  nav.main menu li:first-child {
    margin-bottom: 5px;
  }
  
  nav.main menu li a {
    display: flex;
    width: 100%;
    padding: 5px 10px;
    color: black;
    text-decoration: none;
    gap: 10px;
    font-size: 0.7rem;
    color: #333333
  }
  
  
  nav.main menu li {
    border-left: 5px solid transparent;
  }

  nav.main menu li.active {
    border-left: 5px solid lightblue;
  }
  
  
  nav.main menu li:hover {
    background-color: #CCCCCC;
  }
  
  nav.main.collapsed menu li:hover a span {
    position: fixed;
  }
  

  nav.main menu li a svg {
    width: 1.0rem;
    height: 1.0rem;
    fill: #333333;    
    vertical-align: top;
  }
  
  nav.main.collapsed {
    flex-basis: 2.6rem !important;
    overflow: hidden;
  }
  
  nav.main.collapsed menu li a span {
    display: none;
  }

  main {
    padding: 30px 60px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    height: calc(100vh - 48px);
  }



.vertical {
    display: flex;
    align-items: center;
}

.filler {
    flex: 1;
}

table {
    width: 100%;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    border-collapse: collapse;
}

table td {
    padding: 10px 10px;
    border-bottom: 1px solid #DEDEDE;
    min-width: 100px;
}

table td.avatar {
    min-width: 60px;
    display: flex;
    justify-content: center;
}


table tr:last-child td {
    border-bottom: 0px none;
}

table thead th {
    padding: 10px 10px;
    text-align: left;
    background-color: rgba(0,0,50,.02);
    border-bottom: 1px solid #DEDEDE;
}

table.review td {
    vertical-align: top;
}

table.review input, table.review select {
    font-size: 1.1rem;
    padding: 2px 2px;
}


.list, table {
    width: 100%;
    border-collapse: collapse; 
    background: white;
}

.item-details {
    width: 100%;
    border-collapse: collapse;     
}

.item-details > tbody > tr > td, .item-details > thead > tr > th {
    padding: 4px 8px;
    text-align: left; 
    border-bottom: 1px dashed #DEDEDE;
    vertical-align: top;
    white-space: nowrap;
}


/*
.list tr:nth-of-type(odd) { 
    background: var(--app-accent-color); 
}
*/

.list > tbody > tr > td, .list > thead > tr > th, td, tbody th {
    padding: 8px 15px;
    text-align: left; 
    border-bottom: 1px solid #AAAAAA;
    vertical-align: top;
}

.list > tbody > tr > td.priority, td.priority {
    white-space:normal;
    width: 100%;
}

.list > tbody > tr.has-detail-row > td, tr.has-detail-row > td {
    border-bottom: 0px none;
}

.list > tbody > tr.group > td, tr.group > td {
    background-color: #EEEEEE;
    font-weight: 500;
}

.list > tbody > tr.detail > td, tr.detail > td {
    font-size: 0.9rem;
    font-style: italic;
    background-color: rgba(0,0,0,0.015);
    padding: 2px 25px;
    white-space: normal;
}

.list > tbody > tr.subcontent > td, tr.subcontent > td {
    padding: 2px 25px;
    white-space: normal;
    background-color: #EDEDED;
}

.list > tbody > tr.summary > td, tr.summary > td {
    border-top: 1px dashed #CCCCCC;
    border-bottom: 1px solid black;
    font-weight: 400;
    background-color: #EDEDED;
    font-size: 13px;
}

td.align-center, th.align-center {
    text-align: center !important;
}

td.align-right, th.align-right {
    text-align: right !important;
}

.list > caption, table > caption {
    caption-side: bottom;
    text-align: right;
    padding: 0.3rem 2rem;
    font-weight: 500;
    background-color: hsl(200, 2%, 85%);/* var */
	background-color: var(--app-accent-color); 
}

table td.nomin {
    min-width:auto;
    padding: 10px 5px !important;
}


/* Form styling starts */

.form-group {
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    border-bottom: 2px inset #DEDEDE;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group > h2 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
}

form {
    max-width: var(--form-max-width);
}

form > *, .form-row > * {
    display: flex;
    flex-direction: column;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: var(--form-row-horizontal-gap); 
}

.btn-group {
    margin-top: var(--form-label-margin);
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
}

td > .btn-group {
    margin-top: unset;
    gap: var(--form-checkbox-gap);
    align-items: baseline;
}

label + .btn-group {
    margin-top: unset;
}

.btn-group > div {
    display: flex;
    flex-direction: row;
    flex-basis: 100%;
    align-items: baseline;
    gap: var(--form-checkbox-gap);
}

.btn-group label {
    margin-top: unset;
}


label {
    margin-top: var(--form-label-margin);
}

.form-row > *.form-row-fill {
    flex: 1;
}


input[type=text], textarea, select, input[type=date] {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

input[type=date] {
    padding: 0.4312rem 1rem;
}

input.search {
    border-radius: 0;
    border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: #e0e1e2;
}


button, input[type=submit] {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    background-color: #e0e1e2;
    border: 1px solid #e0e1e2;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.3);
}

a.button {
    font-size: 1rem;
    padding: 0.4rem 1rem 0.6rem 1rem;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    text-decoration: none;
    color: #333333;
    box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.3);
}

a.button:hover, button:hover, input[type=submit]:hover {
    cursor: pointer;
    border: 1px solid #333333;
}



button.positive {
    background-color: #21ba45;
    color: white;
}

button.negative {
    background-color: lightcoral;
    color: white;
}


button.search {
    border-radius: 0 5px 5px 0;
}

.tabs {
    display: flex;
    flex-direction: row;
    height: 2rem;
    margin: 0 0 -1px 0;
    padding: 0;
    list-style: none;
}

.tabs__item {
    display: inline-block;
    justify-content: center;
    height: 100%;
    min-width: 120px;
    padding: 0 10px;
    margin-right: 2rem;
    vertical-align: middle;
    line-height: 1.8rem;
}

.tabs__item--selected {
    background-color: white;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #666666;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
}

.content {
    background-color: white;
    padding: 2rem;
}

.content > h1 {
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    font-weight: 600;
    margin-top: 0.1rem;
    letter-spacing: 0.11rem;
}

.content > h1 > *:first-child  {
    margin-right: 10px;
}

.tag {
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 0.6rem;
    border: 1px solid black;
    margin-right: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: normal;
}

.tag.vacation {
    background-color: rgba(255, 128 ,0, 0.9);
}

.tag.active {
    background-color: lightgreen    
}

.tag.inactive {
    background-color: rgba(255,0,0, 0.9);    
    color: #DEDEDE;
}

.metrics, .cards {
    display: flex; /* IE Fix */
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}



.metrics__item {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    padding: 10px 5px;
    color: #333333;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.15);
    min-width: 180px;
    min-height: 100px;
    align-self: stretch;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.metrics__item > span {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 500;
    color: #000000;
    flex-basis: 100%;
    align-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metrics__item_double > span {
    font-size: 1.3rem;
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metrics__item_double > span > span {
    font-size: 0.8rem;
    line-height: 1.3rem;
    color: #666666;
    font-weight: 300;
    padding-left: 5px;
}

.metrics__item_bigsmall > span {
    font-size: 1.0rem;
}

.metrics__item_bigsmall > span:first-child {
    font-size: 1.5rem;
}

.metrics__item_bigsmall > span > span {
    font-size: 0.8rem;
    line-height: 1.3rem;
    color: #666666;
    font-weight: 300;
}

.metrics__item.positive > span, .metrics__item > span.positive, td.positive {
    color: green;
}

.metrics__item.negative > span, .metrics__item > span.negative, td.negative {
    color: rgba(255, 0 ,0, 0.9);
}

.metrics__item__chart {
    display: flex;
    flex-direction: column;
    padding: 10px 5px;
    min-width: 400px;
    border-radius: 4px;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.15);
}



.metrics__item__chart > span:first-child, .metrics__item > span:first-child {
    font-size: 0.8rem;
    padding-left: 10px;
    margin-top: -5px;
    display: block;
    color: #666666;
    text-align: left;
    font-weight: normal;
    flex-basis: auto;
}


.cards > * {
    padding: .5rem 1rem;
    display: block;
    border: 1px solid #999999;
    border-radius: 5px;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.15);
}

.year-cell {
    background-color:#21ba45;
}

.done-cell {
    background-color: blue !important;    
}


svg.search {
    border-width: 1px 0 1px 1px;
    border-color: #e0e1e2;
    border-style: solid;
    background-color: white;
    border-radius: 5px 0 0 5px;
    padding: 0.51rem 0.2rem 0.65rem .7rem;
    width: 1.05rem;
    height: 1.05rem;

}

hr {
    border-top: 1px solid rgba(34,36,38,.15);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.content_section, .two_columns > * {
    padding: 1rem 1rem;
    border-radius: .28571429rem;
    box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
    border: 1px solid rgba(34,36,38,.15);
    margin-top: 1.5rem;
}

.cards > * h1 {
    margin: 0.3rem 0 0.2rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #EDEDED;
    font-size: 1.3rem;
}

.horizontal_tree path {
    fill: transparent;
    stroke: rgb(64, 64, 64);
  }
  
.horizontal_tree rect {
    fill: rgba(255, 255, 255, 1);
    stroke: #cccccc;
    stroke-width: 1;
}

.familytree {
    display: flex;
    flex-flow: column;
    width: 100%;
    min-height: 500px;
    overflow-y: show;
    overflow-x: auto;
}

.icon--flipped-vertically {
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1);  
}

.field {
    margin-top: 10px;
}

.field > label {
    display: block;
    margin: 0 0 .29rem 0;
    color: rgba(0,0,0,.87);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: none;
}


label:has(+ input[type=checkbox]) {
    display: inline-block;
    margin-right: 10px;
}

.two_fields > *, .one_field {
    margin-top: 1.5rem;
}

.two_fields {
    display: flex; 
    justify-content: space-between;
}

.two_fields > * {
    flex: 0 50%;
}

.two_fields > *:nth-child(2n) {
    margin-left: 1rem;
}

.two_fields > *:nth-child(2n + 1) {
    margin-right: 1rem;
}

input[type=text], input[type=password], textarea, select {
    width: 100%;
    box-sizing: border-box;
}

textarea {
    min-height: 8rem;
    max-height: 24rem;
    height: 12rem;
}

.person-list {
    margin-top: 1rem;
    margin-bottom: 1rem;
    user-select: none;
    max-height: 600px;
    overflow-y: auto;
}

button[disabled] {
    background-color: #CCCCCC;
}

button.icon-only svg.icon {
    vertical-align: baseline;
}

.controls {
    display: flex;
}

.controls--reverse {
    flex-direction: row-reverse;
}

.controls > * {
    margin-right: 10px;
}

.controls > *:last-child {
    margin-right: 0px;
}

.controls--reverse > *:first-child {
    margin-right: 0px;
}

.controls--reverse > *:last-child {
    margin-right: 10px;
}

.controls__main {
    flex-grow: 1;
}

.controls--reverse > .controls__main {
    text-align: right;
}

.controls__input {
    max-width: 250px;
}

.default__reference > * {
    font-size: 0.9rem;
}

.default__reference > span {
    white-space: nowrap;
    padding-right: 10px;
    font-style: italic;
    color: #333333;
}

.default__reference > input[type=text] {
    min-width: 400px;
    padding: 4px 10px;
    font-size: 0.9rem;
    outline: none;
    border-radius: 5px;
    border: 1px solid #999999;
    background-color: white;
}

/**
Messages begin
**/
.messages {   
    list-style: none;
    padding: 0px;
    margin: 0px;
    position: fixed;
    top: 20px;
    z-index: 1000;
    right: 20px;
    left: 230px;
}

.messages > * {
    display: flex;
    background-color: lightgrey;
    border-radius: 16px;
    padding: 5px 10px;
    box-shadow: 0 4px 7px 0 rgba(34,36,38, 0.15);   
    width: 400px;
    font-weight: 400;
    font-size: 0.9rem;
    margin-top: 10px;
    margin: 10px auto 0;
    transition: transform 1s 0s; 
}

.messages > * > *:first-child {
    flex: 1;
}

.messages > *.success {
    background-color: lightgreen;
}

.messages > *.error {
    background-color: lightcoral;
    color: white;
    
}

.messages > *.error svg {
    fill: white;
}

.messages > *.warning {
    background-color: lightyellow;
}

/**
Messages end
**/

.removed {
    transform: translateY(-25vw);
}

ul.multi-select-list {
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    display: flex; 
    flex-wrap: wrap;
    gap: 10px;
}

ul.multi-select-list-nested {
    margin: 0px 30px; 
}


ul.multi-select-list-vertical {
    flex-direction: column;
}

ul.multi-select-list li {
}

ul.multi-select-list li label {
    padding: 5px 10px;
    display: block;
    background-color: rgba(255, 255, 255, .9);
    border: 2px solid rgba(139, 139, 139, .3);
    color: #AAAAAA;
    border-radius: 25px;
    white-space: nowrap;
    margin: 3px 0px;
    user-select: none;
    transition: all .2s;
    cursor: pointer;
}

ul.multi-select-list li label::before {
    display: inline-block;
    font-weight: 900;
    font-size: 20px;
    content: "\002B";
    transition: transform .3s ease-in-out;
    color: #AAAAAA;
    padding: 0px 5px 0px 0px;
}

ul.multi-select-list li input[type="checkbox"]:checked + label::before {
    content: "\2714";
    transform: rotate(-360deg);
    transition: transform .3s ease-in-out;
    font-size: 16px;
    color: white;
    padding: 4px 6.5px 2px 0px;
}

ul.multi-select-list li input[type="checkbox"]:checked + label {
    border: 2px solid #1bdbf8;
    background-color: #12bbd4;
    color: #fff;
    transition: all .2s;
}

ul.multi-select-list li input[type="checkbox"] {
    position: relative;
    overflow: hidden;
    display: none;
    opacity: 0;
  }

ul.list {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

ul.list li {
    background-color: #EFEFEF;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 14px;
}

.task-editor {
    width: auto !important;
    border-collapse: collapse;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */    
    font-size: 0.9rem;
}

.task-editor input[type="text"], .task-editor textarea {
    width: 100%;
    padding: 5px;
    border: 0px;
    font-size: 0.75rem;
    background-color: transparent;
}

.task-editor button {
    padding: 3px 5px;
    font-size: 0.75rem;
    border-radius: 6px;
}

.task-editor input[type="text"].date {
    width: 120px;
}

table.task-editor > tbody > tr > td,  table.task-editor > tbody > tr > th {
    box-sizing: border-box;
    padding: 0px;
    height: 27px;
}

table.task-editor > tbody > tr > th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    min-width: 160px;
}

table.task-editor > tbody > tr > th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: white;
}

table.task-editor > thead > tr > th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 30;
    background-color: white;
}

table.task-editor thead th {
    height: 80px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: white;
}

table.task-editor thead th.date {
    font-size: 0.7rem;
}

.task-editor tr.invalid td {
    background-color: rgba(255, 0,0 , 0.2);
}


table.task-editor td.included {
    background-color: lightskyblue;
}

table.task-editor td.finished {
    background-color: lightgray
}


table.task-editor td.current {
    background-color: green;
}



@media only screen and (max-width: 1024px) {

    .metrics {
        gap: 10px;
        margin-top: 20px;
    }

    .metrics__item {
        box-sizing: border-box;
        padding: 10px 5px;
        min-width: 120px;
    }

    .messages {
        position: static;
        margin-top: 50px;
    }

    ul.calendar {
        display: block;
        margin-top: 20px;
    }

    ul.calendar li.header, ul.calendar li.calendar-filler {
        display: none;
    }

}

section {
    margin-top: 20px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 1.5px 6.5px rgba(0, 0, 0, .08);    
}

section > h2 {
    font-size: 26px;
    margin-bottom: 10px;
    border-bottom: rgba(0,0,0,0.15) 1px solid;
    display: flex;
    align-items: center;
    gap: 20px;
}

section > h2 > *:first-child {
    flex: 1;
}

section > h2 > .event-person {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-date {
    font-size: 16px;
    color: #666666;
}

section > h3 {
    font-size: 20px;
    color: #666666;
    font-weight: 500;
    font-style: italic;
    margin-top: 20px;
}

section > h4 {
    font-size: 18px;
    color: #666666;
    font-weight: 500;
    font-style: italic;
    margin-top: 10px;
}