* {
border: 0;
margin: 0;
padding: 0;
}

TH {
border-bottom: 1px solid #ffffff;
padding: 3px;
background-color: #4C93B5;
}

A:link {
color: #39258b;
font-weight: bold;
text-decoration: none;
}
A:visited {
color: #39258b;
font-weight: bold;
text-decoration: none;
}
A:hover {
color: #39258b;
font-weight: bold;
text-decoration: underline;
}
A:focus {
color: #39258b;
font-weight: bold;
text-decoration: underline;
}
A:active {
color: #39258b;
font-weight: bold;
text-decoration: underline;
}

A.iconOccupationA:link {
color: #000033;
font-weight: normal;
text-decoration: none;
}
A.iconOccupationA:visited {
color: #000033;
font-weight: normal;
text-decoration: none;
}
A.iconOccupationA:hover {
color: #000033;
font-weight: normal;
text-decoration: underline;
}
A.iconOccupationA:focus {
color: #000033;
font-weight: normal;
text-decoration: underline;
}
A.iconOccupationA:active {
color: #000033;
font-weight: normal;
text-decoration: underline;
}

A.navFooterA:link {
color: #0f57ae;
font-weight: normal;
text-decoration: none;
}
A.navFooterA:visited {
color: #0f57ae;
font-weight: normal;
text-decoration: none;
}
A.navFooterA:hover {
color: #0f57ae;
font-weight: normal;
text-decoration: underline;
}
A.navFooterA:focus {
color: #0f57ae;
font-weight: normal;
text-decoration: underline;
}
A.navFooterA:active {
color: #0f57ae;
font-weight: normal;
text-decoration: underline;
}

A.navFooterEmailA:link {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
A.navFooterEmailA:visited {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
A.navFooterEmailA:hover {
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}
A.navFooterEmailA:focus {
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}
A.navFooterEmailA:active {
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}

A.navTopA:link {
color: #ffffff;
font-size: 90%;
font-weight: bold;
text-decoration: none;
}
A.navTopA:visited {
color: #ffffff;
font-size: 90%;
font-weight: bold;
text-decoration: none;
}
A.navTopA:hover {
color: #ffffff;
font-size: 90%;
font-weight: bold;
text-decoration: underline;
}
A.navTopA:focus {
color: #ffffff;
font-size: 90%;
font-weight: bold;
text-decoration: underline;
}
A.navTopA:active {
color: #ffffff;
font-size: 90%;
font-weight: bold;
text-decoration: underline;
}
A.staffList:link {
color: #39258b;
font-size: 90%;
font-weight: normal;
text-decoration: none;
}

A.staffList:visited {
color: #39258b;
font-size: 90%;
font-weight: normal;
text-decoration: none;
}

A.staffList:hover {
color: #39258b;
font-size: 90%;
font-weight: normal;
text-decoration: underline;
}

A.staffList:focus {
color: #39258b;
font-size: 90%;
font-weight: normal;
text-decoration: underline;
}

A.staffList:active {
color: #39258b;
font-size: 90%;
font-weight: normal;
text-decoration: underline;
}
B, STRONG {
font-weight: bold;
}

BODY {
background-color: #ffffff;
color: #000033;
cursor: default;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 70%;
}

H1 {
font-size: 175%;
font-style: italic;
font-weight: normal;
}

INPUT, SELECT, TEXTAREA {
background-color: #ffffff;
border: 1px solid #606060;
color: #000033;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: normal;
padding: 2px;
}

LI {
padding-bottom: 1.25em;
}

OL, UL {
margin-left: 3em;
}

P {
line-height: 1.25em;
padding-bottom: 1.25em;
}

#contentContainerHome {
background-color: #ffffff;
}
#contentContainer {
background-color: #ffffff;
padding: 10px;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

#headerText {
color: #ffffff;
}

#footerBottom {
color: #0f57ae;
}
#footerBottomText {
padding-left: 10px;
}

