/* --------- NOTE:
Custom classes that start with c- are named this way to avoid conflicts with existing bootstrap
classes that don't want to use or would require too much adapting/overwriting to use as a basis for
something. 
---------- */

/* Hack to make these elements work for very old browsers, may no longer be necessary. */
header, nav, footer, article {
    display: block;
}

body {
    font-family: Verdana, Tahoma, Arial;
    --bs-primary: #e8f2e6;
    --bs-primary-rgb: 232,242,230;
}

dl, ol, ul {
    margin-bottom: 0.5rem;
}

h2, .h2 {
    font-size: 1.35rem;
    font-weight: 600;
}


h3, .h3{
    font-size: 1.1rem;
    font-weight: 600;
}

p {
    margin-bottom: 0.5rem;
}

a, a:visited, .link {
    text-decoration: none;
    color: #0000FF;
}

a:hover, .link:hover {
    text-decoration: underline;
}

/* The site title. This is initially set to hidden with a mobile first design, as there is no space for
it on small screens, but it is set to be shown on larger screens that have space for it via a media 
query below. */
a#site-title, a#site-title:visited {
    display: none;
    color: #000000;
    font-size: 1.25rem;
    white-space: nowrap;
}

ul.inline {
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

ul.inline li{
    display:inline;
    padding: 0 10px;
    margin: 0;
    text-align: left;
    border-right: 1px solid #000;
}

ul.inline li:last-child{
    padding-right: 0;
    border: none;
}

.alert{ 
    margin: 0;
    margin-bottom: 0.5rem;
    padding: 5px;
}

/* Class to add default border style */
.border{
    border: 2px solid #CCE2C7!important;
    border-radius: .5rem!important;
}

/* A useful class for centering content - Flex is set with content centering so if there are multiple 
items in a box/cell it'll center them, both horizontally and vertically. It's probably best to use it 
within a container where flex is already in use that creates a cell with content you want to place in 
the middle of the cell, to customise a cell within the grid created, although you may find value for it 
in other situations. It can, and often should, be used with other flex/grid classes as required. */
.center-contents {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

/* As above but center contents on the horizontal only */
.center-contents-h {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
}

/* A custom class for making a flex item grow (and not shrink) */
.c-flex-grow {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0%;
}

/* A class to use to say that a flex item can shrink allowing other items to grow to take remaining space */
.shrinkable{
    flex-shrink: 1;
    flex-grow: 0;
}

/* Things to customise bootstrap grids (which are made up from a .container (or it's variants - 
.container-fluid, .container-sm, .container-md, etc.), and .row (or a variant of it) and 
.col (or a variant of it) items)

Customisations work by adding specific classes to the grid's container (alongside a container class of course).

- Add a grid class to add customisations to improve how the grid is displayed. By default it will 
make the col elements (.col and it's variants .col-sm, .col-md etc.), which become cells (column items), separate with a gap between them and adds a border around each individual cell. Treating these cells as 
individual items for styling works well with the flex wrapping as it means wherever the cell appears, 
be it on a row with others or moved onto its own row when there is less space, it will handle borders correctly with a border on all sides, curved corners on all corners, etc. Whereas if you had no gap 
between cells and put borders around all cells to make a bordered grid/table you get problems as where 
cells meet you get double width borders (right border from one cell meets left border from its neighbour 
(and similar problem with neighbours above and below)).

The following classes are designed to be used alongside .grid to adjust how the customised grid works.

- If you wish to have a border around the grid (outer border) only, rather than individual cells or rows, add the grid-border class as well.
- To remove all borders add a .no-borders class.

- The following options are available for use in addition to the grid class to give alternative border 
designs. Note flex wrapping is disabled for these options to avoid issues. As these designs put 
cells next to each other without a gap, to make a bordered grid/table, you can get duplicate borders 
between cells as noted above. This has been fixed in the styling but to do this it assumes columns 
within a row are next to each other as defined, which when wrapping occurs this isn't the case (they 
can be moved to new lines/rows if there isn't enough space to fit on the row), so wrapping is disabled 
for these options to prevent this issue but it makes them less flexible choices.
 -- Add a row-borders class to add borders to rows only.
 -- Add a col-borders class to add borders to columns only.
 -- Add a cell-borders class for cell-borders/all borders. 
*/

.grid{
    margin-top: 10px;
    margin-bottom: 10px;
}

.grid .row{
    justify-content: center;
    align-content: flex-start;
    gap: 0.5rem;
    /* Gap only applies spacing between items and not the outer edges. To add a gap to the outer edges 
    you would have to add a margin to the row (e.g., margin: 0 0.5rem;). However, there may be a margin 
    applied to the element where the grid is contained (e.g, a overall margin for main), so may not need 
    to set a margin for rows if this is sufficent. If you do use a row margin you could/should either 
    reduce it to take into account the existing overall margin or match the gap to the existing outer 
    margin so spacing is equal. */
    margin-bottom: 0.5rem;
}

.grid .row:last-of-type{
    margin-bottom: 0;
}

/* As columns can have different names (col, col-sm, col-md etc.) to match viewpoints to cover them 
all target the children of rows, i.e., columns */
.grid .row > *{
    border: 2px solid #CCE2C7;
    border-radius: .5rem;
    padding: 5px;
    /* By default we will make the bottom padding 0 for all col types so when wrapping makes col items 
    (cells) into a stacked column (one cell per line) there isn't double padding between the lines. The 
    bottom padding is added back in for a) standard .col columns/cell that aren't used for making into 
    stacked columns, and b) in media queries for the .col-{breakpoint} versions, e.g., when .col-sm used 
    where columns start working at the sm breakpoint the media query for that breakpoint has the rule to 
    add the padding back in for col-sm. */
    padding-bottom: 0;
}

.grid .col{
    padding-bottom: 5px;
}

.grid-border{
    border: 2px solid #CCE2C7;
    border-radius: .5rem;
}

.grid-border .row > *{
    border: none;
}

.row-borders .row, .col-borders .row, .cell-borders .row{
    /* Wrapping is problematic for these alternative border designs so we disable it as noted in 
    comment above. */
    flex-wrap: nowrap;
    gap: 0; /* Also we don't want the gap here  */

    /* For the alternative border styles remove row bottom margin as these designs have cells next to 
    each other with no gap */
    margin-bottom: 0;
}

/* For the alternative border styles remove default borders that surround cells then can add borders 
back in as desired for the alternative border styles. */
.row-borders .row > *, .col-borders .row > *, .cell-borders .row > *{
    border: none;
    border-radius: 0;
}

.row-borders .row{
    border: 2px solid #CCE2C7;
    border-top: none;
}

.row-borders .row:first-of-type {
    border-top: 2px solid #CCE2C7;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.row-borders .row:last-of-type {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.col-borders .row:first-child > *{
    border-top: 2px solid #CCE2C7;
}

.col-borders .row:first-child > *:first-child{
    border-top-left-radius: .5rem;
}

.col-borders .row:first-child > *:last-child{
    border-top-right-radius: .5rem;
}

.col-borders .row:last-child > *{
    border-bottom: 2px solid #CCE2C7;
}

.col-borders .row:last-child > *:first-child{
    border-bottom-left-radius: .5rem;
}

.col-borders .row:last-child > *:last-child{
    border-bottom-right-radius: .5rem;
}

.col-borders .row > *{
    border-left: 2px solid #CCE2C7;
}

.col-borders .row > *:last-child{
    border-right: 2px solid #CCE2C7;
}

.cell-borders .row > *{
    border: 2px solid #CCE2C7;
    border-top: none;
    border-left: none;
}

.cell-borders .row > *:first-child{
    border-left: 2px solid #CCE2C7;
}

.cell-borders .row:first-child > *{
    border-top: 2px solid #CCE2C7;
}

.cell-borders .row:first-child > *:first-child{
    border-top-left-radius: .5rem;
}

.cell-borders .row:first-child > *:last-child{
    border-top-right-radius: .5rem;
}

.cell-borders .row:last-child > *:first-child{
    border-bottom-left-radius: .5rem;
}

.cell-borders .row:last-child > *:last-child{
    border-bottom-right-radius: .5rem;
}

/* Make borders thin and grey overwriting thicker and coloured default grid borders set above. */
.thin-grey-borders .row, .thin-grey-borders .row > *{
    border-color: #C0C0C0!important;
    border-width: 1px!important;
}

/* Remove borders from an item and its decendents, and decendents decendents */
.no-borders, .no-borders > *, .no-borders > * > *{
    border: none!important;
    border-radius: 0!important;
}

/* Remove border from just the element and not it's decendents. */
.no-border{
    border: none!important;
    border-radius: 0!important;
}

form{
    padding: 5px;
    border: 2px solid #CCE2C7;
    border-radius: .5rem;
    max-width: 100%;
    margin: 15px 10px;
}

/* New class added to deal with a row in a form (containing label, input, etc.). There used to be  
similar classes in bootstrap (.form-group and .form-row) but they were removed so this is added here to 
do similar to replace it. */
.form-row{
    margin-bottom: 10px;
}

/* Another added class to handle making items within a row positioned inline (where space allows), it 
can be used with or without .form-row as desired. It is set to push label and input onto separate lines 
on small screens. It's set as column here (mobile first design) to force new line behaviour by default 
and set to row when there is space for it (larger screens) via media queries so label and inputs go side
by side. Input and select sizes are adapted according to size as well via flex-grow:1. */
.form-inline-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
}

.form-inline-row label{
    width: auto;
}

.form-inline-row input, .form-inline-row select{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0%;
    margin: 0;
    margin-top: 5px;
}

.form-label{
    margin: 0;
}

.form-check-input {
    border-color: #000;
}

.form-check-input:checked {
    background-color: #B3D3AB;
    border-color: #4A7B40;
}

.form-check-input:focus {
    border-color: #4A7B40;
    outline: 0;
    box-shadow: 0 0 0 .2px rgba(163, 203, 154, .50);
}

/* Disable the bootstrap default of shadows around inputs when clicked on, we want instead to color them
according to their validity as defined below. */
.form-control:focus{
    border-color: #000;
    outline: 0;
    box-shadow: none;
}

textarea.form-control, .tox-tinymce{
    margin-top: .25rem;
}

textarea.form-control{
    min-height: 100px;
}

textarea.small{
    min-height: 50px;
}

textarea.medium{
    min-height: 150px;
}

textarea.large{
    min-height: 250px;
}

textarea.extra-large{
    min-height: 400px;
}

/* Note new .c-form-help class, it is a new custom class added for forms for elements containing form 
help messages. While it is styled the same as .form-text, but may vary in some cases, it is still 
valuable as a separate class because we can then target specific elements defined as form help messages
differentiating them from form text which we may not want to handle in the same way. */
.c-form-help{
    margin-top: .25rem;
    font-weight: normal;
}

.c-form-help, .form-text{
    display: block;
    width: 100%;
    color: #000;
    font-size: 0.9rem;
}

/* This class is used to override validation colouring where necessary */
.remove-validation-colourings{
    border: 1px solid #ced4da!important;
    background: none!important;
}

/* Style invalid fields when the user moves out of the box (hasn't got focus) and the box isn't empty 
(i.e., the placeholder isn't in use), thus only alerting users to their invalid content entered when 
there has been content entered and they've tried to move on, rather than alerting them whilst they are 
typing their input. Also included is use of the style after the form has been submitted and validated 
as invalid via JavaScript code.*/
form.needs-validation input.form-control:not(:focus):not(:placeholder-shown):invalid,
form.needs-validation input.form-control.is-invalid,
form.needs-validation textarea.form-control:not(:focus):not(:placeholder-shown):invalid,
form.needs-validation textarea.form-control.is-invalid,
form.needs-validation .form-select.is-invalid:not([multiple]):not([size]),
form.needs-validation .form-select.is-invalid:not([multiple])[size="1"],
form.needs-validation .was-validated .form-control:invalid, .form-control.is-invalid,
form.needs-validation .was-validated .form-select:invalid:not([multiple]):not([size]),
form.needs-validation .was-validated .form-select:invalid:not([multiple])[size="1"]
{
    border: 2px solid #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-feedback{
    color: #f00!important;
}

/* Like above but for informing the user of valid content entered */
form.needs-validation input.form-control:not(:placeholder-shown):valid,
form.needs-validation input.form-control.is-valid,
form.needs-validation textarea.form-control:not(:placeholder-shown):valid,
form.needs-validation textarea.form-control.is-valid,
form.needs-validation .form-select:valid,
form.needs-validation .form-select.is-valid:not([multiple]):not([size]),
form.needs-validation .form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-control:valid, .form-control.is-valid,
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"]
{
    border: 2px solid #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-check-input:valid, .form-check-input.is-valid{
    border: 2px solid #198754;
}

.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
    background-color: #5F9C50;
}

