:root {
    /* some calc simplification */
    --btn-2-offsets: calc(var(--btn-offset) * 2);
    --btn-2-outlines: calc(var(--btn-outline) * 2);
    --btn-core-height: calc(var(--btn-height) - var(--btn-2-offsets) - var(--btn-2-outlines));
    --btn-icon: 20px;
}

* {
    padding: 0px;
    margin: 0px;
}

html {
    box-sizing: border-box;
}

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

body {
    font-family: sans-serif;
}

main {
    background: var(--bg);
    min-height: 100vh;
}

main p, main li {
    font-size: 0.9em;
}

main li {
    margin-bottom: calc(var(--ms) * 0.75);
}

main ol, main ul {
    list-style-position: inside;
    margin: var(--ms) 0px;
}

code[class~=block] {
    color: var(--code-fg);
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--code-radius);
    margin: var(--ms) 0px;
    padding: var(--ms);
}

code[class~=inline] {
    border: 1px solid var(--code-border);
    background: var(--code-bg-inline);
    border-radius: 4px;
    display: inline-block;
    margin: 5px 2px;
    padding: 2px 5px;
}

.sw-banner, .sw-main, .sw-section {
    display: grid;
    grid-template-rows: auto;
    grid-template-areas: ". content_area .";
    transition: grid-template-columns 0.5s ease;
}

.sw-banner {
    background: gray;
    color: white;
    min-height: 320px;
    max-height: 520px;
    padding: 20px 0px;
    text-align: center;
    width: 100%;
}

.sw-section {
    min-height: var(--section-min-height);
    width: 100%;
}

.sw-sidebar-show {
    grid-template-columns:
        minmax(calc(var(--ms) + var(--sidebar-full)), calc(var(--ml) + var(--sidebar-full)))
        1fr
        minmax(var(--ms), var(--mr));
}

.sw-sidebar-hide {
    grid-template-columns:
        minmax(var(--ms), var(--ml))
        1fr
        minmax(var(--ms), var(--mr));
}

.sw-contents {
    grid-area: content_area;
}


/* Framework CSS follows: */

.panes, .wrap {
    display: flex;
}

.btns, .panes, .wrap {
    flex-wrap: wrap;
}

.btns {
    display: inline-flex;
}

.btns.center {
    justify-content: center;
}

.btns.right {
    justify-content: flex-end;
}

.btn {
    align-items: center;
    color: var(--btn-fg);
    display: inline-flex;
    background: var(--btn-bg);
    font-size: 14px;
    font-weight: bold;
    justify-content: center;
    max-width: var(--screen-width-outer-ms);
    min-height: var(--btn-height);
    min-width: var(--btn-height);
    padding: 0px var(--btn-padding);
    text-decoration: none;
    transition: all 0.5s ease;
}

.btn:hover {
    color: var(--btn-hover-fg);
    cursor: pointer;
    background: var(--btn-hover-bg);
}


.btn > div {
    align-items: center;
    background: transparent;
    color: var(--btn-fg);
    display: inline-flex;
    flex: 1;
    justify-content: center;
    min-height: var(--btn-height);
    min-width: var(--btn-height);
    transition: all 0.5s ease;
}

.btn.rim {
    background: transparent;
    color: var(--btn-bg);
    border: var(--btn-outline) solid transparent;
    padding: var(--btn-offset);
}

.btn.rim:hover {
    border-color: var(--btn-hover-bg);
    color: var(--btn-hover-bg);
}

.btn.rim > div {
    background: var(--btn-bg);
    color: var(--btn-fg);
    min-height: var(--btn-core-height);
    min-width: var(--btn-core-height);
    padding: 0px var(--btn-padding);
}

.btn:hover > div, .btn.rim:hover > div {
    color: var(--btn-hover-fg);
}

.btn.rim:hover > div { 
    background: var(--btn-hover-bg);
}

.btn.fillet {
    border-radius: var(--btn-fillet);
}

.btn.fillet > div {
    border-radius: calc(var(--btn-fillet) - var(--btn-offset));
}

.btn.capsule {
    border-radius: calc(var(--btn-height) * 0.5);
    padding: 0px var(--btn-padding);
}

.btn.capsule > div {
    border-radius: calc(var(--btn-core-height) * 0.5);
}

