: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-table: 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-autocomplete-list: rgb(252, 243, 207);
    --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-button-disabled: rgb(255, 79, 79);
    --vss-background-color-input-disabled: rgb(255, 79, 79);
    --vss-background-color-input-current: rgb(255, 159, 79);
    --vss-background-color-label-input-current: rgb(223,227,238);
    --vss-background-color-label-input-disabled: rgb(223, 239, 199);
    --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-td: rgb(159, 219, 159);
    --vss-border-color-menu: rgb(255, 0, 0);
    --vss-color-text: rgb(160, 160, 160);
    --vss-color-input: rgb(33, 97, 140);
    --vss-color-button: rgb(255, 255, 255);
    --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(0 209 204);

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

/* 
    Ècrase le stype du user agent
    Sans ça il y a des problèmes avec les div qui sur certains browsers ne s'affichent pas 
*/
/* div
{
    display: block;
} */

@font-face 
{
    font-family: "font-site";
    src:
      local("ABeeZee-Regular"),
      url("../font/ABeeZee-Regular.ttf") format("truetype");
      /* url("trickster-outline.otf") format("opentype"),
      url("trickster-outline.woff") format("woff"); */
}

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

body {
    font-family: font-site;
    /* Verdana, Geneva, Tahoma, sans-serif; */
    font-size: var(--vss-font-size);
    background-color: var(--vss-background-color-header);
    color: var(--vss-color-label);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: grid;
    overflow: unset;
    grid-template-columns: auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "vss-page-header"
        "vss-page-body"
        "vss-page-footer";
}

pre
{
    font-family: inherit;
    padding: 0;
    border: 0;
    margin: 0;
}

/*********************************************************************************************************************************/
.vss-page-header
{
    grid-area: vss-page-header;
    padding: 0.25rem 0.25rem 0.00rem 0.25rem;
}

.vss-page-body 
{
    grid-area: vss-page-body;
    overflow: auto;
    background-color: var(--vss-background-color-area);
    margin: 0.25rem 0.25rem 0.25rem 0.25rem;
    padding: 0.50rem 0.25rem 0.25rem 0.25rem;
    border-radius: calc(var(--vss-border-radius) / 2);
}

.vss-page-footer
{
    grid-area: vss-page-footer;
    padding: 0.00rem 0.25rem 0.00rem 0.25rem;
}

.vss-page-header,
.vss-page-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0px;
}

.vss-page-header .header-top
{
    display: grid;
    flex-direction: row;
    align-items: stretch;
    align-items: center;
    margin: 0px;
    padding: 0.25rem 0.25rem 0.00rem 0.25rem;
    column-gap: 0.50rem;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    grid-template-areas:
        "vss-page-header_header-top_logo vss-page-header_header-top_compagny vss-page-header_header-top_info"
}

.vss-page-header .header-top .logo 
{
    grid-area: vss-page-header_header-top_logo;
}

.vss-page-header .header-top .compagny 
{
    grid-area: vss-page-header_header-top_compagny;
}

.vss-page-header .header-top .info 
{
    grid-area: vss-page-header_header-top_info;
}

.vss-page-header .header-top .logo img {
    border: 0;
    height: 48px;
}

.vss-page-header .header-top .compagny
{
    flex: 1 1 auto;
    font-size: 250%;
    font-weight: bold;
    color: var(--vss-background-color-area);
}

.vss-page-header .info
{
    font-size: 75%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    white-space: nowrap;
}

.vss-page-footer .logo
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 0.50rem;
}

.vss-page-footer .logo>div img {
    border: 0;
    width: 88px;
    height: 31px;
}