/* Remove unnecessary box shadow that Bootstrap adds */
.was-validated .form-control:valid:focus, .form-control.is-valid:focus,
.was-validated .form-select:valid:focus, .form-select.is-valid:focus,
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus,
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus,
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus,
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus
{
    box-shadow: none;
}

#choices-form {
    padding: 0;
    margin: 0 auto;
    margin-top: 15px;
    border: none;
}

#register-form .form-label{
    width: 170px;
}

#update-account-details-form .form-label{
    width: 200px;
}

.guest-mode-warning{
    padding: 5px;
    border: 2px solid #FF1C1C;
    border-radius: .5rem;
    background: #FF8888;
    margin: 10px;
    font-size: 0.9rem;
}

.guest-mode-warning p{
    margin: 0;
}

.guest-mode-warning h2{
    font-size: 1.1rem;
}

/* This overall container is used to ensure the footer is always at the bottom of the viewpoint
(screen/window) or below the content, wherever the bottom is. It has a minimum height of the viewpoint 
height and it'll stretch if the content is longer than this. The footer is set to align to the bottom of
the container so it will therefore always be at the bottom of the screen or content, wherever the bottom is. */
#overall-container {
    position: relative;
    min-height: 100vh;
}

/* Main content (main). The padding at the bottom is to leave room for the page footer. */
main {
    margin: 0.5rem;
    padding-bottom: 55px;
}

