﻿:root {
	--volsuccess: #10AE13;
}
.results-panel {
	width: 98%;
}
.search-results-header,
.search-results-header span {
	font-size:15px;
	color:#000;
	font-weight:bold;
	font-style:normal;
}
.expand_all_div {
	margin-top:5px;
	margin-bottom:5px;
}
.vol-opprtunity-container {
	background-color: #FFFFFF;
	border:1px solid var(--sysBorder);
	border-radius: var(--sysBorderRadius);
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin-bottom: 10px;
	padding: 15px;
	box-sizing: border-box;
}
.vol-info-row {
	display: flex;
	width: 100%;
	min-width: 100%;
	padding-right: 20px;
	box-sizing:border-box;
}
.info-container {
	width:33.3%;
}
.info-container,
.vol-spots-left,
.vol-action-buttion {
	min-width: 33.3%;
	font-family:var(--sysFont);
}
.vol-opprtunity-container .info-container .vol-opp-name {
	font-size: 16px;
	font-weight: bold;
	margin-bottom:10px;
}

.vol-opprtunity-container .info-container .vol-opp-date {
	font-size: var(--sysFontSize);
}
.vol-opprtunity-container .info-container .volunteering-event-link {
	margin-left: 0px;
	color: #000000;
	font-weight: bold;
	font-family: var(--sysFont);
	font-size: var(--sysFontSize);
}
	.vol-opprtunity-container .info-container .volunteering-event-link a {
		font-family: var(--sysFont);
		margin-left: 5px;
		font-size: var(--sysFontSize);
		text-decoration: none;
	}
.vol-opprtunity-container .info-action {
	display: flex;
	justify-content: right;
	padding: 15px 0px 15px 10px;
}
.vol-spots-left {
text-align:center;

}
.vol-action-button {
text-align:right;
width:33.3%;
}
.vol-spots-left span {
	color: var(--volsuccess);
	min-width: 100px;
	font-size: 15px;
	font-family: var(--sysFont);
	font-weight: bold;
	display: inline-block;
}
.vol-spots-left .error_span {
	color: var(--sysErrorDark);
	min-width: 100px;
	display: inline-block;
}
.vol-action-button > a {
	background-color: var(--volsuccess);
	border-radius: var(--sysBorderRadius);
	padding: 5px 15px 5px 15px;
	margin-right: 8px;
	color: #FFF;
	font-size: 15px;
	text-decoration: none;
	font-family: var(--sysFont);
	font-weight: 500;
	transition: all .5s ease;
}
.vol-action-button > a:hover {
	background-color: #0EAB47;
}
.view-more {
	width: 16px;
	height: 16px;
	position:absolute;
	right:20px;
	cursor: pointer;
}
.view-more .material-icons {
color:#888;
font-size:24px;
}
.vol-opprtunity-details > div {
	line-height:1.3;
}
.available-slot {
	margin-top:10px;
}
	.available-slot .heading {
		font-size: var(--sysFontSize);
		font-family: var(--sysFont);
		font-weight:bold;
	}
.opp-location,
.contact-name,
.contact-phone,
.contact-email {
	font-family: var(--sysFont);
	font-size: var(--sysFontSize);
}

.opp-location span,
.contact-name span {
	font-size: var(--sysFontSize);
	font-weight:bold;
}

.contact-info {
	display: inline-grid;
}

.opp-description {
	margin-top:10px;
	font-family:var(--sysFont);
}
.opp-description .heading {
	font-weight: bold;
	font-size: var(--sysFontSize);
	font-family:var(--sysFont);
}
.vol-slot-table {
display:flex;
flex-direction:column;
}
.vol-slot-header,
.vol-slot-row {
	display: flex;
	flex: 0 0 100%;
	flex-direction:row;
	width: 100%;
}
.vol-slot-row {
	padding-bottom:5px;
	border-bottom:1px solid #cdcdcd;
}
.vol-slot-header {
padding-bottom:5px;
border-bottom:1px solid #cdcdcd;
}
.empty-footer-div {
	margin-top:5px;
}
.map-directions .material-icons {
	color: #000;
	font-size: 24px;
	vertical-align: middle;
	font-weight: normal;
}
.vol-slot-header div {
	padding: 5px;
	box-sizing: border-box;
	font-size: var(--sysFontSize);
	font-family: var(--sysFont);
	font-weight: 500;
	padding: 5px;
	padding-bottom:0px;
}
.vol-slot-row div {
	font-size: 13px;
	font-family: var(--sysFont);
	font-size: var(--sysFontSize);
	padding: 5px;
	box-sizing: border-box;
}
.vol-slot-date {
	width:10%;
}
.vol-slot-time {
	width:10%;
	max-width:125px;
}
.vol-slot-task {
	width:50%;
}
.vol-slot-title {
	font-weight:bold;
}
.vol-slot-task div {
	padding:0px;
}
.vol-slot-required {
	width:10%;
}
.vol-slot-assigned {
	width:10%;
}
.vol-add-link {
}
.vol-slot-required,
.vol-slot-assigned {
	text-align:center;
}
a.calendar-link {
color:#888;
transition:all .5s ease;
text-decoration:none;
}
a.calendar-link:hover {
	color: #0ed347;
}
.vol-slot-row span {
display:none;
}
.vol-slot-row span.material-icons {
	display:block;
}
.expand_all_div a {
	text-decoration: none;
	color: #000;
	font-weight: bold;
	font-size: 13px;
	vertical-align: middle;
	line-height:24px;
}
.expand_all_div .material-icons {
	vertical-align: middle;
	line-height: 24px;
}
.vol-start-date,
.vol-end-date {
	display:block;
}
.admin-form .form-row label {
	width: 120px;
}
.admin-form .form-row label.end-date-label {
	margin-left:10px;
}
.results-panel .paging-links,
.expand_all_div {
	display: inline-block;
	margin-left: 10px;
	position: relative;
	top: initial;
	right: initial;
}

.search-results-header {
	float: left;
	font-family: var(--sysFont);
	font-size: 18px;
	line-height: 36px;
}

.display-tools {
	float: right;
}

.paging-bottom {
	float: right;
}


@media (max-width:768px) {
	.vol-opprtunity-container {
	position:relative;
	padding-bottom:60px;
	}
	.vol-info-row {
	flex-wrap:wrap;
	}
	.info-container {
		width:100%;
	}
	.vol-spots-left {
	margin-top:10px;
	text-align:left;
	}
	.vol-action-button {
		position: absolute;
		bottom: 10px;
		left: 10px;
		right: 10px;
		width:initial;
		text-align:center;
	}
	.vol-action-button > a {
		display:block;
		padding-left:0px;
		padding-right:0px;
		text-align:center;
		margin:0px;
	}
	.vol-slot-row span {
		display: inline;
		font-weight:bold;
	}
	.vol-slot-header {
		display:none;
	}
	.vol-slot-date {
		width: 50%;
	}
	.vol-slot-time {
		width: 50%;
		max-width:initial;
	}
	.vol-slot-task {
		width: 100%;
	}
	.vol-slot-required {
		width: 40%;
		text-align:left;
	}
	.vol-slot-assigned {
		width: 40%;
		text-align:left;
	}
	.vol-slot-row {
		display:block;
	}
	.vol-slot-row div {
		display:inline-block;
	}
	.admin-form .form-row label {
		width:100% !important;
		margin-left:0px !important;
	}
	.vol-slot-row div {
		font-size: var(--sysFontSize);
		padding-left:0px;
		padding-right:0px;
	}
}