.vss-page-footer .logo>div
{
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.vss-page-footer .logo>div:last-child
{
    margin-left: auto;
}

.vss-page-footer .logo>div:last-child img {
    width: unset;
    height: 31px;
}


@media screen and (max-width:1280px)
{
    .vss-page-header .header-top .logo img 
    {
        height: 40px;
    }

    .vss-page-header .header-top .compagny
    {
        font-size: 150%;
    }

    .vss-page-header .info
    {
        font-size: 70%;
    }
}

@media screen and (max-width:800px)
{
    .vss-page-header .header-top
    {
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        grid-template-areas:
            "vss-page-header_header-top_logo vss-page-header_header-top_info"
            "vss-page-header_header-top_compagny vss-page-header_header-top_compagny";
    }

    .vss-page-header .header-top .logo img 
    {
        height: 32px;
    }

    .vss-page-header .header-top .compagny
    {
        font-size: 125%;
    }

    .vss-page-header .info
    {
        font-size: 65%;
    }
}

@media screen and (max-width:640px)
{
    .vss-page-header .header-top .compagny
    {
        font-size: 100%;
        text-align: center;
    }

    .vss-page-header .info
    {
        font-size: 50%;
    }

    .vss-page-footer .logo>div img 
    {
        width: unset;
        height: 24px;
    }

    .vss-page-footer .logo>div:last-child img 
    {
        height: 24px;
    }
}
/********************************************************
 button, submit, reset select
********************************************************/
input[type=button],
input[type=submit],
input[type=reset],
select {
    background-color: var(--vss-md-background-color-input-button);
    color: var(--vss-color-button);
    font-size: var(--vss-font-size);
    font-family: inherit;
    padding: 0.25rem 0.75rem 0.25rem 0.75rem;
    outline: none;
    text-align: center;
    white-space: break-spaces;
    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]
{
    background-color: var(--vss-background-color-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;
    background-color: var(--vss-border-color-input-hover);
}

/*********************************************************************************************************************************/
vss-combo-box,
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-combo-box:focus-within,
vss-text-box:focus-within {
    background-color: var(--vss-background-color-input-focus);
    transition: 250ms;
}

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

vss-text-box div:last-child,
vss-combo-box div:last-child
{
    padding-top: 0.25rem;
}

vss-combo-box>div>span,
vss-combo-box>div:nth-child(1)>span,
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-combo-box input,
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-cb-item
{
    display: none;
}

.vss-cb-item-box
{
    height: fit-content;
    max-height: 10.00rem;
    border: 2px solid var(--vss-border-color-input-focus);
    display: none;
    position: fixed;
    background-color: var(--vss-background-color-input);
    z-index: 9999;
    border-radius: var(--vss-border-radius-input);
    padding: 0;
    margin: 0.20rem 0.00rem 0.00rem 0.00rem;
    overflow: auto;    
    color: var(--vss-color-input);
}

.vss-cb-item-box.show
{
    display: block;
}

.vss-cb-item-box > div
{
    padding: 0.25rem;
    background-color: var(--vss-background-color-pyjama-body-even);
}

.vss-cb-item-box > div:hover
{
    background-color: var(--vss-background-color-pyjama-body-tr-hover);
}

.vss-cb-item-box > div.selected
{
    padding: 0.25rem;
    background-color: var(--vss-border-color-input);
    color: var(--vss-background-color-area);
}

/*********************************************************************************************************************************/
vss-combobox,
vss-auto-complete
{
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.00rem;
}

vss-combobox > img,
vss-auto-complete > img
{
  width: 1.00rem;
  height: 1.00rem;
  border: 2px solid aqua;
  border-left: 0;   
  border-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;   
  padding: 2px;
}

vss-combobox > img
{
  content: url(../image/dropdown.arrow.down.png);
}

vss-auto-complete > img
{
  content: url(../image/find.png);
}

vss-combobox > img.up,
vss-auto-complete > img.up
{
  content: url(../image/dropdown.arrow.up.png);
}

vss-combobox input,
vss-combobox img,
vss-auto-complete input,
vss-auto-complete img
{
  border: 2px solid aqua;
  border-radius: 0.25rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;   
  font-size: inherit;
  font-family: inherit;
}  

vss-combobox input,
vss-auto-complete input
{
    color: var(--vss-color-input);
    display: block;   
    outline: none;
    padding: 2px;
}

vss-combobox > .autocomplete-list,
vss-auto-complete > .autocomplete-list
{
    background-color: var(--vss-background-color-autocomplete-list);
    border: 1px solid var(--vss-border-color-input);
    border-radius: var(--vss-border-radius-input);
    display: none;
    position: fixed;
    overflow: auto;
    transform: translateY(2px);
    z-index: 2147483647;
}  

vss-combobox > .autocomplete-list.show,
vss-auto-complete > .autocomplete-list.show
{
  display: block;
  height: 10.00rem;
}  

vss-combobox > .autocomplete-list > div,
vss-auto-complete > .autocomplete-list > div
{
  padding: 0.25rem;
}

vss-combobox > .autocomplete-list > div.autocomplete-selected,
vss-auto-complete > .autocomplete-list > div.autocomplete-selected
{
  background-color: var(--vss-md-background-color-input-button);
  color: var(--vss-background-color-area);
}

vss-combobox > .autocomplete-list > div:hover,
vss-auto-complete > .autocomplete-list > div:hover
{
  background-color: var(--vss-background-color-pyjama-body-tr-hover);
}

vss-label-input,
vss-label-combobox,
vss-label-auto-complete,
vss-label-textarea
{
  background-color: var(--vss-background-color-area);
  border: 1px solid var(--vss-border-color-input);
  border-radius: var(--vss-border-radius-input);
  display: flex;
  flex-direction: column;
  min-width: fit-content;
  flex-grow: 1;
  gap: 0.25rem;
  padding: 0.25rem;
}

vss-label-input.current,
vss-label-combobox.current,
vss-label-auto-complete.current,
vss-label-textarea.current
{
  background-color: var(--vss-background-color-label-input-current);
}

vss-label-input[disabled=true],
vss-label-combobox[disabled=true],
vss-label-auto-complete[disabled=true],
vss-label-textarea[disabled=true]
{
  background-color: var(--vss-background-color-label-input-disabled);
}

vss-label-input[mandatory]>.vss-label-div>span:first-child:after,
vss-label-combobox[mandatory]>.vss-label-div>span:first-child:after,
vss-label-auto-complete[mandatory]>.vss-label-div>span:first-child:after,
vss-label-textarea[mandatory]>.vss-label-div>span:first-child:after 
{
    content:" *";
    color: inherit;
}

vss-label-input:focus-within,
vss-label-combobox:focus-within,
vss-label-auto-complete:focus-within,
vss-label-textarea:focus-within
{
  background-color: var(--vss-background-color-label-input-current);
}

vss-label-input:focus-within .vss-label-div,
vss-label-combobox:focus-within .vss-label-div,
vss-label-auto-complete:focus-within .vss-label-div,
vss-label-textarea:focus-within .vss-label-div
{
  color: var(--vss-color-input);
}

vss-label-input .vss-label-div,
vss-label-combobox .vss-label-div,
vss-label-auto-complete .vss-label-div,
vss-label-textarea .vss-label-div
{
  font-size: 95%;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  color: var(--vss-color-text);
}

vss-label-textarea .vss-label-div
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}

vss-label-input.current .vss-label-div,
vss-label-combobox.current .vss-label-div,
vss-label-auto-complete.current .vss-label-div,
vss-label-textarea.current .vss-label-div
{
  color: var(--vss-color-label);
  background-color: var(--vss-background-color-label-input-current);
}

vss-label-combobox vss-combobox,
vss-label-auto-complete vss-combobox
{
  color: var(--vss-color-text);
}

vss-label-input input,
vss-label-combobox vss-combobox,
vss-label-auto-complete vss-auto-complete,
vss-label-textarea textarea
{
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background-color: inherit;
}

vss-label-input input,
vss-label-textarea textarea
{
    border: 0px;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    resize: none;
    color: var(--vss-color-input);
}

vss-label-combobox>vss-combobox input,
vss-label-combobox>vss-combobox img,
vss-label-auto-complete>vss-auto-complete input,
vss-label-auto-complete>vss-auto-complete img
{
  border: none;
  background-color: inherit;
}

vss-label-combobox>vss-combobox input,
vss-label-auto-complete>vss-auto-complete input
{
  outline: none;
  line-height: 120%;
  width: -webkit-fill-available;
}

vss-label-combobox vss-combobox div.autocomplete-list,
vss-label-auto-complete vss-auto-complete div.autocomplete-list
{
  border: 1px solid var(--vss-border-color-input);
  border-radius: var(--vss-border-radius-input);
  background-color: var(--vss-background-color-autocomplete-list);
  color: var(--vss-color-label);
  display: none;
}

vss-label-combobox vss-combobox div.autocomplete-list *,
vss-label-auto-complete vss-auto-complete div.autocomplete-list *
{
  background-color: var(--vss-background-color-autocomplete-list);
  color: var(--vss-color-label);
}

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

/* vss-modal-dialog>dialog::backdrop {
    background-image: linear-gradient(
      45deg,
      yellow,
      green,
      blue,
      indigo,
      violet,
      red,
      orange
    );
    opacity: 0.45;
} */

vss-modal-dialog {
    display: none;
}

vss-modal-dialog>dialog::backdrop {
    background-image: linear-gradient(
      0deg,
      #85C1E9,
      #D0D3D4,
      #85C1E9
    );
    opacity: 0.50;
}

vss-modal-dialog>dialog {
    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: flex;
    flex-direction: column;
    max-width: 90%;
    max-height: 90%;
    /* right: 50%;
    bottom: 50%;
    position: fixed;
    transform: translate(50%, 50%); */
    /* top: 50%;
    transform: translate(0, -50%); */
    padding: 0;
    opacity: 0;
    transition: opacity 0.50s;
    overflow: hidden;
}

vss-modal-dialog>dialog[open]
{
    opacity: 1;
    pointer-events: inherit;
}

vss-modal-dialog>dialog>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>dialog>div.vss-md-title>div.vss-md-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

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

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

vss-modal-dialog>dialog>form.vss-md-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--vss-md-background-color-body);
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
    /* height: 100% */
    overflow: hidden;
}

