/* Below is needed to disable momentum scroll on apple products. */
html,
body, md-content {
  -webkit-overflow-scrolling: auto;
  overflow: auto;
  font-size: 13px;
}

md-input-container .md-input.search-input {
  border: 1px solid #ccc;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

md-input-container .md-table-select.search-input {
  border: 1px solid #ccc;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  padding-bottom: 2px;
}

md-select {
  margin: 0px;
}

md-input-container {
  margin: 0px;
  padding: 0px;
}

md-input-container .md-input{
  border-color: #0e4599;
  padding: 0px;
}
md-datepicker {
  margin-right: 0px;
}

md-menu-content {
  max-height: 90vh;
}

md-ink-bar {
  height: 2px !important;
  color: #989898 !important;
  background: #989898 !important;
}

.checkboxes > md-checkbox {
  margin: 0;
  padding: 16px;
  min-width: 300px;
  flex: 0 0 auto;
}

md-input-container label:not(.md-container-ignore) {
  position: static;
}

md-input-container .md-errors-spacer {
    min-height: 0;
}

.scroll-list{
  height: 300px;
  overflow-y: true;
}

.md-nav-item:first-of-type{
  margin-left: 0px;
}

.trading-col {
    flex: 0 0 10px;
}

md-card, md-card > md-content{
  background:whitesmoke; /*f4f4f4 E8F4FE*/
}
.ui-grid-header-cell{
  color: rgba(255, 255, 255, 0.87);
  background-color: #185b95;/*008571 98c1d9 */
}

/* Add a space after content for use with ng-repeat spans*/
.addSpace::after {
  content: ' ';
}

/*document history table */
.scroll-x {
  overflow-x: auto;
}


/*animate expand button */
.expand-arrow {
  transition: all .2s ease-in-out;
}
.expand-arrow.ng-animate {
  transition: all 0s;
  transform: scale(1.2);
}
.expand-arrow:hover {
  transform: scale(1.2);
}

.addSpace::after {
  content: ' ';
}

.menu-container {
  height: 100%;
  display: flex;
  justify-content: space-evenly;
}

.menu-container md-icon {
  font-size: 60px;
  margin-bottom: 30px;
  margin-left: -5px;
  margin-top: 40px;
}

.menu-container > div {
  word-wrap: normal;
}

.md-table-pagination{
  /*font-size: 18px;*/
  font-size: inherit;
}

md-tab-item {
  background-color: #f4f4f4;/* E8F4FE*/
}
md-tab-item span{
  color: #000000;
  font-weight: 500;
}

.container {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

md-tab-item:hover{
  background-color: #dfdfdf;
}

 .md-active span{
  /* color: rgba(255,64,129,1); */
  font-weight: bold;
}

.md-title {
  display: flex;
  align-items: center;
}

.md-toolbar-top {
  position: relative;
}

.vertical-alignment {
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: flex-end;
}
.data-alignment div {
  margin-top: -5px;
}

.data-alignment div:last-child{
  margin-bottom: 0px;
}

.data-alignment label:first-child {
  margin-top: 0px;
}
.data-alignment md-input-container>label {
  margin-bottom: -4px;
}
.data-alignment b {
  display: inline-block;
  margin-bottom: 10px;
}
.data-alignment > div > span :nth-child(1) {
  font-weight: bold;
}
.data-alignment > div > span :nth-child(2){
  margin-left: 5px;
}
.data-alignment div > .grid {
  margin-top: 5px;
}
.data-alignment md-select{
  margin-bottom: 5px;
}
.data-alignment md-radio-button .md-label {
  margin-left: 40px;
  margin-top: -22px;
}
.data-alignment md-radio-group {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}
.data-alignment md-input-container > md-select{
  margin-top: 5px;
  margin-bottom: 5px;
}
.user-settings {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: flex-end;
}
.user-settings h4, .user-settings md-list, .user-settings md-tabs{
  margin: 10px;
}

.user-settings md-tabs {
  margin-top: 0;
}
.user-settings b {
  margin: 10px;
}
.user-settings md-input-container {
  margin-left: 10px;
  margin-bottom: 20px;
  width: 96%;
}
.user-settings md-input-container:not(#packID)  {
  padding-right: 10px;
}

.top-margin {
  margin-top: 30px;
}

.header-highlighter {
  background-color: #92c7f3;
  color: #000000;
}
.tab-content {
  margin-left: -7px;
  margin-right: -7px;
}
#add-delivery-icon {
  display: flex;
  margin-top: 35px;
  padding-left: 14px;
}

.data-alignment .time-container {
  margin-top: 5px;;
}

.other-info md-input-container {
  margin-top: -10px;
  margin-bottom: 5px;
}

.time-picker {
  padding-top: 30px;
  padding-left: 5px;
}


.input-container {
  margin-top: 15px;
  margin-bottom: 15px;
}

.reduced-gap div{
  margin-bottom: 5px;
}

.reduced-gap div:last-child{
  margin-bottom: 10px;
}

#top-address-element {
  margin-top: 5px;
}

