/*
 * Baseline layout rules previously inherited from W3CSS.
 */

html {
    box-sizing                  : border-box ;
}

*,
*:before,
*:after {
    box-sizing                  : inherit ;
}

body {
    margin                      : 0 ;
}

html,
body {
    font-size                   : 15px ;
    line-height                 : 1.5 ;
}

a {
    color                       : inherit ;
}

/* Root vegetables */

:root {
    --dark-green                : #214700 ;
    --light-green               : #dcffdb ;
    --purple                    : #800080 ;
    --dark-purple               : #360f5a ;
    --lavender                  : #eecffe ;
    --grey                      : #7a7a7a ;
    --standard-padding          : 10px ;
    --merriweather-face         : "Merriweather" ;
    --merriweather              : var(--merriweather-face) ;
    --raleway-face              : "Raleway" ;
    --raleway                   : var(--raleway-face) ;
    --roboto-condensed-face     : "Roboto Condensed" ;
    --roboto-condensed          : var(--roboto-condensed-face) ;
}

.black {
    background-color            : black ;
}

.blue {
    background-color            : blue ;
}

.red {
    background-color            : red ;
}

.orange {
    background-color            : #FF7F00 ;
}

.green {
    background-color            : var(--dark-green) ;
}

.purple {
    background-color            : var(--dark-purple) ;
}

.red-f {
    color                       : red ;
}

.black-f {
    color                       : black ;
}

.green-f {
    color                       : var(--dark-green) ;
}

.purple-f, .dark-purple-f {
    color                       : var(--dark-purple) ;
}

.orange-f {
    color                       : #FF7F00 ;
}

/* Main */

html {
    overflow-x                  : hidden ;
}

body, .container {
    width                       : 100% ;
}

/* Main Layout */

#dreyMenu,
#dreyBody {
    box-sizing                  : border-box ;
    display                     : block ;
    height                      : calc(100vh - 66px) ;
    padding                     : var(--standard-padding) ;
}

/*
 * Table toolbar:
 * cancel the 10px dreyBody padding on the top and sides,
 * while leaving the table itself padded.
 */

#tableTopbar {
    background-color            : var(--dark-green) ;
    box-sizing                  : border-box ;
    margin                      :
        calc(-1 * var(--standard-padding))
        calc(-1 * var(--standard-padding))
        5px
        calc(-1 * var(--standard-padding)) ;
    padding                     : 0 ;
    width                       : auto ;
}

/* Mobile override */

@media (max-width: 600px) {
    #dreyBody {
        height                      : auto ;
        /* allow body to flow normally */
    }
}

#dreyBody {
    background-color            : var(--light-green) ;
    overflow-y                  : scroll ;
}

/* General Styling */

body, h2, input, select, th, td {
    font-family                 : var(--raleway) ;
    font-size                   : 12px ;
}

.tableView td {
    vertical-align              : top ;
    font-family                 : var(--roboto-condensed) ;
    padding                     : 3px 5px ;
}

/*
 * Table View owns its horizontal overflow.
 */

.tableViewScroll {
    box-sizing                  : border-box ;
    max-width                   : 100% ;
    overflow-x                  : auto ;
    overflow-y                  : visible ;
    width                       : 100% ;
    -webkit-overflow-scrolling  : touch ;
}

.tableViewScroll .tableView {
    width                       : 100% ;
    min-width                   : 100% ;
    table-layout                : auto ;
}

/*
 * Real Table View headings remain in normal table flow.
 *
 * Vertical stickiness is handled by the cloned strip outside
 * the horizontal scrolling container.
 */

#tableHeaderRow th {
    position                    : static ;
    background-color            : var(--light-green) ;
}

/*
 * Special Invoice / Asset functions use exactly the same
 * geometry as the normal row-function buttons.
 */

.tableView .rowButtons .flag,
.tableView .tableFunctionButton {
    align-items                 : center ;
    box-sizing                  : border-box ;
    display                     : inline-flex ;
    justify-content             : center ;
    vertical-align              : top ;
}

h1 {
    font-style                  : italic ;
    font-family                 : var(--merriweather) ;
    margin-bottom               : 0 ;
}

.small {
    font-size                   : 0.85em ;
}

.sumTotalRow td, .sumTotalRow th {
    background-color            : var(--dark-green) ;
    color                       : white ;
}

.flag {
    border-radius               : 5px ;
    color                       : white ;
    font-size                   : 8.5px ;
    display                     : inline-block ;
    margin                      : 2px 0px ;
    padding                     : 2px 3px ;
    white-space                 : nowrap ;
}


.countFlags {
    display                     : inline-flex;
    align-items                 : center;
    height                      : 22px;
    padding                     : 0 8px;
    font-size                   : 11px;
    font-weight                 : 400;
    border-radius               : 5px;
    line-height                 : 1;
}

/* Table Styling */

table {
    border-collapse             : collapse ;
}

td, th {
    border-left                 : 0.9px solid grey ;
    border-right                : 0.9px solid grey ;
}

.headPadding {
    padding                     : 3.5px ;
}

.dataRow:nth-of-type(even) {
    background-color            : var(--lavender) ;
}

/* Bottom/status bar */

#btmBarWrapper {
    align-items                 : center ;
    background                  : #d5d5d5 ;
    border-top                  : 1px solid #bcbcbc ;
    bottom                      : 0 ;
    box-sizing                  : border-box ;
    display                     : flex ;
    height                      : 66px ;
    overflow                    : hidden ;
    position                    : fixed ;
    right                       : 0 ;
    width                       : 75% ;
    z-index                     : 100 ;
}

@media screen and (max-width: 992px) {

    #btmBarWrapper {
        width                   : 83.33333% ;
    }
}

@media screen and (max-width: 600px) {

    #btmBarWrapper {
        width                   : 100% ;
    }
}

#myBtmbar {
    box-sizing                  : border-box ;
    flex                        : 1 1 auto ;
    line-height                 : 22px ;
    height                      : 66px ;
    min-width                   : 0 ;
    overflow                    : hidden ;
    padding                     : 0 8px ;
    cursor                      : pointer ;
}

#myBtmbar .btmBarMessage {
    height                      : 22px ;
    line-height                 : 22px ;
    overflow                    : hidden ;
    text-overflow               : ellipsis ;
    white-space                 : nowrap ;
}

#myBtmbar .btmBarSeverity-important {
    color                       : red ;
}

#myBtmbar .btmBarImportantFlash {
    animation                   : btmBarImportantFlash 0.4s step-end infinite ;
}

@keyframes btmBarImportantFlash {
    50% {
        visibility              : hidden ;
    }
}

#btmBarWrapper.btmBarExpanded {
    height                      : calc(100vh - var(--topbar-height, 0px)) ;
}

#btmBarWrapper.btmBarExpanded #myBtmbar {
    height                      : 100% ;
    overflow-y                  : auto ;
}

#btmBarWrapper.btmBarExpanded #myBtmbar .btmBarMessage {
    height                      : auto ;
    min-height                  : 22px ;
    white-space                 : normal ;
}

