:root {
    --vss-md-background-color-fill: rgba(214, 234, 248, 0.60);
    --vss-md-background-color-title: rgb(52, 152, 219);
    --vss-md-background-color-message: rgb(243, 243, 219);
    --vss-md-background-color-body: rgb(255, 255, 255);
    --vss-md-background-color-footer: rgb(192, 192, 192);
    --vss-md-background-color-button_title: rgb(255, 0, 0);
    --vss-md-border-color: rgb(192, 192, 192);
    --vss-md-border-color-input: rgb(40, 80, 240);
    --vss-md-color-label: rgb(160, 160, 160);
    --vss-md-color-input: rgb(16, 16, 16);
    --vss-md-color-input-focus: rgb(208, 224, 248);
    --vss-md-color-message-error: rgb(255, 0, 0);
    --vss-md-color-message-info: rgb(80, 120, 240);
    --vss-md-color-message-warning: rgb(0, 160, 160);
    --vss-md-background-color-input-button: rgb(52, 152, 219);
    --vss-md-background-color-input-button_submit: rgb(0, 160, 160);
    --vss-md-border-width: 0.25em;

    --vss-border-radius: 0.85rem;
    --vss-border-radius-input: 0.25rem;
    --vss-border-border-width-header: 0.15rem;

    --vss-background-color-header: rgb(199, 224, 255);
    --vss-background-color-menu: rgb(214, 234, 248);
    --vss-background-color-area: rgb(247, 247, 247);
    --vss-background-color-input: rgb(199, 223, 255);
    --vss-background-color-input-focus: rgba(159, 199, 255);
    --vss-background-color-input-button: rgb(46, 134, 193);
    --vss-background-color-input-button-hover: rgb(0 209 204);
    --vss-background-color-input-button-submit: rgb(0, 160, 160);
    --vss-background-color-input-readonly: rgb(223, 239, 223);
    --vss-background-color-input-disabled: rgb(255, 79, 79);
    --vss-background-color-input-current: rgb(255, 159, 79);
    --vss-background-color-tab: rgb(215, 215, 215);
    --vss-background-color-tab-page: rgb(255, 255, 215);
    --vss-border-color-input: rgb(63, 159, 255);
    --vss-border-color-input-hover: rgb(0 209 204);
    --vss-border-color-input-focus: rgba(80, 120, 240, 0.25);
    --vss-border-color-header: rgb(63, 159, 255);
    --vss-border-color-tab: rgb(129, 159, 189);
    --vss-border-color-menu: rgb(255, 0, 0);
    --vss-color-text: rgb(160, 160, 160);
    --vss-color-input: rgb(33, 97, 140);
    --vss-color-label: rgb(80, 80, 80);
    --vss-color-tab: rgb(46, 134, 193);

    --vss-background-color-pyjama-head: rgb(26, 188, 156);
    --vss-background-color-pyjama-body-even: rgb(214, 234, 248);
    --vss-background-color-pyjama-body-tr-hover: rgb(163, 228, 215);

    --vss-font-size: 1.00rem;
}

html {
    border: 0;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: var(--vss-font-size);
    background-color: var(--vss-background-color-area);
    color: var(--vss-color-text);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}


/********************************************************
 button, submit, reset select
********************************************************/
input[type=button],
input[type=submit],
input[type=reset],
select {
    background-color: var(--vss-md-background-color-input-button);
    font-size: var(--vss-font-size);
    font-family: inherit;
    padding: 0.25rem 0.75rem 0.25rem 0.75rem;
    outline: none;
    text-align: center;
    color: var(--vss-background-color-area);
    white-space: break-spaces;
}

input[type=button],
input[type=submit],
input[type=reset],
select {
    border-width: 0px;
    border-style: solid;
    border-color: var(--vss-md-background-color-input-button);
    border-radius: var(--vss-border-radius-input);
}

select {
    text-align: left;
}

input[type=button][disabled],
input[type=submit][disabled],
input[type=reset][disabled],
select[disabled] {
    background-color: var(--vss-background-color-input-disabled);
}

input[type=button][current],
input[type=submit][current],
input[type=reset][current],
select[current] {
    background-color: var(--vss-background-color-input-current);
}

input[type=submit] {
    background-color: var(--vss-background-color-input-button-submit);
}

