/* make  ALL text Helvetica, sans-serif, as per the original PDF help sheets using * i.e. the universal selector*/
*{
    font-family: Helvetica, sans-serif;
}

/* The html content will not have a gap between the content and the viewport edges. Margins will be applied to
the header and class page_content*/
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    height: 100%;
  }

/* Define formatting of all non-heading text. 14pt as 9pt used in the PDFs is too small for html viewports */
p, ul, ol, li, a {
	font-size: 14pt;
    margin: 5 0;
	line-height: 1.5;
    text-align: justify;
}

h5, h4 {
	font-size: 18;
    margin-bottom: 8px; 
}

h3 {
    margin-bottom: 10px; 
}

/* Increase the gap above and below unordered/ordered lists */
p + ul, p + ol {
    margin-top: 10px; 
}

ul + p, ol + p {
    margin-top: 10px; 
}

/* Vertical space size between paragraphs */
p + p::before {
    content: "";
    display: block;
    height: 6pt;
}

/* unvisited and visited links formatting */
.nav-buttons a:link,
.nav-buttons a:visited {
    background-color: #00A6B6;
    border-style: solid;
    border-color: #637E87;
    color: white;
    font-weight: bold;
    padding: 4px;
    display: block; /* Ensure the links are displayed as blocks */
    text-align: center; /* Center the text within the block */
    margin: 0px 5px 5px 0px; /* Add some spacing between buttons */
    display: inline-block; /* Ensure the links are displayed inline-block */
    box-sizing: border-box;
    width: 90pt;
    transition: background-color 0.3s, border-color 0.3s;  /* Change the colour when hovering over a period of time */
    border-radius: 4px;
    max-width: 100%;
    box-shadow: 0 0 4px #00a7b9;

}



/* Remove underline from links */
/* Change shade of buttons when mouse is hovering over, to highlight it is a button */
.nav-buttons a:link, .nav-buttons a:hover, .regs-content-grid a:link,.sheet-buttons:hover, .extra-button:hover  {
    background-color: #007C91;
    border-color: #5A7E87;
    text-decoration: none;
}

/* Format hyperlinks */
.page-links {
    text-decoration: underline;
    color: #00a7b9;
}

/* Formatting for the buttons linking to the RAPAT worksheet helpsheets on the contents page */
.worksheet-buttons-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* Grid format; 3 columns; each button of equal width*/
    gap: 10px; 
    width: 100%;
    margin: 0 auto; /* Center the container */
    
}

/* Formatting for the buttons linking to the general helpsheets on the contents page */
.general-sheet-buttons-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* Adjust gap between buttons if needed */
    width: 100%;
    margin: 0 auto; /* Center the container */    
}

/* Formatting on contents page */
.contents-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 96%; */
    margin: auto;
}

/* Centre the sub-headings on the contents page */
.contents_subheading {
    text-align: center;
}

#contents_databases{
    margin-bottom: 0;
    padding-bottom: 0;
}

.contents_sub-subheading{
    text-align: center;
    margin-top: 5px;
    font-style: italic;
}

/* Formatting common to all buttons on contents page */
.sheet-buttons,
.extra-button {
    background-color: #00A6B6;
    border: 2px solid #637E87;
    color: white;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, border-color 0.3s;
    font-size: 14pt;
    box-sizing: border-box; /* Ensures padding and border are included in width/height */
    padding: 10px;
    flex-grow: 1; /* Allow buttons to grow and take up available space */
    border-radius: 4px;
    box-shadow: 0 0 4px #00a7b9;

}



/* Formatting for buttons under "additional links" on contents page */
.extra-button-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* Grid format; 3 columns; each button of equal width*/
    gap: 10px;
    width: 100%; /* Ensure the container spans the full width */
    justify-content: center; /* Center buttons horizontally */
}

/* formatting of RAPAT logo in the header in all sheets except contents page*/
.header-logo {
    margin-bottom: 10px; /* Space between logo and buttons */
    z-index: 10;  /* Depth position */
    width:auto;
    height: 80%;  /* only 80% so there is space underneath for the contents and contact us buttons*/
    max-width: 100%; /* Ensure the logo does not overflow the container when the user zooms in */
}

/* formatting of RAPAT logo in the header of contents page. Height is 100% as no buttons needed underneath*/
#contents-header-logo{
    height: 100%;
    margin-left: 20pt;
	margin-right: 17pt;
}

