The navigation account container has the following styles:

– visibility: hidden;
– padding-left: 6.5px;
– margin-top: -1.5px;
– min-height: 28px !important;
– background-color: #eeee;
– padding-right: 6px;
– height: 100%;
– right: 23.7%;
– display: flex;
– align-items: center;
– cursor: pointer;
– z-index: 9999.

The navigation account container contains the following elements:

– nav-name-and-svg-container: a container that displays the user’s name and a SVG icon.
– nav-name-container: a container that contains the user’s name.
– nav-user-firstName: the user’s first name displayed in the navigation account container.

The navigation account container also has an open-setting-container:

– visibility: hidden;
– margin: 0;
– padding: 0;
– position: absolute;
– right: 23.7%;
– top: 101.6%;
– width: 120px;
– height: 0;
– background-color: black;
– transition: height 0.2s ease-in-out;
– box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
– display: flex;
– flex-direction: column;
– justify-content: center;
– align-items: center;
– z-index: 9998.

The open-setting-container contains the following elements:

– nav-settings-div: a div for settings.
– nav-settings-ul: a ul element for the navigation settings.
– nav-setting-li: a list item element for the navigation settings.
– nav-setting-li a: a link element for the navigation settings.

The navigation account container also has media queries for different screen sizes.

For screens with a maximum width of 1339px, the styles are adjusted as follows:

– The right position is changed to 31.5%.
– The right position for the open-setting-container is changed to 32.5%.
– The width for the open-setting-container is changed to 120px.

For screens with a maximum width of 992px, the styles are adjusted as follows:

– The log-in-button styles are adjusted to have a black border, padding, border radius, background color, and color.
– The right position for the navigation account container is changed to 10%.
– The right position for the open-setting-container is changed to 10%.
– The width for the open-setting-container is changed to 90px.
– The background color for the open-setting-container is changed to #222222.

For screens with a maximum width of 600px, the styles are adjusted as follows:

– The log-in-button styles for active and hover states are adjusted.
– The right position for the navigation account container is changed to 8%.