:root,
.theme-default{
    /* application/sidepanel */
    --color-side-background:rgb(226 244 255);
    --color-side-text: var(--color-base-text);
    --color-side-header-background:rgb(226 244 255);
    --color-side-header-text:  #0c75cb;
    --color-side-border: var(--color-side-background);
    

    /* panels and such */
    --color-base-background:rgb(248, 252, 255);
    --color-base-text: rgb(110, 110, 110);
    --color-base-border: rgb(179, 222, 251);   
    --color-base-shadow: lightgray;
    --color-dialog-background: var(--color-base-background);

    /* headers of .. anything */
    --color-header-background: #6cb9f8;
    --color-header-text: white;
    --color-header-border:  #7fbff3;
    --weight-header: normal;

    /* toolbars */  
    --color-bar-background: var(--color-base-background);
    --color-bar-border: var(--color-bar-background);

    /* error */
    --color-error-background:red;
    --color-error-text: white;
    --color-required-border: red;
    --color-required-text: red;

    /* where the input focus is */
    --color-focus-background: #a2d4fd;
    --color-focus-text: var(--color-base-text);
    --color-focus-border: var(--color-focus-background);
    
    /* where the mouse hovers. Do not change the border */
    --color-hover-background:  #c0e3ff;
    --color-hover-text: var(--color-base-text);

    /* readonly */
    --color-readonly-background:rgb(225, 235, 244);  
    --color-readonly-text: gray;
    --color-readonly-border: var(--color-base-border);
    --color-readonly-focus-background:  rgb(172, 187, 193);


    /* selected items */
    --color-selected-background: aliceblue;
    --color-selected-cell:rgb(211 229 248);
    --color-selected-text: var(--color-data-text);
    --color-selected-border: rgb(227, 238, 247);

    /* displaying data in grids, trees, lists      */
    --color-data-background: white;
    --color-data-text: var(--color-base-text);
    --color-data-border: aliceblue;

    /* editing data                                 */
    --color-edit-background: var(--color-data-background);
    --color-edit-border: var(--color-base-border);
    --color-edit-text: var(--color-base-text);

    /* softer versions */
    --color-soft-background: white;
    --color-soft-text: rgb(150, 150, 150);
    --color-soft-focus-text: var(--color-soft-text);
    --color-soft-border: rgb(230, 230, 230);

    /* some highlight colors */
    --color-highlight: var(--color-header-background);
    --color-highlight-border: yellow;
    --color-splitter-background: aliceblue;

    /* set to 'none' to hide images on tabs, 'block' to show */
    --tab-img-display: block;
    --invert-side-img: none;
   

    /* etc */
    --color-backdrop-end:  lightblue;
    --color-backdrop-start: silver;
    --url-check: url('img/check-slim.svg');
    --url-filter: url('img/filter.svg'); 


}


.theme-default{
    --invert-header-img: invert(1);
}
.theme-barbie{
    
    --color-side-background: #e0f1ff;
    --color-side-text: var(--color-base-text);
    --color-side-header-background: var(--color-side-background);
    --color-side-header-text: rgb(255, 94, 185);
    --color-side-border: rgb(255, 94, 185);

    --color-base-background:#F0F8FF;
    --color-base-text: rgb(110, 110, 110);
    --color-base-border: #c4e0f8;
    --color-base-shadow: lightgray;


    --color-header-background: #fda1cf;
    --color-header-text: var(--color-base-text);
    --color-header-border: var(--color-header-background);
    --weight-header: normal;
    --color-bar-background: var(--color-base-background);
    --color-bar-text: var(--color-base-text);
    --color-bar-border: var(--color-bar-background);
 
    --color-focus-background: var(--color-header-background);
    --color-focus-text: black;
    --color-focus-border: var(--color-focus-background);
    
    --color-hover-background:#ffbcdd;
    --color-hover-text: var(--color-header-text);

   
    --color-readonly-background: var(--color-base-border);
    --color-readonly-text: gray;
    --color-readonly-border: var(--color-base-border);
    --color-readonly-focus-background:  rgb(172, 187, 193);

    --color-selected-background: #F0F8FF; 
    --color-selected-cell: #fda1cf; 
    --color-selected-text: var(--color-data-text);
    --color-selected-border: #c3e3ff;

    --color-data-background: white;
    --color-data-text: var(--color-base-text);
    --color-data-border: var(--color-selected-border);

    --color-edit-background: var(--color-data-background);
    --color-edit-border: var(--color-base-border);
    --color-edit-text: var(--color-base-text);

    --color-soft-background: white;
    --color-soft-text: rgb(173, 173, 173);
    --color-soft-focus-text: rgb(226, 226, 226);
    --color-soft-border: rgb(230, 230, 230);

    --color-highlight: var(--color-header-background);
    --color-highlight-border: yellow;
    --color-splitter-background: #f7bcd9;
    --tab-img-display: block; /* set to none to hide tab images */
}

.theme-minimal{
    
    --color-side-background: var(--color-base-background);
    --color-side-text: var(--color-base-text);
    --color-side-header-background: var(--color-base-background);
    --color-side-header-text: #498bc2;
    --color-side-border: rgb(235, 235, 235);
    --color-base-background: rgb(255 255 255);
    --color-base-text: rgb(100, 100, 100);
    --color-base-border: lightgray;
    --color-base-shadow: lightgray;
    --color-header-background: rgb(240 240 240);
    --color-header-text: var(--color-base-text);
    --color-header-border: var(--color-header-background);
    --weight-header: normal;
    --color-bar-background: var(--color-base-background);
    --color-bar-border: var(--color-bar-background);
    --color-focus-background: #a2d4fd;
    --color-focus-text: var(--color-base-text);
    --color-focus-border: var(--color-focus-background);
    --color-hover-background: rgb(235, 235, 235);
    --color-hover-text: var(--color-base-text);
    --color-readonly-background: rgb(235, 235, 235);
    --color-readonly-text: gray;
    --color-readonly-border: var(--color-base-border);
    --color-readonly-focus-background: rgb(172, 187, 193);
    --color-selected-background: aliceblue;
    --color-selected-cell: rgb(235, 235, 235);
    --color-selected-text: var(--color-data-text);
    --color-selected-border:rgb(240, 240, 240);
    --color-data-background: white;
    --color-data-text: var(--color-base-text);
    --color-data-border: rgb(238, 238, 238);
    --color-edit-background: var(--color-data-background);
    --color-edit-border: var(--color-base-border);
    --color-edit-text: var(--color-base-text);
    --color-soft-background: white;
    --color-soft-text: rgb(150, 150, 150);
    --color-soft-focus-text: var(--color-soft-text);
    --color-soft-border: rgb(230, 230, 230);
    --color-highlight: var(--color-header-background);
    --color-highlight-border: blue;
    --color-splitter-background: var(--color-hover-background);
    --tab-img-display: none; /* set to none to hide tab images */
}
.theme-gray{
        --color-side-background: rgb(238 238 238);
        --color-side-text: var(--color-base-text);
        --color-side-header-background: rgb(238 238 238);
        --color-side-header-text: #0c75cb;
        --color-side-active-border: var(--color-header-border);
        --color-base-background: rgb(250 250 250);
        --color-base-text: rgb(90, 90, 90);
        --color-base-border: rgb(240 240 240);
        --color-base-shadow: lightgray;
        --color-header-background: rgb(190, 190, 190); 
        --color-header-text: white;
        --color-header-border: #efefef;
        --weight-header: normal;
        --color-bar-background: var(--color-base-background);
        --color-bar-border: var(--color-bar-background);
        --color-focus-background: #a2d4fd;
        --color-focus-text: var(--color-base-text);
        --color-focus-border: var(--color-focus-background);
        --color-hover-background:  rgb(230 230 230);
        --color-hover-text: var(--color-base-text);
        --color-readonly-background: rgb(225, 235, 244);
        --color-readonly-text: gray;
        --color-readonly-border: var(--color-base-border);
        --color-readonly-focus-background: rgb(172, 187, 193);
        --color-selected-background: aliceblue;
        --color-selected-cell: rgb(211 229 248);
        --color-selected-text: var(--color-data-text);
        --color-selected-border: rgb(227, 238, 247);
        --color-data-background: white;
        --color-data-text: var(--color-base-text);
        --color-data-border: aliceblue;
        --color-edit-background: var(--color-data-background);
        --color-edit-border: var(--color-base-border);
        --color-edit-text: var(--color-base-text);
        --color-soft-background: white;
        --color-soft-text: rgb(150, 150, 150);
        --color-soft-focus-text: var(--color-soft-text);
        --color-soft-border: rgb(230, 230, 230);
        --color-highlight: var(--color-header-background);
        --color-highlight-border: yellow;
        --color-splitter-background: rgb(238 238 238);
        --tab-img-display: block;
        --invert-header-img: invert(1);
    }.theme-pina{
    
    --color-side-background:#fffce7;
    --color-side-text: var(--color-base-text);
    --color-side-header-background: var(--color-side-background);
    --color-side-header-text: brown;
    --color-base-background: #fffdef;
    --color-base-text: rgb(110, 110, 110);
    --color-base-border: #fee43a;   
    --color-base-shadow: lightgray;
    --color-header-background:  #fee43a;   
    --color-header-text: black;
    --color-header-border: var(--color-bar-background);
    --weight-header: normal;
   
    --color-bar-background: var(--color-base-background);   
    --color-bar-text: var(--color-application-text);
    --color-bar-border: var(--color-bar-background);
    --color-focus-background: rgb(239, 189, 91);
    --color-focus-text: var(--color-header-text);
    --color-focus-border: var(--color-focus-background);
    --color-hover-background: #ffec70;   
    --color-hover-text: var(--color-header-text);
  
    --color-readonly-background: var(--color-header-background);
    --color-readonly-text: gray;
    --color-readonly-border:  var(--color-header-background);
    --color-readonly-focus-background:  rgb(172, 187, 193);

    --color-selected-background:  var(--color-base-background);
    --color-selected-cell: rgb(245, 207, 130);
    --color-selected-text: var(--color-data-text);
    --color-selected-border: var(--color-data-border);

    --color-data-background: white;
    --color-data-text: var(--color-base-text);
    --color-data-border:#feec75;

    
    /* editing data                                 */
    --color-edit-background: var(--color-data-background);
    --color-edit-border: var(--color-base-border);
    --color-edit-text: var(--color-base-text);

    --color-soft-background: white;
    --color-soft-text: rgb(173, 173, 173);
    --color-soft-focus-text: rgb(226, 226, 226);
    --color-soft-border: rgb(230, 230, 230);

    --color-highlight: rgb(131, 251, 110); 
    --color-highlight-border: yellow;
    --color-splitter-background: var(--color-side-background);
    --tab-img-display: block; /* set to none to hide tab images */
}
.theme-blue{
    --color-side-background: rgb(66 175 241);
    --color-side-text: rgb(255 255 255);
    --color-side-header-background: var(--color-side-background);
    --color-side-header-text: rgb(44 73 143);
    --color-side-active-border: var(--color-header-border);
    --color-base-background: white;
    --color-base-text: rgb(7 2 39);
    --color-base-border: rgb(179, 222, 251);
    --color-base-shadow: rgb(158, 158, 158);
    --color-header-background:  rgb(66 175 241);
    --color-header-text: white;
    --color-header-border: transparent;
    --weight-header: normal;
    --color-bar-background: #fcfcfc;
    --color-bar-border: var(--color-bar-background);
    --color-focus-background: #a2d4fd;
    --color-focus-text: var(--color-base-text);
    --color-focus-border: var(--color-focus-background);
    --color-hover-background: #c0e3ff;
    --color-hover-text: var(--color-base-text);
    --color-readonly-background: rgb(228, 235, 241);
    --color-readonly-text: gray;
    --color-readonly-border: var(--color-base-border);
    --color-readonly-focus-background: rgb(172, 187, 193);
    --color-selected-background: aliceblue;
    --color-selected-cell: rgb(211 229 248);
    --color-selected-text: var(--color-data-text);
    --color-selected-border: rgb(227, 238, 247);
    --color-data-background: white;
    --color-data-text: var(--color-base-text);
    --color-data-border: aliceblue;
    --color-edit-background: var(--color-data-background);
    --color-edit-border: var(--color-base-border);
    --color-edit-text: var(--color-base-text);
    --color-soft-background: white;
    --color-soft-text: rgb(150, 150, 150);
    --color-soft-focus-text: var(--color-soft-text);
    --color-soft-border: rgb(230, 230, 230);
    --color-highlight: var(--color-focus-background);
    --color-highlight-border: yellow;
    --color-splitter-background:rgb(227, 238, 247);
    --tab-img-display: block;
    --invert-header-img: invert(0.95);
    --invert-side-img: none;
}

/* Dark mode variables 

Filter-invert does not work for background images, so we'll have to use imgs for them




dark theme PER theme overridable?

*/
@media (prefers-color-scheme: dark) {
    :root {


        /* the colors used */
        --color-dark-background: rgb(40, 40, 40);
        --color-dark-text: rgb(190, 190, 190);
        --color-dark-border: rgb(60, 60, 60);
        --color-medium-background: rgb(70, 70, 70);
        --color-medium-text: rgb(210, 210, 210);
        --color-light-background: rgb(100, 100, 100);
        --color-light-text: rgb(230, 230, 230);
        --color-soft-text: var(--color-dark-text);


        /* base, side, toolbar */
        --color-base-background: var(--color-dark-background);
        --color-base-text: var(--color-dark-text);
        --color-base-border: var(--color-dark-border);
        --color-base-shadow: var(--color-dark-background);
        --color-dialog-background: var(--color-medium-background);

        --color-side-background: var(--color-medium-background);
        --color-side-header-background: var(--color-medium-background);
        --color-side-text: var(--color-medium-text);
        --color-side-header-text: var(--color-medium-text);
        --invert-side-img: invert(0.7) !important; /* todo important needed? */

        --color-bar-background: var(--color-dark-background);
        --color-bar-text: var(--color-dark-text);
        --invert-button: invert(0.8);
        

        /* grid header */
        --color-header-background: var(--color-medium-background);
        --color-header-border: var(--color-dark-border);
        --color-header-text: var(--color-medium-text);
        --invert-header-img: invert(0.8);

        /* focus, hover */
        --color-focus-background: rgb(10, 10, 88);
        --color-focus-text: var(--color-light-text);
        --color-hover-background: var(--color-medium-background);
        --color-hover-text: var(--color-medium-text);

        /* data  todo: black checks in data grid, locks?*/

        --color-data-background: var(--color-dark-background);
        --color-data-text: var(--color-dark-text);
        --color-data-border: var(--color-dark-border);

        --color-selected-background: var(--color-light-background);
        --color-selected-cell:  var(--color-medium-background);
        --color-selected-text: var(--color-medium-text);
        --color-selected-border: var(--color-dark-border);

        /* edit & readonly */

        --color-edit-background: var(--color-dark-background);
        --color-edit-border: rgb(100,100,100);
        --color-edit-text: var(--color-dark-text);

        --color-readonly-background: var(--color-medium-background);
        --color-readonly-text: var(--color-dark-text);

        --color-error-background: rgb(255, 44, 44);
        --color-error-text: var(--color-light-text);
        --color-required-border: rgb(255, 44, 44);
        --color-required-border: rgb(255, 44, 44);
        --color-required-text: var(--color-dark-text);
        --invert-check: invert(0.2);


        /* etc */   
        --color-splitter-background: var(--color-dark-border);
        --color-backdrop-end:  var(--color-dark-background);
        --color-backdrop-start: black;
        --url-check: url('img/check-dark.svg');
        --url-filter: url('img/filter-dark.svg'); 

    
    }
}/* the root and media settings       */

