@keyframes rainbow-border {
  0% {
    border-color: red;
  }

  14% {
    border-color: orange;
  }

  28% {
    border-color: yellow;
  }

  42% {
    border-color: green;
  }

  57% {
    border-color: blue;
  }

  71% {
    border-color: indigo;
  }

  85% {
    border-color: violet;
  }

  100% {
    border-color: red;
  }
}

:root {
  --background-image: url("/api/panorama");
  --background-overlay-color: rgba(0, 0, 0, 0.5);
  --text-color: #fff;
  --container-background-color: rgba(0, 0, 0, 0.8);
  --border-color: red;
  --header-text-color: #fff;
  --monitor-output-background-color: #000;
  --monitor-output-text-color: #fff;
  --monitor-output-border-color: red;
  --splash-text-color: #fff;
  /* Buttons */
  --button-background-color: #000;
  --button-border-color: red;
  --button-text-color: #fff;
  --button-hover-background-color: #333;
  --button-hover-border-color: red;
  --button-hover-text-color: #fff;
  --button-active-background-color: #666;
  --button-active-border-color: red;
  --primary-button-background-color: red;
  --primary-button-border-color: red;
  --primary-button-text-color: #fff;
  --primary-button-hover-background-color: #ff3333;
  --primary-button-hover-border-color: red;
  --primary-button-active-background-color: #ff6666;
  --primary-button-active-border-color: red;
  --danger-button-background-color: red;
  --danger-button-border-color: red;
  --danger-button-text-color: #fff;
  --danger-button-hover-background-color: #ff3333;
  --danger-button-hover-border-color: red;
  --danger-button-active-background-color: #ff6666;
  --danger-button-active-border-color: red;
  /* Forms */
  --form-input-background-color: #000;
  --form-input-border-color: red;
  --form-input-text-color: #fff;
  --form-input-focus-border-color: #ff3333;
  --form-label-text-color: #fff;
  --validation-error-text-color: #ff3333;
  --form-input-invalid-border-color: #ff3333;
  --form-input-invalid-background-color: #330000;
  /* Tables */
  --table-header-background-color: #000;
  --table-header-text-color: #fff;
  --table-border-color: red;
  --table-row-hover-background-color: #333;
  /* Tabs */
  --tab-background-color: #000;
  --tab-border-color: red;
  --tab-text-color: #fff;
  --tab-hover-background-color: #333;
  --tab-hover-text-color: #fff;
  --tab-active-background-color: #666;
  --tab-active-text-color: #fff;
  /* Messages */
  --message-success-background-color: #003300;
  --message-success-border-color: #00ff00;
  --message-success-text-color: #00ff00;
  --message-error-background-color: #330000;
  --message-error-border-color: #ff0000;
  --message-error-text-color: #ff0000;
  --message-warning-background-color: #333300;
  --message-warning-border-color: #ffff00;
  --message-warning-text-color: #ffff00;
  /* Layout */
  --sidebar-background-color: #000;
  --sidebar-border-color: red;
  --sidebar-link-text-color: #fff;
  --sidebar-link-hover-background-color: #333;
  --sidebar-link-hover-text-color: #fff;
  --sidebar-link-active-background-color: #666;
  --sidebar-link-active-border-color: red;
  --server-card-background-color: #000;
  --server-card-border-color: red;
  --server-card-hover-background-color: #333;
  --server-card-info-text-color: #ccc;
  --server-card-info-label-color: #fff;
  /* Controls */
  --toggle-switch-off-background-color: #000;
  --toggle-switch-off-border-color: red;
  --toggle-switch-off-handle-background-color: red;
  --toggle-switch-off-handle-border-color: #000;
  --toggle-switch-on-background-color: red;
  --toggle-switch-on-border-color: #000;
  --toggle-switch-on-handle-background-color: #000;
  --toggle-switch-on-handle-border-color: red;
}

.container,
.server-card,
.sidebar-nav,
.content-section,
.form-input,
.toggle-switch,
.segmented-control .segment,
.message-box,
.table-responsive-wrapper {
  animation: rainbow-border 10s infinite;
}