input[type=button]:not([disabled], [disabled="disabled"], [current]):hover,
input[type=button]:not([disabled], [disabled="disabled"], [current]):focus-visible,
input[type=submit]:not([disabled], [disabled="disabled"], [current]):hover,
input[type=submit]:not([disabled], [disabled="disabled"], [current]):focus-visible,
input[type=reset]:not([disabled], [disabled="disabled"], [current]):hover,
input[type=reset]:not([disabled], [disabled="disabled"], [current]):focus-visible,
select:not([disabled], [disabled="disabled"], [current]):hover {
    transition: 0.5s;
}

/*********************************************************************************************************************************/
.vss-page-header,
.vss-page-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--vss-background-color-header);
    margin: 0px;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}

.vss-page-header {
    border-bottom: var(--vss-border-border-width-header) solid var(--vss-border-color-header);
}

.vss-page-body {
    overflow: auto;
    min-height: 10rem;
    height: 100%;
}

.vss-page-footer {
    border-top: var(--vss-border-border-width-header) solid var(--vss-border-color-header);
}

/*********************************************************************************************************************************/
vss-text-box {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    border: 1px solid var(--vss-border-color-input);
    border-radius: calc(var(--vss-border-radius) * 0.40);
    background-color: var(--vss-background-color-area);
    font-size: inherit;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}

vss-text-box:focus-within {
    background-color: var(--vss-background-color-input-focus);
    transition: 250ms;
}

vss-text-box[readonly] {
    background-color: var(--vss-background-color-input-readonly);
}

vss-text-box>div>span,
vss-text-box>div:nth-child(1)>span {
    color: rgb(127, 127, 127);
    font-size: 95%;
    margin: 0.00rem 0.00rem 0.25rem 0.00rem;
    white-space: nowrap;
}

vss-text-box input,
vss-text-box select,
vss-text-box textarea {
    background-color: inherit;
    border: none;
    color: var(--vss-color-input);
    outline: none;
    text-align: left;
    padding: 0;
    width: 100%;
    font-size: var(--vss-font-size);

}

/*********************************************************************************************************************************/
vss-modal-dialog {
    background: var(--vss-md-background-color-fill);
    bottom: 0;
    display: none;
    font-size: var(--vss-font-size);
    left: 0;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    transition: 500ms;
    z-index: 999999;
}

vss-modal-dialog>div {
    background-color: var(--vss-md-background-color-footer);
    border: 0.25rem solid var(--vss-md-background-color-title);
    border-radius: var(--vss-border-radius);
    display: block;
    left: 50%;
    right: 0;
    position: relative;
    height: fit-content;
    width: 90%;
    transform: translate(-50%, -50%);
    top: 50%;
    max-width: 35rem;
}

vss-modal-dialog>div>div.vss-md-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: var(--vss-background-color-area);
    background-color: var(--vss-md-background-color-title);
    padding: 0 0.25rem 0.25rem 0.5rem;
    min-height: 1.7rem;
}

vss-modal-dialog>div>div.vss-md-title>div.vss-md-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

vss-modal-dialog>div>div.vss-md-title>div.vss-md-close-button {
    height: inherit;
    margin-bottom: auto;
}

vss-modal-dialog>div>div.vss-md-title>div.vss-md-close-button>img {
    height: 1.50rem;
    width: 1.50rem;
    /* content: url('/static/image/button.close.02.png'); */
    position: relative;
    top: 2px;
}

vss-modal-dialog>div>div.vss-md-title>div.vss-md-close-button>img:hover {
    transform: rotate(90deg);
    transition: all 1.0s;
}

vss-modal-dialog>div>form.vss-md-form {
    display: block;
    background-color: var(--vss-md-background-color-body);
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}

vss-modal-dialog>div>form.vss-md-form>vss-md-body {
    padding: 0.50rem 0.50rem 0.50rem 0.50rem;
    display: block;
}

vss-modal-dialog>div>form.vss-md-form>vss-md-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    color: var(--vss-md-background-color-body);
    background-color: var(--vss-md-background-color-footer);
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}

vss-modal-dialog>div>form.vss-md-form>vss-md-buttons input {
    border-color: rgb(239, 239, 239);
    border-style: solid;
    border-width: 2px;
    ;
    padding: 0.5rem 1rem 0.5rem 1rem;
    border-top: none;
    border-right: none;
    border-radius: unset;
}

