body {
	background-color: #ddeedf;
	margin: 0;
	line-height: 22px;
	font-size: 15px;
	color: #000;
}
html, body {
  font-family: 'Work Sans', sans-serif;
}
a {
	color: #465e48;
	text-decoration: none;
}

a:hover {
	color: #000;
	text-decoration: none;
}
a.musta { color: #000; }
.matsitaulukko a.matsilinkki:hover { color: #000; }
.matsitaulukko a.tuloslinkki { color: #000; font-weight:bold; }
.matsitaulukko a.tuloslinkki:hover { color: #274a2a; }

h1 { margin-top: 0; line-height: 1em; font-family: 'Montserrat', sans-serif; font-size: 1.7em;}
h2, h3, h4 { font-family: 'Montserrat', sans-serif;  }
h3 { margin-bottom: 8px; }
h4 { margin-bottom: 7px; }

.isouutinen a:hover h3, .lisauutiset a:hover h4 { color: #486952; }
.isouutinen a h3, .lisauutiset a h4 { transition: color 0.3s ease-in-out; }

#saitti {
	width: 1500px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 50px;
}

#top {
	background-color: #486952;
	height: 60px;
	padding: 20px 0px;
}

#top_content {
	width: 1500px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 50px;
}
#top_content span.pieni {
	font-size: 0.8em;
	color: #999;
	margin-left: 4px;
}

#top_content .logo {
	max-width: 240px;
	margin-top: 10px;
}
a.pieni { font-size:0.8em; }
#left {
	float: left;
	width: 260px;
}
#left h3 { margin-top:0; }
#left_menu a {
    font-family: 'Montserrat', sans-serif;
	display: block;
	padding: 10px 15px;
	font-size: 1.1em;
	font-weight: bold;
}

#left_menu a img { 
vertical-align:middle;
padding-right: 14px;
max-height: 22px; }

#top_logo { float: left; width:310px; }

#top_menu { padding-top: 2px; float: left; }
#top_menu a {
    font-family: 'Montserrat', sans-serif;
	display: inline-block;
	margin-right: 22px;
	font-size: 1.1em;
	font-weight: bold;
	color: #FFF;
    text-transform: uppercase;
    transition: color 0.3s ease-in-out;
}
#top_menu a:hover { color: #bad8b6; }
#top_menu a:hover .uutta { background-color:#aa5454;  }
#top_menu .uutta { display:inline-block; margin-left:5px; transition: background-color 0.3s ease-in-out; padding: 0px 4px; font-size: 0.7em; background-color:#cd3737; color: #FFF; border-radius:3px; font-weight:normal; }

.huhu .uusibadge { display:inline-block; padding: 0px 4px; font-size: 0.7em; margin-left: 6px; background-color:#dd9b43; color: #FFF; border-radius:3px; font-weight:normal; } 
.huhu .uusibadge.punainen { background-color:#cd3737; } 
.huhu .uusibadge.oranssi { background-color:#fb8c00; } 
.huhu.kuvallinen img { margin-left:0px; }
.huhu.kuvallinen { margin-bottom: 5px; }
.huhu.kuvallinen .tahdet { margin-top: 4px; }

.poissaolosyy { display: inline-block; font-weight: bold; font-size: 11px; color: #e23939; text-transform:uppercase; margin-top: 3px; padding: 0px 6px; border-radius: 5px; background-color: #f3dcdc; }
.uusipelaaja .poissaolosyy { margin-top: 7px; color: #e23939; font-size:11px; }

.selite_badge {
    display: inline-block;
    padding: 1px 5px;
    background-color: #e5e5e5;
    font-weight: bold;
    font-size: 10px;
    border-radius: 5px;
    text-transform: uppercase;
    margin-top: 5px;
    color: #333;
}

.huhutaulukko .selite_badge, .boksicontainer .selite_badge { color: #193822; margin-left: 5px; padding: 0px 4px; font-size: 9px; background-color: #a2bca9; }

 #container, #container2, #container6, #container5 {
      width: 110px;
      height: 55px;
      margin: 10px auto;
    }
img.oikeakuva { float: right; margin: 0px 0px 10px 10px; border-radius: 5px; }

.social-icons { text-align:center; }
.social-icons a {
  color: #486952;
  font-size: 18px;
  margin: 0 4px;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #ccc;
}

.match-table {
    width: 100%;
    margin-bottom: 20px;
    table-layout: fixed;
    border-collapse: separate;
  border-spacing: 0 6px;
}
.match-table th, .match-table td {
    padding: 6px 12px;
    text-align: center;
    font-size: 14px;
    background-color: #fff;
}

.match-table tr {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.match-table tr td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.match-table tr td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.match-table td a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit; 
  text-decoration: none;
}
.match-date {
  text-align: left; 
  font-size: 0.9em; 
  color: #666;
}
@media screen and (max-width: 600px) {
 .match-team a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.9em;
  }
  .match-date a { font-size: 0.8em; }
}

.month-title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
}

 .cta-button {
        display: inline-block; 
  margin: 10px auto;
  align-items: center;
  padding: 6px 16px;
  font-size: 0.9em;
  font-weight: 600;
  color: #fff;
  background: #20b775;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.1s ease;
  border-radius: 5px;
}

.cta-button .arrow {
  display: inline-block;
  margin-left: 0.5em;
  transition: transform 0.3s ease;
}
.cta-button:hover {
  background: #18905c;
  color: #fff;
}

.cta-button:hover .arrow {
  transform: translateX(4px);
}

.cta-button-gray {
        display: inline-block; 
  align-items: center;
  padding: 5px 12px;
  font-size: 0.9em;
  font-weight: 400;
  color: #465e48;
  background: #dfdfdf;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.1s ease;
  border-radius: 5px;
}
.cta-button-gray:hover {
  background: #c2cbc5;
  color: #465e48;
}

.lainaus-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 1200px;
    margin: 0px auto;
    padding: 20px 0px;
    position: relative;
}

.lainaus-container::before {
    content: "“";  
    font-size: 4em; 
    color: #b9c8b8; 
    font-family: serif;
    line-height: 1;
    position: relative;
    top: -5px; 
    left: 0;
}

.lainaus {
    font-style: italic;
    font-size: 1.1em;
    flex: 1;
}

.lainattava {
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
}

.pelaajaottelut {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

h3 a.oikealinkki { font-size:0.7em; float: right; transition: color 0.3s ease-in-out; }
h3 a.oikealinkki:hover { color: #465e48; }

.pelaajaottelu {
    border-left: 2px solid #3a5342; background-color: #FFF; text-align: center; padding: 10px; position: relative; border-radius: 5px; font-size:0.8em; 
}
.pelaajaottelu.green { border-left: 2px solid #00ab4c; }
.pelaajaottelu.red { border-left: 2px solid #c25353; }
.pelaajaottelu.yellow { border-left: 2px solid #bfc008; }
.pelaajaottelu .tilastot { margin-top: 8px; display: flex;
    justify-content: center;
    align-items: center; 
height: 20px; }
.pelaajaottelu .tilasto { text-align: center;  display: flex;
    justify-content: center;
    align-items: center; margin-top: 6px; margin-right: 5px; margin-bottom: 8px; font-weight: bold; line-height:1; }
.pelaajaottelu .tilasto.pyorea {  width: 20px; height: 20px;  border: 1px solid #d0ddcf; border-radius: 100%;  }
.pelaajaottelu .tilasto.peliminuutit {  margin-right: 10px; height: 16px; font-weight:normal; border: 1px solid #d0ddcf; padding: 2px 4px; border-radius:3px; }
.pelaajaottelu .tilasto.nollapeli {  margin-right: 10px; height: 16px; font-size: 11px; font-weight:normal; color: #2c5d52; border: 1px solid #cdd5c8; padding: 2px 4px; border-radius:5px; text-transform:uppercase; }
.pelaajaottelu .tilastot .tilasto.peliminuutit span { font-weight:bold; margin-left:5px; display:inline-block; }

.avauskokoonpano-container {
  display: flex;
  margin-top: 15px;
}

.avauskokoonpano-container .joukkue {
  flex: 1;
}
.avauskokoonpano-container .joukkue h4 { margin-bottom: 10px; }
.avauskokoonpano-container .joukkue div { border-bottom: 1px solid #F1F1F1; padding: 3px 0px; }

.avauskokoonpano-container .erotin {
  width: 1px;
  background-color: #bfcfbe;
  margin: 0 10px;
}

#top_menu a img { 
vertical-align:middle;
padding-right: 5px;
max-height: 22px; 
}
#top_menu a.topliigalinkki { margin-top: 10px; font-size: 1em; font-weight:normal; margin-right: 16px; }
#top_menu a.topliigalinkki img { padding-right: 4px; max-height: 18px; transition: filter 0.3s ease; }
#top_menu a.topliigalinkki:hover img { filter: brightness(0.8);  }

#drawer {
    margin: 0; 
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: auto;
    background: white;
    z-index: 9999;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: top 0.35s ease;
    box-sizing: border-box;
}
#drawer a i { margin-right: 8px; vertical-align: middle; }
#drawer.open {
    top: 0;
}
#panel.blurred {
    filter: blur(4px) brightness(0.6);
    transition: filter 0.3s;
    pointer-events: none;
}
body.menu-open {
    overflow: hidden;
}
.toggle-button, .close-drawer {
    font-size: 26px;
    background: none;
    border: none;
    cursor: pointer;
    float: right;
}
.close-drawer {
    color: red;
}
#overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
#overlay.visible {
    opacity: 1;
    pointer-events: all;
}
#drawer a.navi:hover .uutta { background-color:#aa5454;  }
#drawer a.navi .uutta { display:inline-block; margin-left:5px; padding: 0px 4px; font-size: 0.7em; background-color:#cd3737; color: #FFF; border-radius:3px; }
#top_teams { padding: 0px 12px; margin: auto; }
#top_teams img { margin-right: 5px; max-height:25px; margin-bottom:10px; }
#haku {
	padding-top: 12px;
	float: right;
}
#haku INPUT{ margin: 0; border-radius: 5px 0px 0px 5px; padding: 8px 14px; }
#haku INPUT:focus, #haku INPUT:active { border: 1px solid #99b1a1; outline: none; }
#haku button[type='submit']:active { background-color:#3a5342; }
#haku button[type='submit'] { background-color:#bad8b6; color:#000; font-weight: bold; border-radius: 0px 5px 5px 0px; padding: 8px 14px; border: 1px solid #b6cdbd; border-left: 0px; margin: 0; cursor:pointer; }
#haku input:focus::placeholder, #hakuside input:focus::placeholder {
  color: transparent;
}
#haku button[type='submit']:hover { color: #486952; }

#hakuside form {
  display: flex;
  width: 100%;
}

#hakuside input[type="text"] {
  flex: 1;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #99b1a1;
  border-right: none;
  border-radius: 5px 0 0 5px;
  height: 40px;
  box-sizing: border-box;
  color: #000;
}

#hakuside button {
  padding: 0 16px;
  font-size: 16px;
  border: 1px solid #99b1a1;
  border-left: none;
  background: #3a5342;
  color: #fff;
  border-radius: 0 5px 5px 0;
  height: 40px;
  cursor: pointer;
}

#right {
	float: right;
	width: 1190px;
}

