@import url(https://fonts.googleapis.com/css?family=Oswald:400,700|Source+Sans+Pro:400,700);

:root {
  --green: #04A466;
  --dark-green: #007e4e;
  --light-green: #c7efe0;
  --blue: #3071a9;
  --dark-blue: #145791;
  --light-blue: #bce0ff;
  --row-odd-bg-color:#e5e5e5;
}
:root .darkmode{
  --row-odd-bg-color:#000;
  --bg-color:rgb(30, 30, 30);
}

a.liite {
  border-radius: 4px;
  background: #666;
  color: white;
  text-decoration: none;
  padding: 2px 8px;
  margin: 2px 2px 2px 0;
  display: inline-block;
}

a.liite:hover {
  background: #333;
}

P {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

BODY {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  background-color: #ffffff;
  color: #000000;
}
body.darkmode{
  background-color:var(--bg-color);
  color:#fff;
}

A {
  color: #0099cc;
  color: #1974a2;
}
.darkmode A{
  color:#00a9ff;
}

B {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

INPUT, SELECT, TEXTAREA {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

td.topmenuborder {
  background-color: #37498B;
}

.a_disabled {
  color: #333 !important;
}

a.ilmoittaudu {
  text-decoration: none;
  color: #ffffff;
  margin: 4px;
  background: #04821C;
  border: 2px outset #000000;
  padding: 4px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

a.ilmoittaudu:visited {
  color: #FFFFFF
}


label {
  /*
  display: inline-block;
*/
  margin: 5px 0;
  cursor: default;
}

.palkkiomaksatus label {
  margin: 0;
}

#sarjalista label, #aluelista label {
  display: inline-flex;
  align-items: center;
  margin: 2px 0;
  width: 190px;
}

.newform input[type=text] {
  width: 400px;
}

div.frmbg {
  background: #CFE6FF;
}

div.dlg {
  display: none;
}

div.dialog {
  z-index: 12;
  display: none;
  border: 1px solid #333333;
  position: fixed;
  background: #cccccc;
  padding: 10px;
  width: 500px;
  min-height: 100px;
}

dialog {
  border-radius: 8px;
  border: 2px solid #333;
  background: #eee;
  min-width: 300px;
  box-shadow: 0 0 10px 4px rgb(0 0 0 / 50%);
  padding-top: 0;
  overflow-x: hidden;
}

dialog h3 {
  margin: 0 -20px 10px;
  padding: 10px;
  background: #333;
  color: #fff;
}

table.joukkuelista {
  width: 100%;
}

.dialog h1 {
  background-color: #808080;
  color: #ffffff;
  font-weight: bold;
  padding: 0;
  margin: -10px -10px 10px -10px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  padding: 4px;
}

.captionBgr {
  color: #1974a2;
  font-size: 22px;
  font-weight: bold;
}

.taso a:link {
  font-style: normal;
  color: navy
}

.taso a:active {
  font-style: normal;
  color: navy
}

.taso a:hover {
  font-style: normal;
  color: navy
}

.taso a:visited {
  font-style: normal;
  color: navy
}

.valiotsikko {
  background-color: #3399ff;
  color: navy;
  text-align: center;
  font-size: 11pt
}

.valisumma td {
  font-weight: bold;
  border-top: 1px solid #000
}

tr.loppusumma {
  font-weight: bold;
  background: #eee;
}

/*.tasolista  th {background-color: #3399ff; color:navy}*/
.tasolista th {
  text-align: left;
  border-bottom: 1px solid #2063AD;
  color: navy
}

body {
  font-size: 11px;
  overflow-y: scroll;
}

form {
  margin: 0px
}

/*.suunnittelu form{position:absolute}*/
h1 {
  margin: 0px;
  padding-bottom: 4px;
  margin-left: 0px;
  font-size: 12pt;
  text-align: left;
  border-bottom: 1px solid black;
  background-color: #F4F4F4;
  padding-top: 14px;
  padding-left: 8px;
  color: #1B5392;
  font-size: 22px;
  font-weight: bold;
}

.contentinside.fixed {
  padding-top: 50px;
}

h1.fixed {
  position: fixed;
  top: 49px;
  width: 100%;
  background: #fff;
  padding: 0px 20px;
  min-height: 48px;
  z-index: 100;
  border-bottom: 1px solid #ccc;
  margin-left: -10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1.fixed button {
  height: 32px;
  min-width: 40px;
  padding: 0 16px;
  font-size: .875rem;
  border-radius: 4px;

}

h2 {
  color: #1B5392;
  width: 100%;
}

h2.sarjaotsikko {
  text-align: center;
}

h3 {
  font-size: 10pt;

}

.menutaso {
  background-color: #f9f9ac;
  background-color: #2063AD;
  color: #1B5392;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.menutaso a {
  color: white;
}

.menutasos {
  background-color: #3E84D2;
  color: white;
  text-align: center;
  text-decoration: none;
}

.menutasos a {
  color: white;
}


.vkopv td {
  text-align: center;
  font-weight: bold;
}

.tab {
  color: #1B5392;
}

.kalenteri th {
  text-align: center;
}

.kalenteri th a {
  color: white;
}

.kalenteri a {
  color: #04c;
}
.darkmode .kalenteri a{
  color:#8db1f9;
}

.kalenteri td.tapahtuma {
  background-color: #FFD677;
}

div.tapahtuma {
  position: relative;
  top: -20px;
  background-color: #FFD633;
  padding: 5px;
  margin-right: 150px;
}

.kalenteri {
  cursor: default;
  background: white !important;
}
.darkmode .kalenteri{
  background:#333 !important;
}

.kalenteri thead th {
  width: 200px;
}

.kalenteri td {
  text-align: right;
  padding: 2px 2px 0 2px;
  color: #999;
  /*  border:0 !important;*/
  line-height: 16px !important;
}

.estekalenteri td {
  color: #000;
}

.kalenteri a {
  min-height: 0px !important;
  font-size: 13px !important;
  line-height: 16px !important;
  line-height: 16px !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.tasolista caption {
  padding-bottom: 4px;
  margin-left: 0px;
  font-size: 12pt;
  text-align: left;
  color: navy;
  font-weight: bold;
  border-bottom: 1px solid black;
  background-color: #F4F4F4;
  padding-top: 14px;
  padding-left: 8px;
  color: #1974a2;
  font-size: 22px;
  font-weight: bold;
}

.formbox .tasolista caption {
  font-size: 9pt;
  padding-bottom: 0px;
}

/*
.tasolista a {font-size:8pt}
.tasolista a:link {font-size:8pt}
.tasolista a:active {font-size:8pt}
.tasolista a:visited {font-size:8pt}
.tasolista a:hover {font-size:8pt}
*/
.sisalista {
  /*            border:solid 1px #a9a95c;*/
  background-color: white;
  width: 100%;
  padding: 0px;
}

.tuomarivalikko {
  background-color: #ACD0F9;
  width: 100%;
  padding: 0px;
  color: #1B5392;
  vertical-align: middle;
  margin: 0px;
}

.tuomaripalkki {
  border: solid 1px navy;
  background-color: #ACD0F9;
  height: 24px;
  width: 100%;
  padding: 2px;
  vertical-align: middle;
}

.tabactive {
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  background-color: #ACD0F9;
  background-color: #1B5392;
  background-color: #3E84D2;
  font-weight: bold;
  color: #1B5392;
  color: white;
  text-decoration: none;
  height: 15px;
  padding: 0px;
  border-left: 1px solid #1B5392;
  border-bottom: 1px solid #1B5392;
}

.tabinactive {
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  background-color: #ACD0F9;
  background-color: #1B5392;
  background-color: #2063AD;
  color: #1B5392;
  color: white;
  text-decoration: none;
  height: 15px;
  padding: 0px;
  border-left: 1px solid #1B5392;
  border-bottom: 1px solid #1B5392;
}

.tabhover {
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  background-color: #9Cc0e9;
  color: #1B5392;
  text-decoration: none;
  height: 15px;
  padding: 0px;
  border-left: 1px solid #1B5392;
  border-bottom: 1px solid #1B5392;
}

.tasolomake th {
  text-align: left;
  color: navy;
  border: 0
}

.tasolomake caption {
  border-top: solid 1px #a9a95c;
  border-left: solid 1px #a9a95c;
  border-right: solid 1px #a9a95c;
  background-color: #f9f9ac;
}

textarea {
  font-size: 11px;
  border: 1px solid #d4d4d4;
  border-radius: 3px
}

.tasolista th, .ottelulista th {
  text-align: left;
  padding: 0px 2px;
}

.tasolista td, .ottelulista td {
  padding: 0px 2px;
  vertical-align: middle;
}

.numerolista td,.numerolista th {
  padding:0px 8px !important;
  text-align: right !important;
}

.tasolista tr:hover {
  background: #eeeeee;
}

.ottelulista tbody tr:last-child td {
  padding-bottom: 4px
}

.ottelulista tbody tr:first-child td {
  padding-top: 4px
}

.tasolista .valiotsikko:hover, .tasolista tr.valiotsikko:hover.ottelulista .valiotsikko:hover {
  background: none !important
}

.tasolista tbody tr.valiotsikko:hover, .ottelulista tbody tr.valiotsikko:hover, th.valiotsikko:hover {
  background: none !important
}

.ottelulistahover {
  background: #3399ff !important;
  cursor: default
}


.ottelulistatuomari tr:hover {
  background: #dddddd;
}

.pelaajalista td {
  padding: 1px;
  white-space: nowrap;
}

.tasolista input, .ottelulista input {
  padding: 0px 0px;
  margin: 1px;
}

.tasolista th, .ottelulista th {
  border-bottom: 1px solid #2f9cff;
  text-align: left;
  background-color: transparent;
  color: navy
}

.tasolista caption,
.ottelulista caption {
  padding-bottom: 4px;
  margin-left: 0px;
  font-size: 12pt;
  text-align: left;
  color: navy;
  font-weight: bold;
  border-bottom: 1px solid black;
  background-color: #F4F4F4;
  padding-top: 14px;
  padding-left: 8px;
  color: #1974a2;
  font-size: 22px;
  font-weight: bold;
}

table.lohko th {
  text-align: left
}

table.lohko td {
  padding: 0px 0px;
  white-space: nowrap
}

table.lohko input {
  padding: 0px 0px;
  margin: 1px;
}

table.lohko th {
  border-bottom: 1px solid #2f9cff;
  text-align: left;
  background: none;
  color: navy
}

table.lohko caption {
  padding-bottom: 4px;
  margin-left: 0px;
  font-size: 12pt;
  text-align: left;
  color: navy;
  font-weight: bold;
  border-bottom: 1px solid black;
  background-color: #F4F4F4;
  padding-top: 14px;
  padding-left: 8px;
  color: #1974a2;
  font-size: 22px;
  font-weight: bold;
}

.eitaulukko td {
  white-space: normal
}

.torjunnat {
  margin: 20px auto;
}

.torjunnat .center {
  text-align: center;
}

.luovutus {
  text-decoration: line-through;
}

.ottelulistatuomari th {
  text-align: left
}

.ottelulistatuomari td {
  padding: 0px 0px;
}

.ottelulistatuomari input {
  padding: 0px 0px;
}

.ottelulistatuomari th {
  border-bottom: 1px solid #2f9cff;
  text-align: left;
  background-color: white;
  color: navy
}

.ottelulistatuomari caption {
  padding-bottom: 2px;
  padding-left: 4px;
  padding-top: 8px;
  margin-left: 0px;
  font-size: 14px;
  text-align: left;
  font-weight: bold;
  border: 0px;
  background: none;
}

.pelattu td {
  color: #005B00
}

.kaukalopallo .tapahtumat td {
  color: white;
}

.pakollinen {
  color: red
}

.harjoitus, td.harjoitus, .harjoitus a {
  color: #aaa !important;
}

.kenttataulukko th {
  background-color: #3399ff;
  color: navy;
  text-align: center
}

.kenttataulukko td {
  vertical-align: top
}


.luokituslista td {
  text-align: left;
  vertical-align: bottom;
}

th {
  text-align: left
}


.einayta {
  background-color: rgba(255, 255, 0, 0.1);
}

.eijulkaistu {
  background-color: rgba(255, 0, 0, 0.1);
}

.julkaistujoukkueille {
  background-color: rgba(0, 0, 255, 0.1);
}

.ottelulista tr,
.ottelulista td {
  height: 100%;
}

a.varaa {
  position: relative;
  top: 2px;
}

.ob>span {
  border-width: 2px 10px 2px 2px !important;
  border-style: solid !important;
  height: calc(100% - (8px));
  display: flex;
  align-items: center;
  padding-top: 2px;
  padding-bottom: 2px;
}

.ob input:disabled {
  /*  opacity:0.5;*/
}

/*.ob2 {
  background-color: fuchsia;
  color: white !important;
}*/

.ob1>span {
  border-color: rgb(2, 63, 165) !important;
}

.ob2>span {
  border-color: rgb(142, 6, 59) !important;
}

.ob3>span {
  border-color: rgb(240, 185, 141) !important;
}

.ob4>span {
  border-color: rgb(17, 198, 56) !important;
}

.ob5>span {
  border-color: rgb(125, 135, 185) !important;
}

.ob6>span {
  border-color: rgb(211, 63, 106) !important;
}

.ob7>span {
  border-color: rgb(240, 185, 141) !important;
}

.ob8>span {
  border-color: rgb(141, 213, 147) !important;
}

.ob9>span {
  border-color: rgb(190, 193, 212) !important;
}

.ob10>span {
  border-color: rgb(214, 188, 192) !important;
}

.ob11>span {
  border-color: rgb(187, 119, 132) !important;
}

.ob12>span {
  border-color: rgb(74, 111, 227) !important;
}

.ob13>span {
  border-color: rgb(133, 149, 225) !important;
}

.ob14>span {
  border-color: rgb(230, 175, 185) !important;
}

.ob15>span {
  border-color: rgb(224, 123, 145) !important;
}

.ob16>span {
  border-color: rgb(234, 211, 198) !important;
}

.ob17>span {
  border-color: rgb(15, 207, 192) !important;
}

.ob18>span {
  border-color: rgb(156, 222, 214) !important;
}

.ob19>span {
  border-color: rgb(213, 234, 231) !important;
}

.ob20>span {
  border-color: rgb(243, 225, 235) !important;
}

.ob21>span {
  border-color: rgb(246, 196, 225) !important;
}

.ob22>span {
  border-color: rgb(247, 156, 212) !important;
}

.adminmenu {
  position: absolute;
  width: 150px;
}

.adminmenu ul {
  margin-left: 0px;
  padding-left: 15px;
  list-style-type: none
}

div.alamenu {
  position: absolute;
  display: none
}

.alamenu a {
  display: block;
  width: 200px;
}

.tuomari2lista {
  left: 150px;
  display: none;
  top: 0px;
  position: absolute;
}

/*
.help {position:absolute;background-color:blue;color:white;visibility:hidden:z-index:9;width:50px}
*/
.tablist {
  border-right: 1px solid navy;
  background-color: #E1EDFC;
}

li.tablistaktiivi {
  font-weight: bold;
}

a.aktiivikierros {
  font-weight: bold;
}

.tabpage {
  position: absolute;
  left: 159px;
  width: 700px;
  height: 340px;
  border-left: 1px solid navy;
  overflow: auto;
  top: 0px;
}

.tabpage2 {
  top: 0px;
  min-width: 800px;
}

.tuomaripage {
  position: absolute;
  left: 159px;
  width: 700px;
  height: 340px;
  border-left: 1px solid navy;
  overflow: auto;
  top: 0px;
}

.tablist ul {
  margin: 0px;
  padding: 0px;

}

.tablist li {
  list-style-type: none;
  padding: 6px;
  cursor: pointer;
  width: 150px;
  color: #1B5392;
  background-color: #ACD0F9;
  border-top: 1px solid #eeeeee;
  border-left: 1px solid #eeeeee;
  border-bottom: 1px solid #006699;
}

li.tablist2 {
  padding: 0px;
  padding-left: 10px;
  padding-top: 12px;
  cursor: pointer;
  color: #1B5392;
  width: 100px;
  border: none;
  font-weight: normal;

}

.aktiivijoukkue {
  background-color: #ade0b3 !important;
  cursor: pointer;
}

.valitturivi {
  background-color: #;
}

.valittujoukkue {
  background-color: #63bdf0 !important;
  cursor: pointer;
  /*
font-weight:bold;
*/
}

.ryhmaeste {
  border: 1px solid black !important;
}

.omapelieste {
  border: 1px solid green !important;
}

.tehtavaeste {
  border: 1px solid blue !important;
}

.yhteste {
  border: 1px solid red !important;
}

.loma {
  padding: 0px;
  border: 1px solid white;
}

.estetty {
  color: red !important;
}

.hovertext {
  position: absolute;
  top: 100px;
  left: 200px;
  min-height: 40px;
  padding: 4px;
  background-color: silver;
  border: 1px solid black;
}

/* ----- START Cupkaavio ----- */


div.cupkaavio {
  position: relative;
  margin-left: 10px;
}

div.cup {
  position: absolute;
  z-index: 2;
  width: 180px;
  border: 0px solid red;
  border-radius: 5px;
}

th.koticupjoukkue {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

th.vierascupjoukkue {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.cup table {
  -moz-border-radius: 5px 5px 5px 5px;
  -moz-box-shadow: 2px 2px 5px #888888;
  -webkit-border-radius: 5px 5px 5px 5px;
  -webkit-box-shadow: 2px 2px 5px #888888;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 2px 2px 5px #888888;
}

div.cupviivaylosvoittaja {
  position: absolute;
  z-index: 0;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
}

div.cupviivaalasvoittaja {
  position: absolute;
  z-index: 0;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
}

.cup table {
  background-color: #006e75;
  color: white;
  width: 100%;
  overflow: hidden;
}

.cup th {
  background-color: #006e75;
  color: white;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  font-weight: normal;
  border: 0px solid red;
}

th.cupvoittaja {
  /*color:yellow;*/
  font-weight: bold;
}

.cup td {
  background-color: #D8E2E3;
  color: black;
  font-size: 10px;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
}

/* ----- END Cupkaavio ----- */

.tnimi {
  white-space: nowrap;
  overflow: hidden;
}

.a1nimi {
  white-space: nowrap;
  overflow: hidden;
}

.vahvistanut a {
  font-weight: bold;
  color: #009;
}

.vahvistanut a {
  font-weight: bold;
  color: #009;
}

div.turnauspalvelu {
  margin-top: 20px;
  left: 0px;
  right: 20px;
  bottom: 40px;
  height: 18px;
  color: #ffffff;
  padding: 4px;
  text-align: center;
  clear: both;
  margin-bottom: 20px;
}

.mobi_ottelulista tr {
  margin-bottom: 4px;
}

tr.peleja, .tasolista tbody tr.peleja td {
  background-color: #E5FFE5 !important;
}

tr.odd, .tasolista tbody tr.odd td {
  background-color: var(--row-odd-bg-color);
}

.tasolista tbody tr.odd:hover td {
  background: #ddddff;
  ;
}
.darkmode{
.tasolista tbody tr.odd:hover td {
  background: #444 !important;
}
}

.datatable tr.odd {
  background: none;
}

#pellista tr.even, #pellista tr.odd, #pellista thead tr {
  display: table-row;
}

table.lohkotaulukko {
  border-collapse: separate;
  border-spacing: 10px;
  /* *border-collapse: expression('separate', cellSpacing = '10px');*/
}

.lohkotaulukko tr, .lohko tr {
  height: 20px;
}

.cup tr {
  height: auto;
}

div.lohkoclass {
  /*float:left;*/
  display: inline-block;
  width: 300px;
  cursor: pointer;
  background: #eee;
  width: 330px;
  width: auto;
  min-width: 300px;
  margin-right: 10px;
  margin-bottom: 10px;
  vertical-align: top;
}

div.isolohko .lohko_joukkue {
  width: 40%;
}

div.isolohko, div.isolohko table.lohko {
  width: 100%;
}

div.lohkoclass:hover {
  background: #ddd;
}

td.lohkoclass {
  padding: 2px;
  width: 370px;
  white-space: normal;
  text-align: left;
  padding: 5px;
  margin: 4px;
}

.lohkoclass h3 {
  margin-top: 0;
}

.alustava {
  position: fixed;
  top: 40%;
  z-index: 7;
  left: 0cm;
  width: 100%;
  text-align: center;
  color: red;
  opacity: 0.2;
  font-size: 30pt;
  display: none;
}

div.lohkohover {
  background: #F5A55C;
}

table.lohko {
  width: 500px;
}

.formbox table.lohko {
  width: 100%;
}

.lohkotaulukko table.lohko, .sarjaryhma table.lohko {

  width: 440px;
}

td.lohkoclass {
  cursor: pointer;
  background: #eee;
  box-shadow: 2px 2px 5px #888888;
  border-radius: 10px;
}

td.lohkoclass:hover {
  cursor: pointer;
  background: #dddddd;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cccccc), color-stop(1, #e4e4e4));
}

a.etsi {
  background: red;
  color: white;
  padding: 0px 4px;
}


@media screen {
  .print {
    display: none;
  }
}

input.yliikainen {
  color: red;
}

.peruttu td {
  text-decoration: line-through;
}


div.avoin {
  border: 1px dashed red;
}

h4 {
  color: red;
  margin-bottom: 0px;
  font-weight: normal;
}

th h4 {
  margin: 0;
}

.arkistoitu {
  background: #ddd;
}

h5 {
  margin-top: 4px;
  margin-bottom: 4px;
}


div.LabeledMarker_markerLabel {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  text-transform: uppercase;
}

td.este {
  background: #000000;
  color: #ffffff;
}

td.tehtava {
  background: red;
}

td.tuntialku {
  border-left: 1px solid #000000;
}

#tabmenu {
  -moz-box-shadow: 0px 2px 8px #888888;
  -webkit-box-shadow: 0px 2px 5px #888888;
  box-shadow: 0px 2px 5px #888888;
  height: 14px;
  margin-bottom: 10px;
}

#frmTaso a.toiminto {
  margin-top: 4px;
  padding: 2px;
  color: #11748F;
  margin-bottom: 5px;
}

div.cupgroup {
  position: absolute;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #cccccc;
  -moz-box-shadow: 2px 2px 3px #555555;
  -webkit-box-shadow: 2px 2px 3px #555555;
  box-shadow: 2px 2px 5px #555555;
  /*
border-bottom-right-radius:0px;
border-bottom-left-radius: 0px;
*/
}

div.cupgrouptyhja {
  box-shadow: 2px 3px 3px #777777;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;

  margin-top: 3px;
  padding-top: 8px;

}

tr.vanha {
  display: none
}

#ajattomatottelut {
  float: left;
  /*    margin-top:40px;*/
}

input[readonly], textarea[readonly] {
  background: #ddd !important;
  color: #333333;
  border: 1px solid #777
}

body:not('.vue') input[type='text'],
body:not('.vue') input[type='password'] {
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  padding: 2px;
}

body:not('.vue') input[type='text']:focus,
body:not('.vue') input[type='password']:focus {
  outline-color: #63A800;
  /*background:#D0F6CF;border:1px solid #333333;padding:2px 1px*/
}

select:focus {
  background: #D0F6CF
}

div.tasomenu {
  position: fixed;
  width: 100%;
  padding: 0;
  background-color: #e8e8e8;
  background-image: -moz-linear-gradient(100% 100% 90deg, #c0c0c0, #f0f0f0);
  background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#c0c0c0));
  color: #000000;
  z-index: 11;
  -moz-box-shadow: 2px 2px 5px #888888;
  box-shadow: 2px 2px 5px #888888;
}

div#tasomenu {
  position: fixed;
  height: 18px;
  top: 0px;
  left: 0px;
  padding-right: 14px;
}


.tasomenu span la, su {
  padding: 2px 4px;
}

div.tasomenu2 {
  float: left;
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #999999;
  height: 14px;
  padding: 2px 0;

}

.tasomenu #tasomenuala {
  position: fixed;
  bottom: 30px;
  width: 150px;
  background: #ddd;
  text-align: center;
  min-height: 100px;
}

#tasovalikko {
  position: absolute;
  overflow-y: auto;
  bottom: 180px;
  top: 0px;
  overflow-x: hidden;
  width: 100%;
}
.seurapomo #tasovalikko {
  bottom:200px;
}

.tasomenu2 span {
  cursor: pointer;
  padding: 4px 8px 3px;
}

div.tasomenu2ala {
  display: none;
  background: #cccccc;
  min-width: 250px;
  margin-top: 3px;
  box-shadow: 2px 2px 5px #888888;
  -webkit-box-shadow: 1px 1px 4px #333333;
  border: 1px solid #999;
}


.tasomenu2ala a {
  text-decoration: none;
  color: #000000;
  display: block;
  white-space: nowrap;
  background-color: #cccccc;
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/*
.tasomenu2:hover a{
opacity:1;
line-height:12px;
height:12px;
 -webkit-transition: height 0.5s; 

}
*/

.tasomenu2ala a:hover {
  background-color: #333333;
  background-image: -moz-linear-gradient(100% 100% 90deg, #111111, #555555);
  background: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#111111));
  color: #cccccc;
  text-decoration: none;
}

.tasomenu span.active {
  background-color: #333\9;
  background-image: -moz-linear-gradient(100% 100% 90deg, #111111, #555555);
  background: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#111111));
  color: #cccccc;
}

.kalenteri a {
  padding: 0;
}

.poytakirja input[size='1'] {
  width: 18px;
}

.datatable th {
  cursor: pointer;
}

.datatable .valiotsikko th {
  cursor: default;
}

span.tv {
  cursor: pointer;
}

.ottelulista .osaottelu {
  padding-top: 6px;
  font-weight: bold;
}

.tarvittaessa {
  color: #999999;
}

.tarvittaessaensimmainen {
  /*
border-top:1px solid #cccccc;
*/
}

table.ilmoittautuminen {
  background: #D8EBEF;

}

.ilmoittautuminen h4 {
  padding-left: 10px;
}

.ilmoittautuminen td, .ilmoittautuminen th {
  background: #D8EBEF;
  padding-left: 8px;
  padding-right: 8px;
}

.ilmoittautuminen .newsection th {
  padding-top: 6px;
  background: transparent;
}

.ilmoittautuneet caption {
  text-align: left;
  font-size: 10pt;
  font-weight: bold;
  margin-top: 12px;
  min-width: 150px;
}

.tyot td {
  border: 1px solid #444444;
  width: 20px;
}

.tyoplus {
  border: 1px solid green;
  padding: 0 2px;
  cursor: pointer;
}

.tyot th {
  width: 20px;
}

.tyot td.toissa {
  background: #00bb00;
}

.tyot td.muualla {
  background: #dddddd;
}

.tyot td.toissa.muualla {
  background: #bb0000;
}


.tyot td.super {
  background: #00ff00;
}

span.pv {
  cursor: pointer;
  border: 1px solid #333333;
  padding: 2px 4px;
  margin: 2px;
}

table.lomake {
  border-spacing: 0;
  border-collapse: collapse
}

.lomake td {
  border: 1px solid #777777;
  padding: 2px;
}

.lomakeots {
  font-size: 7pt;
  font-weight: bold;
}

h3.maa {
  text-align: center;
}

h3.maa img {
  box-shadow: 1px 1px 3px 1px #999;
}

table.maa {
  /*border:1px solid #aaaaaa;*/
  padding: 0px 10px;
  background: #eeeeee;
  box-shadow: 2px 2px 5px #888888;
  border-radius: 5px;
}

table.tulostaulu {
  border-collapse: collapse;
  /*
margin-top:100px;
*/
}

.tulostaulu th, .tulostaulu td {
  font-size: 10pt;
  text-align: center;
  width: 50pt;
}

.tulostaulu th {
  padding-bottom: 10px;
  text-align: right;
  white-space: nowrap;
  padding-right: 10px;
}

.tulostaulu td {
  border: 1px solid #999999;
}

.tulostaulu th.ylanimi {
  transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  white-space: nowrap;
  text-align: left;
}

.jatkosivu {
  page-break-before: always;
  margin-top: 3cm;
}

td.itse {
  background: #999999;
}

.sarjaryhma {
  list-style-type: none;
}

ul.sarjaryhma li {
  display: inline;
}

div.uusisivu {
  border-top: 1px dashed red;
  page-break-before: always
}

div.uusisivu:first-child {
  page-break-before: auto;
}

.teamphoto {
  max-width: 600px
}

.datatable td {
  overflow: hidden;
  white-space: nowrap;
}

div.tunnit {
  width: 36px;
  float: left;
  background-color: #eeeeee;
  text-align: right;
  position: absolute;
  padding-right: 4px;

}

.kenttaotsikot {
  background: #eeeeee;
  overflow: hidden;
}

.awesome {
  white-space: nowrap;
}

.awesome:disabled, span.awesome:disabled {
  color: #333;
}

.awesome:disabled:hover, span.awesome:hover, span.awesome.active {
  background-color: #2DAEBF;
  color: #333;
  text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.25);
}

.awesome:active:disabled, span.awesome {
  top: 0px;
}

.awesome, a.awesome {
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  padding: 3px 10px 4px;
  position: relative;
  text-decoration: none;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  outline: 0;
  border-style: hidden;
  margin-right: 5px;
  font-weight: normal;
  margin: 0px 5px 4px 0px;
  font-size: 11px;
  line-height: 18px;
  background: rgb(123, 204, 255);
  /* Old browsers */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(123, 204, 255, 1)), color-stop(7%, rgba(82, 137, 253, 1)), color-stop(100%, rgba(56, 93, 173, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(123, 204, 255, 1) 0%, rgba(82, 137, 253, 1) 10%, rgba(56, 93, 173, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(123, 204, 255, 1) 0%, rgba(82, 137, 253, 1) 7%, rgba(56, 93, 173, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(123, 204, 255, 1) 0%, rgba(82, 137, 253, 1) 7%, rgba(56, 93, 173, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(123, 204, 255, 1) 0%, rgba(82, 137, 253, 1) 7%, rgba(56, 93, 173, 1) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7bccff', endColorstr='#385dad', GradientType=0);
  /* IE6-9 */
  vertical-align: top;
}
a.aktiivisivu{
  background:none !important;
  border-bottom:2px solid #3071a9 !important;
  color:#3071a9 !important;
  /*border:0 !important;*/
  box-shadow:none !important;
}


.extranet .v-btn:not(.v-btn--variant-plain) {
  background: #04A466;
  color: white;
}

.seurapomo .v-btn:not(.v-btn--variant-plain) {
  background: #3071a9;
  color: white;
}

.extranet .v-tabs .v-btn,
.seurapomo .v-tabs .v-btn {
  background: none;
  color: #333;
}

button.awesome, input.awesome, a.awesome, .awesome {
  padding-top: 4px;
  padding-bottom: 4px;
  vertical-align: top;
  text-decoration: none !important;
}

.miniawesome, a.miniawesome, button.miniawesome {
  padding: 0px 10px;
}


@media(hover: hover)
{
  .awesome:hover {
    background: rgb(64, 151, 251);
    /*
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(103,174,255,1)), color-stop(7%,rgba(62,117,253,1)), color-stop(100%,rgba(36,73,153,1))); 
  background: -webkit-linear-gradient(top,  rgba(103,174,255,1) 0%,rgba(62,117,253,1) 10%,rgba(36,73,153,1) 100%);
  background: -o-linear-gradient(top,  rgba(103,174,255,1) 0%,rgba(62,117,253,1) 7%,rgba(36,73,153,1) 100%); 
  background: -ms-linear-gradient(top,  rgba(103,174,255,1) 0%,rgba(62,117,253,1) 7%,rgba(36,73,153,1) 100%);
  background: linear-gradient(to bottom,  rgba(103,174,255,1) 0%,rgba(62,117,253,1) 7%,rgba(36,73,153,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7bccff', endColorstr='#385dad',GradientType=0 );
  */

  }
}

.awesome:active {
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);

}

.ilmoittautuneet {
  background: #eee;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #888888;
  padding: 10px;
  border: solid 1px #ccc;
}

.ilmoittautuneet td {
  padding: 6px 4px;
  border-top: solid 1px #ccc;
  background: #fafafa;
}

td.formgroup {
  border: 1px solid #0808aa;
}

.bigtext {
  font-size: 16pt !important;
  text-align: center;
}

#harmaus {
  background-color: #ffffff;
  opacity: 1;
}

table.pelaajatable {
  padding: 2px;
}

.popuphelp {
  width: 250px;
  box-shadow: 3px 3px 3px #aaa;
  z-index: 2;
  position: absolute;
  background: yellow;
  color: #333333;
  padding: 6px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

#simplemenu li ul {
  width: 16em;
}

.maalitykki {
  font-weight: bold;
}

#aikaeste input {

  margin: 1px;
}

iframe.vanhakausi {
  background: #ffffff;
  background-color: rgba(255, 255, 255, 0.7);
}

td.vko {
  background: #cccccc;
  text-align: center;
}
.darkmode td.vko{
  background:#111;
}

#majoitukset table {}

#languages img, #language img {
  float: right;
  margin-right: 10px;
  width: 25px;
}

span.editparagraph {
  float: right;
  cursor: pointer;
}

textarea.normalparagraph {
  width: 100%;
  height: auto;
  border: 0;
  background: none;
}

div.tooltip, div.ui-tooltip {
  background: #444;
  opacity: 1;
  border: 0px;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 2px;
  box-shadow: 1px 1px 3px #333333;
  min-width: 150px;
  z-index: 100;
  max-width: 300px;
}

.ottelusuunnittelu div.ui-tooltip div.joukkueet {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ottelusuunnittelu div.ui-tooltip div span {
  flex-grow: 1;
  text-align: center;
  padding: 2px;
  margin-bottom: 4px;
}

.hashelp {
  cursor: help;
  font-weight: bold;
  color: #444;
}

.tabi {
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 1s;
  transition-property: opacity;
  transition-duration: 2s;
  transition-delay: 1s;
  padding-top: 10px;
}

table.menu {
  border-spacing: 0px;
}

.sarjanmaalitilasto {
  float: right;
}

.sarjanmaalitilasto table {
  width: 400px;
}

.sarjanmaalitilasto h3 {
  margin-top: 0;
}

.ottelulista {
  cursor: default;
}

.lohkonottelut {
  transition: all 0.4s;
}

.lohkonottelut td {
  text-align: left;
}

.lohkonottelut .col_pvmsiisti {
  width: 15%;
}

.lohkonottelut .col_tulos {
  width: 25%;
}

.lohkonottelut .col_kotisiisti, .lohkonottelut .col_vierassiisti {
  width: 30%;
}

.lohkonottelut .col_ottelu, .lohkonottelut .col_kenttanimi, .lohkonottelut .col_katsojia, .lohkonottelut .erapisteet {
  display: none;
}

.col_kenttaalue2nimi {
  width: 50px;
}

.lohkonottelut .col_klosiisti {
  width: 20px !important;
}

.editicon:hover {
  color: red;
}

.edit {
  background: red;
}

.pieniotsikko {
  font-size: 9pt;
  float: right;
  margin-left: 6px;
}

.ottelulista caption a.pieniotsikko {
  color: navy;
}

#jlogin {
  width: auto;
  position: absolute;
  border-radius: 15px;
  margin-top: 30px;
  left: 50%;
  margin-left: -150px;
  text-align: center;
  /*background-color:#30c3fD;*/
  padding: 10px;

  border-radius: 10px;
  padding: 10px;
  box-shadow: inset 0px 0px 4px #777;
  background: #f3f3f3;
  border: 1px solid #aaa;
}



#facebox, .fdialog {
  z-index: 1001;
  position: fixed;
  top: 50%;

  margin-top: -10px;
  /* overlay is hidden before loading */
  display: none;

  /* standard decorations */
  width: 500px;
  box-shadow: 0px 0px 10px #666;
  left: 50%;
  margin-left: -250px;

  /* for modern browsers use semi-transparent color on the border. nice! 
    border:10px solid rgba(82, 82, 82, 0.698);
    */

  /* hot CSS3 features for mozilla and webkit-based browsers (rounded borders) */
  /*
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
*/
  min-height: 200px;
  padding: 10px;
  border: 1px solid #3B5998;
  border: 1px solid #333333;
  background-color: #fff;
  color: #333333;
}

#facebox h2, .fdialog h2 {
  margin: -11px;
  margin-bottom: 0px;
  color: #fff;
  /*
    border-top-right-radius:8px;
    border-top-left-radius:8px;
*/
  background-color: #6D84B4;
  padding: 5px 10px;
  border: 1px solid #3B5998;
  font-size: 14px;
  background: -webkit-gradient(linear, left top, left bottom, from(#8DA4C4), to(#5D74A4));
  color: #eee;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.4);
}

.modal {
  background-color: #fff;
  display: none;
  width: 350px;
  padding: 15px;
  text-align: left;
  border: 2px solid #333;

  opacity: 0.8;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-box-shadow: 0 0 50px #ccc;
  -webkit-box-shadow: 0 0 50px #ccc;
}

.modal h2 {
  margin: 0px;
  padding: 10px 0 10px 45px;
  border-bottom: 1px solid #333;
  font-size: 20px;
}

.suunnittelu #kieli {
  display: none;
}

.fb-like {
  float: right
}

.livelogo img {
  max-width: 50px;
  max-height: 50px;
}

#logo_overlay {
  position: absolute;
  z-index: 10;
}

td.joukkue {
  padding-top: 40px;
  padding-bottom: 60px;
}

.joukkue a {
  /*
position:absolute;
width:130px;
padding-top:10px;height:60px;
*/
}

.joukkue a:hover {
  background: #cccccc;
  border-radius: 5px;
  box-shadow: inset 0px 0px 85px rgba(0, 0, 0, .5);
  -webkit-box-shadow: inset 0px 0px 85px rgba(0, 0, 0, .5);
  -moz-box-shadow: inset 0px 0px 85px rgba(0, 0, 0, .5);
  color: #ffffff;
  text-decoration: none;
}

.ottelujoukkue {
  text-align: center;
  font-weight: bold;
  width: 40%;
  font-size: 20px;
  padding: 10px 0px
}

.ottelujoukkue:hover {
  background: transparent;
}

.ottelujoukkue a:hover {
  text-decoration: none;
}

.pelikiellot {
  background: #eee;
  border-radius: 10px;
  padding: 10px;
  width: 100%;
}

.pelikiellot tr:hover {
  background: #cccccc;
}

.pelikiellot th {
  border-bottom: 1px solid #000;
}

.pelikiellot td {
  vertical-align: top;
}

.eratitle {
  padding-bottom: 12px;
  color: yellow;
}

.kasipallo h3 {
  display: none;
}

.liveottelu {
  margin-top: 2px;
  text-align: center;
  margin-bottom: 15px;
  position: static;
  width: 640px;
  height: 40px;
  height: auto;
  color: #dddddd;
  background: #495D71;
  background: rgba(4, 120, 169, 0.5);
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 0px 5px;
  border-radius: 10px;
  box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.4);
  margin-left: -295px;

  margin-left: 0px;
  display: inline-block;
}