#footerMiddle {
background-color: #006599;
color: #ffffff;
}
#footerMiddleText {
line-height: 1.75em;
padding-left: 10px;
}

#footerTop {
/* background: transparent url('../images/footer-760x3.gif') no-repeat scroll bottom left; */
background-color: #ffffff;
color: #0f57ae;
}
#footerTopLinks {
border-top: 1px solid #87abd6;
padding-left: 10px;
}

.formPadding{
padding: 2px;
}
.formPaddingFeedback{
padding: 6px;
}

.formRadio {
border: 0;
cursor: pointer;
}

.formCheckbox {
border: 0;
cursor: pointer;
}

.formSubmit {
background-color: #ffffff;
border-top: 1px solid #0f57ae;
border-right: 2px solid #0f57ae;
border-bottom: 2px solid #0f57ae;
border-left: 1px solid #0f57ae;
color: #0f57ae;
cursor: pointer;
font-weight: bold;
}

.greenDark {
background-color: #a8d591;
}
.greenLight {
background-color: #e1f0d9;
}
.greenMid {
background-color: #cee7c0;
}

#header {
    background: transparent url('../images/header-760x135.gif') scroll top left;
}

#actheader {
    background: transparent url('../images/ACTheader-760x135.gif') scroll top left;
}

.iconOccupationImage {
padding: 0 5px 5px 0;
}
.iconOccupationText {
padding: 0 0 5px 0;
}

#introTextTop {
height: 118px;
padding-right: 15px;
}

#introTextBottom {
padding-right: 15px;
}

#jobNumberSearch {
background-color: #e7eef8;
}
#EmployerSearch {
background-color: #99ccff;
}
#PostcodeSearch {
background-color: #99CCCC;
}
#ProvClassSearch {
background-color: #e7eef8;
}
.loginLogout {
font-weight: bold;
padding-right: 10px;
}

#master {
background: transparent url('../images/background.gif') repeat scroll top left;
}

.navTopLink {
padding-right: 10px;
}

.pageTitle {
border-bottom: 1px solid #87abd6;
padding-left: 10px;
}

.pointer {
cursor: pointer;
}



/* Veryan only need these styles */

.veryanFormRadio {
border: 0;
cursor: pointer;
}

.veryanFormRadioOppEntry {
background-color: #c2ddfe;
border: 0;
cursor: pointer;
}

.veryanFormRadioOppEntryLight {
background-color: #e7eef8;
border: 0;
cursor: pointer;
}

.veryanFormCheckbox {
border: 0;
cursor: pointer;
}

.veryanFormCheckboxOppEntryLight {
background-color: #e7eef8;
border: 0;
cursor: pointer;
}
.veryanFormCheckboxOppEntryDark {
background-color: #c2ddfe;
border: 0;
cursor: pointer;
}
.veryanFormRadioPrEntryLight {
background-color: #FFDDFF;
border: 0;
cursor: pointer;
}

.veryanFormCheckboxPrEntryLight {
background-color: #FFDDFF;
border: 0;
cursor: pointer;
}

.veryanFormSubmit {
background-color: #ffffff;
border-top: 1px solid #0f57ae;
border-right: 2px solid #0f57ae;
border-bottom: 2px solid #0f57ae;
border-left: 1px solid #0f57ae;
color: #0f57ae;
cursor: pointer;
font-weight: bold;
}

.veryanFormSubmitSmall {
background-color: #ffffff;
border-top: 1px solid #0f57ae;
border-right: 2px solid #0f57ae;
border-bottom: 2px solid #0f57ae;
border-left: 1px solid #0f57ae;
color: #0f57ae;
cursor: pointer;
font-weight: normal;
}

.veryanFormSubmitSmallRed {
background-color: #ffffff;
border-top: 1px solid #0f57ae;
border-right: 2px solid #0f57ae;
border-bottom: 2px solid #0f57ae;
border-left: 1px solid #0f57ae;
color: #ff0033;
cursor: pointer;
font-weight: normal;
}.veryanPointer {
cursor: pointer;
}


