$integration-tab-active-bg-color: white;
$integration-tab-bg-color: transparent;
$integration-tab-active-border: 1px solid darken($border-color, 10%);
$integration-tab-warning-bg-color: $dirty-color;
$integration-tab-warning-color: darken($dirty-color, 60%);

#integration-tabs form.formtastic .radio--iconic fieldset,
form.formtastic .radio--iconic fieldset {
  padding-top: 12px !important;
  //margin-bottom: 24px !important;
  border-bottom: none !important;

  label {
    position: relative;

  }
}

#integration-tabs form.formtastic fieldset > ol > li.radio--iconic fieldset ol,
form.formtastic fieldset > ol > li.radio--iconic fieldset ol {
  width: 100%;
  margin: 120px 0;
  padding: 0;

  &:before {
    background-color: $content-background;
    bottom: 0;
    content: ' ';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    z-index: 1;
  }

  &:after {
    background-color: $content-background;
    bottom: 0;
    content: ' ';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
  }

  .disabled * {
    color: $disabled-color !important;
  }

  input {
    display: none;
  }

  li {
    border-color: $border-color;
    border-style: solid;
    border-width: 0 1px 1px 0;
    box-sizing: border-box;
    display: block;
    float: left;
    height: 153px;
    margin: 0 0 0 0;
    position: relative;
    width: 33.333%;

    &> label {
      width: 60%;
      min-height: 104px;
      padding: 24px 5% 24px 35% !important;
      cursor: pointer;
      margin: 0 0 0 0 !important;
      background-color: white;

      &:hover span:before {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
      }

      span {
        width: 80%;
        max-width: 400px;
        display: block;
        font-weight: normal;
        //height: $font-size * $line-height * 5 //once we have thos things defined
        height: 80px;
        overflow: hidden;

        &:before {
          display: block;
          width: 30%;
          height: 100px;
          position: absolute;
          top: 24px;
          left: 0;
          content: "";
          background-repeat: no-repeat;
          background-position: right top;
          background-size: 70% auto;
          -webkit-filter: grayscale(1);
          filter: grayscale(1);
        }

        code, a {
          position: relative;
          z-index: 1000;
          cursor: text;
          @include opacity(0.5);

          &:hover {
            @include opacity(1);
          }
        }

        a {
          color: $link-color;
          cursor: pointer;

          &:hover {
            @include opacity(1);
          }
        }

        .github {
          position: absolute;
          z-index: 1000;
          top: 24px;
          right: 6%;
          width: 6%;
          height: 24px;
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzMgMzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJtMTUyLjYxIDU1LjQ1Yy04Ljk5NCAwLTE2LjI4OCA3LjI5My0xNi4yODggMTYuMjkgMCA3LjE5NyA0LjY2NyAxMy4zMDIgMTEuMTQgMTUuNDU2LjgxNS4xNSAxLjExMi0uMzUzIDEuMTEyLS43ODUgMC0uMzg2LS4wMTQtMS40MTEtLjAyMi0yLjc3LTQuNTMxLjk4NC01LjQ4Ny0yLjE4NC01LjQ4Ny0yLjE4NC0uNzQxLTEuODgyLTEuODA5LTIuMzgzLTEuODA5LTIuMzgzLTEuNDc5LTEuMDEuMTEyLS45OS4xMTItLjk5IDEuNjM1LjExNSAyLjQ5NSAxLjY3OSAyLjQ5NSAxLjY3OSAxLjQ1MyAyLjQ4OSAzLjgxMyAxLjc3IDQuNzQxIDEuMzUzLjE0OC0xLjA1Mi41NjktMS43NyAxLjAzNC0yLjE3Ny0zLjYxNy0uNDExLTcuNDItMS44MDktNy40Mi04LjA1IDAtMS43NzguNjM1LTMuMjMzIDEuNjc3LTQuMzcxLS4xNjgtLjQxMi0uNzI3LTIuMDY5LjE2LTQuMzExIDAgMCAxLjM2Ny0uNDM4IDQuNDc5IDEuNjcgMS4yOTktLjM2MiAyLjY5My0uNTQyIDQuMDc4LS41NDkgMS4zODQuMDA3IDIuNzc3LjE4NyA0LjA3OC41NDkgMy4xMS0yLjEwOCA0LjQ3NS0xLjY3IDQuNDc1LTEuNjcuODg5IDIuMjQyLjMzIDMuODk5LjE2MyA0LjMxMSAxLjA0NCAxLjEzOCAxLjY3NCAyLjU5MyAxLjY3NCA0LjM3MSAwIDYuMjU4LTMuODA5IDcuNjM1LTcuNDM3IDguMDQuNTg0LjUwMyAxLjEwNSAxLjQ5NyAxLjEwNSAzLjAyIDAgMi4xNzctLjAyIDMuOTM0LS4wMiA0LjQ2OCAwIC40MzYuMjk0Ljk0MyAxLjEyLjc4NCA2LjQ2OC0yLjE1OSAxMS4xMzEtOC4yNiAxMS4xMzEtMTUuNDU1IDAtOC45OTctNy4yOTQtMTYuMjktMTYuMjkxLTE2LjI5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTM2LTU1KSIgZmlsbD0iIzE2MTYxNCIvPjwvZz48L3N2Zz4=);
          text-indent: 100%;
          white-space: nowrap;
          overflow: hidden;
          @include opacity(0.5);

          &:hover {
            @include opacity(1);
          }
        }
      }
    }
  }
}

#integration-tabs form.formtastic fieldset > ol > li.radio--iconic.plugin fieldset legend,
form.formtastic fieldset > ol > li.radio--iconic.plugin fieldset legend {
  white-space: nowrap;
}

