.button {
  background-color: var(--tg-theme-button-color, #50a8eb);
  color: var(--tg-theme-button-text-color, #ffffff);
  #font-size: 20px; 
  display: block;
  width: 100%;
  font-size: 14px;
  margin: 15px 0;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
} 

.button:not(:last-child) {
  margin-bottom: 15px
}

.btn-primary {
    background-color: var(--tg-theme-button-color, #50a8eb);
    color: var(--tg-theme-button-text-color, #fff);
    border: none;
}

.caps {
    align-items: center;
    display: flex;
    margin-left: 8px;
    padding: 0;
}

.cap {
    background-image: url(../../images/ratings/cap@2x.png);
    background-size: cover;
    width: 15px;
    height: 15px;
    margin-right: 2px;
}

.cap:last-child {
    margin-right: 0;
}

.cap.cap-10,.cap.cap-20 {
    background-image: url(../../images/ratings/cap-10@2x.png);
    background-size: cover;
}

.cap.cap-20 {
    background-image: url(../../images/ratings/cap-20@2x.png)
}

.cap.cap-25,.cap.cap-30 {
    background-image: url(../../images/ratings/cap-25@2x.png);
    background-size: cover
}

.cap.cap-30 {
    background-image: url(../../images/ratings/cap-30@2x.png)
}

.cap.cap-40,.cap.cap-50 {
    background-image: url(../../images/ratings/cap-40@2x.png);
    background-size: cover
}

.cap.cap-50 {
    background-image: url(../../images/ratings/cap-50@2x.png)
}

.cap.cap-60,.cap.cap-70 {
    background-image: url(../../images/ratings/cap-60@2x.png);
    background-size: cover
}

.cap.cap-70 {
    background-image: url(../../images/ratings/cap-70@2x.png)
}

.cap.cap-75,.cap.cap-80 {
    background-image: url(../../images/ratings/cap-75@2x.png);
    background-size: cover
}

.cap.cap-80 {
    background-image: url(../../images/ratings/cap-80@2x.png)
}

.cap.cap-100,.cap.cap-90 {
    background-image: url(../../images/ratings/cap-90@2x.png);
    background-size: cover
}

.caps-100 {
    background-image: url(../../images/ratings/cap-100@2x.png)
}

.rating {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

div.line-container {
  width: 100%;
  #max-width: 650px;
  text-align: center;
}

div.beer-img-top-app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  #width: 100px;
  margin: 10px;
  #padding: 6px;
}

img.beer-image {
  max-height: 100px;
  max-width: 100px;
  width: auto;
  height: auto;
  #margin-top: 10px;
  border-radius: 6px;
}

div.beer-name-top-app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 26px;
  margin: 2px;
  padding: 2px;
}

p.beer-name-top-app {
  font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 16px;
  word-break: break-word;
  #text-indent: 20px;
  #height:26px;
  #border: 1px solid #f00;
}

div.style-name-top-app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  #margin: 2px;
  margin-top: 5px;
  margin-left: 2px;
  margin-right: 2px;
  padding: 1px;
}

p.style-name-top-app {
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 12px;
  #height:16px;
  text-align: center;
  #border: 1px solid #f00;
}

div.brewery-name-top-app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  #margin: 2px;
  margin-left: 4px;
  margin-right: 4px;
  padding: 1px;
}

p.brewery-name-top-app {
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 14px;
  text-align: center;
  #border: 1px solid #f00;
  display: flex;
  justify-content: center;
}

div.venue-name-top-app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  #margin: 1px;
  padding: 1px;
}

p.venue-name-top-app {
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  line-height: 14px;
  #height:16px;
  margin: 4px;
  text-align: center;
  padding: 5px;
  #border: 1px solid #f00;
}

div.prices-top-app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  margin-top: 3px;
  padding: 1px;
}

p.prices-top-app {
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  line-height: 14px;
  #height:16px;
  margin: 4px;
  text-align: center;
  padding: 5px;
  #border: 1px solid #f00;
}

p.beer-rate-top-app {
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 10px;
  height:16px;
  margin: 4px;
  text-align: center;
  padding: 5px;
  #border: 1px solid #f00;
}

span.rating-num {
  margin-left: 8px;
  font-size: 16px;
  margin-top: -5px;
}


.landing {
  /* background-color: antiquewhite; */
  #background-image: url("https://nodejs-shop.s3-us-west-2.amazonaws.com/landing-med.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  /* Nowrap by default */
  flex-wrap: wrap;
  /* Alignment along main axis, row/horizontal by default */
  justify-content: center;
  /* Alignment along cross axis, column/vertical by default */
  align-items: center;
  /* 3.5rem set as header height in .main-header class n main.css */
  height: calc(100vh - 3rem);
}

div.landing {
  background-color: #fff;
  padding: 0.5rem 3rem;
  border-radius: 1rem;
  opacity: 0.8;
}

div.landing > h1 {
  margin: 0;
  font-size: 3rem;
}

div.landing > h2 {
  margin: 0.8rem 0;
}

/* #######################################
    Beer card
   #######################################
*/
div.beer-img-card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  #height: 12px;
  max-height: 200px;
  width: 45%;
  margin: 10px;
  #padding: 6px;
}

img.beer-image-card {
  max-height: 200px;
  max-width: 100%;
  width: auto;
  height: auto;
  #margin-top: 10px;
}

div.abv-ibu-price-right-container { 
  display: inline-block;
  width: 45%;
  height: auto;
}

div.abu-ibu-rating-container {
  #position: absolute;
  #top: 78px;
  margin-bottom: 3%;
}

div.venue-price-days-container {
  display: block;
  justify-content: center;
  align-items: center;
  height: 28px;
  margin: 0px;
  padding: 1px;
  margin-bottom: 5%;
  #width: 45%;
}

div.prices-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  margin: 0px;
  padding: 1px;
  margin-top: 2px;
}

div.days-on-tap {
  margin-top: 4px;
  word-break: break-word;
  line-height: 16px;
}

p.beer-card-name {
  font: bold 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 16px;
  word-break: break-word;
}