/* Budgets Page */

/* div#container main.main section#budget {} */
/* div#container main.main section#budget article {} */

/* div#container main.main section#budget article#annualsumup {display:none;} */
div#container main.main section#budget article#annualsumup div.content {flex-wrap:wrap;}
div#container main.main section#budget article#annualsumup div.content figure.bucketbox {flex-grow:0; text-align:center; cursor:pointer;}
div#container main.main section#budget article#annualsumup div.content figure.bucketbox div.yearbody {display:flex; flex-direction:row; justify-content:center;}
div#container main.main section#budget article#annualsumup div.content figure.bucketbox div.yearbody div.bucket {background-color:#E2E2E2; font-size:.25rem; width:.75em; height:16em; border-radius:1rem; margin:0 .5rem .75rem; /* overflow:hidden; */}
div#container main.main section#budget article#annualsumup div.content figure.bucketbox div.yearbody div.bucket {display:flex; flex-direction:column; justify-content:flex-end; position:relative;}
div#container main.main section#budget article#annualsumup div.content figure.bucketbox div.yearbody div.bucket div.fill {content:''; display:block; background-color:var(--blue); border-radius:inherit;}
div#container main.main section#budget article#annualsumup div.content figure.bucketbox div.yearbody div.bucket label.monthlabel {position:absolute; top:100%; left:50%; transform:translateX(-50%);}
div#container main.main section#budget article#annualsumup div.content figure.bucketbox div.yearbody div.bucket label.monthlabel {color:white; color:var(--black); font-size:.65rem; margin-top:.25rem;}
div#container main.main section#budget article#annualsumup div.content figure.bucketbox figcaption.yrhead {font-size:1.5rem; margin-bottom:.5rem;}