/* Page footer. As noted above this fits at the bottom of the overall container ensuring it's always at 
the bottom of the screen or below the content, wherever the bottom is. */
#page-footer {
    position: absolute;
    bottom: 0;
    height: 55px;
    width: 100%;
    border-top: 2px solid #1A96C6;
    padding-top: 5px;
    text-align: center;
}

#page-header, #page-footer{
    background-color: #81D0EF;
}

/* This is the main container in the header of the page. It uses flex to place its items next to each 
other and space them out nicely. It does not allow wrapping as we want items to stay in a line next to 
each other and to be sized according to the space available. There is automatic spacing between items 
horizontally (the justify-content value) and items are centered vertically (i.e., in the middle) if any 
space vertically (set using align-items and align-content). */
#page-header .main-container{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 5px;
    background-color: #81D0EF;
    border-bottom: 2px solid #1A96C6;
}

/* The page title. It expands (flex grow) to take up all remaining available space in the header, 
leaving space for the other header items, giving maximum space for the title. If there isn't enough
space for the title it will wrap the contents (CSS text wrapping defaults). Note, as wrapping splits
strings on/at spaces, when slashes are used to create long strings the string isn't wrapped when there 
is not enough room for it. This is because it doesn't know where to break it to wrap (wrapping breaks at
spaces so long strings without spaces are problematic). E.g. Referencing/Citations/Bibliographies is too
long on small screens and there is no sensible place to split it (no spacing). */
#page-title {
    margin: 0 5px;
    flex-grow: 1;
    text-align: center;
}

