html {
  background-color: transparent;
}

body {
  font-family: 'Quicksand', sans-serif;
  background: #F6F6F6;
  font-size: 1.2em;
}

.navbar {
  background: #66a6ff;
  background-image: -webkit-linear-gradient(330deg, #66a6ff 0%, #78e5ec 100%);
  background-image: -o-linear-gradient(330deg, #66a6ff 0%, #78e5ec 100%);
  background-image: linear-gradient(120deg, #66a6ff 0%, #78e5ec 100%);
  -webkit-box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.08), 0px 6px 18px 0px rgba(0, 0, 0, 0.05);
          box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.08), 0px 6px 18px 0px rgba(0, 0, 0, 0.05)
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, .75);
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
}

.navbar-dark .navbar-nav .nav-link.active {
  font-weight: bold;
  border-bottom: 3px solid whitesmoke;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: #6EC2F7;
}

/* .always-on-navbar-item {
  flex-direction: row;
} */

.navbar-expand-md .navbar-nav .nav-link {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

button, .add-btn {
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

label {
  margin: .5rem 0;
}

fieldset, table {
  -webkit-box-shadow: 0 6px 15px rgba(36,37,38,0.1);
          box-shadow: 0 6px 15px rgba(36,37,38,0.1);
}

textarea {
  height: auto;
  width: 100%;
  margin-bottom: 0;
}

h1 {
  font-size: 32px;
}

.green-thead {
  background: #59c9c6;
  color: whitesmoke;
}

tbody {
  background: #fff;
}

.selected {
  background-color: rgba(215, 214, 214, 0.56);
}

section {
  margin-top: 40px;
  margin-bottom: 40px;
};

.form-control {
  border-color: #a9a9a9;
}

.fa-bug {
  color: #ff8a1f;
}
input[type=checkbox] {
    display: inline-block;
    margin-bottom: 0;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    /* background-position: center center;
    background-size: contain; */
    -webkit-appearance: none;
    outline: 0;
    border: none;
}

input[type=checkbox]:checked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="checkbox-3-icon" fill="%23fbb371" d="M81,81v350h350V81H81z M227.383,345.013l-81.476-81.498l34.69-34.697l46.783,46.794l108.007-108.005 l34.706,34.684L227.383,345.013z"/></svg>');
}

input[type=checkbox]:not(:checked) {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="checkbox-9-icon" fill="%23fbb371" d="M391,121v270H121V121H391z M431,81H81v350h350V81z"></path> </svg>');
}

.form-control[readonly], #customers .customer-parent, .highlight {
  background-color: rgb(255, 250, 242);
  border: none;
}

/* #customers .customer-parent:hover {
  background-color: #eee;
} */

.pencil-edit-name {
  margin-left: 0.6rem;
  color: #f68ba2;
}

.pencil-edit-name:hover, .fa-refresh:hover {
  cursor: pointer;
}

.add-btn, .add-btn:focus {
  color: #fff;
  background: #59c9c6;
}

.add-btn:hover {
  background: #4fafac;
}

.remove-btn {
  color: #f68ba2;
  border-color: #f68ba2;
}

.remove-btn:hover, .remove-btn:focus {
  background-color: #f68ba2;
}

.remove-btn, .add-btn {
  border: 1px solid;
  border-radius: 5px;
  height: 38px;
  cursor: pointer;
}

.remove-btn:hover, .remove-btn:focus {
  color: #eee;
  border-color: #fff;
}

/* horizontal line with text in the middle. See item jq dialog for example */
.hr-sect {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	color: #000;
	font-size: 16px;
	margin: 8px 0px;
}

.hr-sect::before,
.hr-sect::after {
	content: "";
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	background: rgba(0, 0, 0, 0.35);
	height: 1.1px;
	font-size: 0px;
	line-height: 0px;
	margin: 20px;
}

.hr-sect::before {
  margin-left: 0;
}

.hr-sect::after {
  margin-right: 0;
}

/* add the red * in for required field */
.asterisks-for-required::before {
  content: '*';
  color: #ff0000;
  padding-right: 5px;
}


.required {
  border-color: #ff0000;
}

input {
  width: 100%;
}

fieldset {
  background-color: white;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 5px 20px 25px;
  margin: 20px auto;
}

legend {
  width: auto;
  padding: 0 15px;
  text-align: center;
}

