@social-mail/social-mail-hosted-web 1.0.2

package/node_modules/@web-atoms/data-styles/data-styles.css

@@ -0,0 +1,3323 @@
+[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, #A0A0A010);
+                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, #A0A0A010);
+                    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=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=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, #A0A0A010);
+            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, #A0A0A010);
+                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, #A0A0A010);
+            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, #A0A0A010);
+                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, #A0A0A010);
+                    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, #A0A0A010);
+                        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 undefined;
+            border-radius: 9999px;
+            text-decoration: none;
+            
+            
+        
+}
+[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 undefined;
+            border-radius: 9999px;
+            text-decoration: none;
+            
+            
+        
+}
+[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(--accent-color, blue);
+            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(--accent-color, blue);
+            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(--stop-color, red);
+            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(--stop-color, red);
+            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(--go-color, green);
+            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(--go-color, green);
+            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(--accept-color, blue);
+            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(--accept-color, blue);
+            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(--warning-color, #FFC107);
+            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(--warning-color, #FFC107);
+            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(--reject-color, red);
+            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(--reject-color, red);
+            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 undefined;
+            border-radius: 9999px;
+            text-decoration: none;
+            
+            
+        
+}
+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 undefined;
+            border-radius: 9999px;
+            text-decoration: none;
+            
+            
+        
+}
+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(--accent-color, blue);
+            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(--accent-color, blue);
+            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(--stop-color, red);
+            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(--stop-color, red);
+            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(--go-color, green);
+            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(--go-color, green);
+            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(--accept-color, blue);
+            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(--accept-color, blue);
+            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(--warning-color, #FFC107);
+            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(--warning-color, #FFC107);
+            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(--reject-color, red);
+            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(--reject-color, red);
+            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: 10;
+                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 ;
+}