:root{   
    /* splitters  etc                                  */
    --onepx: 1px;   /* use px here for real sharp borders */
   
    /* etc   */
    --small-shadow: 0.2rem;
    --border-radius: 0.5rem;
    --row-height: 2rem;
    --margin-horz: 0.3rem;
    --margin-vert: 0.3rem;      
    --padding-horz: 0.2rem;
    --padding-vert: 0.2rem;
    --bar-height: 2.8rem;
    --button-height: 2.2rem;
    --cell-padding-horz: 0.3rem;
    --font-family: helvetica; 
    --header-height: 2.2rem;
    --menu-item-height: 2.6rem;
   
}

html, 
body{
        width: 100%;
        height: 100%;
        padding: 0;
        font-size: inherit;
        font-family: var(--font-family);
        margin: 0;
        overflow: hidden;               /* no bouncy scrolly effects (also no browser refresh...) */
        user-select: none;    
        -webkit-user-select: none;     

}

button,                          /* some basic html elements that don't auto-inherit from body */
input, 
textarea {                   
    font-family: inherit;
    font-size: inherit;
    resize: none;
   
}

.aselement{
    position: relative;                     /* default position. Esp relevant for sizers */
    box-sizing: border-box;                 /* important - size including borders */
    font-family: var(--font-family);
    border-color: var(--color-base-border); /* not setting the border style though.. many don't have a border */
    color: inherit;
    background-color: inherit;
    background-position: center center;
    background-size: 1.2rem;                /* saves doing this for all buttons.. maybe move to button */
    background-repeat: no-repeat;
    outline: none;
    scrollbar-width: thin;
    user-select: none;         
  
    &.focuscolor:focus-visible {
        background-color: var(--color-focus-background);
        color: var(--color-focus-text);
        border-color: var(--color-focus-border);
        outline: none;                          /* standard browser blue outline no thank you */

        & .astitle{
            color: var(--color-focus-text);
        } 

    } 

    &.interactive:not(:disabled){
        cursor: pointer;

        & .astitle{
            cursor: pointer;
        }
        
        @media (hover: hover) { /* only on real hover-capable devices, not touch screens */
            &:hover {
                background-color: var(--color-hover-background);
                & .astitle{
                    color: var(--color-hover-text);
                }
            }
        }
    }

    &.interactive:disabled{
        opacity: 15%;
    }

    &.bold{
        font-weight: bold;
    }

    &.italic{
        font-style: italic;
    }
    &.center{
        align-self: center;
    }

    &.centerx{
        left: 0rem; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto;
    }

    &.centery{
        top: 0; 
        bottom: 0; 
        margin-top: auto; 
        margin-bottom: auto;
    }

    
    &.client{        /* fill client */
        flex: 1 1 auto;
    }
    

    &.end{
        align-self: flex-end;
        justify-self: flex-end;
    }

    &.pad{
        padding: 0.5rem;
    }

    &.padleft{
        padding-left: 0.5rem;
    }

    &.fatpad{
        padding: 1rem;
    }

    &.fatpadleft{
        padding-left: 1rem;
    }


    &.candrag, 
    &.candrag *:not(.canmove){
        cursor: grab;
        
        &:hover:active,
        &:hover:active {           /* mouse down on draggable */
            cursor: grabbing; 
        } 
    }

    
    &.canmove{
        cursor: move;
    }

    &.hidden{
        display: none;      /* remember, display none takes no space, visbility hidden keeps space */
    }

    &.textright{
        text-align: right;
    }


    &._bottom{
        margin-top: auto;
    }

    &.right{
        margin-left: auto;
        height: 100%;
    }

    &.left{
        height: 100%;
        left: 0px;
    }

    &.line{
        border-bottom: var(--onepx) solid var(--color-base-border);
        margin: var(--margin-horz);
    }




}


.asglobaldrag{  /* the custom drag ghost image */
    position: absolute;
    display: flex;
    left:  -500;
    top: -500;
    min-width: 8rem;
    height: 1.6rem;
    background-color: rgba(240, 240, 240, 0.7);
    border: var(--onepx) solid var(--color-base-border);
    max-width: 20rem;
    overflow: hidden;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    line-height: 1.6rem;

    & .dragtitle{
        flex: 1 1 auto;
        text-align: center;
    }

    & .dragamount{                      /* amount balloon */
        background-color: white;
        color: blue;
        font-weight: bold;
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        border-radius: 50%;
        margin-left: 0.5rem;
        border: var(--onepx) solid blue;
        filter: drop-shadow(0.2rem 0.2rem 0.2rem var(--color-base-shadow));

        &:not(.visible){
            display: none;
        }
       
    }
}


.astextwidth{ /* temp element used to measure textwidth */
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100px;
    width: fit-content;
    text-wrap: nowrap;
    white-space: no-wrap;
    visibility: hidden;
}
/* title -------*/

