table {
	width: 100%;
}

			.alert,
		    .bp-messages,
		    .bp-feedback,
		    .bbp-template-notice {

		        padding: 15px;
		        margin: 15px 0px;
		        font-size: 18px;
		        font-weight: bold;
		        border-radius: var(--border-radius);
		        /*overflow: hidden;*/
		        box-shadow: var(--box-shadow);

		        & .bp-icon {
		        	color: var(--white);
		            border-radius: var(--border-radius);
		            width: var(--input-size);
		            min-width: var(--input-size);
		            max-width: var(--input-size);
		            height: var(--input-size);
		            min-height: var(--input-size);
		            max-height: var(--input-size);
		            border-radius: var(--border-radius);
		            display: flex;
		            justify-content: center;
		            align-items: center;
		        }

		        &.loading,
		        &.alert-loading {
		            color: var(--loading) !important;
		            background-color: var(--loading-light) !important;
		            border: 1px solid var(--loading-lignt) !important;
		            & .bp-icon { background-color: var(--loading) !important; }
		            & p { color: var(--loading) !important; }
		        }

		        &.info,
		        &.alert-info {
		            color: var(--info);
		            background-color: var(--info-light);
		            border: 1px solid var(--box-border);
		            & .bp-icon { background-color: var(--info) !important; }
		            & .bp-help-text { font-style: normal; }
		        }

		        &.success,
		        &.alert-success {
		            color: var(--success);
		            background-color: var(--success-light);
		            border: 1px solid var(--success);
		            & .bp-icon { background-color: var(--success) !important; }
		            & .bp-help-text { font-style: normal; }
		        }

		        &.warning,
		        &.alert-warning {
		            color: var(--warning);
		            background-color: var(--warning-light);
		            border: 1px solid var(--warning);
		            & * { color: var(--warning); }
		            & .bp-icon { color: var(--white); background-color: var(--warning); }
		            & .bp-help-text { font-style: normal; }
		        }

		        &.error,
		        &.alert-error {
		            color: var(--error);
		            background-color: var(--error-light);
		            border: 1px solid var(--error); 
		            & .bp-icon { background-color: var(--error) !important; }
		            & .bp-help-text { font-style: normal; }
		            & p { color: var(--error); }
		        }
		    }