vss-modal-dialog>div>form.vss-md-form>vss-md-buttons input:first-child {
    border-bottom-left-radius: var(--vss-border-radius);
}

vss-modal-dialog>div>form.vss-md-form>vss-md-buttons input:last-child {
    border-bottom-right-radius: var(--vss-border-radius);
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: rgb(239, 239, 239);
}

.modal_dialog .md_message {
    background-color: var(--vss-md-background-color-message);
    border-bottom-left-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
    margin: 0.00rem 0.00rem 0.25rem 0.00rem;
    padding: 0.25rem 0.50rem 0.15rem 0.50rem;
    display: none;
}

#div_message_page {
    background-color: rgb(255, 204, 128);
    border-bottom-left-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
    margin: 0.00rem 0.00rem 0.25rem 0.00rem;
    padding: 0.25rem 0.50rem 0.15rem 0.50rem;
    display: none;
}

vss-modal-dialog>div>div.vss-md-wait {
    display: none;
    justify-content: center;
    align-items: center;
    background: var(--vss-md-background-color-footer);
    border-top: none;
    border-bottom-left-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
    padding: 0;
    min-height: 8rem;
    width: 100%;
}

vss-modal-dialog>div>div.vss-md-wait>img {
    height: 6rem;
    padding: 1rem;
}


vss-modal-dialog>div>div.vss-md-message {
    background-color: var(--vss-md-background-color-message);
    border-bottom-left-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
    margin: 0rem 0rem 0.25rem 0rem;
    padding: 0.25rem 0.5rem 0.15rem 0.5rem;
}

vss-modal-dialog>div>div.vss-md-message ul.message {
    list-style: none;
    counter-reset: item;
    margin: 0;
    padding: 0.00rem 0.50rem 0.00rem 0.00rem;
}

vss-modal-dialog>div>div.vss-md-message>ul.message>li {
    counter-increment: item;
    margin-bottom: 5px;
    padding: 0.10rem;
    border-radius: 0.25rem;
}


vss-modal-dialog>div>div.vss-md-message>ul.message>li.error a {
    color: red;
}

vss-modal-dialog>div>div.vss-md-message>ul.message>li a {
    display: flex;
    text-decoration: none;
}

vss-modal-dialog>div>div.vss-md-message>ul.message>li:hover {
    background-color: var(--vss-background-color-input);
    border-color: var(--vss-md-border-color-input);
}

vss-modal-dialog>div>div.vss-md-message>ul.message>li::before {
    margin-right: 0.5rem;
    content: counter(item);
    background: var(--vss-md-background-color-title);
    border-radius: 100%;
    color: var(--vss-background-color-area);
    width: 1.4em;
    min-width: 1.4rem;
    text-align: center;
    display: flex;
    float: left;
    flex-direction: row;
    align-content: space-around;
    align-items: center;
    height: 1.4rem;
    min-height: 1.4rem;
    justify-content: center;
    flex-wrap: wrap;
}

vss-modal-dialog>div>div.vss-md-message>ul.message>li.info {
    color: var(--vss-md-color-message-info);
}

vss-modal-dialog>div>div.vss-md-message>ul.message>li.info::before {
    background-color: var(--vss-md-color-message-info);
}

vss-modal-dialog>div>div.vss-md-message>ul.message>li.warning {
    color: var(--vss-md-color-message-warning);
}

vss-modal-dialog>div>div.vss-md-message>ul.message>li.warning::before {
    background-color: var(--vss-md-color-message-warning);
}

vss-modal-dialog>div>div.vss-md-message>ul.message>li.error::before {
    background-color: var(--vss-md-color-message-error);
}

vss-modal-dialog>div>div.vss-md-message>ul.message>li.error {
    color: var(--vss-md-color-message-error);
}

/*********************************************************************************************************************************/
.vs_menu_bar>.vs_mb_button_expand {
    border-radius: calc(var(--vss-border-radius) * 0.5);
}

.vs_mb_horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.5rem;
}

.vs_mb_vertical {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
}

.vs_mb_button_bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.vs_mb_button_bar>:first-child,
.vs_mb_button_bar>:last-child {
    border-radius: var(--vss-border-radius);
}

