/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

/*----Send Referral Form----*/

#referral-form label{
	margin-top: 20px;
}
#referral-form .error-message{
	color: red;
}
#referral-form textarea{
	margin-bottom: 0;
}
#referral-form #send-referral{
	margin-top: 30px;
}

#item-header-content .alert.alert-success{
	font-size: 16px;
	padding: 6px 20px;
	background: #e7f7e7;
	display: inline-block;
	color: #008b00;
	margin-top: 10px;
	border-radius: 40px;
}

/* align the stand-alone button to the right */
#networking-log-download-form {
	margin-top: 8px;
	text-align: right;
}

/*---Referral List----*/
.profile.public .bp-widget.profile{
	padding: 0;
}
.referral-list .referral-entry{
	padding-bottom: 30px;
	position: relative;
	background: #f9f9f9;
	padding: 20px;
	position: relative;
}
.referral-list .referral-entry:nth-child( even ){
	background: #fff;
}
.referral-list .referral-entry:last-child{
	border-bottom: unset;
	margin-bottom: 30px;
}
.referral-list .referral-entry .referral-entry-top{
	display: flex;
	column-gap: 60px;
}
.referral-list .referral-entry .referral-entry-top .referral-label{
	font-weight: 700;
}
.referral-list .referral-entry .referral-entry-body{
	display: flex;
	column-gap: 65px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
	align-items: flex-start;
	position: relative;
}
.referral-list .referral-entry .referral-entry-body .user-img{
	display: flex;
	flex-direction: column-reverse;
	text-align: center;
	row-gap: 20px;
	flex-shrink: 0;
}
.referral-list .referral-entry .referral-entry-body .user-img img{
	width: 80px;
	height: 80px;
	border-radius: 150px;
	object-fit: cover;
}
.referral-list .referral-entry .referral-entry-body .user-img a{
	color: #000;
	font-weight: 700;
}

.referral-list .referral-entry .referral-entry-body .message{
	padding: 0;
	margin: 10px 0;
	background: transparent;
}
.referral-list .referral-entry .referral-entry-body .delete-option{
	position: absolute;
	top: 20px;
	right: 0;
}

.referral-list .referral-entry .referral-entry-body .delete-option button{
	padding: 6px 20px;
}

/*---Display Ref Status----*/
.display_ref_status{
	margin-top: 10px;
}
.display_ref_status > span{
	padding: 8px 10px 8px 20px;
	background: #f5f5f5;
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	column-gap: 8px;
	margin-bottom: 6px;
}
.display_ref_status span.ref_month{
	margin: 0 12px 6px;
}
.display_ref_status span .number{
	font-weight: 700;
	color: #000;
	width: 22px;
	height: 22px;
	background: #dbdbdb;
	border-radius: 25px;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Style Send Referral Button in primary nav */
li.send-referral-btn-header > a {
    font-size: 15px;
    background-color: var(--bb-primary-button-background-regular);
    color: white;
    border: 1px solid var(--bb-primary-button-border-regular);
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    border-width: 1px;
    border-style: solid;
	border-radius: 100px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0;
	padding-bottom: 0;
}
li.send-referral-btn-header > a:hover {
	    color: var(--bb-primary-button-text-regular);
	    background-color: var(--bb-primary-button-background-hover);
}

/* END: Style Send Referral Button in primary nav */

/* Styling for Networking Log Report */

#networking-log-table > tbody > tr > td:nth-child(3) {
	text-align: left;
}
#networking-log-table {
	width: 100%;
}
#networking-log-table tr:nth-child(even) {background-color: #f2f2f2;}

/* END: Styling for Networking Log Report */


/*----Email Notification----*/
.group-separator-block header.profile-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.email-notifications-toggle{
	display: flex;
	align-items: center;
	column-gap: 10px;
}
.email-notifications-toggle label{
	margin-bottom: 0;
	font-size: 15px;
}
.switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 22px;
}

.switch input {
	display: none;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	width: 44px;
	border-radius: 40px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 2px;
	border-radius: 20px;
	bottom: 2px;
	background-color: white;
	transition: 0.4s;
}

input:checked + .slider {
	background-color: #298d00;
}

input:checked + .slider:before {
	transform: translateX( 21px );
}

.switch_on, .switch_off {
	position: absolute;
	transform: translate( -50%, -50% );
	top: 50%;
	left: 50%;
	color: white;
}

.switch_off {
	display: none;
}

input:checked + .slider + .switch_on {
	display: block;
}

input:checked + .slider + .switch_off {
	display: none;
}


.members-table .user-img img{
	width: 52px;
	height: 52px;
	border-radius: 52px;
	object-fit: cover;
}
table.members-table {
	border: unset;
	font-size: 15px;
}
.members-table tr th{
	border-bottom: 1px solid #666 !important;
	margin: 5px auto !important;
}
.members-table tr td{
	vertical-align: middle;
	margin: 5px auto !important;
}
.members-table .button{
	white-space: nowrap;
}

