.main-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.sidenav-container {
  flex: 1;
}
mat-icon.menu-icon {
  margin-right: 3px;
  color: gray;
}
mat-nav-list.menu-sublist {
  padding-left: 10px;
}
mat-nav-list.menu-sublist > a {
  font-size: small;
}
div.footer {
  text-align: right;
  font-size: smaller;
  color: gray;
  padding-right: 5px;
}
.fill-to-right {
  flex: 1 1 auto;
}
span.topbar-user-name {
  font-size: small;
}
h1.topbar-app-name {
  margin-left: 8px;
}
mat-sidenav {
  width: 200px;
}
mat-card.app-card {
  margin: 5px;
}
.list-container {
  display: flex;
  flex-direction: column;
  min-width: 300px;
  height: 98%;
}
.top-list-container {
  display: flex;
  flex-direction: column;
  min-width: 30vh;
  height: 54vh;
}
.bottom-list-container {
  display: flex;
  flex-direction: column;
  height: 35vh;
}
.table {
  overflow: auto;
  height: 100%;
}
.list-header {
  min-height: 50px;
  padding: 4px 12px 0;
}
.mat-form-field {
  font-size: 14px;
  width: 100%;
}
mat-form-field.detail-input {
  width: 90%;
  text-align: left;
  color: black;
}
mat-form-field.detail-input-full-width {
  width: 96%;
  text-align: left;
  color: black;
}
input[disabled] {
  color: black;
  -webkit-text-fill-color: black;
  opacity: 1; /* required on iOS */
}
textarea[disabled] {
  color: black;
  -webkit-text-fill-color: black;
  opacity: 1; /* required on iOS */
}
.loading-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(100, 100, 100, 0.3);
  z-index: 1400;
}
.loading-img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.flip-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(100, 100, 100, 0.95);
  z-index: 1500;
}
.flip-msg {
  margin: auto;
  text-align: center;
  padding-top: 45vh;
  color: rgb(205, 206, 177);
  font-size: larger;
}
.errorMsg {
  font-size: small;
  margin-top: 10px;
}

/* links */
a:link,
a:visited {
  color: black;
}
.stock-state-error {
  color: red;
  font-weight: bold;
}
.listContainer {
  height: 100%;
  width: 100%;
  overflow: scroll;
}
.listItem {
  height: 40px;
  font-size: medium;
}

.listItem:hover {
  width: 100%;
  cursor: pointer;
  background: rgba(130, 130, 130, 0.2);
}

/* snack bars */
.snack-error {
  background: #f44336;
}

.input-right {
  display: block;
  direction: rtl;
}

.background-red {
  background-color: rgba(255, 0, 0, 0.6);
}

.background-orange {
  background-color: rgba(255, 145, 0, 0.6);
}

.background-green {
  background-color: rgba(0, 255, 0, 0.6);
}

.background-grey {
  background-color: rgba(100, 100, 100, 0.3);
}

.mat-dialog-container {
  padding: 0px !important;
}

.tab-loader {
  width: 25px;
  margin-right: 10px;
}

.cell-border {
  border-left: 1px solid #e0e0e0;
  padding-left: 4px;
}

.cell-background {
  background-color: #eeeeee;
}

.breadcrumbs {
  width: 100%;
  text-align: right;
  font-size: small;
  color: gray;
  margin-top: 0px;
  padding-top: 0px;
}

.breadcrumbs a {
  color: gray;
  text-decoration: none;
}

::ng-deep snack-bar-container.custom-snackbar-error {
  background: #ff3452;
}

::ng-deep snack-bar-container.custom-snackbar-success {
  background: #9ad284;
}

::ng-deep .mat-simple-snackbar {
  color: #000;
}

::ng-deep .mat-simple-snackbar-action {
  color: #000;
}