/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: "bot-body";
  src: url("./assets/fonts/DINNextRoundedLTPro-Medium.ttf");
}
@font-face {
  font-family: "bot-headline";
  src: url("./assets/fonts/Brushs_1.ttf");
}
:root {
  --brand: #9c9769;
  --ivory: #F0EADB;
  font: 11.25pt "bot-body", sans-serif;
}

.bot-headline {
  font: 30pt "bot-headline", sans-serif;
  margin: 6px 0;
}
@media screen and (max-width: 720px) {
  .bot-headline {
    font-size: 24pt;
  }
}

.bot-subline {
  font-size: 16.875pt;
  margin-top: 0;
}

.bot-caption {
  font-size: 8.75pt;
  font-style: italic;
}

p {
  margin-bottom: 1.5em;
}

a {
  color: inherit;
}

.no-text-decoration {
  text-decoration: none;
}

.bot-color--brand {
  color: var(--brand);
}

.bot-color--kastanie {
  color: #4c1b0f;
}

.payment-methods li {
  display: inline;
  list-style-type: none;
}

.payment-methods img {
  max-width: 3em;
  max-height: 2em;
}

.icon-spin {
  animation: spin-animation 1s infinite;
  animation-timing-function: linear;
  display: inline-block;
}

@keyframes spin-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.bot-flavor {
  position: absolute;
  max-height: 150px;
  bottom: initial;
}
@media screen and (max-width: 720px) {
  .bot-flavor {
    display: none;
    max-height: 110px;
    bottom: -85px;
  }
}
.bot-flavor--mobile {
  display: none;
}
@media screen and (max-width: 720px) {
  .bot-flavor--mobile {
    display: block;
  }
}

.bot-base-cost-explanation {
  font-size: 16.875pt;
  color: #4c1b0f;
}
@media screen and (max-width: 720px) {
  .bot-base-cost-explanation {
    font-size: 1rem;
  }
}

.bot-grid .column, .bot-grid .columns {
  margin-bottom: 1.5em;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}
/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%;
  }

  .column,
.columns {
    margin-left: 4%;
  }

  .column:first-child,
.columns:first-child {
    margin-left: 0;
  }

  .one.column,
.one.columns {
    width: 4.6666666667%;
  }

  .two.columns {
    width: 13.3333333333%;
  }

  .three.columns {
    width: 22%;
  }

  .four.columns {
    width: 30.6666666667%;
  }

  .five.columns {
    width: 39.3333333333%;
  }

  .six.columns {
    width: 48%;
  }

  .seven.columns {
    width: 56.6666666667%;
  }

  .eight.columns {
    width: 65.3333333333%;
  }

  .nine.columns {
    width: 74%;
  }

  .ten.columns {
    width: 82.6666666667%;
  }

  .eleven.columns {
    width: 91.3333333333%;
  }

  .twelve.columns {
    width: 100%;
    margin-left: 0;
  }

  .one-third.column {
    width: 30.6666666667%;
  }

  .two-thirds.column {
    width: 65.3333333333%;
  }

  .one-half.column {
    width: 48%;
  }

  /* Offsets */
  .offset-by-one.column,
.offset-by-one.columns {
    margin-left: 8.6666666667%;
  }

  .offset-by-two.column,
.offset-by-two.columns {
    margin-left: 17.3333333333%;
  }

  .offset-by-three.column,
.offset-by-three.columns {
    margin-left: 26%;
  }

  .offset-by-four.column,
.offset-by-four.columns {
    margin-left: 34.6666666667%;
  }

  .offset-by-five.column,
.offset-by-five.columns {
    margin-left: 43.3333333333%;
  }

  .offset-by-six.column,
.offset-by-six.columns {
    margin-left: 52%;
  }

  .offset-by-seven.column,
.offset-by-seven.columns {
    margin-left: 60.6666666667%;
  }

  .offset-by-eight.column,
