/* The modal (background) */
    .document-modal {
      display: none;
      /* Hidden by default */
      position: fixed;
      /* Stay in place */
      right: 0;
      top: 0;
      bottom: 0;
      width: 50%;
      /* Modal width */
      background-color: white;
      /* Background color */
      z-index: 10002;
      /* Sit on top */
      overflow-y: auto;
      /* Enable scroll if needed */
    }

    @media (max-width: 1199px) {
      .document-modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        /* Modal width */
        background-color: white;
        /* Background color */
        z-index: 10002;
        /* Sit on top */
        overflow-y: auto;
        /* Enable scroll if needed */
      }
    }


    /* Modal content */
    .document-modal-content {
      padding: 30px;
    }

    /* The close button */
    .close {
      position: absolute;
      right: 0;
      top: 0;
      padding: 10px 16px;
      font-size: 36px;
      color: gray;
      cursor: pointer;
    }

    .viewer-overlay {
      display: none;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 10001;
    }

    #loadingBox {
      border: 1px solid #ddd;
      background-color: #f1f1f1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 700px;
    }

    .spinner {
      border: 8px solid #f3f3f3;
      /* Light grey */
      border-top: 8px solid #3498db;
      /* Blue */
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }