#data-bar{
    overflow-x: scroll;
}

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

td.listing_not_active {
    color: #888;
}

td.sum-highlight {
    /* border: 2px solid black;*/
    display: flex;
    align-content: stretch;
    justify-content: stretch;
    flex-direction: row;
    padding:0px;
}
td.sum-highlight>span {
    border: 2px solid black;
    border-top: 0px;
    width: 100%;
    height: 100%;
    margin: 0;
}
td.listing_active {
    color: green;
    font-weight: bold;
}

/*

th.table-danger,
th.table-success,
th.data-off-focus
table > thead > tr > th.table-danger,
table > thead > tr > th.table-success,
table > thead > tr > th.data-off-focus,
table > thead > tr > th.row-combined,
table > thead > tr > th.head-costs,
table > thead > tr > th.head-profit,
*/
th.row-combined,
th.head-costs,
th.head-profit
 {
    /*background-color: #B8DAFF;*/
    background-color: #a3bbd5;
}

tr.sumrow td {
    background-color: inherit;
}

th.head-overview {
    /*background-color: #4285cd;*/
    background-color: #a3bbd5;
}

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

table.forced-focus .is-focus:after {
    content: "";
}

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

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

span.comm-pred {
    width: 100%;
    text-align: right;
}

.range-day .table-indicator * {
    background-color: #c85b60;
}

.range-month .table-indicator *{
    background-color: #3D8D46;
}

.range-year .table-indicator * {
    background-color: steelblue;
}

.fivesquare .fivesquare-title {
    margin-top: .66em; 
}
/*
.fivesquare#total .fivesquare-title {
    margin-top: .3em;
    font-size: 200%;
}
*/

.fivesquare .fivesquare-box.fivesquare-total {
    margin-top: 0em;
    /*
    font-weight: 800;
    min-width: 5.5em;
    height: 4.66em;
    */
}

.box-val {
    flex-grow: 1;
    text-align: center;
}

table.forced-focus .is-focus:hover {
    text-decoration: none;
    cursor: inherit;
}

.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;
}

div.reset-products {
    width: 100%;
    flex-grow: 1;
}

#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;
    white-space: nowrap;
}

.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 {
    opacity: .7;
    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; */
    background-color: #B8DAFF;
}
th.table-primary-set {
    /* background-color: #9fcdff; */
    background-color: #B8DAFF;
}
th.head-price {
    background-color: #b1dfbb;
}
th.head-costs {
    background-color: #f1b0b7;
}
th.head-profit {
    background-color: #b1dfbb;
}
th.head-time {
    background-color: #c8cbcf;
}
th.head-over {
    background-color: #111;
    color: white;
}


td.data-border {
    border-left: 2px solid black;
    border-right: 2px solid black;
}
td.data-border-bottom {
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}

.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;
}

a.control-sub-focus.complete {
    color: green;
}

a.control-sub-focus.bad {
    color: red;
}

#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: 1%;
    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: start;
}

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

#monthly, #daily, #cumu>div>div.chartbox {
    background-color: #fbfbf3;
    padding: 1ex;
    margin-top: 8ex;
    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: .7;
}
tr td.flat-row.hover-row {
    opacity: 1;
}

tr td.row-combined.hover-row {
    opacity: 1;
}

.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;
}