@charset "utf-8";

.content-captainportal-width {
	max-width: 38.75rem; /* 620px */
}

.content-container-grid {
	display: grid;
    grid-template-areas:
	 "content-header"
	 "pairing-buttons"
	 "announcement-text"
	 "pairing-header"
	 "boxes-container"
	 "list-container";
	grid-row-gap: 1.2rem;
}

.content-header {
	display: grid;
	grid-area: content-header;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"data1 data2";
	height: auto !important;
	line-height: normal !important;
	padding: .5rem !important;
	margin-bottom: 0 !important;
}

		#content-header-portal__data1 {
			grid-area: data1;
			font-size: 1.0rem;
			font-weight: 400;
			white-space: nowrap;
			text-align: left;
		}

		#content-header-portal__data2 {
			grid-area: data2;
			font-size: 1.0rem;
			font-weight: 400;
			white-space: nowrap;
			text-align: right;
		}

.pairing-buttons {
	display: grid;
	grid-area: pairing-buttons;
	justify-items: center;
	grid-template-columns: 1fr 1fr 1fr;
}
.pairing-buttons div {
	font-size: 0.8rem;
	padding: .5rem 1rem;
	border: 1px solid black;
}
		.selectedPair{
			background-color: #f9f9f9;
			font-weight: bold;
			padding: 3px;
			/* font-size: 14px; */
		}
		.unselectedPair{
			background-color: transparent;
			font-weight: normal;
		}
		a.pairlink:visited, a.pairlink:link {
			color: black;
			text-decoration: none;
		}
		a.pairlink:hover, a.pairlink:active {
			color: blue;
			text-decoration: underline;
		}

.announcement-text {
	grid-area: announcement-text;
	color: #41608f;
	text-align: center;
}

.pairing-header {
	display: grid;
	grid-area: pairing-header;
	font-weight: 400;
	background-color: #5A785A;
	color: white;
	justify-items: center;
	grid-template-columns: 1fr 1fr 1fr;
	padding-left: 0.3rem;
	padding-right: 0.3rem;
	height: 2rem;
	line-height: 2rem;
}

.matches-box-container {
	display: grid;
	grid-area: boxes-container;
	grid-template-areas:
	 "box1"
	 "box2"
	 "box3"
	 "box4"
	 "box5"
	 "box6"
	 "box7";
	grid-row-gap: 1.2rem;
}

.matches-list-container {
	display: grid;
	grid-area: list-container;
	padding: 0 .8rem;
	grid-row-gap: 1rem;
}

.matchlist-box {
	display: grid;
	padding: 0 .8rem;
	grid-row-gap: 1rem;
	background-color: #ffffff;
	border: 1px solid #cfbe92;
	}
	.matchlist-box__header {
		width: 70%; /* this determines the lengh of the lines before and after the header text */
		margin: auto;
	    overflow: hidden;
	    text-align: center;
	    font-weight: 400;
		font-size: .8rem;
		color: #41608f;
	}
	.matchlist-box__header:before, .matchlist-box__header:after {
	  content: "";
	  display: inline-block;
	  width: 50%;
	  margin: 0 .5em 0 -55%;
	  vertical-align: middle;
	  border-bottom: 2px solid;
	}
	.matchlist-box__header:after {
	  margin: 0 -55% 0 .5em;
	}
	.matchlist-box__content {
		display: grid;
		border: 2px gray solid;
		background-color: white;
		padding: 1.2rem 0;
	}
	.matchlist-box__icons {
		display: grid;
		grid-template-rows: auto;
	}

.match-box {
	background-color: #f7e4b6;
	border: 1px solid #cfbe92;
}

.match-box__header {
    width: 70%; /* this determines the lengh of the lines before and after the header text */
	margin: auto;
    overflow: hidden;
    text-align: center;
    font-weight: 400;
	font-size: 1.2rem;
	color: #41608f;
}
.match-box__header:before, .match-box__header:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 2px solid;
}
.match-box__header:after {
  margin: 0 -55% 0 .5em;
}

.match-box__content {
	display: grid;
	grid-template-columns: max-content auto max-content;
	font-size: .75rem;
	font-style: normal;
	font-weight: 400;
	padding: 0.4rem;
}

.match-box__name {
	font-size: 1.0rem;
	font-style: italic;
	color: black;
}

.match-box__hdcp {
	color: #675731; /* blue */
}

.match-box__icons {
	display: grid;
	grid-template-rows: auto auto;
}

.box1 {
	grid-area: box1;
}

.box2 {
	grid-area: box2;
}

.box3 {
	grid-area: box3;
}

.box4 {
	grid-area: box4;
}

.box5 {
	grid-area: box5;
}

.box6 {
	grid-area: box6;
}

.box7 {
	grid-area: box7;
}




/* 544px */
@media (min-width: 34em) {
	.content-container-grid {
		grid-template-areas:
		 "content-header content-header"
		 "login-form login-form"
		 "pairing-buttons pairing-buttons"
		 "announcement-text announcement-text"
		 "portal-LoginLogoff portal-LoginLogoff"
		 "pairing-header pairing-header"
		 "boxes-container boxes-container"
		 "list-container list-container";
		 grid-template-columns: 1fr 1fr;
     column-gap: 0.5rem;
		grid-row-gap: 1.2rem;
	}

	.match-boxes-container {
		grid-template-areas:
		 "box1 box2"
		 "box3 box4"
		 "box5 box5"
		 "box6 box7";
	}

	.box5 {
		margin-left: 10.125rem;
		margin-right: 10.125rem;
	}

}