<head>
  <!-- <script src="jquery-3.3.1.min.js"></script> -->

  <script
    src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"
  ></script>
  <link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous"
  />
  <link rel="stylesheet" href="/static/styles/emphasis.css" />
  <script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"
  ></script>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <style>
    * {
      box-sizing: border-box;
    }

    .row {
      display: flex;
      flex-direction: column;
    }

    /*                 border:1px solid black;
                border-radius: 5px; */

    /* Create two equal columns that sits next to each other */
    .column {
      flex: 50%;
      padding: 15px;
    }

    .instance {
      border: 1px solid #070707;
      background-color: cccccc;
      border-radius: 5px;
      padding: 15px;
      display: block;
      justify-content: center;
      width: fit-content;
      max-width: 80%;
      text-align: left;
      margin: 0 auto;
      font-size: 15pt;
    }

    .instance p {
      font-weight: bold;
      display: block;
    }

    .annotation_schema {
      padding: 5px;
      display: flex;
      justify-content: center;
      width: 80%;
      text-align: left;
      margin: 0 auto;
    }

    fieldset {
      border: 1px solid #160085;
      background-color: cccccc;
      padding: 10px 15px 10px 15px;
    }

    legend {
      color: black;
    }

    input[type="text"] {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
    }

    input {
      margin: 5px;
    }

    .likert li {
      float: left;
      list-style-type: none;
    }

    /* The sidepanel menu */
    .sidepanel {
      min-height: 250px; /* Specify a height */
      width: 0; /* 0 width - change this with JavaScript */
      position: fixed; /* Stay in place */
      z-index: 1; /* Stay on top */
      top: 95px;
      left: 1px;
      background-color: #111; /* Black*/
      overflow-x: hidden; /* Disable horizontal scroll */
      padding-top: 10px; /* Place content 60px from the top */
      padding-bottom: 20px;
      transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
    }

    /* The sidepanel links */
    .sidepanel a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 55px;
      color: #ffffff; /* #818181; */
      display: block;
      transition: 0.3s;
    }

    /* When you mouse over the navigation links, change their color */
    .sidepanel a:hover {
      color: #f1f1f1;
    }

    /* When you mouse over the navigation links, change their color */
    .sidepanel table {
      color: #ffffff;
      font-size: 20px;
      /*padding: 8px 8px 18px 62px;*/
      margin-left: 20px;
      margin-top: 10px;
      border-spacing: 10px;
    }

    .sidepanel td,
    th {
      color: #ffffff;
      padding: 5px;
    }

    .sidepanel tr:nth-child(even) {
      background-color: #333333;
    }

    /* Position and style the close button (top right corner) */
    .sidepanel .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }

    /* Style the button that is used to open the sidepanel */
    .openbtn {
      cursor: pointer;
      /*
                font-size: 20px;
                background-color: #111;
                color: white;
                padding: 10px 15px;
                border: none;*/
    }

    .openbtn:hover {
      background-color: #444;
    }

    /* The instructions */
    .instructions {
      /* width: 0; */ /* 0 width - change this with JavaScript */
      transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
      overflow-y: hidden; /* Disable horizontal scroll */
      border: 1px solid #070707;
      background-color: cccccc;
      border-radius: 5px;
      padding: 15px;
      display: block;
      justify-content: center;
      width: fit-content;
      max-width: 80%;
      text-align: left;
      margin: 0 auto;
      font-size: 14pt;
    }

    /* Position and style the close button (top right corner) */
    .instructions .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }

    /* Style the button that is used to open the sidepanel */
    .instructions .openbtn {
      cursor: pointer;
      /*
                font-size: 20px;
                background-color: #111;
                color: white;
                padding: 10px 15px;
                border: none;*/
    }

    .span_container {
      border-width: 3px;
      border-style: solid;
      border: 2px solid black;
      position: relative;
      border-radius: 5px;
      padding: 2px 5px;
      background-color: pink;
    }

    .span_label {
      position: absolute;
      top: -12px;
      left: 5px;
      font-size: 7px;
      padding: 1px 1px;
      border-radius: 3px;
      background-color: pink;
      border: 2px solid red;
      text-align: center;
    }

    .span_close {
      position: absolute;
      top: -7px;
      right: -7px;
      width: 14px;
      height: 14px;
      font-size: 7px;
      padding: 2px 2px;
      border-radius: 50%;
      background-color: gray;
      border: 2px solid black;
      text-align: center;
      font: 7pt Arial, sans-serif;
    }
  </style>
</head>
