:root {
  --main-color: #424242;
  --surface-color: #7d7d7d;
  --primary-color: #bb86fc;
  --offline-color: #ff9f1a;
  --error-color: #cc6647;
  --background-color: #212121;

  --primary-variant-color: #3700b3;
  --secondary-color: #03dac6;
  --on-dark-surface: #fff;
  --on-dark-surface-subtitle: #d3d3d3;
  --on-light-surface: #000;
  --height-modal-body: 200px;
  --height-padding-modal: 5px;

  --bottle-height-default: 140px;
  --bottle-margin-top-default: 51px;
  --bottle-fill-width-default: 80px;
  --bottle-fill-margin-left-default: 80px;

  --bottle-height-long: 133px;
  --bottle-margin-top-long: 58px;
  --bottle-fill-width-long: 52px;
  --bottle-fill-margin-left-long: 52px;

  --bottle-height-chambord: 100px;
  --bottle-margin-top-chambord: 91px;
  --bottle-fill-width-chambord: 110px;
  --bottle-fill-margin-left-chambord: 110px;

  --bottle-height-havana: 120px;
  --bottle-margin-top-havana: 71px;
  --bottle-fill-width-havana: 60px;
  --bottle-fill-margin-left-havana: 60px;

  --bottle-height-diplomatico: 110px;
  --bottle-margin-top-diplomatico: 81px;
  --bottle-fill-width-diplomatico: 90px;
  --bottle-fill-margin-left-diplomatico: 90px;

  --bottle-height-laphroaig: 120px;
  --bottle-margin-top-laphroaig: 71px;
  --bottle-fill-width-laphroaig: 60px;
  --bottle-fill-margin-left-laphroaig: 60px;

  --bottle-height-paradis: 100px;
  --bottle-margin-top-paradis: 91px;
  --bottle-fill-width-paradis: 110px;
  --bottle-fill-margin-left-paradis: 110px;

  --bottle-height-red-wine: 140px;
  --bottle-margin-top-red-wine: 51px;
  --bottle-fill-width-red-wine: 55px;
  --bottle-fill-margin-left-red-wine: 55px;

  --bottle-height-wine: 140px;
  --bottle-margin-top-wine: 51px;
  --bottle-fill-width-wine: 59px;
  --bottle-fill-margin-left-wine: 59px;

  --bottle-height-aperol: 140px;
  --bottle-margin-top-aperol: 51px;
  --bottle-fill-width-aperol: 59px;
  --bottle-fill-margin-left-aperol: 59px;

  --bottle-height-kahlua: 140px;
  --bottle-margin-top-kahlua: 51px;
  --bottle-fill-width-kahlua: 59px;
  --bottle-fill-margin-left-kahlua: 59px;

  --bottle-height-hendricks: 140px;
  --bottle-margin-top-hendricks: 51px;
  --bottle-fill-width-hendricks: 95px;
  --bottle-fill-margin-left-hendricks: 95px;

  --bottle-height-tanqueray: 140px;
  --bottle-margin-top-tanqueray: 51px;
  --bottle-fill-width-tanqueray: 66px;
  --bottle-fill-margin-left-tanqueray: 66px;

  --bottle-height-beer-keg: 123px;
  --bottle-margin-top-beer-keg: 69px;
  --bottle-fill-width-beer-keg: 99px;
  --bottle-fill-margin-left-beer-keg: 99px;

  --bottle-height-sack: 95px;
  --bottle-margin-top-sack: 96px;
  --bottle-fill-width-sack: 111px;
  --bottle-fill-margin-left-sack: 111px;

  --bottle-height-package: 140px;
  --bottle-margin-top-package: 51px;
  --bottle-fill-width-package: 66px;
  --bottle-fill-margin-left-package: 66px;

  --bottle-height-cocktail: 80px;
  --bottle-margin-top-cocktail: 111px;
  --bottle-fill-width-cocktail: 110px;
  --bottle-fill-margin-left-cocktail: 110px;
}

.noSelect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

html,
body,
option {
  font-family: "Roboto", "Helvetica", sans-serif;
  background-color: var(--background-color);
}

input {
  font-family: "Roboto", "Helvetica", sans-serif;
}

body {
  -webkit-text-size-adjust: 100%;
}

hr {
  height: 0;
  margin: 0;
}

ul {
  margin-block-start: 0.5em;
}

