/*! os9.css v0.0.1 - https://github.com/mat-sz/platinum.css */
/* Colors */
/* sass */
/* Fonts */
@font-face {
  font-family: "Charcoal";
  src:
    url("charcoal.woff2") format("woff2"),
    url("charcoal.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
* {
  box-sizing: border-box;
}

body {
  font-family: "Charcoal", "Courier New", Courier, monospace;
}

/* OS9-style window chrome (ref: siddhartha77/os9) */
.window,
.desktop-window {
  position: relative;
  font-size: 12px;
  font-family: "Charcoal", "Courier New", Courier, monospace;
  border: 1px solid #000;
  background: #dadada;
  box-shadow: 1px 1px #111, inset 1px 1px #fff, inset -1px -1px #999;
}

.desktop-window:not(.active) {
  box-shadow: 1px 1px #525252;
  border-color: #525252;
}

.desktop-window:not(.active) .title-bar-text {
  opacity: 0.5;
}

.window-body {
  margin: 0 4px 4px 4px;
  border: 1px solid #000;
  background: #fff;
  box-shadow: -1px -1px #9c9c9c, 1px 1px #fff, inset 1px 1px #fff, inset -1px -1px #acacac;
}

.title-bar {
  display: flex;
  align-items: center;
  height: 22px;
  padding-right: 1px;
  padding-bottom: 0;
  min-height: 22px;
}
.title-bar .title-bar-text {
  display: flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: bold;
  flex: 1;
  margin-top: 1px;
}

.title-bar .title-bar-text .title-bar-icon {
  width: 16px;
  height: 16px;
  margin: 0 3px 0 0;
  vertical-align: middle;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: -webkit-optimize-contrast;
}
.title-bar .title-bar-text:after,
.title-bar .title-bar-text:before {
  content: "";
  display: block;
  flex: 1;
  height: 1px;
  margin: 0 3px;
  margin-bottom: 13px;
  margin-top: -1px;
  box-shadow:
    0px 1px 0px 0px #ffffff,
    1px 2px 0px 0px #737373,
    0px 3px 0px 0px #ffffff,
    1px 4px 0px 0px #737373,
    0px 5px 0px 0px #ffffff,
    1px 6px 0px 0px #737373,
    0px 7px 0px 0px #ffffff,
    1px 8px 0px 0px #737373,
    0px 9px 0px 0px #ffffff,
    1px 10px 0px 0px #737373,
    0px 11px 0px 0px #ffffff,
    1px 12px 0px 0px #737373;
}
.title-bar .title-bar-text:after {
  margin-right: 1px;
}
.title-bar .title-bar-text:before {
  margin-left: 1px;
}
.title-bar .title-bar-controls {
  line-height: 1px;
  margin-top: 1px;
}
.title-bar .title-bar-controls {
  display: flex;
  align-items: center;
  gap: 0;
}

.title-bar .title-bar-controls-left {
  margin-right: 2px;
}

.title-bar .title-bar-controls-right {
  margin-left: auto;
  margin-right: 2px;
}

.title-bar .title-bar-controls .control-box {
  display: inline-block;
  height: 11px;
  width: 11px;
  margin-left: 4px;
  border: 1px solid #222;
  background: linear-gradient(to bottom right, #999, #aaa, #bbb, #ccc, #ddd, #eee, #fff, #fff);
  box-shadow: inset 1px 1px #ccc, inset -1px -1px #888;
  position: relative;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.title-bar .title-bar-controls .control-box.close-box {
  cursor: pointer;
}

.title-bar .title-bar-controls .control-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: #fff;
}

.title-bar .title-bar-controls .control-box:active {
  box-shadow: none;
}


.title-bar .title-bar-controls .control-box.zoom-box {
  margin-right: 1px;
}

.title-bar .title-bar-controls .control-box.windowshade-box {
  margin-right: 4px;
  cursor: pointer;
}

.title-bar .control-box .zoom-box-inner {
  position: relative;
  top: -1px;
  display: block;
  height: 5px;
  width: 5px;
  margin: 2px auto 0;
  border-bottom: 1px solid #202020;
  border-right: 1px solid #202020;
}

.title-bar .control-box .windowshade-box-inner {
  position: relative;
  top: -1px;
  display: block;
  height: 1px;
  width: 7px;
  margin: 4px auto 0;
  border-top: 1px solid #202020;
  border-bottom: 1px solid #202020;
}

/* Legacy single close button (when no .control-box) */
.title-bar .title-bar-controls button {
  padding: 0;
  border: 1px solid #212121;
  background: linear-gradient(135deg, #9c9c9c 0%, #ffffff 100%);
  box-shadow:
    -1px -1px 0px 0px #8c8c8c,
    1px 1px 0px 0px #ffffff,
    inset 1px 0px 0px 0px #cecece,
    inset 0px 1px 0px 0px #cecece,
    inset -1px -1px 0px 0px #8c8c8c;
  width: 11px;
  height: 11px;
  position: relative;
  margin-left: 1px;
}

.title-bar .title-bar-controls button:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: #ffffff;
}