.btn.capsule.rim {
    padding: 0px var(--btn-offset);
}

/* small buttons */
.btns.small .btn, .btn.small {
    font-size: small;
    min-height: calc(var(--btn-height) * 0.8);
    min-width:  calc(var(--btn-height) * 0.8);
    padding: 0px calc(var(--btn-padding) * 0.8);
}

.btns.small .btn > div, .btn.small > div {
    font-size: small;
    min-height: calc(var(--btn-core-height) * 0.8);
    min-width:  calc(var(--btn-core-height) * 0.8);
}

.btns.small .btn.capsule, .btn.small.capsule {
    border-radius: calc((var(--btn-height) * 0.8) * 0.5);
}

.btns.small .btn.capsule > div, .btn.small.capsule > div {
    border-radius: calc((var(--btn-core-height) * 0.8) * 0.5);
}

.btns.small .btn.rim, .btn.small.rim {
    padding: var(--btn-offset);
}

.btns.small .btn.rim > div, .btn.small.rim > div {
    padding: var(--btn-offset) calc(var(--btn-padding) * 0.8);    
}


/* x-small buttons */
.btns.x-small .btn, .btn.x-small {
    font-size: x-small;
    min-height: calc(var(--btn-height) * 0.6);
    min-width:  calc(var(--btn-height) * 0.6);
    padding: 0px calc(var(--btn-padding) * 0.6);

}

.btns.x-small .btn > div, .btn.x-small > div {
    font-size: x-small;
    min-height: calc(var(--btn-core-height) * 0.6);
    min-width:  calc(var(--btn-core-height) * 0.6);
}

.btns.x-small .btn.capsule, .btn.x-small.capsule {
    border-radius: calc((var(--btn-height) * 0.6) * 0.5);
}

.btns.x-small .btn.capsule > div, .btn.x-small.capsule > div {
    border-radius: calc((var(--btn-core-height) * 0.6) * 0.5);
}

.btns.x-small .btn.rim, .btn.x-small.rim {
    padding: var(--btn-offset);
}

.btns.x-small .btn.rim > div, .btn.x-small.rim > div {
    padding: var(--btn-offset) calc(var(--btn-padding) * 0.6);    
}

/* btn icons */
.btn i {
    align-items: center;
    display: flex;
    font-family: 'Material Symbols Rounded';
    font-size: var(--btn-icon);
    font-style: normal;
    font-weight: normal;
    justify-content: center;
}

.small i {
    font-size: 20px;
}

.x-small i {
    font-size: 18px;
}


/*-------------------------
 * Deep blue theme buttons
 * ----------------------*/
.btn.d-blue {
    background: var(--dark-blue);
}

.btn.d-blue:hover,
.btn.d-blue:hover > div,
.btn.rim.d-blue:hover > div{
    background: black;
}

.btn.rim.d-blue {
    background: transparent;
    color: var(--dark-blue);
}

.btn.rim.d-blue > div {
    background: var(--dark-blue);
}

.btn.rim.d-blue:hover {
    border-color: black;
    color: black;
}       


/*----------------------
 * brown theme buttons
 * --------------------*/
.btn.brown {
    background: var(--brown);
}

.btn.brown:hover,
.btn.brown:hover > div, 
.btn.rim.brown:hover > div{
    background: var(--dark-brown);
}

.btn.rim.brown {
    background: transparent;
    color: var(--brown);
}

.btn.rim.brown > div {
    background: var(--brown);
}

.btn.rim.brown:hover {
    border-color: var(--dark-brown);
    color: var(--dark-brown);
}


/*----------------------
 * Gray theme buttons
 * --------------------*/
.btn.gray, .btn.grey {
    background: darkgray;
}

.btn.gray:hover,
.btn.grey:hover,
.btn.gray:hover > div,
.btn.grey:hover > div,
.btn.rim.gray:hover > div,
.btn.rim.grey:hover > div {
    background: black;
}   

.btn.rim.gray, .btn.rim.grey {
    background: transparent;
    color: darkgray;
}
    
.btn.rim.gray > div, .btn.rim.grey > div {
    background: darkgray;
}
    
.btn.rim.gray:hover, .btn.rim.grey:hover {
    border-color: black;
    color: black;;
}
    