.ProvTextBox {
background-color:#FFDDFF;
}
.provSelect{
	width: 150px;
}
.provSelect:focus {
	min-width: 150px;
	width: auto;
}
.oneCharBox{
	width:10px;
}
.veryanHiddenTextBoxLight {
background-color: #e7eef8;
color:#e7eef8;
border: 0;
cursor:default;
}

.veryanTDWhite {
background-color: #ffffff;
padding: 3px;
}

.veryanTDoppEntryLight {
background-color: #e7eef8;
padding: 3px;
}
.veryanTDoppEntryDark {
background-color: #c2ddfe;
padding: 3px;
}

.veryanTDoppEntryLightSP {
background-color: #e7eef8;
padding: 1px;
}
.veryanTDoppEntryDarkSP {
background-color: #c2ddfe;
padding: 1px;
color:
}
.veryanTDoppEntryRedSP {
background-color: #FF2233;
color: #FFFFFF;
padding: 1px;
}
.veryanTDoppEntryAmberSP {
background-color: #FFFF66;
padding: 1px;
}

.veryanTDblueLight {
background-color: #e7eef8;
border-bottom: 1px solid #ffffff;
padding: 3px;
}

.veryanTDblueMid {
background-color: #b2d1e0;
/*background-color: #c2ddfe;*/
border-bottom: 1px solid #ffffff;
padding: 3px;
}

.veryanTDnoColour {
border-bottom: 1px solid #ffffff;
padding: 3px;
}

.veryanTDgreenLight {
background-color: #e1f0d9;
border-bottom: 1px solid #ffffff;
padding: 3px;
}

.veryanTDgreenMid {
background-color: #cee7c0;
border-bottom: 1px solid #ffffff;
padding: 3px;
}
.veryanMainDiv {
height: 330px;
overflow: auto;
}
A.alphaLink:link {
color: #39258b;
font-weight: bold;
text-decoration: none;
}
A.alphaLink:visited {
color: #39258b;
font-weight: bold;
text-decoration: none;
}
A.alphaLink:hover {
color: #ff0033;
font-weight: bold;
text-decoration: underline;
}
A.alphaLink:focus {
color: #ff0033;
font-weight: bold;
text-decoration: underline;
}
A.alphaLink:active {
color: #ff0033;
font-weight: bold;
text-decoration: underline;
}

.alphaLinkY:link {
color: #ff0033;
font-weight: bold;
text-decoration: none;
}
.alphaLinkY:visited {
color: #ff0033;
font-weight: bold;
text-decoration: none;
}
.alphaLinkY:hover {
color: #ff0033;
font-weight: bold;
text-decoration: underline;
}
.alphaLinkY:focus {
color: #ff0033;
font-weight: bold;
text-decoration: underline;
}
.alphaLinkY:active {
color: #ff0033;
font-weight: bold;
text-decoration: underline;
}

.veryanTDgreenLightRedText {
background-color: #e1f0d9;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #ff0033;
}

.veryanTDgreenMidRedText {
background-color: #cee7c0;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #ff0033;
}
.veryanTDblueLightRedText {
background-color: #e7eef8;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #ff0033;
}

.veryanTDblueMidRedText {
background-color: #b2d1e0;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #ff0033;
}


.veryanVerySmall {
color: #000;
cursor: default;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 50%;
}

.veryanSmall {
color: #000;
cursor: default;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 75%;
}

.veryanMedium {
background-color: #ffffff;
color: #000033;
cursor: default;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 95%;
}

.veryanLarge {
background-color: #ffffff;
color: #000033;
cursor: default;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 125%;
}
.veryanSmall {
font-size: 90%;
}
.SmallRedSuper {
	font-size: 90%;
	font-weight: normal;
	color: #FF0000;
	vertical-align: text-top;
}
.WhiteText {
	color: #FFFFFF;
}
.RedText {
	color: #FF0000;
}
.BoldRedText {
	color: #FF0000;
	font-weight: bold;
}
.BlackText {
	color: #000000;
}