.demo-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
  color: rgba(0, 0, 0, 0.54);
}
.mdl-layout__drawer .avatar {
  margin-bottom: 16px;
}
.demo-drawer {
  border: none;
}
/* iOS Safari specific workaround */
.demo-drawer .mdl-menu__container {
  z-index: -1;
}
.demo-drawer .demo-navigation {
  z-index: -2;
}
/* END iOS Safari specific workaround */
.demo-drawer .mdl-menu .mdl-menu__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.demo-drawer-header {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 16px;
  height: 151px;
}
.demo-avatar-dropdown {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.demo-navigation {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.demo-layout .demo-navigation .mdl-navigation__link {
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 500;
}
.demo-layout .demo-navigation .mdl-navigation__link:hover {
  background-color: var(--main-color);
  color: #37474f;
}
.demo-navigation .mdl-navigation__link .material-icons {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.56);
  margin-right: 32px;
}

.demo-content {
  max-width: 1080px;
}

.demo-charts {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.demo-chart:nth-child(1) {
  color: #acec00;
}
.demo-chart:nth-child(2) {
  color: #00bbd6;
}
.demo-chart:nth-child(3) {
  color: #ba65c9;
}
.demo-chart:nth-child(4) {
  color: #ef3c79;
}
.demo-graphs {
  padding: 16px 32px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
/* TODO: Find a proper solution to have the graphs
 * not float around outside their container in IE10/11.
 * Using a browserhacks.com solution for now.
 */
_:-ms-input-placeholder,
:root .demo-graphs {
  min-height: 664px;
}
_:-ms-input-placeholder,
:root .demo-graph {
  max-height: 300px;
}
/* TODO end */
.demo-graph:nth-child(1) {
  color: #00b9d8;
}
.demo-graph:nth-child(2) {
  color: #d9006e;
}

.demo-cards {
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}
.demo-cards .demo-separator {
  height: 32px;
}
.demo-cards .mdl-card__title.mdl-card__title {
  color: white;
  font-size: 24px;
  font-weight: 400;
}
.demo-cards ul {
  padding: 0;
}
.demo-cards h3 {
  font-size: 1em;
}
.demo-updates .mdl-card__title {
  min-height: 200px;
  /*background-image: url("images/dog.png");*/
  background-position: 90% 100%;
  background-repeat: no-repeat;
}
.demo-cards .mdl-card__actions a {
  color: var(--main-color);
  text-decoration: none;
}

.demo-options h3 {
  margin: 0;
}
.demo-options .mdl-checkbox__box-outline {
  border-color: rgba(255, 255, 255, 0.89);
}
.demo-options ul {
  margin: 0;
  list-style-type: none;
}
.demo-options li {
  margin: 4px 0;
}
.demo-options .material-icons {
  color: rgba(255, 255, 255, 0.89);
}
.demo-options .mdl-card__actions {
  height: 40px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/*options: start*/
.hide {
  visibility: hidden;
}

.show {
  visibility: visible;
}

.center {
  text-align: center;
  padding: 8px;
}
/*options: end*/

/*Log in Buttons: start*/
.loginBtn {
  box-sizing: border-box;
  position: relative;
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: center;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 4px;
  font-size: 16px;
  color: #fff;
  width: 140px;
}
.loginBtn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
}
.loginBtn:focus {
  outline: none;
}
.loginBtn:active {
  box-shadow: inset 0 0 0 32px rgba(0, 0, 0, 0.1);
}

.logoutBtn {
  box-sizing: border-box;
  position: relative;
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: center;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 4px;
  font-size: 16px;
  color: #fff;
}
.logoutBtn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
}
.logoutBtn:focus {
  outline: none;
}
.logoutBtn:active {
  box-shadow: inset 0 0 0 32px rgba(0, 0, 0, 0.1);
}

/* Facebook */
.loginBtn--facebook {
  background: #4267b2;
}
.loginBtn--facebook:before {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-right: #fff 1px solid;
  /* background: url("../images/icon_facebook.svg") 7px 7px no-repeat; */
  background-color: rgb(235, 235, 235);
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
  background: rgb(230, 230, 230);
}

/* Google */
.loginBtn--google {
  background: #4285f4;
}
.loginBtn--google:before {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-right: #fff 1px solid;
  /*background: url("../images/icon_google.svg") 7px 7px no-repeat;*/
  background-color: rgb(235, 235, 235);
}
.loginBtn--google:hover,
.loginBtn--google:focus {
  background: rgb(230, 230, 230);
}

/* Logout */
.loginBtn--logout {
  background: #f4f4f4;
  color: #000;
  border: #dfdfdf 1px solid;
}
.loginBtn--logout:before {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-right: var(--on-dark-surface) 1px solid;
  background: url(89c00d4d1064a45d5e4c7b9734f9b448.svg) 7px 7px no-repeat;
  background-color: var(--on-dark-surface);
}
.loginBtn--logout:hover,
.loginBtn--logout:focus {
  background: var(--on-dark-surface);
}
/*Log in Buttons: end*/

/* Login */
.loginBtn--login {
  background: #f4f4f4;
  color: #000;
  border: #dfdfdf 1px solid;
}
.loginBtn--login:before {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-right: var(--on-dark-surface) 1px solid;
  background: url(1384178869af923413bcf1c55dc76592.svg) 7px 7px no-repeat;
  background-color: var(--on-dark-surface);
}
.loginBtn--login:hover,
.loginBtn--login:focus {
  background: var(--on-dark-surface);
}
/*Login Buttons: end*/

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  padding-top: 75px; /* Location of the box */
  left: 240px;
  top: 0;
  width: calc(100% - 240px); /* Full width excluding sidebar */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

@media screen and (max-width: 1024px) {
  .modal {
    left: 0;
    width: 100%; /* Full width */
  }
}

@media screen and (min-width: 1025px) {
  .mdl-layout__drawer-button {
    display: none !important;
  }

  #updateNotification {
    width: calc(100% - 240px) !important;
    margin-left: 240px;
  }

  #updateNotification {
    height: 64px;
  }

  main.mdl-layout__content {
    margin-top: 64px !important;
  }
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: -60px auto;
  padding: 0;
  border: 1px solid #888;
  width: 290px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

@media screen and (max-width: 320px) {
  .modal-content {
    width: 90%;
    margin-top: -60px;
  }
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 0px 2px 16px;
  background-color: var(--main-color);
  color: white;
}

.modal-body {
  padding: 2px 16px;
}

.margin-bottom {
  margin-bottom: 0;
}

.list-padding {
  padding: 0px;
}

.color-primary {
  color: var(--primary-color) !important;
}

.color-on-light-surface {
  color: var(--on-light-surface);
}

.color-on-dark-surface {
  color: var(--on-dark-surface) !important;
}

.color-on-dark-surface-subtitle {
  color: var(--on-dark-surface-subtitle) !important;
}

.color-background {
  background: var(--primary-color) !important;
}

.main-color {
  background: var(--main-color) !important;
}

.neutral-color {
  background: var(--on-dark-surface);
}

.top-border {
  border-top: 1px solid var(--surface-color);
}

.progress-height {
  height: 5px;
}

.mdl-progress.mdl-progress--indeterminate > .bar1,
.mdl-progress.mdl-progress__indeterminate > .bar1,
.mdl-progress.mdl-progress--indeterminate > .bar3,
.mdl-progress.mdl-progress__indeterminate > .bar3 {
  background-color: var(--primary-color);
}

.mdl-progress > .bufferbar {
  background-image: linear-gradient(
      to right,
      rgba(66, 66, 66, 0.7),
      rgba(66, 66, 66, 0.7)
    ),
    linear-gradient(to right, var(--primary-color), var(--primary-color));
}

.title-action-height {
  height: 30px !important;
}

.display-flex {
  display: flex;
}

.display-grid {
  display: grid;
}

.display-block {
  display: block;
}

.position-fixed {
  position: fixed;
}

.mdl-grid {
  display: block;
}

.display-none {
  display: none !important;
}

.textfield-style-container {
  padding: 0;
  width: 100%;
  background-color: var(--primary-color);
}

.textfield-style-input {
  text-align: right;
  color: var(--on-light-surface);
  font-weight: bold;
}

.padding-header {
  padding-left: 0px;
  padding-bottom: 0px;
}

.padding-left {
  padding-left: 10px;
}

.item-details {
  margin-top: -15px; /*close icon hight*/
}

.smaller-fab-button {
  height: 20px !important;
  min-width: 20px !important;
  width: 20px !important;
}

.square {
  height: 49px !important;
  width: 55px !important;
  min-width: 55px !important;
  padding-top: 5px;
  border-radius: 0%;
  color: var(--on-dark-surface-subtitle);
}
.circle {
  height: 45px !important;
  width: 45px !important;
  min-width: 45px !important;
  padding-top: 5px;
  border-radius: 50%;
  color: var(--on-dark-surface-subtitle);
  font-size: medium;
  padding-bottom: 4px;
}

.circleAddToCart {
  height: 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  border-radius: 50%;
  color: var(--on-dark-surface-subtitle);
  font-size: medium;
}

.addToCart {
  height: 90px;
  border-radius: 2px;
  margin-top: 55px;
  padding-top: 6px;
  width: 45px;
  background: rgba(158, 158, 158, 0.2);
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
}

#addToCartText {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  margin: -4px 0 5px 0;
  color: var(--on-dark-surface-subtitle);
}

