// !!! Warning !!! CSS files are generated from their associated SCSS files. Don't modify the CSS files directly,
// modify the SCSS files and then compile them using compass. This will generate the CSS file for you.

$red: #c71013;
$ns-blue: #008ab0;

.nuskinForm div { display: block; position: relative; margin: 0 0 10px 0; float: left; width: 100%; max-width: 100%; }
.nuskinForm p.desc { font-size: 12px; color: #888888; margin: 3px 0 10px; }
.nuskinForm .req:after { content: '*'; font-weight: bold; margin-left: 3px; color: $red; }
.nuskinRequiredBefore:before {
  content: '*';
  font-weight: bold;
  margin-right: 0.25em;
  color: $red;
}
.nuskinForm .city { width: 42%; margin-right: 3%; }
.nuskinForm .state { width: 22%; margin-right: 3%; }
.nuskinForm .state select { width: 100%; }
.nuskinForm .zip { width: 30%; }
.nuskinForm .cardType button { min-width: 195px; }
.nuskinForm .expDate { width: auto; min-width: 45%; margin-right: 5%; }
.nuskinForm .expMonth button { width: 132px; }
.nuskinForm .ccv { width: 150px; }
.nuskinForm .formSubmit { float: left; margin: 4px 0; }
.nuskinForm .formSubmit .cancel { margin-left: 20px; }
.nuskinForm .formSubmit.buttonRight { text-align: right; }
.nuskinForm .formSubmit.buttonRight .cancel { margin-right: 20px; }

/* =================== Media Queries =================== */
@media only screen and (max-width: 767px) {
  .nuskinForm .city { width: 100%; }
  .nuskinForm .state { width: 42%; }
  .nuskinForm .state select { width: 100%; }
  .nuskinForm .zip { width: 55%; }
  .nuskinForm .expDate { width: auto; }
}

#qasWarning {
  .addressAsEntered {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: .9em 1.1em .8em 1em;
    width: 100%;

    p {
      font-size: 16px;
      font-weight: 200;
    }


  }
  figure {
    display: inline-block;
    vertical-align: middle;

    a.btn.btn-secondary {
      text-indent: 0;
    }
  }
  figcaption {
    margin-top: 3px;
    font-size: .8em;
    text-align: center;
  }
  h2 {
    font-size:18px;
    margin-bottom:12px;
    font-weight:bold;
  }
  .edit {
    display: inline-block;
    font-weight: 400;
  }
  ul a {
    display: inline-block;
    padding: 10px 0;
    color: $ns-blue;
  }
  a:hover{
    cursor:pointer;
    text-decoration:underline;
  }
}

.qas_message {margin-bottom: 5px;}
.qas_message_large { clear: both; }
.qas_range, .qas_link_small {
  color: $ns-blue;
  padding: 8px 0;
  &:hover {
    color: #17cdff;
    cursor: pointer;
  }
}

a.btn-secondary, button.btn-secondary {
  color: $ns-blue;
  background: transparent;
  border: 1px solid $ns-blue;
}

.qasInfoDialogue {
  background: rgba(217, 200, 107, 0.3);
  border: 1px solid #d9c86b;
  border-radius: 3px;
  padding: 15px;
  color: #5f5519;
  margin-bottom: 10px;
}

.qasInfoDialogue h3 {
  margin-bottom: 0;
}