html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.text-danger, .text-danger ul li {
    color: #dc3545;
}
/*
=====
DEPENDENCES
=====
*/
.screen-reader {
    width: var(--screenReaderWidth, 1px) !important;
    height: var(--screenReaderHeight, 1px) !important;
    padding: var(--screenReaderPadding, 0) !important;
    border: var(--screenReaderBorder, none) !important;
    position: var(--screenReaderPosition, absolute) !important;
    clip: var(--screenReaderClip, rect(1px, 1px, 1px, 1px)) !important;
    overflow: var(--screenReaderOverflow, hidden) !important;
}

/*
=====
CORE STYLES
=====
*/

.rating {
    --uiRatingColor: var(--ratingColor, #eee);
    --uiRatingColorActive: var(--ratingColorActive, #ffcc00);
    display: var(--ratingDisplay, flex);
    font-size: var(--ratingSize, 1rem);
    color: var(--ratingColor, #eee);
}
    
.rating__control:nth-of-type(1):focus ~ .rating__item:nth-of-type(1)::before,
.rating__control:nth-of-type(2):focus ~ .rating__item:nth-of-type(2)::before,
.rating__control:nth-of-type(3):focus ~ .rating__item:nth-of-type(3)::before,
.rating__control:nth-of-type(4):focus ~ .rating__item:nth-of-type(4)::before,
.rating__control:nth-of-type(5):focus ~ .rating__item:nth-of-type(5)::before{
  content: ""; 
  box-shadow: 0 0 0 var(--ratingOutlineWidth, 4px) var(--uiRatingColorActive);

  position: absolute;
  top: -.15em;
  right: 0;
  bottom: -.15em;
  left: 0;
  z-index: -1;
}

.rating__item{
  cursor: pointer;  
  position: relative;
}

.rating__item {
    padding-left: .25em !important;
    padding-right: .25em !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 5px !important;
    color: var(--ratingColor, #eee);
}

.rating__star{
  display: block;
  width: 3em;
  height: 3em;

  fill: currentColor;
  stroke: var(--ratingStroke, #222);
  stroke-width: var(--ratingStrokeWidth, 1px);
}

.rating:hover,
.rating__control:nth-of-type(1):checked ~ .rating__item:nth-of-type(1),
.rating__control:nth-of-type(2):checked ~ .rating__item:nth-of-type(-n+2),
.rating__control:nth-of-type(3):checked ~ .rating__item:nth-of-type(-n+3),
.rating__control:nth-of-type(4):checked ~ .rating__item:nth-of-type(-n+4),
.rating__control:nth-of-type(5):checked ~ .rating__item:nth-of-type(-n+5){
  color: var(--uiRatingColorActive) !important;
}

.rating__item:hover ~ .rating__item{
  color: var(--uiRatingColor) !important;
}

/*
=====
SETTINGS
=====
*/

.rating {
    --ratingSize: 2rem;
    --ratingColor: #eee;
    --ratingColorActive: #00875b;
}

/*
=====
DEMO
=====
*/

.page{
  display: flex;
}

.page__group{
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

@media (min-width: 641px){
  .page__group{
    margin-left: 3.5rem;
    margin-right: 3.5rem;
  }
}