.jaapallo .livepvm {
  color: #000;
}

.jaapallo .liveottelu {
  background: #426ECB;
  background: -moz-linear-gradient(top, rgba(123, 204, 255, 1) 0%, rgba(82, 137, 253, 1) 7%, rgba(56, 93, 173, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(123, 204, 255, 1)), color-stop(7%, rgba(82, 137, 253, 1)), color-stop(100%, rgba(56, 93, 173, 1)));
  background: -webkit-linear-gradient(top, rgba(123, 204, 255, 1) 0%, rgba(82, 137, 253, 1) 10%, rgba(56, 93, 173, 1) 100%);
  background: -o-linear-gradient(top, rgba(123, 204, 255, 1) 0%, rgba(82, 137, 253, 1) 7%, rgba(56, 93, 173, 1) 100%);
  background: -ms-linear-gradient(top, rgba(123, 204, 255, 1) 0%, rgba(82, 137, 253, 1) 7%, rgba(56, 93, 173, 1) 100%);
  background: linear-gradient(to bottom, rgba(123, 204, 255, 1) 0%, rgba(82, 137, 253, 1) 7%, rgba(56, 93, 173, 1) 100%);
  box-shadow: 0px 0px 8px 2px #888;
}

.kasipallo .liveottelu {
  width: 570px;
}

