/*
  ----  Import css files  ----
*/
/* navigation */
@import "navigation.css";
/* views */
@import "loginView.css";
@import "firstUseView.css";
@import "dashboardView.css";
@import "wifiHubView.css";
@import "alertsView.css";
@import "statisticView.css";
@import "transferView.css";
@import "accountingView.css";
@import "userView.css";
@import "ownerView.css";
@import "activityView.css";
@import "profileView.css";
@import "helpView.css";
@import "userActivationView.css";
/* components */
@import "machineDiv.css";
@import "ownerDiv.css";
@import "geoLocationDialog.css";

/*
  ----  Create general settings  ----
*/
html {
  /*vaadin overwrite*/
  --lumo-required-field-indicator-color: red;

  /* constant variables */
  --default-Drawer-Offset: 208px;
  --owner-Drawer-Offset: 500px;
  --wifi-hub-Drawer-Offset: 670px;

  --color-jura-coffee-cream: rgb(247, 243, 234);

  --color-border-light-grey: rgb(213, 213, 213);
  --color-grey: rgb(197, 197, 197);
  --color-darkish-grey: rgb(188, 188, 188);

  --color-light-pink: rgb(250, 238, 239);

  --color-warning-yellow-brown: rgb(191, 152, 49);

  --color-text-black: rgb(25, 25, 25);

  --color-panel-light-green: rgb(236, 246, 234);
  --color-panel-green: rgb(110, 186, 90);
  --color-panel-green-opaque: rgba(110, 186, 90, 0);

  --color-panel-light-red: rgb(253, 212, 215);
  --color-panel-red: rgb(227, 9, 22);
  --color-panel-red-opaque: rgba(227, 9, 22, 0);

  --color-panel-light-yellow: rgb(253, 233, 198);
  --color-panel-yellow: rgb(247, 166, 25);
  --color-panel-yellow-opaque: rgba(247, 166, 25, 0);

  --color-panel-light-grey: rgb(227, 229, 244);
  --color-panel-grey: rgb(102, 109, 123);
  --color-panel-grey-opaque: rgba(102, 109, 123, 0);

  --color-background-off-white: rgb(250, 250, 250);

  /* default font settings */
  font-size: 13px;
  font-weight: 300;
}

body {
  /*Originally arial light, but font is not generally available. Solution?*/
  font-family: "Gothic A1";
  background-color: var(--color-jura-coffee-cream);
}

.white-background {
  background-color: white;
}

.full-screen {
  display: block;

  width: 100%;
  height: 100%;
}

