a.box-extra-hide {
    display: none !important;
}

.headsup-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.is-focus:after {
    content: "🔍";
    opacity: .3;
}

/*
.is-filter:after {
    content: "⧎";
    opacity: 0;
}
*/

.fivesquare .fivesquare-title {
    margin-top: .66em; 
}
.fivesquare#total .fivesquare-title {
    margin-top: 0em; 
}

.fivesquare .fivesquare-box.fivesquare-total {
    margin-top: 0em;
    min-width: 5.5em;
    height: 4.66em;
}

.is-focus:hover, .is-filter:hover {
    text-decoration: underline;
    cursor: pointer;
}

.is-focus:hover:after, .is-filter:hover:after {
    text-decoration: underline;
    cursor: pointer;
    opacity: 1;
}


.headsup-box {
}

svg.prediction_chart rect:hover {
    background-color: #933;
}

div.control-middle-left>div {
    margin-bottom: 2em;
}

div.control-middle-left>div:last-child {
    margin-bottom: 0em;
}

div.side-col {
    flex-basis: 0;
    flex-grow: 1;
    padding: 1em;
}

#controls {
    display: flex;
}

.headsup-box hr {
    border-top: 1px solid black;
    width: 80%;
}

.jc-center {
    display: flex;
    justify-content: center !important;
}

#revprofdiv {
    width: 100%;
}

.rev_option {
  background-color: #eeeeef;
  /* width: 50%; */
}

.prof_option {
  background-color: #eeffee;
  /* width: 50%; */
}

.data-table td, .data-table th {
    vertical-align: middle;
    border-top: 1px solid #aaa;
}

.data-table {
    font-size: small;
}

.data-table tr.secondary th {

    font-weight: normal;
}

.data-table td.is-base-1 {
    background-color: #bbb;
}

.data-table td.is-base-2 {
    background-color: #ccc;
}

.data-table td.is-base-3 {
    background-color: #ddd;
}

#revprofdiv, #flattendiv {
    margin-top: 1em;
    z-index: 1000;
}

tr.row-category-1 {
    border-top: 3px solid #444;
}

tr.row-category-2 {
    border-top: 2px solid #888;
}

tr.row-category-3 {
    border-top: 1px solid #444;
}

tr.row-category-4 {
    border-top: 1px solid #888;
}

a.collapse-button {
    margin-left: 1ex;
    margin-right: 1ex;
}

td.row-combined, td.row-combined-top {
    background-color: #dee2e6;
}
td.row-combined-top {
    font-weight: bold;
}

td.calc-row {
    color: grey; 
}

td.profit-col {
    /*background-color: #9ce79c;*/
}

th.head-product {
    background-color: #9fcdff;
}
th.head-price {
    background-color: #b1dfbb;
}
th.head-costs {
    background-color: #f1b0b7;
}
th.head-profit {
    background-color: #b1dfbb;
}
th.head-time {
    background-color: #c8cbcf;
}

.spend-sum {
    background-color: #f1b0b7;
}

tr.primary > th.data-off-focus {
    background-color: rgb(180, 167, 214);
}

th.data-off-focus, td.data-off-focus {
    background-color: rgb(217, 210, 233);
}

table.data-table thead {
    border-bottom: 3px solid black;
}

table.data-table thead th, table.data-table thead td {
    border-bottom: 1px solid black;
}

table.data-table tr.sumrow {
    font-weight: bold;
    border-top: 3px solid black;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

body>div {
	display: flex;
	justify-content: space-around;
}

#data-view form {
    width: 50ex;
}

#data-view form select.form-control {
    width: 100%;
}

#yearly-headsup.headsup-box {
    width: fit-content;
}

#data-view {
    width: 100%;
    padding: 3%;
    padding-top: 3ex;
    flex-direction: column;
}

.data-table {
    width: 100%;
    text-align: center;
    /* border-bottom: 3px solid black; */
}

