/* Styles for procedures */

ol.procedure, ul.procedure {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-left: 40px;
}
.procedure {
  counter-reset: step-counter;
}
.procedure > li {
  counter-increment: step-counter;
  margin-bottom: 10px;
}
.procedure > li::before {
    margin-left: -40px;
    position: absolute;
    width: 24px;
    padding-left: 0px;
    height: 24px;
    line-height: 24px;
    vertical-align: top;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: #555;
    display: inline-block;
    font-weight: 700;
    content: counter(step-counter);
    font-size: 14px;
    text-align: center;
}

/* This part changes the colour of the circle on the step numbers. */
.theme2 .procedure > li::before {
  background-color: #E0E0E0;
}
.theme1 .procedure > li::before {
    background-color: #E0E0E0;
}

/* Changing search button colour to Q4 blue */

.portal-header .portal-search button, .publication-contents h4 span {
    background-color: #297AC3;
}


/* Search button hover state change to Q4 Blue*/

.portal-header .portal-search button:hover {
    background-color: #0f5ca3;
}

/* Changing font to Open Sans, size and line height */
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #333333;
    background-color: #fff;
}

/* Changing sidebar (left TOC nav) to Q4 Blue */
.site-sidebar {
    background-color: #0F5CA3;
}

/* Changing headings to Q4 Blue, adjust sizes and font weight */


h1  {
    font-family: 'Open Sans', sans-serif;
    font-size: 3.8rem;
    font-weight: 200;
    line-height: 1;
    color: #0f5ca3;
}
.h2, h2  {
    font-family: 'Open Sans', sans-serif;
    font-size: 2.8rem;
    font-weight: 200;
    line-height: 1;
    color: #0f5ca3;
}
.h3, .h4, .h5, .h6, h3, h4, h5, h6  {
    font-family: 'Open Sans', sans-serif;
    font-size: 2rem;
    font-weight: 200;
    line-height: 1;
    color: #0f5ca3;
}
    

/* Settings for "How can we help you today?" text */
.portal-header h1 {
    font-size: 28px;
    margin-bottom: 0.835em;
    color: #FFF;
    font-weight: 300;
}

}

.portal-header::before {
  background-color: transparent; 
}

.portal-header::after {
opacity: 1;
filter: none;
}

/* Making UI labels, button names, menu items bold */
span.guilabel, span.guibutton, span.guimenu, span.guimenuitem {
    font-weight: bold;
}

/* Settings for tables, making alternating rows, header row background Q4 Blue and text white */
tr:nth-child(even) {background: #F9F9F9}
tr:nth-child(odd) {background: #FFF}

th {
    text-align: start;
    background-color: #297ac3;
    color: #fff;
}


/* Settings for updating the icons */

.portal-single-publication .publication-icon {
    background-color: #0F5CA3;
    color: #FFFFFF
}

.portal-single-publication a {    
    color: #0F5CA3;
}

/* Setting font awesome icons for Category panels */

.cat-panel-1:before{
    content: "\f135"; 
}

.cat-panel-2:before{
    content: "\f073"; 
}

.cat-panel-3:before{
    content: "\f201"; 
}

.cat-panel-4:before{
    content: "\f140"; 
}

.cat-panel-5:before{
    content: "\f15c"; 
}

/* Definition list alignment - two columns format */

dl {
  display: grid;
  grid-template-columns: fit-content(155px) auto;
  
}

dt {
  grid-column-start: 1;
  
}

dd {
  grid-column-start: 2;
}
main dd {
    padding-left: 10px;
    padding-right: 12px;
    padding-top: 6px;
}
main dt {
    padding-left: 10px;
    padding-right: 12px;
    padding-top: 6px;
}

/* Definition list alternating row colours */
dt, dd {
  background-color: #FFF;

}

dt:nth-child(4n+1), dt:nth-child(4n+1) + dd {
  background-color: #F9F9F9;
}

/* Updating image alignment - this is for inline images */

img {
   vertical-align: middle;
}

/* Remove the Featured Content section on the home page */

.featured-content-label {
    display:none;
}

.portal-contents featured-content {
    display:none;
}

.portal-contents .inner {
    display:none;
}

/*Remove the prev and next buttons at bottom of pages */

li.previous {
	display: none;
}
li.next {
	display: none;
}

/*Trying to make icons appear */
.reveal .fa {
  font-family: 'FontAwesome';
  font-style: normal;
}

/*Adding box around Resources link */

.external-top-nav-link {
border: 1px solid #FFFFFF;
border-radius: 3px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #FFFFFF;
letter-spacing: 0.5px;
text-align: center;
line-height: 16px;
}


/* Hiding the toolbar */

.toolbar.top-nav-on {
    display: none;
}
/* Making a table style with no border and top aligned */

.noborder {
	border-collapse: collapse;
	border: none;
	vertical-align: top;
	
}
.noborder td {
	vertical-align: top;
}

/* Reducing padding in notes etc */
.warning, .note, .important, .caution, .tip {
	padding: 10px 18px 3px 58px;
	border-left-width: 3px;
	margin-top: 10px;
    margin-bottom: 12px;
}

.warning > p, .note > p, .important > p, .caution > p, .tip > p {
	padding-right: 24px;
}

.warning h3, .note h3, .important h3, .caution h3, .tip h3 {
	margin-bottom: 8px;
	padding: 5px 30px 0px 0px;
}

.note:before, .tip:before, .warning:before, .caution:before, .important:before {
	left: 20px;
    top: 12px;
}