/*==============================================
@@ Styles for individual pages. 
   for use on Refroute
===============================================*/





/*---------------------------------------------
* User Sign-up Page / Landing Page
----------------------------------------------*/


.user-signup-container {
	position: relative;
	padding: 15px 30px;
	background-color: rgba(255,255,255,0.95);

	border-radius: 10px;
	box-shadow: 0 25px 50px rgba(0,0,0,.1);
	margin: 30px 15px;
	margin-top: 40px;
}

.user-signup-container .lead-text {
    font-size: 1.25em;
    font-weight: 300;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.user-signup-form {
	margin-top: var(--spacing-1x);
}
.user-signup-form .input-row {
	padding: 15px 0px;
}

.user-signup-form .input-row .floating-label-input {
	position: relative;
	padding-top: 1.5em;
	bottom: 0;
	left: 0;
	right: 0;
}

.user-signup-form .input-row .floating-label-input label {
	position: absolute;
	margin: 0;
	display: block;
	font-size: 1em;
	font-weight: 400;
	bottom: 0;
	padding: 10px 0;
	transition: 0.2s all ease-in-out;
}


.user-signup-form .input-row input[type="text"],
.user-signup-form .input-row input[type="password"],
.user-signup-form .input-row input[type="email"],
.user-signup-form .input-row input[type="tel"] {
	width: 100%;
	border: none;
	background-color: transparent;
	border-bottom: 2px solid var(--grey-4);
	padding: 10px 0;
	line-height: 1;
	font-size: 1em;

}

.user-signup-form .input-row .floating-label-input:focus-within input[type="text"],
.user-signup-form .input-row .floating-label-input:focus-within input[type="password"],
.user-signup-form .input-row .floating-label-input:focus-within input[type="email"],
.user-signup-form .input-row .floating-label-input:focus-within input[type="tel"],
.user-signup-form .input-row .floating-label-input.input--filled input[type="text"],
.user-signup-form .input-row .floating-label-input.input--filled input[type="password"],
.user-signup-form .input-row .floating-label-input.input--filled input[type="email"],
.user-signup-form .input-row .floating-label-input.input--filled input[type="tel"] {
	outline: none;
	border-bottom: 2px solid var(--dark);
}

.user-signup-form .input-row .floating-label-input:focus-within label,
.user-signup-form .input-row .floating-label-input:focus-within label,
.user-signup-form .input-row .floating-label-input:focus-within label,
.user-signup-form .input-row .floating-label-input.input--filled label,
.user-signup-form .input-row .floating-label-input.input--filled label,
.user-signup-form .input-row .floating-label-input.input--filled label  {
	bottom: 2em;
	color: #fd8717;
}

.user-signup-container .signup-footer  {
	text-align: center;
	margin: 0 auto;
	margin-top: 40px;
	max-width: 320px;
	font-size: 1em;
}

.user-signup-container .signup-footer p {
	margin: 0;
}

.user-signup-container .signup-footer a {
	color: #333;
	text-decoration: underline;
}


/* User sign-up tab */
.user-signup-container .js-tabbed-content .js-tab-links {
	display: flex;
	align-items: center;
	margin: 0 -10px;
}

.user-signup-container .js-tabbed-content .js-tab-links .js-tab-link {
	display: block;
	padding: 5px 10px;
	margin: 0 5px;
	text-align: center;	
	font-weight: 600;
	font-size: 0.85em;
	border-top: 3px solid transparent;
	transition: 0.2s all ease-in-out;
	text-decoration: none;
	color: var(--primary-color);
}

.user-signup-container .js-tabbed-content .js-tab-links .js-tab-link.active {
	border-top-color: var(--secondary-color);
}


/* Company sign-up note */
.company-signup-note {
	margin-top: var(--spacing-1x);
	padding: 10px;
	border: 1px solid #eee;
	border-radius: 10px;
	background-color: #fff;
}
.company-signup-note p {
	display: flex;
	align-items: center;
	font-size: 0.85em;
	margin: 0;
	color: var(--primary-color);
}
.company-signup-note p > i {
	color: var(--primary-color);
	margin-right: 10px;
}



/* Login */





.home-mobile-login.user-signup-container {
    position: relative;
    background-color: var(--primary-color);
    background-color: transparent;
    color: #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25);
    overflow: hidden;
}

.home-mobile-login.user-signup-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--primary-color);
    opacity: 0.8;
}

.home-mobile-login.user-signup-container .inner {
    position: relative;
}
.home-mobile-login.user-signup-container .input-row {
    margin-bottom: 30px;
}

.home-mobile-login.user-signup-container button[type="submit"] {
    position: relative;
    display: block;
    margin: 0 auto;
}