#integration-tabs form.formtastic fieldset > ol > li.radio--iconic input[type="radio"]:disabled,
form.formtastic fieldset > ol > li.radio--iconic input[type="radio"]:disabled {
  &+ span {
    &:hover:after {
      content: "\f071";
      color: $error-color;
    }
  }
}

#integration-tabs form.formtastic fieldset > ol > li.radio--iconic input[type="radio"],
form.formtastic fieldset > ol > li.radio--iconic input[type="radio"] {

  &+ span {
    &:hover {

      &:after {
        content: "\f00c";
        color: $success-color;
        background-color: transparent;
      }

      .github, code, a {
        @include opacity(0.75);
      }

    }

    &:after {
      font-family: FontAwesome;
      font-weight: normal;
      font-style: normal;
      display: inline-block;
      text-decoration: inherit;
      text-decoration: none;
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      font-size: 16px;
      text-align: right;
      vertical-align: bottom;
      //border: 1px solid $border-color;
      min-height: 104px;
      padding: 24px 10% 24px 10% !important;
      background-color: rgba(white, 0.5);
      color: $success-color;
      height: 100px;
      //overflow-y: hidden;
      line-height: 200px;

      overflow-y: hidden;

    }
  }

  &:checked,  {

    &+ span, &+ span:hover{


      &:before {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
      }

      &:after {
        content: "\f00c";
        background-color: transparent;
      }
    }

  }

}

.no-deployment-option-present .radio--iconic label span:before {
  //-webkit-filter: grayscale(0);
  //filter: grayscale(0);
}

#integration-tabs form.formtastic fieldset > ol > li.radio--iconic,
form.formtastic fieldset > ol > li.radio--iconic {
  position: relative;

  fieldset legend {
    font-size: 16px;
  }

  .inline-hints {
    position: absolute;
    z-index: 1000;
    top: 40px;
    left: 0;
    font-size: 14px;
    line-height: 1.5;
    max-width: 800px;
    width: 100%;
  }
}

#integration-tabs form.formtastic fieldset > ol > li.radio--iconic fieldset ol li.deployment_option_on_3scale span:before, form.formtastic fieldset > ol > li.radio--iconic fieldset ol li.deployment_option_on_3scale span:before {
  background-image: url(data:image/svg+xml;base64,[encoded data, 9700 characters]), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTE1LjEyIDI0LjE5Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTEuNTYyLTExLjEyNCkiPjxwYXRoIGQ9Im0xNC4wNSAzMi43Mjh2LTE5LjA2bDE5LjA2IDE5LjA2di0xOS4wNiIgaWQ9IjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzA5MCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjUiLz48ZyBmaWxsPSIjMDkwIiBjb2xvcj0iIzAwMCI+PHBhdGggZD0ibTQ0LjY4OCAxMS4xODhsLS42ODggMS4yODEtNS4zMTMgOS42NTYtLjY4OCAxLjIxOS42ODggMS4yMTkgNS4zMTMgOS4zNDQuNzE5IDEuMjgxaDEuNDY5IDEwLjg3NSAxLjU2M2wuNjg4LTEuNDA2IDMuOTY5LTggMS43ODEtMy42MjVoLTQuMDNsLTEwLjE1Ni4wMzFjLTEuMzIxLS4wMTktMi41MzYgMS4xNzktMi41MzYgMi41IDAgMS4zMjEgMS4yMTUgMi41MTkgMi41MzYgMi41bDYuMTI1LS4wMzEtMS41IDMuMDNoLTcuODc1bC0zLjkwNi02Ljg3NSAzLjkzOC03LjEyNWg4LjM3N2wxLjk1MyA0LjAxaDUuMDNsLTMuMTcyLTcuNjAyLS42ODgtMS40MDZoLTEuNTYzLTExLjQwOHoiLz48cGF0aCBkPSJtNzAuMDEgMTEuMTU2Yy0xLjMwOS4wMTYtMi40ODUgMS4yMjItMi40NjkgMi41MzF2Ni41MTVoNXYtNi41MTVjLjAxNy0xLjMzLTEuMjAxLTIuNTQ4LTIuNTMxLTIuNTMxIi8+PC9nPjx1c2UgeGxpbms6aHJlZj0iIzAiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDExMS4xNC4wNDgpIiB3aWR0aD0iNzQ0LjA5IiBoZWlnaHQ9IjEwNTIuMzYiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSguMTA2LjMzKSI+PHBhdGggaWQ9IjEiIGQ9Im0xMDQuOTEgMTMuMzc0bDE5LjA4IDE5LjAyIiBmaWxsPSJub25lIiBzdHJva2U9IiMwOTAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1Ii8+PHVzZSBoZWlnaHQ9IjEwNTIuMzYiIHdpZHRoPSI3NDQuMDkiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDIyOC45MyAwKSIgeGxpbms6aHJlZj0iIzEiLz48L2c+PHBhdGggZD0ibTcwLjAxIDM1LjJjLTEuMzA5LS4wMTYtMi40ODUtMS4yMjItMi40NjktMi41MzF2LTEwLjQ2NGg1djEwLjQ2NGMuMDE3IDEuMzMtMS4yMDEgMi41NDgtMi41MzEgMi41MzEiIGNvbG9yPSIjMDAwIiBmaWxsPSIjMDkwIi8+PC9nPjwvc3ZnPg==);

  background-repeat: no-repeat, no-repeat;
  background-position: right top, right bottom;
  background-size: 70% auto, 70% auto;
  height: 50px;
}