.buddypress {



    & #secondary-nav {

        & .navbar-brand { display:none !important; }

        &.fixed .navbar-brand { display: inline-block !important; } 

    } 

    & #primary {

        & section {

            margin-top: 0px;
            min-height: 80vh;

            & h3 { margin: 0px !important; }
			& hr { margin: 10px 0px !important; }
			& hr + p { margin-bottom: 30px !important; }

            & .alert,
		    & .bp-messages,
		    & .bp-feedback,
		    & .bbp-template-notice {

		        padding: 15px;
		        margin: 15px 0px;
		        font-size: 18px;
		        font-weight: bold;
		        border-radius: var(--border-radius);
		        overflow: hidden;
		        box-shadow: var(--box-shadow);

		        & .bp-icon {
		        	color: var(--white);
		            border-radius: var(--border-radius);
		            width: var(--input-size);
		            min-width: var(--input-size);
		            max-width: var(--input-size);
		            height: var(--input-size);
		            min-height: var(--input-size);
		            max-height: var(--input-size);
		            border-radius: var(--border-radius);
		            display: flex;
		            justify-content: center;
		            align-items: center;
		        }

		        &.loading,
		        &.alert-loading {
		            color: var(--loading) !important;
		            background-color: var(--loading-light) !important;
		            border: 1px solid var(--loading-lignt) !important;
		            & .bp-icon { background-color: var(--loading) !important; }
		            & p { color: var(--loading) !important; }
		        }

		        &.info,
		        &.alert-info {
		            color: var(--info);
		            background-color: var(--info-light);
		            border: 1px solid var(--box-border);
		            & .bp-icon { background-color: var(--info) !important; }
		            & .bp-help-text { font-style: normal; }
		        }

		        &.success,
		        &.alert-success {
		            color: var(--success);
		            background-color: var(--success-light);
		            border: 1px solid var(--success);
		            & .bp-icon { background-color: var(--success) !important; }
		            & .bp-help-text { font-style: normal; }
		        }

		        &.warning,
		        &.alert-warning {
		            color: var(--warning);
		            background-color: var(--warning-light);
		            border: 1px solid var(--warning);
		            & * { color: var(--warning); }
		            & .bp-icon { color: var(--white); background-color: var(--warning); }
		            & .bp-help-text { font-style: normal; }
		        }

		        &.error,
		        &.alert-error {
		            color: var(--error);
		            background-color: var(--error-light);
		            border: 1px solid var(--error); 
		            & .bp-icon { background-color: var(--error) !important; }
		            & .bp-help-text { font-style: normal; }
		            & p { color: var(--error); }
		        }
		    }

		    & input[type="radio"] {

		    	height: 20px;
		    	width: 20px;
		    	&:checked { accent-color: var(--brand-light); }
		    }

		    & div.submit {

		    	padding: 0;
		    	margin: 0 !important;
		    	margin-top: 15px;
		    	width: 100%;

		    }

		    & div.buttons {
		    	margin-top: 15px;
		    	width: 100%;
		    	display: flex;
		    	gap: var(--gap);

		    	& button {
		    		flex: 1;
		    	}
		    }

		    & .form-floating input { 
		    	border-radius: var(--border-radius);
			    border: 0;
			    width: 100%;

			    /*border-top-left-radius: 0px !important;
			    border-bottom-left-radius: 0px !important;*/
		    }

		    & #pass-strength-result {

		    	width: 100%;
		    	margin: 0px !important;
		    	border-radius: var(--border-radius);

		    	&.short {
		    		color: var(--error);
		            background-color: var(--error-light);
		            border: 1px solid var(--error);
		            & * { color: var(--error); }
		    	}

		    	&.bad {
		    		color: var(--warning);
		            background-color: var(--warning-light);
		            border: 1px solid var(--warning);
		            & * { color: var(--warning); }
		    	}

		    	&.good {
		    		color: var(--success);
		            background-color: var(--success-light);
		            border: 1px solid var(--success);
		            & * { color: var(--success); }
		    	}

		    	&.strong {
		    		color: var(--brand);
		            background-color: var(--brand-light);
		            border: 1px solid var(--brand);
		            & * { color: var(--brand); }
		    	}
		    }

		    & a,
		    & label,
		    & button,
		    & input[type="reset"], 
		    & input[type="submit"] {

		    	padding: 0;
		    	margin: 0;
		    	width: 100%;
		    	height: var(--input-size);
		    	color: var(--text);
				background-color: var(--button);
				border: 0px !important;
				border-radius: var(--border-radius);
				& * { color: var(--text); }

				&:hover {
					color: var(--text-hover);
					background-color: var(--button-hover);
					& * { color: var(--text-hover); }
				}
				&.active,
				&:active {
					color: var(--text-active);
					background-color: var(--button-active);
					& * { color: var(--text-active); }
				}
		    }

		    & .form-floating input + label { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }

		    & .form-floating>.form-control-plaintext~label, 
		    & .form-floating>.form-control:focus~label, 
		    & .form-floating>.form-control:not(:placeholder-shown)~label, 
		    & .form-floating>.form-select~label {
			    transform: scale(.85) translateY(-.6rem) translateX(.15rem);
			}

            & .card {
                width: 100%;
            }
        }
    }
}


ul.radchecks.nav.nav-pills,
ul.radchecks.nav.nav-pills.nav-fill {

	& li {

		& a,
		& button {

			color: var(--text);
			background-color: var(--button);
			border: 0px !important;
			border-radius: var(--border-radius);
			& * { color: var(--text); }

			&:hover {
				color: var(--text-hover);
				background-color: var(--button-hover);
				& * { color: var(--text-hover); }
			}

			&.active,
			&:active {
				color: var(--text-active);
				background-color: var(--button-active);
				& * { color: var(--text-active); }
			}
		}

	}
}

.tab-content {

	& .tab-pane {

		& form {

			padding: 0 !important;
            padding-top: 10px !important;
		}
	}

}

