/* Window.css for Mocha UI
 *
 * Theme: Default
 *
 * Copyright:
 * Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>.
 *
 * License:
 * MIT-style license.
 *
 * Required by:
 * Window.js and Modal.css
 * Modified for Dark Mode by:
 * Raymond Lanser
 *
 * */
/* Windows
 * ---------------------------------------------------------------- */
/* Sass Document */ 
/* Scss Document */
/*Layout Sass Theme Variables */
/*Tab Sass Theme Variables */
/*Window Sass Theme Variables */
/* Style Sass Theme Variables*/
/* Icon Variables */
/* Main mixin for generating theme variables from lists */
/* Four @each statements, instead of one earlier in the nesting creeates a more succinct final css. */
:root {
  --row-select: #415a8d;
  --hover-color: #ee6600;
  --border-col: #909090;
}

body.light-theme, body.light-theme > *, body.light-theme + * {
  --row-select: #415a8d;
  --hover-color: #ee6600;
  --border-col: #909090;
}

@media (prefers-color-scheme: dark) {
  body, body > *, body + * {
    --row-select: #94BBD8;
    --hover-color: #d1c52a;
    --border-col: #6f6f6f;
  }
}
body.dark-theme, body.dark-theme > *, body.dark-theme + * {
  --row-select: #94BBD8;
  --hover-color: #d1c52a;
  --border-col: #6f6f6f;
}

/* Early version of the mixin for seperate dark and light lists. May still prove useful. */
/* Div Background Properties Mixin */
/* Scss Document */
/*Layout Sass Theme Variables */
/*Tab Sass Theme Variables */
/*Window Sass Theme Variables */
/* Style Sass Theme Variables*/
/* Icon Variables */
:root {
  --mocha-border-clr: #d9d9d9;
  --mocha-border-lte: #dadada;
  --mocha-button: #fefefe;
}

body.light-theme, body.light-theme > *, body.light-theme + * {
  --mocha-border-clr: #d9d9d9;
  --mocha-border-lte: #dadada;
  --mocha-button: #fefefe;
}

@media (prefers-color-scheme: dark) {
  body, body > *, body + * {
    --mocha-border-clr: #333333;
    --mocha-border-lte: #3a3a3a;
    --mocha-button: #ccc;
  }
}
body.dark-theme, body.dark-theme > *, body.dark-theme + * {
  --mocha-border-clr: #333333;
  --mocha-border-lte: #3a3a3a;
  --mocha-button: #ccc;
}

body {
  background: var(--bg-color);
}

.mochaCanvas {
  display: none;
}

.mochaOverlay {
  border-radius: 6px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
  background-color: var(--bg-menu);
}

#mochaToolbar img {
  position: relative;
  max-width: 24px;
  top: 1px;
}

.mocha {
  display: none;
  padding-bottom: 10px;
  /* overflow: hidden */
  background-color: var(--bg-color-tint);
}

.mochaOverlay {
  position: absolute;
  /* This is also set in theme.js in order to make theme transitions smoother */
  top: 0;
  left: 0;
}

.mochaTitlebar {
  width: 100%;
  overflow: hidden;
}
.mochaTitlebar h3 {
  font-size: 12px;
  line-height: 15px;
  font-weight: bold;
  margin: 0;
  padding: 5px 10px 4px 12px;
  color: var(--font-color);
}

.mocha.isFocused .mochaTitlebar h3 {
  color: var(--font-color);
}

.mochaToolbarWrapper {
  width: 100%;
  /* For IE */
  position: relative;
  height: 29px;
  background: var(--bg-color);
  overflow: hidden;
  border-top: 1px solid var(--mocha-border-clr);
}

div.mochaToolbarWrapper.bottom {
  border: 0;
  border-bottom: 1px solid var(--mocha-border-clr);
}

.mochaToolbar {
  width: 100%;
  border-top: 1px solid var(--mocha-border-clr);
}

.mochaContentBorder {
  border-top: 1px solid var(--mocha-border-lte);
  border-bottom: 1px solid var(--mocha-border-lte);
}

.mochaContentWrapper {
  font-size: 12px;
  overflow: auto;
  background: var(--bg-color);
}

.mochaContent {
  padding: 10px 12px;
}

.mocha .handle {
  position: absolute;
  background: #0f0;
  width: 3px;
  height: 3px;
  z-index: 2;
  opacity: 0;
  overflow: hidden;
  font-size: 1px;
  /* For IE6 */
}

/* Corner resize handles */
.mocha .corner {
  width: 10px;
  height: 10px;
  background: #f00;
}