/* This is a navigation list of icons in the header. It uses flex to place them in a column with just
enough width for one icon per row/line. */
#page-header .main-container nav ul {
    display: flex;
    flex-direction: column;
    width: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#page-header .main-container nav ul li img {    
    margin-bottom: 5px;
}

#page-header .main-container nav ul li:last-child img {
    margin-bottom: 0;
}

#page-header .main-container nav a:hover {
    text-decoration: none;
}

.menu-toggle{  
    background-image: url('/img/icons/24px/menu.png');    
    text-align: center;
}

.menu-toggle:hover{ cursor: pointer; }

.menu{
    padding: 5px 10px;
}

.menu-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    width: 100%;
    gap: 5px 20px;
    margin: 0;
    list-style: none;
}

#menu-footer{
    padding: 0;
}

#menu-footer .menu-container{
    justify-content: center;
}

.menu-container li { 
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
}

.btn-container {
    text-align: center;
    margin: 15px auto;
}

.btn, .btn:visited {
    background-color: #D6E7D1;
    color: #000000;
    border-color: #4A7B40;
}

.btn:first-child:hover, :not(.btn-check) + .btn:hover, .btn:hover, .btn:focus, .btn:active {
    background-color: #CCE2C7;
    border-color: #4A7B40;
    box-shadow: 0 0 0 2px rgba(74, 123, 64, .50);
}