.addToCartIcon {
  position: absolute;
  font-size: 28px;
  margin: 28px 0px 0px 1px;
}

#view-source {
  display: block;
  bottom: 3%;
  right: 5px;
  z-index: 4;
  background-color: rgba(0, 0, 0, 0) !important;
  box-shadow: none !important;
  position: fixed;
}

#rangeslider {
  position: absolute !important;
  z-index: 2 !important;
  -webkit-appearance: slider-vertical !important;
  right: 0% !important;
  width: 99% !important;
  opacity: 0.01 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.slider-line {
  position: absolute;
  margin-left: 4px;
  width: 2px;
  border-radius: 10px;
  background-color: var(--main-color);
}

/*used negative value of height in setting up initial margin top value of handle in js*/
.slider-handle {
  position: absolute;
  height: 14px;
  width: 14px;
  left: -6px;
  border-radius: 3px;
  background-color: var(--primary-color);
  z-index: 1;
}

/* modal body horizontal stacking start*/
.modal-body-container-items {
  height: 100%;
  width: 100%;
  font-size: 0;
  text-align: center;
  background-color: var(--surface-color);
}

.middle,
.right,
.left,
.middle-top,
.right-top {
  display: inline-block;
  vertical-align: top;
  padding-top: var(--height-padding-modal);
}
.left {
  width: 18%;
  height: var(--height-modal-body);
}
.middle {
  width: 62%;
  height: var(--height-modal-body);
}
.right {
  width: 20%;
  height: var(--height-modal-body);
}

.middle-top {
  width: 65%;
  height: var(--height-modal-body);
  text-align: right;
}
.right-top {
  font-size: 16px;
  width: 35%;
  height: var(--height-modal-body);
  color: var(--on-dark-surface);
}
/* modal body horizontal stacking end*/

.fill {
  background: var(--primary-color);
  height: 150px;
  margin-top: -8px;
}

