/*
    Only BM specific styles, ie styles that pertain to BM created classes and components should go in here.
    Customizations that override Kendo-UI themes should go into kendo-style.less
*/
#change-password-view-wrapper #change-password-error-message {
  margin-bottom: 1em;
}
/* General */
#category-view-wrapper #no-checklists-error-message {
  font-size: large;
  font-weight: 700;
}
.list-header {
  background-color: #006CAF;
  color: white;
  font-size: 1.75em;
  font-weight: 700;
  text-align: center;
  padding: 5px;
}
.card-header {
  color: #004976;
  font-size: x-large;
  font-weight: 800;
}
/* Footer */
.footer-button {
  overflow: hidden;
  width: 50%;
  margin: 0;
  height: 100%;
  font-size: large !important;
  padding-top: 0.8em !important;
}
.footer {
  background-color: white;
  width: 100%;
  height: 3.4em;
}
/* ChecklistView */
#checklist-view-wrapper > input.task-checkbox,
#details-view-wrapper > input.task-checkbox {
  width: 2em;
  height: 100%;
  -webkit-appearance: checkbox;
  right: 0;
  position: static;
  top: 0;
  margin: 0;
}
#checklist-view-wrapper input.task-checkbox,
#details-view-wrapper input.task-checkbox {
  width: 2em;
  height: 100%;
  -webkit-appearance: checkbox;
  right: 0;
  position: static;
  top: 0;
  margin: 0;
  vertical-align: middle;
}
#checklist-view-wrapper label.task-checkbox-label,
#details-view-wrapper label.task-checkbox-label {
  padding-left: 1em;
  vertical-align: middle;
}
#checklist-view-wrapper input.task-comment,
#details-view-wrapper input.task-comment {
  border-width: 1px;
  border-style: solid;
  position: static;
  width: 100%;
  box-sizing: border-box;
  padding: 0.4em;
  margin-top: 0.2em;
  margin-bottom: 0.7em;
  font-size: 0.75em;
  background-color: white;
  height: 3em;
}
#checklist-view-wrapper .comment-label,
#details-view-wrapper .comment-label,
#checklist-view-wrapper action-description-label,
#details-view-wrapper action-description-label {
  font-size: initial;
  font-weight: 600;
}
#checklist-view-wrapper .task-description,
#details-view-wrapper .task-description {
  margin: 0.5em 0;
}
.task-card[data-status="0"] div .task-card-header {
  color: #004976;
}
.task-card[data-status="1"] div .task-card-header {
  color: #82C341;
}
.task-card[data-status="2"] div .task-card-header {
  color: #E03C31;
}
.task-card .task-card-header.card-header {
  font-size: larger;
  font-weight: 700;
  margin-bottom: 1rem;
}
.task-card .card-text {
  font-size: large;
  font-weight: 400;
  margin-bottom: 1px;
}
button.k-button.action-required {
  float: right;
  font-size: 0.7em;
}
/* ActionRequiredView */
#action-required-view-wrapper #task-header {
  margin-bottom: 1em;
}
#action-required-view-wrapper #task-content {
  padding: 1em;
}
#action-required-view-wrapper #task-description {
  font-size: 1.1em;
  margin-bottom: 1em;
}
#action-required-view-wrapper .control {
  margin-bottom: 0.5em;
}
#action-required-view-wrapper .button-group {
  margin-top: 1em;
}
/* Styles to replace inline-styles. Add as a class instead of inline-styles */
.w-30px {
  width: 30px;
}
.w-85px {
  width: 85px;
}
.w-120px {
  width: 120px;
}
.w-150px {
  width: 150px;
}
.w-100 {
  width: 100%;
}
.w-98 {
  width: 98%;
}
.w-55 {
  width: 55%;
}
.w-25 {
  width: 25%;
}
.float-right {
  float: right;
}
.float-left {
  float: left;
}
.display-none {
  display: none;
}
.overflow-hidden {
  overflow: hidden;
}
.mw-100px {
  min-width: 100px;
}
.red {
  color: #E03C31;
}
.green {
  color: #82C341;
}
.inventory-parcel-card {
  overflow: hidden;
  font-size: 16px;
}
.inventory-parcel-card-shelf,
.inventory-parcel-card-days {
  float: right;
  width: 25%;
}
.inventory-parcel-card-left {
  float: left;
  width: 50%;
}
a.handle-parcel-button {
  width: calc(100% - 15px);
  margin: 7px;
  height: 20px;
}
a.k-state-disabled {
  color: #ccc;
}
#inventory-view-wrapper #shelfs {
  width: 100%;
  color: #3c3c3c;
  font-size: 1.2em;
}
#inventory-view-wrapper .parcel-card {
  float: left;
  overflow: hidden;
  width: 100%;
}
#inventory-view-wrapper .settings {
  position: absolute;
  top: 7px;
  right: 2px;
  width: 30px;
}
#parcel-info-container {
  overflow: auto;
  border-bottom: 1px solid #c6c6cd;
}
#parcel-group-type {
  display: flex;
  justify-content: center;
  border: 0;
  background: transparent;
}
#parcel-group-type .k-button {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 20px 32px;
  font-size: 1rem;
  border-bottom: 3px solid transparent;
}
#parcel-group-type .k-button.k-state-active,
#parcel-group-type .k-button.k-selected {
  border-bottom-color: #0078d4;
}
html.login {
  background-color: #004976;
  background-size: cover;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
}
@media only screen and (max-height: 555px) {
  html.login #dahl-logo {
    display: none;
  }
}
html.login #login-wrapper,
html.login #account-wrapper,
html.login #change-password-view-wrapper {
  margin: auto;
  position: relative;
  width: 300px;
}
html.login ul {
  list-style-type: none;
}
html.login #login-inputs {
  padding: 1px 20px 25px 20px;
}
html.login #login-inputs ul {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html.login #login-inputs input {
  width: 100%;
  font-size: 1em;
  box-sizing: border-box;
}
html.login #login-inputs li.input-field input,
html.login #login-inputs button {
  font-size: 1.25em;
  padding: 0.25em 0.5em;
  margin-top: 1em;
  box-sizing: border-box;
  width: 100%;
  border-radius: 4px;
  border: 0;
}
html.login #login-inputs li.input-field .input-validation-error {
  border: 2px solid red;
}
html.login #login-inputs li.input-field .field-validation-error {
  display: inline-block;
  margin-top: 5px;
}
html.login .eltiro-logo {
  width: 50%;
  display: block;
  margin: 10px auto 0 auto;
}
html.login #dahl-logo {
  width: 100px;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
