.suggestions.svelte-1jencq2{position:absolute;z-index:100;padding:0;border-radius:0;font-weight:normal}.suggestion_item.svelte-1jencq2{border:none !important;padding:2px;cursor:inherit}.selected.svelte-1jencq2{background-color:lightgrey}.category_info.svelte-1jencq2{font-size:smaller}
.info_button.svelte-9etkjn{width:16px;height:16px;margin-left:0.2rem;-webkit-mask-image:url('static/info.svg');margin-left:-30px;-webkit-mask-size:cover}
.icon.svelte-1rbprql.svelte-1rbprql{background-color:var(--text_two_colour) !important}input[type="checkbox"].svelte-1rbprql+label.svelte-1rbprql::before{left:0px}input[type="checkbox"].svelte-1rbprql:checked+label.svelte-1rbprql::after{left:5px}input[type="checkbox"].svelte-1rbprql+label.svelte-1rbprql{padding-left:30px}.checkbox_container.svelte-1rbprql label.svelte-1rbprql{margin:0 !important}.recur.svelte-1rbprql.svelte-1rbprql{mask-image:url('static/recurring.svg');-webkit-mask-image:url('static/recurring.svg')}.delete.svelte-1rbprql.svelte-1rbprql{mask-image:url('static/delete.svg');-webkit-mask-image:url('static/delete.svg')}.create.svelte-1rbprql.svelte-1rbprql{mask-image:url('static/edit.svg');-webkit-mask-image:url('static/edit.svg')}.amount.negative.svelte-1rbprql.svelte-1rbprql{color:inherit}.estimate_icon.svelte-1rbprql.svelte-1rbprql{width:18px !important;height:18px !important;mask-image:url('static/estimate.svg');-webkit-mask-image:url('static/estimate.svg')}.amount.svelte-1rbprql.svelte-1rbprql{color:var(--good_highlight);;}input[type='number'].svelte-1rbprql.svelte-1rbprql{-moz-appearance:textfield}input.svelte-1rbprql.svelte-1rbprql::-webkit-outer-spin-button,input.svelte-1rbprql.svelte-1rbprql::-webkit-inner-spin-button{-webkit-appearance:none}.pending.svelte-1rbprql div.svelte-1rbprql{color:darkgray !important}.edit.svelte-1rbprql.svelte-1rbprql{position:absolute;right:32px;top:4px;display:none}.die.svelte-1rbprql.svelte-1rbprql{background-color:lightpink}.transaction_item.svelte-1rbprql.svelte-1rbprql{transition:color 0.25s}.checkbox_container.svelte-1rbprql.svelte-1rbprql{display:flex;align-items:center;text-align:left}.checkbox_container.svelte-1rbprql label.svelte-1rbprql{margin:0 5px}.checkbox_container.svelte-1rbprql input.svelte-1rbprql{margin-left:0}#core_fields div.input_container.svelte-1rbprql input.svelte-1rbprql,#core_fields div.input_container.svelte-1rbprql input.svelte-1rbprql{width:calc(100% - 5px)}.input_container.svelte-1rbprql input.svelte-1rbprql{width:100%;border-bottom:1px solid var(--border_colour)}.input_container.svelte-1rbprql div.svelte-1rbprql,.label_field.svelte-1rbprql.svelte-1rbprql{padding:0}.button_container.svelte-1rbprql.svelte-1rbprql{padding:15px 15px 5px 15px;box-sizing:border-box}.button_container.svelte-1rbprql button.svelte-1rbprql{font-size:smaller;margin-bottom:10px}.button_container.svelte-1rbprql button.svelte-1rbprql:first-child{margin-right:10px}.extra_row_two.svelte-1rbprql.svelte-1rbprql{display:flex}.flag_container.svelte-1rbprql.svelte-1rbprql{align-self:center;padding-right:10px;display:inline-block}.input_container.svelte-1rbprql.svelte-1rbprql{padding:0}.extra_detail.svelte-1rbprql.svelte-1rbprql{width:100%;box-sizing:border-box;display:block;padding:5px;background-color:var(--card_bg_colour);border-bottom-left-radius:10px;border-bottom-right-radius:10px;transition:height 1s ease-out;grid-column:1/5}.no_note.svelte-1rbprql.svelte-1rbprql{font-style:italic}.extra_field_heading.svelte-1rbprql.svelte-1rbprql{display:block;color:var(--text_two_colour);margin-bottom:5px !important}.tag_display.svelte-1rbprql.svelte-1rbprql{margin-right:10px}.table_row.estimate.svelte-1rbprql.svelte-1rbprql{color:var(--text_two_colour)}.estimate.svelte-1rbprql .amount.negative.svelte-1rbprql{color:inherit}.button_extra.svelte-1rbprql.svelte-1rbprql{margin-right:auto}.description_cell.svelte-1rbprql.svelte-1rbprql{display:flex;flex-wrap:wrap;gap:6px}.description_cell.svelte-1rbprql .icon.svelte-1rbprql{width:20px;height:20px;align-self:center}.extra_fields_edit.svelte-1rbprql.svelte-1rbprql{display:flex}.extra_detail_fields.svelte-1rbprql>div.svelte-1rbprql{margin-left:8em;margin-right:8em;margin-bottom:15px}.extra_detail_fields.svelte-1rbprql>div.svelte-1rbprql:last-child{margin-bottom:0}.checkbox_container.svelte-1rbprql label.svelte-1rbprql{color:var(--text_colour)}.bad.svelte-1rbprql.svelte-1rbprql{border-bottom:2px solid var(--bad_highlight)}#bad_input.svelte-1rbprql.svelte-1rbprql{box-sizing:border-box;background-color:var(--bad_highlight);color:var(--text_colour);font-weight:normal;text-align:center;padding:2px;border:1px solid var(--bad_highlight);font-size:smaller}.details.svelte-1rbprql div.svelte-1rbprql{background-color:var(--card_bg_colour)}.details.svelte-1rbprql div.svelte-1rbprql:first-child{border-top-left-radius:5px}.details.svelte-1rbprql div.svelte-1rbprql:last-child{border-top-right-radius:5px}.table_row.details.svelte-1rbprql.svelte-1rbprql:hover{border-bottom-left-radius:0;border-bottom-right-radius:0}@media screen and (max-width: 32rem){.table .transaction_item.svelte-1rbprql.svelte-1rbprql{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;margin-bottom:10px;padding:5px;box-sizing:border-box}.extra_detail_fields.svelte-1rbprql textarea.svelte-1rbprql{margin-bottom:10px}.extra_field_heading.svelte-1rbprql.svelte-1rbprql{margin:5px 0 0 0 !important}.description_cell.svelte-1rbprql.svelte-1rbprql{text-align:left}.table .transaction_item.svelte-1rbprql.svelte-1rbprql:hover{border-radius:5px}.table .transaction_item.details.svelte-1rbprql.svelte-1rbprql{background-color:var(--card_bg_colour);padding-bottom:0;margin-bottom:0}.table .extra_detail_fields.svelte-1rbprql>div.svelte-1rbprql{margin:0 5px 10px 5px}.transaction_item.details.svelte-1rbprql div.svelte-1rbprql{background-color:unset}.transaction_item.svelte-1rbprql div.svelte-1rbprql:first-child{grid-row:2;text-align:left}.transaction_item.svelte-1rbprql div.svelte-1rbprql:nth-child(3){text-align:right !important}.icon.svelte-1rbprql.svelte-1rbprql{padding:0 1px !important}.table .transaction_item.svelte-1rbprql div.svelte-1rbprql{padding:0 5px}.transaction_item.svelte-1rbprql div.svelte-1rbprql:nth-child(3){grid-column:2;grid-row:2}.transaction_item.editing.svelte-1rbprql>div.svelte-1rbprql::before{text-align:left;color:var(--text_two_colour);position:relative;width:100%;display:block}.transaction_item.editing.svelte-1rbprql>div.svelte-1rbprql:nth-child(3)::before{content:'Category';font-size:16px}.transaction_item.editing.svelte-1rbprql select.svelte-1rbprql{height:unset}.transaction_item.editing.svelte-1rbprql>div.svelte-1rbprql:nth-child(1)::before{content:'Date'}.transaction_item.editing.svelte-1rbprql>div.svelte-1rbprql:nth-child(2)::before{content:'Description'}.transaction_item.editing.svelte-1rbprql>div.svelte-1rbprql:nth-child(4)::before{content:'Amount'}}
li.svelte-b6zech::marker{display:none}.popup_menu.svelte-b6zech{right:0;top:30px;-webkit-transform:translate(calc(-100% + 24px), 0);position:relative;border-radius:5px;border:1px solid var(--border_colour);background-color:var(--background_color);display:table;box-shadow:0 0px 10px 2px var(--shadow_colour);padding:5px}li.svelte-b6zech:hover{background-color:var(--card_bg_colour)}li.svelte-b6zech{display:inline-block;white-space:pre;padding:5px 20px;width:calc(100% - 40px)}ul.svelte-b6zech{list-style-type:none;padding:0;margin:0}
#no_transaction.svelte-152ber3{width:100%;font-style:italic;color:grey;text-align:center;grid-column:1/5;box-sizing:border-box}#transaction_header.svelte-152ber3{margin-top:0}#transaction_header.svelte-152ber3:hover{border-radius:0;background-color:inherit}.sorted.svelte-152ber3{text-decoration:underline}.table.svelte-152ber3{grid-template-columns:minmax(10%, 8em) 1.5fr 1fr minmax(10%, 8em)}@media screen and (max-width: 32rem){#transaction_header.svelte-152ber3{display:none}.table.svelte-152ber3{min-width:0}}.loading_container.svelte-152ber3{grid-column:1 / 5;padding:5px;margin-top:5px;width:unset;height:unset;position:unset;color:rgba(0,0,0,0)}
#date_ui.svelte-1n8r62n,#month_display.svelte-1n8r62n{display:inline-block;margin-right:5px}@media screen and (max-width: 32rem){#date_ui.svelte-1n8r62n{text-align:center;width:100%}}
.summary_item.svelte-vxs0ht{position:relative;display:inline-block;padding:min(1.5vh, 20px);border-radius:10px;background-color:var(--card_bg_colour);--gradient-colour:rgba(31,239,87,0.5);--last-gradient-colour:var(--card_bg_colour);--gradient-alt-colour:rgba(31,239,87,0.5);--last-gradient-alt-colour:var(--card_bg_colour);--gradient-position-x:70%;--gradient-position-y:30%;--gradient-alt-position-x:30%;--gradient-alt-position-y:50%}.summary_item.gradient_dynamic.svelte-vxs0ht{background:radial-gradient(circle farthest-corner  at var(--gradient-position-x) var(--gradient-position-y), transparent, var(--gradient-colour) 80%),
            radial-gradient(circle farthest-corner  at var(--gradient-alt-position-x) var(--gradient-alt-position-y), rgba(255,255,255,0.2), var(--gradient-alt-colour) 100%)}.summary_item.gradient_bad.svelte-vxs0ht{background:radial-gradient(circle farthest-corner  at var(--gradient-position-x) var(--gradient-position-y), rgba(238, 19, 19, 0.5) 15%, transparent ),
            radial-gradient(circle farthest-corner  at var(--gradient-alt-position-x) var(--gradient-alt-position-y), rgba(196, 51, 196, 0.5) 30%, rgba(255,255,255,0.1))}.summary_item.gradient_good.svelte-vxs0ht{background:radial-gradient(circle farthest-corner  at var(--gradient-position-x) var(--gradient-position-y), rgba(51, 191, 196, 0.5) 15%, transparent ),
            radial-gradient(circle farthest-corner at var(--gradient-alt-position-x) var(--gradient-alt-position-y), rgba(61, 196, 51, 0.5) 30%, rgba(255,255,255,0.1))}.no_click.svelte-vxs0ht{cursor:initial}.number_display.svelte-vxs0ht{font-size:2.3vw}.item_name.svelte-vxs0ht,.number_display.svelte-vxs0ht{z-index:100;position:relative}.item_name.svelte-vxs0ht{margin-bottom:10px}.colour_transition.svelte-vxs0ht{background:radial-gradient(at 70% 30%, var(--last-gradient-colour) 20%, transparent),
            radial-gradient(at 30% 50%, rgba(232, 166, 33, 0.6) 30%, rgba(255,255,255,0.2));border-radius:inherit;position:absolute;top:0;left:0}@media screen and (max-width: 1000px){.number_display.svelte-vxs0ht{font-size:4vw}}@media screen and (max-width: 32rem){.summary_item.svelte-vxs0ht{display:flex}.item_name.svelte-vxs0ht{margin-bottom:0;align-self:center}.number_display.svelte-vxs0ht{margin-left:auto;font-size:8vw}}
