.product article .rev i{
	color: #eee;
	font-size: 13px;
}
.product article .rev i.active {
	color: #fecb00;
	font-size: 13px;
}
label.cart-total {
	    padding: 3px;
    background: red;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    font-size: 11px;
    line-height: 12px;
    position: absolute;
    top: 5px;
    right: -10px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    cursor: pointer;
}
/*PAGING*/
.pagination {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination a {
    display: inline-block;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 6px;
    border: 1px solid #eee;
    box-sizing: border-box;
    position: relative;
    font-size: 13px;
    color: #888DA0;
    background: #fff;
    letter-spacing: 1px;
}
.pagination a.current-page, .pagination a:hover {
    color: #fff;
    background: #17a2b8;
}
.pagination a i {
    font-size: 12px;
}
.pagination>a.disabled {
    color: #a2a2a2 !important;
    background-color: transparent !important;
    cursor: default !important;
}

.institution-box-list{
	min-height: 260px !important;
}
.institution-box-list .article-title{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-bottom: 0px !important;
	height: auto !important;
	font-size: 18px;
	font-weight: 700;
	color: #257d35;
	overflow: hidden;
}
.institution-box-list .address{
	height: auto;
}

a:hover {
	cursor: pointer;
}
.relative {
	position: relative;
}
.semi-bold {
	font-weight: 600;
}
.display-flex {
	display: flex;
}
.flex-column {
	flex-direction: column;
}
.flex-item {
	flex: 1;
}
.flex-center {
	justify-content: center;
}
.flex-around {
	justify-content: space-around;
}
.flex-between {
	justify-content: space-between;
}
.flex-middle {
	align-items: center;
}
.flat-checkbox {
	display: flex;
	align-items: center;
}
.flat-checkbox > input[type="checkbox"] {
	display: none;
}
.flat-checkbox > label {
	display: flex;
	align-items: center;
	font-weight: 400;
}
.flat-checkbox > label:before {
	content: "";
	margin-right: 5px;
	width: 16px;
	height: 16px;
	text-align: center;
	line-height: 16px;
	font-family: 'Font Awesome\ 5 Free';
	font-size: 12px;
	font-weight: 900;
	color: #26A62F;
	background-color: #ffffff;
	border: 1px solid #cccccc;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.flat-checkbox > input[type="checkbox"]:checked + label:before {
	content: "\f00c";
}
.flat-checkbox > label > span {
	flex: 1;
}
[ng-message] {
	font-size: 12px;
	color: #cc0000;
}
.search-common {
	position: absolute;
	display: flex;
	bottom: -20px;
	left: 0;
	right: 0;
	height: 20px;
	line-height: 20px;
	justify-content: space-between;
	overflow: hidden;
}
.search-common>a {
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	color: #ffffff;
}
.search-common>span.spacer {
	flex: 1;
}
.white-bg {
	background-color: #ffffff;
}
.separator {
	display: block;
	padding: 15px 0;
}
.text-theme {
	color: #FF6600;
}
.text-theme-success {
	color: #2bc146;
}
.btn-wrapper {
	display: flex;
	margin-top: 20px;
	justify-content: flex-end;
}
.btn-round {
	border: none;
	outline: none;
}
.btn-custom {
	padding: 10px 20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.btn-theme {
	color: #ffffff;
	background-color: #FF6600;
}
.btn-theme:focus {
	color: #ffffff;
}
.btn-theme-success {
	color: #ffffff;
	background-color: #2bc146;
}
.btn-theme-success:focus {
	color: #ffffff;
}
.custom-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.custom-list li {
	padding: 10px 0;
}
.custom-list.background li {
	margin: 0 0 1px 0;
	padding: 10px;
	background-color: #ffffff;
}
.heading hr:before {
	background-color: #257d35;
}
.heading .heading-link {
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}
.heading {
	position: relative;
}
.heading .icons {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
.heading .icons > a {
	margin-left: 5px;
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
	color: #e2e2e2;
	border: 1px solid #e2e2e2;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
}
.heading .icons > a.active {
	color: #444444;
}
.heading .icons > .bootstrap-select {
	margin-left: 5px;
}
.heading .icons > .bootstrap-select .dropdown-toggle {
	color: #444444;
	padding: 0 20px;
	height: 30px;
	line-height: 30px;
	border: 1px solid #e2e2e2;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.heading .icons > .bootstrap-select .dropdown-toggle:hover, .heading .icons > .bootstrap-select .dropdown-toggle:focus, .heading .icons > .bootstrap-select .dropdown-toggle:active {
	outline: none !important;
	background-color: #ffffff;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	cursor: pointer;
}
.form-heading {
	margin-top: 30px;
}
.form-heading:first-child {
	margin-top: 0;
}
.form-group {
}
.form-group > label {
	font-weight: normal;
	width: 100%;
	color: #257d35;
	font-size: 14px;
}
.form-control {
	margin: 0;
	padding: 0 15px;
	height: 42px;
	min-width: 100%;
	max-width: 100%;
	line-height: 42px;
	background-color: #f6f6f6;
	border: 1px solid #cccccc;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	resize: none;
}
.form-control:hover, .form-control:focus, .form-control:active {
	border-color: #cccccc;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.form-control.bootstrap-select.btn-group {
	border: 1px solid #cccccc;
}
/*textarea.form-control {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	line-height: 20px;
}*/
.form-control.bootstrap-select.btn-group > .dropdown-toggle.btn-default {
	outline: none !important;
	padding: 0;
	height: 40px;
	line-height: 40px;
	color: #555555;
	background-color: transparent !important;
	font-size: 14px;
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.form-control.bootstrap-select.btn-group > .dropdown-toggle.bs-placeholder {
	color: #999999;
}
.form-control.bootstrap-select.btn-group > .dropdown-menu li a {
	padding: 3px 30px 3px 40px;
	height: 40px;
	line-height: 34px;
}
.form-single {
	outline: none !important;
	margin: 0;
	padding: 0;
	width: 34px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	color: #555555;
	border: 1px solid #999999;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.form-icon {
	position: relative;
}
.form-icon > i {
	position: absolute;
	left: 12px;
	top: 20px;
	cursor: pointer;
	color: #9b9fa1;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1;
}
.form-icon > a {
	position: absolute;
	right: 12px;
	top: 20px;
	cursor: pointer;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}
.form-icon.left > .form-control {
	padding: 0 15px 0 20px;
}
.form-icon.right > .form-control {
	padding: 0 40px 0 15px;
}
.form-icon.both > .form-control {
	padding: 0 20px;
}
.form-icon.left > .form-control.bootstrap-select.btn-group {
	padding-right: 0;
}

.image-upload-preview {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	border: 1px solid #cccccc;
	background-color: #f6f6f6;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	cursor: pointer;
}
.image-upload-preview.show-image:hover:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 1;
}
.image-upload-preview.show-image:hover:after {
	content: "\f093";
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: 'Font Awesome\ 5 Free';
	font-size: 50px;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.8);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	z-index: 2;
}
.image-upload-preview>span {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	text-align: center;
	white-space: nowrap;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.image-upload-preview.show-image>span {
	display: none;
}
.image-upload-preview>span>i {
	margin-bottom: 10px;
	font-size: 50px;
}
.image-upload-preview>span>p {
	margin: 0;
}
.image-upload-container {
	position: relative;
}
.image-upload-container>a {
	position: absolute;
	top: 5px;
	right: 5px;
	height: 15px;
	width: 15px;
	line-height: 15px;
	text-align: center;
	font-size: 14px;
	color: #ff0000;
	z-index: 9;
}
.image-upload-container>a>i {
	font-size: inherit;
	text-shadow: 1px 1px 3px #666666;
}
.display-list .product {
	width: 100%;
	min-height: auto;
}
.display-list .product .article {
	display: flex;
}
.display-list .product .article .article-title {
	height: auto;
}
.display-list .product .article .article-image {
	width: 380px;
	height: 240px;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}
.display-list .product .article .article-detail {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
header .menu {
	float: right;
	display: flex;
	margin: 0;
	padding: 0;
	height: 50px;
	list-style: none;

}
header .menu li {
	display: flex;
	align-items: center;
	margin-left: 15px;

}
header .menu li a {
	font-size: 14px;
	color: #4b5d73;
	cursor: pointer;
	border-right:1px solid #bababa;
	padding-right: 10px;
}
header .menu li:last-child > a{
	border-right:none;
	padding-right: 0px;
}

.layout-4 .footer-dark h4:before {
	background-color: #FF6600;
}
.banner-slide {
	width: 100%;
	height: 240px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
}
.banner-slide .slide-item {
	display: block;
	width: 100%;
	height: 240px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.category-list {
	display: flex;
	flex-direction: row;
	margin: 0 -5px;
}
.category-item {
	display: flex;
	padding: 0 15px;
}
.category-item>a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.category-item>a>img {
	width: 65%;
}
.category-item>a>span {
	margin-top: 10px;
	text-align: center;
	font-weight: bold;
}
.institution-list {
	display: flex;
	margin: 0;
	border-top: 1px solid #eee;
}
.institution-list:last-child {
	border-bottom: 1px solid #eee;
}
.institution-item {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-left: 1px solid #eee;
}
.institution-item:last-child {
	border-right: 1px solid #eee;
}
.institution-item > a {
	display: block;
	width: 100%;
}
.institution-item .institution-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.article {
	position: relative;
	margin: 0;
	background-color: #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.article .article-image {
	display: block;
	height: 160px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.article .article-detail {
	padding: 15px;
}
.article .article-title {
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-bottom: 5px;
	height: 50px;
	font-size: 18px;
	font-weight: 700;
	color: #257d35;
	overflow: hidden;
}
.article .article-institution {
	color: inherit;
}
.article .article-institution:hover, .article .article-institution:focus, .article .article-institution:active {
	color: #FF6600;
}
.article .article-progress {
	position: relative;
	margin: 5px 0;
	height: 8px;
	background-color: #eee;
	overflow: hidden;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.article .article-progress>.progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	height: 8px;
	max-width: 100%;
	background-color: #2bc146;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.article .article-resume {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
.article .article-resume .resume-item {
	font-size: 0.85em;
}

.program {

}

.program-image-slide {
	width: 100%;
	height: 360px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
}
.program-image-slide .slide-item {
	width: 100%;
	height: 360px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.program-title {
	margin-bottom: 0;
}
.program-location {
	font-size: 16px;
	font-weight: 600;
}
.program-location > a {
	cursor: pointer;
	color: inherit;
}
.program-info {
	display: flex;
	flex-direction: row;
}
.program-info .info-item {
	flex: 1;
	display: flex;
	flex-direction: row;
}
.program-info .info-item .info-image {
	display: block;
	height: 100px;
	width: 100px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.program-info .info-item .info-detail {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 10px;
}
.program-info .info-item .info-detail .title {
	font-size: 12px;
}
.program-info .info-item .info-detail .name {
	font-size: 22px;
	font-weight: 600;
	color: inherit;
}
.program-info .info-item .info-detail .name:hover, .program-info .info-item .info-detail .name:focus, .program-info .info-item .info-detail .name:active {
	color: #FF6600;
}
.program-detail {
	display: flex;
	flex-direction: column;
	font-size: 16px;
}
.program-detail .detail-achievement {
	font-size: 36px;
	font-weight: 700;
}
.program-detail .detail-targeted {
	margin-bottom: 20px;
}
.program-detail .detail-percentage {
	position: relative;
	margin-bottom: 10px;
	height: 16px;
	width: 100%;
	background-color: #ffffff;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	overflow: hidden;
}
.program-detail .detail-percentage .percentage-achievement {
	position: absolute;
	top: 0;
	left: 0;
	height: 16px;
	width: auto;
	background-color: #2bc146;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.program-detail .detail-resume {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
.program-detail .detail-resume .resume-item {
	font-size: 0.85em;
}
.featur-tabs .sticky-wrapper {
	width: inherit;
}
.featur-tabs .sticky-wrapper .nav-tabs {
	width: inherit;
	background-color: #ffffff;
	z-index: 1;
}
.featur-tabs .sticky-wrapper .nav-tabs li a {
	transition: none;
}
.featur-tabs .sticky-wrapper .nav-tabs li.active a, .featur-tabs .sticky-wrapper .nav-tabs li:hover a {
	border-bottom: 2px solid #FF6600 !important;
}
.program-update {
	position: relative;
	padding-left: 80px;
}
.program-update:before {
	content: "";
	position: absolute;
	top: 30px;
	bottom: -67px;
	left: 12px;
	width: 1px;
	background-color: #ccd0d3;
}
.program-update .update-item {
	position: relative;
	margin-bottom: 25px;
	padding: 25px;
	background-color: #ffffff;
	border: 1px solid #ccd0d3;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.program-update .update-item:last-child {
	float: left;
}
.program-update .update-item:before {
	content: "";
	position: absolute;
	top: 29px;
	left: -75px;
	width: 12px;
	height: 12px;
	background-color: #26A62F;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.program-update .update-item .update-header {
	margin-bottom: 20px;
	border-bottom: 1px solid #ccd0d3;
}
.program-update .update-item .update-header > .date {
	font-size: 0.85em;
	font-weight: 600;
	color: #acacac;
}
.program-update .update-item .update-header > .title {
	margin: 0 0 10px 0;
	font-size: 22px;
	font-weight: 800;
}
.program-update .update-item .update-body {
	position: relative;
}

.program-donatur {
	position: relative;
}
.program-donatur:after {
	content: "";
	display: block;
	clear: both;
}
.program-donatur .donatur-item {
	float: left;
	display: flex;
	padding: 0 20px 30px 0;
	width: calc(100% / 3);
}
.program-donatur .donatur-item .avatar {
	margin-right: 10px;
	height: 50px;
	width: 50px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.program-donatur .donatur-item .info {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.program-donatur .donatur-item .info .amount {
	font-size: 18px;
	font-weight: 700;
}
.program-donatur .donatur-item .info .name {
	font-weight: 800;
}
.program-donatur .donatur-item .info .time {
	font-size: 0.85em;
	font-weight: 600;
	color: #acacac;
}

.institution-banner {
	position: relative;
	margin-bottom: 20px;
	height: 240px;
	background-color: #ffffff;
	border-bottom: 1px solid #e2e2e2;
}
.institution-banner .banner-image {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 40px;
	right: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.institution-banner .banner-image:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(rgba(0,0,0,0) 33%, rgba(0,0,0,0.07) 50%, rgba(0,0,0, 0.60) 100%);
}
.institution-banner > .container {
	position: relative;
	height: inherit;
}
.institution-profile {
	position: absolute;
	bottom: 0;
	left: 15px;
	right: 15px;
}
.institution-profile .profile-image {
	position: absolute;
	bottom: 15px;
	left: 0;
	height: 100px;
	width: 100px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 3px solid #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 15px -5px #9e9e9e;
	-moz-box-shadow: 0 0 15px -5px #9e9e9e;
	box-shadow: 0 0 15px -5px #9e9e9e;
}
.institution-profile .profile-detail {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0 15px 0 115px;
}
.institution-profile .profile-name {
	margin-bottom: 3px;
	font-size: 28px;
	font-weight: 700;
	color: #ffffff;
	-webkit-text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
	-moz-text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}
.institution-profile .profile-name > img {
	margin-left: 10px;
	height: 22px;
}
.institution-profile .profile-nav {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	margin: 0 -15px;
	height: 40px;
}
.institution-profile .profile-nav .nav-item {
	position: relative;
	margin: 0 5px;
	padding: 5px 10px;
	color: #999999;
	font-weight: 600;
}
.institution-profile .profile-nav .nav-item:after {
	content: "";
	position: absolute;
	top: 3px;
	right: -5px;
	bottom: 3px;
	border-right: 1px solid #e2e2e2;
}
.institution-profile .profile-nav .nav-item:last-child:after {
	display: none;
}
.institution-profile .profile-nav .profile-nav-right {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.institution-profile .profile-nav .btn {
	margin: 0;
	padding: 0 20px;
	height: 31px;
	line-height: 26px;
	font-size: 12px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
}
.institution-profile .profile-nav .btn:hover {
	border: 2px solid #fff;
}
.nav-rating {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.nav-rating > i {
	color: #FFC107;
}
.nav-rating > span {
	margin-left: 10px;
}
.institution-summary {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.institution-summary > div {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	margin-left: 10px;
}
.institution-summary > span > i {
	font-size: 34px;
	color: #999999;
}

.account-nav-container {
	/*width: inherit;*/
}
.account-nav {
	position: relative;
	display: flex;
	padding: 15px 20px;
	flex-direction: column;
	background-color: #f8fef9;
	border: 1px solid #e5e5e5;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.account-nav .account-nav-heading {
	margin: 0 0 15px 0;
	font-size: 16px;
	font-weight: 800;
	color: #5b5151;
}
.account-nav > a {
	position: relative;
	padding: 10px 0;
	color: #666666;
	font-weight: 600;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}
.account-nav > a > i {
	color: #a9a9a9;
}
.account-nav > a:hover {
	color: #0088cc;
}
.account-nav > a:hover > i {
	color: #0088cc;
}
.account-nav > a.active {
	color: #0088cc;
}
.account-nav > a.active > i {
	color: inherit;
}

.account-nav > a:after {
	content: "\f105";
	position: absolute;
	top: 50%;
	right: 0;
	font-family: 'Font Awesome\ 5 Free';
	font-size: 16px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}
.account-nav > .separator {
	margin: 0 0 20px 0;
	border-bottom: 1px solid #e5e5e5;
}
@media (max-width: 767px) {
	.category-list {
		flex-flow: row wrap;
	}
	.category-item {
		justify-content: center;
		width: calc(100% / 3);
	}
	.category-item.flex-item{
		flex:none;
	}
	.institution-list {
		flex-flow: row wrap;
	}
	.institution-item{
		width: 20%;	
	}
	.institution-item.flex-item{
		flex:none;
	}
}

/*Thumbnail Image*/
.thumbnail-product {
	width: 100%;
    height: 285px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.flex-control-thumbs img {
	height: 100px !important;
}
.tbl-price{
	width: 100%;
	border: 1px solid #eee;
	margin-bottom: 20px;
}
.tbl-price tr td {
	height: 30px;
	text-align: center;
	border: 1px solid #eee;
}
.nav-bar-profile {
	width: 92px;
}
.nav-bar-profile .avatar {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    height: 30px;
    width: 30px;
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #ffffff;
    border-radius: 50%;
}
.flex-caption {
  width: 100%;
  padding: 2%;
  left: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  font-size: 14px;
  line-height: 18px;
}
#account-nav{
	margin-bottom: 20px;
}
.content-nav-heading{
	font-size: 16px;
	font-weight: bold;
	padding:10px;
	border:1px solid #eee;
	margin-bottom: 20px;
}
.shadow {
	-webkit-box-shadow: 0 1px 16px rgba(57, 63, 72, 0.3);
	-moz-box-shadow: 0 1px 16px rgba(57, 63, 72, 0.3);
	box-shadow: 0 1px 16px rgba(57, 63, 72, 0.3);
}
ul, ol {
	padding:0px;
}
.input-style {
	padding: 13px 40px;
    border: 1px solid #cccccc;
    transition: all .3s ease;
    font-size: 14px;
    color: #273f5b;
    margin-bottom: 0px;
    border-radius: 50px;
    background-color: #fff;
    /*box-shadow: 0 0 30px 0 rgba(18, 25, 33, 0.15);*/
    width: 100%;
    outline: none;
}
.textarea-style {
	padding: 13px 20px;
    border: 1px solid #cccccc;
    transition: all .3s ease;
    font-size: 14px;
    color: #273f5b;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #fff;
    /*box-shadow: 0 0 30px 0 rgba(18, 25, 33, 0.15);*/
    width: 100%;
    outline: none;
}
.select-style {
	padding: 0px 40px;
    border: 1px solid transparent;
    transition: all .3s ease;
    font-size: 14px;
    color: #273f5b;
    margin-bottom: 20px;
    border-radius: 50px;
    background-color: #fff;
    box-shadow: 0 0 30px 0 rgba(18, 25, 33, 0.15);
    width: 100%;
    outline: none;
    height: 42px !important;
}
.with-icon {
	padding-left: 60px !important;
}
.form-icon i:first-child {
	position: absolute;
    left: 20px;
    top: 22px;
    height: 16px;
    fill: #6987ab;
    border-right: 1px solid #dbe3ec;
    padding-right: 17px;
    z-index: 1;
    transition: all .3s ease;
}
.form-icon a.show-pass i {
	position: absolute;
    left: -15px;
    top: -4px;
    height: 16px;
    fill: #6987ab;
    border-right: none;
    padding-right: 17px;
    z-index: 1;
    transition: all .3s ease;
}
.form-control:focus {
	background: #ffffff !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
input:-webkit-autofill {
    /*-webkit-box-shadow: 0 0 30px 0 rgba(18, 25, 33, 0.15) ;*/
}
.disable-btn{
	background: #bbbbbb !important;
}
/*@media screen and (max-width: 768px) {
	.sidebar-menu {
		position: absolute !important;
		width: 96% !important;
		display: none;
		z-index: 999;
	}
}*/
.saldo{
	color:#ff6600;
	font-size: 19px;
}
input[type=number]:focus {
	outline:none;
}
#dialog-address {
	padding: 10px 30px;
}
#dialog-address .modal-header {
	padding: 20px;
}
#dialog-address .modal-body{
	padding: 20px 20px 20px 0;
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
}
#dialog-address .modal-header h4{
	color: #bababa;	
	font-size: 20px;
	font-weight: bold;
}
.add-new-address{
	padding: 10px 20px;
	text-align: center;
	border: 1px dashed #bababa;
	color: #bababa;
	cursor: pointer;;
	margin-bottom: 20px;
	border-radius: 10px;
}
.item-address{
	padding: 20px;
	border: 1px solid #28887f;
	color: #bababa;
	cursor: pointer;;
	margin-bottom: 20px;
	border-radius: 10px;
	position: relative;
}
.item-address.active {
	border: 1px solid #c5c5c5;
}
.add-new-address h5{
	color: #bababa;	
	font-size: 16px;
	font-weight: 600;
}
.select-address {
	color:#fff;
	background: #28887f;
	padding: 8px 15px;
	border:none;
	outline: none;
	border-radius: 10px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 20px;
	font-size: 14px;
}
.btn-cancel{
	border: 1px solid #c5c5c5;
	color: #000;
	padding: 8px 15px;
	border-radius: 8px;
	background:#fff;
	margin: 5px;
}
.btn-add{
	border: 1px solid #c5c5c5;
	color: #fff;
	background: #03ac0e;
	padding: 8px 15px;
	border-radius: 8px;
	margin: 5px;
}

/*Select*/
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	box-shadow: none;
	border: 0 !important;
	background: #fff;
	background-image: none;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select */
.select {
  position: relative;
  display: flex;
  width: 20em;
  height: 3em;
  line-height: 3;
  background: #fff;
  overflow: hidden;
  border-radius: 15px;
}
select {
  	flex: 1;
  	padding: 0 .5em;
  	color: #000;
  	cursor: pointer;
}
/* Arrow */
.select::after {
	  content: '\25BC';
	  position: absolute;
	  top: 0;
	  right: 0;
	  padding: 0 1em;
	  background: #fff;
	  cursor: pointer;
	  pointer-events: none;
	  -webkit-transition: .25s all ease;
	  -o-transition: .25s all ease;
	  transition: .25s all ease;
}
/* Transition */
.select:hover::after {
  	color: #f39c12;
}

.table-cart {
	border: 1px solid #c5c5c5;
	width: 100%;
	padding: 20px;
}
.nbtn {
	border: 1px solid #e2e2e2;
    border-radius: 4px;
    color: #888888;
    background: none !important;
    font-size: 12px;
    box-shadow: none;
    padding: 8px 20px;
}

/*Address Item*/
.order-address {
	width: 100%;
	position: relative;
	box-sizing: border-box;
	border: 1px solid #c5c5c5;
	margin-bottom: 20px;
	border-radius: 4px;
}
.order-address:last-child {
	margin-bottom: 0;
}
.order-address .item{
	padding: 0;
	margin: 0;
}
.order-address .item li{
	list-style: none;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 10px;
	border-bottom: 1px solid #c5c5c5;
}
.order-address .item li:last-child{
	border-bottom: 0;
}
.order-address .item li .wrapper-img {
	width: 100px;
	height: auto;
}

.order-address .item li .wrapper-img img {
	width: 100%;
	height: auto;
}
.order-address .item li .wrapper-info {
	width: calc(100% - 100px);
	height: auto;
	padding: 0 10px 10px 10px;
	display: flex;
	flex-direction: column;
}

.order-address .address{
	padding: 10px;
	display: flex;
	flex-direction: column;
	height: auto;
}
.order-address .address address {
	margin-bottom: 10px;
}
.wrapper-btn {
	display: flex;
}
.order-address .courier{
	padding: 10px;
}
.order-address .summary{
	padding: 10px;
	text-align: right;
	border-top: 1px solid #c5c5c5;
}
.order-address .note {
	padding:10px;
}
.divider {
	/*border-bottom: 1px solid #c5c5c5;*/
}

.m-r-10 {
	margin-right: 10px;
}
.grand-summary {
    background: #ebffff;
    border: 1px solid #c5c5c5;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 30px;
    border-radius: 4px;
}


/*Hisoty*/
.panel-body {
		padding: 0px 15px 15px;
	}
	.panel-heading{
	    font-size: 16px !important;
	    font-weight: 800 !important;
	    color: #5b5156 !important;
	    background-color: #f8fef9 !important;
	}
	.transaction-list {
	    position: relative;
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    width: 100%;
	    padding-bottom: 10px;
	    padding-top: 10px;
	    border-bottom: 1px solid #a7a7a7;
	}
	.transaction-list:last-child{
		border-bottom: none;	
	}
	.transaction-info {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: flex-start;
	    min-height: 100px;
	    padding: 0px 10px;
	    width: 36%;
	    /*border: 1px solid #d8d5d5;*/
	    /*background: #d5f7ca;*/
	}
	
	.transaction-info h6{
		margin:0px 0px 10px 0;
		font-size: 14px;
	}
	.transaction-info h4{
		margin: 0 0 7px 0;
		font-size: 22px;
		font-weight: bold;
	}
	.transaction-program{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		min-height: 150px;
		padding:3px 20px;
		width: 100%;	
	}
	.transaction-program ul{
		display: flex;
		flex-direction: row;
	    flex-flow: row wrap;
	    align-items: center;
		width: 100%;
	}
	.transaction-program ul li{
		list-style: none;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding:10px 0px 10px 0;
		width: 33.33%;
	}
	.transaction-program ul li .img{
		width: 40px;
		height: 60px;
		background-size: cover;
		background-position: center;
		margin-right: 10px;

	}
	.transaction-program ul li .info{
		display: flex;
		flex-direction: column;
		width: calc(100% - 40px);
	}
	.transaction-program ul li .info p{
		margin: 0px 0;
		font-size: 12px;
	}
	.transaction-program ul li .info span{
		font-weight: bold;
	}
	.transaction-program ul li .info p.title {
		color: #ce4e4e !important;
		line-height: 14px;
	}
	.transaction-list:hover {
		background: #f3f3f3;
		cursor: pointer;
	}
	.btn-detail {
		color: #fff;
	    background-color: #16989f;
	    border-color: #27bff9;
	    border: 1px solid #eee;
	    font-size: 13px;
	    padding: 3px 15px;
	}
	.btn-detail:hover {
		cursor: pointer;
		color: #fff;
	    background-color: #088396;
	    border-color: #204d74;
	}
	.lbl-items {
		margin-top: 10px;
		margin-bottom: 0px;
	}
	.right-btn-icon {
		margin-left: 5px;
		font-size: 11px;
	}
	.m-t-10 {
		margin-top: 10px;
	}
	/*Detail*/
	.items{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.items .name{
		width: 40%;
	}
	.items .price{
		width: 80px;
	}
	.items .total-item{
		width: 80px;
	}
	.items .total{
		width: 100px;
	}
	.order-total {
		width: 100%;
		flex-direction: column;
		display: flex;
	}
	.order-total li{
		display: flex;
	}	
	.item-list {
		width: 100%;
		margin-bottom: 10px;
	}
	.order-total{
		border-top: 1px solid #e8e8e8;
		padding:10px 0;
	}
	.text-success {
		background: #ebffff;
	    padding: 10px;
	    line-height: 28px;
	    border: 1px solid #c5c5c5;
	    border-radius: 4px;
	    font-size: 18px;
	}
	.lh-20{
		line-height: 20px;
	}
	.p-t-10 {
		padding-top: 10px;
	}
@media only screen and (max-width: 600px) {
	.thumbnail-product {
	    width: 100%;
	    height: 400px;
	    background-size: 100%, cover;
	    background-repeat: no-repeat;
	    background-position: center top;
	}
	.transaction-list {
		flex-direction: column;
	}
	.transaction-info{
		width: 100%;
	}
	.transaction-program ul li .img {
	    width: 90%;
	    height: 150px;
	    background-size: cover;
	    background-position: center top;
	    margin-right: 10px;
	    margin-bottom: 10px;
	}
	.transaction-program ul li {
	    list-style: none;
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    padding: 10px 0px 10px 0;
	    width: 50%;
	    flex-wrap: wrap;
	}
	.select-address {
		top: 25%;
	}
	.modal-dialog {
		width: 95% !important;
	}
}