:root {
    
    --primary: #1a8fcc;
    --primary-dark: #156e9e;
    --primary-darker: #0f4e71;
    --primary-light: #34a7e5;
    --primary-lighter: #61baea;
    --primary-ds: rgba(26, 143, 204, 0.25);
    --secondary: #add525;
    --secondary-dark: #8cad1f;
    --secondary-darker: #698217;
    --secondary-light: #b7dd3c;
    --secondary-lighter: #c7e467;
    --secondary-ds: rgba(199, 228, 103, 0.25);
    
    
    --background-color: #EEE;
    --text-color: #111;
    --text-color-soft: #555;

    --pane-radius: 10px;

    --content-pane-raidus: 15px;
    --content-pane-bg: #CCC;
    --content-sub-pane-bg: #DDD;
    --content-sub-pane-bg-strong: #EEE;
    --content-sub-pane-bg-stronger: #D8D8D8;

    --app-frame-padding: 10px;
    --adj-ui-gap: 5px;
    --content-pane-gap: var(--adj-ui-gap);
    --side-nav-content-gap: var(--adj-ui-gap);

    --danger: #c70000;
    --danger-bg: #ff6b6b;

    --fail: #c70000;
    --error: #c70000;
    --success: #00700f;

    --warning: #ffc107;
    --pending: #888;

    --status-danger: #ff6b6b;

    --status-danger-dark: #660000;
    --status-danger-light: #ff0000;

    --status-fail: #ff6b6b;
    --status-fail-text: #c70000;

    --status-error: #ff6b6b;
    --status-error-text: #c70000;

    --status-success: #add525;
    --status-success-text: #00700f;

    --status-warning-dark: #b38600;;
    --status-warning: #ffc107;

    --status-pending: #888;

    /* --status-error: #990000; */
    /* --status-fail: #990000; */

    --main-font-size: 14px;
    --heading-font-size: 14px;

    --pill-color: var(--primary-lighter);
    --pill-color-hover: var(--primary-light);

    --pill-radius: 4px;

    --pane-label-img: 18px;
    --pane-label-radius: 15px;
    --pane-label-height: 28px;
    --pane-label-image-div-line: #444;
    /* --pane-label-border: #444; */
    --pane-label-border: rgba(128, 128, 128, 0.3);

    --pane-label-text: #444;
    /* --pane-label-bg: #BBB; */
    --pane-label-bg: rgba(255, 255, 255, 0.8);

    --pane-label-min-width: 100px;

    --pane-top-padding: 10px;

    --pane-label-icon-color: var(--icon-colour);

    --pane-header-img: 30px;
    --pane-header-font-size: 20px;

    --content-anim-dur: 0.3s;
    --content-anim-pos: 40px;

    --stripe-shade: rgba(0, 0, 0, 0.1);
    --list-hover: rgba(0, 0, 0, 0.4);

    --roux-icon-dim: 24px;

    --link-col: var(--primary);
}

[data-theme="dark"] {
    --background-color: #111;
    --text-color: #EEE;
    --text-color-soft: #AAA;

    --content-pane-bg: #333;
    --content-sub-pane-bg: #444;
    --content-sub-pane-bg-strong: #111;
    --content-sub-pane-bg-stronger: #222;

    --pill-color: var(--primary-darker);
    --pill-color-hover: var(--primary-dark);

    --danger: #ff6b6b;
    --danger-bg: #c70000;

    --fail: #ff6b6b;
    --error: #ff6b6b;
    --success: #6bff6c;

    --warning: #ffc107;
    --pending: #888;

    --status-danger: #c70000;

    --status-fail: #c70000;
    --status-fail-text: #ff6b6b;

    --status-error: #c70000;
    --status-error-text: #ff6b6b;

    --status-success: #00700f;
    --status-success-text: #add525;

    --status-warning: #ffc107;
    --status-pending: #888;

    --pane-label-bg: rgba(0, 0, 0, 0.8);
    --pane-label-image-div-line: #BBB;
    /* --pane-label-border: rgba(128, 128, 128, 1); */
    --stripe-shade: rgba(255, 255, 255, 0.145);
    --list-hover: rgba(255, 255, 255, 0.4);

    --link-col: var(--secondary-light);
}

a {
    text-decoration: none;
    color: var(--secondary);
}