.home-mobile-login.user-signup-container  .forgot-password-block {
    margin-top: 10px; 
}
.home-mobile-login.user-signup-container  .forgot-password-block .forgot-pw-link {
    color: #fff;
    text-decoration: none;
    font-size: 0.85em;
    display: inline-block;
    font-weight: 700;
    padding: 5px;
}

.sign-up-login-separator {
    font-size: 32px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}










/*---------------------------------------------
* Profile Edit Page
----------------------------------------------*/

.referoute-profile-edit-page {}



.profile-sidebar-section {
	border-bottom: 1px solid var(--primary-color);
	padding-bottom: var(--spacing-0-5x);
	margin-bottom: var(--spacing-0-5x);
}

.profile-sidebar-section .sidebar-section-heading {
	font-weight: 600;
	color: var(--primary-color);
}

/* Profile Sidebar image */
.profile-sidebar {}
.profile-sidebar .profile-image-main {
	position: relative;
	margin-bottom: var(--spacing-1x);
}

.profile-sidebar .profile-image-main .profile-avatar {

}
.profile-sidebar .profile-image-main .profile-avatar img {
	max-width: 100%;

}

.profile-sidebar .profile-image-main .profile-image-edit {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) translateX(50%);
}



/*
* Profile edit block
*/
.profile-edit-block {
	margin-bottom: 60px;
}
.profile-edit-block header {
	margin-bottom: var(--spacing-1x);
}
.profile-edit-block header h3 {
	font-size: 16px;
	color: var(--primary-color);
	font-weight: 700;
	display: inline-block;
}

.profile-edit-block header .information-tooltip-icon {
	color: var(--secondary-color);
	display: inline-block;
	margin-left: 5px;
}
.profile-edit-block header .information-tooltip-icon .material-icons {
	font-size: 14px;
}


/*
* Profile Edit Container
*/


.profile-edit-right-col .scroll-container {
	padding: 0 40px;
	max-height: 70vh;
	overflow: auto;
}


.profile-edit-form {
	position: relative;
	background-color: #f8f8f8;
	padding: var(--spacing-1x);
}

.profile-edit-form .profile-edit-btn {
	position: absolute;
	right: 0;
	top: var(--spacing-1x);
	transform: translateX(50%);
}

.profile-edit-form .profile-trash-btn {
	position: absolute;
	right: 0;
	top: var(--spacing-1x);
	transform: translateX(50%) translateY(52px);
}


.edit-inner-section {
	position: relative;
	padding: var(--spacing-1x)  var(--spacing-1x);
	padding-top: 0;
	margin-bottom: var(--spacing-1x);
}

.edit-inner-section::after {
	content: "";
	opacity: 0.5;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	display: block;
	height: 1px;
	background-color: var(--primary-color);
}

.edit-inner-section.no-border::after {
	opacity: 0;
}


.profile-edit-row {
    display: flex;
    margin-bottom: var(--spacing-1x);
}

.profile-edit-row .input-col {
	width: 100%;
}
.profile-edit-row .input-label-col {
    min-width: 135px;
    margin-right: 15px;
}


.input-label-col label {
	font-weight: 700;
	font-size: 16px;
	color: var(--black);
	margin-bottom: 0;
}




/*
* Work Experience Edit
*/



#work-experience-list-edit {
	padding: 0;
	list-style-type: none;
}

#work-experience-list-edit > li.work-experience-item {
	position: relative;
	padding: var(--spacing-1x) var(--spacing-1x);
	margin-bottom: var(--spacing-1x);
	
}

#work-experience-list-edit > li.work-experience-item::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: var(--spacing-1x);
	right: var(--spacing-1x);
	background: var(--primary-color);
	height: 1px;
	opacity: 0.5;
}

#work-experience-list-edit > li.work-experience-item:last-child::after {
	opacity: 0;
}

li.work-experience-item .work-experience-header {
	margin-bottom: var(--spacing-0-5x);
}

li.work-experience-item .work-experience-header {
	display: flex;
	align-items: center;
}
li.work-experience-item .work-experience-header .image {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: var(--spacing-2x);
}
li.work-experience-item .work-experience-header .image img {
	max-width: 100%;
	object-fit: cover;
	width: 100%;
	height: 100%;
}


li.work-experience-item .work-experience-header .details {

}

.work-experience-header .details .title {
	color: var(--black);
	font-size: 1.75em;
	font-weight: 300;
}

.work-experience-header .details .tagline {
	color: var(--black);
	font-size: 1.35em;
	font-weight: 300;
}



.work-experience-card-header .from-label {
	background: #fd8717;
	color: #fff;
	text-align: center;
	padding: 8px var(--spacing-0-5x);
	display: inline-block;
	border-radius: 40px;
	font-size: 10px;
	position: absolute;
	top: 8px;
	right: 40px;
	font-weight: 600;
}









/*---------------------------------------------
* Connections Page
----------------------------------------------*/