table.data-table > tbody.data-table-summary {
    border-top: 3px solid black;
}

.table-success-light {
    background-color: rgb(233, 253, 239);
}
.table-success-dark {
    background-color: rgb(130, 182, 142);
}

table img {
    width: 33px;
    border-radius: 5px;
    vertical-align: middle;
    margin-right: 1em;
}

#controls img {
    width: 50px;
    margin: .5ex;
}

#top {
	width: 100%;
    padding-top: 1.5em;
}

/*#cumu {
	width: 100vw;
	height: 40vh;
}*/

/*#second {
	width: 100vw;
	height: 40vh;
}*/

#second {
    display: flex;
	justify-content: space-around;
    padding: 1% 0;
    align-items: center;
}

#cumu,#monthly,#daily {
    display: flex;
    flex-direction: column;
}

#monthly, #daily, #cumu>div>div.chartbox {
    background-color: #fbfbf3;
    padding: 1ex;
    border-radius: 3em;
    border: 3px solid #ebebe3;
    transition: border 1s ease-in, background-color 1s ease-in;
}

.profit #monthly, .profit #daily, .profit #cumu>div>div.chartbox {
    background-color: #ebf1eb;
    padding: 1ex;
    border-radius: 3em;
    border: 3px solid #659054;
}

h3 {
    text-align: center;
}

svg.prediction_chart {
	height: 30vh;
    margin-right: -1em;
}

#daily_svg svg,
#monthly_svg svg{
    height: 27vh;
}

.top-cumu {
	flex-direction: column;
	justify-content: flex-start;
}

.dbox {
    display: flex;
    justify-content: center;
    font-size: 16px;
    /*
    align-items: center;
    */
}

.title>span.subtitle {
    font-size: 50%;
}

.dbox>span {
    margin-top: 2em;
}


.dbox>div>div {
    margin: 1ex;
    height: 4.5em;
    min-width: 5.5em;
    background: rgb(240, 244, 195);
    flex-direction: column;
    padding-top: 1.5ex;
    display: flex;
}

.dbox>div .title {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    font-weight: bolder;
    font-size: 10px;
    color: black;
    align-items: center;
}

.dbox>div>.title {
    padding: 0px;
}

.dbox>div>div>.value {
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    padding-bottom: .5ex;
}

.dbox>div>div.year-active, .dbox>div>div.year-active>.value, .dbox>div>div.year-active>.title {
    background-color: steelblue;
    color: white !important;
}

.dbox-year>div>div {
    background: #9FADBD;
    border: 1px solid #3B4856;
}

tr td.flat-row {
    opacity: .85;
}
tr td.flat-row.hover-row {
    opacity: 1;
    font-weight: 900;
    /*
    border-top: 4px solid grey;
    border-bottom: 4px solid grey;
    */
}

tr td.row-combined.hover-row {
    font-weight: 900;
}

.dbox>div>div.month-active, .dbox>div>div.month-active>.value, .dbox>div>div.month-active>.title {
    /*background-color: rgb(34, 139, 34); */
    background-color: #3D8D46;
    color: white !important;
}
.dbox-month>div>div {
    background: #A1AFA0;
    border: 1px solid #3D4A3D;
}

.dbox>div>div.day-active, .dbox>div>div.day-active>.value {
    /* background-color: rgb(255, 0, 0); */
    background-color: #C85B60;
    color: white !important;
}

.dbox-day>div>div {
    background: #BFA5A4;
    border: 1px solid #574141
}

.control-lower-center {
    display: flex;
    flex-direction: row;
    justify-content: center;

}

.fivesquare-bumps {
    display: flex;
    height: 1.5em;
}
.fivesquare-bumps.hidden>a, .fivesquare-bumps.hidden>div{
    display: none;
}

.control-upper-center a {
    /*padding: .6ex;*/
    padding-left: 1.2em;
    padding-right: 1.2em;
    border-radius: 3px;
}