$prim-color = #1abc9c
$sec-color = #16a085

$affirmitive-color = #2ecc71
$negative-color = #e74c3c

$editing-bg = #ecf0f1
$editing-border = darken($editing-bg, 7%)

.fb-button {
  display: inline-block;
  margin: 0;
  padding: .563rem .844rem;
  border: 0 none;
  background: #16a085;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  border-radius: .125rem;
  border: thin solid darken($prim-color, 5%);
  border-bottom: 2px solid $sec-color;
}

.fb-button[disabled] {
  background: #ddd !important;
  border: thin solid #ccc;
  color: #777 !important;
  text-shadow: none !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  opacity: .65;
  cursor: default;
}

.fb-clear {
  clear: both;
}

.fb-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 0 0;
  position: relative;
  font-family: 'Source Sans Pro', 'Open Sans', Tahoma;
}

.fb-save-wrapper {
  position: absolute;
  right: 20px;
  top: 10px;
}

.fb-left {
  float: left;
  width: 320px;
  padding-top: 30px;
}

.fb-right {
  padding-top: 70px;
  margin-left: 320px;
  border-left: 1px solid #ddd;
  padding-left: 20px;
  min-height: 100%;
  overflow: hidden;
}

.fb-no-response-fields {
  color: #999;
}

.fb-tabs {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0 0 0 20px;
  border-bottom: 1px solid #ccc;
}

.fb-tabs li {
  display: inline-block;
}