vss-modal-dialog>dialog>form.vss-md-form>vss-md-body {
    padding: 0.50rem 0.50rem 0.50rem 0.50rem;
    display: block;
    overflow: auto;
    /* flex: 1 1 100%; */
}

vss-modal-dialog>dialog>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>dialog>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>dialog>form.vss-md-form>vss-md-buttons input:first-child {
    border-bottom-left-radius: var(--vss-border-radius);
}

vss-modal-dialog>dialog>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>dialog>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;
    min-width: 30rem;
    width: 100%; */
    height: 100%;
}

vss-modal-dialog>dialog>div.vss-md-wait>img {
    height: 6rem;
    padding: 1rem;
    content: url("../image/wait_response.gif");
    display : block;
}


vss-modal-dialog>dialog>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;
    overflow: auto;
}

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


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

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

vss-modal-dialog>dialog>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>dialog>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>dialog>div.vss-md-message>ul.message>li.info {
    color: var(--vss-md-color-message-info);
}

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

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

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

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

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

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

.vss-bb-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
}

.vss-bb-vertical {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
}

vss-button-bar.vss-bb-horizontal *:not( [style*='display: none'] )
{
    border-radius: calc(var(--vss-border-radius) / 2);
    white-space: nowrap;
    width: fit-content;
}

