<style>

.grow-wrap, .extend {
  display: grid;
}
.grow-wrap::after, .extend::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}
.grow-wrap > textarea, extend > textarea {
  resize: none;
  overflow: hidden;
}
.grow-wrap > textarea, .grow-wrap::after, .extend > textarea, .extend::after {
  padding: 0.5rem;
  font: inherit;
}

.grow-wrap > textarea, .grow-wrap::after {
  grid-area: 3 / 1 / 3 / 1;
}

.extend > textarea, .extend::after {
  grid-area: 1 / 1 / 2 / 2;
}

.two-cols{
  display: grid;
  grid-template-columns: 80%  15%;
  gap: 3%;
  }

.four-cols{
  display: grid;
  grid-template-columns: 20% 45% 15% 10%;
  gap: 3%;
  }

.one-pager-but {
  margin:auto;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 0.9em;
  cursor: pointer;
}

  textarea {
    box-sizing: border-box;
    width: 100%;
  }

  table {
    width: 80%;
  }

  textarea {
    box-sizing: border-box;
    width: 100%;
  }

  *:required {
    background-color:  #ebdef0;
  }

  select:required {
    background: #ebdef0;
  }

  table.paratable {
    border-collapse: collapse;
  }
  table.paratable, table.paratable tr, table.paratable th, table.paratable td {
    border-spacing; 0;
    margin: 0;
    padding: 0;
    border: 0 none;
  }
  table.paratable th {
    text-align: left;
    padding: 0.2em 0.4em;
    background-color: var(--x-tab-inactive-color);
  }
  table.paratable th.section {
    text-align: center;
    padding: 0.2em 0.4em;
    background-color: var(--x-tab-inactive-color);
  }
  table.paratable td {
    text-align: left;
    padding: 0.2em 0.4em;
  }
  table.paratable tr:nth-child(even) td {
    background-color: var(--x-tab-inactive-color);
  }
  table.paratable th:last-child, table.paratable td:last-child{
    padding-left: 1em;
  }
  table.paratable td:first-child {
    font-style: italic;
    border-right: 0.2em solid white;
  }
  table.paratable th:first-child {
    border-right: 0.2em solid white;
  }
  table.paratable tr td:first-child {
    text-transform: capitalize;
  }

  .tooltip {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    border-bottom: 1px dotted black;
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 35em;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 5px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -1em;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  label {
    display: block;
    font-weight: bold;
    font-size: 1.2em;
  }
  label::after {
    display:inline;
    content: ':';
  }

  input[name=acronym] {
    width: 20em;
  }

  select:focus {
      box-shadow: none important!;
      outline-style: none important!;
      -webkit-box-shadow: none;
      border-color:black;
      outline: none;

    }

  select {
    width: 400px;
    padding: 8px 16px;

    option{
      font-size:14px;
      padding:8px 8px 8px 28px;
      position:relative;
      color:#999;

      &:before {
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0px;
        border:1px solid #ccc;
        border-radius: 2px;
        z-index: 1;
      }

      &:checked{
        &:after{
          content: attr(title);
          background: #ebdef0;
          color:black;
          position: absolute;
          width: 100%;
          height: 18px;
          left: 0;
          top: 0;
          padding: 8px 8px 8px 28px;
          border: none;
        }

        &:before{
          border-color: black;
          background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMC42MSA4LjQ4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzNlODhmYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFzc2V0IDg8L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJfMSIgZGF0YS1uYW1lPSIxIj48cmVjdCBjbGFzcz0iY2xzLTEiIHg9Ii0wLjAzIiB5PSI1LjAxIiB3aWR0aD0iNSIgaGVpZ2h0PSIyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Ljk3IDAuMDEpIHJvdGF0ZSg0NSkiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjUuMzYiIHk9Ii0wLjc2IiB3aWR0aD0iMiIgaGVpZ2h0PSIxMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC44NiAtMy4yNikgcm90YXRlKDQ1KSIvPjwvZz48L2c+PC9zdmc+);
          background-size: 10px;
          background-repeat: no-repeat;
          background-position: center;
        }

      }
    }
  }

.stake_job {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.stake_title {
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* Makes text go bottom to top */
  text-transform: capitalize;
  text-align: center;
}

.stake_content {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2
}

</style>