body.snipcartOpen
#btmBarWrapper {
    display                     : none ;
}

/*
 * Toast
 *
 * Lives over the right-hand end of the status bar.
 * Width follows content, with a useful minimum and
 * the whole bar as its maximum.
 */

#snackbar {
    align-items                 : center ;
    background                  : #404040 ;
    bottom                      : 0 ;
    box-sizing                  : border-box ;
    color                       : white ;
    display                     : flex ;
    gap                         : 8px ;
    height                      : 66px ;
    justify-content             : flex-start ;
    max-width                   : 100% ;
    min-width                   : min(320px, 100%) ;
    opacity                     : 0 ;
    overflow                    : hidden ;
    padding                     : 0 8px ;
    pointer-events              : none ;
    position                    : absolute ;
    right                       : 0 ;
    transform                   : translateX(0) ;
    transition                  : opacity 0.8s ease ;
    white-space                 : nowrap ;
    width                       : max-content ;
    z-index                     : 1 ;
}

#snackbar.show {
    animation                   : dreyToastRollIn 0.22s ease ;
    opacity                     : 1 ;
    pointer-events              : auto ;
}

@keyframes dreyToastRollIn {

    from {
        transform               : translateX(100%) ;
    }

    to {
        transform               : translateX(0) ;
    }
}

#snackbar.toast-success {
    background                  : var(--dark-green) ;
}

#snackbar.toast-info {
    background                  : #404040 ;
}

#snackbar.toast-warning {
    background                  : #8a5a00 ;
}

#snackbar.toast-error,
#snackbar.toast-critical {
    background                  : #7f1111 ;
}

.dreyToastMessage {
    min-width                   : 0 ;
    overflow                    : hidden ;
    text-overflow               : ellipsis ;
}

.dreyToastAck {
    background                  : rgba(255, 255, 255, 0.14) ;
    border                      : 1px solid rgba(255, 255, 255, 0.55) ;
    border-radius               : 4px ;
    color                       : white ;
    cursor                      : pointer ;
    flex                        : 0 0 auto ;
    font                        : inherit ;
    line-height                 : 18px ;
    margin-left                 : auto ;
    padding                     : 0 6px ;
}

@media (max-width: 600px) {

    #snackbar {
        min-width               : 100% ;
        width                   : 100% ;
    }
}

/* Styling dropdowns with icons */

.selectWrap {
    position                    : relative ;
    display                     : inline-block ;
}

.selectWrap i {
    position                    : absolute ;
    left                        : 10px ;
    top                         : 50% ;
    transform                   : translateY(-50%) ;
    pointer-events              : none ;
    /* allows clicking through to select */
    color                       : #FFFFFF ;
    font-size                   : 14px ;
}

.selectWrap select {
    padding-left                : 25px ;
    /* space for icon */
    appearance                  : none ;
    /* remove default arrow (optional) */
    -webkit-appearance          : none ;
    -moz-appearance             : none ;
    width                       : fit-content ;
    min-width                   : 160px ;
    /* safety */
}

/* News */

.runin {
    line-height                 : 1.6 ;
}

.lead {
    font-family                 : var(--merriweather) ;
    font-style                  : italic ;
    color                       : var(--dark-purple) ;
    float                       : left ;
    font-weight                 : 500 ;
    font-size                   : 2.1em ;
    line-height                 : 1.1 ;
    margin-top                  : 5px ;
    margin-right                : 10px ;
}

/* For filter */

td {
    position                    : relative ;
}

.cellDisplay {
    display                     : inline ;
}

.cellFilter {
    display                     : inline-flex ;
    align-items                 : center ;
    justify-content             : center ;
    margin-left                 : 0.4rem ;
    color                       : #888 ;
    cursor                      : pointer ;
    opacity                     : 0.45 ;
    font-size                   : 0.8em ;
}

td:hover .cellFilter, .cellFilter:hover, .cellFilter:focus {
    color                       : #222 ;
    opacity                     : 1 ;
}

.activeColumnFilter, .nowrap {
    white-space                 : nowrap ;
}

.activeColumnFilter .fa-times {
    margin-left                 : 0.4rem ;
    cursor                      : pointer ;
}

#tableFilter {
    width                       : 120px ;
    box-sizing                  : border-box ;
    background-color            : #174d2b ;
    color                       : #bfffc8 ;
    border                      : 1px solid #bfffc8 ;
    border-radius               : 3px ;
    padding                     : 3px 6px ;
    font                        : inherit ;
    outline                     : none ;
}

#tableFilter::placeholder {
    color                       : #9bd6a4 ;
    opacity                     : 1 ;
}

#tableFilter:focus {
    background-color            : #1d5c35 ;
    border-color                : #e0ffe4 ;
}

/* For inline edit */

.inlineEditRow td {
    padding                     : 0 ;
    border                      : 1px solid #bbb ;
}

.inlineEditField {
    display                     : block ;
    width                       : 100% ;
    height                      : 100% ;
    border                      : 0 ;
    outline                     : 0 ;
    max-width                   : 100% ;
    min-width                   : 0 ;
    margin                      : 0 ;
    padding                     : 3px 0.15em ;
    background                  : transparent ;
    box-sizing                  : border-box ;
}

.inlineEditRow td {
    padding                     : 0 ;
    min-width                   : 0 ;
    overflow                    : hidden ;
    vertical-align              : top ;
    color                       : var(--dark-purple) ;
    background-color            : white ;
}

.inlineEditField:focus {
    background                  : #ffffff ;
    color                       : var(--dark-purple) ;
    outline                     : 2px solid #4b8b3b ;
    outline-offset              : -2px ;
}

.inlineEditRow .inlineEditField {
    display                     : block ;
    width                       : 100% ;
    min-width                   : 0 ;
    max-width                   : 100% ;
    box-sizing                  : border-box ;
    margin                      : 0 ;
}

/* Native selects should resemble plain text */

.inlineEditRow td.inlineSelectCell {
    overflow                    : visible ;
}

