/*@import url(https://fonts.bunny.net/css?family=barlow:300,300i,500,800);*/

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

* {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    border-spacing: 0;
    font-weight: normal;
    line-height: 1.4rem;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
}

:root {
    --backgroundColor: #f8f6f5;
    --borderColor: #e6e6e6;
    --textColor: #333333;
    --sansSerif: "Open Sans", sans-serif;
    --serif: "Georgia", serif;
    --white: #ffffff;

    --lightOrange: #fcf5ed;
    --orange: #f98a07;
    --darkOrange: #ff4d00;
    --darkGreyColor: #979797;

    --errorBackgroundColor: rgba(193, 6, 6, 0.1);
    --errorColor: rgba(193, 6, 6, 1);
    --infoBackgroundColor: rgba(242, 254, 237, 1);
    --infoColor: rgba(103, 153, 80, 1);

    --buttonDisabledColor: #fcf5ed;

    --toggle-indicator-size: 1.8rem;
    --track-background: rgba(245, 245, 245, 0.3);
    --track-border: rgba(154, 154, 154);
    --track-height: 2.1rem;
    --track-radius: 0.5rem;
    --track-width: 4rem;
    --primaryColor: #7a936b;
}
/* Add your custom styles here */

html {
    font-family: var(--sansSerif);
    background-color: var(--backgroundColor);
}

h1 {
    font-size: 2rem;
    line-height: 2.5rem;
    color: var(--textColor);
    margin-bottom: 1rem;
}

p,
ul,
ol {
    padding-bottom: 0.75rem;
}

