/***********************************************
 * Color Schemes
 ***********************************************/
 html {
    --html-color: #0E272B;
    --html-background-color: #FFFFFF;
    --html-margin-left: 0px;
    --html-margin-right: 0px;
    --html-margin-top: 0px;
    --html-margin-bottom: 0px;
    --html-padding-left: 0px;
    --html-padding-right: 0px;
    --html-padding-top: 0px;
    --html-padding-bottom: 0px;
    --html-font-size: 16px;
    --html-font-family: Avenir, Helvetica, Arial, sans-serif;

    --body-color: #0E272B;
    --body-background-color: #FFFFFF;
    --body-margin-left: 0px;
    --body-margin-right: 0px;
    --body-margin-top: 0px;
    --body-margin-bottom: 0px;
    --body-padding-left: 0px;
    --body-padding-right: 0px;
    --body-padding-top: 0px;
    --body-padding-bottom: 0px;

    --h1-color: #0E272B;
    --h1-font-size: 20px;
    --h1-margin-top: 10px;
    --h1-margin-bottom: 4px;

    --h2-color: #0E272B;
    --h2-font-size: 18px;
    --h2-margin-top: 10px;
    --h2-margin-bottom: 4px;

    --h3-color: #0E272B;
    --h3-font-size: 16px;
    --h3-margin-top: 8px;
    --h3-margin-bottom: 4px;

    --h4-color: #0E272B;
    --h4-font-size: 14px;
    --h4-margin-top: 8px;
    --h4-margin-bottom: 4px;

    --h5-color: #0E272B;
    --h5-font-size: 13px;
    --h5-margin-top: 6px;
    --h5-margin-bottom: 3px;

    --h6-color: #0E272B;
    --h6-font-size: 12px;
    --h6-margin-top: 6px;
    --h6-margin-bottom: 3px;

    --input-color: #0E272B;
    --input-background-color: #FFFFFF;
    --input-border-color: #BFBFBF;
    --input-outline-color: #FFA32B;
    --input-hover-color: #0E272B;
    --input-hover-background-color: #F5F5F5;
    --input-hover-border-color: #BFBFBF;
    --input-hover-outline-color: #BFBFBF;
    --input-focus-color: #0E272B;
    --input-focus-background-color: #F5F5F5;
    --input-focus-border-color: #BFBFBF;
    --input-focus-outline-color: #FFA32B;
    --input-disabled-color: #F5F5F5;
    --input-disabled-background-color: #FFFFFF;
    --input-disabled-border-color: #5C5A58;
    --input-disabled-outline-color: #5C5A58;
    --input-disabled-symbol-color: #4A4742;
    --input-invalid-color: #FFB3B3;
    --input-invalid-background-color: #FFF5F5;
    --input-invalid-border-color: #ED0800;
    --input-invalid-outline-color: #ED0800;
    --input-symbol-color: #C8C8C8;
    --input-symbol-background-color: #F5F5F5;
    --input-checked-symbol-color: #1E81B0;
    --input-checked-symbol-background-color: #F5F5F5;
    --input-font-size: 16px;
    --input-border-radius: 5px;
    --input-margin-left: 0px;
    --input-margin-right: 0px;
    --input-margin-top: 0px;
    --input-margin-bottom: 0px;
    --input-padding-left: 3px;
    --input-padding-right: 3px;
    --input-padding-top: 12px;
    --input-padding-bottom: 12px;
    --input-border-width: 1px;
    --input-border-style: solid;
    --input-outline-style: none;
    --input-outline-width: 0px;
    --input-hover-border-width: 1px;
    --input-hover-border-style: solid;
    --input-focus-outline-style: solid;
    --input-focus-outline-width: 2px;
    --input-disabled-border-width: 1px;
    --input-disabled-border-style: solid;
    --input-invalid-border-width: 1px;
    --input-invalid-border-style: solid;

    --button-color: #FFFFFF;
    --button-background-color: #002f69;
    --button-border-color: #002f69;
    --button-outline-color: #FFA32B;
    --button-hover-color: #FFFFFF;
    --button-hover-background-color: #00B4EF;
    --button-hover-border-color: #00B4EF;
    --button-hover-outline-color: #00B4EF;
    --button-focus-color: #FFFFFF;
    --button-focus-background-color: #00B4EF;
    --button-focus-border-color: #00B4EF;
    --button-focus-outline-color: #FFA32B;
    --button-disabled-color: gray;
    --button-disabled-background-color: whitesmoke;
    --button-disabled-border-color: gainsboro;
    --button-disabled-outline-color: gainsboro;
    --button-disabled-symbol-color: #4A4742;
    --button-font-size: 16px;
    --button-border-radius: 8px;
    --button-margin-left: 0px;
    --button-margin-right: 0px;
    --button-margin-top: 0px;
    --button-margin-bottom: 0px;
    --button-padding-left: 3px;
    --button-padding-right: 3px;
    --button-padding-top: 12px;
    --button-padding-bottom: 12px;
    --button-border-width: 1px;
    --button-border-style: solid;
    --button-outline-style: none;
    --button-outline-width: 0px;
    --button-hover-border-width: 1px;
    --button-hover-border-style: solid;
    --button-focus-outline-style: solid;
    --button-focus-outline-width: 2px;
    --button-disabled-border-width: 1px;
    --button-disabled-border-style: solid;
    --button-invalid-border-width: 1px;
    --button-invalid-border-style: solid;

    --box-color: #0E272B;
    --box-background-color: #F5F5F5;
    --box-border-color: #0768DD;
    --box-border-style: solid;
    --box-border-width: 1px;
    --box-border-radius: 10px;

    --label-color: #002f69;
    --label-background-color: transparent;
    --label-font-size: 16px;
    --label-font-weight: bold;

    --navbar-horz-margin-left: 0px;
    --navbar-horz-margin-right: 0px;
    --navbar-horz-margin-top: 0px;
    --navbar-horz-margin-bottom: 0px;
    --navbar-horz-padding-left: 0px;
    --navbar-horz-padding-right: 0px;
    --navbar-horz-padding-top: 0px;
    --navbar-horz-padding-bottom: 0px;
    --navbar-horz-background-color: #00B4EF;

    --navinfo-horz-margin-left: 0px;
    --navinfo-horz-margin-right: 0px;
    --navinfo-horz-margin-top: 0px;
    --navinfo-horz-margin-bottom: 0px;
    --navinfo-horz-padding-left: 0px;
    --navinfo-horz-padding-right: 0px;
    --navinfo-horz-padding-top: 0px;
    --navinfo-horz-padding-bottom: 0px;

    --navbar-vert-margin-left: 0px;
    --navbar-vert-margin-right: 0px;
    --navbar-vert-margin-top: 0px;
    --navbar-vert-margin-bottom: 0px;
    --navbar-vert-padding-left: 0px;
    --navbar-vert-padding-right: 0px;
    --navbar-vert-padding-top: 0px;
    --navbar-vert-padding-bottom: 0px;
    --navbar-vert-background-color: #00B4EF;

    --navinfo-vert-margin-left: 0px;
    --navinfo-vert-margin-right: 0px;
    --navinfo-vert-margin-top: 0px;
    --navinfo-vert-margin-bottom: 0px;
    --navinfo-vert-padding-left: 0px;
    --navinfo-vert-padding-right: 0px;
    --navinfo-vert-padding-top: 0px;
    --navinfo-vert-padding-bottom: 0px;
    
    --dialog-color: #2D3033;
    --dialog-border-color: #BFBFBF;
    --dialog-background-color: #F5F5F5;

    --link-color: #2D3033;
    --link-background-color: #FFFFFF;
    --link-hover-color: #2D3033;
    --link-hover-background-color: #EFEFEF;
    --link-border-color: #BFBFBF;
    --link-outline-color: #FFA32B;

    --framing-color: #0E272B;
    --framing-background-color: #F5F5F5;
    --framing-border-color: #BFBFBF;

    --menu-color: #0E272B;
    --menu-background-color: #FFFFFF;
    --menu-border-color: #BFBFBF;
    --menu-hover-color: #FFFFFF;
    --menu-hover-background-color: #002F69;
    --menuitem-border-color: #002F69;
    --menu-separator-color: #BFBFBF;
    --menu-separator-lite-color: #BFBFBF;

    --checkbox-width: 32px;
    --checkbox-height: 32px;
    --checkbox-margin-left: 0px;
    --checkbox-margin-right: 16px;
    --checkbox-margin-top: 8px;
    --checkbox-margin-bottom: 8px;
    --checkbox-padding-left: 0px;
    --checkbox-padding-right: 0px;
    --checkbox-padding-top: 0px;
    --checkbox-padding-bottom: 0px;

    --radio-width: 32px;
    --radio-height: 32px;
    --radio-margin-left: 0px;
    --radio-margin-right: 16px;
    --radio-margin-top: 8px;
    --radio-margin-bottom: 8px;
    --radio-padding-left: 0px;
    --radio-padding-right: 0px;
    --radio-padding-top: 0px;
    --radio-padding-bottom: 0px;

    --smallbutton-padding-left: 3px;
    --smallbutton-padding-right: 3px;
    --smallbutton-padding-top: 3px;
    --smallbutton-padding-bottom: 3px;
    --smallbutton-font-size: 14px;

    --dialog-font-size: 16px;
    --dialog-border-style: solid;
    --dialog-border-width: 2px;
    --dialog-border-radius: 5px;

    --hrlite-border-color: #B0C4DE;

    --framing-border-style: solid;
    --framing-border-width: 1px;
    --framing-border-radius: 5px;
    --framing-margin-left: 0px;
    --framing-margin-right: 16px;
    --framing-margin-top: 16px;
    --framing-margin-bottom: 16px;
    --framing-padding-left: 12px;
    --framing-padding-right: 12px;
    --framing-padding-top: 12px;
    --framing-padding-bottom: 12px;

    --link-margin-left: 0px;
    --link-margin-right: 0px;
    --link-margin-top: 6px;
    --link-margin-bottom: 6px;
    --link-padding-left: 0px;
    --link-padding-right: 6px;
    --link-padding-top: 3px;
    --link-padding-bottom: 3px;
    --link-border-style: solid;
    --link-border-width: 1px;
    --link-border-radius: 5px;
    --link-outline-style: solid;
    --link-outline-width: 1px;

    --menu-font-size: 20px;
    --menu-font-weight: normal;
    --menu-font-family: Avenir, Helvetica, Arial, sans-serif;
    --menu-border-style: solid;
    --menu-border-width: 1px;
    --menu-border-radius: 4px;
    --menu-margin-left: 0px;
    --menu-margin-right: 0px;
    --menu-margin-top: 0px;
    --menu-margin-bottom: 0px;
    --menu-padding-left: 10px;
    --menu-padding-right: 20px;
    --menu-padding-top: 10px;
    --menu-padding-bottom: 10px;

    --menuitem-margin-left: 6px;
    --menuitem-margin-right: 0px;
    --menuitem-margin-top: 3px;
    --menuitem-margin-bottom: 3px;
    --menuitem-padding-left: 8px;
    --menuitem-padding-right: 8px;
    --menuitem-padding-top: 9px;
    --menuitem-padding-bottom: 9px;
    --menuitem-border-style: none;
    --menuitem-border-width: 1px;
    --menuitem-border-radius: 5px;

    --menu-separator-style: solid;
    --menu-separator-width: 1px;
}


