/* #app.desktop-view.nav-closed .page-area {
    position: relative;
    padding: 64px 0px 20px 59px;
    height: calc(100% - 84px);
    width: calc(100% - 59px);
}
#app.desktop-view.nav-open .page-area {
    position: relative;
    padding: 64px 0px 20px 299px;
    height: calc(100% - 84px);
    width: calc(100% - 299px);
} */
.dashboard-page {
    height: 100%;
}

#dashboard-tab {
    background-color: #000000;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}
#dashboard-tab a {
    display: inline-block;
    padding: 20px 40px;
}

#dashboard-tab a.on {
    background-color: #202020;
}

#dashboard-tab a:hover {
    background-color: #85a9c3;
    color: #202020;
}

#tm-payables {
    padding: 20px 0px 20px 0px;
}

#dashboard-area {
    width: 100%;
    height: calc(100% - 56px);
}
.week-summary {
    padding: 0px 0px 40px 0px;
}

#dashboard-area .dashboard-area-inner {
    padding: 40px 0px;
}

#dashboard-area .section-title {
    font-size: 20px;
    padding: 0px 0px 10px 0px;
    text-align: center;
    background-color: transparent;
}

#calculations { 
    min-height: 800px;
}

div.dateArea {
    padding: 20px 0px 0px 0px;
    display: flex;
    position: relative;
    justify-content: center;
}
#department div#date-span a#apply-date-span {
        position: absolute;
        /* margin-top: 35px; */
        z-index: 1;
        width: 100%;
        padding: 9px 0px;
}

.section {
    text-align: center;
}

.section-header {
    text-align: center;
}

.section-main-title {
    font-size: 30px;
    text-align: center;
    padding: 0px 0px 10px 0px;
}

.section-show-count {
    font-size: 20px;
    text-align: center;
    padding: 0px 0px 20px 0px;
}

.section-total-fees {
    font-size: 20px;
    text-align: center;
    padding: 0px 0px 10px 0px;
}
.section-data-span-select {
    text-align: center;
    padding: 0px 0px 40px 0px;
}
.section-data-span-select select {
    width: auto !important;
    padding: 5px 20px;
    font-size: 20px;
    appearance: auto !important;
    background: unset;
}
.section-data-span {
    font: 16px;
    padding: 0px 0px 10px 0px;
    text-align: center;
}

.day-counts                 { display: flex; }
.day-counts .day {
    width: calc(100% / 7);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.day-counts .day .circle    { 
    border: 1px solid #303539; 
    border-radius: 50%; 
    width: 5vw; 
    height: 5vw; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 24px;
}
.day-counts .day .circle.today {
    background-color: #85a9c3;
    color: #202020;
}
.day-counts .day .day-name  { padding: 10px 0px 0px 0px; font-size: 20px; }
.day-counts .day .date      { padding: 5px 0px 0px 0px; }
.day-counts .day .gross      { padding: 5px 0px 0px 0px; font-size: 16px; }
.day-counts .day .fees      { padding: 5px 0px 0px 0px; }


.prev-week-overview { display: flex; padding: 80px 0px 0px 0px; }
.prev-week-overview > div { width: calc(100% / 3); }
.prev-week-overview > div > div { padding: 20px; }
canvas#myChart { width: 100%;  height: 40vh; }

.prev-week-top-bottom-gross {
    display: flex;
    padding: 80px 0px 0px 0px;
    justify-content: center;
}
.prev-week-top-bottom-gross > div { width: 40%; padding: 0px 20px; }

div.gross-list { width: 100%; }
div.gross-list div.list_item {
    display: flex;
    background-color: #272727;
    margin: 10px 0px 0px 0px;
    padding: 0px 15px;
}
div.gross-list div.list_item div.list_column { padding: 15px 0px;}


.merchandisers-area { display: flex; }
.merchandisers-area .merchandiser-area { width: 100%; }
.merchandisers-area .merchandiser-area .merch-title-total { 
    padding: 40px 10px 20px 10px;
    border-bottom: 1px solid #eeeeee;
}

.merchandisers-area .merchandiser-area .merch-title-total .title { 
    font-size: 18px;
    padding: 0px 0px 5px 0px;
}

.merchandisers-area .merchandiser-area .merch-title-total .total { 
    font-size: 22px;
    font-weight: bold;
}

.merchandisers-area .merchandiser-area .merch-shows { 
    font-size: 20px;
    padding: 10px 0px 0px 0px;
}

.merchandisers-area .merchandiser-area .merch-shows .show {
    padding: 10px 10px;
}

.merchandisers-area .merchandiser-area .merch-shows .show .artist {
    padding: 0px 0px 5px 0px;
    font-size: 18px;
}
.merchandisers-area .merchandiser-area .merch-shows .show .total {
    padding: 0px 0px 5px 0px;
    font-size: 20px;
    font-weight: bold;
}