/* Exam player: the Pearson VUE test player of the ESAT, copied from UAT-UK's official practice tests
   (numbers in tools/pearson_player_spec.md). Always light, as in the test centre; nothing from KESAT's own look. */
.pp { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: #fff; color: #000;
      font: 16px/normal Tahoma, Arial, Helvetica, sans-serif; --cs: #fff; --hover: #ffff00; --line: #fff; }
.pp.hidden { display: none; }
.pp button { all: unset; box-sizing: border-box; cursor: pointer; }
.pp svg { width: 20px; height: 20px; flex: none; display: block; }
.pp u { text-decoration: underline; }
.pp a { color: inherit; text-decoration: none; cursor: pointer; }

/* title bar: #006daa, the title at the left, time remaining and item counter at the right */
.pptitle { position: relative; flex: none; height: 47px; background: #006daa; color: #fff; z-index: 1; }
.pptext { position: absolute; left: 10px; top: 12px; font-size: 21.3333px; line-height: 26px; white-space: nowrap; }
.ppinfo { position: absolute; right: 3px; top: 0; display: flex; flex-direction: column; align-items: flex-end; }
.pp .ppinfobtn { display: flex; align-items: center; height: 25px; border: 1px solid transparent; color: #fff;
                 font: 16px Arial, Helvetica, sans-serif; white-space: nowrap; }
.pp .ppinfobtn.locked { color: #ffff00; cursor: default; }
.pp .ppinfobtn:hover svg, .pp .ppinfobtn:focus svg { color: var(--hover); }
.pp .ppinfobtn:focus { border-color: var(--line); }

/* tool bar: #4678be; Explain Answer / Instructions at the left; Flag for Review and Color Scheme at the right */
.pptool { position: relative; z-index: 2; flex: none; height: 32px; background: #4678be; color: #fff; display: flex; }
.ppside { display: flex; align-items: stretch; }
.ppside.right { margin-left: auto; }
.pp .pptbtn { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 3px; margin-left: 5px; border: 1px solid transparent;
              color: #fff; font: 16px Tahoma, Arial, Helvetica, sans-serif; white-space: nowrap; }
.pp .pptbtn:hover { color: var(--hover); }
.pp .pptbtn:focus { border-color: var(--line); }
.pp #ppToolL .pptbtn { margin-left: 4px; }
.pp .pptbtn.flagged svg { --flagfill: #ffe94d; color: #25476f; }
.ppscheme { position: relative; width: 196px; height: 30px; border: 1px solid #000; padding: 2px; margin-left: 1px; }
.pp .ppschemebtn { display: block; position: relative; width: 100%; height: 100%; padding: 0 0 1px 5px; background: #4678be; color: #fff;
                   font: 16px Tahoma, Arial, Helvetica, sans-serif; line-height: 23px; }
.pp .ppschemebtn i { position: absolute; right: 0; top: 0; font-style: normal; font-size: 12px; color: #000; }
.ppmenu { position: absolute; top: 100%; right: -1px; width: 196px; margin: 0; padding: 0; list-style: none; background: #fff; color: #000;
          border: 1px solid #000; z-index: 60; font: 16px Tahoma, Arial, Helvetica, sans-serif; }
.ppmenu li { padding: 1px 5px; cursor: pointer; line-height: 18px; }
.ppmenu li:hover, .ppmenu li.on { background: #d3d3d3; }

/* content */
.ppbody { flex: 1; overflow: auto; background: #fff; position: relative; }
.ppcontent { padding: 18px 18px 30px; font: 16px Arial, Helvetica, sans-serif; line-height: 20px; }
.ppcontent > p { margin: 0 0 19px; }
.ppinstr { border-collapse: collapse; width: auto; margin: 0 0 21px; font: 16px Arial, Helvetica, sans-serif; background: #fff; }
.ppinstr th, .ppinstr td { border: 1px solid #000; text-align: center; color: #000; font-size: 16px; padding: 1px 4px; width: 153px; }
.ppinstr th { height: 45px; font-weight: 700; line-height: 20px; }
.ppinstr td { height: 25px; font-weight: 400; }
.ppitem .ppstem { font: 16px/1.35 Arial, Helvetica, sans-serif; }
.ppopts { margin-top: 34px; font: 16px Arial, Helvetica, sans-serif; }
.pprow { display: flex; align-items: flex-start; gap: 5px; padding-left: 5px; margin-bottom: 18px; min-height: 26px; cursor: default; }
.pp input[type=radio] { all: revert; width: 13px; height: 13px; margin: 5px 0 0; flex: none; }
.ppopt { display: block; }
.ppopt p { margin: 0; }
.ppimg { position: relative; }
.ppimg .qimg { width: 100%; height: auto; display: block; filter: none; }
.ppbox { position: absolute; display: flex; align-items: center; cursor: default; }
.pp .ppbox input[type=radio] { margin: 0 0 0 4px; }

/* navigation bar: #006daa under a 2 px white line; buttons divided by 2 px white rules */
.ppnav { flex: none; height: 35px; background: #006daa; color: #fff; border-top: 2px solid #fff; display: flex; }
.ppcell { display: flex; align-items: center; height: 33px; }
#ppNavL .ppcell { padding: 0 1px 0 5px; border-right: 2px solid var(--line, #fff); }
#ppNavR .ppcell { padding: 0 3px 0 7px; border-left: 2px solid var(--line, #fff); }
#ppNavR .ppcell:last-child { padding-right: 9px; }
.pp .ppbtn { display: flex; align-items: center; gap: 6px; height: 25px; padding: 0 5px 0 1px; border: 1px solid transparent; color: #fff;
             font: 18.6667px Tahoma, Arial, Helvetica, sans-serif; white-space: nowrap; }
#ppNavR .ppcell:last-child .ppbtn { gap: 1px; padding: 0 0 0 1px; }
.pp .ppbtn:hover { color: var(--hover); }
.pp .ppbtn:focus { border-color: var(--line); }

/* dialogs: blue box, white 1 px border, title line, icon at the left, buttons centred; invisible cover */
.ppcover { position: fixed; inset: 0; z-index: 39; background: transparent; }
.ppdlg { position: fixed; z-index: 40; background: #006daa; color: #fff; border: 1px solid #fff; padding: 3.2px; font: 16px Tahoma, Arial, Helvetica, sans-serif; }
.ppmodal { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 464px; max-width: 94vw; }
.ppdlghead { display: flex; align-items: center; gap: 4px; padding: 6.4px 8px; border-bottom: 1px solid var(--line, #fff); }
.ppdlghead small { font-size: 13.3333px; margin-left: 4px; }
.ppdlgbody { display: flex; align-items: flex-start; padding: 10px 8px 0 6px; line-height: 19px; }
.ppdlgbody p { margin: 0 0 15px; }
.ppbigicon svg { width: 32px; height: 32px; margin: 0 12px; }
.ppdlgbtns { text-align: center; padding: 0 0 8px; }
.ppdlgbtns.right { text-align: right; padding: 8px 22px 10px; }
.pp .ppdbtn { display: inline-block; margin: 0 3px; padding: 3.8px 10px 5.8px 12px; border: 1px solid var(--line, #fff); color: #fff;
              font: 16px Tahoma, Arial, Helvetica, sans-serif; line-height: 17px; }
.pp .ppdbtn:hover, .pp .ppdbtn:focus { color: var(--hover); }

/* Navigator */
.ppnavdlg { width: 728px; }
.ppnavbody { background: #fff; height: 321px; overflow-y: auto; margin: 3px 6px 0 0; }
.ppnavbody table { width: 100%; border-collapse: collapse; color: #000; font: 16px Tahoma, Arial, Helvetica, sans-serif; }
.ppnavbody th { position: sticky; top: 0; background: #4678be; color: #fff; font: 700 18.6667px Tahoma, Arial, Helvetica, sans-serif;
                border: 1px solid #c0c0c0; height: 28px; padding: 1px; text-align: center; cursor: pointer; }
.ppnavbody th:nth-child(1) { width: 31%; } .ppnavbody th:nth-child(2) { width: 21%; }
.ppsort { font-size: 12px; margin-left: 6px; vertical-align: 2px; }
.ppnavbody td { height: 32px; padding: 2px; border: 1px solid #c0c0c0; border-left: 0; text-align: left; color: #000; font-size: 16px; cursor: pointer; }
.ppnavbody td:first-child { border-left: 1px solid #ddd; }
.ppnavbody tr.even td { background: #f4f4f4; } .ppnavbody tr.odd td { background: #fff; }
.ppnavbody tr.cur td { background: #fffd6f; }
.ppnavbody td.red { color: #d90000; }
.ppnavbody td.fl { text-align: center; }
.ppfl svg { display: inline-block; --flagfill: #ffe94d; color: #25476f; vertical-align: middle; }
.ppnavfoot { padding: 12px 8px 0; }

/* Solution window (Explain Answer): large, not modal */
.ppsol { left: 7.2%; top: 9.9%; width: 85.5%; height: 80%; display: flex; flex-direction: column; z-index: 35; }
.ppsoltitle { font-size: 18.6667px; }
.pp .ppx { margin-left: auto; color: #fff; }
.pp .ppx:hover { color: var(--hover); }
.ppsolbody { flex: 1; overflow: auto; background: #fff; color: #000; padding: 18px; font: 16px Arial, Helvetica, sans-serif; }
.ppsolans { margin-bottom: 18px; }
.ppsolbody .solution { border: 0; padding: 0; margin: 0; background: none; }
.ppsolbody .solution summary { font-weight: 400; color: #555; font-size: 13px; cursor: default; list-style: none; }

/* Item Review: the newer, light look */
.ppbody.ppreviewbg { background: #f2f3f5; }
.pprev { padding: 0 32px 32px; font-family: sans-serif; }
.pprevhead { display: flex; justify-content: space-between; align-items: flex-start; height: 154px; }
.pprevhead h3 { margin: 32px 0 0 1px; font: 700 28px sans-serif; color: #000; }
.pp .pprevall { margin: 32px 10px 0 0; background: #007394; color: #fff; border: 1px solid transparent; border-radius: 6px; padding: 8px 16px;
                font: 18.6667px Tahoma, Arial, Helvetica, sans-serif; line-height: 25px; }
.pp .pprevall:focus { border-color: #000; }
.pptabs { display: grid; border-bottom: 1px solid #007394; height: 26px; }
.pptab { display: flex; justify-content: center; align-items: flex-start; gap: 0; height: 25px; }
.pp .pptab button { font: 700 16px Arial, Helvetica, sans-serif; color: #333; height: 22px; }
.pptab.on { border-bottom: 3px solid #007394; height: 25px; }
.pp .pptab.on button { color: #007394; }
.pptip { position: relative; margin: 3px 0 0 6px; color: #333; }
.pptip svg { width: 16px; height: 16px; }
.pptiptext { display: none; position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background: #333; color: #fff;
             padding: 1px 5px; border-radius: 4px; font: 13px sans-serif; white-space: nowrap; }
.pptip:hover .pptiptext { display: block; }
.pprevtable { width: 100%; margin-top: 40px; background: #fff; border-radius: 8px; border-collapse: separate; border-spacing: 0; font: 16px sans-serif; }
.pprevtable thead th { height: 56px; padding: 22px 0 0 15px; text-align: left; vertical-align: top; font: 700 12px sans-serif; color: #666;
                       text-transform: uppercase; letter-spacing: 1.25px; border-bottom: 1px solid #dfe1e1; }
.pprevtable thead th:nth-child(1) { width: 11.5%; } .pprevtable thead th:nth-child(2) { width: 23%; }
.pprevtable thead th:nth-child(3) { width: 25.2%; } .pprevtable thead th:nth-child(4) { width: 23%; }
.pprevtable tbody th, .pprevtable tbody td { height: 55px; padding: 22px 0 0 15px; vertical-align: top; text-align: left; font: 400 16px sans-serif;
                                             color: #000; border-bottom: 1px solid #c0c0c0; }
.pprevtable tbody td:last-child { text-align: center; padding: 18px 0 0; }
.pppill { display: inline-block; padding: 4px 12px; border-radius: 14px; font: 700 16px/16px sans-serif; margin-top: -4px; }
.pppill.unseen { color: #ab4c03; background: #ffecb4; }
.pppill.incomplete { color: #c21d00; background: #fce8e6; }
.pppill.complete { color: #1e6500; background: #f1f7e5; }
.ppbflag svg { display: inline-block; vertical-align: -4px; margin-left: 6px; }
.pp .pprevbtn { font: 700 16px Arial, Helvetica, sans-serif; color: #007394; padding: 2px 8px 5px; border-radius: 4px; }
.pp .pprevbtn:hover { background: #dfe1e1; }

/* Review instructions: white card */
.ppinfodlg { position: fixed; z-index: 40; background: #fff; color: #666; border: 1px solid #fff; border-radius: 8px; padding: 3.2px;
             box-shadow: rgba(34, 34, 34, .14) 0 4px 20px; width: 924px; max-width: 94vw; font: 16px Tahoma, Arial, Helvetica, sans-serif; }
.ppinfohead { margin: 6px 40px 0 44px; padding: 2px 0 8px; border-bottom: 1px solid #dfe1e1; font: 700 22.38px Tahoma, Arial, Helvetica, sans-serif; color: #000; }
.ppinfobody { padding: 10px 40px 0 42px; line-height: 24px; }
.ppinfobody p { margin: 0 0 16px; } .ppinfobody ol { margin: 0 0 16px; padding-left: 40px; }
.ppinfobtns { text-align: right; padding: 8px 44px 12px; }
.pp .ppinfobtns button { background: #007394; color: #fff; border: 1px solid #fff; border-radius: 6px; padding: 11px 39px 10px; font: 16px Tahoma, Arial, Helvetica, sans-serif; }

/* colour schemes (Color Scheme menu): everything in the chosen colour, black text and lines */
.pp.cs { --hover: #000080; --line: #000; }
.pp.cs-ly { --cs: #ffff80; } .pp.cs-sa { --cs: #fdd3c5; } .pp.cs-wh { --cs: #fff; } .pp.cs-ye { --cs: #ffff00; }
.pp.cs, .pp.cs .pptitle, .pp.cs .pptool, .pp.cs .ppnav, .pp.cs .ppbody, .pp.cs .ppbody.ppreviewbg, .pp.cs .ppdlg, .pp.cs .ppschemebtn,
.pp.cs .ppmenu, .pp.cs .ppsolbody, .pp.cs .ppnavbody, .pp.cs .ppnavbody td, .pp.cs .ppnavbody th, .pp.cs .pprevtable, .pp.cs .ppinfodlg,
.pp.cs .ppinstr, .pp.cs .pprevall, .pp.cs .ppinfobtns button { background: var(--cs); color: #000; }
.pp.cs .ppinfobtn, .pp.cs .pptbtn, .pp.cs .ppbtn, .pp.cs .ppdbtn, .pp.cs .ppx, .pp.cs .ppschemebtn i { color: #000; }
.pp.cs .ppinfobtn.locked { color: #000080; }
.pp.cs .pptitle { border-bottom: 2px solid #000; height: 47px; }
.pp.cs .pptool { border-bottom: 2px solid #000; }
.pp.cs .ppnav { border-top-color: #000; }
.pp.cs .ppdlg { border-color: #000; }
.pp.cs .ppnavbody tr.cur td { background: #fffd6f; }
.pp.cs .ppnavbody td.red, .pp.cs .pppill { color: #000; background: none; }
.pp.cs .pprevtable tbody th, .pp.cs .pprevtable tbody td { border-bottom-color: #000; }
.pp.cs .pptabs { border-bottom-color: #000; } .pp.cs .pptab.on { border-bottom-color: #000; } .pp.cs .pptab button, .pp.cs .pprevbtn { color: #000 !important; }
.pp.cs .pprevall { border: 1px solid #000; }
.pp.cs .qimg { mix-blend-mode: multiply; }
.pp.cs input[type=radio] { appearance: none; width: 13px; height: 13px; border: 1px solid #000; border-radius: 50%; background: var(--cs); }
.pp.cs input[type=radio]:checked { background: radial-gradient(circle, #000 0 3px, var(--cs) 3.5px); }

/* KESAT's "new version" bar never shows over an exam (Reload would lose it); it comes back after the exam */
body.pvmode #updBar { display: none !important; }