/* Formatting of the region containing the header elements */
.header, .header-container {
    box-sizing: border-box;
    display: flex;
    align-items: center; /* Vertically center the items */
    position: fixed;
    background-color: white;
    width: calc(100% - 40px);  /* 100% of page width minus a 20px margin either side for scaling when viewport is resized*/
    z-index: 4;  /* Depth position. Ensures it lies in front of the page content */
    height: auto;
    margin: 4px 20px;
    top: 0; /* Ensure the header is at the top */
    min-height: 140pt;
    border: 2px solid #00a7b9;
    border-radius: 4px;
    box-shadow: 0 0 4px #00a7b9;
    min-width: 800px;
}

/* The class 'white_background' in in each of the <body> at the start of the html files to prevent the green lines 
from appearing when resizing the viewport */
.white_background{
    background-color: white;
    z-index: -1; /* Slightly below the header z-index to keep it behind the header */
    height:100%;
    width:100%;

}


/* white box in front of page-content, but behind the header to ensure no content shows through the sides/top of the header*/
.headerbox-background {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;  
    background-color: white;
    z-index: 3; /* Slightly below the header z-index to keep it behind the header */
}

/* Formatting of the left hand side region containing the header logo and nav buttons on help sheets */
.header-left {
    display: flex;
    flex-direction: column; /* Stack the logo and nav buttons vertically */
    align-items: center; /* Center items horizontally */
    width: 250pt; /* Fixed width for the logo and nav buttons */
    height: 110pt;
    margin-bottom: 10pt;
    max-width: 50%;
    z-index: 5;  /* Depth position. Ensures it lies in front of the page content */

}

/* Right hand side of header */
.header-text {
    flex: 1; /* Allow this to take up the remaining space */
    padding: 10px 10px; /* Add padding on the left and right */
    box-sizing: border-box; /* Ensure padding is included in width */
    z-index: 5;  /* Depth position */
    
}

/* Formatting of the heading text */
.header h1, .header-container h1 {
    background-color: #00A6B6;
    border-style: solid;
    border-color: #637E87;
    color: white;
    text-align: left;
    padding: 20px;
    margin: 0;
    font-size: 2em;
    box-sizing: border-box; /* Include padding in width calculation */
    height: 100%; /* Ensure the header text takes up the full height */
    min-height: 128pt; /* Minimum height to match the header height */
    display: flex; /* Use flexbox */
    align-items: center; /* Vertically center the content */
    justify-content: left; /* Horizontally center the content */
    width: 100%;
    border-radius: 4px;
    z-index: 5;  /* Depth position */
    box-shadow: 0 0 4px #00a7b9;

}

/* Everything between the header and the footer should be slightly narrower than the header and footer */
.narrow_body{
    width: 94%;
    margin: auto
}

/* Sizing and position of the box containing everything on the page except the header. Relative position as
the fixed header position removes the header from the flow of the document */
.sheet_content{
	box-sizing: border-box;
	position: relative;
	top: 210px;
    /* margin-left: 20px;
    margin-right: 20px; */
    flex: 1;
    z-index: 2;
    width: 100%;
    margin: auto;
}



/* Formatting of footer area */
.footer {
    box-sizing: border-box;
    display: flex;
    align-items: center; /* Vertically center the items */
    justify-content: space-between;
    padding: 10px 20px 10px 20px;
    margin: 40px 20px 0px 20px;
    border-top: 2px solid #00A6B6;
    background-color: #fff;
    width: calc(100% - 40px);
}

/* Position and size of the Astrimar logo in the footer */
.footer #footer-logo {
    width: 20%;
    height: auto;
    margin-left: 20pt;
    margin-bottom: 10px;
    position: relative;
}

/* Positioning of the Astrimar website link and line starting with the copyright symbol at right of footer */
.footer-content {
    display: flex;
    flex-direction: column;
    margin-right: 20pt;
}

#contents_header{
    top: 210px;
}

/* Formatting of the www.astrimar.com in the footer */
.footer-link {
    color: #00a7b9;
    text-decoration: none;
    font-size: 1em;
    margin-bottom: 5px;
}

/* underline www.astrimar.com when mouse is hovering over it */
.footer a:hover{
    text-decoration: underline;

}

/* Formatting of "© Astrimar Ltd 2024" in the footer */
.footer p {
    margin: 0;
    font-size: 0.9em;
    color: #00a7b9;
}

