/* RUI: REA User Interface library - Forms - v1.1.1
   Copyright 2016, REA Group */

/*
 *
 * REA Group User Interface Library
 * REA Forms, Buttons
 *
  -------------------------------------------------------------------------- */
/**
 * Global variables and mixins used across RUI SCSS
 */
/**
 * Responsive Breakpoints
 */
/* eh? */
/* 25px */
.rui-form {
  margin-bottom: 1.5625em; }

fieldset {
  margin: 0;
  padding: 0; }

.rui-form-element {
  display: block;
  margin-bottom: 1.5625em; }

.rui-form-compact .rui-form-element {
  margin-bottom: 0.5em; }

/* Provide equal margin regardless of being compact form design or not */
.rui-form-compact .rui-form-element:last-child,
.rui-form-compact fieldset:last-child .rui-form-element {
  margin-bottom: 1.5625em; }

/* Should be hidden by JS but if not then make it pretty */
.rui-select {
  border: 2px solid #c3c8ce;
  padding: 13px 16px;
  width: 100%;
  color: #333f48; }

.rui-icon-select-touch-friendly {
  position: absolute;
  line-height: 16.5px;
  font-size: 0.8em;
  margin: 15px 0;
  margin-left: -30px;
  position: absolute;
  color: #697684; }

.rui-input {
  border: 2px solid #c3c8ce;
  padding: 13px 16px;
  border-radius: 4px;
  color: #333f48;
  background-color: #fff;
  font-size: 1em;
  font-family: "Museo-Sans-500", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-appearance: none;
  /* Get rid of the inner shadow on ipad */
  -moz-appearance: none;
  /* Same on mobile mozilla */ }
  @media only screen and (max-width: 719px) {
    .rui-input {
      border-width: 1px; } }

select.rui-input {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.rui-input:focus {
  outline: none; }

.rui-input-error .rui-input {
  border-color: #ff5961;
  color: #ff5961; }

.rui-input-error .rui-input span {
  color: #ff5961; }

.rui-input,
.rui-select-menu,
.rui-select li {
  box-sizing: border-box;
  width: 100%; }

/* Basically a legend or label, when displayed control how it looks to be consistent. TODO: Improve this */
.rui-form .rui-form-hint {
  padding: 0;
  margin: 0 0 20px;
  color: #111;
  display: block;
  font-size: 1.125em; }

textarea.rui-input {
  min-height: 100px;
  max-height: 150px;
  overflow-y: auto; }

/*
 * Placeholder text
 *
 */
:-moz-placeholder,
::-webkit-input-placeholder {
  color: #999fa3;
  font-style: normal; }

/*
 * Set the font to black once drop-down value is selected
 */
.rui-input.rui-select.rui-image-icon.rui-image-icon-dropdown.rui-toggle-link.rui-value-selected {
  color: #111; }

.rui-input::-webkit-input-placeholder, -moz-placeholder {
  font-style: normal; }

.rui-input-error .rui-input::-webkit-input-placeholder {
  color: #ff5961;
  font-style: normal; }

.rui-input-error .rui-input::-moz-placeholder {
  color: #ff5961;
  font-style: normal; }

/* firefox 19+ */
.rui-input-error input:-moz-placeholder {
  color: #ff5961;
  font-style: normal; }

/*
 * For browsers that don't support placeholder text, and also for whatever
 * reason you want the labels displayed
 *
 */
.rui-form label span {
  display: block;
  font-weight: normal;
  font-family: "Museo-Sans-500", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: normal;
  margin-bottom: 0.75em;
  /* 12px */ }

.rui-form label span .rui-form-tagline {
  float: right;
  line-height: 1.5;
  font-size: 0.75em;
  color: #b4bac1; }

/* Have to undo above for the span which gets output inside the rui select menu */
.rui-form label .rui-select-wrapper span {
  display: table-cell;
  font-weight: normal;
  margin-bottom: 0;
  font-family: "Museo-Sans-500", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* For the Compact Form design, labels are effectively hidden */
.rui-form-compact label span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.rui-select-menu {
  display: none;
  border: 2px solid #c3c8ce;
  border-top: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 3px 0;
  margin-top: -2px;
  position: absolute;
  background: white;
  max-height: 224px;
  overflow-y: auto;
  z-index: 100;
  font-size: 0.875em; }
  .rui-select-menu li {
    padding: 3px 7px;
    margin: 0 3px;
    border-radius: 4px;
    position: relative; }
    .rui-select-menu li .rui-select-subtitle {
      font-size: 0.875em; }
    .rui-select-menu li .rui-checkbox-hide {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==") 0 0 repeat; }
    .rui-select-menu li input[type=checkbox] {
      float: left;
      margin-top: 2px; }
    .rui-select-menu li .rui-label {
      display: inline-block;
      padding-left: 5px; }
    .rui-select-menu li.rui-current-list {
      color: #fff;
      background: #0084FF;
      cursor: pointer; }
  @media only screen and (max-width: 719px) {
    .rui-select-menu {
      border-width: 1px;
      margin-top: -1px; } }

.rui-input-error .rui-select-menu {
  border-color: #ff5961; }

.rui-select-menu li.rui-disabled {
  color: #aaa;
  background: #fff; }
  .rui-select-menu li.rui-disabled input[type=checkbox] {
    display: none; }
  .rui-select-menu li.rui-disabled, .rui-select-menu li.rui-disabled * {
    cursor: auto; }

.rui-select-wrapper {
  outline: none;
  border-radius: 4px; }
  .rui-select-wrapper:after, .rui-select-wrapper:before {
    opacity: 1; }
    .ie8 .rui-select-wrapper:after, .ie8 .rui-select-wrapper:before {
      display: block; }
  .rui-select-wrapper.rui-select-focused .rui-select-link, .rui-select-wrapper.rui-select-open .rui-select-link {
    position: relative; }

/* Only do this if it's the converted desktop version */
.rui-select-wrapper .rui-select .rui-icon {
  float: right; }

.rui-select-wrapper .rui-select .rui-icon:before {
  margin-right: 0; }

.rui-select-link {
  width: 100%;
  display: table;
  table-layout: fixed; }
  .rui-select-link input {
    position: absolute;
    border: none;
    cursor: auto;
    -webkit-appearance: none;
    appearance: none;
    width: 1px !important;
    height: 1px;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    line-height: 0;
    font-size: 0;
    color: transparent;
    z-index: -1 !important; }
  .rui-select-link > span {
    line-height: normal;
    padding-right: 18px;
    width: 100%;
    text-decoration: none;
    color: #333f48; }
  .rui-select-link > span, .rui-select-link > i {
    display: table-cell;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  .rui-select-link > i {
    position: relative;
    line-height: .6em;
    font-size: 0.8em; }

.rui-toggle-open,
.rui-select-open .rui-select {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.rui-select-open .rui-select-menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.rui-form-icon {
  position: relative; }

.rui-form-icon .rui-input {
  padding-left: 48px; }

.rui-form-icon .rui-icon {
  position: absolute;
  z-index: 11;
  font-size: 1.125em; }

/* Compact and modern browser view */
.rui-form-icon .rui-icon {
  bottom: 0.5em;
  left: 1em; }

.rui-input-error .rui-icon {
  color: #ff5961; }

/* Toggle Controls */
.rui-select-wrapper {
  position: relative; }

.rui-select-wrapper .rui-input {
  cursor: pointer; }

.rui-toggle-container {
  display: none; }

.rui-relative-toggle {
  position: relative; }

.rui-relative-toggle .rui-toggle-container {
  position: absolute; }

/*
 * Checkboxes
  -------------------------------------------------------------------------- */
.rui-checkbox input[type=checkbox] {
  display: none;
  /* use native checkbox for ie8 */ }
  .rui-checkbox input[type=checkbox] + label:before {
    font-family: 'rui-icon';
    display: inline-block;
    color: #c3c8ce;
    content: "\e904";
    /* unchecked icon */
    position: relative;
    font-size: 1.5em;
    letter-spacing: .3em;
    /* space between checkbox and label */
    top: .1em; }
  .rui-checkbox input[type=checkbox]:checked + label:before {
    content: "\e903";
    /* checked icon */
    color: #2d71d7; }
  .rui-checkbox input[type=checkbox]:disabled + label {
    color: #aaa; }
  .lt-ie9 .rui-checkbox input[type=checkbox] {
    display: inline-block;
    margin-right: .3em; }
    .lt-ie9 .rui-checkbox input[type=checkbox] + label:before {
      content: ""; }

.rui-checkbox.rui-input-error input[type=checkbox] + label {
  color: #ff5961; }
  .rui-checkbox.rui-input-error input[type=checkbox] + label:before {
    color: #ff5961; }

/*
 *
 * Non-Compact form
 * For IE8 & IE9 which doesn't support placeholder text or the complex pseudo
 * css selectors which enable our rui-compact-form design
 * we will render the forms with the labels displayed above the fields and no
 * fields nested.
 * DEPENDENCY: The IE classes on the html tag - in this case the .lt-ie10
 * which is for all browsers IE9 and below
 * NOTE: You can always render this by default by removing
 * the .rui-compact-form class
 *
  -------------------------------------------------------------------------- */
/* Instead of collapsing the label text, displays it above the input */
.lt-ie10 .rui-form-compact label span {
  height: auto;
  margin: auto;
  overflow: auto;
  padding: 0;
  position: static;
  width: 100%;
  display: block;
  margin-bottom: 5px; }

/*
 *
 * Messages - Errors and Confirmation
 *
  -------------------------------------------------------------------------- */
/* Defaults to the error colours */
.rui-message {
  margin-bottom: 1.5625em;
  border-radius: 4px;
  padding: .8125em 1.5em .8125em 1em;
  color: #fff;
  position: relative; }
  .rui-message.rui-dismissible:after {
    cursor: pointer;
    font-family: 'rui-icon';
    content: "\e600";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    position: absolute;
    right: 1.125em;
    top: 1.4em;
    font-size: .75em; }
  @media only screen and (max-width: 719px) {
    .rui-message.rui-message-mobile-fixed {
      position: fixed;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      top: 0;
      left: 0;
      box-sizing: border-box;
      width: 100%; } }

.rui-message strong {
  font-family: "Museo-Sans-500", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  display: block;
  color: #fff; }

.rui-error {
  background: #ff5961; }

.rui-success {
  background: #00c694; }

/* Light blue */
.rui-info {
  background: #0084FF; }

/* Orange */
.rui-warning {
  background: #ffb200; }

/*
 * Arrows
 * Use CSS for arrows instead of images
 * TODO: Is this the best method?
  -------------------------------------------------------------------------- */
.rui-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  content: ""; }

.rui-arrow-up {
  border-bottom: 8px solid black;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent; }

.rui-arrow-down {
  border-top: 8px solid black;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent; }

.rui-arrow-left {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid black; }

.rui-arrow-right {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid black; }