/*-----------------------
 * Green theme buttons
 * --------------------*/
.btn.green {
    background: var(--green);
}

.btn.green:hover,
.btn.green:hover > div,
.btn.rim.green:hover > div{
    background: var(--dark-green);
}

.btn.rim.green {
    background: transparent;
    color: var(--green);
}

.btn.rim.green > div {
    background: var(--green);
}

.btn.rim.green:hover {
    border-color: var(--dark-green);
    color: var(--dark-green);
}


/*-----------------------
 * Orange theme buttons
 * --------------------*/
.btn.orange {
    background: var(--orange);
}

.btn.orange:hover,
.btn.orange:hover > div,
.btn.rim.orange:hover > div{
    background: var(--dark-orange);
}

.btn.rim.orange {
    background: transparent;
    color: var(--orange);
}

.btn.rim.orange > div {
    background: var(--orange);
}

.btn.rim.orange:hover {
    border-color: var(--dark-orange);
    color: var(--dark-orange);
}


/*-----------------------
 * Purple theme buttons
 * --------------------*/
.btn.purple {
    background: var(--purple);
}

.btn.purple:hover,
.btn.purple:hover > div,
.btn.rim.purple:hover > div{
    background: var(--dark-purple);
}

.btn.rim.purple {
    background: transparent;
    color: var(--purple);
}

.btn.rim.purple > div {
    background: var(--purple);
}

.btn.rim.purple:hover {
    border-color: var(--dark-purple);
    color: var(--dark-purple);
}


/*-----------------------
 * Red theme buttons
 * --------------------*/
.btn.red {
    background: var(--red);
}

.btn.red:hover,
.btn.red:hover > div,
.btn.rim.red:hover > div{
    background: var(--dark-red);
}

.btn.rim.red {
    background: transparent;
    color: var(--red);
}

.btn.rim.red > div {
    background: var(--red);
}

.btn.rim.red:hover {
    border-color: var(--dark-red);
    color: var(--dark-red);
}


/*-----------------------
 * White theme buttons
 * --------------------*/
.btn.white {
    background: white;
}

.btn.white:hover,
.btn.white:hover > div,
.btn.rim.white:hover > div{
    background: var(--ash-accent);
}

.btn.rim.white {
    background: transparent;
    color: white;
}

.btn.rim.white > div {
    background: white;
}

.btn.rim.white:hover {
    border-color: var(--ash-accent);
    color: var(--ash-accent);
}


/*-----------------------------------------------------
 * Pin aside object buttons & alternative flex classes 
 * --------------------------------------------------*/
.aside {
    display: inline-flex;
    gap: 10px;
    max-width: var(--screen-width-inner-ms);
    max-height: 25px;
}

.btns > .aside.emerge {
    align-items: center;
    overflow: hidden;
    transition: width 0.5s ease;
    width: 0px;
}

.btns:hover > .aside.emerge {
    width: 70px;
}

/* Contextual Buttons */

.i-btn {
    align-items: center;
    background: transparent;
    border: 2px solid grey;
    border-radius: 12px;
    color: grey;
    display: flex;
    font-family: 'Material Symbols Rounded';
    height: 24px;
    justify-content: center;
    text-decoration: none;
    transition:
        background 0.5s ease,
        border-color 0.5s ease, 
        color 0.5s ease;
    width: 24px;
}

.i-btn:hover {
    color: black;
    border-color: black;
    cursor: pointer;
}

.i-btn.green {
    border-color: var(--green);
    color: var(--green);
}

.i-btn.green:hover {
    border-color: var(--dark-green);
    color: var(--dark-green);
}

.i-btn.red {
    border-color: var(--red);
    color: var(--red);
}

.i-btn.red:hover {
    border-color: maroon;
    color: maroon;
}

.i-btn.fill {
    color: var(--beige-ash);
    background: grey;
    border: none;
}

.i-btn.fill:hover  {
    color: white;
    background: black;
}

.i-btn.fill.green {
    background: var(--green);
}

.i-btn.fill.green:hover {
    background: var(--dark-green);
}

.i-btn.fill.red {
    background: #9a5a5a;
}

.i-btn.fill.red:hover {
    background: maroon;
}


