/* Growth Item - Landing Page - Dashboard
1. Move recommended jobs to the top.
2. Add member profile in mobile view. */
/*-------------------------------------------------------*/
.memb-dashboard .box .basic-info { display: flex; }
.memb-dashboard .box .basic-info .photo { flex-shrink: 0; }

@media only screen and (max-width: 991px) {
	.memb-dashboard .box { background: #f9f9f9; padding: 15px; }
	.memb-dashboard .box .basic-info .info-details .name { font-size: 18px; }
	.memb-dashboard .col-sm-12:first-child { padding-right: 15px; }
	.memb-dashboard .memb-info { margin-bottom: 15px; display: block; }
	.memb-dashboard .improve-profile { display: none; }
}

@media only screen and (max-width: 468px) {
	.memb-dashboard .box .basic-info .info-details .job-title { font-size: 14px; padding-top: 2px; }
	.memb-dashboard .box .basic-info .photo { width: 60px; height: 60px; }
	.memb-dashboard .profile-strength { flex-direction: column; align-items: flex-start; }
	.memb-dashboard .profile-strength .update-profile { margin-top: 8px; }
}



/* Add Saved Jobs Badge */
/*-------------------------------------------------------*/
.memb-dashboard .others-info .icon,
.memb-dashboard .others-info .box .manage {
	flex-shrink: 0;
}

.memb-dashboard .others-info .title {
	width: 100%;
	justify-content: flex-start;
}

.memb-dashboard .others-info .job-info .box .text {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.memb-dashboard .others-info .num-of-job {
	min-width: 30px;
	padding: 3px 6px;
	text-align: center;
	margin: 0 4px 0 0;
}


/* PTgoodjobs Mini Ad
/*-------------------------------------------------*/
.with-ptgoodjobs-ad .trending-jobs-container {
	flex: 1 0 0;
	width: 100%;
	max-width: 100%;
	overflow-x: unset;
}

.trending-jobs.with-ptgoodjobs-ad .title {
	margin-bottom: 8px;
}

.ad-ptgoodjobs {
	background-color: #009097;
}

.ad-ptgoodjobs.desktop {
	display: none;
	margin-top: -20px;
	margin-bottom: -24px;
	margin-right: 12px;
	min-width: 212px;
}

.trending-jobs.with-ptgoodjobs-ad .row {
	flex-wrap: nowrap;
}

.ad-ptgoodjobs .row {
	margin-left: 0;
	margin-right: 0;
}

.ad-ptgoodjobs .msg {
	color: #FCCF00;
	font-weight: 700;
	padding: 12px;
}

.ad-ptgoodjobs .msg img {
	height: 54px;
	padding-top: 12px;
}

.ad-ptgoodjobs .img-mobile {
	position: relative;
}

.ad-ptgoodjobs .img-mobile img {
	position: absolute;
	bottom: -14px;
	z-index: 10;
	animation: popup 1s ease-in-out;
}

.ad-ptgoodjobs.mobile {
	display: flex;
	place-content: center;
	padding: 0;
}

.ad-ptgoodjobs.mobile .row {
	display: flex;
	flex-wrap: nowrap;
}

.ad-ptgoodjobs.mobile .img-mobile {
	margin-left: 12px;
	width: 94px;
}

.ad-ptgoodjobs.mobile .img-mobile img {
	width: 88px;
}

.ad-ptgoodjobs.mobile .msg {
	padding: 6px;
}

.ad-ptgoodjobs.mobile .msg div {
	font-size: 12px;
}

.ad-ptgoodjobs .msg img {
	height: 44px;
	padding-top: 2px;
}


/* Recent Search Move In The Search Box */
/*-------------------------------------------------*/
.recent.recent-in-searchbox {
	margin-top: 16px;
}


/* Head Banner */
/*-------------------------------------------------*/
.ct-main header {
	padding: 48px 0;
}


/* Career Channel */
/*-------------------------------------------------*/
.career-channel {
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
	border-radius: 8px;
	width: 100%;
	align-items: start;
	place-content: start;
	padding: 6px 15px;
}

.career-channel .channel-title {
	color: #1F81B9;
	font-weight: bold;
	width: 100%;
	max-width: 100%;
	flex: 0 0 auto;
	padding: 0;
}

.career-channel .channel-logo-container {
	flex: 1 0 0;
	max-width: 100%;
	padding: 0;
}

.career-channel .channel-swiper .swiper-slide {
	width: fit-content;
}

.career-channel .channel-logo {
	height: 36px;
	display: flex;
	align-items: center;
}

.career-channel .channel-logo img {
	height: 24px;
	scale: 1;
	transition: scale .3s;
}

.career-channel .channel-logo:hover img {
	scale: 1.08;
}

/* Extract CV CTA */
/*-------------------------------------------------*/
.ct-nav .field__slideDownIn a span.btn-cta-upload {
	background-color: #FCCF00;
	color: #1F81B9;
	font-size: 13px;
	font-weight: 400;
	padding: 1px 6px;
	float: right;
	top: -1px;
}

.ct-nav .dropdown-list li a:hover span.btn-cta-upload,
.ct-nav .dropdown-list li a:focus span.btn-cta-upload {
	background-color: #ffda55;
}

/* Extract CV CTA Popup */
nav .popup-extractcv--cta {
	display: block;
	position: fixed;
	left: 15px;
	right: 15px;
	bottom: 15px;
	z-index: 99;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

nav .popup-extractcv--cta .extractcv--cta-popup {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    color: #FFF;
    background-image: linear-gradient(270deg, #2A8ACF 0%, #41A0DD 100%);
    box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.3)
}

nav .popup-extractcv--cta .extractcv--cta-popup {
    &:before {
        content: "";
        position: absolute;
        bottom: 100%;
        right: 25px;
        border-width: 0;
        border-style: solid;
        border-color: #2A8ACF transparent;
      }
}

nav .popup-extractcv--cta .extractcv--cta-head {
	display: flex;
	flex-direction: row;
}

nav .popup-extractcv--cta .extractcv--cta-head h5 {
	flex: 1 0 0;
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    padding: 0;
    margin: 0 15px 15px 0;
}

nav .popup-extractcv--cta .extractcv--cta-head .icon--left {
	margin-right: 8px;
}

nav .popup-extractcv--cta .extractcv--cta-head a:link,
nav .popup-extractcv--cta .extractcv--cta-head a:visited {
	color: #FFF;
	padding: 0;
}

nav .popup-extractcv--cta .extractcv--cta-footer a {
	float: right;
	padding: 0;
}

nav .popup-extractcv--cta .btn-upload-cv,
nav .popup-extractcv--cta .btn-update-cv {
    border: 1px solid;
    background-color: transparent;
    border-color: #FFF;
    color: #FFF;
	float: right;
}

nav .popup-extractcv--cta .btn--outline-white:link,
nav .popup-extractcv--cta .btn--outline-white:visited {
    border-color: #fff;
    color: #fff;
}

nav .popup-extractcv--cta .btn--outline-white:hover, 
nav .popup-extractcv--cta .btn--outline-white:focus {
    border-color: #a3f0ff;
    color: #a3f0ff;
}


@keyframes popup {
	0% { bottom: -140px; }
	20% { bottom: -140px; }
	100% { bottom: -14px; }
}

/* Search Bar without No More Option */
/*-------------------------------------------------*/
.no-moreoption {
	margin-left: 0;
	margin-right: 0;
}

.no-moreoption .search-container,
.no-moreoption .search-keyword,
.no-moreoption .job-func,
.no-moreoption .loc {
	position: relative;
    min-height: 1px;
	float: left;
}

.no-moreoption .search-keyword-container {
	width: 100%;
}

.no-moreoption .search-keyword {
	padding-left: 15px;
    padding-right: 15px;
	width: 100%;
}

.no-moreoption .job-func,
.no-moreoption .loc {
	margin-top: 15px;
	padding-right: 15px;
	width: 100%;
}

.no-moreoption .autocomplete .dropdown-list .dropdown-item label {
	font-weight: 400;
}

.no-moreoption .search-btn-container {
	margin-top: 16px;
	width: 100%;
}

.no-moreoption .search-btn {
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 0 !important;
}

@media (min-width: 576px) {
	.career-channel {
		align-items: center;
	}
}

@media (min-width: 768px) {
	.ad-ptgoodjobs.mobile {
		display: none;
	}

	.trending-jobs.with-ptgoodjobs-ad .ad-ptgoodjobs {
		display: flex;
	}

	.with-ptgoodjobs-ad .trending-jobs-container {
		overflow-x: hidden;
	}

	.career-channel {
		place-content: center;
	}

	.career-channel .channel-logo {
		height: 42px;
	}

	.career-channel .channel-logo img {
		height: 28px;
	}
	
	/* Extract CV CTA Popup */
	nav .popup-extractcv--cta {
		left: unset;
		right: var(--popup-extractcv-locale);
		top: 78px;
		bottom: unset;
		position: absolute;
	}

	nav .popup-extractcv--cta .extractcv--cta-popup {
		width: 340px;
	}

	nav .popup-extractcv--cta .extractcv--cta-popup {
		&:before {
			content: "";
			border-width: 0 15px 20px 15px;
		  }
	}
}

@media (min-width: 992px) {
	/* Search Bar without No More Option */
	.no-moreoption .search-keyword {
		width: 40%;
	}

	.no-moreoption .job-func,
	.no-moreoption .loc {
		margin-top: 0;
		padding-right: 15px;
		width: 30%;
	}
}

@media (min-width: 1200px) {
	.career-channel {
		padding: 2px 15px;
	}

	.career-channel .channel-title {
		width: auto;
		padding: 0 12px;
	}

	.career-channel .channel-logo-container {
		flex: unset;
		padding: 0 12px;
	}
	
	/* Search Bar without No More Option */
	.no-moreoption .search-keyword-container {
		padding-right: 15px;
		width: 90%;
	}
	
	.no-moreoption .search-btn-container {
		margin-top: 0;
		width: 10%;
	}
}