/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.wpximis-restricted-content-display-message {
  position: fixed;
  top: 2em;
  left: 4%;
  width: 92%;
  z-index: 10;

  .wpximis-restricted-content-message-inner {
    padding: 1rem;
    padding-right: 2rem;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    display: block;
    max-width: 600px;
    width: 100%;
    position: relative;

    .wpximis-restricted-content-message-close {
      position: absolute;
      top: 50%;
      right: 0.5rem;
      cursor: pointer;
      opacity: 0.3;
      transform: translateY(-50%);
      width: 1rem;
      height: 1rem;

      &:hover {
        opacity: 1;
      }

      &:before,
      &:after {
        position: absolute;
        left: 0.5rem;
        content: " ";
        height: 1rem;
        width: 2px;
        background-color: #333;
      }
      &:before {
        transform: rotate(45deg);
      }
      &:after {
        transform: rotate(-45deg);
      }
    }
  }
}