.category_details.svelte-1qa4c4{font-size:14px;color:var(--text_two_colour)}.category_colour.svelte-1qa4c4{align-self:baseline;margin-top:2px}
.category_summary_item.svelte-bw7n8p{cursor:pointer;display:contents;padding:5px}.no_click.svelte-bw7n8p{cursor:initial;background-color:initial !important}.icon.svelte-bw7n8p{margin-left:auto;mask-image:url('static/triangle.svg');-webkit-mask-image:url('static/triangle.svg');mask-size:75%;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:75%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.icon.svelte-bw7n8p{background-color:var(--bad_highlight);transform:rotate(180deg)}.number_display.svelte-bw7n8p{display:flex}
#comparison_box.svelte-1skt0a2{margin-top:min(1.5vw, 25px);display:grid;grid-template-columns:repeat(2, auto) min-content;column-gap:5px;position:relative}
#category_summary.svelte-1drsx4r{display:grid;flex-direction:column;grid-template-columns:1fr 1fr;column-gap:20px;grid-template-rows:auto minmax(200px, 1fr) 1fr;grid-row:3 /4;grid-column:2 /4;min-height:0}#pie_container.svelte-1drsx4r{grid-row:2 /3;min-width:0;position:relative}#percent_container.svelte-1drsx4r{position:absolute;top:0;width:100%;text-align:center;height:100%;display:flex;justify-content:center;flex-direction:column;pointer-events:none}#curr_percent.svelte-1drsx4r{font-size:min(4vw, 35px)}.category_container.svelte-1drsx4r{grid-row:2 /4;overflow-y:auto;grid-template-columns:repeat(auto-fill,minmax(140px, 1fr));grid-template-rows:min-content}h1.svelte-1drsx4r{grid-column:1 / 3}#curr_cat.svelte-1drsx4r{text-overflow:ellipsis;overflow:hidden;width:75%;margin:0 auto;white-space:nowrap}@media(max-height: 50em) and (max-width: 87em){.category_container.svelte-1drsx4r{grid-column:1 /3}#spending_comparison.svelte-1drsx4r,#pie_container.svelte-1drsx4r{display:none}}@media(max-height: 50rem){#spending_comparison.svelte-1drsx4r{display:none}}@media screen and (max-width: 32rem){#category_summary.svelte-1drsx4r{grid-column:1;grid-row:initial}.category_container.svelte-1drsx4r{grid-column:1 /3}#spending_comparison.svelte-1drsx4r,#pie_container.svelte-1drsx4r{display:none}}
#login_dialog.svelte-1tq1ruz{background:var(--background_color);border-radius:10px;grid-column:2;grid-row:2}input.svelte-1tq1ruz{width:100% !important;margin-bottom:24px !important}
.colour_picker_dialog.svelte-1swjo0c.svelte-1swjo0c{position:absolute;width:150px;z-index:100;top:-150px}input[type='range'].svelte-1swjo0c.svelte-1swjo0c{margin-left:10px;width:calc(100% - 20px);border:none}.hex_and_preview.svelte-1swjo0c.svelte-1swjo0c{margin-bottom:10px;display:flex}.rgb.svelte-1swjo0c div.svelte-1swjo0c{display:flex;border:none}.button_container.svelte-1swjo0c.svelte-1swjo0c{border:none}input[name='hex_input'].svelte-1swjo0c.svelte-1swjo0c{width:100px !important}.colour_preview.svelte-1swjo0c.svelte-1swjo0c{flex:1;display:inline-block;margin-left:5px;border:none;width:16px}.colour_picker_dialog.svelte-1swjo0c .rgb.svelte-1swjo0c{border:none}
.checkbox_container.svelte-5bwjw.svelte-5bwjw.svelte-5bwjw{display:flex}.checkbox_container.svelte-5bwjw input.svelte-5bwjw.svelte-5bwjw{margin:0 auto}:is(input, select).error.svelte-5bwjw.svelte-5bwjw.svelte-5bwjw{border-color:var(--bad_highlight) !important}.btn_container.svelte-5bwjw.svelte-5bwjw.svelte-5bwjw{display:flex;align-items:center}.btn_container.svelte-5bwjw div.svelte-5bwjw.svelte-5bwjw{width:16px;height:16px}.btn_container.svelte-5bwjw div.svelte-5bwjw.svelte-5bwjw:first-of-type{margin-left:0}.colour_block.svelte-5bwjw.svelte-5bwjw.svelte-5bwjw{width:100%;height:100%;border:none;color:rgba(0,0,0,0)}.error_block.svelte-5bwjw details.svelte-5bwjw.svelte-5bwjw,.error_block.svelte-5bwjw.svelte-5bwjw.svelte-5bwjw{grid-column:1/-1;margin-top:0;padding-top:0;color:var(--bad_highlight);font-size:14px}.colourHack.svelte-5bwjw.svelte-5bwjw.svelte-5bwjw{position:relative}.colour_block.editing.svelte-5bwjw.svelte-5bwjw.svelte-5bwjw{margin-left:0}.colour_block.editing.svelte-5bwjw div.svelte-5bwjw.svelte-5bwjw{-webkit-mask-image:url('static/edit.svg');background-color:var(--text_two_colour);width:calc(100% - 16px) !important;-webkit-mask-position-x:right;height:18px}#date.svelte-5bwjw.svelte-5bwjw.svelte-5bwjw{width:unset}@media screen and (max-width: 45rem){.table_row.svelte-5bwjw.svelte-5bwjw.svelte-5bwjw{margin-bottom:5px;display:block !important;padding:5px;box-sizing:border-box}.table_row.svelte-5bwjw div.svelte-5bwjw.svelte-5bwjw{position:relative}.btn_container.svelte-5bwjw div.svelte-5bwjw.svelte-5bwjw:first-of-type{margin-left:auto !important}.btn_container.svelte-5bwjw div.svelte-5bwjw.svelte-5bwjw{width:20px !important;height:20px !important}.table_row.svelte-5bwjw.svelte-5bwjw.svelte-5bwjw:hover{border-radius:5px}div[data-mobile-title].svelte-5bwjw.svelte-5bwjw.svelte-5bwjw{padding-left:65%;text-align:left}.checkbox_container.svelte-5bwjw input[type="checkbox"].svelte-5bwjw+label.svelte-5bwjw::before{left:0}.checkbox_container.svelte-5bwjw input[type="checkbox"].svelte-5bwjw:checked+label.svelte-5bwjw::after{left:5px}.table_row.svelte-5bwjw.svelte-5bwjw.svelte-5bwjw{position:relative;width:100%;display:contents}div[data-mobile-title].svelte-5bwjw.svelte-5bwjw.svelte-5bwjw::before{content:attr(data-mobile-title);text-align:left;position:absolute;left:0;color:var(--text_two_colour);width:50%}}
.table.svelte-gkayym.svelte-gkayym{margin-top:10px}.insert_row.svelte-gkayym button.svelte-gkayym{width:auto}.no_entry.svelte-gkayym.svelte-gkayym{width:100%;font-style:italic;color:grey;text-align:center;grid-column:1 / -1;box-sizing:border-box}.mobile_show.svelte-gkayym.svelte-gkayym{display:none}.mobile_show.svelte-gkayym .icon_btn.expanded.svelte-gkayym{-webkit-mask-image:url('static/circle-close.svg')}@media screen and (max-width: 45rem){.mobile_hide.svelte-gkayym.svelte-gkayym{display:none !important}.mobile_show.svelte-gkayym.svelte-gkayym{display:flex;align-items:center;cursor:pointer;color:var(--brand_background_colour)}.mobile_show.svelte-gkayym .icon_btn.svelte-gkayym{background-color:var(--brand_background_colour) !important;-webkit-mask-image:url('static/circle-expand.svg');width:20px;height:20px;mask-size:contain;cursor:pointer;-webkit-mask-repeat:no-repeat;opacity:1;margin:0 5px 0 0}.table.svelte-gkayym.svelte-gkayym{display:block}.table_header.svelte-gkayym.svelte-gkayym{display:none !important}}
.dialog.svelte-1x04876{max-width:700px}
.summary_item.svelte-rkoin4{display:inline-block;cursor:pointer;padding:0 5px 5px 5px}.summary_item.svelte-rkoin4:hover{background-color:var(--alt_row_colour)}.no_click.svelte-rkoin4{cursor:initial;background-color:initial !important}.number_display.svelte-rkoin4{font-size:30px}.item_name.svelte-rkoin4{font-size:14px}.number_display.negative.svelte-rkoin4{color:var(--bad_highlight)}.number_display.negative.reverse.svelte-rkoin4{color:var(--good_highlight)}.number_display.reverse.svelte-rkoin4{color:var(--bad_highlight)}
#forecast_summary.svelte-1a4blxt{padding-bottom:10px;margin-right:0;grid-column:2 /4;display:grid;grid-template-rows:auto auto;grid-template-columns:repeat(2, auto)}h1.svelte-1a4blxt{grid-column:1 /3}#second_summary.svelte-1a4blxt{grid-column:2 /3;justify-self:end}@media screen and (max-width: 32rem){#forecast_summary.svelte-1a4blxt{grid-column:1;grid-row:4}}
#error_details.svelte-1wkb5f5.svelte-1wkb5f5.svelte-1wkb5f5{width:100%;max-height:150px;resize:none;margin-bottom:10px;box-sizing:border-box}pre.svelte-1wkb5f5.svelte-1wkb5f5.svelte-1wkb5f5{overflow-y:auto;color:var(--text_colour)}pre.svelte-1wkb5f5.svelte-1wkb5f5.svelte-1wkb5f5,details.svelte-1wkb5f5.svelte-1wkb5f5.svelte-1wkb5f5{margin-bottom:20px}.checkbox_container.svelte-1wkb5f5.svelte-1wkb5f5.svelte-1wkb5f5{text-align:left;margin-bottom:20px}input[type="checkbox"].svelte-1wkb5f5.svelte-1wkb5f5.svelte-1wkb5f5{top:0;position:absolute}input[type="checkbox"].svelte-1wkb5f5+label.svelte-1wkb5f5.svelte-1wkb5f5{padding-left:30px}.checkbox_container.svelte-1wkb5f5 input[type="checkbox"].svelte-1wkb5f5+label.svelte-1wkb5f5::before{left:0 !important}.checkbox_container.svelte-1wkb5f5 input[type="checkbox"].svelte-1wkb5f5:checked+label.svelte-1wkb5f5::after{left:5px !important}
.teacher_box.svelte-2sl2s1{grid-row:3;grid-column:3;height:auto;padding:min(1.5vw, 20px)}.lesson_title.svelte-2sl2s1{font-size:larger;padding-bottom:10px;font-weight:bold}.button_container.svelte-2sl2s1{margin-top:15px}.modal.svelte-2sl2s1{transition:background-color 0.5s, clip-path 0.25s;display:grid;grid-template:repeat(3, 1fr) / repeat(3, 1fr);align-items:end;box-sizing:border-box;padding:min(1.5vw, 20px)}.teacher_box .checkbox_container{text-align:left}.teacher_box input[type="checkbox"] + label{padding-left:30px}.teacher_box .checkbox_container input[type="checkbox"] + label::before{left:0 !important}.teacher_box .checkbox_container input[type="checkbox"]:checked + label::after{left:5px !important}#mobile_detect.svelte-2sl2s1{display:none;font-size:1px}@media screen and (max-width: 32rem){.teacher_box.svelte-2sl2s1{position:absolute;width:100%;bottom:0;left:0;box-sizing:border-box;margin:0 min(1.5vw, 20px)}.modal.svelte-2sl2s1{display:block}#mobile_detect.svelte-2sl2s1{font-size:2px !important}}
.progress_text.svelte-1yxpg0t{margin-top:2px;text-align:center;font-size:14px;position:relative}.category_info.svelte-1yxpg0t{width:100%}.amount_status.svelte-1yxpg0t{margin-left:auto;color:var(--good_highlight)}.amount_status.negative.svelte-1yxpg0t{color:var(--bad_highlight)}.category_budget_progress_actual.negative.svelte-1yxpg0t{background-color:var(--bad_highlight)}.category_budget_progress.svelte-1yxpg0t{width:100%;height:1px;margin-top:5px;background-color:var(--border_colour)}.category_budget_slice.svelte-1yxpg0t,.category_budget_progress_actual.svelte-1yxpg0t{height:4px;background-color:var(--text_two_colour);position:relative;top:-2px;border-radius:10px}.category_name.svelte-1yxpg0t{display:flex;align-items:center}.category_budget_slice.svelte-1yxpg0t{background-color:var(--brand_text_colour);top:0 !important}.actual_name.svelte-1yxpg0t{text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;width:calc(45%)}
#category_budget_summary.svelte-415qta{grid-column:1 / 2;grid-row:2 / 4}@media screen and (max-width: 32rem){#category_budget_summary.svelte-415qta{grid-column:1;grid-row:initial}}
.filter_gummy.svelte-qugsw7.svelte-qugsw7{background-color:var(--brand_background_colour);display:inline-block;border-radius:100px;padding:0px 18px;color:var(--brand_text_colour);animation:slidein 0.1s;transform-origin:left;height:34px;display:flex;align-items:center}.filter_gummy.svelte-qugsw7.svelte-qugsw7:hover{background-color:var(--brand_hover_background_colour)}.filter_gummy.inactive.svelte-qugsw7.svelte-qugsw7:hover{background-color:var(--inactive_hover_background_colour)}.filter_gummy.removable.svelte-qugsw7.svelte-qugsw7{padding-right:0}.filter_gummy.removable.svelte-qugsw7 .delete_filter.svelte-qugsw7,.filter_gummy.removable.editing.svelte-qugsw7 .delete_filter.svelte-qugsw7{background-image:url('static/remove.svg');background-repeat:no-repeat;width:24px;height:100%;margin-left:auto;background-position:right;margin-right:10px;background-size:75%}.filter_gummy.inactive.svelte-qugsw7.svelte-qugsw7{background-color:inherit;border:1px solid var(--border_colour);color:var(--text_colour);box-sizing:border-box;animation:none}select.svelte-qugsw7.svelte-qugsw7,input.svelte-qugsw7.svelte-qugsw7{width:auto;font-size:16px;height:auto;color:var(--filter_colour);max-width:200px;margin-left:10px}option.svelte-qugsw7.svelte-qugsw7{background-color:initial;color:initial}#amount_filter.svelte-qugsw7.svelte-qugsw7{width:75px}.bool_filter.svelte-qugsw7.svelte-qugsw7{cursor:pointer}.number_select.svelte-qugsw7.svelte-qugsw7{margin-right:10px}.divider.svelte-qugsw7.svelte-qugsw7{margin:0 5px}.inactive.svelte-qugsw7 .filter_name.svelte-qugsw7,.editing.svelte-qugsw7 .filter_name.svelte-qugsw7{text-transform:capitalize}@media screen and (max-width: 32rem){div.svelte-qugsw7.svelte-qugsw7:last-of-type{margin-right:0}}@keyframes svelte-qugsw7-scroll_in{from{width:0}to{width:100%}}
#filter_bar.svelte-1x2mnin{display:flex;width:100%;flex-wrap:wrap;flex:1;gap:10px}.more_button.svelte-1x2mnin{display:inline-block;align-self:center;cursor:pointer}@keyframes svelte-1x2mnin-slidein{from{transform:scaleX(0)}to{transform:scaleX(1)}}@media screen and (max-width: 32rem){#filter_bar.svelte-1x2mnin{justify-content:center}}
#quick_add.svelte-ytnxgp{display:grid;grid-template-rows:auto 1fr auto}.mobile_header.svelte-ytnxgp{display:flex;position:relative}#quick_content.svelte-ytnxgp{margin:10px}#quick_add.svelte-ytnxgp .transaction_item{display:block}#quick_add.svelte-ytnxgp .extra_detail_fields div{margin:0}#quick_add.svelte-ytnxgp .details div,#quick_add.svelte-ytnxgp .extra_detail{background-color:var(--background_color)}#quick_add.svelte-ytnxgp .extra_detail .button_container {position:absolute;bottom:0;width:calc(100% - 15px)}#quick_add.svelte-ytnxgp textarea{height:1em;box-sizing:content-box;width:calc(100% - 30px)}#quick_add.svelte-ytnxgp .transaction_item > div::before{color:var(--text_two_colour);float:left;font-weight:normal;margin-bottom:5px}#quick_add.svelte-ytnxgp .text-right input{text-align:left}#quick_add.svelte-ytnxgp #category{text-align:left}#quick_add.svelte-ytnxgp .table_row:hover{background-color:unset}#transaction_created.svelte-ytnxgp{color:var(--brand_background_colour);position:absolute;bottom:24px}#transaction_created.svelte-ytnxgp::before{-webkit-mask-image:url('static/check.svg');background-color:var(--brand_background_colour);content:'';width:20px;height:20px;position:relative;display:inline-block;-webkit-mask-size:cover;-webkit-mask-position-y:4px;-webkit-mask-repeat:no-repeat;margin-right:5px}
#loading.svelte-1tfv5mj.svelte-1tfv5mj,#login_actual_colour.svelte-1tfv5mj.svelte-1tfv5mj{background-color:var(--background_color);background-size:cover;z-index:1000}#app_title.svelte-1tfv5mj.svelte-1tfv5mj{font-size:20px;opacity:87%;margin-bottom:0.3em;display:flex}#header_container.svelte-1tfv5mj.svelte-1tfv5mj{display:flex;grid-column-start:1;grid-column-end:3}#header_right.svelte-1tfv5mj.svelte-1tfv5mj{align-self:center;margin-left:auto;margin-right:25px;display:flex}#table_container.svelte-1tfv5mj.svelte-1tfv5mj,#widget_container.svelte-1tfv5mj.svelte-1tfv5mj{grid-row:3}#widget_container.svelte-1tfv5mj.svelte-1tfv5mj{display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:auto auto 1fr;row-gap:min(1.5vw, 20px);column-gap:min(1.5vw, 20px);min-height:0}#filter_and_button_row.svelte-1tfv5mj.svelte-1tfv5mj{grid-column:1 / 3;grid-row:2;display:flex}#table_container.svelte-1tfv5mj.svelte-1tfv5mj{overflow-y:auto;position:relative}#app_container.svelte-1tfv5mj.svelte-1tfv5mj{display:grid;width:100%;height:100%;padding:min(1.5vw, 20px);padding-bottom:0;box-sizing:border-box;grid-template-columns:0.95fr 1.05fr;grid-template-rows:auto auto 1fr;column-gap:min(1.5vw, 20px);row-gap:min(1.5vw, 15px)}#app_title.svelte-1tfv5mj.svelte-1tfv5mj::before{background-image:var(--logo);width:24px;content:'';margin-right:5px;background-repeat:no-repeat;background-position-y:center}#logout_btn.svelte-1tfv5mj.svelte-1tfv5mj,#setting_btn.svelte-1tfv5mj.svelte-1tfv5mj{background-color:var(--text_two_colour);mask-image:url('static/settings.svg');-webkit-mask-image:url('static/settings.svg');width:24px;height:24px;margin-left:20px;cursor:pointer}#help_btn.svelte-1tfv5mj.svelte-1tfv5mj{width:24px;height:24px;margin-left:20px;cursor:pointer}#help_btn.svelte-1tfv5mj.svelte-1tfv5mj::before{mask-image:url('static/help.svg');-webkit-mask-image:url('static/help.svg');background-color:var(--text_two_colour);content:'';width:24px;height:24px;position:absolute}#logout_btn.svelte-1tfv5mj.svelte-1tfv5mj{mask-image:url('static/logout.svg');-webkit-mask-image:url('static/logout.svg')}#mobile_right.svelte-1tfv5mj.svelte-1tfv5mj,.menu.svelte-1tfv5mj.svelte-1tfv5mj,.title.svelte-1tfv5mj.svelte-1tfv5mj,.mobile_header.svelte-1tfv5mj.svelte-1tfv5mj{display:none}@media screen and (max-width: 1000px), print{#app_container.svelte-1tfv5mj.svelte-1tfv5mj{grid-template-columns:auto;grid-template-rows:repeat(4, auto) max-content;position:relative;height:auto;column-gap:0}#table_container.svelte-1tfv5mj.svelte-1tfv5mj{grid-row:5}#filter_and_button_row.svelte-1tfv5mj.svelte-1tfv5mj{position:sticky;top:10px;background-color:var(--background_color);z-index:100}.sticky_hack.svelte-1tfv5mj.svelte-1tfv5mj{width:100%;position:sticky;z-index:99;top:0;height:20px;grid-column:1 / 3;grid-row:2;background-color:var(--background_color)}#sticky_hack2.svelte-1tfv5mj.svelte-1tfv5mj{top:34px}}@media screen and (max-width: 32rem){#mobile_add_btn.svelte-1tfv5mj.svelte-1tfv5mj{display:flex;justify-content:center;margin:20px}#close_menu.svelte-1tfv5mj.svelte-1tfv5mj{padding:10px;cursor:pointer}.header_btn.svelte-1tfv5mj.svelte-1tfv5mj{-webkit-mask-image:url('static/plus.svg')}#header_container.svelte-1tfv5mj.svelte-1tfv5mj{margin-top:45px}#header_left.svelte-1tfv5mj.svelte-1tfv5mj{width:100%}.mobile_header.svelte-1tfv5mj.svelte-1tfv5mj{display:flex;position:fixed;top:0;left:0;width:100%;box-sizing:border-box}#filter_and_button_row.svelte-1tfv5mj button.svelte-1tfv5mj,#header_right.svelte-1tfv5mj.svelte-1tfv5mj,#app_title.svelte-1tfv5mj.svelte-1tfv5mj{display:none}#mobile_right.svelte-1tfv5mj.svelte-1tfv5mj{margin-left:auto;display:flex;gap:10px}.menu.svelte-1tfv5mj.svelte-1tfv5mj,.title.svelte-1tfv5mj.svelte-1tfv5mj{display:block}#logout_btn.svelte-1tfv5mj.svelte-1tfv5mj{margin-left:10px}#widget_container.svelte-1tfv5mj.svelte-1tfv5mj{grid-template-columns:1fr}.sticky_hack.svelte-1tfv5mj.svelte-1tfv5mj,#sticky_hack2.svelte-1tfv5mj.svelte-1tfv5mj,#header_container.svelte-1tfv5mj.svelte-1tfv5mj,#filter_and_button_row.svelte-1tfv5mj.svelte-1tfv5mj{grid-column:1}.menu_title.svelte-1tfv5mj.svelte-1tfv5mj{align-self:unset;font-size:20px !important;background-size:20px;padding-left:34px !important;background-position-x:10px;padding:10px;padding-left:10px;background-color:var(--background_color);margin:5px min(3vw, 30px) 50px 10px !important}}
body {
    font-family: 'Karla', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    font-size: 16px;
}

/* * { 
    min-width: 0;
    min-height: 0;
} */

input {
    font-size: 16px;
}

.invisible {
    visibility: hidden;
}

html, body {
    height: 100%;
    /*background: linear-gradient(lightskyblue 25%, rgb(75, 175, 215));*/
    background-color: var(--background_color);
    color: var(--text_colour);
}

h1 {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: min(15px, 1.6vh);
    margin-top: 0;
}


.widget_no_data {
    text-align: center;
    padding: 10px 0;
    font-size: smaller;
    font-style: italic;
    justify-self: center;
    width: calc(100% - min(3vw, 40px));
    grid-column: 1 /3;
    position: absolute;
    top: 50%;
}

input[type="checkbox"] + label::before {
    width: 20px;
    height: 20px;
    border-radius: 1px;
    border: 1px solid var(--border_colour);
    background-color: var(--input_background_colour);
    content: '';
    position: absolute;
    top: -3px;
    left: 77px;
}

.checkbox_container label {
    width: 100%;
}

.column_centre,
.checkbox_container { 
    text-align: center;
}

.checkbox_container input[type="checkbox"] + label::before {
    left: calc(50% - 10px);
}

.table_row .button {
    width: 16px;
    height: 16px;
}

.table_row input {
    height: initial;
}


input[type="checkbox"][disabled]:checked + label::before {
    background-color: var(--brand_background_colour) !important;
    opacity: 0.5;
}

input[type="checkbox"]:disabled + label::before {
    background-color: var(--input-checkbox-disabled) !important;
}

input[type="checkbox"]:disabled + label::after {
    color: var(--text_two_colour) !important;
}

input[type="checkbox"][disabled]:checked +label::after {
    color: var(--background_color) !important;
}

input[type="checkbox"]:checked + label::before {
    background-color: var(--brand_background_colour);
}

input[type="checkbox"] + label:hover::before {
    background-color: var(--button_hover_colour);
}

input[type="checkbox"]:checked + label:hover::before {
    background-color: var(--input-checkbox-checked-hover);
}

input[type="checkbox"]:checked + label::after {
    content: '✓';
    position: absolute;
    color: var(--brand_text_colour);
    top: -4px;
    left: 82px;
}

.checkbox_container input[type="checkbox"]:checked + label::after {
    left: calc(50% - 5px);
}

input[type="checkbox"] + label {
    position: relative;
    padding-left: 90px;
}

.setting_item input[type="checkbox"] + label {
    padding-left: 185px;
}

input[type="checkbox"] {
    opacity: 0;
    visibility: collapse;
    position: absolute;
}

/* Global table styles */

@font-face {
    font-family: 'Karla';
    src: url('static/karla.woff2') format('woff2');
    font-weight: normal;
    font-style: normal, bold;
}

@media (prefers-color-scheme: light) {
    body {
        --background_color: #FFFFFF;
        --card_bg_colour: rgba(0, 0, 0, 0.02);
        --card_bg_colour2: rgba(0,0,0,0.04);
        --border_colour: rgba(0, 0, 0, 0.302);

        --input_background_colour: #0000000D; 
        --input_border_colour: rgba(0,0,0,0.30);

        --tooltip_background: #199C57FF ;

        --text_colour: rgba(0, 0, 0, 0.871);
        --text_two_colour: rgba(0, 0, 0, 0.6);
        --brand_text_colour: #FFFFFFFF;
    
        --bad_highlight: #F44336FF;
        --good_highlight: #43A047FF;
        --neutral_highlight: #646464;/* base0 */
    
        --button_hover_colour:#199C57FF;
        --button_alt_hover_colour: rgb(234, 234, 234);
    
        --setting-pref-colour: var(--button_hover_colour);
        --settings-input-colour: #0000000d;
        --settings-input-border: var(--text_two_colour);
        
        --input-checkbox-selected: var(--filter_bg_colour);
        --input-checkbox-disabled: var(--progress_bar_colour);
        --input-checkbox-hover: #147e46;
        --input-checkbox-checked-hover: #147D46FF;

        --progress_bar_alt: #646464FF;
        --brand_background_colour: #009245;
        --brand_hover_background_colour: #147D46FF; 

        --inactive_hover_background_colour: #CCCCCCFF;

        --shadow_colour: #0000001A;

        --carda: rgb(250, 250, 250);
        --cardb: rgb(245, 245, 245);

        --logo: url('static/l_light.svg');
    }

}

@media (prefers-color-scheme: dark) {
    body {
        --background_color: #121212FF;
        --card_bg_colour: #FFFFFF05;
        --card_bg_colour2: #FFFFFF10;
        --border_colour: #FFFFFF4D;

        --input_background_colour: #FFFFFF0D; 
        --input_border_colour: rgba(0,0,0,0.30);

        --tooltip_background: #21804DFF ;

        --text_colour: #FFFFFFDE;
        --text_two_colour: #FFFFFF99;
        --brand_text_colour: #FFFFFFFF;
    
        --bad_highlight: #F65B50FF;
        --good_highlight: #56A159FF;
        --neutral_highlight: #646464;/* base0 */
    
        --button_hover_colour:#21804DFF;
        --button_alt_hover_colour: rgb(234, 234, 234);
    
        --setting-pref-colour: var(--button_hover_colour);
        --settings-input-colour: #0000000d;
        --settings-input-border: var(--text_two_colour);
        
        --input-checkbox-selected: var(--filter_bg_colour);
        --input-checkbox-disabled: var(--progress_bar_colour);
        --input-checkbox-hover: rgb(20,126,70);
        --input-checkbox-checked-hover:  #1C9154FF;

        --progress_bar_alt: #A2A2A2FF;
        --brand_background_colour: #238C54;
        --brand_hover_background_colour: #1C9154FF; 

        --inactive_hover_background_colour: #2A2A2AFF;

        --shadow_colour: #0000001A;

        --carda: rgb(5, 5, 5);
        --cardb: rgb(10, 10, 10);

        --logo: url('static/l_dark.svg');
    }
}

body.dark {
    --background_color: #121212FF;
    --card_bg_colour: #FFFFFF05;
    --card_bg_colour2: #FFFFFF10;
    --border_colour: #FFFFFF4D;

    --input_background_colour: #FFFFFF0D; 
    --input_border_colour: rgba(0,0,0,0.30);

    --tooltip_background: #21804DFF ;

    --text_colour: #FFFFFFDE;
    --text_two_colour: #FFFFFF99;
    --brand_text_colour: #FFFFFFFF;

    --bad_highlight: #F65B50FF;
    --good_highlight: #56A159FF;
    --neutral_highlight: #646464;/* base0 */

    --button_hover_colour:#21804DFF;
    --button_alt_hover_colour: rgb(234, 234, 234);

    --setting-pref-colour: var(--button_hover_colour);
    --settings-input-colour: #0000000d;
    --settings-input-border: var(--text_two_colour);
    
    --input-checkbox-selected: var(--filter_bg_colour);
    --input-checkbox-disabled: var(--progress_bar_colour);
    --input-checkbox-hover: rgb(20,126,70);
    --input-checkbox-checked-hover:  #1C9154FF;

    --progress_bar_alt: #A2A2A2FF;
    --brand_background_colour: #238C54;
    --brand_hover_background_colour: #1C9154FF; 

    --inactive_hover_background_colour: #2A2A2AFF;

    --shadow_colour: #0000001A;

    --carda: rgb(5, 5, 5);
    --cardb: rgb(10, 10, 10);

    --logo: url('static/l_dark.svg');
}

body.light {
    --background_color: #FFFFFF;
    --card_bg_colour: #00000005;
    --card_bg_colour2: rgba(0,0,0,0.04);
    --border_colour: #0000004D;

    --input_background_colour: #0000000D; 
    --input_border_colour: rgba(0,0,0,0.30);

    --tooltip_background: #199C57FF ;

    --text_colour: #000000DE;
    --text_two_colour: #00000099;
    --brand_text_colour: #FFFFFFFF;

    --bad_highlight: #F44336FF;
    --good_highlight: #43A047FF;
    --neutral_highlight: #646464;/* base0 */

    --button_hover_colour: #199C57FF;
    --button_alt_hover_colour: rgb(234, 234, 234);

    --setting-pref-colour: var(--button_hover_colour);
    --settings-input-colour: #0000000d;
    --settings-input-border: var(--text_two_colour);
    
    --input-checkbox-selected: var(--filter_bg_colour);
    --input-checkbox-disabled: var(--progress_bar_colour);
    --input-checkbox-hover: rgb(20,126,70);
    --input-checkbox-checked-hover: #147D46FF;

    --progress_bar_alt: #646464FF;
    --brand_background_colour: #009245;
    --brand_hover_background_colour: #147D46FF; 

    --inactive_hover_background_colour: #CCCCCCFF;
    --shadow_colour: #0000001A;

    --carda: rgb(250, 250, 250);
    --cardb: rgb(245, 245, 245);

    --logo: url('static/l_light.svg');
}

body.classic {
    --background_color: #C2ECFF;
    --card_bg_colour:#F4FDED;
    --card_bg_colour2: rgba(0,0,0,0.04);
    --alt_row_colour: rgba(0,0,0,0.05);
    --border_colour: #65C819; /* base1 */
    --input_border_colour: #65C819;
    --progress_bar_colour: var(--input_border_colour);
    --progress_bar_active_colour: var(--input_border_colour);

    --tooltip_background: linear-gradient(135deg, #F2EDE3 ,90%, #D8C9AB);
    
    --text_colour: #002b36; /* base03 */
    --text_colour_full: black;
    --text_two_colour: #002b36;
    --brand_text_colour: #FFFFFFFF;

    --bad_highlight: #D12623; /* red */
    --good_highlight: #499112;  /* cyan */
    --neutral_highlight: #646464;/* base0 */

    --button_hover_colour:rgb(234, 234, 234);
    --button_alt_hover_colour: rgb(234, 234, 234);

    --filter_bg_colour: #F2EDE3;
    --filter_colour: black;

    --setting-pref-colour: var(--border_colour);
    --settings-input-colour: var(--card_bg_colour);
    --settings-input-border: var(--text_two_colour);

    --input-checkbox-selected: var(--good_highlight);
    --input-checkbox-hover: rgb(20,126,70);

    --progress_bar_alt: #646464FF;
    --brand_background_colour: #009245E6;
    --shadow_colour: #0000001A;

    --carda: rgb(250, 250, 250);
    --cardb: rgb(245, 245, 245);

    --logo: url('static/l_light.svg');
}

select, input, option {
    color: var(--text_colour);
    background-color: var(--background_color);
    font-size: 16px;
}

@supports (-webkit-touch-callout: none) {
    select, input, option {
        -webkit-appearance: none;
    }
}

.month_title {
    font-weight: bold;
    font-size: 40px;
}

p {
    line-height: 1.5em;
}

.icon {
    width: 20px;
    height: 20px;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.icon_btn {
    width: 24px;
    height: 24px;
    mask-size: contain;
    cursor: pointer;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position-y: center;
}

img.button {
    width: 24px;
    height: 24px;
    margin-left: 12px;
    opacity: 0.6;
    cursor: pointer;
}

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.table_row.pending div {
    color: darkgray !important;
}

.table_row:not(.table_header, .error):hover > div {
    background-color: var(--card_bg_colour);
    border-radius: 0;
}


.table_row:hover div:not(.colour_block):first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.table_row:hover div:not(.colour_block):last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.flex-05 {
    flex: 1;
    min-width: 5%;
}

.fix-100 {
    width: 100px;
}

.flex-1 {
    flex: 1;
    min-width: 10%;
}

.flex-2 {
    flex: 2;
    min-width: 20%;
}

.flex-3 {
    flex: 3;
    min-width: 30%;
}

.table_row {
    position: relative;
    width: 100%;
    display: contents;
}

.table_row > div {
    padding: 5px 5px;
    margin-top: 5px;
    word-break: break-word;
}

.table {
    display: grid;
    min-height: 0;
}

.table_header div {
    min-height: auto;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 14px;
    color: var(--text_two_colour);
    background-color: var(--background_color);
}

.table_body {
    overflow-y: auto;
}

#buffer_box {
    border: none;
    padding: 0;
}

.card_widget {
    background-color: var(--card_bg_colour);
    border-radius: 10px;
    padding: min(1.5vw, 20px);
    position: relative;
}

/* UI Widgets */

button { 
    cursor: pointer;
    background-color: var(--brand_background_colour);
    display: inline-block;
    border-radius: 100px;
    padding: 0px 18px;
    color: var(--brand_text_colour);
    height: 34px;
    display: flex;
    align-items: center;
    border: none;
    font-size: 16px;
    font-family: 'Karla', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

button:hover:disabled,
button:disabled {
    color: var(--input-checkbox-disabled);
    background-color: var(--input_border_colour);
}

.text-right input,
.text-right select,
.text-right {
    text-align: right;
}

button.careful {
    border-color: var(--bad_highlight);
    color: var(--bad_highlight);
}

button.disable {
    background-color: var(--neutral_highlight);
    border: 1px solid var(--border_colour);
    color: inherit;
}

button.good {
    border-color: var(--good_highlight);
    color: var(--good_highlight);
}

button:hover {
    background-color: var(--button_hover_colour);
}

#content_container .table_row div select,
#content_container .table_row div input {
    width: initial;
    margin-bottom: 0;
    border-radius: initial;
    padding: 0;
}

#content_container .table_row div select,
#content_container .table_row div input,
select,
textarea,
input {
    background-color: var(--input_background_colour);
    border: 0px;
    width: 100%;    
    box-sizing: border-box;
    color: var(--text_colour);
    font-family: 'Karla', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

select,
textarea {
    height: 100%;
    resize: none;
}

.button_container {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}

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

/* Shared Settigns Style */
.setting_title {
    font-size: 35px;
    font-style: bold;
    padding: 0 0 10px 0;
    margin-top: 100px;
}

.dialog_title {
    font-size: 35px;
    padding-bottom: 20px;
}

.setting_changed::after {
    -webkit-mask-image: url('static/check-circle.svg');
    margin-left: 10px;
    display: inline-block;
    width: 18px;
    height: 18px;
    content: 'Saved';
    padding-left: 20px;
    background-color: var(--text_colour);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.setting_subtitle {
    font-size: 20px;
    padding: 20px 0 12px 0;
}

.teacher_box :is(input, select),
#selected_file,
#login_form input,
#import_dialog .table_row div select,
.big_input :is(select, input, textarea),
#content_container  select,
#content_container  input {
    background-color: var(--input_background_colour);
    padding: 15px;
    border-radius: 5px;
    border: none;
    width: 50%;
    margin-bottom: 10px;
}

.big_input :is(select, input, textarea) {
    width: 100%;
}


#content_container .table {
    max-height: 75vh;
    overflow: auto;
}

#content_container button {
    margin-top: 10px;
}

.extra_detail .button_container {
    flex-direction: row-reverse;
} 

.dialog .button_container button:first-of-type {
    margin-left: auto;
}

.header_btn {
    align-self: center;
    margin-left: auto;
    background-color: var(--text_two_colour);
    cursor: pointer;
    -webkit-mask-image: url('static/home.svg');
    margin-left: auto !important;
}

.modal {
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 300;
    top: 0;
    left: 0;
    display: grid;
    grid-template: repeat(3, 1fr) / 1fr minmax(400px, 1fr) 1fr;
    align-items: center;
    justify-content: center;
}

details,
#browse,
a {
    color: var(--brand_background_colour);
    text-decoration: none;
}

.dialog {
    background: var(--background_color);
    border-radius: 5px;
    border: 1px solid var(--border_colour);
    padding: 40px;
    max-width: 1000px;
    grid-row: 2;
    grid-column: 2;
}

.dialog_title {
    font-size: xx-large;
    padding: 0 0 10px 0;
}

.dialog_subtitle {
    font-size: large;
    font-weight: bold;
    padding: 10px 0 5px 0;
}

.dialog_message {
    padding-bottom: 10px;
}

.input_container {
    padding: 10px;
}

.button_container a {
    color: var(--brand_background_colour) !important;
    text-decoration: none;
}

.button_container button {
    margin-top: 0 !important;
}

.action_error {
    color: var(--bad_highlight);
    position: relative;
    padding-left: 30px;
}

.action_error::before {
    -webkit-mask-image: url('static/alert.svg');
    content: '';
    background-color: var(--bad_highlight);
    width: 24px;
    height: 100%;
    position: absolute;
    -webkit-mask-size: contain;
    left: 0;
    -webkit-mask-position-y: center;
    -webkit-mask-repeat: no-repeat;
}

.slide_message.error {
    background-color: var(--bad_highlight);
    color: var(--background_color);
}

.slide_message.neutral {
    background-color: var(--text_colour);
    color: var(--background_color);
}

.slide_message {
    padding-bottom: 2px;
    text-align: center;
}

input[type='checkbox'] {
    width: inherit;
    border-color: var(--input_border_colour);
}

.popup_menu_item {
    padding: 10px;
    margin: 5px 0;
    background: var(--background_color);
    border-radius: 5px;
    border: 1px solid var(--border_colour);
    color: var(--text_colour) !important;
}

.setting_item {
    display: flex;
    align-items: center;
    padding: 15px 0;
}

.setting_item :is(input, select) {
    width: 175px !important;
    margin-right: 10px;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--border_colour);
    background-color:white;
}