.iframe .kasipallo .liveottelu {
  width: 100%;
}

.liveottelu td {
  color: #ffffff;
  font-size: 12px;
}

.kasipallo .liveottelu, .jalkapalloBAK .liveottelu {
  background: #495D71;
}

.kasipallo h3, .jalkapallo h3 {
  color: #000000;
}

.livejoukkue {
  background: #1F74A7;
  background: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5BBFFA), to(#025589));
  background-image: -moz-linear-gradient(top, rgba(91, 191, 250, 0.7), rgba(2, 85, 137, 0.7));
  width: 175px;
  position: relative;
  display: inline-block;
  padding: 8px 10px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  color: white;
  text-shadow: rgba(0, 0, 0, 0.5) -1px -1px 0;
  vertical-align: middle;
  font-weight: bold;
  _background: #1F74A7;
}

.liverivi>.koti span {
  left: 35px;
}

.liverivi>.vieras span {
  left: -35px;
}

.kasipallo .livejoukkue {
  width: 180px;
}

.livejoukkue img {
  margin-top: -4px;
}

.livemaali {
  background: #013978;
  position: absolute;
  width: 25px;
  background: -moz-linear-gradient(top, rgba(1, 34, 105, 1), rgba(2, 85, 137, 1));
  background: -webkit-linear-gradient(rgba(1, 34, 105, 1), rgba(2, 85, 137, 1));
  padding: 8px 10px;
  margin-top: 0px;
  text-align: center;
  font-weight: bold;
  -webkit-border-radius: 10px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  color: #ffffff;
  left: 50%;
  /*
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
*/
}

