/* "Estilo tema clássico do Windows" (Propriedades de Vídeo > Aparência):
   cores do esquema Padrão do Windows (ButtonFace 212,208,200; ActiveCaption
   10,36,106 -> 166,202,240; InactiveCaption 128,128,128 -> 192,192,192).
   Fica ativo com html.xp-classic. */
html.xp-classic {
  --c-face: #d4d0c8;
  --c-light: #fff;
  --c-shadow: #808080;
  --c-dark: #404040;
}
html.xp-classic .xp-window {
  background: var(--c-face) !important;
  border-radius: 0 !important;
  box-shadow: inset -1px -1px var(--c-dark), inset 1px 1px var(--c-face),
    inset -2px -2px var(--c-shadow), inset 2px 2px var(--c-light);
  padding: 4px !important;
}
html.xp-classic .xp-window .header__bg {
  border: 0;
  border-image: none;
  left: 4px;
  right: 4px;
  top: 4px;
  height: 18px;
  background: linear-gradient(to right, #808080, #c0c0c0);
}
html.xp-classic .xp-window.is-focus .header__bg {
  background: linear-gradient(to right, #0a246a, #a6caf0);
}
html.xp-classic .xp-window .app__header {
  top: 4px;
  left: 4px;
  right: 4px;
  height: 18px;
  line-height: 18px;
  font: bold 11px Tahoma, sans-serif;
  color: #d4d0c8;
  text-shadow: none;
}
html.xp-classic .xp-window.is-focus .app__header {
  color: #fff;
}
html.xp-classic .xp-window .app__header__title {
  letter-spacing: 0;
}
html.xp-classic .xp-window .app__content {
  margin-top: 19px;
  height: calc(100% - 19px);
}
/* botões da barra de título: 16x14, relevo e glifos desenhados */
html.xp-classic .xp-window .header__button {
  width: 16px;
  height: 14px;
  background: var(--c-face) !important;
  box-shadow: inset -1px -1px var(--c-dark), inset 1px 1px var(--c-light),
    inset -2px -2px var(--c-shadow);
}
html.xp-classic .xp-window .header__button:hover:active {
  box-shadow: inset 1px 1px var(--c-dark), inset -1px -1px var(--c-light),
    inset 2px 2px var(--c-shadow);
}
html.xp-classic .xp-window .header__button:after {
  background: none !important;
  left: 4px;
  top: 3px;
  width: 8px;
  height: 7px;
}
html.xp-classic .xp-window .header__button--close {
  margin-left: 2px;
}
html.xp-classic .xp-window .header__button--close:after {
  content: '\2715';
  font: bold 9px/7px Tahoma, sans-serif;
  color: #000;
  text-align: center;
  left: 3px;
  top: 3px;
  width: 9px;
}
html.xp-classic .xp-window .header__button--minimize:after {
  top: 8px;
  left: 4px;
  width: 6px;
  height: 2px;
  background: #000 !important;
}
html.xp-classic .xp-window .header__button--maximize:after {
  left: 3px;
  top: 2px;
  width: 7px;
  height: 6px;
  border: 1px solid #000;
  border-top-width: 2px;
}
html.xp-classic .xp-window .header__button--maximized:after {
  left: 5px;
  top: 2px;
  width: 5px;
  height: 4px;
  border: 1px solid #000;
  border-top-width: 2px;
  box-shadow: -2px 3px 0 -1px var(--c-face), -2px 3px 0 0 #000;
}
html.xp-classic .xp-window .header__button--disable:after {
  opacity: 0.4;
}

/* barra de tarefas clássica */
html.xp-classic footer {
  background: var(--c-face) !important;
  box-shadow: inset 0 1px var(--c-face), inset 0 2px var(--c-light);
  color: #000;
}
html.xp-classic footer .footer__start {
  border: 0 !important;
  border-image: none !important;
  width: 56px;
  height: 22px;
  margin: 4px 4px 0 2px;
  background: var(--c-face);
  box-shadow: inset -1px -1px var(--c-dark), inset 1px 1px var(--c-light),
    inset -2px -2px var(--c-shadow);
  color: #000;
}
html.xp-classic footer .footer__start.is-open,
html.xp-classic footer .footer__start:active {
  box-shadow: inset 1px 1px var(--c-dark), inset -1px -1px var(--c-light),
    inset 2px 2px var(--c-shadow);
}
html.xp-classic footer .footer__start img {
  left: 3px;
  top: 3px;
  width: 16px;
  height: 14px;
}
html.xp-classic footer .footer__start span {
  left: 21px;
  top: 0;
  font: bold 11px/22px Tahoma, sans-serif;
  letter-spacing: 0;
  text-shadow: none;
}
html.xp-classic footer .footer__window {
  border-image: none !important;
  height: 22px;
  margin-top: 4px;
  background: var(--c-face);
  box-shadow: inset -1px -1px var(--c-dark), inset 1px 1px var(--c-light),
    inset -2px -2px var(--c-shadow);
  color: #000;
}
html.xp-classic footer .footer__window.focus {
  font-weight: bold;
  background: repeating-conic-gradient(#fff 0 25%, var(--c-face) 0 50%) 0 0 /
    2px 2px;
  box-shadow: inset 1px 1px var(--c-dark), inset -1px -1px var(--c-light),
    inset 2px 2px var(--c-shadow);
}
html.xp-classic footer .footer__window .footer__icon {
  left: 4px;
  top: 3px;
}
html.xp-classic footer .footer__text {
  left: 24px;
  top: 4px !important;
}
html.xp-classic footer .footer__items.right {
  border: 0;
  border-image: none;
  height: 22px;
  margin-top: 4px;
  margin-right: 2px;
  box-shadow: inset 1px 1px var(--c-shadow), inset -1px -1px var(--c-light);
  color: #000;
}
html.xp-classic footer .footer__time {
  color: #000;
  text-shadow: none;
}
html.xp-classic footer .footer__quick button:hover {
  border-color: transparent;
  background: none;
  box-shadow: inset -1px -1px var(--c-shadow), inset 1px 1px var(--c-light);
}

/* controles dos diálogos (xpui) sem as imagens do Luna */
html.xp-classic .xpui-btn {
  border-image: none !important;
  border: 0 !important;
  background: var(--c-face) !important;
  box-shadow: inset -1px -1px var(--c-dark), inset 1px 1px var(--c-light),
    inset -2px -2px var(--c-shadow), inset 2px 2px var(--c-face);
  border-radius: 0;
}
html.xp-classic .xpui-btn.is-default {
  box-shadow: inset 0 0 0 1px #000, inset -2px -2px var(--c-dark),
    inset 2px 2px var(--c-light), inset -3px -3px var(--c-shadow);
}
html.xp-classic .xpui-btn:active:not(:disabled) {
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--c-shadow);
}
html.xp-classic .xpui-dlg,
html.xp-classic .xpui {
  --xpui-bg: var(--c-face);
}
html.xp-classic .xpui-menu-item:hover,
html.xp-classic .xpui-menu-item.is-open,
html.xp-classic .xpui-menubar > button:hover,
html.xp-classic .xpui-menubar > button.is-open {
  background: #0a246a;
}

/* painel de tarefas do Explorer no tema clássico */
html.xp-classic .com__content__left {
  background: #fff;
}
html.xp-classic .com__content__left__card__header {
  border-image: none;
  background: linear-gradient(to right, #fff, #d4d0c8);
}
html.xp-classic .com__content__left__card__content {
  background: #f1efe2;
  border-color: #d4d0c8;
}
html.xp-classic .com__content__left__card.special .com__content__left__card__header__text,
html.xp-classic .com__content__left__card__header__text {
  color: #000;
}