//.modal {
//  max-width: 668px !important;
//  width: 100%;
//  background-color: #fff;
//  left: calc(50% - 334px);
//}
.modalContainer {
  position: relative;

    .modal {
      border-radius: 10px;
      border: 1px solid #333;
      display: flex;
      justify-content: space-between;
      //position: fixed;
      //width: min-content;
      //left: calc(50% - 334px);
      //top: 10rem;
      //background-color: #fff;
      //padding: 28px 32px 30px 32px;
      //height: min-content;
      //z-index: 3;

      .title {
        width: 100%;
        background-color: rgba(158, 119, 243, 0.1);
        padding: 19px 25px;
        font-family: 'Space Grotesk';
        font-weight: 500;
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(0, 5, 51, 0.6);
        box-sizing: border-box;
      }

      .closeButton {
        position: absolute;
        top: 20px;
        right: 25px;

        .icon {
          cursor: pointer;
        }
      }

      &.dark {
        background-color: #ece3ff;
        border: 2px solid #5E36B7;

        .title {
          color: #BFA1FF;
          background-color: #5E36B7;
          box-shadow: 0px 4px 4px rgba(94, 54, 183, 0.5);
        }

        .closeButton {
          .icon {
            color: #BFA1FF;
          }
        }
      }
    }
}