@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Signika:300,400&display=swap');


:root {
--clr-green: #8dc540;
--clr-green-alt: #bdcd2d;
--clr-blue: #131b4d;
--clr-blue-alt: #1a63a2;
--clr-blue-transp: rgba(19, 27, 77, .8);
}

html, body {
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
font-family: Roboto, 'Segoe UI', Arial, Verdana;
min-height: 100vh;
}

a {
color: #264F36;
}

h1 {
font-family: Signika, Roboto, 'Segoe UI', Arial, Verdana;
font-weight:normal;
color: var(--clr-blue);
margin: 0;
padding: 1rem 0;
}
.Element-TitleSpan {
    padding: 0 .5rem;
    color: var(--clr-blue) !important;
}
.customer-app-toolbar {
display: flex;
flex-direction: row;
align-items: stretch;
background: #FFF;
border-bottom: solid 2px var(--clr-blue);
padding-bottom: 1rem;
margin-bottom: 2rem;
}

.customer-app-toolbar input[type=text] {
    border: solid 1px var(--clr-blue);
    padding: 0 .5rem;
    flex-basis: 25%;
    border-radius: 4px;
}

.toolkitPopup > .Element-Content .Element-SaveButton,
button {
border-radius: 4px;
font-weight: bold;
letter-spacing: .5pt;
font-size: .7rem;
text-transform: uppercase;
background: var(--clr-green);
border: none;
padding: .7rem 1rem;
color: #fff;
cursor: pointer;
}

.Element-SaveButton:hover, 
button:hover {
background: var(--clr-blue);
}
.toolkitPopup > .Element-Content {
padding: 1rem !important;
}
.toolkitPopup .toolkitForm input[type=text] {
width: 350px;
background: none;
border: none;
border-bottom: solid 1px #ccc;
}
.toolkitPopup .toolkitForm input[type=number] {
    background: none;
    width: 100px;
}
.toolkitPopup .toolkitForm select {
    width: 230px;
}
.toolkitPopup .toolkitForm .fieldRow {
margin: 1rem 0;
}
.toolkitPopup .fieldRow .Element-DataLabel {
color: var(--clr-blue);
font-size: 1rem;
font-weight: normal;
}
.toolkitPopup .fieldRow input,
.toolkitPopup .fieldRow select {
    font-size: 1rem;
    color: #333;
    font-weight: 200;
}

/*.customer-app { margin: 1rem; }*/
.customer-app .listing-container {
background: #FFF;
}
.customer-app .listing-container .grid th {
    cursor: pointer;
}

.customer-app-cont {
padding: 2rem;
background: #fff;
border-bottom: solid 1px var(--clr-blue);
/*margin: 1rem;*/
}


.topBar .innerContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: relative;
max-width: 1400px;
margin: 0px auto;
}

.topBar #bidfood-logo {
background-image: url(/Content/bidfood_logo.png);
background-repeat: no-repeat;
background-size: contain;
width: 235px;
height: 60px;
filter: brightness(255);
position: relative;
}

.topBar {
background-color: var(--clr-blue);
padding: 1rem;
color: #fff;
text-align: right;
}

.topBar .userMenu span {
display: inline-block;
height: 24px;
line-height: 24px;
}

.topBar #userMenu a {
display: inline-block;
width: 40px;
height: 24px;
background-size: 24px;
background-repeat: no-repeat;
background-position: right center;
line-height: 24px;
text-decoration: none;
}

#header {
position: relative;
background: url(/Content/bidfood_banner.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position-y: 45%;
height: 180px;
border-bottom: 8px solid var(--clr-blue);
}

#header #logo {
background-image: url('Logo.svg');
width: 100px;
height: 120px;
background-size: 80px;
background-position: center center;
background-repeat: no-repeat;
}

#header #locationName {
position: absolute;
left: 130px;
color: #fff;
font-size: 24pt;
top: 43px;
}

#header #locationName .code {
font-size: 14pt;
margin-left: 15px;
color: #ccc;
}

#header #sectorName {
position: absolute;
left: 120px;
color: #FFCC00;
font-size: 16pt;
top: 40px;
}

#header #menu {
position: absolute;
top: 0px;
right: 0px;
height: 120px;
list-style: none;
margin: 0;
padding: 0;
}

