:root {
  --win-background: #ffffff;
  --win-border: #dbdbdb;
  --win-shadow: rgba(0, 0, 0, 0.3);
  --win-head-start: #f1f3f5;
  --win-head-end: #e3e5e7;
  --win-title-color: #778;
  --win-title-shadow: #fff 2px 1px 0;
  --win-btn-color: #778;
  --win-btn-close-hover-bg: #de4942;
  --win-btn-close-hover-color: #fff;
  --win-btn-hover-bg: #eee;
  --win-btn-hover-border: #ccc;
  --win-btn-hover-color: #000;
  --win-iframe-bg: #fefefe;
}

:root[data-theme="dark"] {
  --win-background: #1a1a1a;
  --win-border: #333;
  --win-shadow: rgba(0, 0, 0, 0.6);
  --win-head-start: #333;
  --win-head-end: #292929;
  --win-title-color: #eee;
  --win-title-shadow: #000 2px 1px 0;
  --win-btn-color: #b0b1b3;
  --win-btn-close-hover-bg: #c0392b;
  --win-btn-close-hover-color: #fff;
  --win-btn-hover-bg: #2a2a2a;
  --win-btn-hover-border: #444;
  --win-btn-hover-color: #ddd;
  --win-iframe-bg: #1a1a1a;
}

.divWin {
  background-color: var(--win-background);
  border: 1px outset var(--win-border);
  overflow: hidden;
  box-shadow: 5px 5px 5px var(--win-shadow);
  border-radius: 8px;
}

.divWinHead {
  background: linear-gradient(to bottom, var(--win-head-start) 75%, var(--win-head-end) 100%);
  height: 25px;
  cursor: move;
}

.divWinHead:focus {
  outline: none;
}

.divWinTitle {
  font-size: 12px;
  font-weight: bold;
  line-height: 24px;
  padding-left: 10px;
  color: var(--win-title-color);
  text-shadow: var(--win-title-shadow);
  word-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
}

.divWinButtons {
  float: right;
  width: 100px;
}

.btnWinClose,
.btnWinOut,
.btnWinMin,
.btnWinMax {
  float: right;
  height: 24px;
  width: 32px;
  font-size: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--win-btn-color);
}

.btnWinClose>svg,
.btnWinOut>svg,
.btnWinMin>svg,
.btnWinMax>svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.btnWinClose:hover {
  background-color: var(--win-btn-close-hover-bg);
  color: var(--win-btn-close-hover-color);
}

.btnWinOut:hover,
.btnWinMin:hover,
.btnWinMax:hover {
  background-color: var(--win-btn-hover-bg);
  border: 1px solid var(--win-btn-hover-border);
  color: var(--win-btn-hover-color);
}

.iframeWin {
  border: 0;
  margin: 2px;
  padding: 0;
  overflow: auto;
  background-color: var(--win-iframe-bg);
}