﻿@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200,400,600,700);
/*!
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
Imaging with any questions regarding Web Fonts:  http://www.monotype.com/
*/
@font-face {
  font-family: "DINNextLTW05-BoldCondensed";
  src: url("https://image.flaschenpost.de/fonts/DINNextLTW05-BoldCondensed.woff2")
      format("woff2"),
    url("https://image.flaschenpost.de/fonts/DINNextLTW05-BoldCondensed.woff")
      format("woff");
}
@font-face {
  font-family: "DINNextLTW05-HeavyCondensed";
  src: url("https://image.flaschenpost.de/fonts/DINNextLTW05-HeavyCondensed.woff2")
      format("woff2"),
    url("https://image.flaschenpost.de/fonts/DINNextLTW05-HeavyCondensed.woff")
      format("woff");
}
@font-face {
  font-family: "DINNextLTW05-MediumCond";
  src: url("https://image.flaschenpost.de/fonts/DINNextLTW05-MediumCond.woff2")
      format("woff2"),
    url("https://image.flaschenpost.de/fonts/DINNextLTW05-MediumCond.woff")
      format("woff");
}
@font-face {
  font-family: "DINNextLTW05-Regular";
  src: url("https://image.flaschenpost.de/fonts/DINNextLTW05-Regular.woff2")
      format("woff2"),
    url("https://image.flaschenpost.de/fonts/DINNextLTW05-Regular.woff")
      format("woff");
}
@font-face {
  font-family: "DINNextLTW05-Bold";
  src: url("https://image.flaschenpost.de/fonts/DINNextLTW05-Bold.woff2")
      format("woff2"),
    url("https://image.flaschenpost.de/fonts/DINNextLTW05-Bold.woff")
      format("woff");
}
@font-face {
  font-family: "DINNextLTW05-Condensed";
  src: url("https://image.flaschenpost.de/fonts/DINNextLTW05-Condensed.woff2")
      format("woff2"),
    url("https://image.flaschenpost.de/fonts/DINNextLTW05-Condensed.woff")
      format("woff");
}

/*reboot css start*/

*,
::after,
::before {
  box-sizing: border-box;
}

::placeholder {
  color: #d1d1d1;
  opacity: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 1rem;
}

a {
  text-decoration: none;
  color: #a50a50;
}
a:hover {
  cursor: pointer;
}

p {
  margin: 0;
  margin-bottom: 1rem;
}

hr:not([size]) {
  height: 1px;
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  height: 1px;
}

img,
svg {
  vertical-align: middle;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}
tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

label {
  display: inline-block;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  border-radius: 0;
  -webkit-appearance: none;
  outline: none;
}
button:hover {
  cursor: pointer;
}
button:focus {
  outline: none;
}
button.close {
  background: 0 0;
}

figure {
  margin: 0;
}

/*reboot css end*/

html,
body {
  font-family: "DINNextLTW05-Regular", Helvetica, Arial, sans-serif;
  background: #f3f3f3;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #333;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  contain: layout size style;
  z-index: 0;
  line-height: 1.5;
}

.new_body {
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  will-change: scroll-position;
  scrollbar-width: thin;
}

.new_body::-webkit-scrollbar {
  width: 0.5rem;
}

.fp-button {
  padding: 12px 20px 13px;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.0625rem;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  cursor: pointer;
  outline: 0 !important;
}
.fp-button--default {
  background: none;
  color: #82be3c !important;
  -webkit-transition-duration: 250ms;
  transition-duration: 250ms;
  border-color: #82be3c;
}
.fp-button--primary {
  background: #82be3c;
  color: #fff !important;
  -webkit-transition-duration: 250ms;
  transition-duration: 250ms;
  border-color: #82be3c;
}
.fp-button--full {
  width: 100%;
}
.fp-button--blue {
  display: inline-table;
  font-size: 1.625rem;
  font-weight: 600;
  background: #5785bf;
  color: #fff !important;
  -webkit-transition-duration: 250ms;
  transition-duration: 250ms;
  padding: 0 15px;
}
.fp-button--small {
  padding: 7px 20px 8px;
}

/*Scrollbar*/
.narrow_scrollbar {
  overflow-y: auto;
  scrollbar-color: var(--fp-light-gray4);
  scrollbar-width: 0.375rem;
}

.narrow_scrollbar::-webkit-scrollbar {
  width: 0.375rem;
}

.narrow_scrollbar::-webkit-scrollbar-track {
  background-color: var(--fp-lightest-gray);
  border-radius: 10px;
}

.narrow_scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--fp-light-gray4);
  border-radius: 10px;
}

.narrow_scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--fp-lighter-gray);
}

/* Validation */
.invalid {
  outline: 2px solid #dc3545 !important;
}

.invalid .rz-placeholder {
  color: #dc3545 !important;
}

th {
  font-weight: normal;
}

