.wp-user-list-container {
margin: 20px 0;
}
.wp-team-carousel-wrapper {
display: grid;
gap: 20px;
margin-bottom: 30px;
}
.wp-item-user {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-item-user:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.um-widget-member-holder {
padding: 20px;
background: #fff9f0;
border-radius: 8px;
}
.um-elementor-member-image {
text-align: center;
margin-bottom: 15px;
}
.um-elementor-member-image img {
border-radius: 50%;
width: 100px;
height: 100px;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.um-elementor-member-name {
text-align: center;
margin-bottom: 15px;
}
.um-elementor-member-name p {
margin: 0;
}
.um-elementor-member-name a {
color: #303133;
text-decoration: none;
font-weight: 600;
font-size: 18px;
transition: color 0.2s ease;
}
.um-elementor-member-name a:hover {
color: #23527c;
}
.um-custom-field-container {
text-align: center;
}
.um-meta-field {
display: block;
margin-bottom: 8px;
font-size: 14px;
line-height: 1.4;
}
.um-custom-label {
font-weight: 600;
color: #444444;
margin-right: 5px;
}
.um-custom-field {
color: #444444;
}
.um-custom-field a {
color: #23527c;
text-decoration: none;
}
.um-custom-field a:hover {
text-decoration: underline;
} .user-layout-spaced {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
align-items: start;
}
.user-layout-spaced-one {
flex-shrink: 0;
}
.user-layout-spaced-two {
flex: 1;
} .wp-search-container {
margin-bottom: 20px;
}
.wp-search-form {
display: flex;
gap: 10px;
max-width: 400px;
}
.wp-search-input {
flex: 1;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.wp-search-button {
padding: 10px 20px;
background: #23527c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s ease;
}
.wp-search-button:hover {
background: #1a3f5f;
} .wp-filter-interface {
margin-bottom: 20px;
overflow: hidden;
}
.wp-filter-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.wp-global-search-container {
flex: 1;
max-width: 300px;
}
.wp-search-input-wrapper {
position: relative;
}
.wp-global-search {
width: 100%;
padding: 8px 35px 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.wp-search-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #666;
font-size: 14px;
}
.wp-filter-toggle-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #23527c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s ease;
}
.wp-filter-toggle-btn:hover {
background: #1a3f5f;
}
.wp-filter-arrow {
transition: transform 0.2s ease;
}
.wp-filter-panel {
padding: 20px;
background: #fff;
transition: all 0.3s ease;
}
.wp-filter-panel-hidden {
display: none;
}
.wp-filter-controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.wp-filter-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.wp-filter-label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #333;
font-size: 14px;
}
.wp-filter-label i {
color: #23527c;
font-size: 16px;
}
.wp-filter-dropdown {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
background: #fff;
}
.wp-filter-checkboxes {
display: flex;
flex-direction: column;
gap: 8px;
}
.wp-checkbox-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
cursor: pointer;
}
.wp-checkbox-item input[type="checkbox"] {
margin: 0;
}
.wp-filter-radios {
display: flex;
flex-direction: column;
gap: 8px;
}
.wp-radio-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
cursor: pointer;
}
.wp-radio-item input[type="radio"] {
margin: 0;
}
.wp-filter-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
padding-top: 15px;
border-top: 1px solid #eee;
}
.wp-apply-filters,
.wp-clear-filters {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s ease;
}
.wp-apply-filters {
background: #28a745;
color: white;
}
.wp-apply-filters:hover {
background: #218838;
}
.wp-clear-filters {
background: #6c757d;
color: white;
}
.wp-clear-filters:hover {
background: #5a6268;
}
.wp-no-filters-message {
text-align: center;
padding: 20px;
color: #666;
font-style: italic;
} .wp-loading {
text-align: center;
padding: 40px 20px;
color: #666;
font-style: italic;
}
.wp-error {
text-align: center;
padding: 20px;
color: #dc3545;
background: #f8d7da;
border: 1px solid #f5c6cb;
border-radius: 4px;
margin: 20px 0;
}
.wp-no-results {
text-align: center;
padding: 40px 20px;
color: #666;
font-style: italic;
} .wp-pagination-container {
text-align: center;
margin-top: 30px;
}
.wp-pagination {
display: inline-flex;
gap: 5px;
align-items: center;
}
.wp-pagination-link {
padding: 8px 12px;
border: 1px solid #ddd;
background: #fff;
color: #333;
text-decoration: none;
border-radius: 4px;
transition: all 0.2s ease;
}
.wp-pagination-link:hover {
background: #f5f5f5;
border-color: #23527c;
color: #23527c;
}
.wp-pagination-link.current {
background: #23527c;
color: white;
border-color: #23527c;
}
.wp-load-more-container {
text-align: center;
margin-top: 30px;
}
.wp-load-more-button {
padding: 12px 24px;
background: #23527c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.2s ease;
}
.wp-load-more-button:hover {
background: #1a3f5f;
}
.wp-infinite-scroll-trigger {
text-align: center;
margin-top: 30px;
padding: 20px;
}
.wp-infinite-scroll-spinner {
color: #666;
font-style: italic;
} @media (max-width: 768px) {
.user-layout-spaced {
grid-template-columns: 1fr;
gap: 15px;
text-align: center;
}
.wp-search-form {
flex-direction: column;
}
.wp-pagination {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 480px) {
.um-widget-member-holder {
padding: 15px;
}
.um-elementor-member-image img {
width: 80px;
height: 80px;
}
.um-elementor-member-name a {
font-size: 16px;
}
} .grid-cols-1 {
grid-template-columns: 1fr;
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-cols-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid-cols-6 {
grid-template-columns: repeat(6, 1fr);
} .wp-team-carousel-wrapper.grid {
display: grid !important;
}
.wp-team-carousel-wrapper.grid-cols-1,
.wp-team-carousel-wrapper.grid-cols-2,
.wp-team-carousel-wrapper.grid-cols-3,
.wp-team-carousel-wrapper.grid-cols-4,
.wp-team-carousel-wrapper.grid-cols-5,
.wp-team-carousel-wrapper.grid-cols-6 {
display: grid !important;
}
@media (max-width: 1200px) {
.grid-cols-6 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 992px) {
.grid-cols-5,
.grid-cols-6 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.grid-cols-4,
.grid-cols-5,
.grid-cols-6 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.grid-cols-2,
.grid-cols-3,
.grid-cols-4,
.grid-cols-5,
.grid-cols-6 {
grid-template-columns: 1fr;
}
}