textarea, select, input, button {
  outline: none; }

* {
  -webkit-tap-highlight-color: transparent; }

input[type="text"]::-ms-clear {
  display: none;
  width: 0;
  height: 0; }

input[type="text"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0; }

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
  display: none; }

@keyframes LOADING {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(-180deg); }
  100% {
    transform: rotate(-360deg); } }
@keyframes PULSING {
  0% {
    opacity: .4;
    transform: scale(0); }
  25% {
    opacity: .4;
    transform: scale(1); }
  50% {
    opacity: .4;
    transform: scale(1); }
  100% {
    opacity: 0;
    transform: scale(1.2); } }
@keyframes ARRASTE_CIMA {
  0% {
    transform: translatey(0px);
    opacity: 1; }
  50% {
    transform: translatey(-25px);
    opacity: 1; }
  100% {
    transform: translatey(-25px);
    opacity: 0; } }
@keyframes ARRASTE_BAIXO {
  0% {
    transform: translatey(0px);
    opacity: 1; }
  50% {
    transform: translatey(25px);
    opacity: 1; }
  100% {
    transform: translatey(25px);
    opacity: 0; } }
@keyframes ARRASTE_ESQUERDA {
  0% {
    transform: translatex(0px);
    opacity: 1; }
  50% {
    transform: translatex(-25px);
    opacity: 1; }
  100% {
    transform: translatex(-25px);
    opacity: 0; } }
@keyframes ARRASTE_DIREITA {
  0% {
    transform: translatex(0px);
    opacity: 1; }
  50% {
    transform: translatex(25px);
    opacity: 1; }
  100% {
    transform: translatex(25px);
    opacity: 0.2; } }
@font-face {
  font-family: "DIN Alternate";
  src: url("../fonts/DIN-Alternate-Regular.otf");
  font-weight: 400;
  font-size: normal; }
@font-face {
  font-family: "DIN Alternate Medium";
  src: url("../fonts/DIN-Alternate-Medium.otf");
  font-weight: 400;
  font-size: normal; }
@font-face {
  font-family: "DIN Alternate Bold";
  src: url("../fonts/DIN-Alternate-Bold.otf");
  font-weight: 400;
  font-size: normal; }
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/MaterialIcons-Regular.eot");
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url("../fonts/MaterialIcons-Regular.woff2") format("woff2"), url("../fonts/MaterialIcons-Regular.woff") format("woff"), url("../fonts/MaterialIcons-Regular.ttf") format("truetype"); }
@font-face {
  font-family: "Material Icons Outline";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Material-Icons-Outline.eot");
  /* For IE6-8 */
  src: local("Material Icons"), local("Material-Icons-Outline"), url("../fonts/Material-Icons-Outline.woff2") format("woff2"), url("../fonts/Material-Icons-Outline.woff") format("woff"), url("../fonts/Material-Icons-Outline.ttf") format("truetype"); }
.material-icons-outlined, .material-icons {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr; }

.material-icons {
  font-family: "Material Icons"; }

.material-icons-outlined {
  font-family: "Material Icons Outline"; }

.mdn-RatingStars-rate {
  display: none !important; }

.active {
  display: flex; }

.step-progress {
  display: none; }
@media (min-width: 992px) {
  .step-progress {
    display: flex;
    position: sticky;
    top: 0;
    background-color: var(--color-neutral-lightest);
    z-index: 99; } }
.step-progress .progress-bar {
  margin-top: 0;
  width: 100%;
  display: flex;
  column-gap: 1px; }
.step-progress .progress-bar .progress-step {
  display: flex;
  width: 100%;
  margin-top: 20px;
  border-bottom: 4px solid var(--color-neutral-medium);
  cursor: pointer;
  user-select: none; }
.step-progress .progress-bar .progress-step .progress-step-number {
  display: flex;
  margin: auto;
  font-weight: bold; }
.step-progress .progress-bar .progress-step.read {
  border-bottom-color: var(--color-brand-primary-medium); }
.step-progress .progress-bar .progress-step.unread {
  border-bottom-color: var(--color-neutral-medium); }
