/**********************************************************************************************************************
  File: form-elements.css
  Author: A. Pinzone apinzone@capturepoint.com
  Purpose: Global styling of form elements for the new Catalog Redesign.

  Change History:
    10/01/2015 - AP - CP19545
      - Created and implemented initial styles.
    10/05/2015 - AP - CP19545
      - Changed size of radio and checkbox buttons.
      - Added different colors when radio or checkbox elements are checked.
      - Changed the webkit glow color & focus border color to CP Blue.
      - Left align primary action buttons.
    10/06/2015 - AP - CP19545
      - Adjusted select element sizing to match input boxes.
      - Floated input elements left to fix alignment issues cross-browser.
      - Restyled example text to appear dimmer and underneath form elements.
    11/04/2015 - AP
      - Added height to input elements for size correction in IE.
    11/16/2015 - AP - CP19528
      - Input adjustments for create account page.
    05/20/2016 - AP -FO22089
      - Added pointer cursor to all buttons.
**********************************************************************************************************************/

/***********************************
  DEFAULT FORM STYLES
***********************************/
form .form-title {
  font-weight: 600;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #9AA1A8;
  font-size: 14px; }

form label, form input, form a {
  line-height: 18px;
  margin-bottom: 10px;}
  @media screen and (max-width: 640px) {
    form label, form input, form a {
      margin-bottom: 5px; }
    }

form a {
  color: #0094FF;
  text-decoration: none; }

form a.user-edit { display: inline; }
form a.user-edit:hover { text-decoration: underline; }

form .example-text {
  color: #9AA1A8;
  display: block;
  font-style: italic;
  font-size: 95%;
  margin-top: -5px;
  margin-bottom: 10px;
}

form .formfieldreq {
  text-align: left;
}

