@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* Fonts for the project */
@font-face {
  font-family: "Roboto";
  src: url('./Fonts/Roboto-Regular.ttf')
}

@font-face {
  font-family: "Lato";
  src: url("./Fonts/Lato-Regular.ttf")
}

@font-face {
  font-family: "Shippori Antique B1";
  src: url("./Fonts/ShipporiAntiqueB1-Regular.ttf")
}
.e-control, .e-css {
  font-family: Roboto, serif !important;
}
/* Top toolbar with text */
.e-custom-toolbar {
  background-color: #ffa31a !important;
  color: black !important;
  font-family: Roboto, sans-serif !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: default !important;
}
.e-custom-toolbar .e-toolbar-items {
  background-color: #ffa31a !important;
  color: black !important;
  font-family: Roboto, sans-serif !important;
  cursor: default !important;
}
.e-toolbar .custom-button {
  background-color: #ffa31a !important;
  cursor: default !important;
  color: black !important;
  border: none !important;
}
.e-folder-name {
  text-align: center !important;
  font-size: 25px;
  cursor: default !important;
}
.e-toolbar .custom-button .e-icons {
  color: #e68a00 !important;
  font-size: 25px !important;
}
.e-control.e-btn.e-lib.e-tbar-btn.e-icon-btn.e-icon-btn {
  background-color: #ffa31a !important;
}
::marker {
  display: none !important;
  visibility: hidden !important;
}
#wrapper .sidebar-menu .e-menu-container {
    height: 0 !important;
}
li {
  list-style-type: none;
}
.e-content-animation {
  margin-left: 5px;
}

.wrapper {
  height: 100vw !important;
}

.e-menu-wrapper .e-menu, .e-menu-container .e-menu {
  background-color: #e8e3dc !important;
  color: black !important;
}

.e-menu-item .e-navigable .e-focused {
  margin-right: 0 !important;
}

.e-menu-wrapper ul .e-menu-item, .e-menu-container ul .e-menu-item {
  padding-left: 15px !important;
}

.e-menu-wrapper .e-menu .e-menu-item .e-menu-url, .e-menu-container .e-menu .e-menu-item .e-menu-url {
  color: black !important;
  font-family: "Shippori Antique B1", serif;
}

  .e-menu-wrapper .e-menu .e-menu-item .e-menu-url, .e-menu-container .e-menu .e-menu-item .e-menu-url:hover {
    text-decoration: underline !important;
  }

.e-menu-wrapper ul .e-menu-item, .e-menu-container ul .e-menu-item {
  font-family: "Shippori Antique B1", serif;
}

  .e-menu-wrapper ul .e-menu-item, .e-menu-container ul .e-menu-item:hover {
    color: black !important;
  }

.sidebar-menu.e-dock.e-close .e-menu-item .e-menu-icon {
  color: black !important;
}

.e-menu-wrapper .e-menu .e-menu-item .e-menu-icon, .e-menu-container .e-menu .e-menu-item .e-menu-icon {
  color: black !important;
  position: relative;
}

/* Side caret that displays sublinks */
.e-menu-wrapper .e-menu .e-menu-item .e-caret, .e-menu-container .e-menu .e-menu-item .e-caret {
  color: gray !important;
  font-size: 2px !important;
  height: 5px !important;
  line-height: 37.5px !important;
}
/* Separator */
.e-menu-wrapper .e-ul .e-menu-item.e-separator, .e-menu-container .e-ul .e-menu-item.e-separator {
  border-bottom-color: black !important;
}
/* Hover menu */
.e-menu-wrapper.e-menu-popup, .e-menu-container.e-menu-popup {
  background-color: #e8e3dc !important
}

.datetimepicker-value-container {
  z-index: 0 !important;
}

.e-lib .e-touch {
  width: 100%;
  height: 100%;
}