.step-progress .progress-bar .progress-step.active {
  border-bottom-color: var(--color-brand-primary-medium); }
.step-progress .progress-bar .progress-step.active .progress-step-number {
  color: var(--color-brand-primary-medium); }
.step-progress .mdn-Swiper-pagination-custom {
  max-width: 124px; }
.step-progress .mdn-Swiper-button-next, .step-progress .mdn-Swiper-button-prev {
  margin-top: 0; }

.qelp-step {
  transition: 300ms;
  transition-timing-function: ease-in;
  transition-delay: 200ms; }
.qelp-step.zoomable .step-image-wrapper .step-image img {
  cursor: zoom-in; }
.qelp-step.zoomable .step-image-wrapper .step-image.zoomed img {
  cursor: zoom-out; }
.qelp-step.usecase-step {
  padding: var(--spacing-stack-md);
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: var(--spacing-stack-xs);
  position: relative;
  width: 100%; }
@media screen and (min-width: 992px) {
  .qelp-step.usecase-step {
    display: flex;
    flex-direction: row-reverse; } }
.qelp-step.usecase-step .step-card {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-width: var(--border-width-thin);
  border-style: solid;
  border-radius: var(--border-radius-sm);
  border-color: var(--color-neutral-lightest);
  box-shadow: var(--shadow-offset-x-none) var(--shadow-offset-y-level-2) var(--shadow-blur-radius-level-1) var(--color-neutral-medium); }
@media screen and (max-width: 992px) {
  .qelp-step.usecase-step .step-card {
    flex-direction: column-reverse; } }
.qelp-step.usecase-step .step-card .step-number {
  position: absolute;
  top: var(--spacing-stack-sm);
  color: var(--theme-color-brand-primary-medium-content); }
.qelp-step.usecase-step .step-card .text-content {
  display: flex;
  flex-direction: column; }
.qelp-step.usecase-step .step-card .text-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  padding-top: var(--spacing-stack-md);
  padding-bottom: var(--spacing-stack-md); }
.qelp-step.usecase-step.focus .step-card {
  border-color: var(--color-brand-primary-medium); }
.qelp-step.usecase-step .step-image-wrapper {
  padding: 16px;
  position: relative;
  background-color: #f4f4f4;
  overflow: hidden; }
.qelp-step.usecase-step .step-image-wrapper .step-image {
  position: absolute;
  transform-origin: top left;
  transition: 300ms ease-in-out; }
.qelp-step.usecase-step .step-image-wrapper .step-image .qlicker {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid #333;
  z-index: 90;
  position: absolute;
  box-shadow: 0 0 10px 1px var(--color-brand-primary-medium);
  box-sizing: border-box;
  transition: 300ms; }
.qelp-step.usecase-step .step-image-wrapper .step-image .qlicker::after {
  content: "\00a0";
  background-color: var(--color-support-highlight-light);
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: PULSING 2s infinite; }
.qelp-step.usecase-step .step-image-wrapper .step-image .qlicker.slide-up {
  animation: ARRASTE_CIMA 2s infinite; }
.qelp-step.usecase-step .step-image-wrapper .step-image .qlicker.slide-down {
  animation: ARRASTE_BAIXO 2s infinite; }
.qelp-step.usecase-step .step-image-wrapper .step-image .qlicker.slide-left {
  animation: ARRASTE_ESQUERDA 2s infinite; }
.qelp-step.usecase-step .step-image-wrapper .step-image .qlicker.slide-right {
  animation: ARRASTE_DIREITA 2s infinite; }
.qelp-step.usecase-step .step-image-wrapper .step-image .step-image-holder {
  position: absolute; }
.qelp-step.usecase-step .step-image-wrapper .step-image .step-image-holder.no-hardwareimage {
  position: relative; }
@media screen and (min-width: 992px) {
  .qelp-step.usecase-step .step-image-wrapper {
    min-width: 50%; } }

.isituseful .wrapper {
  flex-direction: column;
  text-align: center; }
.isituseful #why-not-useful {
  text-align: left;
  flex-direction: column;
  display: none; }
