@import "./common.css";
@import "./header-footer.css";

@font-face {
  font-family: "Shurjo";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_400_v2-6a682f6f610beeda14f0.woff2")
      format("woff2"),
    url("https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_400_v2-6a682f6f610beeda14f0.woff")
      format("woff"),
    url("https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_400_v2-6a682f6f610beeda14f0.ttf")
      format("truetype");
}

@font-face {
  font-family: "Shurjo";
  font-display: swap;
  font-weight: 700;
  font-style: normal;
  src: url("https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_700_v2-ef9e058ccc3a98d85030.woff2")
      format("woff2"),
    url("https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_700_v2-ef9e058ccc3a98d85030.woff")
      format("woff"),
    url("https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_700_v2-ef9e058ccc3a98d85030.ttf")
      format("truetype"),
    url("https://assets.prothomalo.com/prothomalo/assets/ShurjoWeb_700_v2-ef9e058ccc3a98d85030.eot")
      format("embedded-opentype");
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Shurjo", "Segoe UI", Tahoma;
}

html {
  font-size: 62.5%;
}

.grecaptcha-badge {
  visibility: hidden;
}

.point-table-container {
  display: block;
  padding: 0px 24px 50px 24px;
  max-width: 1280px;
  margin: 0;
}

.title-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.title-bottom-underline {
  width: 150px;
  height: 4px;
  background-color: #ff3054;
}

.title {
  margin: 38px 0 0 0;
  font-size: 32px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.03;
  letter-spacing: -0.19px;
  text-align: center;
  color: #10044a;
}

.points-table {
  width: 100%;
}
.table {
  border-spacing: 0px;
  width: 100%;
}

.mobile-tr {
  display: flex;
  width: 100%;
  padding: 6px 6px;
}

.caption h2 {
  margin: 34px 41px 16px 0px;
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.14px;
  text-align: left;
}

.group-text {
  color: #10044a;
}

.group-name {
  color: #ff3054;
}

.table-header {
  display: none;
  height: 40px;
  margin: 5px 24px 12px;
  padding: 8px 15px 4px;
  background-color: #ebebeb;
}

.table-header th {
  height: 24px;
  margin: 0 20px 4px 0;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.1px;
  text-align: center;
  color: #2c2c2c;
  padding-left: 5px;
}
.table-header th:first-child {
  text-align: left;
}

.main-tr {
  background-color: #f5f5f5;
  height: 32px;
}

.main-tr:first-child {
  margin-top: 10px;
}

.main-tr td {
  flex-grow: 0;
  font-size: 16px;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.1px;
  text-align: center;
}

.mobile-tr div {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.1px;
  text-align: left;
  margin-left: 20px;
}

.team {
  display: flex;
  align-items: center;
}

.team-item {
  padding: 0 6px;
}

.team-name {
  font-size: 20px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.12px;
  text-align: left;
  color: #10044a;
}

.flag {
  width: 30px;
  height: 22.5px;
  flex-grow: 0;
  margin-right: 12px;
}

.m-hidden {
  display: none;
}

.bold {
  font-weight: bold;
}

.d-point {
  color: #e10000;
  font-weight: 700;
}

.mo-point {
  color: #000;
  font-weight: normal;
}

.m-played {
  color: #2196f3;
}

.m-won {
  color: #00ac78;
}

.m-lost {
  color: #e10000;
}

.m-run-rate {
  color: #2196f3;
}

.bottom-tr td {
  border-bottom: 1px solid #e2e2e2;
}

.position {
  color: #10044a;
}

.tr-divider {
  height: 8px;
  background-color: #fff;
}

.point-table-loader {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner svg {
  width: 100px;
  height: 100px;
}

.t1_ads {
  margin: 20px auto;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e2e2;
}

#top_banner div {
  display: flex !important;
  justify-content: center;
  width: 100% !important;
}

.r1-ad {
  margin-top: 34px;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr;
}

#banner1 {
  position: -webkit-sticky;
  position: sticky;
  top: 60px;
}

#banner1 div {
  display: flex;
  justify-content: center;
}

@media (min-width: 876px) {
  .main-container {
    display: grid;
    grid-template-columns: 924px 300px;
    grid-column-gap: 24px;
  }

  .caption h2 {
    font-size: 36px;
  }

  .bottom-tr {
    display: none;
  }

  .m-hidden {
    display: table-cell;
  }

  .main-tr {
    height: 56px;
    background-color: #fff;
  }

  .main-tr td {
    border-bottom: 1px solid #e2e2e2;
  }

  .team-item {
    max-width: 130px;
    padding: 0 6px;
  }

  .title {
    height: 56px;
    font-size: 42px;
    letter-spacing: -0.36px;
  }

  .title-bottom-underline {
    width: 230px;
  }

  .point-table-container {
    margin: auto;
    padding: 0 1.6rem;
  }

  .mo-point {
    display: none;
  }

  .d-point {
    color: #000;
    font-weight: normal;
  }

  .table-header {
    display: table-header-group;
    background-color: #f6f5f5;
  }

  .tr-divider {
    display: none;
  }
}