#header {
  font-family: 'Shippori Antique B1', ui-serif;
  height: 55px;
  text-align: center;
  color: black;
  background-color: #e38212;
  font-size: 2.5rem;
  position: absolute;
  line-height: 55px;
  padding-right: 10px;
  width: 100vw;
  box-sizing: border-box;
}

.user-specifics {
  position: relative;
}

  .user-specifics .sidebar-item {
    bottom: 0;
  }

a:hover {
  text-decoration: none !important;
}

#offset {
  position: relative;
  /* Adjust these values accordingly */
  top: 5px;
  left: 11px;
  cursor: pointer;
}
#outIcon {
  position: relative;
  /* Adjust these values accordingly */
  top: 4px;
}

.e-sidebar {
  background: #e8e3dc !important;
  border: none !important;
  height: auto !important;
  position: fixed !important;
  margin-top: 45px !important;
  min-height: 100% !important;
}


.log-out {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  border: 0;
  background: transparent;
  position: relative;
  left: 5px;
  padding: 0 12px !important;
}
.sidebar-menu.e-dock.e-close .e-menu-item .log-out {
    padding: 0 !important;
    position: relative !important;
    left: 12px !important;
    margin-right: 8px !important;
}
.sidebar-menu.e-dock.e-close .e-menu-item .text {
  display: none !important;
}
.sidebar-menu.e-dock.e-close .e-menu-wrapper ul .e-menu-item .e-menu-icon, .e-menu-container ul .e-menu-item .e-menu-icon {
  padding: 0 !important;
  margin-right: 5px !important;
  margin-left: 2px !important;
  text-align: center !important;
  vertical-align: -2.5px !important;
  font-size: 1.4rem !important;
}

.sidebar-menu.e-dock.e-close .e-menu-wrapper ul .e-menu-item, .e-menu-container ul .e-menu-item {
  padding-top: 0 !important;
  padding-right: 5px !important;
  margin-bottom: 0.5rem !important;
  padding-left: 12px !important;
  text-align: unset !important;
}
.e-menu-wrapper ul .e-menu-item, .e-menu-container ul .e-menu-item {
    padding-bottom: 1.0rem !important;
}
  .text {
    font-family: "Shippori Antique B1", serif;
    color: black !important;
    font-size: 14px;
    margin-left: 8px;
  }
.text:hover {
    text-decoration: underline;
}


#logIn {
  background-color: blue;
  padding: 3px;
  border-radius: 2.5px;
  color: white;
  text-decoration: none;
  display: inline;
  margin-left: 7.5px;
  position: relative;
  top: 2px;
}

  #logIn:hover {
    box-shadow: 2px 2px 2px #777777;
  }

#hello {
  max-width: 20px;
  margin-left: 10px;
}

#menu {
  letter-spacing: 0.10em;
  font-size: 12px;
  margin-bottom: 20px;
  cursor: pointer;
}

/* Sidebar styles */
.e-sidebar .e-icons::before {
  font-size: 25px;
}