/* hide the up down arrows for number input fields */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

/******************* FOR DAILY PAGE *********************/

#daily i[class^="fa fa-angle"] {
  font-size: 30px;
}

#daily input[type=checkbox]:not(.send-to-quickbooks-checkbox), #vendors .include-summary-checkbox {
  position: relative;
  top: 4px;
}

#daily .route-filter {
  margin-top: 10px;
}

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

.radio-container input {
    width: auto;
    display: inline-block;
}

/******************** END OF DAILY PAGE ***********************/


/************************ FOR customer PAGE *************************/

#customer .has-search-icon {
    padding-left: 2.375rem;
}

#customer #customer-inactive-order-table_wrapper {
  margin-bottom: 30px;
}

#customer .customer-picker-in-td {
  width: 100%;
  position: relative;
}

#customer .customer-picker-in-td .customer-search-results {
  left: 0;
  right: 0;
}

#customer .search-icon {
  position: absolute;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  color: #aaa;
}

#customer .customer-info-left-th {
  width: 30%;
}

#customer #customer-customer-info, #daily #daily-order-info, #daily #daily-inactive-order {
  margin-top: 6px;
}

/* #customer .invoice-parent-check-box {
  margin-right: 0.5rem;
} */

/*the following applies to customer page and customers page */
.note-paragraphs {
  white-space: pre-line;
}

#vendors .table > tbody > tr > td, #pricinglevels .table > tbody > tr > td, #departments .table > tbody > tr > td, #routes .table > tbody > tr > td {
  vertical-align: middle;
}
/* .table > tbody > tr > td {
  vertical-align: middle;
}

#customers .table > tbody > tr > td {
  vertical-align: top;
} */


/******************** END OF customer PAGE ***********************/




/************ FOR ORDER SUMMARY PAGE and INVOICE PAGE ***********/

#order-summary .order-summary-table tr th, .th-for-print {
  background-color: black;
  color: whitesmoke;
}

/********** END OF ORDER SUMMARY PAGE and INVOICE PAGE **********/


/********************* FOR CUSTOMERS PAGE ***********************/

#customers .customer-street, #customers .customer-city {
  display: block;
}

#customers table.dataTable tr.group td {
  background-color: #f5f5f5;
}

#customers .customer-parent {
  font-weight: bold;
}

#customers .customer-child > td:first-child {
  padding-left: 4rem;
}

/******************** END OF CUSTOMERS PAGE ********************/


/****************** FOR INVOICE & PACKLINGSLIPS PAGE *******************/

#invoice, #order-summary {
  background: #fff;
}

#invoice .invoice-top {
  position: relative;
}

.rounded-box {
  border: 1px solid;
  border-radius: 10px;
  height: 90px;
  padding-top: 10px;
}


#packingslips table, #order table, #invoice table, #items .add-items-table {
  -webkit-box-shadow: none;
          box-shadow: none;
}

#packingslips div.rounded-box {
  line-height: 1.1;
  padding-top: 3px;
}

#packingslips .rounded-box tbody {
  background-color: inherit;
}

#invoice .invoice-mid {
  min-height: 500px;
}

#invoice .upper-right {
  position: absolute;
  right: 0px;
  top: 0px;
}

.invoice-details th, .invoice-details td {
  text-align: right;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
}


/* item-name kept for backwards compatibility for old invoices */
.invoice-details .left-align, .invoice-details th.item-name, .invoice-details td.item-name {
  text-align: left;
}

/***************** END OF INVOICE & PACKLINGSLIPS PAGE ***************/



/******************* FOR ORDER PAGE *********************/

/* ***
        Customer & Delivery Info Styling
*** */
#order fieldset {
  margin: 40px auto;
}

#order .order-recurring-check-box, #daily .send-to-quickbooks-checkbox {
  position: relative;
  top: 7px;
}

#order .customer-picker {
  margin-bottom: 18px;
}

#order .upcoming-delivery-date {
  position: relative;
  top: -7px;
}
/* ***
        Items Detail Styling
*** */
#order .item-form {
  margin: 20px auto;
}

#order .item-search-container {
  position: relative;
}

#order .item-search-results, .customer-search-results {
  z-index: 99;
  border: 1px solid #a9a9a9;
  border-bottom: none;
  border-top: none;
  background: white;
  position: absolute;
  /* make it same width as the input field above*/
  left: 12px;
  right: 12px;
}