/* div#container main.main section#budget article#monthlysumup {} */
div#container main.main section#budget article#monthlysumup div.head {position:relative;}
div#container main.main section#budget article#monthlysumup div.head h2.head {display:flex; justify-content:space-between;}
div#container main.main section#budget article#monthlysumup div.head a.editbtn {position:absolute; top:0; right:0; padding:.75rem 1rem .625rem; border-radius:.5rem;}
div#container main.main section#budget article#monthlysumup div.head a.editbtn {background-color:var(--blue); color:white; font-size:1rem; text-decoration:none; display:grid; place-items:center;}
div#container main.main section#budget article#monthlysumup div.head a.editbtn:hover {background-color:var(--blue);}
div#container main.main section#budget article#monthlysumup div.content {overflow-x:auto; overflow-x:hidden;}
div#container main.main section#budget article#monthlysumup div.content div.yrpgs {display:flex; flex-direction:row; align-items:stretch; width:100%; overflow-x:visible; transition:.5s; /* transform:translateX(-100%); */}
div#container main.main section#budget article#monthlysumup div.content div.yearpage {display:grid; grid-template-columns:repeat(3,1fr); width:100%; flex-shrink:0;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox {/* max-width:24rem; */ cursor:pointer; user-select:none; padding:.625rem .75rem 1rem;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox {display:flex; flex-direction:column; align-items:stretch;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox h3.head {font-size:1.125rem; font-weight:600; text-align:center; cursor:pointer; margin:0; margin-top:.5rem;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.btnbox {text-align:center; margin-top:.25rem; /* margin-top:1rem; */}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.btnbox a.btn {font-size:.875rem; text-decoration:none;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.btnbox a.btn:hover {text-decoration:underline;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.btnbox a.editbtn {display:none;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.btnbox a.deletebtn {display:none;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar {margin-top:.25rem;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar.total {padding-top:.5rem; border-top:1px solid grey; margin-top:.75rem;}
/* div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.label {margin-top:.5rem;} */
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.label {display:flex; justify-content:space-between; align-items:flex-end;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.label span.name {color:var(--black); font-size:.875rem; font-weight:800;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.label span.remainder {color:var(--black); font-size:.65rem;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar.over div.label span.remainder {color:var(--red);}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar.slow div.label span.remainder {color:var(--yellow);}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar.good div.label span.remainder {color:var(--green);}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.label span.remainder span.num {font-weight:500;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.label span.remainder span.suffix {font-weight:100;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.bar {background-color:var(--white); height:1.75rem; border-radius:.5rem; /* margin:1rem; */}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.bar {display:flex; justify-content:center; align-items:center; position:relative;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.bar::after {content:''; position:absolute; top:0; left:0; height:100%; width:80%; border-right:1px solid var(--black); opacity:.1;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar:active div.bar {background-color:darkgrey !important;}
/* div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar:active.over div.bar {background-color:var(--red) !important;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar:active.slow div.bar {background-color:var(--yellow) !important;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar:active.good div.bar {background-color:var(--green) !important;} */
/* div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.bar:active {background-color:lightgrey !important;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar.over div.bar:active {background-color:var(--red) !important;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar.slow div.bar:active {background-color:var(--yellow) !important;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar.good div.bar:active {background-color:var(--green) !important;} */
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.bar {background:var(--white) !important; overflow:hidden;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.bar div.progress {position:absolute; top:0; left:0; height:100%; min-width:.1%; transition:1s;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.bar div.progress.pre {width:0% !important;}
div#container main.main section#budget article#monthlysumup div.content div.yearpage figure.budgetbox div.progressbar div.bar span.caption {color:var(--black); font-size:.75rem; z-index:10;}



/* Page Overlay */
div#container div.overlay {position:fixed; top:0; left:0; height:100%; width:100%; overflow-y:auto;}
div#container div.overlay {display:grid; place-items:center;}
div#container div.overlay {opacity:0; visibility:hidden; transition:.375s;}
div#container div.overlay.open {opacity:1; visibility:visible;}
div#container div.overlay div.bg {position:fixed; top:0; left:0; height:100%; width:100%; z-index:-1;}
div#container div.overlay div.bg {background-color:#0008; cursor:pointer;}
div#container div.overlay main#budgeteditor {background-color:#EEE; color:#444; width:100%; max-width:18rem; padding:1.25rem 1.5rem; border-radius:.25rem; margin:1rem auto;}
div#container div.overlay main#budgeteditor {transform:translateY(100vh); transition:.25s;}
div#container div.overlay.open main#budgeteditor {transform:translateY(0);}
/* div#container div.overlay main#budgeteditor form.form {} */
div#container div.overlay main#budgeteditor h2.head {font-size:1.375rem; font-weight:500; /* text-transform:uppercase; */ text-align:center; margin:0; margin-top:.5rem;}
div#container div.overlay main#budgeteditor h2.head span.monthindex {display:none; color:#888; font-size:.75em;}
div#container div.overlay main#budgeteditor h2.head span.monthindex:before {content:'(id: ';}
div#container div.overlay main#budgeteditor h2.head span.monthindex::after {content:')';}
div#container div.overlay main#budgeteditor div.input {font-size:.875rem; margin-top:.5rem;}
div#container div.overlay main#budgeteditor div.input select#monthselect {display:none;}
div#container div.overlay main#budgeteditor div.input select#monthselect {background-color:white; width:100%; padding:.45rem .5rem; border:0 none; border-radius:.25rem;}
div#container div.overlay main#budgeteditor div.input input {width:100%; border:0 none; border-radius:.25rem;}
div#container div.overlay main#budgeteditor div.inputgrid {display:grid; grid-template-columns:3fr 4fr; grid-gap:.25rem;}
div#container div.overlay main#budgeteditor div.inputgrid label {margin:auto 0;}
div#container div.overlay main#budgeteditor div.inputgrid input {text-align:center; padding:.3125rem; padding-left:.75rem;}
div#container div.overlay main#budgeteditor div.inputgrid input:valid {background-color:#30C67788; background-color:white;}
div#container div.overlay main#budgeteditor div.inputgrid input:invalid {background-color:#f29a90;}
div#container div.overlay main#budgeteditor div.inputbtns {display:grid; grid-template-columns:repeat(2,1fr); grid-gap:.375rem; margin-top:.75rem;}
div#container div.overlay main#budgeteditor div.inputbtns input.btn {color:white; font-size:inherit; cursor:pointer; padding:.5rem 1rem; transition:.25s;}
div#container div.overlay main#budgeteditor div.inputbtns input.cancelbtn {background-color:#F55A38; background-color:#FD9C0A;}
div#container div.overlay main#budgeteditor div.inputbtns input.updatebtn {background-color:#028DEE; background-color:#0179FF;}
div#container div.overlay main#budgeteditor div.inputbtns input.btn:hover {background-color:white; color:var(--black);}
div#container div.overlay main#budgeteditor div.closebtn {position:fixed; top:0; right:0;}
div#container div.overlay main#budgeteditor div.closebtn {color:var(--gdcblack); font-size:1.75rem; font-weight:100; /* min-width:8rem; */ cursor:pointer; padding:0 .75rem; border-radius:.25rem;}




@media screen and (max-width:60rem) {
	
	/* Budgets Page */
	div#container main.main section#budget article#monthlysumup div.content div.yearpage {display:grid; grid-template-columns:repeat(2,1fr);}

	/* Page Overlay */
}


@media screen and (max-width:40rem) {
	
	/* Budgets Page */
	div#container main.main section#budget article#monthlysumup div.content div.yearpage {display:grid; grid-template-columns:repeat(1,1fr);}

	/* Page Overlay */
}


@media screen and (max-width:24rem) {
	
	/* Budgets Page */

	/* Page Overlay */
	div#container div.overlay main#budgeteditor {position:relative;}
	div#container div.overlay main#budgeteditor div.closebtn {position:absolute; color:var(--black);}
}