/* Style definition for JavaScrypt documents */

    body {
        /* margin-left: 15%;
        margin-right: 10%; */
        background-color: #FFFFFF;
        color: #000000;
    }

    a:link, a:visited {
        background-color: inherit;
        color: rgb(0%, 0%, 80%);
        text-decoration: none;
    }

    a:hover  {
        background-color:  rgb(30%, 30%, 100%);
        color: rgb(100%, 100%, 100%);
    }

    a:active {
        color: rgb(100%, 0%, 0%);
        background-color:  rgb(30%, 30%, 100%);
    }

    a.i:link, a.i:visited, a.i:hover {
        background-color:  inherit;
        color: inherit;
        text-decoration: none;
    }

    h3.nav {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    hr.h {
        background-color: #C0C0C0;
        color: #000000;
    }

    img.button {
        border: 0px;
        vertical-align: middle;
    }

    p {
        text-align: justify;
    }

    p.citation {
        margin-top: 0pt;
        text-align: right;
    }

    p.quotation {
        margin-bottom: 0px;
    }

    .subsuper sub, .subsuper sup {
        line-height: 0px;
    }

    table.footer {
        width: 100%;
    }

    table.footer td.left {
        width: 50%;
        text-align: left;
        font-style: italic;
        vertical-align: top;
    }

    table.footer td.right {
        width: 50%;
        text-align: right;
        vertical-align: top;
    }

    table.footer table.buttons {
        margin-left: auto;
    }

    table.footer table.buttons td {
        text-align: center;
    }

    ul.pspace li {
        margin-top: 1ex;
        text-align: justify;
        width: 90%;
    }

    .c {
        text-align: start;
    }



    /*  QR CODE MODAL  */
 
      .modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        width: 60%;
        height: 80vh;
        text-align: center;
        box-sizing: border-box;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        background-color: #000000;
        padding: 20px 0;
      }
      .modal.visible {
        display: block;
      }
  
      .modal__header a {
        position: absolute;
        top: 0;
        right: 0;
        text-decoration: none;
        color: white;
        font-weight: bold;
        display: block;
        padding: 0 20px;
        font-size: 16px;
        background: #555;
        height: 100%;
      }



      /* scan */
      #preview {
        width: 100%;
  
      }
      #output div {
  
        padding: 15px 5px;
      }
      #wrap {
        position: relative;
  
  
      }
      #wrap::before {
        position: absolute;
        content: "";
        width: 50%;
        height: 0;
        padding-bottom: 50%;
        background: transparent;
        border: rgba(255, 255, 255, 0.6) 6px dashed;
        box-sizing: border-box;
        border-radius: 40px;
        display: block;
        left: 50%;
        top: 50%;
        z-index: 5;
        transform: translate(-50%, -50%);
  
      }
      #main {
        max-width: 450px;
        margin: auto;
      }
  
      .auto-style1 {
      text-align: center;
  }
  
      .auto-style2 {
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
      text-decoration: underline;
      color: #fff;
  }
      /* scan */
      
    /*  QR CODE MODAL  */

/* QR SCANNER START */

    #container {
        text-align: center;
        margin: 0;
      }
      
      #qr-canvas {
        margin: auto;
        width: calc(100% - 20px);
        max-width: 50%;
        position: fixed;
        left: 50%;
        right: 50%;
        transform: translate(-50%);
        background-color: #000000;
        border: 2px solid yellow;
        padding: 10px;
        border-radius: 10px;

      }
      
      #btn-scan-qr {
        cursor: pointer;
      }
      
      #btn-scan-qr img {
        height: 10em;
        padding: 15px;
        margin: 15px;
        background: white;
      }
      
      #qr-result {
        font-size: 1.2em;
        margin: 20px auto;
        padding: 20px;
        max-width: 700px;
        background-color: white;
        border: 1px solid gray;
        border-radius: 10px;
        word-break: break-all;
      }

      /* QR SCANNER START */