html.login #offline-warning {
  display: none;
  width: 100%;
  margin-top: -8px;
  margin-left: -8px;
  padding: 0.8em;
  font-size: 1.4em;
  text-align: center;
  background-color: #E03C31;
  color: #fafafa;
}
html.login .offline #offline-warning {
  display: block;
}
html.login .forgotten-password-link {
  text-align: right;
}
html.login .forgotten-password-link a {
  color: white;
}
html.login .create-account-link {
  position: absolute;
  top: 10px;
}
html.login .create-account-link a {
  color: white;
}
.template-info-area {
  display: flex;
  flex-direction: column;
}
.template-info-area .template-middle-section {
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
}
.template-info-area .template-middle-section .template-column {
  display: flex;
  flex-direction: column;
}
.template-info-area .template-middle-section .template-column .shelf-string {
  font-weight: bold;
}
#parcel-handout-result-view.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
#parcel-handout-result-view-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#parcel-handout-result-view-wrapper > .scanner-container {
  flex-shrink: 0;
  max-height: 30vh;
  overflow: hidden;
}
#parcels-result-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.handout-parcels-template.handout {
  position: absolute;
  top: 2px;
  right: 0;
  width: 30px;
}
#pickup-code {
  padding-left: calc(10vw - 10px);
  letter-spacing: calc(25vw - 40px);
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: calc(24vw - 20px) 1px;
  background-repeat: repeat-x;
  background-position-x: calc(20vw - 16px);
  width: 120%;
  min-width: 120%;
  outline-style: none;
  font-size: 28px;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0);
}
#pickup-code-wrapper {
  left: 0;
  position: sticky;
  background-color: #fff;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  border-bottom: none;
}
#pickup-code-container {
  width: calc(100vw - 100px);
  overflow: hidden;
  margin: 20px auto 10px auto;
}
.search-width {
  width: calc(100% - 50px);
}
#get-handout-parcels {
  width: calc(100% - 200px);
  height: 24px;
}
#get-handout-parcels-button-wrapper {
  text-align: center;
  margin-top: 40px;
}
/*
        Why the use of divs for tabular data?
        It looks something like this
        https://stackoverflow.com/questions/8110405/how-to-create-a-table-using-div-tags
        This is non-standard and it'd be good if the reason was documented.
    */
