/* GMP144 (Round 144, order 1 of her student portal order portal-ref-c): the one shared style sheet of the student portal. The shell of her approved mock-ups P01 to P09: the deep teal side menu with the grid and the 4 px amber edge, the seven doors, the badges, the HOURS LEFT box, the white top bar (search, EN | МН, the bell, the avatar menu), the numbered section tabs, the cards and pill buttons, and on a phone the bottom tab bar with More. The sizes and colours are those of reference-html (P01, P02); her written order wins where it gives a number (the active door's stripe is 4 px). Every rule is under the student shell (#ptShell.sp-shell, made by gmp144Shell) or the body class it sets while it is on (sp144-on): the teacher's screens, the sign-in page and the payment page do not change. Fonts (her answer C1): Lora for the page titles and the brand, Inter Tight for the rest, both bundled with Cyrillic; the portal's one-font rule reads --gmp-one, so the shell sets that variable (the maths keeps its own face). Dark mode stays as before (C22): the tab bar follows the device. */ @font-face{font-family:'GMP Inter Tight';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-tight-cyrillic-ext-wght-normal.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:'GMP Inter Tight';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-tight-cyrillic-wght-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'GMP Inter Tight';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-tight-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'GMP Inter Tight';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-tight-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'GMP Lora';font-style:normal;font-display:swap;font-weight:400 700;src:url(fonts/lora-cyrillic-ext-wght-normal.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:'GMP Lora';font-style:normal;font-display:swap;font-weight:400 700;src:url(fonts/lora-cyrillic-wght-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'GMP Lora';font-style:normal;font-display:swap;font-weight:400 700;src:url(fonts/lora-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'GMP Lora';font-style:normal;font-display:swap;font-weight:400 700;src:url(fonts/lora-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ------------------------------------------------------------------------------------------------ the page around the shell */ body.sp144-on{background:#F3F7F8} body.sp144-on .gmpbar,body.sp144-on .gmp-foot,body.sp144-on .gmp-stamp,body.sp144-on #ptWarn,body.sp144-on #ghTabs{display:none!important} body.sp144-on .pt-wrap{max-width:none;margin:0;padding:0} /* ------------------------------------------------------------------------------------------------ the shell */ #ptShell.sp-shell{ --sp-teal:#0B3C49;--sp-teal-d:#06252E;--sp-teal-m:#12707F;--sp-amber:#FFAD1F;--sp-paper:#F3F7F8;--sp-ink:#131A2E; --sp-ink2:#3A4560;--sp-slate:#5C6685;--sp-mute:#8A93AD;--sp-line:#D5E3E7;--sp-line2:#EEF3F4;--sp-mint:#8FB9C2;--sp-pale:#E3EEF1; --sp-ok:#0B6E4F;--sp-ok-bg:#E3F4EA;--sp-wait:#7A4A00;--sp-wait-bg:#FFF1D6;--sp-bad:#B3261E;--sp-bad-bg:#FDECEC;--sp-none-bg:#EEF2F3; --sp-math:#1F4E9A;--sp-math-bg:#E6EEFA;--sp-rw:#5B3A9E;--sp-rw-bg:#EFE8FA; --gmp-one:'GMP Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --ui-font-text:'GMP Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --ui-font-num:'GMP Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-size-adjust:none;display:grid;grid-template-columns:270px minmax(0,1fr);gap:0;min-height:100vh;margin:0; background:var(--sp-paper);color:var(--sp-ink);font-size:17px;line-height:1.5} #ptShell.sp-shell h1,#ptShell.sp-shell .sp-serif{font-family:'GMP Lora','Lora',Georgia,'Times New Roman',serif!important} #ptShell.sp-shell :focus-visible{outline:3px solid var(--sp-amber);outline-offset:2px} /* the side menu: deep teal with the grid, the 4 px amber right edge, the brand, the seven doors, the hours box at the bottom */ #ptShell.sp-shell .pt-side.sp-side{position:sticky;top:0;align-self:start;height:100vh;max-height:none;min-height:0;overflow-y:auto;width:auto;margin:0; border:0;border-right:4px solid var(--sp-amber);border-radius:0;box-shadow:none;padding:22px 16px;display:flex;flex-direction:column;gap:22px; color:#fff;transform:none; background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(165deg,#0B3C49,#0C4251 60%,#0B3C49)} #ptShell.sp-shell .sp-brand{display:flex;align-items:center;gap:10px;padding:0 6px;color:#fff;text-decoration:none} #ptShell.sp-shell .sp-brand img{width:56px;height:auto;flex:none} #ptShell.sp-shell .sp-brand-t{display:flex;flex-direction:column;line-height:1.02;gap:4px;min-width:0} #ptShell.sp-shell .sp-brand-t b{font-family:'GMP Lora','Lora',Georgia,serif!important;font-size:19px;font-weight:700;letter-spacing:.05em;color:#fff} #ptShell.sp-shell .sp-brand-t span{font-family:'GMP Lora','Lora',Georgia,serif!important;font-size:12px;letter-spacing:.14em;color:var(--sp-amber)} #ptShell.sp-shell .pt-nav.sp-nav{display:flex;flex-direction:column;gap:4px} #ptShell.sp-shell .sp-nav .pt-ni{display:flex;align-items:center;gap:16px;width:100%;margin:0;padding:15px 16px;border:0;border-radius:14px; background:transparent;box-shadow:none;color:#E3EEF1;font-weight:800;font-size:19px;line-height:1.5;text-align:left;cursor:pointer;position:relative} #ptShell.sp-shell .sp-nav .pt-ni:hover{background:rgba(255,255,255,.06);color:#fff} #ptShell.sp-shell .sp-nav .pt-ni.on{background:rgba(255,173,31,.14);color:#fff;box-shadow:inset 4px 0 0 var(--sp-amber)} #ptShell.sp-shell .sp-nav .pt-ni .ic{flex:none;width:25px;height:25px;color:var(--sp-mint);display:flex;align-items:center;justify-content:center} #ptShell.sp-shell .sp-nav .pt-ni.on .ic{color:var(--sp-amber)} #ptShell.sp-shell .sp-nav .pt-ni .ic svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} #ptShell.sp-shell .sp-nav .pt-ni .lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} #ptShell.sp-shell .qbadge.sp-nb{margin:0 0 0 auto;flex:none;min-width:28px;width:28px;height:28px;line-height:28px;padding:0;border-radius:50%; background:var(--sp-amber);color:var(--sp-teal-d);font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;animation:none;box-shadow:none} #ptShell.sp-shell .qbadge.sp-nb:empty{display:none} #ptShell.sp-shell .sp-hours{margin-top:auto;border-radius:22px;padding:20px 18px 18px;display:flex;flex-direction:column;gap:12px; background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1.5px solid rgba(190,220,228,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 34px rgba(0,0,0,.22)} #ptShell.sp-shell .sp-hours[hidden]{display:none} #ptShell.sp-shell .sp-hours-k{font-size:15px;color:#B9D2D8;font-weight:800;letter-spacing:.14em} #ptShell.sp-shell .sp-hours-n{display:flex;align-items:flex-end;justify-content:space-between;gap:8px} #ptShell.sp-shell .sp-hours-n b{font-size:40px;line-height:1;font-weight:800;color:#fff;white-space:nowrap} #ptShell.sp-shell .sp-hours-n b .sp-hours-o{font-size:20px;color:#E3EEF1;font-weight:600} #ptShell.sp-shell .sp-hours-p{font-size:14px;color:#B9D2D8;font-weight:700} #ptShell.sp-shell .sp-hours-bar{height:10px;border-radius:10px;background:rgba(255,255,255,.14);overflow:hidden} #ptShell.sp-shell .sp-hours-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#FFC24D,#FFAD1F);border-radius:10px} #ptShell.sp-shell .sp-hours-e{font-size:15.5px;color:#E3EEF1} /* the main column: the white top bar, then the page */ #ptShell.sp-shell .pt-main.sp-main{min-width:0;padding:0;margin:0} #ptShell.sp-shell .sp-body{padding:28px 36px 48px;max-width:1120px;display:flex;flex-direction:column;gap:22px;min-width:0} #ptShell.sp-shell .sp-body > *{margin-top:0!important;margin-bottom:0!important;min-width:0} #ptShell.sp-shell .sp-body > :empty{display:none} #ptShell.sp-shell .vw-bar{margin:0;border-radius:0} #ptShell.sp-shell .pt-top.sp-top{display:flex;align-items:center;flex-wrap:nowrap;gap:16px;margin:0;padding:14px 36px;background:#fff; border:0;border-bottom:1px solid var(--sp-line);border-radius:0;box-shadow:none;position:relative;z-index:40;min-height:0} #ptShell.sp-shell .sp-top .sp-mark{display:none} #ptShell.sp-shell .sp-search{order:1;position:relative;flex:1;max-width:454px;min-width:0} #ptShell.sp-shell .sp-search-i{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none;color:var(--sp-mute)} #ptShell.sp-shell .sp-search-i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;display:block} #ptShell.sp-shell input.sp-search-in{display:block;width:100%;margin:0;background:var(--sp-paper);border:1px solid var(--sp-line);border-radius:999px; padding:9px 16px 9px 42px;font-size:15px;line-height:1.5;color:var(--sp-ink);box-shadow:none;font-weight:500} #ptShell.sp-shell input.sp-search-in::placeholder{color:var(--sp-mute);opacity:1} #ptShell.sp-shell input.sp-search-in:focus{outline:3px solid rgba(18,112,127,.18);border-color:var(--sp-teal-m);background:#fff} #ptShell.sp-shell .sp-search-go{display:none} #ptShell.sp-shell .sp-sres{position:absolute;top:calc(100% + 8px);left:0;width:min(560px,calc(100vw - 32px));background:#fff;border:1px solid var(--sp-line); border-radius:18px;box-shadow:0 18px 40px rgba(11,60,73,.16);padding:8px;z-index:70;max-height:min(70vh,560px);overflow-y:auto} #ptShell.sp-shell .sp-sres[hidden]{display:none} #ptShell.sp-shell .sp-sr{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--sp-ink);text-decoration:none;min-height:44px} #ptShell.sp-shell .sp-sr.on,#ptShell.sp-shell .sp-sr:hover{background:#F1F6F7} #ptShell.sp-shell .sp-sr-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3} #ptShell.sp-shell .sp-sr-t b{font-weight:800;font-size:15.5px;color:var(--sp-teal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #ptShell.sp-shell .sp-sr-t span{font-size:13px;color:var(--sp-slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #ptShell.sp-shell .sp-sr-k{flex:none;border-radius:8px;padding:3px 9px;font-size:12.5px;font-weight:800;background:#E7F1F3;color:var(--sp-teal);white-space:nowrap} #ptShell.sp-shell .sp-sr-k.lock{background:var(--sp-none-bg);color:var(--sp-slate)} #ptShell.sp-shell .sp-sr-none{padding:12px;color:var(--sp-slate);font-size:15px} #ptShell.sp-shell .sp-sr-more{padding:8px 12px 4px;color:var(--sp-mute);font-size:13px} /* EN | МН: the language switch of the words file, drawn as two joined segments */ #ptShell.sp-shell .sp-top .gw-sw{order:3;margin-left:auto;display:flex;align-items:stretch;gap:0;border:1px solid #C5D6DB;border-radius:999px;overflow:hidden;flex:none;background:#fff} #ptShell.sp-shell .sp-top .gw-sw .gw-sep{display:none} #ptShell.sp-shell .sp-top .gw-sw .ui-pill{margin:0;border:0;border-radius:0;min-height:0;padding:7px 12px;background:transparent;color:var(--sp-teal); font-size:13px;font-weight:800;line-height:1.5;box-shadow:none;gap:0} #ptShell.sp-shell .sp-top .gw-sw .ui-pill[aria-pressed="true"]{background:var(--sp-teal);color:#fff} #ptShell.sp-shell .sp-top .gw-sw .ui-pill-d{display:none} #ptShell.sp-shell .sp-top .nt-help{order:4;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid #C5D6DB;background:#fff;color:var(--sp-teal); font-size:18px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;margin:0;box-shadow:none;cursor:pointer} #ptShell.sp-shell .sp-bellw{order:5;position:relative;flex:none} #ptShell.sp-shell .sp-bell{width:38px;height:38px;border-radius:50%;border:0;background:transparent;display:flex;align-items:center;justify-content:center; color:var(--sp-teal);cursor:pointer;position:relative;padding:0} #ptShell.sp-shell .sp-bell:hover{background:#F1F6F7} #ptShell.sp-shell .sp-bell svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} #ptShell.sp-shell .sp-dot{position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--sp-amber);border:2px solid #fff} #ptShell.sp-shell .sp-dot[hidden]{display:none} #ptShell.sp-shell .sp-mew{order:6;position:relative;flex:none} #ptShell.sp-shell .sp-me{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:0;border-radius:999px;cursor:pointer;color:inherit;min-height:40px} #ptShell.sp-shell .sp-me:hover{background:#F1F6F7} #ptShell.sp-shell .sp-me .fc-av{width:40px;height:40px;border-radius:50%;background:var(--sp-teal);color:var(--sp-amber);font-weight:900;font-size:16px; display:flex;align-items:center;justify-content:center;flex:none;background-size:cover;background-position:center;border:0;box-shadow:none;position:static;margin:0} #ptShell.sp-shell .sp-me .fc-av.img{color:transparent} #ptShell.sp-shell .sp-me-t{display:flex;flex-direction:column;line-height:1.2;text-align:left;min-width:0} #ptShell.sp-shell .sp-me-t b{font-size:15px;color:var(--sp-ink);font-weight:700;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #ptShell.sp-shell .sp-me-t span{font-size:13px;color:var(--sp-slate);white-space:nowrap} #ptShell.sp-shell .sp-me>svg{width:18px;height:18px;fill:none;stroke:var(--sp-slate);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none} #ptShell.sp-shell .sp-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:300px;background:#fff;border:1px solid var(--sp-line);border-radius:18px; box-shadow:0 18px 40px rgba(11,60,73,.16);padding:8px;z-index:70;display:flex;flex-direction:column;gap:2px} #ptShell.sp-shell .sp-pop[hidden]{display:none} #ptShell.sp-shell .sp-pop-h{padding:8px 12px 6px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sp-teal-m)} #ptShell.sp-shell .sp-mi{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:var(--sp-ink); font-size:15.5px;font-weight:700;text-align:left;text-decoration:none;cursor:pointer;min-height:44px;line-height:1.3} #ptShell.sp-shell .sp-mi:hover{background:#F1F6F7} #ptShell.sp-shell .sp-mi b{font-weight:900;color:var(--sp-teal);min-width:22px;text-align:center} #ptShell.sp-shell .sp-mi svg{width:20px;height:20px;fill:none;stroke:var(--sp-teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none} #ptShell.sp-shell .sp-mi-lang{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px;min-height:44px;font-size:15.5px;font-weight:700} #ptShell.sp-shell .sp-mi-lang .gw-sw{display:flex;border:1px solid #C5D6DB;border-radius:999px;overflow:hidden;gap:0} #ptShell.sp-shell .sp-mi-lang .gw-sw .gw-sep,#ptShell.sp-shell .sp-mi-lang .gw-sw .ui-pill-d{display:none} #ptShell.sp-shell .sp-mi-lang .gw-sw .ui-pill{margin:0;border:0;border-radius:0;padding:7px 12px;background:transparent;color:var(--sp-teal);font-size:13px;font-weight:800;min-height:0;box-shadow:none} #ptShell.sp-shell .sp-mi-lang .gw-sw .ui-pill[aria-pressed="true"]{background:var(--sp-teal);color:#fff} #ptShell.sp-shell .sp-pop hr{border:0;border-top:1px solid var(--sp-line2);margin:4px 6px;width:auto} #ptShell.sp-shell .sp-bn{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--sp-ink);text-decoration:none;font-size:15.5px;font-weight:700;min-height:44px} #ptShell.sp-shell .sp-bn:hover{background:#F1F6F7} #ptShell.sp-shell .sp-bn b{min-width:28px;height:28px;border-radius:50%;background:var(--sp-amber);color:var(--sp-teal-d);font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;flex:none} #ptShell.sp-shell .sp-bn-none{padding:12px;color:var(--sp-slate);font-size:15px} /* the section tabs: separate rounded buttons with a number circle; the open one deep teal with an amber number */ #ptShell.sp-shell .sp-tabs{display:flex;gap:12px;flex-wrap:wrap;margin:0} #ptShell.sp-shell .sp-tab{display:flex;align-items:center;gap:12px;padding:12px 22px 12px 14px;background:#fff;border:1px solid #E3ECEF;border-radius:14px; font-weight:800;font-size:18px;line-height:1.5;color:var(--sp-teal);box-shadow:0 8px 20px rgba(11,60,73,.06);text-decoration:none;white-space:nowrap} #ptShell.sp-shell .sp-tab i{font-style:normal;width:30px;height:30px;border-radius:50%;background:#E7F1F3;color:var(--sp-teal);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;flex:none} #ptShell.sp-shell .sp-tab:hover{border-color:var(--sp-mint)} #ptShell.sp-shell .sp-tab.on{background:var(--sp-teal);color:#fff;border-color:var(--sp-teal);box-shadow:0 12px 26px rgba(11,60,73,.25)} #ptShell.sp-shell .sp-tab.on i{background:var(--sp-amber);color:var(--sp-teal-d)} /* cards and buttons of the shell (the windows take them up in their own orders) */ #ptShell.sp-shell .sp-card{background:#fff;border:1px solid var(--sp-line);border-radius:22px;padding:24px;box-shadow:0 14px 34px rgba(11,60,73,.06);min-width:0} #ptShell.sp-shell .sp-hero{color:#fff;border-radius:22px;padding:24px;border:2px solid rgba(64,170,190,.55); box-shadow:0 0 0 6px rgba(64,170,190,.10),0 22px 50px rgba(11,60,73,.22); background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(165deg,#0B3C49,#0C4251 60%,#0B3C49)} #ptShell.sp-shell .sp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px} #ptShell.sp-shell .sp-h b{font-size:26px;font-weight:900;color:var(--sp-teal);line-height:1.2} #ptShell.sp-shell .sp-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} #ptShell.sp-shell .sp-eye{color:var(--sp-teal-m);font-weight:800;font-size:14px;letter-spacing:.14em;display:block} #ptShell.sp-shell .sp-ph h1{margin:0;font-size:46px;line-height:1.1;color:var(--sp-ink);font-weight:700} #ptShell.sp-shell .sp-pill{display:inline-flex;align-items:center;gap:10px;border-radius:999px;text-decoration:none;font-weight:800;white-space:nowrap; font-size:15px;line-height:1.5;padding:6px 16px 6px 6px;border:0;cursor:pointer;min-height:40px} #ptShell.sp-shell .sp-disc{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none} #ptShell.sp-shell .sp-disc svg{width:12px;height:12px;display:block} #ptShell.sp-shell .sp-go{background:var(--sp-amber);color:var(--sp-teal-d)} #ptShell.sp-shell .sp-go .sp-disc{background:var(--sp-teal-d)} #ptShell.sp-shell .sp-go:hover{background:#FFB83D} #ptShell.sp-shell .sp-go2{background:var(--sp-teal);color:#fff} #ptShell.sp-shell .sp-go2 .sp-disc{background:var(--sp-amber)} #ptShell.sp-shell .sp-go2:hover{background:#0E4A5A} #ptShell.sp-shell .sp-out{background:#fff;color:var(--sp-teal);box-shadow:inset 0 0 0 1.5px var(--sp-teal)} #ptShell.sp-shell .sp-out .sp-disc{background:#E7F1F3} #ptShell.sp-shell .sp-chip{display:inline-flex;align-items:center;border-radius:8px;padding:3px 9px;font-size:13px;font-weight:800;white-space:nowrap} #ptShell.sp-shell .sp-chip.math{background:var(--sp-math-bg);color:var(--sp-math)} #ptShell.sp-shell .sp-chip.rw{background:var(--sp-rw-bg);color:var(--sp-rw)} #ptShell.sp-shell .sp-chip.none{background:var(--sp-none-bg);color:var(--sp-slate)} #ptShell.sp-shell .sp-chip.ok{background:var(--sp-ok-bg);color:var(--sp-ok)} /* the cards and buttons the windows draw today take the shape of the new ones (radius 22 and the soft shadow; pills) */ #ptShell.sp-shell .sp-body .pt-panel{border-radius:22px!important;border:1px solid var(--sp-line);box-shadow:0 14px 34px rgba(11,60,73,.06)} #ptShell.sp-shell .sp-body .pt-btn{border-radius:999px} /* the Question bank door (order 1: the banks of the student's courses; P04 is order 4) */ #ptShell.sp-shell .sp-banks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px} #ptShell.sp-shell .sp-bank{display:flex;flex-direction:column;gap:16px} #ptShell.sp-shell .sp-bank-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} #ptShell.sp-shell .sp-bank-h b{font-size:24px;font-weight:900;color:var(--sp-teal);line-height:1.2} #ptShell.sp-shell .sp-bank-n{font-size:15px;color:var(--sp-slate);font-weight:700} #ptShell.sp-shell .sp-doms{display:flex;flex-direction:column} #ptShell.sp-shell .sp-dom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--sp-line2);font-size:17px} #ptShell.sp-shell .sp-dom span{color:var(--sp-slate);font-size:15px;white-space:nowrap} #ptShell.sp-shell .sp-bank-a{display:flex;gap:12px;flex-wrap:wrap} #ptShell.sp-shell .sp-note{margin:0;color:var(--sp-slate);font-size:15px} #ptShell.sp-shell .sp-body-in{display:flex;flex-direction:column;gap:22px;min-width:0} /* the Question bank door is a new screen (P04): the Join strip, Still to do and Your week, which the older tabs repeat today, are left out here (order 2 makes them Home only) */ #ptShell.sp-shell[data-sp144-tab="bank"] #jnHost,#ptShell.sp-shell[data-sp144-tab="bank"] #tbHost,#ptShell.sp-shell[data-sp144-tab="bank"] #wkHost{display:none} /* ------------------------------------------------------------------------------------------------ a phone: the bottom tab bar and More */ #ptShell.sp-shell .sp-tabbar{display:none} #ptShell.sp-shell .sp-more{display:none} @media (max-width:1100px){ #ptShell.sp-shell{grid-template-columns:240px minmax(0,1fr)} #ptShell.sp-shell .sp-nav .pt-ni{font-size:17px;gap:12px;padding:13px 12px} #ptShell.sp-shell .sp-brand-t b{font-size:16px} #ptShell.sp-shell .pt-top.sp-top{padding:12px 24px;gap:12px} #ptShell.sp-shell .sp-body{padding:24px 24px 44px} } @media (max-width:820px){ #ptShell.sp-shell{grid-template-columns:minmax(0,1fr)} #ptShell.sp-shell .pt-side.sp-side{display:none} #ptShell.sp-shell .pt-top.sp-top{padding:10px 16px;gap:8px} #ptShell.sp-shell .sp-top .sp-mark{display:flex;order:0;flex:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:auto;border-radius:50%;background:var(--sp-teal)} #ptShell.sp-shell .sp-top .sp-mark img{width:32px;height:auto;display:block} #ptShell.sp-shell .sp-search{order:2;flex:none;max-width:none;position:static} #ptShell.sp-shell .sp-search-go{display:flex;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--sp-teal);align-items:center;justify-content:center;padding:0;cursor:pointer} #ptShell.sp-shell .sp-search-go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round} #ptShell.sp-shell .sp-search-f{display:none} #ptShell.sp-shell .sp-search.open .sp-search-f{display:block;position:absolute;left:12px;right:12px;top:calc(100% + 6px);z-index:72} #ptShell.sp-shell .sp-search.open .sp-search-i{left:16px} #ptShell.sp-shell input.sp-search-in{font-size:16px;padding:11px 16px 11px 42px;background:#fff;box-shadow:0 12px 30px rgba(11,60,73,.16)} #ptShell.sp-shell .sp-sres{left:0;width:100%;top:calc(100% + 6px)} #ptShell.sp-shell .sp-top .gw-sw{margin-left:0} #ptShell.sp-shell .sp-top .gw-sw .ui-pill{padding:12px 11px} #ptShell.sp-shell .sp-top .nt-help{width:44px;height:44px} #ptShell.sp-shell .sp-bell{width:44px;height:44px} #ptShell.sp-shell .sp-dot{top:8px;right:8px} #ptShell.sp-shell .sp-me{min-height:44px} #ptShell.sp-shell .sp-me-t,#ptShell.sp-shell .sp-me>svg{display:none} #ptShell.sp-shell .sp-me{padding:2px} #ptShell.sp-shell .sp-pop{position:fixed;top:68px;right:12px;left:12px;min-width:0} #ptShell.sp-shell .sp-body{padding:18px 16px calc(96px + env(safe-area-inset-bottom,0px));gap:18px} #ptShell.sp-shell .sp-ph h1{font-size:34px} #ptShell.sp-shell .sp-tabs{gap:8px} #ptShell.sp-shell .sp-tab{font-size:16px;padding:9px 14px 9px 9px;gap:8px;min-height:44px} #ptShell.sp-shell .sp-tab i{width:26px;height:26px;font-size:13px} #ptShell.sp-shell .sp-card{padding:18px} #ptShell.sp-shell .sp-tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0; background:#fff;border-top:1px solid var(--sp-line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 30px rgba(11,60,73,.08)} #ptShell.sp-shell .sp-tb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;min-width:0; border:0;background:transparent;padding:4px 2px;margin:0;color:var(--sp-slate);font-size:12px;font-weight:800;line-height:1.2;text-decoration:none;cursor:pointer;text-align:center} #ptShell.sp-shell .sp-tb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none} #ptShell.sp-shell .sp-tb>span:not(.qbadge){max-width:100%;overflow:hidden;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15;font-size:11.5px} #ptShell.sp-shell .sp-tb.on{color:var(--sp-teal)} #ptShell.sp-shell .sp-tb.on svg{stroke:#E39400} #ptShell.sp-shell .sp-tb .qbadge.sp-nb{position:absolute;top:0;left:calc(50% + 6px);width:22px;min-width:22px;height:22px;font-size:12px;margin:0} #ptShell.sp-shell .sp-more{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:61;background:#fff;border:1px solid var(--sp-line); border-radius:22px;box-shadow:0 18px 40px rgba(11,60,73,.22);padding:10px;display:flex;flex-direction:column;gap:4px} #ptShell.sp-shell .sp-more[hidden]{display:none} #ptShell.sp-shell .sp-more .sp-mi{font-size:17px;min-height:52px} #ptShell.sp-shell .sp-more .sp-mi.on{background:#F1F6F7;box-shadow:inset 4px 0 0 var(--sp-amber)} #ptShell.sp-shell .sp-more .sp-hours{margin:4px 0 6px;color:#fff; background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(165deg,#0B3C49,#0C4251 60%,#0B3C49); border:0;box-shadow:none;padding:16px} #ptShell.sp-shell .sp-more .sp-hours-n b{font-size:32px} } @media (max-width:380px){ #ptShell.sp-shell .sp-tb{font-size:11px} #ptShell.sp-shell .sp-top .gw-sw .ui-pill{padding:12px 9px} } /* under 360 px the six parts of the top bar do not fit at 44 px each: EN | МН waits in the avatar menu (Language) */ @media (max-width:359px){ #ptShell.sp-shell .sp-top > .gw-sw{display:none} } @media (prefers-color-scheme:dark){ #ptShell.sp-shell .sp-tabbar{background:#0F1A24;border-top-color:#22323F} #ptShell.sp-shell .sp-tb{color:#9AA7BB} #ptShell.sp-shell .sp-tb.on{color:#FFFFFF} } @media print{#ptShell.sp-shell .pt-side.sp-side,#ptShell.sp-shell .pt-top.sp-top,#ptShell.sp-shell .sp-tabbar,#ptShell.sp-shell .sp-more{display:none!important}#ptShell.sp-shell{display:block}} /* ================================================================================================ GMP145 Home (P01), order 2 Her P01 reference-html, its sizes and colours: the hero with the 7 days and the Next class card, Getting started, To do this week and This week, the two question banks, Fix next, Continue and From your teacher. The page's own text is 17 px on lines of 1.5, as on her reference and in the shell. The Join strip, Still to do and Your week of the older screens are gone from every tab: Home has them in the new look, and My work, My classes and the bank have their own (order 2 of her list). */ #ptShell.sp-shell #jnHost,#ptShell.sp-shell #tbHost,#ptShell.sp-shell #wkHost,#ptShell.sp-shell #wlHost{display:none} /* the content column of her references: at most 1120 px of content beside the side menu (her reference-html: 1098 px on a 1440 screen) */ #ptShell.sp-shell .sp-body{max-width:1192px} #ptShell.sp-shell .hm{display:flex;flex-direction:column;gap:22px;min-width:0;font-size:17px;line-height:1.5;color:var(--sp-ink)} #ptShell.sp-shell .hm-main{display:flex;flex-direction:column;gap:22px;min-width:0} #ptShell.sp-shell .hm [hidden]{display:none!important} #ptShell.sp-shell .hm-kept:empty{display:none} #ptShell.sp-shell .hm a{text-decoration:none} #ptShell.sp-shell .hm b{font-weight:700} #ptShell.sp-shell .hm p,#ptShell.sp-shell .hm h1{margin:0} #ptShell.sp-shell .hm-wait,#ptShell.sp-shell .hm-none{color:var(--sp-slate);font-size:15px;margin:0} #ptShell.sp-shell .hm .sp-pill{justify-content:center} #ptShell.sp-shell .hm .sp-disc svg{width:12px;height:12px} #ptShell.sp-shell .hm-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px} #ptShell.sp-shell .hm-h b{white-space:nowrap;font-size:26px;font-weight:900;color:var(--sp-teal);line-height:1.5} #ptShell.sp-shell .hm-h a{white-space:nowrap;font-size:17px;font-weight:800;color:var(--sp-teal-m)} #ptShell.sp-shell .hm-bar{display:block;height:8px;border-radius:8px;background:#E7EFF1;overflow:hidden} #ptShell.sp-shell .hm-bar i{display:block;height:100%;width:0;background:var(--sp-teal-m);border-radius:8px} #ptShell.sp-shell .hm .sp-chip.cv{background:#E7F1F3;color:var(--sp-teal)} #ptShell.sp-shell .hm .sp-chip.test{background:#FFF1D6;color:#7A4A00} #ptShell.sp-shell .hm .sp-chip.warn{background:#FFF1D6;color:#7A4A00} #ptShell.sp-shell .hm-glass,#ptShell.sp-shell .hm-day,#ptShell.sp-shell .hm-next,#ptShell.sp-shell .hm-cdt{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1px solid rgba(143,185,194,.35)} /* 1 the hero */ #ptShell.sp-shell .hm-hero{color:#fff;border-radius:26px;padding:28px 30px;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;box-shadow:0 22px 50px rgba(11,60,73,.22); background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(165deg,#0B3C49,#0C4251 60%,#0B3C49)} #ptShell.sp-shell .hm-hl{display:flex;flex-direction:column;gap:10px;min-width:0} #ptShell.sp-shell .hm-date{color:var(--sp-amber);font-weight:800;font-size:14px;letter-spacing:.14em} #ptShell.sp-shell .hm-hi{font-size:40px;line-height:1.1;font-weight:700;color:#fff;letter-spacing:normal;text-transform:none} #ptShell.sp-shell .hm-sum{color:#D5E3E7;font-size:18px} #ptShell.sp-shell .hm-sum:empty{display:none} #ptShell.sp-shell .hm-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:8px} #ptShell.sp-shell .hm-day{border-radius:14px;padding:10px 6px;text-align:center;display:flex;flex-direction:column;gap:6px;font-size:14px;min-width:0} #ptShell.sp-shell .hm-day .hm-dn{color:var(--sp-mint)} #ptShell.sp-shell .hm-day .sp-chip{justify-content:center} #ptShell.sp-shell .hm-day.off{opacity:.6} #ptShell.sp-shell .hm-day .hm-doff{font-size:12px} #ptShell.sp-shell .hm-day.on{background:var(--sp-amber);color:var(--sp-teal-d);border:0;opacity:1} #ptShell.sp-shell .hm-day.on b{font-weight:700} #ptShell.sp-shell .hm-day.on .sp-chip{background:var(--sp-teal-d);color:#fff} #ptShell.sp-shell .hm-next{border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:14px;border:2px solid rgba(64,170,190,.55);box-shadow:0 0 0 4px rgba(64,170,190,.12);min-width:0} #ptShell.sp-shell .hm-nk{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--sp-mint)} #ptShell.sp-shell .hm-next .hm-none{color:#D5E3E7} #ptShell.sp-shell .hm-wl{color:#D5E3E7} #ptShell.sp-shell .hm-nc{display:flex;align-items:center;gap:14px;min-width:0} #ptShell.sp-shell .hm-nd{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--sp-math);color:#fff;font-weight:900;font-size:20px} #ptShell.sp-shell .hm-nd.rw{background:var(--sp-rw)} #ptShell.sp-shell .hm-nt{display:flex;flex-direction:column;line-height:1.25;min-width:0} #ptShell.sp-shell .hm-nt b{font-size:22px} #ptShell.sp-shell .hm-nt span{color:#D5E3E7} #ptShell.sp-shell .hm-cd{display:flex;gap:8px} #ptShell.sp-shell .hm-cdt{flex:1;border-radius:12px;padding:8px;text-align:center} #ptShell.sp-shell .hm-cdt b{font-size:24px;display:block} #ptShell.sp-shell .hm-cdt span{display:block;font-size:12px;color:var(--sp-mint)} #ptShell.sp-shell .hm-ja{display:flex;flex-direction:column;gap:10px} #ptShell.sp-shell .hm-join{font-size:17px;padding:8px 20px 8px 8px;color:var(--sp-teal-d);white-space:normal;text-align:left} #ptShell.sp-shell .hm-join.off{opacity:.55;cursor:default} #ptShell.sp-shell .hm-join .sp-disc{width:34px;height:34px;background:var(--sp-teal-d)} #ptShell.sp-shell .hm-join .sp-disc svg.hm-cam{width:15px;height:15px;fill:none;stroke:var(--sp-amber);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} #ptShell.sp-shell .hm-live{font-size:15px} #ptShell.sp-shell .hm-cdone{font-weight:800;color:#BDEBD2} /* 2 Getting started */ #ptShell.sp-shell .hm-gs{display:flex;align-items:center;gap:18px;background:#FFF7E6;border-color:#FFE1A3} #ptShell.sp-shell .hm-gsd{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--sp-amber);color:var(--sp-teal-d);font-weight:900} #ptShell.sp-shell .hm-gsb{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0} #ptShell.sp-shell .hm-gsb>b{font-size:18px} #ptShell.sp-shell .hm-gss{display:flex;gap:18px;flex-wrap:wrap;font-size:15px} #ptShell.sp-shell .hm-gst.ok{color:var(--sp-ok);font-weight:700} #ptShell.sp-shell .hm-gst.cur{font-weight:700} #ptShell.sp-shell .hm-gst.todo{color:var(--sp-slate)} #ptShell.sp-shell .hm-gsgo .sp-disc{width:30px;height:30px} #ptShell.sp-shell .hm-gsgo .sp-disc svg.hm-arr{width:13px;height:13px;fill:none;stroke:var(--sp-amber);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} /* the two rows of cards */ #ptShell.sp-shell .hm-g2{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start;min-width:0} #ptShell.sp-shell .hm-g3{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:20px;align-items:start;min-width:0} #ptShell.sp-shell .hm-g3.two{grid-template-columns:1fr 1.1fr} #ptShell.sp-shell .hm-g2 > .sp-card,#ptShell.sp-shell .hm-g3 > .sp-card{min-width:auto} /* 3 To do this week */ #ptShell.sp-shell .hm-row{display:grid;grid-template-columns:96px minmax(0,1fr) 110px 128px;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--sp-line2)} #ptShell.sp-shell .hm-row.first{border-top:0} #ptShell.sp-shell .hm[data-hm-lang="mn"] .hm-row{grid-template-columns:104px minmax(0,1fr) 110px 172px} #ptShell.sp-shell .hm-rc{justify-content:center} #ptShell.sp-shell .hm-rt{display:flex;flex-direction:column;line-height:1.3;min-width:0} #ptShell.sp-shell .hm-rt b{overflow-wrap:anywhere} #ptShell.sp-shell .hm-rt span{font-size:14px;color:var(--sp-slate)} #ptShell.sp-shell .hm-rp{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--sp-slate);min-width:0} #ptShell.sp-shell .hm-more{display:block} #ptShell.sp-shell .hm-more a{font-weight:800;color:var(--sp-teal-m);font-size:15px} #ptShell.sp-shell .hm-handed{border-top:1px solid var(--sp-line2);padding-top:12px;font-size:14px;color:var(--sp-ok);font-weight:700} /* 4 This week */ #ptShell.sp-shell .hm-wk{display:flex;align-items:center;gap:16px;margin-bottom:14px} #ptShell.sp-shell .hm-ring{flex:none;display:block} #ptShell.sp-shell .hm-wkt{display:flex;flex-direction:column;gap:4px;min-width:0} #ptShell.sp-shell .hm-band{align-self:flex-start;font-size:14px} #ptShell.sp-shell .hm-wkn{font-size:14px;color:var(--sp-slate)} #ptShell.sp-shell .hm-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} #ptShell.sp-shell .hm-t{background:#F1F6F7;border-radius:16px;padding:14px;text-align:center;display:flex;flex-direction:column;gap:2px;min-width:0} #ptShell.sp-shell .hm-t b{font-size:28px;font-weight:900;color:var(--sp-teal);line-height:1.1} #ptShell.sp-shell .hm-t span{font-size:15px;color:var(--sp-slate)} #ptShell.sp-shell .hm-t small{font-size:12px;color:var(--sp-mute)} /* 5 the question banks */ #ptShell.sp-shell .hm-bg{display:grid;grid-template-columns:1fr 1fr;gap:16px} #ptShell.sp-shell .hm-bg.one{grid-template-columns:minmax(0,1fr)} #ptShell.sp-shell .hm-bank{color:inherit;border:1px solid var(--sp-line);border-top:8px solid var(--sp-math);border-radius:22px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;min-width:0} #ptShell.sp-shell .hm-bank.rw{border-top-color:var(--sp-rw)} #ptShell.sp-shell .hm-bank:hover{box-shadow:0 10px 26px rgba(11,60,73,.08)} #ptShell.sp-shell .hm-bh{display:flex;align-items:center;gap:12px} #ptShell.sp-shell .hm-bd{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--sp-math);color:#fff;font-weight:900} #ptShell.sp-shell .hm-bank.rw .hm-bd{background:var(--sp-rw)} #ptShell.sp-shell .hm-bt{display:flex;flex-direction:column;line-height:1.2;min-width:0} #ptShell.sp-shell .hm-bt b{font-size:24px} #ptShell.sp-shell .hm-bt span{font-size:17px;color:var(--sp-slate)} #ptShell.sp-shell .hm-doms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;font-size:12px;text-align:center} #ptShell.sp-shell .hm-t.hm-dt{padding:12px 4px} #ptShell.sp-shell .hm-t.hm-dt b{font-size:22px} #ptShell.sp-shell .hm-t.hm-dt.low b{color:var(--sp-bad)} #ptShell.sp-shell .hm-t.hm-dt.none b{color:var(--sp-mute)} #ptShell.sp-shell .hm-bl{font-size:17px;color:var(--sp-slate)} /* 6 Fix next */ #ptShell.sp-shell .hm-fxl{display:flex;flex-direction:column} #ptShell.sp-shell .hm-fx{display:flex;align-items:center;gap:16px;color:inherit;padding:14px 0;border-top:1px solid var(--sp-line2);font-size:18px;min-width:0} #ptShell.sp-shell .hm-sq{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex:none;background:var(--sp-math-bg);color:var(--sp-math)} #ptShell.sp-shell .hm-sq.rw{background:var(--sp-rw-bg);color:var(--sp-rw)} #ptShell.sp-shell .hm-fxn{flex:1;font-weight:800;min-width:0;overflow-wrap:anywhere;line-height:1.3} #ptShell.sp-shell .hm-fx b{color:var(--sp-bad)} #ptShell.sp-shell .hm-fxh{font-size:16px;color:var(--sp-slate);margin-top:14px} /* 7 Continue */ #ptShell.sp-shell .hm-cont{color:#fff;border:2px solid rgba(64,170,190,.6);box-shadow:0 0 0 4px rgba(64,170,190,.12),0 26px 50px rgba(11,60,73,.28); background:linear-gradient(115deg,rgba(255,255,255,.08) 0 30%,transparent 30.5%),linear-gradient(160deg,#0B3C49,#12707F)} #ptShell.sp-shell .hm-cont .hm-h b{color:#fff} #ptShell.sp-shell .hm-cont .hm-wait{color:#D5E3E7} #ptShell.sp-shell .hm-cl{display:block;font-size:17px;color:#B9D2D8} #ptShell.sp-shell .hm-ct{display:block;font-size:24px;line-height:1.25;margin:8px 0 6px} #ptShell.sp-shell .hm-cq{display:block;font-size:17px;color:#D5E3E7} #ptShell.sp-shell .hm-cnone{font-size:17px;color:#D5E3E7;margin:0 0 16px} #ptShell.sp-shell .hm-cbar{height:8px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.18);margin:12px 0 16px} #ptShell.sp-shell .hm-cbar i{display:block;height:100%;width:0;background:var(--sp-amber);border-radius:8px} #ptShell.sp-shell .hm-cgo{font-size:19px;padding:8px 24px 8px 8px} #ptShell.sp-shell .hm-cgo .sp-disc{width:38px;height:38px} /* 8 From your teacher */ #ptShell.sp-shell .hm-fl{display:flex;flex-direction:column;gap:12px} #ptShell.sp-shell .hm-mark{background:#F1F6F7;border-radius:14px;padding:12px 14px} #ptShell.sp-shell .hm-mk{display:flex;justify-content:space-between;gap:10px;font-size:15px;color:var(--sp-slate)} #ptShell.sp-shell .hm-mk b{color:var(--sp-ok)} #ptShell.sp-shell .hm-mn{font-size:18px;line-height:1.4;overflow-wrap:anywhere} #ptShell.sp-shell .hm-new{background:#FFF7E6;border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;color:var(--sp-ink);font-size:18px;font-weight:800} #ptShell.sp-shell .hm-nn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--sp-amber);color:var(--sp-teal-d);font-weight:900;font-size:15px} #ptShell.sp-shell .hm-nn svg.hm-docic{width:18px;height:18px;fill:none;stroke:var(--sp-teal-d);stroke-width:1.8;stroke-linejoin:round} #ptShell.sp-shell .hm-nl{color:#7A4A00} #ptShell.sp-shell .hm-cardl{margin-top:10px} /* a tablet: the two-card row stands in one column, the three cards wrap */ @media (max-width:1100px){ #ptShell.sp-shell .hm-g2{grid-template-columns:minmax(0,1fr)} #ptShell.sp-shell .hm-g3,#ptShell.sp-shell .hm-g3.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} } /* a phone: one column; a To do row is two lines (the chip and the title, then the progress and the button) */ @media (max-width:820px){ #ptShell.sp-shell .hm{gap:18px} #ptShell.sp-shell .hm-main{gap:18px} #ptShell.sp-shell .hm-hero{grid-template-columns:minmax(0,1fr);padding:22px 18px;gap:20px;border-radius:22px} #ptShell.sp-shell .hm-hi{font-size:30px} #ptShell.sp-shell .hm-sum{font-size:16px} #ptShell.sp-shell .hm-days{gap:4px} #ptShell.sp-shell .hm-day{padding:8px 2px;font-size:12px;gap:4px;border-radius:12px} #ptShell.sp-shell .hm-day .sp-chip{font-size:11px;padding:2px 3px} #ptShell.sp-shell .hm-next{padding:18px} #ptShell.sp-shell .hm-nt b{font-size:19px} #ptShell.sp-shell .hm-nd{width:46px;height:46px;font-size:17px} #ptShell.sp-shell .hm-join{white-space:normal;text-align:center;min-height:50px} #ptShell.sp-shell .hm-gs{flex-wrap:wrap;gap:14px} #ptShell.sp-shell .hm-gss{flex-direction:column;gap:6px} #ptShell.sp-shell .hm-gsgo{width:100%;min-height:48px} #ptShell.sp-shell .hm-h b{font-size:22px} #ptShell.sp-shell .hm-h a{font-size:15px;min-height:44px;display:inline-flex;align-items:center;margin:-6px 0}/* a phone: 44 px to tap */ #ptShell.sp-shell .hm-row,#ptShell.sp-shell .hm[data-hm-lang="mn"] .hm-row{grid-template-columns:104px minmax(0,1fr) auto;grid-template-areas:"c t t" "p p b";row-gap:10px;column-gap:12px} #ptShell.sp-shell .hm-rc{grid-area:c} #ptShell.sp-shell .hm-rt{grid-area:t} #ptShell.sp-shell .hm-rp{grid-area:p} #ptShell.sp-shell .hm-rb{grid-area:b;min-height:44px} #ptShell.sp-shell .hm-tiles .hm-t{padding:12px 6px} #ptShell.sp-shell .hm-tiles .hm-t b{font-size:24px} #ptShell.sp-shell .hm-tiles .hm-t span{font-size:14px} #ptShell.sp-shell .hm-bg{grid-template-columns:minmax(0,1fr)} #ptShell.sp-shell .hm-bank{padding:16px} #ptShell.sp-shell .hm-bt b{font-size:21px} #ptShell.sp-shell .hm-bt span,#ptShell.sp-shell .hm-bl{font-size:15px} #ptShell.sp-shell .hm-doms{grid-template-columns:repeat(2,minmax(0,1fr))} #ptShell.sp-shell .hm-fx{font-size:17px;white-space:normal} #ptShell.sp-shell .hm-ct{font-size:21px} #ptShell.sp-shell .hm-cgo{font-size:17px;min-height:48px} #ptShell.sp-shell .hm-new{font-size:16px} #ptShell.sp-shell .hm-mn{font-size:16px} } @media (max-width:359px){ #ptShell.sp-shell .hm-row,#ptShell.sp-shell .hm[data-hm-lang="mn"] .hm-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c c" "t t" "p b"} #ptShell.sp-shell .hm-rc{justify-self:start} #ptShell.sp-shell .hm-tiles{grid-template-columns:minmax(0,1fr)} #ptShell.sp-shell .hm-hi{font-size:26px} }