/* consumerhighs.css — the Consumer Highs application funnel
   (APPLY_BRAND=consumer-highs). A stand-alone mid-2000s corporate site:
   fixed-width table frame, gradient navy banner, glossy buttons, Verdana
   body, Georgia headings, a ticker and a live clock. Loaded by its own
   shell (apply_consumer_highs.html) — none of the other themes are on the
   page, so every class sop.js and the course HTML use is styled here. */

body{margin:0;padding:18px 0 28px;color:#222222;
  background:#E6EAEE linear-gradient(180deg,#C9D2DB 0,#E6EAEE 320px) no-repeat;
  font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;line-height:1.55}
a{color:#1F55A0}
a:visited{color:#5B3F8C}
a:hover{color:#C0392B}
hr{border:0;border-top:1px solid #D5DCE3;margin:16px 0}
b{font-weight:bold}

/* ---------------------------------------------------------- the frame */
.frame{width:800px;max-width:100%;background:#FFFFFF;border:1px solid #A9B6C3;
  border-radius:6px;overflow:hidden;box-shadow:0 2px 10px rgba(30,50,80,.18)}

.banner{background:linear-gradient(180deg,#24467E 0,#132C57 100%);
  padding:16px 20px;border-bottom:3px solid #E8B92E}
.emblem-cell{padding-right:14px;vertical-align:middle}
.emblem{width:54px;height:54px;text-align:center;border-radius:6px;
  background:linear-gradient(180deg,#A3242A 0,#6E1116 100%);color:#FFD34D;
  font:bold 25px/52px Georgia,"Times New Roman",serif;
  border:1px solid #4A0A0E;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.wordmark{color:#FFD34D;font:italic bold 34px/1.05 Georgia,"Times New Roman",serif;
  text-shadow:1px 1px 2px rgba(0,0,0,.55);letter-spacing:.3px}
.tagline{color:#D6E0EE;font-size:10px;letter-spacing:3px;text-transform:uppercase;
  margin-top:5px}

.datebar{background:linear-gradient(180deg,#F7F9FB 0,#E4E9EE 100%);
  border-bottom:1px solid #C9D2DB;padding:5px 14px;font-size:11px;color:#3A4654;
  overflow:hidden}
.datebar-left{float:left;font-weight:bold;color:#1B3A6B}
.datebar-right{float:right}

.ticker{background:#FFF8DC;border-bottom:1px solid #EAD9A0;padding:5px 0;
  color:#7A4B00;font-size:12px;font-weight:bold}

/* ----------------------------------------------------- left side bar */
.side{width:196px;background:#F2F5F8;border-right:1px solid #D5DCE3;padding:14px 12px}
.box{background:#FFFFFF;margin-bottom:14px;border:1px solid #C3CDD7;border-radius:5px;
  overflow:hidden}
.box-head{background:linear-gradient(180deg,#2D5390 0,#1B3A6B 100%);color:#FFFFFF;
  font-size:11px;font-weight:bold;padding:5px 9px;letter-spacing:1px;
  text-transform:uppercase}
.steps{margin:0;padding:8px 8px 8px 28px;font-size:11px}
.steps li{margin:3px 0;padding:1px 4px;color:#8A96A3}
.steps li.done{color:#2E7D32}
.steps li.cur{color:#132C57;font-weight:bold;background:#FFF4C2;border-radius:3px}
.facts{width:100%;font-size:11px;border-collapse:collapse}
.facts td{padding:5px 9px;border-top:1px solid #E3E8ED}
.facts tr:first-child td{border-top:0}
.facts td.k{color:#66727F}

/* ------------------------------------------------------- main column */
.main{padding:18px 24px 20px}
.crumb{min-height:14px}
.badge{color:#A3242A;font-size:10px;font-weight:bold;letter-spacing:2px;
  text-transform:uppercase}
.title{font:bold 26px/1.2 Georgia,"Times New Roman",serif;color:#132C57;margin:2px 0 10px}
.progress{width:100%;border-collapse:collapse}
.progress-label{width:1%;font-size:11px;white-space:nowrap;padding-right:10px;color:#4A5663}
.bar{height:12px;background:#E9EDF1;border:1px solid #B9C4CF;border-radius:7px;
  overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.bar-fill{height:100%;min-width:10px;border-radius:7px;
  background:linear-gradient(180deg,#6FA0DC 0,#2F64AE 55%,#24508F 100%)}

.content h3{font:bold 18px Georgia,"Times New Roman",serif;color:#132C57;
  margin:22px 0 4px;padding-bottom:3px;border-bottom:1px solid #E1E6EB}
.content p{margin:8px 0}
.lead,.corp-lead{font-size:14px}
.corp-note{background:#FFF8DC;border:1px solid #EAD9A0;border-left:4px solid #E8B92E;
  border-radius:4px;padding:8px 12px;margin-top:18px}
.corp-note::before{content:"Note: ";font-weight:bold;color:#7A4B00}

/* the in-page logo belongs to the old skins; the banner is the logo here */
.cc-logo{display:none}

.corp-values .cv{padding:2px 0 6px 18px;position:relative}
.corp-values .cv::before{content:"";position:absolute;left:2px;top:30px;
  width:7px;height:7px;border-radius:2px;background:#A3242A}
.corp-values .cv h3{margin-top:14px}

/* weekly-pay / workload strip */
.comp-facts{display:flex;gap:10px;margin:14px 0}
.comp-facts .cf{flex:1;padding:8px 12px;border:1px solid #C9D2DB;border-radius:5px;
  background:linear-gradient(180deg,#FFFFFF 0,#EEF2F6 100%)}
.comp-facts .cf-label{display:block;font-size:10px;letter-spacing:1px;
  text-transform:uppercase;color:#66727F}
.comp-facts .cf-value{display:block;font-weight:bold;color:#132C57}

/* data tables — flat ruled, gradient header, zebra rows */
.comp-table{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:12px;
  border:1px solid #B9C4CF}
.comp-table th{background:linear-gradient(180deg,#2D5390 0,#1B3A6B 100%);color:#FFFFFF;
  text-align:left;font-size:11px;padding:6px 8px;font-weight:bold;
  border:1px solid #1B3A6B}
.comp-table td{background:#FFFFFF;padding:6px 8px;border:1px solid #D5DCE3}
.comp-table tbody tr:nth-child(even) td{background:#F4F7FA}
.comp-table td.amt{font-weight:bold;color:#2E7D32;white-space:nowrap}
.comp-note{color:#5A6672;font-size:11px;font-style:italic;margin:5px 0 12px}

/* --------------------------------------------------- buttons (glossy) */
.btn{display:inline-block;cursor:pointer;text-decoration:none;color:#1E2A36;
  font:bold 13px Verdana,Geneva,Tahoma,sans-serif;padding:7px 18px;
  border:1px solid #98A6B4;border-radius:4px;
  background:linear-gradient(180deg,#FFFFFF 0,#E9EEF3 50%,#D9E0E7 51%,#E6EBF0 100%);
  box-shadow:0 1px 1px rgba(0,0,0,.12)}
a.btn,a.btn:visited{color:#1E2A36}
.btn:hover{color:#1E2A36;border-color:#7F8E9D;
  background:linear-gradient(180deg,#FFFFFF 0,#F1F5F8 50%,#E3E9EF 51%,#EEF2F6 100%)}
.btn:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
  background:linear-gradient(180deg,#D9E0E7 0,#E9EEF3 100%)}
.btn.primary{color:#FFFFFF;border-color:#1B3F78;text-shadow:0 -1px 0 rgba(0,0,0,.3);
  background:linear-gradient(180deg,#5A8DD6 0,#3A6FBE 50%,#2A5CA8 51%,#336AB8 100%)}
a.btn.primary,a.btn.primary:visited,.btn.primary:hover{color:#FFFFFF}
.btn.primary:hover{border-color:#15336A;
  background:linear-gradient(180deg,#6A9AE0 0,#4679C8 50%,#3366B4 51%,#3C74C4 100%)}
.btn.primary:active{background:linear-gradient(180deg,#2A5CA8 0,#3A6FBE 100%)}
.btn:disabled,.btn.next.locked{opacity:.5;pointer-events:none;cursor:default;
  box-shadow:none}
.btn.xl{font-size:15px;padding:10px 26px}
.btn.cta-huge{display:block;text-align:center;font-size:18px;padding:16px 12px;
  margin:20px 0 6px;border-radius:6px}
.require{margin-top:16px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* ----------------------------------------------------- forms */
.app-form{background:#F4F7FA;padding:14px 16px;border:1px solid #D5DCE3;border-radius:6px}
.form-field,.form-check{margin:0 0 12px;padding:4px 6px;border-radius:4px}
.form-label{margin:0 0 5px;font-weight:bold;color:#1E2A36}
.req-star{color:#C0392B}
.form-field input[type="text"],.form-field textarea{width:100%;max-width:440px;
  box-sizing:border-box;padding:6px 8px;background:#FFFFFF;color:#1E2A36;
  font:13px Verdana,Geneva,Tahoma,sans-serif;border:1px solid #A9B4BF;border-radius:3px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}
.form-field input[type="text"]:focus,.form-field textarea:focus{outline:none;
  border-color:#3A6FBE;box-shadow:inset 0 1px 2px rgba(0,0,0,.1),0 0 0 3px rgba(58,111,190,.2)}
.form-check{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.form-check input{margin:3px 0 0;width:15px;height:15px}
.form-field.missing,.form-check.missing{background:#FDECEA;box-shadow:0 0 0 1px #E3A49C}
.quiz-fail{display:none;color:#C0392B;font-weight:bold;margin:10px 0 0}
.quiz-fail.show{display:block}
.form-saved{color:#2E7D32;font-weight:bold}
.opt{display:block;margin:3px 0}

/* ------------------------------------------------------------ footer */
.footer{background:linear-gradient(180deg,#EEF2F6 0,#DFE5EB 100%);
  border-top:1px solid #C9D2DB;padding:12px 14px 14px;text-align:center;
  font-size:11px;color:#4A5663}
.foot-links{margin-bottom:6px}

/* -------------------------------------------- phones: one column */
@media (max-width:640px){
  body{padding:0;font-size:14px;background:#FFFFFF}
  .frame{width:100%;border:0;border-radius:0;box-shadow:none}
  .banner{padding:11px 12px}
  .emblem{width:42px;height:42px;font-size:19px;line-height:40px;border-radius:5px}
  .emblem-cell{padding-right:10px}
  .wordmark{font-size:27px}
  .tagline{font-size:9px;letter-spacing:2px}
  .datebar-left{display:none}
  .datebar-right{float:none}
  .body-row{display:flex;flex-direction:column}
  .main{order:1;padding:14px 14px 18px}
  .side{order:2;width:auto;border-right:0;border-top:1px solid #D5DCE3}
  .title{font-size:23px}
  .comp-facts{flex-direction:column;gap:6px}
  .comp-table{font-size:11px}
  .comp-table th,.comp-table td{padding:5px 5px}
  .form-field input[type="text"],.form-field textarea{font-size:16px;max-width:none}
  .print-link{display:none}
}
@media print{
  body{background:#FFFFFF}
  .ticker,.side,.nav,.require,.foot-links,.datebar{display:none}
  .frame{border:0;box-shadow:none}
}
.geo-credit{font-size:10px}
.geo-credit a,.geo-credit a:visited{color:#66727F}