.new-member-list .bb-members-list__item{
	flex-wrap: wrap;
	align-items: start;
	column-gap: 10px;
	row-gap: 10px;
	padding-bottom: 30px;
	margin-bottom: 30px !important;
	border-bottom: 1px solid rgba( 0,0,0,0.1 );
	align-items: center;
}
.new-member-list .bb-members-list .bb-members-list__item:last-child{
	border-bottom: unset;
}
.new-member-list .bb-members-list__item .bb-members-list__avatar{
	margin-right: 10px !important;
}
.new-member-list .bb-members-list__item .bb-members-list__avatar img{
	width: 50px;
	height: 50px;
	object-fit: cover;
}
.new-member-list .bb-members-list__item .extra-member-info{
	width: 100%;
	display: flex;
	column-gap: 15px;
	align-items: center;
	margin-left: 75px;
	align-items: start;
}
.new-member-list .bb-members-list__item .extra-member-info p{
	margin-bottom: 0;
	width: 33.33%;
}
.new-member-list .bb-members-list__item .extra-member-info span{
	font-weight: 700;
}
.new-member-list .bb-members-list__item .bb-members-list__name a{
	font-size: 22px;
	text-transform: capitalize;
}
#referral_type,
#referral_subtype {
	width:100%;
}
.referral-entry-top .type-of-referral{
	color: #000;
	margin-left: auto;
}
.bb-members.new-member-list{
	margin-bottom: 60px;
}
.bb-members.new-member-list .bb-members-list{
	display: block !important;
}
.referrals-sent-table,
.referrals-received-table,
.networking-log-table {
	margin-bottom: 20px;
}

.networking-log-form {
	margin-bottom: 0;
}

.referrals-sent-table .date-text,
.referrals-received-table .date-text,
.networking-log-table .date-text {
	font-weight: 600;
}
.referrals-sent-table table,
.referrals-received-table table,
.networking-log-table  table {
	background: #fff;
}

th,
tr td {
	padding: 0 0.2rem;
}
/* tr th {
	padding-top: .5rem;
} */

.referrals-sent-table table tr td,
.referrals-received-table table tr td,
.networking-log-table table tr td {
	border-color: rgba( 0,0,0,0.04 ) !important;
}
.referrals-sent-table table tr.lst-row td,
.referrals-received-table table tr.lst-row td,
.networking-log-table table tr.lst-row td {
	border-color: #E7E9EC !important;
	font-weight: 600;
}

.referrals-sent-table .ref-date form > .flex-form,
.referrals-received-table .ref-date form > .flex-form,
.networking-log-table .ref-date form > .flex-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 0 !important;
}

.referrals-sent-table .ref-date form > .flex-form span,
.referrals-received-table .ref-date form > .flex-form span,
.networking-log-table .ref-date form > .flex-form span {
	margin-right: 4px;
}
.referrals-sent-table     .ref-date form input[type="submit"],
.referrals-received-table .ref-date form input[type="submit"],
.networking-log-table     .ref-date form input[type="submit"] {
	padding: 0 35px !important;
}

/* Referral tables progress indicator
 ----------------------------------------- */
.progress-indicator .working-indicator {
	font-weight: bold;
	color: #7c3aed;
	animation: blink 1s steps( 2, start ) infinite;
}
@keyframes blink {
	to { visibility: hidden; }
}
#netlog-progress #networking-log-download-form {
	animation:none;
}

.input-date-start {
	margin-right: 4px;
}
.input-date-end,
.selected-chapter {
	margin-right: 12px;
}

.networking-log-table th {
	padding-bottom: 0px;
}

// Remove this if we are not showing the download button in the table.
/* .networking-log-table th:last-child {
	text-align: right;
} */

p.download-button {
	text-align: right;
	margin-bottom: 0;
}
/* p.download-button > a > img {
	width: 100%;
} */
p.download-button > a > img {
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	display: inline-block;
}

.manage-current-members table tr th:last-child,
.manage-current-members table tr td:last-child{
	text-align: right;
}
.manage-current-members table tr select{
	width: 100%;
}
.deactivat-member-popup header,
.change-chapter-popup header{
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 15px;
	justify-content: center;
	padding: 40px 30px;
}
.deactivat-member-popup h4,
.deactivat-member-popup span,
.change-chapter-popup h4,
.change-chapter-popup span{
	width: 100%;
	text-align: center ;
}
.deactivat-member-popup button,
.change-chapter-popup button{
	margin: unset !important;
}
.members-btn{
	text-align: right;
}