#header #menu li {
margin: 0;
padding: 0;
display: inline-block;
width: 120px;
height: 110px;
background-size: 50px 50px;
background-position: center 17px;
background-repeat: no-repeat;
transition: background-color ease-in-out 0.2s;
}

#header #menu li a {
display: block;
text-align: center;
padding-top: 80px;
height: 30px;
color: #fff;
text-decoration: none;
font-family: Signika, Roboto, 'Segoe UI', Arial, Verdana;
font-size: 14pt;
font-weight: 300;
}

#header #menu li.active, #header #menu li:hover {
background-color: #1A3725;
}

.body {
max-width: 1400px;
margin: 1rem auto;
}

#authBlock {
border-radius: 1rem;
margin: 0px auto;
max-width: 600px;
background-color: var(--clr-blue);
color: #fff;
padding: 15px;
margin-top: 25vh;
text-align: center;
}
#authBlock button:hover {
       background: var(--clr-blue-alt);
    
}
#authBlock h1 {
    color: #fff;
}

#authBlock div {
padding: 15px;
}

#authBlock input {
border: solid 1px #eee;
border-radius: 1rem;
color: var(--clr-blue);
margin-top: 5px;
padding: .5rem 1rem;
font-size: 1rem;
width: 80%;
}

/*#authBlock button {
background-color: #264F36;
color: #fff;
border: 0;
border-radius: 5px;
padding: 5px 15px;
font-size: 14pt;
font-weight: 400;
}*/

.errorText {
color: #900;
}

.grid {
width: 100%;
border-collapse: collapse;
}

.grid td {
border-bottom: 1px solid #eee;
padding: .5rem;
font-weight: 200;
}

.grid tr:hover td {
background-color: #eee;
/*cursor: pointer;*/
}

.grid th {
padding: .5rem;
text-align: left;
border-bottom: 1px solid #ccc;
color: var(--clr-blue);
font-weight: normal;
}

.grid a {
color: #264F36;
text-decoration: none;
}

.area {
background-color: #FFF;
border-bottom: 8px solid #DDDDDD;
padding: 15px;
margin-top: 25px;
min-height: 300px;
position: relative;
}

.area.menuBar {
min-height: 0px;
}

.area.menuBar select {
float: right;
padding: 5px 10px;
font-size: 16pt;
font-weight: 400;
color: #1d1d1d;
border: 1px solid #999;
}

.area ul.properties {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
position: absolute;
bottom: 5px;
left: 5px;
right: 235px;
}

.area ul.properties li {
display: inline-block;
margin: 5px;
padding: 0px;
width: 135px;
height: 100px;
border: 1px solid #eee;
position: relative;
}

.area ul.properties li span {
position: absolute;
bottom: 10px;
left: 0px;
right: 0px;
text-align: center;
font-size: 10pt;
}

.area ul.properties li span.number {
bottom: 35px;
text-align: center;
font-size: 24pt;
}

.area ul.properties li span.timeStart {
bottom: 60px;
text-align: center;
font-size: 16pt;
}

.area ul.properties li span.timeEnd {
bottom: 30px;
text-align: center;
font-size: 16pt;
}

.area .areaExtraInfo {
position: absolute;
right: 15px;
top: 15px;
bottom: 15px;
background-color: #eee;
width: 400px;
border-bottom: 8px solid #cccccc;
padding: 10px;
}

.area .openingHoursBlock {
font-size: 10pt;
}

.area .openingHoursBlock table {
border-collapse: collapse;
margin: 0 auto;
}

.area .openingHoursBlock th:first-child {
text-align: right;
padding-right: 10px;
}

.area .openingHoursBlock td {
background-color: #fff;
padding: 8px 10px;
}

.area .openingHoursBlock .currentDay td {
background-color: #dcf7e6;
}

.area .openingHoursBlock th {
font-size: 12pt;
font-weight: 400;
color: #666;
}

.area.files a {
color: #264F36;
font-size: 10pt;
line-height: 20px;
}

.area.files img {
position: relative;
top: 5px;
max-width: 20px;
max-height: 20px;
}

.area.files .fileContainer {
position: absolute;
top: 50px;
left: 10px;
right: 10px;
bottom: 10px;
padding: 5px;
overflow: auto;
}

.area > .notAvailable {
text-align: center;
padding-top: 120px;
color: #999;
}