.ringette .livemaali {}

.livemaalikoti {
  margin-left: -100px;
}

.kasipallo .livemaalikoti {
  margin-left: -100px;
}

.livemaalivieras {
  margin-left: 40px;
  z-index: 2;
}

.kasipallo .livemaalivieras {
  margin-left: 40px;
}

.liveaika {
  background: #1F74A7;
  background: -webkit-gradient(linear, left top, left bottom, from(#5BBFFA), to(#025589));
  background: -moz-linear-gradient(top, rgba(91, 191, 250, 0.7), rgba(2, 85, 137, 0.7));
  width: 55px;
  position: relative;
  left: 32px;
  display: inline-block;
  padding: 1px 10px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  color: white;
  text-shadow: rgba(0, 0, 0, 0.5) -1px -1px 0;
  vertical-align: middle;
  font-weight: bold;
  cursor: pointer;
  margin-left: -10px;
}

.liveaika:hover {
  box-shadow: 0px 0px 10px #FAA;
}

.liveaika a {
  color: #ffffff;
}

.yksirivi {
  padding-top: 8px;
  padding-bottom: 8px;
}

.tauko {
  background: #D49B3D;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(250, 191, 91, 1)), to(rgba(137, 85, 2, 1)));
  background: -moz-linear-gradient(top, rgba(250, 191, 91, 1), rgba(137, 85, 2, 1));
}

.pelataan {
  background: #36A483;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(91, 250, 191, 0.7)), to(rgba(2, 137, 85, 0.7)));
  background: -moz-linear-gradient(top, rgba(91, 250, 191, 0.7), rgba(2, 137, 85, 0.7));
}

.loppunut {
  background: #C93300;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(250, 91, 0, 1)), to(rgba(137, 0, 0, 1)));
  background: -moz-linear-gradient(top, rgba(250, 91, 0, 1), rgba(137, 0, 0, 1));
  padding-top: 8px;
  padding-bottom: 8px;
}

.liverivi>.koti {
  text-align: left;
  margin-left: -10px;
}

.liverivi>.vieras {
  text-align: right;
  margin-left: 40px;
}

.ringette .vieras {
  margin-left: 50px;
}

.liveottelu img {
  position: absolute;
  max-width: 20px;
  margin-top: auto;
  margin-bottom: auto;
}

.livestream img {
  max-width: 200px;
}

.hb .livestream img {
  margin-left: -60px;
}

h3 {
  color: #777;
  font-weight: normal;
}

.tapahtumat {
  margin-top: 4px;
  height: 0px;
  overflow: hidden;

  height: 220px;
  overflow-y: scroll;

  -moz-transition: height 0.5s;
  -webkit-transition: height 0.5s;
}

.ringette .tapahtumat {
  height: 0px;
  overflow-y: hidden;
}

.tapahtumat td {
  text-align: left;
}

.tapahtumat th {
  text-align: center;
}

.avaatapahtumat {
  margin-left: 10px;
  cursor: pointer;
  position: relative;
  top: 2px;
  font-weight: bold;
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 0.5em;
}

a:active {
  outline: none;
  -moz-outline-style: none;
}

a:focus {
  -moz-outline-style: none;
  outline: none;
}

.leftmenu li {
  display: inline-block;
}

.sarjatvasemmalla ul.leftmenu {
  float: left;
  width: 150px;
  /*margin: 10px;*/
  display: block;
  padding: 0;
}

.sarjatvasemmalla .leftmenu li {
  display: block;
  white-space: nowrap;
}

.sarjatvasemmalla .leftmenu li.sarjaryhma {
  display: none;
}

.refresh {
  position: absolute;
  right: 0;
}

#msg {
  position: fixed;
  top: 0px;
  cursor: help;
  margin-left: -200px;
  margin-right: auto;
  padding: 5px 10px 0px 10px;
  background-color: #c44;
  color: white;
  border-radius: 0px 0px 10px 10px;
  z-index: 1221;
  width: 400px;
  text-align: center;
  box-shadow: 1px 1px 5px 0px #333;
  left: 50%;
  transition: all 0.4s;
  overflow: hidden;
  height: 0px;
}

#msg div {
  bottom: 5px;
  width: 95%;
  text-align: center;
  position: absolute;
}

#msg:hover {
  height: 60px;
}

.paivadiv {
  position: absolute;
}



/* jQueryTools DateInput */
/* For the details, see:
   http://flowplayer.org/tools/dateinput/index.html#skinning */

/* the input field */
.date {
  border: 1px solid #ccc;
  font-size: 18px;
  padding: 2px 4px;
  text-align: center;
  width: 80px;
  cursor: pointer;
  -moz-box-shadow: 0 0 10px #eee inset;
  -webkit-box-shadow: 0 0 10px #eee inset;
  color: red;
}

/* calendar root element */
#calroot {
  /* place on top of other elements. set a higher value if nessessary */
  z-index: 10000;

  margin-top: -1px;
  width: 198px;
  padding: 2px;
  background-color: #fff;
  font-size: 11px;
  border: 1px solid #ccc;

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

  -moz-box-shadow: 0 0 15px #666;
  -webkit-box-shadow: 0 0 15px #666;
}

/* head. contains title, prev/next month controls and possible month/year selectors */
#calhead {
  padding: 2px 0;
  height: 22px;
}

#caltitle {
  font-size: 14px;
  color: #0150D1;
  float: left;
  text-align: center;
  width: 155px;
  line-height: 20px;
  text-shadow: 0 1px 0 #ddd;
}

#calnext, #calprev {
  display: block;
  width: 20px;
  height: 20px;
  background: transparent url(/taso/img/prev.gif) no-repeat scroll center center;
  float: left;
  cursor: pointer;
}

#calnext {
  background-image: url(/taso/img/next.gif);
  float: right;
}

#calprev.caldisabled, #calnext.caldisabled {
  visibility: hidden;
}

/* year/month selector */
#caltitle select {
  font-size: 10px;
}

/* names of the days */
#caldays {
  height: 14px;
  border-bottom: 1px solid #ddd;
}

#caldays span {
  display: block;
  float: left;
  width: 28px;
  text-align: center;
}

/* container for weeks */
#calweeks {
  background-color: #fff;
  margin-top: 4px;
}

/* single week */
.calweek {
  clear: left;
  height: 22px;
}

/* single day */
.calweek a {
  display: block;
  float: left;
  width: 27px;
  height: 20px;
  text-decoration: none;
  font-size: 11px;
  margin-left: 1px;
  text-align: center;
  line-height: 20px;
  color: #666;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

/* different states */
.calweek a:hover, .calfocus {
  background-color: #ddd;
}

/* sunday */
a.calsun {
  color: red;
}

/* offmonth day */
a.caloff {
  color: #ccc;
}

a.caloff:hover {
  background-color: rgb(245, 245, 250);
}


/* unselecteble day */
a.caldisabled {
  background-color: #efefef !important;
  color: #ccc !important;
  cursor: default;
}

/* current day */
#calcurrent {
  background-color: #498CE2;
  color: #fff;
}