/* When the checkbox is checked, add a background */
.checkbox_container input:checked ~ .checkmark {
  background-color: #82be3c;
  border: 0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox_container .checkmark:after {
  left: 0.5rem;
  top: 0;
  width: 0.5rem;
  height: 1.25rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*Bootstrap overwrite*/
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1140px;
  }
}

#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;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/*FlaPo Variables */
:root {
  /* fp corporate identity [START] */
  --fp-green: #82be3c;
  --fp-dark-green: #5a9632;
  --fp-pink: #a50a50;
  --fp-blue: #94c2dc;
  --fp-dark-blue: #2d57a0;
  --fp-yellow: #dcc832;
  --fp-orange: #ff6a00;
  --fp-chilled: #09f;
  --fp-error-red: #f00;

  /* gray colors */
  --fp-main-gray: #333;
  --fp-secondary-gray: #949494;
  --fp-inactive: #d9d9d9;
  --fp-inactive-hover: #a2a2a2;
  /* fp corporate identity [END] */

  /* other colors */
  --fp-light-gray: #ddd;
  --fp-light-gray2: #d1d1d1;
  --fp-light-gray4: #d5d5d5;
  --fp-lighter-gray: #b2b2b2;
  --fp-lightest-gray: #f2f2f2;
  --fp-lightest-gray-page-container: #f3f3f3;

  --fp-article-description-gray: #9b9c9d;
  --fp-article-description-gray-light: rgba(55, 58, 60, 0.5);
  --fp-gray-blue: #3b3e49;
  --fp-light-navy-blue: #5785bf;
  --fp-light-blue: #eaf3f8;
  --fp-dark: #373a3c;
  --fp-secondary-red: #dc3545;
  --fp-light-green: #e2ebd8;
  --fp-regular: "DINNextLTW05-Regular", "Titillium Web", sans-serif;
}

/* Radzen overwrites */
:root {
  --rz-dialog-title-padding-block: 2.5rem 0;
  --rz-dialog-title-padding-inline: 2.5rem;
  --rz-dialog-title-padding: 2.5rem 2.5rem 0 2.5rem;
  --rz-outline-focus: 0px;
  --rz-dialog-content-padding: 2rem 2.5rem 2.5rem 2.5rem;
  --rz-text-title-color: #333;
  --rz-dialog-title-letter-spacing: none;
  --rz-dialog-title-font-size: 1.5rem;
  --rz-border-radius: 0.5rem;
  --rz-dialog-close-color: #333;

  --rz-tabs-tab-padding: 0.5rem 0px;
  --rz-tabs-tab-selected-color: #82be3c;
  --rz-tabs-tab-hover-background-color: tansparent;
  --rz-tabs-tab-font-size: 1rem;
  --rz-tabs-padding: 1rem 0px 0px 0px;
  --rz-text-secondary-color: #333;
  --rz-tabs-tab-letter-spacing: none;

  --rz-card-shadow: none;
  --rz-datalist-item-border: 0;

  --rz-input-border: 0.0625rem solid #949494;
  --rz-input-hover-border: 0.0625rem solid #949494;
  --rz-input-hover-shadow: inset 0 0 0 1px #949494;
  --rz-input-border-radius: 0.25rem;
  --rz-input-height: 3.5rem;
  --rz-input-padding: 1rem;
  --rz-input-focus-border: 0.0625rem solid var(--fp-dark-blue);
  --rz-input-focus-shadow: inset 0 0 0 1px var(--fp-dark-blue);
  --rz-form-field-label-focus-color: var(--fp-dark-blue);
  --rz-form-field-label-color: #949494;

  --rz-checkbox-checked-background-color: var(--fp-dark-blue);
  --rz-checkbox-checked-hover-background-color: var(--fp-dark-blue);

  --rz-accordion-border-radius: 0;
  --rz-accordion-shadow: none;
  --rz-accordion-item-padding: 1rem 0px;
  --rz-accordion-item-font-size: 1.25rem;

  --rz-grid-stripe-background-color: #fff;
  --rz-grid-cell-border: 1px solid #82be3c;
  --rz-grid-header-font-size: 1rem;

  --rz-notification-info-background-color: rgb(211, 234, 253);
  --rz-notification-success-background-color: rgb(226, 242, 227);
  --rz-notification-error-background-color: rgb(253, 217, 215);
  --rz-notification-warning-background-color: rgb(255, 234, 204);
}

.rz-accordion-header a[role="tab"] {
  font-family: "DINNextLTW05-MediumCond", "Titillium Web", sans-serif;
}

.rz-accordion-content {
  padding: 0;
}

@media (max-width: 768px) {
  .rz-dialog-wrapper
    .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert):not(
      .mobile-search-input
    ) {
    top: auto !important;
    bottom: 0px;
  }
}

.rz-dialog-title {
  font-family: "DINNextLTW05-MediumCond", "Titillium Web", sans-serif;
}

.rz-dialog-titlebar-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
  border-bottom: 0.0625rem solid #82be3c;
}

.rz-tabview-nav {
  gap: 1rem;
}

.rz-tabview-nav li a {
  text-transform: none !important;
  font-weight: 400;
}

