/* Style the form */
table, #regForm {
  font-size: 13px;
}

.eventTitle {
    background: var(--barBg);
    color: var(--barFg);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 2px;
}

eventMainTitle, .eventDate, .eventLocation {
    padding: 4px;
}
.eventMainTitle {
    font-size: 17px;
    font-weight: bold;
    padding-left: 6px;
    width: 100%;
}

.eventDate, .eventLocation {
    font-size: 13px;
    font-weight: normal;
    padding-left: 6px;
}

.eventDate {
    width: 25%;
    min-width: 100px;
    max-width: 160px;
}

.eventLocation {
    width: 75%;
    max-width: calc(100% - 100px);
    text-align: center;
}

.table {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.tname, .tvalue {
    padding-top: 5px;
    padding-bottom: 5px;
}

.tname {
    width: 160px;
    padding-left: 0px;
    padding-right: 5px;
}

.tvalue {
    width: calc(100% - 160px - 5px); /* tname width(160) & tvalue margin(5) */
    padding-left: 5px;
}

.twide {
    width: 100%;
    padding-left: 5px;
}

.tevent {
    width: 100%;
    padding-left: 5px;
    line-height: 21px;
    font-weight: bold;
}

.tline, .tabline {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.tline, .tspacer {
    line-height: 21px;
}    

.tgrey {
    color: var(--secondFg);
}

.tabline {
    justify-content: flex-end;
}

.ttab1, .ttab2, .ttab3 {
    background: var(--barBg);
    color: var(--barFg);
    border-left: 1px solid var(--barFg);
    border-bottom: 1px solid var(--listBg2);
    text-align: center;
    border-radius: 6px 6px 0px 0px;
}

.ttab1 a, .ttab2 a, .ttab3 a {
    color: var(--barFg);
    text-decoration: none;
}

.ttab1 {
    width: 70px;
}

.ttab2 {
    width: 90px;
}

.ttab3 {
    width: 130px;
}

.table {
    --wpos: 35px;
    --wclub: 80px;
    --wbyear: 50px;
    --wres: 60px;
    --wname: calc((100% - (var(--wpos) + var(--wclub) + var(--wbyear) + var(--wres))) / 2);
    --wroute: var(--wname);
    --weventl: var(--wname);
    --wroutel: calc(var(--wname) + var(--wres));
}

.tres1, .tres2, .tres2l, .tres3, .tres3l, .tres4, .tres5, .tres5l, .tres6, .tres6l {
    height: 21px;
    white-space:nowrap;
    overflow: hidden;
}    

.tres1 {
    width: var(--wpos);
}

.tres3, .tres3l {
    width: var(--wclub);
}

.tres3l {
    width: var(--wres);
    /*padding-right: 10px;*/
    /*    margin-right: 30px;*/
}

.tres4 {
    width: var(--wbyear);
}

.tres5 {
    width: var(--wres);
}

.tres5l {
    width: var(--wres);
/*    margin-right: 40px;*/
}
    
/*.tres2, .tres6, .tres6l {
    width: calc((100% - (2 * 40px + 60px + 80px)) / 2);
}*/
.tres2, .tres2l {
    width: var(--wname);
}

.tres6 {
    width: var(--wroute);
    padding-left: 10px;
    top: 21px;
    left: var(--wpos);
}

.tres6l {
    width: var(--wroutel);
    padding-left: calc(20px + var(--wres));
    right: 0px;
}

.tres1, .tres2, .tres2l, .tres4, .tres5, .tres5l {
    padding-left: 5px;
}

.tres1, .tres3l, .tres5, .tres5l {
    text-align: right;
}

.tres2, .tres2l, .tres3, .tres6, .tres6l {
    text-align: left;
}

.tres4 {
    text-align: center;
}

@media only screen and (max-width: 600px) {
    .table {
	--wpos: 28px;
	--wclub: 70px;
	/*--wbyear: 40px;*/
	--wres: 50px;
	--wname: calc(100% - var(--wpos) - var(--wclub) - var(--wres) - 2px);
	--wroute: calc(100% - var(--wpos) - var(--wbyear) - 5px);
	--weventl: calc(100% - var(--wpos) - var(--wres) * 3);
	--wroutel: calc(100% - var(--wpos));
    }
    
    .tline {
	height: 42px;
	position: relative;
    }

    .tline:nth-of-type(2n+1) {
	background-color: var(--barFg);
    }

    .tres1 {
	width: var(--wpos);
	position: absolute;
	padding-left: 0px;
	top: 0px;
	left: 0px;
    }

    .tres2, .tres2l {
	position: absolute;
	overflow: hidden;
	top: 0px;
	left: var(--wpos);	
    }

    .tres2 {
	width: var(--wname); /*calc(100% - 25px - 70px - 50px);*/
    }

    .tres2l {
	width: var(--weventl);
    }

    .tres3, .tres3l {
	width: var(--wclub);
	overflow: hidden;
	position: absolute;
	padding-left: 5px;
	top: 0px;
    }

    .tres3 {
	right: var(--wres);
    }
    
    .tres3l {
	margin-right: 0;
	right: calc(var(--wres) * 2);
    }

    .tres5, .tres5l {
	width: var(--wres);
	position: absolute;
	padding-right: 0px;
	top: 0px;
    }

    .tres5 {
	right: 0px;
    }
    
    .tres5l {
	right: var(--wres);
    }
    
    .tres4 {
	width: var(--wbyear);
	position: absolute;
	top: 21px;
	left: var(--wpos);
	padding-left: 5px;
	text-align: left;
    }    

    .tres6 {
	width: var(--wroute); /*calc(100% - 25px - 45px);*/
	position: absolute;
	top: 21px;
	left: calc(var(--wpos) + var(--wclub));
    }

    .tres6l {
	width: var(--wroutel); /*calc(100% - 25px);*/
	position: absolute;
	top: 21px;
	padding-left: 5px;
	left: var(--wpos);
    }

}
 
.tvselect {
    max-width: 100%;
}

.tpad {
    padding-top: 13px;
}

.tvalue:after {
    content: "";
    clear: both;
}

.first {
    border-bottom-color: var(--accentHg);;
    border-bottom-width: 1px;
    border-bottom-style: solid;
   /* width: 170px;*/
}

.top {
    vertical-align: top;
}

.line {
    line-height: 21px;
}

.second, .third {
    border-bottom-color: var(--accentHg);;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.third {
    border-bottom-style: hidden;
}

.buttoncase {
    padding-top: 10px;
    padding-bottom: 5px;
    padding-right: 5px;
}

.wrap {
    display: flex;
    flex-wrap: wrap;
}

.serie {
    width: 40px;
    padding-left: 10px;
}

.events {
    width: calc(100% - 40px);
}

.events:after {
    clear: both;
}

.formTitle {
    font-size: 13px;
    font-weight: bold;
    padding-top: 13px;
    padding-bottom: 5px;
    width: 100%;
}

table.tulokset {
    width: 100%;
    border-spacing: 0px 2px;
    padding-left: 2px;
    padding-right: 0px;
}

table.tulokset td {
    padding-left: 4px;
    padding-right: 2px;
    white-space: nowrap;
}

.GreenBar {
    background: var(--barBg);
    color: var(--barFg);
}

.formTip {
    font-size: 12px;
    font-weight: normal;
    color: var(--formTipFg);
}    

td {
    padding-top: 5px;
    padding-bottom: 5px;
}

.sarjaLeft {
    width: 50px;
}

.sarjaLeft2 {
    border-bottom-color: var(--accentHg);;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.sarjaRight {
    border-bottom-color: var(--accentHg);;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    width: 560px;
    font-size: 12px;
}

div.sarja {
    display: inline-block;
    width: 55px;
}

#check1, #maksu1, #maksu2 {
    width: 40px;
}

a:link.button {
    color: black;
    text-decoration: none;
}
a:visited.button {
    color: black;
    text-decoration: none;
}
a:hover.button {
    color: black;
    text-decoration: none;
}
a:active.button {
    color: white;
    text-decoration: none;
}

div.buttonblock {
    display: inline-block;
    width: 100%;
    padding-bottom: 4px;
}

.button {
    text-align: center;
    background-color: var(--accentBg);
    border-radius: 3px;
    box-shadow: 1px 1px var(--buttonShadow);
    transition-duration: 0.4s;
    margin-top: 5px;
    margin-bottom: 5px;
}

.button:hover {
    background-color: var(--accentHg);
}

.button:disabled {
    color: var(--disabledFg);
    background-color: var(--disabledBg);
}

#prevBtn, #nextBtn, #editBtn, .dnlBtn {
    width: 100px;
    height: 28px;
    font-size: 13px;
    color: black;
    background-color: var(--accentBg);
    border: 1px solid var(--inputBorder);
    border-radius: 3px;
    box-shadow: 1px 1px var(--buttonShadow);
    transition-duration: 0.4s;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#prevBtn:hover, #nextBtn:hover {
  background-color: var(--accentHg); 
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

/* Style the input fields */
input, .input {
  padding: 5px;
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--inputBorder);
}

input, textarea {
    outline: none;
}

input:focus, textarea:focus {
  border: 1px solid var(--focusBorder);
  box-shadow: 0 0 5px var(--focusBorder);
}

input.sarja {
    width: 20px;    
}

input.pvm {
    width: 80px;
}

input.tlajivalinta {
    padding: 0px;
    width: 20px;    
}

input.tlajivalinta2 {
    padding: 0px;
    width: 20px;    
}

input.borderless {
    border: none;
}

.instruction::placeholder {
    color: black;;
    opacity: 1; /* Firefox */
}

.instruction:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: black;
}

.instruction::-ms-input-placeholder { /* Microsoft Edge */
    color: black;
}

div.lajivalinta, div.lajivalinta2 {
    display: none;
    padding-top: 10px;
    padding-bottom: 10px;
}    

.tlajivalinta {
    font-size: 11px;
    width: 122px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.tlajivalinta2 {
    font-size: 13px;
    width: 150px;
    padding-top: 1px;
    padding-bottom: 1px;
}

textarea {
    padding: 5px;
    width: 100%;
    height: 140px;
    font-size: 13px;
    border: 1px solid var(--inputBorder);
}

textarea.rules {
    height: 300px;
}

/* Tuning select in forms
 * Source: https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css
 * Modified by Janne Edelman, 2020-04-10
 */

select {
    font: inherit; /*400 12px/1.3 sans-serif;*/
    -webkit-appearance: none;
    appearance: none;
    color: var(--baseFg);
    border: 1px solid var(--inputBorder);
    margin-left: 0;
    line-height: 1;
    outline: 0;
    padding: 0.65em 2.5em 0.55em 0.75em;
    border-radius: var(--radius);
    background-color: var(--baseBg);
    background-image: linear-gradient(var(--inputBorder), var(--inputBorder)),
		      linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
		      linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
		      linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
    background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
    background-image: linear-gradient(var(--inputBorder), var(--inputBorder)),
		      linear-gradient(-135deg, transparent 50%, var(--accentHg) 50%),
		      linear-gradient(-225deg, transparent 50%, var(--accentHg) 50%),
		      linear-gradient(var(--accentHg) 42%, var(--accentFg) 42%);
}

select:active {
    background-image: linear-gradient(var(--focusBorder), var(--focusBorder)),
		      linear-gradient(-135deg, transparent 50%, var(--accentHg) 50%),
		      linear-gradient(-225deg, transparent 50%, var(--accentHg) 50%),
		      linear-gradient(var(--accentHg) 42%, var(--accentFg) 42%);
    color: var(--accentBg);
    border-color: var(--focusBorder);
    background-color: var(--accentHg);
}

select:focus {
    border-color: var(--focusBorder);
    box-shadow: 0 0 5px var(--focusBorder);
}

/* Mark input boxes that gets an error on validation: */
input.invalid, select.invalid {
    background-color: var(--invalidBg1);
}

input.invalid2, select.invalid2 {
    background-color: var(--invalidBg2);
}

#pp, #ipp, #kk, #ikk, #hh, #ihh {
    width: 60px;
}

#mm, #imm{
    width: 70px;
}

