.bolt-teaching-panel-layer {
  background: rgba(0, 0, 0, 0.30);
  background: var(--palette-black-alpha-30,rgba(0, 0, 0, 0.30)); }

.bolt-teaching-panel {
  border-radius: 6px;
  height: 544px;
  overflow: hidden;
  width: 640px; }
  @media (forced-colors: active) {
    .bolt-teaching-panel {
      border: solid 1px; } }

.bolt-teaching-panel a {
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1)); }

.bolt-teaching-panel-visual {
  background: #0078d4;
  height: 304px;
  justify-content: center;
  position: relative;
  width: 640px; }
  .bolt-teaching-panel-visual .bolt-teaching-pane-close-button {
    background-color: transparent;
    color: white;
    padding: 0;
    position: absolute;
    right: 16px;
    top: 16px; }
    .bolt-teaching-panel-visual .bolt-teaching-pane-close-button:focus {
      border-color: white; }
      @media (forced-colors: active) {
        .bolt-teaching-panel-visual .bolt-teaching-pane-close-button:focus {
          border: solid 1px Highlight; } }

.bolt-teaching-panel-image {
  align-self: flex-end;
  display: flex;
  max-height: 100%;
  max-width: 100%; }

.bolt-teaching-panel-description {
  background: rgba(255, 255, 255, 1);
  background: var(--callout-background-color,rgba(255, 255, 255, 1)); }

.bolt-teaching-panel-buttons {
  justify-content: space-between; }

.bolt-teaching-panel-back.first-slide {
  visibility: hidden; }

.bolt-teaching-panel-progress {
  pointer-events: none; }

.bolt-teaching-panel-progress-circle {
  background-color: rgba( 200, 200, 200 ,  1 );
  background-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  border-radius: 50%;
  height: 8px;
  width: 8px; }
  @media (forced-colors: active) {
    .bolt-teaching-panel-progress-circle {
      border:  solid 1px;
      border-color: rgba( 0, 0, 0 ,  1 );
      border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 ); } }
  .bolt-teaching-panel-progress-circle.current {
    background-color: rgba(0, 120, 212, 1);
    background-color: var(--communication-background,rgba(0, 120, 212, 1)); }
    @media (forced-colors: active) {
      .bolt-teaching-panel-progress-circle.current {
        background-color: Highlight; } }