.referrals-sent-table table tr td:nth-of-type( 1 ),
.referrals-received-table table tr td:nth-of-type( 1 ) {
	width: 40%;
}
.networking-log-table table tr td:nth-of-type( 1 ) {
	width: 20%;
}
.networking-log-table table tr td:nth-of-type( 2 ) {
	width: 30%;
}

@media( max-width:1024px ){
	.responsive-table{
		overflow-x: scroll;
	}

}
@media( max-width:768px ){
	.extra-member-info{
		flex-direction: column;
		row-gap: 5px;
	}
	.extra-member-info p{
		width: 100% !important;
	}
	.bb-members.new-member-list{
		margin-bottom: 30px;
	}

	.referrals-sent-table .ref-date,
	.referrals-received-table .ref-date,
	.networking-log-table .ref-date {
		flex-wrap: wrap;
		row-gap: 10px;
	}
	.referrals-sent-table .ref-date form,
	.referrals-received-table .ref-date form,
	.networking-log-table .ref-date form {
		column-gap: 4px;
		row-gap: 10px;
		flex-wrap: wrap;

	}
	.manage-current-members table tr select{
		width: 200px;
	}
}
@media( max-width:600px ){
	.referral-list .referral-entry .referral-entry-top{
		justify-content: space-between;
	}
	.referral-list .referral-entry .referral-entry-body{
		flex-direction: column;
		align-items: center;
		row-gap: 10px;
	}
	.referral-list .referral-entry .referral-entry-body .user-details{
		text-align: center;
		width: 100%;
	}
	.referral-list .referral-entry .referral-entry-body .delete-option{
		position: unset;
	}

	.new-member-list .bb-members-list__item{
		align-items: start;
		flex-direction: column;
	}
	.new-member-list .bb-members-list__item .extra-member-info{
		margin-left: 0;
	}
	.new-member-list .bb-members-list__item .bb-members-list__name a{
		font-size: 18px;
		margin-top: 5px;
	}
	.referral-list .referral-entry .referral-entry-top{
		flex-wrap: wrap;
	}
}


@media( max-width:375px ){
	.group-separator-block header.profile-header{
		flex-direction: column;
	}
}

/*19-04 popup*/

/* Header Referral Button Styles */
.bb-header-referral-btn {
	display: inline-block;
	margin: 0 10px;
}

.bb-header-referral-btn .button {
	margin: 10px 0;
	padding: 10px 20px;
	background-image: linear-gradient(215deg, var(--e-global-color-primary) 47%, #000000 100%);;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
    border-radius: 13px 13px 13px 13px;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 14px;
	/* transition: background-color 0.3s ease; */
}

.bb-header-referral-btn .button:hover {
	background-color: transparent;
    background-image: linear-gradient(215deg, #000000 0%, var(--e-global-color-primary) 100%);
}

/* Header Referral Form Styles */
#header-referral-form label {
	margin-top: 0px;
	display: block;
	font-weight: 500;
	margin-bottom: 5px;
}

#header-referral-form input,
#header-referral-form select,
#header-referral-form textarea {
	width: 100%;
	padding: 8px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-family: inherit;
	font-size: 14px;
}

#header-referral-form textarea {
	resize: vertical;
	min-height: 80px;
}

#header-referral-form .error-message {
	color: #d32f2f;
	font-size: 12px;
	margin-top: -8px;
	margin-bottom: 10px;
}

#header-referral-form #header-send-referral {
	width: auto;
	padding: 10px 30px;
	background-image: linear-gradient(215deg, var(--e-global-color-primary) 47%, #000000 100%);;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
    border-radius: 13px 13px 13px 13px;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 20px;
	font-weight: 500;
}

#header-referral-form #header-send-referral:hover {
	background-color: transparent;
    background-image: linear-gradient(215deg, #000000 0%, var(--e-global-color-primary) 100%);
}

.header-referral-modal {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-referral-modal .modal-content {
	background-color: #fefefe;
	padding: 30px;
	border: 1px solid #888;
	border-radius: 5px;
	width: 80%;
	max-width: 400px;
	text-align: center;
	animation: slideIn 0.3s ease-in-out;
}

@keyframes slideIn {
	from {
		transform: translateY(-50px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Member Suggestions Dropdown Styles */
.header-member-name-wrapper {
	position: relative;
}

#header-member-suggestions {
	position: absolute;
	z-index: 1000;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	max-height: 300px;
	overflow-y: auto;
	width: 100%;
	margin-top: 2px;
	top: 100%;
	left: 0;
}

.member-suggestions-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.member-suggestion-item {
	padding: 10px 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid #f0f0f0;
	transition: background-color 0.2s ease;
}

.member-suggestion-item:last-child {
	border-bottom: none;
}

.member-suggestion-item:hover {
	background-color: #f5f5f5;
}

.member-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.member-name {
	flex: 1;
	font-size: 14px;
	color: #333;
}