// Less Imports
@import "/sitecss/style.less";

html {
    /* font-size: 70%; */
}

body {
    /* font: 400 1.6rem/2.5rem 'Montserrat', sans-serif; */
    font-family: 'Montserrat', sans-serif;
    background-color: white; // #fff6
    color: black;
    // match bootstrap webkit use, remove DOM error
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
// wait feedback for these classes
body.wait, section.wait, div.wait {
    cursor: progress !important;
    background-color: #ddd !important;
}
// printing setup
body.print {
    // border: 2px solid grey;
    height: 288mm; // for minimal margins...
    // width: 210mm;
}
body.print .skip-header {
    display: none;
}
.onlyprint {
    display: none;
}
body.print .onlyprint {
    display: block !important;
}
body.print .doprint {
    display: contents !important;
}
body.print .noprint {
    display: none !important;
}
body.print .group-header {
    border: 4pt solid darkgrey; // doesn't work when printing
    font-size: 24rem !important; // doesn't work when printing
    color: blue;
    font-weight: bold;
    background-color: #bcbcbc; // doesn't work when printing
    border-radius: 10px; // doesn't work when printing
    padding-bottom: 4pt; // doesn't work when printing
}

:lang(ar) { // arabic font!
    font-family: "Noto Kufi Arabic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

/* override similar definitions from bootstrap, make font smaller */
h1, h2, h3, h4 {
    font-size: calc(1.2rem + .9vw);
    line-height: calc(1.6rem + .9vw);
    text-transform: uppercase;
    letter-spacing: -0.02rem;
}
h2 {
    font-size: calc(0.8rem + .8vw);
    line-height: calc(1.2rem + .8vw);
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}
h3 {
    font-size: calc(0.6rem + .7vw);
    line-height: calc(1rem + .7vw);
    font-weight: normal;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
h4 {
    font-size: calc(0.4rem + .6vw);
    line-height: calc(1rem + .6vw);
    font-weight: normal;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

/* note that header and footer have fixed link colours because they have fixed background */
a {
    color: #123456;
    text-decoration: underline;
    cursor: pointer;
}
a:hover {
    color: darkgrey;
    // border-color: lightgrey;
    text-decoration: none;
}
a.disabled {
    pointer-events: none;
}
a[href=''] {
    color: unset;
    text-decoration: unset;
    cursor: default;
}

form {
    // padding: 2pt; // skews the nav-bar header!
}

label::after {
    content: "\a";
    white-space: pre;
}

// remove the label before a file upload input
input[type=file]::-webkit-file-upload-button {
    display: none;
}
input[type=file]::file-selector-button {
    display: none;
}

blockquote {
    font-style: italic;
    border-block: thin;
    text-align: center;
}

blockquote::before {
    // content: '"';
}

blockquote::after {
    // content: '"';
}

fieldset {
    // border: 1px solid lightgray;
    // border-radius: 10px;
    // padding: 4pt;
    margin-bottom: 1rem;
    // background-color: white;
}
fieldset legend {
    // position: relative;
    // top: -14pt; // doesn't work on Firefox...
    margin-bottom: 0pt; // -10pt;
    // margin-left: 2pt;
    font-size: 12pt;
    font-weight: bold;
    // background-blend-mode: luminosity; // useless...
    background-color: #667; // transparent;
    color: white;
    padding: 0pt 6pt 0pt 6pt;
    width: auto;
}
fieldset div.container {
    border-top: 1px solid black;
    background-color: #f6f6f6;
    padding: 4pt;
    max-width: 100%;
}

dd:empty::after {
    content: "empty";
    visibility: hidden;
}

// match bootstrap webkit use, remove DOM error
th {
    text-align: match-parent;
    text-align: -webkit-match-parent; // match bootstrap webkit use, remove DOM error
}
/* ------------------------------- header */
header {
    background-color: #222324;
    color: #ffffff;
    font-size: 12pt;
}
header a {
    color: #ffffff !important;
    text-decoration: none;
}

body.print header {
    display: none;
}
/* ------------------------------- content */
.container .row.emphasis {
    background-color: lightgrey;
}
.container .row.emphasis button {
    // margin-top: 3pt; // small adjustment for plus signs...
}
/* ------------------------------- footer */
footer {
    background-color: #222324;
    color: #ffffff;
    font-size: 12pt;
    padding-top: 10pt;
}
footer a {
    color: #ffffff !important;
    text-decoration: none;
}
footer ul {
    padding-left: 0; // undoes the reboot setting of 2rem
}
footer li {
    list-style: none;
}

footer .row {
    text-align: center;
}

footer .title {
    text-transform: uppercase;
    font-weight: bold;
}

footer .social {
    margin-bottom: 10pt;
}
footer .social img {
    width: 35px;
    height: 35px;
    margin-right: 5px;
}

footer .copyright {
    font-size: 10pt;
}
footer .copyright img {
    height: 5rem;
    margin: 8pt;
}
footer .copyright p {
    margin-bottom: 2pt;
}

body.print footer {
    display: none;
}

pre.clip {
    overflow: hidden;
    max-width: 100%;
    margin-top: 10pt;
    margin-bottom: 10pt;
}

pre.alert {
    font-family: 'Montserrat', sans-serif;
    overflow-wrap: break-word;
    hyphens: manual;
}

/* ------------------------------- fixes */
.form-check-inline {
    /* margin-top: 10pt; */
}
// old Bootstrap, groups label and input in a form, now they use .mb-3 to give a bottom margin so define this to be the same.
.form-group {
    margin-bottom: 1rem!important;
}
// used in a containing div to join controls together horizontally.
.input-group {
    // margin-bottom: 1rem !important;
}

// add to a container with only flexboxes
.clearfix::before {
    content: ".";
    display: block;
    // height: 0;
    clear: both;
    visibility: hidden;
}
.form-text {
    padding-top: .375rem;
    padding-bottom: .375rem;
    color: #644;
    font-weight: bold;
    // font-size: 1.2rem; // otherwise the box moves...
}
.form-text::after {
    content: " ";
    white-space: pre;
}

.list-group { // move the item markers back in
    padding-inline-start: revert;
}
.card .list-group {
    padding-inline-start: 0pt;
}
.list-group-item { // no background
    background-color: revert;
    padding-left: 2pt;
    display: grid; // block removes the marker
}
.card .list-group-item {
    display: block;
}

.input-group {
    max-width: fit-content; // otherwise it stretches to fill the column
}

/* ------------------------------- dark navbar */

header .navbar-dark {
    padding: 0;
}
header .navbar-dark .container-fluid {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
}
/* collapse the navbar when <lg, must have a left margin for the popup! */
header .navbar-dark .navbar-collapse {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
    border-radius: 10px;
    margin-left: 40%; /* auto is better everywhere apart from mobile phone Firefox app... */
    white-space: nowrap;
}
header .navbar-dark .navbar-nav {
    color: white !important; /* just for non-link text */
}
header .navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.8);
    text-transform: uppercase;
    padding: 4pt;
    margin: 4pt;
}
header .navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255,255,255,1);
}