/* today */
#caltoday {
  background-color: #333;
  color: #fff;
}

input.pvm {
  border-width: 1px;
  border-style: solid;
  outline: 0;
  text-align: center;
  font-size: 12pt;
  padding: 4px 0px 4px 8px;
  cursor: pointer;
  text-shadow: 0 1px 0 white;
  border-color: #ccc #ccc #aaa;
  background-color: #e0e0e0;
  -moz-box-shadow: inset 0 0 1px #fff;
  -ms-box-shadow: inset 0 0 1px #fff;
  -webkit-box-shadow: inset 0 0 1px white;
  box-shadow: inset 0 0 1px white;
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#fffafafa, EndColorStr=#ffdcdcdc);
  background-image: -moz-linear-gradient(top, #FAFAFA 0, gainsboro 100%);
  background-image: -ms-linear-gradient(top, #FAFAFA 0, gainsboro 100%);
  background-image: -o-linear-gradient(top, #FAFAFA 0, gainsboro 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FAFAFA), color-stop(100%, gainsboro));
  background-image: -webkit-linear-gradient(top, #FAFAFA 0, gainsboro 100%);
  background-image: linear-gradient(to bottom, #FAFAFA 0, gainsboro 100%);
  width: 130px;
  border-radius: 3px;
}

input.pvm:hover {
  border-color: #aaa #aaa #999 #aaa;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px 0px, #fff 0px 0px 4px 0px inset;
}

a.pvm {
  font-size: 10pt;
}

table.datatable thead th.sorting,
table.datatable thead th.sorting_asc,
table.datatable thead th.sorting_desc {
  background-image: url(/taso/js/jq/bg.gif);
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
}

table.datatable thead th.sorting_asc {
  background-image: url(/taso/js/jq/asc.gif);
}

table.datatable thead th.sorting_desc {
  background-image: url(/taso/js/jq/desc.gif);
}

#korjaakello {
  text-align: center;
}

.klonumero {
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 30px;
  font-size: 26pt;
}

.klonumero input {
  background: #cccccc;
  height: 40px;
  width: 30px;
  text-align: center;
  font-size: 26pt;
}

.klonumero .ylos, .klonumero .alas {
  border: 1px solid #ccc;
  border-bottom: 1px solid #aaa;
  border-radius: 3px;
  box-shadow: 0px 0px 5px 1px #ccc;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 30px;
  cursor: pointer;
}

.klonumero .ylos {
  background-image: url(/taso/js/jq/desc.gif);
}

.klonumero .alas {
  background-image: url(/taso/js/jq/asc.gif);
}

.nextlive_match {
  float: left;
}

.formbox {
  /*border:1px solid #777;*/
  border-radius: 6px;
  width: 405px;
  min-height: 40px;
  margin: 20px 10px 10px 0px;
  padding: 10px;
  box-shadow: inset 0px 0px 4px #777;
  display: inline-block;
  background: #f3f3f3;
  border: 1px solid #aaa;
  vertical-align: top;
}

.darkmode .formbox{
  background:rgb(30, 30, 30);
  color:#fff;  
}

.darkmode .select2-container--default .select2-selection--single{
  background:#333;
  color:#fff !important;
}


.bigformbox {
  width: 98%;
  display: table;
}

.boxbox{
  padding: 0 10px;
  border-radius: 6px;
  box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

.fullformbox {
  width: 98% !important;
  overflow-x: auto;
}

.formfloat {
  width: 350px;
  float: left;
  margin-right: 10px;
}

.formfloat textarea {
  width: 100%;
  height: 100px;
}

.formbox h3 {
  position: relative;
  margin-top: -28px;
  margin-left: 10px;
  margin-bottom: 10px;
  color: #2B3ABB;
  text-shadow: 1px 1px 2px #bbb;
}

.formbox h3 a {
  color: #fff;
}

.formbuttons {
  float: left;
  white-space: normal;
  margin-right: 60px;
  margin-top: -18px;
}

.subformbuttons {
  position: absolute;
  text-align: right;
  width: auto;
  margin-top: -4px;
  text-align: right;
}



/* root element for tabs  */
ul.css-tabs {
  margin: 0 !important;
  padding: 0;
  height: 30px;
  border-bottom: 1px solid #aaa;
  margin-right: 5px !important;
}

/* single tab */
ul.css-tabs li {
  float: left;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

/* link inside the tab. uses a background image */
ul.css-tabs a {
  float: left;
  font-size: 13px;
  display: block;
  padding: 5px 15px;
  text-decoration: none;
  border: 1px solid #aaa;
  border-bottom: 0px;
  height: 18px;
  background-color: #ddd;
  color: #777;
  margin-right: 2px;
  position: relative;
  top: 1px;
  outline: 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

.darkmode ul.css-tabs a {
  background:rgb(30, 30, 30);
  color:#ddd;
}

ul.huonetabs a {
  height: 9px;
}

ul.huonetabs a.current {
  height: 10px;
}

ul.css-tabs a:hover {
  background-color: #F7F7F7;
  color: #333;
}

/* selected tab */
ul.css-tabs a.current {
  background-color: #f3f3f3;
  /*
    border-bottom:1px solid #f3f3f3;
*/
  color: #000;
  cursor: default;
}


/* tab pane */
.css-panes div.tabi {
  /*    display:none;*/
  border: 1px solid #aaa;
  border-width: 1px;
  margin-top: -1px;
  min-height: 150px;
  padding: 15px 20px;
  background-color: #f3f3f3;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  /*width:100%;*/
}

.darkmode .css-panes div.tabi {
  background-color:#333;
  color:#fff;
}

.ottelusuunnittelu .main {
  background: none;
}

.poytakirjatapahtumat {
  box-shadow: inset 1px 1px 4px #333333;
  box-shadow: none;
  padding: 4px;
  border-radius: 4px;
  max-width: 600px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.poytakirjatapahtumat>table,
.poytakirjatapahtumat>div {
  padding: 4px;
  box-shadow: inset 1px 1px 4px #333333;
}

.poytakirjatapahtumat caption {
  font-size: 16px;
}

.poytakirjatapahtumat td {
  text-align: left;
  line-height: 1.2em;
}

.poytakirjatapahtumat th {
  text-align: center;
  color: blue;
}

.poytakirjatapahtumat tr:nth-child(even) {
  background-color: #ccc;
}

.poytakirjatapahtumat tr:hover {
  background-color: rgb(64, 151, 251);
  cursor: pointer;
  color: #000;
}

.poytakirjatapahtumat tr.era {
  background: none;
  cursor: default;
}

.calendar false {
  color: #aaa;
}

#sarjatable {
  width: 100%;
}

#sarjatable td {
  height: 2em;
}

.login {
  /*width:300px;*/
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

button.livebtn{
min-width:160px;
font-size:15px;
padding-left:4px;
padding-right:4px;
}
#lopetabuttonit button.livebtn{
font-size:11px;
}

button.livebtn, a.livebtn {
  padding-top: 1em;
  line-height: 1em;
  padding-bottom: 1em;
  background: #55a;
  white-space: normal;
}
@media(hover: hover)
{
  button.livebtn:hover{
    opacity:0.9;
  }
  button.livebtnmaali:hover {
    background: #00d900;
  }
}

button.livebtntilasto {
  background: #999;
  width: 80px;
  height: 4em;
}

button.livebtnlaukaus {
  background: #555;
}

button.livebtnmaali {
  background: #090;
}


ul.tilaa_tabs {
  margin-top: 10px;
  display: block;
  list-style: none;
  margin: 0 !important;
  padding: 0;
  border-bottom: 1px solid #666;
  height: 20px;
}

ul.tilaa_tabs li {
  background: #ccc;
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #666;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  cursor: pointer;
}

ul.tilaa_tabs li.current {
  background: #eee;
  border-bottom: 0;
  padding-bottom: 4px;
}

.tilaa_panes {
  background: #eee;
  padding: 10px;
  min-height: 200px;
  border: 1px solid #666;
  border-top: 0;
}

#lohkomenu span.menutasos,
#lohkomenu span.menutaso,
.poolitaso>span {
  padding: 2px 8px;
  display: inline-block;
  margin-left: 2px;
  margin-bottom: 2px;
}

#lohkomenu span.menutaso:hover {
  background: #999;
}

.subpage {
  margin-top: -2px;
  border: 1px solid #999;
  padding: 4px;
}

div.suunnittelumain {
  background: #eeeeee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  margin-top: -1px;
  left: 0px;
  right: 0px;
  position: absolute;
}

div.lohkojenottelut {
  background-color: silver;
  border: 1px groove gray;
  /*    position:absolute;*/
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}

.huonepanes {
  min-height: 100px !important;
  width: 100%;
  margin: -10px;
}

.tuomarilista {
  width: 800px;
}

.glow {
  position: relative;
  top: 50px;
  left: 50%;
  width: 20px;
  height: 0px;
  box-shadow: 0px 0px 150px 30px rgba(255, 255, 255, 0.7);
}

.menuviiva {
  width: 100%;
  padding: 0px;
  border-bottom: 1px solid #939393;
  height: 0px;
}

.loginbtn {
  float: right;
  margin-right: 10px;
  padding-top: 2px
}

.turnausnimi {
  float: right;
  margin-right: 20px;
  color: red;
}

.uutinen {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-bottom: 20px;
}

#map {
  width: 500px;
}

.selite {
  color: #555;
}

.ottelulomake textarea {
  width: 100%;
  height: 5em;
}

.piilota {
  display: none !important;
}

table.rekisteriseloste {
  border-spacing: 0px;
  border-collapse: collapse;
  border: 1px solid #999;
}

table.rekisteriseloste td, table.rekisteriseloste th {
  vertical-align: top;
  border: 1px solid #000;
}

.soluselite {
  font-size: 7pt;
}

.spinner {
  width: 16px;
  height: 16px;
  background: url(/taso/img/spinner.gif);
  display: inline-block;
}

.check {
  width: 16px;
  height: 16px;
  background: url(/taso/img/check.gif);
  display: inline-block;
}

.vaakakalenteri {
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.vaakakalenteri td {
  border: 1px solid #aaa;
  margin: 0;
  padding: 0px 2px;
  font-size: 9px;
  border: 1px solid black;
  width: 12px;
  height: 15px;
}

.vaakakalenteri td.maanantai {
  border-left: 1px solid red;
}

.vaakakalenteri th {
  padding: 0px 2px;
  width: 16px;
  font-size: 9px;
  border: 1px solid black;
  overflow: hidden;
}

th.kalenterikk, th.vko {
  width: auto;
}

.vasenvaakakalenteri th {
  text-align: left;
  /*height:17px;*/
}

.vaakakalenteri .even {
  background: #70772f;
  color: #fff;
  text-align: center;
}

.vaakakalenteri .odd {
  background: #b0b73f;
  color: #fff;
  text-align: center;
}

.vaakakalenteri td {
  cursor: default;
}

.vaakakalenteri .tapahtuma {
  background: yellow;
}

.etusivuturnaus {
  text-align: center;
  display: inline-block;
  width: 200px;
  background: #ddd;
  margin: 10px;
  padding: 10px 10px 20px;
  min-height: 100px;
  vertical-align: top;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0px 0px 4px 4px #bbb;
}

.etusivuturnaus img {
  width: 100%;
}

thead {
  display: table-header-group;
}

/*
.col_avustava1nimi,.col_avustava2nimi{display:none}
*/
.col_tulos, .ottelulista .col_tulos {
  text-align: center;
}

@media print {
  body {
    font-family: Arial, Helvetica;
  }

  .formbox {
    box-shadow: none;
  }

  a {
    text-decoration: none;
  }

  .teamphoto {
    width: 12cm
  }

  .alustava {
    display: block;
  }

  .noprint {
    display: none !important;
  }

  div.centerdiv {
    width: 100%;
  }

  .tasomenu {
    display: none;
  }

  body {
    margin-top: 4cm;
  }

  .pieniotsikko, .dataTables_filter {
    display: none;
  }

  .h-block {
    display: none;
  }

  .footer {
    display: none;
  }

  .yliikainen {
    color: red;
  }

  div.uusisivu {
    page-break-before: always;
    /*    page-break-after:always;*/
    padding-top: 1cm;
    border-top: 0;
  }

  div.uusisivu:last-child {
    page-break-after: avoid;
  }

  table.tuomarivalikko {
    display: none;
  }

  div.alamenu {
    display: none;
  }

  table.eivalia {
    margin-top: 0.5cm;
  }

  .peruttu td {
    text-decoration: none;
    color: #EE2225;
  }

  .luovutus {
    text-decoration: none;
    color: #EE2225;
  }

  .page {
    page-break-inside: avoid;
  }

  .page {
    page-break-before: always;
  }

  .jatkosivu {
    page-break-before: always;
    margin-top: 3cm;
  }

  tr.vanha {
    display: table-row
  }

  * {
    overflow: visible !important;
  }


  .cup table {
    border-radius: 0px;
    box-shadow: none;
    -moz-border-radius: 0;
    -moz-box-shadow: none;
    -webkit-border-radius: 0;
    -webkit-box-shadow: none;
    line-height: 100%;
    border-spacing: 0 !important;
  }

  .cup td, .cup th {
    border: 1px solid black;
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-collapse: collapse;
    padding: 3px 10px;
  }

  .cup td {
    border-bottom: none;
  }

  div.centerdiv {
    box-shadow: none !important;
  }

  table.lohko {
    width: 100%;
  }

}

.pylvas {
  display: inline-block;
  vertical-align: bottom;
  background: red;
  width: 10px;
}

.kunto_voitto, .kunto_tasa, .kunto_havio, .kunto_tasavoitto, .kunto_tasahavio {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin: 1px;
  vertical-align: middle;
}

.kunto_voitto {
  background: #3a3;
  margin-top: 1px;
}

.kunto_tasavoitto {
  background: #33a;
  background: #edcb07;
}

.kunto_tasahavio {
  background: #ff8000;
}

.kunto_tasa {
  background: #edcb07;
}

.kunto_havio {
  background: red;
}

.crest img {
  height: 20px
}

h3 span.help {
  margin-top: -7px;
  float: right;
}

h3 [class^="help"]:before, h3 [class*=" help"]:before, h3 [class^="help"]:after, h3 [class*=" help"]:after {
  color: #fff;
}

.help {
  /*  background: silver;
  padding: 4px 6px 2px;
  border-radius: 8px;
*/
  font-size: 16pt;
  cursor: help;
  color: #555;
  font-weight: bold;
  height: 11px;
  display: inline-block;
  vertical-align: top;
  margin-top: -8px;
}

span.helpright {
  float: right;
}

span.help span {
  font-weight: normal;
  font-size: 10pt;
  display: inline-block;
  margin-top: 10px;
  margin-left: -20px;
  display: none;
  box-shadow: 0px 0px 5px 2px #ccc;
  white-space: normal;
}


.triangle-border {
  display: block;
  opacity: 0;
  transition: opacity 0.5s;
  width: 300px;
  position: absolute;
  padding: 15px;
  margin: 1em 0 3em;
  border: 3px solid #5a8f00;
  color: #333;
  background: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  z-index: 2;
}

.triangle-border:before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 40px;
  border-width: 20px 20px 0;
  border-style: solid;
  border-color: #5a8f00 transparent;
  display: block;
  width: 0;
}

.triangle-border:after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 47px;
  border-width: 13px 13px 0;
  border-style: solid;
  border-color: #fff transparent;
  display: block;
  width: 0;
}

.triangle-border.top:before {
  top: -18px;
  bottom: auto;
  right: auto;
  left: 13px;
  border-width: 0 17px 18px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
  top: -13px;
  /* value = - border-top-width - border-bottom-width */
  bottom: auto;
  right: auto;
  left: 17px;
  /* value = (:before right) + (:before border-right) - (:after border-right) */
  border-width: 0 13px 13px;
}

#luolohkot th {
  background: #ccc;
  text-align: center;
}

.viivayla {
  border-top: 1px solid #000;
  position: absolute;
}

.viivavasenyla {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  position: absolute;
}

.viivaala {
  border-bottom: 1px solid #000;
  position: absolute;
}

.viivavasenala {
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  position: absolute;
}

.aikajanamaali {
  width: 20px;
  padding-top: 2px;
  cursor: help;
  text-align: center;
  vertical-align: middle;
  height: 18px;
  background: green;
  color: #fff;
  border-radius: 20px;
  border: 2px solid white;
  background: #999;
  position: absolute;
}

.johdossa {
  background: #080;
}

.tasoissa {
  background: #dd0;
  color: #000;
}

.haviolla {
  background: #800;
}

.aikajanarangaistus {
  border-radius: 3px;
  cursor: help;
  width: 2px;
  height: 16px;
  background: yellow;
  color: #000;
  position: absolute;
  text-align: center;
  border: 1px solid #aaa;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
}

.lohko td.lohko_kunto {
  text-align: left;
}

.tasolista {
  line-height: 1.4em;
}

.tuomarilista {
  width: 900px;
}

.col_kaikkitasot {
  width: 180px !important;
}

.notification {
  position: fixed;
  left: 20px;
  top: 40px;
  z-index: 1000;
  background: #00a;
  color: #fff;
  padding: 10px;
  display: none;

}

.livetorjunnat {
  display: inline-block;
  margin: 0 50px;
}

a [class^="flaticon-"]:hover, a [class*=" flaticon-"]:hover,
a [class^="flaticon-"]:hover, a [class*=" flaticon-"]:hover {
  color: navy;
}

.kokoonpanot td, .kokoonpanot tr:nth-child(odd) td {
  background: none;
}

.ilmoittautumisryhma {
  min-width: 180px;
  max-width: 220px;
}

table.kalenteri {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
  margin-right: 10px;
}

table.ottelulistatuomari tr:hover {
  background: #fff !important;
}

table.ottelulistatuomari tr.odd:hover {
  background: #e5e5e5 !important;
}

.tapahtumat tr:hover {
  background: rgba(0, 0, 0, 0.2);
}

.tapahtumat table {
  border-spacing: 0px;
}

.tapahtumat td {
  padding: 4px;
  cursor: default;
}

table.kentat td {
  white-space: normal;
}

#vanhaiframe {
  width: 700px;
  height: 700px;
  margin-top: 20px;
  border: 0;
}

.asettelukalenteri .qtip {
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

.otteluinfo td, .otteluinfo th {
  padding-top: 3px;
}

.eivoiesteyttaa {
  border: 0;
}

.torneopal_dropdownedit {
  background: #e5e5e5;
  display: inline-block;
  padding: 2px 4px;
  border: 1px solid #999;
}

.torneopal_dropdownedit span {
  background: #e5e5e5;
  cursor: default;

}

.torneopal_dropdownlist {
  z-index: 100;
  position: fixed;
  background: #e5e5e5;
  overflow-y: scroll;
  display: block;
  border: 1px solid #999;

}

.torneopal_dropdownlist ul {
  list-style-type: none;
  padding: 0px 4px;
}

.torneopal_dropdownlist li:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
}

.tapahtumakk {
  display: inline-block;
  width: auto;
  vertical-align: top;
  width: 300px;
}

#lkentat {
  vertical-align: top;
  padding: 10px;
  padding-right: 20px;
  width: 200px;
}

