html {
  --search-input-background-color: rgba(40, 42, 42, 1);
  --main-background-color: rgb(55, 57, 55);
  --main-background-color-light: rgba(82, 91, 91, 1);
  --main-font-color: lightgrey;
  --pospro-action-btn: rgba(82, 91, 91, 1);
  --menu-btn-font-color: rgb(31, 191, 11);
  --search-control-radius: 5px;
}

/* SCROLLBAR */
 ::-webkit-scrollbar {             /* Track */
   width: 10px;
 }
 ::-webkit-scrollbar-track {       /* Handle */
   background: #f1f1f1;
 }
 ::-webkit-scrollbar-thumb {       /* Handle on hover */
   background: #888;
 }
 ::-webkit-scrollbar-thumb:hover { /* Hovering on the thumb */
   background: #555;
 }


.container {
  /* background-color: gray; */
  display: grid;
  /* min-height: 300px; */
  height: 100vh;
  font-size: 1.5em;
  grid-template-columns: 1fr;
  grid-template-rows: 50px auto auto 1fr auto;
  /* grid-gap: 5px;
  margin: 10px; */
  grid-template-areas:
      "toolbar"
      "menu"
      "content"
}

/* BUTTON */
.pospro-action-btn {
  background: transparent;
  border: none;
  transition: all 0.15s ease-in-out;
  padding: .375rem .75rem;
  font-size: 1rem;
  color: rgba(72, 72, 72, 1);
  border-radius: 0;
}
.pospro-action-btn:hover, .pospro-action-btn:focus {
  background-color: rgba(82, 91, 91, 0.9);
  color: whitesmoke;
}
.disabled-button {
  background: transparent;
  color: darkgrey;
}
.disabled-button:hover {
  background: transparent;
  color: darkgrey;
  cursor: default;
}
.linked-button {
  border: none;
  background: none;
  color: blue;
  font-size: 1em;
}
.linked-button:hover {
  cursor: pointer;
  text-decoration: underline;
}

/*** New button class style ****/
/*
.npos-button {
  padding: 7px 10px;
}
*/

/**** hr (horizontal line)*****/
.thin-hr {
  border: none;
  height: 1px;
  background-color: lightgrey;
}

/* TABLE */
.striped-table tbody:nth-child(even) { background-color: #F7FFF7; }
.table {
  width: 100%;
  flex: 1;
  border-spacing: 0;
}
.table thead tr th {
  text-align: left;
  padding: 10px 15px;
}
.table thead tr th:hover {
  background-color: #F0F0F0; /*#2222FA;*/ /*rgba(0, 20, 200, 0.7);*/
  color: black;
  transition: background-color 0.15s ease-in-out;
  cursor: pointer;
}

.table .empty-header:hover {
  background-color: transparent;
  cursor: default;
}

.table tbody tr:hover {
  cursor: pointer;
  background-color: #F2F2F2; /*rgba(115, 125, 115, 0.8);*/
  color: blue;
  transition: background-color 0.03s ease-in-out;
}
.table tbody tr td { padding: 7px 15px; }


hr {
  border-width: 0.02em;
  border-style: solid;
  color: lightblue;
}

@media (min-width: 600px) {
  .container {
      transition: grid-template-columns 500ms;
      grid-template-columns: 1fr 5fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "toolbar toolbar"
        "menu content"
  }
}

.hide-menu {
  grid-template-columns: 0fr 4fr;
}

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

.no-record-found-alert {
  border: solid red 2px;
  padding: 10px;
  color: red;
}

/* Global Style for settings form */
.modal-content-container.settings {
  margin: 5% auto;
  width: 35%;
}
.modal-content-container.settings .modal-form-contents {
  height: 50vh;
  overflow: auto;
}

.fa-icon-sort { color: lightgrey; }

/* {begin} MessageBox common style attributes */
.messagebox {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  overflow: auto;
  font-size: 1.05rem;
}
.messagebox-content {
  height: 100%;
  flex: 2;
  overflow: auto;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  padding: 5px;
}

.button-container .pospro-action-btn {
  padding: 7px 10px;
  width: 80px;
}
/* {end} MessageBox common style attributes */