.vs_mb_button_bar>[type=button]:not([disabled], [disabled="disabled"], [current]):hover,
.vs_mb_button_bar>[type=button]:not([disabled], [disabled="disabled"], [current]):focus-visible,
.vs_mb_button_bar>[type=submit]:not([disabled], [disabled="disabled"], [current]):hover {
    border-color: var(--vss-border-color-input-hover);
    background-color: var(--vss-border-color-input-hover);
}


/********************************************************
 boutton bar horirontal
********************************************************/
.vs_mb_bt_horizontal {
    flex-direction: row;
    flex-flow: wrap;
    align-items: stretch;
    gap: 1px;
    height: 2.00rem;
}

.vs_mb_bt_horizontal>input {
    white-space: nowrap;
}

.vs_mb_bt_horizontal>*:not([style*="display: none"]):first-child {
    border-radius: var(--vss-border-radius-input);
    border-top-left-radius: var(--vss-border-radius);
    border-bottom-left-radius: var(--vss-border-radius);
}

.vs_mb_bt_horizontal>*:not([style*="display: none"]):last-child {
    border-radius: var(--vss-border-radius-input);
    border-top-right-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
}

.vs_mb_bt_horizontal>*:not([style*="display: none"]):only-child {
    border-radius: var(--vss-border-radius);
}

/********************************************************
 boutton bar vertical
********************************************************/
.vs_mb_bt_vertical {
    flex-direction: column;
    align-items: stretch;
    flex-direction: column;
    flex-grow: 1;

    /* height: 2.00rem; */
    z-index: 9999;
    /* overflow: hidden;
    width: max-content; */
}

.vs_mb_bt_vertical>input,
.vs_mb_bt_vertical>select {
    height: 100%;
    padding-left: calc(var(--vss-border-radius) * 1.2);
    padding-right: calc(var(--vss-border-radius) * 1.2);
    border-radius: calc(var(--vss-border-radius) * 0.75);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--vss-md-background-color-body);
}

.vs_mb_bt_vertical>input:not(:first-child, :last-child),
.vs_mb_bt_vertical>select:not(:first-child, :last-child) {
    border-radius: 0;
}

.vs_mb_bt_vertical>:first-child {
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
}

.vs_mb_bt_vertical>:last-child {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}


.vs_mb_button_bar>:first-child[alone] {
    border-top-left-radius: var(--vss-border-radius);
    border-bottom-left-radius: var(--vss-border-radius);
    border-top-right-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
}

.vs_mb_button_bar select {
    text-align: center;
}

/********************************************************
 tab
********************************************************/
.vs-tab {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background-color: var(--vss-background-color-tab);
    margin: 0;
    padding: 0;
    border-radius: 0.25rem;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
}

.vs-tab-page {
    background-color: var(--vss-background-color-tab-page);
    padding: 0.5rem;
    border-radius: 0.25rem;
    border-style: solid;
    border-width: 1px;
    border-color: var(--vss-border-color-tab);
    display: none;
    position: relative;
    top: -2px;
}

.vs-tab .vs-tab-item {
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: var(--vss-border-color-tab);
    border-radius: 0.25rem;
    margin: 0.2rem 0.1rem 0.3rem 0.2rem;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    background-color: var(--vss-background-color-tab-page);
    color: var(--vss-color-tab);
    z-index: 1;
}

.vs-tab .vs-tab-item:first-child {
    margin-left: 0.50rem;
}


.vs-tab .vs-tab-item[current] {
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
    border-color: var(--vss-border-color-tab);
    border-bottom-color: var(--vss-background-color-tab-page);
    z-index: 1;
}

/********************************************************
 dialog
********************************************************/
.md-fill>div {
    bottom: auto;
    top: 10%;
    transform: translate(-50%, 0);
}

.modal_dialog {
    background: var(--vss-md-background-color-fill);
    bottom: 0;
    display: none;
    font-size: var(--vss-font-size);
    left: 0;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    transition: 500ms;
    z-index: 999999;
}

.modal_dialog>div {
    background: var(--vss-md-border-color);
    border-radius: var(--vss-border-radius);
    left: 50%;
    right: 0;
    position: relative;
    height: fit-content;
    width: 90%;
    transform: translate(-50%, -50%);
    top: 50%
}

.modal_dialog>div {
    background-color: var(--vss-md-background-color-footer);
    border: 0.25rem solid var(--vss-md-background-color-title);
    border-radius: var(--vss-border-radius);
    display: block;
}