hr.small
{
    margin-top: 3px;
    margin-bottom: 3px;
}

body {
    margin: 0px;
    color: var(--text-color);
    background-color: var(--background-color);
    transition: color 0.4s, background-color 0.4s;
    /* padding: var(--app-frame-padding); */

    font-family: 'MuseoSans-300';
    /* overflow-x: hidden; */
    position: fixed;

    max-width: 100vw;
    max-height: 100dvh;
    
    width: 100vw;
    /* height: 100vh; */
    height: 100dvh;
    overflow: hidden;
}
/*
body.fullscreen-active
{
    max-height: 100lvh;
    height: 100lvh;
}
*/

body:has(.modal.open) {
    overflow-y: auto;
}

.app-frame
{
    display: flex;
    flex-direction: row;
    width: calc(100vw - calc(2 * var(--app-frame-padding)));
    max-width: calc(100vw - calc(2 * var(--app-frame-padding)));
    height: calc(100dvh - calc(2 * var(--app-frame-padding)));
    position: relative;

    overflow: hidden;
    overscroll-behavior: none;

    padding: var(--app-frame-padding);
}

.side-nav
{
    margin-right: var(--adj-ui-gap);

    display: flex;
    flex-direction: column;
    width:fit-content;

    transition: display 0.4s;
}

