@charset "UTF-8";

.services-container {
  display: flex;
  margin: auto;
  width: max-content;
}

.service_item {
  position: relative;
  overflow: hidden;
  width: 306px;
  width: 32.5vh;
  height: 607px;
  height: 64.5vh;
  margin: 61px 18px;
  margin: 6.8vh 1.8vh;
  background-color: #535367;
  filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12)) drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
  border-radius: 6px;
  border-radius: 0.6vh;
}

.services_image {height: 169px;height: 18vh;}

.services_title {
  margin-left: 6px;
  margin-left: 0.8vh;
  margin-top: 2.5vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 21px;
  font-size: 2.3vh;
  line-height: 29px;
  line-height: 3vh;
  color: #FFFFFF;
}

.services_description {
  margin-top: 14px;
  margin-top: 1.4vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  font-size: 1.5vh;
  line-height: 21px;
  line-height: 2.3vh;
  color: #FFFFFF;
  background-color: #5C5C77;
  padding: 16px;
  padding: 1.8vh;
  border-radius: 4px;
  border-radius: 0.2vh;
}

.services_buffs {
  /* margin-top: 17px; */
  margin-top: 1.9vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  /* font-size: 15px; */
  font-size: 1.6vh;
  /* margin-left: 3px; */
  margin-left: 0.2vh;
  /* line-height: 22px; */
  line-height: 2.4vh;
  color: #FFFFFF;
}

.services_upgrade_container {
  bottom: 25px;
  bottom: 2.5vh;
  position: absolute;
  left: 27px;
  left: 2.7vh;
  right: 27px;
  right: 2.7vh;
}

.services_buff_description {margin-bottom: 7px;margin-bottom: 0.8vh;}

.services_button {
  margin-top: 10px;
  margin-top: 1vh;
  width: 100%;
  height: 43px;
  height: 4.5vh;
  font-family: 'Avenir Next';
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  font-size: 2vh;
  line-height: 27px;
  line-height: 2.9vh;
  border: none;
  border-radius: 4px;
  border-radius: 0.4vh;
  color: #292929;
}

.service_content_container {
  padding: 0 20px;
  padding: 0 2.1vh;
}

.services_cost::before {
/* width: 37px; */
width: 4vh;
/* height: 37px; */
height: 4vh;
content: "";
float: left;
display: block;
/* margin-right: 6px; */
margin-right: 0.6vh;
background: url("../../static/images/tavern_menu_images/interface_icons/money_icon.png") no-repeat;
background-size: contain;
}

.services_cost {
font-family: 'Avenir Next';
font-style: normal;
font-weight: 700;
font-size: 18px;
font-size: 1.9vh;
line-height: 37px;
line-height: 4.2vh;
color: #FFFFFF;
text-shadow: 0px 0.876872px 0.876872px rgba(0, 0, 0, 0.14), 0px 1.75374px 0.876872px rgba(0, 0, 0, 0.12), 0px 0.876872px 2.63062px rgba(0, 0, 0, 0.2);
}

.services_button_active {
background: #535367;
color: #FA816E;
border: 2px solid #FA816E;
border: 0.2vh solid #FA816E;
}

.services_button_available {
background: linear-gradient(137.23deg, #FAA161 24.03%, #F71C92 199.29%);
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.services_button_cooldown, .services_button_unavailable{
background: #C4C4C4;
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.services_badge {
  font-size: 1.7vh;
  position: absolute;
  top: 1vh;
  right: 1vh;
  z-index: 100500;
  width: max-content;
  padding: 1vh 1.5vh 1vh 1.2vh;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.services_badge::before {
  content: '';
  width: 2vh;
  height: 2vh;
  background: url(../../static/images/interface/clock.png) no-repeat;
  display: block;
  background-size: contain;
  float: left;
  margin-right: 1vh;
}


.starts_in_badge {
  background: linear-gradient(137.23deg, #FAA161 24.03%, #F71C92 199.29%);

}

.days_left_badge {

background: linear-gradient(137.23deg, #D2FA61 24.03%, #1C8EF7 199.29%);
}

.cooldown_badge {


background: linear-gradient(137.23deg, #97A8FF 24.03%, #1C8EF7 199.29%);
}

.services_badge:empty {
  display: none;
}