/* Match landing: overlay magazine chrome on the legacy contest markup. */
.match-body {
  background:var(--paper);
  color:var(--ink)
}
.match-page {
  max-width:920px;
  padding-bottom:40px
}
.match-intro {
  margin:8px 0 22px
}
.match-intro h1 {
  font-size:28px;
  margin:4px 0 6px
}
.match-widget,
.match-page #header,
.match-page #footer,
.match-page #gbala,
.match-page #gpaeen,
.match-page #tab,
.match-page #left {
  display:none!important
}
.match-page #wrapper,
.match-page #main,
.match-page #right {
  width:100%!important;
  max-width:100%;
  float:none!important;
  margin:0;
  text-align:right;
  height:auto!important
}
.match-page [style*="position:fixed"] {
  position:static!important;
  inset:auto!important;
  display:none!important
}
.match-page [style*="background-color:#feffae"],
.match-page [style*="background-color: #feffae"] {
  background:var(--surface-2)!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  padding:16px 18px!important;
  margin:0 0 18px!important;
  line-height:2
}
.match-tabs {
  margin-bottom:18px
}
.match-page #example-two {
  margin:0
}
.match-page #example-two .nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  height:auto!important;
  overflow:visible!important;
  margin:0 0 14px!important
}
.match-page #example-two .nav li {
  width:auto!important;
  float:none!important;
  height:auto!important;
  border:0!important;
  margin:0
}
.match-page #example-two .nav li a,
.match-page #example-two .nav li a.current,
.match-page #example-two .nav li a:hover,
.match-page #example-two .nav li a:focus {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 14px!important;
  border:1px solid var(--line)!important;
  border-radius:999px;
  background:var(--surface)!important;
  background-image:none!important;
  color:var(--ink)!important;
  font-size:13px!important;
  font-weight:700;
  font-family:var(--font-persian);
  text-align:center
}
.match-page #example-two .nav li a.current {
  background:var(--teal)!important;
  border-color:var(--teal)!important;
  color:var(--on-teal)!important
}
.match-page #example-two .list-wrap {
  background:var(--surface);
  border:1px solid var(--line)!important;
  border-radius:12px;
  padding:22px!important;
  margin:0!important;
  overflow:auto;
  font-family:var(--font-persian);
  font-size:15px;
  line-height:2;
  color:var(--ink)
}
.match-page #example-two ul {
  margin:0!important;
  padding:0!important
}
.match-page #example-two .list-wrap a {
  color:var(--teal)
}
.match-page #example-two .list-wrap img {
  max-width:100%;
  height:auto
}
.match-page table {
  width:100%!important;
  max-width:100%;
  border-collapse:collapse;
  border-color:var(--line)!important
}
.match-page #participant > table {
  border:0!important
}
.match-page #participant td[style*="dashed"] {
  border:0!important;
  padding-top:18px
}
.match-page td,
.match-page th {
  overflow-wrap:anywhere
}
.match-page [style*="width:800px"],
.match-page [style*="width: 800px"],
.match-page [style*="width:550px"],
.match-page [style*="width:300px"] {
  width:100%!important;
  max-width:100%!important
}
.match-page .input-text,
.match-page input[type=text],
.match-page input[type=password],
.match-page input[type=button],
.match-page input[type=submit],
.match-page textarea,
.match-page select {
  max-width:100%;
  min-height:44px;
  border:1px solid var(--input-border)!important;
  border-radius:8px!important;
  background:var(--paper)!important;
  color:var(--ink)!important;
  font:inherit!important;
  padding:8px 12px!important
}
.match-page textarea {
  min-height:140px;
  width:100%!important
}
.match-page input[type=button],
.match-page input[type=submit],
.match-page .input-text[type=button] {
  background:var(--teal)!important;
  color:var(--on-teal)!important;
  border-color:var(--teal)!important;
  font-weight:700!important;
  cursor:pointer;
  width:auto!important;
  min-width:148px
}
.match-page [style*="background-color: #689A05"],
.match-page [style*="background-color:#689A05"],
.match-page h2.titleText {
  background:var(--teal)!important;
  color:var(--on-teal)!important;
  border-radius:8px;
  padding:10px 14px!important;
  font-family:var(--font-persian)!important;
  font-size:18px!important
}
.match-page #idea {
  border:1px solid var(--line)!important;
  border-radius:12px;
  background:var(--surface);
  padding:16px;
  text-align:right!important
}
.match-page #idea:before {
  content:"نظر کاربران";
  display:block;
  font-weight:700;
  color:var(--teal);
  margin-bottom:10px
}
.match-page #comment,
.match-page #loadcomment {
  font-family:var(--font-persian);
  line-height:2
}
.match-page #register .input-text {
  width:100%!important;
  max-width:320px
}
.match-page #participant [style*="width:300px"] {
  width:100%!important;
  max-width:360px;
  background:var(--surface-2)!important;
  color:var(--ink)!important;
  border-radius:12px;
  padding:16px!important
}
.match-page .lbl {
  font-weight:700;
  margin:12px 0 6px
}
.cboxOverlay {
  background:var(--overlay)!important
}
#cboxWrapper,
#cboxContent {
  border-radius:10px
}
@media(max-width:640px) {
  .match-intro h1 {
    font-size:22px
  }
  .match-page #example-two .nav li a {
    font-size:12px!important;
    padding:8px 12px!important
  }
  .match-page #example-two .list-wrap {
    padding:16px!important
  }
  .match-page input[type=button],
  .match-page input[type=submit] {
    width:100%!important
  }
  .match-page td,
  .match-page tr {
    display:block;
    width:100%!important
  }
}