.isituseful #why-not-useful textarea {
  min-height: 133px;
  resize: none;
  font-family: var(--theme-font-family--Text); }
.isituseful #why-not-useful.active {
  display: flex; }

.mdn-Theme--contrast .qelp-step.usecase-step {
  box-shadow: unset; }
.mdn-Theme--contrast .qelp-step.usecase-step .step-image-wrapper .step-image .qlicker {
  border-color: var(--theme-background-color--contrast--clickable);
  box-shadow: 0 1px 0 1px var(--color-neutral-darkest); }

@media screen and (min-width: 992px) {
  .usecase-tutorial.tutorial-type-app, .usecase-tutorial.tutorial-type-smartphone, .usecase-tutorial.tutorial-type-smartwatch, .usecase-tutorial.tutorial-type-tablet, .usecase-tutorial.tutorial-type-app-phone, .usecase-tutorial.tutorial-type-remote-control, .usecase-tutorial.tutorial-type-roteador, .usecase-tutorial.tutorial-type-router, .usecase-tutorial.tutorial-type-roteador-wifi, .usecase-tutorial.tutorial-type-modem-usb, .usecase-tutorial.tutorial-type-wifi-mesh, .usecase-tutorial.tutorial-type-tv, .usecase-tutorial.tutorial-type-tv-decoder, .usecase-tutorial.tutorial-type-app-desktop, .usecase-tutorial.tutorial-type-tv-software, .usecase-tutorial.tutorial-type-Modem-WiFi {
    padding: 0 0 var(--spacing-stack-md) 0;
    display: flex;
    flex-direction: row;
    overflow-x: scroll; }
  .usecase-tutorial.tutorial-type-app::-webkit-scrollbar, .usecase-tutorial.tutorial-type-smartphone::-webkit-scrollbar, .usecase-tutorial.tutorial-type-smartwatch::-webkit-scrollbar, .usecase-tutorial.tutorial-type-tablet::-webkit-scrollbar, .usecase-tutorial.tutorial-type-app-phone::-webkit-scrollbar, .usecase-tutorial.tutorial-type-remote-control::-webkit-scrollbar, .usecase-tutorial.tutorial-type-roteador::-webkit-scrollbar, .usecase-tutorial.tutorial-type-router::-webkit-scrollbar, .usecase-tutorial.tutorial-type-roteador-wifi::-webkit-scrollbar, .usecase-tutorial.tutorial-type-modem-usb::-webkit-scrollbar, .usecase-tutorial.tutorial-type-wifi-mesh::-webkit-scrollbar, .usecase-tutorial.tutorial-type-tv::-webkit-scrollbar, .usecase-tutorial.tutorial-type-tv-decoder::-webkit-scrollbar, .usecase-tutorial.tutorial-type-app-desktop::-webkit-scrollbar, .usecase-tutorial.tutorial-type-tv-software::-webkit-scrollbar, .usecase-tutorial.tutorial-type-Modem-WiFi::-webkit-scrollbar {
    display: none; }
  .usecase-tutorial.tutorial-type-app .usecase-step, .usecase-tutorial.tutorial-type-smartphone .usecase-step, .usecase-tutorial.tutorial-type-smartwatch .usecase-step, .usecase-tutorial.tutorial-type-tablet .usecase-step, .usecase-tutorial.tutorial-type-app-phone .usecase-step, .usecase-tutorial.tutorial-type-remote-control .usecase-step, .usecase-tutorial.tutorial-type-roteador .usecase-step, .usecase-tutorial.tutorial-type-router .usecase-step, .usecase-tutorial.tutorial-type-roteador-wifi .usecase-step, .usecase-tutorial.tutorial-type-modem-usb .usecase-step, .usecase-tutorial.tutorial-type-wifi-mesh .usecase-step, .usecase-tutorial.tutorial-type-tv .usecase-step, .usecase-tutorial.tutorial-type-tv-decoder .usecase-step, .usecase-tutorial.tutorial-type-app-desktop .usecase-step, .usecase-tutorial.tutorial-type-tv-software .usecase-step, .usecase-tutorial.tutorial-type-Modem-WiFi .usecase-step {
    scroll-margin-top: 80px;
    position: relative;
    height: fit-content;
    flex-shrink: 0;
    margin-bottom: 0 !important; }
  .usecase-tutorial.tutorial-type-app .usecase-step .step-card, .usecase-tutorial.tutorial-type-smartphone .usecase-step .step-card, .usecase-tutorial.tutorial-type-smartwatch .usecase-step .step-card, .usecase-tutorial.tutorial-type-tablet .usecase-step .step-card, .usecase-tutorial.tutorial-type-app-phone .usecase-step .step-card, .usecase-tutorial.tutorial-type-remote-control .usecase-step .step-card, .usecase-tutorial.tutorial-type-roteador .usecase-step .step-card, .usecase-tutorial.tutorial-type-router .usecase-step .step-card, .usecase-tutorial.tutorial-type-roteador-wifi .usecase-step .step-card, .usecase-tutorial.tutorial-type-modem-usb .usecase-step .step-card, .usecase-tutorial.tutorial-type-wifi-mesh .usecase-step .step-card, .usecase-tutorial.tutorial-type-tv .usecase-step .step-card, .usecase-tutorial.tutorial-type-tv-decoder .usecase-step .step-card, .usecase-tutorial.tutorial-type-app-desktop .usecase-step .step-card, .usecase-tutorial.tutorial-type-tv-software .usecase-step .step-card, .usecase-tutorial.tutorial-type-Modem-WiFi .usecase-step .step-card {
    flex-wrap: unset;
    min-height: 474px;
    flex-direction: column-reverse;
    justify-content: flex-end; }
  .usecase-tutorial.tutorial-type-app .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-smartphone .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-smartwatch .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-tablet .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-app-phone .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-remote-control .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-roteador .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-router .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-roteador-wifi .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-modem-usb .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-wifi-mesh .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-tv .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-tv-decoder .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-app-desktop .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-tv-software .usecase-step .step-card .text-content, .usecase-tutorial.tutorial-type-Modem-WiFi .usecase-step .step-card .text-content {
    flex-grow: 0;
    max-width: unset;
    max-height: fit-content; }
  .usecase-tutorial.tutorial-type-app .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-smartphone .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-smartwatch .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-tablet .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-app-phone .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-remote-control .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-roteador .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-router .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-roteador-wifi .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-modem-usb .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-wifi-mesh .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-tv .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-tv-decoder .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-app-desktop .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-tv-software .usecase-step .step-card .step-image-wrapper, .usecase-tutorial.tutorial-type-Modem-WiFi .usecase-step .step-card .step-image-wrapper {
    min-width: 100%;
    min-height: 474px;
    width: 100%;
    max-width: unset;
    flex-shrink: 0; }
  .usecase-tutorial.tutorial-type-remote-control .usecase-step, .usecase-tutorial.tutorial-type-roteador .usecase-step, .usecase-tutorial.tutorial-type-router .usecase-step, .usecase-tutorial.tutorial-type-roteador-wifi .usecase-step, .usecase-tutorial.tutorial-type-modem-usb .usecase-step, .usecase-tutorial.tutorial-type-wifi-mesh .usecase-step, .usecase-tutorial.tutorial-type-tv .usecase-step, .usecase-tutorial.tutorial-type-tv-decoder .usecase-step, .usecase-tutorial.tutorial-type-app-desktop .usecase-step, .usecase-tutorial.tutorial-type-tv-software .usecase-step, .usecase-tutorial.tutorial-type-Modem-WiFi .usecase-step {
    width: 50%; }
  .usecase-tutorial.tutorial-type-smartphone .usecase-step, .usecase-tutorial.tutorial-type-smartwatch .usecase-step, .usecase-tutorial.tutorial-type-tablet .usecase-step, .usecase-tutorial.tutorial-type-app .usecase-step, .usecase-tutorial.tutorial-type-app-phone .usecase-step {
    width: 33%; } }

/*# sourceMappingURL=usecase.css.map */