#order .item-search-results {
  /* make it same width as the input field above*/
  top: 86%;
}

.customer-search-results {
  left: 15px;
  right: 15px;
}

#order .item-search-results div, .customer-search-results div {
  border-bottom: 1px solid #a9a9a9;
  padding: 10px;
}

#order .item-search-results div:hover, .customer-search-results div:hover {
  background-color: rgba(215, 214, 214, 0.56);
  cursor: pointer;
}

/* ***
        Notes and Buttons Styling
*** */
/* #order .save-button {
  border: none;
} */

.delete-button {
  margin-top: 20px;
  background-color: #dc3545;
}

.save-as-new-order {
  margin-top: 20px;
  background: #59c9c6;
}

/******************** END OF ORDER PAGE ********************/


/********************* FOR LOGIN PAGE ***********************/

#login {
  height: 100vh;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  /* currently this animated gradient background only apply to login page */
  background: -webkit-linear-gradient(135deg, #66a6ff, #62eed5, #71BEFF, #78e5ec );
  background: -o-linear-gradient(135deg, #66a6ff, #62eed5, #71BEFF, #78e5ec );
  background: linear-gradient(-45deg, #66a6ff, #62eed5, #71BEFF, #78e5ec );
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

#login .form-signin {
  width: 100%;
  max-width: 380px;
  padding: 50px;
  margin: auto;
  background: white;
  border-radius: 20px;
  -webkit-box-shadow: 0 0 30px rgba(242, 242, 242, 0.79);
          box-shadow: 0 0 30px rgba(242, 242, 242, 0.79);
}

#login .form-signin .checkbox {
  font-weight: 400;
}

#login .form-signin .form-control {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}

#login .form-signin .form-control:focus {
  z-index: 2;
}

#login .form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

#login .form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#login .checkbox label {
  position: relative;
  top: -6px;
}

/******************** END LOGIN PAGE ********************/



/******************* FOR BACK TO TOP ICON ******************/

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
    color: #59c9c6;
    border-color: #59c9c6;
}

/******************** END BACK TO TOP ICON ******************/

/**
    **
following styles use !important to force overwrite jQuery Dialog's default style and bootstrap 4's print style.
    **
**/

/*********************** FOR jQuery Dialog *********************/

.ui-widget, .ui-dialog-content form, .ui-dialog-buttonset .ui-button:first-child, .ui-dialog-buttonset .ui-button:last-child {
  border: none;
}

.ui-dialog-content .jq-second-fieldset {
  padding-top: 8px;
}

.ui-dialog-content .jq-second-fieldset .other-price-container:hover {
  background-color: rgba(215, 214, 214, 0.56);
}

.ui-dialog-content .jq-second-fieldset legend {
  font-size: 16px;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none !important;
}

.ui-dialog .ui-dialog-buttonpane {
  padding: .3em .4em .5em .4em;
}

.ui-dialog-content fieldset {
  padding: 30px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.ui-dialog-buttonset .ui-button:first-child, .ui-dialog-buttonset .ui-button:last-child {
  width: 100%;
}

.ui-dialog-buttonset .ui-button:first-child, .ui-dialog-titlebar {
  background: #59c9c6;
  color: whitesmoke;
}

.ui-dialog-buttonset .ui-button:last-child {
  background: #E9ECEF;
}

.check-box-symbol-in-dialog {
  position: relative;
  top: 8px;
}

/* .ui-dialog-buttonset .ui-button:last-child:focus, .ui-dialog-buttonset .ui-button:last-child:focus {
  border-color: #80bdff; !important;
  outline: 0; !important;
  box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); !important;
} */

/******************** END OF jQuery Dialog ********************/


@media print and (color) {
  .table th {
    color: white !important;
    background-color: #000 !important;
    -webkit-print-color-adjust: exact;
  }

  .table .white-th {
    color: black !important;
    background-color: #fff !important;
    -webkit-print-color-adjust: exact;
  }

  .page-break	{
    display: block;
    page-break-before: always;
  }

  .noprint, #back-to-top {
    display: none !important;
  }


}

.modal {
  display: none;
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 300px;
}

/* @media print {
	.page-break	{
    display: block;
    page-break-before: always;
  }
  #back-to-top {
    display: none;
  }
} */