.modal_dialog>div>.md_title {
    background-color: var(--vss-md-background-color-title);
    border-bottom: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.50rem 0.25rem 0.50rem;
    color: rgb(255, 255, 255);
    min-height: calc(var(--vss-font-size) * 2);
}

.modal_dialog>div>.md_title>.text {
    color: inherit;
    height: inherit;
    font-weight: bold;
    margin-top: auto;
    margin-bottom: auto;
}

.modal_dialog>div>.md_title>.button {
    height: inherit;
    margin-bottom: auto;
}

.modal_dialog>div>*>.md_body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    padding: 0.5em;
    background-color: var(--vss-md-background-color-body);
}

.modal_dialog>div>div.md_title>div.button>img {
    height: 1.50rem;
    width: 1.50rem;
    /* content: url('/static/image/button.close.02.png'); */
    position: relative;
    top: 2px;
    right: -2px;
}

.modal_dialog>div>div.md_title>div.button>img:hover {
    transform: rotate(90deg);
    transition: all 1.0s;
}

.modal_dialog>div>form>div.md_footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    color: var(--vss-md-background-color-body);
}

.modal_dialog>div>form>div.md_footer input {
    border-color: rgb(239, 239, 239);
    border-style: solid;
    border-width: 2px;
    ;
    padding: 0.5rem 1rem 0.5rem 1rem;
    border-top: none;
    border-right: none;
    border-radius: unset;
}

.modal_dialog>div>form>div.md_footer input:first-child {
    border-bottom-left-radius: var(--vss-border-radius);
}

.modal_dialog>div>form>div.md_footer input:last-child {
    border-bottom-right-radius: var(--vss-border-radius);
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: rgb(239, 239, 239);
}

.modal_dialog .md_message {
    background-color: var(--vss-md-background-color-message);
    border-bottom-left-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
    margin: 0.00rem 0.00rem 0.25rem 0.00rem;
    padding: 0.25rem 0.50rem 0.15rem 0.50rem;
    display: none;
}

#div_message_page {
    background-color: rgb(255, 204, 128);
    border-bottom-left-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
    margin: 0.00rem 0.00rem 0.25rem 0.00rem;
    padding: 0.25rem 0.50rem 0.15rem 0.50rem;
    display: none;
}

.modal_dialog .md_wait {
    display: none;
    justify-content: center;
    align-items: center;
    background: var(--vss-md-background-color-footer);
    border-top: none;
    border-bottom-left-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
    padding: 0;
    min-height: 8rem;
    display: flex;
    width: 100%;
}

.modal_dialog .md_wait img {
    height: 6.00rem;
    width: 6.00rem;
}

.modal_dialog ul.message,
#div_message_page ul.message {
    list-style: none;
    counter-reset: item;
    margin: 0;
    padding: 0.00rem 0.50rem 0.00rem 0.00rem;
}

.modal_dialog ul.message>li,
#div_message_page ul.message>li {
    counter-increment: item;
    margin-bottom: 5px;
    padding: 0.10rem;
    border-radius: 0.25rem;
}

.modal_dialog ul.message>li.error a,
#div_message_page ul.message>li.error {
    color: red;
}

.modal_dialog ul.message>li a,
#div_message_page ul.message>li {
    display: flex;
    text-decoration: none;
}

.modal_dialog ul.message>li:hover,
#div_message_page ul.message>li:hover {
    background-color: var(--vss-background-color-input);
    border-color: var(--vss-md-border-color-input);
}

.modal_dialog ul.message>li::before,
#div_message_page ul.message>li::before {
    margin-right: 0.5rem;
    content: counter(item);
    background: var(--vss-md-background-color-title);
    border-radius: 100%;
    color: var(--vss-background-color-area);
    width: 1.4em;
    min-width: 1.4rem;
    text-align: center;
    display: flex;
    float: left;
    flex-direction: row;
    align-content: space-around;
    align-items: center;
    height: 1.4rem;
    min-height: 1.4rem;
    justify-content: center;
    flex-wrap: wrap;
}

.modal_dialog ul.message>li.info,
#div_message_page ul.message>li.info {
    color: var(--vss-md-color-message-info);
}

.modal_dialog ul.message>li.info::before,
#div_message_page ul.message>li.info::before {
    background-color: var(--vss-md-color-message-info);
}

.modal_dialog ul.message>li.warning,
#div_message_page ul.message>li.warning {
    color: var(--vss-md-color-message-warning);
}

