.list-item {
  .well;
}

.list-header, .edit-header {
  .fixed-header;
}

.list-body {
  padding-top: 100px;
}

.edit-header {
  padding-top: 10px;
}

.edit-body {
  padding-top: 100px;
}

.page-header {
  padding-left: 20px;
  z-index: 102;
}

.report-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .header-lhs {
    padding-left: 30px;
    padding-right: 30px;
  }
  .header-rhs {
    flex-grow: 1;
  }
}

.header-rhs {
  min-width: 226px;
  min-height: 40px;
  padding-right: 20px;
  padding-bottom: 5px;
  display: block;
}

.list-header .header-rhs {
  margin: 15px 0;
}

// "Mixins"
.fixed-header {
  position: fixed;
  width: 100%;
  margin-top: 11px;
  z-index: 101;
}

// Modifications to ngGrid style

.gridStyle {
  border: 1px solid #d4d4d4;
  margin: auto;
  .ngTopPanel {
    background-color: #ffffff;
  }
  .ngHeaderCell {
    background-color: #e4e4e4;
  }
  .fng-right {
    text-align: right;
  }
  .fng-left {
    text-align: left;
  }
  .fng-centre, .fng-center {
    text-align: center;
  }
  .ngTotalCell {
    font-weight: bold;
  }
}

button.form-btn {
  width: 8em;
  height: 2em;
}

.form-btn-grp {
  max-width: 17em;
}


form {
  &.form-horizontal.compact {
    input + .help-block, select + .help-block, textarea + .help-block, .uneditable-input + .help-block,
    .input-prepend + .help-block, .input-append + .help-block {
      margin-top: 0;
      margin-bottom: 2px;
    }
    hr {
      margin: 8px 0;
    }
  }

  .schema-head {
    margin-top: 8px;
    font-weight: bold;
  }
  ol.sub-doc {
    padding: 0;
    margin: 0;
    position: relative;
    li {
      width: available;
      display: block;
      margin: 2px 0;
      padding-top: 3px;
    }
  }
  .sub-doc-btns {
    position: absolute;
    right: 8px;
    z-index: 1;
  }
  .schema-foot {
    margin-top: 0;
    margin-bottom: 5px;
  }

  input.ng-invalid:not(.ng-invalid-required):focus:read-write {
    border: solid 1px red;
  }

  input[type="checkbox"].ng-invalid-required:before:read-write, span:first-child input[type="radio"].ng-invalid-required:before:read-write {
    content:"*";
    font-weight: bold;
    color: red;
    margin-left: -8px
  }

  input.ng-invalid-required, select.fng-invalid-required:read-write,  select.ng-invalid-required, textarea.ng-invalid-required:read-write {
    background-color: rgba(255, 0, 0, 0.10);
  }

  option {
    background-color: white;
  }
  .fng-select2 {
    width: 220px;
  }
  .form-inline > .sub-doc {
    padding: 0 5px;
    border: none;
    box-shadow: none;
  }
}

a.fng-link, span.fng-link {
  line-height: 30px;
}

.form-inline a.fng-link, .form-inline span.fng-link {
  padding: 0 15px;
}

// Inline radio buttons need a bigger top margin
span input[type="radio"] {
  margin : 9px 0 0;
}

.global-search {
  position : relative;
  float: right;
}

.results-container {
  width: 6000px;
  z-index: 103;
  position: absolute;
  top: 41px;
  right: 0;
}

.search-results {
  float: right;
  border: 1px solid gray;
  -webkit-box-shadow: 10px 10px 10px #888;
  box-shadow: 10px 10px 10px #888;
  background: white;
  padding: 5px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  .search-result.focus {
    color: white;
  }
}

.dropdown-menu > .disabled > li,
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  cursor: not-allowed;
}

#why-disabled {
  display: none
}

button#saveButton[disabled]:hover + #why-disabled.showwhy {
  display: block;
  border: #ddd solid 2px;
  font-size: small;
  z-index: 20;
  position: absolute;
  background-color: white;
  right: 0;
  border-radius: 6px;
  padding: 5px;
  box-shadow: 4px 4px 4px #999;
  color: red;
  font-weight: normal;
  top: 22px;
}

#display-error {
  position: fixed;
  top: 60px;
  width: 100%;
  z-index: 1090;
}

#display-error.ng-hide {
  opacity: 0;
}
#display-error.ng-hide-add,         // animate the error display
#display-error.ng-hide-remove {
  transition: all linear 0.5s;
}

input[type="checkbox"].ng-invalid::after {
  content: "Invalid";
  color: rgba(255, 0, 0, 0.6);
  padding-left: 1em;
}

/* Delayed Absolute Center Spinner */
/* Absolute Center Spinner */
.loading, .spinner {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.loading {
  -webkit-animation: lds-ring-fadein 3.4s;
  animation: lds-ring-fadein 3.4s;
}

.spinner {
  -webkit-animation: lds-ring-fadein 0.4s;
  animation: lds-ring-fadein 0.4s;
}

/* Transparent Overlay */
.loading:before, .spinner:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required), .spinner:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after, .spinner:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes lds-ring-fadein{
  0% { opacity:0; }
  50% { opacity:0.1; }
  100% { opacity:1; }
}