:root {
    /*
        Jsa defines a number of CSS variables, which help to define a 
        consistent looking style of the application. These are organized 
        in the sections MAIN, CONTROL, DIALOG, POPUP and APP.

        In addition, every jsa UI element has its own CSS class, which 
        enables to overwrite individual appearances.
    */

    /* JSA MAIN STYLES */
    --jsa-font-family: "Helvetica";
    --jsa-font-size: 1rem;
    --jsa-line-heigh: 1.5rem;
    --jsa-color: #000000;
    --jsa-bg-color: #ffffff;
    --jsa-bd-w: 1px;
    --jsa-bd-style: solid;
    --jsa-bd-color: #c2c2ce;
    --jsa-bd-radius: 0.5rem;
    --jsa-color-excited: #5b5bff;
    --jsa-color-excited-hover: #7da6ff;
    --jsa-color-error: #c00000;
    --jsa-bg-color-error: #ffb7b7;
    --jsa-color-warning: #ffc000;
    --jsa-bg-color-warning: #fff2cc;
    --jsa-color-success: #00b050;
    --jsa-bg-color-success: #93ffc4;
    --jsa-color-info: #292cff;
    --jsa-bg-color-info: #bbbcff;
    --jsa-color-link: var(--jsa-color-excited);
    --jsa-color-link-hover: var(--jsa-color-excited-hover);
    --jsa-padding: calc(0.5*var(--jsa-font-size));

    /* fancy additions */
    --jsa-backdrop-filter: blur(5px);

    /* JSA CONTROL STYLES */
    --jsa-ctrl-color-input: #000000;
    --jsa-ctrl-bg-color-input: #ffffff;
    --jsa-ctrl-bd-input-w: 1px;
    --jsa-ctrl-bd-input-style: solid;
    --jsa-ctrl-bd-input-color: #c2c2ce;
    --jsa-ctrl-disabled-bg-input-color: #ffffff;

    --jsa-ctrl-color-button: #ffffff;
    --jsa-ctrl-bg-color-button: var(--jsa-color-excited);
    --jsa-ctrl-bg-color-button-hover: var(--jsa-color-excited-hover);
    --jsa-ctrl-bd-button-w: 0px;
    --jsa-ctrl-bd-button-style: solid;
    --jsa-ctrl-bd-button-color: #c2c2ce;
    --jsa-ctrl-disabled-bg-button-color:  #a2a2ae;

    --jsa-ctrl-bd-radius: var(--jsa-bd-radius);
    --jsa-ctrl-disabled-color: #c2c2ce;
    --jsa-ctrl-shadow-active: 0rem 0rem 0.1rem var(--jsa-color-excited);
    --jsa-ctrl-hover-shadow: 0rem 0rem 0.1rem var(--jsa-color-excited-hover);
    --jsa-ctrl-padding: var(--jsa-padding);
    --jsa-ctrl-h: calc(2*var(--jsa-font-size));
    --jsa-ctrl-w: calc(10*var(--jsa-font-size));

    /* JSA DIALOG STYLES */
    --jsa-dialog-color: #ffffff;
    --jsa-dialog-bg-color: #002060;
    --jsa-dialog-bg-color-alpha: #00206060;
    --jsa-dialog-bd-w: 0px;
    --jsa-dialog-bd-style: solid;
    --jsa-dialog-bd-color: #ccccff;
    --jsa-dialog-bd-radius: var(--jsa-bd-radius);
    --jsa-dialog-shadow: none;
    --jsa-dialog-shadow-hover: 0rem 0rem 0.1rem var(--jsa-color-excited-hover);
    --jsa-dialog-padding: var(--jsa-padding);
    --jsa-dialog-z-index: 2000;

    /* JSA POPUP STYLES */
    --jsa-popup-color: #000000;
    --jsa-popup-bg-color: #c2c2ce;
    --jsa-popup-bg-color-alpha: #c2c2cebb;
    --jsa-popup-bd-w: 0px;
    --jsa-popup-bd-style: solid;
    --jsa-popup-bd-color: #92929e;
    --jsa-popup-bd-radius: var(--jsa-bd-radius); 
    --jsa-popup-shadow: 0rem 0rem 0.1rem #000000;
    --jsa-popup-shadow-hover: 0rem 0rem 0.25rem var(--jsa-color-excited-hover);
    --jsa-popup-padding: var(--jsa-padding);
    --jsa-popup-z-index: 1000;

    /* JSA APP STYLES */
    --jsa-app-title-bar-h: 3rem;
    --jsa-app-status-bar-h: 1.5rem;
    --jsa-app-tooltip-z-index: 30000; /*Should be always on top*/
    --jsa-app-tooltip-bg-color: #ffffddbb;
    --jsa-app-tooltip-w: 10rem;

    /* JSA ICON SIZES*/
    --jsa-icon-w-s: var(--jsa-font-size); /* small (text size) icons*/
    --jsa-icon-w-m: var(--jsa-line-heigh); /*mid size icons*/
    --jsa-icon-w-l: calc(2*var(--jsa-line-heigh)); /*large icons*/
    

    /* DEFAULT ICONS*/
    --jsa-icon-jsa-dark:             url(img/black/jsa.svg);
    --jsa-icon-home-dark:            url(img/black/home.svg);
    --jsa-icon-folder-dark:          url(img/black/folder.svg);
    --jsa-icon-menu-dark:            url(img/black/menu.svg);
    --jsa-icon-menu-hover-dark:      url(img/black/menu-hover.svg);
    --jsa-icon-close-dark:           url(img/black/close.svg);
    --jsa-icon-close-hover-dark:     url(img/black/close-hover.svg);
    --jsa-icon-minimize-dark:        url(img/black/minimize.svg);
    --jsa-icon-minimize-hover-dark:  url(img/black/minimize-hover.svg);
    --jsa-icon-maximize-dark:        url(img/black/maximize.svg);
    --jsa-icon-maximize-hover-dark:  url(img/black/maximize-hover.svg);
    --jsa-icon-view-dark:            url(img/black/view.svg);
    --jsa-icon-view-hover-dark:      url(img/black/view-hover.svg);
    --jsa-icon-bubble-dark:          url(img/black/bubble.svg);
    --jsa-icon-bubble-hover-dark:    url(img/black/bubble-hover.svg);
    --jsa-icon-undo-dark:            url(img/black/undo.svg);
    --jsa-icon-redo-dark:            url(img/black/redo.svg);
    --jsa-icon-settings-dark:        url(img/black/settings.svg);

    --jsa-icon-jsa-light:             url(img/white/jsa.svg);
    --jsa-icon-home-light:            url(img/white/home.svg);
    --jsa-icon-folder-light:          url(img/white/folder.svg);
    --jsa-icon-menu-light:            url(img/white/menu.svg);
    --jsa-icon-menu-hover-light:      url(img/white/menu-hover.svg);
    --jsa-icon-close-light:           url(img/white/close.svg);
    --jsa-icon-close-hover-light:     url(img/white/close-hover.svg);
    --jsa-icon-minimize-light:        url(img/white/minimize.svg);
    --jsa-icon-minimize-hover-light:  url(img/white/minimize-hover.svg);
    --jsa-icon-maximize-light:        url(img/white/maximize.svg);
    --jsa-icon-maximize-hover-light:  url(img/white/maximize-hover.svg);
    --jsa-icon-view-light:            url(img/white/view.svg);
    --jsa-icon-view-hover-light:      url(img/white/view-hover.svg);
    --jsa-icon-bubble-light:          url(img/white/bubble.svg);
    --jsa-icon-bubble-hover-light:    url(img/white/bubble-hover.svg);
    --jsa-icon-undo-light:            url(img/white/undo.svg);
    --jsa-icon-redo-light:            url(img/white/redo.svg);
    --jsa-icon-settings-light:        url(img/white/settings.svg);

    --jsa-icon-jsa:             var(--jsa-icon-jsa-dark);          
    --jsa-icon-home:            var(--jsa-icon-home-dark);         
    --jsa-icon-folder:          var(--jsa-icon-folder-dark);       
    --jsa-icon-menu:            var(--jsa-icon-menu-dark);         
    --jsa-icon-menu-hover:      var(--jsa-icon-menu-hover-dark);   
    --jsa-icon-close:           var(--jsa-icon-close-dark);       
    --jsa-icon-close-hover:     var(--jsa-icon-close-hover-dark);  
    --jsa-icon-minimize:        var(--jsa-icon-minimize-dark);     
    --jsa-icon-minimize-hover:  var(--jsa-icon-minimize-hover-dark);
    --jsa-icon-maximize:        var(--jsa-icon-maximize-dark);    
    --jsa-icon-maximize-hover:  var(--jsa-icon-maximize-hover-dark);
    --jsa-icon-view:            var(--jsa-icon-view-dark);        
    --jsa-icon-view-hover:      var(--jsa-icon-view-hover-dark);   
    --jsa-icon-bubble:          var(--jsa-icon-bubble-dark);      
    --jsa-icon-bubble-hover:    var(--jsa-icon-bubble-hover-dark); 
    --jsa-icon-undo:            var(--jsa-icon-undo-dark);  
    --jsa-icon-redo:            var(--jsa-icon-redo-dark);  
    --jsa-icon-settings:        var(--jsa-icon-settings-dark);  

    --jsa-icon-resize-nw: url(img/resize-nw.svg);
    --jsa-icon-resize-ne: url(img/resize-ne.svg);
    --jsa-icon-resize-se: url(img/resize-se.svg);
    --jsa-icon-resize-sw: url(img/resize-sw.svg);
}