/* ------------------------------- transparent navbar */
header .navbar-transparent {
    padding: 0;
}
header .navbar-transparent .container-fluid {
}
/* collapse the navbar when <lg, must have a left margin for the popup! */
header .navbar-transparent .navbar-collapse {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb),0.6) !important;
    border-radius: 10px;
    margin-left: 40%; /* auto is better everywhere apart from mobile phone Firefox app... */
    white-space: nowrap;
}
header .navbar-transparent .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.65%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
header .navbar-transparent .navbar-toggler {
    border-color: rgba(0,0,0,.65);
    background-color: rgba(0,0,0,.65);
}
header .navbar-transparent .navbar-nav {
    color: white !important; /* just for non-link text */
    border-color: white;
}
header .navbar-transparent .navbar-nav .nav-link {
    color: rgba(255,255,255,.8);
    text-transform: uppercase;
    padding: 4pt;
    margin: 4pt;
}
header .navbar-transparent .navbar-nav .nav-link:hover {
    color: rgba(255,255,255,1);
}

/* ------------------------------- top level */
.skip-header {
    padding-top: 86pt;
}

/* needed to avoid a horizontal scrollbar! */
.main {
    padding-left: 10pt;
    padding-right: 10pt;
}

body .container section.main {
    min-height: 460pt;
}

.error {
    padding: 10pt 0pt 10pt 0pt;
}
.error h1, .error h2, .error h3, .error h4 {
    text-transform: none;
}

.logo {
    height: 4rem;
    margin: 2pt;
}

.logo-text {
    max-width: 70pt;
    white-space: pre-wrap;
    display: inline-block;
    vertical-align: middle;
    color: @links-background-color; // was text
    text-shadow: grey 2px 2px;
}

.nav-tabs .nav-link {
    color: @button-background-color;
    border: 1px solid; // keep the border for hover/active otherwise things move...
    border-color: transparent;
    text-decoration: none;
    text-transform: none;
}
.nav-tabs .nav-link:hover {
    border-color: @button-background-color;
}
.nav-tabs .nav-link.active {
    background-color: @button-background-color !important;
    border-color: @button-text-color !important;
    color: @button-text-color !important;
    border-bottom: none;
}

.nav-pills {
    padding: 1pt;
}
.nav-pills .nav-link {
    color: @button-background-color;
    border: 1px solid; // keep the border for hover/active otherwise things move...
    border-color: transparent;
    text-decoration: none;
    text-transform: none;
}
.nav-pills .nav-link:hover {
    border-color: @button-background-color;
}
.nav-pills .nav-link.active {
    background-color: @button-background-color;
    border-color: @button-text-color;
    color: @button-text-color;
}

/* ------------------------------- main styles */
.info-img {
    width: 2rem;
    height: 2rem;
    vertical-align: bottom;
}

.tab-pane {
    min-height: 400pt;
    padding: 4pt;
}

.privacy a {
    color: #000;
}

.offcanvas iframe {
    width: 100%;
    height: 90%;
}

// for font-awesome, don't know where to put it...
.fa-solid {
    color: black;
}

.caption {
    display: block;
    text-align: center;
}

.highlight {
    border: groove !important;
    // background-color: WindowFrame !important;
}

.scrollable-y {
    overflow-y: auto;
    // overflow-x: hidden;
    max-height: 800px;
}