.inlineEditRow td.inlineSelectCell select.inlineEditField {
    display                     : block ;
    width                       : calc(100% + 1.2em) ;
    margin-right                : -1.2em ;
    padding                     : 3px 0 ;
    border                      : 0 ;
    outline                     : none ;
    background                  : linear-gradient(to right, transparent calc(100% - 1.2em), #f6f6f6 calc(100% - 1.2em) ) ;
    color                       : inherit ;
    font                        : inherit ;
    line-height                 : inherit ;
    box-sizing                  : border-box ;
    position                    : relative ;
    z-index                     : 2 ;
}

/* Browsers give date controls a large intrinsic width */

.inlineEditRow input[type="date"], .inlineEditRow input[type="datetime-local"] {
    width                       : 100% ;
    min-width                   : 0 ;
    max-width                   : 100% ;
}

/* Prevent selects from expanding their table cell */

.inlineEditRow select.inlineEditField {
    width                       : 100% ;
    min-width                   : 0 ;
    max-width                   : 100% ;
}

/* Locked cells do not force extra width */

.inlineEditLocked {
    width                       : 100% ;
    min-width                   : 0 ;
    padding                     : 3px 0 ;
    box-sizing                  : border-box ;
    text-align                  : center ;
    opacity                     : 0.45 ;
}

.inlineEditRow .rowButtons {
    width                       : 1% ;
    padding                     : 0 ;
    white-space                 : nowrap ;
    overflow                    : visible ;
}

.inlineEditLocked {
    text-align                  : center ;
    opacity                     : 0.45 ;
}

.inlineEditRow textarea {
    min-height                  : 0 ;
    height                      : auto ;
    resize                      : none ;
}

.rowButtons {
    white-space                 : nowrap ;
}

.inlineEditRow input.inlineEditField, .inlineEditRow select.inlineEditField, .inlineEditRow textarea.inlineEditField {
    font                        : inherit ;
}

.inlineEditTextarea {
    display                     : block ;
    width                       : 100% ;
    min-width                   : 0 ;
    max-width                   : 100% ;
    min-height                  : 0 ;
    box-sizing                  : border-box ;
    margin                      : 0 ;
    padding                     : 3px 0.15rem ;
    border                      : 0 ;
    outline                     : 0 ;
    resize                      : none ;
    background                  : transparent ;
    color                       : inherit ;
    font                        : inherit ;
    line-height                 : 1.2 ;
    white-space                 : pre-wrap ;
    word-break                  : break-word ;
    overflow                    : hidden ;
}

.dateField {
    box-sizing                  : border-box ;
    min-width                   : 8.5em ;
}

/* Splash */

.welcome {
    max-width                   : 700px ;
    margin                      : 40px auto ;
    padding                     : 30px ;
    background                  : #fff ;
    border-radius               : 10px ;
    box-shadow                  : 0 0 15px rgba(0, 0, 0, .08) ;
}

.welcome h1 {
    margin-bottom               : 0 ;
}

.welcome h2 {
    margin-top                  : 0 ;
    color                       : #666 ;
    font-weight                 : 400 ;
}

.welcome hr {
    margin                      : 25px 0 ;
}

.welcome ul {
    list-style                  : none ;
    padding                     : 0 ;
}

.welcome ul.bullet {
    list-style                  : none ;
    padding-left                : 0 ;
}

.welcome ul.bullet ul.bullet {
    list-style                  : disc ;
    padding-left                : 24px ;
}

.welcome li {
    padding                     : 0;
    /* padding                     : 6px 0 ; */
}

.welcome .small {
    color                       : #777 ;
    font-size                   : .9em ;
}

.welcome.squirrel {
    padding                     : 0;
    overflow                    : hidden;
    background                  : var(--dark-purple);
}

.welcome.squirrel .squirrelPage {
    box-sizing                  : border-box;
    width                       : 100%;
    margin                      : 0;
    border-radius               : 0;
}

/* Squirrel 404 */

    .squirrelPage {
        background-color            : var(--dark-purple) ;
        border-radius               : inherit;
        display                     : flex;
        flex-direction              : column;
        justify-content             : center;
        align-items                 : center;
        margin                      : 0;
        min-height                  : 60vh;
        text-align                  : center;
        padding                     : 60px;
    }

    .squirrelPage img {
        width                       : 220px;
        max-width                   : 60%;
        height                      : auto;
        margin-bottom               : 30px;
    }

    .squirrelTitle {
        color                       : var(--light-green);
        font-size                   : 1.8em;
        font-weight                 : bold;
        margin-bottom               : 15px;
    }

    .squirrelText {
        font-size                   : 1.1em;
        color                       : var(--light-green);
        max-width                   : 600px;
        line-height                 : 1.5;
    }


    .inlineEditRow.inlineEditActive td {
        background                  : #f4f4f4 ;
        border-top                  : 3px solid var(--inline-source-colour) ;
        border-bottom               : 3px solid var(--inline-source-colour) ;
    }
    
    .inlineEditRow.inlineEditActive td:first-child {
        border-left                 : 6px solid var(--inline-source-colour) ;
    }
    
    .inlineEditRow.inlineEditActive td:last-child {
        border-right                : 6px solid var(--inline-source-colour) ;
    }
    
    /* ==========================================================
       Development Changelog
       ========================================================== */
    
    .changelog {
        max-width                   : 900px ;
        margin                      : 0 auto ;
    }
    
    .changelog details {
        margin                      : 0 0 8px 0 ;
        overflow                    : hidden ;
    
        background                  : #ffffff ;
        border                      : 1px solid #d9e5d3 ;
        border-radius               : 6px ;
    }
    
    .changelog details[open] {
        border-color                : #c7d9bf ;
    }
    
    .changelog summary {
        padding                     : 10px 14px ;
    
        background                  : linear-gradient(
            to bottom,
            #fdfefd,
            #f4f8f1
        ) ;
    
        border-bottom               : 1px solid transparent ;
        cursor                      : pointer ;
        font-size                   : 1.05em ;
        font-weight                 : 600 ;
        list-style                  : none ;
    }
    
    .changelog details[open] summary {
        border-bottom               : 1px solid #d8e5d4 ;
    }
    
    .changelog summary::-webkit-details-marker {
        display                     : none ;
    }
    
    .changelog summary::before {
        content                     : "\25B6" ;
    
        display                     : inline-block ;
        width                       : 18px ;
    
        transition                  : transform 0.2s ;
    }
    
    .changelog details[open] summary::before {
        transform                   : rotate(90deg) ;
    }
    
    /* Latest release */
    
    .changelog .currentVersion {
        background                  : linear-gradient(
            to bottom,
            #fbfef9,
            #f3f9ef
        ) ;
    
        border-color                : #a9ce9f ;
    }
    
    .changelog .currentVersion summary {
        background                  : linear-gradient(
            to bottom,
            #fbfef9,
            #edf7e9
        ) ;
    }
    
    /* Entry contents */
    
    .changelogContent {
        padding                     : 14px 18px 16px 18px ;
    }
    
    .changelogContent p {
        margin                      : 0 0 14px 0 ;
    }
    
    /* All changelog lists */
    
    .changelogContent > ul {
        margin                      : 0 ;
        padding                     : 0 ;
    
        list-style                  : none ;
    }
    
    .changelogContent > ul > li {
        position                    : relative ;
    
        margin                      : 0 ;
        padding                     : 2px 0 2px 24px ;
    
        line-height                 : 1.25 ;
    }
    
    .changelogContent > ul > li::before {
        content                     : "\f00c" ;
    
        position                    : absolute ;
        top                         : 2px ;
        left                        : 0 ;
    
        color                       : #66a343 ;
        font-family                 : "FontAwesome" ;
        font-size                   : 0.95em ;
    }
    
    /* Historical development */
    
    .changelogHistory {
        background                  : linear-gradient(
            to bottom,
            #f9fcff,
            #f5f9fd
        ) ;
    }
    
    .changelogHistory .changelogContent > ul {
        display                     : grid ;
    
        grid-template-columns       : repeat(3, minmax(0, 1fr)) ;
        column-gap                  : 30px ;
        row-gap                     : 2px ;
    }
    
    .changelogFooter {
        margin                      : 14px 0 0 0 ;
    
        color                       : #666 ;
        font-size                   : 0.9em ;
    }
    
    /* Responsive changelog */
    
    @media (max-width: 900px) {
    
        .changelogHistory .changelogContent > ul {
            grid-template-columns   : repeat(2, minmax(0, 1fr)) ;
        }
    
    }
    
    @media (max-width: 650px) {
    
        .changelog summary {
            padding                 : 9px 10px ;
        }
    
        .changelogContent {
            padding                 : 12px ;
        }
    
        .changelogHistory .changelogContent > ul {
            grid-template-columns   : 1fr ;
        }
    
    }
    
    /* ==========================================================
       Historical development
       ========================================================== */
    
    .changelogHistory .changelogContent > ul {
        display                     : grid ;
        grid-template-columns       : repeat(3, minmax(0, 1fr)) ;
        column-gap                  : 30px ;
        row-gap                     : 2px ;
    }
    
    @media (max-width: 900px) {
        .changelogHistory .changelogContent > ul {
            grid-template-columns   : repeat(2, minmax(0, 1fr)) ;
        }
    }
    
    @media (max-width: 650px) {
        .changelogHistory .changelogContent > ul {
            grid-template-columns   : 1fr ;
        }
    }
    
    /* ==========================================================
       All changelog tick lists
       ========================================================== */
    
    .changelogContent ul {
        list-style                  : none ;
        margin                      : 0 ;
        padding                     : 0 ;
    }
    
    .changelogContent li {
        position                    : relative ;
        margin                      : 0 ;
        padding                     : 2px 0 2px 24px ;
        line-height                 : 1.25 ;
    }
    
    .changelogContent li::before {
        content                     : "\f00c" ;
        font-family                 : FontAwesome ;
        color                       : #66a343 ;
        position                    : absolute ;
        left                        : 0 ;
        top                         : 2px ;
        font-size                   : 0.95em ;
    }
    
    /*
     * ------------------------------------------------------------
     * Snagging priority
     * ------------------------------------------------------------
     */
    
    .snagging details > summary {
        padding-left                 : 10px ;
        padding-right                : 10px ;
    }
    
    
    /* 1 — Critical */
    
    .snagging details.snagPriorityCritical > summary {
        background                  : #000 ;
        color                       : #fff ;
    }
    
    .snagging .snagPriorityCritical .snagItemOpen::before {
        content                     : "\f06a" ;
        color                       : #000 ;
    }
    
    
    /* 2 — High */
    
    .snagging details.snagPriorityHigh > summary {
        background                  : #c62828 ;
        color                       : #fff ;
    }
    
    .snagging .snagPriorityHigh .snagItemOpen::before {
        content                     : "\f071" ;
        color                       : #c62828 ;
    }
    
    
    /* 3 — Normal */
    
    .snagging details.snagPriorityNormal > summary {
        background                  : #e67e22 ;
        color                       : #fff ;
    }
    
    .snagging .snagPriorityNormal .snagItemOpen::before {
        content                     : "\f111" ;
        color                       : #e67e22 ;
    }
    
    
    /* 4 — Low */
    
    .snagging details.snagPriorityLow > summary {
        background                  : #f4d03f ;
        color                       : #000 ;
    }
    
    .snagging .snagPriorityLow .snagItemOpen::before {
        content                     : "\f0ab" ;
        color                       : #b7950b ;
    }
    
    
    /* 5 — Future */
    
    .snagging details.snagPriorityFuture > summary {
        background                  : #bfe3f2 ;
        color                       : #000 ;
    }
    
    .snagging .snagPriorityFuture .snagItemOpen::before {
        content                     : "\f017" ;
        color                       : #4d8298 ;
    }
    
    /*
     * Completed snagging item
     */
    
    .snagging .changelogContent .snagItemComplete {
        color                       : #777 ;
    }
    
    .snagging .changelogContent .snagItemComplete::before {
        content                     : "\f00c" ;
        color                       : #4f8a10 ;
    }
    
    /*
     * Snagging parent priority icon
     */
    
    .snagging details > summary {
        display                     : flex ;
        align-items                 : center ;
    }
    
    .snagging .snagPriorityIcon {
        margin-left                 : auto ;
        padding-left                : 8px ;
        padding-right               : 4px ;
        flex                        : 0 0 auto ;
    }
    
    /* ==========================================================
       Normal version entries
       ========================================================== */
    
    .changelog ul {
    
        margin                      : 0;
        padding-left                : 24px;
    
    }
    
    .changelog ul li {
    
        margin                      : 2px 0;
    
    }
    
    /* ==========================================================
       Small footer
       ========================================================== */
    
    .changelogFooter {
    
        margin-top                  : 12px;
        font-size                   : .9em;
        color                       : #666;
    
    }
    
    
/* hero */

.dreyHero {
    background                  : var(--dark-purple) ;
    border-radius               : 0 22px 22px 0 ;
    box-sizing                  : border-box ;
    color                       : white ;
    margin                      : 0 0 28px -30px ;
    padding                     : 24px 40px 28px 40px ;
    text-align                  : center ;
    width                       : calc(100% + 40px) ;
}

.dreyHeroTitle {
    font-family                 : var(--merriweather);
    font-size                   : 2.25rem ;
    font-style                  : italic ;
    line-height                 : 1.2 ;
}

.dreyHeroSubtitle {
    font-size                   : 1.15rem ;
    margin-top                  : 12px ;
}

@media screen and (max-width: 800px) {

    .welcome {
        box-sizing              : border-box ;
        margin-left             : 8px ;
        margin-right            : 8px ;
    }

    .dreyHero {
        border-radius           : 0 14px 14px 0 ;
        margin-left             : -30px ;
        padding                 : 20px ;
        width                   : calc(100% + 30px) ;
    }

    .dreyHeroTitle {
        font-size               : 1.7rem ;
    }

    .dreyHeroSubtitle {
        font-size               : 1rem ;
    }
}

.bbExclam {
    background                  : #fff8d8 ;
    font-size                   : 0.95em ;
    padding                     : 4px ;
}

.bbExclam::before {
    color                       : var(--dark-green) ;
    content                     : "\f06a" ;
    font-family                 : FontAwesome ;
    font-size                   : 1.1em ;
    margin-right                : 10px ;
}

/*
 * ------------------------------------------------------------
 * BBCode document content
 * ------------------------------------------------------------
 */

.bbTableWrap {
    margin                      : 1rem 0 ;
    max-width                   : 100% ;
    min-width                   : 0 ;
    overflow-x                  : auto ;
}

.bbTable {
    border-collapse             : collapse ;
    table-layout                : fixed ;
    width                       : 100% ;
    max-width                   : 100% ;

    font-size                   : calc(1em - 1px) ;
}

.bbTable th,
.bbTable td {
    border-bottom               : 1px solid rgba(0, 0, 0, 0.12) ;
    font-family                 : 'Roboto Condensed', sans-serif ;
    overflow-wrap               : anywhere ;
    padding                     : 0.45rem 0.55rem ;
    text-align                  : left ;
    vertical-align              : top ;
    word-break                  : normal ;
}

.bbTable th {
    background                  : var(--dark-green) ;
    color                       : #fff ;
    font-weight                 : 700 ;
}

.bbTable tr:nth-child(even) td {
    background                  : rgba(0, 0, 0, 0.025) ;
}

.dreyContentSection .articleContent > * {
    min-width                   : 0 ;
}

/*
 * Documentation sections explicitly marked as single-column.
 * Used for wide reference/table sections such as the appendices.
 */

.dreyContentSection--singleColumn .articleContent {
    column-count                : 1 !important ;
    columns                     : auto !important ;
    display                     : block ;
    width                       : 100% ;
}

.dreyContentSection--singleColumn .bbTableWrap {
    width                       : 100% ;
    max-width                   : 100% ;
}

.bbCallout {
    border-left                 : 5px solid ;
    margin                      : 1rem 0 ;
    padding                     : 0.65rem 0.8rem ;
}

.bbCallout--green {
    background                  : var(--light-green) ;
    border-color                : var(--dark-green) ;
}

.bbCallout--purple {
    background                  : #f0e8f7 ;
    border-color                : var(--dark-purple) ;
}

.bbCallout--red {
    background                  : #fbe8e8 ;
    border-color                : #b32d2d ;
}

.bbCallout--yellow {
    background                  : #fff8d8 ;
    border-color                : #b28a00 ;
}

/* Table summary chips */

.tableViewSummaryChips {
    align-items                 : center ;
    display                     : flex ;
    flex-wrap                   : wrap ;
    gap                         : 8px ;
    margin                      : 14px 14px 10px ;
}

.tableViewSummaryChip {
    align-items                 : center ;
    background                  : #dcffdb ;
    border                      : 1px solid #195600 ;
    border-radius               : 10px ;
    color                       : #195600 ;
    display                     : inline-flex ;
    font-family                 : var(--roboto-condensed-face) ;
    font-size                   : 1rem ;
    gap                         : 8px ;
    padding                     : 6px 11px ;
}

.tableViewSummaryChip i {
    font-size                   : 1.1rem ;
}

.tableViewSummaryChip span {
    display                     : flex ;
    flex-direction              : column ;
    line-height                 : 1.05 ;
}

.tableViewSummaryChip small {
    font-family                 : var(--raleway-face) ;
    font-size                   : 0.66rem ;
    font-weight                 : 700 ;
    letter-spacing              : 0.04em ;
    text-transform              : uppercase ;
}

/* for sort caret */
.tableSortCaret {
    margin-left                 : 0.3em;
    font-size                   : 0.75em;
    opacity                     : 0.65;
    vertical-align              : middle;
}

/* =========================================================
   RECORD VIEW TOPBAR
   ========================================================= */

.recordView .tableHeader {
    background                  : #a65300 ;
    margin                      :
        0
        calc(-1 * var(--standard-padding))
        18px
        calc(-1 * var(--standard-padding)) ;
    padding                     : 8px 10px ;
}

.recordView .recordViewToolbar {
    background                  : transparent ;
    border                      : 0 ;
    border-radius               : 0 ;
    margin                      : 0 ;
    overflow                    : visible ;
    width                       : 100% ;
}

.recordView .recordViewToolbar .tableToolbarSection {
    background                  : transparent ;
    min-height                  : 28px ;
    padding                     : 2px ;
}

.recordView .recordViewToolbar .tableToolbarIconButton {
    align-self                  : center ;
    border-left                 : 0 ;
    gap                         : 4px ;
    min-height                  : 24px ;
    min-width                   : 0 ;
    padding                     : 0 ;
}

.recordView .recordViewToolbar .tableToolbarIconButton i {
    flex                        : 0 0 auto ;
}

.recordView .recordViewToolbar .tableToolbarIconButton span {
    line-height                 : 1 ;
}

.recordViewHeader .schemaToolbarEyebrow {
    margin-bottom               : 2px ;
}

.recordView .recordViewToolbar
.tableToolbarIconButton
+ .tableToolbarIconButton {
    border-left                 : 1px solid rgba(255, 255, 255, 0.28) ;
    margin-left                 : 8px ;
    padding-left                : 10px ;
}

/* =========================================================
   RECORD VIEW
   ========================================================= */

.recordViewTable th:last-child,
.recordViewTable td:last-child {
    min-width                   : 3.5rem ;
}

.recordViewTable .rowButtons,
.recordViewTable .inlineEditRow .rowButtons {
    width                       : 3.5rem ;
    min-width                   : 3.5rem ;
    max-width                   : 3.5rem ;
    white-space                 : normal ;
    overflow                    : visible ;
    text-align                  : center ;
}

.recordViewTable .rowButtons .tableFunctionButton,
.recordViewTable .inlineEditRow .rowButtons .tableFunctionButton {
    display                     : inline-block ;
    width                       : fit-content ;
    min-width                   : 0 ;
    max-width                   : none ;
    height                      : auto ;
    min-height                  : 0 ;
    padding                     : 2px 3px ;
    margin                      : 2px 1px ;
    line-height                 : normal ;
    text-align                  : center ;
}

.recordViewTable .tableFunctionButton:disabled {
    opacity                     : 0.3 ;
    cursor                      : default ;
}

.recordViewTable .recordViewActionPlaceholder {
    opacity                     : 0.3 ;
    pointer-events              : none ;
}

.recordViewTable .recordViewActionPlaceholder {
    display                     : block ;
    width                       : fit-content ;
    margin                      : 2px auto ;
    opacity                     : 0.3 ;
    pointer-events              : none ;
}

/* =========================================================
   RECORD JOURNAL
   ========================================================= */

.recordJournal {
    margin-top: 1.5rem;
}

.recordJournal > h2 {
    margin: 0 0 0.5rem 0;

    font-family: var(--merriweather);
    font-style: italic;

    color: #214700;
}

.recordJournalTimeline {
    border-top: 2px solid #214700;
}


/* One journal entry */

.recordJournalEntry {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.6rem;

    padding: 0.55rem 0.65rem;

    border-bottom: 1px solid rgba(33, 71, 0, 0.18);
}

.recordJournalEntry:nth-child(even) {
    background: rgba(220, 255, 219, 0.28);
}

.recordJournalEntry:hover {
    background: #dcffdb;
}


/* Icon */

.recordJournalIcon {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding-top: 0.08rem;
}

.recordJournalIcon i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.55rem;
    height: 1.55rem;

    border-radius: 50%;

    background: #214700;
    color: white;

    font-size: 0.75rem;
}


