/* Application styles */

/* Spinner styles */
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.turbo-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  /* Gray overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* Ensure it is on top of other elements */
}

.turbo-progress-bar::before {
  content: "";
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  /* Light gray */
  border-top: 4px solid #4f46e5;
  /* Blue */
  border-radius: 50%;
  animation: spinner 1s linear infinite;
}

.markdown {

  h1,
  h2,
  h3 {
    margin: 1.5em 0 0.5em;
  }

  p {
    margin: 1em 0;
    line-height: 1.6;
  }

  ul,
  ol {
    padding-left: 2em;
    margin: 1em 0;
  }

  code {
    background: #f5f5f5;
    padding: 0.2em 0.4em;
  }

  pre {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 1em;
    overflow: auto;

    code {
      background: none;
      padding: 0;
    }
  }

  blockquote {
    border-left: 4px solid #ddd;
    padding-left: 1em;
    color: #666;
  }

  table {
    border-collapse: collapse;

    th,
    td {
      padding: 8px;
      border: 1px solid #ddd;
    }

    th {
      background-color: #f5f5f5;
    }
  }

  a {
    color: #4f46e5;
    text-decoration: underline;
  }
}

.status_spinner {
  transform-origin: center;
  animation: spinner_keyframes .6s linear infinite
}

@keyframes spinner_keyframes {
  100% {
    transform: rotate(360deg)
  }
}