web-toolkit/src/lib/adwaita/build.css

A GTK inspired toolkit designed to build awesome web apps

* {
  box-sizing: border-box; }

/*************
* Constants  *
*************/
/*************
* Colors     *
*************/
/*************
* Dimensions *
*************/
/***************************
 * Check and Radio buttons *
 ***************************/
/**********************
 * General Typography *
 **********************/
body {
  font-family: 'Cantarell', 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

code {
  font-family: source-code-pro, 'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New', monospace; }

.title-large {
  font-weight: 300;
  font-size: 24pt; }

h1 {
  font-weight: 800;
  font-size: 20pt; }

h2 {
  font-weight: 800;
  font-size: 15pt; }

h3 {
  font-weight: 700;
  font-size: 15pt; }

h4 {
  font-weight: 700;
  font-size: 13pt; }

html, body {
  font-weight: 400;
  font-size: 11pt; }

.heading {
  font-weight: 700;
  font-size: 11pt; }

.caption-heading {
  font-weight: 700;
  font-size: 9pt; }

.caption {
  font-weight: 400;
  font-size: 9pt; }

button {
  font-size: inherit;
  font-family: inherit; }

code {
  font-size: 0.9em;
  padding: 1px 4px;
  color: black;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px; }

pre {
  font-size: 0.9em;
  padding: 1px 4px;
  color: black;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px; }

.text-info {
  color: #3584e4;
  --icon-color: #3584e4; }

.text-success {
  color: #33d17a;
  --icon-color: #33d17a; }

.text-warning {
  color: #f57900;
  --icon-color: #f57900; }

.text-danger {
  color: #e01b24;
  --icon-color: #e01b24; }

.text-muted {
  color: #929595;
  --icon-color: #929595; }

.text-italic {
  font-style: italic; }

.text-bold {
  font-weight: 700; }

.weight-100 {
  font-weight: 100; }

.weight-200 {
  font-weight: 200; }

.weight-300 {
  font-weight: 300; }

.weight-400 {
  font-weight: 400; }

.weight-500 {
  font-weight: 500; }

.weight-600 {
  font-weight: 600; }

.weight-700 {
  font-weight: 700; }

.weight-800 {
  font-weight: 800; }

.weight-900 {
  font-weight: 900; }

/***************
 * Variables   *
 ***************/
/***************
 * Selections  *
 ***************/
*::selection {
  background-color: #3584e4;
  color: #ffffff; }

/***************
 * Scrollbars  *
 ***************/
*::-webkit-scrollbar {
  width: 8px;
  height: 8px; }

*::-webkit-scrollbar-track {
  background-color: transparent;
  padding: 0 5px; }

*::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: #bbb;
  border: 2px solid transparent;
  border-radius: 5px;
  margin: 0 2px; }

*::-webkit-scrollbar-thumb:hover {
  background-color: #999; }

*::-webkit-scrollbar-thumb:active {
  background-color: #888; }

/* Nice scrollbars */
/***************
 * Utils       *
 ***************/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

.user-select-none {
  user-select: none; }

.fill {
  width: 100%;
  height: 100%; }

.fill-width {
  width: 100%; }

.fill-height {
  height: 100%; }

/***************
 * Base States *
 ***************/
.background {
  color: #2e3436;
  background-color: #f6f5f4; }
  .window-inactive .background {
    text-shadow: none;
    --icon-shadow: none; }

.background-low {
  background-color: #ffffff; }

.background-default {
  background-color: #f6f5f4; }

.background-medium {
  background-color: #f1f0ee; }

.background-high {
  background-color: #e1dedb; }

/***************
 * Layout      *
 ***************/
.separator {
  border-bottom: 1px solid #d8d4d0;
  border-right: 1px solid #d8d4d0;
  min-width: 1px;
  min-height: 1px; }

.Box.horizontal {
  display: flex;
  flex-direction: row; }
  .Box.horizontal > *:not(:last-child) {
    margin-right: 1rem; }
  .Box.horizontal.compact > *:not(:last-child) {
    margin-right: 0; }

.Box.vertical {
  display: flex;
  flex-direction: column; }
  .Box.vertical > *:not(:last-child) {
    margin-bottom: 1rem; }
  .Box.vertical.compact > *:not(:last-child) {
    margin-bottom: 0; }

.Box.inline {
  display: inline-flex; }

.Box.align {
  align-items: center; }

.Box.align-center {
  align-items: center; }

.Box.align-start {
  align-items: flex-start; }

.Box.align-end {
  align-items: flex-end; }

.Box.justify {
  justify-content: center; }

.Box.justify-center {
  justify-content: center; }

.Box.justify-start {
  justify-content: flex-start; }

.Box.justify-end {
  justify-content: flex-end; }

.Box.space-around {
  justify-content: space-around; }

.Box.space-between {
  justify-content: space-between; }

.Box.fill {
  display: inline-flex;
  width: 100%;
  height: 100%; }

.Box.fill-width {
  display: inline-flex;
  width: 100%; }

.Box.fill-height {
  display: inline-flex;
  height: 100%; }

.Box.padded {
  padding: 1em; }

.Box.expand-children > * {
  flex: 1; }

.Box.border {
  border: 1px solid #cdc7c2; }

.Box__fill {
  flex: 1; }

.Box__fill.expand-children > * {
  width: 100%;
  height: 100%; }

.view, .IconView {
  color: black;
  background-color: #ffffff; }
  .view:disabled, .IconView:disabled {
    color: #929595;
    background-color: #f7f6f5; }
  .view.selected:focus, .selected.IconView:focus, .view.selected, .selected.IconView {
    border-radius: 3px; }

.IconView {
  outline: 0 solid transparent;
  outline-offset: 4px; }

.IconView:focus:focus-visible {
  outline-color: rgba(53, 132, 228, 0.5);
  outline-width: 2px;
  outline-offset: -2px; }

.IconView.dnd-active {
  box-shadow: none; }

.IconView > dndtarget.dnd-active {
  border-style: solid;
  border-width: 1px;
  border-color: #185fb4; }

.Flowbox > .Flowbox__child {
  padding: 3px;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .Flowbox > .Flowbox__child {
    outline: 0 solid transparent;
    outline-offset: 4px; }
  .Flowbox > .Flowbox__child:focus:focus-visible {
    outline-color: rgba(53, 132, 228, 0.5);
    outline-width: 2px;
    outline-offset: -2px; }
  .Flowbox > .Flowbox__child.selected {
    outline-color: rgba(255, 255, 255, 0.8); }

.Grid > .Grid__child {
  padding: 3px;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .Grid > .Grid__child {
    outline: 0 solid transparent;
    outline-offset: 4px; }
  .Grid > .Grid__child:focus:focus-visible {
    outline-color: rgba(53, 132, 228, 0.5);
    outline-width: 2px;
    outline-offset: -2px; }
  .Grid > .Grid__child.selected {
    outline-color: rgba(255, 255, 255, 0.8); }
  .Grid > .Grid__child .Grid__box {
    border-spacing: 8px;
    margin: 12px; }

.SelectionArea, .content-view > .SelectionArea, .table > .SelectionArea, .Flowbox > .SelectionArea, .Grid > .SelectionArea {
  border: 1px solid #1b6acb;
  background-color: rgba(27, 106, 203, 0.2); }

/*********
 * Links *
 *********/

.link {
  color: #1b6acb;
  text-decoration: underline;
  cursor: pointer;
  transition: color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 5px; }
  
  .link {
    position: relative;
    outline: none;
    overflow: visible; }
  
  .link::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 2;
    display: inline-block;
    border: 2px solid transparent;
    border-radius: inherit;
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    top: -4px;
    left: -4px;
    width: calc(100% - -4px);
    height: calc(100% - -4px); }
  
  .link:focus:focus-visible {
    outline: none; }
  
  .link:focus:focus-visible::after {
    border: 2px solid rgba(53, 132, 228, 0.5);
    top: -2px;
    left: -2px;
    width: 100%;
    height: 100%; }
  
  .link:not(:disabled):not(.disabled):visited {
    color: #15539e; }
    *.selected .link:not(:disabled):not(.disabled):visited {
      color: #a1bad8; }
  
  .link:not(:disabled):not(.disabled):hover {
    color: #3584e4; }
    *.selected .link:not(:disabled):not(.disabled):hover {
      color: #ebf3fc; }
  
  .link:not(:disabled):not(.disabled):active {
    color: #1b6acb; }
    *.selected .link:not(:disabled):not(.disabled):active {
      color: #d1e1f5; }
  
  .link:disabled {
    color: rgba(115, 115, 115, 0.8); }
  
  .link.selected, *.selected .link {
    color: #d1e1f5; }

/***********
 * Heading *
 **********/
.Heading {
  position: relative; }
  .Heading:hover .Heading__anchor {
    opacity: 0.5; }

.Heading__anchor {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  height: 100%;
  line-height: 100%;
  padding-right: 4px;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2e3436 !important;
  text-decoration: none !important; }

/*****************
 * Labels & Text *
 ****************/
.Label {
  outline: 0 solid transparent;
  outline-offset: 4px; }

.Label:focus:focus-visible {
  outline-color: rgba(53, 132, 228, 0.5);
  outline-width: 2px;
  outline-offset: -2px; }

.Label.mini {
  height: 18px;
  min-height: 18px;
  font-size: 10px;
  --icon-size: 11px; }

.Label.small {
  height: 22px;
  min-height: 22px;
  font-size: 12px;
  --icon-size: 13px; }

.Label.medium {
  height: 28px;
  min-height: 28px;
  font-size: 13.333333px;
  --icon-size: 16px; }

.Label.large {
  height: 36px;
  min-height: 36px;
  font-size: 15px;
  --icon-size: 20px; }

.Label.huge {
  height: 42px;
  min-height: 42px;
  font-size: 18px;
  --icon-size: 23px; }

.Label::selection {
  background-color: #3584e4;
  color: #ffffff; }

.Label.disabled {
  color: #929595; }
  .Button .Label.disabled {
    color: inherit; }

.Label.info {
  color: #3584e4; }
  .Label.info.disabled {
    color: rgba(53, 132, 228, 0.5); }

.Label.success {
  color: #2abb6b; }
  .Label.success.disabled {
    color: rgba(42, 187, 107, 0.5); }

.Label.warning {
  color: #f57900; }
  .Label.warning.disabled {
    color: rgba(245, 121, 0, 0.5); }

.Label.danger {
  color: #cc0000; }
  .Label.danger.disabled {
    color: rgba(204, 0, 0, 0.5); }

.Label.title {
  color: #929595;
  font-weight: 700; }

.Label.align-left {
  text-align: left; }

.Label.align-center {
  text-align: center; }

.Label.align-right {
  text-align: right; }

.Label.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.Label.fill {
  width: 100%;
  height: 100%; }

.Label.fill-width {
  width: 100%; }

.Label.fill-height {
  height: 100%; }

.Text {
  margin: 0; }
  .Text.mini {
    font-size: 12px;
    line-height: 1.4;
    --icon-size: 11px; }
  .Text.small {
    font-size: 14.4px;
    line-height: 1.4;
    --icon-size: 13px; }
  .Text.medium {
    font-size: 15.9999996px;
    line-height: 1.4;
    --icon-size: 16px; }
  .Text.large {
    font-size: 18px;
    line-height: 1.4;
    --icon-size: 20px; }
  .Text.huge {
    font-size: 21.6px;
    line-height: 1.4;
    --icon-size: 23px; }
  .Text.hero {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.4; }

.dim-label, .titlebar:not(.HeaderBar) .subtitle,
.HeaderBar .subtitle, .InputNumber.vertical > .Input__area > input > .Input__area > input::placeholder, .InputNumber:not(.vertical) > .Input__area > input::placeholder,
.Input > .Input__area > input::placeholder, .Label.separator {
  opacity: 0.55;
  text-shadow: none; }

.osd .scale-popup, .app-notification,
.osd {
  color: #eeeeec;
  border: none;
  background-color: rgba(53, 53, 53, 0.7);
  background-clip: padding-box;
  text-shadow: 0 1px black;
  --icon-shadow: 0 1px black; }

/************
 * Alerts   *
 ***********/
.Alert {
  border: 1px solid #cdc7c2;
  border-left-width: 6px;
  border-radius: 5px;
  padding: 8px; }
  .Alert.info {
    color: #2e3436;
    --icon-color: #5787c2;
    background-color: #c4d7ee;
    border-color: #a4c1e6; }
    .Alert.info a {
      color: #1b1f20;
      font-weight: bold; }
    .Alert.info a:not(:disabled):not(.disabled):hover {
      color: #292f30; }
    .Alert.info .Alert__close {
      color: #2e3436;
      outline-color: rgba(255, 255, 255, 0.8);
      border-color: #9cbce3;
      border-bottom-color: #74a1d8;
      background-color: #c4d7ee;
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.07); }
      .Alert.info .Alert__close::before {
        content: ' ';
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
      .Alert.info .Alert__close.hover:not(:disabled):not(.disabled), .Alert.info .Alert__close:not(:disabled):not(.disabled):hover {
        color: #2e3436;
        border-color: #9cbce3;
        border-bottom-color: #74a1d8;
        background-color: #cadbf0;
        box-shadow: inset 0 1px #c0d4ed, 0 1px 2px rgba(0, 0, 0, 0.07); }
        .Alert.info .Alert__close.hover:not(:disabled):not(.disabled)::before, .Alert.info .Alert__close:not(:disabled):not(.disabled):hover::before {
          opacity: 0; }
      .Alert.info .Alert__close.active:not(:disabled):not(.disabled), .Alert.info .Alert__close:not(:disabled):not(.disabled):active {
        color: #2e3436;
        border-color: #9cbce3;
        background-color: #8cb1df;
        box-shadow: inset 0 1px rgba(255, 255, 255, 0);
        text-shadow: none;
        --icon-shadow: none; }
        .Alert.info .Alert__close.active:not(:disabled):not(.disabled)::before, .Alert.info .Alert__close:not(:disabled):not(.disabled):active::before {
          opacity: 0; }
  .Alert.success {
    color: #2e3436;
    --icon-color: #59ac7e;
    background-color: #b4d0c0;
    border-color: #9ac0ab; }
    .Alert.success a {
      color: #1b1f20;
      font-weight: bold; }
    .Alert.success a:not(:disabled):not(.disabled):hover {
      color: #292f30; }
    .Alert.success .Alert__close {
      color: #2e3436;
      outline-color: rgba(255, 255, 255, 0.8);
      border-color: #94bca6;
      border-bottom-color: #75a98c;
      background-color: #b4d0c0;
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); }
      .Alert.success .Alert__close::before {
        content: ' ';
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
      .Alert.success .Alert__close.hover:not(:disabled):not(.disabled), .Alert.success .Alert__close:not(:disabled):not(.disabled):hover {
        color: #2e3436;
        border-color: #94bca6;
        border-bottom-color: #75a98c;
        background-color: #b8d3c4;
        box-shadow: inset 0 1px #b0cebe, 0 1px 2px rgba(0, 0, 0, 0.07); }
        .Alert.success .Alert__close.hover:not(:disabled):not(.disabled)::before, .Alert.success .Alert__close:not(:disabled):not(.disabled):hover::before {
          opacity: 0; }
      .Alert.success .Alert__close.active:not(:disabled):not(.disabled), .Alert.success .Alert__close:not(:disabled):not(.disabled):active {
        color: #2e3436;
        border-color: #94bca6;
        background-color: #88b59c;
        box-shadow: inset 0 1px rgba(255, 255, 255, 0);
        text-shadow: none;
        --icon-shadow: none; }
        .Alert.success .Alert__close.active:not(:disabled):not(.disabled)::before, .Alert.success .Alert__close:not(:disabled):not(.disabled):active::before {
          opacity: 0; }
  .Alert.warning {
    color: #2e3436;
    --icon-color: #d07925;
    background-color: #eed3ba;
    border-color: #e6bf99; }
    .Alert.warning a {
      color: #1b1f20;
      font-weight: bold; }
    .Alert.warning a:not(:disabled):not(.disabled):hover {
      color: #292f30; }
    .Alert.warning .Alert__close {
      color: #2e3436;
      outline-color: rgba(255, 255, 255, 0.8);
      border-color: #e4ba91;
      border-bottom-color: #d9a068;
      background-color: #eed3ba;
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.07); }
      .Alert.warning .Alert__close::before {
        content: ' ';
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
      .Alert.warning .Alert__close.hover:not(:disabled):not(.disabled), .Alert.warning .Alert__close:not(:disabled):not(.disabled):hover {
        color: #2e3436;
        border-color: #e4ba91;
        border-bottom-color: #d9a068;
        background-color: #efd7c0;
        box-shadow: inset 0 1px #edd1b6, 0 1px 2px rgba(0, 0, 0, 0.07); }
        .Alert.warning .Alert__close.hover:not(:disabled):not(.disabled)::before, .Alert.warning .Alert__close:not(:disabled):not(.disabled):hover::before {
          opacity: 0; }
      .Alert.warning .Alert__close.active:not(:disabled):not(.disabled), .Alert.warning .Alert__close:not(:disabled):not(.disabled):active {
        color: #2e3436;
        border-color: #e4ba91;
        background-color: #dfaf81;
        box-shadow: inset 0 1px rgba(255, 255, 255, 0);
        text-shadow: none;
        --icon-shadow: none; }
        .Alert.warning .Alert__close.active:not(:disabled):not(.disabled)::before, .Alert.warning .Alert__close:not(:disabled):not(.disabled):active::before {
          opacity: 0; }
  .Alert.danger {
    color: #2e3436;
    --icon-color: #ad1f1f;
    background-color: #ebadad;
    border-color: #e28d8d; }
    .Alert.danger a {
      color: #1b1f20;
      font-weight: bold; }
    .Alert.danger a:not(:disabled):not(.disabled):hover {
      color: #292f30; }
    .Alert.danger .Alert__close {
      color: #2e3436;
      outline-color: rgba(255, 255, 255, 0.8);
      border-color: #e08585;
      border-bottom-color: #d65c5c;
      background-color: #ebadad;
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); }
      .Alert.danger .Alert__close::before {
        content: ' ';
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
      .Alert.danger .Alert__close.hover:not(:disabled):not(.disabled), .Alert.danger .Alert__close:not(:disabled):not(.disabled):hover {
        color: #2e3436;
        border-color: #e08585;
        border-bottom-color: #d65c5c;
        background-color: #ecb4b4;
        box-shadow: inset 0 1px #eaa9a9, 0 1px 2px rgba(0, 0, 0, 0.07); }
        .Alert.danger .Alert__close.hover:not(:disabled):not(.disabled)::before, .Alert.danger .Alert__close:not(:disabled):not(.disabled):hover::before {
          opacity: 0; }
      .Alert.danger .Alert__close.active:not(:disabled):not(.disabled), .Alert.danger .Alert__close:not(:disabled):not(.disabled):active {
        color: #2e3436;
        border-color: #e08585;
        background-color: #dc7474;
        box-shadow: inset 0 1px rgba(255, 255, 255, 0);
        text-shadow: none;
        --icon-shadow: none; }
        .Alert.danger .Alert__close.active:not(:disabled):not(.disabled)::before, .Alert.danger .Alert__close:not(:disabled):not(.disabled):active::before {
          opacity: 0; }
  .Alert {
    color: #2e3436;
    --icon-color: #323232;
    background-color: #e1dedb;
    border-color: #cecac5; }
    .Alert a {
      color: #1b1f20;
      font-weight: bold; }
    .Alert a:not(:disabled):not(.disabled):hover {
      color: #292f30; }
    .Alert .Alert__close {
      color: #2e3436;
      outline-color: rgba(255, 255, 255, 0.8);
      border-color: #cac5bf;
      border-bottom-color: #b3aba3;
      background-color: #e1dedb;
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.07); }
      .Alert .Alert__close::before {
        content: ' ';
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
      .Alert .Alert__close.hover:not(:disabled):not(.disabled), .Alert .Alert__close:not(:disabled):not(.disabled):hover {
        color: #2e3436;
        border-color: #cac5bf;
        border-bottom-color: #b3aba3;
        background-color: #e4e2df;
        box-shadow: inset 0 1px #dfdbd8, 0 1px 2px rgba(0, 0, 0, 0.07); }
        .Alert .Alert__close.hover:not(:disabled):not(.disabled)::before, .Alert .Alert__close:not(:disabled):not(.disabled):hover::before {
          opacity: 0; }
      .Alert .Alert__close.active:not(:disabled):not(.disabled), .Alert .Alert__close:not(:disabled):not(.disabled):active {
        color: #2e3436;
        border-color: #cac5bf;
        background-color: #c1bab4;
        box-shadow: inset 0 1px rgba(255, 255, 255, 0);
        text-shadow: none;
        --icon-shadow: none; }
        .Alert .Alert__close.active:not(:disabled):not(.disabled)::before, .Alert .Alert__close:not(:disabled):not(.disabled):active::before {
          opacity: 0; }

.Alert__icon {
  margin-top: 3px;
  --icon-size: 1.5em;
  opacity: 0.5; }

.Alert__title {
  font-size: 1.2em;
  margin-bottom: 0.25rem; }

.Alert__message {
  font-size: 1rem; }

/****************
 * Icons        *
 ****************/
.normal-icons {
  --icon-size: 16px; }

.large-icons {
  --icon-size: 32px; }

.Icon {
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-flex; }
  .Icon svg {
    width: auto;
    height: var(--icon-size, 16px); }
  .Icon:not(.colored) svg * {
    fill: var(--icon-color, unset) !important; }
  *:disabled .Icon:not(.colored):not(.increase-specificity), .disabled .Icon:not(.colored):not(.increase-specificity) {
    --icon-color: rgba(0, 0, 0, 0.3); }
  *:disabled .Icon.colored:not(.increase-specificity), .disabled .Icon.colored:not(.increase-specificity) {
    opacity: 0.3; }
  .Icon svg {
    transform: scale(0.8); }

/*********************
 * Spinner Animation *
 *********************/
@keyframes spin {
  to {
    transform: rotate(1turn); } }

.Spinner {
  opacity: 1;
  animation: spin 1s linear infinite;
  display: inline-block;
  width: var(--icon-size, 16px);
  height: var(--icon-size, 16px); }
  .Spinner.disabled {
    opacity: 0.5; }
  .Spinner.hidden {
    opacity: 0; }

/****************
 * Text Entries *
 ****************/
@keyframes move_along_width {
  0% {
    left: var(--input-padding); }
  50% {
    left: calc(100% - var(--progress-indeterminate-width) - var(--input-padding, 8px)); }
  100% {
    left: var(--input-padding); } }

.InputNumber.vertical > .Input__area > input, .InputNumber:not(.vertical),
.Input {
  --input-padding: 8px;
  --progress-indeterminate-width: 50px; }
  .InputNumber.vertical > .Input__area > input, .InputNumber:not(.vertical),
  .Input {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid;
    border-radius: 5px;
    border-spacing: 6px;
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: black;
    border-color: #cdc7c2;
    background-color: #ffffff;
    height: 28px;
    min-height: 28px;
    padding-left: var(--input-padding);
    padding-right: var(--input-padding); }
    .InputNumber.vertical > .Input__area > input, .InputNumber:not(.vertical),
    .Input {
      position: relative;
      outline: none;
      overflow: visible; }
    .InputNumber.vertical > .Input__area > input::after, .InputNumber:not(.vertical)::after,
    .Input::after {
      content: '';
      position: absolute;
      pointer-events: none;
      z-index: 2;
      display: inline-block;
      border: 2px solid transparent;
      border-radius: inherit;
      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      top: -4px;
      left: -4px;
      width: calc(100% - -4px);
      height: calc(100% - -4px); }
    .InputNumber.vertical > .Input__area > input:focus-within, .InputNumber:focus-within:not(.vertical),
    .Input:focus-within {
      outline: none; }
    .InputNumber.vertical > .Input__area > input:focus-within::after, .InputNumber:focus-within:not(.vertical)::after,
    .Input:focus-within::after {
      border: 2px solid rgba(53, 132, 228, 0.5);
      top: -2px;
      left: -2px;
      width: 100%;
      height: 100%; }
    .InputNumber.vertical > .Input__area > input.mini, .mini.InputNumber:not(.vertical),
    .Input.mini {
      height: 18px;
      min-height: 18px;
      --input-padding: 4.5px;
      font-size: 10px;
      --icon-size: 11px; }
      .InputNumber.vertical > .Input__area > input.mini > .Input__area, .mini.InputNumber:not(.vertical) > .Input__area,
      .Input.mini > .Input__area {
        line-height: 18px; }
    .InputNumber.vertical > .Input__area > input.small, .small.InputNumber:not(.vertical),
    .Input.small {
      height: 22px;
      min-height: 22px;
      --input-padding: 5.5px;
      font-size: 12px;
      --icon-size: 13px; }
      .InputNumber.vertical > .Input__area > input.small > .Input__area, .small.InputNumber:not(.vertical) > .Input__area,
      .Input.small > .Input__area {
        line-height: 22px; }
    .InputNumber.vertical > .Input__area > input.medium, .medium.InputNumber:not(.vertical),
    .Input.medium {
      height: 28px;
      min-height: 28px;
      --input-padding: 7px;
      font-size: 13.333333px;
      --icon-size: 16px; }
      .InputNumber.vertical > .Input__area > input.medium > .Input__area, .medium.InputNumber:not(.vertical) > .Input__area,
      .Input.medium > .Input__area {
        line-height: 28px; }
    .InputNumber.vertical > .Input__area > input.large, .large.InputNumber:not(.vertical),
    .Input.large {
      height: 36px;
      min-height: 36px;
      --input-padding: 9px;
      font-size: 15px;
      --icon-size: 20px; }
      .InputNumber.vertical > .Input__area > input.large > .Input__area, .large.InputNumber:not(.vertical) > .Input__area,
      .Input.large > .Input__area {
        line-height: 36px; }
    .InputNumber.vertical > .Input__area > input.huge, .huge.InputNumber:not(.vertical),
    .Input.huge {
      height: 42px;
      min-height: 42px;
      --input-padding: 10.5px;
      font-size: 18px;
      --icon-size: 23px; }
      .InputNumber.vertical > .Input__area > input.huge > .Input__area, .huge.InputNumber:not(.vertical) > .Input__area,
      .Input.huge > .Input__area {
        line-height: 42px; }
    .InputNumber.vertical > .Input__area > input > .Input__area, .InputNumber:not(.vertical) > .Input__area,
    .Input > .Input__area {
      position: relative;
      flex: 1;
      height: 100%;
      overflow: hidden; }
      .InputNumber.vertical > .Input__area > input > .Input__area > input, .InputNumber:not(.vertical) > .Input__area > input,
      .Input > .Input__area > input {
        width: 100%;
        height: 100%;
        border: none;
        color: inherit;
        background: none;
        font-size: inherit; }
        .InputNumber.vertical > .Input__area > input > .Input__area > input:focus, .InputNumber:not(.vertical) > .Input__area > input:focus,
        .Input > .Input__area > input:focus {
          outline: none; }
        .InputNumber.vertical > .Input__area > input > .Input__area > input::placeholder, .InputNumber:not(.vertical) > .Input__area > input::placeholder,
        .Input > .Input__area > input::placeholder {
          user-select: none; }
      .InputNumber.vertical > .Input__area > input > .Input__area > .Input__children, .InputNumber:not(.vertical) > .Input__area > .Input__children,
      .Input > .Input__area > .Input__children {
        position: absolute;
        pointer-events: none;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
      .InputNumber.vertical > .Input__area > input > .Input__area > input:focus + .Input__children, .InputNumber:not(.vertical) > .Input__area > input:focus + .Input__children,
      .Input > .Input__area > input:focus + .Input__children {
        opacity: 0.5; }
      .InputNumber.vertical > .Input__area > input > .Input__area > input:not(.empty) + .Input__children, .InputNumber:not(.vertical) > .Input__area > input:not(.empty) + .Input__children,
      .Input > .Input__area > input:not(.empty) + .Input__children {
        opacity: 0; }
    .InputNumber.vertical > .Input__area > input .Input__left, .InputNumber:not(.vertical) .Input__left,
    .InputNumber.vertical > .Input__area > input .Input__right,
    .InputNumber:not(.vertical) .Input__right,
    .Input .Input__left,
    .Input .Input__right {
      display: flex;
      justify-content: center;
      align-items: center; }
    .InputNumber.vertical > .Input__area > input .Input__left, .InputNumber:not(.vertical) .Input__left,
    .Input .Input__left {
      margin-right: 6px; }
    .InputNumber.vertical > .Input__area > input .Input__right, .InputNumber:not(.vertical) .Input__right,
    .Input .Input__right {
      margin: 0;
      margin-left: 6px;
      padding: 0; }
    .InputNumber.vertical > .Input__area > input .Input__left.Button, .InputNumber:not(.vertical) .Input__left.Button,
    .InputNumber.vertical > .Input__area > input .Input__right.Button,
    .InputNumber:not(.vertical) .Input__right.Button,
    .Input .Input__left.Button,
    .Input .Input__right.Button {
      opacity: 0.8;
      min-width: unset;
      min-height: unset;
      height: min-content; }
    .InputNumber.vertical > .Input__area > input.flat, .flat.InputNumber:not(.vertical),
    .Input.flat:focus-within, .window-inactive .Input.flat,
    .Input.flat:disabled, .window-inactive .Input.flat:disabled,
    .Input.flat {
      min-height: 0;
      padding: 2px;
      background-color: transparent;
      border-color: transparent;
      border-radius: 0; }
    .InputNumber.vertical > .Input__area > input:focus-within > .Input__area > input::placeholder, .InputNumber:focus-within:not(.vertical) > .Input__area > input::placeholder,
    .Input:focus-within > .Input__area > input::placeholder {
      opacity: 0;
      /* We hide placeholders on focus */ }
    .InputNumber.vertical > .Input__area > input:disabled, .InputNumber:disabled:not(.vertical), .InputNumber.vertical > .Input__area > input.disabled, .disabled.InputNumber:not(.vertical),
    .Input:disabled,
    .Input.disabled {
      color: #929595;
      border-color: #cdc7c2;
      background-color: #f7f6f5;
      box-shadow: none; }
    .InputNumber.vertical > .Input__area > input.error, .error.InputNumber:not(.vertical),
    .Input.error {
      border-color: #cc0000; }
      .InputNumber.vertical > .Input__area > input.error, .error.InputNumber:not(.vertical),
      .Input.error {
        position: relative;
        outline: none;
        overflow: visible; }
      .InputNumber.vertical > .Input__area > input.error::after, .error.InputNumber:not(.vertical)::after,
      .Input.error::after {
        content: '';
        position: absolute;
        pointer-events: none;
        z-index: 2;
        display: inline-block;
        border: 2px solid transparent;
        border-radius: inherit;
        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        top: -4px;
        left: -4px;
        width: calc(100% - -4px);
        height: calc(100% - -4px); }
      .InputNumber.vertical > .Input__area > input.error:focus-within, .error.InputNumber:focus-within:not(.vertical),
      .Input.error:focus-within {
        outline: none; }
      .InputNumber.vertical > .Input__area > input.error:focus-within::after, .error.InputNumber:focus-within:not(.vertical)::after,
      .Input.error:focus-within::after {
        border: 2px solid rgba(204, 0, 0, 0.5);
        top: -2px;
        left: -2px;
        width: 100%;
        height: 100%; }
      .InputNumber.vertical > .Input__area > input.error input, .error.InputNumber:not(.vertical) input,
      .Input.error input {
        color: #ac0a0b; }
        .InputNumber.vertical > .Input__area > input.error input::selection, .error.InputNumber:not(.vertical) input::selection,
        .Input.error input::selection {
          background-color: #cc0000; }
    .InputNumber.vertical > .Input__area > input.warning, .warning.InputNumber:not(.vertical),
    .Input.warning {
      border-color: #f57900; }
      .InputNumber.vertical > .Input__area > input.warning, .warning.InputNumber:not(.vertical),
      .Input.warning {
        position: relative;
        outline: none;
        overflow: visible; }
      .InputNumber.vertical > .Input__area > input.warning::after, .warning.InputNumber:not(.vertical)::after,
      .Input.warning::after {
        content: '';
        position: absolute;
        pointer-events: none;
        z-index: 2;
        display: inline-block;
        border: 2px solid transparent;
        border-radius: inherit;
        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        top: -4px;
        left: -4px;
        width: calc(100% - -4px);
        height: calc(100% - -4px); }
      .InputNumber.vertical > .Input__area > input.warning:focus-within, .warning.InputNumber:focus-within:not(.vertical),
      .Input.warning:focus-within {
        outline: none; }
      .InputNumber.vertical > .Input__area > input.warning:focus-within::after, .warning.InputNumber:focus-within:not(.vertical)::after,
      .Input.warning:focus-within::after {
        border: 2px solid rgba(245, 121, 0, 0.5);
        top: -2px;
        left: -2px;
        width: 100%;
        height: 100%; }
      .InputNumber.vertical > .Input__area > input.warning input, .warning.InputNumber:not(.vertical) input,
      .Input.warning input {
        color: #cd6b0b; }
        .InputNumber.vertical > .Input__area > input.warning input::selection, .warning.InputNumber:not(.vertical) input::selection,
        .Input.warning input::selection {
          background-color: #f57900; }
    .InputNumber.vertical > .Input__area > input *:not(.InputNumber__button) .Icon, .InputNumber:not(.vertical) *:not(.InputNumber__button) .Icon,
    .Input *:not(.InputNumber__button) .Icon {
      --icon-color: #585d5e; }
      .InputNumber.vertical > .Input__area > input *:not(.InputNumber__button) .Icon:hover, .InputNumber:not(.vertical) *:not(.InputNumber__button) .Icon:hover,
      .Input *:not(.InputNumber__button) .Icon:hover {
        --icon-color: #2e3436; }
      .InputNumber.vertical > .Input__area > input *:not(.InputNumber__button) .Icon:active, .InputNumber:not(.vertical) *:not(.InputNumber__button) .Icon:active,
      .Input *:not(.InputNumber__button) .Icon:active {
        --icon-color: #3584e4; }
    .dnd-active .InputNumber.vertical > .Input__area > input, .dnd-active .InputNumber:not(.vertical), .dnd-active .Input:focus-within, .dnd-active .Input {
      border-color: #2ec27e;
      box-shadow: inset 0 0 0 1px #2ec27e; }
    .osd .InputNumber.vertical > .Input__area > input, .osd .InputNumber:not(.vertical), .osd .Input {
      color: white;
      border-color: rgba(0, 0, 0, 0.7);
      background-color: rgba(0, 0, 0, 0.5);
      background-clip: padding-box;
      box-shadow: none;
      text-shadow: 0 1px black;
      --icon-shadow: 0 1px black; }
      .osd .InputNumber.vertical > .Input__area > input:focus-within, .osd .InputNumber:focus-within:not(.vertical), .osd .Input:focus-within {
        color: white;
        border-color: #3584e4;
        background-color: rgba(0, 0, 0, 0.5);
        background-clip: padding-box;
        text-shadow: 0 1px black;
        --icon-shadow: 0 1px black; }
      .osd .InputNumber.vertical > .Input__area > input:disabled, .osd .InputNumber:disabled:not(.vertical), .osd .Input:disabled {
        color: #919190;
        border-color: rgba(0, 0, 0, 0.7);
        background-color: rgba(71, 71, 71, 0.5);
        background-clip: padding-box;
        box-shadow: none;
        text-shadow: none;
        --icon-shadow: none; }
  .InputNumber.vertical > .Input__area > input .Input__progress, .InputNumber:not(.vertical) .Input__progress,
  .Input .Input__progress {
    position: absolute;
    display: inline-block;
    pointer-events: none;
    width: calc(100% - 2 * var(--input-padding, 8px));
    height: calc(100% - 1px);
    top: 0px;
    left: var(--input-padding); }
    .InputNumber.vertical > .Input__area > input .Input__progress .Input__progress__bar, .InputNumber:not(.vertical) .Input__progress .Input__progress__bar,
    .Input .Input__progress .Input__progress__bar {
      display: inline-block;
      width: 100%;
      height: 100%;
      border-width: 0 0 2px;
      border-color: #3584e4;
      border-style: solid; }
    .InputNumber.vertical > .Input__area > input .Input__progress.indeterminate, .InputNumber:not(.vertical) .Input__progress.indeterminate,
    .Input .Input__progress.indeterminate {
      height: calc(100% - 1px);
      width: var(--progress-indeterminate-width);
      animation: move_along_width 2.5s infinite; }
  .InputNumber.vertical > .Input__area.linked:not(.vertical) > input:not(:first-child), .linked:not(.vertical) > .InputNumber:not(:first-child):not(.vertical), .linked:not(.vertical) > .Input:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
  .InputNumber.vertical > .Input__area.linked:not(.vertical) > input:not(:last-child), .linked:not(.vertical) > .InputNumber:not(:last-child):not(.vertical), .linked:not(.vertical) > .Input:not(:last-child) {
    border-right-style: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .InputNumber.vertical > .Input__area.linked.vertical > input:not(:first-child), .linked.vertical > .InputNumber:not(:first-child):not(.vertical), .linked.vertical > .Input:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  .InputNumber.vertical > .Input__area.linked.vertical > input:not(:last-child), .linked.vertical > .InputNumber:not(:last-child):not(.vertical), .linked.vertical > .Input:not(:last-child) {
    border-bottom-style: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
  .InputNumber.vertical > .Input__area.linked.vertical > input:not(:disabled) + entry:not(:disabled), .linked.vertical > .InputNumber:not(:disabled):not(.vertical) + entry:not(:disabled), .InputNumber.vertical > .Input__area.linked.vertical > input:not(:disabled) + input:not(:disabled), .InputNumber.vertical > .Input__area.linked.vertical > .InputNumber:not(:disabled):not(.vertical) + input:not(:disabled), .InputNumber.vertical > .Input__area.linked.vertical > input:not(:disabled) + .InputNumber:not(:disabled):not(.vertical), .linked.vertical > .InputNumber:not(:disabled):not(.vertical) + .InputNumber:not(:disabled):not(.vertical), .linked.vertical > .Input:not(:disabled) + entry:not(:disabled), .InputNumber.vertical > .Input__area.linked.vertical > .Input:not(:disabled) + input:not(:disabled), .linked.vertical > .Input:not(:disabled) + .InputNumber:not(:disabled):not(.vertical) {
    border-top-color: #f0eeed; }
  .InputNumber.vertical > .Input__area.linked.vertical > input:disabled + input:disabled, .InputNumber.vertical > .Input__area.linked.vertical > .InputNumber:disabled:not(.vertical) + input:disabled, .InputNumber.vertical > .Input__area.linked.vertical > input:disabled + .InputNumber:disabled:not(.vertical), .linked.vertical > .InputNumber:disabled:not(.vertical) + .InputNumber:disabled:not(.vertical), .InputNumber.vertical > .Input__area.linked.vertical > input:disabled + entry:disabled, .linked.vertical > .InputNumber:disabled:not(.vertical) + entry:disabled, .InputNumber.vertical > .Input__area.linked.vertical > .Input:disabled + input:disabled, .linked.vertical > .Input:disabled + .InputNumber:disabled:not(.vertical), .linked.vertical > .Input:disabled + entry:disabled {
    border-top-color: #f0eeed; }
  .InputNumber.vertical > .Input__area.linked.vertical > input + input.dnd-active:not(:only-child), .InputNumber.vertical > .Input__area.linked.vertical > .InputNumber:not(.vertical) + input.dnd-active:not(:only-child), .InputNumber.vertical > .Input__area.linked.vertical > input + .dnd-active.InputNumber:not(:only-child):not(.vertical), .linked.vertical > .InputNumber:not(.vertical) + .dnd-active.InputNumber:not(:only-child):not(.vertical),
  .InputNumber.vertical > .Input__area.linked.vertical > input + entry.dnd-active:not(:only-child),
  .linked.vertical > .InputNumber:not(.vertical) + entry.dnd-active:not(:only-child), .InputNumber.vertical > .Input__area.linked.vertical > .Input + input.dnd-active:not(:only-child), .linked.vertical > .Input + .dnd-active.InputNumber:not(:only-child):not(.vertical),
  .linked.vertical > .Input + entry.dnd-active:not(:only-child) {
    border-top-color: #2ec27e; }
  .InputNumber.vertical > .Input__area.linked.vertical > input.dnd-active:not(:only-child) + input, .InputNumber.vertical > .Input__area.linked.vertical > .dnd-active.InputNumber:not(:only-child):not(.vertical) + input, .InputNumber.vertical > .Input__area.linked.vertical > input.dnd-active:not(:only-child) + .InputNumber:not(.vertical), .linked.vertical > .dnd-active.InputNumber:not(:only-child):not(.vertical) + .InputNumber:not(.vertical),
  .InputNumber.vertical > .Input__area.linked.vertical > input.dnd-active:not(:only-child) + entry,
  .linked.vertical > .dnd-active.InputNumber:not(:only-child):not(.vertical) + entry,
  .InputNumber.vertical > .Input__area.linked.vertical > input.dnd-active:not(:only-child) + .Input,
  .linked.vertical > .dnd-active.InputNumber:not(:only-child):not(.vertical) + .Input,
  .InputNumber.vertical > .Input__area.linked.vertical > input.dnd-active:not(:only-child) + .Button,
  .linked.vertical > .dnd-active.InputNumber:not(:only-child):not(.vertical) + .Button,
  .InputNumber.vertical > .Input__area.linked.vertical > input.dnd-active:not(:only-child) + menubutton > .Button,
  .linked.vertical > .dnd-active.InputNumber:not(:only-child):not(.vertical) + menubutton > .Button,
  .InputNumber.vertical > .Input__area.linked.vertical > input.dnd-active:not(:only-child) + .Dropdown > .Button,
  .linked.vertical > .dnd-active.InputNumber:not(:only-child):not(.vertical) + .Dropdown > .Button,
  .InputNumber.vertical > .Input__area.linked.vertical > input.dnd-active:not(:only-child) + colorbutton > .Button,
  .linked.vertical > .dnd-active.InputNumber:not(:only-child):not(.vertical) + colorbutton > .Button,
  .InputNumber.vertical > .Input__area.linked.vertical > input.dnd-active:not(:only-child) + fontbutton > .Button,
  .linked.vertical > .dnd-active.InputNumber:not(:only-child):not(.vertical) + fontbutton > .Button,
  .InputNumber.vertical > .Input__area.linked.vertical > input.dnd-active:not(:only-child) + filechooserbutton > .Button,
  .linked.vertical > .dnd-active.InputNumber:not(:only-child):not(.vertical) + filechooserbutton > .Button,
  .InputNumber.vertical > .Input__area.linked.vertical > input.dnd-active:not(:only-child) + combobox > box > .Button.combo,
  .linked.vertical > .dnd-active.InputNumber:not(:only-child):not(.vertical) + combobox > box > .Button.combo, .InputNumber.vertical > .Input__area.linked.vertical > .Input.dnd-active:not(:only-child) + input, .linked.vertical > .Input.dnd-active:not(:only-child) + .InputNumber:not(.vertical),
  .linked.vertical > .Input.dnd-active:not(:only-child) + entry,
  .linked.vertical > .Input.dnd-active:not(:only-child) + .Input,
  .linked.vertical > .Input.dnd-active:not(:only-child) + .Button,
  .linked.vertical > .Input.dnd-active:not(:only-child) + menubutton > .Button,
  .linked.vertical > .Input.dnd-active:not(:only-child) + .Dropdown > .Button,
  .linked.vertical > .Input.dnd-active:not(:only-child) + colorbutton > .Button,
  .linked.vertical > .Input.dnd-active:not(:only-child) + fontbutton > .Button,
  .linked.vertical > .Input.dnd-active:not(:only-child) + filechooserbutton > .Button,
  .linked.vertical > .Input.dnd-active:not(:only-child) + combobox > box > .Button.combo {
    border-top-color: #2ec27e; }

.InputGroup {
  display: flex;
  flex-direction: row; }

.table .Input:focus-within:dir(rtl), .table .Input:focus-within:dir(ltr) {
  background-color: #ffffff;
  transition-property: color, background; }

.table .Input.flat, .table .Input {
  border-radius: 0;
  background-image: none;
  background-color: #ffffff; }
  .table .Input.flat:focus-within, .table .Input:focus-within {
    border-color: #3584e4; }

.TextArea {
  display: inline-block;
  padding: 0;
  height: min-content !important;
  width: min-content !important; }
  .TextArea > textarea {
    border: none;
    background: transparent;
    padding: 0 0.5em;
    line-height: 1.5em; }
    .TextArea > textarea:focus {
      outline: none; }

/*******************
 * Editable Labels *
 *******************/
editablelabel > stack > text {
  color: black;
  border-color: #cdc7c2;
  background-color: #ffffff; }

/***********
 * Buttons *
 ***********/
@keyframes needs_attention {
  from {
    background-image: radial-gradient(farthest-side, #3584e4 0%, rgba(53, 132, 228, 0) 0%); }
  to {
    background-image: radial-gradient(farthest-side, #3584e4 95%, rgba(53, 132, 228, 0)); } }

.Notebook .Notebook__arrow, .control-buttons button,
.Button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  border-radius: 5px;
  transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  height: 28px;
  min-height: 28px;
  min-width: 16px;
  padding: 4px 9px;
  user-select: none;
  color: #2e3436;
  outline-color: rgba(53, 132, 228, 0.5);
  border-color: #cdc7c2;
  border-bottom-color: #bfb8b1;
  background-color: #f6f5f4;
  box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); }
  .Notebook .mini.Notebook__arrow, .control-buttons button.mini,
  .Button.mini {
    height: 18px;
    min-height: 18px;
    min-width: 18px;
    font-size: 10px;
    --icon-size: 11px; }
  .Notebook .small.Notebook__arrow, .control-buttons button.small,
  .Button.small {
    height: 22px;
    min-height: 22px;
    min-width: 22px;
    font-size: 12px;
    --icon-size: 13px; }
  .Notebook .medium.Notebook__arrow, .control-buttons button.medium,
  .Button.medium {
    height: 28px;
    min-height: 28px;
    min-width: 28px;
    font-size: 13.333333px;
    --icon-size: 16px; }
  .Notebook .large.Notebook__arrow, .control-buttons button.large,
  .Button.large {
    height: 36px;
    min-height: 36px;
    min-width: 36px;
    font-size: 15px;
    --icon-size: 20px; }
  .Notebook .huge.Notebook__arrow, .control-buttons button.huge,
  .Button.huge {
    height: 42px;
    min-height: 42px;
    min-width: 42px;
    font-size: 18px;
    --icon-size: 23px; }
  .Notebook .Notebook__arrow, .control-buttons button, .Notebook .Notebook__arrow > .Label, .control-buttons button > .Label,
  .Button,
  .Button > .Label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .Notebook .Notebook__arrow::before, .control-buttons button::before,
  .Button::before {
    content: ' ';
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .Notebook .Notebook__arrow, .control-buttons button,
  .Button {
    position: relative;
    outline: none;
    overflow: visible; }
  .Notebook .Notebook__arrow::after, .control-buttons button::after,
  .Button::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 2;
    display: inline-block;
    border: 2px solid transparent;
    border-radius: inherit;
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    top: -4px;
    left: -4px;
    width: calc(100% - -4px);
    height: calc(100% - -4px); }
  .Notebook .Notebook__arrow:focus:focus-visible, .control-buttons button:focus:focus-visible,
  .Button:focus:focus-visible {
    outline: none; }
  .Notebook .Notebook__arrow:focus:focus-visible::after, .control-buttons button:focus:focus-visible::after,
  .Button:focus:focus-visible::after {
    border: 2px solid rgba(53, 132, 228, 0.5);
    top: -2px;
    left: -2px;
    width: 100%;
    height: 100%; }
  .Notebook .Notebook__arrow.hover:not(:disabled):not(.disabled), .control-buttons button.hover:not(:disabled):not(.disabled), .Notebook .Notebook__arrow:not(:disabled):not(.disabled):hover, .control-buttons button:not(:disabled):not(.disabled):hover,
  .Button.hover:not(:disabled):not(.disabled),
  .Button:not(:disabled):not(.disabled):hover {
    color: #2e3436;
    border-color: #cdc7c2;
    border-bottom-color: #bfb8b1;
    background-color: #f9f9f8;
    box-shadow: inset 0 1px #f4f2f1, 0 1px 2px rgba(0, 0, 0, 0.07);
    -gtk-icon-filter: brightness(1.2); }
    .Notebook .Notebook__arrow.hover:not(:disabled):not(.disabled)::before, .control-buttons button.hover:not(:disabled):not(.disabled)::before, .Notebook .Notebook__arrow:not(:disabled):not(.disabled):hover::before, .control-buttons button:not(:disabled):not(.disabled):hover::before,
    .Button.hover:not(:disabled):not(.disabled)::before,
    .Button:not(:disabled):not(.disabled):hover::before {
      opacity: 0; }
  .Notebook .Notebook__arrow.active:not(:disabled):not(.disabled), .control-buttons button.active:not(:disabled):not(.disabled), .Notebook .Notebook__arrow:not(:disabled):not(.disabled):active, .control-buttons button:not(:disa