button[data-layout=icon-button] {
display: flex;
align-items: center;
justify-content: center;
}
button[data-layout=accent-icon-button] {
display: flex;
align-items: center;
justify-content: center;
}
button[data-layout=stop-icon-button] {
display: flex;
align-items: center;
justify-content: center;
}
button[data-layout=go-icon-button] {
display: flex;
align-items: center;
justify-content: center;
}
button[data-layout=accept-icon-button] {
display: flex;
align-items: center;
justify-content: center;
}
button[data-layout=warning-icon-button] {
display: flex;
align-items: center;
justify-content: center;
}
button[data-layout=reject-icon-button] {
display: flex;
align-items: center;
justify-content: center;
}
[data-layout=grid2x2] {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
[data-layout=grid3x3] {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr auto;
}
[data-layout=flex] {
display: flex;
align-items: center;
justify-content: start;
gap: var(--spacing, 5px);
}
[data-layout=flex-center] {
display: flex;
justify-items: center;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
}
[data-layout=center-all] {
width: 100%;
height: 100%;
flex: 1 1 100%;
align-self: stretch;
justify-self: stretch;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
[data-layout=center-all] > * {
grid-row: 1;
grid-column: 1;
align-self: center;
justify-self: center;
}
[data-layout=menu-item] {
display: grid;
grid-template-columns: auto 1fr auto auto;
grid-template-rows: 1fr auto;
align-items: center;
align-content: center;
cursor: pointer;
border-style: solid;
border-radius: var(--spacing, 5px);
border-width: 1px;
border-color: transparent;
gap: var(--spacing, 5px);
padding: var(--spacing, 5px);
}
[data-layout=menu-item]:hover {
background-color: var(--hover-color, #A0A0A050);
color: var(--hover-text-color, CanvasText);
}
[data-layout=menu-item][data-selected=true] {
font-weight: bold;
background-color: var(--selection-color, highlight);
color: var(--selection-text-color, highlightText);
}
[data-layout=menu-item] > i, [data-layout=menu-item] > img {
color: var(--accent-color, blue);
min-width: 40px;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
grid-row: 1 / span 2;
grid-column: 1;
}
[data-layout=menu-item] > span, [data-layout=menu-item] > div, [data-layout=menu-item] > label {
grid-row: 1;
grid-column: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-layout=menu-item] > small {
grid-row: 2;
grid-column: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-layout=menu-item] > [data-element=icon] {
grid-row: 1 / span 2;
grid-column: 1;
color: var(--accent-color, blue);
}
[data-layout=menu-item] > [data-element=badge] {
grid-row: 1 / span 2;
grid-column: 3;
margin-left: var(--spacing, 5px);
color: var(--accent-color, blue);
}
[data-layout=menu-item] > [data-element=pin] {
grid-row: 1 / span 2;
grid-column: 4;
margin-left: var(--spacing, 5px);
color: var(--accent-color, blue);
}
[data-layout=vertical-flex] {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: var(--spacing, 5px);
}
[data-layout=vertical-flex-center-items] {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing, 5px);
}
[data-layout=vertical-flex-stretch-items] {
display: flex;
flex-direction: column;
align-items: stretch;
justify-items: stretch;
padding: var(--spacing-medium, 7px);
gap: var(--spacing, 5px);
}
[data-layout=vertical-flex-stretch-items] > * {
width: 100%;
}
[data-layout=card] {
display: grid;
grid-template-rows: 25px auto 1fr;
grid-template-columns: auto auto 1fr auto auto;
gap: var(--spacing, 5px);
justify-items: stretch;
align-items: center;
background-color: var(--header-color, #80808030);
border: solid 1px lightgray;
border-radius: var(--spacing-large, 10px);
}
[data-layout=card] > * {
padding: var(--spacing, 5px);
}
[data-layout=card] > .icon, [data-layout=card] > [data-element=icon] {
grid-row: 1 / span 2;
grid-column: 1;
max-height: 50px;
justify-self: center;
cursor: pointer;
color: var(--header-text-color, );
}
[data-layout=card] > .title-icon, [data-layout=card] > [data-element=title-icon] {
grid-row: 1;
grid-column: 2;
justify-self: center;
cursor: pointer;
color: var(--header-text-color, );
}
[data-layout=card] > .description-icon, [data-layout=card] > [data-element=description-icon] {
grid-row: 2;
grid-column: 2;
justify-self: center;
color: var(--header-text-color, );
}
[data-layout=card] > .title, [data-layout=card] > [data-element=title] {
grid-row: 1;
grid-column: 3;
cursor: pointer;
color: var(--header-text-color, );
}
[data-layout=card] > .title:hover,[data-layout=card] > [data-element=title]:hover {
text-decoration: underline;
}
[data-layout=card] > .description, [data-layout=card] > [data-element=description] {
grid-row: 2;
grid-column: 3;
color: var(--header-text-color, );
}
[data-layout=card] > .action, [data-layout=card] > [data-element=action] {
grid-row: 1 / span 2;
grid-column: 4 / span 2;
color: var(--header-text-color, );
cursor: pointer;
}
[data-layout=card] > .title-action, [data-layout=card] > [data-element=title-action] {
grid-row: 1;
cursor: pointer;
color: var(--header-text-color, );
}
[data-layout=card] > .description-action, [data-layout=card] > [data-element=description-action] {
grid-row: 2;
cursor: pointer;
color: var(--header-text-color, );
}
[data-layout=card] > .details, [data-layout=card] > [data-element=details] {
grid-row: 3;
grid-column: 1 / span 5;
display: flex;
flex-direction: column;
background-color: var(--default-color, canvas);
color: var(--default-text-color, canvastext);
border-bottom-left-radius: var(--spacing-large, 10px);
border-bottom-right-radius: var(--spacing-large, 10px);
gap: var(--spacing, 5px);
}
[data-layout=center-page-900px] {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing, 5px);
}
[data-layout=center-page-900px] > * {
min-width: 200px;
width: 900px;
}
@media only screen and (max-width: 900px) {
[data-layout=center-page-900px] > * {
width: 100%;
}
}
[data-list-selection=default] > [data-item-index]:hover,[data-list-selection=default] > [data-element=items-presenter] > [data-item-index]:hover {
background-color: var(--hover-color, #A0A0A050);
color: var(--hover-text-color, CanvasText);
}
[data-list-selection=default] > [data-item-index][data-selected-item=true],[data-list-selection=default] > [data-element=items-presenter] > [data-item-index][data-selected-item=true] {
background-color: var(--selection-color, highlight);
color: var(--selection-text-color, highlightText);
}
[data-list-selection=default] > [data-item-index][data-selected-item=true]:hover,[data-list-selection=default] > [data-element=items-presenter] > [data-item-index][data-selected-item=true]:hover {
background-color: var(--selection-color, highlight);
color: var(--selection-text-color, highlightText);
}
[data-list-selection=default] > [data-item-index] > a,[data-list-selection=default] > [data-element=items-presenter] > [data-item-index] > a {
text-decoration: none;
}
[data-list-selection=default] > [data-item-index] > a:hover,[data-list-selection=default] > [data-element=items-presenter] > [data-item-index] > a:hover {
text-decoration: underline;
}
[data-layout=data-grid] {
display: table;
padding: var(--spacing, 5px);
}
[data-layout=data-grid] > * {
display: table-row;
padding: var(--spacing, 5px);
}
[data-layout=data-grid] > * > *, [data-layout=data-grid] > * > button, [data-layout=data-grid] > * > button[data-layout] {
padding: var(--spacing, 5px);
display: table-cell;
vertical-align: middle;
}
[data-layout=data-grid] > * > br {
display: none;
}
[data-layout=data-grid] > * > button {
margin: var(--spacing, 5px);
}
[data-layout=data-grid] > *:not(header,footer):hover {
background-color: var(--hover-color, #A0A0A050);
color: var(--hover-text-color, CanvasText);
}
[data-layout=data-grid] > *[data-selected-item]:not(header,footer) {
background-color: var(--selection-color, highlight);
color: var(--selection-text-color, highlightText);
}
[data-layout=data-grid] > *:not(header,footer) > *:not(menu) {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
[data-layout=data-grid] > * > input:first-child:checked ~ * {
font-weight: bold;
}
[data-layout=data-grid] > * > a {
text-decoration: none;
}
[data-layout=data-grid] > header {
display: table-caption;
gap: var(--spacing, 5px);
flex-direction: row;
align-items: center;
}
[data-layout=data-grid] > footer {
display: table-caption;
caption-side: bottom;
gap: var(--spacing, 5px);
flex-direction: row;
align-items: center;
}
@media only screen and (max-width: 500px) {
[data-layout=data-grid] > * {
display: flex;
gap: var(--spacing, 5px);
align-items: center;
justify-items: stretch;
position: relative;
flex-wrap: wrap;
}
[data-layout=data-grid] > * > * {
display: inline-block;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
[data-layout=data-grid] > * > br {
display: block;
content: "";
flex: 1 1 100%;
width: 100%;
height: 0;
margin: -10px;
}
[data-layout=data-grid] > * > input[type=checkbox]:first-child {
position: absolute;
left: 10px;
top: 10px;
justify-self: start;
flex: 1 1 100%;
}
[data-layout=data-grid] > * > input[type=checkbox]:first-child + * {
margin-left: 30px;
flex: 1 1 100%;
}
[data-layout=data-grid][data-cells="2"] > * {
display: grid;
gap: var(--spacing, 5px);
align-items: center;
justify-items: stretch;
grid-auto-flow: row;
position: relative;
}
[data-layout=data-grid][data-cells="2"] > * > * {
display: inline-block;
}
[data-layout=data-grid][data-cells="2"] > * > input[type=checkbox]:first-child {
grid-column: 1;
grid-row: 1;
margin-left: 10px;
justify-self: start;
}
[data-layout=data-grid][data-cells="2"] > * > input[type=checkbox]:first-child + * {
grid-column: 1 / span 2;
grid-row: 1;
margin-left: 30px;
}
}
[data-layout=flex-csv] {
display: flex;
gap: var(--spacing, 5px);
align-items: center;
flex-wrap: wrap;
}
[data-layout=flex-csv] > span:not(:empty):not(:last-child)::after,[data-layout=flex-csv] > div:not(:empty):not(:last-child)::after,[data-layout=flex-csv] > [data-append=comma]:not(:empty):not(:last-child)::after {
content: ","
}
[data-layout=flex-wrap] {
display: flex;
gap: var(--spacing, 5px);
align-items: center;
flex-wrap: wrap;
}
[data-layout=flex-wrap-padding] {
display: flex;
gap: var(--spacing, 5px);
align-items: center;
flex-wrap: wrap;
padding: var(--spacing, 5px);
}
[data-layout=frame] {
border: solid 1px;
border-color: var(--border-color, lightgray);
padding: var(--spacing-large, 10px);
border-radius: var(--spacing-large, 10px);
box-shadow: 0 0 10px 1px rgb(0 0 0 / 25%);
}
[data-layout=frame-vertical-flex] {
border: solid 1px;
border-color: var(--border-color, lightgray);
padding: var(--spacing-large, 10px);
border-radius: var(--spacing-large, 10px);
box-shadow: 0 0 10px 1px rgb(0 0 0 / 25%);
display: flex;
flex-direction: column;
gap: var(--spacing, 5px);
}
[data-layout=icon] {
border: none;
background-color: transparent;
color: inherit;
padding: var(--spacing, 5px)
}
[data-layout=link] {
border: none;
text-decoration: none;
color: var(--link-color, blue);
cursor: pointer;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
[data-layout=link]:hover {
text-decoration: underline;
}
[data-layout=list] {
display: flex;
align-items: stretch;
justify-items: center;
flex-direction: column;
padding: var(--spacing, 5px);
}
[data-layout=list] > [data-item-index], [data-layout=list] > [data-element=items-presenter] > [data-item-index] {
border: solid 1px lightgray;
border-bottom: none;
padding: var(--spacing, 5px);
display: grid;
grid-template-columns: auto auto 1fr auto auto;
grid-template-rows: auto auto;
gap: var(--spacing, 5px);
align-items: center;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
[data-layout=list] > [data-item-index]:hover,[data-layout=list] > [data-element=items-presenter] > [data-item-index]:hover {
background-color: var(--hover-color, #A0A0A050);
color: var(--hover-text-color, CanvasText);
}
[data-layout=list] > [data-item-index][data-selected-item=true],[data-layout=list] > [data-element=items-presenter] > [data-item-index][data-selected-item=true] {
background-color: var(--selection-color, highlight);
color: var(--selection-text-color, highlightText);
}
[data-layout=list] > [data-item-index][data-selected-item=true]:hover,[data-layout=list] > [data-element=items-presenter] > [data-item-index][data-selected-item=true]:hover {
background-color: var(--hover-color, #A0A0A050);
color: var(--hover-text-color, CanvasText);
}
[data-layout=list] > [data-item-index] > a,[data-layout=list] > [data-element=items-presenter] > [data-item-index] > a {
text-decoration: none;
}
[data-layout=list] > [data-item-index] > a:hover,[data-layout=list] > [data-element=items-presenter] > [data-item-index] > a:hover {
text-decoration: underline;
}
[data-layout=list] > [data-item-index]:first-child,[data-layout=list] > [data-element=items-presenter] > [data-item-index]:first-child {
border-top-left-radius: var(--spacing, 5px);
border-top-right-radius: var(--spacing, 5px);
}
[data-layout=list] > [data-item-index]:last-child,[data-layout=list] > [data-element=items-presenter] > [data-item-index]:last-child {
border-bottom-left-radius: var(--spacing, 5px);
border-bottom-right-radius: var(--spacing, 5px);
border-bottom: solid 1px lightgray;
}
[data-layout=list] > [data-item-index] > .icon, [data-layout=list] > [data-item-index] > [data-element=icon],[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .icon, [data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=icon] {
grid-column: 1;
grid-row: 1;
justify-self: center;
}
[data-layout=list] > [data-item-index] > .title-icon, [data-layout=list] > [data-item-index] > [data-element=title-icon],[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .title-icon, [data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=title-icon] {
grid-column: 2;
grid-row: 1;
justify-self: center;
cursor: pointer;
}
[data-layout=list] > [data-item-index] > .description-icon, [data-layout=list] > [data-item-index] > [data-element=description-icon],[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .description-icon, [data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=description-icon] {
grid-column: 2;
grid-row: 2;
justify-self: center;
}
[data-layout=list] > [data-item-index] > .center-title, [data-layout=list] > [data-item-index] > [data-element=center-title],[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .center-title, [data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=center-title] {
grid-column: 3;
grid-row: 1 / span 2;
justify-self: start;
align-self: center;
font-weight: bold;
}
[data-layout=list] > [data-item-index] > .title, [data-layout=list] > [data-item-index] > [data-element=title],[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .title, [data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=title] {
grid-column: 3;
grid-row: 1;
justify-self: start;
font-weight: bold;
cursor: pointer;
}
[data-layout=list] > [data-item-index] > .title:hover,[data-layout=list] > [data-item-index] > [data-element=title]:hover,[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .title:hover,[data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=title]:hover {
text-decoration: underline;
}
[data-layout=list] > [data-item-index] > .description, [data-layout=list] > [data-item-index] > [data-element=description],[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .description, [data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=description] {
grid-column: 3;
grid-row: 2;
justify-self: left;
font-size: 0.825em;
}
[data-layout=list] > [data-item-index] > .action, [data-layout=list] > [data-item-index] > [data-element=action],[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .action, [data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=action] {
grid-column: 4 / span 2;
grid-row: 1 / span 2;
justify-self: center;
}
[data-layout=list] > [data-item-index] > .action-top-left, [data-layout=list] > [data-item-index] > [data-element=action-top-left],[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .action-top-left, [data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=action-top-left] {
grid-column: 4;
grid-row: 1;
justify-self: start;
}
[data-layout=list] > [data-item-index] > .action-top-right, [data-layout=list] > [data-item-index] > [data-element=action-top-right],[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .action-top-right, [data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=action-top-right] {
grid-column: 5;
grid-row: 1;
justify-self: end;
}
[data-layout=list] > [data-item-index] > .action-bottom-left, [data-layout=list] > [data-item-index] > [data-element=action-bottom-left],[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .action-bottom-left, [data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=action-bottom-left] {
grid-column: 4;
grid-row: 2;
justify-self: start;
}
[data-layout=list] > [data-item-index] > .action-bottom-right, [data-layout=list] > [data-item-index] > [data-element=action-bottom-right],[data-layout=list] > [data-element=items-presenter] > [data-item-index] > .action-bottom-right, [data-layout=list] > [data-element=items-presenter] > [data-item-index] > [data-element=action-bottom-right] {
grid-column: 5;
grid-row: 2;
justify-self: end;
}
[data-layout=main-list] {
display: flex;
align-items: center;
justify-items: center;
flex-direction: column;
padding: var(--spacing, 5px);
}
[data-layout=main-list] > [data-item-index], [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] {
border: solid 1px lightgray;
border-bottom: none;
padding: var(--spacing, 5px);
display: grid;
grid-template-columns: auto auto 1fr auto auto;
grid-template-rows: auto auto;
gap: var(--spacing, 5px);
align-items: center;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
min-width: 200px;
width: 900px;
}
[data-layout=main-list] > [data-item-index]:hover,[data-layout=main-list] > [data-element=items-presenter] > [data-item-index]:hover {
background-color: var(--hover-color, #A0A0A050);
color: var(--hover-text-color, CanvasText);
}
[data-layout=main-list] > [data-item-index][data-selected-item=true],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index][data-selected-item=true] {
background-color: var(--selection-color, highlight);
color: var(--selection-text-color, highlightText);
}
[data-layout=main-list] > [data-item-index][data-selected-item=true]:hover,[data-layout=main-list] > [data-element=items-presenter] > [data-item-index][data-selected-item=true]:hover {
background-color: var(--hover-color, #A0A0A050);
color: var(--hover-text-color, CanvasText);
}
[data-layout=main-list] > [data-item-index] > a,[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > a {
text-decoration: none;
}
[data-layout=main-list] > [data-item-index] > a:hover,[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > a:hover {
text-decoration: underline;
}
[data-layout=main-list] > [data-item-index]:first-child,[data-layout=main-list] > [data-element=items-presenter] > [data-item-index]:first-child {
border-top-left-radius: var(--spacing, 5px);
border-top-right-radius: var(--spacing, 5px);
}
[data-layout=main-list] > [data-item-index]:last-child,[data-layout=main-list] > [data-element=items-presenter] > [data-item-index]:last-child {
border-bottom-left-radius: var(--spacing, 5px);
border-bottom-right-radius: var(--spacing, 5px);
border-bottom: solid 1px lightgray;
}
[data-layout=main-list] > [data-item-index] > .icon, [data-layout=main-list] > [data-item-index] > [data-element=icon],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .icon, [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=icon] {
grid-column: 1;
grid-row: 1;
justify-self: center;
}
[data-layout=main-list] > [data-item-index] > .title-icon, [data-layout=main-list] > [data-item-index] > [data-element=title-icon],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .title-icon, [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=title-icon] {
grid-column: 2;
grid-row: 1;
justify-self: center;
cursor: pointer;
}
[data-layout=main-list] > [data-item-index] > .description-icon, [data-layout=main-list] > [data-item-index] > [data-element=description-icon],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .description-icon, [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=description-icon] {
grid-column: 2;
grid-row: 2;
justify-self: center;
}
[data-layout=main-list] > [data-item-index] > .center-title, [data-layout=main-list] > [data-item-index] > [data-element=center-title],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .center-title, [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=center-title] {
grid-column: 3;
grid-row: 1 / span 2;
justify-self: start;
align-self: center;
font-weight: bold;
}
[data-layout=main-list] > [data-item-index] > .title, [data-layout=main-list] > [data-item-index] > [data-element=title],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .title, [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=title] {
grid-column: 3;
grid-row: 1;
justify-self: start;
font-weight: bold;
cursor: pointer;
}
[data-layout=main-list] > [data-item-index] > .title:hover,[data-layout=main-list] > [data-item-index] > [data-element=title]:hover,[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .title:hover,[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=title]:hover {
text-decoration: underline;
}
[data-layout=main-list] > [data-item-index] > .description, [data-layout=main-list] > [data-item-index] > [data-element=description],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .description, [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=description] {
grid-column: 3;
grid-row: 2;
justify-self: left;
font-size: 0.825em;
}
[data-layout=main-list] > [data-item-index] > .action, [data-layout=main-list] > [data-item-index] > [data-element=action],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .action, [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=action] {
grid-column: 4 / span 2;
grid-row: 1 / span 2;
justify-self: center;
}
[data-layout=main-list] > [data-item-index] > .action-top-left, [data-layout=main-list] > [data-item-index] > [data-element=action-top-left],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .action-top-left, [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=action-top-left] {
grid-column: 4;
grid-row: 1;
justify-self: start;
}
[data-layout=main-list] > [data-item-index] > .action-top-right, [data-layout=main-list] > [data-item-index] > [data-element=action-top-right],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .action-top-right, [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=action-top-right] {
grid-column: 5;
grid-row: 1;
justify-self: end;
}
[data-layout=main-list] > [data-item-index] > .action-bottom-left, [data-layout=main-list] > [data-item-index] > [data-element=action-bottom-left],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .action-bottom-left, [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=action-bottom-left] {
grid-column: 4;
grid-row: 2;
justify-self: start;
}
[data-layout=main-list] > [data-item-index] > .action-bottom-right, [data-layout=main-list] > [data-item-index] > [data-element=action-bottom-right],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > .action-bottom-right, [data-layout=main-list] > [data-element=items-presenter] > [data-item-index] > [data-element=action-bottom-right] {
grid-column: 5;
grid-row: 2;
justify-self: end;
}
@media only screen and (max-width: 600px) {
[data-layout=main-list] > [data-item-index],[data-layout=main-list] > [data-element=items-presenter] > [data-item-index] {
width: 100%;
}
}
[data-layout=grid-list] {
display: flex;
justify-items: center;
flex-wrap: wrap;
gap: var(--spacing, 5px);
padding: var(--spacing, 5px);
}
[data-layout=grid-list] > [data-item-index]:hover,[data-layout=grid-list] > [data-element=items-presenter] > [data-item-index]:hover {
background-color: var(--hover-color, #A0A0A050);
color: var(--hover-text-color, CanvasText);
}
[data-layout=grid-list] > [data-item-index][data-selected-item=true],[data-layout=grid-list] > [data-element=items-presenter] > [data-item-index][data-selected-item=true] {
background-color: var(--selection-color, highlight);
color: var(--selection-text-color, highlightText);
}
[data-layout=grid-list] > [data-item-index][data-selected-item=true]:hover,[data-layout=grid-list] > [data-element=items-presenter] > [data-item-index][data-selected-item=true]:hover {
background-color: var(--hover-color, #A0A0A050);
color: var(--hover-text-color, CanvasText);
}
[data-layout=grid-list] > [data-item-index] > a,[data-layout=grid-list] > [data-element=items-presenter] > [data-item-index] > a {
text-decoration: none;
}
[data-layout=grid-list] > [data-item-index] > a:hover,[data-layout=grid-list] > [data-element=items-presenter] > [data-item-index] > a:hover {
text-decoration: underline;
}
[data-layout=row] {
display: flex;
align-items: center;
align-content: center;
gap: var(--spacing, 5px);
}
[data-layout=row] > *:not([data-flex]) {
flex: 0 0 auto;
}
[data-layout=header-row] {
display: flex;
align-items: center;
gap: var(--spacing, 5px);
padding: var(--spacing, 5px);
}
[data-layout=header-row] > *:not([data-flex]) {
flex: 0 0 auto;
}
[data-layout=command-row] {
display: flex;
align-items: center;
align-content: center;
background-color: var(--command-bg-color, #F0F0F0);
border-radius: 9999px;
padding: var(--spacing-medium, 7px);
gap: var(--spacing, 5px);
}
[data-layout=command-row] > *:not([data-flex]) {
flex: 0 0 auto;
}
[data-layout=command-row] button {
background-color: var(--accent-color, blue);
color: var(--accent-text-color, white);
border-radius: 9999px;
padding: var(--spacing-small, 2px);
padding-left: var(--spacing, 5px);
padding-right: var(--spacing, 5px);
}
[data-layout=sticky-command-row] {
position: sticky;
display: flex;
align-items: center;
align-content: center;
background-color: var(--command-bg-color, #F0F0F0);
border-radius: 9999px;
padding: var(--spacing-medium, 7px);
gap: var(--spacing, 5px);
bottom: 0;
box-shadow: 0 0 10px 1px rgb(0 0 0 / 25%);
}
[data-layout=sticky-command-row] > *:not([data-flex]) {
flex: 0 0 auto;
}
[data-layout=sticky-command-row] button {
background-color: var(--accent-color, blue);
color: var(--accent-text-color, white);
border-radius: 9999px;
padding: var(--spacing-small, 2px);
padding-left: var(--spacing, 5px);
padding-right: var(--spacing, 5px);
}
[data-layout=toolbar-button] {
border: solid 1px transparent;
padding: var(--spacing-small, 2px);
padding-left: var(--spacing, 5px);
padding-right: var(--spacing, 5px);
background-color: transparent;
cursor: pointer;
}
[data-layout=toolbar-button]:hover {
border-color: var(--accent-color, blue);
color: var(--accent-color, blue);
}
button[data-layout=toolbar-button] {
border: solid 1px transparent;
padding: var(--spacing-small, 2px);
padding-left: var(--spacing, 5px);
padding-right: var(--spacing, 5px);
background-color: transparent;
cursor: pointer;
}
button[data-layout=toolbar-button]:hover {
border-color: var(--accent-color, blue);
color: var(--accent-color, blue);
}
a[data-layout=toolbar-button] {
border: solid 1px transparent;
padding: var(--spacing-small, 2px);
padding-left: var(--spacing, 5px);
padding-right: var(--spacing, 5px);
background-color: transparent;
text-decoration: none;
cursor: pointer;
}
a[data-layout=toolbar-button]:hover {
border-color: var(--accent-color, blue);
text-decoration: underline;
color: var(--accent-color, blue);
}
[data-layout=warning] {
margin: var(--spacing-medium, 7px);
padding: var(--spacing-medium, 7px);
border-radius: var(--spacing-medium, 7px);
background-color: var(--warning-color, #FFC107);
border: solid 1px darkgray;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
}
[data-layout=button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--icon-button-background, transparent);
}
[data-layout=icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--icon-button-background, transparent);
}
[data-layout=accent-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--accent-color, blue);
color:var(--accent-text-color, white);
}
[data-layout=accent-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--accent-color, blue);
color:var(--accent-text-color, white);
}
[data-layout=stop-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--stop-color, red);
color:var(--stop-text-color, white);
}
[data-layout=stop-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--stop-color, red);
color:var(--stop-text-color, white);
}
[data-layout=go-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--go-color, green);
color:var(--go-text-color, white);
}
[data-layout=go-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--go-color, green);
color:var(--go-text-color, white);
}
[data-layout=accept-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--accept-color, blue);
color:var(--accept-text-color, white);
}
[data-layout=accept-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--accept-color, blue);
color:var(--accept-text-color, white);
}
[data-layout=warning-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--warning-color, #FFC107);
color:var(--warning-text-color, darkgray);
}
[data-layout=warning-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--warning-color, #FFC107);
color:var(--warning-text-color, darkgray);
}
[data-layout=reject-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--reject-color, red);
color:var(--reject-text-color, white);
}
[data-layout=reject-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--reject-color, red);
color:var(--reject-text-color, white);
}
button[data-layout=button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--icon-button-background, transparent);
}
button[data-layout=icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--icon-button-background, transparent);
}
button[data-layout=accent-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--accent-color, blue);
color:var(--accent-text-color, white);
}
button[data-layout=accent-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--accent-color, blue);
color:var(--accent-text-color, white);
}
button[data-layout=stop-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--stop-color, red);
color:var(--stop-text-color, white);
}
button[data-layout=stop-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--stop-color, red);
color:var(--stop-text-color, white);
}
button[data-layout=go-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--go-color, green);
color:var(--go-text-color, white);
}
button[data-layout=go-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--go-color, green);
color:var(--go-text-color, white);
}
button[data-layout=accept-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--accept-color, blue);
color:var(--accept-text-color, white);
}
button[data-layout=accept-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--accept-color, blue);
color:var(--accept-text-color, white);
}
button[data-layout=warning-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--warning-color, #FFC107);
color:var(--warning-text-color, darkgray);
}
button[data-layout=warning-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--warning-color, #FFC107);
color:var(--warning-text-color, darkgray);
}
button[data-layout=reject-button] {
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--reject-color, red);
color:var(--reject-text-color, white);
}
button[data-layout=reject-icon-button] {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing, 5px);
padding: var(--spacing-small, 2px);
padding-left: var(--spacing-large, 10px);
padding-right: var(--spacing-large, 10px);
cursor: pointer;
border: solid 1px var(--icon-button-border, transparent);
border-radius: 9999px;
text-decoration: none;
background-color:var(--reject-color, red);
color:var(--reject-text-color, white);
}
[data-fade=bottom] {
position: relative ;
}
[data-fade=bottom]:after {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom : 0;
content: "";
margin: 10px;
pointer-events: none;
background: linear-gradient(to top, rgba(255,255,255, 1) 1px, rgba(255,255,255, 0) 16px );
}
[data-fa-font=regular]::before {
font: var(--fa-font-regular);
font-size: medium;
content: attr(data-icon);
}
[data-fa-font=regular]:not([data-color])::before {
color: var(--accent-color);
}
[data-fa-font=regular-end]::after {
font: var(--fa-font-regular);
font-size: medium;
content: attr(data-icon);
}
[data-fa-font=regular-end]:not([data-color])::after {
color: var(--accent-color);
}
[data-fa-font=solid]::before {
font: var(--fa-font-solid);
font-size: medium;
content: attr(data-icon);
}
[data-fa-font=solid]:not([data-color])::before {
color: var(--accent-color);
}
[data-fa-font=solid-end]::after {
font: var(--fa-font-solid);
font-size: medium;
content: attr(data-icon);
}
[data-fa-font=solid-end]:not([data-color])::after {
color: var(--accent-color);
}
[data-fa-font=brand]::before {
font: var(--fa-font-brand);
font-size: medium;
content: attr(data-icon);
}
[data-fa-font=brand]:not([data-color])::before {
color: var(--accent-color);
}
[data-fa-font=brand-end]::after {
font: var(--fa-font-brand);
font-size: medium;
content: attr(data-icon);
}
[data-fa-font=brand-end]:not([data-color])::after {
color: var(--accent-color);
}
[data-fa-font=sharp]::before {
font: var(--fa-font-sharp);
font-size: medium;
content: attr(data-icon);
}
[data-fa-font=sharp]:not([data-color])::before {
color: var(--accent-color);
}
[data-fa-font=sharp-end]::after {
font: var(--fa-font-sharp);
font-size: medium;
content: attr(data-icon);
}
[data-fa-font=sharp-end]:not([data-color])::after {
color: var(--accent-color);
}
[data-filter=drop-shadow] {
filter: drop-shadow(2px 4px 6px black);
}
[data-filter=drop-shadow-white] {
filter: drop-shadow(2px 4px 6px white);
}
[data-filter=drop-shadow-accent] {
filter: drop-shadow(2px 4px 6px var(--accent-color, blue));
}
[data-layout=note] {
margin: var(--spacing, 5px);
padding: var(--spacing-large, 10px);
border-radius: var(--spacing-large, 10px);
background-color: var(--note-color, #ffffe0);
color: var(--note-text-color, );
box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;
border: solid 1px rgba(0, 0, 0, 0.05);
}
[data-layout=separator] {
display: inline-block;
height: 80%;
width: 1px;
border-right: solid 1px var(--border-color, lightgray);
margin-left: var(--spacing, 5px);
margin-right: var(--spacing, 5px);
}
[data-max-width=size-xs] {
max-width: 20rem;
}
[data-max-width=size-small] {
max-width: 24rem;
}
[data-max-width=size-medium] {
max-width: 28rem;
}
[data-max-width=size-large] {
max-width: 32rem;
}
[data-max-width=size-xl] {
max-width: 36rem;
}
[data-max-width=size-2xl] {
max-width: 42rem;
}
[data-max-width=size-3xl] {
max-width: 48rem;
}
[data-max-width=size-4xl] {
max-width: 56rem;
}
[data-max-width=size-5xl] {
max-width: 64rem;
}
[data-max-width=size-6xl] {
max-width: 72rem;
}
[data-max-width=size-7xl] {
max-width: 80rem;
}
[data-max-width=size-full] {
max-width: 100%;
}
[data-max-width=size-prose] {
max-width: 65ch;
}
[data-max-width=screen-small] {
max-width: 640px;
}
[data-max-width=screen-medium] {
max-width: 768px;
}
[data-max-width=screen-large] {
max-width: 1024px;
}
[data-max-width=screen-xl] {
max-width: 1280px;
}
[data-max-width=screen-2xl] {
max-width: 1536px;
}
[data-max-width=min-content] {
max-width: min-content;
}
[data-max-width=max-content] {
max-width: max-content;
}
[data-max-width=fit-content] {
max-width: fit-content;
}
[data-min-width=size-xs] {
min-width: 20rem;
}
[data-min-width=size-small] {
min-width: 24rem;
}
[data-min-width=size-medium] {
min-width: 28rem;
}
[data-min-width=size-large] {
min-width: 32rem;
}
[data-min-width=size-xl] {
min-width: 36rem;
}
[data-min-width=size-2xl] {
min-width: 42rem;
}
[data-min-width=size-3xl] {
min-width: 48rem;
}
[data-min-width=size-4xl] {
min-width: 56rem;
}
[data-min-width=size-5xl] {
min-width: 64rem;
}
[data-min-width=size-6xl] {
min-width: 72rem;
}
[data-min-width=size-7xl] {
min-width: 80rem;
}
[data-min-width=size-full] {
min-width: 100%;
}
[data-min-width=size-prose] {
min-width: 65ch;
}
[data-min-width=screen-small] {
min-width: 640px;
}
[data-min-width=screen-medium] {
min-width: 768px;
}
[data-min-width=screen-large] {
min-width: 1024px;
}
[data-min-width=screen-xl] {
min-width: 1280px;
}
[data-min-width=screen-2xl] {
min-width: 1536px;
}
[data-min-width=min-content] {
min-width: min-content;
}
[data-min-width=max-content] {
min-width: max-content;
}
[data-min-width=fit-content] {
min-width: fit-content;
}
[data-width=size-xs] {
width: 20rem;
}
[data-width=size-small] {
width: 24rem;
}
[data-width=size-medium] {
width: 28rem;
}
[data-width=size-large] {
width: 32rem;
}
[data-width=size-xl] {
width: 36rem;
}
[data-width=size-2xl] {
width: 42rem;
}
[data-width=size-3xl] {
width: 48rem;
}
[data-width=size-4xl] {
width: 56rem;
}
[data-width=size-5xl] {
width: 64rem;
}
[data-width=size-6xl] {
width: 72rem;
}
[data-width=size-7xl] {
width: 80rem;
}
[data-width=size-full] {
width: 100%;
}
[data-width=size-prose] {
width: 65ch;
}
[data-width=screen-small] {
width: 640px;
}
[data-width=screen-medium] {
width: 768px;
}
[data-width=screen-large] {
width: 1024px;
}
[data-width=screen-xl] {
width: 1280px;
}
[data-width=screen-2xl] {
width: 1536px;
}
[data-width=min-content] {
width: min-content;
}
[data-width=max-content] {
width: max-content;
}
[data-width=fit-content] {
width: fit-content;
}
[data-width=auto] {
width: auto;
}
[data-width="50%"] {
width: 50%;
}
[data-width="1/3"] {
width: 33.333333%;
}
[data-width="2/3"] {
width: 66.666667%;
}
[data-width="1/6"] {
width: 16.666667%;
}
[data-width="5/6"] {
width: 83.333333%;
}
[data-width="5/12"] {
width: 41.666667%;
}
[data-width="25%"] {
width: 25%;
}
[data-width="75%"] {
width: 75%;
}
[data-width="20%"] {
width: 20%;
}
[data-width="40%"] {
width: 40%;
}
[data-width="60%"] {
width: 60%;
}
[data-width="80%"] {
width: 80%;
}
[data-width="100%"] {
width: 100%;
}
[data-width=full-screen] {
width: 100vw;
}
[data-background-color=red] {
background-color: red ;
}
[data-background-color=blue] {
background-color: blue ;
}
[data-background-color=green] {
background-color: green ;
}
[data-background-color=lightgreen] {
background-color: lightgreen ;
}
[data-background-color=lightyellow] {
background-color: lightyellow ;
}
[data-background-color=gold] {
background-color: gold ;
}
[data-background-color=goldenrod] {
background-color: goldenrod ;
}
[data-background-color=fuchsia] {
background-color: fuchsia ;
}
[data-background-color=black] {
background-color: black ;
}
[data-background-color=white] {
background-color: white ;
}
[data-background-color=accent] {
background-color: var(--accent-color, blue) ;
}
[data-background-color=default] {
color: var(--default-color, canvas) ;
}
[data-background-color=highlight] {
color: var(--selection-color, highlight) ;
}
[data-background-color=selection] {
color: var(--selection-color, highlight) ;
}
[data-border=none] {
border: none;
}
[data-border=frame] {
border: solid 1px;
border-color: var(--border-color, lightgray);
padding: var(--spacing, 5px);
border-radius: var(--spacing, 5px);
}
[data-border=accent-frame] {
border: solid 1px;
border-color: var(--accent-color, blue);
padding: var(--spacing, 5px);
border-radius: var(--spacing, 5px);
}
[data-border-style=solid] {
border-style: solid ;
}
[data-border-style=dashed] {
border-style: dashed ;
}
[data-border-style=dotted] {
border-style: dotted ;
}
[data-border-style=double] {
border-style: double ;
}
[data-border-style=groove] {
border-style: groove ;
}
[data-border-style=inset] {
border-style: inset ;
}
[data-border-style=none] {
border-style: none ;
}
[data-border-style=outset] {
border-style: outset ;
}
[data-border-style=ridge] {
border-style: ridge ;
}
[data-border-width=thin] {
border-width: var(--thin, 3px) ;
}
[data-border-width=thick] {
border-width: var(--thick, 4px) ;
}
[data-border-width=thinner] {
border-width: var(--thinner, 2px) ;
}
[data-border-width=thicker] {
border-width: var(--thicker, 5px) ;
}
[data-border-width=thinnest] {
border-width: var(--thinnest, 1px) ;
}
[data-border-width=thickest] {
border-width: var(--thickest, 6px) ;
}
[data-border-color=accent] {
border-color: var(--accent-color, blue) ;
}
[data-border-radius=full] {
border-radius: 9999px ;
}
[data-border-left-style=solid] {
border-left-style: solid ;
}
[data-border-left-style=dashed] {
border-left-style: dashed ;
}
[data-border-left-style=dotted] {
border-left-style: dotted ;
}
[data-border-left-style=double] {
border-left-style: double ;
}
[data-border-left-style=groove] {
border-left-style: groove ;
}
[data-border-left-style=inset] {
border-left-style: inset ;
}
[data-border-left-style=none] {
border-left-style: none ;
}
[data-border-left-style=outset] {
border-left-style: outset ;
}
[data-border-left-style=ridge] {
border-left-style: ridge ;
}
[data-border-left-width=thin] {
border-left-width: var(--thin, 3px) ;
}
[data-border-left-width=thick] {
border-left-width: var(--thick, 4px) ;
}
[data-border-left-width=thinner] {
border-left-width: var(--thinner, 2px) ;
}
[data-border-left-width=thicker] {
border-left-width: var(--thicker, 5px) ;
}
[data-border-left-width=thinnest] {
border-left-width: var(--thinnest, 1px) ;
}
[data-border-left-width=thickest] {
border-left-width: var(--thickest, 6px) ;
}
[data-border-left-color=accent] {
border-left-color: var(--accent-color, blue) ;
}
[data-border-right-style=solid] {
border-right-style: solid ;
}
[data-border-right-style=dashed] {
border-right-style: dashed ;
}
[data-border-right-style=dotted] {
border-right-style: dotted ;
}
[data-border-right-style=double] {
border-right-style: double ;
}
[data-border-right-style=groove] {
border-right-style: groove ;
}
[data-border-right-style=inset] {
border-right-style: inset ;
}
[data-border-right-style=none] {
border-right-style: none ;
}
[data-border-right-style=outset] {
border-right-style: outset ;
}
[data-border-right-style=ridge] {
border-right-style: ridge ;
}
[data-border-right-width=thin] {
border-right-width: var(--thin, 3px) ;
}
[data-border-right-width=thick] {
border-right-width: var(--thick, 4px) ;
}
[data-border-right-width=thinner] {
border-right-width: var(--thinner, 2px) ;
}
[data-border-right-width=thicker] {
border-right-width: var(--thicker, 5px) ;
}
[data-border-right-width=thinnest] {
border-right-width: var(--thinnest, 1px) ;
}
[data-border-right-width=thickest] {
border-right-width: var(--thickest, 6px) ;
}
[data-border-right-color=accent] {
border-right-color: var(--accent-color, blue) ;
}
[data-border-top-style=solid] {
border-top-style: solid ;
}
[data-border-top-style=dashed] {
border-top-style: dashed ;
}
[data-border-top-style=dotted] {
border-top-style: dotted ;
}
[data-border-top-style=double] {
border-top-style: double ;
}
[data-border-top-style=groove] {
border-top-style: groove ;
}
[data-border-top-style=inset] {
border-top-style: inset ;
}
[data-border-top-style=none] {
border-top-style: none ;
}
[data-border-top-style=outset] {
border-top-style: outset ;
}
[data-border-top-style=ridge] {
border-top-style: ridge ;
}
[data-border-top-width=thin] {
border-top-width: var(--thin, 3px) ;
}
[data-border-top-width=thick] {
border-top-width: var(--thick, 4px) ;
}
[data-border-top-width=thinner] {
border-top-width: var(--thinner, 2px) ;
}
[data-border-top-width=thicker] {
border-top-width: var(--thicker, 5px) ;
}
[data-border-top-width=thinnest] {
border-top-width: var(--thinnest, 1px) ;
}
[data-border-top-width=thickest] {
border-top-width: var(--thickest, 6px) ;
}
[data-border-top-color=accent] {
border-top-color: var(--accent-color, blue) ;
}
[data-border-bottom-style=solid] {
border-bottom-style: solid ;
}
[data-border-bottom-style=dashed] {
border-bottom-style: dashed ;
}
[data-border-bottom-style=dotted] {
border-bottom-style: dotted ;
}
[data-border-bottom-style=double] {
border-bottom-style: double ;
}
[data-border-bottom-style=groove] {
border-bottom-style: groove ;
}
[data-border-bottom-style=inset] {
border-bottom-style: inset ;
}
[data-border-bottom-style=none] {
border-bottom-style: none ;
}
[data-border-bottom-style=outset] {
border-bottom-style: outset ;
}
[data-border-bottom-style=ridge] {
border-bottom-style: ridge ;
}
[data-border-bottom-width=thin] {
border-bottom-width: var(--thin, 3px) ;
}
[data-border-bottom-width=thick] {
border-bottom-width: var(--thick, 4px) ;
}
[data-border-bottom-width=thinner] {
border-bottom-width: var(--thinner, 2px) ;
}
[data-border-bottom-width=thicker] {
border-bottom-width: var(--thicker, 5px) ;
}
[data-border-bottom-width=thinnest] {
border-bottom-width: var(--thinnest, 1px) ;
}
[data-border-bottom-width=thickest] {
border-bottom-width: var(--thickest, 6px) ;
}
[data-border-bottom-color=accent] {
border-bottom-color: var(--accent-color, blue) ;
}
[data-border-top-left-radius=full] {
border-top-left-radius: 9999px ;
}
[data-border-bottom-left-radius=full] {
border-bottom-left-radius: 9999px ;
}
[data-border-top-right-radius=full] {
border-top-right-radius: 9999px ;
}
[data-border-bottom-right-radius=full] {
border-bottom-right-radius: 9999px ;
}
[data-color=red] {
color: red ;
}
[data-color=blue] {
color: blue ;
}
[data-color=green] {
color: green ;
}
[data-color=lightgreen] {
color: lightgreen ;
}
[data-color=lightyellow] {
color: lightyellow ;
}
[data-color=gold] {
color: gold ;
}
[data-color=goldenrod] {
color: goldenrod ;
}
[data-color=fuchsia] {
color: fuchsia ;
}
[data-color=black] {
color: black ;
}
[data-color=white] {
color: white ;
}
[data-color=default] {
color: var(--default-text-color, canvastext) ;
}
[data-color=highlight] {
color: var(--selection-text-color, highlightText) ;
}
[data-color=selection] {
color: var(--selection-text-color, highlightText) ;
}
[data-color=accent] {
color: var(--accent-color, blue) ;
}
[data-cursor=auto] {
cursor: auto;
}
[data-cursor=default] {
cursor: default;
}
[data-cursor=nope] {
cursor: nope;
}
[data-cursor=context-menu] {
cursor: context-menu;
}
[data-cursor=help] {
cursor: help;
}
[data-cursor=pointer] {
cursor: pointer;
}
[data-cursor=progress] {
cursor: progress;
}
[data-cursor=wait] {
cursor: wait;
}
[data-cursor=cell] {
cursor: cell;
}
[data-cursor=crosshair] {
cursor: crosshair;
}
[data-cursor=text] {
cursor: text;
}
[data-cursor=vertical-text] {
cursor: vertical-text;
}
[data-cursor=alias] {
cursor: alias;
}
[data-cursor=copy] {
cursor: copy;
}
[data-cursor=move] {
cursor: move;
}
[data-cursor=no-drop] {
cursor: no-drop;
}
[data-cursor=not-allowed] {
cursor: not-allowed;
}
[data-cursor=grab] {
cursor: grab;
}
[data-cursor=grabbing] {
cursor: grabbing;
}
[data-cursor=e-resize] {
cursor: e-resize;
}
[data-cursor=n-resize] {
cursor: n-resize;
}
[data-cursor=ne-resize] {
cursor: ne-resize;
}
[data-cursor=nw-resize] {
cursor: nw-resize;
}
[data-cursor=s-resize] {
cursor: s-resize;
}
[data-cursor=se-resize] {
cursor: se-resize;
}
[data-cursor=sw-resize] {
cursor: sw-resize;
}
[data-cursor=w-resize] {
cursor: w-resize;
}
[data-cursor=ew-resize] {
cursor: ew-resize;
}
[data-cursor=ns-resize] {
cursor: ns-resize;
}
[data-cursor=nesw-resize] {
cursor: nesw-resize;
}
[data-cursor=nwse-resize] {
cursor: nwse-resize;
}
[data-cursor=col-resize] {
cursor: col-resize;
}
[data-cursor=row-resize] {
cursor: row-resize;
}
[data-cursor=all-scroll] {
cursor: all-scroll;
}
[data-cursor=zoom-in] {
cursor: zoom-in;
}
[data-cursor=zoom-out] {
cursor: zoom-out;
}
[data-cursor=inherit] {
cursor: inherit;
}
[data-cursor=initial] {
cursor: initial;
}
[data-cursor=revert] {
cursor: revert;
}
[data-cursor=revert-layer] {
cursor: revert-layer;
}
[data-cursor=unset] {
cursor: unset;
}
[data-display=flex] {
display: flex ;
}
[data-display=grid] {
display: grid ;
}
[data-display=inline-grid] {
display: inline-grid ;
}
[data-display=inline-flex] {
display: inline-flex ;
}
[data-display=vertical-flex] {
display: flex ;
flex-direction: column;
}
[data-display=none] {
display: none;
}
[data-flex=stretch-full] {
flex: 1 1 100% ;
}
[data-flex=stretch-half] {
flex: 1 1 50% ;
}
[data-flex=stretch-quarter] {
flex: 1 1 25% ;
}
[data-flex=stretch-three-fourth] {
flex: 1 1 75% ;
}
[data-font-size=small] {
font-size: small;
}
[data-font-size=smaller] {
font-size: smaller;
}
[data-font-size=medium] {
font-size: medium ;
}
[data-font-size=large] {
font-size: large ;
}
[data-font-size=larger] {
font-size: larger ;
}
[data-font-size=x-small] {
font-size: x-small;
}
[data-font-size=xx-small] {
font-size: xx-small;
}
[data-font-size=x-large] {
font-size: x-large;
}
[data-font-size=xx-large] {
font-size: xx-large;
}
[data-font-style=italic] {
font-style: italic ;
}
[data-font-style=normal] {
font-style: normal ;
}
[data-font-style=oblique] {
font-style: oblique ;
}
[data-font-weight=bold] {
font-weight: bold ;
}
[data-font-weight=normal] {
font-weight: normal ;
}
[data-font-weight=bolder] {
font-weight: bolder ;
}
[data-font-weight=lighter] {
font-weight: lighter ;
}
[data-grid-row="1"] {
grid-row: 1;
}
[data-grid-row="2"] {
grid-row: 2;
}
[data-grid-row="3"] {
grid-row: 3;
}
[data-grid-row="4"] {
grid-row: 4;
}
[data-grid-row="5"] {
grid-row: 5;
}
[data-grid-row="1 / span 2"] {
grid-row: 1 / span 2;
}
[data-grid-row="2 / span 2"] {
grid-row: 2 / span 2;
}
[data-grid-row="3 / span 2"] {
grid-row: 3 / span 2;
}
[data-grid-row="4 / span 2"] {
grid-row: 4 / span 2;
}
[data-grid-row="5 / span 2"] {
grid-row: 5 / span 2;
}
[data-grid-row="1 / span 3"] {
grid-row: 1 / span 3;
}
[data-grid-row="2 / span 3"] {
grid-row: 2 / span 3;
}
[data-grid-row="3 / span 3"] {
grid-row: 3 / span 3;
}
[data-grid-row="4 / span 3"] {
grid-row: 4 / span 3;
}
[data-grid-row="5 / span 3"] {
grid-row: 5 / span 3;
}
[data-grid-row="1 / span 4"] {
grid-row: 1 / span 4;
}
[data-grid-row="2 / span 4"] {
grid-row: 2 / span 4;
}
[data-grid-row="3 / span 4"] {
grid-row: 3 / span 4;
}
[data-grid-row="4 / span 4"] {
grid-row: 4 / span 4;
}
[data-grid-row="5 / span 4"] {
grid-row: 5 / span 4;
}
[data-grid-row="1 / span 5"] {
grid-row: 1 / span 5;
}
[data-grid-row="2 / span 5"] {
grid-row: 2 / span 5;
}
[data-grid-row="3 / span 5"] {
grid-row: 3 / span 5;
}
[data-grid-row="4 / span 5"] {
grid-row: 4 / span 5;
}
[data-grid-row="5 / span 5"] {
grid-row: 5 / span 5;
}
[data-grid-column="1"] {
grid-column: 1;
}
[data-grid-column="2"] {
grid-column: 2;
}
[data-grid-column="3"] {
grid-column: 3;
}
[data-grid-column="4"] {
grid-column: 4;
}
[data-grid-column="5"] {
grid-column: 5;
}
[data-grid-column="1 / span 2"] {
grid-column: 1 / span 2;
}
[data-grid-column="2 / span 2"] {
grid-column: 2 / span 2;
}
[data-grid-column="3 / span 2"] {
grid-column: 3 / span 2;
}
[data-grid-column="4 / span 2"] {
grid-column: 4 / span 2;
}
[data-grid-column="5 / span 2"] {
grid-column: 5 / span 2;
}
[data-grid-column="1 / span 3"] {
grid-column: 1 / span 3;
}
[data-grid-column="2 / span 3"] {
grid-column: 2 / span 3;
}
[data-grid-column="3 / span 3"] {
grid-column: 3 / span 3;
}
[data-grid-column="4 / span 3"] {
grid-column: 4 / span 3;
}
[data-grid-column="5 / span 3"] {
grid-column: 5 / span 3;
}
[data-grid-column="1 / span 4"] {
grid-column: 1 / span 4;
}
[data-grid-column="2 / span 4"] {
grid-column: 2 / span 4;
}
[data-grid-column="3 / span 4"] {
grid-column: 3 / span 4;
}
[data-grid-column="4 / span 4"] {
grid-column: 4 / span 4;
}
[data-grid-column="5 / span 4"] {
grid-column: 5 / span 4;
}
[data-grid-column="1 / span 5"] {
grid-column: 1 / span 5;
}
[data-grid-column="2 / span 5"] {
grid-column: 2 / span 5;
}
[data-grid-column="3 / span 5"] {
grid-column: 3 / span 5;
}
[data-grid-column="4 / span 5"] {
grid-column: 4 / span 5;
}
[data-grid-column="5 / span 5"] {
grid-column: 5 / span 5;
}
[data-grid-row-span="2"] {
grid-row-end: 2;
}
[data-grid-row-span="3"] {
grid-row-end: 3;
}
[data-grid-row-span="4"] {
grid-row-end: 4;
}
[data-grid-column-span="2"] {
grid-column-end: 2;
}
[data-grid-column-span="3"] {
grid-column-end: 3;
}
[data-grid-column-span="4"] {
grid-column-end: 4;
}
[data-align-content=center] {
align-content: center;
}
[data-align-content=start] {
align-content: start;
}
[data-align-content=end] {
align-content: end;
}
[data-align-content=flex-start] {
align-content: flex-start;
}
[data-align-content=flex-end] {
align-content: flex-end;
}
[data-align-content=normal] {
align-content: normal;
}
[data-align-content=baseline] {
align-content: baseline;
}
[data-align-content=space-between] {
align-content: space-between;
}
[data-align-content=space-around] {
align-content: space-around;
}
[data-align-content=space-evenly] {
align-content: space-evenly;
}
[data-align-content=stretch] {
align-content: stretch;
}
[data-align-content=safe-center] {
align-content: safe center;
}
[data-align-content=unsafe-center] {
align-content: unsafe center;
}
[data-align-content=first-baseline] {
align-content: first baseline;
}
[data-align-content=last-baseline] {
align-content: last baseline;
}
[data-align-content=inherit] {
align-content: inherit;
}
[data-align-content=initial] {
align-content: initial;
}
[data-align-content=revert] {
align-content: revert;
}
[data-align-content=revert-layer] {
align-content: revert-layer;
}
[data-align-content=unset] {
align-content: unset;
}
[data-align-items=normal] {
align-items: normal;
}
[data-align-items=stretch] {
align-items: stretch;
}
[data-align-items=center] {
align-items: center;
}
[data-align-items=start] {
align-items: start;
}
[data-align-items=end] {
align-items: end;
}
[data-align-items=flex-start] {
align-items: flex-start;
}
[data-align-items=flex-end] {
align-items: flex-end;
}
[data-align-items=self-start] {
align-items: self-start;
}
[data-align-items=self-end] {
align-items: self-end;
}
[data-align-items=baseline] {
align-items: baseline;
}
[data-align-items=first-baseline] {
align-items: first baseline;
}
[data-align-items=last-baseline] {
align-items: last baseline;
}
[data-align-items=safe-center] {
align-items: safe center;
}
[data-align-items=unsafe-center] {
align-items: unsafe center;
}
[data-align-items=inherit] {
align-items: inherit;
}
[data-align-items=initial] {
align-items: initial;
}
[data-align-items=revert] {
align-items: revert;
}
[data-align-items=revert-layer] {
align-items: revert-layer;
}
[data-align-items=unset] {
align-items: unset;
}
[data-align-self=normal] {
align-self: normal;
}
[data-align-self=auto] {
align-self: auto;
}
[data-align-self=center] {
align-self: center;
}
[data-align-self=start] {
align-self: start;
}
[data-align-self=end] {
align-self: end;
}
[data-align-self=self-start] {
align-self: self-start;
}
[data-align-self=self-end] {
align-self: self-end;
}
[data-align-self=flex-start] {
align-self: flex-start;
}
[data-align-self=flex-end] {
align-self: flex-end;
}
[data-align-self=baseline] {
align-self: baseline;
}
[data-align-self=first-baseline] {
align-self: first baseline;
}
[data-align-self=last-baseline] {
align-self: last baseline;
}
[data-align-self=stretch] {
align-self: stretch;
}
[data-align-self=safe-center] {
align-self: safe center;
}
[data-align-self=unsafe-center] {
align-self: unsafe center;
}
[data-align-self=inherit] {
align-self: inherit;
}
[data-align-self=initial] {
align-self: initial;
}
[data-align-self=revert] {
align-self: revert;
}
[data-align-self=revert-layer] {
align-self: revert-layer;
}
[data-align-self=unset] {
align-self: unset;
}
[data-justify-content=center] {
justify-content: center;
}
[data-justify-content=start] {
justify-content: start;
}
[data-justify-content=end] {
justify-content: end;
}
[data-justify-content=flex-start] {
justify-content: flex-start;
}
[data-justify-content=flex-end] {
justify-content: flex-end;
}
[data-justify-content=left] {
justify-content: left;
}
[data-justify-content=right] {
justify-content: right;
}
[data-justify-content=normal] {
justify-content: normal;
}
[data-justify-content=space-between] {
justify-content: space-between;
}
[data-justify-content=space-around] {
justify-content: space-around;
}
[data-justify-content=space-evenly] {
justify-content: space-evenly;
}
[data-justify-content=stretch] {
justify-content: stretch;
}
[data-justify-content=safe-center] {
justify-content: safe center;
}
[data-justify-content=unsafe-center] {
justify-content: unsafe center;
}
[data-justify-content=inherit] {
justify-content: inherit;
}
[data-justify-content=initial] {
justify-content: initial;
}
[data-justify-content=revert] {
justify-content: revert;
}
[data-justify-content=revert-layer] {
justify-content: revert-layer;
}
[data-justify-content=unset] {
justify-content: unset;
}
[data-justify-items=normal] {
justify-items: normal;
}
[data-justify-items=stretch] {
justify-items: stretch;
}
[data-justify-items=center] {
justify-items: center;
}
[data-justify-items=start] {
justify-items: start;
}
[data-justify-items=end] {
justify-items: end;
}
[data-justify-items=flex-start] {
justify-items: flex-start;
}
[data-justify-items=flex-end] {
justify-items: flex-end;
}
[data-justify-items=self-start] {
justify-items: self-start;
}
[data-justify-items=self-end] {
justify-items: self-end;
}
[data-justify-items=left] {
justify-items: left;
}
[data-justify-items=right] {
justify-items: right;
}
[data-justify-items=baseline] {
justify-items: baseline;
}
[data-justify-items=first-baseline] {
justify-items: first baseline;
}
[data-justify-items=last-baseline] {
justify-items: last baseline;
}
[data-justify-items=safe-center] {
justify-items: safe center;
}
[data-justify-items=unsafe-center] {
justify-items: unsafe center;
}
[data-justify-items=legacy-right] {
justify-items: legacy right;
}
[data-justify-items=legacy-left] {
justify-items: legacy left;
}
[data-justify-items=legacy-center] {
justify-items: legacy center;
}
[data-justify-items=inherit] {
justify-items: inherit;
}
[data-justify-items=initial] {
justify-items: initial;
}
[data-justify-items=revert] {
justify-items: revert;
}
[data-justify-items=revert-layer] {
justify-items: revert-layer;
}
[data-justify-items=unset] {
justify-items: unset;
}
[data-justify-self=auto] {
justify-self: auto;
}
[data-justify-self=normal] {
justify-self: normal;
}
[data-justify-self=stretch] {
justify-self: stretch;
}
[data-justify-self=center] {
justify-self: center;
}
[data-justify-self=start] {
justify-self: start;
}
[data-justify-self=end] {
justify-self: end;
}
[data-justify-self=flex-start] {
justify-self: flex-start;
}
[data-justify-self=flex-end] {
justify-self: flex-end;
}
[data-justify-self=self-start] {
justify-self: self-start;
}
[data-justify-self=self-end] {
justify-self: self-end;
}
[data-justify-self=left] {
justify-self: left;
}
[data-justify-self=right] {
justify-self: right;
}
[data-justify-self=baseline] {
justify-self: baseline;
}
[data-justify-self=first-baseline] {
justify-self: first baseline;
}
[data-justify-self=last-baseline] {
justify-self: last baseline;
}
[data-justify-self=safe-center] {
justify-self: safe center;
}
[data-justify-self=unsafe-center] {
justify-self: unsafe center;
}
[data-justify-self=inherit] {
justify-self: inherit;
}
[data-justify-self=initial] {
justify-self: initial;
}
[data-justify-self=revert] {
justify-self: revert;
}
[data-justify-self=revert-layer] {
justify-self: revert-layer;
}
[data-justify-self=unset] {
justify-self: unset;
}
[data-overflow=hidden] {
overflow: hidden;
}
[data-overflow=auto] {
overflow: auto;
}
[data-overflow=scroll] {
overflow: scroll;
}
[data-overflow=visible] {
overflow: visible;
}
[data-overflow-x=hidden] {
overflow-x: hidden;
}
[data-overflow-x=auto] {
overflow-x: auto;
}
[data-overflow-x=scroll] {
overflow-x: scroll;
}
[data-overflow-x=visible] {
overflow-x: visible;
}
[data-overflow-y=hidden] {
overflow-y: hidden;
}
[data-overflow-y=auto] {
overflow-y: auto;
}
[data-overflow-y=scroll] {
overflow-y: scroll;
}
[data-overflow-y=visible] {
overflow-y: visible;
}
[data-padding=auto] {
padding: var(--spacing, 5px);
}
[data-padding=medium] {
padding: var(--spacing-medium, 7px);
}
[data-padding=large] {
padding: var(--spacing-large, 10px);
}
[data-padding=small] {
padding: var(--spacing-small, 2px);
}
[data-padding=none] {
padding: 0;
}
[data-padding=inherit] {
padding: inherit;
}
[data-padding=initial] {
padding: initial;
}
[data-padding=revert] {
padding: revert;
}
[data-padding=revert-layer] {
padding: revert-layer;
}
[data-padding=unset] {
padding: unset;
}
[data-padding-left=auto] {
padding-left: var(--spacing, 5px);
}
[data-padding-left=medium] {
padding-left: var(--spacing-medium, 7px);
}
[data-padding-left=large] {
padding-left: var(--spacing-large, 10px);
}
[data-padding-left=small] {
padding-left: var(--spacing-small, 2px);
}
[data-padding-left=none] {
padding-left: 0;
}
[data-padding-left=inherit] {
padding-left: inherit;
}
[data-padding-left=initial] {
padding-left: initial;
}
[data-padding-left=revert] {
padding-left: revert;
}
[data-padding-left=revert-layer] {
padding-left: revert-layer;
}
[data-padding-left=unset] {
padding-left: unset;
}
[data-padding-right=auto] {
padding-right: var(--spacing, 5px);
}
[data-padding-right=medium] {
padding-right: var(--spacing-medium, 7px);
}
[data-padding-right=large] {
padding-right: var(--spacing-large, 10px);
}
[data-padding-right=small] {
padding-right: var(--spacing-small, 2px);
}
[data-padding-right=none] {
padding-right: 0;
}
[data-padding-right=inherit] {
padding-right: inherit;
}
[data-padding-right=initial] {
padding-right: initial;
}
[data-padding-right=revert] {
padding-right: revert;
}
[data-padding-right=revert-layer] {
padding-right: revert-layer;
}
[data-padding-right=unset] {
padding-right: unset;
}
[data-padding-top=auto] {
padding-top: var(--spacing, 5px);
}
[data-padding-top=medium] {
padding-top: var(--spacing-medium, 7px);
}
[data-padding-top=large] {
padding-top: var(--spacing-large, 10px);
}
[data-padding-top=small] {
padding-top: var(--spacing-small, 2px);
}
[data-padding-top=none] {
padding-top: 0;
}
[data-padding-top=inherit] {
padding-top: inherit;
}
[data-padding-top=initial] {
padding-top: initial;
}
[data-padding-top=revert] {
padding-top: revert;
}
[data-padding-top=revert-layer] {
padding-top: revert-layer;
}
[data-padding-top=unset] {
padding-top: unset;
}
[data-padding-bottom=auto] {
padding-bottom: var(--spacing, 5px);
}
[data-padding-bottom=medium] {
padding-bottom: var(--spacing-medium, 7px);
}
[data-padding-bottom=large] {
padding-bottom: var(--spacing-large, 10px);
}
[data-padding-bottom=small] {
padding-bottom: var(--spacing-small, 2px);
}
[data-padding-bottom=none] {
padding-bottom: 0;
}
[data-padding-bottom=inherit] {
padding-bottom: inherit;
}
[data-padding-bottom=initial] {
padding-bottom: initial;
}
[data-padding-bottom=revert] {
padding-bottom: revert;
}
[data-padding-bottom=revert-layer] {
padding-bottom: revert-layer;
}
[data-padding-bottom=unset] {
padding-bottom: unset;
}
[data-margin=auto] {
margin: auto;
}
[data-margin=default] {
margin: var(--spacing, 5px);
}
[data-margin=medium] {
margin: var(--spacing-medium, 7px);
}
[data-margin=large] {
margin: var(--spacing-large, 10px);
}
[data-margin=small] {
margin: var(--spacing-small, 2px);
}
[data-margin=none] {
margin: 0;
}
[data-margin=inherit] {
margin: inherit;
}
[data-margin=initial] {
margin: initial;
}
[data-margin=revert] {
margin: revert;
}
[data-margin=revert-layer] {
margin: revert-layer;
}
[data-margin=unset] {
margin: unset;
}
[data-margin-left=auto] {
margin-left: auto;
}
[data-margin-left=default] {
margin-left: var(--spacing, 5px);
}
[data-margin-left=medium] {
margin-left: var(--spacing-medium, 7px);
}
[data-margin-left=large] {
margin-left: var(--spacing-large, 10px);
}
[data-margin-left=small] {
margin-left: var(--spacing-small, 2px);
}
[data-margin-left=none] {
margin-left: 0;
}
[data-margin-left=inherit] {
margin-left: inherit;
}
[data-margin-left=initial] {
margin-left: initial;
}
[data-margin-left=revert] {
margin-left: revert;
}
[data-margin-left=revert-layer] {
margin-left: revert-layer;
}
[data-margin-left=unset] {
margin-left: unset;
}
[data-margin-right=auto] {
margin-right: auto;
}
[data-margin-right=default] {
margin-right: var(--spacing, 5px);
}
[data-margin-right=medium] {
margin-right: var(--spacing-medium, 7px);
}
[data-margin-right=large] {
margin-right: var(--spacing-large, 10px);
}
[data-margin-right=small] {
margin-right: var(--spacing-small, 2px);
}
[data-margin-right=none] {
margin-right: 0;
}
[data-margin-right=inherit] {
margin-right: inherit;
}
[data-margin-right=initial] {
margin-right: initial;
}
[data-margin-right=revert] {
margin-right: revert;
}
[data-margin-right=revert-layer] {
margin-right: revert-layer;
}
[data-margin-right=unset] {
margin-right: unset;
}
[data-margin-top=auto] {
margin-top: auto;
}
[data-margin-top=default] {
margin-top: var(--spacing, 5px);
}
[data-margin-top=medium] {
margin-top: var(--spacing-medium, 7px);
}
[data-margin-top=large] {
margin-top: var(--spacing-large, 10px);
}
[data-margin-top=small] {
margin-top: var(--spacing-small, 2px);
}
[data-margin-top=none] {
margin-top: 0;
}
[data-margin-top=inherit] {
margin-top: inherit;
}
[data-margin-top=initial] {
margin-top: initial;
}
[data-margin-top=revert] {
margin-top: revert;
}
[data-margin-top=revert-layer] {
margin-top: revert-layer;
}
[data-margin-top=unset] {
margin-top: unset;
}
[data-margin-bottom=auto] {
margin-bottom: auto;
}
[data-margin-bottom=default] {
margin-bottom: var(--spacing, 5px);
}
[data-margin-bottom=medium] {
margin-bottom: var(--spacing-medium, 7px);
}
[data-margin-bottom=large] {
margin-bottom: var(--spacing-large, 10px);
}
[data-margin-bottom=small] {
margin-bottom: var(--spacing-small, 2px);
}
[data-margin-bottom=none] {
margin-bottom: 0;
}
[data-margin-bottom=inherit] {
margin-bottom: inherit;
}
[data-margin-bottom=initial] {
margin-bottom: initial;
}
[data-margin-bottom=revert] {
margin-bottom: revert;
}
[data-margin-bottom=revert-layer] {
margin-bottom: revert-layer;
}
[data-margin-bottom=unset] {
margin-bottom: unset;
}
[data-position=sticky] {
position: sticky;
}
[data-position=sticky-top] {
position: sticky;
top: var(--spacing, 5px);
}
[data-position=sticky-bottom] {
position: sticky;
bottom: var(--spacing, 5px);
}
[data-position=static] {
position: static;
}
[data-position=absolute] {
position: absolute;
}
[data-position=absolute-fill] {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
[data-position=relative] {
position: relative;
}
[data-text-align=left] {
text-align: left ;
}
[data-text-align=right] {
text-align: right ;
}
[data-text-align=center] {
text-align: center ;
}
[data-text-align=justify] {
text-align: justify ;
}
[data-text-decoration=underline] {
text-decoration: underline;
}
[data-text-decoration=overline] {
text-decoration: overline;
}
[data-text-decoration=strike-through] {
text-decoration: strike-through;
}
[data-text-decoration=line-through] {
text-decoration: line-through;
}
[data-text-decoration=wavy] {
text-decoration: wavy;
}
[data-text-decoration=none] {
text-decoration: none;
}
[data-text-decoration=inherit] {
text-decoration: inherit;
}
[data-text-decoration=initial] {
text-decoration: initial;
}
[data-text-decoration=revert] {
text-decoration: revert;
}
[data-text-decoration=revert-layer] {
text-decoration: revert-layer;
}
[data-text-decoration=unset] {
text-decoration: unset;
}
[data-text-overflow=ellipsis] {
text-overflow: ellipsis ;
min-width: 0;
flex: 1;
white-space: nowrap;
overflow: hidden;
}
[data-text-transform=none] {
text-transform: none;
}
[data-text-transform=capitalize] {
text-transform: capitalize;
}
[data-text-transform=uppercase] {
text-transform: uppercase;
}
[data-text-transform=lowercase] {
text-transform: lowercase;
}
[data-text-transform=full-width] {
text-transform: full-width;
}
[data-text-transform=full-size-kana] {
text-transform: full-size-kana;
}
[data-text-transform=inherit] {
text-transform: inherit;
}
[data-text-transform=initial] {
text-transform: initial;
}
[data-text-transform=revert] {
text-transform: revert;
}
[data-text-transform=revert-layer] {
text-transform: revert-layer;
}
[data-text-transform=unset] {
text-transform: unset;
}
[data-wrap=none] {
white-space: nowrap ;
}
body [data-popup-window] > [data-window-content] > [data-layout=command-row] {
margin: -7px;
margin-top: 5px;
border-radius: 0;
}