.bottle-background {
  height: var(--height-modal-body);
  margin-top: calc(var(--height-modal-body) * -1);
  background: var(--main-color);
}

.titleHolder {
  padding: 10px 10px 0 10px;
}

.header {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--on-light-surface);
}

.button-holder {
  text-align: center;
  display: grid;
}

#statusHolder {
  background-color: var(--surface-color);
}

#itemList {
  margin-top: -8px;
}

.mdl-layout__drawer-button {
  color: var(--on-dark-surface) !important;
}

#content {
  padding: 0px !important;
}

#content:last-child {
  margin-bottom: calc(7% + 36px);
}

.border-radius {
  border-radius: 2px;
}

.border-radius-top {
  border-radius: 2px 2px 0px 0px;
}

.border-radius-bottom {
  border-radius: 0px 0px 2px 2px;
}

.margin-minus {
  margin: -1px;
}

.display-none-important {
  display: none !important;
}

.details-preview {
  display: block;
  height: auto;
  background: var(--surface-color);
  color: var(--on-dark-surface-subtitle);
}

.columnOne {
  float: left;
  width: 55%;
}

.column {
  float: left;
  width: 22.5%;
}

.rowOne {
  display: flex;
  color: var(--main-color);
  border-bottom: 1px solid var(--on-dark-surface-subtitle);
  font-size: smaller;
  font-weight: 500;
}

.typeHeader {
  color: var(--main-color);
  border-bottom: 1px solid var(--on-dark-surface-subtitle);
}

.typeHeaderTotal {
  color: var(--main-color);
  border-top: 1px solid var(--on-dark-surface-subtitle);
}

.align-end {
  text-align: end;
}

.mdl-list__item-primary-content {
  color: var(--on-dark-surface);
}

.mdl-list__item-sub-title {
  color: var(--on-dark-surface-subtitle) !important;
}

#start-message {
  color: var(--on-dark-surface-subtitle);
}

.keypad {
  font-size: xx-small;
  margin-top: -10px;
  color: var(--surface-color);
}

a {
  color: var(--on-dark-surface-subtitle) !important;
}

/*start toggle keypad letters focus*/
.color-focused {
  color: var(--on-dark-surface-subtitle);
  font-size: small;
  margin-top: 2px;
}

.color-unfocused {
  color: var(--surface-color);
  font-size: x-small;
}
/*end toggle keypad letters focus*/

.hide-input {
  visibility: hidden;
}

#overlay {
  height: 200px;
  position: absolute;
  opacity: 0.5;
  z-index: 2;
}

#closeSearch {
  margin-left: calc(100% - 24px);
  position: absolute;
  z-index: 4;
  top: -24px;
}

.input-holder {
  text-align: center;
  margin-top: 5px;
}

.color-label {
  color: var(--surface-color);
  top: 17px;
}

.login-label {
  color: var(--on-dark-surface-subtitle);
  margin-top: -35px;
  font-size: 12px;
}

.add-new-item-input-padding {
  padding: 10px 0;
}

.add-new-item-input-padding-search {
  padding: 10px 0 0 0;
}

.mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
  color: var(--surface-color);
  top: -5px;
}

.mdl-textfield--floating-label.is-invalid .mdl-textfield__label {
  color: var(--error-color);
}
.mdl-textfield__label:after {
  background-color: var(--surface-color);
  bottom: 10px;
}

.mdl-textfield.is-invalid .mdl-textfield__label:after {
  background-color: var(--error-color);
}

.mdl-textfield__error {
  color: var(--error-color);
  margin-top: 7px;
}

.mdl-textfield.is-invalid .mdl-textfield__input {
  border-color: var(--error-color);
}

.mdl-textfield__input.ingredientInput {
  border-color: var(--surface-color);
}

option {
  background-color: var(--surface-color);
}

#searchItemsHolder {
  position: absolute;
  z-index: 901;
  background: var(--primary-color);
  width: 100%;
}

#fastSearch {
  border-radius: 50%;
  height: 64px;
  padding: 0;
}

.fast-search {
  margin-top: 4px;
  margin-left: 6px;
  font-size: xx-large;
}

.no-margin {
  margin-top: 0px !important;
}

.small-font {
  font-weight: 400;
  font-size: x-small;
}

.vertical-align {
  margin-top: -7px;
}

.login-holder {
  text-align: center;
  margin-top: 15px;
  padding: auto;
}

#quickstart-sign-in-password,
#quickstart-sign-in-email {
  padding-left: 5px;
  width: 180px;
  border-radius: 2px;
  border-bottom: 3px solid var(--primary-color);
}

#quickstart-sign-out {
  z-index: 1000;
}

.width-input {
  width: 180px;
}

#calculationScreen {
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--on-dark-surface);
}

.calculation {
  margin: 4px;
  padding: 6px;
  font-size: 16px !important;
  border-radius: 8px;
  min-width: 44px;
  display: inline-block;
  text-align: center;
  background: var(--background-color);
  border: 2px solid var(--background-color);
}