.modal_dialog ul.message>li.warning::before,
#div_message_page ul.message>li.warning::before {
    background-color: var(--vss-md-color-message-warning);
}

.modal_dialog ul.message>li.error::before,
#div_message_page ul.message>li.error::before {
    background-color: var(--vss-md-color-message-error);
}

.modal_dialog ul.message>li.error,
#div_message_page ul.message>li.error {
    color: var(--vss-md-color-message-error);
}

/*********************************************************************
div input
*********************************************************************/
div.input {
    border: 1px solid var(--vss-border-color-input);
    border-radius: calc(var(--vss-border-radius) * 0.40);
    margin: 0.00rem 0.50rem 0.25rem 0.00rem;
    padding: 0.20rem 0.20rem 0.00rem 0.20rem;
    width: fit-content;
    width: -moz-fit-content;
}

div.input:focus-within {
    background-color: var(--vss-background-color-input);
    border-color: var(--vss-border-color-input-focus);
    transition: 0.50s;
}

div.input:focus-within label {
    color: var(--vss-color-label);
    transition: 0.50s;
}

div.input label {
    color: var(--vss-color-text);
    display: flex;
    font-size: calc(var(--vss-font-size) * 0.90);
}

div.input input[readonly],
div.input select[readonly],
div.input textarea[readonly] {
    color: var(--vss-color-label);
}

div.input:focus-within label,
div.input:focus-within input,
div.input:focus-within select,
div.input:focus-within textarea {
    background-color: var(--vss-background-color-input);
    transition: 0.50s;
}

.labeled_input {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    border: 1px solid var(--vss-border-color-input);
    border-radius: calc(var(--vss-border-radius) * 0.40);
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    background-color: var(--vss-background-color-area);

}

.labeled_input[readonly] {
    background-color: rgb(240, 240, 240);
}

.labeled_input:focus-within {
    background-color: var(--vss-background-color-input);
    border-color: var(--vss-border-color-input-focus);
    transition: 0.50s;
}

.labeled_input>div:nth-child(1)>span {
    color: rgb(127, 127, 127);
    font-size: 0.95rem;
    margin: 0.00rem 0.00rem 0.25rem 0.00rem;
    white-space: nowrap;
}

.labeled_input>div:nth-child(1)>span:nth-child(1)::after {
    color: rgb(127, 127, 127);
    content: ':';
}

.labeled_input input,
.labeled_input select,
.labeled_input textarea {
    background-color: inherit;
    border: none;
    color: var(--vss-color-input);
    outline: none;
    text-align: left;
    padding: 0;
    width: 100%;
    font-size: var(--vss-font-size);
}

.labeled_input:focus-within {
    background-color: var(--vss-border-color-input-focus);
}

.labeled_input>div {
    display: flex;
}

/*********************************************************************
navigation bar 
Don't forget to add VSFramework.js

<div class="nb_horizontal">
    <div class="nb_action">
        <input id="btn_add" type="button" value="Add" />
        <input id="btn_delete" type="button" value="Delete" />
        <input id="btn_print" type="button" value="Print" />
        <input id="btn_save" type="button" value="Save" />
    </div>
</div>
*********************************************************************/
.nb_horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.5rem;
}

.nb_vertical {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}

/* .nb_horizontal>*,
.nb_vertical>*
{
    height: 2rem;
}
 */

/*********************************************************
 table pyjama
**********************************************************/
.pyjama {
    width: 100%;
    border-collapse: collapse;
    display: block;
    margin-bottom: 0.50rem;
    overflow: auto;
}


.pyjama td {
    border: none;
    border-bottom: 2px solid var(--vss-background-color-pyjama-head);
    /* border-top: 1px solid var(--vss-background-color-pyjama-head); */
    padding: 0.1rem 0.5rem 0rem 0.5rem;
    margin: 0;
    padding: 0.15rem 0.50rem 0.00rem 0.50rem;
}

.pyjama thead td {
    padding: 0.40rem 0.50rem 0.30rem 0.50rem;
}

.pyjama thead td,
.pyjama thead td * {
    color: var(--vss-background-color-area)
}

.pyjama thead td:first-child {
    border: 0px solid var(--vss-background-color-pyjama-head);
    border-top-left-radius: 50%;
}

