/* DeskPane - XP inspired theme
 *
 * Demo-local showcase theme; this file is not bundled as a DeskPane core theme.
 * It does not change the default DeskPane theme or existing DOM class names.
 */
:root {
  --dp-window-bg:                     #0054e3;
  --dp-window-border:                 #6582ad;
  --dp-window-border-active:          #0054e3;
  --dp-window-shadow:                 2px 3px 9px rgba(0, 32, 92, 0.32);
  --dp-window-shadow-active:          3px 5px 14px rgba(0, 32, 92, 0.42);
  --dp-window-header-bg:              linear-gradient(180deg, #3d95ff 0%, #0969ef 12%, #0054e3 58%, #0042b7 100%);
  --dp-window-header-border:          transparent;
  --dp-window-title-color:            #ffffff;
  --dp-window-btn-color:              #ffffff;
  --dp-window-btn-hover-bg:           linear-gradient(#75adff, #2e74e9);
  --dp-window-btn-close-hover-bg:     linear-gradient(#ff9b82, #e54b2f 55%, #bd2d16);
  --dp-window-btn-close-hover-color:  #ffffff;
  --dp-window-body-bg:                #ece9d8;
  --dp-window-body-color:             #1f1f1f;
  --dp-xp-body-border:                #003caa;
  --dp-snap-guide-color:              rgba(38, 118, 236, 0.60);
  --dp-edge-snap-preview-bg:          rgba(86, 159, 255, 0.28);
  --dp-edge-snap-preview-border:      rgba(228, 241, 255, 0.95);
  --dp-edge-snap-preview-inner-border: rgba(0, 71, 186, 0.75);
  --dp-edge-snap-preview-radius:      7px;

  --dp-layout-header-bg:              linear-gradient(#fffdf5, #ece9d8);
  --dp-layout-header-border:          #aca899;
  --dp-layout-title-color:            #003399;
  --dp-layout-btn-color:              #003399;
  --dp-layout-btn-hover-bg:           #dbe8ff;
  --dp-layout-splitter-bg:            #aca899;
  --dp-layout-splitter-active:        #316ac5;

  --dp-desktop-bg:                    #3a88d8;
  --dp-desktop-icon-text:             #ffffff;
  --dp-desktop-icon-hover-bg:         rgba(49, 106, 197, 0.42);
  --dp-dock-bg:                       linear-gradient(#3168d5 0%, #245edb 10%, #1f56c7 88%, #1941a5 100%);
  --dp-dock-backdrop-filter:          none;
  --dp-dock-border:                   #0d3fa4;
  --dp-dock-item-hover-bg:            rgba(92, 155, 246, 0.72);
  --dp-font:                          Tahoma, "Segoe UI", Arial, sans-serif;

  --dp-menu-bg:                       #ffffff;
  --dp-menu-color:                    #1f1f1f;
  --dp-menu-border:                   #1f57b7;
  --dp-menu-shadow:                   3px 4px 12px rgba(0, 24, 78, 0.42);
  --dp-menu-hover-bg:                 #316ac5;
  --dp-menu-hover-color:              #ffffff;
  --dp-menu-hover-border:             #316ac5;
  --dp-menu-muted-color:              #6b6b6b;
  --dp-menu-separator:                #d6d2c2;
  --dp-menu-radius:                   6px 6px 0 0;
  --dp-start-menu-primary-bg:         #ffffff;
  --dp-start-menu-secondary-bg:       #d3e5fa;
  --dp-start-menu-header-bg:          linear-gradient(#1f65d9, #0c4db5);
  --dp-start-menu-header-color:       #ffffff;
  --dp-start-menu-footer-bg:          linear-gradient(#4a8cea, #1d5fc7);
}

.dp-window {
  padding: 3px;
  border-width: 1px;
  border-radius: 8px 8px 3px 3px;
}

.dp-window:not(.dp-active) {
  --dp-window-bg: #7697c8;
  --dp-window-header-bg: linear-gradient(180deg, #a8bad5, #7697c8 52%, #6685b5);
}

.dp-header {
  height: 29px;
  min-height: 29px;
  padding: 0 3px 0 6px;
  border: 0;
  border-radius: 5px 5px 0 0;
  font-weight: 700;
  text-shadow: 1px 1px #0b327d;
}

.dp-title {
  font-size: 13px;
}

.dp-body {
  border: 1px solid var(--dp-xp-body-border, #003caa);
}

.dp-btn {
  width: 21px;
  height: 21px;
  margin-left: 2px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  background: linear-gradient(135deg, #68a8ff, #1f69e6 56%, #0a47bd);
  box-shadow: inset 0 0 0 1px rgba(0, 46, 148, 0.55);
  font-size: 12px;
  font-weight: 700;
  text-shadow: 1px 1px #07368d;
}

.dp-btn.dp-btn-close {
  background: linear-gradient(135deg, #ffb09b, #e85b3d 52%, #c9341e);
  box-shadow: inset 0 0 0 1px rgba(132, 29, 10, 0.55);
}

.dp-window.dp-maximized {
  padding: 0;
  border-radius: 0;
}

.dp-window.dp-maximized > .dp-header {
  border-radius: 0;
}

.dp-window.dp-maximized > .dp-body {
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.dp-child-window > .dp-header::before {
  background: #ffb900;
}

.dp-dock {
  box-shadow: inset 0 2px rgba(87, 148, 241, 0.78), 0 -1px #0b3f9d;
}

.dp-dock-item,
.dp-desktop-icon {
  border-radius: 2px;
}

.dp-desktop-icon-label,
.dp-dock-label {
  text-shadow: 1px 1px 2px #163969;
}