.connections-inner {
	padding: var(--spacing-1x) ;
	background-color: #f8f8f8;
	border-radius: 5px 0px 0px 5px;
	max-height: 100vh;
	height: calc(100vh - 320px);
	min-height: 480px;
	overflow-y: auto;
}


.connections-container {
	padding-top: var(--spacing-1x);
}






/*
* Import connections
*/


.widget-import-connections {
	background: var(--grey-3);
	padding: var(--spacing-1x);
	padding-bottom: var(--spacing-2x);
	margin-bottom: var(--spacing-2x);
	border-radius: 5px;
}

.widget-import-connections .sidebar-title {
	font-weight: 600;
	font-size: 18px;
	color: var(--primary-color);
}

.widget-import-connections .icons-div {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 20px;
	align-items: center;
	grid-template-areas: 
    "a b c";
}


.widget-import-connections .icons-div > .import-icon {
	position: relative;
	background: var(--secondary-color);
	color: #fff;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	text-align: center;
	line-height: 48px;
	font-size: 22px;
	overflow: hidden;
}

.widget-import-connections .icons-div > .import-icon > span {
	display: none;
}
.widget-import-connections .icons-div > .import-icon i {
	position: relative;
}

.widget-import-connections .icons-div > .import-icon::before {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0,0,0,.1);
	content: "";
	opacity: 0;
}

.widget-import-connections .icons-div > .import-icon:hover::before {
	opacity: 1;
}


.widget-import-connections .icons-div > .import-icon.fb {
	display: block;
	margin: 0 auto;
}
.widget-import-connections .icons-div > .import-icon.li {
	display: block;
	margin-right: auto;
}
.widget-import-connections .icons-div > .import-icon.google {
	display: block;
	margin-left: auto;
}


/*
* Recommended Connects
*/

.recommended-connects-widget .connection-card {
	margin-bottom: var(--spacing-2x);
}


.recommended-connects-widget .view-all-link {
    font-size: 18px;
    font-weight: 600;
}

.recommended-connects-widget .view-all-link a span:last-child {
    font-size: 12px;
    display: inline-block;
    margin-left: 12px;
}

/*
*  connection top tabs
*/


.connection-top-tabs {
	position: relative;
	margin-bottom: var(--spacing-2x);
}

.connection-top-tabs > ul {
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	border-bottom: 2px solid var(--primary-color);
}

.connection-top-tabs > ul > li {
	margin-right: 30px;
}
.connection-top-tabs > ul > li > a {
	font-size: 16px;
	padding: 10px ;
	color: var(--black);
	display: inline-block;
	border-bottom: 3px solid transparent;
	position: relative;
	top: 2px;
}

.connection-top-tabs > ul > li:first-child > a {
	padding-left: 0;
}

.connection-top-tabs > ul > li:focus-within > a,
.connection-top-tabs > ul > li:hover > a,
.connection-top-tabs > ul > li.active > a {
	color: var(--primary-color);
	font-weight: 600;
	border-bottom-color: var(--secondary-color);
}


/* Connection View Type */
.connections-view-type {
	position: relative;
	text-align: center;
	padding: 5px 0;
}

.connections-view-type > a.icon-view-type {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0 8px;
	background-image: url("../img/icons/primary/grid-view.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.connections-view-type > a.icon-view-type.list {
	background-image: url("../img/icons/primary/list-view.svg");
}

.connections-view-type > a.icon-view-type span {
	display: none;
}




/* Connection Filter */


.connection-select-filter {
    position: relative;
    display: inline-block;
    background-color: var(--secondary-color);
    text-align: center;
    padding: 0px 10px;
    border-radius: 50px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.15);
    overflow: hidden;
}

.connection-select-filter::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.05);
    opacity: 0;
}


.connection-select-filter::after {
    content: "keyboard_arrow_down";
    padding-right: 5px;
    font-family: 'Material Icons';
    color: #fff;
    font-size: 17px;
    vertical-align: middle;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}


.connection-select-filter:focus-within::before {
    opacity: 1;
}

.connection-select-filter > select {
    position: relative;
    display: block;
    text-transform: uppercase;
    color: #fff;
     border: none;
    font-size: 12px;
    display: inline-block;
    padding: 10px 10px;
    padding-right: 20px;
    outline: none;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
    background: none;
    font-weight: 600;
    text-align: center;
}

.connection-select-filter > select option {
    text-align: center;
    color: #333;
}




/*-----------------------------
* Profile Search
------------------------------*/
.search-profile-box {
	background-color: var(--grey-3);
	padding: var(--spacing-2x) var(--spacing-1x);
	border-radius: 5px;
	margin-bottom: var(--spacing-2x);
}


/* Form layout */
.search-profile-box {}
.search-profile-box .field-col {
	display: flex;
	margin-bottom: var(--spacing-2x);
}



.search-profile-box .field-col .input-lbl {
	min-width: 130px;
	margin-right: 15px;
}