.tab-content {
  font-size: 0.875rem;
}

.rz-button.rz-primary {
  background-color: #82be3c !important;
}

.account .rz-tabview.rz-tabview-top > .rz-tabview-panels {
  border-top: 0;
}

.account .rz-datalist-content > .rz-g {
  gap: 0.5rem;
}
.account .rz-datalist-content > .rz-g > div {
  margin: 0;
  width: 100%;
}

.account .rz-tabview-nav {
  display: none;
}

.account .rz-tabview-panel {
  padding-top: 0;
}

.rz-dropdown {
  justify-content: center;
}

.rz-dropdown-items li.rz-state-highlight,
.rz-dropdown-item.rz-state-highlight,
.rz-dropdown-items li.rz-state-highlight:hover,
.rz-dropdown-item.rz-state-highlight:hover {
  background-color: var(--rz-dropdown-item-hover-background-color);
  color: var(--rz-dropdown-item-hover-color);
}

.rz-datatable {
  border-radius: 0.5rem 0.5rem 0 0;
  border-bottom: none;
}

.rz-column-title {
  font-family: "DINNextLTW05-MediumCond", "Titillium Web", sans-serif;
}

.checkout_slots .rz-g {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}
.delivery_day .rz-g {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.checkout_slots .rz-g > div {
  border: 0.09375rem solid var(--fp-inactive);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.875rem;
  padding: 0.3125rem 0.625rem;
  cursor: pointer;
  position: relative;
  line-height: 1;
  margin: 0;
}
.delivery_day .rz-g > div {
  line-height: 1.3;
  padding: 0.5rem;
}
.checkout_slots .rz-g > div:hover {
  box-shadow: 0 0 0 0.0625rem var(--fp-inactive);
}

.checkout_slots .rz-g > .slot_disabled {
  color: var(--fp-inactive);
  cursor: no-drop;
}
.checkout_slots .rz-g > .slot_disabled:hover {
  box-shadow: 0 0 0 0 var(--fp-inactive);
}

.checkout_slots .rz-g > .slot_selected {
  border-color: var(--fp-dark-blue);
  background-color: rgba(148, 194, 220, 0.15);
  box-shadow: 0 0 0 0.0625rem var(--fp-light-blue);
  font-family: "DINNextLTW05-Regular", "Titillium Web", sans-serif;
}
.checkout_slots .rz-g > .slot_selected:hover {
  box-shadow: 0 0 0 0.0625rem var(--fp-light-blue);
}

.checkout_slots .rz-g > .slot_day {
  flex-direction: column;
}

.checkout_slots .rz-g > .slot_time {
  padding: 0.5rem 0.5rem;
  width: 100%;
  min-height: 70px;
  grid-column: span 1 / span 1;
}

.checkout_delivery_info .rz-form-field-content {
  border-radius: 0.5rem;
  border: 0;
}

.checkout_delivery_info:hover .rz-form-field-content,
.checkout_delivery_info .rz-form-field-content:hover {
  border: 0;
  box-shadow: none;
}

input#ZipCode.invalid {
  outline: none;
}

.rz-dialog-wrapper .delivery_time_modal ul {
  border-bottom: 1px solid var(--fp-inactive);
  padding: 1rem 0;
}

.rz-dialog-wrapper .delivery_time_modal ul:last-child {
  border-bottom: 0;
}

.rz-dialog-wrapper .delivery_time_modal ul li {
  padding: 0;
  margin: 0;
}

.rz-form-field-label {
  border-radius: 0;
}

.rz-carousel {
  overflow: visible;
  position: initial;
}

.rz-carousel-items {
  justify-content: flex-start;
  border-radius: 0;
  gap: 0.5rem;
}
.rz-carousel-item {
  justify-content: flex-start;
  flex: auto;
  align-items: stretch;
}
.rz-carousel-prev,
.rz-carousel-next {
  border-radius: 30rem;
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  inset-block-start: initial;
  inset-inline-start: initial;
  transform: none;
  top: 0.25rem;
}

.rz-carousel-prev {
  right: 3rem;
}

.rz-carousel-next {
  right: 0;
}

.rz-carousel-pager {
  height: 0.5rem;
}
.rz-carousel-pager-button:nth-child(3) {
  width: 0.3125rem;
  height: 0.3125rem;
}
.rz-carousel-pager-button:nth-child(4) {
  width: 0.1875rem;
  height: 0.1875rem;
}
.rz-carousel-pager-button,
.rz-carousel-pager-button.rz-state-active {
  width: 0.5rem;
  height: 0.5rem;
  border: none;
  background-color: var(--fp-inactive);
}
.rz-carousel-pager-button.rz-state-active {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--fp-green);
}

.rz-button.rz-light {
  background-color: white;
  color: var(--fp-green);
  transition: all 0.3s ease-in-out;
}

.rz-button.rz-light:hover {
  background-color: var(--fp-green);
  color: white;
  transition: all 0.3s ease-in-out;
}

.touch-pan-y {
  touch-action: pan-y;
}
