/** Rev2 specific Styles */ /* Import Vertical Menu Styles */ @media (min-width: 1100px) { /* Hide horizontal menu when vertical menu is present */ body:has(.page-with-menu) nav.resMenu:not(.vertical-menu), .page-with-menu ~ nav.resMenu:not(.vertical-menu), body:has(nav.resMenu.vertical-menu) nav.resMenu:not(.vertical-menu) { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; width: 0 !important; left: -9999px !important; } /* Page Layout with Menu */ .page-with-menu { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; width: 100%; position: relative; } /* Content wrapper created by JavaScript - wraps menu and body content after header */ .vertical-menu-content-wrapper { display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; width: 100%; position: relative; gap: 0; /* Vertical menu inside content wrapper */ /* When menu is hidden, keep it visible but collapsed (icons only) */ /* Wrapper div inside content wrapper - takes remaining space */ /* Other elements in wrapper */ /* Adjust spacing when menu is hidden - wrapper takes remaining space */ } .vertical-menu-content-wrapper > nav.resMenu.vertical-menu { position: relative; flex-shrink: 0; flex-grow: 0; order: 1; display: flex; width: 280px; min-width: 280px; max-width: 280px; top: auto; left: auto; padding: 10px; } .vertical-menu-content-wrapper > nav.resMenu.vertical-menu.menu-hidden { flex: 0 0 auto !important; flex-basis: auto !important; width: auto !important; min-width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .vertical-menu-content-wrapper > .wrapper, .vertical-menu-content-wrapper .wrapper { flex: 1; flex-grow: 1; flex-shrink: 1; flex-basis: auto; min-width: 0; margin: 0; margin-right: auto; margin-left: auto; padding-left: 3%; padding-right: 3%; width: auto; max-width: none; box-sizing: border-box; order: 2; display: block; float: none; clear: none; position: relative; z-index: 1; } .vertical-menu-content-wrapper > *:not(nav.resMenu.vertical-menu):not(.wrapper) { min-width: 0; order: 2; } .vertical-menu-content-wrapper nav.resMenu.vertical-menu.menu-hidden ~ .wrapper, .vertical-menu-content-wrapper nav.resMenu.vertical-menu.menu-hidden + .wrapper { padding-left: 3%; /* Normal padding, menu width is auto */ flex: 1 1 auto !important; /* Take all available space */ flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: auto !important; width: auto !important; max-width: none !important; margin-left: 0 !important; } /* MainContent wrapper - Flex container for vertical menu and content */ .mainContent { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; width: 100%; position: relative; gap: 0; /* Vertical menu inside mainContent */ /* Wrapper content inside mainContent */ /* Adjust padding when menu is hidden */ } .mainContent > nav.resMenu.vertical-menu { flex-shrink: 0; flex-grow: 0; order: 1; display: flex; position: absolute; top: 0; left: 0; z-index: 100; } .mainContent > .wrapper { flex: 1; flex-grow: 1; flex-shrink: 1; min-width: 0; order: 2; display: block; padding-left: 300px; padding-right: 3%; box-sizing: border-box; position: relative; z-index: 1; } .mainContent nav.resMenu.vertical-menu.menu-hidden ~ .wrapper { padding-left: 50px; } /* Vertical Menu Container - Override _menu.scss default display:none */ .page-with-menu .resMenu.vertical-menu, .resMenu.vertical-menu { width: 280px; background: #F5F5F5; border: 1px solid #FFFFFF; border-right: none; margin: 0; margin-left: 0; overflow-y: auto; flex-shrink: 0; display: flex; flex-direction: column; float: none; position: absolute; top: 0; left: 0; /*height: calc(84vh - 84px);*/ text-align: left; transition: width 0.3s ease, opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; opacity: 1; visibility: visible; transform: translateX(0); z-index: 100; box-shadow: none; background-color: white; /* Ensure menu is visible when not hidden */ /* Make ul stack items vertically */ /* Add icon before main menu items - icon will be added to tag using ::before */ /* Tier 1 Menu Items */ /* Submenu */ /* Submenu only shows on active state, not on hover */ /* Removed hover-based submenu display */ /* Specific rule for domainsmenu item (no submenu) */ /* Tier 2 items */ /* Tier 2 expandable items */ /* Tier 2 submenu */ /* Tier 2 submenu only shows on active state, not on hover */ /* Removed hover-based tier2_submenu display */ /* Tier 3 items */ /* Submenu items hover */ } .page-with-menu .resMenu.vertical-menu li a span, .resMenu.vertical-menu li a span { padding: 0; } .page-with-menu .resMenu.vertical-menu:not(.menu-hidden), .resMenu.vertical-menu:not(.menu-hidden) { display: flex; width: 280px; opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; } .page-with-menu .resMenu.vertical-menu > ul, .resMenu.vertical-menu > ul { display: flex; flex-direction: column; justify-content: space-between; width: auto; list-style: none; padding: 0; text-align: left; margin-top: 40px; /* Increased to ensure no overlap with toggle button */ height: auto; } .page-with-menu .resMenu.vertical-menu > ul > li, .resMenu.vertical-menu > ul > li { display: block; width: auto; float: none; text-align: left; } .page-with-menu .resMenu.vertical-menu .tier1, .resMenu.vertical-menu .tier1 { text-align: left; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; position: relative; /* Move domainsmenu to last position in vertical menu */ /* Media query for larger screens */ /* Arrow icon */ /* Hide arrow when submenu is visible (but not for active state - we want to show and rotate it) */ /* Submenu */ /* Menu item text */ /* Hover state - black background with white text */ /* Active state - always #e8e8e8 background when active (except on hover) */ /* Active state - change background image for i_tier1 icon (only when has background-color #e8e8e8) */ /* Ensure active state has #e8e8e8 background when submenu is visible */ /* Rotate arrow when active and submenu is visible (but not hovered) */ /* When active and hovered (black background) - use white icon rotated */ /* Icon images for each menu item - using tier1 class selector */ /* Domains */ /* How it Works */ /* Inventory */ /* Buyer Dashboard */ /* Bulk Tools */ /* Financial Center */ /* My Account */ /* Hover icons for expanded menu */ } .page-with-menu .resMenu.vertical-menu .tier1.domainsmenu, .resMenu.vertical-menu .tier1.domainsmenu { order: 999; position: relative; } .page-with-menu .resMenu.vertical-menu .tier1:last-child, .resMenu.vertical-menu .tier1:last-child { border-bottom: none; } } @media (min-width: 1100px) and (min-width: 1100px) { .page-with-menu .resMenu.vertical-menu .tier1, .resMenu.vertical-menu .tier1 { padding: 0; } .page-with-menu .resMenu.vertical-menu .tier1:hover, .resMenu.vertical-menu .tier1:hover { /*background-color: #e8e8e8;*/ border-bottom: none; } } @media (min-width: 1100px) { .page-with-menu .resMenu.vertical-menu .tier1 > a, .resMenu.vertical-menu .tier1 > a { text-align: left; justify-content: flex-start; align-items: center; padding: 0.75rem; color: #1A1A1A; background-color: transparent; text-decoration: none; display: flex; flex-direction: row; flex: 1; min-width: 0; box-sizing: border-box; white-space: nowrap; border-radius: 0.25rem; position: relative; /* Add icon before text using ::before pseudo-element */ } .page-with-menu .resMenu.vertical-menu .tier1 > a::before, .resMenu.vertical-menu .tier1 > a::before { content: ''; display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain; margin-right: 0.5rem; flex-shrink: 0; align-self: center; vertical-align: middle; } .page-with-menu .resMenu.vertical-menu .tier1 > a:hover, .resMenu.vertical-menu .tier1 > a:hover { background-color: #000000 !important; color: #FFFFFF !important; } .page-with-menu .resMenu.vertical-menu .tier1 > .i_tier1, .resMenu.vertical-menu .tier1 > .i_tier1 { display: inline-block; flex-shrink: 0; flex-grow: 0; margin-left: auto; margin-right: 0.75rem; align-self: center; vertical-align: middle; position: absolute; top: 0.75rem; right: 0.75rem; } .page-with-menu .resMenu.vertical-menu .tier1:hover:has(.submenu) > .i_tier1, .page-with-menu .resMenu.vertical-menu .tier1:has(.submenu:hover) > .i_tier1, .page-with-menu .resMenu.vertical-menu .tier1:has(.submenu:not(.invisible)):not(.active) > .i_tier1, .resMenu.vertical-menu .tier1:hover:has(.submenu) > .i_tier1, .resMenu.vertical-menu .tier1:has(.submenu:hover) > .i_tier1, .resMenu.vertical-menu .tier1:has(.submenu:not(.invisible)):not(.active) > .i_tier1 { display: none; } .page-with-menu .resMenu.vertical-menu .tier1 > .submenu, .resMenu.vertical-menu .tier1 > .submenu { flex-basis: 100%; width: auto; } .page-with-menu .resMenu.vertical-menu .tier1 > a .tier1_name, .resMenu.vertical-menu .tier1 > a .tier1_name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-with-menu .resMenu.vertical-menu .tier1:hover > a, .resMenu.vertical-menu .tier1:hover > a { background-color: #000000 !important; color: #FFFFFF !important; } .page-with-menu .resMenu.vertical-menu .tier1:hover:has(.submenu:not(.invisible)):not(.active) > a, .page-with-menu .resMenu.vertical-menu .tier1:has(.submenu:hover):not(.active) > a, .resMenu.vertical-menu .tier1:hover:has(.submenu:not(.invisible)):not(.active) > a, .resMenu.vertical-menu .tier1:has(.submenu:hover):not(.active) > a { background-color: #000000 !important; color: #FFFFFF !important; } .page-with-menu .resMenu.vertical-menu .tier1:hover:has(.submenu:not(.invisible)):not(.active) > .i_tier1, .page-with-menu .resMenu.vertical-menu .tier1:has(.submenu:hover):not(.active) > .i_tier1, .resMenu.vertical-menu .tier1:hover:has(.submenu:not(.invisible)):not(.active) > .i_tier1, .resMenu.vertical-menu .tier1:has(.submenu:hover):not(.active) > .i_tier1 { background-image: url("/images/wc_icons/menu_expand_white.png"); transform: rotate(0deg) !important; transition: transform .25s linear,-webkit-transform .25s linear; } .page-with-menu .resMenu.vertical-menu .tier1:hover:has(.submenu:not(.invisible)):not(.active) > .i_tier2_down, .page-with-menu .resMenu.vertical-menu .tier1:has(.submenu:hover):not(.active) > .i_tier2_down, .resMenu.vertical-menu .tier1:hover:has(.submenu:not(.invisible)):not(.active) > .i_tier2_down, .resMenu.vertical-menu .tier1:has(.submenu:hover):not(.active) > .i_tier2_down { background-image: url("/images/wc_icons/menu_expand_white.png"); transform: rotate(180deg); transition: transform .25s linear,-webkit-transform .25s linear; } .page-with-menu .resMenu.vertical-menu .tier1.active > a, .resMenu.vertical-menu .tier1.active > a { background-color: #e8e8e8 !important; color: #1A1A1A; } .page-with-menu .resMenu.vertical-menu .tier1.active > a .tier1_name, .resMenu.vertical-menu .tier1.active > a .tier1_name { color: #1A1A1A; } .page-with-menu .resMenu.vertical-menu .tier1.active:not(:hover) > a > .i_tier1, .resMenu.vertical-menu .tier1.active:not(:hover) > a > .i_tier1 { background-image: url("/images/wc_icons/menu_expand.png"); transform: rotate(180deg); transition: transform .25s linear,-webkit-transform .25s linear; } .page-with-menu .resMenu.vertical-menu .tier1.active:has(.submenu:not(.invisible)) > a, .resMenu.vertical-menu .tier1.active:has(.submenu:not(.invisible)) > a { background-color: #e8e8e8; } .page-with-menu .resMenu.vertical-menu .tier1.active:has(.submenu:not(.invisible)):not(:hover) > a > .i_tier1, .resMenu.vertical-menu .tier1.active:has(.submenu:not(.invisible)):not(:hover) > a > .i_tier1 { display: inline-block !important; background-image: url("/images/wc_icons/menu_expand.png") !important; transform: rotate(180deg) !important; transition: transform .25s linear,-webkit-transform .25s linear; } .page-with-menu .resMenu.vertical-menu .tier1.active:hover > a, .page-with-menu .resMenu.vertical-menu .tier1.active:has(.submenu:hover) > a, .resMenu.vertical-menu .tier1.active:hover > a, .resMenu.vertical-menu .tier1.active:has(.submenu:hover) > a { background-color: #000000 !important; color: #FFFFFF !important; } .page-with-menu .resMenu.vertical-menu .tier1.active:hover > a .tier1_name, .page-with-menu .resMenu.vertical-menu .tier1.active:has(.submenu:hover) > a .tier1_name, .resMenu.vertical-menu .tier1.active:hover > a .tier1_name, .resMenu.vertical-menu .tier1.active:has(.submenu:hover) > a .tier1_name { color: #FFFFFF !important; } .page-with-menu .resMenu.vertical-menu .tier1.active:hover:has(.submenu:not(.invisible)) > a > .i_tier1, .page-with-menu .resMenu.vertical-menu .tier1.active:has(.submenu:hover) > a > .i_tier1, .resMenu.vertical-menu .tier1.active:hover:has(.submenu:not(.invisible)) > a > .i_tier1, .resMenu.vertical-menu .tier1.active:has(.submenu:hover) > a > .i_tier1 { background-image: url("/images/wc_icons/menu_expand_white.png") !important; transform: rotate(180deg) !important; transition: transform .25s linear,-webkit-transform .25s linear; } .page-with-menu .resMenu.vertical-menu .tier1.domainsmenu > a::before, .resMenu.vertical-menu .tier1.domainsmenu > a::before { background-image: url("/images/wc_icons/home-icon.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.auctionsHome > a::before, .resMenu.vertical-menu .tier1.auctionsHome > a::before { background-image: url("/images/wc_icons/auctionsHome.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.howitworks > a::before, .resMenu.vertical-menu .tier1.howitworks > a::before { background-image: url("/images/wc_icons/Howitworks.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.inventory > a::before, .resMenu.vertical-menu .tier1.inventory > a::before { background-image: url("/images/wc_icons/Inventory.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.buyerdashboard > a::before, .resMenu.vertical-menu .tier1.buyerdashboard > a::before { background-image: url("/images/wc_icons/Buyerdashboard.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.bulktools > a::before, .resMenu.vertical-menu .tier1.bulktools > a::before { background-image: url("/images/wc_icons/Bulktools.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.financialcenter > a::before, .resMenu.vertical-menu .tier1.financialcenter > a::before { background-image: url("/images/wc_icons/Financialcenter.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.myaccount > a::before, .resMenu.vertical-menu .tier1.myaccount > a::before { background-image: url("/images/wc_icons/Myaccount.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.domainsmenu:hover > a::before, .resMenu.vertical-menu .tier1.domainsmenu:hover > a::before { background-image: url("/images/wc_icons/home-hover.png") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.auctionsHome:hover > a::before, .resMenu.vertical-menu .tier1.auctionsHome:hover > a::before { background-image: url("/images/wc_icons/auctionsHomeHover.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.howitworks:hover > a::before, .resMenu.vertical-menu .tier1.howitworks:hover > a::before { background-image: url("/images/wc_icons/HowitworksHover.svg") !important; width: 24px !important; height: 24px !important; filter: brightness(0) invert(1); } .page-with-menu .resMenu.vertical-menu .tier1.inventory:hover > a::before, .resMenu.vertical-menu .tier1.inventory:hover > a::before { background-image: url("/images/wc_icons/InventoryHover.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.buyerdashboard:hover > a::before, .resMenu.vertical-menu .tier1.buyerdashboard:hover > a::before { background-image: url("/images/wc_icons/BuyerdashboardHover.svg") !important; width: 24px !important; height: 24px !important; filter: brightness(0) invert(1); } .page-with-menu .resMenu.vertical-menu .tier1.bulktools:hover > a::before, .resMenu.vertical-menu .tier1.bulktools:hover > a::before { background-image: url("/images/wc_icons/BulktoolsHover.svg") !important; width: 24px !important; height: 24px !important; filter: brightness(0) invert(1); } .page-with-menu .resMenu.vertical-menu .tier1.financialcenter:hover > a::before, .resMenu.vertical-menu .tier1.financialcenter:hover > a::before { background-image: url("/images/wc_icons/FinancialcenterHover.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .tier1.myaccount:hover > a::before, .resMenu.vertical-menu .tier1.myaccount:hover > a::before { background-image: url("/images/wc_icons/MyaccountHover.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu .submenu, .resMenu.vertical-menu .submenu { position: relative; display: none; width: auto; padding: 0; margin: 0; margin-top: 0; left: 0; top: auto; right: auto; clear: both; text-align: left; z-index: auto; background-color: transparent; border: none; } .page-with-menu .resMenu.vertical-menu .submenu.invisible, .resMenu.vertical-menu .submenu.invisible { display: none; } .page-with-menu .resMenu.vertical-menu .submenu > li, .resMenu.vertical-menu .submenu > li { margin: 0; padding: 0; margin-bottom: 2px; width: 100%; position: relative; } .page-with-menu .resMenu.vertical-menu .submenu > li:last-child, .resMenu.vertical-menu .submenu > li:last-child { margin-bottom: 0; } .page-with-menu .resMenu.vertical-menu .submenu > li > a, .resMenu.vertical-menu .submenu > li > a { background-color: white; color: #000000; text-decoration: none; } .page-with-menu .resMenu.vertical-menu .submenu > li > a:hover, .resMenu.vertical-menu .submenu > li > a:hover { background-color: #e8e8e8; color: #000000; text-decoration: underline; } .page-with-menu .resMenu.vertical-menu .tier1:hover:has(.submenu) > a, .page-with-menu .resMenu.vertical-menu .tier1:has(.submenu:hover) > a, .resMenu.vertical-menu .tier1:hover:has(.submenu) > a, .resMenu.vertical-menu .tier1:has(.submenu:hover) > a { background-color: #000000 !important; color: #FFFFFF !important; } .page-with-menu .resMenu.vertical-menu .tier1:hover:has(.submenu) > a .tier1_name, .page-with-menu .resMenu.vertical-menu .tier1:has(.submenu:hover) > a .tier1_name, .resMenu.vertical-menu .tier1:hover:has(.submenu) > a .tier1_name, .resMenu.vertical-menu .tier1:has(.submenu:hover) > a .tier1_name { color: #FFFFFF !important; background-color: black; } .page-with-menu .resMenu.vertical-menu .tier1:not(:hover) > a, .resMenu.vertical-menu .tier1:not(:hover) > a { background-color: transparent; color: #1A1A1A; } .page-with-menu .resMenu.vertical-menu .tier1:not(:hover) > .i_tier1, .resMenu.vertical-menu .tier1:not(:hover) > .i_tier1 { background-image: url("/images/wc_icons/menu_expand.png"); transform: rotate(0deg); transition: transform .25s linear,-webkit-transform .25s linear; } .page-with-menu .resMenu.vertical-menu .tier1:not(:hover) > a .tier1_name, .resMenu.vertical-menu .tier1:not(:hover) > a .tier1_name { color: #1A1A1A; } .page-with-menu .resMenu.vertical-menu .tier1.domainsmenu:hover > a, .page-with-menu .resMenu.vertical-menu .tier1.auctionsHome:hover > a, .resMenu.vertical-menu .tier1.domainsmenu:hover > a, .resMenu.vertical-menu .tier1.auctionsHome:hover > a { background-color: #000000 !important; color: #FFFFFF !important; } .page-with-menu .resMenu.vertical-menu .tier1.domainsmenu:hover > a .tier1_name, .page-with-menu .resMenu.vertical-menu .tier1.auctionsHome:hover > a .tier1_name, .resMenu.vertical-menu .tier1.domainsmenu:hover > a .tier1_name, .resMenu.vertical-menu .tier1.auctionsHome:hover > a .tier1_name { color: #FFFFFF !important; background-color: black; } .page-with-menu .resMenu.vertical-menu .tier1.active .submenu, .resMenu.vertical-menu .tier1.active .submenu { display: block; position: relative; margin-left: 20px; top: auto; right: auto; padding: 0; border: none; border-left: 1px solid #e8e8e8; border-radius: revert; background-color: white; } .page-with-menu .resMenu.vertical-menu .tier2, .resMenu.vertical-menu .tier2 { width: 100% !important; margin-left: 20px; padding: revert; border-radius: revert; background-color: white; } .page-with-menu .resMenu.vertical-menu .tier2:last-child, .resMenu.vertical-menu .tier2:last-child { border-bottom: none; } .page-with-menu .resMenu.vertical-menu .tier2 > a, .resMenu.vertical-menu .tier2 > a { text-align: left; padding-right: 0.75rem; display: block; width: auto; border-radius: 0.25rem; background-color: white; color: #000000; text-decoration: none; transition: background-color 0.2s ease; } .page-with-menu .resMenu.vertical-menu .tier2 > a:hover, .resMenu.vertical-menu .tier2 > a:hover { color: #000000; text-decoration: underline; } .page-with-menu .resMenu.vertical-menu .tier2_expand, .resMenu.vertical-menu .tier2_expand { text-align: left; width: calc(100% - 20px); display: flex; flex-direction: column; margin-left: 20px; /* Media query for larger screens */ /* Active state - always #e8e8e8 background when active (except on hover) */ /* Keep parent background #e8e8e8 even when nested submenu items are hovered */ /* Override: when nested submenu is hovered, keep parent background #e8e8e8 */ } .page-with-menu .resMenu.vertical-menu .tier2_expand:last-child, .resMenu.vertical-menu .tier2_expand:last-child { border-bottom: none; } } @media (min-width: 1100px) and (min-width: 1100px) { .page-with-menu .resMenu.vertical-menu .tier2_expand:hover, .resMenu.vertical-menu .tier2_expand:hover { /* background: linear-gradient(0deg, #e8e8e8, #e8e8e8), #e8e8e8;*/ } } @media (min-width: 1100px) { .page-with-menu .resMenu.vertical-menu .tier2_expand > a, .resMenu.vertical-menu .tier2_expand > a { text-align: left; padding-left: 0.75rem; padding-right: 0.75rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: auto; border-radius: 0.25rem; background-color: white; color: #000000; text-decoration: none; transition: background-color 0.2s ease; } .page-with-menu .resMenu.vertical-menu .tier2_expand > a:hover, .resMenu.vertical-menu .tier2_expand > a:hover { background-color: #e8e8e8; color: #000000; text-decoration: underline; } .page-with-menu .resMenu.vertical-menu .tier2_expand.active > a, .resMenu.vertical-menu .tier2_expand.active > a { background-color: #e8e8e8 !important; color: #000000; } .page-with-menu .resMenu.vertical-menu .tier2_expand.active:has(.tier2_submenu:hover) > a, .resMenu.vertical-menu .tier2_expand.active:has(.tier2_submenu:hover) > a { /*background-color: #e8e8e8 !important;*/ } .page-with-menu .resMenu.vertical-menu .tier2_expand.active:has(.tier2_submenu:hover) > a:hover, .resMenu.vertical-menu .tier2_expand.active:has(.tier2_submenu:hover) > a:hover { /*background-color: #e8e8e8 !important;*/ } .page-with-menu .resMenu.vertical-menu .tier2_expand > .i_tier2_i, .resMenu.vertical-menu .tier2_expand > .i_tier2_i { display: none; } .page-with-menu .resMenu.vertical-menu .tier2_expand > .i_tier2_down, .resMenu.vertical-menu .tier2_expand > .i_tier2_down { display: inline-block; flex-shrink: 0; flex-grow: 0; align-self: center; margin-left: auto; margin-right: 0; transition: transform 0.3s ease; /*transform: rotate(0deg);*/ } .page-with-menu .resMenu.vertical-menu .tier2_expand.active > .i_tier2_down, .resMenu.vertical-menu .tier2_expand.active > .i_tier2_down { background-image: url("/images/wc_icons/menu_expand.png"); transform: rotate(180deg); transition: transform .25s linear,-webkit-transform .25s linear; } .page-with-menu .resMenu.vertical-menu .tier2_expand:hover:has(.tier2_submenu:not(.invisible)) > .i_tier2_down, .page-with-menu .resMenu.vertical-menu .tier2_expand:has(.tier2_submenu:hover) > .i_tier2_down, .page-with-menu .resMenu.vertical-menu .tier2_expand.active:has(.tier2_submenu:not(.invisible)) > .i_tier2_down, .page-with-menu .resMenu.vertical-menu .tier2_expand:has(.tier2_submenu:not(.invisible)) > .i_tier2_down, .resMenu.vertical-menu .tier2_expand:hover:has(.tier2_submenu:not(.invisible)) > .i_tier2_down, .resMenu.vertical-menu .tier2_expand:has(.tier2_submenu:hover) > .i_tier2_down, .resMenu.vertical-menu .tier2_expand.active:has(.tier2_submenu:not(.invisible)) > .i_tier2_down, .resMenu.vertical-menu .tier2_expand:has(.tier2_submenu:not(.invisible)) > .i_tier2_down { /*transform: rotate(180deg);*/ } .page-with-menu .resMenu.vertical-menu .tier2_submenu, .resMenu.vertical-menu .tier2_submenu { position: relative; display: none; left: 0; top: auto; right: auto; margin: 0; margin-left: 20px; text-align: left; z-index: auto; padding: 0; border: none; } .page-with-menu .resMenu.vertical-menu .tier2_submenu.invisible, .resMenu.vertical-menu .tier2_submenu.invisible { display: none; } .page-with-menu .resMenu.vertical-menu .tier2_submenu > li, .resMenu.vertical-menu .tier2_submenu > li { margin: 0; padding: 0; } .page-with-menu .resMenu.vertical-menu .tier2_submenu > li:last-child, .resMenu.vertical-menu .tier2_submenu > li:last-child { margin-bottom: 0; } .page-with-menu .resMenu.vertical-menu .tier2_submenu > li > a, .resMenu.vertical-menu .tier2_submenu > li > a { background-color: white; color: #000000; text-decoration: none; } .page-with-menu .resMenu.vertical-menu .tier2_submenu > li > a:hover, .resMenu.vertical-menu .tier2_submenu > li > a:hover { background-color: #e8e8e8; color: #000000; text-decoration: underline; } .page-with-menu .resMenu.vertical-menu .tier2_expand.active .tier2_submenu, .resMenu.vertical-menu .tier2_expand.active .tier2_submenu { display: block; position: relative; left: 0; top: auto; right: auto; margin: 0; margin-left: 20px; padding: 0; border: none; border-left: 1px solid #e8e8e8; border-radius: revert; /*background-color: #e8e8e8 !important;*/ } .page-with-menu .resMenu.vertical-menu .tier3, .resMenu.vertical-menu .tier3 { text-align: left; width: 80%; margin-left: 40px; position: relative; } .page-with-menu .resMenu.vertical-menu .tier3:last-child, .resMenu.vertical-menu .tier3:last-child { border-bottom: none; } .page-with-menu .resMenu.vertical-menu .tier3 > a, .resMenu.vertical-menu .tier3 > a { text-align: left; padding-left: 0.75rem; padding-right: 0.75rem; display: block; width: 100%; border-radius: 0.25rem; background-color: transparent; color: #000000; text-decoration: none; transition: background-color 0.2s ease; } .page-with-menu .resMenu.vertical-menu .tier3 > a:hover, .resMenu.vertical-menu .tier3 > a:hover { background-color: transparent; color: #000000; text-decoration: none; } .page-with-menu .resMenu.vertical-menu .submenu > li > a:hover, .resMenu.vertical-menu .submenu > li > a:hover { background-color: #e8e8e8; color: #000000; text-decoration: underline; } .page-with-menu .resMenu.vertical-menu .tier2_submenu > li > a:hover, .resMenu.vertical-menu .tier2_submenu > li > a:hover { background-color: #e8e8e8; color: #000000; text-decoration: underline; } } @media (min-width: 1100px) and (min-width: 1100px) { .page-with-menu .resMenu.vertical-menu, .resMenu.vertical-menu { /* Active state - ensure rotation works even in media query */ } .page-with-menu .resMenu.vertical-menu .tier1:hover, .resMenu.vertical-menu .tier1:hover { background-color: white; } .page-with-menu .resMenu.vertical-menu .tier1:hover:not(.active) > a span, .resMenu.vertical-menu .tier1:hover:not(.active) > a span { /*background-color: #ffffff; color:blue;*/ text-decoration: underline; } .page-with-menu .resMenu.vertical-menu .tier1:hover:not(.active) .i_tier1, .resMenu.vertical-menu .tier1:hover:not(.active) .i_tier1 { background-image: url("/images/wc_icons/menu_expand_white.png"); transform: rotate(0deg) !important; transition: transform .25s linear,-webkit-transform .25s linear; } .page-with-menu .resMenu.vertical-menu .tier1.active .i_tier1, .resMenu.vertical-menu .tier1.active .i_tier1 { background-image: url("/images/wc_icons/menu_expand_white.png"); transform: rotate(180deg); transition: transform .25s linear, -webkit-transform .25s linear; } } @media (min-width: 1100px) { /* Content Wrapper */ .menu-content-wrapper { flex: 1; min-width: 0; display: block; width: auto; padding-left: 1rem; } .menu-content-wrapper section { padding-left: 0; } /* Toggle Button - Inside vertical menu */ .resMenu.vertical-menu { position: relative; } #leftslidebar.vertical-menu-toggle-container { position: absolute; top: 0; display: flex; align-items: center; justify-content: flex-end; padding: 4px 12px; margin: 0; cursor: pointer; background-color: transparent !important; width: auto; min-width: 40px; z-index: 100; transition: right 0.3s ease, left 0.3s ease; pointer-events: auto; border-radius: 4px; /* Consistent styles for leftBarText in both expanded and collapsed states */ } #leftslidebar.vertical-menu-toggle-container #leftBarText { display: inline-block; visibility: visible; opacity: 1; cursor: pointer; position: relative; text-align: center; margin: 0; background-color: #e8e8e8; border: none; transition: background-color 0.2s ease, transform 0.2s ease; /* For image toggle */ /* For text toggle (fallback) */ font-size: 18px; font-weight: 800; } #leftslidebar.vertical-menu-toggle-container #leftBarText[src] { width: 24px; height: 24px; } #leftslidebar.vertical-menu-toggle-container #leftBarText:hover { transform: scale(1.1); background-color: #d8d8d8; } #leftslidebar.vertical-menu-toggle-container .vertical-menu-toggle-arrow { display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 4px 8px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.9); border: 1px solid #E0E0E0; color: #000000; font-size: 16px; font-weight: bold; transition: background-color 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } #leftslidebar.vertical-menu-toggle-container .vertical-menu-toggle-arrow:hover { background-color: whitesmoke; } #leftslidebar.vertical-menu-toggle-container .vertical-menu-toggle-arrow #toggleArrow { display: inline-block; font-family: Arial, sans-serif; font-size: 18px; line-height: 1; user-select: none; } /* When menu is hidden - show only icons, hide text */ .page-with-menu .resMenu.vertical-menu.menu-hidden, .resMenu.vertical-menu.menu-hidden { width: auto !important; min-width: auto !important; max-width: none !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; transform: translateX(0) !important; transition: width 0.3s ease, opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; margin-right: 0; border: 1px solid #FFFFFF; border-right: none; padding: 0; flex-shrink: 0; flex-grow: 0; flex-basis: auto; pointer-events: auto !important; display: flex !important; font-size: 0; /* Hide all text */ position: relative !important; /* For absolute positioning of leftslidebar */ /* Ensure ul and li are visible */ /* Ensure menu items are visible */ /* Ensure links are visible */ /* Ensure icons are visible when menu is hidden */ /* Icon images for collapsed menu - using tier1 class selector */ /* Domains */ /* How it Works */ /* Buyer Dashboard */ /* Bulk Tools */ /* Financial Center */ /* My Account */ /* Hover icons for collapsed menu */ /* Tooltip on hover - show menu item name */ /* Tooltip text for each menu item */ /* Show tooltip on hover */ /* Hide text when collapsed */ /* Hide arrow icon when collapsed */ /* Hide submenu when collapsed */ /* Show leftslidebar container at top when menu is hidden - width should match menu width exactly */ /* leftBarText - same styles in both states */ } .page-with-menu .resMenu.vertical-menu.menu-hidden > ul, .resMenu.vertical-menu.menu-hidden > ul { display: flex !important; visibility: visible !important; opacity: 1 !important; flex-direction: column !important; margin-top: 50px !important; /* Space for leftBarText */ width: 100% !important; padding: 0 !important; list-style: none !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden > ul > li, .resMenu.vertical-menu.menu-hidden > ul > li { display: block !important; visibility: visible !important; opacity: 1 !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1, .resMenu.vertical-menu.menu-hidden .tier1 { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1 > a, .resMenu.vertical-menu.menu-hidden .tier1 > a { display: flex !important; visibility: visible !important; opacity: 1 !important; font-size: 0 !important; /* Hide text */ padding: 0.5rem !important; justify-content: center !important; align-items: center !important; min-height: 40px !important; width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1 > a::before, .resMenu.vertical-menu.menu-hidden .tier1 > a::before { display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-size: 0 !important; /* Override parent font-size: 0, icons use background-image */ background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; margin-right: 0 !important; flex-shrink: 0 !important; align-self: center !important; content: '' !important; /* Required for ::before pseudo-element */ } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.domainsmenu > a::before, .resMenu.vertical-menu.menu-hidden .tier1.domainsmenu > a::before { background-image: url("/images/wc_icons/home-icon.svg") !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.auctionsHome > a::before, .resMenu.vertical-menu.menu-hidden .tier1.auctionsHome > a::before { background-image: url("/images/wc_icons/auctionsHome.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.howitworks > a::before, .resMenu.vertical-menu.menu-hidden .tier1.howitworks > a::before { background-image: url("/images/wc_icons/Howitworks.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.buyerdashboard > a::before, .resMenu.vertical-menu.menu-hidden .tier1.buyerdashboard > a::before { background-image: url("/images/wc_icons/Buyerdashboard.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.bulktools > a::before, .resMenu.vertical-menu.menu-hidden .tier1.bulktools > a::before { background-image: url("/images/wc_icons/Bulktools.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.financialcenter > a::before, .resMenu.vertical-menu.menu-hidden .tier1.financialcenter > a::before { background-image: url("/images/wc_icons/Financialcenter.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.myaccount > a::before, .resMenu.vertical-menu.menu-hidden .tier1.myaccount > a::before { background-image: url("/images/wc_icons/Myaccount.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.domainsmenu:hover > a::before, .resMenu.vertical-menu.menu-hidden .tier1.domainsmenu:hover > a::before { background-image: url("/images/wc_icons/home-hover.png") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.auctionsHome:hover > a::before, .resMenu.vertical-menu.menu-hidden .tier1.auctionsHome:hover > a::before { background-image: url("/images/wc_icons/auctionsHomeHover.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.howitworks:hover > a::before, .resMenu.vertical-menu.menu-hidden .tier1.howitworks:hover > a::before { background-image: url("/images/wc_icons/HowitworksHover.svg") !important; width: 24px !important; height: 24px !important; filter: brightness(0) invert(1); } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.buyerdashboard:hover > a::before, .resMenu.vertical-menu.menu-hidden .tier1.buyerdashboard:hover > a::before { background-image: url("/images/wc_icons/BuyerdashboardHover.svg") !important; width: 24px !important; height: 24px !important; filter: brightness(0) invert(1); } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.bulktools:hover > a::before, .resMenu.vertical-menu.menu-hidden .tier1.bulktools:hover > a::before { background-image: url("/images/wc_icons/BulktoolsHover.svg") !important; width: 24px !important; height: 24px !important; filter: brightness(0) invert(1); } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.financialcenter:hover > a::before, .resMenu.vertical-menu.menu-hidden .tier1.financialcenter:hover > a::before { background-image: url("/images/wc_icons/FinancialcenterHover.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.myaccount:hover > a::before, .resMenu.vertical-menu.menu-hidden .tier1.myaccount:hover > a::before { background-image: url("/images/wc_icons/MyaccountHover.svg") !important; width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1 > a, .resMenu.vertical-menu.menu-hidden .tier1 > a { position: relative !important; /* For tooltip positioning */ } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1 > a::after, .resMenu.vertical-menu.menu-hidden .tier1 > a::after { position: absolute !important; left: calc(100% + 8px) !important; /* Position to the right of icon with spacing */ top: 50% !important; transform: translateY(-50%) !important; border: 1px solid !important; border-color: black !important; background-color: white !important; color: black !important; /* Tooltip text color */ padding: 6px 10px !important; border-radius: 4px !important; font-size: 12px !important; font-weight: normal !important; white-space: nowrap !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 10000 !important; transition: opacity 0.2s ease, visibility 0.2s ease !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; content: '' !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.domainsmenu > a::after, .resMenu.vertical-menu.menu-hidden .tier1.domainsmenu > a::after { content: 'Network Solutions Home' !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.auctionsHome > a::after, .resMenu.vertical-menu.menu-hidden .tier1.auctionsHome > a::after { content: 'Auctions Home' !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.howitworks > a::after, .resMenu.vertical-menu.menu-hidden .tier1.howitworks > a::after { content: 'How it Works' !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.buyerdashboard > a::after, .resMenu.vertical-menu.menu-hidden .tier1.buyerdashboard > a::after { content: 'Buyer Dashboard' !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.bulktools > a::after, .resMenu.vertical-menu.menu-hidden .tier1.bulktools > a::after { content: 'Bulk Tools' !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.financialcenter > a::after, .resMenu.vertical-menu.menu-hidden .tier1.financialcenter > a::after { content: 'Financial Center' !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.myaccount > a::after, .resMenu.vertical-menu.menu-hidden .tier1.myaccount > a::after { content: 'My Account' !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1.inventory > a::after, .resMenu.vertical-menu.menu-hidden .tier1.inventory > a::after { content: 'Inventory' !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1 > a:hover::after, .resMenu.vertical-menu.menu-hidden .tier1 > a:hover::after { opacity: 1 !important; visibility: visible !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1 > a .tier1_name, .resMenu.vertical-menu.menu-hidden .tier1 > a .tier1_name { display: none !important; visibility: hidden !important; opacity: 0 !important; font-size: 0 !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1 > .i_tier1, .resMenu.vertical-menu.menu-hidden .tier1 > .i_tier1 { display: none !important; visibility: hidden !important; opacity: 0 !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden .tier1 > .submenu, .resMenu.vertical-menu.menu-hidden .tier1 > .submenu { display: none !important; visibility: hidden !important; opacity: 0 !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden #leftslidebar.vertical-menu-toggle-container, .resMenu.vertical-menu.menu-hidden #leftslidebar.vertical-menu-toggle-container { display: flex !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; /* Stretch to right edge of menu */ width: 100% !important; /* Full width of menu container */ box-sizing: border-box !important; /* Include padding in width */ align-items: center !important; justify-content: center !important; z-index: 1001 !important; background-color: transparent !important; border: none !important; margin: 0 !important; padding: 4px 8px !important; /* Reduced padding to match menu width */ min-width: 0 !important; /* Remove min-width constraint */ transition: right 0.3s ease, left 0.3s ease !important; pointer-events: auto !important; border-radius: 0 !important; /* No border radius to match menu edges */ } .page-with-menu .resMenu.vertical-menu.menu-hidden #leftslidebar.vertical-menu-toggle-container #leftBarText, .resMenu.vertical-menu.menu-hidden #leftslidebar.vertical-menu-toggle-container #leftBarText { display: inline-block !important; visibility: visible !important; opacity: 1 !important; cursor: pointer !important; position: relative !important; text-align: center !important; margin: 0 auto !important; box-sizing: border-box !important; background-color: #e8e8e8 !important; border: none !important; transition: background-color 0.2s ease, transform 0.2s ease !important; /* For image toggle */ /* For text toggle (fallback) */ font-size: 18px !important; font-weight: 800 !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden #leftslidebar.vertical-menu-toggle-container #leftBarText[src], .resMenu.vertical-menu.menu-hidden #leftslidebar.vertical-menu-toggle-container #leftBarText[src] { width: 24px !important; height: 24px !important; } .page-with-menu .resMenu.vertical-menu.menu-hidden #leftslidebar.vertical-menu-toggle-container #leftBarText:hover, .resMenu.vertical-menu.menu-hidden #leftslidebar.vertical-menu-toggle-container #leftBarText:hover { transform: scale(1.1) !important; background-color: #d8d8d8 !important; } /* Explicitly show menu when menu-hidden class is removed */ .page-with-menu .resMenu.vertical-menu:not(.menu-hidden), .resMenu.vertical-menu:not(.menu-hidden) { display: flex; width: 280px; min-width: 280px; max-width: 280px; opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; overflow-y: auto; border: 1px solid #FFFFFF; border-right: none; margin-right: 0; padding: 0; flex-shrink: 0; } /* Toggle button when menu is hidden - Case 1: Button still inside menu - width should match menu width exactly */ .resMenu.vertical-menu.menu-hidden #leftslidebar.vertical-menu-toggle-container { display: flex !important; visibility: visible !important; opacity: 1 !important; right: 0 !important; /* Stretch to right edge */ left: 0 !important; position: absolute !important; top: 0 !important; z-index: 1001 !important; transform: translateX(0) !important; width: 100% !important; /* Full width of menu container */ box-sizing: border-box !important; /* Include padding in width */ align-items: center !important; justify-content: center !important; background-color: transparent !important; border: none !important; margin: 0 !important; padding: 5px 0px !important; /* Reduced padding */ min-width: 0 !important; /* Remove min-width constraint */ transition: right 0.3s ease, left 0.3s ease !important; pointer-events: auto !important; border-radius: 0 !important; /* No border radius to match menu edges */ /* Ensure the image/icon is visible when menu is collapsed */ } .resMenu.vertical-menu.menu-hidden #leftslidebar.vertical-menu-toggle-container #leftBarText { display: inline-block !important; visibility: visible !important; opacity: 1 !important; width: 24px !important; height: 24px !important; background-color: #e8e8e8 !important; border-radius: 4px !important; } /* Case 2: Button moved outside menu by JavaScript */ .vertical-menu-content-wrapper > #leftslidebar.vertical-menu-toggle-container, body > #leftslidebar.vertical-menu-toggle-container { display: flex; visibility: visible; opacity: 1; left: 0; position: relative; bottom: 0; width: 50px; min-width: 50px; max-width: 50px; height: auto; /*max-height: calc(100vh - 84px);*/ z-index: 10; background-color: #E0E0E0; border-right: 1px solid #E0E0E0; padding: 20px; margin: 0; overflow: visible; pointer-events: auto; transform: none; align-items: center; justify-content: flex-start; flex-direction: column; /* Ensure the image/icon is visible */ } .vertical-menu-content-wrapper > #leftslidebar.vertical-menu-toggle-container #leftBarText, body > #leftslidebar.vertical-menu-toggle-container #leftBarText { display: inline-block !important; visibility: visible !important; opacity: 1 !important; width: 24px !important; height: 24px !important; } .vertical-menu-content-wrapper > #leftslidebar.vertical-menu-toggle-container .vertical-menu-toggle-arrow, body > #leftslidebar.vertical-menu-toggle-container .vertical-menu-toggle-arrow { margin: auto; transform: rotate(0deg); } .vertical-menu-content-wrapper > #leftslidebar.vertical-menu-toggle-container .vertical-menu-toggle-arrow #toggleArrow, body > #leftslidebar.vertical-menu-toggle-container .vertical-menu-toggle-arrow #toggleArrow { writing-mode: horizontal-tb; } /* Adjust content wrapper padding when menu is hidden */ .vertical-menu-content-wrapper nav.resMenu.vertical-menu.menu-hidden ~ .wrapper, .vertical-menu-content-wrapper nav.resMenu.vertical-menu.menu-hidden + .wrapper, .mainContent nav.resMenu.vertical-menu.menu-hidden ~ .wrapper { padding-left: 50px; } } .resMenu.vertical-menu .i_tier1 { background-image: url("/images/wc_icons/menu_expand.png"); margin-right: 0px; } .resMenu.vertical-menu .tier1_name { font-size: .875rem; line-height: 1.25rem; font-weight: 500; } .resMenu.vertical-menu .tier1_name:hover { font-weight: 700 !important; } .resMenu.vertical-menu li.tier2 a span, .resMenu.vertical-menu .tier2_expand a span { font-weight: 400; font-size: .875rem; } /* // *default* - smallest screen // ADD MORE BREAKPOINTS HERE! $screen-phone: 500px; // phone screen breakpoint $screen-tablet: 800px; // tablet screen breakpoint $screen-small: 1100px; // small PC screen breakpoint $screen-medium: 1300px; // medium PC screen $screen-large: 1600px; // large PC breakpoint $screen-2500: 2500px; // Icons $icon_50: 50px; $icon_35: 35px; $icon_25: 25px; $icon_16: 16px; $icon_26: 26px; */ .resMenu span, .resMenu a { font-family: 'Work Sans', Helvetica, sans-serif; font-size: 16px; } .headerBottom { margin-top: 10px; border-bottom: 3px solid #cccccc; -webkit-box-shadow: 0px 2px 5px 0px rgba(204, 204, 204, 0.8); -moz-box-shadow: 0px 2px 5px 0px rgba(204, 204, 204, 0.8); box-shadow: 0px 2px 5px 0px rgba(204, 204, 204, 0.8); } .submenu { top: 36px; width: 100%; } @media (min-width: 1100px) { .submenu { position: absolute; width: 225px; } } @media (min-width: 1100px) { .tier1:hover .i_tier1 { background-image: url("/images/menu_expand.png"); transform: rotate(180deg); transition: transform .25s linear,-webkit-transform .25s linear; } .tier2_expand:hover .i_tier2_i { background-image: url("/images/menu_expand_right.png"); transform: rotate(180deg); transition: transform .25s linear,-webkit-transform .25s linear; } .i_tier2_i { transition: transform .25s linear,-webkit-transform .25s linear; } } @media (min-width: 1080px) { .tier2_submenu { left: 225px; } } .tier2 { border-top: none; padding-top: 5px; } .tier2_expand { padding-top: 5px; border-top: none; } .tier3 { padding-top: 5px; border-top: none; } .i_tier1 { transform: rotate(0deg); transition: transform .25s linear,-webkit-transform .25s linear; position: absolute; right: 12px; top: 12px; } @media (min-width: 1100px) { .i_tier1 { display: inline-block; position: relative; right: auto; top: auto; margin-right: 8px; } } li a span { padding-left: 10px; } .tier3 a span { padding-left: 20px; } @media (min-width: 1100px) { .tier3 a span { padding-left: 0px; } } .secondMenu { display: none; } .shoppingcart_wrapper { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; gap: 40px; align-items: center; } @media (min-width: 1165px) { .shoppingcart_wrapper { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } } .shoppingcart_filler { text-align: center; display: none; } @media (min-width: 1165px) { .shoppingcart_filler { visibility: hidden; display: block; } } .shoppingCartDate { text-align: right; } .elementinvisible { display: none; } .elementvisible { display: none; } .shoppingCart div.bidCol { display: flex; margin: 0; justify-content: flex-start; } .shoppingCart div.bidCol img { height: 13px; } .columnhidden { visibility: hidden; } .deletecolumn { width: 30px; } #shoppingcart input[type="checkbox"] { margin-top: 0px; } #shoppingCartTable { margin-left: 0; } #shoppingCartTable thead th { color: white; background-color: white; } @media (min-width: 581px) { #shoppingCartTable { border-collapse: separate; border-spacing: 0 25px; border-bottom: none; } #shoppingCartTable thead { display: none; } } .shoppingCart .continueShopping { margin-top: 0px; float: right; } @media (min-width: 800px) { .shoppingCart .continueShopping { margin-top: 0px; float: right; } } .shoppingCart div.bidCol > div:first-child { margin-right: 10px; } .shoppingCart div.bidCol > div { flex-grow: 0; padding: 5px; } h1, .header { border-bottom: none; } .shoppingCart table.dataTable tbody tr { border: 1px dotted #cccccc; } .shoppingCart table.dataTable tbody td { padding: 15px 5px; border-bottom: 1px dotted #cccccc; } .shoppingCart .totalsBox { border: 1px solid; padding: 15px 5px; } .h1center { text-align: center; border: 0px; font-weight: 200; font-size: 28px; letter-spacing: -.8px; line-height: 36px; font-style: normal; font-stretch: normal; } .half_left_center { max-width: 540px; width: 100%; background-color: #fff; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14118), 0 1px 5px 0 rgba(0, 0, 0, 0.12157); border: 0px; padding: 44px; } @media (min-width: 600px) { .half_left_center { width: 540px; } } .pright { text-align: right; } .pright > a { color: #3c37a4; text-transform: uppercase; font-family: Open Sans,Helvetica,sans-serif; font-size: 12px; font-weight: 200; } .loginbutton { float: right; color: #ffffff; font-weight: 700; letter-spacing: .75px; line-height: 29px; /*text-transform: uppercase;*/ min-width: 33%; } .half_right_hidden { display: none; } .add_customersec { display: block; float: right; } .add_customersec h2, .add_customersec a { font-size: 16px; font-weight: 600; line-height: 24px; font-family: Open Sans,Helvetica,sans-serif; letter-spacing: normal; } .login_module h2 { font-size: 16px; font-weight: 400; line-height: 24px; font-family: Open Sans,Helvetica,sans-serif; letter-spacing: normal; } .login_module input[type="text"], .login_module input[type="password"] { font-size: 16px; font-weight: 400; line-height: 24px; font-family: Open Sans,Helvetica,sans-serif; letter-spacing: normal; box-shadow: 0 0 0 1000px white inset; border-width: 1px; border-radius: 3px; } .innerFooterWraoper { background-color: black; padding: 5px 5px; } .dataTable tr.seven { background-color: #ffffff; } .filter_icon { background-image: url(/images/SN-Filter.png); background-repeat: no-repeat; min-width: 25px; min-height: 22px; background-color: white; box-shadow: none; background-size: 20px; background-position: 2px 1px; } .filter_icon:hover { background-color: white; } .registrationHistory .downloadLists { float: none; margin: 0px 5px; } .bulkdomainsentered { text-align: right; padding-right: 5px; } footer { float: none; position: absolute; } .homepagecontent { background: #F3FAFF; width: 100%; } .searchcontrols .searchicon { text-align: center; } .half_left_acc { width: 100%; float: left; } @media (min-width: 800px) { .half_left_acc { width: 58%; } } .half_right_acc { width: 100%; float: left; } @media (min-width: 800px) { .half_right_acc { float: right; width: 40%; } } .accfield-half { width: 100%; } .accfield-half.rightmost-field { margin-top: 20px; margin-left: 0px; } @media (min-width: 1260px) { .accfield-half { width: 48%; } .accfield-half.rightmost-field { margin-left: 25px; margin-top: 0px; } } .createAccount .wrapper { background: #f0f0f0; } .acc-wrapper { margin: 0px 0px 10px; padding: 20px 20px; background: white; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14118), 0 1px 5px 0 rgba(0, 0, 0, 0.12157); } @media (min-width: 600px) { .acc-wrapper { margin: 0px 0px 20px; } } .flex-item { flex: 1 1; margin-right: 10px; /* Add right margin to create spacing between items */ } .flex-item:last-child { margin-right: 0px; } .flex-item-dont-grow { flex: 0 1; } .full-width { width: 100%; } .createAccount #creditCardCountry { width: 100%; } .row-acc { margin-bottom: 20px; display: flex; flex-direction: column; } @media (min-width: 1260px) { .row-acc { flex-direction: row; } } .row-acc #phone { width: 100%; } .row-acc #dialCode { width: 40px; } .row-acc select { height: 34px; } .errorstate { border: 1px solid red; } .validstate { border: 1px normal #353738; } .accountSettings h2 { margin-bottom: 20px; } .fundsTotalsMainContainer { display: flex; } @media (min-width: 800px) { .fundsTotalsMainContainer { display: block; } } .fundsTotalsContainer { width: 100%; max-width: 440px; vertical-align: top; border: 1px solid #666666; border-radius: 5px; padding-left: 15px; padding-right: 15px; padding-top: 16px; padding-bottom: 16px; min-width: unset; } .paymentcenterfundsTotalsContainer { margin-left: auto; margin-right: auto; } @media (min-width: 800px) { .paymentcenterfundsTotalsContainer { margin-left: 145px; } } .accountInformationheading { display: flex; flex-direction: column; justify-content: space-between; } @media (min-width: 500px) { .accountInformationheading { flex-direction: row; } } .fundsDetails { margin: 0px; } .fundsDetails:last-child .fundDetailsRow:last-child { margin-bottom: 0; } .fundDetailsRow { margin-bottom: 16px; min-width: unset; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: space-between; width: 100%; } .fundsAction { min-width: 78px; flex-grow: 1; } .fundsTotals { width: 310px; flex-shrink: 1; white-space: nowrap; display: flex; justify-content: space-between; flex-wrap: nowrap; gap: 10px; } @media (min-width: 0) and (max-width: 500px) { .fundsTotals { width: 270px; } } .fundsTotals > div, .fundsTotals > a { margin-top: 0px; } .saveforlaterlink { font-weight: normal; font-size: 12px; color: #4a8aeb; border: none; background-color: transparent; cursor: pointer; text-decoration: underline; position: relative; } .saveforlater { position: absolute; bottom: 5px; right: 12px; } .acceptsinglechangelink { font-weight: normal !important; font-size: 12px !important; border: none; background-color: transparent; cursor: pointer; text-decoration: underline !important; position: relative; } .acceptSingleChange { position: absolute; bottom: 20px; right: 12px; } .stickydiv { border: 1px solid black; margin-top: 15px; padding: 10px; width: 100%; position: sticky; bottom: 0; background-color: white; box-shadow: none; } @media (min-width: 650px) { .stickydiv { background-color: #ffffffe0; box-shadow: 0 0 6px 4px rgba(153, 153, 153, 0.5); border: 1px solid white; } } .accountSettings h2 { margin-bottom: 20px; } .editAccInfo { flex-wrap: wrap; align-items: flex-start; justify-content: space-between; } .editAccInfo .editAccountCol { width: 100%; } .editAccInfo .editAccountColSubmitOnly { width: 85% !important; padding-bottom: 20px; } .editAccInfo .linkedRegistrarsmall { display: block; } .editAccInfo .linkedRegistrarbig { display: none; } @media (min-width: 800px) { .editAccInfo .editAccountCol { width: 49%; } .editAccInfo .linkedRegistrarsmall { display: none; } .editAccInfo .linkedRegistrarbig { display: block; } } .addNewAcc { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; } .addNewAcc .addAccountCol, .addNewAcc .addAccountColSticky { width: 100%; } @media (min-width: 800px) { .addNewAcc .addAccountCol { width: 58%; } .addNewAcc .addAccountColSticky { width: 40%; position: sticky; position: -webkit-sticky; top: 118px; } } .leftMargin { margin-left: 10px; } .rightMargin { margin-right: 10px; } .bidBox { background-color: white; max-width: 100%; float: none; padding: 30px; border-radius: 15px; } .bidBoxTop { flex-direction: column; width: 46%; align-items: center; justify-content: center; min-width: 290px; padding-left: 0px; padding-right: 0px; } @media (max-width: 799px) { .bidBoxTop { align-items: flex-start; } } .bidBoxTop .tooltip { width: 300px; right: 0px; } @media (max-width: 799px) { .bidBoxTop .tooltip { right: -75px; width: 183px; top: 30px; } } .bidBoxInfo { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } @media (max-width: 799px) { .bidBoxButton { align-self: flex-start; } } .bidBoxCategory { float: none; text-align: left; width: auto; } .domainDetailsBox { border: 1px solid #cccccc; padding: 20px; border-radius: 15px; } .similarNameDetailsBox { border: 1px solid #cccccc; padding: 0px 20px 20px 20px; border-radius: 15px; } .domainInfo .table tr:first-child, .domainRegInfo .table tr:first-child { background-color: #ffffff; } .accinfo .row-acc { flex-direction: column; } .accinfo .row-acc .accfield-half { width: 100%; } .accinfo .row-acc .accfield-half.rightmost-field { margin-left: 0px; } @media (min-width: 1260px) { .accinfo .row-acc { flex-direction: row; } .accinfo .row-acc .accfield-half { width: 50%; } .accinfo .row-acc .accfield-half.rightmost-field { margin-left: 25px; } } .domainInfo .table tr:last-child, .domainInfo .table tr:last-child { border-bottom: none; } .table tr:nth-child(odd) { background-color: #ffffff; } /*.accountSettings.wrapper{ padding-left:2%; padding-right:2%; @include susy-breakpoint($screen-tablet, $susy) { padding-left:8%; padding-right:8%; } }*/ .inlinedisplay { display: inline; } /* .domainInfo #moreLikeThisStandalone, .domainRegInfo #moreLikeThisStandalone margin removed for ver0 only */ .tablerow { background-color: white; } .domainDetailsPageBelowContainer { display: flex; flex-direction: row; justify-content: space-between; } .leftDetails { float: none; } .bidInfoRow { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; } .bidInfoWithSpace { justify-content: space-between; } .bidInfoRowDifferentLines { flex-direction: column; } .bidInfoWidth { margin-left: 10px; } .bidBoxContent { padding: 0; } .bidBoxButton span button { margin: 10px; } @media (max-width: 799px) { .bidBoxButton span button { margin: 0; } } .bidBoxFormDiv { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } @media (max-width: 799px) { .bidBoxFormDiv { flex-direction: column; align-items: flex-start; } } .registrationInfo h1 { margin-bottom: 20px; } .registrationInfo .nexusContact a { text-decoration: underline; } .saveforlatersectionlink { font-weight: normal; font-size: 14px; color: #0000ff; border: none; background-color: transparent; cursor: pointer; text-decoration: underline; } .border-top-solid { border: 1px solid #cccccc; } .domainNotificationSettings { float: none; margin-top: 0; } .preferenceDetailsContainer { display: flex; flex-direction: row; justify-content: center; gap: 20px; } .preferenceDetailsBox1, .preferenceDetailsBox2 { border: 1px solid #cccccc; padding: 10px; border-radius: 5px; width: 100%; background-color: white; } @media (min-width: 0) and (max-width: 800px) { .preferenceDetailsBox1, .preferenceDetailsBox2 { padding: 20px; width: 100% !important; } } .accountPreferences section { border-bottom: none; padding: 0 20px; } .accountPreferences section.sectionlast { text-align: center; } @media (min-width: 800px) { .accountPreferences table tr { height: 32px; } } .accountPreferences section.sectionlast { text-align: center; } .margin-right-20 { margin-right: 20px; } @media (max-width: 1054px) { .preferenceDetailsContainer { flex-direction: column; align-items: center; gap: 20px; } .preferenceDetailsBox1 { width: 65%; } .preferenceDetailsBox2 { width: 65%; } } .listNoBorder { border: none; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14118), 0 1px 5px 0 rgba(0, 0, 0, 0.12157); } .auctionbox { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; margin-top: 10px; flex-wrap: wrap; margin-bottom: 10px; } .auctiontableheading { background-color: #cccccc; } .auctionbutton { padding-right: 15px; padding-left: 15px; /*margin-top:1px;*/ margin-left: 1px; display: flex; align-items: center; } .auctionbuttontab { background-color: #cccccc; display: flex; flex-direction: row; /*padding:2px;*/ margin-right: 10px; height: 28px; flex-shrink: 0; margin-bottom: 10px; } .auctionboxleft { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: 10px; } .auctionboxright { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; } .bidButtonEnabled { background-color: #0d47fb; color: white; border: none; padding: 5px; cursor: pointer; width: 40%; border-radius: 5px; } .bidButtonDisabled { background-color: gray; color: white; border: none; padding: 5px; width: 40%; border-radius: 5px; } .myauctioncheckbox { display: none; } .dataTable tr.seven, .dataTable tr.seven + tr.child ul li > span { background-color: white; } .myAuctions .tempTable tbody tr:nth-child(even) { background-color: white; } #shoppingcart table td { vertical-align: top; } @media (min-width: 800px) { #shoppingcart table td { vertical-align: top; } } #shoppingcart table tr.vasRow div.vasPriceDisp { margin-top: 22px; } #shoppingcart table tr.vasRow .bidIncrement div.vasPriceDisp { padding-top: 1px; text-align: right; color: #666666; font-weight: normal; border: 1px solid #D2D2D2; } #shoppingcart table tr.vasRow.orderByRow .vasControl { padding-top: 26px; } #shoppingcart table tr.vasRow.orderByRow .minBid div:first-child { padding-top: 28px; } #shoppingcart table tr.vasRow.orderByRow .bidIncrement div.vasPriceDisp { padding-top: 0; padding: 2px; max-width: 135px; } .backtotop { margin-top: 15px; margin-bottom: 15px; text-align: left; } #allButton:hover, #hrsButton:hover { cursor: pointer; } .searchPageSeachBoxBig { background-color: pink; vertical-align: middle; text-align: center; height: 249px; display: flex; } .searchInputAndButton { margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; } .store table tbody tr:nth-child(odd) { background-color: #ffffff; } .store #domainsBotWidget { border: none; } .store .plainBox { background-color: #c3c3c3; max-width: 27px; padding-left: 0; padding-bottom: 0; padding-right: 0; border: none; height: 773px; } .store .suggestedTable { border: none; } @media (min-width: 750px) { .store.advancedSearch .premiumDomains { top: -21px; } } .searchResultsSummary { margin-bottom: 0; border-bottom: none; } .saveSearchAnchor, .loadSearchAnchor { width: auto; color: black; } .store .plainBoxHeader { display: flex; align-items: center; } .filterSpanOuter { border: 1px solid #ccc; padding: 5px; margin-right: 5px; } #advanceSearchLink { cursor: pointer; } #advancedSearchLinkBox { text-align: right; width: calc(100% - 104px); } @media (min-width: 415px) { #advancedSearchLinkBox { width: calc(100% - 126px); } } .loadSearchAnchorOuter .loadSearchAnchor:hover { color: black; } .loadSearchAnchorOuter .loadSearchAnchor:hover { color: black; } .TableHeaderColumn { background-color: #E2E2E2; } #exactMatch_wrapper .statusResult button.inCart, #exactMatch_wrapper span.statusResult .inCart a { background-color: #0f9655; background: #0f9655; } #exactMatch_wrapper .statusResult button.inCart:hover, #exactMatch_wrapper span.statusResult .inCart a:hover { background-color: #5cd39a; background: #5cd39a; } .HorizontalSearchPanel { padding-right: 20px; } .HorizontalSearchPanelExpanded { background-color: #f0f0f0; padding-left: 63px; padding-right: 10px; } .HorizontalSearchDropDown { background-color: transparent; } .margin-left-20 { margin-left: 20px; } .margin-right-20 { margin-right: 20px; } .margin-left-5 { margin-left: 5px; } .margin-right-5 { margin-right: 5px; } .margin-top-5 { margin-top: 5px; } .margin-top-15 { margin-top: 15px; } #leftPanel { display: flex; padding-left: 10px; } .VeticallyCenter { margin-top: auto; margin-bottom: auto; } .FilterSectionButton { align-items: center; } .FilterSectionButton :hover { background-color: #f0f0f0; } #leftBox { width: 80%; } #rightBox { margin-left: 20px; border-left: 1px solid black; width: 20%; } .filtersectionElement { background-color: #f0f0f0; } .saveSearchBoxHorz { border-left: 1px solid #c3c3c3; } .collapsiblePanel { display: inline-block; min-width: 24%; } .wrapper.store .collapsiblePanel { min-width: 130px; margin-left: 5px; } @media (min-width: 1100px) { .wrapper.store .collapsiblePanel { min-width: 150px; } } @media (min-width: 590px) { .wrapper.store .collapsiblePanel { min-width: 120px; width: 202px; } } .bottomBorder { border-bottom: 1px solid #c3c3c3; } .searchPanelCategories .searchType, .searchPanelCategories .category, .searchPanelCategories .orderByDate, .searchPanelCategories .inventorySegment { margin-bottom: 8px; } .ageAndParkingDataHeader { width: auto; } .ageAndParkingDataHeader div { display: inline-block; } .ageAndParkingDataHeader div:first-child { width: 90px; } .ageAndParkingDataHeader div.bold { width: 46px; } @media (min-width: 1100px) { .ageAndParkingDataHeader div.bold { width: 46px; } } .bidBoxInfo span { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: unset; } #captchaContainer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } #captchaContainer > div { margin-right: 10px; margin-left: 10px; } .forgotPassword p { margin-bottom: 15px; } .forgotPassword button { margin-top: 20px; } .forgotPassword #captchaContainer { flex-direction: row-reverse; justify-content: flex-end; } .forgotPassword #captchaContainer > div { margin-left: 0; } #captchaContainer div > p { margin: 5px 0 10px; } .table1 { border-collapse: collapse; } .table1 td { border: none; } .table1 tr { border: none !important; } .prefRow label input { display: none; } .prefRow .NotificationPrefButton { background-color: #E1E1E1; height: 28px; /*box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12) , 0 1px 4px rgba(0,0,0,0.24);*/ box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.3) inset; line-height: 1.75; display: block; } .prefRow .NotificationPrefButton span { background-color: #E1E1E1; } .prefRow .NotificationPrefButton label { margin: 0; padding: 0; } .myLabel { display: block; width: 100%; } .flexBox { display: flex; } .store.advancedSearch .rightSection { margin-top: 10px; } .myLabel:has(input[type="checkbox"]:checked) { color: white; height: 100%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset; background: linear-gradient(to bottom, #72ffbb, #0f9655); transform: perspective(76em) rotateX(18deg); } .flexBpxContainer { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } .oneLineFooter { margin-bottom: auto; bottom: 0; } .domainInfo #moreLikeThisStandalone .table tr:nth-child(even), .domainRegInfo #moreLikeThisStandalone .table tr:nth-child(even) { background-color: #ffffff; } .domainInfo #similarNamesContainer .table tr:first-child { border-top: none; } .domainInfo #similarNamesContainer .searchResultsTable td:last-child { border-right: none; } .domainInfo #similarNamesContainer .searchResultsTable tr { border-bottom: 1px dotted #cccccc; } .domainInfo #similarNamesContainer .searchResultsTable tr td { height: 17px; } .domainInfo #similarNamesContainer .searchResultsTable tr:last-child { border-bottom: none; } .domainInfo #similarNameSection { /* width:100%; removed for ver0 only */ } @media (min-width: 800px) { .domainInfo #similarNameSection { width: 47%; } } @media (min-width: 800px) { .half_left { /* flex:1; removed - ver0 only change */ } } .searchSaveLoadPanelDisplay { padding-left: 10px; } .downloadContainer { display: flex; align-items: center; } .financialHistory .table td, .financialHistory .table th, .paymentCenter .table td, .paymentCenter .table th, .registrationHistory .table td, .registrationHistory .table th, .auctionHistory .table td, .auctionHistory .table th, .pendingOrders .table td, .pendingOrders .table th, .myAuctionsTable .table td, .myAuctionsTable .table th { height: 40px; font-size: 16px; vertical-align: middle; } .financialHistory .table td span, .financialHistory .table th span, .paymentCenter .table td span, .paymentCenter .table th span, .registrationHistory .table td span, .registrationHistory .table th span, .auctionHistory .table td span, .auctionHistory .table th span, .pendingOrders .table td span, .pendingOrders .table th span, .myAuctionsTable .table td span, .myAuctionsTable .table th span { font-size: 16px; } .financialHistory .table td a, .financialHistory .table th a, .paymentCenter .table td a, .paymentCenter .table th a, .registrationHistory .table td a, .registrationHistory .table th a, .auctionHistory .table td a, .auctionHistory .table th a, .pendingOrders .table td a, .pendingOrders .table th a, .myAuctionsTable .table td a, .myAuctionsTable .table th a { font-size: 16px; } .bidhistory .table tr th, .orderComplete table tr th { background-color: #cccccc; color: #666666; } .bidhistory .table tr td, .orderComplete table tr td { background-color: white; } /*.table .tooltip { color:black; }*/ .myAuctions div.bidCol > div, .myAuctions div.bidColTemp > div { flex-grow: 0; } .myAuctions div.bidCol { justify-content: center; } .allocateFunds { width: 100%; } .allocateFunds tr:nth-child(odd) { background-color: #ffffff; } .allocateFunds tr:nth-child(even) { background-color: #ffffff; } .allocateFunds td, .allocateFunds th { font-size: 16px; color: #666666; border-top: 1px dotted #cccccc; border-right: 1px dotted #cccccc; } .allocateFunds td:first-child, .allocateFunds th:first-child { border-left: 1px dotted #cccccc; } .allocateFunds th { font-weight: bold; } .allocateFunds td { font-weight: normal; } .allocateFunds tr, .allocateFunds td { border-top: 1px dotted #cccccc; border-right: 1px dotted #cccccc; } .modal-bk { border: 1px solid #666666; } .allocateFunds { width: 100%; } .allocateFunds tr:nth-child(odd) { background-color: #ffffff; } .allocateFunds tr:nth-child(even) { background-color: #ffffff; } .allocateFunds td, .allocateFunds th { font-size: 16px; color: #666666; border-top: 1px dotted #cccccc; border-right: 1px dotted #cccccc; } .allocateFunds td:first-child, .allocateFunds th:first-child { border-left: 1px dotted #cccccc; } .allocateFunds th { font-weight: bold; } .allocateFunds td { font-weight: normal; } .allocateFunds tr, .allocateFunds td { height: 40px; border-top: 1px dotted #cccccc; border-right: 1px dotted #cccccc; } .modal-bk { border: 1px solid #666666; } @media (min-width: 0) and (max-width: 450px) { .modal-bk { width: 365px; } } .modal-bk p { font-size: 16px; white-space: normal; } .headerSeprator { padding-bottom: 10px; border-bottom: 1px solid #cccccc; -webkit-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.8); -moz-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.8); box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.8); } @media (min-width: 0) and (max-width: 1100px) { .headerSeprator { display: none; } } .table tr:nth-child(odd) { background-color: #ffffff; } .table tr:nth-child(even) { background-color: #ffffff; } .table tr:first-child { background-color: #ffffff; } .table tr:last-child { border-bottom: 1px dotted #cccccc; } .table tr { height: 40px; border-bottom: 1px solid #999; } .table td, .table tr { font-size: 16px; color: #666666; } .table thead tr { font-weight: bold; background-color: #cccccc; } .addFunds .additional_info .additional_info_label { width: 135px; } .addFunds .additional_info input[type="text"] { width: 160px; } .download { display: inline-block; } .delete_icon { background-image: url("/images/delete.svg"); background-repeat: no-repeat; min-width: 20px; min-height: 21px; background-color: white; box-shadow: none; background-size: 20px 21px; } .delete_icon:hover { background-color: white; } @media (min-width: 0) and (max-width: 767px) { .delete_icon { display: none; } } .movetocart_icon { background-image: url("/images/search-icons/cart24px.png"); background-repeat: no-repeat; min-width: 20px; min-height: 21px; background-color: white; box-shadow: none; background-size: 20px 21px; } .movetocart_icon:hover { background-color: white; } .movetosavedlink { font-weight: normal; font-size: 14px; color: #0000ff; border: none; background-color: transparent; cursor: pointer; text-decoration: underline; right: 7px; bottom: 5px; margin-top: 8px; position: relative; } .acceptchangeslink .becomeverfiedBidder { font-weight: normal; font-size: 16px; color: #4a8aeb; border: none; background-color: transparent; cursor: pointer; text-decoration: underline; margin-top: 8px; position: relative; } @media (max-width: 575px) { .accountInfo .linkedRegistrarsmall .tooltip { left: -145px; } } @media (max-width: 408px) { .accountInfo .linkedRegistrarsmall .tooltip { left: 0; } } .countryDropdown { width: 34.6%; } .DialCode { width: 40px !important; } .buttonPressed { /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;*/ background: linear-gradient(to bottom, #72ffbb, #0f9655); transform: perspective(76em) rotateX(18deg); color: white; } .buttonReleased { background-color: #cccccc; /*box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);*/ box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.3) inset; } .LinkStyle { text-decoration: none; } .link-button { text-decoration: underline; color: #4a8aeb; cursor: pointer; background: none; border: none; padding: 0; cursor: pointer; outline: inherit; border-radius: 0; min-width: 0; box-shadow: none; } .link-button:hover { background-color: white; color: #4a8aeb; } .link-button.linkdisabled { color: grey; cursor: not-allowed; pointer-events: none; background-color: white; } .headingTooltip { width: 200px; } @media (min-width: 460px) { .headingTooltip { width: 300px; } } .filterRow { display: flex; justify-content: space-between; align-items: flex-end; padding: 10px 0px; gap: 20px; } @media (max-width: 900px) { .filterRow { align-items: flex-end; flex-direction: column; } } .pendingOrdersFilterRow { display: flex; justify-content: space-between; align-items: center; padding: 10px 0px; gap: 20px; } @media (max-width: 600px) { .pendingOrdersFilterRow { align-items: flex-start; flex-direction: column; } } .radioOptionsContainer { display: inline-block; } .radioButtonAndLabel { margin: 10px; text-align: left; } .successNotificationPreferenceChange, .successMessage { color: #0f9655; font-weight: bold; } .successNotificationPreferenceChange ul, .successMessage ul { list-style: none !important; padding: 0; margin: 0; } .successNotificationPreferenceChange li span, .successMessage li span { color: #0f9655; font-weight: bold; display: inline; } .successLinkedActionMessage { color: #0f9655 !important; } .confirmUnlinkPartnerRegistrarAccount { z-index: 1; display: none; background-color: #F3F5F6; color: #000000; border: 1px solid #aaa; position: fixed; width: 340px; height: 120px; left: 40%; top: 40%; margin-left: -100px; padding: 20px; box-sizing: border-box; text-align: center; } @media (min-width: 0) and (max-width: 500px) { .confirmUnlinkPartnerRegistrarAccount { width: 295px; } } .alertPopup { height: auto; } @media (min-width: 0) and (max-width: 638px) { .mobileStorelink { bottom: 7px; } } .forgotpassworddialog { width: 540px; background-color: white; margin-left: auto; margin-right: auto; padding: 35px 35px 35px 35px; border-radius: 25px; position: relative; } @media (max-width: 899px) { .new-window-icon-wrap { display: none; } } .leftPanelAppliedFiltersChips { display: flex; flex-direction: row; width: 100%; flex-wrap: wrap; align-items: center; } /*# sourceMappingURL=rev2.css.map */