#vv, #ivv {
    width: 80px;
}

.tulos {
    width: 100px;
    max-width: 100px;
    text-align: right;
}

.yksikko {
    margin-left: 6px;
    align-self: center;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: var(--accentHg);
    border: none; 
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

/* Mark the active step: */
.step.active {
    opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #4CAF50;
}

@media only screen and (max-width: 600px) {
    .tname, .tvalue {
	width: 100%;
    }

    .tname {
	font-weight: bold;
    }
    
    .tvalue {
	padding-left: 20px;
    }
    
    .tvselect {
	width: 100%;
    }

    .tname:nth-of-type(4n+0) {
	background-color: var(--barFg);
    }

    .tname:nth-of-type(4n+3) {
	background-color: var(--barFg);
    }

    .tvalue:nth-of-type(4n+1) {
	background-color: var(--barFg);
    }

    .tvalue:nth-of-type(4n+0) {
	background-color: var(--barFg);
    }

    .first {
	border-style: none;
    }

    .tvalue, .second {
	border-bottom-color: var(--accentHg);;
	border-bottom-width: 1px;
	border-bottom-style: solid;
    }
      
    .buttoncase {
	padding-right: 20px;
    }

}

@supports (-webkit-overflow-scrolling: touch) {
  select, textarea, input {
    font-size: 16px;
  }

  input.pvm {
      width: 100px;
  }
  
  #pp, #ipp, #kk, #ikk, #vv, #ivv, #hh, #ihh, #mm, #imm {
      padding: 0.65em 2em 0.55em 0.5em;
  }

  .tgrey {
      color: #666666;
  }
}