.GreenText {
	color: #009900;
}
.BlueText {
	color: #003EFF;
}

.LightGreyText{
color:#CCCCCC;
}
.MidGreyText {
color:#999999;
}

.centertable
{ 
margin-left: auto;
margin-right: auto;
}

.veryanTDgreenLightRedText {
background-color: #e1f0d9;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #ff0033;
}

.veryanTDgreenMidRedText {
background-color: #cee7c0;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #ff0033;
}
.veryanTDblueLightRedText {
background-color: #e7eef8;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #ff0033;
}

.veryanTDblueMidRedText {
background-color: #b2d1e0;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #ff0033;
}

.veryanTDgreenLightPaleBlueText {
background-color: #e1f0d9;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #0066ff;
}

.veryanTDgreenMidPaleBlueText {
background-color: #cee7c0;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #0066ff;
}
.veryanTDblueLightPaleBlueText {
background-color: #e7eef8;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #0066ff;
}

.veryanTDblueMidPaleBlueText {
background-color: #b2d1e0;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #0066ff;
}

.veryanTDblueMidGreenText {
background-color: #b2d1e0;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #009900;
}
.veryanTDblueLightGreenText {
background-color: #e7eef8;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #009900;
}
.veryanTDblueMidYellowText {
background-color: #b2d1e0;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #999966;
}
.veryanTDblueLightYellowText {
background-color: #e7eef8;
border-bottom: 1px solid #ffffff;
padding: 3px;
color: #999966;
}

.smallLink:link {
color: #0f57ae;
font-weight: normal;
text-decoration: none;
}
.smallLink:visited {
color: #0f57ae;
font-weight: normal;
text-decoration: none;
}
.smallLink:hover {
color: #0f57ae;
font-weight: normal;
text-decoration: underline;
}
.smallLink:focus {
color: #0f57ae;
font-weight: normal;
text-decoration: underline;
}
.smallLink:active {
color: #0f57ae;
font-weight: normal;
text-decoration: underline;
}
.greenLink:link {
color: #009900;
font-weight: bold;
text-decoration: none;
}
.greenLink:visited {
color: #009900;
font-weight: bold;
text-decoration: none;
}
.greenLink:hover {
color: #009900;
font-weight: bold;
text-decoration: underline;
}
.greenLink:focus {
color: #009900;
font-weight: bold;
text-decoration: underline;
}
.greenLink:active {
color: #009900;
font-weight: bold;
text-decoration: underline;
}
.smallRedLink:link {
color: #FF0000;
font-weight: normal;
text-decoration: none;
}
.smallRedLink:visited {
color: #FF0000;
font-weight: normal;
text-decoration: none;
}
.smallRedLink:hover {
color: #FF0000;
font-weight: normal;
text-decoration: underline;
}
.smallRedLink:focus {
color: #FF0000;
font-weight: normal;
text-decoration: underline;
}
.smallRedLink:active {
color: #FF0000;
font-weight: normal;
text-decoration: underline;
}
.RedLink:link {
color: #FF0000;
font-weight: bold;
text-decoration: none;
}
.RedLink:visited {
color: #FF0000;
font-weight: bold;
text-decoration: none;
}
.RedLink:hover {
color: #FF0000;
font-weight: bold;
text-decoration: underline;
}
.RedLink:focus {
color: #FF0000;
font-weight: bold;
text-decoration: underline;
}
.RedLink:active {
color: #FF0000;
font-weight: bold;
text-decoration: underline;
}
.smallWhiteLink:link {
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
}
.smallWhiteLink:visited {
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
}
.smallWhiteLink:hover {
color: #FFFFFF;
font-weight: normal;
text-decoration: underline;
}
.smallWhiteLink:focus {
color: #FFFFFF;
font-weight: normal;
text-decoration: underline;
}
.smallWhiteLink:active {
color: #FFFFFF;
font-weight: normal;
text-decoration: underline;
}
.smallBlackLink:link {
color: #000000;
font-weight: normal;
text-decoration: none;
}
.smallBlackLink:visited {
color: #000000;
font-weight: normal;
text-decoration: none;
}
.smallBlackLink:hover {
color: #000000;
font-weight: normal;
text-decoration: underline;
}
.smallBlackLink:focus {
color: #000000;
font-weight: normal;
text-decoration: underline;
}
.smallBlackLink:active {
color: #000000;
font-weight: normal;
text-decoration: underline;
}
.smallAmberLink:link {
color: #FFCC00;
font-weight: normal;
text-decoration: none;
}
.smallAmberLink:visited {
color: #FFCC00;
font-weight: normal;
text-decoration: none;
}
.smallAmberLink:hover {
color: #FFCC00;
font-weight: normal;
text-decoration: underline;
}
.smallAmberLink:focus {
color: #FFCC00;
font-weight: normal;
text-decoration: underline;
}
.smallBlackLink:active {
color: #FFCC00;
font-weight: normal;
text-decoration: underline;
}
#StatsTable {
border:none;
align-items: centre;
align-self: center;
}
#StatsTable td {
background-color:#e7eef8;
text-align:center;
height:70px;
}

