Modals

  <div class="modal" id="modal-default">
    <div class="modal-overlay gray">
      <div class="modal-container small">
        <div class="modal-content">
          <h4>Unsaved changes</h4>
          <p>Do you want to save or discard changes?</p>
        </div>
        <div class="modal-footer">
          <div class="btns-group right">
            <button class="btn btn-secondary js-modal-close">Discard</button>
            <button class="btn btn-primary js-modal-close">Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  

  <div class="modal" id="modal-alert">
    <div class="modal-overlay gray">
      <div class="modal-container small">
        <div class="modal-content">
          <div class="modal-icon">
            <img src="icons/alert.svg" alt="">
          </div>
          <h4>A Problem Occurred</h4>
          <p>You do not have permissions to access this file. Please go back and try a different file.</p>
        </div>
        <div class="modal-footer">
          <div class="btns-group center">
            <button class="btn btn-secondary btn-long js-modal-close">Dismiss</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  

  <a href="#" class="btn btn-simple js-modal-btn" data-id="#modal-external">Show External Modal</a>
  <div class="modal" id="modal-external">
    <div class="modal-overlay green">
      <div class="modal-container">
        <div class="modal-header">
          <h4>Caremark Formulary Search</h4>
          <span class="modal-close js-modal-close"><i class="fa-regular fa-xmark"></i></span>
        </div>
        <div class="modal-content">
          <p>
            The page you requested is on the following site: 
            <strong>Caremark Formulary Search</strong>. To get there, you must leave this site. 
            If you want to proceed, please click the green button below. 
            To return to this site, click the outlined button below 
            or the “X” in the top right corner. 
          </p>
        </div>
        <div class="modal-footer">
          <div class="btns-group center">
            <button class="btn btn-secondary btn-long js-modal-close">Return to Site</button>
            <button class="btn btn-primary js-modal-close">Proceed</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  

<a href="#" class="btn btn-simple js-modal-btn" data-id="#modal-external">Show External Modal</a>
<class="modal" id="modal-video">
  <div class="modal-overlay green">
    <div class="modal-container modal-container-video">
      <div class="modal-content">
        <div class="modal-video-wrap">
          <iframe id="js-modal-video" width="100%" height="100%" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
        </div>
      </div>
    </div>
  </div>
</div>