.deployment_option_on_premise span:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTE1LjEyIDI0LjE5Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTEuNTYyLTExLjEyNCkiPjxwYXRoIGQ9Im0xNC4wNSAzMi43Mjh2LTE5LjA2bDE5LjA2IDE5LjA2di0xOS4wNiIgaWQ9IjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzA5MCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjUiLz48ZyBmaWxsPSIjMDkwIiBjb2xvcj0iIzAwMCI+PHBhdGggZD0ibTQ0LjY4OCAxMS4xODhsLS42ODggMS4yODEtNS4zMTMgOS42NTYtLjY4OCAxLjIxOS42ODggMS4yMTkgNS4zMTMgOS4zNDQuNzE5IDEuMjgxaDEuNDY5IDEwLjg3NSAxLjU2M2wuNjg4LTEuNDA2IDMuOTY5LTggMS43ODEtMy42MjVoLTQuMDNsLTEwLjE1Ni4wMzFjLTEuMzIxLS4wMTktMi41MzYgMS4xNzktMi41MzYgMi41IDAgMS4zMjEgMS4yMTUgMi41MTkgMi41MzYgMi41bDYuMTI1LS4wMzEtMS41IDMuMDNoLTcuODc1bC0zLjkwNi02Ljg3NSAzLjkzOC03LjEyNWg4LjM3N2wxLjk1MyA0LjAxaDUuMDNsLTMuMTcyLTcuNjAyLS42ODgtMS40MDZoLTEuNTYzLTExLjQwOHoiLz48cGF0aCBkPSJtNzAuMDEgMTEuMTU2Yy0xLjMwOS4wMTYtMi40ODUgMS4yMjItMi40NjkgMi41MzF2Ni41MTVoNXYtNi41MTVjLjAxNy0xLjMzLTEuMjAxLTIuNTQ4LTIuNTMxLTIuNTMxIi8+PC9nPjx1c2UgeGxpbms6aHJlZj0iIzAiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDExMS4xNC4wNDgpIiB3aWR0aD0iNzQ0LjA5IiBoZWlnaHQ9IjEwNTIuMzYiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSguMTA2LjMzKSI+PHBhdGggaWQ9IjEiIGQ9Im0xMDQuOTEgMTMuMzc0bDE5LjA4IDE5LjAyIiBmaWxsPSJub25lIiBzdHJva2U9IiMwOTAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1Ii8+PHVzZSBoZWlnaHQ9IjEwNTIuMzYiIHdpZHRoPSI3NDQuMDkiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDIyOC45MyAwKSIgeGxpbms6aHJlZj0iIzEiLz48L2c+PHBhdGggZD0ibTcwLjAxIDM1LjJjLTEuMzA5LS4wMTYtMi40ODUtMS4yMjItMi40NjktMi41MzF2LTEwLjQ2NGg1djEwLjQ2NGMuMDE3IDEuMzMtMS4yMDEgMi41NDgtMi41MzEgMi41MzEiIGNvbG9yPSIjMDAwIiBmaWxsPSIjMDkwIi8+PC9nPjwvc3ZnPg==);
}

.deployment_option_plugin_ruby span:before {
  background-image: url(data:image/svg+xml;base64,[encoded data, 8688 characters]);
}