md-card md-card-header{
  padding: 2px;
  /* margin-bottom: 20px; */
}

#quantity {
  margin-bottom: 5px;
}

md-card md-card-content{
  padding: 2px;
}

.md-card-content-scroll {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.footer-alignment div:nth-child(2){
  margin-left: 0px;
  margin-bottom: 0px;
}

.main-grid {
  height: 93%;
  min-height: 90%;
}

.table-header {
  background-color: lightgray;
}

.table-body tr td {
  max-width: 22em;
}

.menu-icon {
  padding-right: 10px;
}


.toolbar-title {
  margin-left: -25px;
}

.toolbar-buttons {
  margin-right: -30px;
}

.md-headline {
  margin-top: 15px;
}

#materialToolbar {
  height: 70px;
}

.login-menu {
  position: relative;
  top: 4px;
  right: -10px;
}

.login-input:not(md-input-container:first-child) {
  position: relative;
  top: 60px;
  width: 100%;
}

.md-card-user{
  min-width: 95%;
}

.label {
  color: #0b2a45;
}

md-card.md-button {
  font-size: inherit;
  text-align: inherit;
  text-transform: inherit;
  text-decoration:inherit;
}

.md-button.mdi-no-margin{
  margin: 0px;
}

.left-alignment {
  align-items: flex-start
}

.list {
  margin-bottom: 0px;
}

.ui-grid-row, .ui-grid-cell{
  height: auto!important;
}

.ui-grid-cell {
  float: none;
  display: table-cell;
}

.ui-grid-row .ui-grid-cell.ui-grid-row-header-cell {
  background-color: transparent;
  border-bottom: none;
}

.ui-grid-header-cell, .ui-grid-cell-contents {
  /*max-height: 3.5em;*/
  /*white-space: normal;*/
  /*word-break: break-all;*/ /*removed by Joe to prevent wrapping text in header cells from breaking words*/
  /* -ms-text-overflow: clip;
  -o-text-overflow: clip;
  text-overflow: clip; */
}

.ui-grid-description .ui-grid-cell-contents{
  /*white-space: normal;*/
}

.ui-grid-cell-contents{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* number of lines to show */
  line-height: X;        /* fallback */
  max-height: 60px;       /* fallback */
  max-height: X*var(-webkit-line-clamp);
}

.grid-buttons {
  margin-top: 3em;
}

.fill-available {
  height: 100vh;
  /*height: 100%;*/
  /*height: -moz-available;*/          /* WebKit-based browsers will ignore this. */
  /*height: -webkit-fill-available;*/  /* Mozilla-based browsers will ignore this. */
  /*height: fill-available;*/
}

.add-product-button {
  float: left;
  margin-left: 4px;
}

.line-item-number {
  float: right;
  margin-right: 10px;
}

.child-doc-icons{
  width: 60%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.order-icon {
  color: #185b95;
}

md-card-header {
  margin-left: 5px;
}

.ui-grid-menu .ui-grid-menu-mid{
  padding: 0px;
  overflow: auto !important;
}

.ui-grid-menu-inner {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.md-button.tab-button {
  padding:0px;
  height:24px;
  width:24px;
  min-height:24px;
}

md-card-content::-webkit-scrollbar {
  width: 6px;
}
/* Handle */
md-card-content::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background: rgb(196, 195, 195);
}
/* Handle on hover */
md-card-content::-webkit-scrollbar-thumb:hover {
  background: rgb(172, 172, 172);
}

md-card-content md-select:first-child{
 margin-top: 16px;
}

#delivery-select {
  margin-top: 25px;
}

.mdi-close-circle.closeIcon::before{
  color: black;
}

.md-button.tab-button:hover .mdi-close-circle.closeIcon:before{
  color: red;
}

.md-button.md-fab.md-fab-bottom-right {
top: auto;
right: 20px;
bottom: 32px;
left: auto;
position: fixed;
}

input[type="text"].qtyInput {
  border-style: solid;
  border-width: 2px;
  border-color: #185b95;
  border-radius: 4px;
}

.data-alignment md-checkbox.productSelect div{
  margin-top: 0px;
}
.customer-instructions {
  margin-top: -20px;
}

/*for ng date time picker*/
.dtp table.dtp-picker-days tr > td > a.selected,
.dtp table.dtp-picker-days tr > td > a.selected.hilite,
.dtp div.dtp-date, .dtp div.dtp-time, .dtp .dtp-hand.on,
.dtp .dtp-actual-meridien a.selected,
.dtp .dtp-picker-time > a.dtp-select-hour.selected {
  background: #185b95;
}