section {

	& form { padding: 0 !important; margin: 0 !important; }

	& .card {

	    flex-direction: row;

	    &:not(:last-child) {
	    	margin-bottom: var(--gap);
	    }
	    &:not(.activity) .avatar-wrapper { left: -45px; }

	    &:not(.review-card) {
	        flex-direction: row;
	        min-height: 200px;
	    }

	    &:not(.home-page) .card .card-header {
	        border-top-right-radius: 0;
	        border-bottom-right-radius: 0;
	        border-bottom-left-radius: var(--border-radius);
	    }
	    
	    & .card-header { flex: 2; }
	    & .card-body   { 

	        flex: 3;

	        & .card-avatar {
	            position: absolute;
	            top: calc(50% - calc(var(--input-size) / 2));
	            left: unset;
	        }

	        & .card-info {
	            width: 100%;
	            text-align: left;
	            display: flex;
	            flex-direction: column;
	            justify-content: space-between;
	        }
	    }
	}

	&.profile {

		&.public {

			
		}

		&.edit {

			& textarea {
		    	margin: 0 !important;
		    	height: unset !important;
		    }

			& .buttons {

				display: flex;
			    gap: 30px;
			    width: 100%;

				& button {

					flex: 1;
					color: var(--text);
					background-color: var(--button);
					border-radius: var(--border-radius);
					border: 0px !important;

					& * { color: var(--text); }

					&:hover {
						color: var(--text-hover);
						background-color: var(--button-hover);
						& * { color: var(--text-hover); }
					}

					&:active {
						color: var(--text-active);
						background-color: var(--button-active);
						& * { color: var(--text-active); }
					}

					& i {
						margin-right: 10px;
					}
				}
			}
		}

		&.change-avatar {

			& form#avatar-upload-form {
				height: 0px;
			    margin: 0;
			    padding: 0 !important;
			}

			& .bp-avatar-nav {

				margin: 15px 0px;


				ul.avatar-nav-items {

				    display: flex;
				    width: 100%;
				    list-style: none;
				    margin: 0;
				    /*margin-bottom: 15px;*/
				    padding: 0;
				    gap: var(--gap); /* Adjust gap size */
				    border: 0 !important;

				    &::before {
				    	content: none !important;
				    }

				    & li.avatar-nav-item {
					    flex: 1;
					    text-align: center;
					    display: flex;
					    align-items: center;
					    justify-content: center;
					    border: none !important;

					    &.current .bp-avatar-nav-item {
					    	color: var(--text-active);
						    background-color: var(--button-active);
						}

					    & a.bp-avatar-nav-item {

					    	text-decoration: none;
						    display: flex;
						    align-items: center;
						    margin: 0;
						    padding: 0;
						    justify-content: center;

						    
						    width: 100%;
						    /*padding: 10px 15px;*/
						    text-decoration: none;
						    background-color: var(--button);
						    border-radius: var(--border-radius);
				    		transition: var(--transition);

				    		color: var(--text);
							background-color: var(--button);
							& * { color: var(--text); }

							&:hover {
								color: var(--text-hover);
								background-color: var(--button-hover);
								& * { color: var(--text-hover); }
							}

							&:active {
								color: var(--text-active);
								background-color: var(--button-active);
								& * { color: var(--text-active); }
							}
					    }
					}
				}
			}

			& .bp-avatar {

				& > .items > .item {

					display: flex;
					gap: var(--gap);

					& #avatar-to-crop {
						flex: 1;

					}

					& .avatar-crop-management {
						justify-content: space-around;
					    flex: 1;
					    display: flex;
					    flex-direction: column;

					    & #avatar-crop-pane {

					    	border-radius: var(--border-radius);
					    }

					    & button {

					    	width: 100%;
							flex: 1;
							border-radius: var(--border-radius);
							color: var(--text);
							background-color: var(--button);
							border: 0px !important;

							& * { color: var(--text); }

							&:hover {
								color: var(--text-hover);
								background-color: var(--button-hover);
								& * { color: var(--text-hover); }
							}

							&:active {
								color: var(--text-active);
								background-color: var(--button-active);
								& * { color: var(--text-active); }
							}

						}
					}
				}

				& .bp-screen-reader-text { color: var(--text); }

				& #bp-browse-button {

					color: var(--text);
					background-color: var(--button);
					border: 0px !important;
					border-radius: var(--border-radius);

					& * { color: var(--text); }

					&:hover {
						color: var(--text-hover);
						background-color: var(--button-hover);
						& * { color: var(--text-hover); }
					}

					&:active {
						color: var(--text-active);
						background-color: var(--button-active);
						& * { color: var(--text-active); }
					}

				}

				& #drag-drop-area {
					border-color: var(--box-border);
					border-radius: var(--border-radius);
				}

				& #bp-webcam-avatar {

					display: flex;
					gap: var(--gap);
					width: 100%;

					& > div {
						flex: 1;
					}

					& #avatar-to-crop {
						border-radius: var(--border-radius);
						border-color: var(--box-border);
					}

					& .avatar-crop-management {

						display: flex;
						flex-direction: column;
						justify-content: space-around;

						& #bp-webcam-canvas {
							border-color: var(--box-border);
							border-radius: var(--border-radius);
						}

						& #avatar-crop-actions {

							display: flex;
							gap: var(--gap);
							width: 100%;

						}

						& button {

							flex: 1;
							border-radius: var(--border-radius);
							color: var(--text);
							background-color: var(--button);
							border: 0px !important;

							& * { color: var(--text); }

							&:hover {
								color: var(--text-hover);
								background-color: var(--button-hover);
								& * { color: var(--text-hover); }
							}

							&:active {
								color: var(--text-active);
								background-color: var(--button-active);
								& * { color: var(--text-active); }
							}

						}
					}
				}

				& #bp-avatars-history-container {

					& .avatars-history {

						display: flex;
						flex-direction: column;

						& .avatar-history-list {

							& table {
								width: 100%;
								color: var(--header-text);
								background: transparent;

								& * {
									color: var(--header-text);
									background: transparent;
								}

								& .historic-avatar:not(:last-child) {
									margin-bottom: 15px;
								}

								& th.title {
								    border-bottom: 1px solid var(--box-border);
								    margin-bottom: 18px;
								}

								& tbody {

									& tr { 

										backckground: transparent !important; 

										& th {
											align-items: center;
									        text-align: center;
									        padding-bottom: 12px;
									        background: transparent;
										}

										& td {
											background: transparent;
											& label {
												background-color: transparent;
											}
										}
									}
								}
							}
						}
						
						& .avatar-history-actions {

							margin: 0px !important;

							& p {

								border-radius: var(--border-radius);

								&.success {
									color: var(--success) !important;
									background-color: var(--success-light) !important;
									border: 1px solid var(--success) !important;
									& * { color: var(--success) !important; }
								}

								&.warning {
									color: var(--warning) !important;
									background-color: var(--warning-light) !important;
									border: 1px solid var(--warning) !important;
									& * { color: var(--warning) !important; }
								}

								&.error {
									color: var(--error) !important;
									background-color: var(--error-light) !important;
									border: 1px solid var(--error) !important;
									& * { color: var(--error) !important; }
								}

							}

							& .buttons {

								display: flex;
							    gap: 30px;
							    width: 100%;

								& button {

									flex: 1;
									color: var(--text);
									background-color: var(--button);
									border-radius: var(--border-radius);
									border: 0px !important;

									& * { color: var(--text); }

									&:hover {
										color: var(--text-hover);
										background-color: var(--button-hover);
										& * { color: var(--text-hover); }
									}

									&:active {
										color: var(--text-active);
										background-color: var(--button-active);
										& * { color: var(--text-active); }
									}

									& i {
										margin-right: 10px;
									}
								}
							}
						}
					}
				}

				& #bp-delete-avatar-container {

					button {
						min-width: 100%;

						width: 100%;

						color: var(--text);
						background-color: var(--button);
						border: 0px !important;
						border-radius: var(--border-radius);

						& * { color: var(--text); }

						&:hover {
							color: var(--text-hover);
							background-color: var(--button-hover);
							& * { color: var(--text-hover); }
						}

						&:active {
							color: var(--text-active);
							background-color: var(--button-active);
							& * { color: var(--text-active); }
						}
					}
				}
			}
				
			& .bp-avatar-status {

				border-radius: var(--border-radius);

				& p {

					border-radius: var(--border-radius);

					&.success {
						color: var(--success) !important;
						background-color: var(--success-light) !important;
						border: 1px solid var(--success) !important;
						& * { color: var(--success) !important; }
					}

					&.warning {
						color: var(--warning) !important;
						background-color: var(--warning-light) !important;
						border: 1px solid var(--warning) !important;
						& * { color: var(--warning) !important; }
					}

					&.error {
						color: var(--error) !important;
						background-color: var(--error-light) !important;
						border: 1px solid var(--error) !important;
						& * { color: var(--error) !important; }
					}
				}
			}
		}

		&.change-cover-image {

			& .bp-cover-image {

				& #drag-drop-area {
					border-color: var(--box-border);
					border-radius: var(--border-radius);
				}

				& input {
					color: var(--text);
					background-color: var(--button);
					border: 0px !important;
					border-radius: var(--border-radius);

					& * { color: var(--text); }

					&:hover {
						color: var(--text-hover);
						background-color: var(--button-hover);
						& * { color: var(--text-hover); }
					}

					&:active {
						color: var(--text-active);
						background-color: var(--button-active);
						& * { color: var(--text-active); }
					}
				}

			}

			& .bp-cover-image-status {

				border-radius: var(--border-radius);

				& p {

					border-radius: var(--border-radius);

					&.success {
						color: var(--success) !important;
						background-color: var(--success-light) !important;
						border: 1px solid var(--success) !important;
						& * { color: var(--success) !important; }
					}

					&.warning {
						color: var(--warning) !important;
						background-color: var(--warning-light) !important;
						border: 1px solid var(--warning) !important;
						& * { color: var(--warning) !important; }
					}

					&.error {
						color: var(--error) !important;
						background-color: var(--error-light) !important;
						border: 1px solid var(--error) !important;
						& * { color: var(--error) !important; }
					}

				}
			}

			& .bp-cover-image-manage {

				button {
					min-width: 100%;

					width: 100%;

					color: var(--text);
					background-color: var(--button);
					border: 0px !important;
					border-radius: var(--border-radius);

					& * { color: var(--text); }

					&:hover {
						color: var(--text-hover);
						background-color: var(--button-hover);
						& * { color: var(--text-hover); }
					}

					&:active {
						color: var(--text-active);
						background-color: var(--button-active);
						& * { color: var(--text-active); }
					}
				}
			}
		}
	}
}
		