.deployment_option_plugin_java span:before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMwMHB4IiBoZWlnaHQ9IjQwMHB4IiB2aWV3Qm94PSIwIDAgMzAwIDQwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzAwIDU1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiM1MzgyQTE7IiBkPSJNMTAyLjY4MSwyOTEuMzI0YzAsMC0xNC4xNzgsOC4yNDUsMTAuMDksMTEuMDM1YzI5LjQsMy4zNTQsNDQuNDI2LDIuODczLDc2LjgyNS0zLjI1OWMwLDAsOC41MTgsNS4zNDEsMjAuNDE0LDkuOTY3QzEzNy4zOCwzNDAuMTk1LDQ1LjYzNCwzMDcuMjY0LDEwMi42ODEsMjkxLjMyNCIvPjxwYXRoIHN0eWxlPSJmaWxsOiM1MzgyQTE7IiBkPSJNOTMuODA2LDI1MC43MDRjMCwwLTE1LjkwMiwxMS43NzEsOC4zODQsMTQuMjgzYzMxLjQwNiwzLjI0LDU2LjIwOCwzLjUwNSw5OS4xMjUtNC43NTljMCwwLDUuOTM2LDYuMDE4LDE1LjI3LDkuMzA5QzEyOC43NzEsMjk1LjIxNSwzMC45NjIsMjcxLjU2Miw5My44MDYsMjUwLjcwNCIvPjxwYXRoIHN0eWxlPSJmaWxsOiNFNzZGMDA7IiBkPSJNMTY4LjYyNSwxODEuNzk5YzE3Ljg5NiwyMC42MDQtNC43MDIsMzkuMTQ1LTQuNzAyLDM5LjE0NXM0NS40NDEtMjMuNDU4LDI0LjU3Mi01Mi44MzNjLTE5LjQ5MS0yNy4zOTQtMzQuNDM4LTQxLjAwNSw0Ni40NzktODcuOTM0QzIzNC45NzQsODAuMTc3LDEwNy45NjEsMTExLjg5OSwxNjguNjI1LDE4MS43OTkiLz48cGF0aCBzdHlsZT0iZmlsbDojNTM4MkExOyIgZD0iTTI2NC42ODQsMzIxLjM2OWMwLDAsMTAuNDkyLDguNjQ1LTExLjU1NSwxNS4zMzNjLTQxLjkyMywxMi43LTE3NC40ODgsMTYuNTM1LTIxMS4zMTQsMC41MDZjLTEzLjIzOC01Ljc1OSwxMS41ODctMTMuNzUxLDE5LjM5Ni0xNS40MjhjOC4xNDQtMS43NjYsMTIuNzk4LTEuNDM3LDEyLjc5OC0xLjQzN2MtMTQuNzIyLTEwLjM3MS05NS4xNTcsMjAuMzY0LTQwLjg1NywyOS4xNjZDMTgxLjIzNiwzNzMuNTI0LDMwMy4wOTUsMzM4LjY5NSwyNjQuNjg0LDMyMS4zNjkiLz48cGF0aCBzdHlsZT0iZmlsbDojNTM4MkExOyIgZD0iTTEwOS40OTksMjA4LjYxN2MwLDAtNjcuNDMxLDE2LjAxNi0yMy44NzksMjEuODMyYzE4LjM4OSwyLjQ2Miw1NS4wNDcsMS45MDUsODkuMTkzLTAuOTU2YzI3LjkwNi0yLjM1NCw1NS45MjctNy4zNTksNTUuOTI3LTcuMzU5cy05Ljg0LDQuMjE0LTE2Ljk1OSw5LjA3NWMtNjguNDc1LDE4LjAwOS0yMDAuNzU2LDkuNjMxLTE2Mi42NzQtOC43OUM4My4zMTMsMjA2Ljg1MSwxMDkuNDk5LDIwOC42MTcsMTA5LjQ5OSwyMDguNjE3Ii8+PHBhdGggc3R5bGU9ImZpbGw6IzUzODJBMTsiIGQ9Ik0yMzAuNDYyLDI3Ni4yMzFjNjkuNjA4LTM2LjE3MSwzNy40MjQtNzAuOTMxLDE0Ljk2LTY2LjI0OGMtNS41MDYsMS4xNDYtNy45NjEsMi4xMzktNy45NjEsMi4xMzlzMi4wNDQtMy4yMDIsNS45NDgtNC41ODhjNDQuNDQxLTE1LjYyNCw3OC42MTksNDYuMDgxLTE0LjM0Niw3MC41MkMyMjkuMDYzLDI3OC4wNTUsMjMwLjE0LDI3Ny4wOTIsMjMwLjQ2MiwyNzYuMjMxIi8+PHBhdGggc3R5bGU9ImZpbGw6I0U3NkYwMDsiIGQ9Ik0xODguNDk1LDQuMzk5YzAsMCwzOC41NSwzOC41NjMtMzYuNTYzLDk3Ljg2MmMtNjAuMjMzLDQ3LjU2OC0xMy43MzUsNzQuNjktMC4wMjUsMTA1LjY3OGMtMzUuMTU5LTMxLjcyMi02MC45NjEtNTkuNjQ3LTQzLjY1MS04NS42MzdDMTMzLjY2Myw4NC4xNTEsMjA0LjA0OSw2NS42NTQsMTg4LjQ5NSw0LjM5OSIvPjxwYXRoIHN0eWxlPSJmaWxsOiM1MzgyQTE7IiBkPSJNMTE2LjMzOSwzNzQuMjQ2YzY2LjgxNSw0LjI3NywxNjkuNDE3LTIuMzczLDE3MS44NDctMzMuOTg4YzAsMC00LjY3MSwxMS45ODUtNTUuMjE5LDIxLjUwM2MtNTcuMDI4LDEwLjczMi0xMjcuMzY0LDkuNDc5LTE2OS4wODEsMi42MDFDNjMuODg3LDM2NC4zNjEsNzIuNDI2LDM3MS40MywxMTYuMzM5LDM3NC4yNDYiLz48L3N2Zz4=);
}

.deployment_option_plugin_nodejs span:before {
  background-image: url(data:image/svg+xml;base64,[encoded data, 10320 characters]);
}

.deployment_option_plugin_python span:before {
  background-image: url(data:image/svg+xml;base64,[encoded data, 7108 characters]);
}

