@font-face {
  font-family: "metropolis_black";
  src: url("../fonts/metropolis_black.otf"); }
@font-face {
  font-family: "metropolis_blackitalic";
  src: url("../fonts/metropolis_blackitalic.otf"); }
@font-face {
  font-family: "metropolis_bold";
  src: url("../fonts/metropolis_bold.otf"); }
@font-face {
  font-family: "metropolis_bolditalic";
  src: url("../fonts/metropolis_bolditalic.otf"); }
@font-face {
  font-family: "metropolis_semibold";
  src: url("../fonts/metropolis_semibold.otf"); }
@font-face {
  font-family: "metropolis_semibolditalic";
  src: url("../fonts/metropolis_semibolditalic.otf"); }
@font-face {
  font-family: "metropolis_medium";
  src: url("../fonts/metropolis_medium.otf"); }
@font-face {
  font-family: "metropolis_extrabold";
  src: url("../fonts/metropolis_extrabold.otf"); }
* {
  /*font-family: roboto-regular;*/
}
.bottom_router{
	width: 100%;
	max-width: 600px;
	height: 108px;
	color: #000000;
	background-color: #000000;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bottom_router img {
    width: 44px;
    height: 44px;
}

.navbar-spacer {
    flex-grow: 1;
}
  
.body-app{
	height: 100%;
	width: 100%;
	background: url('../img/bg.png') 100% no-repeat;
	background-size: 100% 100%;
}
.body-app-top{
	height: 100%;
	width: 100%;
	background: url('../img/bg-shadow.png') 100% no-repeat;
	background-size: 100% 100%;
	position:relative;
}
.body-app-top-one{
	height: 100%;
	width: 100%;
}
.body-app-top-two{
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.1);
	position:absolute;
	box-sizing: border-box;
	top: 0;
	left: 0;
}

.icon_history {
  width: 9%;
  height: 5%;
  margin-right: 4%;
  margin-top: 2%;
  float: right;
}

.match-canvas-tis{
	width: 100%;
	height: 47%;
	margin-top: 10%;
	float: left;
	position:relative;
}

.matchCanvas{
	width: 80%;
	height: 100%;
	margin: auto;
}
.match-tip{
	width: 90%;
	aspect-ratio: 5/1;
	background: url('../img/macth-tip.png') 100% no-repeat;
	background-size: 100% 100%;
	position:absolute;
	top:75%;
	left: 5%;
	box-sizing: border-box;
	padding-top: 9%;
}

.text_num{
	font-size: 214%;
	font-family: metropolis_semibold;
	font-weight: 600;
	color: #FFCF8B;
	margin-left: 18%;
}
.text_day{
	font-size: 185%;
	font-family: metropolis_medium;
	font-weight: 500;
	color: #FFCF8B;
}
.hot-ones-div{
	width: 100%;
	position: absolute;
	bottom: 39%;
}
.hot-ones-img{
	width: 25%;
	aspect-ratio: 1/1.16;
	display: inline; 
	float: right; 
}

.match-bottom-content{
	width: 100%;
	height: 50%;
	bottom: 0%;
	position: absolute;
}

.match-bottom-div{
	width: 100%;
	bottom: 19%;
	height: 17%;
	float: left;
	margin-top: 2%;
	position: absolute;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dropdown_1 {
  background-color: rgba(250, 247, 255, 0.9);
  border-radius: 1.875rem;
  width: 45%;
  height: 100%;
  margin-left: 5%;
  border: 0.25rem solid rgba(176, 87, 255, 0.7);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 1;
}

.icon_2 {
  width: 17%;
  height: 49%;
  margin-left: 9%;
}
.icon_both_4 {
  width: 9%;
  aspect-ratio: 1/1;
}

.text_4 {
  overflow-wrap: break-word;
  color: rgba(145, 78, 255, 1);
  font-size: 171%;
  font-family: metropolis_medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 29px;
  margin-right: 9%;
}
.text-group_1 {
  flex-grow: 1;
  margin-left: 6%;
  overflow-wrap: break-word;
  color: rgba(34, 34, 34, 1);
  font-size: 214%;
  font-family: metropolis_medium;
  font-weight: 500;
  white-space: nowrap;
  line-height: 36px;
}

.icon_3 {
  width: 16px;
  height: 25px;
  margin-right: 9%;
}

.box_2 {
  background-color: rgba(255, 242, 222, 0.9);
  border-radius: 1.875rem;
  width: 43%;
  height: 100%;
  margin-right: 5%;
  display: flex;
  align-items: center;
}

.icon_4 {
  width: 16%;
  height: 45%;
  margin-left: 17%;
}

.text_2 {
  overflow-wrap: break-word;
  color: rgba(34, 34, 34, 1);
  font-size: 214%;
  font-family: metropolis_medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 36px;
  margin-top: 3px;
  margin-right: 28%;
}







.box_4 {
  background-color: rgba(250, 247, 255, 0.9);
  border-radius: 1.875rem;
  align-self: center;
  width: 44%;
  height: 47%;
  bottom: 39%;
  position: absolute;
  display: flex;
  left: 5%;
  justify-content: center;
  align-items: center;
  z-index:9
}

.section_6 {
	width: 82%;
	height: 18%;
	display: flex;
	justify-content: center;
	align-items: center;
}


.single-avatar_1 {
  width: 21%;
  height: 100%;
}

.text-group_2 {
  flex-grow: 1;
  overflow-wrap: break-word;
  color: rgba(34, 34, 34, 1);
  font-size: 214%;
  font-family: metropolis_medium;
  font-weight: 500;
  margin-left: 8%;
  white-space: nowrap;
  line-height: 36px;
}

.icon_5 {
  width: 9%;
  aspect-ratio: 1/1;
}

.text_5 {
  overflow-wrap: break-word;
  color: rgba(145, 78, 255, 1);
  font-size: 171%;
  font-family: metropolis_medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 29px;
}

.section_7 {
  width: 82%;
  height: 18%;
  margin-top: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.single-avatar_2 {
 width: 21%;
 height: 100%;
}

.text-group_3 {
 flex-grow: 1;
 overflow-wrap: break-word;
 color: rgba(34, 34, 34, 1);
 font-size: 214%;
 font-family: metropolis_medium;
 font-weight: 500;
 margin-left: 8%;
 white-space: nowrap;
 line-height: 36px;
}

.icon_6 {
  width: 9%;
  aspect-ratio: 1/1;
}

.text_6 {
  overflow-wrap: break-word;
  color: rgba(145, 78, 255, 1);
  font-size: 171%;
  font-family: metropolis_medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 29px;
}