#app { min-height: 100vh; }
#empty { font-size: 14px; color: #505050; grid-column: 1/-1; text-align: center; }
#empty .clear { margin-top: 12px; display: inline-block; }
#empty .clear.hidden { display: none; }
#empty p { margin-bottom: 0; }
#empty.hidden { display: none; }
#featured { grid-template-columns: 1fr 1fr 1fr; gap: 12px; display: none; }
#featured a { padding: 22px; border-radius: 12px; background-color: #f2f2f2; color: #505050; transition: 0.2s; text-decoration: none; position: relative; display: grid; grid-template-columns: auto auto; z-index: 1; }
#featured a h3 { margin-bottom: 6px; padding-right: 12px; font-size: 16px; color: #0a6bba; align-self: end; }
#featured a h3 span { color: #505050; }
#featured a img { width: 60px; height: auto; margin-right: 24px; align-self: center; grid-row: span 2; }
#featured a p { margin: 0; grid-column: 2; }
#featured a:after { content: ""; right: 12px; top: 12px; font-family: "MWF-FLUENT-ICONS"; font-size: 12px; position: absolute; }
#featured a:hover { box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); }
#featured h2 { margin: 0 0 6px 24px; font-size: 20px; color: #505050; grid-column: span 3; }
#featured h2 span { margin-bottom: 4px; font-size: 14px; font-weight: normal; display: block; }
#filter { width: 280px; min-width: 280px; margin: auto; color: #505050; position: relative; }
#filter .box { margin-top: 24px; padding: 24px; border-radius: 12px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); background-color: #f2f2f2; position: absolute; display: none; z-index: 1; }
#filter .box fieldset + fieldset { margin-top: 12px; }
#filter .box legend { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
#filter .clear { width: 32px; height: 32px; right: 16px; top: 8px; border-radius: 100px; background-color: #e6e6e6; justify-content: center; align-items: center; position: absolute; display: flex; cursor: pointer; z-index: 1; }
#filter .clear.hidden { display: none; }
#filter .clear:before { content: ""; margin-left: 1px; font-family: "MWF-FLUENT-ICONS"; font-size: 12px; position: absolute; }
#filter .clear:hover { background-color: #d2d2d2; }
#filter .clear:not(.hidden) + .toggle:after { right: 54px; }
#filter .dropdown { font-size: 14px; border-radius: 3px; display: flex; flex-direction: column; }
#filter .dropdown .name { padding: 6px 8px; border-radius: 3px; background-color: #ffffff; cursor: pointer; }
#filter .dropdown .name:before { content: ""; right: 6px; top: 8px; font-family: "MWF-FLUENT-ICONS"; font-size: 12px; position: absolute; }
#filter .dropdown .name:focus { z-index: 1; }
#filter .dropdown .name:hover { background-color: #e6e6e6; }
#filter .dropdown .options { width: 100%; margin-top: 2px; display: none; }
#filter .dropdown .options .option { padding: 6px 8px; background-color: #ffffff; cursor: pointer; }
#filter .dropdown .options .option.on { background-color: #e6e6e6; font-weight: 600; }
#filter .dropdown .options .option:focus { z-index: 1; }
#filter .dropdown .options .option:hover { background-color: #e6e6e6; }
#filter .dropdown.on .name:before { transform: scaleY(-1); }
#filter .tags { display: flex; flex-wrap: wrap; gap: 2px; }
#filter .tags .tag { padding: 6px 8px; border-radius: 3px; font-size: 14px; background-color: #ffffff; cursor: pointer; }
#filter .tags .tag.on { text-shadow: 0 0 1px #505050; background-color: #e6e6e6; }
#filter .tags .tag:focus { z-index: 1; }
#filter .tags .tag:hover { background-color: #e6e6e6; }
#filter .toggle { padding: 10px 22px; font-weight: 600; background-color: #f2f2f2; transition: 0.2s; position: relative; cursor: pointer; }
#filter .toggle:after { content: ""; right: 22px; font-family: "MWF-FLUENT-ICONS"; font-weight: 400; position: absolute; }
#filter .toggle:hover { box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); }
#limit { margin-top: 24px; grid-column: 1/-1; text-align: center; }
#limit.hidden { display: none; }
#message { max-width: calc(100% - 48px); margin: auto; padding: 6px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.2); font-size: 12px; font-weight: 600; background-color: #e6e6e6; text-align: center; }
#message .hidden { display: none; }
#search { width: calc(100% - 48px); margin: 0 auto 12px auto; grid-column: 1/-1; position: relative; }
#search .clear { right: 24px; top: 12px; font-family: "MWF-FLUENT-ICONS"; color: #505050; position: absolute; cursor: pointer; display: none; }
#search .glass { left: 24px; top: 12px; font-family: "MWF-FLUENT-ICONS"; color: #505050; position: absolute; cursor: text; }
#search input { width: 100%; padding: 10px 48px; border: 2px solid #f2f2f2; border-radius: 100px; background-color: #f2f2f2; color: #505050; }
#search input::placeholder { color: #505050; }
#search input:focus::placeholder { color: transparent; }
#search input:not(:placeholder-shown) + .clear { display: initial; }
#search:before { content: ""; width: calc(100% - 48px); height: 2px; left: 50%; bottom: 0; transform: translateX(-50%); background: linear-gradient(90deg, #f2f2f2, #ffe399, #f2f2f2); position: absolute; }
#uhf-footer { margin-top: 0; }
#videos { width: 100%; margin-top: 24px; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }
#videos .video { min-height: 420px; border-radius: 24px; color: #ffffff; overflow: hidden; transition: 0.2s; text-decoration: none; position: relative; display: flex; flex-direction: column; }
#videos .video .tags { margin: 24px; display: flex; flex-wrap: wrap; gap: 4px; }
#videos .video .tags .tag { padding: 4px 8px; border-radius: 100px; font-size: 12px; font-weight: 600; background-color: rgba(0, 0, 0, 0.2); }
#videos .video h2 { margin: 0 24px 24px 24px; font-size: 20px; }
#videos .video img { width: 100%; height: auto; margin-top: auto; }
#videos .video.hidden { display: none; }
#videos .video.hidden-search { display: none; }
#videos .video.new .tags:before { content: "NEW"; padding: 4px 8px; border-radius: 100px; font-size: 12px; font-weight: 600; background-color: rgba(255, 255, 255, 0.6); color: #000000; }
#videos .video:after { content: ""; width: 32px; height: 32px; right: 24px; bottom: 24px; padding-left: 2px; border: 2px solid #ffffff; border-radius: 100px; font-family: "MWF-FLUENT-ICONS"; justify-content: center; align-items: center; position: absolute; display: flex; }
#videos .video:hover { margin: -6px 0 6px 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
#videos .video[data-tags*="Accessibility"] { background: url("/en-gb/business/copilot-tips-tricks/images/_gradient_1a.png") #0067b8 bottom no-repeat; background-size: cover; }
#videos .video[data-tags*="AI agents"] { background: url("/en-gb/business/copilot-tips-tricks/images/_gradient_2a.png") #0067b8 bottom no-repeat; background-size: cover; }
#videos .video[data-tags*="Communication"] { background: url("/en-gb/business/copilot-tips-tricks/images/_gradient_3a.png") #0067b8 bottom no-repeat; background-size: cover; }
#videos .video[data-tags*="Document work"] { background: url("/en-gb/business/copilot-tips-tricks/images/_gradient_4a.png") #0067b8 bottom no-repeat; background-size: cover; }
#videos .video[data-tags*="Productivity"] { background: url("/en-gb/business/copilot-tips-tricks/images/_gradient_5a.png") #0067b8 bottom no-repeat; background-size: cover; }
#videos .video[data-tags*="Prompting"] { background: url("/en-gb/business/copilot-tips-tricks/images/_gradient_6a.png") #0067b8 bottom no-repeat; background-size: cover; }
#videos .video[data-tags*="Smart workflows"] { background: url("/en-gb/business/copilot-tips-tricks/images/_gradient_7a.png") #0067b8 bottom no-repeat; background-size: cover; }
#videos.hidden-default .video:nth-of-type(n+21) { display: none; }
main .bg-hero .card-background { position: relative; }
main .bg-hero .card-background:before { content: ""; width: 100%; height: 33%; bottom: 0; background: linear-gradient(hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.013) 8.1%, hsla(0, 0%, 100%, 0.049) 15.5%, hsla(0, 0%, 100%, 0.104) 22.5%, hsla(0, 0%, 100%, 0.175) 29%, hsla(0, 0%, 100%, 0.259) 35.3%, hsla(0, 0%, 100%, 0.352) 41.2%, hsla(0, 0%, 100%, 0.45) 47.1%, hsla(0, 0%, 100%, 0.55) 52.9%, hsla(0, 0%, 100%, 0.648) 58.8%, hsla(0, 0%, 100%, 0.741) 64.7%, hsla(0, 0%, 100%, 0.825) 71%, hsla(0, 0%, 100%, 0.896) 77.5%, hsla(0, 0%, 100%, 0.951) 84.5%, hsla(0, 0%, 100%, 0.987) 91.9%, hsl(0, 0%, 100%) 100%); position: absolute; z-index: 1; }
main .bg-hero .card-foreground { position: relative; z-index: 2; }
main .border-copilot { border: 2px solid transparent; border-radius: 100px; background-image: linear-gradient(#f2f2f2, #f2f2f2), linear-gradient(90deg, #50e6ff, #d59dff); background-clip: padding-box, border-box; background-origin: border-box; }
main .btn { padding: 10px 22px; background-color: #f2f2f2; color: #505050; transition: 0.2s; }
main .btn:hover { box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); }
main .depth-16-hover.rounded-xl:before { border-radius: inherit; }
main .img-object-left { object-position: left; }
main .img-object-right { object-position: right; }
main .immersive-reader { width: 32px; height: 32px; right: 0; top: 0; border: 0; border-radius: 0.2rem; background: #f2f2f2 url("https://ircdname.azureedge.net/permanent-static-resources/immersive-reader-icon.svg") no-repeat 6px 6px; background-size: 20px 20px; position: absolute; }
main .immersive-reader + h1 { padding-right: 52px; }
main .immersive-reader:hover { background-color: #e6e6e6; }
main .rounded-xl { border-radius: 12px !important; }

@media screen and (min-width: 540px) {
	#filter { margin: unset; }
	#videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (min-width: 860px) {
	main .img-fade-r:before { content: ""; width: 33%; height: 100%; bottom: 0; background: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.013) 8.1%, hsla(0, 0%, 100%, 0.049) 15.5%, hsla(0, 0%, 100%, 0.104) 22.5%, hsla(0, 0%, 100%, 0.175) 29%, hsla(0, 0%, 100%, 0.259) 35.3%, hsla(0, 0%, 100%, 0.352) 41.2%, hsla(0, 0%, 100%, 0.45) 47.1%, hsla(0, 0%, 100%, 0.55) 52.9%, hsla(0, 0%, 100%, 0.648) 58.8%, hsla(0, 0%, 100%, 0.741) 64.7%, hsla(0, 0%, 100%, 0.825) 71%, hsla(0, 0%, 100%, 0.896) 77.5%, hsla(0, 0%, 100%, 0.951) 84.5%, hsla(0, 0%, 100%, 0.987) 91.9%, hsl(0, 0%, 100%) 100%); position: absolute; z-index: 1; }
	main .material-blur { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); }
}

@media screen and (min-width: 1084px) {
	#app { align-items: flex-start; display: flex; }
	#featured { width: 100%; display: grid; }
	#filter { margin-right: 36px; }
	#filter .box { box-shadow: none; display: unset; }
	#search { width: 66%; }
	#videos { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	main .immersive-reader { right: -24px; top: -24px; }
	main .immersive-reader + h1 { padding-right: 32px; }
}

@media screen and (min-width: 1400px) {
	#featured { width: 80%; }
	#videos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media screen and (min-width: 1600px) {
	#featured { width: 66%; }
}