/*===================================================*/
/*===          Raadix 2020 STYLESHEET             ===*/
/*===         Modified: 23 april 2020             ===*/
/*===             DEFINITION PAGE                 ===*/
/*===================================================*/

#page-definition {
	display: none;
	z-index: 1;
	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: max-content;
	grid-auto-flow: row;
	grid-column-gap: 5mm;
	grid-row-gap: 5mm;
	padding: 5mm 5mm;
	background: white;
	margin: 15mm 0 0 0;
	width: 100%;
   /* border: 1px solid #E53312;*/
}

#def-risk-card {
	grid-column: span 1;
}

@media only screen and (min-width: 14cm) {
	#page-definition { grid-template-columns: repeat(2, 1fr); }
	#def-risk-card { grid-column: span 2; }
}
@media only screen and (min-width: 30cm) {
	#page-definition { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (min-width: 46cm) {
	#page-definition { grid-template-columns: repeat(4, 1fr); }
}
@media only screen and (min-width: 56cm) {
	#page-definition { grid-template-columns: repeat(5, 1fr); }
}

.definition-card {
	display: grid;
	grid-template-columns: auto 10mm;
	grid-template-rows: 10mm auto 10mm;
	grid-gap: 0 0;
	align-content: start;
	margin: 2mm 0;
	border: 1px solid #E53312;
	border-radius: 2mm;
	padding: 0;
	min-height: 20mm;
	width: 100%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.24);
	overflow: hidden;
}
.definition-card:hover, .definition-card-select {
	outline: 0.7mm solid var(--yellow-color);
}
.definition-card:active {
	outline: 1.4mm solid var(--yellow-color);
}

.definition-card > button {
    grid-column: span 1;
    text-align: center;
    color: white;
    background-color: #E53312;
    font-size: 4.5mm;
    line-height: 6mm;
    padding: 2mm 2mm;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
	border: none;
	cursor: pointer;
}

.definition-card > button:hover {
	background-color: white;
	color: #E53312;
    box-shadow: none;
}
.definition-top {
    grid-column: span 1;
    height: 10mm;

    text-align: left;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;

    font-size: 4.5mm;
	line-height: 6mm;
    color: white;
    background-color: #E53312;
	font-weight: bold;
    padding: 2mm 2mm;
    margin: 0;
	cursor: pointer;
}

.definition-body {
    grid-column: 1 / -1;
    vertical-align: text-top;
    text-align: left;
    padding: 2mm 2mm;
	margin: 0;
}

.team-card {
	display: grid;
	grid-template-columns: 1fr 1fr 8mm;
	grid-auto-rows: max-content;
	grid-auto-flow: row;
	gap: 0;
	background: white;
	padding: 0;
	margin: 0;
	width: 100%;
	border: 1px solid #575757;
	background-color: white;
}
.team-card > button {
    grid-column: span 1;
    text-align: center;
    color: white;
    background-color: #E53312;
    font-size: 3.6mm;
    line-height: 4mm;
    padding: 2mm 2mm;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
	border: none;
	cursor: pointer;
}
.team-card > button:hover {
	background-color: white;
	color: #E53312;
    box-shadow: none;
}
.team-card > p {
    font-size: 3.6mm;
	line-height: 4mm;
	min-height: 8mm;
	padding: 2mm;
	margin: 0;
	text-align: left;
}


#matrix-window {
	grid-column: 1 / -1;
	overflow-x: auto;
}
.definition-matrix {
	position: relative;
	display: grid;
	gap: 0.4mm;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 4mm 4mm 7mm auto 4mm repeat(6, auto);
}

.definition-matrix > div {
	font-size: 2.5mm;
	line-height: 3.0mm;
	min-width: 20mm;
	text-align: center;
	border: 1px solid #575757;
}

.definition-matrix .matrix-cell {
	vertical-align: middle;
	font-size: 5mm;
	line-height: 18mm;
	font-weight: bold;
	padding: 0;
}
.definition-matrix > .bold {
	font-weight: bold;
}
.definition-matrix .cell-select {
	border: 2mm solid white;
}

.matrix-bottom {
	grid-column: span 1;
	font-size: 3.6mm;
	line-height: 6mm;
	padding: 2mm 4mm;
	margin: 0;
	text-align: left;
	color: white;
	background-color: #878787;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}
.matrix-bottom > a {
	color: white;
	text-decoration: none;
}
.matrix-bottom > a:hover {
	text-decoration: underline;
}

.definition-card > label {
    grid-column: span 1;
    height: 10mm;
    text-align: center;
    color: white;
    background-color: #878787;
    font-size: 4.5mm;
    line-height: 6mm;
    padding: 2mm 2mm;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
	border: none;
	cursor: pointer;
}
.definition-card > label:hover {
	background-color: white;
	color: #878787;
    box-shadow: none;
}


.definition-output {
	padding: 2mm 2mm;
	border: 1px solid #575757;
	min-height: 9mm;
	width: 100%;
	box-shadow: none;
    font-size: 3.6mm;
	line-height: 5mm;
	background-color: white;
	max-height: 60mm;
	overflow-y: auto;
}


#edit-def-0, #edit-def-1, #edit-def-2, #edit-def-3 {
	display: none;
}