.sh_RoomTokenGatedRoom,
.mx_InviteDialog_tile_nameStack_name {
    align-items: center;
    display: flex;
}

.sh_RoomTokenGatedRoomIcon,
.sh_VerifiedIcon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

h2 .sh_RoomTokenGatedRoomIcon,
h2 .sh_VerifiedIcon {
    width: 26px;
    height: 26px;
}

.sh_VerifiedIcon {
    margin-right: 4px;
    margin-left: 4px;
}

.mx_UserInfo_profile .sh_VerifiedIcon {
    width: 18px;
    height: 18px;
    margin-top: 3px;
}

.mx_QuickSettingsButton.sh_SuperheroDexButton::before {
    -webkit-mask-image: url("../../themes/superhero/img/icons/diamond.svg");
    mask-image: url("../../themes/superhero/img/icons/diamond.svg");
}

/* START - Update @user chat message highlighting */
.mx_EventTile.mx_EventTile_highlight,
.mx_EventTile.mx_EventTile_highlight .markdown-body,
.mx_EventTile.mx_EventTile_highlight .mx_EventTile_edited {
    color: var(--cpd-color-orange-1000) !important;
    /* font-weight: bold; */
}

/* START - Custom Side Panel styling */
.mx_SpacePanel {
    --activeBackground-color: var(--cpd-color-alpha-gray-500) !important;
    background-image: linear-gradient(-75deg, #cc3ae6, #6147ff);
}
.mx_SpacePanel .mx_UserMenu_name {
    color: white !important;
    margin-left: 14px !important;
}

.mx_SpaceButton_home .mx_SpaceButton_icon {
    background: white !important;
    outline: 1px solid white;
}

.mx_SpacePanel .mx_SpaceButton_avatarWrapper .mx_BaseAvatar {
    border: 0px solid white;
    outline: 2px solid white;
    /* border-radius: 9px; */
}

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active .mx_BaseAvatar {
    border: 0px solid white;
    outline: 1px solid white;
}

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
    background: white !important;
    outline: 1px rgb(36, 36, 36) solid !important;
    border: 3px rgb(36, 36, 36) solid !important;
}

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
    background-color: var(--cpd-color-text-action-accent) !important;
}

.mx_NotificationBadge_visible {
    background-color: black !important;
    font-weight: 700 !important;
}

.mx_SpacePanel .mx_SpaceButton_active .mx_SpaceButton_avatarWrapper .mx_BaseAvatar {
    border: 0px solid white;
}

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name {
    color: white !important;
    margin-left: 14px !important;
}

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
    padding-right: 20px !important;
}

.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
    padding-right: 0px !important;
}

.mx_SpacePanel .mx_AccessibleButton.mx_SpacePanel_toggleCollapse {
    background-color: rgb(36, 36, 36) !important;
}

.mx_AccessibleButton.mx_LegacyRoomHeader_button.mx_AccessibleButton_disabled {
    display: none;
}

.cpd-theme-dark .mx_SpacePanel .mx_AccessibleButton.mx_SpacePanel_toggleCollapse {
    background-color: white !important;
}

.mx_SpacePanel .mx_QuickSettingsButton {
    color: white !important;
}

.mx_SpacePanel .mx_QuickSettingsButton::before {
    background-color: white !important;
}

.mx_SpacePanel .mx_QuickSettingsButton:not(.expanded):hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.mx_ToastContainer {
    top: 3px !important;
    left: 72px !important;
}

.mx_Toast_toast {
    background: var(--cpd-color-theme-bg) !important;
    width: 260px;
}
/* END - Custom Side Panel styling */

.cpd-theme-light {
    --cpd-color-text-primary: black !important;
    /* --cpd-color-text-secondary: black!important; */
}

.mx_LegacyRoomHeader_button:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* START - Custom Room Info Panel styling */
.mx_BaseCard {
    background-color: rgba(0, 0, 0, 0.025) !important;
}

.mx_BaseCard ._item_zxa40_17 {
    background: transparent !important;
}

.cpd-theme-dark .mx_BaseCard {
    background-color: rgba(0, 0, 0, 0.13) !important;
}
/* END - Custom Room Info Panel styling */

.cpd-theme-dark .mx_LeftPanel_wrapper .mx_LeftPanel_wrapper--user {
    background-color: rgba(0, 0, 0, 0.74) !important;
}

.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer {
    background-color: rgba(38, 40, 45, 0.9) !important;
}

.cpd-theme-dark {
    --cpd-color-text-primary: white !important;
    --cpd-color-text-secondary: var(--cpd-color-gray-1200) !important;
}

.cpd-theme-dark .mx_SpacePanel {
    /* --activeBackground-color: var(--cpd-color-alpha-gray-500)!important; */
    /* background-image: linear-gradient(25deg, #700483, #110177)!important; */
    background: linear-gradient(25deg, rgba(204, 58, 230, 0.2) 0%, rgba(97, 71, 255, 0.2) 100%), #313338;
}

