/* Dropdown Menu inside a Navigation Bar */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-button {
    background-color: rgba(0, 0, 0, 0);
    color: white;
    padding: 2px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    z-index: 1;
    top: calc(100% + 5px); /* add some space between button and menu */
    left: 50%; /* center the menu horizontally */
    transform: translateX(-50%); /* center the menu horizontally */
    width: 200px; /* set the width of the menu */
    background-color: #f1f1f1;
    display: none;
    padding-top: 10px; /* add some space at the top of the menu */
}

/* add the v-shaped connector */

/* To create a v-shaped connector between the dropdown-button and dropdown-menu, we use the "before" or "after" pseudo-element of the ".dropdown-menu" CSS class. */

/* adjust the values of the "top" and "margin-left" properties to fine-tune the position of the dropdown-menu and the v-shaped connector. */
.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px; /* position above the menu */
    left: 50%; /* center horizontally */
    margin-left: -10px; /* align with the button */
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #f1f1f1 transparent;
}

.dropdown-menu div {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.dropdown-menu div:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown:hover .dropdown-button {
    background-color: rgba(0, 0, 0, 0);
}

.dropdown-button i {
    float: right;
}

.sellerlogout-box {
    border-top: rgb(190, 190, 190) 1px solid;
    padding-top: 14px;
    padding-bottom: 14px;
}