vss-button-bar.vss-bb-horizontal *:not( [style*='display: none'] ):first-child
{
    border-top-left-radius: var(--vss-border-radius);
    border-bottom-left-radius: var(--vss-border-radius);
    padding-left: 0.75rem;
}

vss-button-bar.vss-bb-horizontal *:not( [style*='display: none'] ):last-child 
{
    border-top-right-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
    padding-right: 0.75rem;
}

/* vss-button-bar.vss-bb-horizontal *:not( [style*='display: none'] ):only-child
{
    padding: 0.25rem 1.25rem 0.25rem 1.25rem;
    border-top-right-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
} */

vss-button-bar.vss-bb-vertical *:not( [style*='display: none'] ):first-child
{
    border-top-left-radius: var(--vss-border-radius);
    border-top-right-radius: var(--vss-border-radius);
}

vss-button-bar.vss-bb-vertical *:not( [style*='display: none'] ):last-child 
{
    border-bottom-left-radius: var(--vss-border-radius);
    border-bottom-right-radius: var(--vss-border-radius);
}

/* vss-button-bar>[type=button]:not([disabled], [disabled="disabled"], [current]):hover,
vss-button-bar>[type=button]:not([disabled], [disabled="disabled"], [current]):focus-visible,
vss-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 horizontal
********************************************************/
.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);
    border-top-right-radius: var(--vss-border-radius);
    border-bottom-right-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;
}