/*----------------------------------------------------------------------------/
 *  Default/Base Form Theme                                                   /
 *  -------------------------------------------------------------------------*/

form .frame {
    border: 1px solid var(--form-border);
    border-radius: calc(0.5 * var(--ms));
    padding: var(--ms);
}

form .body, form .item, form .footer, form .header {
    border-left: 1px solid var(--form-border);
    border-right: 1px solid var(--form-border);
    padding: calc(var(--ms) * 0.5) var(--ms);
}

form .item {
    border-bottom: 1px solid var(--form-hr);
    color: black;
    font-size: 0.85em;
}

form .item:hover {
    background: var(--form-highlight);
    color: var(--dark-green);
    font-weight: bold;
}

form .footer, form .item:last-child {
    border-bottom-left-radius: calc(0.5 * var(--ms));
    border-bottom-right-radius: calc(0.5 * var(--ms));
    border-bottom: 1px solid var(--form-border);
    padding: calc(var(--ms) * 0.5) var(--ms) var(--ms);
}

form .header {
    background: var(--form-header-bg);
    border-top-left-radius: calc(0.5 * var(--ms));
    border-top-right-radius: calc(0.5 * var(--ms));
    border-top: 1px solid var(--form-border);
    padding: var(--ms) var(--ms) calc(var(--ms) * 0.5);
}

form .frame, form .body, form .footer, form .item {
    background: var(--form-bg);
}

form .header ~ fieldset {
    outline: none;
    border: none;
}

form .header h4 {
    font-size: 0.9em;
}

form .ghost {
    display: none;
}

form .toggle {
    margin-right: calc(var(--ms) * 0.75);
}

form .toggle:checked ~ dd {
    font-weight: bold;
}


/*----------------------------------------------------------------------------/
 *  Messages, Warning & Information Boxes                                     /
 *  -------------------------------------------------------------------------*/

.sw-msg-bg, .msgbox {
    background: var(--msg-bg);
}

.msgbox {
    border-radius: 7px;
    display: flex;
    font-size: 0.87em;
}

.msgbox div:first-child {
    align-items: flex-start;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    display: flex;
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    justify-content: center;
    padding: var(--msg-padding);
    width: var(--btn-height);
}

.msgbox div:last-child {
    display: flex;
    flex: 1;
    padding: var(--msg-padding);
}

.msg-info {
    border: 1px dashed var(--msg-border);
    color: grey;
    margin: var(--ms) 0px;
}


/*----------------------------------------------------------------------------/
 *  Input & Widget Elements                                                   /
 *  -------------------------------------------------------------------------*/

input, select, textarea {
    width: 100%;
}

input[type="email"], 
input[type="number"], 
input[type="password"], 
input[type="text"],
input[type="file"],
.tag-f dd,
.tag dd
{
    font-family: sans-serif;
    font-size: 0.9em;
    height: var(--wgt-height);
    padding: 5px 10px;
}

input[name="toggle"]:checked ~ .show {
    display: flex;
}

textarea, select {
    font-family: sans-serif;
    font-size: 0.9em;
    padding: 5px 10px;
}

input[type="checkbox"] {
    height: calc(0.5 * var(--wgt-height));
    width: calc(0.5 * var(--wgt-height));
}


/*----------------------------------------------------------------------------/
 *  Element Adjustment Classes                                                /
 *  -------------------------------------------------------------------------*/

.ai-center {
    align-items: center;
}

.ai-end {
    align-items: flex-end;
}

.ai-full {
    align-items: stretch;
}

.ai-start {
    align-items: flex-start;
}

.block {
    display: block;
}

.center {
    text-align: center;
}

.column {
    flex-direction: column;
}

.dim {
    color: gray;
}

.fillet-7 {
    border-radius: 7px;
}

.fillet-10 {
    border-radius: 10px;
}

.flex {
    display: flex;
}

.f-1 {
    flex: 1;
}

.f-2 {
    flex: 2;
}

.f-3 {
    flex: 3;
}

.f-4 {
    flex: 4;
}

.f-5 {
    flex: 5;
}

.f-6 {
    flex: 6;
}

.f-7 {
    flex: 7;
}