.search-profile-box .field-col .input-field {
	width: 100%;
}

.search-profile-box .field-col .input-lbl label {
	display: block;
	padding: 10px 0;
	font-weight: 600;
	color: var(--black);
	font-size: 16px;
}

.search-profile-box .exclude-fields .custom-checkbox-label span,
.search-profile-box .exclude-fields .custom-checkbox-label span {
	color: var(--primary-color);
}

.search-profile-box .exclude-fields .input-lbl {
	min-width: 180px;
}


/* col 2 input lbl */
.search-profile-box .second-col .input-lbl  {
	min-width: 200px;
}




/* btn row */
.search-profile-box .submit-btn-row {
	margin-top: 15px;
}

.search-profile-box .submit-btn-row .ui-btn {
	padding-left: 32px;
	padding-right: 32px;
	font-size: 16px;
}




.search-profile-box .field-col .input-field .general-select-group-dynamic {
	display: inline-block;
}

.search-profile-box .field-col .input-field .general-select-group-dynamic.full-width {
	display: inline-block;
	width: 100%;
}



.search-profile-box .larger-input-lbl.input-lbl {
	min-width: 200px;
}






@media ( max-width: 768px ) {
	.search-profile-box .field-col {
		display: block;
		flex-wrap: wrap;
		margin-bottom: var(--spacing-2x);
	}

}


/*-----------------------------
* Wallet Page
------------------------------*/

/* Analytic Grid */
.wallet-analytics-grid {
    margin-bottom: var(--spacing-1x);
}

.wallet-analytics-grid .analytic-grid-box {

}

.analytic-grid-box .title {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-0-5x);
}

.analytic-grid-box .content {
    color: var(--black);
}

.analytic-grid-box .content p {
    margin: 0;
}

.analytic-grid-box  .count {
    font-size: 2.75em;
    font-weight: 300;
}


/* Referral Header */
.referral-table-outer {}
.referral-table-outer .title-header {
    display: flex
    ;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--primary-color);
    padding: 4px 0;
    margin-bottom: 8px;
}

.referral-table-outer .title-header .title h4,
.referral-table-outer .title-header .view-all-referrals > a {
    font-size: 18px;
    display: block;
    font-weight: 500;
    color: var(--primary-color);
    margin: 0;
}


/* Referral Table */

.table-container {
    padding: var(--spacing-1x) 0;
}

.referral-list-table {
    width: 100%;
    border-collapse: collapse;
}

.referral-list-table td {
    font-size: 18px;
    padding: 20px 0;
    background-color: #f9f9f9;
}

.referral-list-table thead td {
    color: #adacac;
    background-color: transparent;
}


.referral-list-table  tbody tr {
    
}
.referral-list-table  tbody td {
    padding: 20px 15px;
    border-bottom: 3px solid #fff;
}

.referral-list-table  tbody tr td:not(:first-child) {
	padding-left: 0;
}


.referral-list-table .status-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.referral-list-table .status-icon a {
    display: inline-block;
    line-height: 1;
    color: var(--secondary-color);
}
.referral-list-table .status-icon a .material-icons {
    display: block;
    line-height: 1;
    font-size: 28px;
}






/* - Wallet Summary - */

#wallet-summary {}
#wallet-summary .sidebar-title {
    border-bottom: 0;
}



#wallet-summary .wallet-summary-box {
    padding: var(--spacing-1x);
    background-color: #f9f9f9;
    margin-bottom: 5px;
}

#wallet-summary .sub-title {
	font-size: var(--black);
	font-size: 16px;
}

.wallet-summary-box .balance-amnt {
    margin-top: 20px;
}
.wallet-summary-box .balance-amnt p {
    margin: 0;
}

.wallet-summary-box .balance-amnt p.curr-balance {
    font-size: 32px;
    color: var(--primary-color);
}



