/*
 * The 'Circe-Extras' font contains only a few glyphs. At
 * the time of writing it consists of U+002A ASTERISK (*)
 * symbol only. All other most commons symbols come from the
 * 'Circe' font. Use both fonts with the following CSS
 * instruction:
 *
 * font-family: 'Circe-Extras', 'Circe', sans-serif;
 */

@font-face {
  font-family: 'Circe';
  font-weight: normal;
  src: url(/66e0dd1a879bd27b7239.woff) format('woff');
}

@font-face {
  font-family: 'Circe';
  font-weight: bold;
  src: url(/191201c40a37fe620480.woff) format('woff');
}

@font-face {
  font-family: 'Circe-Extras';
  font-weight: normal;
  unicode-range: U+002A; /* ASTERISK (*) */
  src: url(/2eb61d1a465223e800d6.woff) format('woff');
}

@font-face {
  font-family: 'Circe-Extras';
  font-weight: bold;
  unicode-range: U+002A; /* ASTERISK (*) */
  src: url(/a3038a2970d2075c2bc1.woff) format('woff');
}

.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}

.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

html,
body,
ul,
li,
div,
p,
span {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Circe-Extras', 'Circe', sans-serif;
  font-size: 16px;
  color: #444;
  font-variant: normal;
  font-feature-settings: unset;
}

body a,
body a:hover,
body a:focus,
body a:visited {
  text-decoration: none;
  color: #06007f;
}

::-webkit-scrollbar {
  background: #fff;
  height: 0.5rem;
  width: 0.5rem;
}

::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border-radius: 0.25rem;
}

li {
  list-style-type: none;
}

textarea {
  font-family: 'Circe-Extras', 'Circe', sans-serif;
  color: #444;
}

#root {
  height: 100vh;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

.react-grid-placeholder {
  background-color: gray !important;
  border-radius: 10px;
}

.react-resizable-handle {
  background: none !important;
}

.react-resizable-handle:after {
  content: none !important;
}

body {
  background-color: #fff;
  overflow: hidden;
}

#root {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.g-not-connected {
  background-image: url(/5f324e64eeb8ba8b9c74.svg);
  background-position: 50% calc(50% + 45px);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  gap: 20px;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-block: 20px;
  position: fixed;
  user-select: none;
  z-index: 2147483647;
}

.g-not-connected-logo {
  background-image: url(/f71cb37e738735aec10e.svg);
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  height: 45px;
}

.g-not-connected-body {
  margin: auto;
  max-width: 42ch;
  padding-inline: 20px;
  text-align: center;
}

.g-not-connected-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 22px;
  margin-bottom: 6px;
}

.g-not-connected-subtitle {
  font-size: 14px;
  font-weight: normal;
  line-height: 22px;
}

/*

@media (pointer: fine) {
  .g-hide-on-cursor-fine {
    display: none;
  }
}

@media (pointer: coarse) {
  .g-hide-on-cursor-coarse {
    display: none;
  }
}

*/

.g-hide-on-cursor-fine {
  display: none;
}