html {
    height: 100%;
    margin: 0;
}
body {
	display: flex;
	height: 100vh;
	margin: 0;
	padding: 0;
	background-color: #000;
	color: #fff;
}
label {
	display:inline-block;
	width:150px;
}
div {
	text-align:left;
}
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/images/logo.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: grayscale(100%) opacity(10%);
	z-index: -1;
}
aside {
	width: 8%;
	display: flex;
	flex-direction:column;
	justify-content: flex-start;
	border-right:1px solid #fff;
}
#menu{
	flex:95%;
}
aside #menu #menuItems div, aside #menu #adminMenuItems div {
	display: flex;
	justify-content: center;
	padding:10px;
	margin:5px;
	border:2px solid white;
	border-radius:10px;
	background-color:black;
	color:white;
	cursor:pointer;
	outline:none;
	transition:background-color 0.3s ease, color 0.3s ease;
}
aside #menu #menuItems div:hover, aside #menu #adminMenuItems div:hover {
	background-color: white;
	color: black;
}
#container {
	height:100vh;
	width: 92%;
	display: flex;
	flex-direction: column;
}
section {
	display: flex;
	flex:5%;
	justify-content: space-between;
	border-bottom:1px solid #FFF;
	padding:0 10px;
}
section span{
	font-size:1.5em;
}
article {
	overflow:auto;
	flex:95%;
	align-items: center;
	padding:10px;
}

footer {
	flex:5%;
	padding:10px;
}
footer picture, picture img {
	padding-left:10px;
}
picture img {
	height:30px;
	width:30px;
}
.flex-center {
    display: flex;
    justify-content: center;
}
.arrow {
	cursor: pointer;
	padding: 0 10px;
	font-size: 1.1em;
}

.leftArrow, .rightArrow {
	font-family: "Arial", sans-serif;
}

.Today {background-color: #777 !important;}

.currentDay:hover{
	background-color: #333 !important;
}

#checkInForm {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width:100vw;
}

.calendarDays {
	float:left;
	border:1px solid #333;
	background-color:rgba(51, 51, 51, 0.75);
	height:136px;
	width:13.9%;
	overflow:hidden;
}
.wrestler:hover, .event:hover {
	background-color:#333;
}
.ui-dialog-buttonset{
	width:100%;
}
.ui-dialog-buttonpane #membershipButton {
    float: left;
}
.ui-dialog-buttonpane #saveWrestlerButton, .ui-dialog-buttonpane  #deleteWrestlerButton, .ui-dialog-buttonpane #saveEventButton, .ui-dialog-buttonpane  #deleteEventButton {
    float: right;
}
.ui-dialog-buttonpane #saveWrestlerButton, .ui-dialog-buttonpane #saveEventButton{
	background-color:#3F7;
}
.ui-dialog-buttonpane #deleteWrestlerButton, .ui-dialog-buttonpane  #deleteEventButton{
	background-color:#FCC;
}
#wrestler label, #event label {
	width: 450px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

#wrestler label span, #event label span {
    width: 250px;
    text-align: left;
}

#wrestler input[type="text"], #wrestler input[type="date"], #wrestler input[type="number"], #wrestler select,
#event input[type="text"], #event input[type="date"], #event input[type="number"], #event select{
    width: 250px;
}

#wrestler select, #wrestler input, #event select, #event input {
    padding: 2px;
    box-sizing: border-box;
}

#wrestler input[type="checkbox"], #event input[type="checkbox"]{
    width:20px;
	height:20px;
	margin-right:230px;
}


#setupWeek label {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
}
#setupWeek input[type="text"], #setupWeek input[type="number"], #setupWeek select{
	margin-bottom:5px;
    width: 100%;
}
#setupWeek select, #setupWeek input {
    padding: 2px;
    box-sizing: border-box;
}
.checkbox-container {
  display: flex;
}
.checkbox-container .column {
  flex: 1;

}