.calculation.is-active {
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.calculation:empty:before {
  content: "\200b";
}

.itemCostChange {
  text-align: right;
  width: 55px;
  border-radius: 4px;
}

.mdl-list {
  margin-top: -10px;
}

.bottom-border-darker {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.subtitle {
  color: var(--main-color);
}

.padding-bottom {
  padding-bottom: 5px;
}

.dashboard-background-color {
  background-color: var(--surface-color);
}

.dashboardHolder {
  display: block;
  height: auto;
  color: var(--on-dark-surface-subtitle);
  padding: 0 16px 16px 16px;
  margin-top: -10px;
  text-align: end;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: -0.5em;
}

.firstDashboardRow {
  color: var(--main-color);
  list-style: none;
  text-align: end;
}

.firstDashboardColumnNumber {
  float: left;
  width: 5%;
}

.firstDashboardColumn {
  float: left;
  width: 35%;
}

.firstDashboardColumnPercent {
  float: left;
  width: 25%;
}

.firstDashboardDescriptionRow {
  line-height: 10px;
  font-size: 10px;
  text-align: end;
}

.firstDashboardDescriptionRowSpanZero {
  float: left;
  width: 5%;
  color: var(--surface-color);
  border-bottom: 1px solid var(--on-dark-surface-subtitle);
}

.firstDashboardDescriptionRowSpanOne {
  float: left;
  width: 35%;
  border-bottom: 1px solid var(--on-dark-surface-subtitle);
}

.firstDashboardDescriptionRowSpanTwo {
  float: left;
  width: 35%;
  border-bottom: 1px solid var(--on-dark-surface-subtitle);
}

.firstDashboardDescriptionRowSpanThree {
  float: left;
  width: 25%;
  border-bottom: 1px solid var(--on-dark-surface-subtitle);
}

.dashboardRow {
  list-style: none;
}

.dashboardColumnNumber {
  float: left;
  width: 5%;
}

.dashboardColumn {
  float: left;
  width: 35%;
}

.dashboardColumnPercent {
  float: left;
  width: 25%;
}

.dashboardDescriptionRow {
  line-height: 10px;
  font-size: 10px;
}

.dashboardDescriptionRowSpanZero {
  float: left;
  width: 5%;
  color: var(--surface-color);
  border-bottom: 1px solid var(--on-dark-surface-subtitle);
}

.dashboardDescriptionRowSpanOne {
  float: left;
  width: 35%;
  border-bottom: 1px solid var(--on-dark-surface-subtitle);
}

.dashboardDescriptionRowSpanTwo {
  float: left;
  width: 35%;
  border-bottom: 1px solid var(--on-dark-surface-subtitle);
}

.dashboardDescriptionRowSpanThree {
  float: left;
  width: 25%;
  color: var(--surface-color);
  border-bottom: 1px solid var(--on-dark-surface-subtitle);
}

.colorEmpty {
  color: var(--surface-color);
}

.tiny {
  font-size: 1rem;
}

.small {
  font-size: 1.5rem;
}

.infoHolder {
  padding: 0 16px;
  position: absolute;
  margin-top: 15px;
  width: calc(100% - 32px);
  color: var(--main-color);
}

.infoColumnZero {
  float: right;
  width: 25%;
}

.infoColumnOne {
  float: right;
  width: 35%;
}

.infoColumnTwo {
  float: right;
  width: 35%;
}

.infoColumnThree {
  float: right;
  width: 5%;
  color: var(--surface-color);
}

#infoOne,
#infoTwo,
#infoThree {
  margin-right: -10px;
}

.spaceSpan {
  width: 100px;
  color: var(--surface-color);
}

.descriptionHolder {
  background-color: var(--main-color);
  color: var(--on-dark-surface-subtitle) !important;
}

#infoOne,
#infoTwo,
#infoThree {
  padding: 0;
}

.mdl-menu__outline {
  background-color: var(--main-color);
}

.mdl-menu {
  padding: 4px 0;
}

.descriptionItem {
  padding: 0 4px;
  font-size: smaller;
  line-height: 1rem;
  text-align: center;
}

.full-width {
  width: 100%;
}

.countPreview {
  font-size: small;
  font-weight: bold;
}

.spinnerVisual {
  position: absolute;
  left: calc(50% - 14px);
  margin-top: 25px;
}

.mdl-spinner__layer {
  border-color: var(--primary-color) !important;
}

.dashboardContentHeight {
  height: 138px;
}

.full-bottle {
  margin-top: -148px !important;
}

.currentCountLoadingtHeight {
  height: 120px;
}

.stickyMenuItem {
  padding: 0;
  margin: 0;
  width: 48px;
  min-width: 48px;
}

#isMeasurableHolder {
  position: absolute;
  width: 30px;
  margin-left: 10px;
}

.isMeasurableContainer {
  position: absolute;
  width: 25%;
  text-align: start;
  margin-left: 10%;
  margin-top: 5%;
}

.display-inline-flex {
  display: inline-flex;
}

.padding-top-inline {
  padding-top: 5px;
}

.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
  border: 2px solid var(--primary-color);
}

.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
  background: var(--primary-color);
}

.more-holder {
  text-align: center;
}

.padding-left-more {
  padding-left: 12px;
}

.more-buttom {
  padding: 0 5px;
  border-radius: 2px;
}

.line-height {
  line-height: normal;
}

mark {
  background-color: var(--on-dark-surface);
}

