@charset "utf-8";
/* CSS Document */
h3{
	font-weight:400;
}
		#members{
			width: 80%;
			margin-right: auto;
			margin-left: auto;
		}
		.content{
			margin-top: 5em;
					display: grid;
		grid-column-gap: 5%;
			grid-row-gap: 5em;
		grid-template-columns: 20% 80%;
		justify-content: center;  
		}	
.sidebar {
	min-width: 200px;
  	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
  	background-color: #555;
  	position: relative;
 	height: auto;
  	overflow: auto;
}

.sidebar a {
  display: block;
  color: white;
  padding: 16px;
	font-family: Basic;
  text-decoration: none;
}
 
.sidebar a.active {
  background-color: #ca0018;
	text-align: center;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}
		.content {
			margin-bottom: 20em;
		}
	table{
		width: 100%;
		border-collapse: collapse;
	}
	th,td{
		border: 1px solid #ddd;
  		padding: 8px;
	}
	table th{ 
		border: none;
		padding: 10px 5px;
		color: #ca0018;
		background-color: rgba(0,0,0,0.88);
	}
	tr:nth-child(even) {
  		background-color: #f2f2f2;
	}
	tr{
		background-color: white;
	}
	
				.membermodal{
					display: block; /* Hidden by default */
					  position: fixed; /* Stay in place */
					  z-index: 1; /* Sit on top */
					  padding-top: 100px; /* Location of the box */
					  left: 0;
					  top: 0;
					  width: 100%; /* Full width */
					  height: 100%; /* Full height */
					  overflow: auto; /* Enable scroll if needed */
					  background-color: rgb(0,0,0); /* Fallback color */
					  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
				}
				.modal-content {
				  	background-color: black;
				  	margin: auto;
				  	padding: 20px;
					text-align: center;
					border-radius: 10px;
				  	width: 80%;
					box-shadow: 0 10px rgba(167, 5, 16, 1);
				}
				.modal-footer{
					width:100%;
    				text-align: center;

				}
				.yes{
					background: green;
				}
				.no{
					background: red;
				}
		.reaction{
			width: 200px;
			margin-left: auto;
			margin-right: auto;
		}
		.acepted{
			border-left: 8px solid green;
		}
		.declimed{
			border-left: 8px solid red;
		}
		.title {
			text-align: center;
			font-size: 30px;
		}
		@media screen and (max-width: 1300px){
		.content{
			margin-top: 5em;
					display: grid;
		grid-column-gap: 5%;
			grid-row-gap: 5em;
		grid-template-columns: 100%;
		justify-content: center;  
		}		
		}