/* Main content */

.recordJournalContent {
    min-width: 0;
}

.recordJournalHeading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;

    margin: 0;
}

.recordJournalHeading strong {
    font-family: var(--raleway);
    font-size: 0.9rem;
    font-weight: 700;

    color: #214700;
}

.recordJournalMeta {
    font-family: var(--roboto-condensed);
    font-size: 0.75rem;

    color: #666;
}

.recordJournalUser {
    margin-left: 0.5rem;

    color: #360f5a;
    font-weight: 600;
}


/* Field */

.journalFieldName {
    display: inline-block;

    margin-top: 0.25rem;
    margin-right: 0.5rem;

    font-family: var(--roboto-condensed);
    font-size: 0.78rem;
    font-weight: 700;

    color: #360f5a;
}


/* Before -> After */

.journalChange {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    margin-top: 0.25rem;

    font-family: var(--roboto-condensed);
    font-size: 0.8rem;
}

.journalOldValue,
.journalNewValue {
    padding: 0.2rem 0.45rem;

    border-radius: 3px;

    background: #f2f2f2;
}

.journalNewValue {
    background: #dcffdb;
}

.journalOldValue small,
.journalNewValue small {
    display: inline;

    margin-right: 0.3rem;

    font-size: 0.68rem;
    font-weight: 700;

    text-transform: uppercase;
    opacity: 0.6;
}

