/* Customised from skeleton.css and some extra stuff added */

/* Sets up Soleil font family on server */
@font-face {
    font-family: Soleil;
    font-weight: 200;
    src: url("/fonts/SoleilLight.otf") format("opentype") ;
}
@font-face {
    font-family: Soleil;
    font-weight: 500;
    src: url("/fonts/SoleilRegular.otf") format("opentype") ;
}
@font-face {
    font-family: Soleil;
    font-weight: 600;
    src: url("/fonts/SoleilBook.otf") format("opentype") ;
}
@font-face {
    font-family: Soleil;
    font-weight: 700;
    src: url("/fonts/SoleilBold.otf") format("opentype") ;
}

.toolpagedialog { position: fixed ; top: 50% ; left: 50% ; transform: translate(-50%, -50%) ; width: 95% ; max-width: 450px ; border: 2px solid #011E41; border-radius: 10px; background-color: #FFF ; padding: 20px ; z-index: 1000 ; overflow: auto ; }
.toolpagedialog input[type='text'], .toolpagedialog input[type='email'], .toolpagedialog textarea, .toolpagedialog select  {  display: block ;  width: 95% ;  padding: 5px ;  margin: 5px ;  border-radius: 5px ; min-height: 1.9rem; font-family: Verdana, Geneva, Tahoma, sans-serif ; }
.toolpagedialog textarea { resize : none ; width : 95% ; max-width : 95% ; overflow : hidden ; height : 150px ; max-height : 150px ; overflow-y : auto ; }
.toolpagedialog select { color: #777; }
.toolpagedialog button:disabled { opacity: 0.5 ; }
.toolpagedialog button:hover:disabled { border: 1px solid rgb(187, 187, 187); }


.footer {
	background-color: var(--navbar-text-color);
	color : #fff ;
	padding : 5px 15px ;
	height : 60px ;
	display: block ;
	text-align: center ;
	vertical-align: middle ;
	margin: 25px 0px;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
	font-weight: 300; }

/* Print */
@media print {
	h1 { font-size: 4rem ; font-weight : 900 }
	h2 { font-size: 3rem ; font-weight : 600 }
	h3 { font-size: 2rem ; font-weight : 600 ; }
	h4 { font-size: 1rem ; font-weight : 600 ; font-style: italic ; }
	h5 { font-size: 0.75rem ; font-style: italic ; }
	p { font-size: 0.75rem ; font-weight : 300 ;}
	.print_media { display: block ; }
	.mobile_portrait { display: none ; }
	.mobile_landscape { display: none ; }
	.tablet_portrait { display: none ; }
	.tablet_landscape { display: none ; }
	.laptop_screen { display: none ; }
}


/* Mobile Portrait */
@media screen and (max-width: 479px) {
	h1 { font-size: 2.1rem ; font-weight : 900 }
	h2 { font-size: 1.7rem ; font-weight : 600 }
	h3 { font-size: 1.2rem ; font-weight : 600 ; }
	h4 { font-size: 1.2rem ; font-weight : 600 ; font-style: italic ; }
	h5 { font-size: 1.2rem ; font-style: italic ; }
	p { font-size: 1.2rem ; font-weight : 300 ;}
	.print_media { display: none ; }
	.mobile_portrait { display: block ; }
	.mobile_landscape { display: none ; }
	.tablet_portrait { display: none ; }
	.tablet_landscape { display: none ; }
	.laptop_screen { display: none ; }
}

/* Mobile Landscape */
@media screen and (min-width: 480px) and (max-width: 799px) {
	h1 { font-size: 2.3rem ; font-weight : 900 }
	h2 { font-size: 1.9rem ; font-weight : 600 }
	h3 { font-size: 1.4rem ; font-weight : 600 ; }
	h4 { font-size: 1.4rem ; font-weight : 600 ; font-style: italic ; }
	h5 { font-size: 1.4rem ; font-style: italic ; }
	p { font-size: 1.4rem ; font-weight : 300 ;}
	.print_media { display: none ; }
	.mobile_portrait { display: none ; }
	.mobile_landscape { display: block ; }
	.tablet_portrait { display: none ; }
	.tablet_landscape { display: none ; }
	.laptop_screen { display: none ; }
}

/* Tablet Portrait */
@media screen and (min-width: 800px) and (max-width: 1023px) {
	h1 { font-size: 2.5rem ; font-weight : 900 }
	h2 { font-size: 2.1rem ; font-weight : 600 }
	h3 { font-size: 1.6rem ; font-weight : 600 ; }
	h4 { font-size: 1.6rem ; font-weight : 600 ; font-style: italic ; }
	h5 { font-size: 1.6rem ; font-style: italic ; }
	p { font-size: 1.6rem ; font-weight : 300 ;}
	.print_media { display: none ; }
	.mobile_portrait { display: none ; }
	.mobile_landscape { display: none ; }
	.tablet_portrait { display: block ; }
	.tablet_landscape { display: none ; }
	.laptop_screen { display: none ; }
}

/* Tablet Landscape */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
	h1 { font-size: 2.7rem ; font-weight : 900 }
	h2 { font-size: 2.3rem ; font-weight : 600 }
	h3 { font-size: 1.8rem ; font-weight : 600 ; }
	h4 { font-size: 1.8rem ; font-weight : 600 ; font-style: italic ; }
	h5 { font-size: 1.8rem ; font-style: italic ; }
	p { font-size: 1.8rem ; font-weight : 300 ;}
	.print_media { display: none ; }
	.mobile_portrait { display: none ; }
	.mobile_landscape { display: none ; }
	.tablet_portrait { display: none ; }
	.tablet_landscape { display: block ; }
	.laptop_screen { display: none ; }
}

/* Laptop */
@media screen and (min-width: 1440px) {
	h1 { font-size: 3.0rem ; font-weight : 900 }
	h2 { font-size: 2.5rem ; font-weight : 600 }
	h3 { font-size: 2.0rem ; font-weight : 600 ; }
	h4 { font-size: 2.0rem ; font-weight : 600 ; font-style: italic ; }
	h5 { font-size: 2.0rem ; font-style: italic ; }
	p { font-size: 2.0rem ; font-weight : 300 ;}
	.print_media { display: none ; }
	.mobile_portrait { display: none ; }
	.mobile_landscape { display: none ; }
	.tablet_portrait { display: none ; }
	.tablet_landscape { display: none ; }
	.laptop_screen { display: block ; }
}

	p {
		margin-top: 0; }

a.footnote {
   text-decoration:none;
   /*background-color: #FEF6BB;*/
   color: #6788B1;
   font-weight: 900;
   padding-left: 2px;
   padding-right: 2px;
   margin-right: 2px;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;
} 

a.footnote span {
   z-index: -1;
   opacity: 0;
   position: fixed;
   left: 15px; 
   /* right: 15px;  */
   top: 20px;
   margin-left: 0px;
   margin-right: 18px;
   padding:14px 20px;
   border-radius:4px; box-shadow: 5px 5px 8px #CCC;
   border:1px solid  var(--navbar-text-color-focus);
   color: var(--navbar-text-color);
   background-color:  #FFF;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;
}

a.footnote:hover span {
   z-index: 9;
   opacity: 1;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;
}

/*Useful snippet to centre something vertically and horizontally*/
.center {
  display: flex;
  align-items: center;
  justify-content: center;       
}

@media screen and (min-width: 1000px) {
/*Useful snippet for equal height columns*/
	.height100 {
	  display: grid;
	  grid-auto-flow: column;
	  gap: 5%;
	}
}
@media screen and (max-width: 1000px) {
	.height100 .colGrid {
		width: 100% ;	
	}
}

.gt6monthsoverdue { background-color: #f53737 ; }
.gt30daysoverdue { background-color: #f87373 ; }
.reviewnow { background-color: #f08b51 ; }
.reviewsoon { background-color: rgb(121, 224, 240) ; }
.gt6monthstogo { background-color: none ; }

.infopanel {
    background-color: #fff;
    border: 1px solid #011E41;
    border-radius: 10px;
    margin-top: 1rem;
}
.infopanel > .panelhead {
    cursor: pointer;
    background-color: #011E41;
    border: 1px solid #011E41;
    border-top-left-radius: 10px;   
    border-top-right-radius: 10px;   
    border-bottom-left-radius: 10px;   
    border-bottom-right-radius: 10px; 
    padding: 0.5rem 1rem 0.5rem 1rem ;
}

.infopanel > .panelhead > h3 {
    color: white;
    display:inline-block;
}

.infopanel > .showbody {
    display:block;
    border-radius: 10px;
    padding: 0.5rem 1rem 0.5rem 0.7rem ;
    margin: 0;
}
.infopanel > .hidebody {
    display:none;
    border-radius: 10px;
    padding: 0.5rem 1rem 0.5rem 0.7rem ;
    margin: 0;
}

.roblist ol {
    font-size: 2rem;
    list-style-type: numeric ;
    list-style-position: outside ;
}
.roblist ol ol {
    list-style-type: lower-alpha ;
}
.roblist ol ol ol {
    list-style-type: lower-roman ;
}
.roblist li {
    margin-left: 2em ;
    padding-left: 2rem  ;
    margin-bottom: 0.5rem ;
}

ul.static-resource {
    margin-top: 15px ;
    list-style-type: none ;
    font-size: 1.85rem ;
    line-height: 0.9 ;
}
ul.static-resource .metadata {
    font-size:14px ;
    font-weight: 200 ;
    font-style: italic;
    margin-bottom:40px;
}

.fspProgressBar {
    width: 100px;
    height: 16px;
    border: 0.5px solid #FFF ;
    position: relative ;
    top: 3px ;
}

.fspProgressBar::-moz-progress-bar { background: lightblue ; }
.fspProgressBar::-webkit-progress-value { background: #011E41 ; }
.fspProgressBar::-webkit-progress-bar { background: lightblue ; }

#siteBanner {
    display:block ;
    border: solid 5px #011E41 ;
    background-color: aliceblue ;
    border-radius: 15px ;
    padding: 8px ;
    margin-bottom: 5px;
}