.fresh {
    color: var(--fresh);
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-40 {
    gap: 40px;
}

.gap-x-5 {
    column-gap: 5px;
}

.gap-x-10 {
    column-gap: 10px;
}

.gap-x-20 {
    column-gap: 20px;
}

.gap-x-40 {
    column-gap: 40px;
}

.gap-y-5 {
    row-gap: 5px;
}

.gap-y-10 {
    row-gap: 10px;
}

.gap-y-20 {
    row-gap: 20px;
}

.gap-y-40 {
    row-gap: 40px;
}

.h-100p, .h-full {
    height: 100%;
}

.h-wgt {
    height: var(--wgt-height);
    max-height: var(--wgt-height);
}

.jc-center {
    justify-content: center;
}

.jc-end {
    justify-content: flex-end;
}

.jc-full {
    justify-content: space-between;
}

.jc-start {
    justify-content: flex-start;
}

.max-w-25p {
    max-width: calc(25% + var(--tag-column-gap));
}

.max-w-30p {
    max-width: calc(30% + var(--tag-column-gap));
}

.m-0, .m-none .m-zero {
    margin: 0px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-40 {
    margin-top: 40px;
}


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

.my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.min-w-100 {
    min-width: 100px;
}

.min-w-75p, .min-w-3qtr {
    min-width: 75%;
}

.min-w-50p, .min-w-half {
    min-width: 50%;
}

.min-w-25p, .min-w-qtr {
    min-width: 25%;
}

.p-0, .p-none, .p-zero {
    padding: 0px;
}

.p-5 {
    padding: 5px;
}

.p-10 {
    padding: 10px;
}

.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.p-20 {
    padding: 20px;
}

.pt-5 {
    padding-top: 5px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-20 {
    padding-top: 20px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pr-20 {
    padding-right: 20px;
}

.pl-20 {
    padding-left: 20px;
}

.screen-width-outer-ms, .max-w-scr-out {
    max-width: var(--screen-width-outer-ms);
}

.screen-width-middle-ms, .max-w-scr-mid {
    max-width: var(--screen-width-middle-ms);
}

.screen-width-inner-ms, .max-w-scr-in {
    max-width: var(--screen-width-inner-ms);
}

.scroll-to {
    scroll-margin-top: 200px;
}

.shadow {
    box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.2);
}

.min-w-scr-out {
    min-width: var(--screen-width-outer-ms);
}

.min-w-scr-mid {
    min-width: var(--screen-width-middle-ms);
}

.min-w-scr-in {
    min-width: var(--screen-width-inner-ms);
}

.underline {
    text-decoration: underline;
}

.w-full, .w-100p, .w-1 {
    width: 100%;
}

.w-3qtr, .w-75p {
    width: 75%;
}

.w-half, .w-50p {
    width: 50%;
}

.w-qtr, .w-25p {
    width: 25%;
}

.w-2wgt {
    width: calc(2 * var(--wgt-height));
}

.w-50 {
    width: 50px;
}

.w-70 {
    width: 70px;
}

.w-80 {
    width: 80px;
}

.w-100 {
    width: 100px;
}

.w-120 {
    width: 120px;
}
   

/*----------------------------------------------------------------------------/
 *  Colour Themes for Panes                                                   /
 *  -------------------------------------------------------------------------*/

.bg-white {
    background: white;
}

/* Blue Theme */
.theme-blue {
    background: var(--blue-pale);
}

.theme-blue .accent {
    background: var(--blue-accent);
}

.theme-blue hr, .theme-blue .hr-t {
    border-color: var(--blue);
}

.theme-blue h4 {
    color: var(--blue);
}

/* Brown Theme */
.theme-brown {
    background: var(--brown-pale);
}

.theme-brown .accent {
    background: var(--brown-accent);
}

.theme-brown hr, .theme-brown .hr-t {
    border-color: var(--brown);
}

.theme-brown h4 {
    color: var(--brown);
}

/* Gray Theme */
.theme-gray {
    background: var(--beige-ash);
}

.theme-gray .accent {
    background: var(--ash-accent);
}

.theme-gray hr, .theme-gray .hr-t {
    border-color: gray;
}

.theme-gray h4 {
    color: gray;
}

/* Green Theme */
.theme-green {
    background: var(--green-pale);
}

.theme-green .accent {
    background: var(--green-accent);
}

.theme-green hr, .theme-green .hr-t {
    border-color: var(--green);
}

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

/* Orange Theme */
.theme-orange {
    background: var(--orange-pale);
}

.theme-orange .accent {
    background: var(--orange-accent);
}

.theme-orange hr, .theme-orange .hr-t {
    border-color: var(--orange);
}

.theme-orange h4 {
    color: var(--orange);
}

/* Purple Theme */
.theme-purple {
    background: var(--purple-pale);
}

.theme-purple .accent {
    background: var(--purple-accent);
}

.theme-purple hr, .theme-purple .hr-t {
    border-color: var(--purple);
}

.theme-purple h4 {
    color: var(--purple);
}

.theme-blue dt, 
.theme-brown dt,
.theme-gray dt,
.theme-green dt,
.theme-orange dt,
.theme-purple dt {
    font-size: 0.8em;
}

.theme-blue dd, 
.theme-blue h4, 
.theme-brown dd,
.theme-brown h4,
.theme-gray dd,
.theme-gray h4,
.theme-green dd,
.theme-green h4,
.theme-orange dd,
.theme-orange h4,
.theme-purple dd,
.theme-purple h4 {
    font-size: 0.9em;
}

/*----------------------------------------------------------------------------/
 *  Special Headings                                                          /
 *  -------------------------------------------------------------------------*/

.h3-boldless {
    font-size: 1.2em;
}

.mono {
    font-family: monospace;
}

/*----------------------------------------------------------------------------/
 *  Static and Expandable Panes                                               /
 *---------------------------------------------------------------------------*/

.expand {
    background: var(--expand-bg);
    border: 2px solid var(--expand-bg);
    box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0);
    margin-bottom: 5px;
    padding: calc(0.7 * var(--ms)) var(--ms);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.expand:hover {
    border-color: grey;
    box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.2);
}

.expand .highlight {
    font-size: 0.80em;
}

.expand .subject {
    align-items: center;
    display: flex;
    font-size: 1.1em;
    font-weight: bold;
    gap: 5px;
}

.expand .arrow {
    color: var(--expand-bg);
    font-family: 'Material Symbols Rounded';
    font-size: 1.7em;
    transition: color 0.5s ease;
}

.expand label:hover {
    cursor: pointer;
}

.expand .text {
    color: var(--btn-bg);
}

.expand .show, .expand input[name="toggle"] {
    display: none;
}

label:hover .arrow {
    color: black;
}

label .icon {
    color: grey;
    font-family: 'Material Symbols Rounded';    
    font-size: 1.7em;
}

/*-------------------------
 * Meta Structure
 * -----------------------*/

.fillet-7 .meta {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.fillet-7 .meta ~ .pane,
.fillet-7 .meta ~ .row:last-child {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.fillet-10 .meta {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.fillet-10 .meta ~ .pane,
.fillet-10 .meta ~ .row:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.meta, .meta ~ .pane {
    padding: var(--ms);
}

.meta ~ .pane {
    background: white;
}

/*----------------------------------------------------------------------------/
 *  Default Stripe/Band Theme                                                /
 *  -------------------------------------------------------------------------*/

.stripes .row,
.stripes tr {
    padding: calc(0.5 * var(--ms)) var(--ms) calc(0.5 * var(--ms)) var(--ms);
}

.stripes .row:nth-child(odd),
.stripes tr:nth-child(odd) {
    background: var(--child-odd-bg); 
}

.stripes .row:first-child,
.stripes tr:first-child {
    padding-top: var(--ms);
}

.stripes .row:last-child,
.stripes tr:last-child {
    padding-bottom: var(--ms);
}

.stripes .meta ~ .row:nth-child(even) {
    background: var(--child-odd-bg);
}

.stripes .meta ~ .row:nth-child(odd) {
    background: var(--child-even-bg);
}

/* META-ITEM THEMES */

/*--------------
 * Blue Meta-Band Theme
 * --------------------*/

.theme-blue .meta {
    background: var(--meta-bg);
    border-top: 1px solid var(--meta-border);
}

.theme-blue .meta,
.theme-blue .meta ~ .pane,
.theme-blue .meta ~ .row {
    border-left: 1px solid var(--meta-border);
    border-right: 1px solid  var(--meta-border);
}

.theme-blue .meta ~ .pane {
    border-bottom: 1px solid var(--meta-border);
}

.theme-blue .meta h4,
.theme-blue .meta ~ .pane h4, 
.theme-blue .meta ~ .row h4 {
    color: var(--chathams-blue);
}

.theme-blue .meta ~ .row:last-child {
    border-bottom: 1px solid var(--meta-border);
}


/*--------------
 * Green Meta-Band Theme
 * --------------------*/

.theme-green .meta {
    background: var(--green-accent);
    border-top: 1px solid var(--green);
}

.theme-green .meta,
.theme-green .meta ~ .pane,
.theme-green .meta ~ .row {
    border-left: 1px solid var(--green);
    border-right: 1px solid  var(--green);
}

.theme-green .meta ~ .pane {
    border-bottom: 1px solid var(--green);
}

.theme-green .meta h4, 
.theme-green .meta ~ .pane h4, 
.theme-green .meta ~ .row h4 {
    color: var(--dark-green);
}

.theme-green .meta ~ .row:last-child {
    border-bottom: 1px solid var(--green);
}

.theme-green.stripes .meta ~ .row:nth-child(odd) {
    background: var(--green-pale);
}

/*----------------------*/

.pane {
    min-width: var(--screen-width-inner-ms);
}

.pane-form {
    background: var(--subform-bg);
    border: 1px solid var(--highlight-ring);
    border-radius: 7px;
    padding: 20px;
    width: 75%;
    min-width: var(--screen-width-middle-ms);
}



/*----------------------------------------------------------------------------/
 *  User Photographs                                                          /
 *  -------------------------------------------------------------------------*/

.photo {
    width: 100%;
}

.photo .frame {
    background: var(--photo-frame);
    border-radius: 0px;
    padding: 5%;
}

.photo img {
    width: 100%;
}

.photo.portrait {
    min-width: var(--screen-width-inner-ms);
    max-width: calc(1.5 * var(--screen-width-outer-ms));
    min-height: calc(1.5 * var(--screen-width-outer-ms));
    max-height: calc(2.25 * var(--screen-width-outer-ms));
}

.photo.avatar,
.photo.passport {
    min-width: calc(0.5 * var(--screen-width-outer-ms));
    max-width: var(--screen-width-outer-ms);
}

.photo.avatar img,
.photo.passport img {
    aspect-ratio: 1;    
}

.photo.portrait img {
    aspect-ratio: 2 / 3;
}



/*----------------------------------------------------------------------------/
 *  Check Lists (c-list)                                                      /
 *  -------------------------------------------------------------------------*/

.c-form {
    display: none;
}

.c-list {
    flex: 1;
    min-width: var(--screen-width-outer-ms);
}

.c-list .hrow {
    font-size: 1.1em;
    font-weight: bold;
    padding: 5px;
}

.c-list .drow {
    border-radius: 7px;
    box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 5px;
    padding: 10px;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.c-list .drow:hover {
    box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.2);
}

.c-list .unsaved:hover {
    border-color: black;
}

.c-list .saved {
    background: var(--color-saved-bg);
    border: 1px solid var(--color-saved);
}

.c-list .saved:hover {
    border-color: var(--color-saved-hover);
}

.c-list .saved .c-label {
    font-weight: bold;
}

.c-list .unsaved {
    background: white;
    border: 1px solid gray;
}

.c-pane {
    display: flex;
    flex: 15;
    flex-direction: column;
}

.c-toggle {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

.c-pane .c-hidden {
    display: none;
}

.c-text {
    font-size: 1em;
}

.c-hidden:checked + .c-form {
    display: block;
}


/*----------------------------------------------------------------------------/
 *  Tables                                                                    /
 *  -------------------------------------------------------------------------*/

.tbl {
    border-top: 2px solid var(--tbl-hr-fg);
    margin-bottom: 10px;
}

.tbl .row {
    /* horizontal rule table row */
    border-bottom: 1px solid gray;
}

.tbl .row:nth-child(even) {
    background: var(--tbl-bg-alt);
}

.tbl .row:nth-child(odd) {
    background: var(--tbl-bg);
}

.hr-t {
    border-top: 2px solid;
}

.hr-r {
    border-right: 2px solid;
}

.hr-b {
    border-bottom: 2px solid;
}

.hr-l {
    border-left: 2px solid;
}

/*----------------------------------------------------------------------------/
 *  Highlighting                                                              /
 *---------------------------------------------------------------------------*/

.hl {
    border-radius: 7px;
    display: inline-block;
    font-size: 0.85em;
    padding: 3px 7px;
}

.hl-warn, .hl-drop, .hl-red {
    color: var(--dark-red);
}

.hl-warn, .hl-red {
    background: var(--highlight-red);
}

.hl-green {
    background: var(--highlight-green);
}

.hl-orange {
    background: var(--highlight-orange);
}

.hl-purple {
    background: var(--highlight-purple);
}

.hl-override {
    background: var(--highlight-orange);
}

.hl-inverse {
    background: darkgrey;
    color: white;
}

.hl-ring {
    /*background: var(--color-parent);*/
    border: 1px solid var(--highlight-ring);
}


/*----------------------------------------------------------------------------/
 *  Widgets, Labelled/tag Widgets and Input Elements                       /
 *---------------------------------------------------------------------------*/

.flat dd {
    align-items: center;
    background: var(--beige-ash);
    display: flex;
    font-weight: bold;
    height: auto;
    min-height: var(--wgt-height);
}

.tag-f, .tag {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tag-f {
    flex: 1;
}

.tag-f select, 
.tag-f textarea, 
.tag-f input,
.tag select, 
.tag textarea, 
.tag input {
    font-family: sans-serif;
    font-size: 0.9em;
}

.tag-f select, .tag select {
    height: 128px;
}

.tag-f a, .tag a {
    font-size: 0.9em;
}

.tag-f label, .tag-f dt, .tag label, .tag dt {
    display: block;
    font-size: 0.8em;
    margin: var(--label-mt) 0px var(--label-mb) 0px;
}

.tag-f .small, .tag .small {
    font-size: 0.75em;
}

.tag-f.compact label, .tag-f.compact dt, .tag.compact label, .tag.compact dt {
    margin: calc(0.5 * var(--label-mt)) 0px calc(0.5 * var(--label-mb)) 0px;
}

.tag-group {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--tag-column-gap);
    row-gap: var(--tag-row-gap);
}

.wgt-check, .wgt-check-3qtr, .wgt-check-75p {
    flex: unset;
}

.tag.wgt-check, .tag.wgt-check-3qtr, .tag.wgt-check-75p {
    justify-content: start;
}

.wgt-check-3qtr input[type='checkbox'],
.wgt-check-75p input[type='checkbox'] {
    height: calc(0.75 * var(--wgt-height));
    width: calc(0.75 * var(--wgt-height));
}

.wgt-btn {
    display: flex;
    height: var(--wgt-height);
    align-self: center;
}

.wgt-small {
    min-width: calc(0.5 * var(--screen-width-inner-ms));
    max-width: var(--screen-width-outer-ms);
}



/*----------------------------------------------------------------------------/
 *  Search Forms                                                              /
 *---------------------------------------------------------------------------*/

.search { 
    background: var(--search-bg);
    padding: var(--ms);
} 

.search-border {
    border: 1px solid var(--search-border);
}

.bg-search {
    background: var(--search-bg);
}

.search fieldset {
    border-radius: 7px;
    margin-bottom: calc(0.5 * var(--ms));
    padding-top: var(--ms); 
    padding-right: var(--ms); 
    padding-left: var(--ms); 
} 
 
.search input[type="radio"] {
    height: 15px; 
    width: 15px; 
}


/*----------------------------------------------------------------------------/
 *  Debugging Classes                                                         /
 *---------------------------------------------------------------------------*/

.debug {
    border: 1px dashed red;
}


/* iPads and Tablets */

@media screen and (max-width: 768px) {
    .sw-sidebar-show {
        grid-template-columns:
            minmax(calc(var(--ms) + var(--sidebar-dock)), calc(var(--ml) + var(--sidebar-dock)))
            1fr
            minmax(var(--ms), var(--mr));
    }    
}


/* Mobile Devices, Phones */

@media screen and (max-width: 480px) {
    .sw-sidebar-show {
        grid-template-columns: 
            minmax(var(--ms), var(--ml)) 
            1fr 
            minmax(var(--ms), var(--mr));
    }
}