#BrochuresPage,
#BrochureDetailsPage {
  .messageContainerReact {
    width: 100%;
    top: 0px;
    right: 0;
    position: fixed;
    z-index: 99999;

    & .messageContent {
      max-width: 1480px;
      margin: auto;
      padding: 20px 40px 0;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;

      & .innerContent {
        position: relative;
        background-color: #fff;
        border: 4px solid var(--support05);

        & svg {
          position: absolute;
          top: 10px;
          right: 10px;
          width: 17px;
          height: 17px;
          cursor: pointer;
        }

        & p {
          max-width: 250px;
          padding: 20px;
          font-size: 16px;
        }

        & .round-time-bar {
          overflow: hidden;
          position: absolute;
          bottom: 0px;
          left: 0px;
          width: 100%;
          height: 7px;

          & div {
            height: 7px;
            animation: roundtime 3s linear forwards;
            transform: scaleX(1);
            transform-origin: left center;
            background-color: var(--support01);
            display: block;
          }
        }
      }

      &.success {
        & .innerContent {
          & .round-time-bar {
            & div {
              background-color: var(--support01);
            }
          }
        }
      }

      &.error {
        & .innerContent {
          & .round-time-bar {
            & div {
              background-color: var(--delete);
            }
          }
        }
      }
    }
  }

  @keyframes roundtime {
    to {
      transform: scaleX(0);
    }
  }
}