/***********************************************
* Screen
***********************************************/
@media screen and (max-width: 999px) {
    .screen-wide  { display: none!important; }
}
@media screen and (min-width: 1000px) {
    .screen-narrow  { display: none!important; }
}


/***********************************************
* Flex
***********************************************/
.flex-h-ss {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.flex-h-cs {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}
.flex-h-es {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
}
.flex-h-sc {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
.flex-h-cc {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.flex-h-ec {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
.flex-h-se {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
}
.flex-h-ce {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}
.flex-h-ee {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
}
.flex-v-ss {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.flex-v-cs {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}
.flex-v-es {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
}
.flex-v-sc {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
.flex-v-cc {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.flex-v-ec {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
.flex-v-se {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
}
.flex-v-ce {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}
.flex-v-ee {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
}


/***********************************************
* Basic
***********************************************/
[widget-style=widget-html] {
    width: 100vw;
    height: 100vh;
    margin-left: var(--html-margin-left);
    margin-right: var(--html-margin-right);
    margin-top: var(--html-margin-top);
    margin-bottom: var(--html-margin-bottom);
    padding-left: var(--html-padding-left);
    padding-right: var(--html-padding-right);
    padding-top: var(--html-padding-top);
    padding-bottom: var(--html-padding-bottom);
    font-family: var(--html-font-family);
    font-size: var(--html-font-size);
    color: var(--html-color);
    background-color: var(--html-background-color);
}

[widget-style=widget-body] {
    width: 100vw;
    height: 100vh;
    margin-left: var(--body-margin-left);
    margin-right: var(--body-margin-right);
    margin-top: var(--body-margin-top);
    margin-bottom: var(--body-margin-bottom);
    padding-left: var(--body-padding-left);
    padding-right: var(--body-padding-right);
    padding-top: var(--body-padding-top);
    padding-bottom: var(--body-padding-bottom);
    color: var(--body-color);
    background-color: var(--body-background-color);
}

[widget-style=widget-h1] {
    font-weight: bold;
    font-size: var(--h1-font-size);
    color: var(--h1-color);
    padding:  0px;
    margin-left:  0px;
    margin-right: 0px;
    margin-top: var(--h1-margin-top);
    margin-bottom: var(--h1-margin-bottom);
}

[widget-style=widget-h2] {
    font-weight: bold;
    font-size: var(--h2-font-size);
    color: var(--h2-color);
    padding:  0px;
    margin-left:  0px;
    margin-right: 0px;
    margin-top: var(--h2-margin-top);
    margin-bottom: var(--h2-margin-bottom);
}

[widget-style=widget-h3] {
    font-weight: bold;
    font-size: var(--h3-font-size);
    color: var(--h3-color);
    padding:  0px;
    margin-left:  0px;
    margin-right: 0px;
    margin-top: var(--h3-margin-top);
    margin-bottom: var(--h3-margin-bottom);
}

[widget-style=widget-h4] {
    font-weight: bold;
    font-size: var(--h4-font-size);
    color: var(--h4-color);
    padding:  0px;
    margin-left:  0px;
    margin-right: 0px;
    margin-top: var(--h4-margin-top);
    margin-bottom: var(--h4-margin-bottom);
}

[widget-style=widget-h5] {
    font-weight: bold;
    font-size: var(--h5-font-size);
    color: var(--h5-color);
    padding:  0px;
    margin-left:  0px;
    margin-right: 0px;
    margin-top: var(--h5-margin-top);
    margin-bottom: var(--h5-margin-bottom);
}

[widget-style=widget-h6] {
    font-weight: bold;
    font-size: var(--h6-font-size);
    color: var(--h6-color);
    padding:  0px;
    margin-left:  0px;
    margin-right: 0px;
    margin-top: var(--h6-margin-top);
    margin-bottom: var(--h6-margin-bottom);
}


/***********************************************
* Input
***********************************************/
[widget-style=input] {
    font-size: var(--input-font-size);
    text-decoration: none;
    margin-left: var(--input-margin-left);
    margin-right: var(--input-margin-right);
    margin-top: var(--input-margin-top);
    margin-bottom: var(--input-margin-bottom);
    padding-left: var(--input-padding-left);
    padding-right: var(--input-padding-right);
    padding-top: var(--input-padding-top);
    padding-bottom: var(--input-padding-bottom);
    border-style: var(--input-border-style);
    border-width: var(--input-border-width);
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);
    outline-style: var(--input-outline-style);
    outline-width: var(--input-outline-width);
    outline-color: var(--input-outline-color);
    color: var(--input-color);
    background-color: var(--input-background-color);
}
[widget-style=input]:hover {
    color: var(--input-hover-color);
    background-color: var(--input-hover-background-color);
    border-style: var(--input-hover-border-style);
    border-width: var(--input-hover-border-width);
    border-color: var(--input-hover-border-color);
}
[widget-style=input]:focus {
    border-color:  transparent;
    color: var(--input-focus-color);
    background-color: var(--input-focus-background-color);
    outline-style: var(--input-focus-outline-style);
    outline-width: var(--input-focus-outline-width);
    outline-color: var(--input-focus-outline-color);
}
[widget-style=input]:invalid {
    color: var(--input-invalid-color);
    background-color: var(--input-invalid-background-color);
    outline-style: none;
    border-style: var(--input-invalid-border-style);
    border-width: var(--input-invalid-border-width);
    border-color: var(--input-invalid-border-color);
}
[widget-style=input]:disabled {
    color: var(--input-disabled-color);
    background-color: var(--input-disabled-background-color);
    outline-style: none;
    border-style: var(--input-disabled-border-style);
    border-width: var(--input-disabled-border-width);
    border-color: var(--input-disabled-border-color);
    outline-style: var(--input-disabled-outline-style);
    outline-width: var(--input-disabled-outline-width);
    outline-color: var(--input-disabled-outline-color);
}


/***********************************************
* Button
***********************************************/
[widget-style=button] {
    font-size: var(--button-font-size);
    text-decoration: none;
    margin-left: var(--button-margin-left);
    margin-right: var(--button-margin-right);
    margin-top: var(--button-margin-top);
    margin-bottom: var(--button-margin-bottom);
    padding-left: var(--button-padding-left);
    padding-right: var(--button-padding-right);
    padding-top: var(--button-padding-top);
    padding-bottom: var(--button-padding-bottom);
    border-style: var(--button-border-style);
    border-width: var(--button-border-width);
    border-color: var(--button-border-color);
    border-radius: var(--button-border-radius);
    outline-style: var(--button-outline-style);
    outline-width: var(--button-outline-width);
    outline-color: var(--button-outline-color);
    color: var(--button-color);
    background-color: var(--button-background-color);
}
[widget-style=button]:hover {
    color: var(--button-hover-color);
    background-color: var(--button-hover-background-color);
    border-style: var(--button-hover-border-style);
    border-width: var(--button-hover-border-width);
    border-color: var(--button-hover-border-color);
}
[widget-style=button]:focus {
    border-color:  transparent;
    color: var(--button-focus-color);
    background-color: var(--button-focus-background-color);
    outline-style: var(--button-focus-outline-style);
    outline-width: var(--button-focus-outline-width);
    outline-color: var(--button-focus-outline-color);
}
[widget-style=button]:disabled {
    color: var(--button-disabled-color);
    background-color: var(--button-disabled-background-color);
    outline-style: none;
    border-style: var(--button-disabled-border-style);
    border-width: var(--button-disabled-border-width);
    border-color: var(--button-disabled-border-color);
    outline-style: var(--button-disabled-outline-style);
    outline-width: var(--button-disabled-outline-width);
    outline-color: var(--button-disabled-outline-color);
}


/***********************************************
* Checkbox
***********************************************/
[widget-style=checkbox] {
    appearance: none;
    width: var(--checkbox-width);
    height: var(--checkbox-height);
    margin-left: var(--checkbox-margin-left);
    margin-right: var(--checkbox-margin-right);
    margin-top: var(--checkbox-margin-top);
    margin-bottom: var(--checkbox-margin-bottom);
    padding-left: var(--checkbox-padding-left);
    padding-right: var(--checkbox-padding-right);
    padding-top: var(--checkbox-padding-top);
    padding-bottom: var(--checkbox-padding-bottom);
    border-style: var(--input-border-style);
    border-width: var(--input-border-width);
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);
    outline-style: var(--input-outline-style);
    outline-width: var(--input-outline-width);
    outline-color: var(--input-outline-color);
    color: var(--input-symbol-color);
    background-color: var(--input-symbol-background-color);
    cursor: pointer;
}
[widget-style=checkbox]::before {
    content: '\2713';
    font-size: 24px;
    font-weight: bold;
}
[widget-style=checkbox]:checked {
    color: var(--input-checked-symbol-color);
    background-color: var(--input-checked-symbol-background-color);
}
[widget-style=checkbox]:hover {
    border-style: var(--input-hover-border-style);
    border-width: var(--input-hover-border-width);
    border-color: var(--input-hover-border-color);
    background-color: var(--input-hover-background-color)
}
[widget-style=checkbox]:focus {
    border-style: none;
    border-color:  transparent;
    outline-style: var(--input-focus-outline-style);
    outline-width: var(--input-focus-outline-width);
    outline-color: var(--input-focus-outline-color);
}
[widget-style=checkbox]:disabled {
    cursor: default;
    background-color: var(--input-disabled-background-color);
}


/***********************************************
* Radio
***********************************************/
[widget-style=radio] {
    appearance: none;
    width: var(--radio-width);
    height: var(--radio-height);
    margin-left: var(--radio-margin-left);
    margin-right: var(--radio-margin-right);
    margin-top: var(--radio-margin-top);
    margin-bottom: var(--radio-margin-bottom);
    padding-left: var(--radio-padding-left);
    padding-right: var(--radio-padding-right);
    padding-top: var(--radio-padding-top);
    padding-bottom: var(--radio-padding-bottom);
    border-style: none;
    outline-style: none;
    color: var(--input-symbol-color);
    background-color: var(--input-symbol-background-color);
    cursor: pointer;
}
[widget-style=radio]::before {
    content: '\25EF';
    font-size: 24px;
    font-weight: bold;
}
[widget-style=radio]:checked::before {
    content: '\25C9';
    font-size: 24px;
    font-weight: bold;
}
[widget-style=radio]:hover {
    background-color: var(--input-hover-background-color);
}
[widget-style=radio]:disabled {
    cursor: default;
    color: var(--input-disabled-symbol-color);
    background-color: var(--input-disabled-background-color);
}


/***********************************************
* Text Area
***********************************************/
[widget-style=textarea] {
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    text-decoration: none;
    margin-left: var(--input-margin-left);
    margin-right: var(--input-margin-right);
    margin-top: var(--input-margin-top);
    margin-bottom: var(--input-margin-bottom);
    padding-left: var(--input-padding-left);
    padding-right: var(--input-padding-right);
    padding-top: var(--input-padding-top);
    padding-bottom: var(--input-padding-bottom);
    border-style: var(--input-border-style);
    border-width: var(--input-border-width);
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);
    outline-style: var(--input-outline-style);
    outline-width: var(--input-outline-width);
    outline-color: var(--input-outline-color);
    color: var(--input-color);
    background-color: var(--input-background-color);
}
[widget-style=textarea]:hover {
    color: var(--input-hover-color);
    background-color: var(--input-hover-background-color);
    border-style: var(--input-hover-border-style);
    border-width: var(--input-hover-border-width);
    border-color: var(--input-hover-border-color);
}
[widget-style=textarea]:focus {
    color: var(--input-focus-color);
    background-color: var(--input-focus-background-color);
    border-color:  transparent;
    outline-style: var(--input-focus-outline-style);
    outline-width: var(--input-focus-outline-width);
    outline-color: var(--input-focus-outline-color);
}
[widget-style=textarea]:invalid {
    color: var(--input-invalid-color);
    background-color: var(--input-invalid-background-color);
    outline-style: none;
    border-style: var(--input-invalid-border-style);
    border-width: var(--input-invalid-border-width);
    border-color: var(--input-invalid-border-color);
}
[widget-style=textarea]:disabled {
    color: var(--input-invalid-color);
    background-color: var(--input-invalid-background-color);
    outline-style: none;
    border-style: var(--input-disabled-border-style);
    border-width: var(--input-disabled-border-width);
    border-color: var(--input-disabled-border-color);
    outline-style: var(--input-disabled-outline-style);
    outline-width: var(--input-disabled-outline-width);
    outline-color: var(--input-disabled-outline-color);
}


/***********************************************
* Select
***********************************************/
[widget-style=select] {
    font-size: var(--input-font-size);
    text-decoration: none;
    margin-left: var(--input-margin-left);
    margin-right: var(--input-margin-right);
    margin-top: var(--input-margin-top);
    margin-bottom: var(--input-margin-bottom);
    padding-left: var(--input-padding-left);
    padding-right: var(--input-padding-right);
    padding-top: var(--input-padding-top);
    padding-bottom: var(--input-padding-bottom);
    border-style: var(--input-border-style);
    border-width: var(--input-border-width);
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);
    outline-style: var(--input-outline-style);
    outline-width: var(--input-outline-width);
    outline-color: var(--input-outline-color);
    color: var(--input-color);
    background-color: var(--input-background-color);
}
[widget-style=select]:hover {
    color: var(--input-hover-color);
    background-color: var(--input-hover-background-color);
    border-style: var(--input-hover-border-style);
    border-width: var(--input-hover-border-width);
    border-color: var(--input-hover-border-color);
}
[widget-style=select]:focus {
    border-color:  transparent;
    color: var(--input-focus-color);
    background-color: var(--input-focus-background-color);
    outline-style: var(--input-focus-outline-style);
    outline-width: var(--input-focus-outline-width);
    outline-color: var(--input-focus-outline-color);
}
[widget-style=select]:disabled {
    color: var(--input-invalid-color);
    background-color: var(--input-invalid-background-color);
    outline-style: none;
    border-style: var(--input-disabled-border-style);
    border-width: var(--input-disabled-border-width);
    border-color: var(--input-disabled-border-color);
    outline-style: var(--input-disabled-outline-style);
    outline-width: var(--input-disabled-outline-width);
    outline-color: var(--input-disabled-outline-color);
}


/***********************************************
* Scalar
***********************************************/
[widget-style=scalar] {
    width: calc(100%);
    font-size: var(--input-font-size);
    text-decoration: none;
    margin-left: var(--input-margin-left);
    margin-right: var(--input-margin-right);
    margin-top: var(--input-margin-top);
    margin-bottom: var(--input-margin-bottom);
    padding-left: var(--input-padding-left);
    padding-right: var(--input-padding-right);
    padding-top: var(--input-padding-top);
    padding-bottom: var(--input-padding-bottom);
    border-style: var(--input-border-style);
    border-width: var(--input-border-width);
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);
    outline-style: var(--input-outline-style);
    outline-width: var(--input-outline-width);
    outline-color: var(--input-outline-color);
    color: var(--input-color);
    background-color: var(--input-background-color);
}
[widget-style=scalar]:hover {
    color: var(--input-hover-color);
    background-color: var(--input-hover-background-color);
    border-style: var(--input-hover-border-style);
    border-width: var(--input-hover-border-width);
    border-color: var(--input-hover-border-color);
}
[widget-style=scalar]:focus {
    color: var(--input-focus-color);
    background-color: var(--input-focus-background-color);
    border-color:  transparent;
    outline-style: var(--input-focus-outline-style);
    outline-width: var(--input-focus-outline-width);
    outline-color: var(--input-focus-outline-color);
}
[widget-style=scalar]:invalid {
    color: var(--input-invalid-color);
    background-color: var(--input-invalid-background-color);
    outline-style: none;
    border-style: var(--input-invalid-border-style);
    border-width: var(--input-invalid-border-width);
    border-color: var(--input-invalid-border-color);
}
[widget-style=scalar]:disabled {
    color: var(--input-invalid-color);
    background-color: var(--input-invalid-background-color);
    outline-style: none;
    border-style: var(--input-disabled-border-style);
    border-width: var(--input-disabled-border-width);
    border-color: var(--input-disabled-border-color);
    outline-style: var(--input-disabled-outline-style);
    outline-width: var(--input-disabled-outline-width);
    outline-color: var(--input-disabled-outline-color);
}


/***********************************************
* Link
***********************************************/
[widget-style=link], [widget-style=link]:active, [widget-style=link]:visited {
    display: inline-block;
    text-decoration: none;
    margin-left: var(--link-margin-left);
    margin-right: var(--link-margin-right);
    margin-top: var(--link-margin-top);
    margin-bottom: var(--link-margin-bottom);
    padding-left: var(--link-padding-left);
    padding-right: var(--link-padding-right);
    padding-top: var(--link-padding-top);
    padding-bottom: var(--link-padding-bottom);
    border-style: none;
    outline-style: none;
    border-radius: var(--link-hover-border-radius);
    color: var(--link-color);
    background-color: var(--link-background-color);
}
[widget-style=link]:hover {
    color: var(--link-hover-color);
    background-color: var(--link-hover-background-color);
    border-style: var(--link-border-style);
    border-width: var(--link-border-width);
}
[widget-style=link]:focus {
    outline-style: var(--link-outline-style);
    outline-width: var(--link-outline-width);
    outline-color: var(--link-outline-color);
}


/***********************************************
* Hot Spot
***********************************************/
[widget-style=hotspot] {
    height: 22px;
    color: var(--input-color);
    background-color: var(--input-background-color);
    border-style: var(--input-border-style);
    border-width: var(--input-border-width);
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);
    margin-left: var(--input-margin-left);
    margin-right: var(--input-margin-right);
    margin-top: var(--input-margin-top);
    margin-bottom: var(--input-margin-bottom);
    padding-left: var(--input-padding-left);
    padding-right: var(--input-padding-right);
    padding-top: var(--input-padding-top);
    padding-bottom: var(--input-padding-bottom);
    cursor:  pointer;
}
[widget-style=hotspot]:hover {
    color: var(--input-hover-color);
    background-color: var(--input-hover-background-color);
}


/***********************************************
* Cold Spot
***********************************************/
[widget-style=coldspot] {
    color: var(--input-color);
    background-color: var(--input-background-color);
    border-style: var(--input-border-style);
    border-width: var(--input-border-width);
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);
    margin-left: var(--input-margin-left);
    margin-right: var(--input-margin-right);
    margin-top: var(--input-margin-top);
    margin-bottom: var(--input-margin-bottom);
    padding-left: var(--input-padding-left);
    padding-right: var(--input-padding-right);
    padding-top: var(--input-padding-top);
    padding-bottom: var(--input-padding-bottom);
}


/***********************************************
* Basic Table
***********************************************/
[widget-style=table-basic] {
    width: 100%;
    border-collapse: collapse;
}
[widget-style=table-basic-tbody] {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
[widget-style=table-basic-thead] {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
[widget-style=table-basic-tbody-tr] {
    padding: 0px;
    margin: 0px;
}
[widget-style=table-basic-thead-tr] {
    padding: 0px;
    margin: 0px;
}
[widget-style=table-basic-td] {
    padding-left:  6px;
    padding-right:  6px;
}
[widget-style=table-basic-th] {
    padding-left:  6px;
    padding-right:  6px;
}


/***********************************************
* Dialog
***********************************************/
[widget-style=dialog-shield] {
    background-color: transparent;
    z-index: 10000;
}
[widget-style=dialog-content] {
    width: 100%;
    height: 100%;
    padding: 10px;
    border-style: var(--dialog-border-style);
    border-width: var(--dialog-border-width);
    border-color: var(--dialog-border-color);
    border-radius: var(--dialog-border-radius);
    color: var(--dialog-color);
    background-color: var(--dialog-background-color);
    font-size: var(--dialog-font-size);
    user-select: none;
    z-index: 10001;
}
.row-choice {
    font-size: 18px;
}
.row-choice:hover {
    background-color: gainsboro;
    cursor: grab;
}


/***********************************************
* Ctls
***********************************************/
[widget-style=ctls-horz] {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 0xp;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    user-select: none;
}

[widget-style=ctls-horz-ctl] {
    color: #FFFFFF;
    background-color: transparent;
    font-size: 20px;
    font-weight: bold;
    margin-left: 20px;
    margin-right: 20px;
    margin-top:  5px;
    margin-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    cursor: pointer;
    user-select: none;
}
[widget-style=ctls-horz-ctl]:hover {
    color: #0E272B;
}
[widget-style=ctls-horz-ctl-disabled] {
    color: transparent;
}


/***********************************************
* Ctl Info Link
***********************************************/
[widget-style=ctl-info-link] {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    background-color: transparent;
    border: none;
    margin-left: 20px;
    margin-right: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    user-select: none;
}
[widget-style=ctl-info-link]:hover {
    color: #0E272B;
    background-color: 1E81B0;
    cursor: pointer;
}


/***********************************************
* Nav Bar
***********************************************/
[widget-style=navbar-horz] {
    display:  flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-left: var(--navbar-horz-margin-left);
    margin-right: var(--navbar-horz-margin-right);
    margin-top: var(--navbar-horz-margin-top);
    margin-bottom: var(--navbar-horz-margin-bottom);
    padding-left: var(--navbar-horz-padding-left);
    padding-right: var(--navbar-horz-padding-right);
    padding-top: var(--navbar-horz-padding-top);
    padding-bottom: var(--navbar-horz-padding-bottom);
    color: var(--nav-color);
    background-color: var(--navbar-horz-background-color);
}
[widget-style=navbar-vert] {
    display:  flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-left: var(--navbar-vert-margin-left);
    margin-right: var(--navbar-vert-margin-right);
    margin-top: var(--navbar-vert-margin-top);
    margin-bottom: var(--navbar-vert-margin-bottom);
    padding-left: var(--navbar-vert-padding-left);
    padding-right: var(--navbar-vert-padding-right);
    padding-top: var(--navbar-vert-padding-top);
    padding-bottom: var(--navbar-vert-padding-bottom);
    color: var(--nav-color);
    background-color: var(--navbar-vert-background-color);
}
[widget-style=navbar-info-horz] {
    flex: 3;
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-left: var(--navinfo-horz-margin-left);
    margin-right: var(--navinfo-horz-margin-right);
    margin-top: var(--navinfo-horz-margin-top);
    margin-bottom: var(--navinfo-horz-margin-bottom);
    padding-left: var(--navinfo-horz-padding-left);
    padding-right: var(--navinfo-horz-padding-right);
    padding-top: var(--navinfo-horz-padding-top);
    padding-bottom: var(--navinfo-horz-padding-bottom);
}
[widget-style=navbar-info-vert] {
    flex: 3;
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-left: var(--navinfo-vert-margin-left);
    margin-right: var(--navinfo-vert-margin-right);
    margin-top: var(--navinfo-vert-margin-top);
    margin-bottom: var(--navinfo-vert-margin-bottom);
    padding-left: var(--navinfo-vert-padding-left);
    padding-right: var(--navinfo-vert-padding-right);
    padding-top: var(--navinfo-vert-padding-top);
    padding-bottom: var(--navinfo-vert-padding-bottom);
}


/***********************************************
* Menu
***********************************************/
[widget-style=popup-menu] {
    position: absolute;
    border-style: var(--menu-border-style);
    border-width: var(--menu-border-width);
    border-radius: var(--menu-border-radius);
    border-color:  var(--menu-border-color);
    padding-left: var(--menu-padding-left);
    padding-right: var(--menu-padding-right);
    padding-top: var(--menu-padding-top);
    padding-bottom: var(--menu-padding-bottom);
    margin-left: var(--menu-margin-left);
    margin-right: var(--menu-margin-right);
    margin-top: var(--menu-margin-top);
    margin-bottom: var(--menu-margin-bottom);
    color: var(--menu-color);
    background-color: var(--menu-background-color);
    user-select: none;
}
[widget-style=popup-menu-item] {
    position: static;
    width: calc(100% - 15px);
    height: 100%;
    color: var(--menu-color);
    background-color: var(--menu-background-color);
    font-family: var(--menu-font-family);
    font-size: var(--menu-font-size);
    font-weight: var(--menu-font-weight);
    margin-left: var(--menuitem-margin-left);
    margin-right: var(--menuitem-margin-right);
    margin-top: var(--menuitem-margin-top);
    margin-bottom: var(--menuitem-margin-bottom);
    padding-left: var(--menuitem-padding-left);
    padding-right: var(--menuitem-padding-right);
    padding-top: var(--menuitem-padding-top);
    padding-bottom: var(--menuitem-padding-bottom);
    user-select: none;
    cursor: pointer;

}
[widget-style=popup-menu-item]:hover {
    color: var(--menu-hover-color);
    background-color: var(--menu-hover-background-color);
    border-style: var(--menuitem-border-style);
    border-color: var(--menu-hover-border-color);
    border-width: var(--menuitem-border-width);
    border-radius: var(--menuitem-border-radius);
}
[widget-style=popup-menu-item-disabled] {
    position: static;
    width: 100%;
    height: 100%;
    color: var(--menu-disabled-color);
    background-color: var(--menu-disabled-background-color);
    font-family: var(--menu-font-family);
    font-size: var(--menu-font-size);
    font-weight: var(--menu-font-weight);
    margin-left: var(--menuitem-margin-left);
    margin-right: var(--menuitem-margin-right);
    margin-top: var(--menuitem-margin-top);
    margin-bottom: var(--menuitem-margin-bottom);
    padding-left: var(--menuitem-padding-left);
    padding-right: var(--menuitem-padding-right);
    padding-top: var(--menuitem-padding-top);
    padding-bottom: var(--menuitem-padding-bottom);
    user-select: none;
}
[widget-style=menu-separator] {
    border-style: var(--menu-separator-style);
    border-width: var(--menu-separator-width);
    border-color: var(--menu-separator-color);
}
[widget-style=menu-separator-lite] {
    border-style: var(--menu-separator-style);
    border-width: var(--menu-separator-width);
    border-color: var(--menu-separator-lite-color);
}


/***********************************************
* Tile
***********************************************/
[widget-style=tile] {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin:  0px;
    padding: 0px;
    border: none;
}
[widget-style=tile-frame] {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin:  0px;
    padding:  0px;
    border: none;
}


/***********************************************
* Horizontal Rules
***********************************************/
[widget-style=hr-lite] {
    border: solid 1px var(--hrlite_border_color);
}


/***********************************************
* Label
***********************************************/
[widget-style=label] {
    color: var(--label-color);
    background-color: var(--label-background-color);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
}


/***********************************************
* Box
***********************************************/
[widget-style=box] {
    color: var(--box-color);
    background-color: var(--box-background-color);
    border-style: var(--box-border-style);
    border-width: var(--box-border-width);
    border-color: var(--box-border-color);
    border-radius: var(--box-border-radius);
}


/***********************************************
* Stack
***********************************************/
[widget-style=stack] {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    position: fixed;
}


/***********************************************
* Editor
***********************************************/
[widget-style=editor] {
    width: calc(100% - 4px);
    padding: 0px;
    margin-left: 2px;
}


/***********************************************
* Framing
***********************************************/
[widget-style=framing] {
    display: inline-block;
    color: var(--framing-color);
    background-color: var(--framing-background-color);
    border-style: var(--framing-border-style);
    border-width: var(--framing-border-width);
    border-color: var(--framing-border-color);
    border-radius: var(--framing-border-radius);
    margin-left: var(--framing-margin-left);
    margin-right: var(--framing-margin-right);
    margin-top: var(--framing-margin-top);
    margin-bottom: var(--framing-margin-bottom);
    padding-left: var(--framing-padding-left);
    padding-right: var(--framing-padding-right);
    padding-top: var(--framing-padding-top);
    padding-bottom: var(--framing-padding-bottom);
}


/***********************************************
* User Extension Button
***********************************************/
[widget-style=user-extension-button] {
    display: inline-block;
    margin-left: 32px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 6px;
    padding-right: 6px;
    border: solid 1px gray;
    border-radius:  4px;
    cursor: pointer;
}


/***********************************************
* Save Bar
***********************************************/
[widget-style=save-bar] {
    margin-top: 40px;
    margin-bottom: 40px;
    padding-left: 10px;
    padding-right: 10px;
    border: solid whitesmoke 1p;
    text-align: left;
}
[widget-style=save-bar-button] {
    width: 180px;
    height: 45px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: var(--button-font-size);
    text-decoration: none;
    margin-top: var(--button-margin-top);
    margin-bottom: var(--button-margin-bottom);
    padding-left: var(--button-padding-left);
    padding-right: var(--button-padding-right);
    padding-top: var(--button-padding-top);
    padding-bottom: var(--button-padding-bottom);
    border-style: var(--button-border-style);
    border-width: var(--button-border-width);
    border-color: var(--button-border-color);
    border-radius: var(--button-border-radius);
    outline-style: var(--button-outline-style);
    outline-width: var(--button-outline-width);
    outline-color: var(--button-outline-color);
    color: var(--button-color);
    background-color: var(--button-background-color);
}
[widget-style=save-bar-button]:hover {
    color: var(--button-hover-color);
    background-color: var(--button-hover-background-color);
    border-style: var(--button-hover-border-style);
    border-width: var(--button-hover-border-width);
    border-color: var(--button-hover-border-color);
    cursor: grab;
}
[widget-style=save-bar-button]:focus {
    border-color:  transparent;
    color: var(--button-focus-color);
    background-color: var(--button-focus-background-color);
    outline-style: var(--button-focus-outline-style);
    outline-width: var(--button-focus-outline-width);
    outline-color: var(--button-focus-outline-color);
    cursor: grab;
}
[widget-style=save-bar-button]:disabled {
    color: var(--button-disabled-color);
    background-color: var(--button-disabled-background-color);
    outline-style: none;
    border-style: var(--button-disabled-border-style);
    border-width: var(--button-disabled-border-width);
    border-color: var(--button-disabled-border-color);
    outline-style: var(--button-disabled-outline-style);
    outline-width: var(--button-disabled-outline-width);
    outline-color: var(--button-disabled-outline-color);
    cursor: default;
}


/***********************************************
* Home Page
***********************************************/
[widget-class=HomeView] {
    height: 100%;
}
.app-page-title {
    font-size: 18px;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 20px;
    overflow: scroll;
}
.help-button {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #002f69;
    border-radius: 25px;
    cursor: grab;
}
.help-button-inactive {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #DDDDDD;
    border-radius: 25px;
    cursor: not-allowed;
}
.copyright-bar {
    height: 32px;
    display:  flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-weight: bold;
    margin-left: var(--navbar-horz-margin-left);
    margin-right: var(--navbar-horz-margin-right);
    margin-top: var(--navbar-horz-margin-top);
    margin-bottom: var(--navbar-horz-margin-bottom);
    padding-left: var(--navbar-horz-padding-left);
    padding-right: var(--navbar-horz-padding-right);
    padding-top: var(--navbar-horz-padding-top);
    padding-bottom: var(--navbar-horz-padding-bottom);
    color: var(--nav-color);
    background-color: var(--navbar-horz-background-color);
}


/***********************************************
* Anchors
***********************************************/
a:link {
  color: steelblue;
  text-decoration: none;
  font-weight: bold;
}
a:visited {
  color: steelblue;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: darkorange;
  text-decoration: none;
  font-weight: bold;
}
a:active {
    text-decoration: none;
    font-weight: bold;
}


/***********************************************
* File Input
***********************************************/
.file-inputter {
    display: none;
}
.file-uploader {
    width: 100%;
    height: 100%;
    border: 1px solid steelblue;
    border-radius: 10px;
    display: inline-block;
    padding: 0px;
    cursor: pointer;
    background-color: whitesmoke;
}
.file-uploader-grid {
    width: 100%;
    height: 100%;
    background-color: transparent;
}
.file-uploader-drag-n-drop {
    width: 100%;
    height: 100%;
}
.file-uploader-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}
.file-uploader-list {
    padding: 15px;
    border: 1px solid #CCCCCC;
    border-radius: 12px;
    overflow: scroll;
    height: 150px;
}
.file-uploader-instructions {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
}


/***********************************************
* FAQs
***********************************************/
.faqs {
    padding: 20px;
    font-size: 18px;
}
.faqs div {
    margin-bottom: 12px;
}
.faqs-title {
    margin-top: 30px;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: bold;
}
.faq-topic {
    border: solid 1px #AAAAAA;
    border-radius: 9px;
    padding-left: 8px;
    padding-right: 8px;

}
.faq-topic-entries {
    padding: inherit;
}
.faq-topic-title {
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: bold;
    color: steelblue;
}
.faq-topic-title:hover {
    cursor: grab;
}
.faq {
    margin-top: 6px;
    margin-bottom: 6px;
}
.faq-question {
    margin-top: 12px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}
.faq-question:hover {
    cursor: grab;
}
.faq-answer {
    padding: 20px;
    margin-bottom: 18px;
    border: solid 3px lightsteelblue;
    border-radius: 30px;
}


/***********************************************
* Resource
***********************************************/
.resource-view {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 12px;
    margin-right: 12px;
}
.resource-title {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: bold;
}
.resource-text {
    font-size: 18px;
}
.resource-video-frame {
    margin: 0px;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}
.resource-video {
    padding: 0px;
    margin: 0px;
    width: 800px;
    height: 530px;
}
.resource-entry {
    display: inline-block;
    width: 300px;
    height: 300px;
    margin-left: 24px;
    margin-right: 24px;
    margin-bottom: 48px;
}
.resource-download {
    font-weight: bold;
    overflow: wrap;
    cursor: pointer;
}
.resource-download:hover {
    color: darkorange;
}
.resource-thumbnail {
    cursor: pointer;
}
.resource-thumbnail-figure {
    display: inline-block;
    border: solid 2px dimgray;
    width: 300px;
}
.resource-thumbnail-figure:hover {
    border-color: darkorange;
}
.resource-thumbnail-img {
    width: 300px;
    height: 170px;
}
.resource-thumbnail-caption {
    font-size: 16px;
    font-weight: bold;
    color: var(--button-background-color);
    overflow-wrap: break-word;
}


/***********************************************
* XM Institute
***********************************************/
.xmi-view {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 12px;
    margin-right: 12px;
}
.xmi-title {
    margin-top: 18px;
    margin-bottom: 24px;
    font-size: 22px;
    font-weight: bold;
}
.xmi-intro {
    margin-top: 20px;
    margin-bottom: 36px;
}
.xmi-block {
    width: 300px;
    height: 400px;
    padding: 0px;
    margin: 30px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
}
.xmi-block img {
    height: 300px;
    width: 300px;
}
.xmi-block a {
    display: block;
    width: 300px;
    height: 100px;
    color: black;
    font-size: 14px;
    font-weight: bold
}
.xmi-block a:hover {
    color: darkorange;
}
.pdf-block {
    width: 300px;
    height: 400px;
    padding: 0px;
    margin: 30px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

/***********************************************
* Directory Viewer
***********************************************/
.dir-viewer {
    width: 100%;
}
.dir-viewer-table {
    border-collapse: collapse;
    margin-top: 24px;
    margin-bottom: 12px;
    border: solid 1px gainsboro;
    border-radius: 20px;
}
.dir-viewer-row:hover {
    color: #0E272B;
    background-color: whitesmoke;
    cursor: pointer;
}
.dir-viewer-directory {
    font-size: 18px;
    font-weight: bold;
    height: 48px;
    background-color: whitesmoke;
}
.dir-viewer-col1 {
    width: auto;
    height: 32;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid gainsboro;
}
.dir-viewer-col2 {
    width: 120px;
    height: 32;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    background-color: whitesmoke;
    border: 1px solid gainsboro;
}
.dir-viewer-text {
    font-size: 12px;
    font-weight: bold;
    margin-left: 6px;
    margin-right: 6px;
}
.dir-viewer-text:hover {
    color: darkorange;
    cursor: pointer;
}
.dir-viewer-text {
    font-size: 12px;
    font-weight: bold;
    margin-left: 12px;
    color: steelblue;
}
.dir-viewer-text:hover {
    color: darkorange;
    cursor: pointer;
}

/***********************************************
* Data Feed Viewer
***********************************************/
.df-viewer {
    width: 97%;
    margin-left: 12px;
    margin-right: 12px;
    overflow-y: scroll;
}
.df-viewer-row:hover {
    color: #0E272B;
    background-color: whitesmoke;
    cursor: pointer;
}
.df-viewer-name-col {
    height: 48px;
    border: 1px solid gainsboro;
}
.df-viewer-status-col {
    height: 48px;
    border: 1px solid gainsboro;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
}
.df-viewer-status-col:hover {
    color: darkorange;
}
.df-viewer-edit-col {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: center;
    border: 1px solid gainsboro;
}
.df-viewer-cmmd {
    font-size: 12px;
    font-weight: bold;
    margin-left: 6px;
    margin-right: 6px;
}
.df-viewer-cmmd:hover {
    color: darkorange;
    cursor: pointer;
}

/***********************************************
* Data Feed Editor
***********************************************/
.df-editor-properties {
    width: 97%;
    margin-left: 12px;
    margin-right: 12px;
}
.df-editor-property-name {
    width: 150px;
    height: 48px;
    text-align: left;
}
.df-editor-property-value {
    width: 250px;
    height: 48px;
    text-align: left;
}
.df-editor-selector {
    width: 200px;
    height: 48px;
    border: 1px solid gray;
    border-radius: 6px;
    cursor: pointer;
    font-family: Avenir;
}
.df-editor-mapping-delete {
    font-size: 12px;
    text-align: center;
    font-weight: bold;
}
.df-editor-mapping-delete:hover {
    color: darkorange;
    cursor: pointer;
}

/***********************************************
* Run Datafeed Dialog
***********************************************/
.dfr-dialog {
    width: 500px;
    height: 500px;
    padding: 12px;
    border: solid 1px gainsboro;
    border-radius: 12px;
    background-color: whitesmoke;
}
.dfr-content {
    font-family: 'Courier New', Courier, monospace;
}
.dft-ok {
    margin-top:18px;
    text-align: center;
    font-weight: bold;
}
.dft-ok:hover {
    color: darkorange;
    cursor: pointer;
}

/***********************************************
* Settings Manager
***********************************************/
.settings-manager-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 40px;
}
.settings-manager-name {
    width: 120px;
    height: 32px;
    font-weight: bold;
}
.settings-manager-value {
    width: calc(100% - 120px);
    height: 28px;
}
.settings-manager-hr {
    margin-top: 18px;
    margin-bottom: 8px;
}
.settings-manager-button {
    margin-top: 8px;
    margin-bottom: 8px;
    height: 48px;
    width: 100px;
}
.settings-manager-text {
    height: 32px;
    width: 100%;
}
.settings-manager-select {
    height: 32px;
    width: 300px;
}

/***********************************************
* User Type Editor
***********************************************/
.usertype-hr {
    margin-top: 24px;
}
.usertype-panel {
    margin-top: 18px;
    margin-bottom: 18px;
    padding-left: 12px;
    padding-right: 12px;
}
.usertype-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 40px;
    border: solid 1px gainsboro;
    border-radius: 12px;
}
.usertype-tablehead {
    height: 48px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    vertical-align: middle;
    color: steelblue;
    font-size: 18px;
    font-weight: bold;
    border: solid 1px gainsboro;
    border-radius: 12px;
}
.usertype-tablecell {
    height: 32px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: left;
    vertical-align: middle;
    font-size: 16px;
    border: solid 1px gainsboro;
    border-radius: 12px;
}
.usertype-tablecmmdcell {
    height: 32px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    vertical-align: middle;
    color: steelblue;
    font-size: 16px;
    font-weight: bold;
    border: solid 1px gainsboro;
    border-radius: 12px;
}
.usertype-tablecmmdcell:hover {
    color: darkorange;
    cursor: pointer;
}
.usertype-button {
    width: 110px;
    margin-right: 48px;
}
.usertype-newbutton {
    width: 150px;
    margin-bottom: 32px;
}
.usertype-editbox {
    width: 97%;
}
.usertype-groupname {
    margin-left: 6px;
}
.usertype-groupcheckbox {
    margin-left: 12px;
    margin-right: 18px;
}