.search {
    padding-bottom: 10pt;
}

.hint:before {
    content: 'Hint: ';
}
.hint {
    font-size: small;
}

.manager-info {
    width: 100%;
    margin-bottom: 1rem;
}
.manager-info span {
    display: block;
}

.alt {
    display: none;
}

// fixed position box
.feedback {
    border: 3px groove lightgrey;
    border-radius: 10px;
    background-color: white;
    padding-bottom: 6pt;
    margin-bottom: 4pt;
    margin-right: 10pt;
    position: fixed;
    top: 14%; // this gets overridden by topright/bottomright
    // left: auto;
    right: 0pt;
    min-width: 30pt;
    max-width: 30%;
    max-height: 82%;
    overflow-x: hidden;
    overflow-y: auto;
}
.feedback [name="panel"] {
}
.feedback div:not([hidden]) .col {
    min-height: 60pt;
}
.feedback div button {
    padding: 2pt !important;
}
.feedback legend {
    font-weight: bold;
    font-size: small;
    float: initial;
    padding: 2pt;
    width: auto;
    // adjustments for when in a fixed position box...
    top: unset;
    margin-bottom: unset;
}
.feedback ul {
    margin-bottom: 2pt;
}

.basket {
    border: 3px groove lightgrey;
    border-radius: 10px;
    background-color: white;
    margin-bottom: 4pt;
    margin-right: 10pt;
    position: fixed;
    top: 10%; // this gets overridden by topright/bottomright
    left: auto;
    right: 0pt;
}
.basket .btn {

}

// position relative to the page (fixed), to make relative to containing object override with absolute
.bottomright, .topright, .centered {
    margin-right: 10pt;
    margin-bottom: 10pt;
    position: fixed;
    top: auto;
    bottom: 0pt;
    left: auto;
    right: 0pt;
    // width: auto;
    // max-width: 200pt;
    z-index: 1060;
}
.mobile .bottomright {
    padding-bottom: 20pt;
}
.topright {
    bottom: auto;
    top: 0;
    margin-bottom: 0pt;
}
.centered {
    margin: 10pt;
    bottom: auto;
    right: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.bottomright a, .topright a, centered a {
    // background-color: orangered;
    text-transform: none !important;
}

.emphasis {
    font-weight: bold;
    // text-emphasis: circle;
}
p.emphasis {
    margin: 4pt;
}

#style-form .row {
    margin-bottom: 4pt;
}
#style-form .form-label {
    font-size: small;
    margin-bottom: 0pt;
}

h2.tab-title {
    // display: none;
    font-size: small;
    font-weight: bold;
    color: black;
}
div.row.tab-title {
    background-color: lightgrey;
    margin-top: 2pt;
    margin-bottom: 2pt;
    // padding: 2pt;
    // max-height: 34pt;
}
div.text-end {
    margin-top: auto;
    margin-bottom: auto;
}

// a menu at the bottom of the screen, fixed, left to right
.statusbar {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--color-bg-main);
    border-radius: 8px 8px 0 0;
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 2px 6px var(--color-border-light);
    font-size: 13px;
    padding: 8px 15px;
    z-index: 1;
    // user-select: none; // can't select text from it, not supported in Safari
}

.overlay {
    position: absolute;
    width: 0px;
    height: 0px;
    border: 1px solid red;
    background-color: rgba(196, 147, 147, 0.5);
    z-index: 10;
}

.underlay {
    position: absolute;
    width: 0px;
    height: 0px;
    border: 1px solid red;
    background-color: rgba(147, 196, 147, 0.5);
    z-index: -1;
}

.alert h1, .alert h2, .alert h3, .alert h4 {
    font-size: 12pt;
    line-height: initial;
    text-transform: none;
    letter-spacing: initial;
}
.alert-dismissible .btn-site {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 2pt;
    max-width: 100pt;
    max-height: 50pt;
}
#alert {
    max-width: 80%;
    overflow: auto;
}

// show changes (match .counter badge colors)
.changed {
    border-left: 5px solid rgb(255, 193, 7); // amber
    transition: all 1.5s ease-out;
}
.new {
    border-left: 5px solid rgb(220, 53, 69); // red
    transition: all 1.5s ease-out;
}
.deleted { // not really shown, the element is removed...
    border-left: 5px solid rgb(13, 110, 253); // blue
    transition: all 1.5s ease-out;
}
@starting-style: {
    .changed {
    }
}

.code {
    background-color: black;
    color: white;
    padding: 2pt;
    min-height: 20pt;
    max-height: 400pt;
}

.step {
    display: flex;
}
.step::before {
    // content: url('/images/next.png');
    position: relative;
    left: 10pt;
    height: 10pt;
    width: 10pt;
}

#api .info .name {
    font-size: 1em;
}
#api .info .endpoint {
}
#api .info .description {
}
#api .info .comments {
    font-size: .875em;
}

.counter {
    margin-left: 2pt;
}

.grid-container {
    display: grid;
    place-items: center; /* Centers content both vertically and horizontally */
    height: 100px; /* Set a height for the container */
    width: 100px; /* Set a width for the container */
    border: 1px solid black; /* Optional: for visibility */
}

