.add-pattern-div {
  margin-top: 6px;
}

.loading-layer {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background-color: white;
}

.loading-icon {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 11;
}

.loading-icon-select {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 11;
}

.loading-icon-checkbox {
  position: absolute;
  top: 7px;
  left: 3px;
  z-index: 11;
}

.glyphicon-refresh-animate {
  animation: spin 0.7s infinite linear;
  -webkit-animation: spin2 0.7s infinite linear;
}

@-webkit-keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: scale(1) rotate(0deg);
  }

  to {
    transform: scale(1) rotate(360deg);
  }
}

form.brutusin-form table,
form.brutusin-form input,
form.brutusin-form select,
form.brutusin-form textarea {
  width: 100% !important;
  min-width: 80px;
}

form.brutusin-form input[type='checkbox'] {
  width: auto !important;
  min-width: auto !important;
}

form.brutusin-form textarea {
  height: 8em;
}

form.brutusin-form table table {
  border-left: solid 1px;
  border-color: lightgray;
  margin: 4px;
}

form.brutusin-form td {
  vertical-align: middle;
  padding: 4px;
  white-space: nowrap;
}

form.brutusin-form td.prop-name {
  padding-left: 8px;
}

form.brutusin-form td.add-prop-name table {
  text-align: right;
  border: none;
}

form.brutusin-form td.add-prop-name table td {
  vertical-align: middle;
}

form.brutusin-form td.prop-value {
  width: 100%;
  text-align: left;
}

form.brutusin-form input.has-error {
  border-color: red;
}

form.brutusin-form td.item-index {
  font-size: 0.8em;
  color: gray;
  width: 25px;
  text-align: right;
}

form.brutusin-form td.item-action {
  width: 30px;
}

form.brutusin-form .error {
  border-color: red;
}

form.brutusin-form .error-message {
  color: red;
}

.form-inline label {
  justify-content: start;
}

[data-tip] {
  position: relative;
}

[data-tip]:before {
  content: '';
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #d9534f transparent;
}

[data-tip]:after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85em;
  color: #ffffff;
  background-color: #d9534f;
  padding: 5px 8px;
  border: 1px solid #d9534f;
  border-radius: 0.3rem;
  white-space: nowrap;
  z-index: 9;
}

[data-tip]:not([data-tip]):empty {
  display: none;
}

[data-tip]:not([data-tip='']):empty::before,
[data-tip]:not([data-tip='']):empty::after {
  visibility: hidden;
  content: none;
}