.e-sidebar {
  background-color: #ffad33;
}

  /* dockbar icon Style */
  .e-sidebar .profile::before {
    content: '\e10c';
  }

  .e-sidebar .info::before {
    content: '\e11b';
  }

  .e-sidebar .settings::before {
    content: '\e10b';
  }

  .e-sidebar .expand::before,
  .e-sidebar.e-right.e-open .expand::before {
    content: '\e10f';
  }

  .e-sidebar.e-open .expand::before,
  .e-sidebar.e-right .expand::before {
    content: '\e10e';
  }

  /* end of dockbar icon Style */

  .e-sidebar.e-dock.e-close span.e-text {
    display: none;
  }

  .e-sidebar.e-dock.e-close a#hello {
    display: none;
  }

  .e-sidebar.e-dock.e-close span#outIcon {
    display: none;
  }

  .e-sidebar.e-dock.e-open span.e-text {
    display: inline-block;
    color: black;
    font-family: Lato, sans-serif;
    font-size: 12px !important;
    float: right;
    position: relative;
    top: 16.5px;
    right: 30px;
  }


  .e-sidebar li ul,
  .e-sidebar li ul li ul {
    position: absolute;
    height: auto;
    min-width: 200px;
    padding: 0;
    margin: 0;
    background: #FFF;
    list-style-type: none;
    /*border-top: 4px solid #e67e22;*/
    opacity: 0;
    visibility: hidden;
    transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
    /*top: 130px;*/
    z-index: 1000;
    /* == */
    left: 280px;
    top: 0;
    border-left: 4px solid #e67e22;
    /* == */
  }

    .e-sidebar li ul:before {
      content: "";
      position: absolute;
      /*top: -8px;
  left: 23%;
  border-bottom: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
      /* == */
      top: 25px;
      left: -9px;
      border-right: 5px solid #e67e22;
      border-bottom: 5px solid transparent;
      border-top: 5px solid transparent;
      /* == */
    }

    .e-sidebar li:hover > ul,
    .e-sidebar li ul li:hover > ul {
      display: block;
      opacity: 1;
      visibility: visible;
      /*top: 100px;*/
      /* == */
      left: 250px;
      /* == */
    }
    /*.mcd-menu li ul li {
  float: none;
}*/
    .e-sidebar li ul li a {
      padding: 10px;
      text-align: left;
      border: 0;
      border-bottom: 1px solid #EEE;
      /* == */
      height: auto;
      /* == */
    }




  .e-sidebar ul {
    padding: 0;
  }


  .e-sidebar span.e-icons {
    color: black;
    line-height: 1.6;
  }

.e-open .e-icons {
  margin-right: 16px;
}

.e-open .e-text {
  font-size: 15px;
}


.e-sidebar.e-open .sidebar-item {
  text-align: left;
  padding-left: 15px;
  padding-right: 15px;
  color: #c0c2c5;
}

.e-sidebar {
  background: #ffad33;
  overflow: visible;
  border-radius: 0 5px 5px 0;
  padding-top: 20px;
}
/* Typeahead too wide */
#replaceProduct {
  max-width: 80% !important;
  min-width: 250px !important;
  width: 60% !important;
}
.typeahead-control {
  z-index: 0 !important;
}
.typeahead-container {
  max-width: 70% !important;
  min-width: 280px !important;
  width: 60% !important;
  margin-top: 0 !important;
}


@font-face {
  font-family: 'e-icons';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
  font-weight: normal;
  font-style: normal;
}

.main > div {
  padding: 0 !important;
}
/* end of styles */


html, body {
  font-family: "Shippori Antique B1", sans-serif;
  font-size: .9rem;
  background: white;
  z-index: 0;
}

a, .btn-link {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#wrapper {
  height: 100vh;
}

.top-row {
  z-index: 1;
  height: 3.5rem;
  display: flex;
  align-items: center;
}

.main {
  flex: 1;
}

  .main .top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
  }

    .main .top-row > a, .main .top-row .btn-link {
      white-space: nowrap;
      margin-left: 1.5rem;
    }

    .main .top-row a:first-child {
      overflow: hidden;
      text-overflow: ellipsis;
    }


.sidebar .top-row {
  background-color: rgba(0,0,0,0.4);
}

.sidebar .navbar-brand {
  font-size: 1.1rem;
}

.sidebar .oi {
  width: 2rem;
  font-size: 1.1rem;
  color: black;
  display: inline-block;
  vertical-align: 0 !important;
}

.sidebar .nav-item {
  font-size: 0.9rem;
  padding-bottom: 0.5rem;
}

  .sidebar .nav-item:first-of-type {
    padding-top: 1rem;
  }

  .sidebar .nav-item:last-of-type {
    padding-bottom: 1rem;
  }

  .sidebar .nav-item a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
  }

    .sidebar .nav-item a.active {
      background-color: rgba(255,255,255,0.25);
      color: white;
    }

    .sidebar .nav-item a:hover {
      background-color: rgba(255,255,255,0.1);
      color: white;
    }

