@media (min-width: 1081px) {
  :root {
    --margin: 5px;
    --title-font-size: 180%;
    --logo-size: 50px;
  }
}
@media (max-width: 1080px) {
  :root {
    --margin: 3px;
    --title-font-size: 130%;
    --logo-size: 40px;
  }
}
.calendar .month-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-weight: bold;
}
.calendar .month-selector .prev.button .svg-arrow,
.calendar .month-selector .next.button .svg-arrow {
  display: block;
  margin: var(--margin) calc(var(--margin) / 2);
  fill: rgb(91.3461538462, 74.0384615385, 113.4615384615);
  width: 0.8rem;
  height: 0.8rem;
}
.calendar .month-selector .prev.button:hover .svg-arrow,
.calendar .month-selector .next.button:hover .svg-arrow {
  fill: rgb(207.3076923077, 198.7230769231, 218.2769230769);
}
.calendar .month-selector .prev {
  float: left;
}
.calendar .month-selector .next {
  float: right;
}
.calendar .month-selector .year {
  margin: var(--margin);
}
.calendar .month-selector .month {
  display: none;
}
.calendar .month-selector .month.current {
  display: inline;
}
.calendar ul.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1px;
  margin: 0;
  padding: 0;
}
.calendar ul.days li {
  display: inline-block;
  text-align: center;
  margin: 0;
}
.calendar ul.days li.weekday {
  font-style: italic;
}
.calendar ul.days li.day {
  min-height: 4rem;
}
.calendar ul.days li.current-month {
  background-color: #B29B89;
}
.calendar ul.days li.today {
  background: repeating-linear-gradient(-45deg, #B29B89, #B29B89 25%, transparent 25%, transparent 50%);
  background-size: 8px 8px;
}
.calendar ul.days li.today .number {
  font-weight: bold;
}
.calendar ul.days li.selected-day {
  background-color: #9B89B2;
}
.calendar ul.days li .scheduled-recipes {
  font-size: 0.8em;
}
.calendar ul.days li .scheduled-recipes .remove-scheduled-recipe {
  border-radius: 0.3em;
  margin: calc(var(--margin) / 2);
  padding: 0px calc(var(--margin) / 2);
}

#hidden-templates-calendar {
  display: none;
}

#search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
#search input {
  width: 100%;
  line-height: 28px;
  padding: 0 1rem;
  padding-left: 2.5rem;
  border-radius: 8px;
  background-color: #89B29B;
}
#search input::placeholder {
  color: rgb(126.4355769231, 118.3737101313, 112.0644230769);
}
#search .icon {
  position: absolute;
  left: 1rem;
  fill: #9B89B2;
  width: 1rem;
  height: 1rem;
}
#search .results {
  display: none;
  z-index: 2;
  position: absolute;
  background-color: white;
  vertical-align: top;
  top: 100%;
  border: solid 1px #9B89B2;
  background-color: #B29B89;
  box-shadow: 0 0 5px rgb(103.7692307692, 84.1076923077, 128.8923076923);
}
#search .results .message {
  display: hidden;
  padding: var(--margin) calc(2 * var(--margin)) var(--margin) calc(2 * var(--margin));
}
#search .results ul {
  padding: 0px;
  margin: 0px;
}
#search .results ul li {
  padding: var(--margin) calc(2 * var(--margin)) var(--margin) calc(2 * var(--margin));
  list-style-type: none;
}
#search .results ul li em {
  font-weight: bold;
}
#search .results ul li:nth-child(odd) {
  background: #89B29B;
}

#hidden-templates-search {
  display: none;
}

#toasts {
  position: fixed;
  z-index: 6;
  left: 50%;
  top: 15px;
  transform: translate(-50%, 0%);
  display: flex;
  flex-direction: column;
}
#toasts .toast {
  display: none;
  width: fit-content;
  align-self: center;
  border: 0.1em solid #9B89B2;
  border-radius: 0.5em;
  background-color: #89B29B;
  color: rgb(98.0307692308, 78.9230769231, 63.9692307692);
  text-align: center;
  padding: calc(2 * var(--margin)) calc(2 * var(--margin));
  box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
  margin: var(--margin);
}
#toasts .toast .content {
  display: inline-block;
}
#toasts .toast img {
  vertical-align: text-bottom;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#modal-dialog {
  position: fixed;
  z-index: 5;
  left: 50%;
  width: 50%;
  transform: translate(-50%, 0%);
  border: 0.1em solid #9B89B2;
  border-radius: 0.5em;
  background-color: #89B29B;
  color: rgb(98.0307692308, 78.9230769231, 63.9692307692);
  text-align: center;
  padding: calc(2 * var(--margin)) calc(2 * var(--margin));
  box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
  padding: 0;
}
#modal-dialog > div {
  padding: calc(2 * var(--margin)) calc(2 * var(--margin));
}