// this goes to the right
.btn-closed {
    display: grid;
    place-items: center; /* Centers content both vertically and horizontally */
    background-color: white;
    border: grey;
    border-style: solid;
    border-radius: 100pt;
    text-align: center;
    opacity: unset;
    margin: 0pt; // setting it to a negative value clips it...
    font-size: 16pt;
    position: relative;
    float: right;
    // top: 44pt;
    // right: 40pt;
    // padding: 4pt;
    width: 30pt;
    height: 30pt;
    line-height: 0pt;
    z-index: 1060;
    overflow: visible;
}

.popup {
    z-index: 999;
    background-color: white;
    border: solid;
    opacity: 96%;
    // display: none
}

* .ERRORS {
    background-color: light-coral;
}
.WAITING::after {
    content: '';
    border: 6pt solid #f3f3f3; /* Light grey */
    border-top: 6pt solid #3498db; /* Blue */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
}
.ERRORS::after {
    content: '!';
    font-weight: bolder;
    color: red;
    display: inline-block;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.fromuser {
    font-weight: bold;
    color: darkred;
}
.status {
    font-weight: bold;
}
.more {
    font-size: small;
    font-style: italic;
}
.more::after {
    content: 'more...';
}

.term {
    font-size: smaller;
    border: 1px solid black;
    border-radius: 4px;
    background-color: lightgray;
    padding: 2pt;
    display: inline-block;
}
.term .close {
    margin-left: 2pt;
    padding: 1pt 4pt 1pt 4pt;
    border-radius: 50%;
    background-color: @button-background-color;
    color: @button-text-color;
}
.result {
    font-size: smaller;
}

.link {
    font-style: italic;
}
.link::after {
    content: " \25BA"; // "\25BC \25C0 \25B2";
}

.reset-yes {
    filter: brightness(50%);
}

.orders {
    max-height: 300pt;
    overflow-y: auto;
}

.round-text {
    display: grid;
    place-items: center;
    border: grey;
    border-style: solid;
    border-radius: 100pt;
    background-color: white;
}

// pseudo input box, for cloning
dd.input {
    height: 30pt;
    width: 160pt;
}
.grid .row {
    border: 1px dotted grey;
}
.grid .col {
    border: 1px dotted grey;
    min-height: 30pt
}
.grid .form-label {
    // label is usually display: inline-block but we want the next input on a separate line:
    // display: block;
}
.grid input, .grid textarea, .grid select {
    min-width: 100pt;
    min-height: 32pt;
    margin-right: 32px;
    background-image: url("/images/edit.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 20px;
}
.grid .drag-from {
    margin: 4pt;
    border: 5pt solid grey;
}

.tools .form-label {
    font-weight: 600;
}

.input-group dd {
    margin-left: 10pt !important;
}

.next {
    padding-right: 32px;
    background-image: url("/images/next.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 20px;
}

iframe.viewer {
    min-width: 380pt;
    min-height: 530pt;
    width: 80%;
}

#qrcode {
    max-width: 20rem;
}
/* ------------------------------- subject */
.subject {
    width: 100%;
    /* float: left; */
    // background-image: linear-gradient(to right, #666, @subject-background-color);
    color: #fff;
    background-color: @subject-background-color;
    text-align: center;
    /* vertical-align: middle; /* only for inline or table-cell elements */
    display: flex; /* this joins blocks together... */
    justify-content: center; /* only applies to flex */
    align-items: center; /* for flex again */
    height: 20rem;
    padding-left: 20pt;
    padding-right: 20pt;
    text-shadow: 1px 1px 1px #000;
}
.subject h1 {
    /* margin: 0 auto; */
    color: @subject-text-color;
    font-size: 1.6rem;
    line-height: 1.6rem;
}
.subject h2 {
    color: @subject-text-color;
    font-size: 1.4rem;
    line-height: 1.4rem;
}
.subject h3 {
    color: @subject-text-hover-color; // misnamed...
}

.page-subject {
    padding: 0 3.2rem;
}

.home-subject {
    background-image: @subject-home-img;
    background-position: center center; /* watch out for vertical center */
    background-size: cover;
    background-repeat: no-repeat;
}

.online-subject {
    background: @subject-online-img;
    background-position: center center; /* watch out for vertical center */
    background-size: cover;
    background-repeat: no-repeat;
}

.personal-subject {
    background: @subject-personal-img;
    background-position: 67% center; /* small adjustment to compensate for image SITE SPECIFIC! */
    background-size: cover;
    background-repeat: no-repeat;
}

.transformation-subject {
    background-image: @subject-transformation-img;
    background-position: 0 top; /* this image may be split in two SITE SPECIFIC! */
    background-size: auto 120%;
    background-repeat: no-repeat;
}

.about-subject {
    background-image: @subject-about-img;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

.contact-subject {
    background-image: @subject-contact-img;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

.shop {
    padding: 2pt;
}

.shop-subject {
    background-image: @subject-shop-img;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

.home-about {
    background: @home-about-img top right no-repeat;
    min-height: 300pt;
}


/* ------------------------------- page generic */
textarea {
    min-height: 87pt !important;
    width: 100%;
}
textarea .edit {
    min-height: 20pt;
}

.trumbowyg-box, .trumbowyg-editor {
    min-height: 200px !important; // reduced from 300
}
.trumbowyg-editor-box {
    background-color: rgb(255 255 255 / 0.30);
    // color: black;
}

.selection {
    max-height: 300pt;
    overflow-y: auto;
    overflow-x: auto;
    padding: 1pt;
}
.selection .card-header {
    padding: 1pt;
    font-weight: bold;
}
.selection .card-body {
    padding: 1pt;
}

.totals {
    font-size: small;
}
.totals {
    list-style-type: none;
    padding-left: 0pt;
    display: table;
}
.totals li {
    float: left;
    margin-right: 6pt;
    font-weight: bold;
}
.totals li span {
    font-weight: normal;
}

.accordion {
    margin-top: 4pt;
    margin-bottom: 4pt;
}
.accordion-header {
    margin-top: 0; // it has already margin-bottom set to zero
}
.accordion-header-subtitle {
    font-size: 0.8rem;
    // padding: 0.3rem 1.4rem 0rem 1.4rem;
    font-weight: bold;
}
.accordion-body {
    padding: 0.8rem 1rem;
}
.accordion-button-grid {
    display: grid;
}
.accordion-button:focus {
    /* nothing I do here seems to change the border colour! */
}
// :not(.collapsed)
.accordion-button:not(.collapsed) {
    background-color: @button-background-color;
    border-color: @button-text-color;
    color: @button-text-color;
}
.dark-container {
    background-color: lightgrey;
}
.dark-container *, .dark-container *:not(.collapsed) {
    background-color: transparent;
    border-color: black;
    color: black;
}

.popover {
    // white-space: pre;
}

/* ------------------------------- form */
.form-data {
    border: 1px solid darkgrey;
    background-color: @form-background-color;
    border-radius: 10px;
    padding: 4pt;
}
.form-data .form-select {
    // width: revert; // don't stretch it?
}
.form-data .form-control {
    // width: revert;
}
.form-data .form-check > * {
    margin-top: 7pt;
}

.form-data .form-label {
    margin-bottom: 0pt;
    font-weight: 600;
    color: #555555;
}
.form-data .input-group label {
    margin-left: 4pt;
    margin-bottom: 6pt;
    display: block;
}

.form-data .card:only-child {
    max-width: 100%;
    width: 100%; // overrides row-cols-auto class
}

.form-data fieldset legend {
    // background-color: @form-background-color;
}

.form-data dt {
    font-weight: 600;
    color: #555555;
}
.form-data dt::after {
    content: ": ";
}

.form-data .horizontal-list dt {
    display: flow;
}
.form-data .horizontal-list dd {
    display: flow;
}

.form-data input[type=number] {
    width: 80pt;
}

/* variations for the droppable matrix */
.form-data .card {
}
.form-data .card dt::after {
    text-decoration-line: none;
    content: unset;
}
/* variations for form data actually in a form */
.form-data span.break {
    // display: block;
}
form .form-data span.break {
    display: initial;
}
.form-data button, .form-data a {
    // visibility: hidden;
}
form .form-data button, form .form-data a {
    visibility: visible;
}

div .show-generated { // normally hidden, show only when generated (see above)
    display: none;
    // visibility: hidden; // not right, keeps the space!
}
// .generated is appended to a generated form by formapi()
div.generated .show-generated {
    display: revert; // revert is correct to fill the row
}

div.generated .hide-generated {
    display: none;
}

.item-drop-highlight {
    background-color: coral !important;
}

/* ------------------------------- messages */
div.accordion-message .accordion-collapse {
    background-color: #eee;
}
#messages-list .accordion-body {
    overflow-y: auto;
    max-height: 600pt;
}
.messages {
    background-color: antiquewhite;
    min-height: 70%;
    scroll-behavior: auto;
    padding: .2rem;
    overflow-y: auto;
}
.messages-title {
    border: 1px solid lightgrey;
    font-weight: bold;
    padding: 2pt;
    margin-bottom: 0;
    border-radius: 4px;
    width: 100%;
}
.messages-date {
    margin-left: auto;
    margin-right: auto;
    margin-top: .4rem;
    margin-bottom: .4rem;
    text-align: center;
    font-size: small;
    background-color: lightgrey;
    border-radius: 10px;
    padding: .4rem;
    max-width: 140pt;
}

.message {
    margin-bottom: 0;
    overflow-x: hidden;
}
.message-theirs {
    max-width: 80%;
    border: 1px solid lightgrey;
    margin-left: 0;
    margin-right: auto;
    margin-top: .4rem;
    margin-bottom: .4rem;
    border-radius: 10px;
    padding: .4rem;
    background-color: white;
}
.message-theirs .sender {
    display: block;
    max-width: max-content;
    color: lightcoral;
}
.message-mine {
    max-width: 80%;
    border: 1px solid lightgrey;
    margin-left: auto;
    margin-right: 0;
    margin-top: .4rem;
    margin-bottom: .4rem;
    border-radius: 10px;
    padding: .4rem;
    background-color: aliceblue;
}
.message-mine .target {
    display: block;
    max-width: max-content;
    color: gray;
}
.message .message-title {
    font-weight: bold;
    margin-bottom: 1pt;
    display: block;
}
.message .message-count {
    margin-left: 1pt;
}

.messages-popup {
    margin: 0 !important;
    padding: 0 !important;
    width: 40%;
    min-width: 200pt;
    max-width: 400pt;
    top: unset;
    visibility: hidden;
    height: 300pt;
}
.messages-popup .offcanvas-header {
    padding: 0;
}
.messages-popup .offcanvas-body {
}
/* ------------------------------- page sections */
/* first box usually darker because text color is white */
.box1, .intro, .testimonial, .contact, .home-online, .home-testimonial, .home-contact {
    background-color: @box1-background-color;
    text-align: center;
    padding: 1rem;
}
.box1 a, .intro a, .testimonial a, .contact a, .home-online a, .home-testimonial a, .home-contact a {
    color: @links-text-color;
    text-decoration: none;
    // font-weight: bold; makes link buttons different to normal buttons
}
.box1 a:hover, .intro a:hover, .testimonial a:hover, .contact a:hover, .home-online a:hover, .home-testimonial a:hover, .home-contact a:hover {
    color: @links-text-hover-color;
    text-decoration: none;
}

.intro {
    border-radius: 5px;
    color: white;
    font-size: 1.2rem;
}

.home-online {
    border-radius: 5px;
    color: white;
}

.home-testimonial, .testimonial {
    background-color: #ededed; /* always this dark colour */
}

.testimonial-name {
    font-weight: 500;
}

.home-contact, .home-subject, .contact {
    color: white;
}

/* alternate box inherits color from body */
.box2, .home-training, .home-transformations, .coaching, .methodology, .packages, .transformations, .transformation-help, .blog, .transformations-gallery, .about, .contact-me {
    background-color: @box2-background-color;
    border-radius: 5px;
    color: inherit;
    text-align: center;
    padding: 1rem;
}
.box2 a, .home-training a, .home-transformations a, .coaching a, .methodology a, .packages a, .transformations a, .transformation-help a, .blog a, .transformations-gallery a, .about a, .contact-me a {
    color: @links-background-color;
    text-decoration: none;
}
.box2 a:hover, .home-training a:hover, .home-transformations a:hover, .coaching a:hover, .methodology a:hover, .packages a:hover, .transformations a:hover, .blog a:hover, .transformation-help a:hover, .transformation-gallery a:hover, .about a:hover, .contact-me a:hover {
    color: @links-text-hover-color;
    text-decoration: none;
}

.home-transformations li {
    list-style: none;
}

.transformations .col {
    margin-bottom: 4pt;
}
.transformations .showcase {
    background-color: #eee;
    height: 100%;
    padding: 6pt;
}
.transformations .biography {
    background-color: #eee;
    height: 100%;
    padding: 6pt;
    // max-width: 300pt;
}

/* third box usually darker because text color is white */
.box3, .home-about {
    background-color: @box3-background-color;
    border-radius: 5px;
    color: white;
    text-align: left;
    padding: 1rem;
}
.box3 a, .home-about a {
    color: @links-text-color;
    text-decoration: none;
    text-decoration: none;
}
.box3 a:hover, .home-about a:hover {
    color: @links-text-hover-color;
    text-decoration: none;
}

.contact-me {
    text-align: left;
}

.contact-me .tel, .contact-me .email {
    color: black;
}


.article {
    text-align: left;
    background-color: #eeeeee;
    /* margin: 1rem; */
    height: 100%;
    padding: 1rem;
    overflow: auto;
}
.article h1, .article h2 {
    font-size: 12pt;
    font-weight: bold;
    margin-top: 6pt;
    margin-bottom: 6pt;
    line-height: unset;
    text-decoration: none;
}
.article h3 {
    font-size: 10pt;
    font-weight: unset;
    color: #005300;
    margin-top: 0pt;
    margin-bottom: 0pt;
    line-height: unset;
    text-decoration: none;
}
.article img {
    max-width: 100%;
    max-height: 100%;
}

.blog {
    padding-bottom: 16pt;
}

/* ------------------------------- buttons */
a.btn, a.btn-outline, a.btn-secondary {
    color: initial;
}
button.btn:hover {
    border-color: lightgrey;
}
a.btn:hover {
    border-color: lightgrey;
}
button.btn-link {
    background-color: initial;
    border: none;
    color: @links-background-color;
}
button.btn-link:hover {
    color: @links-text-hover-color;
}
// added a version to override section links above!
.btn-site, a.btn-site {
    background-color: @button-background-color;
    border-color: @button-text-color;
    color: @button-text-color;
    border-width: 2pt;
    border-radius: 6px;
    text-transform: uppercase;
    text-decoration: none;
    // padding: 6pt;
    // margin: .2rem .4rem;
}
.btn-site:disabled {
    background-color: #434343;
    border-color: #cccccc;
    color: #cccccc;
}
.btn-site-outline, a.btn-site-outline {
    /* no background */
    border-color: @button-background-color; // use background as it is more likely to be darker!
    color: @button-background-color;
    text-transform: uppercase;
    text-decoration: none;
    // margin: 6pt;
}
.btn-site-outline:disabled {
    border-color: #434343; /* grey */
    color: #cccccc !important;
}
.btn-site-secondary, a.btn-site-secondary {
    background-color: @button-background-color;
    border-color: @button-text-color;
    color: @button-text-color;
    border-width: 2pt;
    border-radius: 6px;
    opacity: 0.5;
    /* text-transform: uppercase; */
    text-decoration: none;
    // margin: 6pt;
}
.btn-site-secondary:disabled {
    background-color: #434343; /* grey */
    border-color: #cccccc;
    color: #cccccc;
}
.btn-site-close {
    background-color: white;
    border: grey;
    border-style: solid;
    // border-radius: 10px;
    // text-align: center;
    text-align: center;
    opacity: unset;
    margin: 4pt;
    transform: translate(50%, -50%);
}

/* ------------------------------- about */
/* this is just to align text and images left or right (just attach right or left classes to a div within the container, about in this case */
/* the default is actually NOT to split, it is overridden later for screen size */
.right {
    display: table;
    text-align: right;
    padding-bottom: 1rem;
    float: right;
}
.right img, img.right {
    min-width: 20pt;
    max-width: 50% !important;
    width: 100%;
    padding-left: 1em;
}

.left {
    display: table;
    text-align: left;
    padding-bottom: 1rem;
    float: left;
}
.left img, img.left {
    min-width: 20pt;
    max-width: 50% !important;
    padding-right: 1em;
}

.center {
    display: table;
    text-align: center;
    padding-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
}
.center img, img.center {
    min-width: 20pt;
    max-width: 50% !important;
}

/* ------------------------------- matrix items */
.matrix {
}

.matrix label {
    background-color: #eee8;
    color: black;
    font-size: 14pt;
    width: 100%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.matrix .selected {
    border: 2pt inset grey;
}

.matrix .matrix-cell {
    min-width: 200pt;
}

.matrix .matrix-cell-header {
    font-size: 12pt;
    font-weight: bold;
    background-color: lightgrey;
}
.matrix .matrix-cell-header dl {
    margin-bottom: 0pt;
}

.matrix .assigned-list {
    list-style-type: none;
    padding-left: 0pt;
    // display: table;
}
.matrix .assigned-item + .assigned-item {
    break-before: column;
    border-top: 1px solid;
    border-color: grey;
    padding-top: 10pt;
}
.matrix .assigned-item-name {
    // display: block;
    margin-top: 10pt;
    font-weight: bold;
}
.matrix li:first-child .assigned-item-name {
    margin-top: 0pt;
}

.matrix .assigned-item-description {
    display: inline;
    font-size: small;
    break-before: column;
}
.matrix .assigned-item-description p {
    margin-bottom: 0px !important;
}
.matrix .assigned-item-description h2 {
    font-size: large;
}
.matrix .assigned-item-description::before {
    /* content: '> '; */
}

.matrix .assigned-item-activity {
    break-before: column;
}
.matrix .assigned-item-activity img.edit {
    width: 24px;
    height: 24px;
}
.matrix .assigned-item-activity h3 {
    font-size: small;
    font-weight: bold;
}

/* ------------------------------- documents */
.documents-list h3 {
    color: slategrey;
    font-weight: bold;
}
.documents-list .date::before {
    content: '[';
    font-size: small;
}
.documents-list .date::after {
    content: ']';
    font-size: small;
}
.documents-list .date {
    font-size: small;
}
.documents-list .author {
    font-weight: bold;
    font-size: small;
}
.documents-list .title {
    font-weight: bold;
}

/* ------------------------------- tables */
/* combined with javascript this converts elements with the .convert-table class to a table by splitting across tab characters */
.formatted-table, .md table {
    width: 100%;
    background-color: white; // set underlying color, override by th and td
    text-align: left;
    margin-top: .6rem;
    margin-bottom: .6rem;
    overflow-x: auto;
}
.formatted-table table, .md table {
    margin-left: auto;
    margin-right: auto;
}
.formatted-table th, .md table th {
    width: 25%;
    background-color: @button-background-color;
    color: @button-text-color;
    padding: .6rem .6rem;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 500;
    border-width: 2pt;
    border-color: white;
}
.formatted-table td, .md table td {
    width: 25%;
    background-color: @table-cell-background-color;
    padding: .6rem .6rem;
    font-size: 0.8rem;
    border-width: 2pt;
    border-color: white;
}

/* ------------------------------- addresses */
.address {
    border-style: solid;
    border-color: darkgrey;
    height: 100%;
    width: 100%;
    padding: 2pt;
    display: flex;
    flex-direction: column;
}
.address .reference {
    margin-top: 20pt;
    font-weight: bold;
}
.address .return::before {
    content: 'Return To: ';
}
.address .return {
    font-size: 8pt;
    margin-top: auto;
    margin-left: auto;
}
.address p {
    margin-bottom: 0pt;
}
/* ------------------------------- pseudo classes */
.translate { // used to indicate that an element that would normally not be translated should be
}
.notranslate { // used to indicate that an element that would normally be translated should not be
}
.translatina { // used to indicate that an element's text should not be translated, but its title and/or information should be
}
.no-bootstrap { // do not apply bootstrap formatting (mainly for some <table>s)
}
/* ------------------------------- translation */
body.development [data-translate^="translated"] {
    color: red !important;
    font-style: italic !important;
}
body.development [data-type][data-translate^="translated"] {
    color: darkred !important;
    font-style: italic !important;
}
body.development [data-translate="nochange"] {
    color: darkcyan !important;
    font-style: italic !important;
}
/* ----------------------------------------------- mobile device variants --------------------------------------------- */
/* very top body class indicating a mobile device */
.mobile {
    background-color: #f0ffff;
    overflow: scroll;
    padding-bottom: 50pt; // for the bottom navigation element, see below
}
.mobile .container .skip-header {
    padding-top: 10pt;
}
.mobile .login {
    padding: 10pt;
}
.mobile .manager-info .hint {
    display: none;
}
// this is better than javascript adding classes (does not move around)
.mobile #main-menu {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: lightgray;
    z-index: 1030;
    // from navbar
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    padding-top: .5rem;
    padding-bottom: .5rem;
    // width: -webkit-fill-available;
}
.mobile .word {
    display: none;
}
.mobile .alt {
    display: initial;
}
// same as feedback really, but only for mobile
.mobile .selection {
    border: 3px groove lightgrey;
    border-radius: 10px;
    background-color: white;
    padding-bottom: 6pt;
    margin-bottom: 4pt;
    margin-right: 10pt;
    margin-top: 10pt;
    position: fixed;
    // top: 14%; // without this it is vertically aligned to the place it is declared
    left: auto;
    right: 0pt;
    width: 30%;
    min-width: 100pt;
    // height: 82%; // assign it selectively...
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 200;
    font-size: small;
}

/* ------------------------------- screen size variants (bootstrap limits) --------------------------------------------- */

@media (min-width: 0px) { // xs (mobile phone) - defaults to above
    .modal-dialog {
        // width: auto; // causes it to be off-center
        min-width: 200pt;
    }

    .form-data {
        // min-width: 200pt;
    }

    iframe.viewer {
        min-width: 200pt;
    }

    .mobile {
        // color: darkgreen !important;
        min-width: 250px;
    }
    .mobile .right {
        text-align: right;
    }
    .mobile .right img, .mobile img.right {
        max-width: 50%;
        width: auto;
        padding: 10pt;
    }
    .mobile .left {
        text-align: left;
    }
    .mobile .left img, .tagline img.left {
        max-width: 50%;
        width: auto;
        padding: 10pt;
    }
}

@media (min-width: 576px) { // sm
    .modal-dialog {
        max-width: 500pt;
        // width: auto;
        min-width: 300pt;
    }

    .form-data {
        // min-width: 300pt;
    }

    iframe.viewer {
        min-width: 300pt;
    }

    .subject {
        height: 28rem;
    }
    .subject h1 {
        font-size: 3rem;
        line-height: 3rem;
    }
    .subject h2 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .transformation-subject {
        background-image: @subject-transformation-img;
        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

@media (min-width: 768px) { // md
    .modal-dialog {
        max-width: 700pt;
        width: min-content;
        min-width: 400pt;
    }

    .form-data {
        // min-width: 400pt;
    }

    iframe.viewer {
        min-width: 400pt;
    }

    footer .row {
        text-align: unset;
    }

    .right {
        text-align: right;
    }
    .right img, img.right {
        max-width: 50%;
        width: auto;
        padding: 10pt;
    }

    .left {
        text-align: left;
    }
    .left img, img.left {
        max-width: 50%;
        width: auto;
        padding: 10pt;
    }
}

@media (min-width: 992px) { // lg
    .container-md {
        max-width: 720px; // keep it constant from here on
    }

    .modal-dialog {
        max-width: 800pt;
        width: min-content;
        min-width: 500pt;
    }

    .form-data {
        // min-width: 500pt;
    }

    iframe.viewer {
        min-width: 500pt;
    }

    .subject {
        height: 38rem;
    }

    .logo {
        height: 5rem;
        margin: 6pt;
    }

    .manager-info span {
        display: inline-block;
        min-width: 50%;
        max-width: 50%;
        width: 50%;
        margin-right: -2pt;
        vertical-align: top;
    }

    /* expand the navbar when >=lg, must have a left margin for the popup! */
    header .navbar-dark {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
    }
    header .navbar-dark .navbar-collapse {
        margin-left: unset;
        margin-top: unset;
        white-space: nowrap;
    }

    header .navbar-transparent {
    }
    header .navbar-transparent .navbar-collapse {
        background-color: transparent;
        margin-top: unset;
        margin-left: auto;
        white-space: nowrap;
    }
}

@media (min-width: 1200px) { // xl
    .modal-dialog {
        max-width: 900pt;
        width: min-content;
        min-width: 600pt;
    }

    .form-data {
        // min-width: 600pt;
    }

    iframe.viewer {
        min-width: 600pt;
    }
}

@media (min-width: 1400px) { // xxl
    .modal-dialog {
        max-width: 1000pt; // must have this
        width: min-content;
        min-width: 700pt;
    }

    .form-data {
        // min-width: 700pt;
    }

    iframe.viewer {
        min-width: 700pt;
    }
}

// override this for interactive content pages (no background)
#content .subject {
    height: auto;
}