.btn:hover {
    text-decoration: none;
}

.btn-check:focus + .btn, .btn:focus {
    box-shadow: 0 0 0 2px rgba(163, 203, 154, .50);
}

.btn-light, .btn-light:visited{
    background-color: #E4E4E4;
    color: #000000;
    border-color: #AAAAAA;
}

.btn-light:first-child:hover, :not(.btn-check) + .btn-light:hover, .btn-light:hover,
.btn-light:focus, .btn-light:active {
    background-color: #D2D2D2;
    border-color: #8C8C8C;
    box-shadow: 0 0 0 2px rgba(155, 155, 155, .50);
}

.btn-secondary, .btn-secondary:visited{
    background-color: #1188FF;
    color: #fff;
    border-color: #0054A8;
}

.btn-secondary:first-child:hover, :not(.btn-check) + .btn-secondary:hover, .btn-secondary:hover,
.btn-secondary:focus, .btn-secondary:active {
    background-color: #006CD9;
    border-color: #0062C4;
    box-shadow: 0 0 0 2px rgba(0, 98, 196, .50);
}

.btn-danger, .btn-danger:visited{
    background-color: #dc3545;
    color: #fff;
    border-color: #BC2131;
}

.btn-danger:first-child:hover, :not(.btn-check) + .btn-danger:hover, .btn-danger:hover,
.btn-danger:focus, .btn-danger:active {
    background-color: #CE3141;
    border-color: #b02a37;
    box-shadow: 0 0 0 2px rgba(176, 42, 55, .50);
}

/* Modifying bootstrap accordion component styles */
.accordion-button {
    background-color: var(--bs-primary);
    padding: 10px 5px;
}

.accordion-button:focus {
    box-shadow: 0 0 0 2px rgba(0, 128, 128, .50);
}

/* When item has opened we only want a box shadow on the bottom of the accordion button, and will use 
it to create a line between the item header and body and change its properties to achieve this line. */
.accordion-button:not(.collapsed):focus {
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

/* We keep the accordion button the same color whether the item is open or closed by setting the 
background color here (that refers to the button when item opened) to the same as when the item is 
closed (with text colored to suit it), overwritting the default behaviour which makes the button a 
different color when the item is open. */
.accordion-button:not(.collapsed) {
    background-color: var(--bs-primary);
    color: #000;
}

/* Using alternative images for open/close arrows */
.accordion-button::after {
    background-image: url('/img/icons/24px/expand-arrow.png');
    background-size: 24px 14px;
    width: 24px;
    height: 14px;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('/img/icons/24px/close-arrow.png');
    background-size: 24px 14px;
    width: 24px;
    height: 14px;
    transform: none;
}

.accordion-item {
    background-color: #F7FAF5;
}

.accordion-header {
    font-weight: 500;
}

.accordion-body {
    padding: 0.5rem;
}

/* A new class for an item containing info about the accordion */
.accordion-info {
    
}

#tips-accordion {
    margin-bottom: 10px;
}

#tips-accordion .accordion-button > b:first-child {
    margin-right: 10px;
    white-space: nowrap;
}

#ga-skip-btn-container{
    margin-top: 10px;
    margin-bottom: 0;
}

#opt-reading{
    font-size: 1.35rem;
    text-decoration: underline;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5rem;
}

#further-advice p, #further-advice ul{
    font-size: 0.9rem;
}

/* .custom-accordion defines styles for a custom accordion built from scratch based on bootstrap's
accordion component (rather than using bootstrap studio's accordion component like used elsewhere).
Bootstrap's accordion classes are used for styling and functionality but with many customisations made 
and lots of styles overwritten. The customisations work by targeting accordion classes that exist within
the custom accordion, with the custom accordion identified using the custom-accordion class assigned to
its overall container or if changes only apply to a specific instance of the custom accordion then its
ID (assigned to its overall container) is used instead. New classes added which aren't defined in the
original bootstrap accordion component start with custom- . Classes that just apply to a specific
instance of the custom accordion (rather than all custom accordions) start with the initials of its ID
(e.g., classes specific to the #tools-accordion start with .ta- ). IDs for unique items within a
specific instance of a custom accordion also follow this naming convention, but with a hash for ID 
of course. */
.custom-accordion {
    margin-top: 10px;
    width: 100%;
}