.offset-by-eight.columns {
    margin-left: 69.3333333333%;
  }

  .offset-by-nine.column,
.offset-by-nine.columns {
    margin-left: 78%;
  }

  .offset-by-ten.column,
.offset-by-ten.columns {
    margin-left: 86.6666666667%;
  }

  .offset-by-eleven.column,
.offset-by-eleven.columns {
    margin-left: 95.3333333333%;
  }

  .offset-by-one-third.column,
.offset-by-one-third.columns {
    margin-left: 34.6666666667%;
  }

  .offset-by-two-thirds.column,
.offset-by-two-thirds.columns {
    margin-left: 69.3333333333%;
  }

  .offset-by-one-half.column,
.offset-by-one-half.columns {
    margin-left: 52%;
  }
}
.bot-box {
  border-radius: 16px;
  padding: 16px;
  box-shadow: 6px 3px 19px #00000029;
  margin-bottom: 40px;
}
@media screen and (max-width: 720px) {
  .bot-box {
    margin-left: -50px;
    margin-right: -50px;
  }
}
.bot-box--primary {
  background-color: var(--brand);
  color: white;
}
.bot-box--primary .bot-box__inner {
  border: 3px solid #F0eadb;
  border-image: url("./assets/primary-borders.png") 3;
}
@media screen and (max-width: 720px) {
  .bot-box--primary .bot-box__inner {
    padding: 16px;
  }
}
.bot-box--primary .bot-box__divider {
  border-top: 4px solid #F0eadb;
  border-image: url("./assets/primary-borders.png") 4;
  border-image-repeat: stretch;
  margin: 1em -16px;
}
.bot-box--secondary {
  background-color: #F0eadb;
  color: var(--brand);
}
.bot-box--secondary .bot-box__subline {
  font-size: 16.875pt;
  color: #4c1b0f;
  margin-bottom: 6px;
}
.bot-box--secondary .bot-box__inner {
  border: 44px solid;
  border-right-width: 63px;
  border-bottom-width: 31px;
  border-left-width: 49px;
  border-image-source: url("./assets/secondary-border.png");
  border-image-slice: 44 63 31 49;
  border-image-repeat: repeat;
  padding: 16px;
}
.bot-box--secondary .bot-box__bullet {
  margin-left: -40px;
  margin-top: -40px;
  margin-bottom: -30px;
  margin-right: 0;
}
.bot-box--secondary .bot-box__content {
  margin-top: -20px;
}
.bot-box__inner {
  padding: 16px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 720px) {
  .bot-box__inner {
    padding: 16px 0;
  }
}
.bot-box__title-image {
  padding: 0 40px;
  flex: 0 0 100px;
  max-width: 100px;
}
.bot-box__title {
  font-family: "bot-headline", sans-serif;
  font-size: 30pt;
  margin-bottom: 30px;
}
.bot-box__bullet {
  flex: 0 0 100px;
  color: #F0eadb;
  margin: 0 40px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: var(--brand);
  border-radius: 50%;
  font-family: "bot-headline", sans-serif;
  font-size: 60px;
  text-align: center;
}
.bot-box__bullet ::after {
  top: 0;
  left: 0;
  content: "";
  position: absolute;
}
.bot-box__content {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.bot-box__content--centered {
  text-align: center;
}
.bot-box--formatting-enabled h1, .bot-box--formatting-enabled h2, .bot-box--formatting-enabled h3, .bot-box--formatting-enabled h4 {
  margin-bottom: 1rem;
}
.bot-box--formatting-enabled h1 {
  font-size: 200%;
}
.bot-box--formatting-enabled h2 {
  font-size: 160%;
}
.bot-box--formatting-enabled h3 {
  font-size: 140%;
}
.bot-box--formatting-enabled h4 {
  font-size: 120%;
}
.bot-box--formatting-enabled b {
  font-weight: bold;
}
.bot-box--formatting-enabled i {
  font-style: italic;
}
.bot-box--formatting-enabled a {
  color: #4c1b0f;
}

.bot-button {
  font-family: "bot-body", sans-serif;
  border: 0;
  border-radius: 8px;
  font-size: 18px;
  background-color: #4c1b0f;
  color: #F0eadb;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 14px 18px 12px;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}
.bot-button:disabled {
  background-color: #888;
  cursor: not-allowed;
}
.bot-button--small {
  border-radius: 3px;
  padding: 10px 20px 5px 20px;
  font-size: 14px;
}
.bot-button--tiny {
  border-radius: 3px;
  padding: 5px 10px 2px 10px;
  font-size: 12px;
}
.bot-button--icon {
  border-radius: 3px;
  padding: 4px 4px 2px;
  font-size: 14px;
  width: 2em;
}
.bot-button--secondary {
  background-color: #F0eadb;
  color: var(--brand);
}
.bot-button--forward {
  position: relative;
  padding-right: 40px;
}
.bot-button--forward::after {
  content: ">";
  font-size: 170%;
  position: absolute;
  right: 10px;
  top: 7px;
}
.bot-button--back {
  position: relative;
  padding-left: 40px;
}
.bot-button--back::after {
  content: "<";
  font-size: 170%;
  position: absolute;
  left: 10px;
  top: 7px;
}

.storybook-button--primary {
  color: white;
  background-color: #1ea7fd;
}

.storybook-button--secondary {
  color: #333;
  background-color: transparent;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}

.storybook-button--small {
  font-size: 12px;
  padding: 10px 16px;
}

.storybook-button--medium {
  font-size: 14px;
  padding: 11px 20px;
}

.storybook-button--large {
  font-size: 16px;
  padding: 12px 24px;
}

.bot-counter {
  border: 7px solid #4c1b0f;
  border-radius: 14px;
  background-color: #4c1b0f;
  color: #F0eadb;
  display: flex;
  align-items: center;
  margin: 0.5em 0;
}
.bot-counter__controls {
  display: flex;
  padding-right: 1em;
}
.bot-counter__input {
  width: 3em;
  height: 32px -4px;
  background-color: white;
  color: black;
}
.bot-counter__button {
  height: 32px;
  width: 32px;
  background-color: #4c1b0f;
  border: 1px solid #F0eadb;
  color: #F0eadb;
}

.bot-checkbox__outline.bot-checkbox__checked {
  color: #F0eadb;
  background-color: var(--brand);
  border: 7px solid var(--brand);
  border-radius: 14px;
}

.bot-checkbox {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 40px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: initial;
  text-align: left;
  /* Show the checkmark when checked */
}
.bot-checkbox__outline {
  border: 7px solid transparent;
}
.bot-checkbox__huge {
  font-size: 16.875pt;
}
.bot-checkbox__title {
  display: block;
}
.bot-checkbox__subtitle {
  display: block;
  font-size: 80%;
}
.bot-checkbox__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.bot-checkbox__outline .bot-checkbox__checkmark {
  border: 1px solid var(--brand);
}
.bot-checkbox__checkmark {
  position: absolute;
  left: 0;
  height: 32px;
  width: 32px;
  background-color: #F0eadb;
}
.bot-checkbox__checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 5px;
  width: 22px;
  height: 22px;
  background-image: url("./assets/icons/check.png");
  background-size: contain;
}
.bot-checkbox__input:checked ~ .bot-checkbox__checkmark:after, .bot-checkbox__checkmark--checked:after, .bot-checkbox__checked .bot-checkbox__checkmark:after {
  display: block;
}
.bot-checkbox:hover .bot-checkbox__input ~ .bot-checkbox__checkmark {
  background-color: #ccc;
}
.bot-feature {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-start;
  color: var(--brand);
  text-align: center;
}
.bot-feature svg {
  fill: var(--brand);
}
.bot-feature__icon {
  color: var(--brand);
  margin: 1rem 0;
  font-size: 50px;
}

.bot-footer {
  height: 36px;
  width: 100%;
  background-color: var(--brand);
  color: white;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}
.bot-footer > * {
  margin-left: 10px;
}
.bot-footer__pipe-right {
  border-right: 2px solid #F0eadb;
  padding-right: 10px;
}
@media screen and (max-width: 720px) {
  .bot-footer {
    height: auto;
    flex-direction: column;
    padding-top: 0.3em;
  }
  .bot-footer > * {
    margin: 0.3em;
  }
  .bot-footer__pipe-right {
    border: none;
    padding: 0;
  }
}

.bot-header {
  background-color: var(--brand);
  padding: 0 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.bot-header--left {
  justify-content: flex-start;
}
.bot-header__logo {
  align-self: flex-start;
  flex-grow: 1;
  height: 65px;
  padding: 25px 50px 40px 50px;
}
.bot-header__logo img {
  height: 100%;
}
.bot-header__account {
  display: flex;
  flex-direction: column;
  width: 130px;
}
.bot-header__account > * {
  margin: 5px;
}
.bot-header__toggle {
  display: none;
}
.bot-header__toggle__open-icon {
  display: none !important;
}
@media screen and (max-width: 720px) {
  .bot-header {
    flex-direction: column;
    height: 100%;
  }
  .bot-header .bot-header-link, .bot-header .bot-header__account {
    display: none;
  }
  .bot-header--open .bot-header__toggle__open-icon {
    display: inline !important;
  }
  .bot-header--open .bot-header__toggle__closed-icon {
    display: none !important;
  }
  .bot-header--open .bot-header-link, .bot-header--open .bot-header__account {
    display: block;
  }
  .bot-header--open .bot-header-link {
    border-bottom: 1px solid #F0eadb;
    height: auto;
    width: 100%;
    flex: 0 0 auto;
    padding: 1em 0;
    text-align: center;
  }
  .bot-header--open .bot-header-link__text {
    font-size: 20px;
  }
  .bot-header--open .bot-header-link__icon {
    display: none;
  }
  .bot-header--open .bot-language-picker {
    order: 1;
    justify-content: center;
  }
  .bot-header--open .bot-header__account {
    margin-top: 2em;
    margin-bottom: 1em;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .bot-header__toggle {
    display: flex;
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2em;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    text-align: center;
    color: var(--brand);
    background-color: #F0eadb;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #4C1B0F40;
    cursor: pointer;
  }
  .bot-header__logo {
    align-self: center;
    order: -20;
  }
  .bot-header::after {
    content: "";
    flex: 0 0 20px;
    display: block;
    bottom: 0;
    width: 100%;
    background-image: url("./assets/dashes-horizontal.png");
    background-repeat: repeat-x;
    order: -10;
  }
}

.bot-header-link {
  width: 130px;
  height: 130px;
  position: relative;
  background-color: var(--brand);
  color: #F0eadb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.bot-header-link__icon {
  font-size: 40px;
  fill: #F0eadb;
}
.bot-header-link--active {
  color: var(--brand);
  background-color: #F0eadb;
}
.bot-header-link--active svg {
  fill: var(--brand);
}
@media screen and (min-width: 720px) {
  .bot-header-link:hover {
    color: var(--brand);
    background-color: #F0eadb;
  }
  .bot-header-link:hover svg {
    fill: var(--brand);
  }
}
.bot-header-link__text {
  font-size: 9pt;
  text-transform: uppercase;
  text-align: center;
  pading: 0 0.3em;
}
.bot-header-link__menu {
  display: none;
  position: absolute;
  width: 100%;
  background-color: var(--brand);
  color: white;
  top: 100%;
  z-index: 10;
}
.bot-header-link__menu--open {
  display: block;
}
@media screen and (max-width: 720px) {
  .bot-header-link__menu--open {
    position: relative;
    padding: 0.5em 0;
  }
}
.bot-header-link__menu-item {
  display: block;
  text-align: left;
  margin: 12px 15px;
  text-decoration: none;
  color: white;
}
.bot-header-link__menu-item:hover {
  text-decoration: underline;
}

.bot-hero {
  position: relative;
  color: #F0eadb;
}
@media screen and (max-width: 720px) {
  .bot-hero {
    margin-bottom: 15px;
  }
}
.bot-hero__content {
  z-index: 3;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 250px;
  text-align: center;
}
.bot-hero__content::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  height: 20px;
  width: 100%;
  background-image: url("./assets/dashes-horizontal.png");
  background-repeat: repeat-x;
}
.bot-hero__content::before {
  content: "";
  position: absolute;
  display: block;
  top: 10px;
  height: 20px;
  width: 100%;
  background-image: url("./assets/dashes-horizontal.png");
  background-repeat: repeat-x;
}
.bot-hero::before {
  z-index: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #4c1b0f url("./assets/images/hero-home.png");
  background-size: cover;
}
.bot-hero::after {
  z-index: 1;
  background-color: saddlebrown;
  opacity: 0.5;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bot-hero--home::before {
  background-image: url("./assets/images/hero-home.png");
}
.bot-hero--order::before {
  background-image: url("./assets/images/hero-order.png");
}
.bot-hero--agb::before {
  background-image: url("./assets/images/hero/AGB.jpg");
}
.bot-hero--bestellung::before {
  background-image: url("./assets/images/hero/Bestellung.jpg");
}
.bot-hero--impressum::before {
  background-image: url("./assets/images/hero/Impressum.jpg");
}
.bot-hero--login::before {
  background-image: url("./assets/images/hero/Login.jpg");
}
.bot-hero--meineBestellungen::before {
  background-image: url("./assets/images/hero/MeineBestellungen.jpg");
}
.bot-hero--meineRechnungen::before {
  background-image: url("./assets/images/hero/MeineRechnungen.jpg");
}
.bot-hero--meinGuthabenaufladen::before {
  background-image: url("./assets/images/hero/MeinGuthabenaufladen.jpg");
}
.bot-hero--start-1::before {
  background-image: url("./assets/images/hero/Startseite_v1.jpg");
}
.bot-hero--start-2::before {
  background-image: url("./assets/images/hero/Startseite_v2.jpg");
}
.bot-hero--start-3::before {
  background-image: url("./assets/images/hero/Startseite_v3.jpg");
}
.bot-hero--start-4::before {
  background-image: url("./assets/images/hero/Startseite_v4.jpg");
}
.bot-hero--start-5::before {
  background-image: url("./assets/images/hero/Startseite_v5.jpg");
}
.bot-hero--start-6::before {
  background-image: url("./assets/images/hero/Startseite_v6.jpg");
}
.bot-hero--start-7::before {
  background-image: url("./assets/images/hero/Startseite_v7.jpg");
}
.bot-hero--start-8::before {
  background-image: url("./assets/images/hero/Startseite_v8.jpg");
}
.bot-hero--start-9::before {
  background-image: url("./assets/images/hero/Startseite_v9.jpg");
}
.bot-hero--start-10::before {
  background-image: url("./assets/images/hero/Startseite_v10.jpg");
}

.bot-input-group {
  margin-bottom: 1em;
  display: flex;
  flex-direction: column;
  padding-top: 1em;
}
.bot-input-group__wrapper {
  width: 300px;
  margin: 0 auto;
}

.bot-input {
  position: relative;
}
.bot-input:focus-within {
  font-weight: bold;
  color: red;
}
.bot-input__label {
  position: absolute;
  top: -21px;
  left: 50%;
  transform: translate(-50%, 0);
  white-space: nowrap;
  color: #F0eadb;
  text-transform: uppercase;
  background-color: var(--brand);
  padding: 0 1em;
  font-size: 90%;
}
.bot-input__input {
  box-shadow: 0px 3px 6px #00000029;
  background-color: transparent;
  height: 40px;
  border: 2px solid #F0eadb;
  border-radius: 6px;
  padding: 0 1em;
  outline: none;
  font-size: 16.875pt;
  color: #F0eadb;
}
.bot-input__input::-webkit-input-placeholder {
  color: #d2c093;
}
.bot-input__input:focus {
  border: 2px solid #F0eadb;
  box-shadow: 0px 3px 6px #00000088;
}

.bot-icon-button {
  background-color: #F0eadb;
  color: var(--brand);
  height: 24px;
  width: 24px;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 14px;
}

a.bot-icon-button {
  text-decoration: none;
}

button.bot-icon-button {
  border: 0;
  margin-top: -1px;
}

.bot-language-picker {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.bot-language-picker__button-wrapper {
  display: inline;
  margin-left: 4px;
}
.bot-language-picker__button-wrapper:not(:last-child) {
  padding-right: 4px;
  padding-top: 2px;
  border-right: 1px solid #F0eadb;
}
.bot-language-picker__button {
  background-color: transparent;
  color: #F0eadb;
  border-radius: 3px;
  text-decoration: none;
  padding: 4px;
  padding-bottom: 2px;
}
.bot-language-picker__button:hover {
  text-decoration: underline;
}
.bot-language-picker__button--active {
  background-color: #F0eadb;
  color: var(--brand);
}

.bot-layout--twocol {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: center;
}
.bot-layout--twocol > * {
  width: 40%;
}

.bot-layout--intro {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: 60px 0;
}

.bot-layout--features {
  display: flex;
  margin: 1em 0;
}
.bot-layout--features > * {
  padding: 0px 16px;
  position: relative;
}
.bot-layout--features > :not(:last-child)::after {
  position: absolute;
  right: 0;
  top: 0;
  content: "";
  width: 5px;
  height: 100%;
  background-image: url("./assets/dashes-vertical.png");
}
@media screen and (max-width: 720px) {
  .bot-layout--features > :not(:last-child)::after {
    background-image: none;
    overflow-y: hidden;
  }
}
@media screen and (max-width: 720px) {
  .bot-layout--features {
    flex-direction: column;
  }
}

.bot-layout--products {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.bot-layout--products > * {
  margin: 12px 12px;
}

.bot-layout--image-row {
  display: flex;
  justify-content: space-around;
}
.bot-layout--image-row img {
  flex-shrink: 1;
  max-height: 300px;
}

.bot-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0f0f0faa;
  display: flex;
  margin: 0;
  z-index: 9000;
  justify-content: center;
}
.bot-modal__abs-wrapper {
  position: absolute;
  top: 50px;
  overflow-y: scroll;
  border-radius: 14px;
  border: 14px solid var(--brand);
  background-color: var(--brand);
  max-height: 70%;
}
@media screen and (max-width: 720px) {
  .bot-modal__abs-wrapper {
    max-height: inherit;
    height: calc(100% - 28px);
    top: 0;
  }
}
.bot-modal__wrapper {
  position: relative;
  color: #4c1b0f;
  height: 100%;
}
@media screen and (max-width: 720px) {
  .bot-modal__wrapper {
    margin: 0;
  }
}
.bot-modal--bonus .bot-modal__wrapper {
  border-color: #4c1b0f;
  background-color: #4c1b0f;
}
.bot-modal__inner {
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  border: 14px solid #F0eadb;
  background-color: #F0eadb;
  padding: 28px;
  min-width: 300px;
}
@media screen and (max-width: 720px) {
  .bot-modal__inner {
    padding: 0;
    height: calc(100% - 28px);
  }
}
.bot-modal__title {
  font-size: 16.875pt;
  margin-bottom: 0.5em;
}
.bot-modal__x {
  position: absolute;
  right: 14px;
}
:root {
  background: #F0eadb url("./assets/images/Parchment_500x500px.jpg") repeat;
  position: relative;
  min-height: 100vh;
}

.bot-page {
  margin-bottom: 30px;
}
@media screen and (max-width: 720px) {
  .bot-page {
    margin-bottom: 150px;
  }
}

.bot-page__section {
  position: relative;
  font-size: 11.25pt;
  padding: 20px;
  margin: 0 auto;
  max-width: 950px;
  text-align: center;
}
@media screen and (max-width: 720px) {
  .bot-page__section {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 20px;
  }
}
.bot-page__section > * {
  margin-bottom: 20px;
}
.bot-page__section--wide {
  max-width: 1300px;
}

.bot-page__controls {
  display: flex;
  margin: 40px 0;
  justify-content: space-between;
}
.bot-page__controls--right {
  justify-content: flex-end;
}

.bot-pill {
  color: #F0eadb;
  text-transform: uppercase;
  background-color: #4c1b0f;
  font-size: 16.875pt;
  padding: 7px 7px 4px 7px;
  display: block;
}
.bot-pill--wide {
  padding: 7px 5em 4px;
}
@media screen and (max-width: 720px) {
  .bot-pill--wide {
    padding: 7px 1em 4px;
  }
}
.bot-pill--small {
  background-color: #4c1b0f;
  text-transform: none;
  font-size: 80%;
}
.bot-pill--primary {
  background-color: var(--brand);
}
.bot-pill--ivory {
  background-color: #F0eadb;
  color: var(--brand);
}

.bot-product {
  border-radius: 13px;
  padding: 12px;
  background-color: var(--brand);
  max-width: 270px;
}
.bot-product--bonus {
  background-color: #4c1b0f;
}
.bot-product--selected .bot-product__inner {
  background-color: var(--brand);
  color: white;
}
.bot-product--selected.bot-product--bonus .bot-product__inner {
  background-color: #4c1b0f;
  color: white;
}
.bot-product__inner {
  background-color: white;
  border-radius: 8px;
  padding: 8px;
}
.bot-product__date {
  background-color: #4c1b0f;
  color: #F0eadb;
  font-size: 10px;
  text-align: center;
  padding-top: 2px;
  margin-bottom: 6px;
}
.bot-product__image {
  width: 230px;
  height: 170px;
  object-fit: cover;
}
.bot-product__name {
  font-size: 20px;
  margin-bottom: 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 230px;
  overflow: hidden;
}
.bot-product__producer {
  font-size: 10px;
}

.bot-progress {
  box-sizing: border-box;
  position: relative;
  height: 12px;
  border: 2px solid white;
  border-radius: 0.5em;
  width: 100%;
  margin: 5px 5px 5px 3px;
}
.bot-progress__fill {
  position: absolute;
  height: 8px;
  background-color: white;
  top: 0;
  left: 0;
}

.bot-table {
  color: #F0eadb;
  background-color: var(--brand);
  border-radius: 16px;
  box-shadow: 6px 3px 19px #00000029;
  overflow-x: auto;
  padding: 1em;
}
@media screen and (max-width: 720px) {
  .bot-table {
    margin: auto -30px;
  }
}
.bot-table table {
  border: 1px solid #F0eadb;
  border-collapse: collapse;
  width: 100%;
}
.bot-table__heading {
  text-align: left;
  font: 16.875pt "bot-headline", sans-serif;
}
.bot-table__sub-heading {
  text-align: left;
  font-size: 110%;
}
.bot-table--right {
  text-align: right;
}
.bot-table--left {
  text-align: left;
}
.bot-table td, .bot-table th {
  padding: 0.5rem 0.8rem;
  border: 1px solid #F0eadb;
}

/*# sourceMappingURL=out.css.map */