.pyjama thead td img {
    width: var(--vss-font-size);
    margin: 0.00rem 0.00rem 0.00rem 0.75rem;
    vertical-align: middle;
    padding: 0.15rem;
}

.pyjama thead tr,
.pyjama tbody tr td:nth-child(1),
.pyjama tfoot tr td:nth-child(1) {
    background-color: var(--vss-background-color-pyjama-head);
    color: var(--vss-background-color-area);
}

.pyjama tbody tr:nth-child(even) {
    background-color: var(--vss-background-color-pyjama-body-even);
}

.pyjama tbody tr:hover {
    background-color: var(--vss-background-color-pyjama-body-tr-hover);
    transition: 0.50s;
}

/*********************************************************
 table table-flex 
**********************************************************/
.table-flex {
    margin: 0em auto;
    border-collapse: separate;
    display: inline-table;
    border-spacing: 0;
    color: var(--vss-md-color-input);
}

.table-flex tr {
    margin: 0px;
    padding: 0px;
    border: 0px;
    display: inline-flexbox;
}

.table-flex tbody tr:nth-child(even) {
    background-color: var(--vss-background-color-pyjama-body-even);
}

.table-flex tbody tr:hover {
    background-color: var(--vss-background-color-pyjama-body-tr-hover);
}

.table-flex td {
    text-align: left;
    vertical-align: top;
    padding: 0.25rem 0.50rem 0.25rem 0.50rem;
    border-width: 1px;
    color: var(--vss-color-input);
}

.table-flex thead tr td {
    border-width: 1px;
    border-style: solid;
    border-color: var(--vss-background-color-pyjama-head);
    border-bottom-color: var(--vss-background-color-area);
    border-right-color: var(--vss-background-color-area);
}

.table-flex thead tr td:last-child {
    border-right: 1px solid var(--vss-background-color-pyjama-head);
}

.table-flex thead tr td {
    background-color: var(--vss-background-color-pyjama-head);
    color: var(--vss-background-color-area);
    border-bottom: 1px solid var(--vss-background-color-area);
}

.table-flex thead tr:first-child td:first-child {
    border-top-left-radius: 0.75rem;
}

.table-flex thead tr:first-child td:last-child {
    border-top-right-radius: 0.75rem;
}

.table-flex tbody tr td:first-child {
    background-color: var(--vss-background-color-pyjama-head);
    color: var(--vss-background-color-area);
}

.table-flex tbody tr td {
    border-style: solid;
    border-top: none;
    border-left: none;
}

.xtable-flex tbody tr td:first-child {
    border-left-style: solid;
    border-left-width: 1px;
}

@media only screen and (max-width: 640px) {
    .table-flex {
        width: 100%;
        min-width: 100%;
    }

    .table-flex td {
        display: block;
        border: 0;
        text-align: center;
        border-bottom: solid 1px var(--vss-background-color-pyjama-head);
    }

    .table-flex td::after {
        content: "\00a0";
    }

    .table-flex thead tr td {
        border-color: var(--vss-background-color-pyjama-head);
        border-bottom-color: var(--vss-background-color-area);
    }

    .table-flex thead tr:first-child td:first-child {
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
    }

    .table-flex thead tr:first-child td:last-child {
        border-top-right-radius: unset;
    }

    .table-flex tbody tr td:first-child {
        border-left-style: unset;
        background-color: unset;
        color: var(--vss-color-input);
    }

    .table-flex tbody tr td:last-child {
        border-bottom-color: var(--vss-md-background-color-input-button);
        border-bottom-width: 2px;
    }

    .table-flex tbody tr:nth-child(even) {
        background-color: var(--vss-background-color-pyjama-body-even);
    }

    .table-flex tbody tr:hover {
        background-color: var(--vss-background-color-pyjama-body-tr-hover);
    }

}

/*********************************************************
 fieldset
**********************************************************/
fieldset {
    border-radius: calc(var(--vss-border-radius) * 0.40);
    border: 1px solid var(--vss-border-color-input);
    padding: 0.50rem 0.50rem 0.50rem 0.50rem;
    display: grid;
}

fieldset>legend {
    background-color: var(--vss-background-color-input-button);
    border: 1px solid var(--vss-border-color-input);
    border-radius: var(--vss-border-radius);
    color: var(--vss-md-background-color-body);
    padding: 0.25rem 1.00rem 0.25rem 1.00rem;
}