/* Italicise and make the disclaimer blue to make the disclaimer present on some pages distinct */
.sheet_content .disclaimer {
    font-style: italic;
    color:#00a7b9;
}

/* Container to center the image */
.image-container {
    width: 100%; /* Make container full width of the viewport */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center image horizontally */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    margin: 10px 0px;
}

/* Styling for the centered images in the help sheets */
.centred-image {
    max-width: 100%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Formatting of the words demonstrating the look of the cells in the "Format of the worksheets" sub-section
of the Getting Started Help Sheet */
.dark-grey {
	background-color: #637E87;
	color: white;
	padding: 2px 4px;
	border-radius: 3px;
	border: 2px solid #4C4C4C;
}

.mid-grey {
	background-color: #9EB1B8;
	color: black;
	padding: 2px 4px;
	border-radius: 3px;
	border: 2px solid #637E87;
}

.light-grey {
	background-color: #ECE8EA;
	color: black;
	padding: 2px 4px;
	border-radius: 3px;
	border: 2px solid #637E87;
    font-style: italic;
}

.white-cells{
	background-color: white;
	color:black;
    border: 2px solid #637E87;
    padding: 2px 4px;
	border-radius: 3px;
}

/* Formatting of the Risk Assessment table in the Initial Risk Management Help Sheet */
.RA_table {
    width: 100%;
    border-collapse: collapse; /* Collapses the borders to remove gaps */
    margin: 20px 0;
}

th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

.RA_table_header {
    background-color: #00A6B6;
    color: white;
}

.RA_table_subheader {
    background-color: #637E87;
    color: white;
}

.RA_element {
    background-color: white;
    color: black;
}

.no_cell{
	border: none
}

/* Inline "help button" image in Getting Started*/
#Help_button{
    vertical-align: middle; /* Aligns the image vertically with the text */
    width: 20px; /* Adjust the width as needed */
    height: auto; /* Maintains aspect ratio */
}

/* Inline "add row button" image in Getting Started*/
#add_row{
    vertical-align: middle; /* Aligns the image vertically with the text */
    width: 40px; /* Adjust the width as needed */
    height: auto; /* Maintains aspect ratio */
}

/* CSS for the search bar on the contents page */

.search-container {
    position: sticky;
    width: 100%;
    max-width: 600px; 
    margin: 0 auto; /* Center the search bar */
    box-sizing: border-box;
}

.search-input {
    width: 100%;
    padding: 10px;
    border: 2px solid #00A6B6;
    border-radius: 4px;
    font-size: 14pt;
    box-sizing: border-box;
    background-color: white;
    color: #333;
    box-shadow: 0 0 4px #00a7b9;

}

.search-input:focus {
    outline: none;
    border-color: #007C91;
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 300px; 
    overflow-y: auto;
    background-color: white;
    border: 2px solid #00a7b9;
    border-top: none;
    z-index: 1;
    box-shadow: 0px 4px 8px #007C91;
    display: none; /* Hidden by default */
    border-radius: 4px;
    box-sizing: border-box;
}

.dropdown-content a {
    display: block;
    font-weight:bold;
    padding: 10px;
    color: #637E87;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    transition: background-color 0.1s, color 0.1s;  /* Change the colour when hovering over a period of time */

}

/* Chamge the colour when hovering over the search bar. WIll change colour over the time period defined in .dropdown-content a {transition} */
.dropdown-content a:hover {
    background-color: #f1f1f1;
    color: #007C91;

}

/* Formatting for the regulations, codes and standards pages */
.regs-content-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 96%;
    margin: auto;
}

.grid-item {
    background-color: white;
    border: 2px solid #00a7b9;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 0 4px #00a7b9;
}

.regs-button-container {
    margin-bottom: 15px;
    min-height: 46px;
}

.regs-content-grid a:link, .regs-content-grid a:visited {
    background-color: #00A6B6;
    border: #637E87 solid 2px;
    border-radius: 4px;
    color: white;
    padding: 10px 20px;
    transition: background-color 0.3s, border-color 0.3s;  /* Change the colour when hovering over a period of time */
    font-weight: bold;
    display: flex;
    align-items: center; /*  center vertically */
    text-align: center; /*  center horizontally */
    box-shadow: 0 0 4px #00a7b9;
}

.regs-content-grid a:hover {
    background-color: #007C91;
}