/* Please see documentation at

https://docs.microsoft.com/aspnet/core/client-side/bundling-and-
minification\
for details on configuring this project to bundle and minify static
web assets. */
body {
padding-bottom: 20px;
overscroll-behavior-y: none;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}

.imageOverflowStyle {
overflow-y: scroll;
max-height: 300px;
}

.cursor {
cursor: pointer;
}

/* The z-index of DownloadEdgeBanner and header are related.

DownloadEdgeBanner should be higher than header but not as high as
feedback popup*/
.Banner {
align-items: center;
display: inline-flex;
margin: 0 auto;
padding: 8px;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}

.BannerRedesigned {
left: 0px;
right: 0px;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
}

.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}

.shimmer {
display: block;
background-color: #e5e5e5;
animation: blink 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.shimmer-responsive-not-display {
 display: block;
background-color: #e5e5e5;
animation: blink 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
@media only screen and (max-width: 546px){
display: "none"
}
}

.disable-background-scroll {
position: fixed;
overflow-y: scroll;
width: 100%;
}

.enable-scroll {
position: static;
overflow-y: auto;
}

.nav-pane-fixed {
position: fixed;
}

.nav-pane-abs-when-not-fixed:not(.nav-pane-fixed) {
position: absolute;
}

@keyframes blink {
0% {
opacity: 0.5;
}

50% {
opacity: 1;
}

100% {
opacity: 0.5;
}
}

@media (forced-colors:active) {
svg rect {
stroke: WindowText;
}

svg path {
fill: WindowText;
}

.Banner {
border: 1px solid;
}

.BannerRedesigned {
border: 1px solid;
}

.error_hc {
fill: HighlightText;
}
 div[role="treeitem"]:hover svg rect,
div[role="treeitem"][aria-selected="true"] svg rect {
stroke: HighlightText;
}

div[role="treeitem"]:hover svg path,

div[role="treeitem"][aria-selected="true"] svg path {
fill: HighlightText;
}
}

/* Note: we need to use the direct child selector because the UHF
actually loads a <header> descendant */
body > header {
min-height: 54px;
}

/* On medium screens and larger (e.g. tablets and desktops), the

header should be sticky. */
@media only screen and (min-width: 768px) {
body > header {
position: sticky;
top: 0;
z-index: 1000;
min-height: 56px;
}
}

#uhf-header-container {
visibility: hidden;
}

#uhf-header-container.shown {
visibility: visible;
animation-name: slideDown;
animation-duration: 0.2s;
animation-timing-function: ease-out;
}

@keyframes slideDown {
0% {
transform: translateY(-50px);
}
99% {
transform: translateY(0);
}
100% {
transform: auto; /* this must be done as setting transform
interferes with z-index, causing mobile menu to be obscured on PDP
pages */
}
}

/*-------------------------------------------- CSS for UHF

component----------------------------------------------*/
/* Keeping position fixed because our header is fixed */
#meControlDropdown {
position: fixed !important;
top: 58px !important;
right: 8% !important;
 left: unset !important;
}

.c-uhfh-actions .c-search {
display: none !important;
}

.c-uhfh-actions #uhf-shopping-cart {
display: none !important;
}

#uhf-g-nav .js-paddle-items #c-shellmenu_42 {

display: none;
}

/* For screen width more than 1035px size */

@media only screen and (min-width: 1035px) {
#UhfHome {
display: none;
}

#UhfEditorPicks {
display: none;
}

#UhfTrending {
display: none;
}

#UhfGetStarted {
display: none;
}

#UhfThemes {
display: none;
}

#Categories {
display: none;
}

#uhf-g-nav .js-paddle-items {
display: flex;
flex-direction: row;
justify-content: flex-start;
}

#uhf-g-nav .js-paddle-items {
float: unset;
}

#headerArea {
position: sticky;
top: 0;
z-index: 1000;
box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 6px 0px;
}
}

/* For screen width less than 1035px size */

@media only screen and (max-width: 1035px) and (min-width: 860px) {
 #uhf-g-nav .js-paddle-items {
float: right;
}

#uhf-g-nav .js-paddle-items[dir="rtl"] {
float: left;
}

#uhf-g-nav .js-paddle-items > .uhf-menu-item:not(#overflow-menu) a

{
display: none;
}

#uhf-g-nav .js-paddle-items > .uhf-menu-item:not(#overflow-menu)

button {
display: none;
}

#headerArea {
top: 0;
z-index: 1000;
box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 6px 0px;
}

.BannerRedesigned {
position: unset;
}
}

/* For screen width less than 859px size */

@media only screen and (max-width: 859px) {
#UhfHome {
display: none;
}
}
/
*---------------------------------------------------------------------
-------------------------------------------*/

/* For screen width more than 1035px size */

@media only screen and (min-width: 1035px) {
#newHomeSearchBox {
margin-top: 0px;
}

#newHomeSearchResults {
margin-top: 0px;
}

#headingWithCount {
margin-top: 4px;
}
}

/* For screen width less than 1035px size, left aligning search box */
@media only screen and (max-width: 1035px) {
#newHomeSearchBox {
margin-top: 0px;
margin-inline-start: 14px;
}
 #newHomeSearchResults {
margin-top: 0px;
margin-inline-start: 14px;
width: 300px;
}

#headingWithCount {
margin-top: 0px;
}
}

/* For screen width less than 708px size, making search box full width
*/
@media only screen and (max-width: 708px) {
#newHomeSearchBox, #newHomeSearchResults {
margin-top: 0px;
margin-inline-start: 14px;
min-width: 103%;
}
}

/* For screen width less than 542px size, making search box full width
*/
@media only screen and (max-width: 542px) {
#newHomeSearchBox {
margin-top: 0px;
margin-inline-start: 14px;
}
}

/* UHF 2022: Make the "Windows Apps" item bold */

#windowsAppsMenuItem {
font-weight: bold;
}

/* UHF 2022: For the "Developers" menu item and the "All Microsoft"
menu item,
display it on the right side of its flex box container */
#uhf-g-nav .js-nav-menu:last-of-type,
#uhf-g-nav .js-nav-menu:nth-last-of-type(2) {
margin-left: auto;
}

#defaultSearchBox {
margin-top: 24px;
}

#aria-live-div-id {
position: absolute;
left: 0px;
width: 1px;
height: 1px;
overflow: hidden;
}

.base-card-title {
cursor: pointer;
}
.regular-media {
margin: 0 auto;
}
.regular-media .media-video {
max-width: 400px;
max-height: 250px;
display: flex;
}

.dialog-media .media-image {
max-height: 65vh;
height: auto !important;
width: auto !important;
object-fit: contain;
}

.incompatible {
cursor: "hands";
text-decoration: none;
}
.incompatible:hover {
position: relative;
}
.incompatible span {
display: none;
}
.incompatible:hover span {
padding: 4px 8px;
display: block;
z-index: 100;
background: #3b3b3b;
right: -48px;
margin: 15px;
width: 190px;
height: fit-content;
position: absolute;
top: 12px;
text-decoration: none;
color: white;
border: 1px solid transparent;
}