/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require select2
 *= require select2-bootstrap
 *= require framework_and_overrides
 *= require_self
 */

@import 'variables';

// creates styles for text in the navbar that is not a link
.navbar-default .navbar-nav > li > a.logged-in {
  color: $lighter-red;
}

.content-box {
  border: 1px solid $lighter-red;
  margin-bottom: 10px;
  padding: 20px;

  h1 {
    color: $lighter-red;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
  }

  p { padding-top: 10px; }
}

.inst-box {
  border: 1px solid $light-blue;
  margin-bottom: 20px;

  header {
    background: $lighter-blue;
    margin-bottom: 10px;
    padding: 10px;

    .desc {
      display: inline;
      font-size: 14px;

      em {
        color: $red;
      }
    }

    label { font-size: 16px; font-weight: bold; }
  }

  input,
  textarea {
    margin: 0 0 20px;
  }

  p {
    padding: 0 10px;
  }

  fieldset {
    padding: 10px;
  }

  hr {
    margin-left: -10px;
  }
}

.add-fields,
.add-array-fields {
  margin: 10px 0 15px 10px;
}

// Adds a red border around invalid input fields after form submission.
// scss-lint:disable SelectorFormat
.field_with_errors {
  input,
  select,
  textarea {
    border-color: $red;
    border-width: 2px;
  }
}
// scss-lint:enable SelectorFormat

.accessibility {
  input { margin-top: 4px; }

  label { margin-bottom: 7px; }
}

#categories {
  label { margin-bottom: 7px; padding-left: 5px; }
  input { margin: 4px 0 0 -20px; }
}

// margin added to accommodate for floating footer
// This needs to be added to the last form element before the save button
.edit-entry {
  margin-bottom: 60px;
}

.danger-zone {
  border: 1px solid $lighter-red;
  color: $white;
  margin-bottom: 20px;

  header {
    background: $light-red;
    margin-bottom: 10px;
    padding: 10px;
  }

  p {
    color: $black;
    padding: 10px;
  }

  h4 {
    color: $black;
    font-weight: bold;
    padding: 10px 0 0 10px;
  }
}

a.boxed-action,
a.boxed-action:link,
a.boxed-action:visited {
  background-color: $gray;
  border: 1px solid $light-green;
  color: $light-red;
  display: inline-block;
  font-weight: bold;
  padding: 10px;
  text-decoration: none;
}

a.boxed-action:hover,
a.boxed-action:active {
  background-color: $light-red;
  color: $white;
}

.save-box {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;

  input {
    margin-bottom: 20px;
    margin-top: 20px;
  }

  p {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 20px;
    margin-top: 20px;
  }
}