.deployment_option_plugin_php span:before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiAgIHZlcnNpb249IjEuMSIgICB3aWR0aD0iMzAwIiAgIGhlaWdodD0iMTU5IiAgIHZpZXdCb3g9IjAgMCAzMDAgMTYwIiAgIGlkPSJzdmcyOTQzIj4gIDxkZWZzICAgICBpZD0iZGVmczI5NDUiPiAgICA8bGluZWFyR3JhZGllbnQgICAgICAgeDE9IjE1MCIgICAgICAgeTE9Ijg0IiAgICAgICB4Mj0iMjk5IiAgICAgICB5Mj0iODQiICAgICAgIGlkPSJsaW5lYXJHcmFkaWVudDM3OTgiICAgICAgIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4gICAgICA8c3RvcCAgICAgICAgIGlkPSJzdG9wMzgwMCIgICAgICAgICBzdHlsZT0ic3RvcC1jb2xvcjojZGRkY2U5O3N0b3Atb3BhY2l0eToxIiAgICAgICAgIG9mZnNldD0iMCIgLz4gICAgICA8c3RvcCAgICAgICAgIGlkPSJzdG9wMzgwMiIgICAgICAgICBzdHlsZT0ic3RvcC1jb2xvcjojNTY2NGEzO3N0b3Atb3BhY2l0eToxIiAgICAgICAgIG9mZnNldD0iMC4zNyIgLz4gICAgICA8c3RvcCAgICAgICAgIGlkPSJzdG9wMzgwNCIgICAgICAgICBzdHlsZT0ic3RvcC1jb2xvcjojMDAwMDAwO3N0b3Atb3BhY2l0eToxIiAgICAgICAgIG9mZnNldD0iMSIgLz4gICAgPC9saW5lYXJHcmFkaWVudD4gICAgPHJhZGlhbEdyYWRpZW50ICAgICAgIGN4PSI3Ny45MTQyNjEiICAgICAgIGN5PSItNDguNTQ0NTIxIiAgICAgICByPSIxNDYiICAgICAgIGZ4PSI3Ny45MTQyNjEiICAgICAgIGZ5PSItNDguNTQ0NTIxIiAgICAgICBpZD0icmFkaWFsR3JhZGllbnQzODcwIiAgICAgICB4bGluazpocmVmPSIjbGluZWFyR3JhZGllbnQzNzk4IiAgICAgICBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgICAgICAgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxLjUwODk0OTcsMCwwLDEuMzU4MjE2NCwtMzkuMDI4OTE3LDc2Ljk1Nzc0NykiIC8+ICA8L2RlZnM+ICA8ZWxsaXBzZSAgICAgY3g9IjE1MCIgICAgIGN5PSI4MCIgICAgIHJ4PSIxNDYiICAgICByeT0iNzYiICAgICBpZD0iZWxsaXBzZTM4NjAiICAgICBzdHlsZT0iZmlsbDojNmM3ZWI3O3N0cm9rZTp1cmwoI3JhZGlhbEdyYWRpZW50Mzg3MCk7c3Ryb2tlLXdpZHRoOjUuNSIgLz4gIDxwYXRoICAgICBkPSJtIDQ1LDEyNSAxNiwtODEgMzcsMCBjIDE2LDEgMjQsOSAyNCwyMyAwLDI0IC0xOSwzOCAtMzYsMzcgbCAtMTgsMCAtNCwyMSAtMTksMCB6IG0gMjcsLTM2IDUsLTMwIDEzLDAgYyA3LDAgMTIsMyAxMiw5IC0xLDE3IC05LDIwIC0xOCwyMSBsIC0xMiwwIHoiICAgICBpZD0icCIgICAgIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6I2ZmZmZmZjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWpvaW46cm91bmQiIC8+ICA8cGF0aCAgICAgZD0ibSAxMTYsMTA0IDE2LC04MSAxOSwwIC00LDIxIDE4LDAgYyAxNiwxIDIyLDkgMjAsMTkgbCAtNyw0MSAtMjAsMCA3LC0zNyBjIDEsLTUgMSwtOCAtNiwtOCBsIC0xNSwwIC05LDQ1IC0xOSwwIHoiICAgICBpZD0iaCIgICAgIHN0eWxlPSJzdHJva2U6I2ZmZmZmZjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWpvaW46cm91bmQiIC8+ICA8dXNlICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzQsMCkiICAgICBpZD0icDIiICAgICB4bGluazpocmVmPSIjcCIgLz48L3N2Zz4=);
}

.deployment_option_plugin_csharp span:before {
  background-image: url(data:image/svg+xml;base64,[encoded data, 62544 characters]);
}

.deployment_option_plugin_rest span:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTUzNiAxMjgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0ibTEwNDAgOTYwYzAgMjItNy44MzMgNDAuODMzLTIzLjUgNTYuNS0xNS42NjcgMTUuNjY3LTM0LjUgMjMuNS01Ni41IDIzLjUtMjIgMC00MC44MzMtNy44MzMtNTYuNS0yMy41LTE1LjY2Ny0xNS42NjctMjMuNS0zNC41LTIzLjUtNTYuNSAwLTIyIDcuODMzLTQwLjgzMyAyMy41LTU2LjUgMTUuNjY3LTE1LjY2NyAzNC41LTIzLjUgNTYuNS0yMy41IDIyIDAgNDAuODMzIDcuODMzIDU2LjUgMjMuNSAxNS42NjcgMTUuNjY3IDIzLjUgMzQuNSAyMy41IDU2LjVtMjU2IDBjMCAyMi03LjgzMyA0MC44MzMtMjMuNSA1Ni41LTE1LjY2NyAxNS42NjctMzQuNSAyMy41LTU2LjUgMjMuNS0yMiAwLTQwLjgzMy03LjgzMy01Ni41LTIzLjUtMTUuNjY3LTE1LjY2Ny0yMy41LTM0LjUtMjMuNS01Ni41IDAtMjIgNy44MzMtNDAuODMzIDIzLjUtNTYuNSAxNS42NjctMTUuNjY3IDM0LjUtMjMuNSA1Ni41LTIzLjUgMjIgMCA0MC44MzMgNy44MzMgNTYuNSAyMy41IDE1LjY2NyAxNS42NjcgMjMuNSAzNC41IDIzLjUgNTYuNW0xMTIgMTYwdi0zMjBjMC04LjY2Ny0zLjE2Ny0xNi4xNy05LjUtMjIuNS02LjMzMy02LjMzMy0xMy44MzMtOS41LTIyLjUtOS41aC0xMjE2Yy04LjY2NyAwLTE2LjE3IDMuMTY3LTIyLjUgOS41LTYuMzMzIDYuMzMzLTkuNSAxMy44MzMtOS41IDIyLjV2MzIwYzAgOC42NjcgMy4xNjcgMTYuMTcgOS41IDIyLjUgNi4zMzMgNi4zMzMgMTMuODMzIDkuNSAyMi41IDkuNWgxMjE2YzguNjY3IDAgMTYuMTctMy4xNjcgMjIuNS05LjUgNi4zMzMtNi4zMzMgOS41LTEzLjgzMyA5LjUtMjIuNW0tMTIzMC00ODBoMTE4MGwtMTU3LTQ4MmMtMi42NjctOC42NjctOC0xNS44MzMtMTYtMjEuNS04LTUuNjY3LTE2LjY2Ny04LjUtMjYtOC41aC03ODJjLTkuMzMzIDAtMTggMi44MzMtMjYgOC41LTggNS42NjctMTMuMzMzIDEyLjgzMy0xNiAyMS41bC0xNTcgNDgybTEzNTggMTYwdjMyMGMwIDQ0LTE1LjY2NyA4MS42Ny00NyAxMTMtMzEuMzMgMzEuMzMtNjkgNDctMTEzIDQ3aC0xMjE2Yy00NCAwLTgxLjY3LTE1LjY2Ny0xMTMtNDctMzEuMzMtMzEuMzMtNDctNjktNDctMTEzdi0zMjBjMC0xNi42NjcgNS4zMzMtNDEuNjY3IDE2LTc1bDE5Ny02MDZjMTEuMzMzLTM1LjMzIDMyLjMzLTY0IDYzLTg2IDMwLjY2Ny0yMiA2NC4zMy0zMyAxMDEtMzNoNzgyYzM2LjY2NyAwIDcwLjMzIDExIDEwMSAzMyAzMC42NjcgMjIgNTEuNjY3IDUwLjY2NyA2MyA4NmwxOTcgNjA2YzEwLjY2NyAzMy4zMyAxNiA1OC4zMyAxNiA3NSIgZmlsbD0iI2I3NDEwZSIvPjwvZz48L3N2Zz4=);
}