/*allows centring of the element*/
.screen-centered {
  position: absolute;

  /*vertical center*/
  top: 42%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

  /*horizontal center*/
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.horizontal-center {
  margin-left: auto;
  margin-right: auto;
}

/*creates a dim, rounded border*/
.rounded-border {
  border-style: solid;
  border-color: var(--color-border-light-grey);
  border-width: 1px;
  border-radius: 4px;
}

/*general text classes*/
.boldLabel {
  font-weight: 500;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

/*Define vaadin side navigation*/
vaadin-side-nav-item::part(link){
  border-radius: 0px;
}

/*hover over menu item*/
vaadin-side-nav-item::part(content):hover {
  background: #ededed;
  color: #666d7b;
}

vaadin-side-nav-item::part(link):hover {
  background: #ededed;
  color: #666d7b;
}

vaadin-side-nav-item:hover > vaadin-icon {
  background: #ededed;
  color: #666d7b;
}

/*selected menu item*/
vaadin-side-nav-item::part(content):is([current]) {
  background: #f7f3ea;
  color: #666d7b;
}

vaadin-side-nav-item:is([current])::part(link) {
  background: #f7f3ea;
  color: #666d7b;
}

vaadin-side-nav-item:is([current]) > vaadin-icon {
  background: #f7f3ea;
  color: #666d7b;
}

/*Define vaadin icons*/
vaadin-icon {
  color: black;
}

/*Define standard text field look*/
vaadin-text-field {
  padding-top: 0px;
}

vaadin-text-field::part(label) {
  font-size: 13px;
  padding-bottom: 10px;
  font-weight: 300;
  color: black;
}

vaadin-text-field::part(input-field) {
  border: 1px solid var(--color-grey);
  background-color: white;
  height: 32px;
  color: black;
  font-weight: 300;
}

/*Define standard number field look*/
vaadin-number-field {
  padding-top: 0px;
}

vaadin-number-field::part(label) {
  font-size: 13px;
  padding-bottom: 10px;
  font-weight: 300;
  color: black;
}

vaadin-number-field::part(input-field) {
  border: 1px solid var(--color-grey);
  background-color: white;
  height: 32px;
  color: black;
  font-weight: 300;
}

/*Define standard password field look*/
vaadin-password-field {
  padding-top: 0px;
}

vaadin-password-field::part(label) {
  font-size: 13px;
  padding-bottom: 10px;
  font-weight: 300;
  color: black;
}

vaadin-password-field::part(input-field) {
  border: 1px solid var(--color-grey);
  background-color: white;
  height: 32px;
  color: black;
  font-weight: 300;
}

/*Define standard email field look*/
vaadin-email-field {
  padding-top: 0px;
}

vaadin-email-field::part(label) {
  font-size: 13px;
  padding-bottom: 10px;
  font-weight: 300;
  color: black;
}

vaadin-email-field::part(input-field) {
  border: 1px solid var(--color-grey);
  background-color: white;
  height: 32px;
  color: black;
  font-weight: 300;
}

/*Define standard text area field look*/
vaadin-text-area {
  padding-top: 0px;
}

vaadin-text-area::part(label) {
  font-size: 13px;
  padding-bottom: 10px;
  font-weight: 300;
  color: black;
}

vaadin-text-area::part(input-field) {
  border: 1px solid var(--color-grey);
  background-color: white;
  color: black;
  font-weight: 300;
}

/*Define standard date picker field look*/
vaadin-date-picker {
  padding-top: 0px;
}

vaadin-date-picker::part(label) {
  font-size: 13px;
  padding-bottom: 10px;
  font-weight: 300;
  color: black;
}

vaadin-date-picker::part(input-field) {
  border: 1px solid var(--color-grey);
  background-color: white;
  height: 32px;
  color: black;
  font-weight: 300;
}

/*Define standard time picker field look*/
vaadin-time-picker {
  padding-top: 0px;
}

vaadin-time-picker::part(label) {
  font-size: 13px;
  padding-bottom: 10px;
  font-weight: 300;
  color: black;
}

vaadin-time-picker::part(input-field) {
  border: 1px solid var(--color-grey);
  background-color: white;
  height: 32px;
  color: black;
  font-weight: 300;
}

/*Define standard vaadin button look*/
vaadin-button {
  /*define button size*/
  height: 30px;

  /*define button border*/
  border: 1px solid ;
  border-radius: 4px;
  border-color: var(--color-grey);
  border-bottom-color: var(--color-darkish-grey);

  /*define button text*/
  color: black;
  font-weight: 300;
}

vaadin-button[disabled] {
  opacity: 0.5;
}

vaadin-button[theme~="primary"] {
  /*define button color*/
  background-color: var(--color-panel-grey);

  /*define button border*/
  border-color: rgb(80, 86, 97);
  border-bottom-color: rgb(70, 75, 85);
  border-top-color: rgb(86, 92, 104);

  /*define button text*/
  color: white;
  font-size: 14px;
  font-weight: 400;
}

vaadin-button[theme~="success"] {
  /*define button color*/
  background-color: rgb(86, 159, 66);

  /*define button border*/
  border-color: rgb(67, 125, 52);
  border-bottom-color: rgb(59, 113, 45);
  border-top-color: rgb(72, 131, 56);

  /*define button text*/
  color: white;
  font-size: 14px;
  font-weight: 400;
}

vaadin-button[theme~="primary"] > vaadin-icon {
  /*define icon color*/
  color: white;
}

vaadin-button[theme~="success"] > vaadin-icon {
  /*define icon color*/
  color: white;
}

vaadin-button[theme~="tertiary"] {
  /*define button color*/
  background-color: var(--color-background-off-white);

  /*define button border*/
  border-color: var(--color-grey);
  border-bottom-color: var(--color-darkish-grey);

  /*define button text*/
  color: var(--color-text-black);
  font-size: 14px;
}

vaadin-button[theme~="error"] {
  /*define button color*/
  background-color: rgb(246, 41, 53);

  /*define button border*/
  border-color: rgb(194, 32, 41);
  border-top-color: rgb(194, 34, 45);
  border-bottom-color: rgb(185, 27, 36);

  /*define button text*/
  color:var(--color-light-pink);
  font-size: 14px;
}

vaadin-button[theme~="error"] > vaadin-icon {
  /*define button text*/
  color: var(--color-light-pink);
}

/*Define standard vaadin checkbox look*/
vaadin-checkbox::part(checkbox) {
  background-color: var(--color-background-off-white);

  border: 1px solid #c5c5c5;
  border-bottom-color: var(--color-darkish-grey);
  border-radius: 4px;
}

vaadin-checkbox::part(checkbox)::after {
  color: var(--color-text-black);
}

/*Define standard vaadin combo box look*/
vaadin-combo-box::part(input-field) {
  border: 1px solid var(--color-grey);
  background-color: white;
  font-weight: 300;
}

/*Define small vaadin combo box look*/
vaadin-combo-box.vaadin-small::part(input-field) {
  border: 1px solid var(--color-grey);
  background-color: white;
  height: 23px;
  font-size: 11px;
  font-weight: 400;
}

vaadin-combo-box.vaadin-small::part(toggle-button) {
  border-left: 1px solid rgb(228, 228, 228);
}

/*Define vaadin confirm dialogs*/
vaadin-confirm-dialog-overlay::part(backdrop) {
  background-color: rgb(0, 0, 0, 66%);
}

vaadin-confirm-dialog-overlay::part(overlay) {
  width: 574px;
}

vaadin-confirm-dialog-overlay::part(header) {
  /*Define position of header*/
  padding-top: 8px;
  padding-bottom: 19px;
  padding-left: 4px;
}

vaadin-confirm-dialog-overlay > [slot="header"] {
  font-size: 14px;
  font-weight: 300;
  color: rgb(126, 126, 126);
}

vaadin-confirm-dialog-overlay::part(message) {
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 31px;

  /*position content at the same x-axis as header*/
  position: relative;
  left: -9px;
}
vaadin-confirm-dialog-overlay::part(footer) {
  background-color: white;
  padding-bottom: 15px;
}

vaadin-confirm-dialog-overlay > [slot="cancel-button"] {
  float: right;
}

/*Define vaadin notifications*/
vaadin-notification-card::part(content) {
  background-color: white;
  color: black;
  font-size: 18px;
  font-weight: 300;
  border-radius: 4px;
}

vaadin-notification-card[theme="error"]::part(content) {
  background-color: red;
  color: white;
}

vaadin-notification-card[theme="warning"]::part(content) {
  background-color: rgb(255, 243, 210);
  color: var(--color-warning-yellow-brown);
}

.vaadin-notification-button {
  position: relative;
  top: 0px;
  border-radius: 100%;
}

.vaadin-notification-error-button > vaadin-icon {
  color: white;
}

.vaadin-notification-warn-button {
  border-color: var(--color-warning-yellow-brown);
}

.vaadin-notification-warn-button > vaadin-icon {
  color: var(--color-warning-yellow-brown);
}

.vaadin-notification-tray-button {
  top: -3px;
  border-color: var(--color-panel-grey);
  height: 26px;
  width: 26px;
}

.vaadin-notification-tray-button > vaadin-icon {
  color: var(--color-panel-grey);
}

.vaadin-notification-tray-header {
  color: var(--color-panel-grey);
  font-size: 18px;
  padding-bottom: 7px;
}

.vaadin-notification-tray-body {
  font-size: 14px;
}

/*Define grid cell content*/
.CaptionLabel {
  font-weight: 400;
}

.LabelInTable {
  font-size: 12px;
  white-space: break-spaces;
}

.LabelCentered {
  text-align: center;
}

.LabelHuge {
  font-size: 18px;
}

.LabelBig {
  font-size: 14px;
}

/*Define vaadin grids*/
vaadin-grid::part(cell) {
  min-height: 32px;
  height: 32px;

  padding-left: 16.5px;
  padding-right: 16.5px;

  font-weight: 300;
  font-size: 13px;

  color: black;

  border-bottom: solid 1px rgb(212, 212, 212);
  border-left: solid 1px rgb(212, 212, 212);
}

vaadin-grid::part(first-column-cell) {
  border-left: none;
}

vaadin-grid::part(header-cell) {
  padding-top: 3px;
  padding-left: 16px;
  padding-right: 16px;

  background-color: var(--color-background-off-white);
  background-image: linear-gradient(to bottom, var(--color-background-off-white) 2%, rgb(239, 239, 239) 98%);
}

vaadin-grid-sorter {
  width: 100%;
}

vaadin-grid-sorter::part(indicators) {
  display: none;
}

vaadin-grid-sorter[direction] {
  color: black;
}

vaadin-grid-sorter[direction]::part(indicators) {
  display: block;
}

vaadin-grid[theme~="row-stripes"]::part(even-row-cell) {
  background-image: none !important;
  background-repeat: repeat-x;
}

vaadin-grid[theme~="row-stripes"]::part(odd-row-cell) {
  background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
  background-repeat: repeat-x;
}

vaadin-grid-cell-content {
  padding: 0;
}

vaadin-grid::part(valid_row) {
	background-color: #ecf6ea;
}

vaadin-grid::part(error_row) {
	background-color: #fdd4d7;
}

vaadin-grid::part(machine_changed_row) {
  background-color: #f7e9d1;
}

vaadin-grid::part(on_validation_row) {
	background-color: #fde9c6;
}

vaadin-grid::part(body-cell) {
  align-items:start;
  padding-top: 7px;
}

/*Define vaadin dialog overlay*/
vaadin-dialog-overlay::part(content) {
  padding: 5px;
}

/*Define vaadin progress bar*/
vaadin-progress-bar {
  margin-top: 2px;
  margin-bottom: 14px;
}

vaadin-progress-bar::part(bar) {
  background-color: lightgrey;
  height: 8px;
}

vaadin-progress-bar::part(value) {
  background-color: var(--color-panel-grey);
  background-image: -webkit-linear-gradient(top, rgb(127, 134, 149) 2%, rgb(79, 84, 95) 98%);
}

vaadin-form-item::part(label) {
  width: 145px;
}

/*define common styles*/
.main-view {
  margin-top: 11px;
  margin-left: 20px;
}

.content-panel {
  background-color: white;

  position: absolute;
  top: 170px;
  bottom: 15px;

  padding: 15px;

  border: 1px solid var(--color-border-light-grey);
  border-radius: 4px;
}

.full-content-panel {
  background-color: white;

  position: absolute;
  top: 10px;
  bottom: 15px;

  padding: 15px;

  border: 1px solid var(--color-border-light-grey);
  border-radius: 4px;
}

.information-panel {
  border: solid 1px lightgrey;
  border-radius: 4px;

  height: 142px;
  width: 775px;
}

/*slider style definition*/
input.slider {
  -webkit-appearance: none;
  height: 4px;
  border-radius: 5px;
  background: lightgrey;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

input.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 1px grey solid;
  border-radius: 50%;
  background: white;
}

input.slider::-ms-thumb {
  width: 15px;
  height: 15px;
  border: 1px grey solid;
  border-radius: 50%;
  background: white;
}

input.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1px grey solid;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}