:root {
    --font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-mono: 'Fira Mono', monospace;
    --color-bg-0: rgb(202, 216, 228);
    --color-bg-1: hsl(209, 36%, 86%);
    --color-bg-2: hsl(224, 44%, 95%);
    --color-theme-1: #ff3e00;
    --color-theme-2: #4075a6;
    --color-text: rgba(0, 0, 0, 0.7);
    --column-width: 42rem;
    --column-margin-top: 4rem;
    font-family: var(--font-body);
    color: var(--color-text);
}

body {
    min-height: 100vh;
    margin: 0;
    background-attachment: fixed;
    background-color: var(--color-bg-1);
    background-size: 100vw 100vh;
    background-image: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
}


.uploaddiv {
    text-align: center;
    margin: 1cm;
}
#questionaire {
    font-family: Arial, sans-serif;
    font-size: 12pt;
    margin: 2cm;
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding:50px;    
}

input[type=file] {
    padding: 4px;
    margin: -4px;
    position: relative;
    outline: none;
    /* File Selector Button Styles */
    /* Faked label styles and icon */
    /* Handle Component Focus */
  }
  input[type=file]::file-selector-button {
    border-radius: 4px;
    padding: 0 16px;
    height: 40px;
    cursor: pointer;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    margin-right: 16px;
    /*
      This is a hack to change the button label. 
      I'm hiding the default label and then 
      manually applying the width based on 
      updated icon and label.
    */
    width: 132px;
    color: transparent;
    /*
      Firefox doesn't support the pseudo ::before 
      or ::after elements on this input field so 
      we need to use the @supports rule to enable 
      default styles fallback for Firefox.
    */
  }
  @supports (-moz-appearance: none) {
    input[type=file]::file-selector-button {
      color: var(--primary-color);
    }
  }
  input[type=file]::file-selector-button:hover {
    background-color: #f3f4f6;
  }
  input[type=file]::file-selector-button:active {
    background-color: #e5e7eb;
  }
  input[type=file]::before {
    position: absolute;
    pointer-events: none;
    top: 14px;
    left: 16px;
    height: 20px;
    width: 20px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
  }
  input[type=file]::after {
    position: absolute;
    pointer-events: none;
    top: 16px;
    left: 40px;
    color: var(--primary-color);
    content: "  Select File";
  }
  input[type=file]:focus-within::file-selector-button, input[type=file]:focus::file-selector-button {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }

  div.upload {
    display:inline-block;
    background-color: rgb(248, 249, 250);
    border:1px dashed rgb(230, 233, 237);
    padding: 10px;
    width:400px;
    border-radius: 5px;
    text-align:left;
  }

  
  button {
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    border: 0;
    background-color: white;
    box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 12px;
    transition: all 0.1s ease;
  }
  
  button:hover {
    background-color: #020A3F;
    color: hsl(0, 0%, 100%);
    box-shadow: #020A3F 0px 3px 9px 0px;
  }