a#STlink {
display:block;
width:100%;
height:100%; 
font-size:12px;
color:#666666; 
text-decoration:none;
}

.STLinkSmall{
font-size:8px;
}

a#STlink:hover {
background-color:#ddddff;
color:#39258b;
}

 
b.rtop, b.rbottom { 
  display:block;
  background: #FFF; 
} /* Setting the corner color, use different color for different layout */
 
b.rtop b, b.rbottom b {
  display:block;
  height: 1px; 
  overflow: hidden; 
  background: #e7eef8;
} /* Setting the strip size and background color */
 

b.r1 { margin: 0 5px; }
 
b.r2 { margin: 0 3px; }
 
b.r3 { margin: 0 2px; }
 
b.rtop b.r4, b.rbottom b.r4 {
  margin: 0 1px;
  height: 1px; 
}

#ProgressTable {
	font-family: Calibri, Arial;
	background-color: #0099FF;
}
#ProgressTable th {
	font-size:20px;
	background-color: #006699;
	color:#ffffff;
	height:60px;
	text-align: left;
	border-bottom: 0px;
	padding:6px;
}
#ProgressTable td {
	font-size:14px;
	background-color: #ffffff;
	padding: 10px;
	border-top: 0px;
	border-left:5px solid #006699; 
	border-right:5px solid #006699; 
	border-bottom:5px solid #006699; 
}

.OPColour {
	color:#OOF;
}
.SmallLookup{
	width:80px;
}
.SmallMedLookup{
	width:95px;
}
.MediumLookup{
	width:200px;
}
.LargeLookup{
	width:260px;
}

#LHPane{
	 height:410px;
	 overflow:auto;
}
#RHPane{
	 height:460px;
	  overflow:auto;
}
#FOLHPane{
	 height:260px;
	 overflow:auto;
}
#EventLHPane{
 	float: left;
	width: 49%;	
}
#EventRHPane{
 	float: right;
	width: 49%;	
}
#EventEmpPane{
	 max-height:160px;
	 overflow:auto;
}
#EventActionsPane{
	 max-height:100px;
	 overflow:auto;
}
#EventSchPane{
	 max-height:120px;
	 overflow:auto;
}
#EventAgPane{
	 max-height:100px;
	 overflow:auto;
}
.visInput{
	font-size:10;
	 width:40px;
}


/* START OF NEW MENU STYLES */

nmul {
	text-decoration:none;
    list-style-type:inherit;
    margin: 2;
    padding: 2;
    overflow:auto;
    background-color:#CCCCCC;
}

nmli {
	display: inline;
}

