/**
 * Styles for the hooks administration screen.
 *
 * Index:
 * - Heading
 * - Hook Reaction Group Container
 * - Hook Reaction Group
 * - Hook Reaction
 * -- View
 * -- New
 * -- Messages
 * -- Form
 * -- Editing
 * -- Changed
 * - Icon Buttons
 * - Sections
 * - Conditions
 * -- Buttons
 * -- Title
 * -- Add New Form
 * -- Groups
 * -- Group
 * -- Condition
 * - Periods
 * - Disable
 * -- Disabled
 *
 * @package WordPoints
 * @since 2.1.0
 */
/*
 * Heading.
 */
#poststuff .wordpoints-hook-events-heading h2 {
  margin-top: 0;
  font-size: 1.3em;
  padding: 8px 2px;
}

#events-sortables .hndle {
  padding: 14px;
}

#events-sortables .handlediv {
  height: 48px;
  width: 44px;
}

#events-sortables .handlediv:before {
  left: 4px;
}

.wordpoints-hook-events-heading p {
  margin-right: 5px;
  margin-bottom: 15px;
}

/*
 * Hook Reactions Group Container.
 */
/* In case the containers are in meta boxes. */
#events-sortables .postbox,
#events-sortables .sortable-placeholder {
  float: right;
  width: 100%;
}

@media only screen and (min-width: 1250px) {
  #events-sortables .postbox,
  #events-sortables .sortable-placeholder {
    width: 48%;
    margin-left: 1.8%;
    margin-left: -webkit-calc(2% - 2px);
    margin-left: calc(2% - 2px);
  }
}

#events-sortables .inside {
  margin: 0;
  padding: 0;
}

.wordpoints-hook-reaction-group-container .wordpoints-hook-reaction-group-description {
  margin: 10px;
}

.wordpoints-hook-reaction-group-container .controls {
  background-color: #f7f7f7;
  border-top: 1px solid #ddd;
  padding: 5px;
  min-height: 30px;
}

.wordpoints-hook-reaction-group-container .controls .add-reaction,
.wordpoints-hook-reaction-group-container .controls .wordpoints-hook-events {
  float: left;
}

.wordpoints-hook-reaction-group-container .controls .add-reaction {
  margin-right: 5px;
}

.wordpoints-hook-reaction-group-container .spinner {
  width: 22px;
  position: absolute;
  right: 50%;
  top: 50%;
  margin: -10px -10px auto auto;
  opacity: 1;
  display: block;
}

.wordpoints-hook-reaction-group-container .spinner-overlay {
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: #fff;
  opacity: 0.75;
  display: none;
  position: absolute;
  top: 0;
}

/*
 * Hook Reaction Group.
 */
.wordpoints-hook-reaction-group {
  padding: 0 10px;
}

.js .wordpoints-hook-reaction-group .err {
  display: none;
}

/*
 * Hook Reaction.
 */
.wordpoints-hook-reaction {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-top: 10px;
  margin-bottom: 10px;
  /*
	 * - View.
	 */
  /*
	 * - Messages.
	 */
  /* We use .success and .err instead of .updated and .error, because the later
	 * two are moved to the top of the page by WordPress.
	 */
  /*
	 * - New.
	 */
  /*
	 * - Form.
	 */
  /*
	 * - Editing.
	 */
  /*
	 * - Changed.
	 */
  /*
	 * Icon Buttons.
	 */
  /*
	 * Sections.
	 *
	 * - Title
	 */
  /*
	 * - Content.
	 */
  /*
	 * Conditions.
	 *
	 * - Buttons.
	 */
  /*
	 * - Add New Form.
	 */
  /*
	 * - Group.
	 */
  /*
	 * - Condition.
	 */
  /*
	 * Periods.
	 */
  /*
	 * Disable.
	 */
  /*
	 * - Disabled.
	 */
}

.wordpoints-hook-reaction .view {
  border: 1px solid #ddd;
  padding: 12px;
  background-color: #f7f7f7;
}

.wordpoints-hook-reaction .view .close {
  float: left;
  margin-top: -23px;
  display: none;
}

.wordpoints-hook-reaction .view .title {
  font-weight: bold;
}

.wordpoints-hook-reaction .edit {
  float: left;
  margin-top: -23px;
}