.title {
	background-color: #fff;
	border-radius: 5px;
	padding: 12px 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #d0dde0;
	border-left: 4px solid #3a5342; 
}
.title.noborder { border-left:0px; }
.title a { color: #000; }
.title span { font-size: 0.9em; color: #999; }
.title span.perustettu { font-size: 1.4em; font-weight:bold; float: right; color:#ddeedf; }
.title span.perustettu.tumma { color: #274a2a; }
.title h2, .title h1 { margin: 0; }

.title a.joukkuesivu-linkki {
  color: #555;
  float: right;
  font-size: 0.8em;
}
.title a.joukkuesivu-linkki:hover {
    color: #465e48;
}

.title.ottelu.uutinen { font-size:0.85em; padding: 10px; }
.title.ottelu { display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
 margin-top: 5px;  }
.title.ottelu img { vertical-align: middle; margin-right: 10px; }
.title.ottelu .tvmainos img { margin-right:0px; }
.title.ottelu .tapahtumainfo { font-size: 0.8em; color: #666; }
.title.ottelu .vastaan .ottelutulos { font-size: 32px; font-weight:bold; color:#3a5342; margin-top: 10px; margin-bottom: 10px; line-height: 1em; }
.title.ottelu .vastaan .ottelutulos .rankkarit { font-size: 16px; }
.title.ottelu .vastaan span.lopputulos { display: inline-block; background-color: #d1d1d1; color: #333; font-weight: bold; text-transform:uppercase; padding: 4px 6px; border-radius: 3px; }
.kellonaika .rankkarit { font-size: 0.9em; }
.title.ottelu .vastaan span { font-size:13px; font-weight: normal; color: #3a5342; display: block; text-transform:uppercase; line-height: 1em; }

.title.ottelu .kotijoukkue { grid-area: 1 / 1 / 2 / 2; text-align: right; font-size: 1.5em; display: flex; align-items: center; justify-content: right; word-break: break-word; overflow-wrap: break-word; }
.title.ottelu .vastaan { font-size:0.8em; line-height: 1.2em; grid-area: 1 / 2 / 2 / 3; text-align: center; color: #666; }
.title.ottelu .vierasjoukkue { grid-area: 1 / 3 / 2 / 4; text-align: left; font-size: 1.5em; display: flex; align-items: center; justify-content: left; word-break: break-word; overflow-wrap: break-word; }

.title.ottelu.uusi .kotijoukkue { grid-area: 1 / 1 / 2 / 2; display: grid; grid-template-rows: auto auto; text-align: right; font-size: 1.5em; align-items: top; justify-content: right; word-break: break-word; overflow-wrap: break-word; }
.title.ottelu.uusi .vastaan { font-size:0.8em; line-height: 1.2em; grid-area: 1 / 2 / 2 / 3; text-align: center; color: #666; }
.title.ottelu.uusi .vierasjoukkue { grid-area: 1 / 3 / 2 / 4; display: grid; grid-template-rows: auto auto; text-align: left; font-size: 1.5em; align-items: top; justify-content: left; word-break: break-word; overflow-wrap: break-word; }

.title.ottelu.uusi .maalit { line-height: 14px; margin-top: 5px; display: block; font-size: 12px; color: #333; text-align: center; }

.live-title {
  display: flex;
  align-items: center;
  font-weight: 700;
  gap: 0.6em; 
}
.live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: red;
  box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

.transfer-updates {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.update {
  border-left: 3px solid #486952;
  padding-left: 1rem;
  background: #f9f9f9;
  border-radius: 0.4rem;
  padding: 10px 16px;
  transition: background 0.2s;
}
.update:hover {
  background: #f5f5f5;
}
.update .tagi {
    display: inline-block;
    padding: 2px 8px;
    background-color: #ececec;
    border-radius: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    text-transform: uppercase;
    font-size: 0.75em;
    transition: background 0.2s, transform 0.2s;
}
.update .tagi:hover {
  background-color: #e2f4e7;
}
.update h4 {
  margin: 0;
  font-weight: 600;
  margin-bottom: 8px;
}
.update p {
  margin: 0.3rem 0 0.5rem 0;
  color: #333;
  line-height: 1.4;
  font-size: 0.9em;
}
.update time {
  display: block;
  font-size: 0.8rem;
  color: #999;
  text-align: right;
}
.update img { float: right; margin-left: 1em; margin-bottom: 1em; max-height: 25px; }
.update img.tagikuva, .tagi img.tagikuva { float: none; vertical-align: middle; max-height: 16px; margin-left: 0; margin-right: 2px; margin-bottom: 0; }
.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5px;
}
.read-more {
  text-align: center;
  margin-top: 15px;
}
.read-more-btn {
  display: inline-block;
  background: #666;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 10px;
  transition: background 0.2s, transform 0.2s;
}
.read-more-btn:hover {
  background: #c00;
  color: #fff;
  transform: translateY(-2px);
}

#lisaa-tapahtumia {
  display: block;
  margin: 2rem auto; 
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #666;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

#lisaa-tapahtumia:hover {
  background: #c00;
  color: #fff;
  transform: scale(1.03);  
}

#lisaa-tapahtumia:active {
  transform: scale(0.97);
}

#lisaa-tapahtumia:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.sosiaalinapit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 1em;
  color: #486952;
}

.somebtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 1.3rem;
  transition: all 0.25s ease;
}

.somebtn.x {
  background-color: #000;
}
.somebtn.x:hover {
  background-color: #1a1a1a;
  transform: scale(1.05);
}

.somebtn.insta {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.somebtn.insta:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

.somebtn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tvmainos { text-align: center; color: #333; }
.tvmainos img { margin-right:0; max-height: 20px; vertical-align:middle; }
img.joukkuelogo { vertical-align:middle; margin-right:2px; }
img.matsilogo { vertical-align:middle; margin-right:2px; max-height:20px; }
.edellinenseuraava { font-size:0.8em; margin-top:0px;padding-top:0px; margin-bottom: 10px; }
.polku { font-size:0.8em; margin-top:0px;padding-top:0px; margin-bottom: 10px; }
.polku i { vertical-align:middle; }
.edellinenseuraava.nuolet { margin-top: 10px; }
.edellinenseuraava.nuolet form, .edellinenseuraava.nuolet input { display: inline-block; font-weight: normal; }
.edellinenseuraava.nuolet input { background-color:#ddeedf; border: 1px solid #99b59c; padding: 6px 10px; cursor: pointer; color: #333; }
.edellinenseuraava.nuolet input:hover { background-color:#ddeedf; border: 1px solid #79977d; color: #000; }
a.edellinen, form.edellinen { float:left; }
a.seuraava, form.seuraava { float:right; }
div.viiva { display:block; margin: 10px 0px; border-bottom: 1px solid #E1E1E1; }

.mainosbanneri { max-width: 100%; height: auto; font-size: 0.8em; color: #555; text-align: center; margin: 5px auto; }
.mainosbanneri img { max-width:100%; height: auto; }

.app-ad-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #fff;
      padding: 12px 16px;
      font-family: sans-serif;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 1000;
    }

    .app-ad-banner .content {
      display: flex;
      flex-direction: column;
    }

    .app-ad-banner .headline {
      font-size: 14px;
      font-weight: bold;
      color: #333;
    }

    .app-ad-banner .subline {
      font-size: 12px;
      color: #666;
      margin-top: 2px;
      line-height: 16px;
    }

    .app-ad-banner .actions {
      display: flex;
      align-items: center;
    }

    .app-ad-banner .actions a img {
      height: 28px;
      margin-left: 8px;
    }

    .app-ad-banner .close-btn {
      margin-left: 12px;
      font-size: 20px;
      background: none;
      border: none;
      color: #999;
      cursor: pointer;
    }

    body.with-banner {
      padding-top: 80px;
    }
    
.small-standings {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 0.95em;
    color: #333;
    border-radius: 8px;
    overflow: hidden;
}
.small-standings i { vertical-align:middle; margin-right: 5px; }
.small-standings a { color: #333; }
.small-standings img.player-photo { width: 35px; height: 35px; border-radius: 3px; vertical-align:middle; border: 1px solid rgba(0,0,0,0.15); }
.small-standings img.team-logo { width: 20px; height: 20px; vertical-align:middle; margin-right: 5px; }
.small-standings th,
.small-standings td {
    padding: 10px 12px;
    text-align: left;
}
.small-standings th {
    background-color: #486952;
    color: #FFF;
}

.small-standings thead {
    background: rgba(255,255,255,0.15);
    font-weight: bold;
}

.small-standings tr:nth-child(even) {
    background: rgba(255,255,255,0.05);
}

.small-standings tr:hover {
    background: rgba(255,255,255,0.15);
}

.small-standings th:first-child,
.small-standings td:first-child {
    width: 20px;
    text-align: center;
}
.small-standings tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.15);  
}

.small-standings tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.08);
}

.small-standings tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.20);
}
.small-standings tbody tr.oma-joukkue {
    background-color: rgba(255, 215, 0, 0.18) !important;
}

.profiiliboksit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 20px; 
}

.profiiliboksit > div {
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .profiiliboksit {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .profiiliboksit {
    grid-template-columns: 1fr;
  }
}

.pelipaikka-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.pelipaikka-tekstit {
  font-size: 14px;
  color: #333;
}

.pelipaikka-kentta {
  flex-shrink: 0;
}

.season-box {
  background: #c0d8c7;
  border-radius: 5px;
  padding: 15px;
}

.season-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  color: #333;
}

.season-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.season-progress-container {
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
  height: 12px;
  flex: 1; /* venyy leveydeltään */
}

.season-progress-bar {
  height: 100%;
   background-color: #486952;
  transition: width 0.3s ease;
}

.season-progress-text {
  font-size: 12px;
  color: #333;
  min-width: 35px;
  text-align: right;
}

.season-box a.cta-button { font-size: 0.8em; padding: 4px 12px; margin-bottom: 0; }

.paivitys {
	padding: 10px 0px;
	border-bottom: 1px solid #b7cdb9;
	font-size: 0.9em;
}
.paivitys span { display:block; color: #000; font-size: 1.1em;}
.paivitys span i { margin-right:4px; }
a.paivityshistoria { color: #777; font-size: 0.9em; }
a.paivityshistoria:hover { color: #000; }

.summary-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 1px solid #cad6d9;
  }
.summary-container p { margin: 0; font-size: 0.9em; color: #666; }
.summary-container h1 { margin-bottom: 0px; }
  .summary-item {
    flex: 1 1 calc(50% - 10px);
    margin-bottom: 10px;
  }

  .summary-header {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
  }

  .summary-stars {
    flex: 1;
  }

  .summary-percentage {
    flex: 1;
    font-size: 0.9em;
    color: #000;
    text-align: right;
  }

  .progress-bar-container {
    background-color: #eee;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
  }

  .progress-bar {
    height: 100%;
  }

   @media (max-width: 768px) {
    .summary-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .summary-percentage {
      text-align: left;
      margin-top: 4px;
    }
  }
    .progress-fill {
      height: 100%;
    }
  .card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .card {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    padding: 8px 12px;
    margin-bottom: 5px;
    box-sizing: border-box;
    font-size: 0.9em;
  }
  .card.osui {
  border-left: 3px solid #74ab39;
}
.card.ohi {
  border-left: 3px solid #cb4948;
}

  .card-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
  }

  .card-row:last-child {
    margin-bottom: 0;
  }

  .card-icon {
    height: 18px;
    margin-right: 6px;
  }

  .source-right { margin-left: auto;
  display: flex;
  align-items: center;}

  .card-title {
    margin-right: 8px;
  }

  .card-stars {
    color: #f5c518;
    margin-left: auto;
    font-size: 1.1em;
  }
  .card-stars i { margin-right: 2px; }

  .card-status {
    color: green;
    font-weight: bold;
    margin-left: auto;
  }

  .card-status.red {
    color: red;
  }
  .card-date {
    font-size: 0.9em;
    color: #666;
  }
  .card-logo {
    max-width: 20px;
    margin-right: 6px;
  }
  img.source { max-height: 18px; }

  @media (min-width: 768px) {
    .card {
      width: calc(50% - 10px);
    }
  }

  @media (min-width: 1024px) {
    .card {
      width: calc(33.333% - 10px);
    }
  }

.ottelulistaus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
}
.ottelulistaus .ottelulinkki {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
}

.ottelulistaus_ottelu {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    text-align: center;
    padding: 5px 0px;
    background-color: #d0ddcf;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}
.ottelulistaus_ottelu:hover { background-color:#b9c7b8; }

.ottelulistaus_joukkue {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ottelulistaus_joukkue img {
    flex-shrink: 0;
}

.ottelulistaus_vs {
    font-size: 0.85em;
}
.ottelulistaus_kanava a { display:block; }

.uusipelaaja {
	background-color: #fff;
	border-radius: 5px;
	margin-bottom: 10px;
	border-bottom: 1px solid #d0dde0;
	border-left: 4px solid #3a5342; 
	display: flex;
    align-items: center;
    grid-column-gap: 20px;
	grid-row-gap: 0px;
    width: 100%;
    box-sizing: border-box;
}
.uusipelaaja a { color: #000; }
.uusipelaaja span { font-size: 0.9em; color: #999; }
.uusipelaaja span.perustettu { font-size: 1.4em; font-weight:bold; float: right; color:#ddeedf; margin-left: 5px; }
.uusipelaaja span.perustettu.tumma { color: #274a2a; }
.uusipelaaja h1 { margin: 0; }

.uusipelaaja .pelaajakuva {
    width: 80px;
    height: 80px;
    overflow: hidden;
    padding: 10px 0px 0px 10px;
    align-self: flex-end;
}

.uusipelaaja .pelaajakuva img {
    width: 140%;
    height: auto;
    object-fit: cover;
    object-position: top center;
    transform: translate(-15px,0px);
}

.uusipelaaja .pelaajatiedot {
	padding: 10px;
    flex: 1;
}
.pelaajakuvamini {
    width: 27px;
    height: 27px;
    overflow: hidden;
    padding: 0px 0px 0px 8px;
    float: left;
}
.pelaajakuvamini img {
    width: 180%;
    height: auto;
    object-fit: cover;
    object-position: top center;
    transform: translate(-15px,0px);
}

.kolmeboksicontainer .pelaajakuva, .huhu .pelaajakuva  {
    width: 50px;
    height: 50px;
    overflow: hidden;
    padding: 0px;
    align-self: flex-top;
     border-radius: 50%;
}

.kolmeboksicontainer .pelaajakuva img, .huhu .pelaajakuva img {
    width: 150%;
    height: auto;
    object-fit: cover;
    object-position: top center;
     transform: translate(-15px,0px);
     max-height: 75px;
    transition: transform 0.3s ease-in-out;
}
.kolmeboksicontainer .pelaajakuva img:hover, .huhu .pelaajakuva img:hover {
    transform: translate(-15px, 0px) scale(1.05); 
}
.huhu .pelaajakuva img { margin-left: 0; }
.kolmeboksicontainer .pelaajatiedot, .huhu .pelaajatiedot {
    flex: 1;
    padding: 0px 0px 0px 10px;
}
.huhu .pelaajatiedot {
    flex: 1;
    padding: 0px;
}

.yhteenvedot{ background-color: #FFF; font-size:0.9em; padding: 10px; border-radius: 5px;}
.yhteenvedot img { max-height:18px; }
.yhteenvedot div.viiva { margin: 7px 0px; }
.yhteenvedot span.otsake { color: #666; }

th.sortable a { color: #000; }

table.sarjataulukko { width: 100%; background-color:#FFF; border-spacing: 0px; border-radius: 5px; box-sizing:border-box; border-collapse: separate; overflow: hidden; }
table.sarjataulukko th, table.sarjataulukko td { padding: 5px 8px 5px 8px; }
table.sarjataulukko th { background-color: #b6cdbd; border-bottom: 1px solid #99b2a1; text-align: center; }
table.sarjataulukko tr td { border-bottom: 1px solid #E1E1E1; text-align: center; }
table.sarjataulukko tr:last-child td { border-bottom: 0px; }
table.sarjataulukko tr td.vasen, table.sarjataulukko tr th.vasen { text-align:left; }
table.sarjataulukko tr td.jatkoon, table.sarjataulukko tr td.putoaminen, table.sarjataulukko tr td.karsintoihin { position: relative; }
table.sarjataulukko tr.vuosiyhteen td { font-weight:bold; background-color:#d0ddcf; }
table.sarjataulukko tr.vuosiyhteen2 td { font-weight:bold; background-color:#c9cca0; }
table.sarjataulukko tr td.superdarkgreen { background-color:#3b9f5d; border: 0; }
table.sarjataulukko tr td.darkgreen { background-color:#51bc75; border: 0; }
table.sarjataulukko tr td.lightgreen { background-color:#b0e8c3; border: 0; }
table.sarjataulukko tr td.superdarkred { background-color:#ac4a4a; border: 0; }
table.sarjataulukko tr td.darkred { background-color:#ea5b4d; border: 0; }
table.sarjataulukko tr td.lightred { background-color:#ffafb5; border: 0; }
table.sarjataulukko tr td.default { background-color:#f1f1f1; border: 0; }
table.sarjataulukko tr.liigarivi td { background-color:#F1F1F1; }
table.sarjataulukko tr.liigarivi td img { max-height: 14px; vertical-align: middle; padding-right: 5px; }
table.sarjataulukko td.pelinumero { width: 15px; font-size: 0.9em; color: #666; border-right: 1px solid #E1E1E1; }
table.sarjataulukko tr.kevyt th { font-weight:normal; }
table.sarjataulukko tr.kevyt img { padding-right:4px; }
table.sarjataulukko tr.karsintaviiva td { border-bottom: 1px solid #666; }

table.sarjataulukko thead tr:first-child th:first-child {
    border-top-left-radius: 5px;
}
table.sarjataulukko thead tr:first-child th:last-child {
    border-top-right-radius: 5px;
}
table.sarjataulukko tbody tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}
table.sarjataulukko tbody tr:last-child td:last-child {
    border-bottom-right-radius: 5px;
}

table.sarjataulukko .ottelupallot { display: flex; align-items: center; justify-content: center;}
table.sarjataulukko .ottelupallo { width: 17px; height: 17px; border-radius:50%; display: inline-block; vertical-align:middle; line-height: 17px; margin-right: 5px; text-align: center; color: #FFF; font-size: 11px; }

table.sarjataulukko tr td.jatkoon::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 80%;
    background-color: #5daa54;

}
table.sarjataulukko tr td.putoaminen::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 80%;
    background-color: #8e2f2f;

}
table.sarjataulukko tr td.karsintoihin::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 80%;
    background-color: #d77f7f;

}
table.sarjataulukko tr.korostettu td { background-color: #fdfdcb; }
table.sarjataulukko img.sarjalogo { max-height: 16px; vertical-align: middle; margin-right: 8px; }

.sarjataulukko-nappi {
    background-color: #bad8b6;
    border: none;
    padding: 6px 10px;
    margin-right: 3px;
    margin-bottom: 6px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: normal;
    color: #000;
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
}

.sarjataulukko-nappi.aktiivinen {
    background-color: #fff2be;
    font-weight: bold;
    color: #000;
}

.legend-row {
  display: flex;
  gap: 20px;               
  margin-top: 10px;
  flex-wrap: wrap;   
  padding: 0;
  box-sizing: border-box;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #555;
  white-space: nowrap;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
}

.legend-dot--relegated { background: #8e2f2f; }
.legend-dot--playoff   { background: #d77f7f; }

@media (max-width: 420px) {
  .legend-row { gap: 10px; }
  .legend-item { gap: 6px; font-size: 12px; }
  .legend-dot { width: 10px; height: 10px; flex: 0 0 10px; }
}

table.vuosiyhteenveto { border-spacing: 0px; }
table.vuosiyhteenveto tr td, table.vuosiyhteenveto tr th { padding: 4px 6px;  }
table.vuosiyhteenveto tr th, table.vuosiyhteenveto tr td { text-align: center;}
table.vuosiyhteenveto th { background-color: #b6cdbd; border-bottom: 1px solid #93b29c; }
table.vuosiyhteenveto tr.vuosiyhteen td { font-weight:bold; border-top: 1px solid #d7dad8; font-size:1em;}
table.vuosiyhteenveto tr th.otsake, table.vuosiyhteenveto tr td.otsake { text-align: left; padding: 4px 0px; }
table.vuosiyhteenveto .joukkuelogo, table.matsitaulukko .joukkuelogo { max-height:20px; }
table.vuosiyhteenveto a { color: #000; }

.parhaat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0px;
    border-bottom: 1px solid #ddd;
    font-size: 0.9em;
    width: 100%;
    box-sizing: border-box;
}

.parhaat:last-child {
    border-bottom: none;
}

.parhaat-kuvallinen {
    display: flex;
    justify-content: space-between;
    padding: 5px 5px;
    border-bottom: 1px solid #ddd;
    font-size: 0.9em;
    width: 100%;
    box-sizing: border-box;
    background-color: #d0ddcf;
    margin-bottom: 2px;
    border-radius: 5px;
    line-height: 25px;
}
.parhaat-kuvallinen .pelaajatiedot a { color: #000; }
.parhaat-kuvallinen .pelaajatiedot a:hover { color: #486952; }

.parhaat-kuvallinen:last-child {
    border-bottom: none;
}

.parhaat-kuvallinen .pelaajakuva {
    width: 50px;
    height: 50px;
    overflow: hidden;
    align-self: flex-end;
    border-radius: 50%;
}

.parhaat-kuvallinen .pelaajakuva img, .sarjataulukko .pelaajakuva img {
    width: 135%;
    height: auto;
    object-fit: cover;
    object-position: top center;
    transform: translate(-10px,5px);
     transition: transform 0.3s ease-in-out;
}
.parhaat-kuvallinen .pelaajakuva img:hover {
    transform: translate(-10px, 5px) scale(1.05); 
}

.parhaat-kuvallinen .pelaajatiedot {
    padding: 0px 5px 0px 10px;
    flex: 1;
    font-size: 0.9em;
}
.sarjataulukko .pelaajatiedot {
    padding: 0px 5px 0px 10px;
    flex: 1;
}
.sarjataulukko .pelaajakuva {
    width: 50px;
    height: 50px;
    overflow: hidden;
    float: left;
    border-radius: 50%;
    margin-right: 10px;
}
.sarjataulukko .erotusluku { display: inline-block; padding: 5px 8px; width: 40px; font-weight:bold; justify-content: center; background-color: #E1E1E1; align-items: center; border-radius:5px; }
.erotusluku.superdarkgreen { background-color:#3b9f5d; color: #F1F1F1; }
.erotusluku.darkgreen { background-color:#51bc75; }
.erotusluku.lightgreen { background-color:#b0e8c3; }
.erotusluku.superdarkred { background-color:#ac4a4a; color: #F1F1F1; }
.erotusluku.darkred { background-color:#ea5b4d; }
.erotusluku.lightred { background-color:#ffafb5; }
.erotusluku.default { background-color:#f1f1f1; }
.parhaat-kuvallinen .numerotieto {
    display: inline-block;
    font-weight: bold;
    float: right;
    font-size: 1.2em;
}
.parhaat-kuvallinen .joukkuelogo { max-height: 20px; }


.parhaat .nimi {
    flex: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parhaat .joukkue {
    flex: 1.5;
    color: #555;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parhaat .numero {
    flex: 1;
    text-align: right;
    white-space: nowrap;
}
.parhaat img { max-height:20px; }

#left .parhaat {
	background-color: #d0ddcf;
	border-bottom: 0px;
	padding: 5px 10px;
	border-radius: 5px;
	margin-bottom: 2px;
	font-size: 0.85em;
}

.fa-close { color: #ca3939; margin-right:4px; }

.ilmoitakyna { font-size:1.1em; }
.otsikko_lisatiedot {
    display: flex;
    justify-content: right;
    align-items: center;
    color: #666;
    margin: 0;
    cursor: pointer;
    font-size: 0.9em;
}

.nuoli {
    transition: transform 0.3s ease;
    margin-right: 4px;
    display: inline-block;
    font-weight: bold;
}

.lisatiedot {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    display: block;
}

.lisatiedot.aktiivinen {
    max-height: 300px;
    opacity: 1;
}
tr.lisatiedot2 { font-size:0.9em; color: #5b7c65; }
span.naytaottelukohtaiset { font-size: 0.8em; font-weight:normal; cursor:pointer; }

.wide-table-container {
  position: relative;
  width: 100%; 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch;
}

/*
 * jQuery TipTop v1.0
 * http://gilbitron.github.io/TipTop
 *
 * Copyright 2013, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

.tiptop {
	position: absolute;
	z-index: 9999;
	max-width: 200px;
	padding: 5px;
	font-size: 12px;
	color: #000;
	background: #fff;
	border-radius: 3px;
}
.tiptop div.vihrea { background-color: green; }

.uusiottelu { display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: #d0ddcf;
font-size: 0.9em;
padding: 6px 0px;
overflow: hidden;
}
.uusiottelu.laita div { font-size:0.9em; }
.uusiottelu.tokarivi { background-color:#aebeac; }
.uusiottelu a { color: #000; }
.uusiottelu img { vertical-align: middle; margin-right: 4px; }
.uusiottelu .kotijengi { grid-area: 1 / 1 / 2 / 2; text-align: right; display: flex; align-items: center; justify-content: right; white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
.uusiottelu .kellonaika { grid-area: 1 / 2 / 2 / 3;  display: flex; color: #444; align-items: center; justify-content: center; z-index: 1; }
.kellonaika a { color: #444; }
.uusiottelu .vierasjengi { grid-area: 1 / 3 / 2 / 4; text-align: left; display: flex; align-items: center; justify-content: left; white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  }

        .bar-container {
        		margin-top: 5px;
        		margin-bottom: 5px;
            display: flex;
            width: 100%;
            max-width: 600px;
            height: 14px;
            overflow: hidden;
            border-radius: 3px;
        }
        .bar-container.boksi { width: 100%; max-width: 1190px; margin-top: 2px; margin-bottom: 0px; height: 20px; border-radius: 3px; color: #FFF; font-weight: bold;}
        .bar-container.boksi .bar-segment { align-items: center; }
        .bar-segment {
            height: 100%;
            font-size: 12px;
            text-align: center;
             position: relative;
             overflow: hidden;
    white-space: nowrap; 
        }
        .bar-segment span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; 
}
        .wins {
            background-color: #5daa54;
        }
        .draws {
            background-color: #bebf2f;
        }
        .losses {
            background-color: #aa5454;
        }
 .boksicontainer div h3 { margin-top:0px; }
 .boksicontainer div h3 a { color: #000; }

.boksicontainer .nelioboksi1.kuntopuntari, .nelioboksi2.kuntopuntari {
	background-color: #FFF;
	padding: 15px;
	box-sizing: border-box;
}
.boksicontainer .nelioboksi1.kuntopuntari table tr td, .boksicontainer .nelioboksi2.kuntopuntari table tr td { font-size:0.95em; }
.boksicontainer.ottelu .nelioboksi1.sarjatilanne, .boksicontainer.ottelu .nelioboksi2.sarjatilanne {
	background-color: #ddeedf;
	padding: 0px;
	box-sizing: border-box;
}
.boksicontainer.valkoinen .nelioboksi1, .boksicontainer.valkoinen .nelioboksi2 { background-color:#FFF; padding: 10px; }
.nelioboksi1.sarjatilanne a:hover, .nelioboksi2.sarjatilanne a:hover, .nelioboksi1.kuntopuntari a:hover, .nelioboksi2.kuntopuntari a:hover { color: #000; }
.kuntopuntari img { vertical-align:middle; margin-right: 4px; }
.kuntopuntari .pieni { font-size: 0.9em; }
.joukkuesivu div span { font-weight: bold; }
.joukkuesivu .kuntopuntari { display: flex; align-items: center; justify-content: center; }
.ottelupallot { display:inline-block; margin-left: 5px;}
.kuntopuntari .ottelupallo { width: 22px; height: 22px; line-height: 22px; border-radius:50%; display: inline-block; vertical-align:middle; margin-right: 4px; text-align: center; color: #FFF; font-size: 11px; }
.joukkuesivu .kuntopuntari .ottelupallo { width: 24px; height: 24px; line-height: 24px; margin-right: 5px;}
.kuntopuntari .ottelupallo.vihrea, .kuntopuntari .varipallo.vihrea, table.sarjataulukko .ottelupallo.vihrea, .ottelunelio.vihrea  { background-color:#5daa54; }
.kuntopuntari .ottelupallo.keltainen, .kuntopuntari .varipallo.keltainen, table.sarjataulukko .ottelupallo.keltainen, .ottelunelio.keltainen  { background-color:#bebf2f; }
.kuntopuntari .ottelupallo.punainen, .kuntopuntari .varipallo.punainen, table.sarjataulukko .ottelupallo.punainen, .ottelunelio.punainen  { background-color:#aa5454; }
.voitot { color: #218c15; } .tappiot { color: #be2429; } .tasapelit { color: #bebf2f; }
.kuntopuntariottelut { font-size:0.85em; margin-top: 10px; line-height:18px; }
.kuntopuntariottelut span.vastaan {
	font-size: 0.8em;
	color: #666;
	margin-left: 2px;
	margin-right: 2px;
}
.kuntopuntari h4, .valkoinen h4 { margin-top:0px; }
.valkoinen h4 i { margin-right:3px; }
.sarjanumero { float:right; }

.ottelunelio { display: inline-block; padding: 4px 8px; border-radius: 3px; text-align:center; margin-right: 5px; color: #FFF; }
.ottelunelio img { max-height:25px; }

.boksicontainer {
  display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
grid-row-gap: 0px;
font-size: 0.9em;
}
.nelioboksi1 {
	padding: 6px 8px;
	background-color: #c0d8c7;
	border-radius: 5px;
	grid-area: 1 / 1 / 2 / 2;
}
.nelioboksi2 {
	padding: 6px 8px;
	background-color: #c0d8c7;
	border-radius: 5px;
	grid-area: 1 / 2 / 2 / 3;
}

.grid-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
}

.grid-divider .line {
    border-bottom: 1px solid #a1b1a0;
    height: 1px;
}

.grid-divider h4 {
    margin: 0 10px;
    white-space: nowrap;
    text-align: center;
    color: #516350;
}

h2.viiva, h3.viiva { border-bottom: 1px solid #3a5342; padding-bottom: 5px; margin-bottom: 6px }
h1 img, h2 img, h3 img, h4 img { vertical-align:middle;}
h1 img { max-height:28px; }
h1 img, h2 img { max-height:26px; }
h3 img { max-height:22px; float: right; }
h4 img { max-height:18px; }
h3 i { margin-right:4px; }
h1 a, h2 a, h3 a, h4 a { color: #000; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { color: #000; }

 .cup-bracket {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            gap: 20px;
            position: relative;
            max-height: 200px;
            line-height: 14px;
        }
        .cup-match {
            max-width: 200px;
            padding: 12px 15px;
            background: white;
            border-radius: 5px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            justify-self: center;
        }
        .cup-match p { margin-top:0px; margin-bottom:0px; }
        .cup-match a.joukkue { font-size:0.9em; }
        .cup-match.final {
            grid-column: span 2;
            position: relative;
        }
        .cup-match .result { margin-top: 8px; }


.kolmeboksicontainer {
  display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.kolmeboksicontainer div { border-left: 3px solid #3a5342; background-color: #FFF; text-align: center; padding: 10px; position: relative; border-radius: 5px; font-size:0.9em; }
.kolmeboksicontainer div a .jengilogo { width: 22px; height: 22px; margin-right:2px; float:none; }
.kolmeboksi1 {
	grid-area: 1 / 1 / 2 / 2;
}
.kolmeboksi2 {
	grid-area: 1 / 2 / 2 / 3;
}
.kolmeboksi3 {
	grid-area: 1 / 3 / 2 / 4;
}
.kolmeboksicontainer div.green { border-left: 3px solid #00ab4c; }
.kolmeboksicontainer div.red { border-left: 3px solid #c25353; }
.kolmeboksicontainer div.yellow { border-left: 3px solid #bfc008; }

.kolmeboksicontainer div img.tv { max-height:20px; max-width: 80px; position: absolute; top: 8px; right: 8px;}
.kolmeboksicontainer div p { margin-top:0; margin-bottom:6px; }

.kolmeboksicontainer.pelaajaboksit div { border-left: 0px; text-align: left; border-bottom: 1px solid #E1E1E1; }
.kolmeboksicontainer.pelaajaboksit div div { border-bottom: 0px; }
.kolmeboksicontainer.pelaajaboksit div span.vuosi { float: right; font-size: 0.9em;}
.kolmeboksicontainer.pelaajaboksit div .tiedot { float: left; padding: 0px; }
.kolmeboksicontainer.pelaajaboksit div .tiedot a, .kolmeboksicontainer.pelaajaboksit .valmentaja { font-size: 1.1em; }
.kolmeboksicontainer.pelaajaboksit div .vanhajoukkue { float: right; padding: 0px; }
.kolmeboksicontainer.pelaajaboksit div .vanhajoukkue.numero { color: #000; font-size: 1.1em; font-weight: bold; margin-bottom: 3px; background-color: #ddeedf; border-radius: 50%; width: 30px; height: 30px; line-height: 30px; text-align: center;}
.kolmeboksicontainer.pelaajaboksit div a { color: #000; }
.kolmeboksicontainer.pelaajaboksit div a:hover { color: #486952; }
.pelaajaboksit img.joukkuelogo { max-height:20px; }

.neljaboksicontainer {
  display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.neljaboksicontainer div { text-align: center; position: relative; font-size:0.9em; }
.neljaboksi1 {
    grid-area: 1 / 1 / 2 / 2;
}
.neljaboksi2 {
    grid-area: 1 / 2 / 2 / 3;
}
.neljaboksi3 {
    grid-area: 1 / 3 / 2 / 4;
}
.neljaboksi4 {
    grid-area: 1 / 4 / 2 / 5;
}

span.vastaan {
	font-size: 0.8em;
	color: #666;
	margin-left: 5px;
	margin-right: 5px;
}

.mestaruudet {
	background-color: #fff;
	border-radius: 5px;
	padding: 2px 6px;
	display: inline-block;
	color: #f19920;
}
.mestaruudet img { max-height: 20px; margin-right: 4px; vertical-align:middle; }

.virheilmoitus { padding: 6px 10px; font-size:0.9em; border-radius:5px;}
.virheilmoitus i { margin-right:5px; }
.virheilmoitus.punainen { color: #9d1d1d; background-color:#fce3e3; border: 1px solid #e4b1b1; }
.virheilmoitus.keltainen { color: #987436; background-color:#fbf6d8; border: 1px solid #dfd7ad; }
.virheilmoitus.vihrea { color: #1f8162; background-color:#e3f7f2; border: 1px solid #b0d8ce; }

.ottelun-alkuun { padding: 3px 8px; margin-bottom: 10px; display: block; width: fit-content; margin-left: auto; margin-right: auto; font-size:0.8em; border-radius:5px; color: #987436; background-color:#fbf6d8; text-transform: uppercase;}
.ottelun-alkuun i { margin-right:3px; }

.palkinto {
	background-color: #e4e483;
	border-radius: 5px;
	padding: 4px 8px;
	display: inline-block;
	color: #6e6e03;
	margin-right: 4px;
	margin-bottom: 4px;
	font-size: 12px;
	font-style: italic;
  font-weight: bold;
}
.palkinto img { max-height: 20px; vertical-align:middle; }

.huhu {
	background-color: #fff;
	margin-bottom: 2px;
	padding: 5px 10px;
	border-radius: 5px;
	border-left: 3px solid #3a5342; 
	font-size: 0.95em;
}
.huhu.kuvallinen {
    display: flex;
    align-items: center;
    grid-column-gap: 15px;
    grid-row-gap: 0px;
    width: 100%;
    box-sizing: border-box;
}
.huhu.pienempi { font-size:0.85em; }
.huhu.pienempi a.lahde img, .pelaajatiedot a.lahde img { max-height:16px; }
.huhu.pienempi .pieni { padding-right: 5px; }
.huhu a.lahde img { max-height:18px; }
.huhu img { max-height: 20px; vertical-align:middle; margin-left:4px; }
.huhu img.nuoli { margin-left: 2px; margin-right: 2px; }
.nelioboksi1 img.nuoli, .nelioboksi2 img.nuoli, .matsitaulukko img.nuoli { vertical-align:middle; }
.huhu.sisaan {
	border-left: 5px solid #74ab39;
}
.huhu.ulos {
	border-left: 5px solid #cb4948;
}
.huhu.keltainen {
	border-left: 5px solid #f1c40f;
}

.etusivuottelut {
	display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 8px;
    width: 100%;
    margin-bottom: 6px;
}
.etusivuottelu {
	font-size: 0.9em;
    flex: 1 1 calc(50% - 10px);
    background-color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    box-sizing: border-box;
    max-width: calc(50% - 10px);
}
.etusivuottelu a { color: #000; }
.etusivuottelut a.pieni { font-size:0.8em; color: #333; }
.etusivuottelu .home, .etusivuottelu .away {
    width: 30%;
    font-weight: bold;
    display: inline-block;
    box-sizing: border-box;
}
.etusivuottelu .home { text-align: left; }
.etusivuottelu .away { text-align: right; }
.etusivuottelu .vs {
	display: inline-block;
    width: 40%;
    text-align: center;
    color: #333;
}
.etusivuottelu img.joukkuelogo { max-height:30px; }

img.kortti { max-height:16px; vertical-align:middle; }

.ottelutapahtuma {
	background-color: #fff;
	margin-bottom: 2px;
	padding: 5px 10px;
	font-size: 0.85em;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.ottelutapahtuma.maali a { color: #000; }
.ottelutapahtuma.maali a:hover { color: #274a2a; }
.ottelutapahtuma.koti { text-align: left; }
.ottelutapahtuma.vieras { text-align: right; }
.ottelutapahtuma.koti .minuutti, .ottelutapahtuma.vieras .minuutti {
    text-align: center;
    background-color: #ddeedf;
    padding: 1px 4px;
    display: inline-block;
}
.ottelutapahtuma.koti .minuutti { margin-right: 4px; }
.ottelutapahtuma.vieras .minuutti { margin-left: 4px; }
.ottelutapahtuma.keltainen i, .fa.keltainen { color: #eada16; vertical-align: middle; }
.ottelutapahtuma.punainen i, .fa.punainen { color: #ea1616; vertical-align: middle; }
.fa.vihrea { color: #5daa54; vertical-align: middle; }

.otteluinfo { text-align:center; font-size:0.8em; color: #333; }
.otteluinfo i { vertical-align:middle; margin-right:3px; }
.otteluinfo a { color: #333; }
.otteluinfo a:hover { color: #3a5342; }

.huhu .pieni { font-size:0.85em; color: #666; }
.huhu.keltainen span.pieni { color: #666; }
.huhu.sisaan.kaksnelja, .huhu.ulos.kaksnelja { background-color: #fbfdd3; }
.huhu2 {
	margin-bottom: 2px;
	padding: 5px 6px;
	font-size: 0.8em;
}
.jakolinkit a { display: inline-block; padding: 5px 10px; background-color: #aebeac; border-radius: 5px; font-size:0.9em; line-height:1.1em; transition: color 0.3s ease-in-out; }
.jakolinkit a i { font-size:1.1em; margin-right: 4px; }

.huhu .selite, .huhutaulukko .selite, .boksicontainer .selite {
	display: inline-block;
	font-size: 12px;
	color: #666;
	margin-left:8px; font-style: italic;
}

.huhu2 .selite {
	display: block;
	font-size: 11px;
	color: #666;
}
.huhu2 img, .huhutaulukko img, .nelioboksi img  { max-height: 20px; vertical-align:middle; margin-left:4px; }
img.lippu { max-height: 18px; vertical-align:middle; margin-right:6px; }

.siirtoselite { color: #333; margin-left: 7px; display: inline-block; font-size:0.8em; font-style:italic; }

tr td {
	padding: 0.5em;
	font-size: 0.9em;
}
table th, td { text-align:left; vertical-align:top; }
td.right { text-align:right; }


.huhutaulukko { border-spacing:0; }
.huhutaulukko tr td:first-child, .matsitaulukko tr td:first-child {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
td.pvm { width:65px; font-size: 0.8em; color: #3d5b46; }
.tilastoboksit .huhutaulukko td.pvm { width: 100px; font-size:0.9em; color: #000; }
td.pitka { width:400px; }
td.keski { width:200px; }
td.lyhyt { width:30px; }

.huhutaulukko tr td:last-child, .matsitaulukko tr td:last-child {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}
.huhutaulukko tr td { background-color:#c0d8c7; border-bottom: 2px solid #ddeedf; }
.huhutaulukko tr.noborder td { border-bottom: 0; }
.huhutaulukko tr td a { background:none; border:0px; }
.huhutaulukko tr td a:hover { background:none; border:0px; }

.huhutaulukko .jengilogo, .huhu .jengilogo, .nelioboksi .jengilogo, .nelioboksi1 .jengilogo, .nelioboksi2 .jengilogo, .jengilogo2 {
	width: 22px; height: 22px; margin-right:8px; float: none;
}
.nelioboksi1 .jengilogo, .huhu .jengilogo, .nelioboksi2 .jengilogo {
	margin-right:2px;
}
.huhutaulukko .jengilogo { margin-right:4px; }

.matsitaulukko { border-spacing:0; }
.matsitaulukko tr td { background-color:#c0d8c7; border-bottom: 2px solid #ddeedf;  }
.matsitaulukko tr.noborder td { border-bottom: 0; }
.matsitaulukko tr td.oikea { text-align:right; }
.matsitaulukko tr.tapahtuma td { font-size:0.80em; color: #6c7d71; border-bottom: 0; background:none; }
.matsitaulukko tr.tapahtuma td img { vertical-align:middle; max-height: 16px; margin-right: 3px; }
.matsitaulukko td.tapahtuma { font-size:0.80em; text-align: right; padding-right: 15px; }
.matsitaulukko td.tapahtuma img, .matsitaulukko a.lahde img { vertical-align:middle; max-height: 16px; margin-right: 3px; }
.matsitaulukko a { color: #000; }
.matsitaulukko a:hover { color: #b33329; }
.matsitaulukko tr.ottelurivi>td {
  padding-top: 2px;
  padding-bottom: 10px;
}
.pelaajaboksit span.kapteeni { display: inline-block; font-weight:bold; vertical-align: middle; color: #FFF; padding: 0px 4px; border-radius: 3px; background-color: #5daa54; font-size: 1.2em; margin-left: 5px; }
.matsitaulukko.pieni { font-size:0.9em; }
p.pvmrivi { margin-bottom: 6px; }

.infotaulukko { border-spacing:0; }
table.infotaulukko tr td, table.infotaulukko tr th {  border-bottom: 1px solid #bfcfbe;  }
table.infotaulukko tr th { color: #333; font-size: 0.9em; font-weight:normal; vertical-align:middle; }

.varipallo { width: 9px; height: 9px; border-radius:50%; display: inline-block; vertical-align:middle; margin-right: 2px; }

.matsitaulukko .jengilogo {
	width: 22px; height: 22px; margin-right:8px;
}

.tilastoboksit {
  display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.tilastoboksi {
	border-radius: 5px;
}
.tilastoboksi h3 { margin-top:4px; }
.tilastoboksi p { margin-top:3px; margin-bottom: 0px;}

p.uutispaiva { border-bottom: 1px solid #bfcfbe; font-size:0.9em; color: #666; padding-bottom: 8px; margin-top: 0px; }
div.uutispvm { text-transform: uppercase; font-weight: 600; color: #486952; font-family: 'Montserrat', sans-serif; margin-bottom: 15px; }

.lisauutinen p.uutispaiva, .isouutinen p.uutispaiva { border: 0px; margin: 0; padding: 0; }
.isouutinen p.uutispaiva { margin-bottom: 10px; }
.lisauutinen p.uutispaiva { margin-bottom: 5px; }

.tagi {
    display: inline-block;
    padding: 2px 8px;
    background-color: #bad8b6;
    border-radius: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    text-transform: uppercase;
    font-size: 0.8em;
    transition: background 0.2s, transform 0.2s;
}
.tagi:hover {
  background-color: #8cc984;
}
.uutiskuva { max-width: 100%; width: auto; margin: 15px auto 0px auto; font-size: 0.8em; color:#666; text-align: center; box-sizing: border-box; }
.uutiskuva img { max-width: 700px; width: 100%; height: auto; display: block; margin: 0 auto 5px auto;  box-sizing: border-box; border-radius: 5px; }
.uutiskategoria { text-transform:uppercase; text-align: right; color: #555; font-weight: 600; margin-left: 10px; margin-bottom: 10px; font-size: 1em; border-radius:3px; }
.pelaajaboksi_uutinen { background-color:#FFF; padding: 8px 8px; border-radius:5px; border-left: 3px solid #3a534d; display: flex; align-items: center; justify-content: center; }
.pelaajaboksi_uutinen .pelaajakuva  {
    width: 50px;
    height: 50px;
    overflow: hidden;
    padding: 0px;
    align-self: flex-top;
     border-radius: 50%;
}
.pelaajatiedot a:hover { color: #465e48; }
.pelaajatiedot a.pelaajaprofiili-linkki {
  color: #555;
  float: right;
  font-size: 0.8em;
}
h1.uutisotsikko { margin-bottom: 8px; }
.kolmeboksicontainer .liittyva-uutinen { background:none; border-left: 0px; width: auto; max-width: 100%; box-sizing:border-box; }
.kolmeboksicontainer .liittyva-uutinen img { max-width:100%; height: auto; display:block; box-sizing:border-box; border-radius:5px; }

.uutislista {
    display: grid;
    gap: 5px; 
}

.uutisrivi {
    display: grid;
    grid-template-columns: 140px auto;
    align-items: center;
    border-bottom: 1px solid #bfcfbe;
    padding: 3px 0px;
}
.uutisrivi .paivamaara { color: #666; font-size: 0.9em;  }

.kaksiboksi1 {
    grid-area: 1 / 1 / 2 / 2;
}
.kaksiboksi2 {
    grid-area: 1 / 2 / 2 / 2;
}
.kaksiboksicontainer.lisauutiset {
  display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.kaksiboksicontainer .lisauutinen {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: none;
    border-left: 0px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px; 
    padding: 10px 0px 0px 0px;
}

.kaksiboksicontainer .lisauutinen img {
    max-width: 40%; 
    height: auto;
    box-sizing: border-box;
    border-radius: 5px;
    align-self: flex-start;
}

.kaksiboksicontainer .lisauutinen .uutisteksti {
    flex: 1; 
    background: none;
    border: 0px;
    text-align: left;
    flex-direction: column;
    justify-content: flex-start;
    display: flex;
    padding: 0px 10px 10px 10px;
}

.kaksiboksicontainer .lisauutinen h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
}
.kaksiboksicontainer .lisauutinen .uutisteksti a { display:block; }

.neljaboksicontainer .liittyva-uutinen { background:none; border-left: 0px; width: auto; max-width: 100%; box-sizing:border-box; row-gap: 0px; display: grid; }
.neljaboksicontainer .liittyva-uutinen h4 { margin-top: 8px; }
.neljaboksicontainer .liittyva-uutinen img { max-width:100%; height: auto; display:block; box-sizing:border-box; border-radius:5px; }

.isouutinen {
    background-color: #FFF;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border-left: 0px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px; 
    border-radius: 5px;
    padding: 0;
}

.isouutinen img {
    max-width: 50%; 
    height: auto;
    box-sizing: border-box;
    border-radius: 5px 0px 0px 5px;
}

.isouutinen .uutisteksti {
    padding: 10px;
    flex: 1; 
    background: none;
    border: 0px;
    text-align: left;
}

.isouutinen h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
}
.isouutinen a h3, .lisauutinen a h4 { color: #000; }
.isouutinen a { display:block; }

.pelaajaboksi_uutinen .pelaajakuva img {
    width: 140%;
    height: auto;
    object-fit: cover;
    object-position: top center;
     transform: translate(-10px,0px);
     transition: transform 0.3s ease-in-out;
}
.pelaajaboksi_uutinen .pelaajakuva img:hover {
    transform: translate(-10px, 0px) scale(1.05); 
}

.pelaajaboksi_uutinen .pelaajatiedot {
    flex: 1;
    padding: 0px 0px 0px 10px;
}

#lataaLisaa {
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
}

 .nelioboksi1.pelaajatilastot, .nelioboksi2.pelaajatilastot { padding: 0px; background:none; }
 .player-stats {
      background-color: #fff;
      border-radius: 5px;
      padding: 15px;
      max-width: 600px;
      text-align: center;
      border: 1px solid #d0ddcf;
    }

    .stats-container {
      display: flex;
      justify-content: space-between;
      gap: 15px;
    }
    .player-stats h4 { margin-top:0px; text-align:left; display:block; margin-bottom: 10px; }

    .stat {
      flex: 1;
      text-align: center;
    }

    .stat-title {
      font-size: 13px;
      color: #777;
      line-height: 14px;
    }

    .stat-value {
      font-size: 16px;
      font-weight: bold;
      color: #000;
      margin-top: 4px;
    }
    .stat-value-extra {
      font-size: 11px;
      color: #666;
    }
    .boksicontainer .stat-value span.pieni { font-size: 12px; color: #666; vertical-align: middle; }

    .comparison-container {
            width: 100%;
            max-width: 600px;
            margin-top: 10px;
        }
        .comparison-container img.lippu { margin-right:3px; }

        .team-names {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 1.1em;
            text-align: center;
        }

        .comparison-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .team-bar-container {
            flex: 1;
            display: flex;
            align-items: center;
            position: relative;
            flex-direction: column;
        }

        .team-bar {
            width: 100%;
            height: 20px;
            background-color: lightgray;
            position: relative;
            border-radius: 3px;
            overflow: visible;
        }
        .team-text {
            width: 100%;
            height: 20px;
            background-color: none;
            position: relative;
            overflow: hidden;
            font-size: 0.9em;
        }

        .team-fill {
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            color: white;
            font-weight: bold;
            font-size: 0.9em;
            white-space: nowrap;
             overflow: visible;
             border-radius: 3px;
        }
.team-fill span {
    color: white;
    font-weight: bold;
    text-align: right;
    position: absolute;
    white-space: nowrap;
    padding-left: 5px;
    right: 8px;
}

.team-fill span {
    position: absolute;
    left: 100%;
    white-space: nowrap;
    color: black;
    padding-left: 5px;
}

.team-fill.wide span {
    position: relative;
    left: auto;
    right: 8px;
    color: white;
}

.team-bar span.outside {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: black;
    font-weight: bold;
    white-space: nowrap;
    font-size: 0.9em;
    align-items: center;
}
        .stat-text {
            width: 150px;
            text-align: center;
            font-size: 0.9em;
            font-weight: normal;
            word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    color: #666;
        }
        .team-fill.red { background-color:#aa5454; }
        .team-fill.green { background-color:#5daa54; }
        .team-fill.yellow { background-color:#eada16; color: #000; }
        .team-fill.darkgray { background-color:#525859; }

        .budjetticontainer {  position: absolute;
    bottom: -20px;
    width: 100%;
    display: flex;
    color: #FFF;
    justify-content: space-around; font-size:0.8em; font-weight: bold; padding-bottom:17px; }

h2 img {
	vertical-align: middle;
	margin-right: 5px;
}

img.new{ margin-left: 20px; }

.tekstimainos { text-align: center; }
.tekstimainos a { color: #2589c4; font-weight: bold;}	
.tekstimainos a:hover { text-decoration:underline; }
.tekstimainos span { font-style: italic; color: #555; }
p.tekstimainos.notop { margin: 0px; padding: 0px; }

a.lahde {
	float: right;
	font-size: 0.8em;
}
.huhutaulukko a.lahde img { max-height:16px; }


.tahdet img { margin: 0; max-height:16px; vertical-align:middle; }
.tahti { color: #f1c40f; margin-right: 2px; font-size:1.1em; }


#oikea h2 {
	color: #ff6e02;
	border-bottom: 2px solid #e5b48f;
	padding-bottom: 5px;
}

.sovellusmainos {
    width: 100%;
    padding: 5px 10px;
    background-color: #f4e2cd;
    border-left: 3px solid #fdd19d;
    height: 40px;
    display: flex;
    align-items: center; 
     justify-content: center;
     margin: 10px 0px;
}

.sovellusmainos img {
    border-radius: 10px;
    margin-right: 10px;
    max-height: 40px;
}

.sovellusmainos p {
    margin: 0;
    line-height: 1.2;
}

.maalikoosteet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.maalikoosteet .aika { color: #666; display: block; padding-bottom: 5px; }
.lataaLisaa { text-align:center; }
.lataaLisaa button { font-size: 12px; color: #486952; border: 1px solid #486952; font-weight: normal; padding: 8px 12px; margin-top: 5px; border-radius: 5px; background:none; cursor:pointer; }

.maalikooste-pieni {
    border-left: 2px solid #3a5342; background-color: #FFF; text-align: center; padding: 10px; position: relative; border-radius: 5px; font-size:0.8em; 
}

.maalikooste {  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

FORM { margin: 0; padding: 0;}
INPUT{ color: #000000; padding: 6px 8px; margin-bottom: 5px; border: 1px solid #b6cdbd; background-color: #FFFFFF; border-radius:5px;}
INPUT:focus, INPUT:active, TEXTAREA:focus, TEXTAREA:active  { border: 1px solid #99b1a1; outline: none;}
INPUT.submit { font-size: 14px; color: #fff; font-weight: bold; padding: 8px 10px; margin-top: 5px; border: 1px solid #c75e10; background-color: #c75e10; }
INPUT.submitred { font-size: 14px; color: #fff; font-weight: bold; padding: 8px 10px; margin-top: 5px; border: 1px solid #7c1111; background-color: #b11a1a; }
.valitsevuosi SELECT { width: 100%; font-size: 14px; border: 1px solid #b6cdbd; color: #000; background-color: #FFFFFF; padding: 4px 6px;  -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.valitsevuosi {
  position: relative;
  width: 70px; 
}
.valitsevuosi::after {
  content: '\f107';
  font-family: 'FontAwesome';
  font-size: 14px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; 
  color: #555;
}

   .form-container {
        max-width: 600px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
    }

    .form-group label {
        margin-bottom: 5px;
        font-size: 0.9em;
        font-weight: bold;
    }

    .form-group input,
    .form-group textarea {
    	font-size: 1em;
        width: 100%;
        max-width: 500px;
        padding: 6px 8px;
        border: 1px solid #b6cdbd;
        border-radius: 5px;
        box-sizing: border-box;
        background-color: #FFFFFF;
    }
    .form-group input:active, .form-group input:focus, .form-group textarea:active, .form-group textarea:focus { border: 1px solid #99b1a1; }

    .form-group textarea {
        height: 100px;
        resize: vertical;
    }

.valintaruutu { font-size: 0.9em; }
  .valintaruutu .piilota {
    appearance: none;
    background-color: #dfe1e4;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    position: relative;
    width: 30px;
    vertical-align: middle;
  }

  .valintaruutu .piilota::before {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
  }

  .valintaruutu .piilota,
  .valintaruutu .piilota::after {
    transition: all 100ms ease-out;
  }

  .valintaruutu .piilota::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
  }

  .valintaruutu input[type=checkbox] {
    cursor: default;
  }

  .valintaruutu .piilota:hover {
    background-color: #c9cbcd;
    transition-duration: 0s;
  }

  .valintaruutu .piilota:checked {
    background-color: #284a2b;
  }

  .valintaruutu .piilota:checked::after {
    background-color: #fff;
    left: 13px;
  }

  .valintaruutu :focus:not(.focus-visible) {
    outline: 0;
  }

  .valintaruutu .piilota:checked:hover {
    background-color: #284a2b;
  }

#ilmoita span {
	display: block;
	text-transform: uppercase;
	font-size: 0.8em;
	font-weight: bold;
}
.inline {
  display: inline;
}

.ilmoita-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9em;
  color: #000;
  font-weight: normal;
  padding-left: 0px;
}

#alalaita {
	font-size: 0.8em;
	color: #666;
	padding-top: 1em;
	border-top: 1px solid #C1C1C1;
	padding-bottom: 20px;
}

#alalaita img {
	float: right;
	margin-left: 10px;
}

.jengilogo, .jengilogo2 {
	display: inline-block;
	vertical-align: middle;
	border-radius: 8px;
	float: left;
	width: 45px;
	height: 45px;
	border: #D1D1D1;
	margin-right: 16px;
	background-position: center center;
	background-size: auto;
}
h1 img.joukkuelogo, h2 img.joukkuelogo {
	display: inline-block;
	vertical-align: middle;
	float: left;
	border: #D1D1D1;
	margin-right: 16px;
	max-height: 50px;
}
h2 img.joukkuelogo {
	max-height: 40px;
}

a.joukkue {
	display: block;
	padding-top: 10px;
	color: #465e48;
}
a.joukkue:hover { color: #000; }
a.pelaaja {
	color: #000;
}
a.pelaaja:hover { color: #465e48; }
#vasen hr {
	 border: 0;
	 height: 1px;
	 background: #8da7b4;
	 background-image: linear-gradient(to right, #e1e1e1, #8da7b4, #e1e1e1);
}
.umpeutunut { color: #8b2727 }

td.pieni a, td.pieni a.matsilinkki:hover { color: #5a7179 }
p.pieni, td.pieni {
		font-size: 0.85em;
		color: #5a7179;
}
p.pieni { line-height:1.2em; }
p.pieni img {
	vertical-align: middle;
	margin-right: 0.5em;
}
p.pienipvm { font-size: 0.9em; color: #333; margin-bottom: 7px; }
span.pieni { font-size:0.9em; color:#333; }
span.syottaja { font-size: 0.85em; }
.boksicontainer span.pieni { font-size: 0.85em; color: #3d5b46;}
#napit {
	float: right;
}

#napit img { vertical-align: middle; margin-right: 0.5em;}

a.sarja {
	display: inline-block;
	padding: 0.3em 0.6em;
	font-weight: bold;
	background-color: #e1e1e1;
	color: #487cb8;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

a.sarja.aktiivinen, a.sarja:hover {
	background-color: #487cb8;
	color: #fff;
	border-left: 1px solid #3b6a9f;
	border-right: 1px solid #3b6a9f;
	border-bottom: 1px solid #3b6a9f;
}

form span {
	display: inline-block;
	width: 200px;
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 5px;
}

.ensikausi { display: inline-block; background-color: #74ab39; color: #FFF; font-weight: bold; text-align: center; padding: 0.10em 0.6em; font-size: 0.9em; }
.huhu.ulos .ensikausi { background-color: #cb4948; }

#bottom {
	margin-top: 20px;
	background-color: #fff;
	padding: 20px 0px;
}

#bottom_content {
	width: 1500px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 50px;
    position: relative;
}
#bottom_content img { vertical-align: middle; }

#bottom_content a.back-to-top {
  position: absolute;
  top: 0px;
  right:20px;
  font-size: 14px;
  color: #000;
  border-radius: 50%;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s ease-in-out;
}
#bottom_content a.back-to-top i { padding-right:3px; }

#bottom_content a.back-to-top:hover {
  color: #274a2a;
}

#bottom_content a i { vertical-align: middle; }

#bottom_content p { font-size: 0.8em; color: #999; text-align: center; line-height: 1.1em; }
#bottom_content p img { max-height: 16px; margin-right: 3px;}

#teams a, #teams span.teksti { display: inline-block; color: #000; background-color: #bad8b6; padding: 3px 6px; border-radius: 5px; margin-right: 3px; margin-bottom:5px; transition: background-color 0.3s ease-in-out; }
#teams a:hover, #teams a.active, #teams span.teksti { background-color:#fff2be; }
#teams span.teksti, #teams a.active { font-weight:bold; }
#teams a img { vertical-align:middle; height: 20px; }
#teams a img.sarja { vertical-align:middle; height: 16px; margin-right:6px; }
#teams a .jengilogo, .jengilogo2 { width: 22px; height: 22px; margin-right:6px; }

.matsirivi {
	font-size: 0.9em;
    text-align: center;
}
.matsirivi img { vertical-align:middle; }
.matsirivi span { font-size:0.9em; color: #555; }

.poissaolorivi {
    margin-bottom: 3px;
    font-size: 0.9em;
}
.poissaolorivi img { vertical-align:middle; margin-right:3px; }
.poissaolorivi .punainen { margin-right: 8px; }
.poissaolorivi a { margin-right:4px; }

h3.keskitetty { text-align:center; }

ul { padding-left: 20px; list-style-type: square;}
ul li { padding-left: 0px; }
ul li img { max-height:18px; vertical-align:middle; }

.legend {
			margin-top: 10px;
            margin-bottom: 20px;
            display: flex;
            gap: 40px;
            font-size: 14px;
            width: 100%;
            align-items: center;
            justify-content: center;
        }
        .legend div {
        	gap: 10px;
            display: flex;
            align-items: center;
        }
        .legend div img { vertical-align:middle; max-height: 40px; }
        .legend div span { display: inline-block; background-color: #e1e1e1; border-radius: 5px; padding: 5px 12px; font-weight:bold; font-size:1.2em; gap: 10px; }
        .legend div span.korostus { background-color: #3a5342; color:#FFF; }

@media screen and (min-width: 1280px) {
    .budjetticontainer { display:none; }
}

@media screen and (max-width: 1279px) {

    .avauskokoonpano-container .joukkue div { font-size:0.9em; }
    .pelaajaottelut, .maalikoosteet {
        grid-template-columns: repeat(1, 1fr);
        gap: 8px;
    }
    img.oikeakuva { float: none; margin: 10px 0px 10px 0px; border-radius: 5px; max-width: 100%; }
    .maalikoosteet { gap: 10px; }
    .pelaajaottelu { padding: 6px; }
    .comparison-row {
            gap: 8px;
        }
     .stat-text {
            width: 100px;
            font-size: 0.8em;
            line-height: 1;
        }
         .team-fill, .team-bar span.outside {
            font-size: 0.8em;
        }
        .team-bar {
            height: 16px;
        }
        .team-text {
            height: 16px;
            font-size: 0.8em;
        }
         .team-text a {
        font-size: 10px;
    }
    .uutisrivi {
        grid-template-columns: 1fr;
    }
    .neljaboksicontainer {
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 10px;
}
.neljaboksi1 {
    grid-area: 1 / 1 / 2 / 2;
}
.neljaboksi2 {
    grid-area: 1 / 2 / 2 / 3;
}
.neljaboksi3 {
    grid-area: 2 / 1 / 3 / 2;
}
.neljaboksi4 {
    grid-area: 2 / 2 / 3 / 3;
}
    .isouutinen {
        flex-direction: column; 
        gap: 0px;
}
.isouutinen img { 
    max-width: 100%;
    width: 100%; 
    height: auto;
    box-sizing: border-box;
    border-radius: 5px 5px 0px 0px; 
}
    .kaksiboksi1 {
    grid-area: 1 / 1 / 2 / 2;
}
.kaksiboksi2 {
    grid-area: 2 / 1 / 2 / 2;
}
.kaksiboksicontainer.lisauutiset {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.kaksiboksicontainer .lisauutinen img { max-width: 30%; }
.kaksiboksicontainer .lisauutinen { margin-bottom: 5px;  }
.sarjataulukko td.vasen {
  white-space: nowrap; 
}

.front .nelioboksi1, .front .nelioboksi2 { font-size: 0.9em; }
	.legend { gap: 15px; }
	.legend div {
        	gap: 5px;
        }
		.matsitaulukko td.tapahtuma img { display:none; }
	.matsitaulukko tr td.keski.max { width: auto; }
	#top_menu, #haku { display:none; }

	h1 { font-size: 1.65em; }
	.uusipelaaja h1 { font-size:1.5em; }
.uusipelaaja .pelaajakuva { width: 70px; height: 70px; }

	a.toggle-button2 { margin: 10px 8px 10px 10px; color: #000; }
	a.toggle-button2:hover { text-decoration: none; color: #733d3d; }
	a.toggle-button2 img { vertical-align: middle; float: none; }
	#drawer a.navi {
		display: block;
		padding: 5px 12px;
		font-size: 1em;
	}
	#drawer a.liigalinkki {
		font-size: 0.9em;
		padding: 5px 12px;
		display: block;
	}
    #drawer a.ilmoituslinkki {
        font-size: 0.8em;
        padding: 5px 12px;
        display: block;
    }
    #drawer a.ilmoituslinkki img { max-height:14px;  }
	#drawer a.liigalinkki img { max-height:18px;  }
	#drawer	a img { 
padding-right: 4px;
vertical-align: middle; }
#drawer	a.toggle-button2 img { 
vertical-align:middle;
padding-right: 8px;
max-height: 22px; }
td.pitka { width:200px; }
td.lyhyt { width:25px; }
	body {
	  width: 100%;
	  height: 100%;
		font-size: 14px/24px;
}
#top_content .logo { max-width:200px; margin-top: 5px; }

.boksicontainer {
  display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 8px;
grid-row-gap: 12px;
}
.nelioboksi1 {
	padding: 6px 8px;
	border-radius: 5px;
	grid-area: 1 / 1 / 2 / 2;
}
.nelioboksi2 {
	padding: 6px 8px;
	border-radius: 5px;
	grid-area: 1 / 2 / 2 / 3;
}
.boksicontainer.ottelu {
  display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 15px;
}
.boksicontainer.ottelu .nelioboksi1 {
	padding: 12px 15px;
	border-radius: 5px;
	grid-area: 1 / 1 / 2 / 2;
}
.boksicontainer.ottelu .nelioboksi2 {
	padding: 12px 15px;
	border-radius: 5px;
	grid-area: 2 / 1 / 2 / 2;
}
.boksicontainer.ottelu .nelioboksi1.pelaajatilastot, .boksicontainer.ottelu .nelioboksi2.pelaajatilastot {
    padding: 0px 0px;
    border-radius: 0px;
}
.nelioboksi1 img, .nelioboksi2 img { max-height: 18px; }
.kolmeboksicontainer {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 10px;
}
.kolmeboksicontainer div a .jengilogo { width: 20px; height: 20px; margin-right:0px; }
.kolmeboksi1 {
	grid-area: 1 / 1 / 2 / 2;
}
.kolmeboksi2 {
	grid-area: 2 / 1 / 2 / 2;
}
.kolmeboksi3 {
	grid-area: 3 / 1 / 3 / 2;
}
.kolmeboksicontainer.pelaajaboksit { grid-row-gap: 6px; }
.title.ottelu .kotijoukkue img, .title.ottelu .vierasjoukkue img { display: block; margin-bottom: 4px; margin-left:auto; margin-right:auto; }
.title.ottelu .kotijoukkue { grid-area: 1 / 1 / 2 / 2; text-align: center; font-size: 1.5em; display: flex; align-items: center; justify-content: center;}
.title.ottelu .vastaan { grid-area: 1 / 2 / 2 / 3; text-align: center; color: #666; }
.title.ottelu .vierasjoukkue { grid-area: 1 / 3 / 2 / 4; text-align: center; font-size: 1.5em; display: flex; align-items: center; justify-content: center; }
.tilastoboksit {
grid-template-columns: repeat(1, 1fr);
grid-column-gap: 0px;
grid-row-gap: 10px;
}
.uusiottelu { padding: 6px 8px; }
h1 { line-height:1.1em; }
p.pieni img {
	margin-right: 4px;
}
img.lippu { margin-right:3px; }
.boksicontainer img.lippu { max-height:16px; }
.tahdet {display: block;}
.huhu.keltainen .tahdet { display:inline-block; }
p .tahdet { display: inline-block; }
.tablerow td, .tablerow th { display: table-row; }
#top_content { padding: 0px 15px; text-align:center; }
#top { height: 30px; padding: 15px 0px; }
.mobile_hide { display: none; }
#left { display: none; }
#saitti, #top, #top_content, #right, #right_content, #bottom, #bottom_content { width: auto; float: none; }
#bottom { padding: 15px 0px; }
#saitti { padding: 15px 15px 0px 15px; }
table.sarjataulukko, table.vuosiyhteenveto, table.vuosiyhteenveto tr.vuosiyhteen td  { font-size: 0.85em; }
}

@media screen and (max-width: 1590px) and (-webkit-min-device-pixel-ratio: 2) {
.title.ottelu.uusi .kotijoukkue { text-align: center; justify-content: center; font-size:16px; }
.title.ottelu.uusi .vierasjoukkue { text-align: center; justify-content: center; font-size:16px; }
.title.ottelu.uusi .maalit { font-size:11px; }
.title.ottelu.uusi .vastaan .ottelutulos { font-size:26px; }
span.vastaan { margin-left: 3px; margin-right: 3px; }
.cup-bracket { gap: 15px; }
.huhu.kuvallinen {
    grid-column-gap: 10px;
}
.huhu.kuvallinen .uusibadge { margin-left: 0px; margin-top: 2px; }

.kolmeboksicontainer.lisauutiset {
  display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.kolmeboksicontainer .lisauutinen { gap:10px; }

.kolmeboksicontainer {
    flex-direction: column;
    gap: 10px;
}

}

@media screen and (max-width: 1590px) and (-webkit-device-pixel-ratio: 1) {
.huhu.kuvallinen .uusibadge { margin-left: 0px; margin-top: 2px; }
.huhu.kuvallinen {
    grid-column-gap: 10px;
}
.isouutinen {
        flex-direction: column; 
        gap: 0px;
}
.isouutinen img { 
    max-width: 100%;
    width: 100%; 
    height: auto;
    box-sizing: border-box;
    border-radius: 5px 5px 0px 0px; 
}
.neljaboksicontainer {
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 10px;
}
.neljaboksi1 {
    grid-area: 1 / 1 / 2 / 2;
}
.neljaboksi2 {
    grid-area: 1 / 2 / 2 / 3;
}
.neljaboksi3 {
    grid-area: 2 / 1 / 3 / 2;
}
.neljaboksi4 {
    grid-area: 2 / 2 / 3 / 3;
}
.kolmeboksicontainer .lisauutinen { gap:10px; }
.kolmeboksicontainer.lisauutiset {
  display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}

	span.vastaan { margin-left: 3px; margin-right: 3px; }
	.cup-bracket { gap: 15px; }
	.title.ottelu.uusi .maalit { font-size:11px; }
.title.ottelu.uusi .vastaan .ottelutulos { font-size:26px; }
	.title.ottelu.uusi .kotijoukkue { text-align: center; font-size: 18px; justify-content: center; }
	.title.ottelu.uusi .vierasjoukkue { text-align: center; font-size: 18px; justify-content: center; }
	.front.mobile_hide { display:none; }
	.matsitaulukko td.tapahtuma img { display:none; }
	.matsitaulukko tr td.keski.max { width: auto; }
	#top_menu, #haku { display:none; }

	a.toggle-button2 { margin: 10px 8px 10px 10px; color: #000; }
	a.toggle-button2:hover { text-decoration: none; color: #733d3d; }
	a.toggle-button2 img { vertical-align: middle; float: none; }
	#drawer a.navi {
		display: block;
		font-size: 1em;
        padding: 5px 12px;
	}
	#drawer a.liigalinkki {
		font-size: 0.9em;
		display: block;
        padding: 5px 12px;
	}
	#drawer a.liigalinkki img { max-height:18px; }
	#drawer	a img { 
    padding-right: 4px;
vertical-align: middle; }
#drawer	a.toggle-button2 img { 
vertical-align:middle;
padding-right: 8px;
max-height: 22px; }
td.pitka { width:200px; }
td.lyhyt { width:25px; }
	body {
	  width: 100%;
	  height: 100%;
		font-size: 14px/24px;
}

#top_content .logo {
	margin-top: 0px;
}

.nelioboksi1 img, .nelioboksi2 img { max-height: 18px; }
.kolmeboksicontainer div a .jengilogo { width: 20px; height: 20px; margin-right:0px; }

.title.ottelu .kotijoukkue img, .title.ottelu .vierasjoukkue img { display: block; margin-bottom: 4px; margin-left:auto; margin-right:auto; }
.title.ottelu .kotijoukkue { grid-area: 1 / 1 / 2 / 2; text-align: center; font-size: 1.5em; display: flex; align-items: center; justify-content: center;}
.title.ottelu .vastaan { grid-area: 1 / 2 / 2 / 3; text-align: center; color: #666; }
.title.ottelu .vierasjoukkue { grid-area: 1 / 3 / 2 / 4; text-align: center; font-size: 1.5em; display: flex; align-items: center; justify-content: center; }
.tilastoboksit {
grid-template-columns: repeat(1, 1fr);
grid-column-gap: 0px;
grid-row-gap: 10px;
}
h1 { line-height:1.1em; }
p.pieni img {
	margin-right: 4px;
}
.huhu.keltainen .tahdet { display:inline-block; }
.tahdet {display: block;}
p .tahdet { display: inline-block; }
.tablerow td, .tablerow th { display: table-row; }
#top_content { padding: 0px 15px; }
#top { height: 30px; }

#left { display: none; }
#saitti, #top, #top_content, #right, #right_content, #bottom, #bottom_content { width: auto; float: none; }
#bottom { padding: 15px 0px; }
#saitti { padding: 15px 25px 0px 25px; }
}
@media screen and (min-width: 1590px) and (-webkit-min-device-pixel-ratio: 1) {

    .liittyva-uutinen img { transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; }
    .liittyva-uutinen img:hover { filter: brightness(1.2); }

	.front.desktop_hide { display:none; }
.desktop_hide, .hide_desktop, #drawer, .toggle-button { display: none; }

#top_logo img.logo { transition: filter 0.3s ease; }
#top_logo img.logo:hover { filter: brightness(0.8); }
table.sarjataulukko.paataulu tr:hover td { background-color:#eaf3eb; }
table.sarjataulukko.paataulu tr.korostettu:hover td { background-color:#f6f687; }
table.sarjataulukko.paataulu tr.vuosiyhteen td { background-color:#d0ddcf; }
table.sarjataulukko.paataulu tr.vuosiyhteen2 td { background-color:#c9cca0; }
.huhu.keltainen .tahdet { margin-left: 5px; }
}
/* retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.uusipelaaja .pelaajatiedot {
	padding: 8px;
}
.kolmeboksicontainer { grid-column-gap: 8px;
grid-row-gap: 8px; }
  .kolmeboksicontainer div img.tv { max-height:18px; }
  .nelioboksi1, .nelioboksi2 {
    padding: 4px 8px;
}
}
@media screen and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 2) {
    .liittyva-uutinen img { transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; }
    .liittyva-uutinen img:hover { filter: brightness(1.2); }

	.desktop_hide, .hide_desktop, #drawer, .toggle-button { display: none; }
    #top_logo img.logo { transition: filter 0.3s ease; }
    #top_logo img.logo:hover { filter: brightness(0.8); }
	#saitti {
	width: 1220px;
	margin-left: auto;
	margin-right: auto;
	padding: 15px 30px;
}

#top {
	height: 50px;
	padding: 22px 0px;
}
#top_menu { padding-top: 0px; margin-left:25px;}
#top_menu a { font-size: 1.05em; margin-right: 16px; }
#top_menu a.topliigalinkki { font-size: 0.9em; font-weight:normal;  }
#top_menu a img { 
vertical-align:middle;
padding-right: 4px;
max-height: 22px; 
}
#top_content {
	width: 1220px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 30px;
}

#top_content .logo {
	max-width: 200px;
	margin-top: 8px;
}
#haku {
	padding-top: 5px;
}
td.pvm { width:55px; }
td.pitka { width:220px; }
td.keski { width:180px; }
td.lyhyt { width:20px; }

.boksicontainer table.sarjataulukko { font-size: 0.9em; }
table.sarjataulukko.paataulu tr:hover td { background-color:#eaf3eb; }
table.sarjataulukko.paataulu tr.vuosiyhteen td { background-color:#d0ddcf; }

#haku INPUT { padding: 6px 12px; }
#haku button[type='submit'] { padding: 6px 12px; }

#left {
	float: left;
	width: 238px;
}

#top_logo { float: left; width:255px; max-width: 75%;}
#right {
	float: right;
	width: 942px;
}
#bottom {
	margin-top: 15px;
	background-color: #fff;
	padding: 15px 0px;
}

#bottom_content {
	width: 1206px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 37px;
}
}
@media screen and (max-width: 1279px) and (-webkit-min-device-pixel-ratio: 2) {
    .uutisrivi {
        grid-template-columns: 1fr;
    }
    .neljaboksicontainer {
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 10px;
}
.neljaboksi1 {
    grid-area: 1 / 1 / 2 / 2;
}
.neljaboksi2 {
    grid-area: 1 / 2 / 2 / 3;
}
.neljaboksi3 {
    grid-area: 2 / 1 / 3 / 2;
}
.neljaboksi4 {
    grid-area: 2 / 2 / 3 / 3;
}
    .isouutinen {
        flex-direction: column; 
        gap: 0px;
}
.isouutinen img { 
    max-width: 100%;
    width: 100%; 
    height: auto;
    box-sizing: border-box;
    border-radius: 5px 5px 0px 0px; 
}
    .kaksiboksi1 {
    grid-area: 1 / 1 / 2 / 2;
}
.kaksiboksi2 {
    grid-area: 2 / 1 / 2 / 2;
}
.kaksiboksicontainer.lisauutiset {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 10px;
}
.kaksiboksicontainer .lisauutinen { margin-bottom: 5px; }
.kaksiboksicontainer .lisauutinen img { max-width: 30%; }
	#top_menu, #haku { display:none; }

	.legend { gap: 15px; }
	.legend div {
        	gap: 5px;
        }
        h1 { font-size: 1.65em; }
.uusipelaaja h1 { font-size:1.5em; }
.uusipelaaja .pelaajakuva { width: 70px; height: 70px; }

	a.toggle-button2 { margin: 10px 8px 10px 10px; color: #000; }
	a.toggle-button2:hover { text-decoration: none; color: #733d3d; }
	a.toggle-button2 img { vertical-align: middle; float: none; }
	#drawer a.navi {
		display: block;
		font-size: 1em;
        padding: 5px 12px;
	}
	#drawer a.liigalinkki {
		font-size: 0.9em;
		display: block;
        padding: 5px 12px;
	}
	#drawer a.liigalinkki img { max-height:18px; }
	#drawer	a img { 
    padding-right: 4px;
vertical-align: middle;}
#drawer	a.toggle-button2 img { 
vertical-align:middle;
padding-right: 8px;
max-height: 22px; }
td.pitka { width:185px; }
td.lyhyt { width:25px; }
	body {
	  width: 100%;
	  height: 100%;
		font-size: 14px/24px;
}
#top_logo { max-width:65%; }
#top_content .logo {
	 margin-top: 5px;
}
.boksicontainer {
  display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 8px;
grid-row-gap: 12px;
}
.nelioboksi1 {
	padding: 4px 8px;
	border-radius: 5px;
	grid-area: 1 / 1 / 2 / 2;
}
.nelioboksi2 {
	padding: 4px 8px;
	border-radius: 5px;
	grid-area: 1 / 2 / 2 / 3;
}
.front .nelioboksi1, .front .nelioboksi2 { font-size: 0.9em; }
.boksicontainer.ottelu {
  display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 15px;
}
.boksicontainer.ottelu .nelioboksi1 {
	padding: 12px 15px;
	border-radius: 5px;
	grid-area: 1 / 1 / 2 / 2;
}
.boksicontainer.ottelu .nelioboksi2 {
	padding: 12px 15px;
	border-radius: 5px;
	grid-area: 2 / 1 / 2 / 2;
}
.nelioboksi1 img, .nelioboksi2 img { max-height: 18px; }
.kolmeboksicontainer {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 8px;
grid-row-gap: 8px;
}
.kolmeboksicontainer div a .jengilogo { width: 20px; height: 20px; margin-right:0px; }
.kolmeboksi1 {
	grid-area: 1 / 1 / 2 / 2;
}
.kolmeboksi2 {
	grid-area: 2 / 1 / 2 / 2;
}
.kolmeboksi3 {
	grid-area: 3 / 1 / 3 / 2;
}
.kolmeboksicontainer.pelaajaboksit { grid-row-gap: 6px; }
.title.ottelu .kotijoukkue img, .title.ottelu .vierasjoukkue img { display: block; margin-bottom: 4px; margin-left:auto; margin-right:auto; }
.title.ottelu .kotijoukkue { grid-area: 1 / 1 / 2 / 2; text-align: center; font-size: 1.5em; display: flex; align-items: center; justify-content: center;}
.title.ottelu .vastaan { grid-area: 1 / 2 / 2 / 3; text-align: center; color: #666; }
.title.ottelu .vierasjoukkue { grid-area: 1 / 3 / 2 / 4; text-align: center; font-size: 1.5em; display: flex; align-items: center; justify-content: center; }
.uusiottelu { padding: 6px 10px; }
h1 { line-height:1.1em; }
p.pieni img {
	margin-right: 4px;
}
img.lippu { margin-right:3px; }
.boksicontainer img.lippu { max-height:16px; }
.huhu.keltainen .tahdet { display:inline-block; }
.tahdet {display: block;}
p .tahdet { display: inline-block; }
.tablerow td, .tablerow th { display: table-row; }
#top_content { padding: 0px 15px; }
#top { height: 35px; }
.mobile_hide { display: none; }
.wide-table-container::after {
  content: '⇆';
  position: absolute;
  left: 10px;
  top: 5px;
  font-size: 14px;
  opacity: 0.6;
}
.poissaolorivi span { float: right; }
#left { display: none; }
#saitti, #top, #top_content, #right, #right_content, #bottom, #bottom_content { width: auto; float: none; }
#saitti { padding: 15px 15px 0px 15px; }
#bottom { padding: 15px 0px; }
table.sarjataulukko, table.vuosiyhteenveto, table.vuosiyhteenveto tr.vuosiyhteen td { font-size: 0.85em; }
table.sarjataulukko img { max-height:18px; }
table.sarjataulukko th, table.sarjataulukko td { padding: 4px 7px 4px 7px; }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 890px) and (-webkit-min-device-pixel-ratio: 1) { 
td.lyhyt { width:20px; }
td.vuosi { font-size: 0.8em; }
.title.ottelu .kotijoukkue, .title.ottelu .vierasjoukkue { font-size: 1.2em; }
.title.ottelu .vastaan .ottelutulos { font-size: 1.6em; }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 890px) and (-webkit-min-device-pixel-ratio: 3) { 
td.lyhyt { width:20px; }
td.vuosi { font-size: 0.8em; }
}