nmli a {
    display: block;
    color:#CCCCCC;
    text-align: center;
    padding: 5px 5px;
    text-decoration: none;
}

nmli a:hover:not(.active) {
    text-decoration: none;
    background-color: #fff;
}

nmli a.active {
	text-decoration:none;
    color: white;
    background-color: #006599;
}

/* END OF NEW MENU STYLES */


/* Babcock styles */

.BldpHeader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	line-height: 60px;
	font-weight: bold;
	color:#FFFFFF;
}

.BldpStrapline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	color:#FFFFFF;
}

.BldpBodytext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	color:#000000;
}

.BldpFootertext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	color:#0080c9;
}

A.bldpA:link {
color: #0080c9;
text-decoration: none;
font-weight: normal;
}

A.bldpA:visited {
color: #0080c9;
text-decoration: none;
font-weight: normal;
}

A.bldpA:hover {
color: #0080c9;
text-decoration: underline;
font-weight: normal;
}

A.bldpA:focus {
color: #0080c9;
text-decoration: underline;
font-weight: normal;
}

A.bldpA:active {
color: #0080c9;
text-decoration: underline;
font-weight: normal;
}

/* LINK2 ACTIVITIES */

.buttons button,
button {
    background-color: #2b7cff;
    color: #fff;
    border: none;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.05s ease;
}

.buttons button:hover,
button:hover {
    background-color: #1f5fcc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.buttons button:active,
button:active {
    background-color: #174a9e;
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) inset;
}

button.secondary {
    background-color: #6c757d;
}

button.secondary:hover {
    background-color: #5a6268;
}


.list-header-blue th {
    background-color: #2b7cff;
    color: #fff;
    font-weight: normal;
    font-size: 10px;
}




/* Modal background overlay */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

/* Modal overlay */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Modal box */
.modal-box {
    background: #fff;
    margin: 8% auto;
    padding: 20px 20px;
    width: 200px;
    max-width: 50%;
    border-radius: 10px;
    border: 4px solid #2b7cff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    font-family: Arial, sans-serif;
    animation: fadeIn 0.3s ease-in-out;
}


/* Styled modal box */
.modal-content {
    background: #fff;
    margin: 8% auto; /* centre horizontally */
    padding: 20px;
    width: 50%;
    max-width: 600px;
    border: 3px solid #2b7cff;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    position: relative;
    animation: fadeIn 0.25s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Close button */
.modal-close {
    float: right;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    color: #888;
}

    .modal-close:hover {
        color: #000;
    }

.modal-box h2 {
    margin-top: 0;
    color: #2b7cff;
}



.close {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.close:hover {
    color: #2b7cff;
}


/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* INFO ICON container */
.info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
}


table {
    overflow: visible;
}

/* INFO ICON TEXT */
.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 130%; /* appear above icon */
    left: 50%;
    transform: translateX(-50%);
    background-color: #2b7cff;
    color: #ffffff;
    font-size: 10px;
    padding: 6px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10000;
    transition: opacity 0.2s ease;
}

/* INFO ICON Small arrow */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* INFO ICONShow tooltip on hover */
.info-icon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* INFO ICON Spacing */
.info-cell {
    position: relative; /* ensures tooltip positions correctly */
    text-align: center;
    vertical-align: middle;
    width: 26px;
    overflow: visible; /* allows tooltip to escape table cell */
}

.info-icon svg {
    display: block;
    fill: #2b7cff !important;
    stroke: #2b7cff !important;
    width: 24px;
    height: 24px;
}

/* Force correct colours */
.info-icon .icon-box {
    fill: none !important;
    stroke: #2b7cff !important;
    color: #2b7cff !important;
}

.info-icon .icon-dot,
.info-icon .icon-stem {
    fill: #2b7cff !important;
    stroke: #2b7cff !important;
    color: #2b7cff !important;
}



.objectivesSection label {
    align-items: center;
}


.objectivesSection input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}