@charset "UTF-8";
/*!
 * OS.js - JavaScript Cloud/Web Desktop Platform
 *
 * Copyright (c) 2011-2020, Anders Evenrud <andersevenrud@gmail.com>
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 * 1. Redistributions of source code must retain the above copyright notice, this
 *    list of conditions and the following disclaimer
 * 2. Redistributions in binary form must reproduce the above copyright notice,
 *    this list of conditions and the following disclaimer in the documentation
 *    and/or other materials provided with the distribution
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
 * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 * @author  Anders Evenrud <andersevenrud@gmail.com>
 * @licence Simplified BSD License
 */
body,
html {
  width: 100%;
  height: 100%;
}

:root {
  --u-orange: #e95420;
  --u-orange-dark: #c7411a;
  --u-aubergine: #2c001e;
  --u-purple: #77216f;
  --u-shell: #1e1e1e;
  --u-shell-2: #2c2c2c;
  --u-win: #fafafa;
  --u-headerbar: #ededed;
  --u-headerbar-in: #f6f6f6;
  --u-border: #d2d2d2;
  --u-text: #2b2b2b;
  --u-text-dim: #6b6b6b;
  --u-on-shell: #f2f2f2;
  --u-radius: 12px;
}

body,
.osjs-root,
.osjs-window,
.osjs-panel,
.osjs-gui {
  font-family: "Ubuntu", "Roboto", system-ui, sans-serif;
}