.area .topRight {
position: absolute;
top: 20px;
right: 20px;
font-size: 12pt;
color: #666;
}

h2, h3 {
font-family: Signika, Roboto, 'Segoe UI', Arial, Verdana;
margin: 0;
padding: 0;
font-weight: 300;
font-size: 20pt;
}

.area .gauge {
max-height: 200px;
}

h3 {
font-size: 16pt;
}

.searchField {
padding: 5px 10px 5px 28px;
width: 100px;
border-radius: 3px;
border: 1px solid #999;
color: #333;
background-image: url('search.png');
background-size: 20px;
background-position: 5px center;
background-repeat: no-repeat;
}

.searchField:focus {
border-color: #333;
}

.switchButtons {
display: inline-block;
}

.switchButtons > div {
display: inline-block;
background-color: #eee;
padding: 6px 10px;
font-size: 9pt;
border: 0;
margin: 0;
border: 1px solid #999;
border-right: none;
cursor: pointer;
color: #999;
font-family: Signika, Roboto, 'Segoe UI', Arial, Verdana;
}

.switchButtons > div:hover {
background-color: #ccc;
color: #1d1d1d;
}

.switchButtons > div:first-child {
border-radius: 5px 0px 0px 5px;
}

.switchButtons > div:last-child {
border-radius: 0px 5px 5px 0px;
border-right: 1px solid #999;
}

.switchButtons > div.switchActive {
background-color: #ccc;
color: #1d1d1d;
}

#restaurantOptions .switchButtons {
margin-left: 15px;
position: relative;
top: -2px;
}

.switchButtons .switchOptionDisabled {
cursor: default;
}

.switchButtons .switchOptionDisabled:hover {
background-color: #eee;
color: #999;
}

#restaurantOptions {
position: absolute;
top: 10px;
right: 10px;
}

#restaurantDiv {
max-height: 500px;
overflow: auto;
padding: 5px;
}

#restaurantDiv th {
position: sticky;
top: -5px;
background-color: #fff;
padding: 5px 2px;
}

.kpiCell {
text-align: right;
}

.kpiHeader, #restaurantDiv th:nth-child(4), #restaurantDiv th:nth-child(5), #restaurantDiv th:nth-child(6), #restaurantDiv th:nth-child(7) {
text-align: right !important;
width: 125px;
}

.smallTitle {
position: absolute;
top: 15px;
right: 15px;
font-size: 12pt;
color: #999;
}

.energyTotals {
border-collapse: collapse;
width: 100%;
}

.energyTotals td {
font-size: 14pt;
text-align: right;
padding: 5px 10px;
line-height: 20pt;
border-bottom: 2px solid #eee;
}

.energyTotals td.percentages {
font-size: 20pt;
color: #264F36;
}

.energyTotals td.percentages.hasError {
color: #900;
}

.energyTotals th {
font-weight: 400;
font-size: 12pt;
color: #666;
text-align: right;
padding-right: 10px;
}

.energyTotals th:first-child {
text-align: left;
border-bottom: 2px solid #eee;
width: 120px;
}

.energyTotals tr:first-child th:first-child {
border: 0;
}

.trashChart {
margin-top: 15px;
}

.trashChart .quarter {
display: inline-block;
position: relative;
width: 120px;
height: 200px;
margin-right: 20px;
}

.trashChart .quarter.currentQuarter {
width: 180px;
margin-right: 0px;
}

.trashChart .quarter .bars {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 100px;
}

.trashChart .quarter .bars > div {
position: absolute;
bottom: 0px;
border-radius: 3px;
}

.trashChart .quarter .bars .myBar {
right: 30px;
width: 25px;
background-color: #264F36;
border-right: 2px solid #1A3725;
z-index: 70;
}

.trashChart .quarter.hasWarning .bars .myBar {
background-color: #FFCC00;
border-right: 2px solid #bb9600;
}

.trashChart .quarter.hasError .bars .myBar {
background-color: #900;
border-right: 2px solid #700;
}

.trashChart .quarter .bars .averageBar {
left: 30px;
width: 25px;
background-color: #ccc;
border-right: 2px solid #aaa;
z-index: 70;
}

.trashChart .quarter.currentQuarter .bars .myBar {
right: 60px;
}

.trashChart .quarter.currentQuarter .bars .averageBar {
left: 60px;
}