.table {
  display: table;
  width: 100%;
}
.tableHeader {
  display: table-row;
  font-weight: bold;
  text-align: center;
}
.tableRow {
  display: table-row;
  text-align: center;
}
.tableHeaderCell {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
}
.tableHeaderCellLeftAligned {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  text-align: left;
}
.tableCell {
  display: table-cell;
  border-top: 1px solid #ccc;
  padding-left: 5px;
  padding-right: 5px;
}
.tableCellLeftAligned {
  display: table-cell;
  border-top: 1px solid #ccc;
  padding-left: 5px;
  padding-right: 5px;
  text-align: left;
  word-break: break-all;
}
.drivers-license-form {
  padding: 1px 20px 25px 20px;
}
.drivers-license-form ul {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.drivers-license-form input {
  width: 100%;
  font-size: 1em;
  box-sizing: border-box;
}
.drivers-license-form li.input-field input,
.drivers-license-form button {
  font-size: 1.25em;
  padding: 0.25em 0.5em;
  margin-top: 1em;
  box-sizing: border-box;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #727272;
}
#parcel-reception-view.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
#parcel-reception-view-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#parcel-reception-view-wrapper > .scanner-container {
  flex-shrink: 0;
  max-height: 30vh;
  overflow: hidden;
}
#parcel-reception-scan-result-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#scanned-parcels-scroller {
  border-top: 1px solid #c6c6cd;
  border-bottom: 1px solid #c6c6cd;
}
#scanned-parcels-list > div {
  padding: 12px;
  border-bottom: 1px solid #636363;
  font-size: 16px;
  overflow: hidden;
}
.scanned-parcels-information {
  width: calc(100% - 30px);
}
.parcelPutOnShelfInfo {
  color: #82c341;
  font-weight: bold;
}
.invalidPhoneNumberInfo,
.noPhoneNumerInfo {
  color: #e03c31;
  font-weight: bold;
}
/* DetailsView */
.switchToRestockingButtonWrapper {
  position: absolute;
  top: 5px;
  right: 5px;
  pointer-events: auto;
  /*visibility: hidden;*/
  visibility: visible;
}
.details-header {
  position: relative;
  padding: 0.5em 1em;
  background-color: #fafafa;
}
.details-header-row {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}
.details-field {
  padding-bottom: 0.5em;
  border-bottom: 1px solid #ddd;
}
.details-value {
  font-weight: 700;
}
#details-view-wrapper .switchToRestockingButtonWrapper {
  position: absolute;
  top: 5px;
  right: 5px;
  pointer-events: auto;
  visibility: visible;
}
#details-view-wrapper .details-header {
  position: relative;
  padding: 0.5em 1em;
  background-color: #fafafa;
}
#details-view-wrapper .details-header .details-header-row {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}
#details-view-wrapper .details-header .details-field {
  padding-bottom: 0.5em;
  border-bottom: 1px solid #ddd;
}
#details-view-wrapper .details-header .details-value {
  font-weight: 700;
}
#details-view-wrapper .order-lines-card {
  position: relative;
  padding: 0.5em;
  border-bottom: 1px solid #d9d9d9;
}
#details-view-wrapper .order-lines-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}
#details-view-wrapper .order-lines-card .imageWrapper {
  flex: 0 0 64px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#details-view-wrapper .order-lines-card .imageWrapper img {
  margin-right: 0.5em;
}
#details-view-wrapper .order-lines-card .description-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
#details-view-wrapper .order-lines-card .description-wrapper span:last-child {
  font-size: 0.7em;
}
#details-view-wrapper .order-lines-card .description-wrapper label {
  margin: 0 0 2px 0;
  padding: 0;
  font-size: 0.72em;
  color: #a3a3a3;
  line-height: 1.2em;
}
#details-view-wrapper .order-lines-card .km-label-above {
  margin: 0 0 2px 0;
  padding: 0;
  font-size: 0.72em;
  color: #a3a3a3;
  line-height: 1.2em;
}
#details-view-wrapper .order-lines-card .qty-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8em;
  margin-top: 0.4em;
  font-weight: 800;
}
#details-view-wrapper .order-lines-card .display-qty-wrapper {
  display: flex;
  gap: 1.2em;
}
#details-view-wrapper .order-lines-card .display-qty-wrapper > div {
  padding: 0;
}
#details-view-wrapper .order-lines-card .received-qty-input-wrapper,
#details-view-wrapper .order-lines-card .received-qty-wrapper {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-right: 0;
}
#details-view-wrapper .order-lines-card .received-qty-input {
  width: 3.6em;
  margin: 0;
  padding: 0.15em 0.3em;
  text-align: center;
  border: solid 1px rgba(128, 128, 128, 0.3);
  border-radius: 2px;
  font-size: 17.664px;
  font-family: 'Open Sans', sans-serif;
}
#details-view-wrapper .order-lines-card input.order-line-checkbox {
  margin: 0 0.6em;
  position: relative;
  z-index: 1;
}
#details-view-wrapper .order-lines-card.confirmed:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(130, 195, 65, 0.3);
  pointer-events: none;
}
#details-view-wrapper .order-lines-card.missing .order-line-checkbox {
  pointer-events: none;
}
#details-view-wrapper .order-lines-card.missing:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(224, 60, 49, 0.5);
  pointer-events: none;
}
#details-view-wrapper .order-lines-card.followup input {
  z-index: 0;
}
/* FollowupView */
#followup-view .followup-content-wrapper {
  cursor: pointer;
}
#followup-view .followup-content-wrapper .deviations-count {
  color: #F00;
  font-weight: bold;
}
#followup-view .mail-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #333;
}
/* Restocking View */
#parcel-restocking-remaining-parcels-area {
  overflow: auto;
}
#remaining-parcels-scroller {
  height: 100%;
  border-top: 1px solid #c6c6cd;
  border-bottom: 1px solid #c6c6cd;
}
.remaining-parcel-card-header {
  font-size: large;
  font-weight: 800;
}
.remaining-parcel-card-header span {
  color: #004976;
}
.remaining-parcel-card-header b {
  float: right;
  font-weight: 1000;
}
#restocking-date-switcher {
  display: flex;
  justify-content: space-around;
  max-width: 500px;
  margin: auto;
}
#restocking-date-switcher > div {
  padding: 12px;
  font-size: large;
  flex-grow: 1;
  justify-content: center;
  display: flex;
}
#restocking-date-switcher .date-switch-button {
  margin-top: 4px;
  cursor: pointer;
}
#restocking-date-switcher .date-switch-button.disabled {
  color: lightgray;
  cursor: default;
}
#remaining-parcels-list .remaining-parcel-card-header b.status {
  display: none;
}
#remaining-parcels-list li.done,
#remaining-parcels-list .parcel-card.done {
  background-color: #c6dfb3;
}
#remaining-parcels-list li.done b.status.done,
#remaining-parcels-list .parcel-card.done b.status.done {
  display: inline;
}
#remaining-parcels-list li.in-progress,
#remaining-parcels-list .parcel-card.in-progress {
  background-color: #f3caad;
}
#remaining-parcels-list li.in-progress b.status.in-progress,
#remaining-parcels-list .parcel-card.in-progress b.status.in-progress {
  display: inline;
}
#remaining-parcels-list li.missing,
#remaining-parcels-list .parcel-card.missing {
  background-color: #efa098;
}
#remaining-parcels-list li.missing b.status.done,
#remaining-parcels-list .parcel-card.missing b.status.done {
  display: inline;
}
.search-width {
  width: calc(100% - 50px);
}
#get-parcels {
  width: calc(100% - 200px);
  height: 24px;
}
#search-parcels-button-wrapper {
  text-align: center;
  margin-top: 40px;
}
.order-item {
  padding: 10px;
  border-bottom: 1px solid #8f8f8f;
}
.parcel-list-group-header {
  background-color: #f1f1f1;
  padding: 6px 12px;
}
.parcel-list-group-header strong {
  display: block;
  line-height: 1.2;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html {
  overscroll-behavior: contain;
}
html.shared {
  width: 100%;
  height: 100%;
}
video.iPhoneFix {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.scanner-wrapper.iPhoneFix {
  height: 175px;
  overflow: hidden;
}
.text-danger {
  color: #e03c31;
}
.text-center {
  text-align: center;
}
.shadowBox {
  border-radius: 3px;
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.25);
}
.padding {
  padding: 7px;
}
.margin {
  margin: 7px;
}
.smallMargin {
  margin: 3px;
}
.clearer {
  clear: both;
}
.smallSpacerBottom {
  margin-bottom: 5px;
}
.spacerBottom {
  margin-bottom: 10px;
}
.boldLabel {
  display: inline-block;
  font-weight: bold;
  width: 120px;
}
.settingWide {
  width: 150px;
}
.form-input {
  font-size: 1.25em;
  padding: 0.65em;
  margin-bottom: 0.5em;
  box-sizing: border-box;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #727272;
}
.form-input::placeholder {
  color: #999;
}
.form-button {
  padding: 12px 24px;
  margin-top: 0.5em;
}
/*
    The following are rules are odd.
    Kendo style hack?
*/
.iconButtonSmall {
  background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%) !important;
  border-radius: 20px;
  border: 1px solid #dcdcdc;
  color: #666666;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  padding: 5px 7px;
  text-decoration: none;
  z-index: 100;
}
.iconButtonMedium {
  background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%) !important;
  border-radius: 40px;
  border: 1px solid #dcdcdc;
  color: #666666;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: bold;
  padding: 11px 13px;
  text-decoration: none;
  z-index: 100;
}
.kendoIconButton {
  background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%) !important;
  border-radius: 20px;
  border: 1px solid #dcdcdc;
  color: #666666;
  cursor: pointer;
  display: inline-block;
  font-size: 20px !important;
  font-weight: bold;
  height: 30px !important;
  padding: 3px !important;
  text-decoration: none;
  width: 30px !important;
  z-index: 100;
}
/* End of odd rules */
.app-header,
.app-footer {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 200;
}
.app-header {
  top: 0;
  height: 64px;
  background: #004976;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.app-header .k-button {
  border: none;
}
.app-header-left,
.app-header-right {
  width: 64px;
  display: flex;
  justify-content: center;
}
.app-header-title {
  flex: 1;
  text-align: center;
  line-height: 1.1;
}
.app-footer {
  bottom: 0;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
}
.app-footer a,
.app-footer a:visited,
.app-footer a:hover,
.app-footer a:active {
  color: #004976;
  text-decoration: none;
}
.app-footer .app-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #004976;
  font-weight: 600;
  font-size: 12px;
}
.app-footer .app-tab i {
  font-size: 22px;
  line-height: 1;
}
.app-footer .app-tab span {
  font-size: 11px;
  margin-top: 2px;
}
.app-footer .app-tab:active {
  background: rgba(0, 0, 0, 0.06);
}
.app-footer .app-tab.is-active {
  background: #004976;
}
.app-footer .app-tab.is-active,
.app-footer .app-tab.is-active i,
.app-footer .app-tab.is-active span {
  color: #fff;
}
.app-content {
  position: fixed;
  top: 64px;
  bottom: calc(64px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.app-view {
  display: none;
}
.app-view.active {
  display: block;
}
#app-loading {
  position: fixed;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 15000;
  padding: 10px 18px;
  background: white;
  border-radius: 2px;
  font-size: 18px;
  color: black;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
#menu-drawer {
  left: auto;
  right: 0;
}
.scanner-container {
  text-align: center;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #636363;
}
/* Scanner opaque overlay */
.scanner-wrapper::before {
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.scanner-wrapper:not(.scanner-active)::before {
  animation-duration: 750ms;
  animation-name: dimScanner;
  background-color: rgba(255, 255, 255, 0.65);
}
.scanner-wrapper.scanner-active::before {
  animation-duration: 250ms;
  animation-name: clearScanner;
  background-color: rgba(255, 255, 255, 0);
}
@keyframes dimScanner {
  from {
    background-color: rgba(255, 255, 255, 0);
  }
  to {
    background-color: rgba(255, 255, 255, 0.65);
  }
}
@keyframes clearScanner {
  from {
    background-color: rgba(255, 255, 255, 0.65);
  }
  to {
    background-color: rgba(255, 255, 255, 0);
  }
}
.scanner {
  display: block;
  width: 100%;
}
.scanner-active {
  border-color: #ff5e03;
}
.manual-input-header {
  padding: 8px 0;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
.scan-button {
  display: block;
  height: 50px;
  margin: 20px 20px;
}
.scan-button-wrapper {
  padding: 12px;
}
.scan-button-wrapper .scan-button {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
a.k-button.scan-button {
  background-color: rgba(246, 135, 10, 0);
  padding-top: 16px;
}
a.k-button.scan-button.km-state-active {
  background-color: #f6870a;
}
.scannerKeyboardSwitchButton {
  position: absolute;
  right: 5px;
  top: 5px;
}
.scannerChangeCameraInfo {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: x-large;
  color: #666666;
}
#manual-code-input-wrapper {
  height: 100%;
  min-height: 100px;
  padding: 8px;
}
#manual-code-input-wrapper .k-button-group {
  border: none;
  width: auto;
}
#manual-code-input-wrapper .k-button-group .k-button {
  background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  border-left: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  height: 2px;
  padding: 14px 20px 22px 20px;
}
#manual-code-input-wrapper .k-maskedtextbox {
  margin-right: 10px;
  margin-top: 5px;
  width: calc(100% - 80px);
}
#manual-parcel-or-shelf-ok-button {
  height: 25px;
  position: absolute;
  right: 5px;
  top: 56px;
  width: 30px;
}
input.manual-input-shelf-code {
  margin-top: 5px;
  width: auto;
}
.manual-scan-input-wrapper {
  text-align: initial;
}
.manual-scan-input-prefix {
  display: inline-block;
  margin-top: 5px;
  padding: 13px 5px;
}
span.k-tooltip.k-tooltip-validation {
  border-width: 0;
  color: #E03C31;
}
.k-window.k-dialog.k-alert button.k-button {
  box-sizing: border-box;
  height: 3em;
}
.k-window.k-dialog.k-confirm button.k-button {
  box-sizing: border-box;
  height: 3em;
}
.k-window.k-dialog.k-prompt button.k-button {
  box-sizing: border-box;
  height: 3em;
}
.app-modal-content {
  padding: 0;
}
.app-modal-content .foo {
  padding: 20px;
}
.app-modal-content .biz {
  padding: 0 20px 20px 20px;
  text-align: center;
}
.app-modal-content .biz .k-button {
  width: 100%;
  height: 44px;
  font-weight: 600;
}
.app-modal-content i.warning {
  color: #F9C11C;
  float: right;
  font-size: 26px;
  margin: 0 0 10px 10px;
}
.app-modal-content i {
  float: right;
  font-size: 26px;
  margin: 0 0 10px 10px;
}
.app-modal-content h2 {
  margin: 0 0 10px 0;
}
.app-modal-content p {
  margin: 0 0 10px 0;
}
.button-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.button-group button {
  padding: 0.8em;
}
.title-network-warning {
  display: none;
}
.offline .main-title {
  background-color: #E03C31;
}
.offline .main-title .title-text {
  display: none;
}
.offline .main-title .title-network-warning {
  display: inline;
}
#parcel-reception-warehouse-scan-result-area {
  display: flex;
}
#parcel-reception-warehouse-scan-result-area #image-container {
  margin: auto;
  text-align: center;
}
#parcel-reception-warehouse-scan-result-area #image-container #data-matrix-image {
  width: 100%;
}
@media (max-width: 400px) {
  .offline .main-title .title-network-warning span {
    display: none;
  }
}
.list-group-header {
  background-color: #f1f1f1;
  height: 32px;
  display: flex;
  align-items: center;
}
.list-group-header strong {
  padding-left: 12px;
  display: inline-block;
}
.template-info-area {
  padding: 12px;
}
.list-template {
  position: relative;
  padding-right: 34px;
  font-size: 16px;
  overflow: hidden;
  border-bottom: 1px solid #636363;
}
.handoutButton {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.scroll-container {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#order-lines-area {
  height: 100%;
}
.task-group-header {
  background-color: #f1f1f1;
  height: 32px;
  display: flex;
  align-items: center;
}
.task-group-header span {
  padding-left: 12px;
  display: inline-block;
}
.list-card {
  padding: 20px;
  border-bottom: 1px solid #a9a9a9;
}
#select-period .k-button {
  background: #fff;
}
#select-period .k-button.k-state-active {
  background: #004976;
  color: #fff;
}