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;
	--lightblue: #95add6;
	--freshGrey: #6B7280;
	--freshGrey2: #4B5563;
	--freshRed: #EF4444;
	--freshRed2:#DC2626;
	--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 */
.manavbox { background-color:var(--navGrey); }
.manav { height:30px; background-color:var(--navGrey); max-width:1199px; min-width:999px; border-left:1px solid #666; }
.manav ul { padding:0px; float: left; margin: 0px; list-style-type:none; }
.manav li { float: left; margin: 0px; height:30px; line-height:30px; border-right:1px solid #666; }
.manav li a { color:#EEEEEE; padding:0px 8px 0px 8px; font-size:12px; height:30px; line-height:30px; display:block; }
.mobilecss .manav li a { font-size:16px; }
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; }
.headerTopRight { float:right; text-align:right; z-index:999; font-size:12px; margin-top:5px; }

/* 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: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000}
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; }
.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.blackculm.com/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; }

.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; }
.maFooter { margin-top:20px; background-color:var(--navGrey); padding:30px; }
.cleanFooter { margin-top:20px; padding:30px; }
.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; height:16px; }
.subnav a:hover { background-color:#CCC; color:#000; text-decoration:none; }
.subnav.newstudentnav a { display:block; border-top:0px none; height:16px; padding:7px; color:#333; }
.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: -40px; position: absolute; right: 0px; }
.mobilecss .rightButtons .profileRightButtons { float: none; z-index: 99; top: auto; position: relative; }
.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; }
.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.blackculm.com/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}
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 { font-size:15px; 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;
  color: #374151 !important;
}
.ghostButton:hover { background-color: #F3F4F6 !important; color: #000; }

.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(--freshRed); 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 { padding-left:24px !important; }
.buttonIcon.AddIcon { background-image: url(https://i.blackculm.com/w/1120-plus-circle.png); }
.buttonIcon.MinusIcon { background-image: url(https://i.blackculm.com/w/1121-minus-circle.png); }
.buttonIcon.arrowDownIcon { background-image: url(https://i.blackculm.com/w/1233-arrow-down6.png); }
.buttonIcon.arrowUpIcon { background-image: url(https://i.blackculm.com/w/1229-arrow-up6.png); }
.buttonIcon.CloseIcon { background-image: url(https://i.blackculm.com/w/1126-cancel-circle.png); }
.buttonIcon.CloseIcon.smallIcon { background-image: url(https://i.blackculm.com/w/1135-cross3.png); }
.buttonIcon.ShareIcon { background-image: url(https://i.blackculm.com/w/1480-share.png); }
.buttonIcon.SaveIcon { background-image: url(https://i.blackculm.com/w/0394-floppy-disk.png); }
.buttonIcon.Cloud { background-image: url(https://i.blackculm.com/w/0892-cloud-upload2.png); }
.buttonIcon.CloudDark { background-image: url(https://i.blackculm.com/lucide/cloud-upload.svg); }
.buttonIcon.Cog { background-image: url(https://i.blackculm.com/w/149-cog.png); }
.buttonIcon.EditIcon { background-image: url(https://i.blackculm.com/w/0021-pencil7.png); }
.buttonIcon.Eye { background-image: url(https://i.blackculm.com/w/0943-eye.png); }
.buttonIcon.SendMail { background-image: url(https://i.blackculm.com/w/0307-envelop3.png); }
.buttonIcon.Ticked { background-image: url(https://i.blackculm.com/1399-checkmark-circle.png); }
.buttonIcon.Refresh { background-image: url(https://i.blackculm.com/w/02-redo.png); background-size: 18px; }
.buttonIcon.Back { background-image: url(https://i.blackculm.com/w/1222-arrow-left3.png); background-size: 16px; }
.buttonIcon.BackBlk { background-image: url(https://i.blackculm.com/1222-arrow-left3.png); background-size: 16px; }
.buttonIcon.Print { background-image: url(https://i.blackculm.com/w/0361-printer2.png); background-size: 16px; }
.buttonIcon.PrintBlk { background-image: url(https://i.blackculm.com/0361-printer2.png); background-size: 16px; }
.buttonIcon.PrintBlk { background-image: url(https://i.blackculm.com/lucide/printer.svg); background-size: 16px; }
.buttonIcon.Checkout { background-image: url(https://i.blackculm.com/w/059-cart.png); background-size: 18px; }
.buttonIcon.yes { background-image: url(https://i.blackculm.com/w/1139-checkmark4.png); background-size: 16px; }
.buttonIcon.no { background-image: url(https://i.blackculm.com/w/1135-cross3.png); background-size: 22px; }
.buttonIcon.report { background-image: url(https://i.blackculm.com/w/0192-file-presentation.png); background-size: 18px; } 
.buttonIcon.trash { background-image: url(https://i.blackculm.com/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; }

.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 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.blackculm.com/w/1126-cancel-circle.png), url(https://i.blackculm.com/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; }

.button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(185px, 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; }

.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; }
.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; }
.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; -moz-box-shadow: 5px 3px 7px #bbb; -webkit-box-shadow: 5px 3px 7px #bbb; box-shadow:5px 3px 7px #bbb; background-color: #FFF; cursor:pointer; }
.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:1px solid #000; }
.gradingboxRight a, .gradingboxRight0 a, .gradingboxRight1 a, .gradingboxRight2 a, .gradingboxRightnone a { color:#FFF; }
.gradingboxRight1 { color: #000; background-color:#BBB; }
.gradingboxRight2 { background-color:#900; 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; }
.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.blackculm.com/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.blackculm.com/lucide/camera-off.svg); }
.iconpic.isParent, .iconpicno.isParent { background-image:url(https://i.blackculm.com/0512-users2.png); height: 19px; width:19px; }
.iconpic.isFamily, .iconpicno.isFamily { background-image:url(https://i.blackculm.com/0525-users4.png); height: 19px; width:19px; }
img.trash { vertical-align:middle; filter: invert(8%) sepia(67%) saturate(9000%); width: 19px; }
.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.blackculm.com/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; }


.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; }
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; }
.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; background-image:url(https://i.blackculm.com/0571-search5.png); background-repeat:no-repeat; background-position:5px center; background-size:20px; padding:8px 8px 8px 30px; }
.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.blackculm.com/x.png'); height: 22px; width: 22px; position:absolute; background-size: contain; right:3px; top:3px; cursor:pointer; background-repeat: no-repeat; display:none; }

.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:90px; font-size:14px; }

.label120 { margin-bottom:10px; float:left; padding-top:14px !important; min-width:120px; } 
.labelr200 { margin-bottom:10px; display:inline-block; }
@media print { 
.notprinting { display:none; }
}
.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 .submitlg2 { width:100%; }
.formContainer { width:350px; }
.formContainer .xp { width:340px; font-size:16px; padding:4px; }
.formContainer .xp.isPassword { width:310px; padding-right:34px; }
.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; }

.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; }
.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 34px; border:1px solid #CCC !important; border-radius: 5px; margin-bottom: 20px; color:#FFF; background-position: 5px center; font-size:18px; background-size: 22px; background-repeat: no-repeat; background-image: url(https://i.blackculm.com/w/1120-plus-circle.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.blackculm.com/1120-plus-circle.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.blackculm.com/w/1121-minus-circle.png); }
.collapsing.grey.open { background-image: url(https://i.blackculm.com/1121-minus-circle.png); }
.collapsing.afterFeedBack { border-top-right-radius:0px;border-top-left-radius:0px; }
.collapsingBody { display: none; border:1px solid #CCC; border-top:0px none; border-radius: 0px 0px 5px 5px; padding:15px; margin-bottom: 20px; background-color: #FFFFFF; }

.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; };
/* 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; }

/* 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.blackculm.com/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: 10000; }
/* 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.blackculm.com/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;
}
.summary-row.stacked {  
	align-items: flex-start; /* align to top of column */
}
.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;
}
.box-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.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);
}
.emailLink { z-index:10; margin-right:-36px; }
.emailLinkFlush { z-index:10; margin-right:-36px; display:none; }
.xp.emailIcon { padding-left:35px !important; }