img.icon {
    height: 1rem;
    padding-top: 0.4rem;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.row {
    display: flex;
}
form .chapter section div.row.multiple,
/*form .chapter section div.row.multiple div.text,*/
.row.multiple {
    flex: 0;
}

header {
    background-color: var(--backgroundColor);
}

header .logo {
    width: 225px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: var(--lightOrange);
}
header .logo a {
    background-image: url("/images/frrr-logo.png");
    background-size: 150px;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    height: 80px;
}
header img {
    display: none;
}

/* Navigation styles */
nav {
    width: 225px;
    background-color: var(--lightOrange);
    border-right: 1px solid var(--backgroundColor);
    min-height: 100vh;
    position: fixed;
    top: 5rem;
    left: 0;
    z-index: 10;
}
nav > div {
    float: right;
    margin-top: 1rem;
    margin-right: 0.5rem;
}
nav > ul {
    /* padding-top: 95px; */
    display: flex;
    flex-direction: column;
    /* padding-left: 2rem; */
}
nav > ul li {
    z-index: 100;
    background-color: var(--lightOrange);
}
nav > ul li a {
    display: flex;
    padding-left: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    cursor: pointer;
    align-items: center;
    justify-content: flex-start;
}
nav > ul li.selected a {
    background-color: var(--orange);
    color: #fff;
}
nav > ul li span {
    color: var(--textColor);
    font-size: 1rem;
    padding-top: 0.1rem; /* to handle appearance of droppers */
}
nav > ul li.selected span {
    color: #fff;
}
nav > ul li.selected span.version {
    color: var(--textColor);
    font-size: 0.8rem;
    padding: 0.3rem 0.3rem 0 0.3rem;
    display: block;
}
nav > ul li.selected a.update {
    margin: 0.3rem 0;
    text-align: center;
}
nav > ul li.selected a.update::before {
    content: none;
}
nav > ul ul {
    background-color: transparent;
    margin-top: 0rem;
    margin-bottom: 0.5rem;
}
nav > ul ul li {
    display: flex;
    padding-left: 1rem;
    padding-top: 0.5rem;
    cursor: pointer;
    align-items: center;
    font-size: 0.9rem;
}
nav > ul ul li label input {
    visibility: hidden; /* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    overflow: hidden;
}
nav > ul ul li label span {
    /* <-- Style the artificial checkbox */
    height: 10px;
    width: 10px;
    border: none;
    border-radius: 0.2rem;
    display: inline-block;
    padding: 0;
    margin-right: 0.5rem;
    background-color: transparent;
}
[type="checkbox"]:checked + span,
[type="radio"]:checked + span {
    /* <-- Style its checked state */
    background: var(--orange);
}
label:has(input[type="checkbox"]:checked),
label:has(input[type="radio"]:checked) {
    font-weight: 600;
}
nav > select {
    display: none;
}
nav > ul li a::before {
    content: "";
    height: 1.5rem;
    width: 1.5rem;
    margin-right: 0.4rem;
    padding-top: 0.2rem;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
nav > ul li.accounts a::before {
    background-image: url("/images/icons/icon-accounts.png");
}
nav > ul li.accounts.selected a::before {
    background-image: url("/images/icons/icon-accounts-selected.png");
}
nav > ul li.businesses a::before {
    background-image: url("/images/icons/icon-business.png");
}
nav > ul li.businesses.selected a::before {
    background-image: url("/images/icons/icon-business-selected.png");
}
nav > ul li.branches a::before {
    background-image: url("/images/icons/icon-branches.png");
}
nav > ul li.branches.selected a::before {
    background-image: url("/images/icons/icon-branches-selected.png");
}
nav > ul li.enquiries a::before {
    background-image: url("/images/icons/icon-enquiries.png");
}
nav > ul li.enquiries.selected a::before {
    background-image: url("/images/icons/icon-enquiries-selected.png");
}
nav > ul li.jobs a::before {
    background-image: url("/images/icons/icon-jobs.png");
}
nav > ul li.jobs.selected a::before {
    background-image: url("/images/icons/icon-jobs-selected.png");
}
nav > ul li.renewals a::before {
    background-image: url("/images/icons/icon-renewals.png");
}
nav > ul li.renewals.selected a::before {
    background-image: url("/images/icons/icon-renewals-selected.png");
}
nav > ul li.help a::before {
    background-image: url("/images/icons/icon-help.png");
}
nav > ul li.help.selected a::before {
    background-image: url("/images/icons/icon-help-selected.png");
}

nav > ul li.complete label {
    background-image: url("/images/tickbul.png");
    background-repeat: no-repeat;
    position: relative;
    background-position: left -1px center;
    background-size: 1rem;
}
nav > ul li.complete span,
nav > ul li.complete [type="checkbox"]:checked + span,
nav > ul li.complete [type="radio"]:checked + span {
    color: transparent;
    border: none;
    background-color: transparent;
}

.mobile-nav-container {
    display: block !important;
    position: fixed !important;
    top: 1rem;
    right: 1rem;
    /*width: 100vw;*/
    /*height: 3rem;*/
    z-index: 600;
    background-color: white;
    margin: 0;
}

div.drilldown {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    margin-left: 0rem;
    margin-bottom: 0.5rem;
    position: fixed;
    top: 0rem;
    background-color: var(--white);
    flex: 1;
    display: flex;
    padding-right: 1rem;
    width: 100%;
    max-width: 50rem;
    border-bottom: 1px solid var(--borderColor);
    z-index: 500;
}
div.drilldown a {
    color: var(--textColor);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.2s ease;
}
div.drilldown a::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid currentColor;
    margin-right: 0.5rem;
    /*transition: transform 0.2s ease;*/
}

main {
    padding: 1rem;
    margin-left: 225px;
    background-color: var(--white);
    min-height: 100vh;
    max-width: 52rem;
    padding-top: 5.2rem;
    box-sizing: border-box;
}
main.table {
    max-width: inherit;
    position: relative;
}
main.table .drilldown {
    max-width: inherit;
}
/*main.login {
    padding-top: 2rem;
}*/

main form {
    padding-left: 0.2rem; /* To handle weird artifacts under drilldown */
}

/*main > h1, main > form > h1,
	main > .drilldown, .searchbar {
	    padding: 0 1rem;
	}*/

/* Button styles */
a.button,
span.button,
button {
    font-size: 1rem;
    background-color: var(--backgroundColor);
    padding: 0 1rem;
    height: 2.1rem;
    cursor: pointer;
    text-decoration: none;
    text-underline-offset: 0;
    align-content: center;
    color: var(--textColor);
    box-sizing: content-box;
    flex-shrink: 0;
    font-family: var(--sansSerif);
    display: inline-block;
}
button.primary,
a.button.primary {
    background-color: var(--orange);
    color: var(--white);
}
a.button.add,
button.add {
    padding-left: 2rem;
    background-image: url(/images/tick-rectangle.png);
    background-repeat: no-repeat;
    background-position: 0.6rem 0.6rem;
}
button.delete {
    /*padding-left: 2rem;
    background-image: url(/images/icons/icon-delete.png);
    background-repeat: no-repeat;
    background-position: 0.6rem 0.6rem;*/
    background-color: var(--errorBackgroundColor);
    color: var(--errorColor);
}
span.button.current {
    background-color: var(--lightOrange);
}
.buttons {
    margin-top: 2rem;
    gap: 0.4rem;
}
.buttons.right {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
.buttons.multiple {
    padding-bottom: 0;
    margin-top: 0;
}
.buttons.bottom {
    border-top: 1px solid var(--borderColor);
    padding-top: 1rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}
.buttons.reverse {
    flex-direction: row-reverse;
    justify-content: flex-end;
    display: flex;
}
.pagination {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.pagination-info {
    font-size: 0.9rem;
}
.pagination-controls {
    gap: 0.4rem;
    display: flex;
    align-self: flex-end;
}
.pagination-controls .button {
    padding: 0 0.5rem;
    font-size: 0.9rem;
}

input[type="text"],
select {
    height: 2.1rem;
    border: 1px solid var(--borderColor);
    padding: 0.4rem 0.5rem;
    box-sizing: border-box;
    font-size: 1rem;
    webkit-appearance: none;
    appearance: none;
    flex: 0;
    max-width: 20rem;
}
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="signature"] {
    height: 2.1rem;
    max-width: 20rem;
    padding: 0.4rem 0.5rem;
    box-sizing: border-box;
}
form div input[type="text"] {
    flex: 1;
}
form .chapter input[type="text"] {
    max-width: 30rem;
}
input[type="date"]:placeholder-shown,
input[type="date"].deselected {
    opacity: 0.4;
}
form[method="post"] section div.select,
div.select,
div.satisfactory {
    position: relative;
    border: 1px solid var(--borderColor);
    border-radius: 0.25em;
    padding: 0em 0.5em;
    height: 2.1rem;
    cursor: pointer;
    line-height: 1.2;
    background-color: #fff;
    /*background-image: linear-gradient(to top, #f9f9f9, #fff 33%);*/
    flex-direction: row !important;
    font-weight: 500;
    flex-grow: 0;
}
.satisfactory::after,
.select::after {
    content: " ";
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
    background-color: var(--borderColor);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    position: absolute;
    top: 0.8rem;
    right: 0.5rem;
    z-index: 2;
}
div.satisfactory {
    flex: 0 !important;
    border-color: var(--darkGreyColor);
}
div.satisfactory select {
    font-weight: 500;
}
select {
    appearance: none;
    background-color: transparent;
    padding: 0 1.2rem 0 0;
    border: none;
    margin: 0;
    z-index: 1;
    outline: none;
    position: relative;
}

h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    font-weight: 500;
}

section.admin {
    background-color: var(--backgroundColor);
    padding-top: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 0.75rem;
    margin-top: 1rem;
}

div.info,
p.info {
    color: var(--infoColor);
    margin-top: 0.3em;
    margin-bottom: 0rem;
    padding: 0.4rem 1rem;
    background-color: var(--infoBackgroundColor);
    border-radius: 0.3rem;
    display: block;
}
p.info {
    font-size: 0.9rem;
    font-weight: 400 !important;
}
div.error {
    color: var(--errorColor);
    margin-top: 0.3em;
    margin-bottom: 1rem;
    padding: 0.4rem 1rem;
    background-color: var(--errorBackgroundColor);
    border-radius: 0.3rem;
    display: block;
}

/* Observation */

form section div.observation {
    flex-direction: row;
    flex: 1;
    align-items: stretch;
    margin-bottom: 1rem;
}
form section div.observation > div {
    flex-direction: column;
    flex: 1;
    align-items: stretch;
}
form div div.toolbar {
    width: inherit;
    justify-content: space-between;
    flex: 1;
    align-items: flex-end;
    align-self: stretch;
}
form div div.toolbar span {
    color: var(--darkGreyColor);
    font-size: 0.9rem;
    align-self: flex-end;
}
form div div.toolbar div.buttons {
    padding: 0;
    margin: 0;
}
form div.observation label {
    width: inherit;
    font-size: 1rem;
    font-weight: bold;
}
form div.observation label::after {
    content: none !important;
}
form div span.number {
    margin-right: 0.3rem;
    margin-top: 0.28rem;
    font-size: 0.9rem;
    font-weight: 700;
    width: 2rem;
}
form section div.observation > div.satisfactory {
    width: 5rem;
    flex: 0;
    margin-top: 0.3rem;
    margin-left: 0.75rem;
}
form div.satisfactory label {
    display: none;
}
form section div.options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
form .chapter section div.options {
    align-items: flex-start;
}
form .chapter section div.options .option {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    padding: 0.5rem;
    background-color: var(--backgroundColor);
    align-items: center;
    flex: 0;
}
form section div.options .option span {
    flex: 1;
    font-weight: 200;
}
form section div.options .option button {
    background-color: var(--orange);
    flex: 0;
    flex-shrink: 0;
    color: var(--white);
}
form div.options .option:has(button:disabled) {
    display: none;
}

form section div.questions {
    flex-direction: column;
    align-items: inherit;
    gap: 0.4rem;
}

form section div.questions.multiple {
    border-top: 1px solid var(--borderColor);
    margin-top: 1rem;
    padding-top: 1.35rem;
    margin-bottom: 1rem;
}

form section div.questions.multiple.delete {
    background-color: var(--backgroundColor);
}

/* These are the inline multiple questions */
form section div.questions.multiple.row {
    border: none;
    margin: 0;
    padding: inherit;
    flex-direction: row;
}

div.questions.multiple::before,
section.multiple::before {
    content: url(/images/tick-rectangle.png);
    width: 1rem;
    height: 1rem;
    display: block;
    margin-top: -2rem;
    padding-bottom: 1.5rem;
}

form section div.questions.multiple.row::before {
    content: none;
    margin: inherit;
    padding: inherit;
}

form section div.questions.multiple button.delete {
    align-self: flex-end !important;
    position: absolute;
}
form section div.questions.row.multiple button.delete {
    align-self: flex-start !important;
}
form section div.questions.multiple dialog button.delete,
form section div.questions.multiple.row button.delete {
    position: inherit;
}
form div div.toolbar {
    align-items: flex-start;
}

/* Textareas */

.grow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
    align-items: inherit;
    flex: 1;
    align-self: stretch;
    font-weight: 400;
}
.grow-wrap::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
}
.grow-wrap > textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;
    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
    flex: 0;
}
.grow-wrap > textarea,
.grow-wrap::after {
    /* Identical styling required!! */
    border: 1px solid var(--borderColor);
    padding: 0.5rem;
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
}

