/* Generic Page */

div#container main.main section.page {padding:1rem 2rem 3rem;}
/* div#container main.main section.page article {} */
/* div#container main.main section.page article div.head {} */
div#container main.main section.page article div.head h2.head {color:white; color:var(--black); font-size:1.375rem; font-weight:100; /* text-align:center; */ margin:0; margin:1.75rem 0 .5rem; margin-bottom:0;}
div#container main.main section.page article div.head p.textcopy {color:#AAA; font-size:.875rem; /* text-align:center; */ margin:0; margin-bottom:1rem;}
div#container main.main section.page article div.content {display:flex; flex-direction:row; justify-content:center; align-items:stretch; border-radius:.5rem;}
div#container main.main section.page article div.content figure.box {background-color:var(--black3); background-color:white; box-shadow:var(--thinshadow);}
div#container main.main section.page article div.content figure.box {flex-grow:1; padding:.5rem; border:1px dashed var(--frost); border-radius:.5rem; margin:.5rem;}
div#container main.main section.page article.summary div.content figure.piechart {display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start;}
div#container main.main section.page article.summary div.content figure.piechart {width:100%; min-width:8rem; max-width:16rem; position:relative; box-shadow:none;}
div#container main.main section.page article.summary div.content figure.piechart::after {content:''; display:block; width:100%; padding-top:100%;}
div#container main.main section.page article.summary div.content figure.piechart div.chart {position:absolute; top:0; left:0; width:100%; height:100%; box-shadow:var(--shadow);}
div#container main.main section.page article.summary div.content figure.piechart div.chart {background-color:white; display:grid; place-items:center; border-radius:50%;}
div#container main.main section.page article.summary div.content figure.piechart.spin div.chart {transform:rotate(0); transition:.25s linear transform;}
div#container main.main section.page article.summary div.content figure.piechart div.chart:hover {transform:rotate(360deg);}
div#container main.main section.page article.summary div.content figure.piechart div.chart div.disc {position:absolute; display:grid; place-items:center; font-size:1.5rem; cursor:pointer; user-select:none;}
div#container main.main section.page article.summary div.content figure.piechart div.chart div.disc {background-color:white; min-height:var(--piechartinner); min-width:var(--piechartinner); border-radius:50%; box-shadow:var(--shadow) inset;}
div#container main.main section.page article.summary div.content figure.piechart div.chart div.disc {transform:rotate(0); transition:.25s linear transform;}
div#container main.main section.page article.summary div.content figure.piechart.spin div.chart:hover div.disc {transform:rotate(-360deg);}
div#container main.main section.page article.summary div.content figure.piechart div.chart div.disc span.full {display:none;}
div#container main.main section.page article.summary div.content figure.piechart div.chart div.disc span.brief {display:block;}
div#container main.main section.page article.summary div.content figure.piechart div.chart div.disc.full span.full {display:block;}
div#container main.main section.page article.summary div.content figure.piechart div.chart div.disc.full span.brief {display:none;}
/* div#container main.main section.page article.summary div.content figure.piechart div.chart {background-image:conic-gradient(colorname 0deg, colorname 90deg, colorname 180deg, colorname 270deg);} */
div#container main.main section.page article.summary div.content figure.legend {color:#FFFC; color:#000C; padding:.5rem .65rem; padding:.25rem .65rem; /* box-shadow:var(--thinshadow); */}
div#container main.main section.page article.summary div.content figure.legend h3.head {font-size:1.1rem; font-weight:300; margin:0; margin-bottom:.125rem;}
div#container main.main section.page article.summary div.content figure.legend div.item {display:flex; flex-direction:row; align-items:center; cursor:pointer; font-size:.75rem; user-select:none;}
div#container main.main section.page article.summary div.content figure.legend div.item {background-color:white; padding:.25rem .5rem; border-top:1px solid #0001;}
div#container main.main section.page article.summary div.content figure.legend div.item:last-child {padding-top:.5625rem; /* border-bottom-width:1px; */}
div#container main.main section.page article.summary div.content figure.legend div.item:hover {background-color:#00000008;}
div#container main.main section.page article.summary div.content figure.legend div.item.total {font-weight:1000;}
div#container main.main section.page article.summary div.content figure.legend div.item span.color {background-color:white; border:1px solid black; min-width:1rem; min-height:1rem; margin-right:.5rem;}
/* div#container main.main section.page article.summary div.content figure.legend div.item span.caption.name {margin-left:.5rem;} */
div#container main.main section.page article.summary div.content figure.legend div.item span.caption.proportion {margin-left:.25rem;}
div#container main.main section.page article.summary div.content figure.legend div.item span.caption.amount {font-weight:1000; margin-left:.25rem;}
div#container main.main section.page article.summary div.content figure.legend div.item span.space {flex-grow:1;}



/* Overview Page */