#mceu_20 {
	background-color: var(--header-bg);

	& button {

		background-color: var(--box-border);
		color: var(--header-text);

		& * { color: var(--header-text); }
	}
}

#whats-new-avatar,
#whats-new-avatar a,
#whats-new-avatar a img { 
	padding: 0;
	margin: 0;
	height :var(--input-size);
	max-height :var(--input-size);
	width :var(--input-size); 

}

#whats-new-avatar,
#whats-new-content { display:inline-flex; padding: 0px !important; }

#whats-new-content,
#whats-new-textarea,
#whats-new-textarea textarea {

	height: var(--input-size) !important;
	width: auto;
}

footer.entry-footer {
  display: none;
}

#activity-stream .card.members.new_avatar .card-body {
	padding: 0px;
}

#activity-stream .card-footer {
	background-color: var(--header-bg);
	position: relative;
}

#activity-stream .card .card-header,
#activity-stream .card .card-footer {
    z-index: 3;
}

body.activity,
body.buddypress {

    & #primary {

        /*& article.bp_activity {*/

            /*& .entry-content {*/

                & #buddypress {

                	& .bp-wrap,
                	& #bp-nouveau-activity-form {

						margin: 0px;
						background-color: transparent;
						box-shadow: var(--box-shadow);

						background: var(--header-bg);
					    background-color: var(--header-bg);
						background: var(--header-bg);
					    background-color: var(--header-bg);
					    border-radius: var(--border-radius);
					    padding: 15px;
					    border: 1px solid var(--box-border);

						& form#whats-new-form {

							margin: 0px;
						    padding: 0px !important;
						    background: transparent;
						    border: 0;
						    box-shadow: none !important;

							& #whats-new-avatar {

								margin-right: 15px;

								& a {

									& img {

										border-radius: var(--border-radius);
					    				border: 3px solid var(--box-border);

									}
								}
							}

							& #whats-new-content {

								margin: 0;
								width: calc(100% - var(--input-size) - 15px);
								display: inline-flex;

								& #whats-new-textarea {

									width: 100%;
									border-radius: var(--border-radius);

									& textarea#whats-new {

										width: 100%;
										padding: 13px 15px;
										border: 1px solid var(--box-border);
									    border-radius: var(--border-radius);
									    
									    color: var(--header-text);
									    overflow: hidden !important;
									    background-color: var(--box-border);
            							line-height: 11px;

									}
								}
							}

							& #whats-new-options {

								& #whats-new-post-in-box {

									display: none;

									& select#whats-new-post-in {

									}
								}

								& #whats-new-submit {

									margin: 15px 0px 0px 63px;
									display: flex;

									& input {

										color: var(--header-text) !important;

										height: var(--input-size);
										width: 50%;
										color: var(--text) !important;
										border: 0px;
										border-radius: var(--border-radius);
										background-color: var(--box-border);
										display: flex;
										font-size: 17px;
										text-decoration: none;
										transition: var(--transition);

										& * { color: var(--text) !important;}

										&:not(:last-child) { margin-right: 15px; }

										&:last-child { margin-right: 0px; }

										&:hover {

											color: var(--text-hover) !important;
											background-color: var(--button-hover);

											& * { color: var(--text-hover) !important; }
										}

										&:active {

											color: var(--text-active) !important;
											background-color: var(--button-active);
											transform: translateY(3px);

											& * { color: var(--text-hover) !important; }
										}
									}

									& input[type="submit"] {

									}

									& input[type="reset"] {
										
									}
								}
							}

							& #message { margin: 15px 0px 0px 63px; border-radius: var(--border-radius); }
						}
					}

                    & .screen-content,
                    & .screen-content #activity-stream,
                    & .screen-content #activity-stream ul {

                        padding: 0px;
                        margin: 0px;
                        background-color: transparent;
                        border: none;
                        border-radius: 0;
                    }

                    & section { 
                        padding: 0px; 
                        background: var(--header-bg);
                        border: 1px !important;

                        & textarea {
                            display: flex;
                            line-height: 17px !important;

                            border: 1px solid var(--box-border);
    						border-radius: var(--border-radius); 
                        }
                    }

                    & #activity-stream {

                        & .activity-list {

                            & .card
                            /*& .card.activity-item */ {
                                
                                padding: 0px;
    							margin: var(--gap) 0px 0px 0px;
    							width: 100%;
                                height: auto;

                                border: 1px solid var(--box-border);
                                border-radius: var(--border-radius);
                                box-shadow: var(--box-shadow);
                            
								background-color: var(--header-bg); 
								display: flex;
								flex-direction: column;
								border-radius: var(--border-radius);
								
								/*overflow: hidden;*/

								&[data-bp-activity-type="activity_update"] .card-body {
								    height: auto;
								    aspect-ratio: unset !important;
								}

                                & .card-header {

                                	padding: 15px;
									background-color: var(--header-bg);
									display: flex;
									justify-content: space-between;
									overflow: visible;
									aspect-ratio: unset;

                                    * { color: var(--text); }

									& .time-since {

										margin-left: 6px;
									}

									& p {

										display: inline-flex;
										padding: 0;
										margin: 0;
									}

									& p a:not(:last-of-type) {

										margin-right: 6px;
									}

									& .avatar-wrapper {
										padding: 0;
										margin: 0;
									}

									& a:hover {
										text-decoration: underline;
									}

                                    & .activity-header-content {

                                    	display: flex;

                                    	& li.avatar-wrapper {

                                    		margin-right: 15px;

                                    		& a {

                                    			& img {


                                    			}

                                    		}

                                    		& .badge {

												padding: 0px;
												min-width: 15px;
												max-width: 15px;
												width: 15px;
												height: 15px;
												bottom: 0px;
											  	right: 0px;
											}
                                    	}

                                    	& .activity-info {

                                    		display: flex;
                                    		flex-direction: column;

                                    		& .activity-name {


                                    		}

                                    		& .activity-timestamp {

                                    			
                                    			
                                    		}

                                    		& .activity-changes {

                                    			& strong {

                                    				margin-right: 9px;
                                    			}

                                    		}

                                    	}
                                    }

                                    & .nav-buttons {

                                    	& button {
											background: transparent;
										    border: none;
										    border-radius: var(--border-radius);

										    &:hover {
												background-color: var(--box-border);	
											}
											&:not(:last-of-type) {
												margin-right: 15px;
											}
										}
									}
                                }

                                & .card-body {

                                	width: 100%;
								  	height: auto;

									padding: 30px;
									margin: 0px;
								  
								  /* THIS SHOULD PROBABLY BE LIGHT/DARK TEXT SETTING */
								  	color: var(--header-bg);
									font-size: 24px;
									text-align: center;

								  /*background-color: var(--brand);*/
									background-size: cover;
									background-position: center;
									background-repeat: no-repeat;

									display: flex;
									justify-content: center;
									align-items: center;

									position: relative;
									/*overflow: hidden; */

									aspect-ratio: 16 / 9;

									&::after {
									  content: '';
									  position: absolute;
									  display: block;
									  top: 0; left: 0; right: 0; bottom: 0;
									  background-color: var(--color-03);
									  opacity: .5;
									  z-index: 1;
									}

									&.new_avatar {
										aspect-ratio: 1 / 1;
									}

									& * {
										color: white;
										z-index: 2;
									}

									& p {

										padding: 0px;
										margin: 0;
										color: white;
										font-weight: bold;
										text-align: center;
										font-size: 24px;
									}

									& .avatar {
										width: 120px;
										height: 120px;
										border-radius: var(--border-radius);
										border: 3px solid var(--box-border);
									}

                                }

                                & .card-footer {

                                	padding: 15px;
                                	margin: 0;

                                	color: var(--header-text);
                                	background-color: var(--header-bg);
                                	
                                	* { color: var(--header-text); }

                                    & .activity-comments ul {
                                        padding: 0px;
                                        height: auto;
                                        margin: 0px;
                                        background-color: transparent;
                                        border: none;
                                        border-radius: 0;
                                        display: flex;
                                        flex-direction: column;

                                        & li {
                                            padding: 0px;
                                            margin: 0px;
                                            height: auto;
                                        }
                                    }
                                }
                            }

                            & .load-more,
                            & .load-more a {
                                padding: 0;
                                margin: 0;
                                width: 100%;
                                height: var(--input-size);
                                min-height: var(--input-size);
                                max-height: var(--input-size);
                                border-radius: var(--border-radius);
                                box-shadow: var(--box-shadow);
                                border: 0px;
                                font-size: 22px;
                                color: var(--brand);
                                background-color: var(--box-border);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }

                            & .load-more {

                                margin-top: 30px;

                                & a {

                                    color: var(--header-text);
                                    background-color: var(--box-border); 
                                    border: 1px solid var(--box-border) !important;

                                    & * { color: var(--header-text); }

                                    &:hover {
                                        background-color: var(--button-hover);
                                        color: var(--text-hover);
                                        background-color: var(--button-hover) !important;

                                        & * { color: var(--text-hover); }
                                    }

                                    &:active {
                                        color: var(--text-active);
                                        background-color: var(--button-active);
                                        transform: translateY(3px);

                                        & * { color: var(--text-active); }
                                    }                                          
                                }
                            }
                        }
                    }
                }
            /*}*/
        /*}*/
    }
}





#groups-list li.item-entry,
#members-list li.item-entry {
    width: 100%;
    height: auto;
    padding: 15px;
    margin: 0px;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

#groups-list li.item-entry .item-avatar,
#groups-list li.item-entry .item-avatar img,
#members-list li.item-entry .item-avatar,
#members-list li.item-entry .item-avatar img {
    width: var(--input-size);
    min-width: var(--input-size);
    max-width: var(--input-size);
    height: var(--input-size);
    min-height: var(--input-size);
    max-height: var(--input-size);
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
}