body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}:root{--color1: #e4572e;--color1-contrast: white;--color2: #17bebb;--color2-contrast: black;--color3: #ffc914;--color3-contrast: black;--color4: #2e282a;--color4-contrast: white;--color5: #76b041;--color5-darker: #59862f;--color5-lighter: #97d062;--color5-contrast: black}body{background-color:var(--color4);color:var(--color4-contrast);font-family:Arial}.transaction-form{margin:0 0 20px;position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.transaction-form--form{flex-grow:1}.transaction-form--cancel{display:flex;align-items:center;justify-content:center;gap:3px;opacity:.5}.transaction-form--cancel:hover,.transaction-form--cancel:focus{color:#fff;background-color:var(--color1)}.transaction-form--input,.transaction-form--submit,.transaction-form--cancel{font-size:1em;padding:4px 7px;outline:none;border:none;border-radius:5px}.transaction-form--submit{margin-left:10px;cursor:pointer}.transaction-form--submit:hover,.transaction-form--submit:focus{color:#fff;background-color:var(--color1)}.transaction-form--input-amount{width:100px}.transaction-form--input-comment{width:200px}.transaction-form .button-selector{display:inline-block}.transaction-form--header{margin:0 0 10px}@media only screen and (max-width: 700px){.transaction-form--input,.transaction-form--submit,.button-selector--option,.transaction-form--cancel{width:100%;font-size:1.6em;margin:5px 0}.transaction-form .button-selector{width:100%;display:flex}.transaction-form{display:flex;flex-direction:row}.transaction-form--cancel{position:relative;margin-top:15px;width:100%}}.transaction-form--submit-validation-error{animation:shake .1s linear 3}@keyframes shake{50%{transform:translate(-10px)}80%{transform:translate(10px)}0%,to{transform:translate(0)}}.button-selector{display:flex;flex-direction:row;align-items:center;justify-items:center}.button-selector--option{cursor:pointer;-webkit-user-select:none;user-select:none}.button-selector--value-selected .button-selector--option-selected{cursor:default}.button-selector--value-selected .button-selector--option{background-color:var(--color5-darker)}.button-selector--value-selected .button-selector--option-selected{background-color:var(--color3)}.button-selector--option{flex-grow:1;text-align:center;margin:3px;padding:4px 9px;background-color:var(--color5);color:var(--color5-contrast);font-family:Helvetica,serif;font-weight:700;border-radius:5px;border:none;font-size:1em}.button-selector--option:hover,.button-selector--option:focus{background-color:var(--color5-lighter)}.button-selector--value-selected .button-selector--option-selected:hover,.button-selector--value-selected .button-selector--option-selected:focus{background-color:var(--color3)}.stats{display:flex;justify-content:space-between}.balance{width:100%;padding:10px;font-size:20px;text-align:center}.balance--person,.balance--amount{font-weight:700}.transaction{width:100%;display:flex;justify-content:space-between;background-color:var(--color2);color:var(--color2-contrast);padding:3px 4px;font-family:monospace}.transaction[data-type=TRANSFER] .transaction--amount{font-style:italic}.transaction[data-type=TRANSFER] .transaction--amount:before{content:"-"}.transaction[data-person=Julian]{background-color:var(--color1);color:var(--color1-contrast)}.transaction[data-person=Benedicte]{background-color:var(--color2);color:var(--color2-contrast)}.transaction--timestamp{opacity:.6;font-size:80%;white-space:nowrap;padding-right:10px}.transaction:nth-child(odd){opacity:.8}.header{width:100%;font-size:28px;padding:5px 20px;background-color:var(--color3);color:var(--color3-contrast);display:flex;justify-content:space-between;position:sticky;top:0;z-index:9999}.header--title{display:flex;align-items:center;gap:3px;flex:1}.header--status{flex-grow:1}.header--loading{text-align:center;display:inline-block;width:100%;font-size:20px;padding:10px;font-weight:700}.header--auth{font-family:monospace;font-size:.7em;display:flex;align-items:center;justify-content:flex-end;flex:1}.header--username{margin-right:3px}.header--logout{cursor:pointer;background:none;outline:none;border:none;font-size:18px;display:flex}.header--logout:hover,.header--logout:active{text-decoration:underline}.main{padding:20px}@media only screen and (max-width: 700px){.header--username{display:none}}.action-button{width:100%;text-align:center;margin:10px 0;padding:4px 9px;background-color:var(--color5);color:var(--color5-contrast);font-family:Helvetica,serif;font-weight:700;border-radius:5px;border:none;font-size:1em}.login{margin:20px auto 0;max-width:350px;background-color:var(--color1);padding:5px 20px 20px;border-radius:10px}.login h3{text-align:center}.login--username,.login--password{width:100%;padding:7px 10px;border-radius:10px;outline:none;border:none;margin-bottom:10px;font-size:1.5em}.login--submit{margin-top:15px;border-radius:10px;width:100%;height:40px;text-transform:uppercase;font-size:1.5em;background-color:var(--color3);color:var(--color3-contrast);border:none;outline:none}.login--submit:hover,.login--submit:focus,.login--submit:active{color:#fff;cursor:pointer}.login--error{color:var(--color1-contrast);padding:0 5px 5px;font-weight:700;text-align:center;width:100%;display:inline-block}