.content {
  padding-top: 1.1rem;
}

.navbar-toggler {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-ul .sidebar-item a {
  text-decoration: none !important;
  color: black;
  border-radius: 4px;
  height: 3rem;
  display: flex;
  align-items: center;
  line-height: 3rem;
}

.nav-bar-links {
  text-decoration: none;
  color: black;
}

  .nav-bar-links:hover {
    text-decoration: none;
    color: black;
    background-color: #ffffff;
    border-radius: 5px;
  }

  .nav-bar-links:active {
    text-decoration: none;
    color: white;
    background-color: #565151;
  }

  .nav-bar-links:focus {
    background-color: gray;
  }

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}


.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }

@media (max-width: 767.98px) {
  .main .top-row:not(.auth) {
    display: none;
  }

  .main .top-row.auth {
    justify-content: space-between;
  }

  .main .top-row a, .main .top-row .btn-link {
    margin-left: 0;
  }
  .e-tab .e-content > .e-item.e-active {
  }
  .e-dialog .e-dlg-header {
      font-size: 15px !important;
  }
  .add-edit-note {
    display: block !important;
  }
}

@media (min-width: 768px) {


  .main .top-row {
    position: sticky;
    top: 0;
  }

  .main > div {
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
  }

  .navbar-toggler {
    display: none;
  }

  .sidebar .collapse {
    /* Never collapse the sidebar for wide screens */
    display: block;
  }
}



@media (max-width: 730px) {
  .content {
    width: 88%;
  }

  #header {
    font-size: 40px;
  }

  .site-search.e-input-group.e-control-container.e-control-wrapper {
    width: 150px !important;
  }
}

@media (min-width: 1800px) {
  .content {
    margin-left: 45px;
  }

  #header {
    font-size: 40px;
  }

}

@media (max-width: 450px) {
  .content {
    width: 84%;
  }
  /* Make Typeahead shorter on shorter screens so not to run off screen */
  .typeahead-container {
    min-width: 210px !important;
  }
  h2 {
    font-size: 1.3rem;
  }

  #header {
    font-size: 35px;
  }
}

@media (max-width: 500px) {

  h2 {
    font-size: 1.3rem;
  }

  h3 {
    font-size: 1.25rem !important;
  }

  #header {
    font-size: 25px;
    margin-left: 50px;
  }
}

/* Dialog Styles */
.e-dialog .e-dlg-header {
  font-family: "Shippori Antique B1", serif;
  font-size: 25px;
  font-weight: normal;
}
.e-tab > .e-content { /* only content directly in tab */
  font-size: 13px !important;
  font-family: "Shippori Antique B1", sans-serif;
  font-weight: normal;
  line-height: normal;
  padding: 20px !important;
}
.modal {
    z-index: 4000 !important;
}
.e-tab .e-content .e-item {
  padding-bottom: 25px !important;
}
  .e-tab .e-content hr {
    width: 100% !important;
  }
  #barCode {
    text-align: center;
    margin-left: -20px;
  }

.e-dlg-overlay {
  background-color: #000 !important;
  opacity: 0.5 !important;
}
.e-dialog {
    border-radius: 10px !important;
}

.col-3 {
  display: inline !important;
  font-weight: 800;
  float: left;
  position: relative !important;
  width: 10% !important;
  font-family: "Shippori Antique B1", serif;
}
@media (max-width: 650px) {
  .col-3 {
      display: block !important;
    font-size: 10px;
    font-weight: 900;
    width: 100% !important;
  }
  .e-dialog {
      width: 90% !important;
  }
}
.sub-content {
    margin-left: 0 !important;
}
.e-tab .e-content .e-item {
    margin-left: -25px !important;
    margin-right: -25px !important;
}