.astitle{
    display: block;
    padding-left: var(--padding-horz);
    padding-right: var(--padding-horz);

    &.inline{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    &.error{
        color: var(--color-error-background)
}

   &.good{
        color: green;
   }

   &.aslink{
        text-decoration: none;
        cursor: pointer;
   }


}
.aspanel{
    display: inline-flex;
    flex-flow: row wrap;
    overflow: auto;
    _overscroll-behavior: contain;
    min-height: var(--bar-height);
    background-color: var(--color-base-background);
    border: none;

    &.vertical{
        flex-flow: column nowrap;
    }
  
    &.assplitpanel{
        display: flex;
        flex-wrap: nowrap;
        height: 100%;
         border-top: var(--onepx) solid var(--color-base-border);
     
        & .main, & .sub{
            min-height: 8rem;
            min-width: 8rem;
        }

        & .leftfill{
            max-height: 100%;
        }

        & .fillright{
            _border-top: var(--onepx) solid var(--color-base-border);
        }

        & .sub{
            flex: 1 1; /* not auto: do not resize with content but fill rest of container */
        }

        & .main.top{
            height: 50%;
            flex-shrink: 0;
        }

        & .main.left{
            width: 50%;
        }

       
        &.horizontal{
            max-height: 100%;
            
            & .main, & .sub{
                _border-top: var(--onepx) solid var(--color-base-border);
            }
        }
           
        &.vertical{
           max-width: 100%;
        }
        
    }



}



.vertical > .assplitter{   /* splitter is within a vertical flex flow */
    width: 100%;
    height: 0.3rem;
    align-self: center;

    &:hover{
        cursor: ns-resize;
    }

    & .icon{
        background-image: url('img/griphorz.svg'); 
        height: 1.2rem;
        width: 2rem;
        left: calc(50% - 1rem);
        top: -0.45rem;
        cursor: ns-resize;
    }


    & .flowbutton{
        left: 0;
        top: -0.9rem;
    }

}

.assizer,
.horizontal > .assplitter{

    width: 0.3rem;
    height: 100%;

    & .icon{
        background-image: url('img/gripvertdots2.svg'); 
        height: 2rem;
        width: 1.2rem;
        left: -0.45rem;
        top: calc(50% - 1rem);
        cursor: ew-resize;

    }

    &:hover{
        cursor: ew-resize;
    }


    & .flowbutton{
        top: 0;
        left: -0.9rem;
    }
}


.assplitter{
    background-color: var(--color-splitter-background);
    flex-shrink: 0;

    & .icon{
        position: absolute;
        z-index: 2;
        pointer-events: none;
        border-radius: var(--border-radius);
        background-color: var(--color-splitter-background);
        filter: drop-shadow(0.1rem 0.1rem 0.1rem var(--color-base-shadow));

        @media (pointer:fine) { /* aka using a mouse */
           background-color: transparent;
        }
    }
    

    &.failed{
        background-color: red; /* move did not succeed */
    }

    & .flowbutton{
        position: absolute;
        z-index: 5;
        visibility: hidden;
    }

    &:hover .flowbutton{
        visibility: visible;
    }

   
    &.assizer{   /*only partly implemented, for right side  */
        background-color: transparent;
        width: 1rem;

        & .icon{
            background-position-x: right center;
            filter: none;
            position: relative;
            width: 100%;
            left: 0;
            background-color: transparent;
            &:hover{
                background-color: transparent; /* no hover effect? */
            }

        }
    
        
    }
}
 .asimage{
    display: inline-block;
    background-color: transparent;
    pointer-events: none;
}

& .icon{    /* a transparent icon that will fill its container and invert with dark mode */
    width: 100%;
    height: 100%;
    filter: var(--invert-button, none);
    background-size: 1rem;
    background-color: transparent;
    pointer-events: none;
}

/* button           */
.asbutton{
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;            /* vertical */
    font-family: var(--font-family);
    font-size: inherit;
    border: none;
    height: var(--button-height);
    min-height: var(--button-height);
    min-width: var(--button-height);
    border-radius: var(--border-radius);
    overflow: hidden;
    gap: var(--margin-horz);
    padding-left: var(--margin-horz);
    padding-right: var(--margin-horz);
    width: fit-content;
    flex-shrink: 0;

    & .asimage{
        width: 1.3rem;
        filter: var(--invert-button, none);
    }

    &.hamburger{
        & .asimage{
            width: 1.6rem;  /* XL hamburger menu */
        }
    }

    &.menuactive{ /* menu dropped down */
        filter: brightness(80%);
    }

    &.noimg{
        border: 1px solid var(--color-base-border);
        background-color: var(--color-button-background);
    }

    &.hidden{
        visibility: hidden; /* needed here again because of the display property above */
    }

    & .astitle{
        color: inherit;
        display: inline;
        line-height: var(--button-height);
        text-wrap: nowrap;
    }

    &.notitle{
        max-width: var(--button-height);    /* otherwise grow too wide on ios */
        padding: 0;
    }

    &.ascolorpicker{
        & input{
            visibility: hidden;
            width: 1px;
            position: absolute;
            left: 0;
        }
    }



    &.asmenubutton{
        justify-content: flex-start;
        min-height: var(--menu-item-height);
        width: 100%;                    /* fill entire container menu */
        border-radius: 0;
        border: none;   /* never, even when there is no image */
        gap: 0.5rem;  /* larger gap between img and text */

        & .indicator{                           /* extra indicator at the right side of the menu button*/
            transition: all 0.75s;              /* now only used to show 2 statusses open and active and to close a screen */
            min-height: 0.5rem;
            min-width: 0.5rem;
            height: 0.5rem;
            width: 0.5rem;
            border-radius: 50%;
            border: 1px solid gray;
            visibility: hidden;
            position: absolute;
            right: 0.5rem;
            z-index: 2;
            background-size: 0.8rem;
            & .asimage{
                display: none;
            }
        }

        &.open{
            &:hover 
            {
                & .indicator{
                    height: 1rem;
                    width: 1rem;
                    right: 0.25rem;
                    background-image: url('img/close.svg');
                }
            }
        
            & .indicator{
                visibility: visible;
                background-color: lime;
            }

            & .indicator:hover{
                background-image: url('img/close.svg');
            } 

            &.active{
                & .indicator{
                    background-color: lime;
                }
            }
        }
    }

}

/* editrecord          does not inherit from aspanel (asdatalement.. maybe that could happen     */

.aseditrecordwrap{
    max-height: var(--row-height);
    overflow: hidden;
}



.aseditrecord{
    overflow: auto;
    padding: var(--margin-horz);
    align-content: flex-start;
    gap: 0.3rem;    /*ie the gap between groups */
    height: 100%;
    

    &:not(.hidden){
        display:inline-flex;
    }

    &.vertical{                     /* straight vertical fields without columns */
        flex-flow: column nowrap;

        &.autocols{
            flex-wrap: wrap;
        }
    }

    &.horizontal{                       /* columns with fields in it, OR all fields horizontally */
        flex-flow: row wrap;
    }

    & .editsettings{
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        right: 0.3rem;
        top: 0.2rem;
        & .asimage{
            width: 1rem;
            height: 1rem;
          
        }
        z-index: 2;
        background-color: transparent;
    }


    &.inline{                               /* editor within a grid */
        max-height: var(--row-height);      /* do not break the grid */
        overflow: hidden;                 /* prevent a slight vertical scroll in grid editor */
        gap: 0;                             /* do not break the grid */
        padding: 0;                         /* do not break the grid */
        height: var(--row-height);
        margin: 0;  
       
        & .asgrouppanel{
            gap: 0;
        }

        & .asdatafield{ 
            border: var(--onepx) solid var(--color-data-border);    /* imitate grid borders */
            border-top: none;
            border-left: none;          /* avoid double borders in grid */
            resize: none;               /* no resizing within grid */
            border-radius: 0;           /* be square or don't be there */
            max-width: none;            /* may have been set on inputs */
            & * {                       /* the inputs & buttons inside the datafield */
                border-radius: 0;
            }
            max-height: var(--row-height);
        }
    
    }

    & .asgrouppanel{        /* groups input fields */
        flex-shrink: 0;
        flex-grow: 1;
        flex-flow: column wrap;
        padding: 1rem 0.5rem 0.5rem 0.5rem; /* t r b l */
        overflow: hidden;
        row-gap: 0.3rem;
        column-gap: 1rem;
        border: var(--onepx) solid var(--color-base-border);
        border-radius: var(--border-radius);

        &:has(.fullsize){
            height: 100%;   /* grow the grouppanel to its container */
            padding: 0 0 0 0;
            min-width: 50%;
            & .astoolbar .astoolgroup.right{ /* don't overlap toolbar menu with field settings button */
                margin-right: 1.5rem;
            }
        }

        &.horizontal{                       /* columns with fields in it, OR all fields horizontally */
            flex-flow: row nowrap;
        }

        &:has(.asgrouptitle){
            &:not(:has(.fullsize)){
                padding-top: 2.5rem;
            }
            & .asgrouptitle{
                font-weight: bold;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                padding: 0.5rem 0.5rem 0.5rem 0.5rem;
                height: 2rem;
                text-align: center;
                _filter: brightness(98%);
            }
        }
    }

    &:not(.multiplegroups) .asgrouppanel{
        border-color: transparent;
    }


    /* labeled fields within editrecord                     */
    & .aslabeleddatafield{
        width: fit-content; 
        flex-shrink: 0;
        flex-flow: row wrap;

       &.fullsize{
            width: 100%;
            height: 100%;
            max-height: none;
          
            & > .astitle{
                display: none;
            }
            & > .asdatafield{
                width: 100%;
                height: 100%;
                max-width: none;
                border: none;

            }
        }

        
        &:not(.hidden){
            display:inline-flex;
        }
        
        & > .astitle{
            color:  var(--color-soft-text);
            flex-shrink: 0;
            width: 10rem;
            min-width: 10rem;
            max-width: 10rem;
            text-align: left;
            line-height: var(--row-height);
            text-wrap: nowrap;
            overflow: hidden;
            &.xl{
                width: 12rem;
                max-width: 12rem;
                min-width: 12rem;
            }
        }
    }

    &.compact {
        overflow: hidden;
        height: var(--bar-height);
        margin-top: 0.2rem;
        flex-shrink: 0;
        max-height: var(--bar-height);

        & .asgrouppanel{
            flex-wrap: nowrap;
            padding: 0;
            border: none;
            flex-shrink: 0;
            column-gap: 0.2rem;
            & .asgrouptitle{
                display: none;
            }

          
        }
        & .aslabeleddatafield{
            & > .astitle{
                width: fit-content;
                min-width: 1rem;
                max-width: 6rem;
            }
        }
    }

}

.asbaseeditor{

    &.asmultilineeditor{
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-flow: column wrap;
        background-color: transparent;

        &.multiline{
            height: 100%;
            background-color: var(--color-edit-background); /* removes focus background color too */
        }

        &:not(.multiline){
            border-radius: var(--border-radius);
            & .astoolbar{                   /* operating inline, do not show any toolbar and small padding */
                display: none;
            }
            &  .input, ::part(input){     
                padding: 0 0.3rem 0 0.3rem;
                overflow: hidden;       /* no scrolling in inline editor */
            }
        }

        & .input, ::part(input){             /* whatever input the editor is using eg textarea, input, div etc */
            width: 100%;
            flex: 1;
            border: none;
            background-color: transparent;
            color: var(--color-edit-text);
            user-select: text;
            padding: 0.3rem;
            outline: none;
            overflow-y: auto;
        }


        &.ashtmleditor{
            & .shadow{  /* the container of the actual div containing the html */
                display: flex;
                flex: 1;
                width: 100%;
                border-radius: 0;
                overflow: hidden;
               
            }
     
        }
    } 

}

.asdatafield{
    height: var(--row-height);
    flex-grow: 1;
    line-height: var(--row-height);                     /* center text esp check in checkbox */
    border-radius: var(--border-radius);
    border: var(--onepx) solid;
    background-color: var(--color-edit-background); 
    border: var(--onepx) solid var(--color-edit-border);
    color: var(--color-base-text);
    max-width: 12rem;       /* do not grow to full width when field is wrapped on narrow screens */

    
    &.required.empty{
        border: 1px solid var(--color-required-border);
        & input::placeholder{
            color: var(--color-required-text);
        }
    } 
    
    & .fake{    /* for file inputs */
        width: 0px;
        display: block;
        opacity: 0%;
        position: absolute;
        left: 0;
    }
    
    &.readonly  {
        background-color: var(--color-readonly-background);
        border-color: var(--color-readonly-border);
        color: var(--color-readonly-text);

        &:focus{
            background-color: var(--color-readonly-focus-background);
        }
    }


    &.ascheckbox{
        min-width: var(--row-height);
        max-width: var(--row-height);    /* square. This is removed in inline editrecords (gridedit) */
   
        &.checked .icon{
            background-image:  url('img/check-slim.svg');
            filter: var(--invert-button, none);
            background-size: 1.4rem;
        }
    
    }

    &.asfileinputfield{
       
        & .astitle{             /* the label that displays the filename */
            color: var(--color-base-text);
            background-color: transparent;
            flex-grow: 1;
        }
      
    }

}


.astextarea{
    background-color: var(--color-edit-background);
}

input,
textarea {
    padding-left: var(--cell-padding-horz);
    padding-right: var(--cell-padding-horz);
    color: var(--color-edit-text);
    background-color: transparent;

    &::placeholder{
        font-style: italic;
        color:var(--color-soft-text);
        text-align: left;
    }

    &:focus{  
        color: var(--color-focus-text);

        &::placeholder{                /* placeholder focused: increase text readability */
            color: var(--color-soft-focus-text);
        }
    }

}









.asbuttoninput{
    display: flex;  /* it's a container for an input and a button. or more. Inherits from asdatafield */
    align-content: flex-start;
   
    & > .asbutton{   /* the button within a buttonInput */
        display: none;
        height: 100%;
        min-height: 100%;           /* yes needed */
        width: var(--row-height);
        min-width: var(--row-height);
        border-radius: var(--border-radius);
        color: var(--color-base-text);
        justify-content: center;    /* needed for ipad .. */

        & .asimage{
            width: 1.1rem;
        }
    }   

    & .shadow,     /* html shadow dom */
    & input{       /* the input */
        border: none;
        flex-grow: 1;
        width: var(--row-height);
        padding-right: var(--margin-horz);
        border-radius: var(--border-radius);
        user-select: text;

    }



    &.asrangeinputfield{
        & .asbutton.plus, .asbutton.minus{
            display: flex;
            & .asimage{
                width: 0.8rem;
                margin: 0;
                padding: 0;
                filter: invert(0.5);
            }
        }



        & .rangevalue{
            background-color: transparent;
            font-weight: bold;
            font-size: 0.9rem;
            width: 2rem;
            text-align: center;
        }
    }


    &:focus-within{
        background-color: var(--color-focus-background); /* give the entire thing the focus color */
        border-color: var(--color-focus-border);
    }

    & .asdialogfieldbutton{
        display: flex;
    }

    &.showbutton{
        
        & input{    
            padding-right: 0;
        }

        & .asbutton{
            display: flex;
        }
    }  

    &.asdatafilterinput{
        width: 7rem;
        flex-shrink: 0;
        flex-grow: 0;
    }

    &.astextinputfield{
        &  .asdialogfieldbutton{
            font-weight: bold;
        }
        &:has(.asmultilineeditor.multiline){    /* open dialog button is moved to multiline editor toolbar */
            & > .asdialogfieldbutton{
                display: none;
            }
        }
    }
    

}

/* astoolbar descends from aspanel               */

.astoolbar{                             /* the bar */
    overflow: hidden;                   /* no scrolling in toolbar*/
    height: var(--bar-height);
    background-color: var(--color-bar-background);

    &.astitlebar{
        height: 4.5rem;
        max-height: 4.5rem;
        min-height: 4.5rem;
        padding: 0.25rem;        

        & .applicationlogo.asimage{
            height: 4rem;
            width: 100%;   /* needs hard sizes for object-fit to work */
            object-fit: contain;
        }

          
        &  .astitle{
            text-wrap: wrap;
            overflow: visible;
        }
    }
    

    &.vertical{
        width: fit-content;   
        height: 100%;

        &.left{                      /* a bottom toolbar has a top border eg in dialogs */
            border-right: var(--onepx) solid var(--color-bar-border);
        }

        &.right{                      /* a bottom toolbar has a top border eg in dialogs */
            border-left: var(--onepx) solid var(--color-bar-border);
        }
    }

    &.horizontal{              
        width: 100%;
        flex-wrap: nowrap;
        max-height: var(--bar-height);
    

        &.bottom{                      /* a bottom toolbar has a top border eg in dialogs */
            _border-top: var(--onepx) solid var(--color-bar-border);
        }

        &.top{                      /* a top toolbar has a top border eg in dialogs */
            _border-bottom: var(--onepx) solid var(--color-bar-border);
        }
        
    }

    
    /* astoolgroup. A standard toolbar has a left- and right aligned toolgroup */

    & .astoolgroup{
        background-color: inherit;    /* important, take background from parent, not transparent or color, may be on colored headers*/
        align-items: center;
        gap: var(--margin-horz);
        overflow: hidden;
        flex: 0 1 auto;
        scrollbar-width: none;  /* groups allow scrolling but should not show a scrollbar */

        &.horizontal{                          
            flex-wrap: nowrap;            
            height: 100%;                       /* important when stuff gets crowded */
            padding-right: var(--padding-horz);
            padding-left: var(--padding-horz);
            overflow-x: auto;
            min-width: var(--bar-height);
        }

        &.vertical{
            padding-top: var(--padding-vert);
            padding-bottom: var(--padding-vert);
            height: fit-content;
            width: 100%;                       /* important when stuff gets crowded */
            overflow-y: auto;
        }

        &.toolgroupend{
            flex-shrink: 0;
        }

     
    }
}

.asfloatingtoolbar.horizontal{      /* a floating toolbar with minimal size */
    position: absolute;
    z-index: 1;
    top: 1rem;     /* now used for undo/post toolbar in editrecord, rightbottom aligned */
    left: 1rem;
    width: fit-content;
    height: fit-content;
    overflow: hidden;
    background-color: var(--color-header-background);
    opacity: 85%;
    border-radius: var(--border-radius);
    border: var(--onepx) solid var(--color-base-border);
    filter: drop-shadow(0.2rem 0.2rem 0.2rem var(--color-base-shadow));
    padding-left: 2rem;
    cursor: move;
    background-image: url(img/gripvertdots2.svg);
    background-position-x: 0.5rem;

    & .astoolgroup{
        cursor: default;
    }
   
}
.astabs{
    overflow: hidden;
    
    & .astabbar{

        & .astabbutton{ 
            flex-shrink: 0;
            padding-top: 0;
            padding-bottom: 0;
            padding-right: 0.5rem;
            padding-left: 0.5rem;
            border: none;
            justify-content: center;
            border-bottom: 0.4rem solid transparent;   /* reserve space for the active border */
            border-top: 0.4rem solid transparent;   /* top too to keep the text centered*/
            min-width: 4rem;
            border-radius: 0;
            height: 100%;


            & .asimage{
                display: var(--tab-img-display);

            }

            &.active{                /* active tab - button */
                border-bottom: 0.4rem solid var(--color-highlight);
              
            }
        }
    }

    & .astabpage{
        overflow: auto; /* scroll the tab page if needed */ 
    }
}/*
as grid contains header and table. 
Table contains body. 
The body overflows to create a vert scrollbar in the table.
When table scrolls horz, headers are synced in scroll event
When editing starts, situation is changed: then the grid itself will 
do the horz. scrolling to scroll the editor with the rest
vert. scrolling will be disabled at that time

*/

.asgridwrap{
    height: calc(100% - var(--header-height) - 0.6rem); /* still needed 2025-3 to fix height properly (test with many sub grids in small screen */
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.asgrid{
    display: block;         /* just to remember this is not a flexbox */
    height: 100%;          /* grid is always set to fill its parent so put it on some panel (asgridwrap) */
    max-width: 100%;        /* needed for correct display on dialogs eg */
    overflow: hidden;     /* table body will do the y-scrolling */
    background-color: var(--color-data-background);
    _border: solid var(--onepx) var(--color-base-border); 

    &:has(.dragging){ /* do not scroll grid when dragging a column header */

        & .hbox{
            overflow: hidden;
        }
        & .astable{
            overflow: hidden;
        }

        & .interactive{
            pointer-events: none;   /* avoid flashing interactive elements */
        }
    }
    

    
    & .hbox{
        width: 100%;
        height: 100%;
        overflow-y: hidden;
        overflow-x: auto;               /* normally astable will contain everything, except when editing */

        &.selectorcol{                  /* selector column */
            margin-left: var(--row-height);         /* select col */
            width: calc(100% - var(--row-height));  /* 100% minus margin for selector col */ 
        }

    }


    & .astable{                     /* visible content part of the grid */     
        width: 100%;
        overflow: auto;         /* scroll the data body, the table-x itself will be scrolled by the grid */
        height: 100%;
      
      

        & .placeholder{             /* filler for scroll hide, but do take space  */
            visibility: hidden;        
        }

        & .records{
            position: absolute;
        }
    }   



    &.editing {
   
        & .astable{
            width: fit-content; /* as wide as the editor so it will scroll within its parent, hbox */
            overflow-y: hidden; /* don't scroll away from the editor */
            overscroll-behavior: auto; /* defer it to hbox */
        }

        & .asselectorcol .asselectorcell{
       
            &.topbutton{
                & .inner .icon{            /* top button becomes save button */
                    background-image: url(img/check-slim.svg);
                    background-size: 1.4rem;
                }
            }

            &.active.selected .inner{                   /* active record becomes undo button */
                background-color: var(--color-selected-background);
                cursor: pointer;                        /* instead of not-allowed */
                & .icon{
                    background-image: url(img/undo.svg);
                }
            }
            
            &:not(.active.selected):not(.topbutton) .inner:hover{ 
                   cursor: default; /* cannot click it when editing */
            } 
           
        }
    }


    & .asselectorcol{
        width: var(--row-height);
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: var(--color-data-background);
        overflow: hidden;
        z-index: 1;
        

        & .scrollbox{
            height: calc(100% - var(--header-height) );
            overflow: hidden;
        }

        & .asselectorcell{
            width: calc(var(--row-height) );
            height: calc(var(--row-height) );
            padding: 0;
            border: 0;

            & .inner{
                width: 100%;
                height: calc(var(--row-height) - 0rem); /* padding determines the checkbox size (border) */
                border-bottom: var(--onepx) solid var(--color-data-border);
                border-right: var(--onepx) solid var(--color-data-border);
                &:hover{
                    cursor: pointer;
                }
            }


            &.topbutton{  /* select all / save */
                height: var(--header-height);
                padding-top: 0.1rem;
                background-color: var(--color-header-background);
                border-color: var(--color-header-text);
                border-top-left-radius: var(--border-radius);
                border-bottom-left-radius: var(--border-radius);
                filter: drop-shadow(var(--small-shadow) var(--small-shadow) var(--small-shadow) var(--color-base-shadow)); 
                z-index: 1;
                opacity: 95%;
                & .inner{
                    border-bottom: none;
                    border-top-left-radius: var(--border-radius);
                    border-bottom-left-radius: var(--border-radius);
                    border-right-color: var(--color-header-border); 
                    & .icon{
                        background-image: url(img/arrow-down.svg);
                        filter: var(--invert-header-img, none);
                    }
                }
            }

            &.visible{

                &.selected .inner{
                    background-color: var(--color-selected-background);
                    & .icon{
                        background-image: url(img/check3.svg);
                    }
                }
            
             
                &.error .inner{
                    background-color: red;
                    & .icon{
                        background-image: url(img/error2.svg);
                    }
                }


                &.readonly .inner .icon{
                    background-image: url(img/lock.svg);
                }
        
                &.warning .inner{
                    background-color: orange;
                    & .icon{
                        background-image: url(img/caution.svg);
                        background-size: 55%;   /* fit triangle svg */
                    }
                  
                }
        
                &.okay .inner .icon{
                    background-color: rgb(17, 206, 17);
                }

                &.active .inner{
                    cursor: not-allowed;
                    background-color: var(--color-selected-cell);
                }

            }

        }
    }

  
  
        & .asgridheader{
            display: inline-flex;   /* only thing that works but adds some extra space beneath */
            height: var(--header-height);
            background-color: var(--color-header-background);
            height: var(--header-height);
            overflow: hidden;
            width: fit-content;
            /* min-width: 100%;        /* always fill entire parent with the header */
   
            position: sticky;
            top : 0;
            z-index: 2;
            opacity: 95%;
            filter: drop-shadow(-0.2rem var(--small-shadow) var(--small-shadow) var(--color-base-shadow)); 
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);

            & .asgridheadercol{       
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-right: var(--onepx) solid var(--color-header-border);
                padding-left: 0;
                flex-shrink: 0;
                flex-grow: 0;
                overflow: hidden;   /* resizing to very small width */

                &.dragover{
                    filter: brightness(75%);
                    border: 0.1rem dotted var(--color-highlight-border);
                }

            

                & img,
                & .assizer{
                    filter: var(--invert-header-img, none);
                }


            
                & *{            /* header cells -> astitle, sizer */
                    color: var(--color-header-text);
                    line-height: var(--header-height);
                    font-weight: var(--weight-header);
                }

                & .asbutton.sort{           /* sort button */
                    cursor: pointer;        /* otherwise draghand */
                }

                
                & .asbutton.title{          /* column title -------*/
                    font-size: 0.95rem;
                    border: none;       /* buttons without img get a border by default */
                    min-width: 1px;
                }

                & .filter.icon{
                    display: none;
                    width: 1.2rem;
                    filter: var(--invert-header-img, none);
                    pointer-events: auto;
                }

                &.filtered .filter.icon{
                    display: inline-flex;
                    font-style: italic;
                    background-image: var(--url-filter);
                    background-position-x: left; 
                }

               /* & .assizer{
                } */
            }
        }
    


    & .asgridrecord{
        display: block;
        white-space: nowrap;
        overflow: hidden;
        height: var(--row-height);
        width: fit-content;          /* otherwise tr can be wider than its cells */
        background-color: var(--color-data-background); 

    

        &.selected,                 /* active and or selected row */
        &.active{                         
            background-color: var(--color-selected-background);
          
            & .asgridcell{
                border-color: var(--color-selected-border);
                color: var(--color-selected-text);
            }

        }


    }
    
    & .asgridcell {
        display: inline-block;                      /* crucial      */
        overflow: hidden;
        
        height: var(--row-height);
        max-height: var(--row-height);
        line-height: var(--row-height);             /* = vertical text-align */
     
        padding-left: var(--cell-padding-horz);
        padding-right: var(--cell-padding-horz);    /* */

        border-top-color: transparent;                  /* no double lines between rows */
        border-bottom: solid var(--onepx) var(--color-data-border); 
        border-right: solid var(--onepx) var(--color-data-border);
        color: var(--color-data-text);

        & img{
            height: calc(var(--row-height) - 0.6rem); /* any image that is inside the grid data, make sure it fits */
            margin-top: 0.3rem;
        }

      /*  &.readonly{
            background-color: var(--color-readonly-background);
        } */

        &.bool.checked{                                 /* boolean field checked */
            background-image: var(--url-check);
            background-size: 1.4rem;
        }

        &.binary, /* todo 3 make generic for all fields with an action */ 
        &.file{
            max-height: var(--row-height);
            margin: 0;

            & .astitle{
                margin-right: var(--row-height);
                font-family: inherit;
                font-size: inherit;
                overflow: hidden;
            }

            & .asbutton.action{
                position: absolute;
                top: 0;
                right: 0;
                border-radius: 0;
            }
        }

    
        

        &.active{                                /* active cell */
            background-color: var(--color-selected-cell);
        }
    }

    &:focus-within{
    
        & .asgridcell.active{                         /* active cell within a focused grid gets focus color */
            background-color: var(--color-focus-background);
            color: var(--color-focus-text);
        }
    }

    &.aseditgrid{

        & .asgridrecord:not(.selected):not(.active) .asgridcell.readonly{
            background-color: var(--color-readonly-background);
            color: var(--color-readonly-text);
        }
    
        &:focus-within{ 
            & .asgridcell.active:not(.readonly){                         /* active cell within a focused grid gets focus color */
                border-bottom-style: dotted;
                border-bottom-width: 0.15rem;
                border-bottom-color: var(--color-data-border);
            }
        }
    }

   

  
}
/* dialog, messages, lookup dialog. Dialog inherits from ASPanel                                  */

.aspopover{
    position: absolute;
    border-radius: var(--border-radius);
    border: var(--onepx) solid var(--color-base-border);
    filter: drop-shadow(0.3rem 0.3rem 0.3rem var(--color-base-shadow));
    min-height: 4rem;
    min-width: 8rem;
    overflow: hidden;
    background-color: var(--color-dialog-background);
    color: var(--color-base-text);
    z-index: 5;

    & .aspanel{
        background-color: inherit;
    }

    & .asdialogheader{
        background-color: var(--color-header-background);
        border-bottom: var(--onepx) solid var(--color-header-border);
        height: var(--header-height);
    }

    & .asheader {
        font-weight: bold;
        color: var(--color-header-text);    
        line-height: var(--header-height);
        padding-left: var(--padding-horz);
    }

    &.asbusypopover{
        padding: 0.8rem;
        min-height: 6rem;
        width: 10rem;
        height: fit-content;
        
        & > .asimage{
            margin-top: 0.8rem;
            margin-bottom: 1rem;          /* for progressbar */
            width: 2rem;
            height: 2rem;
        }

        & .asprogressbar{
            margin-bottom: 1rem;
        }

        &.asmodalbusypopover::backdrop{
            background-image: linear-gradient(45deg, var(--color-backdrop-start), var(--color-backdrop-end));
            opacity: 0.40;
        }
    }

    

    &.asnotifypopover{
        min-width: 20rem;
        max-width: calc(min(80%, 24rem));
        max-height: 20rem;
        overflow: auto;
        top: -12rem;                /* slide into view */
        transition: 0.5s;
        
        & .body{
            padding: var(--margin-vert);
            min-height: 4rem;
            max-height: 20rem;
            cursor: pointer;
        }
    }
   


    &.asbasedialog{
        min-width: 22rem;
        padding: 0;
        width: 26rem;
        min-height: 12rem;
        max-height: calc(min(95%, 60rem));
        max-width: 95%;
        _overflow: hidden;
        _transition: top 0.5s;

        & .asdialogheader .astitle{ 
            cursor: default;    /* cannot dragmove there, todo 5 fix this instead */
        }


        &::backdrop {                                /* background of modal dialog */
            background-image: linear-gradient(45deg, var(--color-backdrop-start), var(--color-backdrop-end));
            opacity: 0.40;
        }
    

        /* error message created with dialog */

        &.aserrormessage .asdialogheader{
            background-color: var(--color-error-background);
            & .astitle{
                color: var(--color-error-text);
            }
        }

        & .mid{         /* = aspanel with a little padding, could be a generic thing like paddedPanel */
            max-width: 100%;
            padding: 0.5rem;     
        
        }

        &.aslookupdialog{
            height: 8rem;   /* will adapt to recordcount */
            width: fit-content;
           
            & .mid{         /* = no padding, grid */
                padding: 0;
                & .asgrid{
                    & .asgridrecord.active  {
                        filter: brightness(95%);  /* gives more of a row-select vibe */
  
                    }
                } 
            }
       
        }

        &.astextinputdialog{
            height: 60rem;
            width: 80rem;
        }

        &.aslogindialog{
            & .expired{
                padding: 0.4rem;
                margin-top: 1rem;
            }
            & .version{
                font-size: 0.8rem;
                font-style: italic;
                color: var(--color-soft-text);
                margin-left: 0.5rem;
            }
        }

        &.asmessage{
     
           & .asbutton:focus{    /* do not rely on focus-visible, always show focused button in messages */
                background-color: var(--color-focus-background);
           }
            
            &.caution .mid{
                & .asimage{
                    width: 4rem;
                    margin-bottom: 1rem;

                }
                & .astitle{
                    font-weight: bold;
                    padding-bottom: 1rem;
                    padding-top: 1rem;
                    margin-bottom: 2rem;
                    _border: 1px solid var(--color-base-border);
                    border-radius: var(--border-radius);
                    text-align: center;
                }
            }
        }
    }
} 

.asprogressbar{
    height: 1.5rem;
    width: 8rem;
    background-color: var(--color-base-background);
    border: var(--onepx) solid var(--color-base-border);
    border-radius: var(--border-radius);
    & .progress{
        width: 1px; /* must be px for progress */
        background-color: var(--color-focus-background); 
        line-height: 1.5rem;
        font-size: 0.8rem;
        text-align: center;
    }
}


/*
dialog[open] {
    animation: fadein 0.2s ease-in forwards;
  }
  
  @keyframes fadein{
    0%{
      opacity:0.2;
    }
    100%{
      opacity:1;
    }
  }
*/



/* menu inherits from popover/aspanel--------*/

.asmenu{
    width: fit-content;
    min-width: 14rem;
    max-height: 80vh;
    min-height: var(--menu-item-height);
    overflow-y: auto;
    z-index: 10;

    &.menutop{
        margin-bottom: var(--menu-item-height);
    }

}

.asmenucategory{
    flex-shrink: 0;
    height: var(--menu-item-height);
    line-height: var(--menu-item-height);      /* center vertically */
    padding-top: 0.4rem;    /* create a slight margin to previous group */
    padding-left: 0.4rem; /* they have no image, but align the text with the text of the buttons with images */
    text-wrap: nowrap;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-side-header-text);
}.aspullrefresh{
        display: flex;
        position: absolute;
        top: -3rem;
        left: calc(100% / 2 - 2rem);
        background-color: var(--color-base-background);
        width: 2.2rem;
        height: 2.2rem;
        z-index: 2;
        border-radius: 50%;
        filter: drop-shadow(0.2rem 0.2rem 0.2rem var(--color-base-shadow) );
        padding: 0.2rem;

        & .asimage{
            flex: 1;
        }

        &.active {
            background-color: var(--color-focus-background);
            transition: all 0.5s;
            &.refreshing .asimage{
                    content:url('img/loading.gif');
            }
        }
        &.removing{
            transition: 0.5s ease; /* slide out */
        }
    }