/* Forms */
form section {
    gap: 0.6rem;
    display: flex;
    flex-direction: column;
    max-width: 50rem;
}
form > section,
.page > section {
    margin-bottom: 1rem;
}
form section.no-flex {
    display: block;
}
main.table form section {
    max-width: inherit;
}

form section a {
    display: none;
}

form section div {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

form div label {
    width: 7rem;
    padding-top: 0.3rem;
    flex-shrink: 0;
    font-weight: 200;
    font-size: 0.9rem;
}
form .passwordreset div label,
form .page div label {
    width: 10rem;
}

.page li {
    margin-left: 1rem;
    list-style: disc;
    font-weight: 200;
    font-size: 0.9rem;
}

form p {
    font-weight: 200;
    font-size: 0.9rem;
}
form div.column label {
    width: inherit;
}
form div label:not(.empty)::after {
    content: ":";
}
.row label.empty {
    width: inherit;
}
form div.checkbox label::after {
    content: none;
}

form section div.row,
form section div.column,
form section div.row div,
form section div.column div {
    flex: 0;
}

form .chapter section div.row,
form .chapter section div.column,
form .chapter section div.column div {
    flex: 1;
}

form .chapter section div.signature div.column,
form .chapter section div.signature div.column div,
form .chapter section div.signature div.column div select {
    flex: 0;
}

form div input,
form div textarea {
    flex: 1;
    border: 1px solid var(--borderColor);
    padding: 0.3rem;
    align-self: center;
    font-size: 1rem;
}
form div input:disabled,
form div textarea:disabled {
    /*border: none;
    padding-left: 0;*/
}
form div input.required:disabled,
form div textarea.required:disabled,
form div.required textarea:disabled {
    padding-left: 0.5rem;
}
form div textarea {
    align-self: stretch;
}

form div input[type="checkbox"],
form div input[type="radio"] {
    flex: 0;
    width: 1rem;
    height: 1.8rem;
    border-radius: 0;
}

form section div.row div.text,
form section div.column div.text,
form div.text,
form section div div.details {
    flex: 1;
}

div.date {
    display: flex;
    flex-direction: row !important;
    gap: 0.3rem;
}
form section div.date {
    gap: 0;
}

form section div div.details {
    padding: 0.4rem 0;
}
form section div div.details p {
    font-size: 0.9rem;
    gap: 0.4rem;
    padding-bottom: 0;
}
form section div div.details p .button {
    font-size: 0.9rem;
}
form div.text p {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 1rem;
}

/*form input[type="tel"],*/
form div input.money,
form div input.date,
form div input.short,
form div input.textshort {
    height: 2.1rem;
    box-sizing: border-box;
    max-width: 150px;
}
form div input.integer,
form div input.number {
    max-width: 50px;
}
form div input[type="file"] {
    max-width: 250px;
}

div.row,
form section div.row,
form section div.questions.row {
    gap: 0.4rem;
}

/*div:not(.satisfactory):has(> .required)::after {
    display: inline-block;
    content: "*";
    color: var(--errorColor);
    padding: 0.2rem;
    border-radius: 0.2rem;
    margin-right: 0.2rem;
}*/
.required {
    border-left: 1px solid var(--orange) !important;
}
.satisfactory .required {
    border: none !important;
}

/* Account login pages etc */

.form-group {
    margin-bottom: 0.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-group .button {
    margin-top: 1rem;
}
.form-group input::placeholder {
    color: #999;
}

a.button:disabled,
input.button:disabled,
button:disabled,
a.button.disabled,
input.button.disabled,
button.disabled {
    color: var(--darkGreyColor);
    background-color: var(--backgroundColor);
}
a.button.primary.disabled,
a.button.primary:disabled,
input.button.primary.disabled,
input.button.primary:disabled,
button.primary.disabled,
button.primary:disabled {
    background-color: var(--buttonDisabledColor);
}

/* Grid Table */
form div.attribute-container,
form div.attribute {
    max-width: inherit;
}
form .searchbar div {
    flex: 0;
}
.searchbar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0rem;
}
.searchbar .button-container {
    display: flex;
    justify-content: flex-start;
}
.searchbar .filters {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
}
.searchbar .filters .row {
    gap: 0.4rem;
    justify-content: flex-end;
}

.collection-container {
    display: grid;
    grid-template-columns: 1fr;
    background-color: var(--backgroundColor);
    gap: 0.4rem;
    padding: 0.4rem;
    font-size: 0.9rem;
    margin: 0.5rem 0rem;
}
.attribute-container {
    display: grid;
    align-content: flex-start;
    align-items: flex-start;
    grid-template-columns: repeat(
        auto-fit,
        minmax(var(--column-width-min), 1fr)
    );
    padding: 0 0.4rem 0.4rem;
}
.attribute-container.status {
    align-content: flex-end;
}

.attribute-container:first-child {
    padding-top: 0.4rem;
    padding-bottom: 0;
}

.item-container {
    display: grid;
    grid-template-columns: 10fr 8fr;
    gap: 0.5rem 0.5rem;
    background-color: #ffffff;
}
.item-container:first-child {
    background-color: transparent;
    display: none;
}

.attribute {
    display: flex;
}
.attribute.name {
    font-weight: 600;
}
.attribute:before {
    content: attr(data-name) ": ";
    margin-right: 0.4rem;
    font-weight: 200;
    min-width: 4rem;
    display: inline-block;
    opacity: 0.6;
}

.attribute.button {
    justify-self: flex-end;
    margin-top: 1rem;
    padding-bottom: 0;
}
.attribute.button:before {
    content: none;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background-color: var(--lightColor);
    margin-top: 1rem;
}

table th,
table td {
    padding: 0.75rem;
    text-align: left;
    /* border-bottom: 1px solid var(--borderColor); */
    vertical-align: top;
    font-size: 0.9rem;
}

table th {
    background-color: var(--greyColor);
    font-weight: 700;
    color: var(--textColor);
    border-bottom: 2px solid var(--borderColor);
}

table caption {
    padding: 0.5rem;
    font-weight: 700;
    text-align: left;
    color: var(--textColor);
}

/* Question templates are always hidden */
.template {
    display: none !important;
}

/* Dialog */
dialog {
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-color: var(--white);
    padding: 1rem 2rem;
    box-shadow: 2px 2px 5px var(--borderColor);
    border: 1px solid var(--borderColor);
    z-index: 101;
}

/* Offline warning */

.offline-warning {
    display: none;
    background-color: #fff3cd;
    color: #856404;
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ffeeba;
    border-radius: 4px;
}

.offline-warning.show {
    display: block;
}

/* Unsaved changes indicator */
.unsaved-indicator {
    color: var(--errorColor);
    font-weight: 500;
    margin-left: 1rem;
    font-size: 0.9rem;
}

.unsaved-indicator.hidden {
    display: none;
}

.hidden {
    display: none !important;
}

/* Photos */

.photogrid {
    display: flex;
    flex-wrap: wrap;
    max-width: inherit;
    align-items: inherit;
    gap: 0.5rem;
    border: 1px solid var(--greyColor);
    border-radius: 0.5rem;
    padding: 0.5rem;
    flex-direction: row !important;
    flex: 0;
    margin-top: 1rem;
    margin-bottom: 0rem;
    align-items: flex-start;
}
.photogrid.disabled {
    border: none;
}
.photogrid.signature {
    gap: 0;
    border-radius: none;
    padding: 0;
    margin: 0 !important;
    align-items: inherit;
}
.photogrid img {
    width: 100%;
    height: auto;
}
.photogrid.signature img {
    width: 6rem;
    height: auto;
}
.photogrid div {
    padding: 0;
    min-width: 10rem;
    flex-direction: row !important;
}
figcaption[contenteditable]:empty:before {
    content: attr(placeholder);
    opacity: 0.5;
}

figure {
    max-width: 150px;
}

.photogrid figure {
    border: 1px solid var(--borderColor);
    padding: 0.2rem;
    position: relative;
    padding-bottom: 2.5rem;
}
.photogrid.signature figure {
    height: 2.1rem;
    overflow: visible;
    box-sizing: border-box;
    padding: 0;
    max-width: inherit;
    display: flex;
    flex-direction: row-reverse;
}

.photogrid figcaption {
    font-size: 0.9rem;
    padding: 0.2rem;
}
.photogrid.signature figcaption {
    display: none;
}

.photogrid button.delete {
    position: absolute;
    bottom: 0.3rem;
    right: 0.3rem;
    font-size: 0.8rem;
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    height: inherit;
}

.photogrid.signature button.delete {
    height: 1.5rem;
    padding: 0.2rem;
    bottom: unset;
    right: unset;
    position: relative;
    display: none;
}

.photogrid.signature button.delete img {
    width: 1.5rem;
}

/* Toggle control */

.toggle__input {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.toggle-track {
    background: var(--borderColor);
    border: 1px solid var(--borderColor);
    border-radius: var(--toggle-indicator-size);
    cursor: pointer;
    display: flex;
    height: var(--track-height);
    margin: 0;
    position: relative;
    width: var(--track-width);
    min-width: 4rem;
}
.toggle-indicator {
    align-items: center;
    background: var(--white);
    border-radius: var(--toggle-indicator-size);
    bottom: 2px;
    display: flex;
    height: var(--toggle-indicator-size);
    justify-content: center;
    left: 3px;
    outline: var(--highContrastModeSupport);
    position: absolute;
    transition: 0.5s;
    width: var(--toggle-indicator-size);
    margin: 0rem;
}
.checkMark {
    fill: #fff;
    height: 20px;
    width: 20px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    margin: 0rem !important;
}
.toggle__input:checked + .toggle-track {
    background-color: var(--white);
}
.toggle__input:checked + .toggle-track .toggle-indicator {
    background: var(--orange);
    transform: translateX(30px);
}
.premium .toggle__input:checked + .toggle-track .toggle-indicator {
    background: var(--darkOrange);
    transform: translateX(30px);
}
.toggle__input:checked + .toggle-track .toggle-indicator .checkMark {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.toggle__input:not([disabled]):active + .toggle-track,
.toggle__input:not([disabled]):focus + .toggle-track {
    border: 1px solid transparent;
    box-shadow: 0px 0px 0px 2px var(--track-border);
}

.shaded {
    /*background-color: var(--lightOrange);*/
    border: 1px solid var(--orange);
    padding: 1rem 2.5rem;
    border-radius: 1.8rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    position: relative;
}
.shaded.boolean {
    padding: 0.5rem;
    width: 10.8rem;
}
.shaded.boolean label {
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
}
.shaded.boolean label::after {
    content: none;
}
.shaded.boolean label span.label {
    margin-left: 1rem;
    margin-right: 2rem;
    font-weight: 400;
    font-size: 1rem;
    display: flex;
    align-items: center;
}
.shaded.boolean label span.label img {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0.2rem;
    margin-right: 0.5rem;
    margin-left: -1rem;
}
.shaded.boolean:has(input:disabled) {
    display: none;
}

form.disabled input:disabled,
form.disabled select:disabled,
form.disabled textarea:disabled {
    color: var(--textColor);
}
form.disabled input:disabled,
form.disabled textarea:disabled {
    padding-left: 0.5rem;
}

/* Media */

@media screen and (max-width: 800px) {
    header .logo {
        width: 38px;
        overflow: hidden;
        background-color: var(--lightOrange);
        padding: 0.5rem 0;
        box-sizing: border-box;
        height: 5rem;
        z-index: 5001;
    }
    header .logo a {
        background-image: url("/images/frrr-logo-small.png");
        background-size: 25px;
        background-position: center;
        background-repeat: no-repeat;
        display: block;
        height: 54px;
    }
    nav {
        width: 38px;
        z-index: 201;
        top: 5rem;
    }
    nav ul li a {
        padding-left: 0.3rem;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }
    nav ul li span {
        display: none;
    }
    nav > ul ul {
        display: none;
    }
    nav > ul li.branches a {
        padding-left: 0.45rem;
    }
    nav > ul li.form.selected a {
        background-color: transparent;
    }

    nav > ul li.selected span.version {
        display: none;
    }
    nav > ul li.selected a.update {
        display: none;
    }

    main {
        margin-left: 2rem;
    }

    form section div:not(.attribute-container, .attribute, .item-container) {
        flex-direction: column;
        align-items: inherit;
        gap: 0.4rem;
    }
    form section div.signature,
    form section div.satisfactory,
    form section div.toolbar,
    form section div:has(.select) {
        align-items: flex-start;
    }

    form section div.buttons {
        flex-direction: row;
    }

    form section div input,
    form section div textarea {
        align-self: inherit;
    }
    form section div.questions.multiple.row {
        flex-direction: column;
    }
    form .page div label {
        width: inherit;
    }
    form section div.questions.multiple button.delete {
        align-self: flex-start;
    }

    form section div.row.nocolumn {
        flex-direction: row !important;
    }

    form div div.toolbar span {
        align-self: flex-start;
    }

    label.empty {
        display: none;
    }

    a.button,
    span.button,
    button {
        align-self: flex-start;
    }
}

@media screen and (max-width: 890px) {
    .searchbar .filters {
        flex-direction: column;
        align-items: flex-start;
    }
    .item-container {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
@media screen and (min-width: 890px) {
    .pagination {
        flex-direction: row;
    }
    .attribute-container,
    .attribute-container:first-child {
        padding: 0.4rem;
    }
    .mobile-nav-container {
        display: none !important;
    }
}
@media screen and (min-width: 1124px) {
    .item-container.accounts {
        grid-template-columns: 2fr 1fr;
    }
    .item-container:first-child {
        display: grid;
    }
    .item-container:first-child .attribute-container {
        padding: 0 0.4rem;
    }
    .item-container:first-child .attribute-container .attribute {
        font-weight: bold;
    }
    .attribute-container {
        grid-template-columns: 4fr 3fr 6fr;
        gap: 0.8rem;
        align-content: center;
    }
    .sendlogs .attribute-container {
        grid-template-columns: 2fr 6fr;
    }
    .attribute-container.branches {
        grid-template-columns: 1fr 2fr;
    }
    .attribute-container.enquiry-accounts {
        grid-template-columns: 1fr 2fr;
    }
    .attribute-container.status {
        grid-template-columns: 2fr 1fr 1fr 2fr;
    }
    .attribute-container.status.enquiry-status {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
    .jobs .attribute-container.status,
    .attribute-container.status.accounts {
        grid-template-columns: 2fr 1fr 1fr;
    }
    .attribute {
        align-self: center;
    }
    .attribute:before {
        content: none;
    }
    .attribute.button {
        margin-top: 0;
    }
}