.custom-accordion .accordion-header {
    background-color: var(--bs-primary);
}

/* The border adds a top border to an item's body. This used to be done on the bottom of the accordion button as a box shadow, as by default the button covers the entire item's header row but now the 
button is just one part of the item's header. Therefore we need to move the border to border item then 
it is revealed when expanded providing the necessary border between header and body. */
.custom-accordion .accordion-body{
    border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

/* Stop the button having its own box shadow, instead we'll rely on the shadow of the accordion-header 
instead, inheriting that, to avoid duplicate shadows. Originally, as set with the bootstrap accordion 
component, the accordion button covered a whole item's header row so it had a shadow to cover the whole
row. However, in the custom accordion the button is just treated as one part of in an item's header row,
allowing for other things in the header. Consequently, the shadow is instead applied to the item header
not the button as that's just one part of the item's header row. */
.custom-accordion .accordion-button:not(.collapsed) {
    box-shadow: inherit;
}

.custom-accordion .accordion-button, .custom-accordion .accordion-button:focus {
    border: 0;
}

/* Create a custom button to toggle (show/hide) the item body */
.custom-accordion-toggle-button {
    background-image: url('/img/icons/24px/expand-arrow.png');
    background-size: 24px 14px;
    width: 24px;
    height: 14px;
    content: "";
    background-repeat: no-repeat;
}

.custom-accordion-toggle-button:not(.collapsed) {
    background-image: url('/img/icons/24px/close-arrow.png');
}

/* Remove the automatic addition of the down/up arrow icons from accordion buttons within custom 
accordions as we make these icons a separate item/button within item's header instead within 
custom accordions. */
.custom-accordion .accordion-button::after, .custom-accordion-toggle-button::after {
    background-image: none;
    width: 0;
    height: 0;
}

.custom-accordion .accordion-button:not(.collapsed)::after, .custom-accordion-toggle-button:not(.collapsed)::after {
    background-image: none;
    width: 0;
    height: 0;
    transform: none;
}

/* Turn off radius when it isn't needed or desired */
.custom-accordion .accordion-item:first-of-type,
.custom-accordion .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.custom-accordion .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0;
}

/* Custom accordion headers */
.custom-accordion-head, .custom-accordion .accordion-header,
.custom-accordion .accordion-header .accordion-button {
    font-size: 0.9rem;
}

.custom-accordion-head {
    border: 1px solid rgba(0,0,0,.125);
    border-bottom: none;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    background-color: #F7FAF5;
    font-weight: 600;
}

/* tools accordion headers */
#tools-accordion .custom-accordion-head, #tools-accordion .accordion-header {
    display: flex;
    flex-wrap: nowrap;
    text-align: center;
}

#tools-accordion .grid{
    margin: 0;
}

#tools-accordion .grid .row > *{
    padding: 0;
}

/* Center contents */
#tools-accordion .custom-accordion-head div {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 2px 0;
}

/* With a mobile first design, adjusting content to fit on small screens, the ratings in headings (the 
column's name in the accordion's overall heading and the ratings themselves in accordion items' headings
(see separate rule for the latter below)) are hidden (set to not be displayed) and ratings are instead
displayed in the items content (body). This is because on extra small screens there isn't room for them
in headings. For screens where they fit the ratings in the headings are revealed via media queries 
written below, and the ratings in the items' content (body) are removed - its wise only to show ratings 
once per item (see note with the media query below for why). */
#tools-accordion .custom-accordion-head div#ta-head-comm-rat,
#tools-accordion .custom-accordion-head div#ta-head-user-rat {
    display: none;
}

/* tools accordion labels/heading cells */
#ta-head-title, .ta-item-head-title {
    flex-wrap: wrap;
    flex-grow: 1;
}

#ta-head-title {
    border-top-left-radius: calc(.25rem - 1px);
}

.ta-item-head-title {
    font-weight: 600;
}

