.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF29;
    backdrop-filter: blur(26px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:1000;
  }
  
  .modal__container {
    background-color: #fff;
    height: 80%;
    width: 80%;
    border-radius: 53px;
    overflow-y: auto;
    box-sizing: border-box;
  }
  
  .modal-row {
      width: 100%;
      /* border: 1px solid black; */
      position: relative;
  }
  
  .modal-row-close {
      height: 10%;
  }
  
  /* modal-row-close */
  button.modal__close {
      height: 100%;
      vertical-align: middle;
      padding: 0 1em; 
      font-size: 1.2em;
      text-decoration: none;
      color:#FD6D6D;
      font-weight: 700;
      background-color: transparent;
      border: none;
      outline: none;
      position: absolute;
      right: 2%;
      cursor: pointer;
  }
  /* --------------------- */
  .modal-row-title {
      height: 25%;
      background-color: #FDDD6D;
      
  }
  /* modal row title */
  .modal-title-position {
      position: absolute;
      left: 3%;
      font-size: 5em;
      top: 50%;
      transform: translateY(-50%);
      font-weight: 700;
  }
  
  .modal-title-quiz {
      font-weight: 700;
      font-size: clamp(1.7em,1.71em,2em);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 60%;
      height: 90%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      text-overflow: ellipsis;
      /* white-space: wrap; */
      
  }
  
  @media only screen and (max-width: 750px) {
      .modal-row-title {
          font-size: smaller;
      }
  }
  
  /* --------------------- */
  .modal-row-details {
      height: 25%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      padding: 0 1.3em;
      align-items: center;
      font-weight: 600;
      font-size: 1.2em;
  }
  /* modal row details */
  .modal-details-host {
      color: #6E7276;
      width: 70%;
      padding-top: 20px;
      font-weight: 600;
  }
  .modal-details-date {
      color: #9FA2A5;
      width: 30%;
      padding-top: 20px;
      font-weight: 600;
      text-align: right;
  }
  /* ----------------------- */
  .modal-row-members {
      height: 42%;
      display: flex;
      flex-flow: row wrap;
      align-items: flex-start;
      justify-content: space-around;
      padding: 0 1em 1em;
      gap: 1em;
      overflow: auto;
    }
  .modal-row-members > button {
      width: 23%;
      height: 90%;
      background-color: #9FA2A5;
      display: flex;
      flex-direction: column;
      border-radius: 20px;
      text-decoration: none;
      outline: none;
      border: none;
      background-color: transparent;
      overflow: hidden;
      background: #FBFBFB;
      border: 4px solid #f88b79;
      cursor: pointer;

      flex-grow: 1;
      min-width: 190px;
  }
  
  .modal-row-members > button > * {
      /* border: 4px solid #f88b79; */
      width: 100%;
      /* height: auto; */
  }
  
  .modal-row-members-name {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      text-align: center;
      height: 20%;
  
      padding: 0.3em 0.6em;
      font-weight: 600;
  
      border-top: 4px solid #f88b79; 
      color:#3c3d3e;
      /* padding-top: 2.3%; */
      
  }
  .modal-row-members-image {
      height: 80%;
      background-image: url('../../../resources/2201.png');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
  }

  @media screen and (max-width: 600px) {

  .modal-row-details {
    font-size: 0.9em;
  }


  }

  @media screen and (max-width: 930px) {
    .modal-title-position {
      font-size: 3.3em;
    }
  
    .modal-title-quiz {
      transform: none;
      right: 3%;
      top: 0;
      left: 37%;
      text-align: right;
    }
    
  }
  
  
  /* modal row members */
  /* ------------------------ */
  .modal-row-done {
      height: 10%;
      position: absolute;
      bottom: 0;
  }
  /* modal row done  */
  .modal__btn {
      width: 100%;
      height: 100%;
      background-color: transparent;
      outline: none;
      border: none;
      cursor: pointer;
      background: linear-gradient(142.27deg, #F88E75 0%, #F47696 106.38%);
      color: #fff;
      font-size: 1.2em;
      font-weight: 700;
  }
  /* -------------------- */
    /* ---------------------------- */
          /* Animation Styling */
    /* ---------------------------- */
    
    @keyframes mmfadeIn {
        from { opacity: 0; }
          to { opacity: 1; }
    }
    
    @keyframes mmfadeOut {
        from { opacity: 1; }
          to { opacity: 0; }
    }
    
    @keyframes mmslideIn {
      from { transform: translateY(15%); }
        to { transform: translateY(0); }
    }
    
    @keyframes mmslideOut {
        from { transform: translateY(0); }
        to { transform: translateY(-10%); }
    }
    
    .micromodal-slide {
      display: none;
    }
    
    .micromodal-slide.is-open {
      display: block;
    }
    
    .micromodal-slide[aria-hidden="false"] .modal__overlay {
      animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
    }
    
    .micromodal-slide[aria-hidden="false"] .modal__container {
      animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
    }
    
    .micromodal-slide[aria-hidden="true"] .modal__overlay {
      animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
    }
    
    .micromodal-slide[aria-hidden="true"] .modal__container {
      animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
    }
    
    .micromodal-slide .modal__container,
    .micromodal-slide .modal__overlay {
      will-change: transform;
    }