@media (max-width: 1300px) {
    .daily-route {
        width: 80% !important;
    }
}
@media (max-width: 1150px) {
    .daily-route {
        width: 97% !important;
    }
}
.e-dialog .e-input-group, .e-dialog .e-input-group.e-control-wrapper {
  width: 55% !important;
  font-family: "Shippori Antique B1", sans-serif;
}
.e-tab .e-tab-header {
  background-color: white !important;
}
.e-tab-wrap {
    background-color: #e8e3dc !important;
}
.e-tab-wrap:hover, .e-tab-wrap:focus {
    color: gray !important;
}
/* Text box and styles */
.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
  width: 100% !important;
  float: left !important;
  padding-right: 6px !important;
}
  .e-input-group input.e-input, .e-input-group textarea.e-input,
  .e-input-group input.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus),
  .e-input-group textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]),
  .e-input-group.e-control-wrapper input.e-input, .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-control-wrapper input.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus),
  .e-input-group.e-control-wrapper textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]) {
    font-family: "Shippori Antique B1", sans-serif !important;
    color: gray;
  }
  .e-btn.e-flat {
    font-family: "Shippori Antique B1", sans-serif !important;
  }
  /* Tab Text */
.e-tab {
  border: 5px solid rgb(173, 255, 47);
}
  .e-tab-text {
    font-size: 15px !important;
    font-family: "Shippori Antique B1", sans-serif !important;
  }