/* GENERAL */
body {
    color: var(--jsa-color);
    background-color: var(--jsa-bg-color);
    font-family: var(--jsa-font-family);
    font-size: var(--jsa-font-size);
    text-align: left;
    margin: 0;
}

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

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

a:hover {
    color: var(--jsa-color-link-hover);
    text-decoration: underline;
}

p {
    margin: 0;
    margin-bottom: var(--jsa-padding);
}

h1 {
    font-size: calc(2.0*var(--jsa-font-size));
    font-weight: normal;
    font-style: normal;
    margin-bottom: var(--jsa-padding);
}

h2 {
    font-size: calc(1.8*var(--jsa-font-size));
    font-weight: normal;
    font-style: italic;
    margin: 0;
    margin-bottom: var(--jsa-padding);
}

h3 {
    font-size: 1.6rem;
    font-weight: normal;
    font-style: normal;
    margin: 0;
    font-size: calc(1.6*var(--jsa-font-size));
    margin-bottom: var(--jsa-padding);
}

h4 {
    font-size: calc(1.4*var(--jsa-font-size));
    font-weight: normal;
    font-style: normal;
    margin: 0;
    margin-bottom: var(--jsa-padding);
}

h5 {
    font-size: calc(1.2*var(--jsa-font-size));
    font-weight: normal;
    font-style: normal;
    margin: 0;
    margin-bottom: var(--jsa-padding);
}

h6 {
    font-size: calc(1.0*var(--jsa-font-size));
    font-weight: normal;
    font-style: italic;
    margin: 0;
    margin-bottom: var(--jsa-padding);
}


button, input, optgroup, select, textarea {
    display: inline-block;
    height: var(--jsa-ctrl-h);
    font-size: var(--jsa-font-size);
    color: var(--jsa-ctrl-color-input);
    background-color: var(--jsa-ctrl-bg-color-input);
    background-clip: padding-box;
    border: var(--jsa-ctrl-bd-input-w) var(--jsa-ctrl-bd-input-style) var(--jsa-ctrl-bd-input-color);
    border-radius: var(--jsa-ctrl-bd-radius);   
    padding-left: var(--jsa-ctrl-padding); 
    padding-right: var(--jsa-ctrl-padding); 
    margin: 0;
    /* box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); */
}

button {
    color: var(--jsa-ctrl-color-button);
    background-color: var(--jsa-ctrl-bg-color-button);
    border: var(--jsa-ctrl-bd-button-w) var(--jsa-ctrl-bd-button-style) var(--jsa-ctrl-bd-button-color);
}

button:hover {
    background-color: var(--jsa-ctrl-bg-color-button-hover);
}

button:focus, input:focus, optgroup:focus, select:focus, textarea:focus{
    outline: none;
    box-shadow: var(--jsa-ctrl-hover-shadow);
}

input:disabled, optgroup:disabled, select:disabled, textarea:disabled {
    color: var(--jsa-ctrl-disabled-color);
    background-color: var(--jsa-ctrl-disabled-bg-input-color);
}

