.technical-contacts-buttons {
  padding-bottom: 10px;
  padding-top: 10px;
}

/* Scale the input fields properly */
.slack-webhook-input,
.technical-contacts-input {
  width: 100%;
}

.email-button {
  margin-bottom: 5px!important;
}

.dashicons-no {
  line-height: 1.4;
}

form[name="seravo-updates-form"] > .technical-contacts-error {
  display: none;
}

form[name="seravo-updates-form"].has-errors > .technical-contacts-error {
  background: #c51244;
  border-radius: 0;
  box-shadow: 1px 1px 1px #aaaaaa;
  color: white;
  display: block;
  margin: auto;
  max-width: 280px;
  padding: 10px;
  position: relative;
}

form[name="seravo-updates-form"].has-errors > .technical-contacts-error::before {
  border-bottom: 10px solid #c51244;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  content: '';
  height: 0;
  position: absolute;
  top: -10px;
  width: 0;
}

form[name="seravo-updates-form"].has-errors > .technical-contacts-error::after {
  background: #fff0f4;
  color: #c51244;
}

form[name="seravo-updates-form"].has-errors > .technical-contacts-input {
  background: #fff0f4;
  border: 1px solid #c51244;
  color: #eb819f;
}

.seravo-screenshots tbody {
  text-align: center;
}

.ba-slider {
  margin: 20px auto;
  overflow: hidden;
  position: relative;
}

.ba-slider img {
  display:block;
  max-width:none;
  width: 100%;
}

.ba-slider .ba-resize {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top:0;
  width: 50%;
}

.ba-slider .ba-handle { /* Thin line seperator */
  background: rgba(0,0,0,.5);
  bottom:0;
  cursor: ew-resize;
  left:50%;
  margin-left:-2px;
  position:absolute;
  top:0;
  width:4px;
}

.ba-slider.difference .ba-handle:after {  /* Big orange knob  */
  background: #ffb800; /* @orange */
  border:1px solid #e6a600; /* darken(@orange, 5%) */
  box-shadow:
    0 2px 6px rgba(0,0,0,.3),
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 60px 50px -30px #ffd466; /* lighten(@orange, 20%)*/
}

.ba-slider .ba-handle:after  {  /* Big knob  */
  background: #404040; /* @gray */
  border-radius: 50%;
  border:1px solid #383838; /* darken(@gray ) */
  color:white;
  content:'\21d4';
  font-size:36px;
  font-weight:bold;
  height: 64px;
  line-height:64px;
  margin: -32px 0 0 -32px;
  position: absolute;
  text-align:center;
  top: 50%;
  transition:all 0.3s ease;
  width: 64px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.3),
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 60px 50px -30px #808080; /* lighten(@gray, 20%)*/
}

.ba-slider .ba-handle.ba-draggable:after {
  font-size:30px;
  height: 48px;
  line-height:50px;
  margin: -24px 0 0 -24px;
  width: 48px;
}

.ba-text-block {
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  right: 20px;
  top: 20px;
}