.setting_item label {
    color: inherit;
    font-weight: initial;
}

.setting_sub_section {
    padding: 0;
    margin: 5px 0;
    border-radius: 5px;
    color: var(--text_colour) !important;
} 

.category_container {  
    margin-bottom: 10px;
}

.category_item, .category_item div {
    display: inline-block;
    font-size: 14px;
}

.category_item {
    display: flex;
    cursor: pointer;
    margin-bottom: min(16px, 1.5vh);
}

.hover {
    background-color: var(--alt_row_colour);
}

.category_colour {
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid var(--input_border_colour);
    border-radius: 50%;
    margin-right: 5px;
    align-self: center;
}

.icon_btn {
    background-color: var(--text_colour) !important;
    margin-left: 12px;
    opacity: 0.6;
}

.cancel {
    mask-image: url('static/cancel.svg');
    -webkit-mask-image: url('static/cancel.svg');
}

.save {
    mask-image: url('static/check.svg');
    -webkit-mask-image: url('static/check.svg');
}

.category_info div {
    display: block;
}

.category_name {
    font-size: 14px;
}

.tooltip {
    max-width: 200px;
    position: fixed;
    background-color: var(--brand_background_colour);
    padding: 5px;
    border-radius: 5px;
    z-index: 1000;
    color: var(--brand_text_colour);
    box-shadow: 0 0px 10px 2px var(--shadow_colour);
}

