:root { --baseColor: #499B93; 
		--tableHeaderColor: #585858; 
		--hoverColor: #7c87a9; 
		--borderRadius: 10px; 
		--imageBig: 100px; 
		--imageSmall: 60px; 
		--padding: 10px;
}

html {
     font-family: 'lato', sans-serif;
     text-rendering: optimizeLegibility;
}

body {
	background-repeat: repeat;
}

table {
	width: 70%;
}

tr:nth-child(odd) {
	background-color: white;
	color: black;
}

tr:nth-child(even) {
	background-color: var(--baseColor);
	color: white;
}

td {
	/* padding: var(- -padding); */
	/* background-color: var(--baseColor); */
	text-align: center;
	vertical-align: middle;
}

tr:hover td:first-child:not(.header):not(.subheader) {
	background-color: var(--hoverColor);
}

.header {
   	background-color: var(--tableHeaderColor);
	color: white;
	font-size: 1.8em;
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
}

.header:hover  td:first-child {
	background-color: var(--tableHeaderColor);
}

.subheader {
	background-color: var(--tableHeaderColor);
    margin:0;
	color: white;
	font-size: 1.3em;
	padding: 1rem;
	margin-bottom: 2rem;
	text-align: left;
	text-transform: uppercase;
}

.table-users {
	max-width: calc(100% - 40em);
	overflow: hidden;
	width: 900px;
    float: right;
}

.TechniquesContainer {
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	position: sticky;
	position: -webkit -sticky;
	top: 0px;
	float: right;
	height: 55rem;
	width: 40rem;
}

.img-style-sticky {
	margin-left: auto;
	position: sticky;
	float: right;
	width : 25%;
	height: auto;
	width: auto;
	top:5px;
}

#TechniquesDescriptionID {
	padding: 1 rem;
	clear:right;
	background-color: #dfd9d9;
	border: 3px solid var(--baseColor);
	height: 35rem;
	width: 50rem;
	white-space: pre;
}

#DescriptionHeader {
	background-color:#d8d2e9;
	height: 5rem;
	width: 100%;
	font-size: 3vw;
    font-weight: 200;
	text-align: center;
}
#DescriptionText {
	margin: 1rem;
	font-weight: 175;
	
}


.top-left {
	width: 50%;
}

.bottom-left {
	width: 100%;
	margin-top: auto;
}