// stylelint-disable

@import "../global-variables";

.Clr-Panel-overlay.active.is-transparent
{
  // Can not figure out what is overriding this, come back to this to remove important if possible.
  background-color: rgba($midnight, 0.5) !important;
}

.Clr-Panel-content .Clr-Modal
{
  box-shadow: $box-shadow-primary;
  border-radius: 0;

  .Clr-Modal-title
  {
    margin: 0;
    border-bottom: 1px solid $border-color-secondary;
    padding: 10px 5px 10px 20px;
    font-size: $font-size-lg; // Needed to align close and title vertically

    .Clr-Modal-titleText
    {
      color: $font-color-primary;
      font-weight: $font-weight-regular;
      font-size: $font-size-xl;
    }

    .Clr-Modal-titleCloseButton button
    {
      margin: 0;
      color: $font-color-secondary;
      font-size: $font-size-lg;
    }
  }

  .Clr-Modal-contentWrapper
  {
    margin: 0;
  }

  .Clr-Modal-content
  {
    padding: 30px 20px;
    font-size: $font-size-body;
  }

  .Clr-Modal-buttonGroup
  {
    margin: 0;
    border-top: 1px solid $border-color-secondary;
    padding: 13px 12px;
    background: $cloud;
  }
}