.form-body.form-body--border {
  border: 1px solid #CCC;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  margin-bottom: 10px; }

.form-body.form-body--border::after {
  clear: both;
  content: '';
  display: table;
}

.form-body .primary-action {
  background-color: #EFEFEF;
  padding: 10px 15px;
  border-top: 1px solid #CCC;
  text-align: left; }
  .form-body .primary-action .btn:last-child {
    margin: 0; }
  @media (min-width: 768px) {
    .form-body .primary-action .btn {
      margin: 0; }
    }

.form-group {
  display: block;
}
  .form-group::after {
    clear: both;
    content: '';
    display: table;
  }

.form-header {
  background: #F1F3F1;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  font-weight: bold;
  line-height: 100%;
  margin: 10px -10px;
  padding: 10px 5px;
  text-transform: uppercase;
}
.form-header > .form-section {
  padding: 0 5px;
}
.form-header > .form-section > label {
  margin: 0;
  padding: 0;
}

/***********************************
  FORM SIZING
***********************************/
.form-section {
  box-sizing: border-box;
  display: block;
  float: left;
  padding-right: 5px;}
  @media screen and (max-width: 640px) {
    .form-section {float: none;}
  }
  .form-section.width--hard {}
    .form-section.width--hard.width--5 {
      width: 5%; }
    .form-section.width--hard.width--10 {
      width: 10%; }
    .form-section.width--hard.width--15 {
      width: 15%; }
    .form-section.width--hard.width--20 {
      width: 20%; }
    .form-section.width--hard.width--25 {
      width: 25%; }
    .form-section.width--hard.width--30 {
      width: 30%; }
    .form-section.width--hard.width--35 {
      width: 35%; }
    .form-section.width--hard.width--40 {
      width: 40%; }
    .form-section.width--hard.width--45 {
      width: 45%; }
    .form-section.width--hard.width--50 {
      width: 50%; }
    .form-section.width--hard.width--55 {
      width: 55%; }
    .form-section.width--hard.width--60 {
      width: 60%; }
    .form-section.width--hard.width--65 {
      width: 65%; }
    .form-section.width--hard.width--70 {
      width: 70%; }
    .form-section.width--hard.width--75 {
      width: 75%; }
    .form-section.width--hard.width--80 {
      width: 80%; }
    .form-section.width--hard.width--85 {
      width: 85%; }
    .form-section.width--hard.width--90 {
      width: 90%; }
    .form-section.width--hard.width--95 {
      width: 95%; }
    .form-section.width--hard.width--100 {
      width: 100%; }
  @media (min-width: 641px) {
    .form-section {}
      .form-section.width--5 {
        width: 5%; }
      .form-section.width--10 {
        width: 10%; }
      .form-section.width--15 {
        width: 15%; }
      .form-section.width--20 {
        width: 20%; }
      .form-section.width--25 {
        width: 25%; }
      .form-section.width--30 {
        width: 30%; }
      .form-section.width--35 {
        width: 35%; }
      .form-section.width--40 {
        width: 40%; }
      .form-section.width--45 {
        width: 45%; }
      .form-section.width--50 {
        width: 50%; }
      .form-section.width--55 {
        width: 55%; }
      .form-section.width--60 {
        width: 60%; }
      .form-section.width--65 {
        width: 65%; }
      .form-section.width--70 {
        width: 70%; }
      .form-section.width--75 {
        width: 75%; }
      .form-section.width--80 {
        width: 80%; }
      .form-section.width--85 {
        width: 85%; }
      .form-section.width--90 {
        width: 90%; }
      .form-section.width--95 {
        width: 95%; }
      .form-section.width--100 {
        width: 100%; } }

/***********************************
  INPUTS
***********************************/
form input[type=text],
form input[type=password] {
  padding: 0 10px;
  border: 1px solid #9AA1A8;
  width: 100%;
  border-radius: 3px;
  box-sizing: border-box;
  height: 37px;
  line-height: 35px;
  outline: 0; }

form input[type=text]:focus,
form input[type=password]:focus {
  border: 1px solid #315E89;
  box-shadow: 0 0 5px rgba(49, 94, 137, 1); }

input[type=text], input[type=email], input[type=password] {
  -webkit-appearance: none;
  font-family: "Open Sans", "Helvetica";
  color: #414043;
  font-size: 11px;
  box-shadow: none;
  display: block;
  height: auto; }

input[type=text], input[type=password], input[type=tel], select {
  background-color: #EFEFEF; }

/***********************************
  BUTTONS
***********************************/
.btn {
  color: white;
  background-color: #315E89;
  height: 43px;
  clear: left;
  border: none;
  width: 100%;
  border-radius: 3px;
  line-height: 43px;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  font-family: "Open Sans", "Helvetica";
  margin-bottom: 10px;
  background-image: none;
  border-color: initial;
  box-shadow: none;
  outline: 0;
  cursor: pointer;
}
  .btn.btn-grey {
    background-color: #757D85; }
    .btn.btn-grey:hover {
      background-color: #9AA1A8; }
    .btn.btn-grey[disabled=disabled], .btn.btn-grey.disabled {
      background-color: #9AA1A8; }
  .btn.btn-yellow {
    background-color: #E29905; }
    .btn.btn-yellow:hover {
      background-color: #e1a62f; }
    .btn.btn-yellow[disabled=disabled], .btn.btn-yellow.disabled {
      background-color: #757D85; }
  .btn.btn-blue {
    background-color: #315E89; }
    .btn.btn-blue[disabled=false]:hover {
      background-color: #0094FF; }
  .btn.disabled {
    opacity: .3; }
  @media (min-width: 768px) {
    .btn {
      width: auto;
      line-height: 30px;
      height: 30px;
      font-size: 13px;
      font-weight: normal;
      padding: 0px 10px; } }

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

a.btn {
  text-decoration: none;
  display: inline-block;
  font-weight: normal; }

/***********************************
  SELECTION BOXES
***********************************/
.select-div {
  position: relative;
  border: 1px solid #9AA1A8;
  background-color: #F1F1F1;
  border-radius: 3px;
  display: inline-block;
  line-height: normal;
  display: block;
  margin-bottom: 10px !important;
  max-width: 300px;
  overflow: hidden;
  padding: 0;}
  .select-div select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    border: none;
    width: 100%;
    padding: 0 41px 0 10px;
    color: #757D85; }
    .select-div select::-ms-expand {
      display: none; }
  .select-div:after {
    font-family: 'community-center-icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f0d7";
    padding: 0;
    position: absolute;
    right: 0;
    border-left: 1px solid #9AA1A8;
    top: 0;
    pointer-events: none;
    text-align: center; }
  @media (min-width: 768px) {
    .select-div {
      display: inline-block;
      width: 100%; } }

.lt-ie10 .select-div:after {
  display: none; }

/***********************************
  CHECKBOXES & RADIO BUTTONS
***********************************/
.checkbox--group.disabled p,
.checkbox--group.disabled label,
.checkbox--group.disabled span,
.checkbox--group.disabled input[type=checkbox],
.radio--group.disabled p,
.radio--group.disabled label,
.radio--group.disabled span,
.radio--group.disabled input[type=checkbox] {
  color: #ccc;
  font-weight: normal; }

  .checkbox--group p, .radio--group p {
    line-height: 18px;
    margin-bottom: 0px; }

  .checkbox--group label,
  .radio--group label {
    cursor: pointer;
  }
  /* Hide browser default inputs */
  .checkbox--group label input[type=checkbox],
  .checkbox--group label input[type=radio],
  .radio--group label input[type=checkbox],
  .radio--group label input[type=radio] {
    display: none;
  }
  /* Set Defaults for Form element font-icon */
  .checkbox--group label input[type=checkbox] + p:before,
  .checkbox--group label input[type=radio] + p:before,
  .radio--group label input[type=checkbox] + p:before,
  .radio--group label input[type=radio] + p:before {
    color: #939598;
    display: inline-block;
    font-family: "FontAwesome";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    margin-right: 5px;
    speak: none;
    text-transform: none;
    width: 1em;
    -webkit-font-smoothing: antialiased;
  }
  /* Element Color when Checked */
  .checkbox--group label input[type=checkbox]:checked + p:before,
  .checkbox--group label input[type=radio]:checked + p:before,
  .radio--group label input[type=checkbox]:checked + p:before,
  .radio--group label input[type=radio]:checked + p:before {
    color: #315e89;
  }
  /* Checkboxes Default */
  .checkbox--group label input[type=checkbox] + p:before,
  .radio--group label input[type=checkbox] + p:before {
    content: '\f096';
  }
  /* Checkboxes Checked */
  .checkbox--group label input[type=checkbox]:checked + p:before,
  .radio--group label input[type=checkbox]:checked + p:before {
    content: '\f14a';
  }
  /* Radio Buttons Default */
  .checkbox--group label input[type=radio] + p:before,
  .radio--group label input[type=radio] + p:before {
    content: '\f10c';
  }
  /* Radio Buttons Checked */
  .checkbox--group label input[type=radio]:checked + p:before,
  .radio--group label input[type=radio]:checked + p:before {
    content: '\f192';
  }

/***********************************
  SPECIFIC ELEMENTS
***********************************/
label.required {
  font-weight: 600; }
  label.required span.required-astericks {
    display: initial; }

span.required-astericks {
  display: none; }


/***********************************
  PREVENT MOBILE ZOOM
***********************************/
@media screen and (max-width: 640px) {
  select,
  select:focus,
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"] {
    font-size: 16px;
  }
}