tbody.oddbody {
  background-color: #fafafa;
}

.editlista tr:hover {
  background: rgba(0, 0, 0, 0.2);
}

th[title] {
  cursor: help;
}

th[title]:after {
  font-family: Flaticon;
  font-size: 14px;
  font-style: normal;
  cursor: help;
  color: #63A800;
  padding-left: 2px;
  /*
    content: "\e041";
*/
}

.cupsijat {
  color: #333;
}

.dataTables_scrollBody th[title]:after {
  display: none;
}

th.hyllylla {
  background: red !important;
  color: #fff !important;
}

.ottelumedia {
  display: inline-block;
  margin: 5px 0px;
  max-width: 300px;
  border: 1px solid #333;
  padding: 10px;
  margin-left: 10px;
  vertical-align: top;
}

.ottelumediaotsikko {
  font-weight: bold;
  font-size: 1.4em;
  display: inline-block;
  height: 3em;
}

.ottelumedia:hover {
  background: #eee;
  text-decoration: none;
}

.ottelumediakuvaus {
  color: #666;
}

.ottelumediatiedotusvaline {
  color: #333;
  font-weight: bold;
  margin-top: 4px;
}

.maksulinkki {}

.maksulinkki form {
  background: #fff;
  display: inline-block;
  width: 150px;
  height: 100px;
  padding-top: 10px;
  border: 1px solid #333;
  vertical-align: top;
  text-align: center;
}

.maksulinkki span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 150px;
  height: 80px;
}

.maksulinkki form:hover {
  background: #eee;
}

.alue {
  width: auto;
  min-width: 120px;
}

.suosikki {
  display: block;
  text-decoration: none;
  border: 0;
  margin-bottom: 10px;
  vertical-align: top;
}

.suosikki_joukkue {
  display: inline-block;
}

.suosikki img {
  float: left;
  margin-right: 10px;
  vertical-align: middle;
  width: 40px;
}

.suosikki_ottelut {
  font-size: 10px;
}

#asetteluraportti td {
  text-align: right;
}

#asetteluraportti tr td:first-child {
  text-align: left;
}

table.dataTable tbody th, table.dataTable tbody td {
  padding: 2px 4px;
}

table.dataTable tbody tr:hover, table.dataTable tbody tr.hover {
  background: #eee;
}
.darkmode{
table.dataTable tbody tr:hover, table.dataTable tbody tr.hover {
  background: #444;
}

}

select.refsel, .ui-widget select.refsel {
  font-family: 'Inconsolata', courier new;
}

.ui-widget-header {
  border: 0;
  margin: -0.2em;
  background: #fff;
  background: transparent;
  border-bottom: 1px solid #eee;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.ui-datepicker {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.ui-datepicker th, .ui-datepicker td {

  font-weight: normal;
}

.ui-datepicker .ui-state-default {
  font-weight: normal;
  color: #000;
  background: none;
  border: 1px solid #f8f8f8;
  text-align: center;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  border-radius: 1.4em;
  vertical-align: middle;
}

.ui-datepicker .ui-state-active {
  font-weight: normal;
  color: #fff;
  background: #63A800;
}

.ui-datepicker .ui-state-hover {
  background: #a3c800;
}


.ui-datepicker-header {
  color: #999;
  font-size: 1.2em;
}

.ui-widget-content {
  background: #f8f8f8;
}

table.dataTable thead th, table.dataTable thead td {
  padding: 6px 18px 6px 4px;
}

.DTFC_LeftBodyWrapper {
  border-right: 1px solid #ddd;
}

.dataTables_info {
  display: none;
}

.loading {
  border-bottom: 6px solid rgba(0, 0, 0, .1);
  border-left: 6px solid rgba(0, 0, 0, .1);
  border-right: 6px solid rgba(0, 0, 0, .1);
  border-top: 6px solid rgba(0, 0, 0, .4);
  border-radius: 100%;
  height: 20px;
  width: 20px;
  margin-left: auto;
  margin-right: auto;
  animation: rot .6s infinite linear;
}

@keyframes rot {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.lohko .lohko_vieras,
.lohko .lohko_koti,
.lohko .lohko_pa1,
.lohko .lohko_pa2 {
  display: none;
}

.taulukkovalinta span {
  cursor: pointer;
  padding: 2px 4px;
}

.taulukkovalinta span:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.taulukkovalinta span.valittu {
  background-color: rgba(0, 0, 0, 0.2);
}

.fixedlist {
  table-layout: fixed;
  display: none;
}

.DTFC_LeftBodyLiner {
  overflow-x: hidden;
}

.tilastointi td {
  text-align: right;
}

.ottelulista td {
  white-space: normal;
}

.virhemaara {
  display: none;
}

.pistemaara {
  display: none;
}

.virhelista>span {
  white-space: nowrap;
}

.virhelista {
  font-size: 14px;
  margin: 0 20px;
}

.virhelista .nimi {
  display: inline-block;
  width: 10em;
  text-align: left;
  box-sizing: border-box;
  padding-left: 0.4em;
  overflow: hidden;
  line-height: 30px;
  vertical-align: middle;
}

.virhelista .numero {
  padding: 5px;
  display: inline-block;
  background: #4d4;
  text-align: center;
  width: 2em;
  margin-bottom: 3px;
}

.virhelista .virhemaara,
.virhelista .pistemaara {
  padding: 5px;
  display: inline-block;
  background: #ccc;
  text-align: center;
  width: 20px;
  margin-bottom: 3px;
  color: #000;
  font-weight: bold;
}

.virhelista .pistemaara {
  color: yellow;
}

td.maali_3 span {
  border: 2px solid #000;
  border-radius: 100%;
  display: inline-block;
  width: 20px;
  text-align: center;
  height: 20px;
  line-height: 20px;
}

.lentopallo tr.tapahtuma_maali {
  font-weight: bold;
  background: #d1d4f7;
}

tr.tapahtuma_virhe, tr.tapahtuma_aikalisa {
  color: #777;
}

.sijoitustaulukko td {
  width: 33% !important;
}

.sijoitustaulukko td {
  text-align: left !important;
}

.sijoitustaulukko h3 {
  text-align: center !important;
}

.jakso_alkoi {
  border-top: 2px solid #666;
}

.maksulista th {
  border-bottom: 1px solid #666;
}

#kenttavaraukset th,
#kenttavaraukset td {
  white-space: nowrap;
}