/* Bottom right resize handle */
.mocha .cornerSE {
  width: 20px;
  height: 20px;
  /* This is the color of the visible resize handle */
  background: var(--mocha-button);
}

.mochaCanvasHeader {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  z-index: -1;
  visibility: hidden;
  overflow: hidden;
}

.mochaControls {
  position: absolute;
  width: 52px;
  top: 8px;
  right: 8px;
  height: 14px;
  z-index: 4;
  background: transparent;
}

.mochaCanvasControls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: transparent;
}

/* To use images for these buttons:
 * 1. Set the useCanvasControls window option to false.
 * 2. If you use a different button size you may need to reposition the controls.
 * Modify the controlsOffset window option.
 * 2. Replace the background-color with a background-image for each button. */
.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton {
  float: right;
  width: 14px;
  height: 14px;
  font-size: 1px;
  cursor: pointer;
  z-index: 4;
  color: #666;
  background-color: var(--mocha-button);
  margin-left: 5px;
}

.mochaMinimizeButton {
  margin-left: 0;
}

.mochaMaximizeButton {
  z-index: 100;
}

.mochaCloseButton {
  z-index: 100;
}

.mochaSpinner {
  display: none;
  position: absolute;
  bottom: 7px;
  left: 6px;
  width: 16px;
  height: 16px;
  background: url("../images/spinner.gif") no-repeat;
}

.mochaIframe {
  width: 100%;
}

/* Fix for IE6 select z-index issue */
.zIndexFix {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100px;
  height: 100px;
  border: 1px solid transparent;
}

/* Viewport overlays---------------------------------------------------------------- */
#modalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
  opacity: 0;
  z-index: 10000;
}

/* Fix for IE6 select z-index issue */
#modalFix {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  z-index: 9999;
}

/* Underlay */
#windowUnderlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
}

* html #windowUnderlay {
  position: absolute;
}

/* The replaced class is used internally when converting CSS values to Canvas. These classes should not be removed. */
/* .mochaTitlebar.replaced, */
.mocha.replaced, .mochaMinimizeButton.replaced,
.mochaMaximizeButton.replaced, .mochaCloseButton.replaced {
  background-color: transparent !important;
}

.windowClosed {
  visibility: hidden;
  display: none;
  position: absolute;
  top: -20000px;
  left: -20000px;
  z-index: -1;
  overflow: hidden;
}

.windowClosed .mochaContentBorder, .windowClosed .mochaToolbarWrapper,
.windowClosed .mochaTitlebar, .windowClosed .mochaControls,
.windowClosed .mochaCanvasControls {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  display: none;
  z-index: -1;
}

/* Modals */
.modal2 {
  border: 8px solid #fff;
}

.modal2 .mochaContentBorder {
  border-width: 0px;
}

/* Window Themes */
.mocha.no-canvas {
  background: var(--bg-color-tint);
  border: 1px solid #555;
}

.mocha.no-canvas .mochaTitlebar {
  background: var(--bg-color-tint);
}

.mocha.transparent .mochaTitlebar h3 {
  color: #fff;
  display: none;
}

.mocha.transparent .mochaContentWrapper {
  background: transparent;
}

.mocha.notification {
  background: #cedff2;
}

.mocha.notification .mochaTitlebar {
  opacity: 0;
}

.mocha.notification .mochaContentBorder {
  border-width: 0px;
}

.mocha.notification .mochaContentWrapper {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  background: transparent;
}

/* Example Window Themes */
#about_contentWrapper {
  background: #e5e5e5 url("../images/logo2.gif") 3px 3px no-repeat;
}

#builder_contentWrapper {
  background: #f5f5f7;
}

#json01 .mochaTitlebar {
  background: #6dd2db;
}

#json02 .mochaTitlebar {
  background: #6db6db;
}

#json03 .mochaTitlebar {
  background: #6d92db;
}

.jsonExample .mochaTitlebar h3 {
  color: #ddd;
}

/* This does not work in IE6. */
.isFocused.jsonExample .mochaTitlebar h3 {
  color: #fff;
}

#fxmorpherExample .mochaContentWrapper {
  background: #577a9e;
}

#clock {
  background: #fff;
}

/* Workaround to make invisible buttons clickable */
.mochaMinimizeButton.replaced,
.mochaMaximizeButton.replaced,
.mochaCloseButton.replaced {
  background-image: url("data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") !important;
}

/* iOS iframe scrolling */
.windowFrame .mochaContentWrapper {
  /* scroll the Window content. !important required. */
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

.windowFrame .mochaContent {
  height: 100%;
}

.windowFrame iframe {
  /* fix double scroll bar by reducing frame height. !important required. */
  height: calc(100% - 5px) !important;
}