@charset "UTF-8";
/*
 Theme Path
========================================================================== */
/*
 Font Family
========================================================================== */
/*
 Font Size
========================================================================== */
/*
 Colors
========================================================================== */
/*
 Button Styles
========================================================================== */
/*
 Helpers
========================================================================== */
/*
 Sizes
========================================================================== */
/*
 Columns
========================================================================== */
/*
 Buttons – @include button();
========================================================================== */
/*
 Object Fit – @include object-fit(cover);
========================================================================== */
/*
 Rows – @include rows(4,10px); px or % support
========================================================================== */
/*
 Aspect Ratio – @include aspect-ratio(9,16) 0r @include aspect-ratio(70%,30%)
========================================================================== */
/*
 Align Full – @include alignfull;
========================================================================== */
/*
 Min Width Query – @include media($desktop);
========================================================================== */
/*
 Max Width Query – @include media-height($tablet);
========================================================================== */
/*
 Min Width and Max Width Query – @include media-between($tablet, $desktop);
========================================================================== */
/*
 Min Height Query – @include media-height($tablet);
========================================================================== */
/*
 Truncate – @include truncate-text(ellipsis);
========================================================================== */
/*
 Rem Calculate – @include rem(padding, 30px);
========================================================================== */
/*
 Column width with margin
========================================================================== */
/*
 Generates classes and css variables for custom color scale from of a specific Hexcode or HSLA
 @include generate-color-palette(#6a778c, 'slate', 'variables');
 @include generate-color-palette(hsla(217, 90%, 57%, 1.00), 'cobalt', 'classes');
========================================================================== */
/*
 Progress Bar
========================================================================== */
.block-progress-bar .progress-bar {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
}
.block-progress-bar .progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.875rem;
  line-height: 1.2;
}
.block-progress-bar .progress-bar-wrapper {
  background-color: rgba(128, 0, 0, 0.25);
  border-radius: 20px;
  position: relative;
  height: 20px;
  width: 100%;
}
.block-progress-bar .progress {
  background-color: #800000;
  height: 100%;
  width: 0;
  border-radius: 20px;
  transition: width 2s ease;
}
.block-progress-bar.is-style-accent-color .progress-bar-wrapper {
  background-color: rgba(255, 163, 25, 0.25);
}
.block-progress-bar.is-style-accent-color .progress {
  background-color: #FFA319;
}
.block-progress-bar.is-style-white-color .progress-bar-wrapper {
  background-color: rgba(255, 255, 255, 0.25);
}
.block-progress-bar.is-style-white-color .progress {
  background-color: white;
}