/* Action */
.wallet-summary-box  .balance-action {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.wallet-summary-box  .balance-action .toolbar-action-icon {
    margin-left: 8px;
    padding-left: 8px;
    display: block;
    line-height: 1;
    position: relative;
    color: var(--secondary-color);
}

.wallet-summary-box  .balance-action .toolbar-action-icon::before {
    content: "";
    width: 1px;
    height: 13px;
    background-color: #333;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.wallet-summary-box  .balance-action .toolbar-action-icon > span {
    display: none;
}

/* In Process */
.wallet-summary-box p.curr-in-process {
    font-size: 32px;
    color: var(--black);
}


.wallet-summary-box .in-process-funds {
	display: flex;
	align-items: center;
}

.wallet-summary-box .in-process-funds .big-icon {
    width: 90px;
    background-image: url(../img/icons/secondary/icon-swap-vertical.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 90px;
    margin-right: 10px;
}

/* */
.payment-details-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.payment-details-list li {
	list-style-type: none;
	margin-bottom: 5px;
}
.payment-details-list .payment-details-item {
	
}

.payment-details-list .payment-details-item .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.payment-details-item .inner {
	width: 100%;
	padding: 8px 0;
}
.payment-details-item .inner .left {
	display: flex;
	align-items: center;
}

.payment-details-item .inner .left .image {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 10px;
}

.payment-details-item .inner .left .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.payment-details-item .inner .right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.payment-details-item .action-icons {
	display: flex;
	justify-content: flex-end;
}


.payment-details-item  .action-icons .action-icon {
	color: var(--secondary-color);
	margin: 0 5px;
	display: block;

}




/*-----------------------------
* View Post Page
------------------------------*/

.post-overview-details {}
.post-overview-details > .block {
	padding: 10px 0;
	margin-bottom: 10px;
	border-bottom: 2px solid #ccc; 
}


.post-overview-details .contact-item-list {
	padding: 0;
	list-style-type: none;
}

.post-overview-details .contact-block {
	margin-bottom: 5px;
}
.post-overview-details .name {
	margin: 0;
	font-weight: 600;
}
.post-overview-details .contact-item-list > li {
	display: block;
	padding: 4px 0;
}


/*
* Post Main Header
*/


/* btn */
.post-details-header  .view-post-menu {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.post-details-header .con-menu-btn {
    width: 32px;
    height: 32px;
    display: block;
    background-image: url('../img/icons/primary/dot-menu.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-indent: -999999px;
    border-radius: 50%;
    background-color: #fff;

    
}

.post-details-header .con-menu-btn:hover {
    background-color: var(--grey-1);
}




/* Heading */
.post-details-header {
	position: relative;
}
.post-details-header .title-desc {
	padding-right: 60px;
}
.post-details-header .heading {
    position: relative;
    padding-right: 60px;
    margin-bottom: 15px;
    display: inline-block;
}

.post-details-header .heading .title {
    position: relative;
    display: inline-block;
}

.post-details-header .share-icon-title {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary-color);
}


/* postm ain*/
.post-main-outer .view-post-btn-group {
	padding: var(--spacing-1x) 0;
}


/* Post Details Section */


.post-details-sections {
    margin: 20px 0;
}

.post-details-sections .post-detail-block {

}

.post-detail-block > h5 {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
  
}

.post-detail-block .post-detail-inner {
    background-color: #f8f8f8;
    padding: 0 var(--spacing-1x);
    margin: 20px 0;
}

.post-detail-inner > .block {
    border-bottom: 2px solid rgba(0,0,0,0.25);
    margin-bottom: var(--spacing-0-5x);
    padding: var(--spacing-1x) 0;
}

.post-detail-inner > .block:last-child {
    border-bottom: 0;
}

.post-detail-inner > .block > h4 {
    color: var(--black);
    margin-bottom: 15px;
    font-weight: 400;
}










/*--------------------------------------------
* Profile View Page
*--------------------------------------------*/

/* Scroll */
.profile-view-right-col > .scroll-container {
	padding: 0 0px;
	max-height: 70vh;
	overflow: auto;
}


/* Sidebar btn block */

.referoute-profile-view-page .btns-block .ui-btn.ui-icon-btn {
	width: 35px;
	height: 35px;
	padding: 0;
	text-align: center;
	line-height: 35px;
}


.referoute-profile-view-page  .profile-person-details {
	margin-bottom: var(--spacing-0-5x);
}



/* Profile Section */
.profile-section-container {
	position: relative;
	background-color: #f8f8f8;
	padding: var(--spacing-1x);
	margin-bottom: var(--spacing-2x);
}


/*-----------------------------------------------------------
* Invite Manager
*
-------------------------------------------------------------*/

.invite-manager-cards-grid {
	margin-top: 30px;
}


/*
* Invite Cards
*/





.invite-card {
	position: relative;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.invite-card .card-meta {
    display: flex;
    align-items: center;
    padding: 15px 20px;
}

.invite-card .card-meta .avatar-image {
    margin-right: 15px;
    background-color: transparent;
    min-width: 92px;
    min-height: 92px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.invite-card .card-meta .detail-block {
    margin: 20px 0;
    margin-bottom: 0;
    margin-right: 40px;
}
.invite-card .card-meta .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}


/* Students Count */
.invite-card .students-count {
    background-color: #f8f8f8;
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 20px;
    align-items: center;
}

.invite-card .students-count::before {
    content: "";
    display: inline-block;
    width: 22px;

    height: 18px;
    margin-right: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.invite-card .students-count::before {
    background-color: transparent;
    background-image: url(../img/icons/secondary/users.svg);
}


/**/
.invite-card .description {
    padding: 0 20px;
}


.invite-card .detail-icons {
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.invite-card .detail-icons .students-count {
    margin-right: 20px;
    display: none;
}

.invite-card .detail-icons .icon-items-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    width: 100%;
}

.invite-card .detail-icons .icon-items-list li {
    margin-right: 20px;
}




/*
* Card Style List
*/
.card-style-list {
    display: grid;
    grid-gap: 20px 0;
    grid-template-columns: 1fr;
}
.card-style-list .invite-card .card-meta .students-count {
    display: none;
}

.card-style-list .invite-card .card-meta .detail-block {
    margin-top: 0;
}
.card-style-list .invite-card .detail-icons .icon-items-list {
    width: auto;
}

.card-style-list .invite-card .detail-icons .students-count {
    margin-right: 20px;
    display: block;
}


/*
* Card Actions
*/



.invite-card .card-actions {
    display: flex;
    border-top: 2px solid #f6f7f8;
    margin: 0 var(--spacing-1x);
    margin-top: var(--spacing-1x);
}

.invite-card .card-actions > .card-action {
    padding: 15px 5px;
    display: block;
    width: 100%;
    text-align: center;

    background-position: center;
    background-size: 24px;
    background-repeat: no-repeat;
}


.invite-card .card-actions > .card-action:hover {
    /*background-color: var(--grey-1);*/
}


.invite-card .card-actions > .card-action {
    color: var(--black);
}

.invite-card .card-actions.btns-2 > .card-action:first-child {
    border-right: 0px solid #f6f7f8;
}
.invite-card .card-actions.btns-2 > .card-action:nth-child(2n) {
    border-left: 0px solid #f6f7f8;
}


.invite-card .card-actions .card-action.lbl-show .lbl {
    position: relative;
    font-weight: 700;
    display: inline-block;
    text-transform: uppercase;
    font-size: 11px;
    padding-left: 25px;

}

.invite-card .card-actions .card-action.lbl-show .lbl::before {
    position: relative;
    width: 20px;
    height: 20px;
    content: ".";
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    text-indent: -9999px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.invite-card .card-actions .card-action.card-action-accept.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/folder-tick.svg");
}

.invite-card .card-actions .card-action.card-action-refer.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/folder-return.svg");
}

.invite-card .card-actions .card-action.card-action-message.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/chat-icon.svg");
}


.invite-card .card-actions .card-action.card-action-connect.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/two-arrows.svg");
}

.invite-card .card-actions .card-action.card-action-close.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/close-icon.svg");
}


.invite-card .card-actions .card-action.card-action-comment.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/icon-comment.svg");
}