.varaus_wrapper {
  width: 800px;
  height: 440px;
}

#varaukset .col_pvm {
  width: 40px;
}

#varaukset input {
  width: 4em;
}

.poytakirjatapahtumat .newevent td {
  color: #aaa !important;
}

.varauseste {
  white-space: normal;
  text-align: left;
}

.estekalenteri {}

.estekalenteri, .estekalenteri table {
  border: 0;
  margin: 5px;
}

.estekalenteri table {
  border-spacing: 0;
  border-collapse: collapse;
}

.estekalenteri, .estekalenteri table, .estekalenteri td {
  text-align: center;
}

.estekalenteri .year {
  font-size: 14pt;
  color: #63a800;
}

.estekalenteri .month {
  width: 25%;
  vertical-align: top;
}

.estekalenteri .month table {
  font-size: 8pt;
}

.estekalenteri .month th {
  text-align: center;
  font-size: 10pt;
  color: #fff;
  background: #63a800;
  background: #007e4e;
  text-transform: capitalize;
}

.estekalenteri .month td {
  font-size: 12pt;
  border: solid 1px #aaa;
  padding: 2px 4px;
  cursor: pointer;
}

.estekalenteri .month .days td {
  color: #666666;
  font-weight: bold;
}

.estekalenteri .month .sat {
  color: #0000aa;
}

.estekalenteri .month .sun {
  color: #0000aa;
}

.estekalenteri .month .today {
  background: #63a800;
  color: #ffffff;
}

.estekalenteri .este {
  color: #fff;
  background: #f70;
}

.estekalenteri .paivaeste {
  color: #fff;
  background: #f00;
}

.details {
  padding: 10px;
  background: #fea;
  border: solid 1px #da7;
  position: absolute;
  display: none;
  min-width: 200px;
}

.details .title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.details .cancel {
  float: right;
}

.details #cancel {
  background: #a00;
}

.details #empty {
  float: right;
  cursor: pointer;
  color: #b00;
  font-size: 12px;
  padding: 1px;
  text-decoration: underline;
}

.details #kokopaiva {
  cursor: pointer;
  color: #00f;
  text-decoration: underline;
}

#muutottelut, #events {
  margin-top: 10px;
}

#muutottelut caption, #events caption {
  background: var(--blue);
  color: white;
  padding: 4px;
}

#muutottelut th, #events th {
  border-bottom: 1px solid #333;
}

.sqlraportti {
  border-spacing: 0;
  border-bottom: 1px solid #000;
  min-height:20 cm;
}

.sqlraportti td, .sqlraportti th {
  padding: 2px 4px;
  border-left: 1px solid #333;
  max-width: 400px;
  white-space: normal !important;
  word-wrap: break-word;
  vertical-align: top;
}
.sqlraportti tbody th {
white-space:nowrap !important;
}

.sqlraportti td:last-child, .sqlraportti th:last-child {
  border-right: 1px solid #333;
}

.sqlraportti th {
  color: #fff;
  background: #333;
}

@media print {
  .sqlraportti th {
    color: #000;
    background: none;
    font-weight: bold;
  }

}

.sponsorleft {
  float: left;
}

.sponsorright {
  float: right;
}

.sponsorleft img, .sponsorright img {
  max-width: 100px;
  max-height: 40px;
}

.hovercup .koti {
  margin: 0;
  z-index: 2;
  line-height: 15px;
  margin-right: 16px;
}

.hovercup .vieras {
  margin: 0;
  text-align: left;
  position: absolute;
  bottom: 0px;
  z-index: 2;
  background: #fff;
  width: 100%;
  margin-right: 20px;
  line-height: 15px;
}

.hovercup .tiedot {
  top: 30px;
  height: 30px;
  margin-top: -15px;
  position: absolute;
  background: #69A8DE;
  line-height: 15px;
  width: 100%;
  color: #fff;
  padding: 0px 4px;
}

.hovercup .vieras span,
.hovercup .koti span {
  left: auto;
}

.hovercup .tulos {
  left: auto;
  position: absolute;
  right: 0px;
  z-index: 2;
  background: #999;
  color: #fff;
  margin-left: 4px;
  width: 16px;
  text-align: center;
}

.hovercup .kesken .tulos {
  background: #7898da;
}

.hovercup .pelattu .tulos {
  background: #294A8F;
}

.hovercup .voittaja {
  font-weight: bold;
}

#kenttalista td,
#aluelista td,
#pintalista td {
  font-size: 10px;
}

.sqlraportti th.valiotsikko {
  border-right: 0 !important;
  text-align: left;
}

.sqlraportti th.valiotsikko:hover {
  background: none;
}

div.ottelu div {
  white-space: nowrap;
}

div[tauko='huono'] div {
  background: rgba(0, 0, 0, 0.4);
}

.hidebtn {
  cursor: pointer;
  padding: 4px;
  border: 1px solid #eee;
  line-height: 4px;
}

.rankinglista {
  border-spacing: 1;
  background: #ddd;
}

.rankinglista th,
.rankinglista td {
  padding: 4px;
}

.rankinglista th {
  text-align: left;
  background: #63a800;
  color: #fff;
}

.rankinglista td {
  text-align: right;
  background: #fff;
}

.rankinglista tr.odd td {
  background: #eee;
}

.rankinglista .name {
  text-align: left;
}

#tulosformi input[type='number'] {
  width: 4em;
  font-size: 1.5em;
}

.aluekartta {
  width: 100%;
}

#kaannostyokalu {
  position: fixed;
  right: 0px;
  top: 0px;
  font-size: 10pt;
  background: blue none repeat scroll 0% 0%;
  color: white;
  padding: 4px;
}

table.dataTable {
  margin-left: 0;
  margin-right: 0;
}

.mainsponsor {
  margin-bottom: 10em;
}

.bannersponsor {
  border: 0;
  opacity: 0.9;
}

.bannersponsor img {
  max-height: 100px;
  max-width: 100px;
  margin: 10px;
}

.mainsponsor a {
  font-size: 2em;
  text-decoration: none !important;
  text-align: center;
  opacity: 0.9;
}

.mainsponsor img {
  max-height: 200px;
  max-width: 400px;
  margin: 10px 20px;
}

.minorsponsor a {
  font-size: 1.2em;
  max-width: 160px;
  text-decoration: none !important;
  text-align: center;
  margin: 10px 20px;
  opacity: 0.8;
}

.minorsponsor a:hover {
  opacity: 1;
}

.mainsponsor a:hover, .bannersponsor:hover img {
  opacity: 1;
  -webkit-filter: drop-shadow(12px 12px 25px rgba(0, 0, 0, 0.5));
  filter: url(#drop-shadow);
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";

}

.minorsponsor img {
  max-height: 80px;
  max-width: 160px;
}

.minorsponsor {
  margin-bottom: 10em;
}

.muukentta, .muuosa {
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  padding: 1px;
}

.tasomenutoggle:hover {
  background: #aaa;
}

span.kaanna {
  padding: 0px !important;
  color: rgba(0, 0, 200, 1);
}

span.kaanna:hover {
  background: rgba(255, 255, 0, 0.5);
  cursor: alias;
}

#palautebody .home td{
vertical-align:bottom;
}

.palaute_range,.palaute_option {
  width: 100%;
  display: inline-block;
  text-align: center;
}

.palaute_range_1,.palaute_option_1 {
  background: #ED4460;
  color:white;
}

.palaute_range_2,.palaute_option_2 {
  background: #EA8344;
}

.palaute_range_3,.palaute_option_3 {
  background: #F3FC4B
}

.palaute_range_4,.palaute_option_4 {
  background: #94D13E;
}

.palaute_range_5,.palaute_option_5 {
  background: #48912B;
  color: white;
}

.tulospalvelutaulukko {
  display: inline-block;
  min-width: 400px;
  margin-right: 10px;
  vertical-align: top;
}

.tulospalvelutaulukko table.lohko {
  width: 100%;
}

.tulospalvelutaulukko h4 {}

.col-md-4 {
  width: 33%;
}

.col-md-6 {
  width: 60%;
}

.col-md-3 {
  width: 25%;
}

.sponsori {
  font-size: 80%;
}

img.flag {
  box-shadow: 0px 0px 3px 1px #999;
}

.jatkoviiva td {
  border-bottom: 1px solid black;
}

.ilmoittautumisryhma {
  float: left;
  width: 49%;
  margin-right: 1%;
}

.super-only {
  background: #f3d9bd;
}

.ui-tabs a.mover {
  background: #900;
  padding: 6px 12px;
  position: absolute;
  color: white;
  font-weight: bold;
  text-decoration: none;
}

.ui-tabs .next-tab {
  bottom: 0;
  right: 0;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}

.ui-tabs .prev-tab {
  bottom: 0;
  left: 0;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
}

.error {
  background: #9b2020;
  color: #fff;
  padding: 7px;
  margin-bottom: 10px;
  font-size: 12px;
}

span.lisponsori {
  display: block;
  margin-top: 0em;
  font-size: 80%;
}

th.rotate {
  height: 20px;
  white-space: nowrap;
}

th.rotate>div {
  transform:
    /* Magic Numbers */
    translate(10px, 10px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}

th.rotate>div>span {
  padding: 5px 10px;
}

.ui-selectmenu-open {
  z-index: 102;
}

.material-icons {
  vertical-align: middle;
  font-size: 12pt;
}

.material-button {
  cursor: pointer;
}

input.locked {
  color: #eee !important;
  background: #eee !important;
}

i.mdi {
  font-size: 120%;
}

.seurat_php .flag {
  width: 55px;
}

.muutettu,
input[type=text].muutettu,
input[type=email].muutettu,
input[type=password].muutettu,
input.muutettu,
textarea.muutettu {
  background-color: #fdfacb;
}

.closeon {
  background: #a00;
  color: #fff;
  padding: 1px 4px;
  font-weight: bold;
  float: right;
}

#tform {
  position: relative;
}

.col_pdf img {
  max-width: 50px;
}

.yhteensa td {
  color: #008;
  font-weight: bold;
  border-top: solid 1px #008 !important;
}

.uratilastot th,
.uratilastot td {
  text-align: right;
}

.uratilastot .info {
  text-align: left;
}

.kotivirhetotal,
.vierasvirhetotal {
  margin-top: 15px;
  background: #0d0;
  color: #000;
  padding: 10px 15px;
  font-size: 20px;
  display: inline-block;
}

.kotivirhetotal.yellow,
.vierasvirhetotal.yellow {
  background: #fd0;
}

.kotivirhetotal.red,
.vierasvirhetotal.red {
  background: #d00;
  color: #fff;
}

.uratilastot .odd td,
.kausitilastot .odd td {
  background: #fff;
}

.uratilastot .even td,
.kausitilastot .odd td {
  background: #f2f2f2;
}

.uratilastot a {
  text-decoration: underline;
}

table.dataTable tr.group td {
  background: #86ffa9;
}

.hidebox {
  overflow: hidden;
  min-width: 0 !important;
  padding-bottom: 20px;
}

.maksulinkki {
  text-align: center;
  border: 1px solid #999;
  width: 10em;
}

.maksulinkki span {
  display: block;
}


