/* GENERAL */

.trackside-ui-dialog.ui-dialog {
  font-size: 1rem;
  line-height: 1.5;
  padding: 0;
  /* some element states add an outline that we don't need */
  outline: none !important;
}
.trackside-ui-dialog.ui-widget-content {
  background-color: transparent;
}
.trackside-ui-dialog.ui-widget-content.ui-widget {
  border: none;
}
.trackside-ui-dialog.ui-dialog .ui-dialog-titlebar {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  /* Fix strange gap between titlebar and content area */
  margin-bottom: -1px;
}
.trackside-ui-dialog.ui-dialog.ui-widget.ui-widget-content .ui-dialog-content {
  background-color: white;
}
.text-bold {
	font-weight: bold;
}
.margin-right-20 {
	margin-right: 20px;
}


/* ALERTS */

.trackside-alert-dialog.ui-dialog .ui-widget-content.ui-dialog-content {
  padding: 0.5rem;
}
.trackside-alert-dialog.ui-dialog .alert {
  white-space: pre-line;
  margin-bottom: 0.5rem;
}
.trackside-alert-dialog.ui-dialog .alert:last-child {
  margin-bottom: 0;
}


/* LOADING */

.trackside-loading-dialog.ui-dialog .ui-widget-content.ui-dialog-content {
  padding: 0.5rem;
}

/* Images */

/* Ref: https://stackoverflow.com/a/12741146/3712461 */
@keyframes lowering-opacity-keyframe {
  from { opacity: 1; }
  to { opacity: 0.4; }
}
.opacity-pulsing {
  animation: lowering-opacity-keyframe 0.75s linear alternate infinite;
}

/* Lottie Speedometer */

/* Override both our base and loading defaults */
.trackside-ui-dialog.ui-dialog.ui-widget.ui-widget-content.trackside-lottie-speedometer .ui-dialog-content {
  background-color: transparent;
  padding: 0;
}
.trackside-lottie-speedometer-container {
  /* Define the dial/needle glow color to use (with varying opacities) */
  --dial-bg-hsl: 0deg 0% 100%;
}
/* Dial glow */
.trackside-lottie-speedometer-container::before {
  --edge-distance: 14%;
  content: "";
  display: block;
  position: absolute;
  top: var(--edge-distance);
  left: var(--edge-distance);
  right: var(--edge-distance);
  bottom: var(--edge-distance);
  border-radius: 50%;
  /* Due to positioning and border radius, only up to ~68% of the background is inside the dial */
  background: radial-gradient(circle at center, hsl(var(--dial-bg-hsl) / 0.1) 0%, hsl(var(--dial-bg-hsl) / 0.5) 68%);
}
/* Needle glow */
.trackside-lottie-speedometer svg g[transform="matrix(1,0,0,1,250,250)"] path {
  filter: drop-shadow(0 0 8px hsl(var(--dial-bg-hsl) / 0.7));
}
/* Change color of teal "display" if we're on a page where a custom variable exists for the customer's chosen primary color,
 * otherwise default to Trackside's orange brand color.
 */
.trackside-lottie-speedometer path[stroke="rgb(51,204,204)"] {
  stroke: var(--primary-color, #FF7C00);
}

#trackside-lottie-loading-container-storage {
  display: none !important;
}

/* Text Colors */

.text-green {
  color: green;
}

.text-red {
  color: red;
}