.trashChart .middlePointLine {
position: absolute;
left: 0px;
right: -30px;
height: 2px;
background-color: #ccc;
z-index: 12;
}

.trashChart .warningBelowBlock {
position: absolute;
left: 0px;
right: -30px;
height: 2px;
border-top: 2px solid #FFCC00;
background-color: #faf1cf;
z-index: 10;
}

.trashChart .targetBand {
position: absolute;
left: 0px;
right: -30px;
height: 2px;
border-top: 2px solid #98caab;
border-bottom: 2px solid #98caab;
background-color: #d9f7e5;
z-index: 10;
}

.trashChart .currentQuarter .middlePointLine, .trashChart .currentQuarter .warningBelowBlock, .trashChart .currentQuarter .targetBand {
right: -20px;
}

.warningIcon {
background-image: url('Icon-Warning.svg');
background-size: 24px;
position: absolute;
top: -12px;
right: -24px;
width: 24px;
height: 24px;
}

.trashChart .quarter .title {
position: absolute;
bottom: 50px;
left: 0px;
right: 0px;
background-color: #eee;
padding: 5px;
text-align: center;
color: #999;
}

.trashChart .quarter.currentQuarter .title {
color: #333;
border-top: 2px solid #ccc;
height: 80px;
bottom: -10px;
z-index: 100;
}

.trashChart .comment {
position: absolute;
top: 42px;
left: 15px;
text-align: center;
z-index: 9999;
color: #f00;
}

.trashChart .quarter .percentages {
position: absolute;
bottom: 10px;
left: 0px;
right: 0px;
}

.myPercentage {
color: #264F36;
font-size: 18pt;
}

.hasWarning .myPercentage {
color: #bb9600;
}

.hasError .myPercentage {
color: #900;
}

.averagePercentage {
display: inline-block;
color: #999;
font-size: 12pt;
}

.percentages .averagePercentage {
position: absolute;
left: 0px;
bottom: 2px;
width: 70px;
text-align: center;
}

.percentages .myPercentage {
position: absolute;
right: 0px;
bottom: 0px;
width: 70px;
text-align: center;
white-space: nowrap;
}

.trashChart .quarter.currentQuarter .percentages {
z-index: 110;
height: 50px;
bottom: 0px;
}

.currentQuarter .percentages .myPercentage {
top: 0px;
left: 0px;
right: 0px;
width: auto;
font-size: 30pt;
}

.currentQuarter .percentages .averagePercentage {
left: 0px;
right: 0px;
bottom: -15px;
width: auto;
font-size: 12pt;
color: #666;
}

.previousQuarter .myPercentage.isPercentage {
text-align: right;
}

.previousQuarter .averagePercentage.isPercentage {
text-align: left;
}

.statsBar {
background-color: #eee;
border-top: 2px solid #ccc;
padding: 15px;
position: relative;
height: 50px;
}

.statsBar .item {
display: inline-block;
width: 125px;
height: 50px;
text-align: center;
}

.statsBar .item.itemRight1 {
position: absolute;
right: 150px;
}

.statsBar .item.itemRight2 {
position: absolute;
right: 0px;
}

.statsBar .item .number {
color: #264F36;
font-size: 16pt;
}

.statsBar .item .unit {
color: #264F36;
font-size: 14pt;
padding-left: 5px;
}

.statsBar .item .name {
color: #333;
font-size: 14pt;
}

.totalStats {
float: left;
width: 30%;
border-right: 2px solid #eee;
padding-right: 15px;
}

.trashOrganicStats {
float: right;
width: 65%;
}

.orgStats .category {
display: inline-block;
height: 100px;
position: relative;
margin-right: 10px;
}

.totalStats .category {
width: 100%;
height: 125px;
margin-bottom: 10px;
}

.trashOrganicStats .category {
width: 182px;
margin-bottom: 10px;
}

.orgStats .category .percentages .myPercentage {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: initial;
text-align: center;
font-size: 30pt;
}

.totalStats .category .percentages .myPercentage {
font-size: 40pt;
}

.orgStats .category .percentages .averagePercentage {
position: absolute;
bottom: 30px;
left: 0px;
right: 0px;
width: initial;
text-align: center;
}

.totalStats .category .percentages .averagePercentage {
font-size: 20pt;
}

