/*
Theme Name: Rick's Catch Box
Template: Team pages
Version: 1.0
Author:	Rick Hensgens
*/

/* Programma en uitslagen */
.wedstrijd {
    background-color: #fff;
    border-style: solid;
    border-color: #1b8be0;;
    border-width: 1.5px;
    color: #000; 
    display: grid;
    grid-template-columns: 1fr 120px 1fr; 
    border-radius: 10px;
    gap: 0px;
	text-align: center;
	margin: 10px 0px 20px 0px;
	text-align: center;
	align-items: center;
}

.wedstrijd .thuisteam,
.wedstrijd .uitteam,
.wedstrijd .datum,
.wedstrijd .soort,
.wedstrijd .score {
    text-transform: uppercase;
}

.wedstrijd .thuisteam,
.wedstrijd .uitteam {
    font-size: 15px;
}

.wedstrijd img {
    vertical-align: middle;
	margin: 10px 0px 0px 0px;
}

.wedstrijd .score {
    font-size: 24px;
}

.wedstrijd .datum,
.wedstrijd .soort{
    font-size: 12px;
}


/*Staf en Spelers*/


.persoon {
    background-color: #fff;
    border-style: solid;
    border-color: #1b8be0;;
    border-width: 1.5px;
    color: #000; 
    display: grid;
    grid-template-columns: 120px 1fr; 
	grid-template-rows: 1fr 10px 50px 1fr
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 10px;
    gap: 0px;
	margin: 10px 0px 20px 0px;
	text-align: center;
	align-items: center;
}

.rolrow {
    display: inline-grid;
    grid-template-columns: auto 1fr; 
    gap: 0px;
	text-align: left;
	margin: 0px 0px 0px 0px;

}

.persoon .spacer {
}

.persoon-item1 {
  grid-row: 1 / span 4;
}

.persoon-item2 {
  text-align: left;
}

.persoon .naam {
    text-transform: uppercase;
	font-size: 18px;
	text-align: left;
}

.persoon .rol{
    text-transform: uppercase;
    font-size: 12px;
	vertical-align: middle;
    background-color: #1b8be0;
    color: #fff; 
    border-radius: 10px;
}

/*Indeling*/
.indeling-ander {
    background-color: #fff;
    border-style: solid;
    border-color: #1b8be0;;
    border-width: 1.5px;
    color: #000; 
    display: grid;
    grid-template-columns: 25px 40px auto 120px; 
    border-radius: 10px;
    gap: 0px;
	margin: 10px 0px 20px 0px;
	text-align: center;
	align-items: center;
}

.indeling-eigen {
    background-color: #1b8be0;
    border-style: solid;
    border-color: #1b8be0;;
    border-width: 1.5px;
    color: #fff; 
    display: grid;
    grid-template-columns: 25px 40px auto 120px; 
    border-radius: 10px;
    gap: 0px;
	margin: 10px 0px 20px 0px;
	text-align: center;
	align-items: center;
}


.indeling-ander .naam,
.indeling-eigen .naam {
    font-size: 16px;
	text-align: left;
    text-transform: uppercase;
  	vertical-align: middle;
}
.indeling-ander .positie,
.indeling-eigen .positie
{
    font-size: 16px;
	text-align: right;
  	vertical-align: middle;
}
.indeling-ander .speeldata,
.indeling-eigen .speeldata
{
    font-size: 12px;
	text-align: center;
    text-transform: uppercase;
  	vertical-align: middle;
}

.persoon img,
.indeling-ander .logo img,
.indeling-eigen .logo img {
    vertical-align: middle;
	margin: 5px 5px 5px 5px;
}

.ddstyled {
    background-color: #fff;
    border-style: solid;
    border-color: #666;;
    border-width: 1.5px;
    color: #666; 
    border-radius: 5px;
	height: 34px;
}

/*Stand*/
@media screen and (max-width: 700px) {
	.stand-ander {
		background-color: #fff;
		border-style: solid;
		border-color: #1b8be0;
		border-width: 1.5px;
		color: #000; 
		display: grid;
		grid-template-columns: 25px 40px auto 35px 35px 10px; 
		border-radius: 10px;
		gap: 0px;
		margin: 10px 0px 10px 0px;
		text-align: center;
		align-items: center;
	}

	.stand-eigen {
		background-color: #1b8be0;
		border-style: solid;
		border-color: #1b8be0;
		border-width: 1.5px;
		color: #fff; 
		display: grid;
		grid-template-columns: 25px 40px auto 35px 35px 10px; 
		border-radius: 10px;
		gap: 0px;
		margin: 10px 0px 10px 0px;
		text-align: center;
		align-items: center;
	}

	.stand-head {
		background-color: #fff;
		border-style: solid;
		border-color: #1b8be0;
		border-width: 1.5px;
		color: #000; 
		display: grid;
		grid-template-columns: 25px auto 35px 35px 10px; 
		border-radius: 10px;
		gap: 0px;
		margin: 10px 0px 10px 0px;
		text-align: center;
		align-items: center;
		min-height: 35px;
	}
}
	
@media screen and (min-width: 700px) {
	.stand-ander {
		background-color: #fff;
		border-style: solid;
		border-color: #1b8be0;
		border-width: 1.5px;
		color: #000; 
		display: grid;
		grid-template-columns: 25px 40px auto 35px 35px 35px 35px 35px 35px 35px 35px 35px 10px; 
		border-radius: 10px;
		gap: 0px;
		margin: 10px 0px 10px 0px;
		text-align: center;
		align-items: center;
	}

	.stand-eigen {
		background-color: #1b8be0;
		border-style: solid;
		border-color: #1b8be0;
		border-width: 1.5px;
		color: #fff; 
		display: grid;
		grid-template-columns: 25px 40px auto 35px 35px 35px 35px 35px 35px 35px 35px 35px 10px; 
		border-radius: 10px;
		gap: 0px;
		margin: 10px 0px 10px 0px;
		text-align: center;
		align-items: center;
	}

	.stand-head {
		background-color: #fff;
		border-style: solid;
		border-color: #1b8be0;
		border-width: 1.5px;
		color: #000; 
		display: grid;
		grid-template-columns: 25px auto 35px 35px 35px 35px 35px 35px 35px 35px 35px 10px; 
		border-radius: 10px;
		gap: 0px;
		margin: 10px 0px 10px 0px;
		text-align: center;
		align-items: center;
		min-height: 35px;
	}
}

.stand-head .head1
{
    font-size: 18px;
	text-align: right;
    text-transform: uppercase;
  	vertical-align: middle;
	font-weight: bold;
}
.stand-head .head2
{
    font-size: 18px;
	text-align: left;
    text-transform: uppercase;
  	vertical-align: middle;
	font-weight: bold;
}
.stand-head .head3
{
    font-size: 18px;
	text-align: center;
    text-transform: uppercase;
  	vertical-align: middle;
	font-weight: bold;
}

.stand-ander .naam,
.stand-eigen .naam
{
    font-size: 16px;
	text-align: left;
    text-transform: uppercase;
  	vertical-align: middle;
}
.stand-ander .positie,
.stand-eigen .positie
{
    font-size: 16px;
	text-align: right;
  	vertical-align: middle;
}
.stand-ander .speeldata,
.stand-eigen .speeldata
{
    font-size: 15px;
	text-align: center;
    text-transform: uppercase;
  	vertical-align: middle;
}

.stand-ander .logo img,
.stand-eigen .logo img {
    vertical-align: middle;
	margin: 5px 5px 5px 5px;
}