.tooltip {
  position: relative;
}
.tooltip .tooltiptext {
  color: rgb(98.0307692308, 78.9230769231, 63.9692307692);
  visibility: hidden;
  width: 120px;
  background-color: #B29B89;
  text-align: center;
  padding: var(--margin) 0;
  border: 0.1em solid #9B89B2;
  border-radius: 0.5em;
  position: absolute;
  z-index: 10;
  cursor: default;
  top: -var(--margin);
  left: 100%;
  margin-left: -var(--margin);
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 20%;
  right: 100%;
  margin-top: -var(--margin);
  border-width: var(--margin);
  border-style: solid;
  border-color: transparent #9B89B2 transparent transparent;
}

a {
  color: rgb(91.3461538462, 74.0384615385, 113.4615384615);
  text-decoration: none;
}
a:hover {
  color: rgb(207.3076923077, 198.7230769231, 218.2769230769);
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: rgb(98.0307692308, 78.9230769231, 63.9692307692);
  background-color: #B29B89;
  margin: 0px;
}
body .user-message {
  font-weight: 600;
  color: #cf2d2d;
}
body .drag-handle {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: bottom;
  background-color: blue;
}
body .footer-container {
  margin: var(--margin);
  align-self: center;
  font-size: 0.7em;
}
body .header-container {
  margin: calc(2 * var(--margin));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
body .header-container .title {
  font-size: var(--title-font-size);
  font-style: italic;
}
body .header-container .title .logo {
  width: var(--logo-size);
  height: var(--logo-size);
  vertical-align: bottom;
  margin: 0px 10px 0px 0px;
}
body .header-container .header-menu .user-menu {
  margin: var(--margin);
}
body .header-container .header-menu .user-menu .user-edit-link {
  margin-left: var(--margin);
}
body .header-container .header-menu #select-website-language {
  margin: var(--margin);
  padding: var(--margin);
}
body .main-container {
  display: flex;
  flex-direction: row;
}
body .main-container #recipes-list {
  margin: calc(2 * var(--margin));
}
body .main-container #recipes-list ul {
  padding-left: 20px;
}
body .main-container #recipes-list ul li {
  margin-bottom: calc(var(--margin) / 2);
}
body .main-container #recipes-list ul li a {
  padding: calc(var(--margin) / 2);
}
body .main-container #recipes-list hr {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 1px;
  color: #9B89B2;
  background: #9B89B2;
  font-size: 0;
  border: 0;
}
body .main-container #recipes-list .recipe-item {
  white-space: preserve nowrap;
  padding: 2px;
  border: 0.1em solid rgba(0, 0, 0, 0);
}
body .main-container #recipes-list .recipe-item.current {
  padding: 2px;
  border: 0.1em solid #9B89B2;
  border-radius: 0.5em;
  color: rgb(238.4153846154, 233.4615384615, 229.5846153846);
  background-color: #89B29B;
}
body .main-container .content {
  margin: calc(2 * var(--margin));
  flex-grow: 1;
  background-color: #89B29B;
  border: 0.1em solid #9B89B2;
  border-radius: 1em;
  padding: 0.8em;
}
body .main-container .content h1 {
  text-align: center;
}
body .main-container #hidden-templates {
  display: none;
}
body .main-container #recipe-edit {
  display: grid;
}
body .main-container #recipe-edit .drag-handle {
  cursor: move;
}
body .main-container #recipe-edit .group {
  border: 0.1em solid rgb(233.4615384615, 229.5846153846, 238.4153846154);
  margin-top: 0px;
  margin-bottom: 0px;
}
body .main-container #recipe-edit .step {
  border: 0.1em solid rgb(233.4615384615, 229.5846153846, 238.4153846154);
  margin-top: 0px;
  margin-bottom: 0px;
}
body .main-container #recipe-edit .ingredient {
  border: 0.1em solid rgb(233.4615384615, 229.5846153846, 238.4153846154);
  margin-top: 0px;
  margin-bottom: 0px;
}
body .main-container #recipe-edit .dropzone {
  height: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: white;
}
body .main-container #recipe-edit .dropzone.active {
  background-color: blue;
}
body .main-container #recipe-edit .dropzone.hover {
  background-color: red;
}
body .main-container #recipe-view .recipe-description h1 {
  font-size: 140%;
  text-align: left;
}
body .main-container #recipe-view .recipe-description h2 {
  font-size: 130%;
}
body .main-container #recipe-view .recipe-description h3 {
  font-size: 120%;
}
body .main-container #recipe-view .recipe-description h4 {
  font-size: 110%;
}
body .main-container #recipe-view .recipe-description h5 {
  font-size: 100%;
}
body .main-container #recipe-view .recipe-description h6 {
  font-size: 100%;
}
body .main-container #logs .current {
  font-weight: bold;
}
body .main-container #logs .line {
  padding: 3px;
}
body .main-container #logs .line.odd {
  background-color: #B29B89;
}
body .main-container #logs .date-time {
  font-weight: bold;
}
body .main-container #logs .level {
  padding: 2px;
  border-radius: 4px;
}
body .main-container #logs .level.ERROR {
  color: white;
  background-color: red;
}
body .main-container #logs .level.WARN {
  color: black;
  background-color: orange;
}
body .main-container #logs .level.INFO {
  color: white;
  background-color: blue;
}
body .main-container #logs .level.DEBUG {
  color: white;
  background-color: green;
}
body .main-container #logs .level.TRACE {
  color: black;
  background-color: yellow;
}
body .main-container #logs .thread-name,
body .main-container #logs .thread-id {
  font-style: italic;
  font-size: 80%;
}
body .main-container #dev-panel .test-group {
  margin-top: 10px;
  margin-bottom: 10px;
}
body .main-container form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--margin) / 2);
  align-items: center;
}
body .main-container #sign-up form,
body .main-container #sign-in form,
body .main-container #ask-reset-password form,
body .main-container #reset-password form,
body .main-container #user-edit form {
  grid-template-columns: auto 1fr auto;
}
body .main-container #sign-up form input[type=submit],
body .main-container #sign-in form input[type=submit],
body .main-container #ask-reset-password form input[type=submit],
body .main-container #reset-password form input[type=submit],
body .main-container #user-edit form input[type=submit] {
  grid-column: 2;
}