#ta-head-comm-rat, .ta-item-head-comm-rat,
#ta-head-user-rat, .ta-item-head-user-rat,
#ta-head-controls, .ta-item-head-controls {
    border-left: 1px solid rgba(0,0,0,.125);
    flex-shrink: 0;
}

#ta-head-comm-rat, .ta-item-head-comm-rat, #ta-head-user-rat, .ta-item-head-user-rat {
    width: 105px;
}

#ta-head-controls, .ta-item-head-controls {
    width: 92px;
}

#ta-head-controls {
    border-top-right-radius: calc(.25rem - 1px);
}

.ta-item-head-controls {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}

/* Hide (initially) ratings in item headings - as noted in comment above, we want to initially hide 
ratings that appear in headings for a mobile first design. */
.accordion-header > .ta-item-head-comm-rat, .accordion-header > .ta-item-head-user-rat {
    display: none;
}

.ta-item-head-comm-rat img, .ta-item-head-user-rat img {
    width: 15px;
}

.ta-item-head-comm-rat img:not(.greyed-out):hover, .ta-item-head-user-rat img:not(.greyed-out):hover{
    cursor: pointer;
}

.ta-item-head-comm-rat img:not(:last-of-type), .ta-item-head-user-rat img:not(:last-of-type) {
    margin-right: 5px;
}

.ta-item-head-controls img {
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

img.add-bookmark:hover{
    cursor: pointer;
}

#tools-accordion .ta-item-body-ratings {
    width: 300px;
    margin: 10px auto;
}
#tools-accordion .ta-item-body-ratings .row{
    flex-direction: row;
}

#tools-accordion .ta-item-body-ratings .row > * {
    padding: 5px;
}

/* Labelling cell - the first column in a row */
.ta-item-body-ratings .row > *:first-child {
    font-weight: 600;
    justify-content: flex-start;
}

.ta-item-body-ratings .row > *:last-child{
    width: 105px;
    flex-basis: 105px;
}

.save-and-rate-reminder{    
    background-color: #FFFFB7;
    border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
    padding: 5px;
}

.tool-screenshot-container, .tool-screenshot-bottom-container{    
    border: 1px solid #000;
    padding: 2px;
    width: auto;
    position: relative;    
    background: #fff;    
}

.tool-screenshot-container{    
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;      
    display: none;
}

.tool-screenshot-bottom-container{
    margin: 0 auto;
    margin-bottom: 10px;          
}

.tool-screenshot{
    max-width: 100%;
}

.tool-screenshot-modal-opener{
    background-image: url('/img/icons/24px/zoom-in.png');
    background-color: #fff;
    border: 1px solid #000;
    background-repeat: no-repeat;
    background-size: 24px;
    vertical-align: middle;
    min-height: 24px;
    width: 24px;
    min-width: 24px;
    position: absolute;
    top: -1px;
    right: -1px;
}

.go-to-tool-link{
    background-image: url('/img/icons/24px/go-to-tool.png');
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: left center;
    vertical-align: middle;
    min-height: 24px;
    padding-left: 29px;
    display: inline-block;
    margin-top: 10px;
}

#next-page-note {
    text-align: center;
}

.progressbar-container {
    margin: 10px;
}

.progressbar {
    margin: 0 auto;
    width: 300px;
    padding: 0;
}

#key, #preferred-mediums-form {
    margin: 10px auto;
    padding: 5px;
    border: 2px solid #CCE2C7;
    border-radius: .5rem;
}

/* Note the width is initially set to fit on small screens, it is changed for larger screens via a
media query below. */
#key {
    width: 335px;
}

/* The form for specifying preferred learning mediums. It is initally set to the page width but can only
expand to a maximum size as anything beyond that looks odd. */
#preferred-mediums-form {
    width: 100%;
    max-width: 695px;
    margin: 0 auto;
    margin-bottom: 0.5rem;
}

#preferredMediumsError{
    display: none;
    color: #f00;
}

#key h2, #preferred-mediums-form h2, #contact-message h2 {
    line-height: 1;
}

/* These items are set to wrap and are initially set to flex wrap into a column, so they fit nicely on
smaller screens, which is turned back into displaying as rows on larger screens where there is space to
do so via media queries (for #preferred-mediums-container, #preferred-mediums-row this happens at small
size, for #keys-container it happens at medium size). Here items are aligned to the left horizontally 
(the align properties), and to the center (middle) vertically (via justify-content). Remember in column
mode the axis are opposite so need to use opposite properties to usual. The alignment is flipped around
when it is returned to row mode to match the regular axis used then. */
#keys-container, #preferred-mediums-container, #preferred-mediums-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    margin: 0;
    width: 100%;
}