.asscreen{                      /* inherits from aspanel so has full width */
    transition: margin-left 0.5s;  /* slide in / out */
    flex-shrink: 0;
    height: 100%;

    & .asscreenheader{                    /* inherits from astoolbar but maybe it will get higher */
        height: fit-content;
    }

    & .body{ /* todo 5 replace with assplitpanel */
        flex-wrap: nowrap;
        height: 100%;
        width: 100%;
        overflow: hidden;

        & .main.top{            /* main panel in the screen */
            height: 50%;
            flex-shrink: 0;
        }
    
        & .main.left{            /* main panel in the screen */
            width: 50%;
        }
    }

    

}
.assidepanel{
    max-height: 100%;
    width: 0;
    min-width: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;  /* 10 is highest and equal to menus */
    transition: 0.5s;
    background-color: var(--color-side-background);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  
   
    & .aspanel{ /* the scrollbox */
        background-color: transparent;
        color: var(--color-side-text);
        padding-left: var(--padding-horz);
        padding-right: var(--padding-horz);
        overflow-x: hidden;
        scrollbar-width: none;
        & .asbutton img{
            filter: var(--invert-side-img, none);
        }
    
    }


    & .astitlebar{   /* side bar header, = astitlebar = astoolbar */
        background-color: var(--color-side-header-background);
        
        &  .astitle{
            color: var(--color-side-header-text);
            text-wrap: nowrap;  /* prevent text wrapping on slide in/out */
        }
    }


    & .bottom{
        border-top: var(--onepx) solid var(--color-side-text);
        padding: var(--padding-vert);
        overflow: hidden;
        min-height: calc((var(--menu-item-height) + var(--padding-vert) * 2));
        margin-top: auto;
    }

    & .asmenubutton{
        width: 100%;
        height: 2.8rem;
        border-radius: var(--border-radius);
        border: var(--onepx) solid transparent;     /* create room for the active button border */

        &.active{
            border-color: var(--color-side-text);
            _border-radius: 0;
        }


        & .astitle{
            margin-right: 0.5rem;
        }

    }

    &:not(.pinned){
        opacity: 100%;
        filter: drop-shadow(0.3rem 0.3rem 0.2rem var(--color-base-shadow));
    }

    &.pinned{
        opacity: 100%;
        border-right: 1px solid var(--color-side-border);
    }

}.asapplication{
    width: 100%;
    height: 100%;
    flex-flow: column nowrap;
    color: var(--color-base-text);  /* inherits all the way */
    background-color: var(--color-base-background);

    &.sidepanelpinned .asscreen{
        margin-left: 15rem;                 /* == sidepanel.size */

        & .hamburger{
            display: none;
        }

        & .astoolgroup:has(.hamburger){ /* hide that burger */
            min-width: 0;
        }
    }



}