div#container main.main section#overview {display:flex; flex-direction:row;}
/* div#container main.main section#overview {display:grid; grid-template-columns:repeat(3,1fr);} */
div#container main.main section#overview article {flex-grow:1;}
/* div#container main.main section#overview div.splitter {display:none;} */
/* div#container main.main section#overview article#spendsummary {} */
/* div#container main.main section#overview article#incomesummary {} */
/* div#container main.main section#overview article#balancesummary {} */
div#container main.main section#overview article h2.head,
div#container main.main section#overview article p.textcopy {text-align:center;}
div#container main.main section#overview article div.content {display:flex; flex-direction:column; align-items:center; padding:0 1rem;}
div#container main.main section#overview article#balancesummary div.content figure#balance {display:flex; justify-content:space-between;}
div#container main.main section#overview article#balancesummary div.content figure#balance {color:seagreen; text-align:right;}
div#container main.main section#overview article#balancesummary div.content figure#balance::before {content:'Available Cash: '; color:initial; margin-right:.25rem;}



/* Settings Page */

/* div#container main.main section#settings {} */
/* div#container main.main section#settings article {} */
/* div#container main.main section#settings article.general {} */
/* div#container main.main section#settings article.specific {} */
div#container main.main section#settings article div.head h2.head {text-transform:capitalize;}
div#container main.main section#settings article div.content {flex-direction:column; align-items:stretch; flex-wrap:nowrap; box-shadow:var(--thinshadow);}
div#container main.main section#settings article div.content figure.box {display:grid; grid-template-columns: 3fr 2fr; align-items:center; box-shadow:none;}
div#container main.main section#settings article div.content figure.box:empty {display:none;}
div#container main.main section#settings article div.content figure.box:empty::after {content:'[none]';}
div#container main.main section#settings article div.content figure.box select {font-size:inherit; padding:.5rem 1rem;}
div#container main.main section#settings article div.content figure.box select option {padding:.5rem 1rem;}



/* Taxes Page */
/* div#container main.main section#taxes {} */
/* div#container main.main section#taxes article {} */

/* Investments Page */
/* div#container main.main section#invest {} */
/* div#container main.main section#invest article {} */

/* Insurance Page */
/* div#container main.main section#insurance {} */
/* div#container main.main section#insurance article {} */



/* Misc Page */

/* div#container main.main section#misc article#misc {} */
div#container main.main section#misc article#misc div.content {flex-direction:column;}
div#container main.main section#misc article#misc div.content section#badgebox {display:grid; grid-template-columns:repeat(4,1fr); grid-gap:.5rem;}
div#container main.main section#misc article#misc div.content section#badgebox div.card {display:flex; flex-direction:column; align-items:center; background-color:var(--blue); color:white; padding:.5rem; border-radius:.5rem;}
div#container main.main section#misc article#misc div.content section#badgebox div.card svg.icon {font-size:2rem; margin-bottom:.5rem;}
div#container main.main section#misc article#misc div.content section#badgebox div.card span.num {font-size:2rem; margin-bottom:.15rem;}
div#container main.main section#misc article#misc div.content section#badgebox div.card span.caption {font-size:.75rem;}
div#container main.main section#misc article#misc div.content section#bucketbox {display:flex; flex-direction:row; justify-content:center; align-items:center; counter-reset:n;}
div#container main.main section#misc article#misc div.content section#bucketbox {transform:none; transform-style:preserve-3d; transition:.5s;}
div#container main.main section#misc article#misc div.content section#bucketbox:hover {transform:rotateX(60deg); transform:rotateX(80deg);}
div#container main.main section#misc article#misc div.content section#bucketbox div.category {background-color:#0008; min-width:3rem; min-height:3rem; border-radius:50%; margin:0 .5rem; margin-bottom:.75rem;}
div#container main.main section#misc article#misc div.content section#bucketbox div.category {transform:translateZ(2rem); position:relative;}
div#container main.main section#misc article#misc div.content section#bucketbox div.category::before {position:absolute; top:100%; left:50%; transform:translateX(-50%) rotateX(-45deg);}
div#container main.main section#misc article#misc div.content section#bucketbox div.category::before {content:'Category '/* counter(n) */; counter-increment:n; font-size:.625rem; margin-top:.125rem; white-space:nowrap;}
/* div#container main.main section#misc article#misc div.content {display:none;} */
/* div#container main.main section#misc article#misc div.content section#badgebox {display:none;} */
/* div#container main.main section#misc article#misc div.content section#bucketbox {display:none;} */





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

	/* Generic Page */

	/* Overview Page */
	div#container main.main section#overview {flex-wrap:wrap;}
	div#container main.main section#overview div.splitter {width:100%; flex-shrink:0; order:3;}
	div#container main.main section#overview article#incomesummary {order:1;}
	div#container main.main section#overview article#spendsummary {order:4;}
	div#container main.main section#overview article#balancesummary {order:2;}

	/* Settings Page */

	/* Taxes Page */
	/* Investments Page */
	/* Insurance Page */
}



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

	/* Generic Page */
	div#container main.main section.page {padding:1rem .5rem 3rem;}

	/* Overview Page */

	/* Settings Page */

	/* Taxes Page */
	/* Investments Page */
	/* Insurance Page */
}