app[name=main] *, html {
user-select: none;
-webkit-user-select: none;
/* @include preset.no-drag; */
-webkit-tap-highlight-color: transparent;
/* content-visibility: auto; */
}
app[name=main] ::-webkit-scrollbar, html::-webkit-scrollbar {
width: var(--scrollbar-size-1);
height: var(--scrollbar-size-1);
}
app[name=main] ::-webkit-scrollbar-track, html::-webkit-scrollbar-track {
background: var(--fade-black-7);
box-shadow: inset 0 0 5px var(--fade-black-7);
}
app[name=main] ::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb {
background: var(--fade-black-6);
}
app[name=main] ::-webkit-scrollbar-thumb:active, html::-webkit-scrollbar-thumb:active {
background: var(--fade-black-5);
}
app[name=main] *:focus {
outline: none;
}
app[name=main] *:target {
background-image: linear-gradient(to right, rgba(106, 238, 193, 0.3764705882), rgba(175, 99, 224, 0.2509803922), rgba(106, 238, 193, 0.3764705882));
}
app[name=main] *:not(:hover):active {
cursor: not-allowed;
pointer-events: none;
}
app[name=main] abbr {
border-bottom: 1px dotted currentColor;
}
app[name=main] hr {
width: 100%;
max-width: -webkit-fill-available;
}
app[name=main] .accordian-group, app[name=main] ul.blocks, app[name=main] ol.blocks {
margin: 0;
padding: 0;
list-style-type: none;
}
app[name=main] .accordian-group > .accordian > .body > *:where(.details, .information, .data) > *, app[name=main] h1, app[name=main] h2, app[name=main] h3, app[name=main] h4, app[name=main] h5, app[name=main] h6, app[name=main] p {
margin: 0;
}
app[name=main] .accordian-group > .accordian > .body > *:where(.details, .information, .data) > :not(:last-child), app[name=main] h1:not(:last-child), app[name=main] h2:not(:last-child), app[name=main] h3:not(:last-child), app[name=main] h4:not(:last-child), app[name=main] h5:not(:last-child), app[name=main] h6:not(:last-child), app[name=main] p:not(:last-child) {
margin: 0 0 10px;
}
app[name=main] .hscroll {
-ms-overflow-style: none !important;
}
app[name=main] .hscroll::-webkit-scrollbar {
display: none !important;
}
app[name=main] .sscroll:hover {
-ms-overflow-style: block !important;
}
app[name=main] .sscroll:hover::-webkit-scrollbar {
display: block !important;
}
app[name=main] .slider {
overflow-x: auto !important; /* overflow-y: auto; */
}
app[name=main] .slider::-webkit-scrollbar {
width: var(--scrollbar-size-2);
height: var(--scrollbar-size-2);
}
app[name=main] .slider::-webkit-scrollbar-track {
background: transparent !important;
box-shadow: none !important;
}
app[name=main] .slider::-webkit-scrollbar-thumb {
background: var(--fade-black-7) !important;
border-radius: calc(var(--scrollbar-size-2) / 2) !important;
/* transition: var(--time-tst-xfast); */
}
app[name=main] .slider::-webkit-scrollbar-thumb:active {
background: var(--fade-black-6) !important;
}
app[name=main] ::-moz-selection {
color: var(--sys-hilight-color-1, initial);
background-color: var(--sys-hilight-color-2, initial);
}
app[name=main] ::selection {
color: var(--sys-hilight-color-1, initial);
background-color: var(--sys-hilight-color-2, initial);
}
app[name=main] [disabled], app[name=main] .disabled {
opacity: 0.75;
filter: opacity(0.75);
pointer-events: none;
}
app[name=main] [hidden], app[name=main] .hidden {
opacity: 0;
filter: opacity(0);
visibility: hidden;
display: none;
}
app[name=main] [left], app[name=main] .left {
margin-right: auto;
padding-right: auto;
justify-content: start;
place-content: start;
align-items: baseline;
align-content: left;
align-self: left;
text-align: left;
vertical-align: baseline;
-webkit-box-align: start;
background-position: center;
}
app[name=main] [center], app[name=main] .center, app[name=main] center {
margin: auto;
padding: auto;
justify-content: center;
place-content: center;
align-items: center;
align-content: center;
align-self: center;
text-align: center;
vertical-align: middle;
-webkit-box-align: center;
background-position: center;
}
app[name=main] [right], app[name=main] .right {
margin-left: auto;
padding-left: auto;
justify-content: end;
place-content: end;
align-items: end;
align-content: right;
align-self: right;
text-align: right;
vertical-align: end;
-webkit-box-align: end;
background-position: left;
}
app[name=main] [no-wrap], app[name=main] .no-wrap {
white-space: nowrap;
flex-wrap: nowrap;
}
app[name=main] [wrap], app[name=main] .wrap {
white-space: wrap;
flex-wrap: wrap;
}
app[name=main] [pre], app[name=main] .pre {
white-space: pre;
}
app[name=main] [pre][wrap], app[name=main] .pre.wrap {
white-space: pre-wrap;
}
app[name=main] .selectable, app[name=main] .selectable * {
user-select: text;
-webkit-user-select: text;
}
app[name=main] .select-all, app[name=main] .select-all *, app[name=main] var {
user-select: all;
-webkit-user-select: all;
}
app[name=main] .txtoe, app[name=main] .accordian-group > .accordian > .head > span.title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
app[name=main] img[src^="/"]:where([src$=".png"], [src$=".jpg"], [src$=".jpeg"], [src$=".gif"]) {
cursor: cell;
}
app[name=main] a img {
cursor: inherit;
}
app[name=main] code, app[name=main] kbd, app[name=main] var, app[name=main] samp {
margin: 1px 0.25px;
padding: 0.25px 1px;
background-color: var(--clr-pp-grey-300);
border: 1.25px solid var(--clr-pp-grey-400);
border-radius: 2.5px;
font-style: normal;
font-family: IBM Plex Mono, Roboto Mono, monospace;
font-weight: normal;
font-size: 90%;
display: inline-block;
}
app[name=main] code[class*=language-], app[name=main] code[class*=language-] * {
user-select: text;
}
app[name=main] code br, app[name=main] code hr {
display: block;
}
app[name=main] [contenteditable] {
caret-color: var(--clr-bs-indigo);
transition: var(--time-tst-medium);
}
app[name=main] [contenteditable]:hover, app[name=main] [contenteditable]:active, app[name=main] [contenteditable]:focus {
background-color: var(--clr-pp-lime-50);
}
app[name=main] [contenteditable]:focus {
box-shadow: 0 0 0 2.5px var(--clr-pp-indigo-100);
}
app[name=main] pre {
padding: 7.5px;
font-family: "IBM Plex Mono", "Roboto Mono", monospace;
font-size: 80%;
}
@media only screen and (max-width: 768px) {
app[name=main] pre {
font-size: 12.5px;
}
}
app[name=main] a[href]:not([role=button]) {
--a-effect: underline;
}
app[name=main] a[href]:not([role=button]):link {
color: var(--sys-link-clr-1);
text-decoration: none;
}
app[name=main] a[href]:not([role=button]):visited {
color: var(--sys-link-clr-2);
text-decoration: none;
}
app[name=main] a[href]:not([role=button]):hover {
color: var(--sys-link-clr-3);
text-decoration: var(--a-effect);
}
app[name=main] a[href]:not([role=button]):active {
color: var(--sys-link-clr-4);
}
app[name=main] a[href]:not([role=button]):focus {
color: var(--sys-link-clr-5);
}
app[name=main] a[href]:not([role=button]).pseudo-blend, app[name=main] a[href].semi-blend:not([role=button]), app[name=main] a[href].blend:not([role=button]), app[name=main] a[href].super-blend:not([role=button]) {
--sys-link-clr-1: currentColor;
--sys-link-clr-2: currentColor;
}
app[name=main] a[href]:not([role=button]).semi-blend, app[name=main] a[href].blend:not([role=button]), app[name=main] a[href].super-blend:not([role=button]) {
--sys-link-clr-3: currentColor;
}
app[name=main] a[href]:not([role=button]).blend, app[name=main] a[href].super-blend:not([role=button]) {
--sys-link-clr-4: currentColor;
--sys-link-clr-5: currentColor;
--a-effect: none;
}
app[name=main] a[href]:not([role=button]).super-blend {
cursor: default;
}
app[name=main] button[class]:not([class=""]), app[name=main] [role=button], app[name=main] input[type=button], app[name=main] input[type=submit], app[name=main] input[type=reset] {
text-decoration: none;
justify-content: center;
align-items: center;
align-self: center;
gap: 5px;
backdrop-filter: blur(5px);
cursor: pointer;
}
app[name=main] button[class]:not([class=""]):not(:where(.primary, .secondary)), app[name=main] [role=button]:not(:where(.primary, .secondary)), app[name=main] input[type=button]:not(:where(.primary, .secondary)), app[name=main] input[type=submit]:not(:where(.primary, .secondary)), app[name=main] input[type=reset]:not(:where(.primary, .secondary)) {
margin: 0;
padding: 2.5px 10px;
border: 1px solid var(--btn-bdc);
border-radius: 0.3rem;
background-color: var(--btn-bgc);
color: var(--btn-ntc);
font-size: inherit;
font-family: var(--sys-button-font-1);
font-weight: 400;
/* line-height: 1.5; */
text-align: center;
vertical-align: middle;
transition: calc(var(--time-tst-xfast) / 2) ease-in-out;
display: flex;
}
app[name=main] button[class]:not([class=""]):not(:where(.primary, .secondary)):hover, app[name=main] [role=button]:not(:where(.primary, .secondary)):hover, app[name=main] input[type=button]:not(:where(.primary, .secondary)):hover, app[name=main] input[type=submit]:not(:where(.primary, .secondary)):hover, app[name=main] input[type=reset]:not(:where(.primary, .secondary)):hover {
background-color: var(--btn-hvc);
border-color: var(--btn-hbd);
}
app[name=main] button[class]:not([class=""]):not(:where(.primary, .secondary)):active, app[name=main] [role=button]:not(:where(.primary, .secondary)):active, app[name=main] input[type=button]:not(:where(.primary, .secondary)):active, app[name=main] input[type=submit]:not(:where(.primary, .secondary)):active, app[name=main] input[type=reset]:not(:where(.primary, .secondary)):active {
background-color: var(--btn-abc);
border-color: var(--btn-abd);
}
app[name=main] button[class]:not([class=""]):not(:where(.primary, .secondary)):focus, app[name=main] [role=button]:not(:where(.primary, .secondary)):focus, app[name=main] input[type=button]:not(:where(.primary, .secondary)):focus, app[name=main] input[type=submit]:not(:where(.primary, .secondary)):focus, app[name=main] input[type=reset]:not(:where(.primary, .secondary)):focus {
background-color: var(--btn-fbc);
border-color: var(--btn-fbd);
box-shadow: 0 0 0 0.25rem var(--btn-fsc);
}
app[name=main] button[class]:not([class=""]):not(:where(.primary, .secondary)).hollow, app[name=main] [role=button]:not(:where(.primary, .secondary)).hollow, app[name=main] input[type=button]:not(:where(.primary, .secondary)).hollow, app[name=main] input[type=submit]:not(:where(.primary, .secondary)).hollow, app[name=main] input[type=reset]:not(:where(.primary, .secondary)).hollow {
background-color: transparent;
border-color: var(--btn-bdc);
color: var(--btn-hvc);
text-shadow: 0 0 0.125px var(--fade-black-4);
}
app[name=main] button[class]:not([class=""]):not(:where(.primary, .secondary)).hollow:hover, app[name=main] [role=button]:not(:where(.primary, .secondary)).hollow:hover, app[name=main] input[type=button]:not(:where(.primary, .secondary)).hollow:hover, app[name=main] input[type=submit]:not(:where(.primary, .secondary)).hollow:hover, app[name=main] input[type=reset]:not(:where(.primary, .secondary)).hollow:hover {
background-color: var(--btn-hbc);
}
app[name=main] button[class]:not([class=""]):not(:where(.primary, .secondary)).hollow:active, app[name=main] [role=button]:not(:where(.primary, .secondary)).hollow:active, app[name=main] input[type=button]:not(:where(.primary, .secondary)).hollow:active, app[name=main] input[type=submit]:not(:where(.primary, .secondary)).hollow:active, app[name=main] input[type=reset]:not(:where(.primary, .secondary)).hollow:active {
color: var(--btn-abd);
}
app[name=main] button[class]:not([class=""]):not(:where(.primary, .secondary)).hollow:not(.bare.ripple-click):focus, app[name=main] [role=button]:not(:where(.primary, .secondary)).hollow:not(.bare.ripple-click):focus, app[name=main] input[type=button]:not(:where(.primary, .secondary)).hollow:not(.bare.ripple-click):focus, app[name=main] input[type=submit]:not(:where(.primary, .secondary)).hollow:not(.bare.ripple-click):focus, app[name=main] input[type=reset]:not(:where(.primary, .secondary)).hollow:not(.bare.ripple-click):focus {
box-shadow: 0 0 0 0.2rem var(--btn-fsc);
}
app[name=main] button[class]:not([class=""]).primary, app[name=main] [role=button].primary, app[name=main] input[type=button].primary, app[name=main] input[type=submit].primary, app[name=main] input[type=reset].primary {
padding: 6.25px 12.5px;
box-shadow: 0 2px 1px -1px rgba(103, 58, 183, 0.2), 0 1px 1px 0 rgba(103, 58, 183, 0.1411764706), 0 1px 3px 0 rgba(103, 58, 183, 0.1215686275);
border-radius: 5px;
border: 0.5px solid var(--sys-button-color-1);
font-size: inherit;
font-family: var(--sys-button-font-2);
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
transition: var(--time-tst-xfast);
overflow: hidden;
color: var(--sys-button-text-1);
background-color: var(--sys-button-color-1);
}
app[name=main] button[class]:not([class=""]).primary:hover, app[name=main] [role=button].primary:hover, app[name=main] input[type=button].primary:hover, app[name=main] input[type=submit].primary:hover, app[name=main] input[type=reset].primary:hover {
background-color: var(--sys-button-color-2);
border-color: var(--sys-button-color-2);
}
app[name=main] button[class]:not([class=""]).secondary, app[name=main] [role=button].secondary, app[name=main] input[type=button].secondary, app[name=main] input[type=submit].secondary, app[name=main] input[type=reset].secondary {
padding: 6.25px 12.5px;
box-shadow: 0 2px 1px -1px rgba(103, 58, 183, 0.2), 0 1px 1px 0 rgba(103, 58, 183, 0.1411764706), 0 1px 3px 0 rgba(103, 58, 183, 0.1215686275);
border-radius: 5px;
border: 0.5px solid var(--sys-button-color-1);
font-size: inherit;
font-family: var(--sys-button-font-2);
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
transition: var(--time-tst-xfast);
overflow: hidden;
color: var(--sys-button-text-2);
}
app[name=main] button[class]:not([class=""]).secondary:hover, app[name=main] [role=button].secondary:hover, app[name=main] input[type=button].secondary:hover, app[name=main] input[type=submit].secondary:hover, app[name=main] input[type=reset].secondary:hover {
background-color: var(--sys-button-color-3);
}
app[name=main] button[class]:not([class=""]).bare, app[name=main] [role=button].bare, app[name=main] input[type=button].bare, app[name=main] input[type=submit].bare, app[name=main] input[type=reset].bare {
background-color: transparent;
border: none !important;
color: #555555;
justify-content: center;
align-items: center;
backdrop-filter: none;
}
app[name=main] button[class]:not([class=""]).bare:hover, app[name=main] [role=button].bare:hover, app[name=main] input[type=button].bare:hover, app[name=main] input[type=submit].bare:hover, app[name=main] input[type=reset].bare:hover {
background-color: var(--fade-black-8);
}
app[name=main] button[class]:not([class=""]).bare:active, app[name=main] [role=button].bare:active, app[name=main] input[type=button].bare:active, app[name=main] input[type=submit].bare:active, app[name=main] input[type=reset].bare:active {
color: var(--btn-hvc);
}
app[name=main] button[class]:not([class=""]).bare:focus, app[name=main] [role=button].bare:focus, app[name=main] input[type=button].bare:focus, app[name=main] input[type=submit].bare:focus, app[name=main] input[type=reset].bare:focus {
box-shadow: 0 0 0 0.2rem var(--btn-fsc);
}
app[name=main] button[class]:not([class=""]).round, app[name=main] [role=button].round, app[name=main] input[type=button].round, app[name=main] input[type=submit].round, app[name=main] input[type=reset].round {
width: 24px;
height: 24px;
}
app[name=main] button[class]:not([class=""]).full-x, app[name=main] [role=button].full-x, app[name=main] input[type=button].full-x, app[name=main] input[type=submit].full-x, app[name=main] input[type=reset].full-x {
width: 100%;
box-sizing: border-box;
}
app[name=main] button[class]:not([class=""]).icon, app[name=main] [role=button].icon, app[name=main] input[type=button].icon, app[name=main] input[type=submit].icon, app[name=main] input[type=reset].icon {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
app[name=main] button[class]:not([class=""]).icon:not(.long):not(.action), app[name=main] [role=button].icon:not(.long):not(.action), app[name=main] input[type=button].icon:not(.long):not(.action), app[name=main] input[type=submit].icon:not(.long):not(.action), app[name=main] input[type=reset].icon:not(.long):not(.action) {
padding: 7.5px !important;
}
app[name=main] button[class]:not([class=""]).long, app[name=main] [role=button].long, app[name=main] input[type=button].long, app[name=main] input[type=submit].long, app[name=main] input[type=reset].long {
justify-content: flex-start;
}
app[name=main] button[class]:not([class=""]).pill, app[name=main] [role=button].pill, app[name=main] input[type=button].pill, app[name=main] input[type=submit].pill, app[name=main] input[type=reset].pill {
border-radius: 100em;
}
app[name=main] button[class]:not([class=""]).wrap, app[name=main] [role=button].wrap, app[name=main] input[type=button].wrap, app[name=main] input[type=submit].wrap, app[name=main] input[type=reset].wrap {
text-overflow: clip;
white-space: normal;
}
app[name=main] button[class]:not([class=""]).action, app[name=main] [role=button].action, app[name=main] input[type=button].action, app[name=main] input[type=submit].action, app[name=main] input[type=reset].action {
padding: 7.5px;
font-family: "Roboto", serif;
font-weight: bold;
}
app[name=main] button[class]:not([class=""]).action.small, app[name=main] [role=button].action.small, app[name=main] input[type=button].action.small, app[name=main] input[type=submit].action.small, app[name=main] input[type=reset].action.small {
padding: 0.5px 3.5px;
}
app[name=main] button[class]:not([class=""]).action.large, app[name=main] [role=button].action.large, app[name=main] input[type=button].action.large, app[name=main] input[type=submit].action.large, app[name=main] input[type=reset].action.large {
padding: 12.5px;
}
app[name=main] button[class]:not([class=""]).wide, app[name=main] [role=button].wide, app[name=main] input[type=button].wide, app[name=main] input[type=submit].wide, app[name=main] input[type=reset].wide {
padding-left: 1em;
padding-right: 1em;
}
app[name=main] button[class]:not([class=""]).wider, app[name=main] [role=button].wider, app[name=main] input[type=button].wider, app[name=main] input[type=submit].wider, app[name=main] input[type=reset].wider {
padding-left: 1em;
padding-right: 1em;
}
app[name=main] button[class]:not([class=""]).xwide, app[name=main] [role=button].xwide, app[name=main] input[type=button].xwide, app[name=main] input[type=submit].xwide, app[name=main] input[type=reset].xwide {
padding-left: 40px;
padding-right: 40px;
}
app[name=main] button[class]:not([class=""]).swide, app[name=main] [role=button].swide, app[name=main] input[type=button].swide, app[name=main] input[type=submit].swide, app[name=main] input[type=reset].swide {
padding-left: 75px;
padding-right: 75px;
}
app[name=main] button[class]:not([class=""]).fwide, app[name=main] [role=button].fwide, app[name=main] input[type=button].fwide, app[name=main] input[type=submit].fwide, app[name=main] input[type=reset].fwide {
padding-left: 100px;
padding-right: 100px;
}
app[name=main] button[class]:not([class=""]).tiny, app[name=main] [role=button].tiny, app[name=main] input[type=button].tiny, app[name=main] input[type=submit].tiny, app[name=main] input[type=reset].tiny {
padding: 0 5px;
height: 25px;
font-size: 0.5em;
line-height: 24px;
}
app[name=main] button[class]:not([class=""]).small, app[name=main] [role=button].small, app[name=main] input[type=button].small, app[name=main] input[type=submit].small, app[name=main] input[type=reset].small {
padding: 0.5px 7.5px;
height: 30px;
font-size: 0.75em;
}
app[name=main] button[class]:not([class=""]).med, app[name=main] button[class]:not([class=""]).medium, app[name=main] [role=button].med, app[name=main] [role=button].medium, app[name=main] input[type=button].med, app[name=main] input[type=button].medium, app[name=main] input[type=submit].med, app[name=main] input[type=submit].medium, app[name=main] input[type=reset].med, app[name=main] input[type=reset].medium {
font-size: 0.9em;
}
app[name=main] button[class]:not([class=""]).large, app[name=main] [role=button].large, app[name=main] input[type=button].large, app[name=main] input[type=submit].large, app[name=main] input[type=reset].large {
padding: 5px 12.5px;
font-size: 1.2em;
}
@media only screen and (max-width: 768px) {
app[name=main] button[class]:not([class=""]), app[name=main] [role=button], app[name=main] input[type=button], app[name=main] input[type=submit], app[name=main] input[type=reset] {
padding: 0.75px 7.5px;
font-size: inherit;
}
app[name=main] button[class]:not([class=""]).tiny, app[name=main] [role=button].tiny, app[name=main] input[type=button].tiny, app[name=main] input[type=submit].tiny, app[name=main] input[type=reset].tiny {
line-height: 20.5px;
}
}
app[name=main] a[role=button] {
display: inline-flex !important;
}
app[name=main] .chip-status, app[name=main] .chip-tag {
margin: 0;
padding: 2.5px 10px;
border: 1px solid var(--btn-bdc);
border-radius: 0.3rem;
background-color: var(--btn-bgc);
color: var(--btn-ntc);
font-size: inherit;
font-family: var(--sys-button-font-1);
font-weight: 400;
/* line-height: 1.5; */
text-align: center;
vertical-align: middle;
transition: calc(var(--time-tst-xfast) / 2) ease-in-out;
margin: 0;
padding: 2.5px 10px;
border: 1px solid var(--btn-bdc);
border-radius: 0.3rem;
background-color: var(--btn-bgc);
color: var(--btn-ntc);
font-size: inherit;
font-family: var(--sys-button-font-1);
font-weight: 400;
/* line-height: 1.5; */
text-align: center;
vertical-align: middle;
transition: calc(var(--time-tst-xfast) / 2) ease-in-out;
display: inline-flex;
justify-content: center;
align-items: center;
align-self: center;
gap: 5px;
backdrop-filter: blur(5px);
}
app[name=main] .chip-status.full-x, app[name=main] .full-x.chip-tag {
width: 100%;
box-sizing: border-box;
}
app[name=main] .chip-status.icon, app[name=main] .icon.chip-tag {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
app[name=main] .chip-status.icon:not(.long):not(.action), app[name=main] .icon.chip-tag:not(.long):not(.action) {
padding: 7.5px !important;
}
app[name=main] .chip-status.long, app[name=main] .long.chip-tag {
justify-content: flex-start;
}
app[name=main] .chip-status.pill, app[name=main] .pill.chip-tag {
border-radius: 100em;
}
app[name=main] .chip-status.wrap, app[name=main] .wrap.chip-tag {
text-overflow: clip;
white-space: normal;
}
app[name=main] .chip-status.action, app[name=main] .action.chip-tag {
padding: 7.5px;
font-family: "Roboto", serif;
font-weight: bold;
}
app[name=main] .chip-status.action.small, app[name=main] .action.small.chip-tag {
padding: 0.5px 3.5px;
}
app[name=main] .chip-status.action.large, app[name=main] .action.large.chip-tag {
padding: 12.5px;
}
app[name=main] .chip-status.wide, app[name=main] .wide.chip-tag {
padding-left: 1em;
padding-right: 1em;
}
app[name=main] .chip-status.wider, app[name=main] .wider.chip-tag {
padding-left: 1em;
padding-right: 1em;
}
app[name=main] .chip-status.xwide, app[name=main] .xwide.chip-tag {
padding-left: 40px;
padding-right: 40px;
}
app[name=main] .chip-status.swide, app[name=main] .swide.chip-tag {
padding-left: 75px;
padding-right: 75px;
}
app[name=main] .chip-status.fwide, app[name=main] .fwide.chip-tag {
padding-left: 100px;
padding-right: 100px;
}
app[name=main] .chip-status.tiny, app[name=main] .tiny.chip-tag {
padding: 0 5px;
height: 25px;
font-size: 0.5em;
line-height: 24px;
}
app[name=main] .chip-status.small, app[name=main] .small.chip-tag {
padding: 0.5px 7.5px;
height: 30px;
font-size: 0.75em;
}
app[name=main] .chip-status.med, app[name=main] .med.chip-tag, app[name=main] .chip-status.medium, app[name=main] .medium.chip-tag {
font-size: 0.9em;
}
app[name=main] .chip-status.large, app[name=main] .large.chip-tag {
padding: 5px 12.5px;
font-size: 1.2em;
}
@media only screen and (max-width: 768px) {
app[name=main] .chip-status, app[name=main] .chip-tag {
padding: 0.75px 7.5px;
font-size: inherit;
}
app[name=main] .chip-status.tiny, app[name=main] .tiny.chip-tag {
line-height: 20.5px;
}
}
app[name=main] .chip-status.light, app[name=main] .light.chip-tag {
background-color: transparent;
border-color: var(--btn-bdc);
color: var(--btn-hvc);
text-shadow: 0 0 0.125px var(--fade-black-4);
}
app[name=main] .chip-status.hollow, app[name=main] .hollow.chip-tag {
background-color: transparent;
border-color: var(--btn-bdc);
color: var(--btn-hvc);
text-shadow: 0 0 0.125px var(--fade-black-4);
}
app[name=main] .chip-status.icon, app[name=main] .icon.chip-tag {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
app[name=main] .chip-status.wrap, app[name=main] .wrap.chip-tag {
text-overflow: clip;
white-space: normal;
}
@media only screen and (max-width: 768px) {
app[name=main] .chip-status, app[name=main] .chip-tag {
padding: 0.75px 7.5px;
font-size: inherit;
}
}
app[name=main] .chip-tag {
border-radius: 100em;
}
app[name=main] .chip-msg, app[name=main] .chip-tag.pastel, app[name=main] .chip-status.pastel {
color: var(--msg-ctc);
background-color: var(--bg-lght);
border-width: 0;
}
app[name=main] blockquote, app[name=main] .message {
padding: 1rem;
border-radius: 0.25rem;
}
app[name=main] .message {
background-color: var(--msg-bgc);
color: var(--msg-ctc);
border: 1px solid var(--msg-bdc);
}
app[name=main] blockquote {
margin: 10px 0 10px 1rem;
background-color: var(--clr-gg-grey-300);
}
app[name=main] blockquote.tab-line {
margin-left: 0;
border-left: 5px solid var(--btn-fbc, currentColor);
}
app[name=main] blockquote.tab-line.unblock, app[name=main] blockquote.tab-line.embed {
margin: 5px 0;
border-radius: 0 0.25rem 0.25rem 0;
border-width: 3px;
background-color: transparent;
}
app[name=main] blockquote.translucent {
background-color: var(--fade-white-6) !important;
}
app[name=main] details.card[open] > summary:first-of-type {
margin-bottom: 1rem;
padding-bottom: 0.5em;
border-bottom: 1px solid var(--msg-bdc);
}
app[name=main] details > summary:first-of-type {
margin: -0.5em -0.5em 0;
padding: 0.5em 0.5em 0;
/* list-style-type: none; */
cursor: pointer;
}
app[name=main] .ripple-click {
--ease-bez: cubic-bezier(.25, .25, .05, 1) /* modded easeInQuintOutCirc */;
position: relative;
overflow: hidden !important;
}
app[name=main] .ripple-click:active .ripple-effect {
transform: translate(calc(var(--rpc-x) - 50%), calc(var(--rpc-y) - 50%)) scale(1);
animation: ripple_fade_in var(--time-tst-fslow) var(--ease-bez) 1;
transition: none !important;
}
app[name=main] .ripple-click.ripple-done .ripple-effect {
/* animation: ripple_fade_out var(--time-tst-fast) linear 1; */
transition: none !important;
}
app[name=main] .ripple-click .ripple-effect {
position: absolute;
top: 0;
left: 0;
transform: translate(calc(var(--rpc-x) - 50%), calc(var(--rpc-y) - 50%)) scale(0);
width: var(--rpc-s);
height: var(--rpc-s);
background-color: currentColor;
filter: opacity(0);
border-radius: calc(var(--rpc-s) / 2);
display: block !important;
pointer-events: none;
transition: width var(--time-tst-fast) var(--ease-bez), height var(--time-tst-fast) var(--ease-bez);
}
@keyframes ripple_fade_in {
0% {
transform: translate(calc(var(--rpc-x) - 50%), calc(var(--rpc-y) - 50%)) scale(0);
filter: opacity(0.15);
}
1% { /* .05s */
transform: translate(calc(var(--rpc-x) - 50%), calc(var(--rpc-y) - 50%)) scale(0);
filter: opacity(0.15);
}
30% {
filter: opacity(0.15);
}
70% {
transform: translate(calc(var(--rpc-x) - 50%), calc(var(--rpc-y) - 50%)) scale(1);
}
100% {
filter: opacity(0);
}
}
@keyframes ripple_fade_out {
from {
/* @include preset.obj-vis; */
filter: opacity(0.15);
visibility: visible;
transform: translate(calc(var(--rpc-x) - 50%), calc(var(--rpc-y) - 50%)) scale(1);
}
to {
opacity: 0;
filter: opacity(0);
visibility: hidden;
transform: translate(calc(var(--rpc-x) - 50%), calc(var(--rpc-y) - 50%)) scale(1);
}
}
app[name=main] .table {
overflow-x: auto;
}
app[name=main] .table.striped tr:nth-of-type(3n), app[name=main] .table.stripes tr:nth-of-type(3n) {
background-color: rgba(0, 0, 0, 0.0196078431);
}
app[name=main] .table.striped-2 tr:nth-of-type(2n), app[name=main] .table.stripes-2 tr:nth-of-type(2n) {
background-color: rgba(0, 0, 0, 0.0274509804);
}
app[name=main] .table.striped-3 tr:nth-of-type(3n), app[name=main] .table.stripes-3 tr:nth-of-type(3n) {
background-color: rgba(0, 0, 0, 0.0274509804);
}
app[name=main] .table.striped-4 tr:nth-of-type(4n), app[name=main] .table.stripes-4 tr:nth-of-type(4n) {
background-color: rgba(0, 0, 0, 0.0274509804);
}
app[name=main] .table.striped-5 tr:nth-of-type(5n), app[name=main] .table.stripes-5 tr:nth-of-type(5n) {
background-color: rgba(0, 0, 0, 0.0274509804);
}
app[name=main] .table > table {
min-width: 100%;
/* white-space: pre; */
border-spacing: 0;
border-collapse: collapse;
box-sizing: border-box;
}
app[name=main] .table > table thead.responsive th[onClick]:hover {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.062745098));
}
app[name=main] .table > table thead.responsive th[onClick]:active {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.062745098));
}
app[name=main] .table > table tbody.responsive > tr:hover {
background-color: var(--fade-black-8);
}
app[name=main] .table.responsive > table > thead th[onClick]:hover {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.062745098));
}
app[name=main] .table.responsive > table > thead th[onClick]:active {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.062745098));
}
app[name=main] .table.responsive > table > tbody > tr:hover {
background-color: var(--fade-black-8);
}
app[name=main] .table.responsive.res-col > table > colgroup > col:hover:hover {
background-color: var(--fade-black-8);
}
app[name=main] .table.static {
width: calc(100% - 2px);
border: 1.25px solid var(--clr-gg-grey-700);
}
app[name=main] .table.static > table > thead {
background-color: rgba(0, 0, 0, 0.0549019608);
border-bottom: 2px solid var(--clr-gg-grey-300);
}
app[name=main] .table.static > table > thead th[onClick]:hover {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.062745098));
}
app[name=main] .table.static > table > thead th[onClick]:active {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.062745098));
}
app[name=main] .table.static > table > tbody {
border-top: 1.025px solid var(--clr-gg-grey-500);
}
app[name=main] .table.static > table > tfoot {
border-top: 1.025px solid var(--clr-gg-grey-700);
}
app[name=main] .table.static > table th, app[name=main] .table.static > table td {
padding: 2.5px 5px;
border: 0.5px solid var(--clr-gg-grey-300);
}
app[name=main] .table.static > table th:first-child, app[name=main] .table.static > table td:first-child {
border-left: none;
}
app[name=main] .table.static > table th:last-child, app[name=main] .table.static > table td:last-child {
border-right: none;
}
app[name=main] .table.static > table tr:first-child :where(th, td) {
border-top: none;
}
app[name=main] .table.static > table tr:last-child :where(th, td) {
border-bottom: none;
}
app[name=main] .table.static.extend > table :last-child tr:last-child td {
border-bottom: 0.75px solid var(--clr-gg-grey-700);
}
app[name=main] .table.static.no-bdr :where(th, td) {
border: none;
}
app[name=main] .table > :last-child {
margin-bottom: 2px;
}
app[name=main] .table.list {
--bdr-clr: #DEE2E6;
--bdr-cmn: 1px solid var(--bdr-clr);
width: 100%;
/* border: 1px solid var(--bdr-clr); */
}
app[name=main] .table.list > table > :not(:first-child) {
border-top: 2px solid var(--clr-pp-grey-600);
}
app[name=main] .table.list > table > tfoot {
border-top: 2px solid var(--clr-pp-grey-700) !important;
}
app[name=main] .table.list > table tr > * {
padding: 0.225rem;
border-width: 0 1px;
border: var(--bdr-cmn);
}
app[name=main] .table.list.no-bdr tr > * {
border: none;
}
app[name=main] .table.list.no-bdr tr:first-child > * {
border-top: var(--bdr-cmn);
}
app[name=main] .table.list.no-bdr tr:last-child > * {
border-bottom: var(--bdr-cmn);
}
app[name=main] .table.list.no-bdr tr > *:first-child {
border-left: var(--bdr-cmn);
}
app[name=main] .table.list.no-bdr tr > *:last-child {
border-right: var(--bdr-cmn);
}
app[name=main] .table.invis, app[name=main] .table.invisible, app[name=main] .table.positioning {
width: 100%;
}
app[name=main] .table.invis > table, app[name=main] .table.invisible > table, app[name=main] .table.positioning > table {
min-width: 100%;
}
app[name=main] .table.invis > table th, app[name=main] .table.invis > table td, app[name=main] .table.invisible > table th, app[name=main] .table.invisible > table td, app[name=main] .table.positioning > table th, app[name=main] .table.positioning > table td {
padding: 5px;
}
app[name=main] .table.col-merge > table th, app[name=main] .table.col-merge > table td, app[name=main] .table.clear-col > table th, app[name=main] .table.clear-col > table td, app[name=main] .table.clean-col > table th, app[name=main] .table.clean-col > table td {
padding: 0.225rem 0.4rem;
border-left: none;
border-right: none;
}
app[name=main] .table.compact {
width: 100%;
border: none;
}
app[name=main] .table.compact > :last-child {
margin-bottom: 4px;
}
app[name=main] .table.compact > table {
/* border-collapse: separate !important; border-spacing: 1px !important; */
}
app[name=main] .table.compact > table th, app[name=main] .table.compact > table td {
padding: 0 1.5px;
border: none;
}
app[name=main] .table.wrap {
white-space: pre-wrap;
overflow-x: initial;
}
app[name=main] .table.fit {
width: auto;
}
app[name=main] [data-title]:not([data-title=""]) {
--tt-border: 1px solid var(--clr-bs-light);
position: relative;
}
app[name=main] [data-title]:not([data-title=""])::before, app[name=main] [data-title]:not([data-title=""])::after {
opacity: 0;
filter: opacity(0);
visibility: hidden;
position: absolute;
left: 50%;
height: 10px;
background-color: var(--clr-bs-dark);
color: var(--clr-bs-light);
white-space: nowrap;
font-size: 12.5px;
line-height: 10px;
font-family: var(--sys-tooltip-font);
display: block;
pointer-events: none;
transition: opacity var(--time-tst-ffast), filter var(--time-tst-ffast);
}
app[name=main] [data-title]:not([data-title=""])::before {
padding: 7.5px;
top: -6.5px;
transform: translate(-50%, -100%);
max-width: calc(100vw - 20px);
height: auto;
max-height: 10rem;
border-radius: 5px;
border: var(--tt-border);
box-shadow: 0 0 2.5px 2.5px rgba(127, 127, 127, 0.3764705882);
white-space: pre;
line-height: 1.1;
content: attr(data-title);
overflow-x: hidden;
overflow-y: auto;
text-overflow: ellipsis;
}
@media only screen and (max-width: 768px) {
app[name=main] [data-title]:not([data-title=""])::before {
transform: translateX(calc(-50% - 7.5px));
}
}
app[name=main] [data-title]:not([data-title=""])::after {
top: -12.5px;
transform: translateX(-50%) rotate(45deg);
width: 10px;
border-right: var(--tt-border);
border-bottom: var(--tt-border);
box-shadow: 2.25px 2.25px 0.25px 0.75px rgba(127, 127, 127, 0.0941176471);
content: "";
}
@media only screen and (max-width: 768px) {
app[name=main] [data-title]:not([data-title=""])::after {
transform: translateX(calc(-50% - 7.5px)) rotate(45deg);
}
}
app[name=main] [data-title]:not([data-title=""]):hover::before, app[name=main] [data-title]:not([data-title=""]):hover::after, app[name=main] [data-title]:not([data-title=""]):active::before, app[name=main] [data-title]:not([data-title=""]):active::after {
opacity: 1;
filter: opacity(1);
visibility: visible;
transition: opacity 0s, filter 0s;
}
app[name=main] .suggest-wave {
backdrop-filter: url();
}
app[name=main] .suggest-wave::before, app[name=main] .suggest-wave::after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
content: "";
pointer-events: none;
animation: suggest_click_wave 2s ease-out infinite;
}
app[name=main] .suggest-wave::before {
animation-delay: 1.3s;
}
app[name=main] .suggest-wave::after {
animation-delay: 0.8s;
}
@keyframes suggest_click_wave {
0% {
transform: scale(1);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), inset 0 0 1px rgba(0, 0, 0, 0.3);
}
95% {
box-shadow: 0 0 50px rgba(0, 0, 0, 0), inset 0 0 30px rgba(0, 0, 0, 0);
}
100% {
transform: scale(2.25);
}
}
app[name=main] .suggest-pulse::before, app[name=main] .suggest-pulse::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--clr-main-black-absolute);
border-radius: 50%;
display: inline-block;
content: "";
z-index: -1;
pointer-events: none;
animation: suggest_click_pulse 2s infinite;
}
app[name=main] .suggest-pulse::after {
animation-delay: 0.54s;
}
@keyframes suggest_click_pulse {
from {
transform: scale(1);
}
25% {
opacity: 0.4;
}
to {
transform: scale(1.5);
opacity: 0;
}
}
app[name=main] .refresh:where([disabled], .disabled) :where(i.material-icons, span.material-symbols-rounded, i.fa) {
animation: refreshing_icon_rotate 1.5s ease-in-out infinite;
}
app[name=main] .refresh :where(i.material-icons, span.material-symbols-rounded, i.fa) {
transform: rotate(135deg);
}
@keyframes refreshing_icon_rotate {
from {
transform: rotate(135deg);
}
to {
transform: rotate(-225deg);
}
}
app[name=main] .loading {
--size: 25px;
margin: 5px;
width: var(--size);
height: var(--size);
background-size: contain;
background-image: url("https://cdn.TianTcl.net/static/img/widget/loading-001.gif");
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
app[name=main] .loading.tiny {
--size: 12.5px;
}
app[name=main] .loading.small {
--size: 20px;
}
app[name=main] .loading.medium {
--size: 35px;
}
app[name=main] .loading.large {
--size: 50px;
}
app[name=main] .loading.huge {
--size: 75px;
}
app[name=main] .bg-fade-dark {
background-color: var(--fade-black-3);
}
app[name=main] .bg-fade-light {
background-color: var(--fade-white-3);
}
app[name=main] .bg-rainbow {
background-image: conic-gradient(from 180deg at 50% 50%, rgba(36, 209, 101, 0.0901960784) 0deg, rgba(226, 214, 54, 0.0901960784) 55.3deg, rgba(254, 108, 91, 0.0901960784) 120deg, rgba(204, 60, 203, 0.0901960784) 165deg, rgba(159, 51, 253, 0.0901960784) 213.75deg, rgba(24, 117, 243, 0.0901960784) 288.12deg, rgba(22, 119, 240, 0.0901960784) 320deg, rgba(36, 209, 101, 0.0901960784) 360deg);
}
app[name=main] .bg-rainbow-img {
background-image: url("https://cdn.TianTcl.net/static/img/bg/rainbow-001.svg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
app[name=main] progress {
--height: 20px;
width: 100%;
height: var(--height);
}
app[name=main] progress.tiny {
--height: 10px;
}
app[name=main] progress.small {
--height: 15px;
}
app[name=main] progress.large {
--height: 30px;
}
app[name=main] progress.huge {
--height: 35px;
}
app[name=main] progress.decor {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
overflow: hidden;
}
app[name=main] progress.decor, app[name=main] progress.decor::-webkit-progress-bar {
border-radius: calc(var(--height) / 2);
background-color: var(--msg-bgc, --clr-pp-grey-200, initial);
}
app[name=main] progress.decor::-webkit-progress-value, app[name=main] progress.decor::-moz-progress-bar {
border-radius: calc(var(--height) / 2);
background-color: var(--btn-abc, --clr-bs-blue, initial);
transition: var(--time-tst-fast) linear;
}
app[name=main] progress.decor.stripes::-webkit-progress-value, app[name=main] progress.decor.stripes::-moz-progress-bar {
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
animation: progress-bar-stripes 1s linear infinite;
}
@keyframes progress-bar-stripes {
from {
background-position: 0 0;
}
to {
background-position: 1rem 0;
}
}
app[name=main] .accordian-group {
/* &:is(ul), &:is(ol) {*/ /*}*/
}
app[name=main] .accordian-group > .accordian {
--li-trans: var(--time-tst-fast) cubic-bezier(0.65, 0, 0.35, 1) /* easeInOutCubic */;
--li-shad: 0 1px 2px 0 #3C40434D, 0 2px 6px 2px #3C404326;
--li-bdr: 1px solid;
--li-resp: #D7F7EB;
border-top: var(--li-bdr) var(--clr-pp-grey-300);
overflow: hidden;
transition: margin var(--li-trans);
}
app[name=main] .accordian-group > .accordian[open] {
border-radius: 0.5rem;
box-shadow: var(--li-shad);
backdrop-filter: blur(5px);
margin-top: 10px;
background-color: var(--fade-white-8);
border-color: transparent;
display: list-item !important;
}
app[name=main] .accordian-group > .accordian[open] + .accordian:not([style*="display: none;"]):not([hidden]) {
margin-top: 10px;
border-top: var(--li-bdr) transparent;
}
app[name=main] .accordian-group > .accordian[open] > .head:hover {
background-color: var(--li-resp);
}
app[name=main] .accordian-group > .accordian[open] > .body {
height: auto;
}
app[name=main] .accordian-group > .accordian:not([open]):hover {
border-radius: 0.5rem;
box-shadow: var(--li-shad);
backdrop-filter: blur(5px);
border-top: var(--li-bdr) transparent;
background-color: var(--fade-white-6);
}
app[name=main] .accordian-group > .accordian:not([open]):hover + .accordian:not([style*="display: none;"]):not([hidden]) {
border-top: var(--li-bdr) transparent;
}
app[name=main] .accordian-group > .accordian > .head {
padding: 5px 10px;
height: 30px;
line-height: 30px;
cursor: pointer;
transition: var(--time-tst-fast);
}
app[name=main] .accordian-group > .accordian > .head > span.title {
display: block;
}
app[name=main] .accordian-group > .accordian > .body {
height: 0;
}
app[name=main] .accordian-group > .accordian > .body > * {
padding: 10px;
border-top: var(--li-bdr) var(--clr-pp-grey-300);
}
app[name=main] .accordian-group > .accordian > .body > *:where(.details, .information, .data) {
font-size: 0.85em;
}
/*# sourceMappingURL=map/appobj.css.map */