.journalChangeArrow {
    color: #360f5a;
    font-size: 0.8rem;
}


/* Single-value Add/Delete entries */

.journalSingleValue {
    display: block;
}

.journalSingleValue .journalOldValue,
.journalSingleValue .journalNewValue {
    display: inline-block;
}


/* Text description */

.journalLogText {
    margin-top: 0.25rem;

    font-family: var(--roboto-condensed);
    font-size: 0.78rem;

    color: #555;
}


/* JSON record snapshots */

.journalSnapshot {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.7rem;
}

.journalSnapshotField {
    display: inline-flex;
    gap: 0.25rem;
}

.journalSnapshotField strong {
    color: #360f5a;
}

.journalSnapshotField strong::after {
    content: ":";
}


/* Misc */

.journalBlank {
    opacity: 0.5;
    font-style: italic;
}

.recordJournalEmpty {
    padding: 0.65rem;

    font-family: var(--roboto-condensed);
    font-size: 0.85rem;

    background: #dcffdb;
}

.invoicePayPage {
    max-width: 54rem;
}

.invoicePayCard {
    margin-top: 1rem;
    padding: 1.4rem;
}

.invoicePayBalance {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.invoicePayBalance span {
    font-size: 1rem;
}

.invoicePayBalance strong {
    font-size: 1.65rem;
    color: var(--dark-purple, #360f5a);
}

.invoicePayCard label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.invoicePayAmount {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.invoicePayAmount span {
    font-size: 1.3rem;
    font-weight: 700;
}

.invoicePayAmount input {
    width: 8rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #aaa;
    border-radius: 0.35rem;
    background: #fff;
    font: inherit;
    font-size: 1.15rem;
}

.invoicePayAmount input:focus {
    outline: 2px solid #360f5a;
    outline-offset: 2px;
}

.invoicePayWarning {
    margin: 0.75rem 0 1rem;
    font-weight: 600;
}

.invoicePayWarningError {
    color: #8a1f11;
}

#invoicePayButton {
    margin-top: 0.25rem;
}

#invoicePayButton:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.swalInvoiceFieldRow {
    align-items                 : stretch ;
    box-sizing                  : border-box ;
    display                     : flex ;
    gap                         : 6px ;
    margin                      : 1em 2em ;
    width                       : calc(100% - 4em) ;
}


.swalInvoiceFieldRow .swal2-input {
    box-sizing                  : border-box ;
    flex                        : 1 1 auto ;
    margin                      : 0 ;
    min-width                   : 0 ;
    width                       : auto ;
}


.swalInvoiceFieldButton {
    align-items                 : center ;
    background                  : var(--dark-green) ;
    border                      : 0 ;
    border-radius               : .25em ;
    color                       : #fff ;
    cursor                      : pointer ;
    display                     : inline-flex ;
    flex                        : 0 0 auto ;
    font                        : inherit ;
    justify-content             : center ;
    min-width                   : 52px ;
    padding                     : 0 .8em ;
}


.swalInvoiceReferenceButton {
    min-width                   : 132px ;
}


.swalInvoiceFieldButton:hover {
    background                  : #2b5c00 ;
}


/* =========================================================
   TABLE VIEW FUNCTION / ACTION LAYOUT
   ========================================================= */

/*
 * Invoice / Asset special function buttons.
 */

.tableView .tableFunctionButton {
    align-items                 : center ;
    box-sizing                  : border-box ;
    display                     : inline-flex ;
    justify-content             : center ;
    vertical-align              : top ;
}


/*
 * View + Send are allowed on the same line.
 */

.tableView a.tableFunctionInline {
    display                     : inline-flex ;
    vertical-align              : top ;
    width                       : auto ;
}

.functionGap {
    display                     : inline-block ;
    width                       : 1px ;
}


/*
 * Normal row action buttons.
 */

.rowButtons {
    white-space                 : nowrap ;
}

.rowButtonsGrid {
    display                     : grid ;
    grid-template-columns       : repeat(2, max-content) ;
    gap                         : 3px ;
    width                       : max-content ;
}

.inlineEditRow .rowButtonsPane {
    padding                     : 3px 2px 3px 5px ;
}

.tableView .rowButtonsGrid .flag {
    height                      : auto ;
    margin                      : 0 ;
    min-height                  : 0 ;
    min-width                   : 0 ;
    padding                     : 2px 3px ;
    width                       : auto ;
}

/*
 * Desktop Table View fits the available body width.
 * Mobile keeps its horizontally scrollable auto-layout below.
 */

@media screen and (min-width: 701px) {

    .tableViewScroll .tableView {
        min-width                   : 0 ;
        table-layout                : auto ;
    }
}

@media screen and (max-width: 700px) {

    /* =========================================================
       TABLE CONTAINER
       ========================================================= */

    .tableViewScroll {
        box-sizing                  : border-box ;
        width                       : 100% ;
        max-width                   : 100% ;
        overflow-x                  : auto ;
        overflow-y                  : visible ;
        overscroll-behavior-x       : contain ;
        -webkit-overflow-scrolling  : touch ;
    }

    .tableViewScroll .tableView {
        width                       : 100% ;
        table-layout                : auto ;
    }


    /* =========================================================
       NORMAL HEADERS / CELLS
       ========================================================= */

    .tableView th {
        white-space                 : normal ;
        overflow-wrap               : normal ;
        word-break                  : normal ;
        hyphens                     : none ;
    }
    
    .tableView td:not(.rowButtons):not(.tableFunctionCell) {
        max-width                   : 220px ;
        white-space                 : normal ;
        overflow-wrap               : break-word ;
        word-break                  : normal ;
    }

    .tableView td:not(.rowButtons):not(.tableFunctionCell) .cellDisplay {
        white-space                 : normal ;
        overflow-wrap               : break-word ;
        word-break                  : normal ;
    }


    /* =========================================================
       FUNCTION COLUMNS
       ========================================================= */

    .tableView td.tableFunctionCell {
        min-width                   : 74px ;
        width                       : 74px ;
        max-width                   : 110px ;
        white-space                 : normal ;
    }

    .tableView td.tableFunctionCell .cellDisplay {
        white-space                 : normal ;
    }

        
    /* =========================================================
       FROZEN ROW ACTIONS
       ========================================================= */
    
    .tableView td.rowButtons,
    #tableHeaderRow th:last-child {
        box-sizing                  : border-box ;
        position                    : sticky ;
        right                       : 0 ;
    
        width                       : 46px ;
        min-width                   : 46px ;
        max-width                   : 46px ;
    
        /*
         * Frozen-column divider.
         * Use an inset shadow rather than border-left because
         * collapsed table borders don't reliably move with sticky.
         */
        border-left                 : 0 ;
        box-shadow                  :
            inset 3px 0 0 var(--dark-green),
            -10px 0 10px -6px rgba(33, 71, 0, 0.45) ;
    }
    
    .tableView td.rowButtons::before,
    #tableHeaderRow th:last-child::before {
        content                     : "" ;
        position                    : absolute ;
        top                         : 0 ;
        bottom                      : 0 ;
        left                        : -14px ;
        width                       : 14px ;
    
        background                  : linear-gradient(
            to left,
            rgba(33, 71, 0, 0.32) 0%,
            rgba(33, 71, 0, 0.16) 45%,
            rgba(33, 71, 0, 0) 100%
        ) ;
    
        pointer-events              : none ;
    }
    
    /* Body frozen cells */
    
    .tableView td.rowButtons {
        position                    : sticky ;
        right                       : 0 ;
        z-index                     : 10 ;
    
        width                       : 0 ;
        min-width                   : 0 ;
        max-width                   : 0 ;
    
        padding                     : 0 ;
        border                     : 0 ;
        overflow                    : visible ;
    }
    
    
    /*
     * Actual visible frozen pane.
     */
    
    .tableView .rowButtonsPane {
        box-sizing                  : border-box ;
        position                    : absolute ;
        top                         : 0 ;
        right                       : 0 ;
    
        width                       : 46px ;
        min-width                   : 46px ;
        height                      : 100% ;
    
        padding                     : 3px 2px 3px 5px ;
    
        background-color            : var(--light-green) ;
    
        box-shadow                  :
            inset 3px 0 0 var(--dark-green),
            -12px 0 12px -8px rgba(33, 71, 0, 0.40) ;
    }
    
    
    /*
     * Preserve alternating row colour.
     */
    
    .tableView .dataRow:nth-of-type(even) .rowButtonsPane {
        background-color            : var(--lavender) ;
    }
    
    .tableView .dataRow:nth-of-type(odd) .rowButtonsPane {
        background-color            : var(--light-green) ;
    }
    
    /* Preserve row colouring */
    
    .tableView .dataRow:nth-of-type(even) td.rowButtons {
        background-color            : var(--lavender) ;
    }
    
    .tableView .dataRow:nth-of-type(odd) td.rowButtons {
        background-color            : var(--light-green) ;
    }
    
    /* Frozen header cap */
    
    #tableHeaderRow th:last-child {
        z-index                     : 20 ;
        padding                     : 0 ;
        background-color            : var(--light-green) ;
    }

    /* =========================================================
       INLINE EDIT
       ========================================================= */

    .inlineEditRow .inlineEditField {
        min-width                   : 0 ;
        max-width                   : 100% ;
        min-height                  : 32px ;
    }

    .inlineEditRow textarea.inlineEditField {
        min-height                  : 38px ;
    }
}