.e-tab .e-tab-header .e-toolbar-items {
  background-color: white !important;
}
/* Toast styles */
@font-face {
  font-family: 'Toast_icons';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRkAAAEoAAAAVmNtYXDnM+eRAAABsAAAAEpnbHlmzVnmlwAAAhgAAAZAaGVhZBEYIl8AAADQAAAANmhoZWEHlgN3AAAArAAAACRobXR4LvgAAAAAAYAAAAAwbG9jYQnUCGIAAAH8AAAAGm1heHABHQBcAAABCAAAACBuYW1lfUUTYwAACFgAAAKpcG9zdAxfTDgAAAsEAAAAggABAAADUv9qAFoEAAAAAAAD6AABAAAAAAAAAAAAAAAAAAAADAABAAAAAQAACcU5MF8PPPUACwPoAAAAANcI7skAAAAA1wjuyQAAAAAD6APoAAAACAACAAAAAAAAAAEAAAAMAFAABwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnCgNS/2oAWgPoAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA2AAAABAAEAAEAAOcK//8AAOcA//8AAAABAAQAAAABAAIAAwAEAAUABgAHAAgACQAKAAsAAAAAAAAAQgB8AMIA4gEcAZQCBgJwAo4DAAMgAAAAAwAAAAADlAOUAAsAFwAjAAABFwcXNxc3JzcnBycFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBTXh4L3h4L3h4L3h4AbwDt4qKtwMDt4qKt/0eBeuxsesFBeuxsesCbHh4L3h4L3h4L3h4p4q3AwO3ioq3AwO3irHrBQXrsbHrBQXrAAAAAwAAAAADlAOUAAUAEQAdAAABJwcXAScXDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBr2UylwEbMqADt4qKtwMDt4qKt/0eBeuxsesFBeuxsesBrGQylgEcMqKKtwMDt4qKtwMDt4qx6wUF67Gx6wUF6wAAAAAFAAAAAAOUA5cABQARAB0AIQAlAAABFzcnNSMFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgElFzcnBRc3JwHKxiCnPwFOA6V8fKUDA6V8fKX9aATToJ/UBATUn5/UAh7ANsD9fja/NQGedzNj29F8pAMDpHx8pQMDpXyf1AQE1J+g0wQE0/GhQKGhQKFAAAQAAAAAA74DfgADAAcACgANAAAlMzUjNTM1IwEhCQEhAQHLUlJSUgFj/YwBOv42A5T+NuZUUqf+igIc/ZADFgAEAAAAAAOUA5QAAwAHABMAHwAAATM1IzUzNSMFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBylRUVFQBbgO3ioq3AwO3ioq3/R4F67Gx6wUF67Gx6wEk+lNT0Iq3AwO3ioq3AwO3irHrBQXrsbHrBQXrAAAAAAcAAAAAA+gDMQALABUAJQAuADcAQQBLAAABFhcVITUmJz4BMxYFFhcVITU+ATcWJQYHFSE1LgEjIgYHLgEjIgEWFAYiJjQ2MgUWFAYiJjQ2MiUGFBYXPgE0JiIFBhQWFz4BNCYiA1xEBP6sAxUeRiRX/qxEBP45BIlXV/7xZQsD6AvKUypvMzNvKlMCKxozTTMzTP6CGTNMNDRMAQItWUREWlqI/jstWkREWVmIAWMbFjc3IBgKDwQcGxY3NxY3BAQjJUt7e0tKFxgYFwEMGU01NU0zGhlNNTVNMxYthloCAlqGWy4thloCAlqGWwAAAAQAAAAAA5wCxwAIABQANABFAAABFBYyNjQmIgYXDgEHLgEnPgE3HgEfAQcOAQ8BNz4BNS4BJw4BBxQWHwEnLgEvATc+ATc2FiUOAQ8BFx4BNz4BPwEnJiciAb8fLR4eLR+wAkU0NEUBAUU0NEX8BgEemG0FBB8kAlZBQFcBKyUCCkeVTAYBH76RVMP+3bDPBwcKZclcu/AGCwrM2AoBxxYfHy0eHhc0RQEBRTQ1RQEBRSgEARpWGAECFUIoQVcCAldBLEYUAQEIQkAGASJsBwFCoRbFFAoJW0sBCo8LCgztAQAAAAIAAAAAA4ADbAA4AEEAAAEEJCcmDgEWFx4BHwEVFAYHDgEnJg4BFhcWNjc2Fx4BBx4BFzc+ASc2JicmJzUzPgE3PgEnJicjIiUUFjI2NCYiBgNM/tz+pwwMGxEDDAaMfAcSETKEQw8WBg8Og80hNSg4JwICEw0FDhECAjFJEBICPYhKDQgGChQCB/5dMUgxMUgxAuB/ZRcIAxgbCQdHEQGTGi8TOVgKAw8dFwMNuDUFHTGDCA0QAQECFQ8Mnz8LCasJKiUHGg0SATMkMDBJMDAAAAAAAgAAAAAC/QMkAAMADQAAAQchJxMeATMhMjY3EyEC2x3+bB0kBCQZAQQZJARH/ewDBuDg/fcZICAZAicAAwAAAAACzwPoACwAQwBPAAABERQfARYfAzMVHgE7ATI2NRE0JisBNTEWOwEyNjQmJyMiJi8BLgErAQ4BAxUzNTQ2NzMeARcVMzUuAScjIgcjESM1HgEXPgE3LgEnDgEBVQEBAwQCCAjXARENOg0REQ2zDROVExoaE2UQGAQfAxAKYg0RPR8RDZcNEQEeASIalxANAR8CTTo6TQEBTTo6TQJ8/nYEBQIGBAIFArYNERENARENEUoNGicZARMPfQoNARH98Hl5DREBARENeXkaIgEIAe3FOk0CAk06Ok0BAU0AAAAAAgAAAAAC5gMyAAkAEQAAJRQWMyEyNjURITcjFSE1IycjASApHgEaHin+WFBuAeR+JLD8HigoHgGfeT09HgAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEAEgABAAEAAAAAAAIABwATAAEAAAAAAAMAEgAaAAEAAAAAAAQAEgAsAAEAAAAAAAUACwA+AAEAAAAAAAYAEgBJAAEAAAAAAAoALABbAAEAAAAAAAsAEgCHAAMAAQQJAAAAAgCZAAMAAQQJAAEAJACbAAMAAQQJAAIADgC/AAMAAQQJAAMAJADNAAMAAQQJAAQAJADxAAMAAQQJAAUAFgEVAAMAAQQJAAYAJAErAAMAAQQJAAoAWAFPAAMAAQQJAAsAJAGnIEZpbmFsIFRvYXN0IE1ldHJvcFJlZ3VsYXJGaW5hbCBUb2FzdCBNZXRyb3BGaW5hbCBUb2FzdCBNZXRyb3BWZXJzaW9uIDEuMEZpbmFsIFRvYXN0IE1ldHJvcEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAARgBpAG4AYQBsACAAVABvAGEAcwB0ACAATQBlAHQAcgBvAHAAUgBlAGcAdQBsAGEAcgBGAGkAbgBhAGwAIABUAG8AYQBzAHQAIABNAGUAdAByAG8AcABGAGkAbgBhAGwAIABUAG8AYQBzAHQAIABNAGUAdAByAG8AcABWAGUAcgBzAGkAbwBuACAAMQAuADAARgBpAG4AYQBsACAAVABvAGEAcwB0ACAATQBlAHQAcgBvAHAARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQAFRXJyb3IHU3VjY2VzcwVBbGFybQdXYXJuaW5nBEluZm8HTWVldGluZwVCbGluawdTdHJldGNoA1NpcANTaXQFVHJhc2gAAAAA) format('truetype');
  font-weight: normal;
  font-style: normal;
}
.e-toast-title {
  font-family: Roboto, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: normal;
}

