/*! DDL Ring Seal Selector */

/* Layout */

#RingSealApp { margin-bottom: 35px; font-family:sans-serif; }
#RingSealApp + article > .csc-default { display: none; }
#RingSealApp .csc-default { margin-top: 35px; }
#RingSealApp .odd { padding-right: 0.7em }
#RingSealApp .even { padding-left: 0.7em }

#RingSealApp .odd,
#RingSealApp .even {
  float: left;
  width: 50%;
  box-sizing: border-box;
}

/* Globals */

#RingSealApp .error-text {
  color: #c20026;
  display: block;
  clear: both;
}

#RingSealApp .highlight {
  font-family: HelveticaNeueW01-55Roma, HelveticaNeueW10-55Roma, "helvetica neue", helvetica, arial, verdana, sans-serif;
  /* font-size: 14px;
  // font-size: 1rem;*/
  font-style: normal;
  color: #c20026;
}

#RingSealApp .separator {
  text-align: center;
  clear: both;
  padding-top: 1em;
  margin-bottom: 0;
}

/* Fields and Buttons */

#RingSealApp label {
  margin-bottom: 1em;
  display: block;
}

#RingSealApp input {
  padding: .5rem 1rem;
  border-radius: 0; /*5px;*/
  font-size: 1rem !important;
}

#RingSealApp select {
  font-size: 1rem !important;
  padding: .62rem 1rem !important;
  margin-bottom: 0;
}

#RingSealApp label.pointer,
#RingSealApp label.pointer input {
  cursor: pointer;
}

#RingSealApp input.error {
  border: 1px solid #c20026 !important;
}

#RingSealApp label.inactive {
  display: none;
}

#RingSealApp .RSA-field {
  font-size: 120%;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 2px;
}

#RingSealApp select.RSA-field {
  padding: 0.45em;
}

#RingSealApp label.has-select {
  min-height: 60px;
}

#RingSealApp .RSA-field.btn {
  clear: both;
  font-size: 120%;
  text-align: center;
  padding: 0.6em;
  margin-bottom: 0.7em;

  /*cursor: pointer;
  margin-top: .3em;
  width: 15em;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  border-radius: 100px;
  transition: all 300 ease-in-out;
  background: darkblue;
  color: #fff;
  font-size: .925em !important;
  padding: calc(1rem / 1.73) calc(1rem * 1.15) !important;
  font-weight: 700;*/
}

#RingSealApp .RSA-field.btn.btn--small {
  display: inline-block;
  width: auto;
}

/* RSA Table */

#RingSealApp table {
  table-layout: auto;
  margin-bottom: 1.5em;
  border-collapse: collapse;
}

#RSA_order table {
  margin-bottom: 0;
}

#RingSealApp table td:first-child,
#RingSealApp table th:first-child {
  padding-left: 4px;
}

#RingSealApp .responsive table { min-width: 600px; }
#RingSealApp table td, #RingSealApp table th { vertical-align: middle; padding:1rem 0.5rem; font-weight:bold }
 #RingSealApp table thead th { font-weight: normal; } 
#RingSealApp table tbody tr:first-child { border-top: 0; }
#RingSealApp table tbody { font-size: 0.8rem; }
#RingSealApp table tbody tr td { background: #fcfcfc; }

/* Input Area */

#RingSealApp .RSA-field[readonly] {
  background: #fafafa;
}

#RingSealApp .title {
  margin-bottom: 0.7em;
}

#RingSealApp .subtitle {
  margin-top: 1em;
  margin-bottom: 0.7em;
}

#RingSealApp .separator + .subtitle {
  margin-top: 0;
}

/* Output Area */

#RingSealApp #RSA_output table tbody tr#RSA-rid-0 td { background: #cfd; }
#RSA_output .title { display: inline-block }
#RSA_output .output-alt .title { margin-top: 0.5em }
#RSA_output .title.has-event { cursor: pointer }
#RSA_output .title.has-event:hover { text-decoration: underline }

#RSA_output .output-alt.is-empty table,
#RSA_output .output-alt.is-empty .title { display: none }

/* Cart Functions */

.RSA-add-to-cart,
.RSA-rm-from-cart {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  background: url("assets/icon-cart.png") 0 0 no-repeat;
  background-size: 100%;
  top: 4px;
  opacity: 1;
  margin: 0 3px;
}

.RSA-add-to-cart:hover,
.RSA-rm-from-cart:hover {
  opacity: 0.8;
}

.RSA-add-to-cart:active,
.RSA-rm-from-cart:active {
  opacity: 1;
}

.RSA-rm-from-cart {
  background-image: url("assets/icon-close.png");
  width: 12px;
  height: 16px;
}

/* Order Area */

#RSA_order #error_client_number { display: none }
#RSA_order tr.RSA-empty-cart { display: none }
#RSA_order tr.RSA-empty-cart:first-child { display: table-row }

/* Fields */

#RingSealApp .btn {
  /*cursor: pointer;
  margin-top: 0.3em;
  width: 15em;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  border-radius: 100px;
  transition: all 300 ease-in-out;
  background: darkblue;
  color: #fff;
  font-size: .925em !important;
  padding: calc(1rem / 1.73) calc(1rem * 1.15) !important;
  font-weight: bold;*/
  font-size: 16px;
  text-align: center;
  min-width: 170px;
  max-width: 100%;
  padding: 15px 18px;
  display: inline-block;
  vertical-align: middle;
  max-height: 50px;
  color: #ffffff;
  background: #082c5d;
  margin-top: 15px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  font-weight: 700;
  border-radius: 0; /*10px;*/
  width: auto;
  text-decoration: none;
}
#RingSealApp .btn:hover {
  background: #ffffff 0 0 no-repeat padding-box;
  color: #082c5d;
  text-decoration: none;
}

#RingSealApp .btn.disabled {
  cursor: default;
  opacity: 0.65;
}

#RingSealApp .btn.is-sending {
  cursor: wait;
  opacity: 0.85;
}

/* Field Number */

#RingSealApp input[name="order_amount"].RSA-field {
  width: 50px;
  display: inline-block;
}

#RingSealApp input[type="number"] {
  font-size: 100%;
  color: #555;
  padding: .25em;
  line-height: normal;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
  border-radius: 0; /*4px;*/
  vertical-align: top;
}

#RingSealApp input[type="number"]:focus {
  border-color: #aaa;
}

/* Mobile */

@media screen and (max-width: 600px) {
  #RingSealApp .odd,
  #RingSealApp .even {
    float: none;
    width: 100%;
    padding: 0;
  }
}

/* Popup */

#RSA_popup_wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  background: #fff;
  background: rgba(0, 0, 0, 0.8);
}

#RSA_popup {
  position: relative;
  width: 650px;
  max-width: 100%;
  padding: 20px;
  box-sizing: border-box;
  margin: auto; /* 200px auto 0;*/
}

#RSA_popup_content {
  padding: 25px;
  background: #fff;
}

#RSA_close_popup {
  position: absolute;
  top: 10px;
  right: 7px;
  width: 28px;
  height: 28px;
  border: 2px solid #333;
  color: #333;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 1.4;
}

#RSA_close_popup:hover {
  cursor: pointer;
  color: #222;
  border-color: #222;
}

@media print {
  .btn.RSA-field {
    display: none !important;
  }
}

#RingSealApp .btn#_RSA_output_next {
  display: none;
}