/**
 * DO NOT USE
 * This CSS is meant for SlickGrid demo website ONLY, do not use, there is no need to import it.
 */
$alpine-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default;

body {
  background: #fff;
  padding: 0;
  margin: 8px;
  font-family: var(--alpine-font-family, $alpine-font-family);
  font-size: 13px;
}

h2 {
  font-size: 13px;
  border-bottom: 1px dotted gray;
  .sgi {
    display: inline-flex;
  }
  &.title {
    font-size: 1.25rem;
    border: 0;
  }
}

code {
  color: #f96079;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
}

ul {
  margin-left: 0;
  padding-left: 20px;
  cursor: default;
}

.options-panel {
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid silver;
  background: #f0f0f0;
  padding: 4px;
  margin-bottom: 20px;
  width: 350px;
  position: absolute;
  top: 0px;
  left: 700px;

  button, input, textarea {
    font-family: var(--alpine-font-family, $alpine-font-family);
    font-size: 12px;
  }
}

button.btn {
  cursor: pointer;
  background-color: white;
  border: 1px solid #9a9a9a;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  gap: 4px;
}
.rotate-90 {
  transform: rotate(90deg);
}
.rotate-180 {
  transform: rotate(180deg);
}
.rotate-270 {
  transform: rotate(270deg);
}
.text-italic {
  font-style: italic;
}