.menu {
    -webkit-mask-image: url('static/menu.svg');
    width: 36px;
    background-color: var(--text_two_colour);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position-y: center;
    cursor: pointer;
}

.title {
    background: var(--logo);
    background-repeat: no-repeat;
    background-size: 36px;
    background-position-y: center;
    align-self: flex-end;
    padding-left: 40px !important;
    box-sizing: border-box;
}

.mobile_header .title {
    font-size: 24px !important;
    background-size: contain;
}

.no_display,
.mobile_only {
    display: none;
}

pre {
    white-space: break-spaces;
}

#menu_container div,
    #pref_container div {
        padding: 10px;
        background-color: var(--background_color);
        margin: 5px min(3vw, 30px) 0 10px;
        cursor: pointer;
        text-align: end;
        width: auto;
        font-size: 20px;
    }

    #menu_container a,
    #pref_container a {
        color: var(--text_colour);
        font-style: initial;
        text-decoration: initial;
    }


@media screen and (max-width: 1000px) {
    #content_container select, #content_container input {
        width: 100%;
    }

    #content_container .table {
        max-height: 35vh;
    }


    /* suspect settings table css */
    /* 
    
    */

    .table_row:hover {
        background-color: var(--card_bg_colour);
    }

    .table_row:not(.table_header):hover > div {
        background-color: initial;
    }

    .menu_visible #close_menu {
        position: fixed;
        top: 0;
        left: 10px;
        display: block !important;
        -webkit-mask-repeat: no-repeat;
        margin: 0 !important;
        width: 12px !important;
    }

    #pref_container div,
    #menu_container div {
        text-align: left !important;
    }
}