.osjs-root .osjs-panel[data-position=top] {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 6px;
  background: rgba(30, 30, 30, 0.97);
  color: var(--u-on-shell);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  z-index: 16777271;
}
.osjs-root .osjs-panel[data-position=top] .osjs-panel-item {
  color: var(--u-on-shell);
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  transition: background 0.12s ease;
}
.osjs-root .osjs-panel[data-position=top] .osjs-panel-item--clickable:hover {
  background: rgba(255, 255, 255, 0.14);
}
.osjs-root .osjs-panel[data-position=top] .osjs-panel-item[data-name=menu] {
  font-weight: 700;
}
.osjs-root .osjs-panel[data-position=top] .osjs-panel-item[data-name=clock] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}
.osjs-root .osjs-panel[data-position=top] .osjs-panel-item[data-name=tray] {
  margin-left: auto;
}
.osjs-root .osjs-window {
  border-radius: var(--u-radius);
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34), 0 3px 10px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  background: var(--u-win);
}
.osjs-root .osjs-window[data-focused=false] {
  opacity: 1;
}
.osjs-root .osjs-window-header {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 8px 0 12px;
  background: var(--u-headerbar-in);
  border-bottom: 1px solid var(--u-border);
  color: var(--u-text);
}
.osjs-root .osjs-window[data-focused=true] .osjs-window-header {
  background: linear-gradient(180deg, #f4f4f4 0%, var(--u-headerbar) 100%);
}
.osjs-root .osjs-window-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.osjs-root .osjs-window-title {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--u-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.osjs-root .osjs-window:not([data-focused=true]) .osjs-window-title {
  color: var(--u-text-dim);
}
.osjs-root .osjs-window-button {
  position: relative;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.osjs-root .osjs-window-button > div {
  display: none;
}
.osjs-root .osjs-window-button::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: #3a3a3a;
  font-weight: 700;
}
.osjs-root .osjs-window-button:hover {
  background: rgba(0, 0, 0, 0.1);
}
.osjs-root .osjs-window-button:active {
  transform: scale(0.92);
  background: rgba(0, 0, 0, 0.16);
}
.osjs-root .osjs-window-button[data-action=minimize]::after {
  content: "–";
}
.osjs-root .osjs-window-button[data-action=maximize]::after {
  content: "□";
  font-size: 11px;
}
.osjs-root .osjs-window-button[data-action=close]::after {
  content: "✕";
}
.osjs-root .osjs-window-button[data-action=close] {
  background: #d5d3cf;
}
.osjs-root .osjs-window-button[data-action=close]:hover {
  background: #c2c0bc;
}
.osjs-root .osjs-gui-button > button {
  border-radius: 7px;
  border: 1px solid var(--u-border);
  background: #fbfbfb;
  padding: 5px 14px;
  font-weight: 500;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.osjs-root .osjs-gui-button > button:hover {
  background: #f0f0f0;
}
.osjs-root .osjs-gui-button > button:active {
  background: #e7e7e7;
}
.osjs-root .osjs-gui-field,
.osjs-root .osjs-gui-input input,
.osjs-root .osjs-gui-input textarea,
.osjs-root .osjs-gui-input select {
  border-radius: 7px;
  border: 1px solid var(--u-border);
}
.osjs-root .osjs-gui-input input:focus,
.osjs-root .osjs-gui-input textarea:focus,
.osjs-root .osjs-gui-input select:focus {
  outline: none;
  border-color: var(--u-orange);
  box-shadow: 0 0 0 2px rgba(233, 84, 32, 0.28);
}
.osjs-root .osjs-gui-menu ul {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  padding: 4px;
}
.osjs-root .osjs-gui-menu ul li {
  border-radius: 6px;
}
.osjs-root .osjs-gui-menu ul li:hover {
  background: var(--u-orange);
  color: #fff;
}
.osjs-root .osjs-gui-list-view-wrapper .rows > div[data-selected=true],
.osjs-root .osjs-gui-icon-view-wrapper .entry[data-selected=true] {
  background: rgba(233, 84, 32, 0.16);
}
.osjs-root .osjs-notification {
  border-radius: 12px;
  background: rgba(38, 38, 38, 0.96);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border: none;
}
.osjs-root .osjs-notification-title {
  font-weight: 700;
}

.ubuntu-dock {
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 0;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  background: rgba(30, 30, 30, 0.92);
  backdrop-filter: blur(9px);
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.32);
  z-index: 16777270;
}

.ubuntu-dock__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.ubuntu-dock__list::-webkit-scrollbar {
  width: 0;
}

.ubuntu-dock__item,
.ubuntu-dock__apps {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  margin: 1px 0;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s ease, transform 0.1s ease;
}

.ubuntu-dock__item:hover,
.ubuntu-dock__apps:hover {
  background: rgba(255, 255, 255, 0.14);
}

.ubuntu-dock__item:active {
  transform: scale(0.9);
}

.ubuntu-dock__item img {
  width: 34px;
  height: 34px;
  pointer-events: none;
}

.ubuntu-dock__dot {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--u-orange);
  transform: translateY(-50%) scale(0);
  transition: transform 0.14s ease;
}

.ubuntu-dock__item.is-running .ubuntu-dock__dot {
  transform: translateY(-50%) scale(1);
}

.ubuntu-dock__sep {
  width: 34px;
  height: 1px;
  margin: 6px 0;
  background: rgba(255, 255, 255, 0.18);
  flex: 0 0 auto;
}

.ubuntu-dock__apps {
  margin-top: auto;
  background: transparent;
}

.ubuntu-dock__apps:hover {
  background: rgba(255, 255, 255, 0.14);
}

.ubuntu-dock__apps::before {
  content: "";
  width: 22px;
  height: 22px;
  background-image: radial-gradient(circle, #fff 55%, transparent 56%), radial-gradient(circle, #fff 55%, transparent 56%), radial-gradient(circle, #fff 55%, transparent 56%), radial-gradient(circle, #fff 55%, transparent 56%), radial-gradient(circle, #fff 55%, transparent 56%), radial-gradient(circle, #fff 55%, transparent 56%), radial-gradient(circle, #fff 55%, transparent 56%), radial-gradient(circle, #fff 55%, transparent 56%), radial-gradient(circle, #fff 55%, transparent 56%);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-position: 0 0, 8px 0, 16px 0, 0 8px, 8px 8px, 16px 8px, 0 16px, 8px 16px, 16px 16px;
}

.osjs-root .osjs-contents {
  left: 68px !important;
}

.ubuntu-appgrid {
  position: absolute;
  top: 30px;
  left: 68px;
  right: 0;
  bottom: 0;
  z-index: 16777269;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 26px;
  background: rgba(24, 20, 28, 0.9);
  backdrop-filter: blur(14px);
  overflow-y: auto;
}

.ubuntu-appgrid__search {
  flex: 0 0 auto;
  width: min(420px, 80%);
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  margin-bottom: 34px;
}

.ubuntu-appgrid__search::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.ubuntu-appgrid__search:focus {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 2px rgba(233, 84, 32, 0.5);
}

.ubuntu-appgrid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 110px);
  gap: 18px;
  justify-content: center;
  width: 100%;
}

.ubuntu-appgrid__app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 4px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: #fff;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease;
}

.ubuntu-appgrid__app:hover {
  background: rgba(255, 255, 255, 0.12);
}

.ubuntu-appgrid__app img {
  width: 56px;
  height: 56px;
  pointer-events: none;
}

.ubuntu-appgrid__app span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/*# sourceMappingURL=osjs.css.map*/