.fami-wccp-inner-wrapper {
  * {
    box-sizing: border-box;
  }
  .fami-wccp-switch {
    margin: 0;
    width: 60px;
  }
}

.fami-wccp-hidden {
  display: none !important;
}

.fami-wccp-field-small {
  max-width: 60px !important;
}

/* The switch - the box around the slider */
.fami-wccp-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  input {
    display: none;
  }
  .fami-wccp-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    &.round {
      border-radius: 34px;
      &:before {
        border-radius: 50%;
      }
    }
    &:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }
  }
  input:checked + .fami-wccp-slider {
    background-color: #2196F3;
    &:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
  }
  input:focus + .fami-wccp-slider {
    box-shadow: 0 0 1px #2196F3;
  }
}

/* Tabs */
.fami-wccp-tabs {
  margin-bottom: 30px;
}

.fami-wccp-tab-content {
  display: none;
  &.tab-content-active {
    display: block;
  }
}

.fami-wccp-admin-page-content-wrap {
  input[type=text], input[type=number], input[type=password], textarea, select {
    width: 400px;
    max-width: 100%;
    height: 30px;
    padding: 5px;
  }
  .description {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #777;
    font-style: italic;
    clear: both;
  }
  .fami-wccp-input-group {
    display: inline-block;
  }
  .fami-wccp-w-50 {
    width: 50px !important;
    max-width: 100%;
  }
  .fami-wccp-w-100 {
    width: 100px !important;
    max-width: 100%;
  }
  .fami-wccp-w-150 {
    width: 150px !important;
    max-width: 100%;
  }
}

.wp-admin .fami-wccp-select {
  line-height: 22px;
}

.fami-wccp-fields-list {
  .ui-sortable-handle {
    cursor: move;
  }
}

.fami-wccp-tab-content-inner {
  table {
    border-collapse: collapse;
    tr {
      border-bottom: 1px dotted #e7e7e7;
      th, td {
        text-align: left;
        padding-top: 15px;
        padding-bottom: 15px;
      }
    }
  }
}