.dateButton {
  width: 100%;
}

.messageHolder {
  text-align: center;
  margin-top: -15px;
}

button:disabled,
button:disabled:before {
  opacity: 0.6;
}

.small-magnifier {
  color: var(--primary-color);
}

.small-magnifier-inner {
  margin-left: 1px;
}

.add-two-dig {
  font-size: medium;
  padding-bottom: 5px;
}

.reportLinkHolder {
  padding-top: 10px;
}

.areasHolder {
  padding: 0 5px;
}

.area-button {
  padding: 0 3px;
  border-radius: 0;
  -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.3) !important;
  -moz-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.3) !important;
  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.3) !important;
}

.area-clicked {
  color: var(--main-color) !important;
  -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.3) !important;
  -moz-box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.3) !important;
  box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.3) !important;
}

.mark {
  background-color: var(--primary-color);
  color: var(--on-dark-surface);
}

.loginErrorMessage {
  color: var(--error-color);
}

.settings-body {
  background-color: var(--surface-color);
  padding: 5px;
  color: var(--on-dark-surface);
}

.settings-row {
  padding-top: 5px;
  padding-left: 5px;
}

.settings-buttons {
  text-align: center;
}

.settings-area {
  font-size: x-small;
  min-width: 40px;
  border-right: 1px solid var(--surface-color);
  line-height: 20px;
  height: 20px;
}

.settings-add-area {
  min-width: 20px;
  width: 20px;
  height: 20px;
  float: right;
  border-radius: 50%;
}

.settings-input-area {
  padding-left: 5px;
  width: 50%;
  border-radius: 4px;
}

.settings-input-message {
  font-size: x-small;
  padding-left: 5px;
  line-height: 10px;
}

.settings-width {
  width: 85%;
}

.settings-area-button {
  font-size: x-small;
  min-width: 50px;
  line-height: 20px;
  height: 25px;
}

.settings-button-delete {
  margin-top: -2px;
  height: 19px;
  padding: 1px 0 !important;
  width: 19px;
  min-width: 19px;
}

.settings-icon-delete {
  vertical-align: super !important;
  font-size: 1.2rem;
  margin-left: -1px;
}

.settings-hr {
  margin: 5px 0 0 5px;
}

#invertStickyMenu {
  width: 40px;
  float: right;
  margin-top: -24px;
}

.settings-footer {
  background-color: var(--on-dark-surface-subtitle);
}

.mdl-switch.is-checked .mdl-switch__track {
  background: var(--primary-color);
  opacity: 0.5;
}

.mdl-switch.is-checked .mdl-switch__thumb {
  background: var(--primary-color);
}

.float-left {
  float: left;
}

.mdl-ripple {
  opacity: 0.001 !important;
}

.mdl-layout__container {
  position: relative !important;
}

header.demo-header {
  position: fixed !important;
}

div.demo-drawer {
  position: fixed !important;
}

main.mdl-layout__content {
  margin-top: 55px;
  transition: margin 0.1s;
}

:target {
  display: block;
  position: relative;
  top: -60px;
  visibility: hidden;
}

.sizeIndicator {
  position: absolute;
  background-color: #424242;
}

.sizeIndicatorLarge {
  margin-left: -4px;
  width: 10px;
  height: 3px;
}

.sizeIndicatorSmall {
  margin-left: -1px;
  width: 7px;
  height: 1px;
}

#updateNotification {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  text-align: center;
  width: 100%;
  height: 40px;
  background-color: var(--surface-color);
  margin-top: 56px;
  z-index: 4;
}

.refreshButton {
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  font-size: 12px;
}

#searchScreen {
  background-color: white;
  color: black;
  padding-left: 5px;
  width: calc(100% - 5px);
}

#delete_outline {
  position: absolute;
  right: 1%;
  top: 3px;
  color: black;
}

#hits {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #3a4570;
  font-weight: bold;
}

#hits li {
  padding: 10px 5px 10px 5px;
  border: 1px solid #c4c8d8;
  box-shadow: 0 2px 5px 0 #e3e5ec;
}

#titleText {
  white-space: pre;
}

.orderQuantity {
  display: block !important;
}

.orderQuantityButtons {
  padding: 0px;
  min-width: 0px;
  border-radius: 50%;
  width: 36px;
}

.orderQuantityNumber {
  display: inline-block;
  width: 20px;
  text-align: center;
}

.maxItemWidth {
  max-width: 205px;
}

.leftModalBodyColumn {
  margin-left: 6px;
}

.mdl-list__item--two-line,
.mdl-list__item-primary-content {
  height: auto !important;
}

.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
  background: var(--primary-color);
}

.mdl-tabs__tab-bar {
  border-bottom: 0px;
}

.leftOffline,
.topOffline,
.rightOffline,
.bottomOffline {
  position: fixed;
  z-index: 1001;
  background: var(--offline-color);
}

.leftOffline {
  width: 2px;
  top: 0;
  left: 0;
  bottom: 0;
}

.topOffline {
  left: 0;
  top: 0;
  right: 0;
  text-align: center;
}

.rightOffline {
  width: 2px;
  top: 0;
  right: 0;
  bottom: 0;
}

.bottomOffline {
  height: 2px;
  left: 0;
  bottom: 0;
  right: 0;
}

