/*
body, html {
  min-height: 100vh;
}
*/

@media (max-width: 576px) {
	#container {
		height: auto !important;
		overflow-x: hidden;
	}
}

#content {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
#bodyContainer {
  flex: 1;
}

#footerContainer {
	border-top: 1px solid #e0e0e0;
	text-align: center;
	padding: 5px 0;
}

#sidebar {
	background: #f5f5f5;
	border-bottom: 2px solid #e0e0e0;
}

#sidebar>h1 {
	font-family: "Raleway", serif;
	font-weight: 900;
	text-align: center;
	letter-spacing: -0.5px;
}

#content {
	background: #ffffff;
	box-shadow: -8px 0 6px -6px rgba(0,0,0,0.3);
}

#genericEventImageContainer {
	height:150px;
	border-radius: 5px;
}

#genericEventImageContainer:before {
	content: '';
	background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(242,245,249,0) 75%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%);
	position: absolute;
	width: 97%;
	height: 150px;
}

#eventImageContainer {
	height:300px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 5px;
}

#eventImageContainer:before {
	content: '';
	background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(242,245,249,0) 85%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%);
	position: absolute;
	width: 100%;
	height: 300px;
}

#eventName {
	padding: 0 0 0 10px;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

#eventPrivacy {
    text-transform:capitalize;
}

#eventFromNow {
	padding-left: 25px;
}

#eventFromNow::first-letter {
	text-transform:capitalize;
}

/*
.location, .eventLink {
	display: flex;
	width: 100%;
	justify-content: space-between;
}
*/

.attendeesList {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

.attendeesList > li {
	height: 80px;
	width: 80px;
	border: 4px solid #0ea130;
	border-radius: 50%;
	margin-right: 5px;
	margin-bottom: 5px;
	background: #57b76d;
	color: white;
	font-size: 0.95em;
	font-weight: bold;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.expand {
	-webkit-transition: height 0.2s;
	-moz-transition: height 0.2s;
	transition: height 0.2s;
}

.eventInformation {
	margin-left: 1.6em;
}

.eventInformation > li {
/*  line-height: 2.1em;*/
	margin-bottom: 0.8em;
}

.eventInformation > li > .eventInformationAction {
	margin-left: 5px;
}

.commentContainer {
	background: #fafafa;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #dfdfdf;
}

.replyContainer {
	display: none;
	background: #efefef;
	padding: 10px;
	border-radius: 0 0 5px 5px;
	border-bottom: 1px solid #d2d2d2;
	border-left: 1px solid #d2d2d2;
	border-right: 1px solid #d2d2d2;
	width: 95%;
	margin: -10px auto 10px auto;
}

.repliesContainer {
	font-size: smaller;
	padding-left:20px;
}

/* IMAGE UPLOAD FORM */


#image-preview {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  color: #ecf0f1;
	border-radius: 5px;
	border: 1px dashed #ced4da;
}
#image-preview input {
  line-height: 200px;
  font-size: 200px;
  position: absolute;
  opacity: 0;
  z-index: 10;
}
#image-preview label {
  position: absolute;
  z-index: 5;
  opacity: 0.8;
  cursor: pointer;
  background-color: #ced4da;
	color: #555;
  width: 200px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  text-transform: uppercase;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
	border-radius: 5px;
}

.datepickers-container {
	z-index: 1600 !important; /* has to be larger than 1050 */
}

#newEventFormContainer,
#importEventFormContainer {
	display: none;
}

#icsImportLabel {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #6c757d;
}

.select2-container {
	width: 100% !important;
}
.select2-selection__rendered {
    line-height: 2.25rem !important;
}
.select2-container .select2-selection--single {
    height: 2.25rem !important;
}
.select2-selection__arrow {
    height: 2.25rem !important;
}

#removeAttendee {
	color: #fff;
}

#removeAttendee:hover {
	color: #016418;
}

#eventAttendees h5 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
#eventAttendees h5 .btn-group {
	margin-top: 0.5rem;
}

@media (min-width: 577px) {
	#sidebar {
		border-right: 2px solid #e0e0e0;
		min-height: 100vh;
	}
	body {
		background: #f5f5f5; /* Old browsers */
		background: -moz-linear-gradient(left, #f5f5f5 0%, #f5f5f5 50%, #ffffff 51%, #ffffff 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #f5f5f5 0%,#f5f5f5 50%,#ffffff 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #f5f5f5 0%,#f5f5f5 50%,#ffffff 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
	}
	#eventAttendees h5 {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	#eventAttendees h5 .btn-group {
		margin-top: 0;
	}
}