button:disabled {
    color: var(--jsa-ctrl-disabled-color);
    background-color: var(--jsa-ctrl-disabled-bg-button-color);
}

input[type=radio]:disabled+label,input[type=checkbox]:disabled+label {
    color: var(--jsa-ctrl-disabled-color);
}


input:read-only, textarea:read-only {
    color: var(--jsa-ctrl-disabled-color);
    background-color: var(--jsa-ctrl-disabled-bg-input-color);
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

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

.jsa-col-8, .jsa-col-1t  {
    display:inline-block;
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
}

.jsa-col-17, .jsa-col-2t  {
    display:inline-block;
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
}

.jsa-col-20  {
    display:inline-block;
    flex: 0 0 20%;
    max-width: 20%;
}

.jsa-col-25, .jsa-col-3t {
    display:inline-block;
    flex: 0 0 25%;
    max-width: 25%;
}

.jsa-col-33, .jsa-col-4t {
    display:inline-block;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

.jsa-col-30 {
    display:inline-block;
    flex: 0 0 30%;
    max-width: 30%;
}

.jsa-col-40 {
    display:inline-block;
    flex: 0 0 40%;
    max-width: 40%;
}

.jsa-col-42, .jsa-col-5t {
    display:inline-block;
    flex: 0 0 41,6666%;
    max-width: 41.6666%;
}

.jsa-col-50, .jsa-col-6t {
    display:inline-block;
    flex: 0 0 50%;
    max-width: 50%;
}

.jsa-col-58, .jsa-col-7t {
    display:inline-block;
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
}

.jsa-col-60 {
    display:inline-block;
    flex: 0 0 60%;
    max-width: 60%;
}

.jsa-col-67, .jsa-col-8t {
    display:inline-block;
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
}

.jsa-col-75, .jsa-col-9t {
    display:inline-block;
    flex: 0 0 75%;
    max-width: 75%;
}

.jsa-col-80 {
    display:inline-block;
    flex: 0 0 80%;
    max-width: 80%;
}

.jsa-col-83, .jsa-col-10t {
    display:inline-block;
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
}

.jsa-col-92, .jsa-col-11t {
    display:inline-block;
    flex: 0 0 91.6666%;
    max-width: 91.6666%;
}

.jsa-col-100, .jsa-col-12t {
    display:inline-block;
    flex: 0 0 100%;
    max-width: 100%;
}

.jsa-attach-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.jsa-attach-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left:0;
}

.jsa-attach-top {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.jsa-attach-bottom {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom:0;
}

/* ICON */
/* icons in small, mid, and large */
.jsa-icon {
    background-size: 100% 100%;
    background-position: 0px 0px; 
    border: 0;
}

.jsa-icon-s {
    width: var(--jsa-font-size);
    height: var(--jsa-font-size);
}

.jsa-icon-m {
    width: var(--jsa-icon-w-m);
    height: var(--jsa-icon-w-m);
}

.jsa-icon-l {
    width: var(--jsa-icon-w-l);
    height: var(--jsa-icon-w-l);
}

.jsa-icon-s img, .jsa-icon-m img, .jsa-icon-l img {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}

/* button icons in small, mid, and large */
.jsa-icon-s-button {
    border-radius: calc(0.5 * var(--jsa-font-size));
    background-color: #ffffff;
    background-size: 60% 60%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 0;
}

.jsa-icon-m-button {
    border-radius: calc(0.5 * var(--jsa-icon-w-m));
    background-color: var(--jsa-ctrl-bg-color-input);
    background-size: 60% 60%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 0;
}

.jsa-icon-l-button {
    border-radius: calc(0.5 * var(--jsa-icon-w-l));
    background-color: #ffffff;
    background-size: 60% 60%;
    background-position: 50% 50%; 
    background-repeat: no-repeat;
    border: 0;
}

.jsa-icon-s-button img, .jsa-icon-m-button img, .jsa-icon-l-button img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
}

.jsa-icon-s-button:not(.jsa-disabled):hover, .jsa-icon-m-button:not(.jsa-disabled):hover, .jsa-icon-l-button:not(.jsa-disabled):hover {
    background-color: var(--jsa-color-excited-hover);
}

/* default icons*/
.jsa-icon-jsa {                                 background-image: var(--jsa-icon-jsa);}
.jsa-icon-home {                                background-image: var(--jsa-icon-home);}
.jsa-icon-folder {                              background-image: var(--jsa-icon-folder);}
.jsa-icon-menu {                                background-image: var(--jsa-icon-menu);}
.jsa-icon-menu:not(.jsa-disabled):hover {       background-image: var(--jsa-icon-menu-hover);}
.jsa-icon-close {                               background-image: var(--jsa-icon-close);}
.jsa-icon-close:not(.jsa-disabled):hover {      background-image: var(--jsa-icon-close-hover);}
.jsa-icon-minimize {                            background-image: var(--jsa-icon-minimize);}
.jsa-icon-minimize:not(.jsa-disabled):hover {   background-image: var(--jsa-icon-minimize-hover);}
.jsa-icon-maximize {                            background-image: var(--jsa-icon-maximize);}
.jsa-icon-maximize:not(.jsa-disabled):hover {   background-image: var(--jsa-icon-maximize-hover);}
.jsa-icon-view {                                background-image: var(--jsa-icon-view);}
.jsa-icon-view:not(.jsa-disabled):hover {       background-image: var(--jsa-icon-view-hover);}
.jsa-icon-bubble {                              background-image: var(--jsa-icon-bubble);}
.jsa-icon-bubble:not(.jsa-disabled):hover {     background-image: var(--jsa-icon-bubble-hover);}
.jsa-icon-undo {                                background-image: var(--jsa-icon-undo);}
.jsa-icon-redo {                                background-image: var(--jsa-icon-redo);}
.jsa-icon-settings {                            background-image: var(--jsa-icon-settings);}

/* dark icon set*/
.jsa-icon-jsa-dark {                                background-image: var(--jsa-icon-jsa-dark);}
.jsa-icon-home-dark {                               background-image: var(--jsa-icon-home-dark);}
.jsa-icon-folder-dark {                             background-image: var(--jsa-icon-folder-dark);}
.jsa-icon-menu-dark {                               background-image: var(--jsa-icon-menu-dark);}
.jsa-icon-menu:not(.jsa-disabled):hover-dark {      background-image: var(--jsa-icon-menu-hover-dark);}
.jsa-icon-close-dark {                              background-image: var(--jsa-icon-close-dark);}
.jsa-icon-close:not(.jsa-disabled):hover-dark {     background-image: var(--jsa-icon-close-hover-dark);}
.jsa-icon-minimize-dark {                           background-image: var(--jsa-icon-minimize-dark);}
.jsa-icon-minimize:not(.jsa-disabled):hover-dark {  background-image: var(--jsa-icon-minimize-hover-dark);}
.jsa-icon-maximize-dark {                           background-image: var(--jsa-icon-maximize-dark);}
.jsa-icon-maximize:not(.jsa-disabled):hover-dark {  background-image: var(--jsa-icon-maximize-hover-dark);}
.jsa-icon-view-dark {                               background-image: var(--jsa-icon-view-dark);}
.jsa-icon-view:not(.jsa-disabled):hover-dark {      background-image: var(--jsa-icon-view-hover-dark);}
.jsa-icon-bubble-dark {                             background-image: var(--jsa-icon-bubble-dark);}
.jsa-icon-bubble:not(.jsa-disabled):hover-dark {    background-image: var(--jsa-icon-bubble-hover-dark);}
.jsa-icon-undo-dark {                               background-image: var(--jsa-icon-undo-dark);}
.jsa-icon-redo-dark {                               background-image: var(--jsa-icon-redo-dark);}
.jsa-icon-settings-dark {                           background-image: var(--jsa-icon-settings-dark);}

/* light icon set*/
.jsa-icon-jsa-light {                               background-image: var(--jsa-icon-jsa-light);}
.jsa-icon-home-light {                              background-image: var(--jsa-icon-home-light);}
.jsa-icon-folder-light {                            background-image: var(--jsa-icon-folder-light);}
.jsa-icon-menu-light {                              background-image: var(--jsa-icon-menu-light);}
.jsa-icon-menu:not(.jsa-disabled):hover-light {     background-image: var(--jsa-icon-menu-hover-light);}
.jsa-icon-close-light {                             background-image: var(--jsa-icon-close-light);}
.jsa-icon-close:not(.jsa-disabled):hover-light {    background-image: var(--jsa-icon-close-hover-light);}
.jsa-icon-minimize-light {                          background-image: var(--jsa-icon-minimize-light);}
.jsa-icon-minimize:not(.jsa-disabled):hover-light { background-image: var(--jsa-icon-minimize-hover-light);}
.jsa-icon-maximize-light {                          background-image: var(--jsa-icon-maximize-light);}
.jsa-icon-maximize:not(.jsa-disabled):hover-light { background-image: var(--jsa-icon-maximize-hover-light);}
.jsa-icon-view-light {                              background-image: var(--jsa-icon-view-light);}
.jsa-icon-view:not(.jsa-disabled):hover-light {     background-image: var(--jsa-icon-view-hover-light);}
.jsa-icon-bubble-light {                            background-image: var(--jsa-icon-bubble-light);}
.jsa-icon-bubble:not(.jsa-disabled):hover-light {   background-image: var(--jsa-icon-bubble-hover-light);}
.jsa-icon-undo-light {                              background-image: var(--jsa-icon-undo-light);}
.jsa-icon-redo-light {                              background-image: var(--jsa-icon-redo-light);}
.jsa-icon-settings-light {                          background-image: var(--jsa-icon-settings-light);}


/* APPLICATION */
.jsa-app {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
}

.jsa-app-main-ui {
    width: 100%;
    height: 100%;
    background-color: var(--jsa-bg-color);
    display: flex;
    flex-direction: column;
}

.jsa-app-label {
    font-size: calc(1.5*var(--jsa-font-size));
    color: inherit;
    padding: var(--jsa-padding);
}

.jsa-app-titlebar {
    height: var(--jsa-app-title-bar-h);
    width: 100%;
    color: var(--jsa-dialog-color);
    background-color: var(--jsa-dialog-bg-color);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.jsa-app-toolbar {
    flex-grow: 1;
}

div.jsa-app-tabbar { /*div. is necessary, because otherwise border will not be overridden. Reason unknown.*/
    color: var(--jsa-dialog-color);
    background-color: var(--jsa-dialog-bg-color); 
    border: var(--jsa-dialog-bd-w) var(--jsa-dialog-bd-style) var(--jsa-bg-color);
    border-radius: 0;
}

div.jsa-app-tabbar .jsa-tab { 
    border: 0;
}

div.jsa-app-tabbar .jsa-tab-active { 
    color: var(--jsa-color);
    background-color: var(--jsa-bd-color); 
}

div.jsa-app-tabbar .jsa-tabbar-top .jsa-tab-active {
    border: 0;
}

div.jsa-app-tabbar .jsa-tabbar-bottom .jsa-tab-active {
    border: 0;
}

/* statusbar */
.jsa-app-statusbar {
    height: var(--jsa-app-status-bar-h);
    width: 100%;
    color: var(--jsa-dialog-color);
    background-color: var(--jsa-dialog-bg-color);
}

div.jsa-app-tooltip {
    background-color: var(--jsa-app-tooltip-bg-color);
    min-width: var(--jsa-line-height);
    width: auto;
    max-width: 20rem;
    height: auto;
    /* min-height: var(--jsa-line-heigh); */
    z-index: var(--jsa-app-tooltip-z-index);    
    /* backdrop-filter: var(--jsa-backdrop-filter); */
}

div.jsa-app-tooltip .jsa-bubble-arrow:after {
	background-color: var(--jsa-app-tooltip-bg-color);
}


/* MENU ENTRY */
.jsa-menu-entry {
    background-color: inherit;
    min-width: var(--jsa-ctrl-w);
    height: var(--jsa-ctrl-h);
    border: 0;
    cursor: default;
}

.jsa-menu-entry-label {
    position: relative;
    width: 100%;
    height: 100%;
    color: inherit;
}

.jsa-menu-entry-label-container {
    margin: 0;
    padding: var(--jsa-ctrl-padding);
    width: 100%;
    height: 100%;
    color: inherit;
}

.jsa-menu-entry-label-container:hover {
    background-color: var(--jsa-color-excited-hover);
    cursor: pointer;
}

.jsa-menu-entry-disabled .jsa-menu-entry-label-container {
    color: var(--jsa-ctrl-disabled-color);
    background-color: inherit;
}

.jsa-menu-entry-disabled:hover .jsa-menu-entry-label-container {
    color: var(--jsa-ctrl-disabled-color);
    background-color: inherit;
}

.jsa-menu-entry-has-popup {
    position: relative;
    overflow: show;
}


/* MENU */
.jsa-menu {
    background-color: inherit;
    border: var(--jsa-dialog-bd-w) var(--jsa-dialog-bd-style) var(--jsa-ctrl-dialog-color);
    border-radius: 0;
    display: flex;
}

.jsa-menu-horizontal {
    height: var(--jsa-ctrl-h);
    flex-direction: row;
}

.jsa-menu-vertical {
    width: var(--jsa-ctrl-w);
    flex-direction: column;
}

.jsa-menu-is-popup {
    position: absolute;
    display: none;
    z-index: 5000;
    /* border: 1px solid white; */
    background-color: var(--jsa-dialog-bg-color-alpha);
    backdrop-filter: var(--jsa-backdrop-filter);
}

.jsa-menu-is-popup-bottom {
    left: 0;
    top: 100%;
}

.jsa-menu-is-popup-right {
    left: 100%;
    top: 0;
}

.jsa-menu-is-popup-left {
    right: 0;
    top: 0;
}

.jsa-menu-is-popup-top {
    left: 0;
    bottom: 0;
}

.jsa-menu-popup-level-0:hover .jsa-menu-popup-level-0 {
    display: inline-block;
}
.jsa-menu-popup-level-1:hover .jsa-menu-popup-level-1 {
    display: inline-block;
}
.jsa-menu-popup-level-2:hover .jsa-menu-popup-level-2 {
    display: inline-block;
}
.jsa-menu-popup-level-3:hover .jsa-menu-popup-level-3 {
    display: inline-block;
}
.jsa-menu-popup-level-4:hover .jsa-menu-popup-level-4 {
    display: inline-block;
}
.jsa-menu-popup-level-5:hover .jsa-menu-popup-level-5 {
    display: inline-block;
}
.jsa-menu-popup-level-6:hover .jsa-menu-popup-level-6 {
    display: inline-block;
}
.jsa-menu-popup-level-7:hover .jsa-menu-popup-level-7 {
    display: inline-block;
}
.jsa-menu-popup-level-8:hover .jsa-menu-popup-level-8 {
    display: inline-block;
}
.jsa-menu-popup-level-9:hover .jsa-menu-popup-level-9 {
    display: inline-block;
}

.jsa-menu-entry-disabled:hover .jsa-menu-popup-level-0 {
    display: none;
}
.jsa-menu-entry-disabled:hover .jsa-menu-popup-level-1 {
    display: none;
}
.jsa-menu-entry-disabled:hover .jsa-menu-popup-level-2 {
    display: none;
}
.jsa-menu-entry-disabled:hover .jsa-menu-popup-level-3 {
    display: none;
}
.jsa-menu-entry-disabled:hover .jsa-menu-popup-level-4 {
    display: none;
}
.jsa-menu-entry-disabled:hover .jsa-menu-popup-level-5 {
    display: none;
}
.jsa-menu-entry-disabled:hover .jsa-menu-popup-level-6 {
    display: none;
}
.jsa-menu-entry-disabled:hover .jsa-menu-popup-level-7 {
    display: none;
}
.jsa-menu-entry-disabled:hover .jsa-menu-popup-level-8 {
    display: none;
}
.jsa-menu-entry-disabled:hover .jsa-menu-popup-level-9 {
    display: none;
}

.jsa-inline-pad-right {
    display: inline-block;
    margin-right: var(--jsa-padding);
}

.jsa-inline-pad-left {
    display: inline-block;
    margin-left: var(--jsa-padding);
}

.jsa-disabled {
    /*the base class for all disabled items*/
}


/* STICKY */
.jsa-sticky {
    width: 30%;
    height: 10%;
    position:absolute;
    color: var(--jsa-popup-color);
    z-index: 500;
    background-color: var(--jsa-popup-bg-color-alpha);
    border: var(--jsa-popup-bd-w) var(--jsa-popup-bd-style) var(--jsa-popup-bd-color);
    border-radius: var(--jsa-popup-bd-radius);
    /* padding: var(--jsa-popup-padding); */
    /* box-shadow: var(--jsa-popup-shadow); */
    box-sizing: content-box; /*Important otherwise stickies start to jump*/
    /* filter: drop-shadow(var(--jsa-popup-shadow)); */
}

.jsa-sticky:not(.jsa-disabled):hover {
    z-index: var(--jsa-popup-z-index);
    /* box-shadow: var(--jsa-popup-shadow-hover); 
    filter: drop-shadow(var(--jsa-popup-shadow-hover));*/
}

.jsa-sticky-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: var(--jsa-popup-padding);
    border: inherit;
    border-width: 0px; /*Enable inheriting the border color for the parents*/ 
    border-radius: inherit;
    backdrop-filter: var(--jsa-backdrop-filter);
}

.jsa-sticky-toggler {
    position: absolute;
    visibility: visible;
    border: 1px solid var(--jsa-popup-bg-color);
}

.jsa-sticky-toggler:not(.jsa-disabled):hover {
    /* box-shadow: var(--sticky-hover-shadow); */
}

.jsa-sticky-toggler-collapsed {
    opacity: 0.5;
}

.jsa-sticky-nw {
    top: calc(2*var(--jsa-font-size) + var(--jsa-app-title-bar-h) + 2*var(--jsa-ctrl-h));
    left: calc(2*var(--jsa-font-size));
}

.jsa-sticky-ne {
    top: calc(2*var(--jsa-font-size) + var(--jsa-app-title-bar-h) + 2*var(--jsa-ctrl-h));
    right: calc(2*var(--jsa-font-size));
}

.jsa-sticky-sw {
    bottom: calc(2*var(--jsa-font-size) + var(--jsa-app-status-bar-h));
    left: calc(2*var(--jsa-font-size));
}

.jsa-sticky-se {
    bottom: calc(2*var(--jsa-font-size) + var(--jsa-app-status-bar-h));
    right: calc(2*var(--jsa-font-size));
}

.jsa-sticky-toggler-nw {
    top: calc(var(--jsa-app-title-bar-h)/-3);
    left: calc(var(--jsa-app-title-bar-h)/-3);
}

.jsa-sticky-toggler-ne {
    top: calc(var(--jsa-app-title-bar-h)/-3);
    right: calc(var(--jsa-app-title-bar-h)/-3);
}

.jsa-sticky-toggler-se {
    bottom: calc(var(--jsa-app-title-bar-h)/-3);
    right: calc(var(--jsa-app-title-bar-h)/-3);
}

.jsa-sticky-toggler-sw {
    bottom: calc(var(--jsa-app-title-bar-h)/-3);
    left: calc(var(--jsa-app-title-bar-h)/-3);
}


/* VIEW MANAGER */
.jsa-view-manager {
    color: inherit;
    border: 0;
    background-color: inherit;
    flex-grow: 1;
    width: 100%;
    height: 0;
}

/* VIEW */
.jsa-view {
    color: inherit;
    border: 0;
    background-color: inherit;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.jsa-view-container {
    overflow: auto;
    color: inherit;
    border: 0;
    background-color: inherit;
    width: 100%;
    height: 0;
    flex-grow: 1;
}

.jsa-view-header {
    color: inherit;
    background-color: var(--jsa-bd-color);
    border: 0;
    width: 100%;
    height: var(--jsa-ctrl-h);
}

.jsa-view-header-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* LABEL */
.jsa-label {
    display: block;
    height: 100%;
}

.jsa-label-container {
    display: flex;
    height: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
}

.jsa-label-h-left {
    justify-content: left;
}

.jsa-label-h-center {
    justify-content: center;
}

.jsa-label-h-right {
    justify-content: right;
}

.jsa-label-v-top {
    align-items: flex-start;
}

.jsa-label-v-middle {
    align-items: center;
}

.jsa-label-v-bottom {
    align-items: flex-end;
}

.jsa-label-pre {
    width: auto;
    height: var(--jsa-font-size);
}

.jsa-label-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.jsa-label-post {
   width: auto;
   height: var(--jsa-font-size);
}


/* BUBBLE */
.jsa-bubble {
    color: var(--jsa-popup-color);
    position: absolute;
    width: 30rem; /*width must be provided in order for auto-size depending on content to work*/
    height: 30%; /*height must be provided in order for auto-size depending on content to work*/
    min-height: calc(calc(2 * var(--jsa-icon-w-m)) + var(--jsa-line-heigh));
    z-index: var(--jsa-popup-z-index);
    /* padding: var(--jsa-popup-padding); */
    background-color: var(--jsa-popup-bg-color-alpha);
    border-radius: var(--jsa-popup-bd-radius);
    border: var(--jsa-popup-bd-w) var(--jsa-popup-bd-style) var(--jsa-popup-bd-color);
    overflow: visible;
    /* box-shadow: var(--jsa-popup-shadow); 
    filter: drop-shadow(var(--jsa-popup-shadow));*/
    /* backdrop-filter: var(--jsa-backdrop-filter); */
}

.jsa-bubble:hover {
    /* box-shadow: var(--jsa-popup-shadow-hover); 
    filter: drop-shadow(var(--jsa-popup-shadow-hover));*/
    z-index:2500;
}

.jsa-bubble-minimized {
    position: absolute;
    left: 50px;
    top: 50px;
    visibility: hidden;
    min-width: calc(2*var(--jsa-icon-w-m));;
    min-height: calc(var(--jsa-icon-w-m));
    /* padding-left: var(--jsa-popup-padding);
    padding-right: calc(var(--jsa-icon-w-m)); */
    padding: 0;
    background-color: var(--jsa-popup-bg-color);
    border-radius: var(--jsa-popup-bd-radius);
    border: var(--jsa-popup-bd-w) var(--jsa-popup-bd-style) var(--jsa-popup-bd-color);
    /* box-shadow: var(--jsa-popup-shadow); */
    z-index: 100;
    /* backdrop-filter: var(--jsa-backdrop-filter); */
}

.jsa-bubble-minimized:hover {
    /* box-shadow: var(--jsa-popup-shadow-hover); */
}

.jsa-bubble-restore {
    position: absolute;
    top: 0;
    right: 0;
}

/* generic arrow classes */
.jsa-bubble .jsa-bubble-arrow {
    content: '';
	position: absolute;
    overflow: hidden;
}

.jsa-bubble .jsa-bubble-arrow:after {
    content: '';
    position: absolute;
	width: 30px;
	height: 30px;
    transform: rotate(45deg);
    background-color: var(--jsa-popup-bg-color-alpha);
	border: var(--jsa-popup-bd-w) var(--jsa-popup-bd-style) var(--jsa-popup-bd-color);
    /* backdrop-filter: var(--jsa-backdrop-filter); seems to have no effect*/
}

/* special arrow classes for each direction */
.jsa-bubble .jsa-bubble-arrow-n {
	top: -21px;
	left: 50%;
	width: 42px;
    height: 21px;
    transform: translate(-21px,0px);
}

.jsa-bubble .jsa-bubble-arrow-n:after {
	top: 12px;
	left: 12px;
}

.jsa-bubble .jsa-bubble-arrow-e {
	top: 50%;
	right: -21px;
	width: 21px;
    height: 42px;
    transform: translate(0px,-21px);
}

.jsa-bubble .jsa-bubble-arrow-e:after {
	top: 12px;
	right: 12px;
}

.jsa-bubble .jsa-bubble-arrow-s {
	bottom: -21px;
	left: 50%;
	width: 42px;
    height: 21px;
    transform: translate(-21px,0px);
}

.jsa-bubble .jsa-bubble-arrow-s:after {
	bottom: 12px;
	left: 12px;
}

.jsa-bubble .jsa-bubble-arrow-w {
	top: 50%;
	left: -21px;
	width: 21px;
    height: 42px;
    transform: translate(0px,-21px);
}

.jsa-bubble .jsa-bubble-arrow-w:after {
	top: 12px;
	left: 12px;
}

.jsa-bubble-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: var(--jsa-popup-padding);
    border: inherit;
    border-width: 0px; /*Enable inheriting the border color for the parents*/
    /* background-color: transparent;  */
    backdrop-filter: var(--jsa-backdrop-filter);
    border-radius: inherit;
}

.jsa-bubble-controls-container {
    position: absolute;
    top: calc(var(--jsa-icon-w-m) / 3);
    right: calc(var(--jsa-icon-w-m) / 3);
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}



/* CUSTOM CONTAINER */
.jsa-customcontainer {
    color: var(--jsa-color);
    background-color: var(--jsa-bg-color); 
}

.jsa-customcontainer-container {
    color: var(--jsa-color);
    background-color: var(--jsa-bg-color); 
}


/* SPLASH */
.jsa-splash {
    position: absolute;
    margin: 0;
    z-index : 2000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.jsa-splash-background {
    position: absolute;
    color: var(--jsa-color);
    background-color: var(--jsa-bg-color);
    margin: 0;
    opacity: 0.5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.jsa-splash-container {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}


/* TEXT CTRL */
.jsa-text-ctrl {
    display: block;
}

.jsa-text-ctrl-input {
    display: block;
    width: 100%;
}

.jsa-text-ctrl-error-indication {
    display: block;
    width: 100%;
}

/* TEXTAREA CTRL */
.jsa-textarea-ctrl {
    display: block;
}

.jsa-textarea-ctrl-input {
    display: block;
    width: 100%;
    padding: var(--jsa-ctrl-padding);
    height: calc(3*var(--jsa-line-heigh));
    font-family: var(--jsa-font-family);
    font-size: var(--jsa-font-size);
}

.jsa-textarea-ctrl-error-indication {
    display: block;
    width: 100%;
}


/* RADIO CTRL */
.jsa-radio-ctrl {
    display: block;
}

.jsa-radio-ctrl-input {
    height: var(--jsa-font-size);
    vertical-align: sub;
    /* width:1rem; do not set the width, because it scales the control then, which can look ugly*/ 
    display: inline-block;
    margin-right: var(--jsa-ctrl-padding);
}

.jsa-radio-ctrl-label {
    display: inline-block;
}

.jsa-radio-ctrl-error-indication {
    color: var(--jsa-color-error);
    display: block;
    padding-left: 1.5rem;
}


/* CHECKBOX CTRL */
.jsa-checkbox-ctrl {
    display: block;
}

.jsa-checkbox-ctrl-input {
    height: var(--jsa-font-size);
    vertical-align: sub;
    /* width:1rem; do not set the width, because it scales the control then, which can look ugly*/ 
    display: inline-block;
    margin-right: var(--jsa-ctrl-padding);
}

.jsa-checkbox-ctrl-label {
    display: inline-block;
}

.jsa-checkbox-ctrl-error-indication {
    color: var(--jsa-color-error);
    display: block;
    padding-left: 1.5rem;
}

/* SELECT CTRL */
.jsa-select-ctrl {
    display: block;
}

.jsa-select-ctrl-input {
    display: block;
    width: 100%;
}


.jsa-select-ctrl-error-indication {
    color: var(--jsa-color-error);
    display: block;
}


/* MODAL */
.jsa-modal {
    position: absolute;
    margin: 0;
    z-index : var(--jsa-dialog-z-index);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.jsa-modal-background {
    position: absolute;
    background-color: var(--jsa-bg-color);
    opacity: 0.5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: var(--jsa-backdrop-filter);
}

.jsa-modal-dialog {
    position: absolute;
    color: var(--jsa-dialog-color);
    background-color: var(--jsa-dialog-bg-color);
    border: var(--jsa-dialog-bd-w) var(--jsa-dialog-bd-style) var(--jsa-dialog-bd-color);
    border-radius: var(--jsa-dialog-bd-radius);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 80%;
}

.jsa-modal-dialog:hover {
    box-shadow: var(--jsa-dialog-shadow-hover);
}

.jsa-modal-dialog-container {
    width: 100%;
    height: 100%;
    border: inherit; /*make sure the border color is forwarded to the children*/
    border-width: 0px;
}

.jsa-modal-title-container {
    width: 100%;
    height: auto;
    padding: var(--jsa-dialog-padding);
    font-weight: bold;
}

.jsa-modal-user-container {
    width: 100%;
    height: auto;
    padding: var(--jsa-dialog-padding);
    border: inherit; /*make sure the border color is forwarded to the children*/
    border-width: 0px;
}

.jsa-modal-button-container {
    width: 100%;
    height: auto;
    padding: var(--jsa-dialog-padding);
    text-align: right;
}


/*LOADING*/
.jsa-loading {
    width: 4rem;
    height: 4rem;
    background-image: url(img/loading.svg);
    background-size: 100% 100%;
    background-position: 0px 0px; 
    animation-name: jsa-loading-animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

@keyframes jsa-loading-animation {
  from {
    background-position: 4rem 0px;
  }
  to {
    background-position: 0rem 0px;
  }
}

/*DASHBOARDVIEW*/
.jsa-dashboard-view {
    padding-right: 6rem;
    padding-left: 6rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}


/*DASH*/
.jsa-dash {
    margin: var(--jsa-padding);
    padding: var(--jsa-padding);
    border: var(--jsa-bd-w) var(--jsa-bd-style) var(--jsa-bd-color);
    border-radius: var(--jsa-bd-radius);
}

.jsa-dash-title {
    /* background-color: var(--jsa-bd-color); */
    font-weight: bold;
    padding : 0;
    margin-bottom: var(--jsa-padding);
}

.jsa-dash-container {
    padding : 0;
}


/*TOOLBAR*/
.jsa-toolbar {
    margin:0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}


/* TOOL */
.jsa-tool {
    padding: 0;
}

.jsa-tool-container {
    width: var(--jsa-app-title-bar-h);
    height: var(--jsa-app-title-bar-h);
    background-size: var(--jsa-icon-w-m) var(--jsa-icon-w-m);
    background-position: center center; 
    background-repeat: no-repeat;
    background-image: url(img/tool-default.svg);
}

.jsa-tool:not(.jsa-disabled):hover {
    background-color: var(--jsa-color-excited-hover);
}


/* TABBAR */
.jsa-tabbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    border: inherit; /*make sure the border color is forwarded to the children*/
    border-width: 0px;
}

.jsa-tabbar-top {
    border-top-right-radius: var(--jsa-bd-radius); /* the border style consistent outer and inner elements*/
    border-top-left-radius: var(--jsa-bd-radius); /* the border style consistent outer and inner elements*/
}

.jsa-tabbar-bottom {
    border-bottom-right-radius: var(--jsa-bd-radius); /* the border style consistent outer and inner elements*/
    border-bottom-left-radius: var(--jsa-bd-radius); /* the border style consistent outer and inner elements*/
}


/* TAB */
.jsa-tab {
    flex-grow: 1;
    flex-basis: var(--jsa-ctrl-w);
    color: inherit;
    border: inherit; /*copy color and style ...*/
    border-width: var(--jsa-ctrl-bd-input-w);
    margin: 0px;
    min-width: var(--jsa-ctrl-w);
    height: var(--jsa-ctrl-h);
    opacity: 0.5;
}

.jsa-tab:not(.jsa-disabled):hover {
    background-color: var(--jsa-color-excited-hover);
    cursor: pointer;
    /*box-shadow: var(--tab-hover-shadow);*/
}

.jsa-tab-container {
    margin: 0;
    padding: var(--jsa-ctrl-padding);
    width: 100%;
    height: 100%;
}


.jsa-tab-active {
    /*define the style of the active tab*/
    opacity: 1.0;
    background-color: transparent;
}

.jsa-tabbar-top .jsa-tab {
    border-top-left-radius: var(--jsa-ctrl-bd-radius);
    border-top-right-radius: var(--jsa-ctrl-bd-radius);
}

.jsa-tabbar-bottom .jsa-tab {
    border-bottom-left-radius: var(--jsa-ctrl-bd-radius);
    border-bottom-right-radius: var(--jsa-ctrl-bd-radius);
}

.jsa-tabbar-top .jsa-tab-active {
    border-top-width: 2px;
    border-bottom: 0px;
}

.jsa-tabbar-bottom .jsa-tab-active {
    border-top: 0px;
    border-bottom-width: 2px;
}

.jsa-tab-controlled-container-tap-top { 
    /*a container for customized content for tab group controlled stuff*/
    padding: var(--jsa-ctrl-padding);
    border: inherit; /*copy color and style ...*/
    border-width: var(--jsa-ctrl-bd-input-w); /*... and override the width because a tab needs a width */
    border-top: 0;
}

.jsa-tab-controlled-container-tap-bottom { 
    /*a container for customized content for tab group controlled stuff*/
    padding: var(--jsa-ctrl-padding);
    border: inherit; /*copy color and style ...*/
    border-width: var(--jsa-ctrl-bd-input-w); /*... and override the width because a tab needs a width */
    border-bottom: 0;
}


/*BUTTON*/
.jsa-button {
    color: var(--jsa-ctrl-color-button);
    background-color: var(--jsa-ctrl-bg-color-button);
    border: var(--jsa-ctrl-bd-button-w) var(--jsa-ctrl-bd-button-style) var(--jsa-ctrl-bd-button-color);
    border-radius: var(--jsa-ctrl-bd-radius);
    padding: var(--jsa-ctrl-padding);
    text-align: center;
}


.jsa-button-disabled {
    color: var(--jsa-ctrl-disabled-color);
    background-color: var(--jsa-ctrl-disabled-bg-button-color);
}

.jsa-button-top {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.jsa-button-bottom {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.jsa-button-left {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.jsa-button-right {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.jsa-button:not(.jsa-disabled):hover:not([disabled]) {
    background-color: var(--jsa-ctrl-bg-color-button-hover  );
    box-shadow: var(--jsa-ctrl-hover-shadow);
    /*properties for link-style buttons*/
    text-decoration: none;
    cursor: pointer;
}

.jsa-button:disabled {
    color: var(--jsa-ctrl-disabled-color);
    background-color: var(--jsa-ctrl-disabled-bg-button-color);
    /* cursor: inherit; */
}

/* PROGRESSBAR*/
.jsa-progressbar {
    color: var(--jsa-ctrl-color-input);
    background-color: var(--jsa-ctrl-bg-color-input);
    border: var(--jsa-ctrl-bd-input-w) var(--jsa-ctrl-bd-input-style) var(--jsa-ctrl-bd-input-color);
    border-radius: var(--jsa-bd-radius);
    display: block;
    padding: calc(0.5 * var(--jsa-ctrl-padding));
}

.jsa-progressbar-container {
    width: 100%;
    height: calc(var(--jsa-ctrl-h) - var(--jsa-ctrl-padding));
    background-color: var(--jsa-ctrl-bd-input-color);
    border: 0;
    border-radius: inherit;
    position: relative;
}

.jsa-progressbar-bar {
    width: 50%;
    height: calc(var(--jsa-ctrl-h) - var(--jsa-ctrl-padding));
    background-color: var(--jsa-color-excited);
    border: 0;
    border-radius: inherit;
}

@keyframes jsa-progressbar-bar-animated {
    0% { background-position: -50% 0%; }
    50% { background-position: 0% 0%; }
    100% { background-position: 50% 0%; }
}

.jsa-progressbar-bar-animated {
    /* background-image: linear-gradient(to right, var(--jsa-bg-color-success), var(--jsa-color-success), var(--jsa-bg-color-success)); */
    background-image: linear-gradient(to right, #FFFFFF77, #FFFFFF00, #FFFFFF77);
    background-size: 50% 100%;
    background-position: -50% 0%; 
    animation-name: jsa-progressbar-bar-animated;
    animation-duration: 4s;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.jsa-progressbar-percentage {
    position: absolute;
    background-color: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /*center it*/
    /* text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;; */
}

.jsa-progressbar-bar-success {
    background-color: var(--jsa-color-success);
}

.jsa-progressbar-bar-error {
    background-color: var(--jsa-color-error);
}

/* COMPATIBILITY */
/*Overwriting jquery-ui styles*/
.ui-resizable-handle {
    position: absolute;
    width: var(--jsa-icon-w-m);
    height: var(--jsa-icon-w-m);
    background-size: 100% 100%;
    background-position: 0px 0px; 
}

.ui-resizable-nw {
    top: 0em;
    left: 0em;
    background-image: var(--jsa-icon-resize-nw);
}

.ui-resizable-ne {
    top: 0em;
    right: 0em;
    background-image: var(--jsa-icon-resize-ne);
}

.ui-resizable-se {
    bottom: 0em;
    right: 0em;
    background-image: var(--jsa-icon-resize-se);
}

.ui-resizable-sw {
    bottom: 0em;
    left: 0em;
    background-image: var(--jsa-icon-resize-sw);
}