.orgStats .category .title {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #eee;
font-size: 12pt;
color: #666;
padding: 5px;
text-align: center;
}

.category.hasWarning .myPercentage {
color: #bb9600;
}

svg g.tick line {
stroke: #eee;
stroke-width: 1px;
}


.hoverElement {
position: fixed;
z-index: 90000;
background-color: rgba(255,255,255,0.9);
padding: 10px;
text-align: center;
margin-top: -4px;
box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
}

.hoverElement div.date {
font-size: 10pt;
color: #000;
font-weight: 600;
text-align: left;
margin: 0;
padding: 0;
}

.hoverElement div.title {
font-size: 9pt;
color: #1d1d1d;
text-align: left;
border-bottom: 1px solid #000;
}

.hoverElement div.value {
text-align: right;
font-family: Consolas, Courier New, Courier, monospace;
}

.area .hoverText {
position: absolute;
left: 0px;
right: 0px;
bottom: 100%;
height: 0px;
overflow: hidden;
transition: bottom ease-in-out 0.2s, opacity ease-in-out 0.2s;
opacity: 0;
z-index: 999;
}

.area:hover .hoverText {
display: block;
position: absolute;
left: 0px;
right: 0px;
bottom: 105%;
height: auto;
background-color: #fff;
border: 1px solid #264F36;
padding: 5px 15px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.4);
opacity: 1;
}

.area .bigPercentage {
text-align: center;
padding: 30px 5px;
}

.area.smallArea {
min-height: 150px;
}

.area .bigPercentage .myPercentage {
font-size: 32pt;
color: #1d1d1d;
}

.trashChart .savings, .area .areaNote {
background-color: #eee;
margin: 5px;
padding: 10px;
border-bottom: 5px solid #ccc;
color: #666;
text-align: right;
}

.trashChart .savings span, .area .areaNote span {
border: 1px solid #ccc;
padding: 5px 15px;
background-color: #fff;
}

.trashChart .savings.positive span {
color: #0C0;
}

.trashChart .savings.negative span {
color: #700;
}

.area .bigPercentage .noData {
font-size: 12pt;
color: #999;
line-height: 32pt;
}

.hoverElement .extra {
position: relative;
text-align: left;
border: 1px solid #264F36;
width: 200px;
white-space: nowrap;
padding: 5px;
color: #666;
margin-top: 5px;
}

.hoverElement .extra span {
font-weight: 600;
color: #264F36;
position: absolute;
right: 5px;
}

.hoverElement .mainValue {
font-size: 16pt;
}

.commentIcon {
position: absolute;
top: 40px;
right: 15px;
}

.commentIcon svg {
max-width: 30px;
max-height: 30px;
}

.commentIcon svg path {
fill: #264F36 !important;
}

.commentIcon .commentHover {
position: absolute;
top: 20px;
left: -350px;
right: 0px;
background-color: #fff;
box-shadow: rgba(0,0,0,0.4) 0px 4px 10px;
height: 0px;
overflow: hidden;
z-index: 1000;
padding: 5px;
border: 1px solid #264F36;
opacity: 0;
transition: top ease-in-out 0.2s, opacity ease-in-out 0.2s;
}

.commentIcon:hover .commentHover {
height: auto;
top: 30px;
opacity: 1;
display: block;
}


.passwordNote {
background-color: #eee;
border-radius: 5px;
font-size: 10pt;
color: #1d1d1d;
display: inline-block;
padding: 10px;
margin-top: 5px;
}

.formStyle > div {
padding: 5px;
}

.formStyle input[type=text], .formStyle input[type=password] {
width: 250px;
margin-top: 5px;
padding: 5px 10px;
font-size: 14pt;
}

.formStyle button {
background-color: #264F36;
color: #fff;
border: 0;
border-radius: 5px;
padding: 5px 15px;
font-size: 14pt;
font-weight: 400;
}

.areaButton {
display: block;
max-width: 400px;
text-decoration: none;
padding: 15px;
border-left: 5px solid #ccc;
background-color: #eee;
color: #1d1d1d;
font-size: 12pt;
margin-bottom: 5px;
transition: all ease-in-out 0.2s;
}

.areaButton:hover {
border-color: #999;
padding-left: 20px;
}
footer {
margin-top: 1rem;
font-size: .9rem;
}

.Element-FormsPercentage, .Element-Number {
    text-align: right;
}