.fb-tabs li a {
  display: block;
  padding: 10px;
  border-radius: 5px 5px 0 0;
  font-size: 13px;
  cursor: pointer;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

.fb-tabs li.active a {
  border: 1px solid #ccc;
  margin-bottom: -1px;
  border-bottom-color: #fff;
}

.fb-tab-content .fb-tab-pane {
  padding: 0 20px;
  display: none;
}

.fb-tab-content .fb-tab-pane.active {
  display: block;
}

.fb-add-field-types .section {
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.fb-add-field-types {
  font-size: 0;
  /* Inline block fix */
}

.fb-add-field-types a {
  font-size: 13px;
  display: inline-block;
  width: 48.5%;
  background-color: $prim-color;
  margin-bottom: 9px;
  box-sizing: border-box;


  &:nth-child(odd) {
    margin-right: 3%;
  }

  .symbol {
    opacity: .6;
    margin: 0 .25em 0 -1em;
  }
}

.fb-response-fields {
  padding-bottom: 150px;
}

.fb-response-fields a.sortable-placeholder {
  display: block;
  border: 1px dashed #ddd;
  min-height: 80px;
  height: 80px;
  width: 100%;
}

/* Field */

.fb-field-wrapper {
  cursor: pointer;
  position: relative;
  margin-bottom: 20px;

  input {
    border-radius: 3px;
    border: thin solid #ddd;
  }
}

.fb-field-wrapper:hover .actions-wrapper,.fb-field-wrapper.editing .actions-wrapper {
  display: block;
}

.fb-field-wrapper:hover .subtemplate-wrapper {
  border-color: #ddd;
  border-radius: 3px;
}

/* Editing */

.fb-field-wrapper.editing {
  background-color: $editing-bg;
  border-radius: 3px;
}

.fb-field-wrapper.editing .subtemplate-wrapper {
  border-color: $editing-border;
  border-style: solid;
  margin: 0;
  border-radius: 3px;
}

.fb-field-wrapper .actions-wrapper {
  display: none;
  position: absolute;
  bottom: -7px;
  right: 5px;
  z-index: 3;
}

.fb-field-wrapper .actions-wrapper a {
  display: inline-block;
  background-color: #ccc;
  padding: 2px 8px;
}

.edit-response-field {
  input, textarea, select {
    border: thin solid #ddd;
    border-radius: .25em;
    padding: .5em;
    display: inline-block;
    height: auto;
    vertical-align: middle;

    &:focus {
      outline: none;
      border: thin solid $prim-color;
    }
  }
  select {
    font-size: 14px;
  }
}

.fb-field-wrapper .actions-wrapper a.js-duplicate,
.fb-edit-field-wrapper .js-add-option {
  background-color: $affirmitive-color;
  border: none;
}

.fb-field-wrapper .actions-wrapper a.js-clear,
.fb-edit-field-wrapper .js-remove-option {
  background-color: $negative-color;
  border: none;
}

.fb-field-wrapper .subtemplate-wrapper {
  border: 1px dashed transparent;
  margin-bottom: 10px;
  padding: 10px;
  position: relative;
}

.fb-field-wrapper .subtemplate-wrapper .cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.fb-field-wrapper .subtemplate-wrapper > label {
  display: block;
  border-bottom: thin solid #eee;
  padding-bottom: 3px;
  margin-bottom: 7px;
}

.fb-field-wrapper .subtemplate-wrapper abbr {
  color: #f00;
}

.fb-field-wrapper .input-line {
  clear: both;
  margin-bottom: 10px;
}

.fb-field-wrapper .input-line .above-line {
  margin-top: 7px;
}

.fb-field-wrapper .input-line > span {
  display: inline-block;
  vertical-align: top;
}

.fb-field-wrapper .input-line > span input {
  width: 100%;
}

.fb-field-wrapper .input-line > span > label {
  display: block;
  font-size: 13px;
  margin-left: 3px;
}

.fb-field-wrapper .help-block {
  display: block;
  font-size: 12px;
  margin-top: 5px;
}

.fb-edit-field-wrapper {
  font-size: 13px;
}

.fb-edit-field-wrapper .fb-field-label {
  font-weight: normal;
  background: #eee;
  padding: .75em;
  color: #666;
  font-size: 1.25em;

  .field-type {
    margin-top: .5em;
    display: block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
    &:before {
      content: 'Type: ';
      color: #999;
    }
  }

  .fa.fa-arrow-right {
    display: none;
  }
}

.fb-edit-field-wrapper .fb-edit-section-header {
  border-bottom: 1px solid #ddd;
  margin-top: 25px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  clear: both;
  font-weight: 700;
}

.fb-edit-field-wrapper .js-add-option,.fb-edit-field-wrapper .js-remove-option {
  padding: 3px 6px;
}

.fb-edit-field-wrapper .fb-bottom-add {
  margin-top: 8px;
}

.fb-common-wrapper .fb-label-description {
  margin-bottom: 10px;
}

.fb-common-wrapper .fb-label-description input,.fb-common-wrapper .fb-label-description textarea {
  width: 100%;
}

.fb-common-wrapper .fb-label-description textarea {
  min-height: 5em;
}

.response-field-draggable-helper {
  border: 1px dashed #ddd;
  background: #eee;
}

.response-field-text input.rf-size-small {
  width: 130px;
}

.response-field-text input.rf-size-medium {
  width: 300px;
}

.response-field-text input.rf-size-large {
  width: 100%;
}

.response-field-paragraph textarea.rf-size-small {
  width: 200px;
  min-height: 60px;
}

.response-field-paragraph textarea.rf-size-medium {
  width: 400px;
  min-height: 100px;
}

.response-field-paragraph textarea.rf-size-large {
  width: 100%;
  min-height: 200px;
}

.response-field-address .street {
  width: 400px;
}

.response-field-address .city,.response-field-address .state,.response-field-address .zip,.response-field-address .country {
  width: 198px;
}

.response-field-date .month,.response-field-date .day,.response-field-date .year {
  width: 50px;
}

.response-field-time .hours,.response-field-time .minutes,.response-field-time .seconds {
  width: 50px;
}

.response-field-checkboxes .fb-option,.response-field-radio .fb-option {
  margin-bottom: 5px;
  display: inline-block;
}

.response-field-website input {
  width: 200px;
}