@media screen and (max-width: 45rem) {

    .mobile_modal {
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        height: 100%;
        position: fixed !important;
        z-index: 300;
        top: 0;
        left: 0;
        display: grid;
        grid-template: repeat(3, 1fr) / 1fr 1fr 1fr;
        align-items: center;
        justify-content: center;
    }

    .mobile_modal .popup_menu_item {
        grid-row: 2;
        grid-column: 2;
        width: unset !important;
        position: unset !important;
        top: 0 !important;
    }
}

@media screen and (max-width: 32rem) {

    .mobile_only {
        display: block;
    }


    h1 {
        text-align: center;
    }

    .table {
        display: block;
    }

    .card_widget {
        background-color: var(--card_bg_colour);
        border-radius: 10px;
        padding: min(1.5vw, 20px);
    }

    .mobile_header {
        display: none;
        padding: 10px;
        box-shadow: 0 0px 10px 2px var(--shadow_colour);
        position: sticky;
        top: 0;
        background-color: var(--background_color);
        z-index: 250;
        flex-wrap: wrap;
    }
}

.loading_container {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    background-size: 200%;
    background-color: var(--carda);
    z-index: 1000;
    animation: loading_card linear 2s infinite;
    transition: opacity 0.2s;
}

.finalLoad {
    opacity: 0;
}