.cpd-theme-dark .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon::before {
    background-color: #393559 !important;
}

.cpd-theme-dark .mx_NotificationBadge_visible {
    background-color: white !important;
}

.cpd-theme-dark .mx_NotificationBadge_visible .mx_NotificationBadge_count {
    color: black !important;
}

/* CPD Light Theme Overwrite */
.cpd-theme-light.cpd-theme-light {
    --cpd-color-text-action-accent: #6147ff !important;
    --cpd-color-alpha-gray-500: hsla(212, 87%, 15%, 0.2);
    --cpd-color-pink-1200: #a80298 !important;
    --cpd-color-fuchsia-1200: #8201aa !important;
    --cpd-color-purple-1200: #5f01ed !important;
    --cpd-color-blue-1200: #0530cd !important;
    --cpd-color-cyan-1200: #02b5c5 !important;
    --cpd-color-green-1200: #009e3d !important;
    --cpd-color-green-900: #02a769 !important;
    --cpd-color-lime-1200: #00b300 !important;
    --cpd-color-yellow-1200: #c09000 !important;
    --cpd-color-orange-1200: #d4570f !important;
    --cpd-color-orange-1000: #ac3300;
    --cpd-color-red-1100: #a4041d !important;
    --cpd-color-gray-1200: #3c4045;
    --cpd-color-theme-bg: #ffffff;
    --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
    --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
}

/* CPD Dark Theme Overwrite */
.cpd-theme-dark.cpd-theme-dark {
    --cpd-color-text-action-accent: #6147ff !important;
    --cpd-color-theme-bg: #313338 !important;
    --cpd-color-text-link-external: rgb(141, 149, 255) !important;
    --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
    --cpd-color-bg-subtle-primary: rgba(0, 0, 0, 0.075) !important;
    --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
    --cpd-color-alpha-gray-500: hsla(214, 41%, 97%, 0.15);
    --cpd-color-pink-1200: #c81fb7 !important;
    --cpd-color-pink-300: #544352 !important;
    --cpd-color-fuchsia-1200: #d538ee !important;
    --cpd-color-fuchsia-300: #52424f !important;
    --cpd-color-purple-1200: #9a30fd !important;
    --cpd-color-purple-300: #443f4c !important;
    --cpd-color-blue-1200: #006aff !important;
    --cpd-color-blue-300: #414852 !important;
    --cpd-color-cyan-1200: #08eaff !important;
    --cpd-color-cyan-300: #374445 !important;
    --cpd-color-green-1200: #00ff80 !important;
    --cpd-color-green-900: #00ff80 !important;
    --cpd-color-green-400: #3f4d46 !important;
    --cpd-color-green-300: #3f4d46 !important;
    --cpd-color-lime-1200: #48ff00 !important;
    --cpd-color-lime-300: #414d3c !important;
    --cpd-color-yellow-1200: #ffe100 !important;
    --cpd-color-yellow-300: #514e3e !important;
    --cpd-color-orange-1200: #ff7700 !important;
    --cpd-color-orange-1000: #eb7a12;
    --cpd-color-orange-300: #574c42 !important;
    --cpd-color-red-1200: #ff2600 !important;
    --cpd-color-red-300: #51423f !important;
    --cpd-color-gray-1200: #bdc3cc;
}

.mx_HomePage_title {
    font-size: 38px;
    font-weight: 700;
    line-height: 45px;
    letter-spacing: 0em;
    text-align: left;
    color: #1b1d22;
    margin-bottom: 24px;
    align-items: center;
    display: flex;
    align-items: center;
}

@media (max-width: 1250px) {
    .mx_HomePage_title {
        flex-direction: column;
    }
}

.cpd-theme-dark .mx_HomePage_title {
    color: #ffffff;
}

.mx_HomePage_title svg {
    height: 44px;
    width: 173.99px;
    margin-right: 8px;
}

.mx_HomePage_default_wrapper .chat_screen_shot {
    max-width: 70%;
}

.mx_HomePage_default_buttons_title {
    font-size: 30px;
}

.cpd-theme-dark .mx_HomePage_default_buttons_title {
    color: rgba(255, 255, 255, 0.7);
}

.cpd-theme-dark .mx_HomePage_default_buttons_title span {
    color: rgba(255, 255, 255, 1);
}

.mx_HomePage_default .mx_HomePage_default_buttons {
    margin: 10px auto 0 !important;
}

.cpd-theme-dark .mx_HomePage_default .mx_HomePage_default_buttons.browsers .mx_HomePage_button_custom {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_custom {
    width: auto !important;
    min-height: auto !important;
    padding: 16px 30px !important;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_custom svg {
    width: 50px !important;
    height: 50px !important;
    display: block !important;
    margin-bottom: 4px;
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_custom::before {
    display: none !important;
}

.mx_RoomGeneralContextMenu_iconSignOut::before {
    -webkit-mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
    mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
}

.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut::before {
    -webkit-mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
    mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_option_red .mx_IconizedContextMenu_icon::before {
    -webkit-mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
    mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
}