.nav-control
{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav-control.vertical
{
    flex-direction: column;
    align-items: flex-start;
}

.side-nav-control-top
{
    width: 100%;
    height: 60px;
}

.side-nav-control-centre
{
    flex-grow: 1;
    width: 100%;

    align-content: center;
}

.side-nav-control-bottom
{
    width: 100%;
    height:fit-content;
}

.page-frame
{
    flex-grow: 1;
    flex-shrink: 1;
    width: 500px; /*flex grow shrink needs a fixed width*/
    /* max-width: 100%; */

    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    
    
    position: relative;
}

.top-nav
{
    display: flex;
    flex-direction: row;
    width: 100%;

    max-width: 100%;
    height: fit-content;
    align-items: center;
    margin: 0px 0px var(--adj-ui-gap) 0px;
}

.top-nav-control-left
{

}

.top-nav-control-centre
{
    flex-grow: 1;
    justify-content: center;
    
    display: flex;
    flex-direction: row;
}

.top-nav-control-right
{

}

.content-area
{
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0px;
    display: flex;
    flex-direction: row;

    width: 100%;
    max-width: 100%;
    position: relative;
}

.content-layout
{
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0px;
    display: none;
    flex-direction: row;

    width: 100%;

    opacity: 0;

    transform: translateX(calc(var(--content-anim-pos) *-1));

    position: relative;
    transition: opacity var(--content-anim-dur) ease-out, transform var(--content-anim-dur) ease-out;

}

.content-layout.active
{
    display: flex;
    opacity: 1;
    transform: translateX(0);
}

.content-layout.showing
{
    display: flex;
    opacity: 0;
    transform: translateX(var(--content-anim-pos));
}

.content-layout.showing.from-right
{
    transform: translateX(calc(var(--content-anim-pos) *-1));
}

.content-layout.clearing
{
    opacity: 0;
    transform: translateX(calc(var(--content-anim-pos) *-1));
}

.content-layout.clearing.from-right
{
    transform: translateX(var(--content-anim-pos));
}

.content-column
{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.console-area
{
    height:fit-content;
    min-height: 110px;

    border-radius: var(--content-pane-raidus);
    background-color: var(--content-pane-bg);
    transition: color 0.4s, background-color 0.4s;
    box-sizing: border-box;

    margin: 0px var(--content-pane-gap) var(--adj-ui-gap) 0px;
    width: calc(100% - var(--content-pane-gap));
}

.bottom-nav
{
    display: flex;
    flex-direction: row;
    height:fit-content;

    width: 100%;

    /*margin: var(--adj-ui-gap) 0px 0px 0px;*/
}

.bottom-nav-control-left
{

}

.bottom-nav-control-centre
{
    flex-grow: 1;
    justify-content: center;
    
    display: flex;
    flex-direction: row;
}

.bottom-nav-control-right
{

}


.content-pane
{
    border-radius: var(--content-pane-raidus);
    background-color: var(--content-pane-bg);
    transition: color 0.4s, background-color 0.4s;
    margin: 0px var(--content-pane-gap) var(--content-pane-gap) 0px;
    width: calc(100% - var(--content-pane-gap));
    /*width: calc(100% - var(--content-pane-margin-width-comp));*/
    
    height: calc(100% - var(--content-pane-gap));
    /* max-height: calc(100% - var(--content-pane-gap)); */
    
    /*max-height: calc(100% - var(--content-pane-margin-height-comp));*/
    overflow-y: auto;
    box-sizing: border-box;
    padding: var(--pane-top-padding) 0px 0px 0px;

    display: flex;
    flex-direction: column;
    position: relative;
}

.content-pane.clear-pane
{
    padding: 0px;
    background: transparent;
}

/* .content-pane.tabs
{
    background-color: unset;
} */

.content-pane:has(.pane-label)
{
    padding: 0px;
}

.sub-pane
{
    border-radius: var(--content-pane-raidus);
    background-color: var(--content-sub-pane-bg);
    transition: color 0.4s, background-color 0.4s;
    /* margin: 0px var(--content-pane-gap) var(--content-pane-gap) 0px; */
    margin: 0px 0px var(--content-pane-gap) 0px;
    /* width: calc(100% - var(--content-pane-gap)); */

    /* width: 100%; */

    height: fit-content;

    /* overflow-y: auto; */
    box-sizing: border-box;
    padding: var(--pane-top-padding) 0px 0px 0px;

    display: flex;
    flex-direction: column;
    position: relative; 
    overflow-x: auto;
}

.sub-pane.strong-bg
{
    background-color: var(--content-sub-pane-bg-strong);
}

.sub-pane.stronger-bg
{
    background-color: var(--content-sub-pane-bg-stronger);
}

.sub-pane:has(.pane-label)
{
    padding-top: 0px;
}

.sub-pane-margin
{
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
}

.headed-pane-margin
{
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.sub-pane-margin-no-top
{
    margin-left: 5px;
    margin-right: 5px;
}

.sub-pane-padding
{
    padding-left: 5px;
    padding-right: 5px;
}

.sub-pane-bottom-padding
{
    padding-bottom: 5px;
}

.sub-pane-bottom-padding-table
{
    padding-bottom: 10px;
}

.width-half
{
    width: 50%;
    /* width: calc(50% - var(--content-pane-gap)); */
    max-width: 50%;
    flex-grow: 0;
}

.width-third
{
    width: 33%;
    /* width: calc(50% - var(--content-pane-gap)); */
    max-width: 33%;
    flex-grow: 0;
}

.width-quarter
{
    width: 25%;
    /* width: calc(25% - var(--content-pane-gap)); */
    max-width: 25%;
    flex-grow: 0;
}

.width-three-quarters
{
    width: 75%;
    /* width: calc(25% - var(--content-pane-gap)); */
    max-width: 75%;
    flex-grow: 0;
}

.height-half
{
    /* height: 50%; */
    height: calc(50% - var(--content-pane-gap));
}

.height-quarter
{
    /* height: 50%; */
    height: calc(25% - var(--content-pane-gap));
}

.height-three-quarters
{
    /* height: 50%; */
    height: calc(75% - var(--content-pane-gap));
}

.height-to-content
{
    height: fit-content;
    overflow-y: unset;
}

.width-to-content
{
    width: fit-content;
}

.grow
{
    flex-grow: 1;
}

/*Pane Label*/


.content-pane > .pane-label, 
.console-area > .pane-label, 
.sub-pane > .pane-label, 
.roux-tooltip-content > .pane-label
{   
    display: flex;
    flex-direction: row;

    width: fit-content;
    align-items: center;

    position: relative;
    min-width: var(--pane-label-min-width);

    padding: 7px;

    /* height: var(--pane-label-height); */
    /* line-height: var(--input-line-height); */
    
    border-radius: var(--pane-label-radius) 0px var(--pane-label-radius) 0px;

    /* border-radius: 8px 0px 8px 0px; */

    background-color: var(--pane-label-bg);

    /* margin-right: 8px; */
    transition: color 0.4s, background-color 0.4s, border 0.4s;
    user-select: none;  

    margin-bottom: 8px;
    margin-left: 1px;
    margin-top: 1px;
    
    border-right: 1px solid var(--pane-label-border);
    border-bottom: 1px solid var(--pane-label-border);
    border-top: none;
    border-left: none;
}

.content-pane > .pane-label:has(.button), 
.console-area > .pane-label:has(.button), 
.sub-pane > .pane-label:has(.button)
{
    border-radius: var(--pane-label-radius) var(--pane-label-radius) var(--pane-label-radius) 0px;
}

.content-pane > .pane-label.right, 
.console-area > .pane-label.right, 
.sub-pane > .pane-label.right, 
.roux-tooltip-content > .pane-label.right
{
    align-self:end;
    border-radius: 0px var(--pane-label-radius) 0px var(--pane-label-radius);

    margin-left: 0px;
    margin-right: 1px;

    border-right: none;
    border-bottom: 1px solid var(--pane-label-border);
    border-top: none;
    border-left: 1px solid var(--pane-label-border);
}

.content-pane > .pane-label.right:has(.button), 
.console-area > .pane-label.right:has(.button), 
.sub-pane > .pane-label.right:has(.button)
{
    border-radius: var(--pane-label-radius) var(--pane-label-radius) 0px var(--pane-label-radius);
}

.content-pane > .pane-label > .pane-label-icon, 
.console-area > .pane-label > .pane-label-icon, 
.sub-pane > .pane-label > .pane-label-icon, 
.roux-tooltip-content > .pane-label > .pane-label-icon
{
    width: var(--pane-label-img);
    height: var(--pane-label-img);
    /* line-height: var(--pane-label-height); */

    padding-left: 2px;
    padding-right: 6px;
    border-right: 2px solid var(--pane-label-image-div-line);
    margin-right: 5px;

    color: var(--pane-label-icon-color);
    transition: border-right 0.4s, color 0.4s, background-color 0.4s;  
}


.console-area > .pane-label, .sub-pane > .pane-label
{
    margin-bottom: 0px;
}

.pane-label-icon > svg
{
    width: var(--pane-label-img);
    height: var(--pane-label-img);
}

.content-pane > .pane-label > .label-text, 
.console-area > .pane-label > .label-text, 
.sub-pane > .pane-label > .label-text,
.roux-tooltip-content > .pane-label > .label-text
{
    color: var(--input-label-text);

    transition: color 0.4s, background-color 0.4s;
    /* line-height: var(--input-line-height); */

    font-size: var(--label-font-size);
    padding-right: 20px;

    width: fit-content;
}

.pane-label:has(.button)
{
    padding: 0px 3px 0px 7px;
}

.content-pane-margin
{
    margin-left: 10px;
    margin-right: 10px;
}

@media only screen and (max-width: 449px) and (max-height: 991px) and (max-aspect-ratio: 1) 
{
    .side-nav:not(.display-mobile-portrait){
        display: none;
    }

    .top-nav:not(.display-mobile-portrait){
        display: none;
    }

    .bottom-nav:not(.display-mobile-portrait){
        display: none;
    }

    .content-area:not(.display-mobile-portrait){
        display: none;
    }

    .console-area:not(.display-mobile-portrait){
        display: none;
    }
}

@media only screen and (max-height: 449px) and (max-width: 991px) and (min-aspect-ratio: 1) 
{
    .side-nav:not(.display-mobile-landscape){
        display: none;
    }

    .top-nav:not(.display-mobile-landscape){
        display: none;
    }

    .bottom-nav:not(.display-mobile-landscape){
        display: none;
    }

    .content-area:not(.display-mobile-landscape){
        display: none;
    }

    .console-area:not(.display-mobile-landscape){
        display: none;
    }
}

@media only screen and (min-width: 450px) and (max-width: 992px) and (max-aspect-ratio: 1) ,
only screen and (min-height: 450px) and (max-height: 992px) and (min-aspect-ratio: 1)
{
    .side-nav:not(.display-tablet){
        display: none;
    }

    .top-nav:not(.display-tablet){
        display: none;
    }

    .bottom-nav:not(.display-tablet){
        display: none;
    }

    .content-area:not(.display-tablet){
        display: none;
    }

    .console-area:not(.display-tablet){
        display: none;
    }
}

@media only screen and (min-width: 992px) {
    .side-nav:not(.display-desktop){
        display: none;
    }

    .top-nav:not(.display-desktop){
        display: none;
    }

    .bottom-nav:not(.display-desktop){
        display: none;
    }

    .content-area:not(.display-desktop){
        display: none;
    }

    .console-area:not(.display-desktop){
        display: none;
    }
}

.move-to-end
{
    margin-left: auto;
}

.standard-row-width
{
    min-width: 420px;
}

.standard-top-margin
{
    margin-top: 5px !important;
}

.standard-bottom-margin
{
    margin-bottom: 5px !important;
}

.standard-right-margin
{
    margin-right: 5px !important;
}

.row
{
    display: flex;
    flex-direction: row;
}

.row.align-center
{
    justify-content: center;
}

.row.align-right
{
    justify-content: end;
}

.full-width
{
    width: 100% !important;
}

.inherit-width
{
    width: inherit !important;
}

.min-full-width
{
    min-width: 100%;
}

.width-350
{
    width: 350px;
    flex-grow: 0;
    flex-shrink: 0;
}

.width-700
{
    width: 700px;
    flex-grow: 0;
    flex-shrink: 0;
}

.min-width-350
{
    min-width: 350px;
}

.full-height
{
    height: 100%;
}

.item-align-right
{
    margin-left: auto !important;
}

.col
{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.col.centre
{
    align-items: center;
}

.scroll-col
{
    overflow-y: auto;
}

.no-scroll
{
    overflow-y: unset !important;
}

.hidden
{
    display: none !important;
}

.roux-icon
{
    width: var(--roux-icon-dim);
    height: var(--roux-icon-dim);

    color: var(--icon-colour);

    transition: color 0.4s, background-color 0.4s;
}

.roux-icon > svg
{
    width: var(--roux-icon-dim);
    height: var(--roux-icon-dim);
}

.striped
{
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3) 8px, transparent 0, transparent 16px);
}

.roux-vline-sep
{
    padding-right: 5px;
    margin-right: 5px;
    border-right: 2px solid var(--input-image-div-line);
}

.roux-space-sep
{
    margin-right: 5px;
}

.roux-space-pre
{
    margin-left: 5px;
}

.no-pad-r
{
    padding-right: 0px !important;
}

.no-pad
{
    padding: 0px !important;
}

.no-mar
{
    margin: 0px !important;
}

.no-mar-b
{
    margin-bottom: 0px !important;
}

.white-bg
{
    background-color: #FFF !important;
}

.col-mar-r
{
    margin-right: 5px;
}

.help-row
{
    display: flex;
    flex-direction: row;
    /* align-items:  */
}

.help-row .input-col
{
    flex-grow: 1;
    flex-shrink: 1;
}

.help-row .help-col
{
    width: 35px;
}

.general-icon
{
    color: var(--input-icon-color);
    transition: color 0.4s;
}

.general-icon-size
{
    width: 20px;
    height: 20px;
}

.general-icon-size > svg
{
    width: 20px;
    height: 20px;
}

.pane-label-row-right
{
    position: absolute;
    right: 0;
    margin-right: 2px;
    margin-top: 2px;

    display: flex;
    flex-direction: row;
}

.general-image
{
    max-width: 100px;
    max-height: 100px;
}

.general-text
{
    color: var(--input-text); 
    transition: color 0.4s, background-color 0.4s;
}

.v-centre
{
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
}

.pane-header
{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid var(--pane-label-image-div-line);

    transition: border-bottom 0.4s;  
    padding-bottom: 10px;
}

.pane-header-icon
{
    width: var(--pane-header-img);
    height: var(--pane-header-img);

    padding-left: 2px;
    padding-right: 6px;
    border-right: 2px solid var(--pane-label-image-div-line);
    margin-right: 5px;

    color: var(--pane-label-icon-color);
    transition: border-right 0.4s, color 0.4s, background-color 0.4s;  
}

.pane-label-icon > svg
{
    width: var(--pane-header-img);
    height: var(--pane-header-img);
}

.pane-header-label
{
    font-size: var(--pane-header-font-size);
    color: var(--input-label-text);
    transition: color 0.4s;  
    font-family: "Museo-500";
}

.no-y-overflow
{
    overflow-y: hidden !important;
}

.y-overflow
{
    overflow-y: auto !important;
}

.flag-country-name
{
    margin-left: 10px;
}

.warning-text
{
    color: var(--warning) !important;
}