/*
 * JSON Table View cells
 *
 * JSON frequently contains long unbroken strings which would
 * otherwise force the whole table wider than its container.
 */

.tableView td.jsonCell {
    max-width                   : 220px ;
    white-space                 : normal ;
}

.tableView td.jsonCell .cellDisplay {
    white-space                 : normal ;
    overflow-wrap               : anywhere ;
    word-break                  : normal ;
}

.tableView td .cellDisplay {
    overflow-wrap               : break-word ;
    word-break                  : normal ;
    white-space                 : normal ;
}

.tableView td.journalSnapshotCell {
    width                       : 200px ;
    min-width                   : 200px ;
    max-width                   : 200px ;
    white-space                 : normal ;
}

.tableView td.journalSnapshotCell .cellDisplay {
    display                     : block ;
    white-space                 : normal ;
    overflow-wrap               : anywhere ;
    word-break                  : normal ;
}

.tableRequiredMarker {
    margin-left                 : 0.12em ;
}

.tableLockedMarker {
    margin-left                 : 0.3em ;
    opacity                     : 0.55 ;
    font-size                   : 0.7em ;
}

.tableCurrentYear {
    color                       : var(--grey) ;
    opacity                     : 0.7 ;
}

.dreyContentSection > h2 {
    align-items                  : center ;
    background                   : var(--light-green) ;
    border-left                  : 2px solid var(--purple) ;
    border-bottom                : 3px solid var(--purple) ;
    border-bottom-left-radius    : 6px ;
    display                      : grid ;
    grid-template-columns        : 1fr 1fr ;

    margin-top                   : 1.5rem ;
    margin-left                  : -12px ;
    margin-right                 : -8px ;
    padding                      : 0.4rem 0.65rem ;

    font-size                    : calc(1em + 5px) ;
    font-weight                  : 700 ;
}