#toast_types button {
  margin: 5px;
  min-width: 160px;
  max-width: 160px;
  font-family: "Shippori Antique B1", sans-serif;

}

.toast-icons {
  font-family: 'Toast_icons', serif !important;
  speak: none;
  font-size: 55px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#toast_type .e-toast-icon.e-icons {
  height: auto;
  font-size: 30px;
}

.toast-icons.e-success::before {
  content: "\e701";
}
#toast_types {
  text-align: center;
}

.e-btn-icon.e-icons.e-ok-icon.e-icon-left:before {
  content: '\e7ff';
}

.e-btn-icon.e-icons.e-close-icon.e-icon-left:before {
  content: '\e745';
}
.e-btn-icon.e-icons.e-plus-icon.e-icon-left:before {
  content: '\e759';
}
.e-btn-icon.e-icons.e-first-page-icon.e-icon-left:before {
  content: '\e77c';
}
.oi-info {
  border: 1px solid black;
  padding: 5px;
  border-radius: 12.5px;
  margin-right: 5px;
}

#toast_type .e-toast-icon.e-icons {
  height: auto;
  font-size: 30px;
}
.toast-icons.e-warning::before {
  content: "\e703";
}
.toast-icons.e-error::before {
  content: "\e700";
}


.sub-content {
    margin-left: 2%;
}
.center-align {
    text-align: center;
    margin-top: 20px;
}
label.col-3.tooltipContainer > .e-control.e-tooltip.e-lib {
  padding: 0 !important;
  display: inline !important;
  float: right !important;
  margin: 0 !important;
  border-radius: 5px !important;
  position: relative !important;
  height: 5px !important;
  line-height: 1.5 !important;
}
.form-row.mt-2 {
    margin-bottom: 25px !important;
}
.tool-button {
  border: 1px solid black;
  border-radius: 25px;
  font-size: 15px;
  padding-left: 7px;
}
.e-chip.e-warning {
    color: black !important;
    font-family: "Shippori Antique B1", serif !important;
    font-size: 11px !important;
    padding: 5px !important;
    width: 267px !important;
}
.e-chip.e-info {
  color: black !important;
  font-family: "Shippori Antique B1", serif !important;
  font-size: 12px !important;
  padding: 5px !important;
  width: 240px !important;
}
.e-chip-text {
  width: 100%;
  text-align: center;
  word-break: break-all !important;
  white-space: initial !important;
}
.e-chip-set {
    margin: 25px;
    float: right;
}
.e-chip.e-chip-icon-wrap.e-warning {
  height: 105%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.e-chip.e-chip-icon-wrap.e-info {
  height: 105%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-info {
  color: white !important;
  background-color: #1db017 !important;
  border-left: thick double #36890a;
  padding: 10px !important;
  margin: 10px !important;
  font-family: Lato, sans-serif;
  border-radius: 5px;
}
.warning-text {
  background-color: #ffc107;
  border-color: #ffc107;
  border-radius: 4px;
}
/* Tooltip content */
.e-tooltip-wrap .e-tip-content {
  font-family: Roboto, sans-serif !important;
    font-size: 12.5px !important;
}
.info-hr {
  border-top: 1px solid white;
}
/* Card content */
.e-card-content {
  font-family: "Shippori Antique B1", sans-serif;
  background-color: #ffc107 !important;
}
.e-card-actions {
  background-color: #ffc107 !important;
}
.e-card {
  margin: 25px !important;
}
#Basics {
  justify-content: flex-start;
  max-width: 90% !important;
  margin: auto;
  background-color: #777777;
}
#Basics .e-card-content, #Accounting .e-card-content, #Notes .e-card-content, #InvoiceMore .e-card-content,
#AcctPayments .e-card-content {
  background-color: white !important;
}
#Basics h5, #Accounting h5, #Notes h5, #InvoiceMore h5, #AcctPayments h5 {
  margin: 5px !important;
  font-family: "Noto Sans CJK HK", sans-serif;
  text-align: center !important;
  color: white !important;
}
#Accounting, #Notes, #InvoiceMore {
  float: right !important;
  max-width: 90% !important;
  background-color: #777777;
}
#AcctPayments {
  background-color: #777777 !important;
  width: 92% !important;
}
/* Make token box tall enough so there isn't much scrolling */
.QbResetToken {
  height: 70px !important;
}