.backend_version_oauth span:before {
  background-image: url(data:image/svg+xml;base64,[encoded data, 7008 characters]);
}

.backend_version_1 span:before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMTY4M3B4IiBoZWlnaHQ9IjE1OTJweCIgdmlld0JveD0iMCAwIDE2ODMgMTU5MiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+ICAgICAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJTaGFwZS0rLVNoYXBlLTIiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAtNTg4LjAwMDAwMCkiIGZpbGw9IiM3RUQzMjEiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik04MzIsOTcyIEM4MzIsOTE4LjY2NjY2NyA4MTMuMzMzMzMzLDg3My4zMzMzMzMgNzc2LDgzNiBDNzM4LjY2NjY2Nyw3OTguNjY2NjY3IDY5My4zMzMzMzMsNzgwIDY0MCw3ODAgQzU4Ni42NjY2NjcsNzgwIDU0MS4zMzMzMzMsNzk4LjY2NjY2NyA1MDQsODM2IEM0NjYuNjY2NjY3LDg3My4zMzMzMzMgNDQ4LDkxOC42NjY2NjcgNDQ4LDk3MiBDNDQ4LDEwMDAgNDU0LjMzMzMzMywxMDI3LjY2NjY3IDQ2NywxMDU1IEM0MzkuNjY2NjY3LDEwNDIuMzMzMzMgNDEyLDEwMzYgMzg0LDEwMzYgQzMzMC42NjY2NjcsMTAzNiAyODUuMzMzMzMzLDEwNTQuNjY2NjcgMjQ4LDEwOTIgQzIxMC42NjY2NjcsMTEyOS4zMzMzMyAxOTIsMTE3NC42NjY2NyAxOTIsMTIyOCBDMTkyLDEyODEuMzMzMzMgMjEwLjY2NjY2NywxMzI2LjY2NjY3IDI0OCwxMzY0IEMyODUuMzMzMzMzLDE0MDEuMzMzMzMgMzMwLjY2NjY2NywxNDIwIDM4NCwxNDIwIEM0MzcuMzMzMzMzLDE0MjAgNDgyLjY2NjY2NywxNDAxLjMzMzMzIDUyMCwxMzY0IEM1NTcuMzMzMzMzLDEzMjYuNjY2NjcgNTc2LDEyODEuMzMzMzMgNTc2LDEyMjggQzU3NiwxMjAwIDU2OS42NjY2NjcsMTE3Mi4zMzMzMyA1NTcsMTE0NSBDNTg0LjMzMzMzMywxMTU3LjY2NjY3IDYxMiwxMTY0IDY0MCwxMTY0IEM2OTMuMzMzMzMzLDExNjQgNzM4LjY2NjY2NywxMTQ1LjMzMzMzIDc3NiwxMTA4IEM4MTMuMzMzMzMzLDEwNzAuNjY2NjcgODMyLDEwMjUuMzMzMzMgODMyLDk3MiBMODMyLDk3MiBaIE0xNjgzLDE2NzYgQzE2ODMsMTY4Ny4zMzMzMyAxNjY2LjY2NjY3LDE3MDkuMzMzMzMgMTYzNCwxNzQyIEMxNjAxLjMzMzMzLDE3NzQuNjY2NjcgMTU3OS4zMzMzMywxNzkxIDE1NjgsMTc5MSBDMTU2MiwxNzkxIDE1NTIuNSwxNzg1LjY2NjY3IDE1MzkuNSwxNzc1IEMxNTI2LjUsMTc2NC4zMzMzMyAxNTE0LjMzMzMzLDE3NTMuMzMzMzMgMTUwMywxNzQyIEMxNDkxLjY2NjY3LDE3MzAuNjY2NjcgMTQ3OC44MzMzMywxNzE3LjMzMzMzIDE0NjQuNSwxNzAyIEMxNDUwLjE2NjY3LDE2ODYuNjY2NjcgMTQ0MiwxNjc4IDE0NDAsMTY3NiBMMTM0NCwxNzcyIEwxNTY0LDE5OTIgQzE1ODIuNjY2NjcsMjAxMC42NjY2NyAxNTkyLDIwMzMuMzMzMzMgMTU5MiwyMDYwIEMxNTkyLDIwODggMTU3OSwyMTE1IDE1NTMsMjE0MSBDMTUyNywyMTY3IDE1MDAsMjE4MCAxNDcyLDIxODAgQzE0NDUuMzMzMzMsMjE4MCAxNDIyLjY2NjY3LDIxNzAuNjY2NjcgMTQwNCwyMTUyIEw3MzMsMTQ4MSBDNjE1LjY2NjY2NywxNTY4LjMzMzMzIDQ5NCwxNjEyIDM2OCwxNjEyIEMyNTkuMzMzMzMzLDE2MTIgMTcwLjgzMzMzMywxNTc3LjgzMzMzIDEwMi41LDE1MDkuNSBDMzQuMTY2NjY2NywxNDQxLjE2NjY3IDAsMTM1Mi42NjY2NyAwLDEyNDQgQzAsMTEzNy4zMzMzMyAzMS42NjY2NjY3LDEwMzMgOTUsOTMxIEMxNTguMzMzMzMzLDgyOSAyNDEsNzQ2LjMzMzMzMyAzNDMsNjgzIEM0NDUsNjE5LjY2NjY2NyA1NDkuMzMzMzMzLDU4OCA2NTYsNTg4IEM3NjQuNjY2NjY3LDU4OCA4NTMuMTY2NjY3LDYyMi4xNjY2NjcgOTIxLjUsNjkwLjUgQzk4OS44MzMzMzMsNzU4LjgzMzMzMyAxMDI0LDg0Ny4zMzMzMzMgMTAyNCw5NTYgQzEwMjQsMTA4MiA5ODAuMzMzMzMzLDEyMDMuNjY2NjcgODkzLDEzMjEgTDEyNDgsMTY3NiBMMTM0NCwxNTgwIEMxMzQyLDE1NzggMTMzMy4zMzMzMywxNTY5LjgzMzMzIDEzMTgsMTU1NS41IEMxMzAyLjY2NjY3LDE1NDEuMTY2NjcgMTI4OS4zMzMzMywxNTI4LjMzMzMzIDEyNzgsMTUxNyBDMTI2Ni42NjY2NywxNTA1LjY2NjY3IDEyNTUuNjY2NjcsMTQ5My41IDEyNDUsMTQ4MC41IEMxMjM0LjMzMzMzLDE0NjcuNSAxMjI5LDE0NTggMTIyOSwxNDUyIEMxMjI5LDE0NDAuNjY2NjcgMTI0NS4zMzMzMywxNDE4LjY2NjY3IDEyNzgsMTM4NiBDMTMxMC42NjY2NywxMzUzLjMzMzMzIDEzMzIuNjY2NjcsMTMzNyAxMzQ0LDEzMzcgQzEzNTIuNjY2NjcsMTMzNyAxMzYwLjMzMzMzLDEzNDAuMzMzMzMgMTM2NywxMzQ3IEMxMzcxLDEzNTEgMTM4Ni4zMzMzMywxMzY1LjgzMzMzIDE0MTMsMTM5MS41IEMxNDM5LjY2NjY3LDE0MTcuMTY2NjcgMTQ2NywxNDQzLjY2NjY3IDE0OTUsMTQ3MSBDMTUyMywxNDk4LjMzMzMzIDE1NTEuODMzMzMsMTUyNyAxNTgxLjUsMTU1NyBDMTYxMS4xNjY2NywxNTg3IDE2MzUuNSwxNjEzIDE2NTQuNSwxNjM1IEMxNjczLjUsMTY1NyAxNjgzLDE2NzAuNjY2NjcgMTY4MywxNjc2IEwxNjgzLDE2NzYgWiIgaWQ9IlNoYXBlIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
}