vss-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);
}

vss-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);
    font-family: inherit;
}

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

.labeled_input>div {
    display: flex;
    align-items: center;
}

/*********************************************************************
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%;
}

/*********************************************************
 table pyjama
**********************************************************/
.pyjama {
    /* margin: 0em auto; */
    border-collapse: separate;
    display: table;
    border-spacing: 0;
    color: var(--vss-md-color-input);
    border: 2px solid var(--vss-background-color-pyjama-head);
    border-radius: 0.75rem;
    overflow: hidden;
    height: fit-content;
}

.pyjama tr {
    margin: 0;
    border: 0;
}

.pyjama td 
{
    text-align: left;
    vertical-align: top;
    padding: 0.20rem 0.40rem 0.20rem 0.40rem;
    color: var(--vss-color-input);
    border-right: 2px solid var(--vss-border-color-td);
    border-bottom: 2px solid var(--vss-border-color-td);
}

.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);
}

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

.pyjama td:first-child
{
    text-align: center;
    padding-left: 0.50rem;
    padding-right: 0.50rem;
    width: 1rem;
}

.pyjama td:last-child {
    border-right: none;
}

.pyjama tbody tr:last-child td,
.pyjama thead tr:last-child td,
.pyjama tfoot tr:last-child td {
    border-bottom: none;
}

.highlight 
{
    background-color: rgb(63, 159, 255) !important;
    color: var(--vss-background-color-area) !important;
}

.flex-auto {
    width: 100%;
    min-width: 100%;
}

.flex-auto td {
    display: block;
    width: 100% !important;
    text-align: center;
    padding: 0.20rem 0.20rem 0.20rem 0.20rem;
    border: none;
    border-bottom: solid 2px var(--vss-border-color-td);
}

.flex-auto thead tr:last-child td {
    border-bottom: solid 2px var(--vss-border-color-td);
}

.flex-auto tbody tr:last-child td {
    border-bottom: solid 2px var(--vss-border-color-td);
}

.flex-auto thead tr:last-child td:last-child{
    border-bottom: none;
}

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

.flex-auto tbody tr:last-child td:last-child {
    border: none;
}

.flex-auto thead tr:last-child td {
    border-bottom: solid 2px var(--vss-border-color-td);
}

.flex-auto tbody tr:last-child td {
    border-bottom: solid 2px var(--vss-border-color-td);
}

.flex-auto thead tr:last-child td:last-child{
    border-bottom: none;
}

.flex-auto tbody tr:last-child td:last-child {
    border: none;
}

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

.flex td {
    @media only screen and (max-width: 850px) {
        display: block;
        text-align: center;
        padding: 0.20rem 0.20rem 0.20rem 0.20rem;
        border: none;
        border-bottom: solid 2px var(--vss-border-color-td);
    }
}

.flex thead tr:last-child td {
    @media only screen and (max-width: 850px) {
        border-bottom: solid 2px var(--vss-border-color-td);
    }
}

.flex tbody tr:last-child td {
    @media only screen and (max-width: 850px) {
        border-bottom: solid 2px var(--vss-border-color-td);
    }
}

@media only screen and (max-width: 850px) {
    .flex thead tr:last-child td:last-child{
        border-bottom: none;
    }

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

.flex tbody tr:last-child td:last-child {
    border: none;
}