.invite-card .card-actions .card-action.card-action-correct.lbl-show .lbl::before {
    background-image: url("../img/icons/secondary/icon-correct.svg");
}




/*
* Card Style L:ist Actions
*/


.card-style-list .invite-card {
    display: flex;
    padding: 20px 0;
}


.card-style-list .invite-card .card-right-area {
    border-left: 2px solid #eee;
    display: flex;
    align-items: center;
}

.card-style-list .invite-card .card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    padding-left: 20px;
    margin: 0;
    padding-right: 20px;
}






/* Menu Btn */

.invite-card .con-menu-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 26px;
    height: 26px;
    display: block;
    background-image: url(../img/icons/primary/dot-menu.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-indent: -999999px;
    border-radius: 50%;
    background-color: #fff;
}

.card-style-list  .invite-card .con-menu-btn {
    
    position: relative;
    left: initial;
    right:initial ;
    bottom: initial;
    top: initial;
}

.card-style-list .invite-card  .card-menu-btn {
    border-left: 2px solid #eee;
    display: flex;
    align-items: center;
    align-self: stretch;
    padding-left: 20px;
    padding-right: 20px;
}









/*-----------------------------------------------------------
* Response Manager
*
-------------------------------------------------------------*/

.response-manager-details {
	padding: 30px 0;
}




/* Response Manager Cards */

.response-card {
    background-color: #fff;
    position: relative;

    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    margin-top: 30px;
}

.response-card .inner {
    padding: 10px;
    padding-bottom: 0;
}

.response-card .card-floating-label {
    position: absolute;
    top: 0;
    background-color: #0c2069;
    color: #fff;
    border-radius: 20px;
    padding: 3px 10px;
    transform: translateY(-50%);
    font-size: 12px;
    left: var(--spacing-1x);
}


.response-card .date-time {
    font-size: 11px;
    color: #696969;
    position: absolute;
    right: 15px;
    top: 10px;
}

.response-card .card-left-area {
    margin-top: 15px;
    display: flex;
    margin-bottom: 15px;
}
.response-card .card-left-area .card-details {
    display: flex;
    align-items: center;
}


.response-card .card-left-area .checkbox-left {
    display: flex;
    align-items: center;
}

.response-card .card-left-area .card-details .avatar-image {
    margin-right: 15px;
    width: 82px;
    height: 82px;
    min-width: 82px;
    min-height: 82px;
}

