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

/* 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;} }