.backend_version_2 span:before {
  background-image: url(data:image/svg+xml;base64,[encoded data, 7000 characters]);
}

*[data-state=closed] {
  display: none;
}

*[data-state=open] {
  display: inherit;
}

#integration-tabs {

  .integration {
    fieldset > ol > li label {
      text-align: right;
    }

    fieldset > ol > li.radio label {
      text-align: left;
    }
  }

  img.helpButton {
    position: absolute;
    top: 1.1em;
    right: 0;
  }

  .client img.helpButton {
    top: 1.4em;
  }

  #mapping-rules img.helpButton {
    top: 0;
  }

  .inlineHelper {
    left: auto !important;
    right: 0;
  }

  form.formtastic {
    fieldset {
      padding: 0 0 0 0;

      &.buttons {
        margin-bottom: 0;
      }
    }

    /* undom formatastic rule that bother firefox */
    legend:not(.label) {
      margin-bottom: 0;
    }

    fieldset[data-behavior~=toggle-inputs] {
      border: none;
      border-bottom: 1px solid $border-color;
      background-color: transparent;

      &.packed {
        border-color: $border-color;
      }

      fieldset legend {
        margin-bottom: 15px;
      }
    }

    fieldset > ol > li label {
      padding-top: 0.4em;
    }

    fieldset.inputs {
      padding-top: 1.6em;
      border-top: 1px solid $border-color;
    }

    fieldset.inputs fieldset.inputs {
      border-bottom: none;
      border-top: 1px solid $border-color;
      position: relative;

      legend:not(.label) {
        margin-bottom: 15px;
      }
    }

    fieldset.buttons {
      position: relative;
      border-bottom: none;
      button {
        font-size: 16px;
      }
    }

    fieldset  > ol > li {
      margin-bottom: 2em;
    }

    &.u-inline fieldset  > ol > li {
      margin-bottom: 0;
    }

    fieldset > ol > li legend label{
      width: 100%;
      white-space: nowrap;
    }

    fieldset > ol > li p.inline-hints {
      margin-top: 5px;
      color: $ribbon-shadow-color;
    }

    fieldset > ol > li p.inline-hints .warn {
      background-color: $dirty-color;
    }

    fieldset > ol > li p.inline-errors {
      overflow: auto;
      max-height: 200px;
      max-width: 550px;
    }

    td:not(:first-child) {
      padding-top: 10px;
      padding-bottom:10px;
    }
  }

  .radio.optional, .radio.required {
    li {

    }
    fieldset {
      margin: 0 0 0 0;
    }
    legend {
      margin-top: -5px;
    }
  }

  legend {
    width: auto;
    padding: 5px;
    margin-left: -5px;
    color: $ribbon-shadow-color;
    text-transform: uppercase;
    font-size: 11px;


  }

  %spacer {
    border-color: rgba(0,0,0,0.1);
    border-style: solid;
  }

  fieldset fieldset[name] {
    @extend %spacer;
    border-bottom-width: 1px;
    padding-left: 0;
    padding-bottom: 0;
    margin-bottom: 1em;
  }


  hr {
    @extend %spacer;
    border-width: 0;
    border-top-width: 1px;
    //margin-bottom: 1em;
    //margin-top: 1em;
  }

  .ui-tabs-panel {
    padding: 2em;
    background-color: $integration-tab-active-bg-color;
    border: $integration-tab-active-border;
    border-top: none;
    @include border-bottom-radius(5px);
  }

  .ui-tabs-hide { display: none; }



  .important-button {
    vertical-align: middle;
  }

  // sanbox proxy hsitory
  .sandbox-proxy-history {
    font-size: 13px;
    text-decoration: underline;
    font-weight: normal;
  }

  // feedback on the connections
  .feedback-summary {
    position: absolute;
    left: 0;

    .success, .success a {
      color: $success-color;
    }

    .error {
      color: $error-color;
    }
  }
  form.formtastic .feedback > fieldset.inputs {
    margin-top: -38px;
  }

  form.formtastic .feedback.client > fieldset.inputs {
    margin-top: -54px;
  }

  // sandbox or not
  .undo {
    display: none;
    margin-left: 10px;
    cursor: pointer;
  }

  .warning-host-header {
    color: $integration-tab-warning-color;
    cursor: help;
    margin-left: 10px;
  }

  input.sandbox {
    border-style: dashed;
  }
  // curl
  .curl {
    border: none;
    color: black;
    background: rgba(0, 0, 0, 0.05);
    font-size: 14px;
    padding: 0.5em;
    overflow: auto;
    margin-left: 25%;
    margin-top: -2em;
    max-width: 800px; // weird stuff happens with non-breaking spaces if no limit
  }

  .oauth .feedback {
    border-left: none;
  }

  .feedback {
    border-left: 5px solid transparent;
    padding-left: 40px;
    margin-left: 20px;
    border-color: $error-color;
    position: relative;

    .fa-puzzle-piece, .fa-hdd-o {
      color: $error-color;
    }

    &.success {
      border-color: $success-color;
      .fa-puzzle-piece, .fa-hdd-o {
        color: $success-color;
      }
    }

    &.no-test {
      border-color: $disabled-color;
      .fa-puzzle-piece, .fa-hdd-o {
        color: $disabled-color;
      }
    }

    &.never-test {
      border-color: transparent;
      .fa-puzzle-piece, .fa-hdd-o {
        color: $disabled-color;
      }
    }

    &>[class^="fa fa-"] {
      font-size: 40px;
      background-color: $content-background;
      margin-left: -60px;
      padding: 5px;
    }

    .fa-link {
      padding-top: 10px;
    }

    .fa-hdd-o {
      margin-left: -65px;
    }
    .fa-mobile-phone {
      font-size: 60px;
      margin-left: -57px;
      color: $success-color;
    }

    &.client {
      border-left: 1px solid $border-color;
    }

  }

  .production .feedback.client {
    border-left: none;
  }

  p.feedback-summary {
    background-color: transparent;
    width: 30%;
    color: $ribbon-shadow-color;
  }

  .nginx-config {
    float: right;
    color: $highlight-color;
    a {
      text-decoration: underline;
    }
  }

}