.scoreboard {
  display: inline-block;
  background: #999;
  border-radius: 0.2em;
  padding: 0 0.5em 0.5em;
  color: white;
  font-weight: bold;
  font-size: 14pt;
  margin-bottom: 0.5em;
  width: 11em;
  height: 6.5em;
  vertical-align: top;
}

.scoreboard table {
  margin: 0 -0.5em;
  width: 12em;
}

.scoreboard .klo,
.scoreboard .kentta {
  display: block;
}

.scoreboard .tilanne {
  display: none;
}

.scoreboard.live .tilanne,
.scoreboard.loppu .tilanne {
  display: block;
}

.scoreboard .kentta {
  font-size: 0.6em;
}

.scoreboard.loppu .klo,
.scoreboard.live .klo,
.scoreboard.loppu .kentta,
.scoreboard.live .kentta {
  display: none;
}

.scoreboard.loppu {
  background: #8d8aa2;
}

.scoreboard.live {
  background: #429c5b;
}

.scoreboard .jlogo {
  text-align: center;
  padding-top: 4px;
  height: 2.5em;

}

.scoreboard .jlogo span {
  background: #fff;
  display: inline-block;
  height: 45px;
  padding-top: 5px;
  width: 50px;
  border-radius: 10px;
}

.scoreboard .jnimi {
  line-height: 1em;
  width: 50%;
  margin: 0;
  font-size: 0.6em;
  padding: 0;
  text-align: center;
  white-space: normal;
  vertical-align: middle;
  height: 3em;
}

.scoreboard .jnimi span {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.scoreboard.loppu .pistekpl {
  display: none;
}

.scoreboard .erakpl,
.scoreboard .pistekpl {
  vertical-align: top;
  line-height: 1em;
  display: inline-block;
  padding: 0.5em 0.5em;
  border-radius: 0.2em;
  color: white;
}

.scoreboard .erakpl {
  font-size: 0.6em;
}

.scoreboard.loppu .erakpl {
  font-size: 1em;
}

.scoreboard .pistekpl {
  font-size: 1em;
  margin-right: 1px;
  width: 1em;
}

.scoreboard .erakpl.koti,
.scoreboard .pistekpl.koti {
  background: navy;
}

.scoreboard .erakpl.vieras,
.scoreboard .pistekpl.vieras {
  background: red;
}

table.katsojia td, table.katsojia th {
  border: 1px solid #999;
}

table.katsojia th {
  background: #eee;
}

table.katsojia tr:hover td,
table.katsojia tr:hover th {
  background: #ddd !important;
}

div.vaihe {
  border: 1px solid #666;
  margin-bottom: 4px;
  padding: 2px;
}

span.vaiheotsikko {
  /*float:left;*/
  height: 2em;
}

.hovericon:hover {
  background: #555;
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
}

.ui-tabs.ui-widget-content {
  background: none;
  border: 0;
}

.ui-tabs .ui-tabs-panel {
  border: 1px solid #aaa;
  margin-left: 3px;
}

.ui-tabs .ui-tabs-nav li {
  border-radius: 0px !important;
  background: #ddd;
  border: 1px solid #aaa;
  position: relative;
  top: 2px;
}

.ui-tabs .ui-tabs-nav li a {
  color: #777;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  background: #04A466;
  background: var(--extra-header-bg-color);
  top: 0px;
}

.seurapomo .ui-tabs .ui-tabs-nav li.ui-tabs-active {
  background: #004e7e;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
  color: #fff;
}

#rapotabit div a,#kaikkirapot a {
  text-decoration: none;
  color:#000;
}

#rapotabit div a:hover,#kaikkirapot a:hover {
  background: #eee;
}

.qtip-tipsy {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 4px black;
  color: black;
  text-shadow: none;
  font-weight: normal;
}

.ui-dialog {
  z-index: 1001 !important;
}

#faceboxi {
  overflow: auto !important;
}

.palvelut {
  width: 100%;
}

.jatkoonselite {
  background: #FFD700;
}

.jatkoonbselite {
  background: #C0C0C0;
}

.jatkooncselite {
  background: #CC7722;
}

.jatkoondselite {
  background: #472aea;
}

.jatkooneselite {
  background: #ffff00;
}

.jatkoonfselite {
  background: #CC1E1E;
}

.jatkoongselite {
  background: #228B22;
}

.jatkoonhselite {
  background: #00BFFF;
}

.jatkooniselite {
  background: #800080;
}

.jatkoonjselite {
  background: #FF8C00;
}

.jselite {
  text-align: center !important;
  width: 1em;
  padding: 0 !important;
}

.jselite span{
 background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: invert(1) grayscale(1);
  -webkit-filter: invert(1) grayscale(1);
}

.selitteet span {
  margin-top: 0.5em;
  vertical-align: middle;
  height: 1.5em;
  display: inline-block;
}

.lohkopiirros {
  display: inline-block;
  margin-right: 5px;
  box-sizing: border-box;
  vertical-align: top;
}

.lohkopiirros table {
  border: 1px solid #000;
  min-width: 30px;
  border-spacing: 0;
}

.lohkopiirros td {
  border: 1px solid #ccc;
  height: 4px;
  padding: 0;
}

.lohkopiirros h3 {
  padding: 0;
  margin: 0;
  text-align: center;
}

.cuppiirros {
  display: inline-block;
  vertical-align: top;
}

.cuppiirros table {
  width: 10px;
  border: 0;
  min-width: 20px;
}

h2.vaihe {
  font-size: 1.2em;
}

kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgb(0 0 0 / 20%), 0 2px 0 0 rgb(255 255 255 / 70%) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
  margin: 0 8px;
}

.tasauslista td,
.tasauslista th {
  white-space: nowrap;
}

#kentta {
  position: relative;
  background: green;
  margin: 10px;
  width: 325px;
  height: 262px;
  padding: 30px 15px 15px 15px;
  overflow: hidden;
}

#kentta {
  border-color: #fff;
}


#kentta {
  background: white;
}

#kentta div {
  border-color: #000;
  background: #fff;
}

#laukauspaikka {
  width: auto;
}

#kentta div {
  box-sizing: border-box;
}

/* https://davidmathlogic.com/colorblind  */


#kentta .laukaus {
  display: block;
  position: absolute;
  left: 50%;
  z-index: 2;
  border: 6px solid #117733 !important;
  border-radius: 100%;
  width: 0;
  height: 0;
  top: 30px;
}

#kentta .laukaus.laukausmaali {
  border-color: #332288 !important;
}

#kentta .laukaus.laukaustolppa {
  border-color: #88CCEE !important;
}

#kentta .laukaus.laukausohi {
  border-color: #DDCC77 !important;
}

#kentta .laukaus.laukausblokattu {
  border-color: #CC6677 !important;
}

.vue3 #app {
  /*  display:none;*/
}

.vue .q-table th {
  background: #75c7a8;
}

.vue .q-table tbody tr:nth-child(even) {
  background: #eee;
}

.ottelufiltteri {
  white-space: nowrap;
}

.matchlist li.header {
  position: relative;
  background: rgba(255, 255, 255, 0);
  height: auto;
}

spinner {
  margin: 10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  border-top-color: #007e4e;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  padding: 3px 5px;
  margin-top: 4px;
}

.select2-container .select2-selection--multiple {
  min-height: 26px;
  padding-right:24px;
  min-height:32px;
}

.ottelufilter .select2-container {
  width: auto !important;
  min-width: 160px;
  max-width: 400px;
}
.ottelufilter .select2-selection--multiple,
.ottelufilter .select2-selection--multiple input{
cursor:pointer;
}
.ottelufilter .filterelement{
  display:inline-flex;
  flex-direction:column;
}
.ottelufilter .filterelement>span {
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  margin-right:-16px;
}
.ottelufilter .filterelement span.filtercaption {
  margin-left:4px;
  font-size:0.9em;
}
.ottelufilter {
  padding-top:12px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid #555 1px;
}
.clearselect2 {
  position:relative;
  left:-24px;
  padding:0;
  background:#bbb;
  width:1.5em;
  height:1.5em;
  border-radius:50%;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1.5em;
  text-align:center;
  cursor:pointer;
  color:#fff;
}
.clearselect2:hover{
  background:#333;
}
.ottelufiltteri input {
  border-radius: 4px;
  line-height: 26px;
}

.ottelulista span.luokitus {
  font-size: 80%;
}

.textarea_static {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px;
  min-height: 2em;
  max-width: 900px;
  max-height: 20em;
  overflow: auto;
}
.darkmode .textarea_static {
  background:#777;
}

.textarea_static:hover {
  background: #eee;
}

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

  .blocktable tr,
  .blocktable th,
  .blocktable td {
    display: block;
  }

  tr.blockrow,
  tr.blockrow td,
  tr.blockrow th {
    display: block;
  }

}

.sarjaoikeushenkilo {
  font-size: 12px;
  background: #ccc;
  line-height: 14px;
  border-radius: 8px;
  padding: 2px 4px;
  margin: 0 2px 2px;
  white-space: nowrap;
}

.sarjaoikeushenkilo.oikeus_asettelija {
  background: #9f9fff;
}

.sarjaoikeushenkilo.oikeus_sarjanhoitaja {
  background: #3dc19e;
}

.sarjaoikeushenkilo .remove {
  margin-top:-4px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 14px;
  vertical-align: middle;
  padding: 2px;
  width: 12px;
  height: 12px;
  display: inline-block;
  text-align: center;
  padding-top:0;
  line-height:12px;
}

.sarjaoikeushenkilo .remove:hover {
  background: #333;
  color: #fff;
}

.formbox .textarea_static h3 {
  background: none;
  color: #000;
}

.formbox .textarea_static h3 .hidebtn {
  display: none;
}

.formbox .textarea_static p {
  white-space: normal;
}

.anomuslista .tila {
  display: inline-block;
}

.anomuslista .tila::first-letter {
  text-transform: uppercase;
}

.anomuslista .tila_hyvaksytty {
  background: green;
  color: white;
  padding: 2px 4px;
}

.anomuslista .tila_kesken {
  background: blue;
  color: white;
  padding: 2px 4px;
}

.anomuslista .tila_luonnos {
  background: yellow;
  color: black;
  padding: 2px 4px;
}

.anomuslista .tila_hylatty {
  background: red;
  color: white;
  padding: 2px 4px;
}

.anomuslista .tila_liistetty {
  background: violet;
  color: black;
  padding: 2px 4px;
}

.seura .tila_poistettu {
  background: black;
  color: white;
  padding: 2px 4px;
}




.seura .inteam {
  background-color: #D0F6CF;
}

.seura #pelaajalista {
  /*
  max-height: 50vh;
  */
}

.col_info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.col_info .streamlink {
  float: right;
  text-align: right;
}

.anomusmaksu th {
  padding: 2px 4px;
  background: #ddd;
  font-weight: bold;
}

.anomusmaksu td {
  padding: 2px 4px;
}

.hyvaksyehdot {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.hyvaksyehdot input {
  margin-right: 4px;
}

.loki td {
  white-space: normal !important;
}
.loki {border-spacing:0;}
.loki td{padding:2px;white-space:break-spaces;}
.loki .odd td{background:#ccc;}
.pvm th{border-bottom:2px solid #000;font-weight:bold;}

.ottelulista .poistuva {

  background-color: rgb(252, 95, 95);
}

table.tasolista tbody tr.valiotsikko,
table.tasolista tbody tr.valiotsikko th,
table.tasolista tbody tr.valiotsikko td,
table.tasolista tbody tr.valiotsikko:hover {
  background: #333 !important;
  color: white;
  font-size: 1em;
  text-align: left;
}

.highlightpacket {
  background-color: lightgreen;

}

.chosen-container-multi {
  min-width: 15em;
}

@media only screen and (max-device-width: 640px) {
      .dataTables_scrollBody{
        max-height:fit-content !important;
        height:auto !important;
      }
}
#suodata_teksti
{
  background-color: yellow;
}
#suodata_teksti:placeholder-shown {
  background-color: white;
}
.saveoverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.darkmode .content{
  background:#000;
}
summary{
  padding-left:0.5em;
}
summary::marker{
  cursor:pointer;
}
summary:hover::marker{
  font-size:1.5em;
}
.fakeinput {
  background-color: #eee;
  border-color:#aaa;
  padding:4px 8px;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  min-width:5em;
  height:1.2em;  
}