.response-card .card-left-area .card-details .name {
    font-weight: 600;
    font-size: 16px;
}


.response-card .card-details-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}


.response-card  .card-right-area {
}
.response-card  .card-btns-area  {
    display: flex;
    align-items: stretch;
}

.response-card .card-btn-block {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}





.response-card .card-btn-block .referral-chain-view {
    color: #000;
    font-weight: 600;
}


.card-btn-block .referral-chain-view {
    position: relative;
    display: block;
    font-weight: 500;
    color: #000;
    padding: 5px 0;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    min-width: 118px;
    text-align: center;
    justify-content: center;
}

.card-btn-block .referral-chain-view::before {
    content: "";
    display: block;
    position: relative;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 5px;
    background-color: #e5e5e5;
    align-items: center;
    margin-right: 10px;
}

.card-btn-block .referral-chain-view::before {
    background-color: transparent;
    background-image: url(../img/icons/secondary/two-arrows.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}




.response-card  .card-progress-block {
    width: 140px;
    border-left: 1px solid #eee;
    padding: 10px;

}

.response-card  .card-progress-block .progress-circle {
    margin: 0 auto;
}








/*
* Response Card Card Style - list
*/

.card-style-list {

}

.card-style-list .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.card-style-list  .response-card .date-time {
    position: relative;
    margin-bottom: 20px;
    left: 0;
    top: 0;
}

.card-style-list  .response-card .card-left-area {
    margin-right: 20px;
}



.card-style-list  .response-card .card-details-list {
    border-bottom: 0;
}

.card-style-list  .response-card .card-details-list {
    display: flex;
    align-items: center;
}
.card-style-list  .response-card .card-details-list li {
    margin-right: 25px;
}











/*
* Bottom actions
*/

.bottom-actions{
    padding: 15px 20px;
    background-color: #fff;
    margin-top: 30px;
    border-radius: 10px;
}

.response-btn-action > .ui-btn {
	margin-top: 5px;
	margin-bottom: 5px;
}






/*----------------------------------------------
* View Recommendation Page
-----------------------------------------------*/

.view-post-card {
	width: 100%;
	display: block;
	background-color: #f8f8f8;
	padding: 15px;
	margin-bottom: 20px;
	margin-top: 10px;
}


/*
* Comments tab
*/


.comments-tab-btn {
	position: relative;
}

.comments-tab-btn::after {
	display: none;
}
.comments-tab-btn.active::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	transform: translateY(100%);
	width: 20px;
	height: 20px;
	margin: 0 auto;

	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom:20px solid var(--grey-3);
}
/*
* Post Comments Area
*/

.post-comments-area {
	position: relative;
	background-color: #f8f8f8;
	padding: 20px 15px;
	margin-top: 30px;
}










/*
* COMMENTS THREAD
*/






.comments-thread {}

.comments-thread ul {
	list-style-type: none;
	padding: 0;
}

.comments-thread .comment-item {
	margin-bottom: 30px;
}

.comments-thread ul > .comment-item:last-child {
	margin-bottom: 0;
}


/* Comment user detail */
.comment-item .user-detail-inner {
	display: flex;
	align-items: center;
}

.comments-thread .profile-avatar {
	position: relative;
	margin-right: 15px;
	display: inline-block;
}
.comments-thread .avatar-image {
	width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
}

.comment-item .user-detail-inner a {
	color:#333;
	font-size: 16px;
}


.comments-thread .status-indicator {
    position: absolute;
    bottom: 2px;
    right: 3px;
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    text-indent: -9999999px;
    border: 1px solid rgba(0,0,0,0.15);
}


.comment-item .comment-content {
	margin-left: 61px;
	font-size: 18px;
}

.comment-item .comment-actions-meta {
	margin-left: 61px;
}

.comment-item .comment-actions-meta .inner {
	display: flex;
	flex-wrap: wrap;
}
.comment-actions-meta a.comment-action-link {
	font-weight: 400;
	color: #929292;
	font-size: 16px;
	display: block;
	margin-right: 15px;
}

.comment-actions-meta a.comment-action-link:hover {
	color: #333;
}


.comment-actions-meta a.comment-action-link.comment-unlike {
	color: var(--primary-color);
	font-weight: 600;
}


/*
* Comment Reply Container
*/


.comment-item .comment-reply-container {
	margin-left: 61px;
	padding: 20px 0;
}

.comment-item .comment-replies-toggle {
	display: block;
	margin-top: 0px;
	margin-bottom: 10px;
	font-size: 16px;
	color: #000000;
	font-weight: 600;
}

.comment-item .comment-reply-container > ul {
	padding: 20px;
	background-color: var(--grey-3);
	border-radius: 10px;
}





/*
* Coment reply
*/

.comment-reply-box {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--dark);
}



.comment-reply-box .inner {
	display: flex;
}



