@import url(https://fonts.googleapis.com/css?family=Comic+Neue);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Material+Icons);

@font-face {
  font-family: quesha;
  src: url(Quesha.ttf);
}

.popup-wrapper .popup {
  max-width: 100% !important;
}

.suggestion-list {
  background-color: #dedeb3 !important;
}

.suggestion-list .list-item.item.active {
  background-color: #f3f3d4 !important;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: Montserrat;
}

h4 {
  margin: 0;
}

material-dialog header {
  background-color: #c17925;
  color: #fffbf7;
  padding: 16px 24px 0 !important;
}

material-dialog main,
material-dialog footer {
  background-color: #fffed4;
}

material-dialog {
  border-radius: 8px !important;
}

material-dialog.green header {
  background-color: #28735a;
}

material-dialog.green main {
  background-color: #2ead82;
  padding: 0;
}

material-dialog.green footer {
  background-color: #53dcae;
}

material-dialog.green main.with-scroll-strokes {
  border-bottom: 0px #28735a solid;
  border-top: 0px transparent solid;
}

material-dialog footer {
  padding: 8px !important;
}

.beta-tag {
  font-size: 12px;
  color: #c1411a;
}

.lloid-message {
  margin: 0 auto;
}

.item-variant-name {
  font-family: Montserrat;
  text-transform: lowercase;
  font-size: 14px;
  margin-top: 4px;
  margin-bottom: 4px;
}

html,
body {
  margin: 0;
  height: 100%;
  touch-action: manipulation;
}

material-list.options-list {
  background-color: #fdfde1;
}

body {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Roboto, Calibri, serif;
  margin: 0 auto;
  padding: 0;
}

.error-panel {
  padding: 8px;
  margin: 8px;
  margin-top: 0px;
  background-color: #d04537;
  border-radius: 4px;
  max-width: 240px;
  color: #ffffff;
  box-sizing: border-box;
}

.remove-button {
  position: absolute;
  right: 0;
  top: 0;
  color: #ff3b00;
  z-index: 999;
}

.row {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
  position: relative;
  display: flex;
  flex-direction: column;
}

.full-flex {
  flex: 1;
}

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

.align-center {
  align-items: center;
}

.align-self-center {
  align-self: center;
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

.full-size {
  width: 100%;
  height: 100%;
}

.relative {
  position: relative;
}

.recipe-icon-overlay {
  position: absolute;
  bottom: 4px;
  width: 28px !important;
  right: 8px;
  opacity: 0.8;
}

.content-button {
  background-color: #ffbf3c !important;
  color: #5a3101;
  border-radius: 8px !important;
  margin: 8px !important;
  margin-left: 0px !important;
}

material-button.content-button {
  border-radius: 8px !important;
}

.margin-small {
  margin: 4px;
}

.padding-content {
  padding: 16px;
}

.text-color {
  color: #331302 !important;
}

.delete-button {
  color: #c71818;
}
/* Thanks https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

material-dropdown-select {
  margin-left: 8px;
}

.banner-ad {
  width: 100%;
  margin: 16px;
  /*height: 90px;*/
}
.responsive_ad_size {
  width: 320px;
}
@media (min-width: 500px) {
  .responsive_ad_size {
    width: 468px;
  }
}
@media (min-width: 800px) {
  .responsive_ad_size {
    width: 728px;
  }
}

.responsive_ad_size_2 {
  width: 320px;
}
@media (min-width: 500px) {
  .responsive_ad_size_2 {
    width: 468px;
  }
}
@media (min-width: 800px) {
  .responsive_ad_size_2 {
    width: 728px;
  }
}