.winbox {
  background-color: #c0c0c0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: var(--cursor-arrow);
}

.deskIcon {
  cursor: var(--cursor-arrow) !important;
}

.winbox.min {
  margin-left: 126px;
  /* to provide room for start button in taskbar*/
  margin-top: 38px;
  /* to compensate bottom limit and make minimized window appear on taskbar */
  /* minimized window is 35px thick */
  /* margin-right:80px; --> doensn't work*/
  /* margin-right now works after deobfuscating win.min.js and modifying function */
}

.wb-drag {
  background-color: #14055d;
}

.wb-header {
  height: 28px;
}

.wb-title {
  background-color: #14055d;
  color: #ffffff;
  font-family: "windows", sans-serif;
  font-size: 14px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  user-select: none;
}

.winbox:not(.focus) .wb-drag,
.winbox:not(.focus) .wb-title,
.winbox:not(.focus) .wb-control {
  background-color: #747578;
}

/* min, max, close controls */

.wb-control {
  background-color: #14055d;
  display: inline-block;
  height: 100%;
  max-width: 100%;
  align-items: center;
  display: inline-flex;
  margin-right: 6px;
}

.wb-close,
.wb-max,
.wb-min {
  width: 18px;
  height: 18px;
  background-color: #d0d0d0;
  color: black;
  font-size: 13px;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  margin-top: px;
  cursor: var(--cursor-arrow);
}

.wb-min {
  background-image: url(/customui/controls/min.webp);
}

.wb-max {
  background-image: url(/customui/controls/max.webp);
}

.wb-close {
  background-image: url(/customui/controls/close.webp);
}

.wb-icon {
  height: 120%;
  margin: -1px 0px 0-3px;
}

/* enable borders only by appearance in winbox classes with no-resize */

.winbox.my-theme.no-resize .wb-n,
.winbox.my-theme.no-resize .wb-s,
.winbox.my-theme.no-resize .wb-e,
.winbox.my-theme.no-resize .wb-w {
  display: block !important;
  pointer-events: none;
}

.wb-body {
  padding: 8px;
  display: flex;
  width: 100%;
  /* to add bottom window padding */
  height: calc(100% - 40px);
  top: 30px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  background-color: #c0c0c0;
  color: black;
  font-family: "windows", sans-serif;
  font-size: 13px;
  overflow: hidden;
}

.winbox-menu-bar {
  width: 100%;
  background-color: #c5c5c4;
  font-family: "windows", sans-serif;
  font-size: 13px;
  color: black;
  display: flex;
  gap: 8px;
  user-select: none;
  border-bottom: 1px solid #888;
  padding: 0px 8px;
  cursor: var(--cursor-arrow);
}

/* winbox borders */

.wb-n,
.wb-w {
  background-color: #fffefe;
}

.wb-n {
  top: -8px;
}

.wb-w {
  left: -8px;
}

.wb-e,
.wb-s {
  background-color: #808080;
}

.wb-e {
  right: -8px;
}

.wb-s {
  bottom: -8px;
}

/* desktop icons or apps */

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: none;
  cursor: var(--cursor-arrow);
  user-select: none;
  border-style: dotted;
  border-color: transparent;
  border-width: 1px;
}

.desktop-icon:active {
  cursor: var(--cursor-grab);
  user-select: none;
}

.icon-label {
  display: inline;
  font-size: 13px;
  font-family: "windows", sans-serif;
  color: white;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px dotted transparent;
  padding: 2px 4px;
  background: transparent;
}

.desktop-icon:focus .icon-label {
  background-color: #000080;
  border-color: white;
  border-style: dotted;
}

/* buttons */

.w-button {
  font-family: "windows";
  background-color: #c0c0c0;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff #404040 #404040 #ffffff;
  color: black;
  padding: 3px;
  box-sizing: border-box;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: var(--cursor-arrow);
}

/* Pressed */
.w-button:active {
  border-color: #404040 #ffffff #ffffff #404040;
  cursor: var(--cursor-arrow);
}

.tab-content-container
/* themed tabs */

.tab-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.tab-bar {
  display: flex;
  gap: 0px;
  padding-left: 0px;
}

.tab {
  padding: 3px 12px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #ffffff #ffffff;
  font-family: "windows";
  font-size: 11px;
  color: black;
  cursor: var(--cursor-arrow);
  position: relative;
  top: 2px;
  margin-bottom: 2px;
}

.tab.active {
  background: #dfdfdf;
  border-color: #ffffff #808080 transparent #ffffff;
  padding-bottom: 0px;
  margin-top: -2px;
  z-index: 10;
}

.tab-content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* to bring tab bottom into view as window bottom padding might hide it */
  height: calc(100% - 20px);
  padding: 8px 14px;
  border: 2px solid;
  border-color: #fffefe #808080 #808080 #fffefe;
  background: #dfdfdf;
  margin-top: -2px;
  box-sizing: border-box;
}

/* content divider */

.divider {
  height: 4px;
  background: #fffefe;
  border-top: 2px solid #808080;
  margin: 4px 0;
  width: 100%;
}

/* themed scrollbar */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: #c3c2c2;
}

::-webkit-scrollbar-track {
  background: #dcdcdc;
  border-left: 2px solid #808080;
  border-top: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
}

::-webkit-scrollbar-thumb {
  background: #c3c2c2;
  border-left: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  box-shadow: inset 1px 1px 0 #c0c0c0, inset -1px -1px 0 #f0f0f0;
}

::-webkit-scrollbar-button:single-button:decrement {
  background: #c3c2c2
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><polygon points="0,6 3,0 6,6" fill="black"/></svg>')
    no-repeat center;
  height: 16px;
  border-left: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
}

::-webkit-scrollbar-button:single-button:increment {
  background: #c3c2c2
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><polygon points="0,0 3,6 6,0" fill="black"/></svg>')
    no-repeat center;
  height: 16px;
  border-left: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
}