.dreyContentSectionTitle {
    padding-right                : 1rem ;
}

.dreyContentSectionStrapline {
    font-size                    : 10px ;
    font-style                   : italic ;
    font-weight                  : 400 ;
    padding-left                 : 1rem ;
}

.dreyContentSection .articleContent h3 {
    font-family                 : inherit ;
    font-size                   : inherit ;
    font-style                  : normal ;
    font-weight                 : 700 ;
    line-height                 : inherit ;
    margin                      : 1.25rem 0 0.4rem ;
}

.changelogPrivate {
    color                       : #b00020;
}

#dreyLoadingSweep {
    height                      : 3px ;
    left                        : 0 ;
    opacity                     : 0 ;
    overflow                    : hidden ;
    pointer-events              : none ;
    position                    : fixed ;
    right                       : 0 ;
    top                         : 0 ;
    transition                  : opacity 0.12s ease ;
    z-index                     : 9999 ;
}

#dreyLoadingSweep::before {
    background                  : var(--light-green) ;
    content                     : "" ;
    height                      : 100% ;
    left                        : -30% ;
    position                    : absolute ;
    top                         : 0 ;
    width                       : 30% ;
}

#dreyLoadingSweep.loading {
    opacity                     : 1 ;
}

#dreyLoadingSweep.loading::before {
    animation                   : dreyLoadingSweep 0.8s linear infinite ;
}

@keyframes dreyLoadingSweep {
    from {
        left                    : -30% ;
    }

    to {
        left                    : 100% ;
    }
}

