.lwa-section--ngo-banner {
	.lwa-title {
		padding:50px 0 20px 0;
	}
	.lwa-row {
		> h2 {
			margin:0 0 0 0;
		}
	}
}
.ngo-section {
	margin-top:-166px;
}
@media only screen and (max-width: 767px) {

}

.ngo-cards {
	max-width:100%;
	overflow-x:auto;
	overflow-y:visible;
	
	.ngo-wrap {
		display:flex;
		flex-direction:row;
		max-width:100%;
		padding:0;
		
	}
	.ngo-card-wrap {
		padding:180px 0 44px 44px;
		flex: 0 0 350px;	
		display:flex;
	}
	#ngoCardPost {
		flex: 0 0 calc(100% - var(--lwa-width-nav) - 169px);
	}
	.ngo-card {
		flex:0 0 350px;
		border-radius:5px;
		margin:0;
		border: var(--lwa-border);
		background: var(--lwa-bg-color);
		box-shadow: var(--lwa-shadow-2);
		overflow:hidden;
		
		
		&[data-card-status="1"] {
			
		}
		&[data-card-status="2"] {
			border: 1px solid var(--lwa-green-2);
			box-shadow: 0 0px 1px 3px var(--lwa-green-1);
		}
		&[data-card-status="3"] {
			border: 1px solid var(--lwa-green-2);
			box-shadow: 0 0px 1px 3px var(--lwa-green-1);
			background: var(--lwa-white);
			background: linear-gradient(180deg, var(--lwa-white) 0%, var(--lwa-white) 62%, rgba(21, 175, 104, 0.1) 100%);
		}

		> .ngo-card__row {
			display:flex;
			flex-direction:column;
			position:relative;
			height: 100%;
		}
		
		.ngo-block { }
		
		.ngo-block--progress {

			> li {
				display:flex;
				flex-direction:column;
				padding: 10px 20px;

				> .title {
					display:flex;
					flex-direction:row;

					h3 {
						flex: 1 1 auto;
						margin:0 0 8px 0;
						line-height:26px;					
					}
				}


				> .bar {
					height:10px;
					border-radius:5px;
					width:100%;
					background: var(--lwa-gray-1);
					border: var(--lwa-border);
					overflow: hidden;

					> .meter {
						width:0%;
						background-color:var(--lwa-green-2);
						height: 100%;
						border-radius: 5px 0 0 5px;
						
						&[data-progress="0"] {
							width:0%;
						}
						&[data-progress="3"] {
							width:3%;
						}
						&[data-progress="20"] {
							width:20%;
						}
						&[data-progress="25"] {
							width:25%;
						}
						&[data-progress="40"] {
							width:40%;
						}
						&[data-progress="50"] {
							width:50%;
						}
						&[data-progress="60"] {
							width:60%;
						}
						&[data-progress="75"] {
							width:75%;
						}
						&[data-progress="80"] {
							width:80%;
						}
						&[data-progress="100"] {
							width:100%;
						}
					}
				}

				> .status {
					display:flex;
					flex-direction:row;
					padding:5px 0 20px 0;

					> .icon {
						flex:0 0 20px;

						img {
							display: block;
							width: 14px;
							height: 14px;
							line-height:18px;
							margin: 2px auto 0 auto;
							filter:var(--lwa-f-gray-2);
						}
					}
					> .text {
						padding:0 0 0 2px;
						font-size:.8rem;
						height:18px;
						line-height:18px;
						color:var(--lwa-gray-2);
					}
				}

				> .tasks {
					padding:0;

					> li {
						display:block;
						position:relative;
						padding:0 0 0 34px;

						&::before {
							content:"";
							display:block;
							width:24px;
							height:24px;
							border-radius:50%;
							background:var(--lwa-gray-1);
							position:absolute;
							top:0;
							left:0;
							background-repeat:no-repeat;
							background-size: 15px 15px;
							background-position:center center;
							z-index:2;
						}

						&::after {
							content:"";
							display:block;
							width:0px;
							height:calc(100% - 32px);
							margin-top:28px;
							border-left: 3px dotted var(--lwa-gray-1);
							position:absolute;
							top:0;
							left:11px;
							z-index:1;
						}

						.label {
							font-size:.9rem;
							height:20px;
							line-height:20px;
							font-weight:500;
							color:var(--lwa-gray-2);
						}
						.desc {
							font-size: .80rem;
							color: var(--lwa-gray-2);
							line-height: 16px;
							padding-bottom:20px;
							font-weight:normal;
							min-height:42px;
						}
						.action {
							&.link {
								text-decoration:none;
								border-bottom: 1px solid var(--lwa-blue-2);
		
								&:hover {
									border-bottom: 1px solid var(--lwa-blue-3);
								}
							}
							&.link--calendly-cancel {
								color:var(--lwa-red-2);
								border-bottom: 1px solid var(--lwa-red-2);
		
								&:hover {
									color:var(--lwa-red-3);
									border-bottom: 1px solid var(--lwa-red-3);
								}
							}
						}
					}
					
					> li[data-task-status="1"] { /* Incomplete */
						
					}
					
					> li[data-task-status="2"],
					> li[data-task-status="3"] { /* Pending */
						&::before {
							background: transparent;
							outline: 2.5px solid var(--lwa-green-2);
							width: 21px;
							height: 21px;
							top: 1.5px;
							left: 1.5px;
						}
						&::after {
							margin-top:28px;
							border-left: 3px dotted var(--lwa-green-2);
							height:calc(100% - 32px);
						}
						.label { 
							font-weight:500;
							color:var(--lwa-body-color);
						}
						.desc {
							color: var(--lwa-body-color);
						}
					}
					
					> li[data-task-status="4"] { /* Skipped */
						&::before {
							background-image:url(/images/0/lci/lci-check-solid-white.svg);
							background-color:var(--lwa-red-2);
						}
						&::after {
							margin-top:0;
							height:100%;
							border-left: 3px solid var(--lwa-red-2);
						}
					}
					
					/* other */
					> li[data-task-status="9"] {
						&::before {
							background: transparent;
							outline: 2.5px solid var(--lwa-red-2);
							width: 21px;
							height: 21px;
							top: 1.5px;
							left: 1.5px;
						}
						&::after {
							margin-top:28px;
							border-left: 3px dotted var(--lwa-red-2);
							height:calc(100% - 32px);
						}
						.label { 
							font-weight:500;
							color:var(--lwa-body-color);
						}
						.desc {
							color: var(--lwa-body-color);
						}
					}
					
					> li[data-task-status="5"] { /* Complete */
						&::before {
							background-image:url(/images/0/lci/lci-check-solid-white.svg);
							background-color:var(--lwa-green-2);
						}
						&::after {
							margin-top:0;
							height:100%;
							border-left: 3px solid var(--lwa-green-2);
						}
					}
					

					> li.end {
						padding-bottom:10px;
						&::after {display:none;}
						.desc {min-height:unset;padding-bottom:0;}
					}
				}
			}
		}
		
		.ngo-block--teaser {
			flex: 1 1 100%;
			display:flex;
			flex-direction:column;
			padding: 0 20px 20px 20px;
			
			&::before {
				display:block;
				content:"";
				border-radius:5px;
				overflow:hidden;
				position:absolute;
				top:80px;
				left:0;
				width:100%;
				height:calc(100% - 80px);
				background: var(--lwa-white);
				z-index:3;
			}
			
			.wrap {
				flex: 1 1 auto;
				text-align:center;
				z-index:4;
				
				.image {
					img {
						display:block;
						margin:0 auto;
						width:36px;
						height:auto;
						padding-bottom:10px;
						filter:var(--lwa-f-body-color);
					}
				}
				.label {
					font-size:.9rem;
					font-weight:500;
				}
				.desc {
					font-size:.8rem;
					color:var(--lwa-gray-2);
				}
			}
		}
	}
}

@media only screen and (max-width: 767px) {
	.lwa-section--ngo-banner {
		.lwa-title {
			padding:20px 0;
		}
	}
	.ngo-section {
		margin-top:-158px;
	}
	.ngo-cards {
		#ngoCardPost {
			flex:0 0 calc(100% - 370px);
		}
		.ngo-card-wrap {
			padding:178px 0 20px 20px;

			&:first-of-type {
				padding-left:20px;
			}
		}
	}
}