@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

#wp-admin-bar-left_section{
    max-width: 160px;
    width: 100%;
}
#wpadminbar .left_section > a{display: flex; align-items: center;}

#wpadminbar li#wp-admin-bar-middle_section .ab-item ab-empty-item:hover{
 background: none !important;
}
#wpadminbar li#wp-admin-bar-middle_section,
#wpadminbar li#wp-admin-bar-right_section  {
    width: calc(50% - 80px) !important;
}

#wpadminbar .ab-top-menu>li.hover>.ab-item, 
#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus, 
#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item, 
#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus{
background: inherit;
}

#wpadminbar .left_section, #wpadminbar .middle_section, #wpadminbar .right_section {
    display: flex;
    align-items: center;
    height: 100%;
}
#wpadminbar .quicklinks, #wpadminbar .ab-top-menu, #wpadminbar .top_bar_section, #wpadminbar .ab-item{
    height: 100% !important;
}
/* style for admin top bar left section */
#wpadminbar .left_section {
    font-family: "Lobster", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
}
/* style for admin top bar left section */
/* style for admin top bar right section */

.right_section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative !important; /* To position the dropdown relative to the section */
    padding: 5px;
    color: #fff; /* Text color */
    height: 100% !important;
    float: right;
}
.right_section > a{
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.avatar_container{padding-right: 10px !important; display: flex;}
.avatar_container img {
    width: 40px; /* Avatar size */
    height: 40px;
    border-radius: 50%; /* Makes the avatar circular */
    margin-right: 10px;
    cursor: pointer;
}

.user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.user-info .user-name, .user-info .user-type{line-height: normal !important; height: auto !important;}
.user-name {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 2px; /* Small spacing between name and type */
    color: #fff;
}

.user-type {
    font-size: 12px;
    color: #ccc; /* Subtle color for user type */
}

/* Dropdown content styling */
.dropdown-content {
    display: none; /* Hidden by default */
    position: absolute !important; /* Allows positioning relative to parent */
    top: 100%; /* Places dropdown below the parent container */
    right: 0;
    background-color: #fff; /* White background for dropdown */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for dropdown */
    border-radius: 4px; /* Rounded corners */
    padding: 8px 0;
    z-index: 1000; /* Ensure it appears above other elements */
    min-width: 150px; /* Minimum width for dropdown */
}

.dropdown-content a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #333; /* Dark text color */
    font-size: 13px;
}

/* Optional: Adjust for smoother animation */
.dropdown-content {
    opacity: 0;
    transform: translateY(-10px); /* Starts slightly above the parent */
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.right_section:hover {
    background-color: #000; /* Highlighted background on hover */
    color: #f1f1f1; /* Darker text on hover */
}

/* Show dropdown on hover */
.right_section:hover .dropdown-content {
    display: block; /* Show dropdown when hovering on right_section */
    background-color: #000; /* Highlighted background on hover */
    color: #f1f1f1; /* Darker text on hover */
    opacity: 1;
    transform: translateY(0); /* Dropdown slides into place */
}
/* Change link color inside dropdown when right_section is hovered */
.right_section:hover .dropdown-content a {
    color: #fff; /* Make links white */
}

/* Hover effect for links inside dropdown */
.dropdown-content a:hover {
    background-color: #444; /* Slightly lighter background on hover */
    color: #fff; /* Ensure link text stays white on hover */
}

#wpadminbar #adminbarsearch:before, 
#wpadminbar .ab-icon:before, 
#wpadminbar .ab-item:before, 
#wpadminbar .ab-empty-item, #wpadminbar a.ab-item, 
#wpadminbar>#wp-toolbar span.ab-label, 
#wpadminbar>#wp-toolbar span.noticon {
    color: var(--top_bar_colr) !important;
}
#wpadminbar {
    background-color: var(--top_bg_colr) !important;
}
html.wp-toolbar{padding-top:var(--top_bar_height);}
#wpadminbar .quicklinks .ab-empty-item, 
#wpadminbar .quicklinks a, 
#wpadminbar .shortlink-input,
#wpadminbar, #wpadminbar a,
#wpadminbar a span{height:var(--top_bar_height); line-height:var(--top_bar_height)}