/* Load Red Hat Text (regular) */
        @font-face {
          font-family: "Red Hat Text";
          src: url("/fonts/RedHatText-Regular.ttf") format("truetype");
          font-weight: 400;
          font-style: normal;
          font-display: swap;
        }

        /* Load Red Hat Text (bold) */
        @font-face {
          font-family: "Red Hat Text";
          src: url("/fonts/RedHatText-Bold.ttf") format("truetype");
          font-weight: 700;
          font-style: normal;
          font-display: swap;
        }


        html,
        body {
          height: 100%;
        }

        body {
          margin: 0;
          font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        }

        /* Positioning the language switch */
        #languageSwitchContainer {
          position: fixed;
          top: 10px;
          right: 10px;
          font-size: 16px;
          color: #18197c;
          z-index: 1000;
          /* Ensure it appears above other elements */
          background-color: white;
          /* Background to avoid transparency issues */
          padding: 5px 10px;
          border-radius: 5px;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        #switchLanguage {
          padding: 5px;
          font-size: 16px;
          color: #18197c;
        }

        #surveyElement {
          position: absolute;
          inset: 0;
          min-height: 100%;
          height: 100%;
        }

        body {
          font-family: 'Red Hat Display Regular', sans-serif !important;
        }

        .spinner {
          border: 8px solid #f3f3f3;
          /* Light grey border */
          border-top: 8px solid #18197c;
          /* Blue border at the top */
          border-radius: 50%;
          /* Round shape */
          width: 60px;
          /* Size of the spinner */
          height: 60px;
          /* Size of the spinner */
          animation: spin 1s linear infinite;
          /* Spinner animation */
          margin: 0 auto;
          /* Center the spinner */
          display: block;
          /* Ensure it's block-level */
        }

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

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

        #sendSigendPDFoeh,
        #mailSignedPDF,
        #saveSignedPDF {
          display: none;
        }

        /* PDF Viewer styles */
        .pdfViewer {
          flex: 1;
          border: 1px solid #ccc;
          box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
          cursor: pointer;
          /* Indicate that the viewer is clickable */
          overflow: hidden;
          /* Hide any overflow */
          position: relative;
        }

        /* Scale down the canvas for preview */
        .pdfViewer canvas {
          width: 100%;
          /* Scale to fit the container */
          height: auto;
          /* Maintain aspect ratio */
          /* transform: scale(0.5); 
    transform-origin: top left; */
        }

        /* Flex container styles */
        .pdfContainer {
          display: flex;
          justify-content: space-between;
          gap: 20px;
        }

        .pdfSection {
          display: flex;
          flex-direction: column;
          /* Stack the heading and viewer vertically */
          flex: 1;
        }

        #surveyElement {
          background-color: #ffffff;
          padding: 0px;
          border-radius: 5px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          position: relative;
          /* Ensure it respects the z-index of other elements */
        }

        #actionsDiv {
          display: flex;
          /* Enable flexbox layout */
          flex-direction: column;
          /* Stack buttons vertically */
          justify-content: center;
          /* Center buttons vertically */
          align-items: center;
          /* Center buttons horizontally */
          text-align: center;
          /* Center text inside the div */
          height: 100%;
          /* Adjust based on your design */
        }

        #actionsDiv p {
          margin: 10px 0;
          /* Add spacing between paragraphs */
        }

        #actionsDiv button {
          background-color: white;
          /* Initial background color */
          color: #18197c;
          /* Initial text color */
          border: 2px solid #18197c;
          /* Initial border color */
          padding: 10px 20px;
          /* Padding around the button */
          font-size: 16px;
          /* Font size */
          cursor: pointer;
          /* Change cursor on hover */
          transition: all 0.3s ease;
          /* Smooth transition for hover effect */
        }

        #actionsDiv button:hover {
          background-color: #18197c;
          /* Change to blue background on hover */
          color: white;
          /* Change text color to white on hover */
          border-color: #18197c;
          /* Keep the border color consistent */
        }





        /* Modal styles (unchanged) */
        .modal {
          display: none;
          /* Hidden by default */
          position: fixed;
          z-index: 1000;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0, 0, 0, 0.8);
          /* Semi-transparent background */
          align-items: center;
          justify-content: center;
        }

        .modal-content {
          position: relative;
          background-color: #fff;
          padding: 20px;
          max-width: 90%;
          max-height: 90%;
          overflow: auto;
          border-radius: 8px;
        }

        .close-button {
          position: absolute;
          top: 10px;
          right: 15px;
          font-size: 24px;
          font-weight: bold;
          color: #aaa;
          cursor: pointer;
        }

        .close-button:hover {
          color: #000;
        }

        /* Media query to reposition the language switch on smaller screens */
        @media (max-width: 768px) {
          #languageSwitchContainer {
            position: static;
            /* Place it in the normal document flow */
            margin: 10px auto;
            /* Center it below the survey heading */
            display: flex;
            justify-content: center;
          }

          .pdfContainer {
            flex-direction: column;
          }

          .pdfViewer {
            width: 100%;
            height: auto;
          }

          canvas {
            max-width: 100%;
            height: auto;
          }
        }

        @media (max-width: 480px) {
          .pdfViewer {
            height: 200px;
            /* Reduced height for very small screens */
          }
        }