.tag {
  border: 0.1em solid #9B89B2;
  border-radius: 0.5em;
  background-color: #B29B89;
  margin: var(--margin);
  padding: var(--margin);
}

textarea,
input {
  margin: var(--margin);
  padding: calc(var(--margin) / 2) calc(2 * var(--margin));
  background-color: #B29B89;
  border: solid 1px #9B89B2;
  color: rgb(98.0307692308, 78.9230769231, 63.9692307692);
}
textarea:focus,
input:focus {
  outline: none;
  background-color: #89B29B;
  box-shadow: 0 0 5px rgb(103.7692307692, 84.1076923077, 128.8923076923);
}

select {
  margin: var(--margin);
  padding: calc(var(--margin) / 2) calc(2 * var(--margin));
  background-color: #B29B89;
  border: solid 1px #9B89B2;
  color: rgb(98.0307692308, 78.9230769231, 63.9692307692);
}
select option {
  color: inherit;
  background-color: #B29B89;
}

input[type=button],
input[type=submit],
.button {
  white-space: nowrap;
  margin: var(--margin);
  padding: calc(var(--margin) / 2) calc(2 * var(--margin));
  border: 0.1em solid #9B89B2;
  border-radius: 0.5em;
  background-color: #89B29B;
  box-shadow: -5px -5px 4px 3px rgb(124.6553846154, 169.9446153846, 144.5384615385) inset, 5px 5px 4px 3px rgb(149.3446153846, 186.0553846154, 165.4615384615) inset;
  cursor: pointer;
  color: rgb(91.3461538462, 74.0384615385, 113.4615384615);
}
input[type=button]:hover,
input[type=submit]:hover,
.button:hover {
  color: rgb(207.3076923077, 198.7230769231, 218.2769230769);
}

#shopping-list {
  display: grid;
  grid-gap: var(--margin);
  grid-template-columns: auto auto 1fr auto auto auto;
}
#shopping-list .shopping-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1/7;
}
#shopping-list .shopping-item:nth-child(even) {
  background-color: #B29B89;
}

#toggle-theme {
  margin: var(--margin);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 3.5em;
  height: 2em;
}
#toggle-theme input {
  opacity: 0;
  width: 0;
  height: 0;
}
#toggle-theme .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #89B29B;
  transition: 0.4s;
  border-radius: 30px;
  margin: 0px;
}
#toggle-theme .slider::before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: #B29B89;
  box-shadow: inset 2px -2px 0 1.8px #ffffff;
  transition: 0.4s;
}
#toggle-theme input:checked + .slider:before {
  background-color: yellow;
  box-shadow: none;
  transform: translateX(1.5em);
}