.userdropdown .dropdown-menu {
    position: absolute;
    top: 0 !important;
    height: 100vh;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.userdropdown .dropdown-menu::-webkit-scrollbar {
    display: none;
}

.userdropdown .userImage {
    height: 44px;
    width: 44px;
    margin: auto 10px;
    display: inline-block;
    border-radius: 50%;
    background-size: contain;
}

.userdropdown .userOptionsContainer .headerContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.userdropdown .userOptionsContainer .headerContainer .titleContainer .organizationName {
    font-family: "Metropolis Semi Bold";
    color: #4b4a4a;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.36px;
    width: 50%;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.userdropdown .userOptionsContainer .headerContainer .titleContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.userdropdown .userOptionsContainer .imageAndNameContainer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.userdropdown .userOptionsContainer .imageAndNameContainer .image {
    width: 154px;
    height: 154px;
    border-radius: 50%;
    margin-bottom: 16px;
}

.userdropdown .userOptionsContainer .imageAndNameContainer .name {
    color: #4b4a4a;
    font-family: "Metropolis Regular";
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.36px;
}

.userdropdown .userOptionsContainer .headerContainer .imageAndNameContainer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.userdropdown .userOptionsContainer .headerContainer .closeIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/close_icon_black_accesibility_v1.png);
    background-repeat: no-repeat;
    background-size: 32px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin-right: 16px;
}

.userdropdown .userOptionsContainer .headerContainer .imageAndNameContainer .userImage {
    height: 64px;
    width: 64px;
    margin: auto 35px 0 20px;
    display: inline-block;
    border-radius: 50%;
    background-size: contain;
}

.userdropdown .userOptionsContainer .headerContainer .imageAndNameContainer .nameContainer {
    color: #4b4a4a;
    text-align: center;
    font-family: "Metropolis Regular";
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.36px;
}

.userdropdown .userOptionsContainer .userNav {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    height: 80px;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 4px 4px 4px 0px rgba(225, 237, 255, 0.8);
}

.userdropdown .userOptionsContainer .userNav.last-item {
    margin-bottom: 0;
}

.userdropdown .userOptionsContainer .userNav .nameAndIconContainer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .title {
    color: #4b4a4a;
    text-align: right;
    font-family: "Metropolis Regular";
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.36px;
}

.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .profileIcon,
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .rideridIcon,
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .passwordIcon,
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .privacysettingsIcon,
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .appearanceIcon,
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .settingsIcon,
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .billingsubscriptionIcon,
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .achievementsexpressoIcon,
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .familymanagementIcon,
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .resourcesIcon,
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .logoutIcon,
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .switchtoadminpanelIcon {
    background-repeat: no-repeat;
    height: 54px;
    width: 54px;
    background-size: 54px;
    margin: 10px 24px;
    margin-right: 16px;
}

.userdropdown .userOptionsContainer .userNav .arrowIcon {
    height: 54px;
    width: 54px;
    background-repeat: no-repeat;
    background-size: 54px;
    margin-right: 10px;
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/arrow_icon_new_blue.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .profileIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/profile_icon_new_lm.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .rideridIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/riderId_icon_new_lm.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .passwordIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/password_icon_new_lm.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .privacysettingsIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/lock_icon_blue.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .appearanceIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/sun_icon_new_lm.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .settingsIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/settings_icon_new_lm.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .billingsubscriptionIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/Icon_subscriptions_LM.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .achievementsexpressoIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/expresso_lm.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .familymanagementIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/Family_icon_LM.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .resourcesIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/v2/navigation/resources_lm_vq.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .logoutIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/logOut_icon_new_lm.png);
}
.userdropdown .userOptionsContainer .userNav .nameAndIconContainer .switchtoadminpanelIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/admin_panel_LM.svg);
}

/* DARK THEME */
.dark .userdropdown .userOptionsContainer .headerContainer .imageAndNameContainer .nameContainer,
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .title,
.dark .userdropdown .userOptionsContainer .imageAndNameContainer .name,
.dark .userdropdown .userOptionsContainer .headerContainer .titleContainer .organizationName {
    color: #fff;
}
.dark .userdropdown .userOptionsContainer .userNav {
    background-color: #1f2120;
    box-shadow: none;
}
.dark .userdropdown .userOptionsContainer .closeIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/close-icon_white_v1.png);
}
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .profileIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/profile_icon_new_dm.png);
}
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .rideridIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/riderId_icon_new_dm.png);
}
.dark .userdropdown .userOptionsContainer .userNav .passwordIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/password_icon_new_dm.png);
}
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .privacysettingsIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/lock_icon_white.png);
}
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .appearanceIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/moon_theme_icon_new_dm.png);
}
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .settingsIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/settings_icon_new_dm.png);
}
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .billingsubscriptionIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/Icon_subcriptions_DM.png);
}
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .achievementsexpressoIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/expresso_dm.png);
}
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .familymanagementIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/Family_icon_DM.png);
}
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .resourcesIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/v2/navigation/resources_dm_v1.png);
}
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .logoutIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/logOut_icon_new_dm.png);
}
.dark .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .switchtoadminpanelIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/admin_panel_DM.svg);
}

@media only screen and (max-width: 1024px) {
    .userdropdown .userOptionsContainer .headerContainer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 35px;
    }
    .userdropdown .userOptionsContainer .headerContainer .titleContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: -37px;
        width: 100%;
    }
    .userdropdown .userOptionsContainer .headerContainer .titleContainer .organizationName {
        text-align: center;
        width: 100%;
    }
    .userdropdown .userOptionsContainer .imageAndNameContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-block: 0px 35px;
    }
}

@media only screen and (max-width: 767px) {
    .userdropdown .userOptionsContainer .userNav {
        height: 50px;
        margin-bottom: 12px;
    }
    .userdropdown .userOptionsContainer .headerContainer .titleContainer .organizationName,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .title,
    .userdropdown .userOptionsContainer .imageAndNameContainer .name {
        text-align: left;
        font-family: "Metropolis Regular";
        font-size: 17px;
        line-height: 16px;
        letter-spacing: 0.17px;
        word-wrap: normal;
        display: block;
        -webkit-line-clamp: none;
        line-clamp: none;
        -webkit-box-orient: horizontal;
    }
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .profileIcon,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .rideridIcon,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .passwordIcon,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .privacysettingsIcon,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .appearanceIcon,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .settingsIcon,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .billingsubscriptionIcon,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .familymanagementIcon,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .resourcesIcon,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .logoutIcon,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .switchtoadminpanelIcon,
    .userdropdown .userOptionsContainer .userNav .nameAndIconContainer .achievementsexpressoIcon {
        height: 36px;
        width: 36px;
        background-size: 36px;
    }
    .userdropdown .userOptionsContainer .userNav .arrowIcon {
        height: 24px;
        width: 24px;
        background-size: 24px;
    }
    .userdropdown .userOptionsContainer .headerContainer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 35px;
    }
    .userdropdown .userOptionsContainer .imageAndNameContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-block: 0px 35px;
    }
    .userdropdown .userOptionsContainer .imageAndNameContainer .image {
        width: 36px;
        height: 36px;
    }
}