.wordpoints-hook-reaction .success,
.wordpoints-hook-reaction .err {
  padding: 5px;
  margin: 0;
  display: none;
  background-color: #fff;
  border-top: 1px solid #ddd;
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.wordpoints-hook-reaction .success {
  border-right: 4px solid #7ad03a;
}

.wordpoints-hook-reaction .err {
  border-right: 4px solid #dd3d36;
  background-color: #fff1f1;
}

.wordpoints-hook-reaction .err p {
  margin: 0;
}

.wordpoints-hook-reaction .fields .err {
  margin: 5px 0;
  display: block;
  border: 1px solid #dd3d36;
  border-right-width: 4px;
}

.wordpoints-hook-reaction.new .action-buttons .delete {
  display: none;
}

.wordpoints-hook-reaction .form {
  border: 1px solid #ddd;
  border-top: none;
  display: none;
}

.wordpoints-hook-reaction .settings,
.wordpoints-hook-reaction .target {
  padding: 5px;
}

.wordpoints-hook-reaction .settings {
  padding-bottom: 0;
}

.wordpoints-hook-reaction .target {
  padding-top: 0;
}

.wordpoints-hook-reaction .fields .description {
  margin-bottom: 15px;
  width: 100%;
  height: auto;
}

.wordpoints-hook-reaction .actions {
  position: relative;
}

.wordpoints-hook-reaction .action-buttons {
  height: 30px;
  border-top: 1px solid #ddd;
  padding: 5px;
  background-color: #f7f7f7;
}

.wordpoints-hook-reaction .action-buttons .cancel,
.wordpoints-hook-reaction .action-buttons .close,
.wordpoints-hook-reaction .action-buttons .save {
  float: left;
}

.wordpoints-hook-reaction .action-buttons .cancel {
  display: none;
}

.wordpoints-hook-reaction .action-buttons .save {
  margin-right: 5px;
}

.wordpoints-hook-reaction .action-buttons .delete {
  float: right;
}

.wordpoints-hook-reaction.editing .form,
.wordpoints-hook-reaction.editing .view .close {
  display: block;
}

.wordpoints-hook-reaction.editing .view .edit {
  display: none;
}

.wordpoints-hook-reaction.changed .action-buttons .cancel {
  display: block;
}

.wordpoints-hook-reaction.changed .action-buttons .close,
.wordpoints-hook-reaction.changed .view .close {
  display: none;
}

.wordpoints-hook-reaction .wordpoints-hooks-icon-button {
  margin: 0;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  background: none;
  outline: none;
  cursor: pointer;
  text-align: right;
  -webkit-transition-property: border, background, color;
  transition-property: border, background, color;
  -webkit-transition-duration: .05s;
  transition-duration: .05s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

.wordpoints-hook-reaction .wordpoints-hooks-icon-button:focus {
  -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
  box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
}

.wordpoints-hook-reaction .section-title {
  font-size: 14px;
  background-color: #f7f7f7;
  padding: 9px 8px 9px 5px;
  border: 1px solid #ddd;
  border-right: none;
  border-left: none;
}

.wordpoints-hook-reaction .section-title h4 {
  margin: 0;
}

.wordpoints-hook-reaction .section-content {
  margin-top: 5px;
  padding: 5px;
}

.wordpoints-hook-reaction .conditions .add-new,
.wordpoints-hook-reaction .conditions .delete {
  float: left;
  padding: 0 5px;
  margin-top: -23px;
}

.wordpoints-hook-reaction .conditions .delete {
  margin-top: -28px;
}

.wordpoints-hook-reaction .conditions .wordpoints-hooks-icon-button .dashicons {
  vertical-align: middle;
}

.wordpoints-hook-reaction .add-condition-form {
  background-color: #f7f7f7;
  padding: 5px 5px 8px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  border: 1px solid #ddd;
  border-top: none;
  margin: 0 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wordpoints-hook-reaction .condition-selectors select {
  float: right;
}

.wordpoints-hook-reaction .condition-group-title {
  font-weight: bold;
  margin-bottom: 2px;
}

.wordpoints-hook-reaction .condition {
  padding-right: 5px;
  border-right: 3px solid #f7f7f7;
}

.wordpoints-hook-reaction .condition-title {
  padding: 5px 0;
}

.wordpoints-hook-reaction .condition-settings {
  padding-right: 5px;
  border-right: 3px solid #f7f7f7;
}

.wordpoints-hook-reaction .wordpoints-hook-period-length-in-units {
  width: 48%;
}

.wordpoints-hook-reaction .wordpoints-hook-period-units {
  width: 50%;
  float: left;
}

.wordpoints-hook-reaction .view .wordpoints-hook-disabled-text {
  display: none;
}

.wordpoints-hook-reaction .disable .description {
  margin-bottom: 8px;
}

.wordpoints-hook-reaction.disabled .view {
  background-color: #fcfcfc;
}

.wordpoints-hook-reaction.disabled .view .wordpoints-hook-disabled-text {
  display: inline;
}

.wordpoints-hook-reaction.disabled .title {
  color: #737373;
}

/* EOF */