@keyframes loading_card {
    0% {
        background-color: var(--carda);
    }

    50% {
        background-color: var(--cardb);
    }

    100% {
        background-color: var(--carda);
    }
}

.loading_outer,
#loading_block {
    width: min(128px, 50%);;
    height: min(128px, 50%);;
    z-index: 2000;
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    position: relative;
}

.loading_outer::after,
#loading_block::after {
    -webkit-mask-image: url('static/wave.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position-y: 80%;
    animation: 1s linear infinite loading_animation;
    background-color: var(--brand_background_colour);
    z-index: 2001;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(10px 20% 90%);
}

.loading_inner,
#loading_animation_2 {
    background-image: url('static/logobw.svg');
    background-repeat: no-repeat;
    background-size: contain;
    animation: 1s linear infinite loading_2;
    width: 20%;
    height: 20%;
    position: absolute;
}

@keyframes loading_2 {
    from {
        bottom: 10px;
        left: 20%;
    }

    60% {
        bottom: 40%;
        left: 55%;
        transform: rotate(-45deg);
    }

    to {
        bottom: 10px;
        left: 70%;
        transform: rotate(-80deg);
    }
}

@keyframes loading_animation {
    from {
        -webkit-mask-position-x: 100px;
    }

    to {
        -webkit-mask-position-x: 75px;
    }
}

/* Mobile menu */
#mobile_background {
    width: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

#mobile_background.menu_visible {
    width: auto;
    opacity: 1;
}

#menu_container {
    position: fixed;
    left: -80%;
    height: 100%;
    z-index: 2001;
    width: 80%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--background_color);
    box-shadow: 0px 3px 10px var(--shadow_colour);
    transition: left 0.15s;
}

#menu_container.menu_visible {
    top: 0;
    left: 0;
}

.table_row.error div{
    background-color: lightpink;
}

summary {
    cursor: pointer;
}