.effected {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms; }

.status-200, .running {
  background-color: #d3f7c9;
  color: #22650f;
  border: 1px solid #3fbe1c; }
  .status-200:hover, .running:hover {
    background-color: #c1f4b3;
    text-decoration: none; }
  .status-200 .animate-pulse, .running .animate-pulse {
    background-color: #3fbe1c; }

.status-204, .idle {
  background-color: #cbe6f7;
  color: #104567;
  border: 1px solid #1d81bf; }
  .status-204:hover, .idle:hover {
    background-color: #b5dbf4;
    text-decoration: none; }
  .status-204 .animate-pulse, .idle .animate-pulse {
    background-color: #1d81bf; }

.status-304, .new {
  background-color: #cbe6f7;
  color: #020a0e;
  border: 1px solid #104567; }
  .status-304:hover, .new:hover {
    background-color: #b5dbf4;
    text-decoration: none; }
  .status-304 .animate-pulse, .new .animate-pulse {
    background-color: #1d81bf; }

.status-404, .offline {
  background-color: #fff7c7;
  color: #7b6900;
  border: 1px solid #e1c000; }
  .status-404:hover, .offline:hover {
    background-color: #fff3ae;
    text-decoration: none; }
  .status-404 .animate-pulse, .offline .animate-pulse {
    background-color: #e1c000; }

.status-503, .status-502, .status-500, .unavailable, .error {
  background-color: #fcc9bc;
  color: #681905;
  border: 1px solid #c93009; }
  .status-503:hover, .status-502:hover, .status-500:hover, .unavailable:hover, .error:hover {
    background-color: #fbb5a4;
    text-decoration: none; }
  .status-503 .animate-pulse, .status-502 .animate-pulse, .status-500 .animate-pulse, .unavailable .animate-pulse, .error .animate-pulse {
    background-color: #c93009; }

.flash {
  color: #fff;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms; }
  .flash.detail {
    color: limegreen; }

.clock {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0.2rem;
  padding: 0.3rem;
  font-family: 'Monaco', monospace;
  font-size: 0.8rem;
  color: gainsboro;
  font-weight: normal;
  margin-bottom: 2em; }
.field-yaml textarea{
  background-color: #ebebeb;
  color: #333;
  font-family: monospace;
  padding: 1em;
  min-height: 80em;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

.page.active {
  @apply text-blue-400;
}
/* Minimal Chosen tweaks for dark navigation */
.chosen-container .chosen-single {
  background: #0f172a;
  border: 1px solid #475569;
  color: #e2e8f0;
  height: 30px;
  line-height: 30px;
}

.chosen-container-active .chosen-single,
.chosen-container .chosen-single:hover {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px #22c55e66;
}

.chosen-container .chosen-drop {
  background: #0f172a;
  border: 1px solid #475569;
}

.chosen-container .chosen-results li.highlighted {
  background: #22c55e;
  color: #0f172a;
}

.chosen-container-single .chosen-search input[type="text"] {
  background: #0f172a;
  border: 1px solid #475569;
  color: #e2e8f0;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */