/**
 * Publication Support quotation form — target-site shim.
 *
 * css/200.css (copied verbatim from the reference) carries the look of the form itself, but the
 * reference page also leaned on two stylesheets this site does not have:
 *
 *   ../style.css          -> imported Bootstrap 2, i.e. the .row-fluid / .spanN fluid grid the
 *                            whole form is laid out with. This site is on Bootstrap 3 (.col-*),
 *                            so that grid is re-declared here, SCOPED to the form section so it
 *                            cannot touch the shared header/footer.
 *   ../css/enago-style.css -> this site has a much older, smaller copy of that file. The helper
 *                            classes and rewards-club/email-gate rules the form needs but the
 *                            local copy lacks are reproduced here, values unchanged.
 *
 * Everything else the page needs (.mandatory, .page-head, .breadcrumbss, .mart-*, .marb-*,
 * .marl0, .font-14, .a-center, .lds-ring, .submit, .common-link, .full) already exists in
 * ../css/enago-kr.css, which the sibling pages in this folder load.
 */

/* ------------------------------------------------------------------------------------------- */
/* Bootstrap 2 fluid grid, scoped. Percentages are Bootstrap 2's own.                           */
/* ------------------------------------------------------------------------------------------- */
.ps-quotation-form .row,
.breadcrumbss .row {
  margin-left: 0;
  margin-right: 0;
}
.ps-quotation-form .row:before,
.ps-quotation-form .row:after,
.breadcrumbss .row:before,
.breadcrumbss .row:after {
  display: table;
  content: "";
  line-height: 0;
}
.ps-quotation-form .row:after,
.breadcrumbss .row:after {
  clear: both;
}
.ps-quotation-form .row > .span12,
.breadcrumbss .row > .span12,
.breadcrumbss .span12 {
  float: left;
  width: 100%;
}

.ps-quotation-form .row-fluid {
  width: 100%;
}
.ps-quotation-form .row-fluid:before,
.ps-quotation-form .row-fluid:after {
  display: table;
  content: "";
  line-height: 0;
}
.ps-quotation-form .row-fluid:after {
  clear: both;
}
.ps-quotation-form .row-fluid [class*="span"] {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 2.127659574468085%;
}
.ps-quotation-form .row-fluid [class*="span"]:first-child {
  margin-left: 0;
}
.ps-quotation-form .row-fluid .span12 { width: 100%; }
.ps-quotation-form .row-fluid .span11 { width: 91.48936170212765%; }
.ps-quotation-form .row-fluid .span10 { width: 82.97872340425532%; }
.ps-quotation-form .row-fluid .span9  { width: 74.46808510638297%; }
.ps-quotation-form .row-fluid .span8  { width: 65.95744680851064%; }
.ps-quotation-form .row-fluid .span7  { width: 57.44680851063829%; }
.ps-quotation-form .row-fluid .span6  { width: 48.93617021276595%; }
.ps-quotation-form .row-fluid .span5  { width: 40.42553191489362%; }
.ps-quotation-form .row-fluid .span4  { width: 31.914893617021278%; }
.ps-quotation-form .row-fluid .span3  { width: 23.404255319148934%; }
.ps-quotation-form .row-fluid .span2  { width: 14.893617021276595%; }
.ps-quotation-form .row-fluid .span1  { width: 6.382978723404255%; }

/* Tablet: Bootstrap 2's 768-979px fluid percentages. */
@media (min-width: 768px) and (max-width: 979px) {
  .ps-quotation-form .row-fluid [class*="span"] {
    margin-left: 2.7624309392265194%;
  }
  .ps-quotation-form .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }
  .ps-quotation-form .row-fluid .span12 { width: 100%; }
  .ps-quotation-form .row-fluid .span11 { width: 91.43646408839778%; }
  .ps-quotation-form .row-fluid .span10 { width: 82.87292817679558%; }
  .ps-quotation-form .row-fluid .span9  { width: 74.30939226519337%; }
  .ps-quotation-form .row-fluid .span8  { width: 65.74585635359117%; }
  .ps-quotation-form .row-fluid .span7  { width: 57.18232044198895%; }
  .ps-quotation-form .row-fluid .span6  { width: 48.61878453038674%; }
  .ps-quotation-form .row-fluid .span5  { width: 40.05524861878453%; }
  .ps-quotation-form .row-fluid .span4  { width: 31.491712707182323%; }
  .ps-quotation-form .row-fluid .span3  { width: 22.92817679558011%; }
  .ps-quotation-form .row-fluid .span2  { width: 14.3646408839779%; }
  .ps-quotation-form .row-fluid .span1  { width: 5.801104972375691%; }
}

/* Phone: stack, exactly as Bootstrap 2 does below 768px. */
@media (max-width: 767px) {
  .ps-quotation-form .row-fluid {
    width: 100%;
  }
  .ps-quotation-form .row-fluid [class*="span"],
  .ps-quotation-form .row > [class*="span"] {
    display: block;
    width: 100%;
    margin-left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  /* Stacked "Full Name" cells: the reference spaces the second one by 10px top and bottom. */
  .ps-quotation-form .form-table .trow .span6 + .span6 {
    margin: 10px 0;
  }
}

/* Small phones: Bootstrap 2 narrows the cells to 98%, and this site's enago-style.css keeps
   .span12 at full width. This site's #page-cont also takes a 15px gutter here that the reference
   does not have, and it is !important, so it has to be answered in kind. */
@media (max-width: 480px) {
  .ps-quotation-form .row-fluid [class*="span"] {
    width: 98%;
  }
  .ps-quotation-form .row-fluid .span12,
  .ps-quotation-form .row > .span12 {
    width: 100%;
  }
  #content.ps-quotation-form #page-cont {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ------------------------------------------------------------------------------------------- */
/* Layout wrappers the reference took from ../style.css                                         */
/* ------------------------------------------------------------------------------------------- */
/* The reference floated #content to contain the fluid grid's floats. Floating it here would take
   it out of flow and let the footer's dark background paint behind the whole form, so contain the
   floats with a clearfix instead. */
#content.ps-quotation-form {
  width: 100%;
  padding: 20px 0;
}
#content.ps-quotation-form:after {
  content: "";
  display: table;
  clear: both;
}

/* ------------------------------------------------------------------------------------------- */
/* Base defaults the reference inherited from Bootstrap 2 + ../style.css                        */
/*                                                                                             */
/* This site is on Bootstrap 3, whose defaults differ from the reference's in four ways that    */
/* change every measurement in the form: global border-box sizing, 16px/24px instead of         */
/* 15px/20px control typography, inline-block bold labels, and a 1170px .container.             */
/*                                                                                             */
/* These are wrapped in :where() so they keep the same low specificity the reference's own base */
/* rules had. That matters: every component rule in 200.css must keep winning over them exactly */
/* as it does on the reference.                                                                 */
/* ------------------------------------------------------------------------------------------- */

/* Sizing: back to the reference's content-box ... */
:where(#content.ps-quotation-form, .breadcrumbss),
:where(#content.ps-quotation-form, .breadcrumbss) *,
:where(#content.ps-quotation-form, .breadcrumbss) *::before,
:where(#content.ps-quotation-form, .breadcrumbss) *::after {
  box-sizing: content-box;
}
/* ... except the controls the reference leaves at the browser's own border-box. (The fluid-grid
   cells are border-box too, from the .row-fluid [class*="span"] rule further up.) */
:where(#content.ps-quotation-form) select,
:where(#content.ps-quotation-form) button,
:where(#content.ps-quotation-form) input[type="button"],
:where(#content.ps-quotation-form) input[type="submit"],
:where(#content.ps-quotation-form) input[type="reset"],
:where(#content.ps-quotation-form) input[type="checkbox"],
:where(#content.ps-quotation-form) input[type="radio"] {
  box-sizing: border-box;
}

/* Typography: reference ../style.css sets 15px/#000 on the controls and the page text. */
:where(#content.ps-quotation-form) {
  font-size: 15px;
  line-height: 24px;
}
:where(.ps-quotation-form) input,
:where(.ps-quotation-form) button,
:where(.ps-quotation-form) select,
:where(.ps-quotation-form) textarea {
  font-size: 15px;
  color: #000;
}
:where(.ps-quotation-form) label,
:where(.ps-quotation-form) input,
:where(.ps-quotation-form) textarea {
  line-height: 20px;
}
/* Bootstrap 2 middle-aligns the controls. On Bootstrap 3's baseline they sit on the text baseline
   instead, which leaves a descender's worth of space under every field. */
:where(.ps-quotation-form) input,
:where(.ps-quotation-form) button,
:where(.ps-quotation-form) select,
:where(.ps-quotation-form) textarea {
  vertical-align: middle;
}
/* Paragraph rhythm: 15px above and below, as ../style.css sets it. */
:where(.ps-quotation-form) p {
  margin: 15px 0;
}
/* Bootstrap 3 uses .checkbox for a form-group wrapper and spaces it 10px; here the class is
   200.css's custom checkbox glyph, which the reference leaves unspaced. */
:where(.ps-quotation-form) span.checkbox {
  margin: 0;
}
/* Bootstrap 3 makes labels inline-block and bold; Bootstrap 2 (and so the reference) does not. */
:where(.ps-quotation-form) label {
  display: block;
  font-weight: 400;
}
/* Reference ../style.css: input[type=text]/[email]/[number]/[password]{height:20px;padding:6px}.
   Kept at that selector's specificity so .form-table .tcol.field's own padding still wins. */
:where(.ps-quotation-form) input[type="text"],
:where(.ps-quotation-form) input[type="email"],
:where(.ps-quotation-form) input[type="number"],
:where(.ps-quotation-form) input[type="password"] {
  height: 20px;
  padding: 6px;
}

/* Container: the reference is 1100px wide, with no gutter, and steps down on Bootstrap 2's
   breakpoints. Chained max-width queries are used instead of Bootstrap 2's min/max pairs so the
   980px-wide gap in the reference's own media queries cannot overflow the viewport here. */
.ps-quotation-form .container,
.breadcrumbss .container {
  width: 1100px;
  max-width: none;
  padding: 0;
}
@media (max-width: 1100px) {
  .ps-quotation-form .container,
  .breadcrumbss .container {
    width: 940px;
  }
}
@media (max-width: 979px) {
  .ps-quotation-form .container,
  .breadcrumbss .container {
    width: 724px;
  }
}
@media (max-width: 767px) {
  .ps-quotation-form .container,
  .breadcrumbss .container {
    width: auto;
    max-width: 420px;
  }
}
@media (max-width: 480px) {
  .ps-quotation-form .container,
  .breadcrumbss .container {
    max-width: 90%;
  }
}

/* Page heading: reference ../css/enago-style.css. The local copy of that file styles .page-head
   span differently (3px rule, 10px line-height), so both parts are restated here. */
.ps-quotation-form .page-head {
  margin-bottom: 30px;
}
.ps-quotation-form .page-head h1 {
  float: left;
  margin: 0;
  padding: 0 3px 0 0;
  background: #fff;
  line-height: 50px;
  overflow: hidden;
}
.ps-quotation-form .page-head span {
  display: block;
  border-bottom: #eee 4px solid;
  line-height: 28px;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .ps-quotation-form .page-head h1 {
    line-height: 36px;
  }
}

/* Section sub-headings sit flush in the reference; the .mart-* helpers still space them out. */
.ps-quotation-form h2 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 28px;
}
/* Same for the package titles. This site's base h3 is bold with a 40px top margin, both marked
   !important, so matching the reference's flush, 500-weight h3 has to answer in kind. */
.ps-quotation-form h3 {
  margin-top: 0 !important;
  margin-bottom: 0;
  padding-bottom: 0;
  font-weight: 500 !important;
}
@media (max-width: 480px) {
  .ps-quotation-form h3 {
    padding-bottom: 5px;
  }
}

/* .a-center exists in the reference's enago-style.css but not in this site's copy. */
.ps-quotation-form .a-center {
  text-align: center;
}

/* Pack details service lists: 200.css marks each item with a grey-tick list-style-image, and the
   browser paints that marker in the ul's left padding. ../../css/enago-kr.css zeroes that padding
   site-wide, which left the ticks with nowhere to render and the items sitting flush against the
   paragraph above instead of indented beneath it. 40px is the gutter the reference keeps (the
   browser default, which the reference's own stylesheets never reset). */
.ps-quotation-form .pack-details ul {
  padding-left: 40px;
}

/* This site's .mandatory is 12px Verdana; the reference just recolours the inherited text. */
.ps-quotation-form .mandatory {
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}

/* Email gate: the reference's copy of enago-style.css gives the button cell half the group's
   width (Bootstrap 3 shrink-wraps it to 1%), which is what leaves the email field at its
   reference width, and keeps the field itself 30px tall. */
.ps-quotation-form .input-group-btn {
  width: 50%;
}
/* Bootstrap 3 pulls the trailing button 1px into the field to collapse the shared border; the
   reference keeps .btn-proceed's own 25px gap instead. */
.ps-quotation-form .input-group-btn:last-child > .btn {
  margin-left: 25px;
}
.ps-quotation-form .input-group .form-control {
  height: 30px;
  padding: 6px 12px;
}
.breadcrumbss {
  padding: 10px 0 0;
}
/* The reference drops the breadcrumb trail on phones rather than letting it wrap. */
@media (max-width: 767px) {
  .breadcrumbss {
    display: none;
  }
}
.breadcrumbss .page_parents {
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
  float: left;
}
.breadcrumbss .page_parents li {
  float: left;
  position: relative;
  padding-left: 15px;
  padding-right: 4px;
  font-weight: 500;
  font-size: 13px;
}
.breadcrumbss .page_parents li:after {
  content: "\203A";
  position: absolute;
  left: 4px;
  top: -1px;
}
.breadcrumbss .page_parents li:first-child {
  padding-left: 0;
  padding-right: 6px;
}
.breadcrumbss .page_parents li:first-child:after {
  content: "" !important;
  display: none;
}

/* ------------------------------------------------------------------------------------------- */
/* Helper classes missing from this site's copy of enago-style.css                              */
/* ------------------------------------------------------------------------------------------- */
.ps-quotation-form .marr-5 { margin-right: 5px !important; }
.ps-quotation-form .marl-15 { margin-left: 15px !important; }
.ps-quotation-form .bg-white { background-color: #fff; }
.ps-quotation-form .txt-instructions { padding: 5px 8px; }
.ps-quotation-form .subjectlevel { margin-top: 10px; float: left; width: 100%; }
.ps-quotation-form .captchatext { width: 100px; }
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* ------------------------------------------------------------------------------------------- */
/* Email gate + loader (reference: ../css/enago-style.css, values unchanged)                     */
/* ------------------------------------------------------------------------------------------- */
/* The reference leaves this button on the browser's default 2px outset border, and pads it by
   10px rather than Bootstrap 3's 6px/12px. Its 14px text comes from .btn, which both sites share. */
.btn-proceed {
  color: #fff;
  background-color: #029dcd;
  border-color: #0281a8;
  border-width: 2px;
  border-style: outset;
  border-radius: 4px;
  margin-left: 25px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 10px;
}
.btn-proceed:hover {
  background-color: #029dcd;
  border-color: #0281a8;
}
.divMask {
  pointer-events: none;
  background-color: #fff;
  filter: alpha(opacity=50);
  opacity: 0.5;
  z-index: 99999;
}
.divMask h3 {
  line-height: 34px;
}
#loaderOverlay {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}
.lds-ring {
  display: inline-block;
  width: 64px;
  height: 64px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }
@keyframes lds-ring {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------------------------------- */
/* Rewards Club block + multi-account modal (reference: ../css/enago-style.css)                  */
/* ------------------------------------------------------------------------------------------- */
.rewardsclubsection { margin: 40px 0; }
.yellow-box {
  background-color: #ffffe0;
  border: solid 1px #ecec00;
  padding: 10px;
}
.yellow-box p {
  margin: 0;
  font-size: 16px;
  display: inline-block;
  line-height: 40px;
}
.rewards_button {
  margin-top: 0;
  background-color: #d52b1e;
  color: #fff;
  padding: 5px 10px;
  border: 0;
}
.rewards-area {
  border: 1px solid #ccc;
  padding: 15px 10px;
}
.rewards-area label.allpoints {
  display: inline-block;
  margin: 15px 5px;
}
.rewards-area input[type="checkbox"] { margin: 0; }
.rewards-area input[type="number"] {
  margin: 0;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  border-radius: 0;
}
.allpoints-box { position: relative; }
div#memidTable {
  box-shadow: 0 7px 10px #dddddd;
  overflow-x: hidden;
  max-height: 500px;
  width: 85%;
  margin: 0 auto 15px;
}
.clientdblk {
  border: 1px solid #eeeeee;
  background: #fff;
  position: relative;
  border-left: 5px solid transparent;
  color: #000;
  display: block;
  padding: 15px;
  letter-spacing: normal;
  font-weight: bold;
  text-transform: uppercase;
}
.clientdblk div { display: inline-block; }
.clientdblk:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 37.5%;
}
.clientdblk:hover {
  border-left: 5px solid #d52b1e;
  background: #f2f2f2;
  cursor: pointer;
}
.mem_name { margin: 0 10px 0 0; }
span.client_memid {
  cursor: pointer;
  color: #00f;
  text-decoration: underline;
}