#recipeIngredientsSearchResults,
#addItemSearchResults {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: bold;
  color: #3a4570;
  background-color: var(--primary-color);
  text-align: left;
}

#recipeIngredientsSearchResults li,
#addItemSearchResults li {
  padding: 10px 5px 10px 5px;
  border: 1px solid #c4c8d8;
  box-shadow: 0 2px 5px 0 #e3e5ec;
}

#addItemNameDiscard {
  border-bottom: 1px solid #555555;
}

#item-panel input.mdl-textfield__input:disabled {
  color: #c4c4c4;
}

.recipeButtons {
  padding-top: 5px;
  float: none;
}

.longPress {
  position: relative;
}

.longPress::before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  background: linear-gradient(90deg, rgba(125, 125, 125, 0) 75%, #7d7d7d);
}

.recipeIngredient {
  max-width: 70%;
  float: left;
}

.recipeSize {
  max-width: 20%;
  float: left;
}

.recipeIngredientDelete {
  max-width: 10%;
  padding: 12px 0 10px 0;
}

#previousCountsSelect:empty {
  display: none;
}

#previousCountsSelect {
  width: 100%;
  font-size: 16px;
  padding: 5px;
}

#rangesliderOutputPercent {
  position: absolute;
  right: 8%;
  font-size: 10px;
}

#itemListSearch,
#currentCountListSearch {
  width: calc(100% - 12px);
  font-size: 16px;
  padding: 4px;
}

#currentCountListSearch {
  margin-top: 2px;
}

.mdl-layout-title > span {
  color: var(--primary-color);
}

#log-container,
#created-item-container {
  padding: 8px;
  display: flex;
  flex-direction: column;
}

#created-item-filter {
  display: flex;
  padding: 3px;
}

#created-item-filter > div {
  margin: 3px;
  text-align: center;
  border: 1px solid white;
  flex-grow: 1;
}

#created-item-filter > .selected {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.admin-card,
.admin-card-icon,
.admin-card-content,
.admin-card-content-list {
  display: flex;
}

.admin-card {
  margin-bottom: 8px;
  background-color: var(--main-color);
}

.admin-card:last-child {
  margin-bottom: 0px;
}

.admin-card-icon {
  width: 30%;
  max-width: 100px;
  align-items: center;
  justify-content: center;
}

.admin-card-content {
  width: 100%;
  flex-direction: column;
}

.admin-card-content > div {
  padding: 4px;
  flex-grow: 1;
}

.admin-card-content-message {
  white-space: pre-wrap;
}

.admin-card-content-list {
  flex-direction: column;
}

.admin-card-content-search > input {
  margin: 4px;
}

.admin-card-content-search > div > button {
  margin: 4px;
}

.admin-card-content-list > div {
  margin: 4px;
  padding: 4px;
  border: 1px solid white;
  background: var(--background-color);
  flex-grow: 1;
}

.admin-card-content-actions {
  display: grid;
  grid-template-columns: 1fr 3fr 3fr;
}

.admin-card-content-actions > * {
  margin: 4px;
  padding: 4px;
  border: 1px solid white;
  background: var(--background-color);
  text-align: center;
  color: white;
}

.admin-card-x {
  position: absolute;
  right: 8px;
}

/* for taking screenshots (iPhone) start */
/*main.mdl-layout__content,
header.demo-header,
header.demo-header > div.mdl-layout__drawer-button {
  padding-top: 30px !important;
}
.modal {
  padding-top: 140px !important;
}*/
/* for taking screenshots (iPhone) end */

#admin-content {
  padding: 0px !important;
}

#swap-content {
  margin-top: 5px;
}

#versionInfo {
  text-align: right;
}

.reportIcon {
  padding: 2px 4px;
  margin-left: 8px;
  margin-top: 4px;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
}

/* toast */
.toastify {
  padding: 1px 8px;
  color: var(--on-light-surface);
  display: inline-block;
  background: rgba(211, 211, 211, 0.85);
  position: fixed;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  max-width: 80%;
  z-index: 2147483647;
  text-align: center;
  pointer-events: none;
}

.toastify.on {
  opacity: 1;
}

.toast-close {
  opacity: 0.4;
  padding: 0 5px;
}

.toastify-right {
  right: 15px;
}

.toastify-left {
  left: 15px;
}

.toastify-top {
  top: -150px;
}

.toastify-bottom {
  bottom: -150px;
}

.toastify-rounded {
  border-radius: 25px;
}

.toastify-avatar {
  width: 1.5em;
  height: 1.5em;
  margin: -7px 5px;
  border-radius: 2px;
}

.toastify-center {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  max-width: fit-content;
}

@media only screen and (max-width: 768px) {
  .toastify-right,
  .toastify-left {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
  }
}

/* desktop-only class */
/*@media screen and (max-width: 767px) {
  .desktop-only,
  .demo-layout .demo-navigation .mdl-navigation__link.desktop-only {
    display: none !important;
  }
}*/

#pendingInvoicesList {
  padding: 4px;
}

#pendingInvoicesList > div {
  background-color: var(--main-color);
  margin-bottom: 4px;
}

#pendingInvoicesList > div:last-child {
  margin-bottom: 0px;
}