/*
 * ------------------------------------------------------------
 * Documentation PDF viewer
 * ------------------------------------------------------------
 */

.documentationViewer {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 120px);
    padding: 18px;
    box-sizing: border-box;
}

.documentationViewerHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.documentationViewerHeader h1 {
    margin: 0;
}

.documentationViewerFrame {
    width: 100%;
    flex: 1 1 auto;
    min-height: 72vh;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: #fff;
}

@media (max-width: 700px) {

    .documentationViewer {
        padding: 10px;
    }

    .documentationViewerHeader {
        align-items: flex-start;
        flex-direction: column;
    }

    .documentationViewerFrame {
        min-height: 68vh;
    }

}

.documentationViewerActions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bbImage {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5em auto 0.4em;
}

/* =========================================================
   SweetAlert buttons
   ========================================================= */

.swal2-actions .swal2-confirm,
.swal2-actions .swal2-cancel,
.swal2-actions .swal2-deny {
    align-items                 : center ;
    border-radius               : 5px !important ;
    box-sizing                  : border-box ;
    display                     : inline-flex ;
    font-family                 : var(--raleway-face), sans-serif !important ;
    font-size                   : 0.8rem !important ;
    font-weight                 : 700 !important ;
    gap                         : 0.35rem ;
    height                      : 2rem !important ;
    justify-content             : center ;
    line-height                 : 1 !important ;
    margin                      : 0.25rem !important ;
    min-height                  : 0 !important ;
    padding                     : 3px 9px !important ;
}


/* Primary / confirm */

.swal2-actions .swal2-confirm {
    background                  : var(--dark-purple) !important ;
    border                      : 1px solid var(--dark-purple) !important ;
    color                       : #ffffff !important ;
}

.swal2-actions .swal2-confirm:hover {
    background                  : var(--dark-green) !important ;
    border-color                : var(--dark-green) !important ;
}


/* Secondary / cancel */

.swal2-actions .swal2-cancel {
    background                  : #ffffff !important ;
    border                      : 1px solid var(--dark-green) !important ;
    color                       : var(--dark-green) !important ;
}

.swal2-actions .swal2-cancel:hover {
    background                  : var(--light-green) !important ;
}

/* deny */

.swal2-actions .swal2-deny:hover {
    background                  : var(--light-green) !important ;
}

/*
 * Minimal W3CSS grid compatibility.
 *
 * Retained locally to support the existing Drey shell columns
 * without a runtime dependency on w3schools.com.
 */

.w3-col {
    float                       : left ;
    width                       : 100% ;
}

.w3-col.s12 {
    width                       : 99.99999% ;
}

@media (min-width: 601px) {

    .w3-col.m2 {
        width                   : 16.66666% ;
    }

    .w3-col.m10 {
        width                   : 83.33333% ;
    }

}

@media (min-width: 993px) {

    .w3-col.l3 {
        width                   : 24.99999% ;
    }

    .w3-col.l9 {
        width                   : 74.99999% ;
    }

}

/* =========================================================
   ABOUT DREY BUILD SPLASH
   ========================================================= */

.aboutDreyBuild {
    background                  : var(--dark-green) ;
    border-radius               : 10px ;
    color                       : var(--light-green) ;
    display                     : grid ;
    gap                         : 18px ;
    grid-template-columns       : minmax(180px, 0.8fr) minmax(280px, 1.2fr) ;
    margin                      : 0 0 24px 0 ;
    overflow                    : hidden ;
    padding                     : 22px 24px ;
}

.aboutDreyBuildIntro {
    align-self                  : center ;
}

.aboutDreyBuildEyebrow {
    font-family                 : var(--roboto-condensed) ;
    font-size                   : 0.68rem ;
    font-weight                 : 700 ;
    letter-spacing              : 0.12em ;
    opacity                     : 0.68 ;
}

.aboutDreyBuildVersion {
    font-family                 : var(--merriweather) ;
    font-size                   : 2rem ;
    font-style                  : italic ;
    line-height                 : 1.15 ;
    margin-top                  : 4px ;
}

.aboutDreyBuildSnapshot {
    font-size                   : 0.72rem ;
    margin-top                  : 8px ;
    opacity                     : 0.65 ;
}

.aboutDreyBuildStats {
    display                     : grid ;
    gap                         : 10px ;
    grid-template-columns       : repeat(2, minmax(0, 1fr)) ;
}

.aboutDreyBuildStat {
    background                  : rgba(255, 255, 255, 0.08) ;
    border                      : 1px solid rgba(220, 255, 219, 0.25) ;
    border-radius               : 8px ;
    display                     : grid ;
    grid-template-columns       : auto 1fr ;
    padding                     : 12px ;
}

.aboutDreyBuildStat > i {
    font-size                   : 1.2rem ;
    grid-row                    : 1 / span 3 ;
    margin                      : 4px 10px 0 0 ;
    opacity                     : 0.7 ;
}

.aboutDreyBuildStat strong {
    color                       : white ;
    font-family                 : var(--roboto-condensed) ;
    font-size                   : 1.4rem ;
    line-height                 : 1 ;
}

.aboutDreyBuildStat span {
    font-size                   : 0.72rem ;
}

.aboutDreyBuildStat small {
    font-size                   : 0.65rem ;
    margin-top                  : 3px ;
    opacity                     : 0.65 ;
}

.aboutDreyBuildBreakdown {
    border-top                  : 1px solid rgba(220, 255, 219, 0.18) ;
    display                     : flex ;
    flex-wrap                   : wrap ;
    gap                         : 8px 18px ;
    grid-column                 : 1 / -1 ;
    padding-top                 : 10px ;
}

.aboutDreyBuildBreakdown span {
    font-family                 : var(--roboto-condensed) ;
    font-size                   : 0.72rem ;
    opacity                     : 0.75 ;
}

.aboutDreyBuildBreakdown b {
    color                       : white ;
    margin-right                : 3px ;
}


@media screen and (max-width: 700px) {

    .aboutDreyBuild {
        grid-template-columns   : 1fr ;
        padding                 : 18px ;
    }

    .aboutDreyBuildStats {
        grid-template-columns   : 1fr 1fr ;
    }

}


@media screen and (max-width: 430px) {

    .aboutDreyBuildStats {
        grid-template-columns   : 1fr ;
    }

}

.articleContent > h2 {
    align-items                  : center ;
    background                   : var(--light-green) ;
    border-left                  : 2px solid var(--purple) ;
    border-bottom                : 3px solid var(--purple) ;
    border-bottom-left-radius    : 6px ;
    display                      : block ;

    margin-top                   : 1.5rem ;
    margin-left                  : -12px ;
    margin-right                 : -8px ;
    padding                      : 0.4rem 0.65rem ;

    font-family                  : inherit ;
    font-size                    : calc(1em + 5px) ;
    font-style                   : normal ;
    font-weight                  : 700 ;
}

.articleNavigation .tableToolbarTableSelect select {
    color: var(--black);
}