:root {
    --colour-navy: navy;
    --colour-dark2: #6A6D7B;
    --colour-dark1: #8EA3B9;
    --colour-dark0: #C0BFA3;
    --colour-light1: #E4E4E4;
    --colour-light2: #F2F2F2;
    --colour-white: white;
    --colour-whitesmoke: whitesmoke;
    --colour-grey: #7A7B7A;
    --colour-lightgrey: gainsboro; /*ghostwhite; #B7B3A8;*/
    --colour-accent: #6A6D7B;
}

* {
	box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
/*    font-family: 'PT Sans', sans-serif;*/
}

*:focus {
    outline: none;
    /*font-family: 'Roboto Light', sans-serif !important;*/
}

html, body {
    width: 100%;
    margin: 0 auto;
    font-size: 18px;
    background-color: var(--colour-whitesmoke) !important;
    height: unset;
    overflow-x: auto;
}

.u {
    text-decoration: underline;
}
.b {
    font-weight: bold;
}
.i {
    font-style: italic;
}

.hidden {
	visibility: hidden;
}
.collapsed {
    visibility: collapse;
    display: none !important;
}

.flex {
    display: flex !important;
}

.red {
    color: red;
}
.yellow {
    color: yellow;
}
.green {
    color: green;
}

.red-background {
    background-color: red !important;
}
.yellow-background {
    background-color: yellow !important;
}
.green-background {
    background-color: green !important;
}


a {
    text-decoration: unset;
}

a:hover {
    cursor: pointer;
}

.button {
    font-family: 'Roboto', sans-serif !important;
}
.button.light2 {
    color: var(--colour-dark1);
    background-color: var(--colour-light2);
}
.button.light1 {
    color: var(--colour-whitesmoke);
    background-color: var(--colour-light1);
}
.button.dark1 {
    color: var(--colour-whitesmoke);
    background-color: var(--colour-dark1);
}
.button.dark2 {
    color: var(--colour-whitesmoke);
    background-color: var(--colour-dark2);
}

button:hover {
    cursor: pointer;
}
.cursor-pointer:hover {
	cursor: pointer;
}

div.div-spacer {
    flex: 1 1 auto;
}

.animated-underline::after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    content: "";
    height: 0;
}
.animated-underline:not(.active):hover::after {
    background-color: var(--colour-dark1);
    height: 1px;
    animation: underlined 0.3s;
}
.animated-underline.active:hover::after {
    background-color: var(--colour-dark1);
    height: 1px;
    animation: underlined 0.3s;
}
@keyframes underlined {
    from {width: 0;}
    to {width: 100%;}
}