.dtp table.dtp-picker-days tr > td > a.hilite:not(.selected),
.dtp div.dtp-actual-time.p60 span.selected {
  color: #185b95;
}

.dtp div.dtp-year-btn, .dtp div.dtp-actual-year, .dtp div.dtp-actual-maxtime {
  color: #d0f0f0;
}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
  background: #185b95;
}

.dtp-close{
  font-size: 32px;
}

.dtp-clear{
  /*top: -8px;*/
}

md-menu-content.dtp-month-list {
  background-color: #d0f0f0;
}

md-menu-content.dtp-year-list {
  background-color: #d0f0f0;
}

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

.float-right {
  float: right;
  margin-right: 20px;
}

.product-grid {
  display: flex;
  justify-content: space-evenly;
  align-content: flex-start;
  margin-bottom: 20px;
  max-width: 20%;
}
.product-grid md-checkbox{
  margin-top: 10px;
}
.product-grid div:nth-child(2){
 margin-top: 12px;
 margin-bottom: 30px;
 width:100%
}
.product-grid md-input-container{
  margin-top: -22px;
  width:100%
}

.item-container {
  max-height: 400px;
  overflow-x: auto;
  width: 100%;
}

.product-search {
  padding-bottom: 20px;
  /*position: fixed;*/
  overflow: hidden;
  background-color: whitesmoke;
  z-index: 10;
  width: 98%;
}

.product-search md-input-container {
  width: 98%
}

.item-container::-webkit-scrollbar {
  width: 6px;
}
/* Handle */
.item-container::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background: rgb(196, 195, 195);
}
/* Handle on hover */
.item-container::-webkit-scrollbar-thumb:hover {
  background: rgb(172, 172, 172);
}
.md-card-full-height {
  height: 97%;
}
.dtp-btn-calendar {
  top: 19px;
  left: -15px;
}

.dtp-clear {
  top: 11px;
}

.date-input > label{
  margin-left: 27px;
}

.order-details{
  margin: 10px;
}

.order-details md-input-container {
  width: 95%;
}

.md-sidenav-left {
  width: 225px;
}

.info-sidenav {
  height: 130px;
}

/* .order-details md-input-container {
  max-width: 50px;
} */

/* --- UI Grid --- */
/*word wrap in ui grid*/
.grid .ui-grid-header-cell .ui-grid-cell-contents {
    max-height: 44px;
    white-space: normal;
    -ms-text-overflow: clip;
    -o-text-overflow: clip;
    text-overflow: clip;
}

.ui-grid-viewport {
  height: 330px;
}

.ui-grid-menu-button {
  height: 44px;
  width: min-content;
}

/*force horizontal scrollbar*/
.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
  overflow-y: scroll!important;
}

/*prevent false horizontal overflow*/
.ui-grid-canvas {
  border: 1px;
  border-bottom-color: #d4d4d4;
  border-bottom-style: solid;
}

.ui-grid .ui-grid-render-container-body .ui-grid-canvas {
  margin-left: -2px;
}
.ui-grid .ui-grid-render-container-body .ui-grid-header-canvas {
  margin-left: -2px;
}

.ui-grid .ui-grid-row .ui-grid-cell:first-child {
  padding-left: 7px;
}
/* --- /UI Grid --- */

/*removes background-color from date fields, otherwise different to md-card*/
input[readonly]:not(.cloned-text-input) {
  background-color: unset;
}

/*To make text selectable*/
body {
 -webkit-user-select: text;
.scroll {
    -webkit-user-select: inherit;
  }
}

table.md-table tbody.md-body>tr.md-row, table.md-table tfoot.md-foot>tr.md-row {
  height: 38px;
}
input[readonly]:not(.cloned-text-input) {
  cursor: pointer;
}

.dropdown-highlight md-select-value{
  border-color: #0e4599
}

.no-documents-label {
  display: flex;
  justify-content: center;
  font-size: 30px;
  margin-top: 20px;
  color: gray
}

.line-item-button {
  display: flex;
  min-height: 20px;
}
.line-item-button > .mdi{
  margin-top: -4px;
  padding: 0px;
}

@media only screen and (min-width: 1280px) {
  .title {
    height: 80px;
  }
  .md-title {
    margin-top: 25px;
  }

}
@media only screen and (max-width: 599px) {
  .footer-alignment div:nth-child(2){
    margin-left: 0px;
    margin-bottom: 6px;
  }
  .top-margin {
    margin-top: 0px;
  }
  .order-details md-input-container {
    width: 100%;
  }
}