#keys-container, #preferred-mediums-container {
    font-size: 0.9rem;
    gap: 10px 15px;
}

#preferred-mediums-container {
    gap: 5px 15px;
}

#preferred-mediums-row .btn {
    padding: 5px;
    margin: 0 auto;
}

/* The key items use flex to place the icon and text side by side, with no wrapping allowed so that they
are forced to always be on the same line. */
#keys-container li {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
}

#keys-container img {    
    padding-right: 5px;
}

#key-notes{
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

#contact-message{
    width: 100%;
    max-width: 622px;
    margin: 10px auto;
    padding: 5px;
    padding-bottom: 0;
    font-size: 0.9rem;
}

/* AJAX overlay, thanks https://www.tutorialrepublic.com/faq/how-to-show-loading-spinner-in-jquery.php */
.ajax-overlay{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(255,255,255,0.8) url("/img/loader.gif") center no-repeat;
}
/* Turn off scrollbar when body element has the loading class */
body.ajax-loading{
    overflow: hidden;
}
/* Make spinner image visible when body element has the loading class */
body.ajax-loading .ajax-overlay{
    display: block;
}

/* X-Small devices (portrait phones, less than 576px). 
No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    /* Show columns that were hidden on smaller screens and set flex properties where required 
    (i.e., where they weren't set above or need adjusting) */
    #tools-accordion .custom-accordion-head div#ta-head-comm-rat,
    #tools-accordion .custom-accordion-head div#ta-head-user-rat {
        display: flex;
    }

    .accordion-header > .ta-item-head-comm-rat, .accordion-header > .ta-item-head-user-rat {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-content: center;
        align-items: center;
        padding: 0;
    }

    /* Hide the ratings placed in items' body as this was only relevant/required when the screen was too
    small for displaying the ratings in items' heading. As larger screens include the ratings in items' 
    heading as there is space for it then, and having it in two places could be confusing and would 
    require the boxes to be synced as when you rated it in one place it would need to be automatically 
    updated in the other, its best to hide this alternative location for ratings when it isn't needed. */
    .ta-item-body-ratings {
        display: none;
    }

    #preferred-mediums-container, #preferred-mediums-row {
        flex-direction: row;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
    }

    /* When in the row flex wrapping setup we don't want this item to wrap as its contents should go 
    side by side */
    #preferred-mediums-row {
        flex-wrap: nowrap;
    }

    /* Make the container take up all available space, leaving just enough room for the button on the 
    line */
    #preferred-mediums-container {
        flex-grow: 1;
    }

    .form-inline-row {
        flex-direction: row;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
    }

    #choices-form{
        width: 750px; /* Stop the form items getting too big (we don't, for instance, massive 
                      input/select items if page is v wide) */
    }

    .form-inline-row label{
        width: 130px;
    }

    #choices-form .form-inline-row label{
        width: 180px;
    }
    
    .form-inline-row .form-control, .form-inline-row .form-select{
        margin-left: 0.5rem;
        margin-top: 0;
    }

    .grid .col-sm{
        padding-bottom: 5px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {   
    .tool-screenshot-container{ display: block; }
    .tool-screenshot-bottom-container{ display: none; }
    
    a#site-title {
        display: flex!important;
    }

    /* Larger padding on larger screens where there is space for it */
    #login-form, #register-form, #update-account-details-form{
        width: 622px;
        margin: 15px auto;
    }

    #page-header .main-container {
        padding: 5px 10px;
    }

    /* Stop key getting too big */
    #key {
        width: 622px;
    }       

    #preferred-mediums-row .btn {
        margin: 0;
        width: 95px;
    }

    #keys-container {
        flex-direction: row;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
    }

    .grid .col-md{
        padding-bottom: 5px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* Allow key to be bigger but stop key getting too big */
    #key {
        width: 910px;
    }

    .grid .col-lg{
        padding-bottom: 5px;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .grid .col-xl{
        padding-bottom: 5px;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .grid .col-xxl{
        padding-bottom: 5px;
    }
}