/* Generated from consolidated Moonshot CSS. Load after 00-moonshot-foundation.css when this component is used. */

.ribbon {
  background-color: var(--ms-red) !important;
}

.ribbon .wrap_module {
  padding: inherit;
}

.ribbon .wrap_module .ribbon_button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 250px;
  padding: 12px 16px !important;
  background-color: var(--ms-white) !important;
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06) !important;
  color: var(--ms-red) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 120% !important;
}

.ribbon .wrap_module .ribbon_button::after {
  display: none !important;
}

@media (max-width: 768px) {
.ribbon {
    margin: 0 !important;
    padding: 16px !important;
  }

.ribbon p {
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    color: var(--ms-white);
  }
}