#pendingInvoicesList > div > div:first-child {
  border-right: 6px solid rgba(255, 255, 0, 0.6);
  border-radius: 5px;
}

#pendingInvoicesList > div {
  border-radius: 0 5px 5px 0;
}

.moreInfoBorder {
  border-right: 6px solid rgba(255, 165, 0, 0.6) !important;
  border-radius: 0 5px 0 0 !important;
}

.resolvedBorder {
  border-right: 6px solid rgba(0, 128, 0, 0.6) !important;
  border-radius: 0 5px 0 0 !important;
}

.display-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.invoice-icon {
  position: absolute;
  right: 9px;
}

.invoice-card-total {
  padding: 8px;
}

.invoice-card-total > .value {
  margin-left: 4px;
  color: var(--primary-color);
}

.invoice-img {
  flex: none;
  margin: 8px;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.invoice-img > img {
  max-width: 100%;
  max-height: 100%;
}

.invoice-text {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.invoice-text,
.invoice-details {
  padding: 8px;
  white-space: pre-wrap;
}

.is-blinking {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.invoice-text.resolved {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.invoice-details {
  display: grid;
  grid-template-columns: 3fr 1fr 0.5fr;
  box-shadow: inset 0 8px 8px -8px #000000;
  background: var(--background-color);
}

.invoice-details > div {
  padding: 8px;
}

.invoice-details > div:nth-child(6n + 4),
.invoice-details > div:nth-child(6n + 5),
.invoice-details > div:nth-child(6n + 6) {
  background: var(--main-color);
}

.invoice-details > div:nth-child(3n + 2),
.invoice-details > div:nth-child(3n + 3) {
  text-align: right;
}

.invoice-details > div:nth-child(-n + 3) {
  font-size: 12px;
  font-weight: bold;
}

.invoice-details > div:nth-last-child(-n + 2) {
  font-style: italic;
  font-weight: bold;
}

.invoice-details > div:last-child {
  grid-column: 2/4;
}

.invoice-expander {
  text-align: center;
  line-height: 0;
  color: var(--primary-color);
}

.invoice-expander > i::before {
  content: "expand_more";
}

.invoice-expander > i.expanded::before {
  content: "expand_less";
}

/*****/

#invoices-container {
  padding: 8px;
}

#invoices-container > div {
  margin-bottom: 8px;
  background-color: var(--main-color);
}

#invoice-container > div:last-child {
  margin-bottom: 0px;
}

#invoices-container-filter {
  display: flex;
  padding: 3px;
}

#invoices-container-filter > div {
  width: 100%;
  text-align: center;
  border: 1px solid white;
  margin: 3px;
}

#invoices-container-filter > div.selected {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.invoice-card-img {
  max-width: 40%;
  max-height: 400px;
  transition: max-width 0.1s;
}

.invoice-card-img.expanded {
  max-width: 100%;
  max-height: initial;
}

.invoice-card-fields {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.invoice-card-fields > div {
  margin-bottom: 8px;
}

.invoice-card-fields > div:last-child {
  margin-bottom: 0px;
}

.invoice-card-search {
  margin-left: 8px;
  border: 1px solid white;
}

.invoice-card-search-list,
.invoice-card-items {
  display: flex;
  flex-direction: column;
  padding: 4px;
  flex-grow: 1;
}

.invoice-card-items > div,
.invoice-card-search-list > div {
  margin: 4px;
  padding: 4px;
  background: var(--background-color);
  flex-grow: 1;
}

.invoice-card-items > div {
  border: 1px solid white;
}

.invoice-card-search-list > div {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.invoice-card-item-input,
.invoice-card-item-total {
  margin-right: 20px;
}

.invoice-card-item-input > input {
  width: 80px;
}

.invoice-card-item-remove {
  position: absolute;
  right: 17px;
  margin-top: -2px;
}

.invoice-card-save {
  margin: 8px;
}

@media screen and (max-width: 1024px) {
  .invoice-card-item {
    flex-direction: column;
  }

  .invoice-card-item > div {
    margin-bottom: 4px;
  }

  .invoice-card-item > div:last-child {
    margin-bottom: 0px;
  }

  .invoice-card-item-input {
    margin-right: initial;
  }
}

/******/

#image-modal {
  position: fixed;
  z-index: 10;
  left: 240px;
  top: 0;
  width: calc(100% - 240px);
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.75);
}

#image-modal > img {
  max-width: 75%;
  max-height: 90%;
}

@media screen and (max-width: 1024px) {
  #image-modal {
    left: 0;
    width: 100%; /* Full width */
  }

  #image-modal > img {
    max-width: 90%;
  }
}

/******/

#reports-container {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

#reports-container > div {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/******/

#suppliers-container {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

#suppliers-container > div {
  margin-bottom: 8px;
}

#suppliers-container > div:last-child {
  margin-bottom: 0px;
}

/******/

.button-text {
  vertical-align: super;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 36px;
}

.light-button-raised {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/********/

.mdl-radio__inner-circle {
  background: var(--primary-color) !important;
}

.mdl-radio__outer-circle {
  border: 2px solid var(--main-color) !important;
}

.mdl-radio.is-checked .mdl-radio__outer-circle {
  border: 2px solid var(--primary-color) !important;
}

/********/