.choice {
  color: rgba(0, 0, 0, 0.6);
  font-family: poppins_light;
  font-size: 12px;
  padding-bottom: 10px;
  tr {
    display: block;
    padding-bottom: 10px;
  }
}

table.choice {
  width: 350px;
  .left-choice {
  	display: inline-block;
    float: left;
  	text-align: right;
    width: 50%;
  }

  .right-choice {
  	display: inline-block;
  	margin-top: -2px;
    padding-left: 10px;
  	position: relative;
    text-align: left;
    width: 43%;
    &.half {
      padding-left: 0;
      text-align: center;
      width: 22.5%;
    }
  }
  &.boot {
    font-family: poppins_semibold;
    font-size: .89em;
    padding: 0;
  }
}

th {
  &.right-choice {
    &.half {
      margin-top: 0;
    }
  }
}

.tab-subheading {
  font-family: poppins_regular;
  font-size: 1em;
  margin: 0 0 .75em .5em;
  margin-block-start: 0;
}

input[type="text"].number-picker,
input[type="number"].number-picker {
  appearance: textfield;
  box-sizing: border-box;
  margin: 0 -3px 0 -4px;
}

textarea {
  width: 100%;
  resize: vertical;
}

input[type="checkbox"].checkbox-slider,
.checkbox-slider input[type="checkbox"] {
  height: 18px;
  left: 5px;
  position: relative;
  width: 18px;
  -moz-appearance: none !important;

  &::before, &::after {
    content: '';
    cursor: pointer;
    display: block;
    left: -5px;
    position: absolute;
  }

  &::before {
    background: #ccc;
    border-radius: 18px;
    height: 18px;
    transition: background-color 200ms;
    width: 32px;
  }

  &:checked::before {
    background-color: $teal-01;
  }

  &::after {
    background: #fff;
    border-radius: 50%;
    height: 14px;
    top: 50%;
    transform: translateY(-50%) translateX(13%);
    transition: box-shadow 100ms ease-in-out, transform 100ms ease-in-out;
    width: 14px;
  }

  &:checked::after {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    height: 15px;
    transform: translateY(-50%) translateX(99%);
    width: 15px;
  }
}

p.project {
  background-color: rgba($teal-01,0.5);
  font-family: 'space_regular';
  margin-top: .5em;
  margin-bottom: 0;
  padding: .25em .25em .25em .5em;
  > span {
    font-family: 'space_bold';
  }
}

.panel.show {
  margin-left: .25em;
  padding-top: .8em;
}

.mux {
  padding-top: 5px;
  &.inactive {
    .dropbtn-small {
      background-color: $grey-light;
      color: $teal-main;
      border: 1px solid $grey-mid;
      &:before {
        border: 5px solid transparent;
        border-top: 5px solid $grey-mid;
      }
    }
  }
}

.button-container {
  button {
    margin-bottom: .5em;
  }
}

.diagram-text {
  font-size: .8em;
}

.project-actions {
  display: block;
  position: relative;
  margin-top: .5em;
  margin-left: .5em;
  height: 20px;
  >.project-text {
    display: inline;
    font-family: 'inconsolata';
    color: $grey-dark;
    font-size: .85em;
    position: absolute;
    top: 0;
    left: 185px;
    top: -12px;
  }
  > a {

    > button {
      position: absolute;
      top: 0;
      border: 0;
      height: 16px;
     &.project-download {
        background: transparent url(../images/icons/project_download_inactive.svg) no-repeat center;
        background-size: contain;
        left: 100px;
        &::before,
        &:hover {
          background-image: url(../images/icons/project_download_active.svg);
        }
      }
    }
  }
  > button {
    border: 0;
    position: absolute;
    top: 0;
    height: 16px;
    &.project- {
      &new {
        background: transparent url(../images/icons/file_inactive.svg) no-repeat center;
        background-size: contain;
        left: 0;
        &::before,
        &:hover {
          background-image: url(../images/icons/file_active.svg);
        }
      }
      &new-folder {
        background: transparent url(../images/icons/new_folder_inactive.svg) no-repeat center;
        background-size: contain;
        left: 25px;
        &::before,
        &:hover {
          background-image: url(../images/icons/new_folder_active.svg);
        }
      }
      &upload {
        background: transparent url(../images/icons/upload_inactive.svg) no-repeat center;
        background-size: contain;
        left: 50px;
        &::before,
        &:hover {
          background-image: url(../images/icons/upload_active.svg);
        }
      }
      &save {
        background: transparent url(../images/icons/save_inactive.svg) no-repeat center;
        background-size: contain;
        left: 75px;
        &::before,
        &:hover {
          background-image: url(../images/icons/save_active.svg);
        }
      }
      &clean {
        background: transparent url(../images/icons/broom_inactive.svg) no-repeat center;
        background-size: contain;
        left: 125px;
        &::before,
        &:hover {
          background-image: url(../images/icons/broom_active.svg);
          height: 16px;
        }
      }
      &delete {
        background: transparent url(../images/icons/project_delete_inactive.svg) no-repeat center;
        background-size: contain;
        left: 150px;
        &::before,
        &:hover {
          background-image: url(../images/icons/project_delete_active.svg);
        }
      }
    }
  }
}

.tab-info {
  > p {
        font-family: poppins-light;
        font-size: .9em;
        line-height: 1.1em;
      }
  >.panel {
    p {
        font-family: poppins-light;
        font-size: .9em;
        line-height: 1.1em;
        margin-block-start: 0;
    }
    button.feedback {
      margin-bottom: 1.5em;
    }
  }
  button.feedback {
    background-color: rgba($teal-main, 0.7);
    border: 1px solid $teal-main;
    &:hover {
      background-color: rgba($teal-main, 1);
    }
    >a {
      text-decoration: none;
      color: #fff;
    }
    &.bug {
      background-color: rgba($accent-red, 0.7);
      border: 1px solid $accent-red;
      &:hover {
        background-color: rgba($accent-red, 1);
      }
    }
  }
}
