body { background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; margin: 0px; } :root { --green: #339933; --green2: #3c8530; --freshGreen: #4CAF50; --freshGreen2: #43A047; --blue: #2a62d5; --freshBlue: #007BFF; --freshBlue2: #2563EB; --freshPurple: #7C3AED; --freshPurple2: #6D28D9; --freshPurpleTint: #F3EEFF; --freshPurpleTint2: #EAE1FF; --lightblue: #95add6; --freshGrey: #6B7280; --freshGrey2: #4B5563; --freshRed: #EF4444; --freshRed2:#DC2626; --ibishiRed: #C1272D; --ibishiBlack: #1a1a1a; --ibishiOffwhite: #fbf2e5; --red: #AA0000; --lightGrey: #E5E7EB; --paleGrey:#F5F7FB; --midGrey: #C5C5C5; --navGrey: #eeeeee; --darkGrey: #757575; --resultAPass: #15803D; --resultPlusPass: #10B981; --resultPass: #84CC16; --amber: #FACC15; } /* Tabs and top navigation layout */ input[type="submit"], input[type="button"], button { border: none !important; } .nowrap { white-space: nowrap; } .dropmenudiv, .dropmenudiv div, .dropmenudiv ul{ position:absolute; top: 0px; left:0px; border: 1px solid #333333; border-top:0px none; border-left:0px none; line-height:18px; z-index:100; background-color:#333333; visibility: hidden; padding: 0px; margin:0px; list-style-type: none; } .dropmenudiv.adminnav, .dropmenudiv #instructormenu, .dropmenudiv #resourcesmenu, .dropmenudiv #siteadminmenu { background-color:#800000;} .dropmenudiv.adminnav li a:hover, .dropmenudiv #instructormenu li a:hover, .dropmenudiv #resourcesmenu li a:hover, .dropmenudiv #siteadminmenu li a:hover { background-color: #600000; } ul.dropmenudiv.adminnav ul, .dropmenudiv #instructormenu ul, .dropmenudiv #resourcesmenu ul, .dropmenudiv #siteadminmenu ul { background-color:#700000; } ul.dropmenudiv ul, .dropmenudiv div ul { background-color:#222222; } .dropmenudiv.activemenu, .dropmenudiv.activemenu ul { border-color:#666666; background-color:#F0F0F0; margin:0px; } .dropmenudiv.activemenu a { border-color:#CCCCCC; text-decoration: none; color:#666666; } .dropmenudiv.activemenu a:hover { background-color: #E0E0E0; color:#000000;} .dropmenudiv ul { margin:0px; padding:0px 8px 8px 8px; position:absolute; left:0px; top:0px; list-style-type:none; border:0px none; } .dropmenudiv li a { width: auto; display: block; line-height:26px; border-bottom: 1px solid #CCCCCC; padding-right:2px; text-decoration: none; color:#EEEEEE; } .dropmenudiv li ul { margin-left:0px; width:155px; } * html .dropmenudiv li { /*IE6 CSS hack*/ display: inline-block; width: 175px; /*width of menu (include side paddings of LI A*/ } * html .dropmenudiv li ul { /*IE only hack width: 100%;*/ width:auto; } .dropmenudiv li a:hover{ background-color: #444444; } .downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/ padding-left: 4px; border: 0; } .rightarrowpointer {background-image:url(/images/icons/nav-right.png); background-repeat:no-repeat; background-position:left center; padding-left:15px; } .ddiframeshim{ position: absolute; z-index: 500; background: transparent; border-width: 0; width: 0px; height: 0px; display: block; } .masHeaderContent.notLoggedIn { background-color: #FFF; text-align: left !important; border-bottom:0px none; color: #000; width:320px !important; } .masHeaderContent.notLoggedIn img { width:auto; } .newResponsive .masHeaderContent.notLoggedIn { width: 450px !important; margin: auto; padding: 10px; border-radius: 20px 20px 0px 0px; } .headerTopRight { float:right; text-align:right; z-index:999; font-size:12px; margin-top:5px; } .loginLogo { max-width:100px; max-height:60px; float:left; margin-right:20px; margin-left:20px; } .ibishi.noSession .loginLogo { float:none; width:90%; max-width:250px; height: auto; max-height:none; } /* updated version */ #navContainer { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index: 100000000; background-color:rgba(255,255,255,0.0); display:none; } #navContent { position:absolute; height:auto; width:100%; background-color:var(--navGrey); margin:0px auto; top:30px; z-index: 100000001; border-radius:0 0 10px 10px; -moz-box-shadow: 6px 6px 6px #AAA; -webkit-box-shadow: 6px 6px 6px #AAA; box-shadow:6px 6px 6px #AAA; display:none; } .navLinks { padding:0px 17px 20px 33px; } .navBlock, .topNavH { float:left; width:160px; margin-right:30px; text-align:left; font-size:14px; } .navBlockIn { margin-left:0px; } #navContent a { display: block; padding:6px 3px; color:var(--darkGrey); font-size:14px; } #navContent a:hover { background-color:var(--midGrey); text-decoration:none; } a.masterLink, a.masterLinkEmpty { border-bottom:2px solid var(--darkGrey); color:#000 !important; } a.masterLinkEmpty { height:1px; padding-top:0px !important; padding-bottom: 0px !important; } .topNavH { color:#000 !important; line-height: 30px; height:32px; } a.topNavH.noDrop { float:none; display: inline-block; margin-right:15px; width:auto; border-right:1px solid #FFF; padding-right:15px; } /* check styles */ h1, .h1, .masParentContent h1 { color: #231F20; font-size: 22px; text-align:left; margin-bottom:20px; } h2, .h2 { font-size: 14px; color: #003333; } p { color: #000000; font-size: 11px; } li, ol { font-family: inherit; font-size: inherit; color: inherit} td { font-size: 11px; } table.size16 td { font-size:16px; } form { margin:0px; } div { position:relative; } img { border: 0px none; vertical-align:middle; } svg { vertical-align: middle; } th { position: sticky; top:0; background-color: #FFFFFF; z-index:10; } tr.darkHeader th { background-color: #000; color: #fff; font-size: 14px; padding: 3px; } tr.darkHeader th a { color: #fff; } input, select, option, textarea { font-family: Arial, Helvetica, sans-serif; font-size: 12px} .xp, .xpnum { color: #000; background-color: #FFFFFF !important; border: 1px solid #CCC !important; } .newResponsive .xp, .newResponsive .xpnum { padding: 3px; } .xpclear {color: #666666; background-color: #FFFFFF; border: 1px solid #CCCCCC} .xpnum { text-align: right; } .xpbeef { font-size:16px; border: 1px solid #CCCCCC; padding:5px; } .isResp .xpbeef, .mobilecss .xpbeef { font-size:20px; padding:10px; } .clearBeefSearch { display:inline-block; margin-left:5px; background-color:#FFF; border-radius:100%; width:25px; height:25px; background-image: url(https://i.ibishi.co.uk/1126-cancel-circle.png); background-size: contain; background-repeat: no-repeat; vertical-align: middle; cursor: pointer; } .mobilecss .clearBeefSearch, .isResp .clearBeefSearch { margin-left:-30px; bottom:5px; margin-top:16px; vertical-align: top; } .dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; } .dot.red { background-color: var(--freshRed); } .dot.green { background-color: var(--freshGreen); } .dot.blue { background-color: var(--freshBlue); } .dot.grey { background-color: var(--freshGrey); } .dot.amber { background-color: var(--freshAmber); } .showSQL { display: none; } .masParentContent { padding-top:10px; background-color:#FFF; text-align:left; min-height:500px; } .mas .masParentContent { max-width:1200px; min-width:1000px; } .isWider .masParentContent { max-width:1500px; padding-left:10px; padding-right:10px; } .mas.fullWidth .masParentContent { max-width: none; padding-left:5px; padding-right:5px; } .mobilecss .masParentContent, .isResp .masParentContent { padding-left:10px; padding-right:10px; max-width: 820px; min-width: auto; min-height: 440px; } .mas.leftChannel .masParentContent { max-width:1030px; min-width:830px; margin-left:170px; } .mas.leftChannel.leftChannelNoMargin .masParentContent { margin-left:0; } .mas.leftChannel .masParentContent, body.noMainBackground .masParentContent { background-color: transparent !important; border: 0px none; padding: 0 !important; box-shadow: none !important; } .maFooter { margin-top:20px; background-color:var(--navGrey); padding:30px; } .cleanFooter { margin-top:20px; padding:30px; text-align:center; } .bcFooter { width:270px; margin:0 auto; text-align:left; height:55px; font-size:15px; } .StudentHeading { color:#999; margin-bottom:7px; } .subnav { border-left:1px solid #CCC; display:inline-block; } .subnav a { display:inline-block; padding:5px 9px; font-size:14px; border:1px solid #CCC; border-left:0px none; min-height:16px; height:auto; line-height:1.25; box-sizing:border-box; } .subnav a:hover { background-color:#CCC; color:#000; text-decoration:none; } .subnav.newstudentnav a { display:block; border-top:0px none; min-height:30px; height:auto; padding:7px; color:#333; line-height:1.25; white-space:normal; } .subnav-kicker { font-size:.78em; text-transform:uppercase; letter-spacing:.04em; } .subnav a.subNavActive { background-color:var(--freshBlue); color:#FFF; border-color:var(--freshBlue); } .subnavTitle { font-size:16px; margin:8px 0px; font-weight:bold; color: #000; } .rightButtons { height:0px; } .profileRightButtons { float:right; z-index:99; top:-40px; } .mobilecss .profileRightButtons { float:none; top:auto; margin:20px 0px; text-align:left; } .rightButtons .profileRightButtons { float: none; z-index: 99; top: -50px; position: absolute; right: 0px; } .mobilecss .rightButtons .profileRightButtons { float: none; z-index: 99; top: auto; position: relative; } .mobilecss .rightButtons { height:auto; } .leftChannel .subnav.newstudentnav { float:left; width:150px; margin-left:-170px; margin-top:-10px; border-top:0px none; position: sticky; top:0px; } .circled { border-radius: 50%; behavior: url(PIE.htc);background-repeat: no-repeat; background-position:center center; } .iconbox { position:absolute; top:3px; background-color:#CCC; padding:5px; width:20px; height:20px; } .icontext { background-color:#EEE; height:22px; width:22px; text-align:center; line-height:22px; display:inline-block; font-size:16px; border:1px solid #333; } .newResponsive .icontext { line-height: normal; } .icontext.inactive { background-color: #F5F5F5 !important; color:#CCC !important; border-color: #CCC; } .icontext.inactive:hover { background-color: var(--lightGrey); color:#AAA; border-color: #AAA; } .circled.greenicon { background-color: var(--freshGreen); color: #FFF; } .circled.redOnGrey { background-color: var(--lightGrey); color:var(--freshRed); } .gradingAreaList .iconbox { top:3px; padding:5px; right:83px; } .firstaid, .firstaidamber, .firstaidgrey, .firstaidgreen { background-image:url("https://i.ibishi.co.uk/w/153-aid-kit.png"); background-size: 17px; background-position: 6px 5px; background-color:var(--freshRed); } .firstaid { background-color:var(--freshRed); } .firstaidamber { background-color:var(--amber); } .firstaidgrey { background-color:var(--midGrey); } .firstaidgreen { background-color: var(--freshGreen2); } a { text-decoration: none; color: var(--freshBlue2); } a:hover { text-decoration:underline; } .nav, a.nav, a.sml, a.sml:hover, a.light, a.light:hover { color: #FFFFFF} a.nav:hover { color: #CCCC33} .blk { color:#000000; } .white, a.white { color:#FFF; } a.blk { color: #000000 !important; } a.blk:hover { color: #000000 !important; text-decoration: underline; } .grey, a.grey { color:#999 !important; } .lgrey, a.lgrey { color:var(--lightGrey); } a.profile { display:block; border-bottom:1px solid #CCC; padding-bottom:2px; margin-bottom:2px; } .showPointer { cursor: pointer; } .spaced { margin-bottom:15px; } .submitlg, .submitlg1, .submitlg2, .submitlg3, .backButton { font-size:15px; vertical-align: middle; display:inline-block; background-color:var(--freshGrey); color:#FFF !important; padding:5px 6px !important; border-radius:5px; text-shadow:0px 0px 0px; cursor:pointer; text-decoration:none; font-weight: 100; line-height: normal !important; white-space: nowrap; transition: background-color 0.3s; } .submitlg1 { background-color:var(--freshGreen); } .submitlg2 { background-color:var(--freshBlue); } .submitlg3 { background-color:var(--freshRed); } .submitlg:hover, .submitlg1:hover, .submitlg2:hover, .submitlg3:hover { color:#FFF !important; text-decoration:none; } .submitlg:hover { background-color:var(--freshGrey2); } .submitlg1:hover { background-color:var(--freshGreen2); } .submitlg2:hover { background-color:var(--freshBlue2); } .submitlg3:hover { background-color:var(--freshRed2); } .slimButton { font-size:14px; padding:3px !important; } .mobilecss .buttonWidthFull { display:block; width:95%; text-align: center; } .submitlg.ghostButton { background-color: transparent !important; border: 1px solid #D1D5DB !important; color: #374151 !important; } .ghostButton:hover { background-color: #F3F4F6 !important; color: #000; } .backButton { padding:5px !important; display:inline-block; height:28px; width:28px; vertical-align:middle; background-color: transparent; border-color: transparent; background-position: center center; background-size: 25px; background-repeat: no-repeat; background-image: url(https://i.ibishi.co.uk/lucide/arrow-left.svg); } .backButton:hover { background-color:var(--lightGrey); } /* Reusable page hero, adapted from the student profile subpage heading. */ .maPanelHero { align-items:center; background:#fbfcff; border:1px solid #dfe4eb; border-radius:11px; box-sizing:border-box; display:flex; gap:14px; margin-bottom:20px; min-height:68px; padding:11px 18px; width:100%; } .maPanelHeroBack { align-items:center; border:1px solid #d9dee6; border-radius:8px; color:#3f4855; display:inline-flex; flex:0 0 auto; font-size:14px; font-weight:750; gap:8px; min-height:40px; padding:0 13px; text-decoration:none; } .maPanelHeroBack:hover { background:#f7f9fb; color:#171b23; text-decoration:none; } .maPanelHeroBack svg { height:17px; width:17px; } .maPanelHeroDivider { align-self:stretch; border-left:1px solid #e7eaf0; flex:0 0 1px; } .maPanelHeroIdentity { align-items:center; display:flex; flex:1 1 auto; gap:13px; min-width:0; } .maPanelHeroIcon { align-items:center; background:#eef4ff; border-radius:50%; color:#2563eb; display:flex; flex:0 0 44px; height:44px; justify-content:center; width:44px; } .maPanelHeroIcon svg { height:21px; width:21px; } .maPanelHeroTitle { color:#111318; font-size:18px; font-weight:800; line-height:1.2; overflow-wrap:anywhere; } @media(max-width:900px) { .maPanelHero { gap:10px; min-height:72px; padding:10px 12px; } .maPanelHeroBack { border:0; border-radius:7px; min-height:40px; padding:0 7px; } .maPanelHeroBackText,.maPanelHeroDivider { display:none; } .maPanelHeroIdentity { gap:11px; } .maPanelHeroIcon { flex-basis:46px; height:46px; width:46px; } } .inlinebutt, .inlinebuttactive { display:inline-block; border-radius:3px; width:75px; margin-right:5px; padding:2px; text-align:center; background-color:#CCC; color: #333; cursor:pointer; } .inlinebutt:hover, .inlinebuttactive:hover { background-color:var(--freshGreen); color:#FFF; } .inlinebuttactive { background-color:var(--freshGreen); color:#FFF; } .inlinebutt.progress { background-color:var(--freshGreen); color:#FFF; } .inlinebutt.progress:hover { background-color:#999; color:#FFF; } .inlinebutt.completed { background-color:#214dd1; color:#FFF; } .inlinebutt.shorter, .inlinebuttactive.shorter { width:45px; } .inlinebutt.longer, .inlinebuttactive.longer { width:85px; } .fixedButtons .inlinebutt.longer, .fixedButtons .inlinebuttactive.longer { width:150px; text-align: left; } .slimSubmit { font-size:13px; padding:3px; } .slimSubmit.buttonIcon { background-size: 15px !important; } .submitlg.buttonIcon, .submitlg1.buttonIcon, .submitlg2.buttonIcon, .buttonIcon { padding-left:26px !important; background-position: 5px center; background-size: 16px; background-repeat: no-repeat; } .buttonIcon.smallIcon { padding-left:23px !important; background-size: 15px; } .buttonIcon.LargerIcon { padding-left:30px !important; background-size: 20px; } .buttonIcon.justIcon { min-height: 24px; background-position: center; } .buttonIcon.AddIcon { background-image: url(https://i.ibishi.co.uk/w/1120-plus-circle.png); } .buttonIcon.MinusIcon { background-image: url(https://i.ibishi.co.uk/w/1121-minus-circle.png); } .buttonIcon.arrowDownIcon { background-image: url(https://i.ibishi.co.uk/w/1233-arrow-down6.png); } .buttonIcon.arrowUpIcon { background-image: url(https://i.ibishi.co.uk/w/1229-arrow-up6.png); } .buttonIcon.CloseIcon { background-image: url(https://i.ibishi.co.uk/w/1126-cancel-circle.png); } .buttonIcon.CloseIcon.smallIcon { background-image: url(https://i.ibishi.co.uk/w/1135-cross3.png); } .buttonIcon.ShareIcon { background-image: url(https://i.ibishi.co.uk/w/1480-share.png); } .buttonIcon.SaveIcon { background-image: url(https://i.ibishi.co.uk/w/0394-floppy-disk.png); } .buttonIcon.Cloud { background-image: url(https://i.ibishi.co.uk/w/0892-cloud-upload2.png); } .buttonIcon.CloudDark { background-image: url(https://i.ibishi.co.uk/lucide/cloud-upload.svg); } .buttonIcon.Cog { background-image: url(https://i.ibishi.co.uk/w/149-cog.png); } .buttonIcon.Copy { background-image: url(https://i.ibishi.co.uk/w/0200-copy3.png); } .ghostButton.buttonIcon.Copy { background-image: url(https://i.ibishi.co.uk/0200-copy3.png); } .buttonIcon.EditIcon { background-image: url(https://i.ibishi.co.uk/w/0021-pencil7.png); } .buttonIcon.Eye { background-image: url(https://i.ibishi.co.uk/w/0943-eye.png); } .ghostButton.buttonIcon.Eye { background-image: url(https://i.ibishi.co.uk/0943-eye.png); } .buttonIcon.SendMail { background-image: url(https://i.ibishi.co.uk/w/0307-envelop3.png); } .buttonIcon.Ticked { background-image: url(https://i.ibishi.co.uk/1399-checkmark-circle.png); } .buttonIcon.Refresh { background-image: url(https://i.ibishi.co.uk/w/02-redo.png); background-size: 18px; } .buttonIcon.Back { background-image: url(https://i.ibishi.co.uk/w/1222-arrow-left3.png); background-size: 16px; } .buttonIcon.BackBlk { background-image: url(https://i.ibishi.co.uk/1222-arrow-left3.png); background-size: 16px; } .buttonIcon.Print { background-image: url(https://i.ibishi.co.uk/w/0361-printer2.png); background-size: 16px; } .buttonIcon.PrintBlk { background-image: url(https://i.ibishi.co.uk/0361-printer2.png); background-size: 16px; } .buttonIcon.PrintBlk { background-image: url(https://i.ibishi.co.uk/lucide/printer.svg); background-size: 16px; } .buttonIcon.Checkout { background-image: url(https://i.ibishi.co.uk/w/059-cart.png); background-size: 18px; } .buttonIcon.yes { background-image: url(https://i.ibishi.co.uk/w/1139-checkmark4.png); background-size: 16px; } .buttonIcon.no { background-image: url(https://i.ibishi.co.uk/w/1135-cross3.png); background-size: 22px; } .buttonIcon.report { background-image: url(https://i.ibishi.co.uk/w/0192-file-presentation.png); background-size: 18px; } .buttonIcon.trash { background-image: url(https://i.ibishi.co.uk/w/0766-bin.png); background-size: 18px; } img.smallIcon { width:18px; } .submitAndGo { height:45px; line-height:43px !important; } .submitAndGo .xp { width:80%; padding:5px 10px; height:100%; font-size:18px; border-right:0px none !important; margin:0px; vertical-align:top; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .submitAndGo .buttonPress { display:inline-block; height:100%; border-radius:0px 15px 15px 0px; padding:0px 10px; background-color:var(--freshGreen); color:#FFF; cursor:pointer; } .submitAndGo .buttonPress:hover { background-color: var(--freshRed); } .first { margin-top:0px; } .feedback { border:2px dotted #999; padding:10px; margin:0px 0px 10px 0px; border-radius:0px 0px 10px 10px; } .feedback.isFilters { border:0px none; background-color: var(--paleGrey); } .feedback2 { border:2px dotted #999; padding:20px; margin:20px; border-radius:10px; font-size:18px; } .searchRow .ghostButton { height:30px; vertical-align: unset; } #searchBreadCrumbs { margin-top:5px; } .feedBack { padding:20px; border-radius:10px; font-size:18px; background-color:var(--freshRed); color:#FFF; margin:20px 0px 20px 0px; text-align:center; } .feedBack.Green { background-color:var(--freshGreen); } .feedBack.Grey { background-color:var(--lightGrey); color:#666; } .feedBack.Black { background-color:#000; } .feedBack.Blue { background-color:var(--freshBlue); } .feedBack.Blue.isHover:hover { background-color:var(--freshBlue2); } .feedBack a { color:#FFF; text-decoration:none; } .feedback a:hover { color:#EEE; } .feedBack.Grey a, .feedBack.Grey a:hover, .feedback.isFilters a:hover { color:#000; } .feedBack.Grey a.submitlg:hover, .feedBack.Grey a.submitlg1:hover, .feedBack.Grey a.submitlg2:hover { color:#FFF !important; } .feedBack.blocks { display:inline-block; width:220px; margin:0px 10px 10px 0px; min-height:50px; vertical-align: middle; } .tightFit { padding:10px; margin-bottom:0px; border-bottom-right-radius:0px; border-bottom-left-radius:0px; } .feedBack.closing { background-image: url(https://i.ibishi.co.uk/w/1126-cancel-circle.png), url(https://i.ibishi.co.uk/w/1126-cancel-circle.png); background-size: 25px 25px; background-repeat: no-repeat; background-position: left 10px center, right 10px center; } .feedBack.stickyClicky { margin:0px; cursor:pointer; position:sticky; top:0px; z-index:99; } .feedBack p, .feedBack h1, .feedBack ul, .feedBack li { color: #FFF; } .noticeBox { display:flex; align-items:center; gap:10px; padding:14px 16px; margin:14px 0px 18px 0px; border:1px solid #e4b44c; border-left:5px solid #d88a12; border-radius:8px; background:#fff8e8; color:#3a2b11; font-size:15px; line-height:1.35em; text-align:left; } .noticeBox strong, .noticeBox span, .noticeBox p, .noticeBox ul, .noticeBox ol, .noticeBox li { color:inherit; } .noticeBox p { margin:8px 0px; } .noticeBox ul, .noticeBox ol { margin:12px 0px; padding-left:28px; } .noticeBox li { margin:3px 0px; } .noticeBox p.withButtons { margin:16px 0px 0px; } .noticeBox a { color:inherit; font-weight:700; } .noticeBox img { width:20px; height:20px; flex:0 0 20px; } .noticeBox.Red { border-color:#efc2c2; border-left-color:var(--freshRed); background:#fff2f2; color:#571f1f; } .noticeBox.Blue { border-color:#b9d8f2; border-left-color:var(--freshBlue); background:#eef7ff; color:#174466; } .noticeBox.Green { border-color:#bfe3c7; border-left-color:var(--freshGreen); background:#f0fbf3; color:#1f4c29; } #showMultiOptions { background-color:var(--freshGreen); font-size:15px; cursor:pointer; margin:5px 0px 0px 0px !important; padding:2px; border-radius:0px 0px 5px 5px; position:sticky; top:0px; transition: background-color 0.3s; } #showMultiOptions:hover { background-color:var(--freshGreen2); } .button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .homebox { background-color: var(--freshGreen); color: white; border: none; padding: 12px; border-radius: 0.5rem; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .homebox:hover { background-color: var(--freshGreen2); text-decoration: none; } .homebox .subhead { border-bottom:1px solid #CCC; display:block; margin-bottom:5px; } .homebox .subhead a { color:#333; } a.homebox { color:#FFF; font-size:18px; text-decoration: none; text-align: center; height: auto; font-weight:100; } .introPanel { max-width:650px; margin:30px auto; border-radius:10px; padding:10px; background-color:var(--lightGrey); text-align:center; -webkit-box-shadow: 10px 10px 20px #bbb; box-shadow:10px 10px 20px #bbb; } .introPanel p { font-size:14px; } .introHeading { font-size:24px; margin-bottom:10px; } .size10 { font-size: 10px; } .size11, .sml { font-size: 11px; } .size12 { font-size: 12px; } .size13 { font-size: 13px; } .size14, .size4 { font-size: 14px; } .size16 { font-size: 16px; } .size18 { font-size: 18px; } .size20 { font-size: 20px; } .size22 { font-size: 22px; } .size24 { font-size: 24px; } .size26 { font-size: 26px; } .size28 { font-size: 28px; } .size30 { font-size: 30px; } .table-ruled td, .table-ruled th { padding:6px 3px; border-bottom:1px solid var(--lightGrey); } .table-ruled.size12 td { font-size:12px !important; } .table-ruled.size11 td { font-size:11px !important; padding:2px; } .table-ruled.size11 input { font-size:11px !important; } .table-ruled td .toolbar1 td, .ruled-table td .toolbar1 td { padding:1px;} .ruled-table td { padding:2px; border-bottom:1px solid var(--lightGrey); } .size14 td, .ruled-table.size14 td, .ruled-table.size14 input, .ruled-table.size14 .xp { font-size:14px; } .xp.size16 { font-size: 16px; } .morepadding td { padding-top:4px; padding-bottom:4px; } .formrow { text-align:left; } .formrowlg td, .formrowlg th { padding:8px 4px; border-bottom:1px solid var(--lightGrey); font-size:14px; } .formrowlg .xp, .formrowlg option, .formrowlg input:not(.submitlg):not(.submitlg1):not(.submitlg2):not(.submitlg3) { font-size:14px; padding:3px; } .mobilecss .formrowlg .xp, .mobilecss .formrowlg .xpnum { padding: 7px; font-size: 18px !important; border-radius: 5px; } .formrowlg .clearFormrowLg td { border-bottom: 0px none; } .formrowlg .clearFormrowLg.licenceEntry td { padding-left:0px; padding-right: 8px; font-size:16px; } .formrowlg.size16 .xp, .formrowlg.size16 option, .formrowlg.size16 input { font-size:16px !important; padding:5px; } .formrowlg input.submitlg2, .formrowlg input.submitlg { font-size:15px !important; } .formrowlg.xppad .xp, .formrowlg.xppad .xpnum, .formrowlg.xppad input, .formrowlg.xppad textarea, .formrowlg.xppad select, .xppad.xp { padding:8px; } .formrowlg.xppad .xp, .formrowlg.xppad .xpnum, .formrowlg.xppad input, .formrowlg.xppad select, .xppad.xp { padding:8px; font-size:16px !important; } .competitionEditLayout { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px 24px; } .competitionEditMain { order:1; flex:1 1 640px; min-width:0; } .competitionEditAside { order:2; flex:0 0 370px; width:370px; position:relative; text-align:left; padding:5px; line-height:20px; box-sizing:border-box; } .competitionEditAside textarea { max-width:100%; box-sizing:border-box; } @media (max-width: 1150px) { .competitionEditAside { flex-basis:100%; width:100%; max-width:760px; padding-left:0; padding-right:0; } } @media (max-width: 768px) { .competitionEditLayout { flex-direction:column; } .competitionEditMain, .competitionEditAside, .competitionEditAside .formrowlg { width:100%; max-width:none; } } .fixedHeader th { position:sticky; background-color:#FFFFFF; top:0px; } .highlightrow { background-color:#000000; color:#FFFFFF; font-size:16px; padding:3px !important; } .highlightrow span { font-size:13px; color:var(--lightGrey); } .selectableRow { cursor:pointer; } .selectableRow:hover { background-color:var(--lightGrey); } .rulediv { padding-bottom:2px; padding-top:2px; border-bottom:1px solid var(--lightGrey); } .shophead { font-size: 14px; font-weight: bold; color: #999999; } .spiele { color: #666666; font-size: 9px} .pdhead { font-size: 14px; font-weight: bold ; color: #000066} .nav_back { background-color: #CCCCCC; padding-top: 0px; padding-right: 3px; padding-bottom: 0px; padding-left: 3px; } .nav_extra { background-color: #666666} .nav_main { background-color: #000000} .catch { font-size: 11px; color: #FFFF99} .catch_rule1 { background-color: #FFFF99} .catch_rule2 { background-color: #FFFF99} .catch_back { background-color: #000000} .top_back { background-color: #335555} .top_backr { background-color: #335555 } .top_rule1 { background-color: #FFFF99} .top_rule2 { background-color: #FFFF99 } .main_bgcol { background-color: #FFFFFF; color: #000000} .welcome_box { background-color: #FFFF99} .welcome_bd { background-color: #000000} .fea_back { background-color: #CCCCFF} .subhead { font-size: 14px; font-weight: bold; color: #990000;} .highlight { color: #990000} .cart_head { color: #FFFFFF} .cart_top { background-color: #333333; color: #FFFFFF} .cart_stripe1 { background-color: #D8D8DA; color: #000000; padding: 4px; } .cart_stripe2 { background-color: #EFEFEF; color: #000000; padding: 4px; } .cart_txt { color: #000000} .prod_rule { background-color: #000066} .prod_col1 { background-color: #D1D2D3; color: #231F20; padding: 3px; } .prod_col2 { background-color: #FFFFFF; padding: 3px; border: 1px solid #D1D2D3; } .highlightbox { background-color: #990000} .prod_high { color: #990000} .prod_back { background-color: #CCCCCC} .lowlight { color: #FFFF00} .search_input { border-style: none} .search_go { border-style: none; font-weight: bold} .footer { color: #FFFFFF; background-color: #A6A7AB} .light { color: #FFFFFF} .tb_light { background-color: #D1D2D3; margin: 0px; color: #000000} .tb_dark, tr.tb_dark td { background-color: #666666; margin: 0px; color: #FFFFFF} tr.tb_dark td { border-right:1px solid #333; border-color:#333; line-height: normal; } .cart-event-name { font-size: 10px; } .lightbold { color: #FFFFFF; font-size: 12px; font-weight: bold; } .text-area { padding: 0px 5px 0px 5px; border-right: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; } .tbhighlight { color: #FFFFFF; background-color: #660000; } .tb_white { background-color: #FFFFFF; } .drawtop { border-top:1px solid #000; border-right: 1px solid #000000; border-bottom: 2px dotted #999999; padding: 3px; } .drawbottom { border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-top-color: #000000; border-left-color: #000000; padding: 3px; } .blackheader { font-size: 14px; font-weight: bold; color: #FFFFFF; background-color: #000000; padding: 3px; border-bottom-width: 1px; border-bottom-style: solid; border-top-color: #FFFFFF; } .filterbox { background-color:#EEEEEE; border:1px solid #AAAAAA; padding:3px; margin-bottom:5px; } .filterbox div { float:left; margin-right:10px; padding:3px; } .filterbox .fbox { border:1px solid #666666; background-color:#FFFFFF; padding:5px; min-height: 22px; line-height: 22px; } .filterbox .fbox.highlighted { border:1px solid var(--freshRed); background-color:var(--freshRed); color: #FFFFFF; } /* categories list */ .catdiv { position:relative; border:1px solid #666666; background-color:#FFFFFF; height:30px; margin-bottom:1px; line-height:30px; font-size:12px; padding-left:5px; font-weight:bold; } .catdiv a { color:#000000; } .cl0 { width:880px; left:0px; } .cl1 { width:780px; left:75px; } .cl2 { width:705px; left:150px; } .cl3 { width:630px; left:225px; } .catdel { float:right; position:relative; top:7px; width:25px; text-align:center; } .catdiv1 { float:left; } .catdiv2 { float:right; width:25px; text-align:center; font-weight:100; margin-top:7px; } .catdiv3 { float:right; width:45px; font-weight:100; font-size:10px; } .catdiv3 a { color:#0000CC; } .changeorder { position:absolute; left:-60px; top:3px; font-weight:100; font-size:10px; line-height:10px; } .changeorder img { float:left; margin-right:3px; margin-top:2px; } td.catlev1 { font-weight:bold; } td.catlev2 { padding-left:30px; } td.catlev3 { padding-left:60px; } .prodnav { height:20px; font-size:12px; } .isResp .prodnav { text-align: center; } .prodnav1 { display:inline-block; } .twolinenav .prodnav { height:auto; margin-bottom:10px; } .twolinenav .prodnav1 { float:none; width:auto; margin-bottom:10px; } .twolinenav.noheader .prodnav1 { display:none; } .prodnav2 { display:inline-block; font-size:14px; margin-left:20px; } .formrowlgX #n_startdate1, .formrowlgX #n_enddate1 { font-size:14px !important; width:80px !important; } .mobilecssS .formrowlg #n_startdate1, .mobilecssS .formrowlg #n_enddate1 { font-size:16px !important; width:150px !important; } .beltthumb { float:left; width:45px; height:20px; border:1px solid #666; border-radius:4px; overflow:hidden; background-repeat:no-repeat; } .mobilecss .beltthumb { width:30px; } .beltthumb.inlineBelt { float:none; display: inline-block; vertical-align: middle; } .beltthumb img, #beltimage { vertical-align:top !important; } .beltthumb img { height: 100%; } .beltthumb.doublebelt { margin-right:10px; width:110px; } .doublebelt .beltthumb { width:60px; border:0px none; border-radius:3px 0px 0px 3px; position:absolute; } .promoteicon { position:absolute; left:42px; height:20px; width:41px; background:url(/images/icons/promotion-arrow.png) no-repeat; } .newResponsive .beltthumb.doublebelt { width:110px; } .newResponsive .doublebelt.promotion .beltthumb { width:59px; } .newResponsive .beltthumb.doublebelt img { max-height:18px; width:auto; } .newResponsive .promoteicon { position:absolute; left:42px; height:20px; width:20px; background:url(https://i.ibishi.co.uk/promote.png) no-repeat; background-size:contain; } .newResponsive .beltthumb.doublebelt.promotion img { width:auto; margin-left:59px; padding:0px !important } .newResponsive .beltthumb.doublebelt.promotion .beltthumb img { width:auto; margin-left:0px; border-radius: 3px 0px 0px 3px; } .newResponsive .promoteicon { top: 2px; left:40px; } .resultcell1, .resultcell1 td, td.resultcell1 { background-color:var(--resultPass) !important; color:#FFF; } .resultcell2, .resultcell2 td, td.resultcell2 { background-color:var(--resultAPass) !important; color:#FFF; } .resultcell3, .resultcell3 td, td.resultcell3 { background-color:var(--resultPlusPass) !important; color:#FFF; } .resultcell4, .resultcell4 td, td.resultcell4 { background-color:var(--freshRed) !important; color:#FFF; } .resultcell5, .resultcell5 td, td.resultcell5 { background-color:var(--lightGrey) !important; color:#999; } .resultcell6, .resultcell6 td, td.resultcell6 { background-color:var(--amber) !important; color:#1F2937; } .resultcell7, .resultcell7 td, td.resultcell7 { background-color:#EEE !important; color:#BBB; } .highContrast .resultcell1 { background-color: #56B4E9 !important; color:#FFF !important; } .highContrast .resultcell2 { background-color: #0072B2 !important; color:#FFF !important; } .highContrast .resultcell3 { background-color: #009E73 !important; color:#FFF !important; } .highContrast .resultcell4 { background-color: #D55E00 !important; color:#FFF !important; } .highContrast .resultcell6 { background-color: #E69F00 !important; color:#FFF !important; } .resultcell1 a, .resultcell2 a, .resultcell3 a, .resultcell4 a, .resultcell1 a.blk, .resultcell2 a.blk, .resultcell3 a.blk, .resultcell4 a.blk { color:#FFF !important; } .resultcell5 .blk, .resultcell5 td .blk { color:#999; } .resultcell7 .blk, .resultcell7 td .blk { color:#BBB !important; } .gradingbox, .gradingboxSlim { border:1px solid #666; padding:10px; border-radius:10px; margin-bottom:5px; text-align:left; background-color: #FFF; cursor:pointer; border:1px solid var(--lightGrey); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } #attending .gradingbox { background-color: rgba(67, 160, 71, 0.12); border-color: rgba(67, 160, 71, 0.35); } .gradingboxSlim { padding:7px; line-height:22px; } .gradingboxRight, .gradingboxRight0, .gradingboxRight1, .gradingboxRight2, .gradingboxRightnone { float:right; width:50px; text-align:center; font-size:12px; margin-left:15px; padding:3px; background-color:#666; border-radius:4px; line-height:16px; color:#FFF; border:0px none #CCC; } .gradingboxRight a, .gradingboxRight0 a, .gradingboxRight1 a, .gradingboxRight2 a, .gradingboxRightnone a { color:#FFF; } .gradingboxRight1 { color: #000; background-color:#BBB; } .gradingboxRight2 { background-color:var(--freshRed2); color: #FFF; } .gradingboxRightnone { background-color:transparent; border:1px none; color:inherit; } .resultBox { float:right; text-align:center; font-size:12px; width:75px; margin-right:5px; margin-left:15px; padding:3px; border-radius:4px; line-height:16px; } .newResponsive .resultBox { float:none; display:inline-block; } .gradingboxRightnone.blueBox { width:40px; top:-7px; padding:0px; border-radius:0px; margin-left:5px; height:36px; line-height:36px; background-color:rgb(193, 217, 240); color: #000; } .filterChoices { padding:5px; display: inline-block; vertical-align: middle; border-radius:5px; background-color:#555; color:#F5F5F5; cursor: pointer; margin-bottom: 5px; } .filterChoices.showBelt { background-repeat: repeat-x; background-size: 100px 22px; background-position: 13px; width:50px; padding:1px 0px 1px 0px !important; border:1px solid #CCC; } .filterChoices:hover { background-color: #000;} #SaveFilterChooser { position:absolute; top:50px; right:10px; display:none; padding:10px; background-color:#999; font-size:16px; } #SaveFilterName { width:180px; } .iconpic, .iconpicno { background-image:url(https://i.ibishi.co.uk/lucide/camera.svg); background-size:21px; background-repeat:no-repeat; background-position:center center; height:16px; width:18px; display: inline-block; } .canClick { cursor: pointer;} .mobilecss span.iconpic, .mobilecss span.iconpicno { display:inline-block; width:15px; } .iconpicno { filter:alpha(opacity=20); opacity:0.1; background-image:url(https://i.ibishi.co.uk/lucide/camera-off.svg); } .iconpic.isParent, .iconpicno.isParent { background-image:url(https://i.ibishi.co.uk/0512-users2.png); height: 19px; width:19px; } .iconpic.isFamily, .iconpicno.isFamily { background-image:url(https://i.ibishi.co.uk/0525-users4.png); height: 19px; width:19px; } img.trash { vertical-align:middle; filter: invert(8%) sepia(67%) saturate(9000%); width: 19px; } .smallIconButton { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; border:0; border-radius:4px; background:transparent; padding:2px; cursor:pointer; line-height:0; } .smallIconButton:hover { background:var(--lightGrey); } .smallIconButton img { display:block; width:17px; height:17px; } .sgh-grade-picker { position:relative; width:100%; max-width:360px; } .sgh-grade-picker > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:39px; padding:5px 11px; border:1px solid #cfd7e2; border-radius:7px; background:#fff; cursor:pointer; list-style:none; box-sizing:border-box; } .sgh-grade-picker > summary::-webkit-details-marker { display:none; } .sgh-grade-picker[open] > summary { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.12); } .sgh-grade-picker-current, .sgh-grade-option-content { display:flex; align-items:center; gap:9px; min-width:0; } .sgh-grade-picker-current strong, .sgh-grade-option-copy strong { color:#15181d; font-size:13px; line-height:1.15; } .sgh-grade-picker-placeholder { color:#6b7280; } .sgh-grade-picker-chevron { width:8px; height:8px; border-right:2px solid #6b7280; border-bottom:2px solid #6b7280; transform:rotate(45deg); margin:-4px 3px 0 5px; flex:none; } .sgh-grade-picker[open] .sgh-grade-picker-chevron { transform:rotate(225deg); margin:4px 3px 0 5px; } .sgh-grade-picker-menu { position:absolute; left:0; top:calc(100% + 6px); z-index:1000; width:100%; min-width:280px; max-height:330px; overflow:auto; padding:6px; border:1px solid #d6dee7; border-radius:8px; background:#fff; box-shadow:0 12px 28px rgba(15,23,42,.18); box-sizing:border-box; } .sgh-grade-option { display:flex; align-items:center; width:100%; padding:8px 9px; border:0; border-radius:6px; background:#fff; color:#15181d; text-align:left; cursor:pointer; } .sgh-grade-option:hover, .sgh-grade-option.selected { background:#eef4ff; } .sgh-grade-option-copy { display:flex; flex-direction:column; gap:2px; min-width:0; } .sgh-grade-option-copy small { color:#b7791f; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; } .sgh-grade-control { display:flex!important; align-items:center; gap:10px; } .sgh-grade-control .sgh-grade-picker { flex:1; min-width:0; max-width:none; } .studentInitialGradePicker .sgh-grade-picker-current { overflow:hidden; } .studentInitialGradePicker .sgh-grade-picker-current .sgh-grade-option-copy { overflow:hidden; } .studentInitialGradePicker .sgh-grade-picker-current strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .studentInitialGradePicker .sgh-grade-picker-current small { display:none; } @media(max-width:768px) { .sgh-grade-picker { max-width:none; } .sgh-grade-picker-menu { min-width:0; } } img.svgRed { filter: invert(8%) sepia(67%) saturate(9000%); width: 20px; } img.svgAmber { filter: invert(74%) sepia(91%) saturate(689%) hue-rotate(1deg) brightness(102%) contrast(101%); width: 20px; } img.svgGrey { filter: invert(59%) sepia(0%) saturate(0%) brightness(100%) contrast(100%); width: 20px; } img.svgGreen { filter: invert(52%) sepia(84%) saturate(422%) hue-rotate(73deg) brightness(94%) contrast(94%); width: 20px; } .isFaded { filter:alpha(opacity=20); opacity:0.1; } .multipleChoice { display:inline-block; } .multipleChoice .chooseLabel { cursor:pointer; padding:5px 15px 5px 28px; border:1px solid #CCC; border-radius:8px; color:#000; z-index:1000; font-size:14px; background-image:url(https://i.ibishi.co.uk/1226-arrow-down5.png); background-repeat:no-repeat; background-size:20px; background-position:5px; background-color: #FFFFFF; } .multiChooser { overflow-y:auto; display:none; position:absolute; z-index:9999; background-color:#F5F5F5; padding:0px; border-radius:0px 0px 5px 5px; border:1px solid #AAA; margin-top:3px; } .multiChooserShow { max-height:200px; overflow-x:hidden; font-size:14px; } .multiChooserShow label { display:flex; align-items:center; gap:5px; white-space:nowrap; margin:0px; line-height:22px; } .multiChooserShow .beltthumb { float:none; flex:0 0 60px; width:60px; display:inline-block; } .multiChooserShow .multiSelectCheckbox { flex:0 0 auto; } .gradingEditForm #examinerHolder { display:inline-block; width:450px; } .gradingEditForm #examinerHolder select { width:100% !important; max-width:none !important; } .mobilecss .multipleChoice { display: block; max-width: 100% !important; } .mobilecss .multipleChoice .chooseLabel { margin-bottom:4px; font-size:16px; } .mobilecss .multiChooser { width:91% !important; margin-top:-2px; max-width: none !important; } .multiChooser label { display:block; padding:3px 3px 3px 10px; cursor:pointer; white-space: nowrap; text-align:left; background-color: #FFF; color: #000; font-size: 12px; } .mobilecss .multiChooser label { font-size:14px; line-height: 22px; } .multiChooser label:hover, .multiChooser label.isSelected { background-color:var(--lightGrey); } .dropDownShield { position:fixed; top:0px; right:0px; bottom:0px; left:0px; background-color:rgba(255,255,255,0.7); z-index:999; width:100%; height:100%; display:none; } .curvedbox, .lightbox, .student { border:1px solid var(--lightGrey); background-color: #ffffff; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin-bottom: 2rem; /* max-width: 500px; */ } .centeredhead { font-size:20px; text-align:center; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--lightGrey); } .curvedbox .centeredhead, .lightbox .centeredhead { margin-left: -24px; margin-right: -24px; padding-left:24px; padding-right:24px; } .centeredhead.lefty { text-align: left; } .centeredhead img { vertical-align: bottom; } input.curvedbox { padding:5px; } .curvedbox.inactive { background-color: #E5E5E5; } .curvedbox.showPointer:hover { background-color: #E5E5E5; } .showDarkerBorder { border-color:#000; border-bottom:10px solid #000;border-top:10px solid #000; border:4px solid #000; padding:6px; } .curvedbox.showDarkerBorder { padding:1.3rem; } .curvedbox .scrollingDiv { max-height:350px; overflow-y:auto; margin-right:-20px; padding-right:10px; } .norules td { border-bottom:0px none !important; } .largeinput { padding:10px !important; border-radius:10px; font-size:18px !important; } input.hasDatepicker { border:1px solid #BBB; } .ui-datepicker.ui-widget.ui-datepicker-inline { z-index: 999 !important; } .ui-datepicker.ui-widget { z-index: 100002 !important; } .size14 input.hasDatepicker { font-size:14px !important; width:85px !important; } .size16 input.hasDatepicker { font-size:16px !important; width:95px !important; } .datestretch .ui-datepicker-inline { max-width:400px; } /* I had this at 120 but lic entry was way too big - padding in _jsglobal */ .jqDatePicker.hasDatepicker { font-size:16px; width:90px !important; } .mobilecss .xp.dateEntryField, .mobilecss .hasDatepicker, .mobilecss .formrowlg .hasDatepicker { font-size: 18px !important; width:110px !important; } .ui-datepicker-trigger { height:20px; } .mobilecss .ui-datepicker-trigger { height:24px; } .ui-page-theme-a { background-color:#FFF; } .ui-input-btn input.submitlg { background-color:#666; opacity:1; color:#FFF !important; font-size:16px; text-indent:0px; } .ui-input-btn input.submitlg:hover { background-color:var(--freshRed); } .ui-input-btn input.submitlg2 { background-color:var(--freshRed); opacity:1; color:#FFF !important; font-size:16px; text-indent:0px; } .ui-mobile-viewport .xp, .ui-mobile-viewport .xpnum, .ui-mobile-viewport .hasDatepicker { font-size:16px !important; } .ui-mobile-viewport .hasDatepicker { width:100px !important; } .imagepickerarea { width:450px; text-align:left; } .imagepickerarea.bcv2 { width:auto; } .widePicker .imagepickerarea { width:auto;} .dockpicker { width:auto; } .imagepickerarea .holdingfield { width:250px; border:0px none !important; background-color:transparent !important; } .mainImgSrchArea { margin-top:10px; padding:10px; border:1px solid #CCC; background-color:#F5F5F5; } .xp.searchimages { width:250px; } .bcv2 .xp.searchimages { width:392px; box-sizing:border-box; background-image:url(https://i.ibishi.co.uk/0571-search5.png); background-repeat:no-repeat; background-position:12px center; background-size:20px; padding:8px 8px 8px 44px !important; } .imagepickerarea .imgpickerpreview { float:left; margin-left:20px;height:185px; width:150px; overflow:hidden; font-size:12px; z-index:99; text-align:center; } .imagepickerarea.dockpicker .imgpickerpreview { height:50px; } .imgpickerpreviewbox { width:150px; height:150px; } .imgpickerpreviewbox img { max-width:150px; max-height:150px; } .imagepickerarea.bcv2xx .imgpickerpreview { height:245px; width:200px; overflow:hidden; } .bcv2xx .imgpickerpreviewbox { width:200px; height:200px; overflow:hidden; text-align:center; } .bcv2xx .imgpickerpreviewbox img { max-width:200px; max-height:200px; } .dropUploadIcon { background-image: url('https://i.ibishi.co.uk/x.png'); height: 22px; width: 22px; position:absolute; background-size: contain; right:3px; top:3px; cursor:pointer; background-repeat: no-repeat; display:none; } .currentImage { text-align:center; } .currentImage img { max-width:100%; max-height:300px; } .dockpicker .imgpickerpreviewbox { display:none; } .imgpickerlist { float:left; width:250px; overflow:auto; height:150px; background-color: #FFFFFF; } .bcv2 .imgpickerlist { padding:5px; width:350px; height: 290px; margin-bottom:20px; } .imgpickerlist div { font-size:12px; padding: 2px; cursor:pointer; } .imgpickerlist div:hover { background-color: #888; color:#FFF; } .imgpickerlist div:hover .dropUploadIcon { display: block; } .bcv2 .imgpickerlist div { font-size:14px; padding: 5px; } .widePicker .imgpickerlist { width:65%; } .dockpicker .imgpickerlist { width:350px; overflow:auto; } .dateEntryField { width:80px; } .formrowlg .dateEntryField { width:95px; font-size:14px; } .ecBox.withPhoto .mugshot img { max-width: 130px; } .sortableBox { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px; border: 10px solid #DDD; background-color:#FFF; border-radius:10px; } .sortable-item { width: 200px; height: 180px; border: 1px solid #aaa; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 5px; position: relative; cursor: move; user-select: none; } .sortable-item img { max-width: 100%; max-height: 150px; object-fit: cover; } .label120 { margin-bottom:10px; float:left; padding-top:14px !important; min-width:120px; } .labelr200 { margin-bottom:10px; display:inline-block; } @media print { .notprinting, .sidebar { display:none !important; } body { height: auto !important; display:block !important; overflow: visible; } .main { width:100% !important; background-color: #FFF !important; margin:0px !important; padding:0px !important; height: auto !important; } } .bootstraprow { margin-bottom:20px; padding-bottom:5px; } .bootstraplabel { font-size:16px; margin-bottom:5px; margin-right:10px; } .mobilecss .bootstraplabel { font-size:16px; } .NewTableRuled { border:1px solid #CCC; border-radius:5px; padding:10px; background-color:#FFF; } .NewTableRuled .bootstraprow { border-bottom:1px solid var(--lightGrey); } /* login */ .loginForm { width:450px; border:1px solid #CCCCCC; border-bottom:0px none; text-align:center; } .mobilecss .loginForm { width:auto; } .loginForm .highlight { background-color:#000000; color:#FFFFFF; font-size:18px; line-height:30px; padding:20px; } .formBody { font-size:16px; padding:20px; border-bottom:1px solid #CCCCCC; } .loginForm .bootstraprow { margin-bottom:20px; } .loginForm .submitlg1, .loginForm .submitlg2 { width:100%; } .formContainer { width:350px; } .formContainer .xp { width:340px; font-size:16px; padding:4px; } .formContainer .xp.isPassword { width:310px; padding-right:34px; } .newResponsive .formContainer .xp { width:100%; } .changepwview { position:absolute; right:0px; height:20px; top:4px; width:40px; cursor:pointer; z-index:999; } .mobilecss .changepwview { bottom:20px; top:12px; } .changepwview img { height:20px; } .filterimg { width:16px; vertical-align:middle; margin-right:4px; cursor:pointer; } /* image picker */ .PreviewPaneimages, .PreviewPanedocuments { margin:5px 0px 5px 0px; } .PreviewPaneimages { width:300px; clear:both; } .bcv2 .PreviewPaneimages { clear:none; } .PreviewPaneimages img { max-height:300px; max-width:300px; background-color:#FFF; } .bcv2 .PreviewPaneimages img { max-height:420px; cursor: pointer; } .PreviewPanedocuments { width:600px; } .PreviewPanedocuments img { max-height:600px; max-width:600px; background-color:#FFF; } .pickerImage { max-width:250px; } .twocolselect { width:100%; } .twocolselect tr:hover { background-color: var(--lightGrey); } .twocolselect td { font-size: 16px; padding:5px; width:50%; cursor: pointer; } .twocolselect tr.freestyle td { width: auto; } .hoverRows tr:hover { background-color: var(--navGrey); cursor: pointer; } .hoverRows th:hover { cursor:auto; background-color: #FFF; } #notifybox { text-align:center; font-size:22px; line-height:40px; background-color:var(--freshGreen); position:fixed; top:0px; z-index:99999; color:#FFF; width:100%; } #notifybox img { width:24px; height:23px; } .cke_source { white-space: pre-wrap !important; } #waiting { border-radius: 10px; font-size:24px; padding:40px; text-align:center; background-color:#666; color:#FFF; display:none; } .listviewhead td { font-weight: bold; } .greyHover:hover { background-color: #F5F5F5; cursor:pointer; } .lightSelected { background-color: #c5e2c5; } .selectedStudent { cursor:pointer; } .mugshot img { max-width:160px; max-height: 160px; } .avatar { width:110px; /* choose any size */ aspect-ratio:1/1; /* keeps it perfectly square */ border-radius:9999px; /* makes the square a circle */ overflow:hidden; /* hides any overflow outside the circle */ display:block; } .avatar img{ width:100%; height:100%; object-fit:cover; /* fills the circle without distortion */ } .mugshotMount { float:right; width:132px; padding:0px 0px 10px 10px !important; z-index:999; text-align:center; background-color:#FFF; border:0px none !important; border-radius:0px 0px 0px 8px; } .mugshotFrame { width:120px; padding:10px; border-bottom:0px none; border:1px solid #CCC; border-radius:5px; padding:5px; margin-bottom:0px; } .mugshotFrame .mugshot img { max-width: 120px; } .eventNav { display:inline-block; width:100px; margin-right:0px; background-color:#666; border:1px solid #000000; padding:3px; text-align:center; font-size:15px; color:#FFF; text-decoration:none; margin-bottom:3px; } .eventNav.moreSpace { min-width:100px; width:auto; } .eventNav:hover, .eventNav.isActive { background-color:var(--freshGreen); color:#FFF; text-decoration:none; } .eventNav.isActive:hover { background-color:#000; } .collapsing { background-color: #252525; padding:10px 15px; border:1px solid #CCC !important; border-radius: 5px; margin-bottom: 20px; color:#FFF; background-position: right 15px center; font-size:18px; background-size: 17px; background-repeat: no-repeat; background-image: url(https://i.ibishi.co.uk/w/1218-arrow-down3.png); } .collapsing.green { background-color: var(--freshGreen); } .collapsing.red { background-color: var(--freshRed); } .collapsing:hover { cursor: pointer; } .collapsing.grey { background-color: var(--lightGrey); color:#333 !important; background-image: url(https://i.ibishi.co.uk/1218-arrow-down3.png); } .addCounter { display: block; float: right; border:2px solid #FFF; border-radius: 5px; padding:2px 4px; font-weight: bold; margin-top:-4px; } .collapsing.grey .addCounter, .curvedbox .addCounter { border:2px solid #000; } .collapsing.open { border-radius:5px 5px 0px 0px; margin-bottom:0px; background-image: url(https://i.ibishi.co.uk/w/1210-arrow-up3.png); } .collapsing.grey.open { background-image: url(https://i.ibishi.co.uk/1210-arrow-up3.png); } .collapsing.afterFeedBack { border-top-right-radius:0px;border-top-left-radius:0px; } .collapsingBody { display: none; border:1px solid #DDD; border-top:0px none; border-radius: 0px 0px 5px 5px; padding:15px; margin-bottom: 20px; background-color: #FFFFFF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .entryBoxes { background-color:#E5E5E5; border-radius: 0px 0px 10px 10px; margin:8px -10px -10px -10px; } td .entryBoxes { border-radius: 0px; margin:8px -4px -4px -4px; } .showDarkerBorder .entryBoxes { margin:8px -6px -6px -6px; border-radius: 0px 0px 6px 6px; } .entryBoxes.darker { background-color: #555555; color:#FFF; } .entryBox { float:left; width:33.33%; text-align:center; padding-top:4px; padding-bottom:4px; cursor:pointer; color: #000;} .entryBox.fullwidthBox { float: none; width:auto; border-radius: 0px 0px 10px 10px; } .entryBox.fullwidthBox.Green { background-color:var(--freshGreen2); color:#FFF !important; } .entryBox.fullwidthBox.Green:hover { background-color:var(--freshRed); } .entryBox.fullwidthBox.Green:hover { background-color:var(--freshRed); } .entryBox.fullwidthBox.withResults { border-radius:0px !important; } .showDarkerBorder .entryBox.fullwidthBox { float: none; width:auto; border-radius: 0px 0px 5px 5px; } .entryBox.fullwidthBox.stackedBox { border-radius: 0px; } .entryBox:hover { background-color:var(--freshRed); color:#FFF; } .gotResults { background-color:var(--freshGreen); color:#FFF; line-height:40px; text-align:center; border-radius: 0px 0px 5px 5px; cursor:pointer; } .withResults .gotResults { border-radius: 0px; } .gotResults:hover { background-color:var(--freshRed); } .mainItemHeader { display:block; color:#000; border-radius:7px 7px 0px 0px; } .mainItemHeader:hover { background-color:var(--lightGrey); text-decoration:none; } .numberCount { background-color: #FFF; color:#000; border:2px solid #000; border-radius:5px; display:inline-block; padding:4px; min-width:25px; text-align:center;font-size:20px; margin-bottom:10px; } a.numberCount:hover { background-color: #555; color:#FFF; text-decoration: none; } .numberCount.darker { background-color: #464646; border-color: #FFFFFF; color: #FFF; } .numberCount.smaller { font-size:15px; padding:0px; margin-bottom: 0px; } .roundIcon { width:17px; background-color:#000; color:#FFF; border-radius:100%; padding:2px; display:inline-block; text-align: center; } a.roundIcon { color:#FFF; } .sublinks { background-color:#E5E5E5; text-align:center; min-height:28px; line-height:28px; } .sublinks a { display:inline-block; font-size:14px; color:#FFF !important; background-color:#959595; padding:0px 10px 0px 10px; margin-right:1px; } .sublinks a:hover { background-color:#757575; text-decoration:none; } .sublinks .roundIcon { width:18px; background-color:transparent; border-radius:0px; } .withButtons { margin:15px; text-align:center; line-height: 45px; } .withButtons.lefty { margin-left:0px; text-align:left; } /* smart checkboxes */ /* The outer switch */ .switch { position: relative !important; display: inline-block; width: 50px; height: 28px; vertical-align: middle; } .switch.smallerSwitch { position: relative !important; width: 40px; height: 22px; } .switch.tinySwitch { position: relative !important; width: 34px; height: 18px; } /* Hide the default checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #CCC; transition: 0.4s; border-radius: 34px; width: 48px; height: 28px; display: inline-block; } .switch.smallerSwitch .slider { border-radius: 25px; width: 40px; height: 22px; } .switch.tinySwitch .slider { border-radius: 18px; width: 32px; height: 18px; } /* The circle inside the slider */ .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; } .switch.smallerSwitch .slider:before { height: 18px; width: 18px; left: 2px; bottom: 2px; } .switch.tinySwitch .slider:before { height: 14px; width: 14px; left: 2px; bottom: 2px; } /* When checked */ input:checked + .slider { background-color:var(--freshGreen); } /* Move the circle to the right when checked */ input:checked + .slider:before { transform: translateX(22px); } .switch.smallerSwitch input:checked + .slider:before { transform: translateX(18px); } .switch.tinySwitch input:checked + .slider:before { transform: translateX(14px); } /* if this is linked with a label as well this will make it inline */ .switchLabel { display: inline-block !important; } .switchLabel { margin-left: 42px; } .tinySwitch .switchLabel { margin-left: 35px; } .switchLabel { margin-left:5px !important; } .tickboxChoice { font-weight:normal !important; display:inline-flex !important; align-items:center; gap:8px; cursor:pointer; vertical-align:middle; } .tickboxChoice > span:last-child { min-width:0; } .tickbox { position:relative !important; display:inline-flex !important; align-items:center; justify-content:center; width:28px !important; height:28px !important; flex:0 0 28px; vertical-align:middle; } .tickbox input { opacity:0; width:0; height:0; margin:0 !important; flex:0 0 auto !important; } .tickbox .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#fff; transition:0.2s; border:2px solid #b8c7b8; border-radius:6px; width:28px !important; height:28px !important; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; } .tickbox .slider:before { position:static; content:""; height:auto; width:auto; background:transparent; transition:0.2s; border-radius:0; color:#fff; font-size:19px; font-weight:bold; line-height:1; } .tickbox input:checked + .slider { background-color:var(--freshGreen); border-color:var(--freshGreen); } .tickbox input:checked + .slider:before { content:"\2713"; transform:none; } .tickbox input:disabled + .slider { opacity:0.65; cursor:default; } .activityTags { display:flex; flex-wrap:wrap; gap:6px; } .activityTag { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#edf3f8; color:#243244; font-size:13px; line-height:1.4; white-space:nowrap; } .activityTag a { color:inherit; text-decoration:none; } .activityTag.isSuggestion { cursor:pointer; background:#f6f7f9; border:1px solid #d7dde5; } .activityTag.isSuggestion:hover { background:#e8edf3; } .activityTagRemove { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; cursor:pointer; } /* toast */ .toast { display: flex; align-items: center; justify-content: space-between; background: #333; color: #fff; padding: 10px 16px; margin-bottom: 10px; border-radius: 8px; min-width: 250px; max-width: 400px; font-size: 14px; opacity: 0; transform: translateY(-10px); transition: all 0.4s ease; position: relative; z-index: 1000; } .toast.show { opacity: 1; transform: translateY(0); } .toast.hide { opacity: 0; transform: translateY(-10px); } .toast-message { flex-grow: 1; margin-right: 8px; } .toast-close { background: none; border: none; color: inherit; font-size: 18px; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; } .toast-icon img { width:20px; max-height:20px; margin-right: 8px; filter: invert(1); } .toast.success { background-color: var(--freshGreen); } /* green */ .toast.error { background-color: var(--freshRed); } /* red */ .toast.info { background-color:var(--freshBlue); } /* blue */ .toast.warning { background-color: var(--amber); } /* yellow */ .toast.neutral { background-color: var(--midGrey); } /* grey */ .toast-close { background-image:url(https://i.ibishi.co.uk/w/1126-cancel-circle.png); background-size: 18px; background-repeat: no-repeat; background-color:transparent; background-position: center; width: 20px; height: 20px; border-radius: 50%; margin-left: 10px; padding: 0; display: inline-block; cursor: pointer; } .toast-close:hover { background-color: #000; /* Change color on hover */ } #toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 100100; } /* end toast */ .lightbox { overflow-y: auto; max-height: 95%; z-index:100000; position:fixed !important; left:50%; top:30px; transform: translateX(-50%); display:none } .mobilecss .lightbox { width:100% !important; height:100% !important; margin:0px; top:0px; overflow-y:scroll; } #lightboxback { position:fixed; top: 0px;left: 0px;background-color:#000 ;height: 100%;width: 100%; display: none; z-index: 99999; filter: alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6; } #lightboxcontent { min-height:100px; } .mobilecss #lightboxcontent { padding:20px; } #clbl { position:absolute; z-index:1000; right:15px; top:10px; width:25px; height:25px; cursor:pointer; background-image: url(https://i.ibishi.co.uk/270-cancel-circle.png); background-size: 25px; background-position: center center; background-repeat: no-repeat; } .mobilecss #clbl { width:30px; height: 30px; background-size: 30px; } .summaryArea { margin-bottom: 2rem; } .summary-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #eee; font-size: 0.95rem; min-height: 1.8rem; align-items: center; gap: 0.5rem; } .evenRows .summary-row, .evenRows .summary-row-right { min-height: 44px; } .summary-row.rounded { border-radius: 8px; padding:10px 8px; border:1px solid var(--lightGrey); margin-bottom:15px; } .summary-row.stacked { align-items: flex-start; /* align to top of column */ } .summary-row.stackedFullWidth { flex-direction: column; align-items: stretch; /* stretch to full width */ } .summary-row.showHover:hover { background-color: var(--lightGrey); cursor: pointer; } .summary-row > a:first-child, .summary-row > col:first-child, .summary-row > over:first-child { flex: 1; text-decoration: none; } .summary-row-left div { margin-top: 0.5rem; /* or your preferred spacing */ } .summary-row-right { margin-left: auto; display: flex; gap: 0.5rem; /* Optional spacing between right-aligned items */ align-items: center; } .summary-row.centered { justify-content: center; text-align: center; } .stacked .summary-row-right { flex-direction: column; } .stacked .summary-row-right > div { margin: 0; padding: 0; line-height: 1.2; } .summary-row-right.syllabusStack { gap: 12px; align-items: flex-start; } .summary-row-right.syllabusStack > div { margin-bottom: 10px; } .box-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .box-container.one, .mobilecss .box-container { grid-template-columns: repeat(1, 1fr); } .box-container.three { grid-template-columns: repeat(3, 1fr); } .box-container.four { grid-template-columns: repeat(4, 1fr); } .box-container.equalSpacing .curvedbox { margin-bottom:0px; } .box-container.equalSpacing { gap:1.5rem; } .emailLink { z-index:10; margin-right:-36px; } .emailLinkFlush { z-index:10; margin-right:-36px; display:none; } .xp.emailIcon { padding-left:35px !important; } .event-month { font-size:14px; font-weight: bold; padding:5px 0px; } /* new pagination */ .pagination-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; align-items: center; margin: 1rem 0; text-align: center; } .pagination-container { display: flex; flex-wrap: wrap; gap: 0.5rem; } .page-link { padding: 6px 10px; background: #f0f0f0; border-radius: 4px; cursor: pointer; } .page-link.active { background-color:var(--freshBlue); color: white; } .page-link.navIcon { padding:2px 2px; } .page-link.navIcon img { height:20px; } .page-link:hover { background-color:var(--freshGreen); color: white; } .page-link.disabled { opacity: 0.5; pointer-events: none; } .pagination-info { font-size: 0.9rem; color: #555; white-space: nowrap; } .ellipsis { padding: 6px 0px; white-space: nowrap; /* Don’t allow wrapping */ overflow: hidden; /* Hide anything that overflows the box */ text-overflow: ellipsis; /* Show "…" at the end */ } /* end new pagination */ .student-list { display: grid; gap: 0px; } .student { display: contents; } .student > div { padding: 8px 6px; min-height: 40px; display: flex; align-items: center; font-size:12px; cursor: pointer; } .student.noClicks > div { cursor: default; } .size14 .student > div { font-size:14px; } .student-border-row { grid-column: 1 / -1; height: 0; border-bottom: 1px solid var(--lightGrey); /* Optionally: */ margin-left: 0; margin-right: 0; } .student.headerRow { position: sticky; top: -1rem; z-index: 10; background-color: #FFFFFF; } .student.headerRow > div { font-weight: bold; font-size: 14px; position:sticky; top:0; z-index: 10; background-color: #FFFFFF; top:-13px; } .student.lightSelected > div { background-color: #c5e2c5; } .student.lightSelected a.lgrey { color: #000; } .summary-row .summary-row-right input:not(.dateEntryField):not(.lightbox *):not(input[type="radio"]):not([type="checkbox"]), .summary-row .summary-row-right select:not(#u3):not(.lightbox *), .summary-row:not(.dateEntryField) .summary-row-right select:not(#u3):not(.lightbox *) { width: 450px; } .summary-row .summary-row-right.controlWidth { width: 450px; display: block; text-align: left; } .box-container .summary-row .summary-row-right input:not(.dateEntryField):not(.lightbox *):not(input[type="radio"]):not([type="checkbox"]), .box-container .summary-row .summary-row-right select:not(#u3):not(.lightbox *), .box-container .summary-row:not(.dateEntryField) .summary-row-right select:not(#u3):not(.lightbox *) { width: 300px; } .box-container .summary-row .summary-row-right.controlWidth { width: 300px; } .lightbox .evenInputs .summary-row input:not(.dateEntryField):not(input[type="radio"]):not([type="checkbox"]), .lightbox .evenInputs .summary-row select { width: 300px; } .sizeAuto { width:auto !important; } @media (max-width:450px) { .pagination-info { white-space:normal; } } @media (max-width: 1500px) { .leftChannel .box-container { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 1200px) { .leftChannel .summary-row .summary-row-right input:not(.dateEntryField):not(.lightbox *):not(input[type="radio"]):not([type="checkbox"]), .leftChannel .summary-row .summary-row-right select:not(#u3):not(.lightbox *), .leftChannel .summary-row:not(.dateEntryField) .summary-row-right select:not(#u3):not(.lightbox *) { width: 350px; } .leftChannel .summary-row .summary-row-right.controlWidth { width: 350px; } .leftChannel .box-container { grid-template-columns: repeat(1, 1fr) !important; } .profileRightButtons:not(.plentyOfSpace) { position:relative; display:block !important; float:none; margin:10px 0px !important; margin-bottom:15px !important; top:0px !important; } .rightButtons:not(.plentyOfSpace) { height:auto; } } @media (max-width: 1000px) { .leftChannel .box-container .summary-row .summary-row-right input:not(.dateEntryField):not(.lightbox *):not(input[type="radio"]):not([type="checkbox"]), .leftChannel .box-container .summary-row .summary-row-right select:not(#u3):not(.lightbox *), .leftChannel .box-container .summary-row:not(.dateEntryField) .summary-row-right select:not(#u3):not(.lightbox *), body:not(.leftChannel) .box-container .summary-row .summary-row-right input:not(.dateEntryField):not(.lightbox *):not(input[type="radio"]):not([type="checkbox"]), body:not(.leftChannel) .box-container .summary-row .summary-row-right select:not(#u3):not(.lightbox *), body:not(.leftChannel) .box-container .summary-row:not(.dateEntryField) .summary-row-right select:not(#u3):not(.lightbox *) { width: 300px; } .leftChannel .box-container .summary-row .summary-row-right.controlWidth, body:not(.leftChannel) .box-container .summary-row .summary-row-right.controlWidth { width: 300px; } .box-container { grid-template-columns: repeat(1, 1fr) !important; } .button-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } @media (max-width: 900px) { .box-container { grid-template-columns: repeat(2, 1fr); } .box-container.four { grid-template-columns: repeat(3, 1fr); } .leftChannel .box-container, .leftChannel .box-container { grid-template-columns: repeat(1, 1fr); } .doublebelt.beltthumb { width: 65px !important; } .beltthumb.doublebelt { margin-right: 10px; width: 110px; } .beltthumb { width: 50px; } .doublebelt.beltthumb .beltthumb { width: 20px !important; } .promoteicon { left:0px !important; } .newResponsive .beltthumb.doublebelt.promotion img { margin-left:18px; width:auto; border-radius:0px; } .newResponsive .beltthumb.doublebelt.promotion .beltthumb img { display:none; } } @media (max-width: 768px) { .summary-row.oneline .summary-row-right input.shrink, .summary-row.oneline .summary-row-right select.shrink { width: auto !important; } .summary-row-right { justify-items: left; } .emailLink { display:none; } .emailLinkFlush { display:inline-block !important; } .xp.emailIcon { padding-left:5px !important; } .box-container { grid-template-columns: 1fr; } .summary-row:not(.oneline) { flex-direction: column; align-items: stretch; } .summary-row:not(.oneline) .summary-row-right { justify-content: stretch; width: 100%; flex-direction: column; } .summary-row:not(.oneline) .summary-row-right input:not(.jqDatePicker.hasDatepicker):not(.timebox):not(input[type="radio"]):not([type="checkbox"]), .summary-row:not(.oneline) .summary-row-right textarea, .summary-row:not(.oneline) .summary-row-right select { width: 100% !important; box-sizing: border-box; } .summary-row:not(.oneline) .summary-row-right.controlWidth { width: 100% !important; box-sizing: border-box; } .gradingEditForm #examinerHolder { width:100%; } .xp, .formrowlg.xp { padding:5px !important; font-size:16px !important; } .dateEntryField, .formrowlg .dateEntryField { width:105px; } .submitlg, .submitlg1, .submitlg2, .submitlg3, .submitlg4 { font-size:17px !important } .rightButtons:not(.loadsOfSpace) { line-height: 40px; height:auto; position:relative; } div.rightButtons:not(.loadsOfSpace) .profileRightButtons { position:relative !important; display:block !important; float:none; margin:10px 0px !important; margin-bottom:15px !important; top:0px !important; } } @media (max-width: 600px) { .PreviewPanedocuments { width: auto !important; } #cnochooser { width:100% !important; } } @media (max-width: 370px) { .summary-row.oneline { flex-direction: column; align-items: stretch; justify-content: left; } .summary-row.oneline .summary-row-right { justify-content: left; width: 100%; flex-direction: column; flex-direction: row; } .summary-row.oneline .summary-row-right input:not(.timebox):not(input[type="radio"]):not([type="checkbox"]), .summary-row.oneline .summary-row-right select, .lightbox .fixSelects .summary-row select { width: 100% !important; box-sizing: border-box; } .rightButtons:not(.dontWrap) { line-height: 40px; height:auto } .profileRightButtons:not(.dontWrap) { position:relative !important; display:block !important; float:none; margin:10px 0px !important; margin-bottom:15px !important; top:0px !important; } .pickerImage { max-width:100%; } } .singleColumn { max-width:700px; } .singleColumn .summary-row .summary-row-right input:not(.dateEntryField):not(input[type="radio"]):not([type="checkbox"]), .singleColumn .summary-row .summary-row-right select:not(#u3), .singleColumn .summary-row .summary-row-right textarea, .singleColumn .summary-row:not(.dateEntryField) .summary-row-right select:not(#u3), .singleColumn .summary-row .summary-row-right.controlWidth { width: 300px; } .leftChannel .singleColumn .box-container { grid-template-columns: repeat(1, 1fr) !important; } /* Derren-gated production-style Family & Billing view. */ /* The panels are the cards, so there is no third box around them: the section is a heading and its panels sitting on the page. Every pixel of the old padding, border and radius goes back to the tree, which is what forced the cards to their narrowest size early. */ .familyBillingView { margin-top:0; padding:0; overflow:visible; background:transparent; border:0; border-radius:0; box-shadow:none; } .fbv-subtitle { color:#68737d; font-size:13px; } /* The page's own top bar carries "Family & Billing" now, so this is the section's only heading line rather than a caption underneath one - a little larger and darker to carry that alone. */ .fbv-subtitle-lead { margin-bottom:12px; color:#4a5560; font-size:15px; font-weight:600; } .fbv-gate { display:inline-flex; padding:5px 12px; border-radius:999px; background:#e9f6ed; color:#28643c; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .fbv-isolation { display:flex; align-items:center; gap:8px; margin:12px 0 18px; color:#66737d; font-size:11px; line-height:1.45; } .fbv-isolation strong { padding:3px 8px; border-radius:999px; background:#eef3f7; color:#3f5c72; font-size:10px; text-transform:uppercase; letter-spacing:.03em; } .fbv-loading { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; } .fbv-loading span { display:block; min-height:260px; border-radius:9px; background:linear-gradient(90deg,#f1f3f5 25%,#fafbfc 50%,#f1f3f5 75%); background-size:200% 100%; animation:fbvPulse 1.3s infinite; } @keyframes fbvPulse { to { background-position:-200% 0; } } /* The family tree is the point of this screen, so it gets the greater share of the width and the editor stacks underneath as soon as the tree would be squeezed rather than shrinking it. */ .fbv-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,0.8fr); gap:20px; align-items:start; } .fbv-layout.solo { grid-template-columns:minmax(0,1fr); } .fbv-payment-empty { display:grid; gap:4px; padding:14px; border:1px dashed #9fb4c6; border-radius:7px; background:#fff; box-shadow:0 1px 2px rgba(20,30,40,.05); } .fbv-payment-empty strong { font-size:13px; } .fbv-payment-empty>span { color:#68757f; font-size:11px; line-height:1.4; } .fbv-payment-empty .fbv-actions { margin-top:8px; } .fbv-left,.fbv-right { display:grid; gap:16px; min-width:0; } .fbv-left { scroll-margin-top:78px; } .fbv-right { position:sticky; top:14px; } /* The page has a sticky header, so anything scrolled to has to stop below it rather than under it. */ .fbv-right { scroll-margin-top:78px; } .fbv-panel,.fbv-detail,.fbv-confirm { position:relative; min-width:0; padding:16px; border:1px solid #dfe4e8; border-radius:9px; background:#fff; } .fbv-close { position:absolute; top:9px; right:9px; z-index:2; display:grid; place-items:center; width:26px; height:26px; margin:0; padding:0 0 2px; border:1px solid transparent; border-radius:50%; background:transparent; color:#7b8894; font-size:20px; line-height:0; cursor:pointer; } .fbv-close:hover { border-color:#c3cdd5; background:#fff; color:#2f4553; } .fbv-detail>h3,.fbv-confirm>h3,.fbv-detail>.fbv-detail-kicker,.fbv-confirm>.fbv-edit-state { padding-right:30px; } .fbv-tree-panel { border-color:#d5dee7; background:#fff; box-shadow:0 1px 3px rgba(20,30,40,.06); } .fbv-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .fbv-panel h3,.fbv-detail h3,.fbv-confirm h3 { margin:0; font-size:19px; } .fbv-panel-heading { margin-bottom:14px; } .fbv-secondary-action,.fbv-warning-action,.fbv-cancel,.fbv-danger-action { display:inline-flex; align-items:center; justify-content:center; margin:0; padding:4px 0; border:0; background:transparent; font:inherit; font-weight:700; cursor:pointer; } .fbv-secondary-action,.fbv-warning-action { color:#315f82; } .fbv-secondary-action:hover,.fbv-warning-action:hover,.fbv-cancel:hover,.fbv-danger-action:hover { text-decoration:underline; } .fbv-cancel { color:#63717d; } .fbv-danger-action { justify-self:start; color:#a42f2f; } .fbv-tree { display:grid; } .fbv-person { width:100%; display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:9px; align-items:center; margin:0; padding:12px 10px; border:0; border-top:1px solid #edf0f2; border-radius:0; background:#fff; color:#26323b; text-align:left; cursor:pointer; } .fbv-person:first-child { border-top:0; } .fbv-person:hover,.fbv-person.selected,.fbv-person.related { background:#f2f7fb; } .fbv-person.selected { box-shadow:inset 3px 0 #4d88bc; } .fbv-person.related:not(.selected) { box-shadow:inset 3px 0 #b7d0e2; } .fbv-person.candidate { margin-top:5px; border:1px dashed #aeb9c3; border-radius:7px; background:#fafbfc; } .fbv-person:disabled { cursor:default; opacity:.7; } .fbv-root-marker,.fbv-branch-marker { color:#7891a5; font-weight:800; text-align:center; } .fbv-person-content { display:grid; gap:3px; min-width:0; } .fbv-person-title { display:flex; align-items:center; flex-wrap:wrap; gap:6px; } .fbv-person-summary { color:#63707a; font-size:12px; line-height:1.4; } .fbv-person-kind { color:#87929a; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.025em; } /* White with a coloured ring reads on any of the tile fills the tree uses, the same idiom as the avatar - a flat tint nearly vanished once the card itself took a fill of its own. */ .fbv-chip { display:inline-flex; align-items:center; border-radius:999px; font-size:10px; font-weight:800; white-space:nowrap; } .fbv-chip { padding:1px 7px; border:1px solid transparent; background:#fff; text-transform:uppercase; letter-spacing:.03em; } .fbv-chip.head { border-color:#c7d0d9; color:#414e5a; } .fbv-chip.current { border-color:#a9c4da; color:#2c516f; } .fbv-chip.role { border-color:#9fc9ab; color:#255530; } .fbv-member-marker,.fbv-group-marker { display:inline-flex; align-items:center; gap:5px; color:#60717e; font-size:10px; font-weight:800; white-space:nowrap; } .fbv-member-marker.unusual { padding:3px 7px; border:1px solid #d9e2e8; border-radius:999px; background:#f8fafb; color:#53626e; } .fbv-marker-dot { width:8px; height:8px; border-radius:50%; background:#4d88bc; flex:0 0 auto; } .tone-2 .fbv-marker-dot { background:#7c6eb0; } .tone-3 .fbv-marker-dot { background:#4e9270; } .tone-4 .fbv-marker-dot { background:#b07b3f; } .fbv-setup-prompt { display:grid; gap:3px; margin-bottom:12px; padding:10px 12px; border:1px solid #cadeeb; border-left:3px solid #6f9fc2; border-radius:0 6px 6px 0; background:#eaf3fa; } /* what the family costs against what it could cost - present only when there is something to say */ .fbv-proposal { display:grid; gap:5px; margin:0 0 14px; padding:12px 14px; border:1px solid #cfe0d4; border-left:4px solid #4f8a63; border-radius:7px; background:#f6fbf8; color:#24452f; } .fbv-proposal strong { font-size:13px; } .fbv-proposal span { color:#3c5a47; font-size:12px; line-height:1.45; } .fbv-proposal-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:3px; } .fbv-proposal-actions .fbv-secondary-action { color:#2f6a45; } /* plain figures: a label, a number, and an optional line of context */ .fbv-figures { display:grid; gap:0; } .fbv-figure { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:7px 0; border-top:1px solid #e6eaed; } .fbv-figure:first-child { border-top:0; } .fbv-figure>span { color:#687681; font-size:11px; } .fbv-figure>strong { color:#28343d; font-size:13px; text-align:right; } .fbv-figure>small { grid-column:1/-1; color:#7a868f; font-size:11px; line-height:1.4; } .fbv-proposal .fbv-figure { border-top-color:#d9e7de; } .fbv-proposal .fbv-figure>span { color:#3c5a47; } .fbv-draft-rates { display:grid; gap:9px; margin:2px 0 4px; } .fbv-rate-table { width:100%; margin:4px 0 12px; border-collapse:collapse; font-size:12px; } .fbv-rate-table th { padding:6px 8px; border-bottom:1px solid #d7dfe6; color:#53616c; font-size:11px; text-align:right; } .fbv-rate-table th:first-child { text-align:left; } .fbv-rate-table td { padding:6px 8px; border-bottom:1px solid #eef1f3; text-align:right; } .fbv-rate-table td:first-child { color:#53616c; text-align:left; } .fbv-rate-table tr.is-this-family td { background:#f4f8fb; font-weight:700; } .fbv-comparison-holder { display:grid; gap:0; } /* a gap in the setup and a decision not to charge are different things, and look it */ /* A student nobody has priced is the one thing on this screen that must not be missed, so it is stated in the house red on a tinted strip rather than hinted at with a shade of grey. */ .fbv-gen-billing.fbv-mark-unset { margin:7px -12px -12px; padding:9px 12px; border-top:1px solid #f0cfd0; border-radius:0 0 9px 9px; background:#fdf0f0; color:var(--ibishiRed); font-weight:800; } .fbv-gen-card.selected .fbv-gen-billing.fbv-mark-unset { background:#fbe6e6; } .fbv-gen-billing.fbv-mark-exempt { color:#6b7780; } .fbv-person-summary-block .fbv-mark-unset { color:var(--ibishiRed); font-weight:800; } .fbv-setup-prompt span { color:#5b6d7b; font-size:11px; line-height:1.45; } .fbv-payment-list { display:grid; gap:7px; margin-top:18px; padding-top:17px; border-top:1px solid #d7dfe6; } .fbv-dissolve { margin-top:16px; padding-top:14px; border-top:1px solid #d7dfe6; } .fbv-dissolve>summary { cursor:pointer; color:#8a6a6a; font-size:11px; font-weight:700; } .fbv-dissolve>summary:hover { color:#a42f2f; } .fbv-dissolve .fbv-info { margin-top:8px; } .fbv-payment-list h4 { margin:0 0 3px; font-size:14px; } .fbv-payment-summary { width:100%; display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px; align-items:start; margin:0; padding:11px; border:1px solid var(--fbv-tile-edge); border-radius:7px; background:var(--fbv-tile); box-shadow:var(--fbv-tile-lift); color:#26323b; text-align:left; cursor:pointer; } .fbv-payment-summary:hover { border-color:#91b5cf; box-shadow:0 2px 6px rgba(20,30,40,.1); } .fbv-payment-summary.selected { border-color:#4d88bc; box-shadow:inset 3px 0 #4d88bc,0 1px 2px rgba(20,30,40,.07); } .fbv-payment-summary-content { display:grid; gap:3px; min-width:0; } .fbv-payment-summary-content>span { color:#64727d; font-size:11px; line-height:1.35; } .fbv-policy-line { color:#5b6873; font-size:11px; } .fbv-payment-summary-content .fbv-payment-warning { color:#7b510d; font-weight:800; } .fbv-group-marker { padding-top:2px; } .fbv-eyebrow,.fbv-detail-kicker,.fbv-edit-state { display:block; color:#63717d; font-size:10px; font-weight:800; letter-spacing:.04em; } .fbv-eyebrow { margin-bottom:5px; text-transform:uppercase; } .fbv-detail-kicker { margin-bottom:-6px; } .fbv-edit-state { margin-top:-8px; color:#315f82; } .fbv-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .fbv-actions button { margin:0; } .fbv-detail { display:grid; gap:12px; } .fbv-detail.selected-detail,.fbv-detail.edit,.fbv-confirm { border-color:#9ab6cb; background:#fbfdff; box-shadow:inset 3px 0 #4d88bc; } .fbv-detail-lead { margin:0; color:#40515e; font-size:14px; line-height:1.5; } .fbv-detail-primary { display:grid; gap:3px; padding:12px; border-radius:7px; background:#f1f7fb; } .fbv-detail-primary strong { font-size:15px; } .fbv-detail-primary span { color:#526572; font-size:12px; line-height:1.4; } .fbv-detail-amount { margin-top:-5px; color:#26323b; font-size:18px; font-weight:800; } .fbv-detail-fact { display:grid; grid-template-columns:112px minmax(0,1fr); gap:3px 10px; padding-top:10px; border-top:1px solid #e6eaed; } .fbv-detail-fact>span { color:#687681; font-size:11px; } .fbv-detail-fact>strong { color:#34444f; font-size:12px; } .fbv-detail-fact>small { grid-column:2; color:#687681; line-height:1.4; } .fbv-formrow { display:block; margin:0; padding:0; } .fbv-formrow>.fbv-field { margin:0; } .fbv-field { display:grid; gap:5px; } /* the payer decision inside a confirmation is a block in its own right, not a trailing field */ .fbv-confirm>.fbv-field { margin-top:14px; padding-top:12px; border-top:1px solid #e6eaed; } .fbv-confirm>.fbv-field>span { color:#53616c; } .fbv-field>span { color:#53616c; font-size:11px; font-weight:800; } .fbv-field select,.fbv-field input { width:100%; max-width:none; } .fbv-field small { color:#63717d; line-height:1.4; } .fbv-info,.fbv-preview-line { padding:10px 11px; border-radius:6px; background:#eef5fb; color:#355873; font-size:12px; line-height:1.45; } .fbv-preview-line { background:#edf6ee; color:#315f3c; font-weight:700; } .fbv-confirm-list { margin:7px 0 0; padding:0 0 0 17px; display:grid; gap:4px; } .fbv-confirm-list li { line-height:1.45; } .fbv-info>strong { display:block; margin-bottom:2px; } .fbv-check { display:flex; align-items:flex-start; gap:9px; padding:11px; border-radius:6px; background:#f0ecf8; } .fbv-check input { margin-top:3px; } .fbv-context-warning { display:grid; gap:3px; padding:10px 11px; border-left:3px solid #d59a3b; background:#fff7e8; color:#6d4b0b; font-size:11px; line-height:1.4; } .fbv-context-warning .fbv-warning-action { justify-self:start; color:#76500f; } .fbv-history { display:grid; gap:8px; max-height:480px; overflow:auto; } .fbv-history-row { display:grid; gap:3px; padding:10px 11px; border-radius:6px; background:#f6f8f9; font-size:12px; } .fbv-history-row span { color:#71808c; font-size:10px; } .fbv-contact-results { display:grid; gap:6px; max-height:300px; overflow:auto; } .fbv-contact-result { display:grid; gap:3px; width:100%; margin:0; padding:10px 11px; border:1px solid #dfe4e8; border-radius:7px; background:#fff; color:#26323b; text-align:left; cursor:pointer; } .fbv-contact-result:hover { border-color:#91b5cf; background:#f1f7fb; } .fbv-contact-result span { color:#687681; font-size:11px; } .fbv-drift { margin-top:12px; padding:9px 11px; border:1px solid #dde4ea; border-radius:6px; background:#fff; } .fbv-drift>summary { cursor:pointer; color:#5d6a74; font-size:11px; font-weight:700; } .fbv-drift-list { display:grid; gap:5px; margin-top:8px; padding-top:8px; border-top:1px solid #edf0f2; color:#68757f; font-size:11px; line-height:1.45; } .fbv-drift-note { color:#8794a0; } .fbv-communications { margin-top:15px; padding-top:13px; border-top:1px solid #d7dfe6; } .fbv-communications>summary { cursor:pointer; color:#4f5f6b; font-size:12px; font-weight:800; } .fbv-communication-routes { display:grid; gap:7px; margin-top:9px; } .fbv-communication-route { display:grid; grid-template-columns:minmax(150px,.85fr) minmax(0,1.15fr); gap:3px 10px; padding:8px 9px; border:1px solid #e3e9ee; border-radius:6px; background:#fff; font-size:11px; } .fbv-communication-route span { color:#40515e; } .fbv-communication-route small { grid-column:2; color:#71808c; } .fbv-empty { padding:30px; border:1px dashed #aeb9c3; border-radius:9px; text-align:center; } .fbv-empty h3,.fbv-empty strong { display:block; margin:0 0 8px; font-size:19px; } .fbv-add-note { display:flex; gap:6px; margin-top:17px; padding:11px 13px; border-radius:7px; background:#f6f8f9; color:#5d6973; font-size:12px; line-height:1.45; } .fbv-legacy-note { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 10px; padding:9px 12px; border-radius:7px; background:#f6f8f9; color:#66737d; font-size:11px; } .fbv-legacy-note strong { color:#4f5c66; } .fbv-diagnostics { margin-top:20px; padding-top:15px; border-top:1px solid #dfe4e8; } .fbv-diagnostics>summary { cursor:pointer; color:#4f5f6b; font-weight:800; } .fbv-diagnostics-note { margin-top:6px; color:#71808c; font-size:11px; } .fbv-diagnostics .familyBillingPlanner { margin-top:14px; } /* Family genogram: two tiers (carers above, students below) joined by rails and a trunk */ .familyBillingView { --fbv-card:312px; --fbv-card-student:var(--fbv-card); --fbv-line:#b9c9d6; --fbv-stub:18px; --fbv-tile:#eff4f9; --fbv-tile-edge:#bccbd9; --fbv-tile-lift:0 1px 2px rgba(20,30,40,.07),0 3px 8px rgba(20,30,40,.05); } .fbv-gen-caption { display:flex; align-items:baseline; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin-bottom:12px; } /* adding somebody is an edit to the family, so the control lives with its heading */ .fbv-gen-caption-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; } .fbv-add-member { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border:1px solid #b9cbdb; border-radius:999px; background:#fff; color:#2c5f88; font-size:12px; font-weight:800; cursor:pointer; } .fbv-add-member:hover { border-color:#7ea6c6; background:#f4f9fd; text-decoration:none; } /* a payment that cannot be collected says so where the payment is listed, not only inside it */ .fbv-gen-card.placeholder { display:grid; align-content:center; justify-items:center; border-style:dashed; border-color:#cdd7df; background:#f7f9fb; box-shadow:none; color:#77848d; font-size:12px; text-align:center; cursor:default; } .fbv-status-chip { display:inline-block; justify-self:start; margin:4px 0 1px; padding:3px 8px; border:1px solid #e0be6a; border-radius:999px; background:#fdf4e0; color:#7a5a0d; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }.fbv-gen-caption h3 { margin:0; } .fbv-gen-caption>span { color:#71808c; font-size:11px; line-height:1.4; } .fbv-genogram { margin:0 -4px; padding:2px 4px 6px; overflow-x:auto; } .fbv-gen-inner { display:grid; justify-items:center; min-width:min-content; } .fbv-gen-tier { display:grid; width:max-content; row-gap:var(--fbv-stub); justify-items:stretch; } .fbv-gen-row { display:flex; align-items:stretch; justify-content:center; gap:16px; } .fbv-gen-rail { height:2px; margin:0 calc(var(--fbv-card) / 2); border-radius:2px; background:var(--fbv-line); } /* Each rail spans centre to centre of its own tier's cards, so it has to use that tier's width. */ .fbv-gen-tier.students .fbv-gen-rail { margin:0 calc(var(--fbv-card-student) / 2); } .fbv-gen-tier.students .fbv-gen-card { width:var(--fbv-card-student); } .fbv-gen-trunk { width:2px; height:34px; background:var(--fbv-line); } .fbv-gen-tier-label { margin-bottom:10px; color:#7c8891; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .fbv-gen-card { position:relative; display:grid; align-content:start; gap:7px; width:var(--fbv-card); margin:0; padding:12px; border:1px solid var(--fbv-tile-edge); border-radius:10px; background:var(--fbv-tile); box-shadow:var(--fbv-tile-lift); color:#26323b; text-align:left; cursor:pointer; } .fbv-gen-card:hover { border-color:#8fb3ce; box-shadow:0 2px 6px rgba(20,30,40,.13),0 1px 2px rgba(20,30,40,.08); } .fbv-gen-card.selected { border-color:#4d88bc; box-shadow:0 0 0 2px #cfe1ef,var(--fbv-tile-lift); } .fbv-gen-card.related:not(.selected) { border-color:#7ea9c8; box-shadow:inset 3px 0 #7ea9c8,var(--fbv-tile-lift); } .fbv-gen-card:disabled { cursor:default; opacity:.72; } .fbv-gen-card.adult::after,.fbv-gen-card.student::before { content:""; position:absolute; left:50%; width:2px; height:var(--fbv-stub); margin-left:-1px; background:var(--fbv-line); } /* The stubs reach 2px further than the gap they cross, which is the height of the rail between them. A tier holding one card has a rail of zero width - invisible, but it still takes its 2px of height - so without the overlap the line from the head stops just short of the trunk. Where the rail is drawn the extra 2px lands on it, in the same colour. */ .fbv-gen-card.adult::after { bottom:calc((var(--fbv-stub) + 2px) * -1); height:calc(var(--fbv-stub) + 2px); } .fbv-gen-card.student::before { top:calc((var(--fbv-stub) + 2px) * -1); height:calc(var(--fbv-stub) + 2px); } .fbv-gen-card.placeholder { border-color:#bcc7d1; background:rgba(255,255,255,.45); box-shadow:none; color:#71808c; cursor:default; } .fbv-gen-card.placeholder strong { color:#71808c; } .fbv-gen-top { display:flex; align-items:center; gap:9px; min-width:0; } /* A pale tint on a pale tile disappeared once the tiles took a fill of their own, so the disc is white with a ring - and it carries the student's own photo when there is one. */ .fbv-gen-avatar { flex:0 0 auto; overflow:hidden; display:grid; place-items:center; width:34px; height:34px; border:1px solid #b3c3d1; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(20,30,40,.1); color:#3f5c72; font-size:12px; font-weight:800; } .fbv-gen-card.adult .fbv-gen-avatar { color:#3d6146; } .fbv-gen-card.student .fbv-gen-avatar { color:#355a78; } .fbv-gen-avatar img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; } .fbv-gen-name { min-width:0; font-size:13px; font-weight:800; line-height:1.25; } .fbv-gen-roles { display:flex; align-items:center; flex-wrap:wrap; gap:4px; } .fbv-gen-role-text { color:#5d6a74; font-size:11px; font-weight:700; } .fbv-gen-sep { color:#a9b4bc; font-size:11px; } /* what they pay sits with the roles, above the rule; what covers them sits below it */ .fbv-gen-pays { color:#34444f; font-size:12px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; } .fbv-gen-billing { display:flex; align-items:center; gap:6px; padding-top:8px; border-top:1px solid #d9e2ea; color:#63707a; font-size:11px; line-height:1.4; } .fbv-gen-billing>span { min-width:0; overflow-wrap:anywhere; } .fbv-gen-next { margin-top:2px; color:#7c8891; font-size:11px; line-height:1.4; } .fbv-gen-titles { display:grid; gap:3px; min-width:0; } .fbv-person-summary-block { display:grid; gap:4px; padding:11px 12px; border-radius:7px; background:#f4f7fa; color:#5b6a76; font-size:12px; line-height:1.45; } .fbv-person-summary-block .fbv-person-summary-role { color:#2f4553; font-size:13px; font-weight:700; } .fbv-switch-row { display:flex; align-items:center; gap:2px; padding:2px 0; } .fbv-group-heading { margin:14px 0 2px; padding-top:12px; border-top:1px solid #d7dfe6; color:#7c8891; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .fbv-detail>.fbv-group-heading:first-of-type { margin-top:10px; } .fbv-enrolment-list { display:grid; gap:6px; } .fbv-enrolment-row { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin:0; padding:10px 11px; border:1px solid #dfe4e8; border-radius:7px; background:#fff; color:#26323b; text-align:left; cursor:pointer; } .fbv-enrolment-row:hover { border-color:#91b5cf; background:#f7fbfe; } .fbv-enrolment-name { display:grid; gap:2px; min-width:0; } .fbv-enrolment-name strong { font-size:12px; } .fbv-enrolment-name span { color:#68757f; font-size:11px; } .fbv-enrolment-when { color:#68757f; font-size:11px; text-align:right; white-space:nowrap; } .fbv-search-toggle:not(:empty) { margin:2px 0 8px; } .fbv-dialog { display:grid; gap:14px; padding:6px 4px; text-align:center; } .fbv-dialog h2 { margin:0; font-size:22px; line-height:1.25; } .fbv-dialog-facts { display:grid; gap:7px; padding:12px; border-radius:7px; background:#f4f7fa; text-align:left; } .fbv-dialog-fact { display:flex; align-items:baseline; justify-content:space-between; gap:14px; } .fbv-dialog-fact>span { color:#68757f; font-size:12px; } .fbv-dialog-fact>strong { color:#26323b; font-size:13px; text-align:right; } .fbv-dialog-actions { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; } .fbv-dialog-actions button { margin:0; } .fbv-manage-member.fbv-pick-row { justify-content:flex-start; gap:11px; cursor:pointer; } .fbv-manage-member.fbv-pick-row:hover { background:#eef4f8; } .fbv-switch-row .switchLabel { color:#40515e; font-size:12px; line-height:1.4; } .fbv-inline-edit { display:grid; gap:9px; padding:12px; border:1px solid #d3dce3; border-radius:8px; background:#fff; box-shadow:0 1px 2px rgba(20,30,40,.05); } .fbv-inline-edit>strong { color:#22506f; font-size:13px; } .fbv-inline-actions { display:flex; align-items:center; gap:12px; } .fbv-inline-actions button { margin:0; } .fbv-inline-note { color:#6b7883; font-size:11px; line-height:1.4; } .fbv-action-list { display:grid; gap:7px; margin-top:4px; } .fbv-action { display:grid; gap:2px; width:100%; margin:0; padding:11px 12px; border:1px solid #d3dce3; border-radius:7px; background:#fff; box-shadow:0 1px 2px rgba(20,30,40,.05); color:#26323b; text-align:left; cursor:pointer; } .fbv-action:hover { border-color:#4d88bc; background:#f4fafd; box-shadow:0 2px 6px rgba(20,30,40,.1); } .fbv-action strong { color:#22506f; font-size:13px; } .fbv-action span { color:#6b7883; font-size:11px; line-height:1.4; } .fbv-action.danger strong { color:#a42f2f; } .fbv-action.danger:hover { border-color:#c07575; background:#fdf6f6; } .fbv-action:disabled { background:#f7f8f9; box-shadow:none; cursor:default; } .fbv-action:disabled strong { color:#8794a0; } .fbv-more-actions { margin-top:4px; } .fbv-more-actions>summary { cursor:pointer; color:#5d6a74; font-size:11px; font-weight:800; } .fbv-more-actions .fbv-actions { margin-top:6px; } .fbv-manage-members { display:grid; gap:6px; } .fbv-manage-member { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:6px; background:#f6f8f9; } .fbv-manage-member-name { display:grid; gap:2px; min-width:0; } .fbv-manage-member-name strong { font-size:12px; } .fbv-manage-member-name span { color:#71808c; font-size:11px; } .fbv-manage-note { color:#71808c; font-size:11px; white-space:nowrap; } @media(min-width:1351px) { /* Side by side the tree shares the width with the panel, so the student row gives a little back rather than pushing the family into a sideways scroll. The head card keeps its size. */ .fbv-layout:not(.solo) { --fbv-card-student:248px; } } /* Above the drawer breakpoint the scrim is not part of the design at all, so it takes up no grid slot and the entry animation never runs. */ .fbv-scrim { display:none; } @keyframes fbvScrimIn { from { opacity:0; } to { opacity:1; } } @keyframes fbvDrawerIn { from { transform:translateX(101%); } to { transform:none; } } @media(max-width:1350px) { /* There is no longer room beside the family, and stacking the panel underneath put it off the bottom of the screen - clicking somebody looked like it had done nothing. So it comes in over the family as a drawer instead, and the tree keeps the full width behind it. */ .fbv-layout { grid-template-columns:1fr; } .fbv-scrim { display:block; position:fixed; top:0; right:0; bottom:0; left:0; z-index:20000; background:rgba(20,30,42,.4); animation:fbvScrimIn .16s ease-out; } /* align-content, or the panels stretch to fill a viewport-tall drawer and every row inside them spreads out with it - the typesetting then matches the side-by-side column exactly. The stacking clears the page chrome (the account chip and its menu, the filter sidebar) but stays under the lightbox and the toasts, which must still land on top of the drawer. */ .fbv-right { position:fixed; top:0; right:0; bottom:0; z-index:20001; align-content:start; box-sizing:border-box; width:min(430px,calc(100% - 34px)); max-height:100%; padding:14px; overflow-y:auto; overscroll-behavior:contain; border-left:1px solid #c3d0dc; border-radius:12px 0 0 12px; background:var(--paleGrey); box-shadow:-16px 0 38px rgba(20,30,40,.24); } .fbv-right.fbv-drawer-enter { animation:fbvDrawerIn .2s cubic-bezier(.22,.61,.36,1); } /* the drawer scrolls itself, so the family behind it should hold still */ html.fbv-drawer-open,html.fbv-drawer-open body { overflow:hidden; } } @media(prefers-reduced-motion:reduce) { .fbv-scrim,.fbv-right.fbv-drawer-enter { animation:none; } } @media(max-width:1200px) { .familyBillingView { --fbv-card-student:272px; } } @media(max-width:1000px) { .familyBillingView { --fbv-card-student:244px; } } @media(max-width:900px) { .familyBillingView { --fbv-card-student:256px; } .fbv-panel,.fbv-detail,.fbv-confirm { padding:12px; } } @media(max-width:830px) { .familyBillingView { --fbv-card-student:228px; } } @media(max-width:768px) { /* the panels are broken out of the box at every width, so no padding comes back here */ .familyBillingView { padding:0; } .fbv-panel-heading { align-items:stretch; flex-direction:column; } .fbv-loading { grid-template-columns:1fr; } .fbv-loading span { min-height:180px; } .fbv-person { grid-template-columns:18px minmax(0,1fr); padding:11px 7px; } .fbv-member-marker { grid-column:2; justify-self:start; white-space:normal; } .fbv-payment-summary { grid-template-columns:1fr; } .fbv-group-marker { padding:0; } .fbv-detail-fact { grid-template-columns:1fr; } .fbv-detail-fact>small { grid-column:1; } .fbv-communication-route { grid-template-columns:1fr; } .fbv-communication-route small { grid-column:1; } .fbv-actions button { min-height:42px; } .fbv-add-note { display:block; } .fbv-isolation { align-items:flex-start; flex-direction:column; } .fbv-legacy-note { align-items:flex-start; flex-direction:column; } /* Genogram becomes an indented spine: carers at the root, students branching beneath */ /* The spine stretches every card, so both widths go to auto. The student rule is the more specific of the two, so it has to be released here as well or the children stay pinned to whatever the ladder last set. */ .familyBillingView { --fbv-card:auto; --fbv-card-student:auto; } .fbv-genogram { margin:0; padding:0; overflow-x:visible; } /* justify-items also aligns the children of a block container in Chrome, which shrink-wrapped and centred each tier here and left the cards at their content width. Reset it, or nothing below stretches however wide the screen is. */ .fbv-gen-inner { display:block; min-width:0; justify-items:stretch; } .fbv-gen-tier { width:auto; row-gap:0; } .fbv-gen-row { align-items:stretch; flex-direction:column; gap:9px; } .fbv-gen-rail,.fbv-gen-trunk { display:none; } .fbv-gen-card { width:auto; } .fbv-gen-card.adult::after,.fbv-gen-card.student::before { display:none; } .fbv-gen-tier.students { position:relative; box-sizing:border-box; margin:9px 0 0 15px; padding-left:15px; } .fbv-gen-tier.students::before { content:""; position:absolute; top:-9px; bottom:22px; left:0; width:2px; background:var(--fbv-line); } .fbv-gen-tier.students .fbv-gen-card::after { content:""; position:absolute; top:26px; left:-15px; width:15px; height:2px; background:var(--fbv-line); } .fbv-gen-tier-label { margin-bottom:8px; } .fbv-action { padding:13px 12px; } .fbv-manage-member { align-items:flex-start; flex-direction:column; } .fbv-manage-note { white-space:normal; } }