.comment-reply-box .comment-editor {
	display: block;
	width: 100%;
}

.comment-editor-actions {
}


.comment-reply-box .comment-text-editor {
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
}

.comment-reply-box .comment-text-editor:focus-within  {
   border: 1px solid #bbbbbb;
}

.comment-reply-box .comment-text-editor textarea {
	width: 100%;
	border: none;
	display: block;
	border-radius: 4px;
	overflow: hidden;
	outline: none;
	padding: 5px 15px;

}


.comment-reply-box .comment-editor-actions {
	display: flex; 
	align-items: center;
	margin: 10px 0;
}

.comment-editor-actions .action-icons {
	display: block;
	display: flex;
	align-items: center;
}

.comment-editor-actions .action-icons > a {
	margin-right: 10px;
	color: var(--dark);
	display: block;
}

.comment-editor-actions .action-icons > a span {
	display: flex;
}

.comment-editor-actions .action-icons > a .material-icons {
	font-size: 21px;
}



@media ( min-width: 768px ) {
	.comment-editor  {
		position: relative;
	}
	.comment-editor .send-comment {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.comment-editor .comment-editor-action.emoticon {
		position: absolute;
		right: 110px;
		top: 50%;
		transform: translateY(-50%);
	}

	.comment-editor .comment-editor-action.attach-file {
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translateY(-50%);
	}

	.comment-reply-box .comment-editor-actions {
		margin: 0;
	}

	.comment-reply-box .comment-text-editor textarea {

		padding-left: 40px;
		padding-right: 140px;

	}
}









/*-----------------------------------------------------
* Create Post
------------------------------------------------------*/

.create-post-inner {
	background-color: var(--grey-3);
	padding: var(--spacing-2x) var(--spacing-1x);
	border-radius: 5px;
	margin-bottom: var(--spacing-2x);
}




.create-post-form-section {
    padding: 20px 0;
    margin-bottom: 20px;

    border-top: 1px solid var(--primary-color);
}

.create-post-form-section:first-child {
    border-top: 0px solid transparent;
}

.create-post-form-row {
    padding: 5px 0px;
    margin-bottom: 10px;
}








/*-----------------------------------------------------
* Campus Cards
------------------------------------------------------*/



.campus-cards {
	position: relative;
}

.campus-cards .inner {
	position: relative;
    border: 1px solid #eee;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

.campus-cards .inner .card-top-area {
    display: flex;
    padding: 30px 30px 0px 30px;
}



.campus-cards .inner .card-top-area .card-left-area {
    margin-right: 30px;
}

.campus-cards .inner .card-top-area .avatar-image {
    max-width: 90px;
    border-radius: 50%;
    overflow: hidden;
    min-width: 90px;
    min-height: 90px;
}

.campus-cards .inner .card-top-area  .details {

}

.campus-cards .inner .card-top-area  .details .title {
    font-size: 1.35em;
    font-weight: 600;
}


.campus-cards .card-details-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    width: 100%;
    padding-bottom: 10px;
}


.campus-cards .card-bottom-area {
    background-color: #f5f5f5;
    margin-top: 15px;
}

.campus-cards .card-bottom-area .links-area {
    display: flex;
}

.campus-cards .card-bottom-area .links-area  > a {
    display: block;
    width: 50%;
    text-align: center;
    padding: 15px 020px ;
    color: #515151;
    text-transform: uppercase;
    font-weight: 700;
}



.campus-cards .con-menu-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 26px;
    height: 26px;
    display: block;
    background-image: url(../img/icons/primary/dot-menu.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-indent: -999999px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 1;
}










/*--------------------------------------
* Search Profile Results
--------------------------------------*/


.expandable-box-search {
    position: relative;
    padding: 15px;
    margin-bottom: 30px;
}

.expandable-box-search .box-tab-btn {
    display: inline-block;
    background-color: var(--secondary-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    padding-right: 5px;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -3px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.15);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    transition: 0.2s all ease-in-out;
}

.expandable-box-search .box-tab-btn:hover {
    background-color: #e76415;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.expandable-box-search .box-tab-btn .icon {
    display: flex;
    margin-left: 5px;
    transition: 0.1s all ease-in-out;
}

.expandable-box-search .box-tab-btn.active .icon {
    transform: rotate(180deg);
}

.box-tab-btn .icon .material-icons {
    font-size: 19px;
}

.expandable-box-search .inner-box {
    padding: 15px;
    padding-top: 30px;
    background-color: #f4f4f4;
    border-radius: 5px;
}


.search-filter-row .field-input > label {
    font-weight: 600;
    display: block;
    margin: 0;
    margin-right: 15px;
}

@media ( max-width: 1080px ) {
    .search-filter-row .field-input > label {
        padding-bottom: 10px;
        padding-left: 10px;
    }

}


.search-filter-row .labels-block .label-tag  {
    border-radius: 5px;
}