@media (max-width: 1400px) {
 .newResponsive .summary-row .summary-row-right input:not(.dateEntryField),
 .newResponsive .summary-row .summary-row-right select:not(#u3),
 .newResponsive .summary-row:not(.dateEntryField) .summary-row-right select:not(#u3) {
    width: 200px;
  }
  .newResponsive.leftChannel .box-container {
	 grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 1200px) {
	.newResponsive .summary-row .summary-row-right input:not(.dateEntryField),
	.newResponsive .summary-row .summary-row-right select:not(#u3),
	.newResponsive .summary-row:not(.dateEntryField) .summary-row-right select:not(#u3),
	.summary-row .summary-row-right input:not(.dateEntryField),
	.summary-row .summary-row-right select:not(#u3),
	.summary-row:not(.dateEntryField) .summary-row-right select:not(#u3) 
	{
		width: 450px;
	}
	.newResponsive.leftChannel .box-container {
		grid-template-columns: repeat(1, 1fr) !important;
	}
	.profileRightButtons:not(.plentyOfSpace) { position:relative; display:block; float:none; margin:10px 0px !important; margin-bottom:15px !important; top:0px !important; }
}
@media (max-width: 950px) {
 .newResponsive .summary-row .summary-row-right input:not(.dateEntryField),
 .newResponsive .summary-row .summary-row-right select:not(#u3),
 .newResponsive .summary-row:not(.dateEntryField) .summary-row-right select:not(#u3) {
    width: 300px;
  }
}
@media (max-width: 900px) {
  .box-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .box-container.four {
    grid-template-columns: repeat(3, 1fr);
  }
  .leftChannel .box-container, .newResponsive.leftChannel .box-container {
	 grid-template-columns: repeat(1, 1fr);
  }
}
@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,
	.summary-row:not(.oneline) .summary-row-right textarea,
	.summary-row:not(.oneline) .summary-row-right select {
		width: 100% !important;
		box-sizing: border-box;
	}
	.xp, .formrowlg.xp { padding:5px !important; font-size:16px !important; }
	.dateEntryField, .formrowlg .dateEntryField { width:95px; }
	.submitlg, .submitlg1, .submitlg2, .submitlg3, .submitlg4 { font-size:17px !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,
 .summary-row.oneline .summary-row-right select {
    width: 100% !important;
    box-sizing: border-box;
  }
}
.singleColumn { max-width:700px; }
@media (min-width: 941px) {
	.newResponsive .singleColumn .summary-row .summary-row-right input:not(.dateEntryField),
	.newResponsive .singleColumn .summary-row .summary-row-right select:not(#u3),
	.newResponsive .singleColumn .summary-row .summary-row-right textarea,
	.newResponsive .singleColumn .summary-row:not(.dateEntryField) .summary-row-right select:not(#u3) {
		width: 400px; 
	}
	.newResponsive.leftChannel .singleColumn .box-container {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}
@media (max-width: 940px) {
	.newResponsive .singleColumn .summary-row input:not(.dateEntryField):not(input[type="radio"]),
	.newResponsive .singleColumn .summary-row .summary-row-right select:not(#u3),
	.newResponsive .singleColumn .summary-row .summary-row-right textarea:not(#u3),
	.newResponsive .singleColumn .summary-row:not(.dateEntryField) .summary-row-right select:not(#u3) {
		width: 300px;
	}
	.newResponsive.leftChannel .singleColumn .box-container {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}