#integration-tabs.changed {
  #proxy section.staging, .staging .feedback > [class^="fa fa-"] {
    background-color: $integration-tab-warning-bg-color;
  }

  #proxy section.staging {
    background-color: $integration-tab-warning-bg-color;
    border-left: 1px solid $border-color;
    border-right: 1px solid $border-color;
    padding-left: 24px;
    padding-right: 24px;
  }

  form.proxy .pending-changes-warning {
    color: $integration-tab-warning-color;
  }

  #ui-id-2 .tab-title:after {
    content: " *";
  }
}

form.proxy {
  padding-top: 1em;
  background-color: $integration-tab-bg-color;

  .pending-changes-warning {
    // hackish positioning trick
    position: relative;
    font-weight: bolder;
    margin: 0 auto 0;
    text-align: center;
    color: transparent;
  }

  #help_layer_proxy_rule_bubble {
      //width: auto;
      //max-width: 40em;
      ul { list-style: circle; }
      p, table { margin-bottom: 1em; }
      table {
          width: 100%;
          padding-left: 1em;
      }
  }


  table#proxy-rules {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    padding-left: 6px;
    margin-bottom: 24px;

    tr {
      &.deleted {
        background-color: $delete-background-color;

        input,select {
          background-color: rgba(255,255,255,0.55);
          border-color: $delete-color;
        }
      }
    }

    td {
      padding-right: 12px;
    }


    td.http_method { width: 80px; }
    td.delta { width: 30px;  }
    td.metric { width: 100px;  }
    td.pattern { width: auto; }
    td.actions { width: 70px; }

    input, select {
      width: 98%;
      border: 1px solid $border-color;
      line-height: 1.5;
      font-size: 14px;
      padding: 3px;
      min-width: 30px;
      max-width: 100%;

      &.error {
        border: 1px solid $error-color;
        background-color: $error-background-color !important;
      }
    }

    td.delta input {
      padding-left: 0px;
      padding-right: 0px;
    }
  }
}