.radio-control {
    margin: 5% 0 5% 10%;
    width: 200px;
}

/* Sf Accordion */
.e-accordion {
  border: 5px solid rgb(173, 255, 47);
  margin-top: 25px;
  margin-bottom: 25px;
  margin-right: 25px;
}
.e-date-range-wrapper {
    margin-left: 10px;
}
.typeahead-menu {
    z-index: 3000 !important;
    overflow: visible !important;
    top: unset !important;
}
.menu-override .typeahead-menu {
  z-index: 3000 !important;
  overflow: visible !important;
  position: relative !important;
}
/* Searchbar */
.site-search.e-input-group.e-control-container.e-control-wrapper {
  border: none !important;
  width: 300px;
  border-radius: 0 !important;
  background-color: #ffc26e !important;
}
.site-search.e-input-group.e-control-container.e-control-wrapper.e-input-focus {
  background-color: white !important;
}
.search-magnifier {
  float: right !important;
  display: block !important;
  line-height: 1.50 !important;
  border-radius: 0 !important;
  background: #bdb7b7 !important;
  border: none !important;
  color: black !important;
}

/* Text messages for EditDiscountLevel */
.info-msg-popup {
  text-decoration: underline;
  width: 70%;
  float: left;
}

/* Use less margin in column chooser footer for buttons so that they have space horizontally */
.e-ccdlg > .e-footer-content .e-btn {
  margin-left: 4px !important;
}

/* For my custom buttons on SfGrid toolbar (i.e. "Save Columns" for now) */
.e-toolbar .e-tbar-btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.text-underline-green {
  text-decoration: underline;
  text-decoration-color: green;
  text-decoration-thickness: 2px;
}

.text-underline-orange {
  text-decoration: underline;
  text-decoration-color: orange;
  text-decoration-thickness: 2px;
}

/* Accounting acknowleged */
.accounting-acknowledged {
  padding-left: 5px !important;
}
.oi.oi-circle-check {
  color: green !important;
}

.newNote {
  white-space: pre-wrap !important;
}