table{
    border-collapse:collapse;
    border-spacing:0
}
td,th{
    position:relative;
    text-align:left
}
th{
    vertical-align:top
}
a{
    cursor:pointer
}
s,u{
    text-decoration:none
}
h1,h2,h3,h4,h5,h6,ol,ul,p,form{
    margin:0
}
hr{
    opacity:.3
}
input{
    position:relative
}
input[type=submit],input[type=button],select{
    font-size:10pt;
    padding:5px 10px 3px 10px;
    border-radius:16px;
    color:#555;
    font-weight:bold;
    border-width:2px;
    border-style:solid;
    border-color:#AAA #DDD #DDD #AAA;
    box-shadow:0px 1px 3px rgba(0,0,0,.5),inset 0px 0px 2px rgba(255,255,255,1);
    text-shadow:0px -1px 0px rgba(000,000,000,0.2),0px 1px 0px rgba(255,255,255,1);
    cursor:pointer;
    background:linear-gradient(to bottom,#ffffff 0%,#ebebeb 50%,#dbdbdb 50%,#b5b5b5);
    transition:all .5s
}
input[type='button']:hover{
    color:#0000FF;
    border-color:#0000FF
}
input[type='submit' i]:hover,input[value='ok' i]:hover,input[value~='save' i]:hover,input[value~='accept' i]:hover{
    color:#008000;
    border-color:#008000
}
input[value~='delete' i]:hover,input[value~='resign' i]:hover,input[value~='refuse' i]:hover{
    color:#CC0000;
    border-color:#FF0000;
}
input[value~='cancel' i]:hover{
    color:orange;
    border-color:orange;
}
input[type='text'],input[type='email'],input[type='password'],select,textarea{
    display:block;
    padding:2px 0 2px 8px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.5)
}
input[type='text'],input[type='email'],input[type='password'],input[type='date'],input[type='datetime-local']{
    padding:5px 0 5px 12px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.5)
}
input[type='checkbox'],input[type='radio']{
    cursor:pointer
}
input[type='text']:invalid,input[type='email']:invalid,input[type='password']:invalid{
    background:rgba(255,0,0,.1);
    border:1px solid red
}
input:disabled,textarea:disabled{
    background-color:rgba(255,255,255,.5);
    color:gray;
    border:1px solid gray;
    cursor:not-allowed
}
input:disabled:hover,textarea:disabled:hover{
    background-color:rgba(255,255,255,1);
}
select:disabled{
    color:#000;
    opacity:.5
}
select:disabled:hover{
    color:gray;
    border-color:gray
}
em:has(input){
    position:relative;
    display:inline-block
}
em input:nth-child(2){
    position:absolute;
    top:-1px;
    right:-1px
}
textarea{
    width:100%;
    min-height:40px;
    height:40px;
    padding:8px 16px 0 16px;
    font-family:arial
}
select{
    width:100%;
    padding:4px 12px;
    cursor:pointer
}
img[src='']{
    display:none
}
img[src*='/app/util/country/flag/']{
    max-height:48px;
    height:14px
}
[contenteditable]{
    outline:0px solid transparent
}

[data-opacity='0.1']{
    opacity:.1
}
[data-opacity='0.2']{
    opacity:.2
}
[data-opacity='0.3']{
    opacity:.3
}
[data-opacity='0.4']{
    opacity:.4
}
[data-opacity='0.5']{
    opacity:.5
}
[data-opacity='0.6']{
    opacity:.6
}
[data-opacity='0.7']{
    opacity:.7
}
[data-opacity='0.8']{
    opacity:.8
}
[data-opacity='0.9']{
    opacity:.9
}
[data-opacity='1']{
    opacity:1
}
[data-opacity]:hover{
    opacity:1
}

[data-filter='blur']{
    backdrop-filter:blur(3px)
}

.f_sql{
    user-select:text !important
}
.f_alert,.f_buoy,.f_noentry,.f_tick{
    min-height:32px;
    margin:20px 0;
    padding:0 0 0 36px;
    font-size:10pt;
    &:before{
        position:absolute;
        top:0;
        left:0;
        height:32px
    }
}
.f_alert{
    color:#cc0000;
    &:before{
        content:"<img src=/site/icon/alert.png>";
    }
}
.f_buoy{
    color:#cc0000;
    &:before{
        content:"<img src=/site/icon/buoy.png>";
    }
}
.f_noentry{
    color:#cc0000;
    &:before{
        content:"<img src=/site/icon/no_entry.png>";
    }
}
.f_tick{
    color:green;
    &:before{
        content:"<img src=/site/icon/tick.png>";
        position:absolute;
        top:0;
        left:0;
        height:24px
    }
}


/* TREE */
details[open]{
    position:relative;
    contain:content;
    padding:0 0 16px 16px
}
details[open]:has(details){
    padding:0 0 0 16px
}
details summary{
    position:relative;
    border-style:solid;
    border-width:1px 0 0 0;
    border-color:rgba(0,0,0,.1);
    white-space:nowrap;
    padding:8px 0;
    cursor:pointer
}
details[open] > summary{
    margin-left:-16px;
    font-weight:bold
}
details summary::marker {
    font-size:1em;
    color:rgba(0,0,0,.2)
}
details[open] > summary::marker{
    font-size:1em;
    color:rgba(0,0,0,.5)
}
details > *,details > * > u,.f_list > *,.f_list > * > u{
    user-select:none
}
details > a, details > p, details > s, details > li, .f_list > a, .f_list > s, .f_list > p, .f_list > li{
    position:relative;
    width:100%;
    margin:0 0 -1px 0;
    border-style:solid;
    border-width:1px 0 0 0;
    border-color:rgba(0,0,0,.1);
    padding:8px 0;
    line-height:100%;
    cursor:pointer;
    transition:all .5s
}
details > a, details > s, .f_list > a, .f_list > s{
    display:block;
    white-space:nowrap;
    overflow:hidden
}
details > p{
    padding:3px 0;
    border:0;
    white-space:nowrap;
    overflow:hidden
}
details > summary > u, details > * > u, .f_list > * > u{
    display:inline-block;
    float:right;
    margin:0 4px 0 4px;
    opacity:.5;
    font-size:8pt;
    text-decoration:none
}
details > a > img, details > p > img, details > s > img, details > li > img, .f_list > * > img{
    height:18px;
    width:18px;
    margin:0 8px -1px 0;
    transition:all .5s
}
details [type='text']{
    display:block;
    width:90%
}
details [type='date'],details [type='datetime-local']{
    display:block;
    width:90%;
    padding:4px 9px;
    margin:0 0 -1px 0;
    font-family:arial;
    cursor:pointer
}
.f_list > * .f_list_close{
    display:inline-block;
    position:absolute;
    right:0;
    top:50%;
    transform:translate(0,-51%);
    transition:all .5s;
    opacity:0;
    font-size:12pt;
    font-weight:700
}
.f_list > *:hover .f_list_close{
    opacity:.5
}
.f_list > *:has(.f_list_close)
{
    padding-right:30px
}

[data-marker]{
    display:list-item !important
}
[data-marker]::marker{
    font-size:1em;
    opacity:.5
}
[data-marker='page']::marker{
    content:"☐ "
}
[data-marker='arrow-up']::marker{
    content:"⏶ "
}
[data-marker='arrow-down']::marker{
    content:"⏷ "
}
[data-marker='arrow-left']::marker{
    content:"⏴ "
}
[data-marker='arrow-right']::marker{
    content:"⏵ "
}
[data-marker='arrow-nw']::marker{
    content:"◤ "
}
[data-marker='arrow-ne']::marker{
    content:"◥ "
}
[data-marker='arrow-se']::marker{
    content:"◢ "
}
[data-marker='arrow-sw']::marker{
    content:"◣ "
}
[data-marker='alert']::marker{
    content:"⚠ "
}
[data-marker='set']::marker{
    content:"⚒ "
}
[data-marker='flag']::marker{
    content:"⚑ "
}
[data-marker='times']::marker{
    content:"✖ "
}
[data-marker='tick']::marker{
    content:"✔ "
}

/* ICONS */
.f_icons
{
    display:inline-block;
    *{
        transition:all .5s
    }
    a{
        position:relative;
        display:inline-block;
        width:40px;
        height:48px;
        background:inherit;
        cursor:pointer
    }
    a *{
        position:absolute;
    }
    a img:nth-child(1){
        width:32px;
        height:32px;
        left:50%;
        bottom:8px;
        transform:translate(-50%,0)
    }
    a img:nth-child(2){
        width:16px;
        height:16px;
        right:-2px;
        bottom:6px;
        transition:all 1s
    }
    a:hover img:nth-child(1){
        width:48px;
        height:48px;
        bottom:0
    }
    a:hover img:nth-child(2){
        width:28px;
        height:28px;
        right:-2px;
        bottom:-4px
    }
    a img:nth-child(2)[src='']{
        width:0;
        height:0
    }
    s{
        position:relative;
        display:inline-block;
        width:24px;
        height:24px;
        background:inherit;
        cursor:pointer
    }
    s *{
        position:absolute;
    }
    s img:nth-child(1){
        width:16px;
        height:16px;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%)
    }
    s:hover img:nth-child(1){
        width:24px;
        height:24px;
        bottom:0
    }
    a[data-0='0'],
    a[data-1='0'],
    a[data-2='0'],
    a[data-3='0'],
    a[data-4='0'],
    a[data-5='0'],
    a[data-6='0'],
    a[data-7='0'],
    a[data-8='0'],
    a[data-9='0'],
    a[data-0='0'] *,
    a[data-1='0'] *,
    a[data-2='0'] *,
    a[data-3='0'] *,
    a[data-4='0'] *,
    a[data-5='0'] *,
    a[data-6='0'] *,
    a[data-7='0'] *,
    a[data-8='0'] *,
    a[data-9='0'] *,
    p{
        display:inline-block;
        width:32px;
        height:32px;
        line-height:100%;
        font-size:20pt;
        opacity:.5;
        cursor:pointer;
        transition:all .5s
    }
    p:hover{
        opacity:1
    }
    a[data-viz='0'],a[data-viz='0'] *,a[data-viz='-1'],a[data-viz='-1'] *{
        height:0 !important;
        width:0 !important
    }
}
[data-0='0'] .f_icons a[data-0='1'],
[data-1='0'] .f_icons a[data-1='1'],
[data-2='0'] .f_icons a[data-2='1'],
[data-3='0'] .f_icons a[data-3='1'],
[data-4='0'] .f_icons a[data-4='1'],
[data-5='0'] .f_icons a[data-5='1'],
[data-6='0'] .f_icons a[data-6='1'],
[data-7='0'] .f_icons a[data-7='1'],
[data-8='0'] .f_icons a[data-8='1'],
[data-9='0'] .f_icons a[data-9='1'],
[data-0='0'] .f_icons a[data-0='1'] *,
[data-1='0'] .f_icons a[data-1='1'] *,
[data-2='0'] .f_icons a[data-2='1'] *,
[data-3='0'] .f_icons a[data-3='1'] *,
[data-4='0'] .f_icons a[data-4='1'] *,
[data-5='0'] .f_icons a[data-5='1'] *,
[data-6='0'] .f_icons a[data-6='1'] *,
[data-7='0'] .f_icons a[data-7='1'] *,
[data-8='0'] .f_icons a[data-8='1'] *,
[data-9='0'] .f_icons a[data-9='1'] *
{
    height:0 !important;
    width:0 !important
}
.f_icons a u{
    display:inline-block;
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%,0);
    padding:0;
    font-size:0;
    opacity:0;
    color:gray;
    transition:all 1s
}
.f_icons a:hover u{
    transform:translate(-50%,-110%);
    padding:12px;
    font-size:16pt;
    opacity:1
}
.f_icons a u:hover{
    color:red
}

/* FORM */
form,.f_form{
    margin:0;
    font-size:12pt
}
form,.f_form,.f_form_basic,.f_form_rows{
    table{
        width:100%
    }
    table~*{
        margin-top:20px
    }
    tr{
        border-width:1px 0;
        border-style:solid;
        border-color:rgba(0,0,0,.05)
    }
    th{
        padding:10px;
        color:rgba(0,0,0,.5);
        vertical-align:middle;
        height:44px !important
    }
    td{
        padding:10px;
        height:44px;
        inline-size:min-content;
        word-break:break-all
    }
    th > input, b > input,b > select,b > textarea,th > input{
        font-weight:bold
    }
    th i{
        font-weight:normal;
        font-size:10pt;
        color:rgba(0,0,0,1)
    }
    th b + i{
        margin-top:4pt
    }
    input[type='text'],input[type='password'],input[type='email'],input[type='date'],input[type='datetime-local'],input[type='range']{
        position:relative;
        width:100%;
        margin-bottom:-1px;
        font-family:arial
    }
    textarea{
        width:100%;
        height:40px;
        transition:height 1s;
        &:focus{
            height:320px
        }
    }
    div:has([type='range']){
        span{
            position:absolute;
            top:65%;
            font-size:9pt;
            opacity:0
        }
        :nth-child(2){
            left:50%;
            transform:translate(-100%,0);
            font-weight:bold;
            opacity:.6
        }
        :nth-child(3){
            left:0;
            opacity:.3
        }
        :nth-child(4){
            right:0;
            opacity:.3
        }
    }
    div:has([type='range']):hover{
        :nth-child(2){
            opacity:.8
        }
        :nth-child(3),:nth-child(4){
            opacity:.6
        }
    }
    input[data-tip='preview']{
        cursor:pointer
    }
    tr > *:first-child{
        padding-left:30px !important
    }
    tr > *:last-child{
        padding-right:30px !important
    }
    .f_form_rows_head{
        background:#f5f5f5
    }
    .f_form_rows_head > *{
        font-weight:bold;
        padding:8px;
        color:rgba(0,0,0,.5)
    }
    .f_section th{
        padding:8px 8px 8px 60px;
        font-size:12pt;
        color:rgba(0,0,0,.8);
        cursor:pointer
    }
    .f_section i{
        display:block
    }
    th i:empty,.f_section[data-close='2'] i, tr[data-close='1']{
        display:none
    }
    .f_form_error{
        display:block;
        margin:12px 0 0 0;
        font-size:9pt
    }
    .f_form_error img{
        width:24px;
        float:left;
        margin:0 4px
    }
}
.f_form_basic{
    tr td:nth-child(2){
        width:80%
    }
}

/* SLIDER */
input.f_slide{
    appearance:none;
    position:relative;
    display:inline-block;
    background:lightgray;
    height:1rem;
    width:2rem;
    vertical-align:middle;
    border-radius:2rem;
    box-shadow:0px 1px 3px #0003 inset;
    transition:0.25s linear background
}
input.f_slide::before{
    content: "";
    display:block;
    width:0.75rem;
    height:0.75rem;
    background:#fff;
    border-radius:1.2rem;
    position:absolute;
    top:0.1rem;
    left:0.1rem;
    box-shadow:0px 1px 3px #0003;
    transition:0.25s linear transform;
    transform:translateX(0rem)
}
input.f_slide:checked{
    background:green
}
input.f_slide:checked::before{
    transform:translateX(1rem)
}
input.f_slide:focus-visible{
    outline:2px solid dodgerblue;
    outline-offset:2px
}
input.f_slide:focus{
    outline-color:transparent
}

/* TABS */
.f_tabs:empty{
    display:none
}
.f_tabs a{
    filter:drop-shadow(-2px -8px 4px rgba(0,0,0,.2));
    display:inline-block;
    transition:all .5s, margin-left 1s, margin-right 1s
}
.f_tabs a s{
    clip-path:polygon(12px 0%,calc(100% - 12px) 0%,100% 100%,0% 100%);
    padding:9px 24px 7px 24px;
    font-size:10pt;
    font-weight:bold;
    white-space:nowrap;
    cursor:pointer;
    transition:all .45s
}
.f_tabs a s img[src^='/app/util/country/flag/']{
    float:left;
    height:12px
}
.f_tabs [data-viz='0']{
    margin:24px 0 0 0;
    filter:drop-shadow(0 0 0 rgba(0,0,0,0))
}
.f_tabs[data-pos='bottom'] [data-viz='0']{
    margin:0 0 28px 0
}
.f_tabs [data-viz='0'] s,
[data-0='0'] .f_tabs [data-0='1'] s,
[data-1='0'] .f_tabs [data-1='1'] s,
[data-2='0'] .f_tabs [data-2='1'] s,
[data-3='0'] .f_tabs [data-3='1'] s,
[data-4='0'] .f_tabs [data-4='1'] s,
[data-5='0'] .f_tabs [data-5='1'] s,
[data-6='0'] .f_tabs [data-6='1'] s,
[data-7='0'] .f_tabs [data-7='1'] s,
[data-8='0'] .f_tabs [data-8='1'] s,
[data-9='0'] .f_tabs [data-9='1'] s,
[data-closed='-1'] .f_tabs s
{
    padding:0 !important;
    font-size:0 !important;
    background:transparent !important;
    color:transparent !important
}
.f_tabs > a[data-top='1'] s,.f_tabs a s:hover{
    z-index:1
}
.f_tabs[data-pos='head']{
    float:left
}
.f_tabs[data-pos='top']{
    position:absolute;
    top:0;
    left:0;
    transform:translate(0,-100%);
    transition:padding .5s;
    a{
        height:24px;
        margin-bottom:-2px;
        margin-right:-12px
    }
}
.f_tabs[data-pos='right']{
    display:block;
    width:200px;
    height:24px;
    position:absolute;
    bottom:0;
    right:0;
    transform:rotate(90deg);
    transform-origin:100% 100%;
    overflow:visible;
    white-space:nowrap;
    transition:all 1s;
    a{
        float:right;
        margin-left:-12px
    }
}
.f_tabs[data-pos='left']{
    display:block;
    width:24px;
    height:24px;
    position:absolute;
    top:0;
    left:0;
    transform:rotate(270deg);
    transform-origin:0% 100%;
    overflow:visible;
    white-space:nowrap;
    transition:all 1s;
    a{
        float:right;
        margin-left:-12px
    }
}
.f_tabs[data-pos='foot']{
    margin-right:40px;
    a{
        float:right
    }
}
.f_tabs[data-pos='bottom']{
    position:absolute;
    bottom:1px;
    right:0;
    z-index:9;
    transform:translate(0,100%);
    a{
        float:right;
        margin-top:7px;
        margin-left:-12px
    }
}
.f_tabs[data-pos='bottom'] a,.f_tabs[data-pos='foot'] a{
    filter:drop-shadow(-2px 8px 4px rgba(0,0,0,.2))
}
.f_tabs[data-pos='bottom'] a s,.f_tabs[data-pos='foot'] a s{
    clip-path:polygon(0% 0%,100% 0%,calc(100% - 12px) 100%,12px 100%)
}
div .f_tabs[data-pos='bottom'] a[data-opacity='5']{
    opacity:.5
}
div:hover .f_tabs[data-pos='bottom'] a[data-opacity='5']{
    opacity:.5
}
.f_tabs[data-pos='bottom'] [data-viz='0'],
[data-0='0'] .f_tabs[data-pos='bottom'] [data-0='1'],
[data-1='0'] .f_tabs[data-pos='bottom'] [data-1='1'],
[data-2='0'] .f_tabs[data-pos='bottom'] [data-2='1'],
[data-3='0'] .f_tabs[data-pos='bottom'] [data-3='1'],
[data-4='0'] .f_tabs[data-pos='bottom'] [data-4='1'],
[data-5='0'] .f_tabs[data-pos='bottom'] [data-5='1'],
[data-6='0'] .f_tabs[data-pos='bottom'] [data-6='1'],
[data-7='0'] .f_tabs[data-pos='bottom'] [data-7='1'],
[data-8='0'] .f_tabs[data-pos='bottom'] [data-8='1'],
[data-9='0'] .f_tabs[data-pos='bottom'] [data-9='1'],
[data-closed='-1'] .f_tabs[data-pos='bottom'],[data-closed='1'] .f_tabs[data-pos='bottom']
{
    margin-bottom:10px !important
}

/* WAIT */
.f_wait{
    position:relative;
    display:inline-block;
    div{
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        border-radius:50%;
        border-style:solid;
        border-color:#000 #000 transparent transparent;
        opacity:.2;
        transition:opacity .5s
    }
}
[data-closed='1'] .f_wait div,[data-closed='2'] .f_wait div{
    opacity:0
}
.f_wait[data-size='32']{
    width:32px;
    height:32px;
    div{
        border-width:5px
    }
}
.f_wait[data-size='48']{
    width:48px;
    height:48px;
    div{
        border-width:6px
    }
}
.f_wait[data-size='64']{
    width:64px;
    height:64px;
    div{
        border-width:8px
    }
}
.f_wait[data-size='128']{
    width:128px;
    height:128px;
    div{
        border-width:16px
    }
}
.f_wait div:nth-of-type(1){
    animation:fload 2s linear infinite
}
.f_wait div:nth-of-type(2){
    animation:fwait 4s linear infinite
}
@keyframes fwait{
    100% {
        transform:rotate(360deg)
    }
}

/* STYLES */
.f_frm[data-style^='sys-pastel-']{
    color:#000
}
[data-style$='-chevron']{
    backdrop-filter:blur(4px)
}
[data-style='sys-default']{
    background:rgba(255,255,255,.5);
    backdrop-filter:blur(4px)
}
[data-style='sys-default-chevron']{
    background:repeating-linear-gradient(45deg,rgba(255,255,255,.9) 0px,rgba(255,255,255,.9) 40px,rgba(255,255,255,.8) 40px,rgba(255,255,255,.8) 80px,rgba(255,255,255,.9) 80px)
}
[data-style='sys-default-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),rgba(255,255,255,.5);
    backdrop-filter:blur(4px)
}
[data-style='sys-default-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),rgba(255,255,255,.5);
    backdrop-filter:blur(4px)
}
[data-style='sys-pastel-red']{
    background:#ffd4d4
}
[data-style='sys-pastel-red-chevron']{
    background:repeating-linear-gradient(45deg,rgba(255,212,212,.9) 0px,rgba(255,212,212,.9) 40px,rgba(255,212,212,.8) 40px,rgba(255,212,212,.8) 80px,rgba(255,212,212,.9) 80px)
}
[data-style='sys-pastel-red-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#ffd4d4
}
[data-style='sys-pastel-red-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#ffd4d4
}
[data-style='sys-pastel-orange']{
    background:#ffe8d4
}
[data-style='sys-pastel-orange-chevron']{
    background:repeating-linear-gradient(45deg,rgba(255,232,212,.9) 0px,rgba(255,232,212,.9) 40px,rgba(255,232,212,.8) 40px,rgba(255,232,212,.8) 80px,rgba(255,232,212,.9) 80px)
}
[data-style='sys-pastel-orange-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#ffe8d4
}
[data-style='sys-pastel-orange-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#ffe8d4
}
[data-style='sys-pastel-yellow']{
    background:#ffffd4
}
[data-style='sys-pastel-yellow-chevron']{
    background:repeating-linear-gradient(45deg,rgba(255,255,212,.9) 0px,rgba(255,255,212,.9) 40px,rgba(255,255,212,.8) 40px,rgba(255,255,212,.8) 80px,rgba(255,255,212,.9) 80px)
}
[data-style='sys-pastel-orange-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#ffe8d4
}
[data-style='sys-pastel-orange-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#ffe8d4
}
[data-style='sys-pastel-green']{
    background:#d4ffd4
}
[data-style='sys-pastel-green-chevron']{
    background:repeating-linear-gradient(45deg,rgba(212,255,212,.9) 0px,rgba(212,255,212,.9) 40px,rgba(212,255,212,.8) 40px,rgba(212,255,212,.8) 80px,rgba(212,255,212,.9) 80px)
}
[data-style='sys-pastel-green-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#d4ffd4
}
[data-style='sys-pastel-green-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#d4ffd4
}
[data-style='sys-pastel-teal']{
    background:#BAFFEC
}
[data-style='sys-pastel-teal-chevron']{
    background:repeating-linear-gradient(45deg,rgba(186,255,236,.9) 0px,rgba(186,255,236,.9) 40px,rgba(186,255,236,.8) 40px,rgba(186,255,236,.8) 80px,rgba(186,255,236,.9) 80px)
}
[data-style='sys-pastel-teal-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#BAFFEC
}
[data-style='sys-pastel-teal-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#BAFFEC
}
[data-style='sys-pastel-cyan']{
    background:#B4FFFF
}
[data-style='sys-pastel-cyan-chevron']{
    background:repeating-linear-gradient(45deg,rgba(180,255,255,.9) 0px,rgba(180,255,255,.9) 40px,rgba(180,255,255,.8) 40px,rgba(180,255,255,.8) 80px,rgba(180,255,255,.9) 80px)
}
[data-style='sys-pastel-cyan-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#B4FFFF
}
[data-style='sys-pastel-cyan-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#B4FFFF
}
[data-style='sys-pastel-blue']{
    background:#d4d4ff
}
[data-style='sys-pastel-blue-chevron']{
    background:repeating-linear-gradient(45deg,rgba(220,220,255,.9) 0px,rgba(220,220,255,.9) 40px,rgba(220,220,255,.8) 40px,rgba(220,220,255,.8) 80px,rgba(220,220,255,.9) 80px)
}
[data-style='sys-pastel-blue-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#d4d4ff
}
[data-style='sys-pastel-blue-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#d4d4ff
}
[data-style='sys-pastel-purple']{
    background:#E6DCFF
}
[data-style='sys-pastel-purple-chevron']{
    background:repeating-linear-gradient(45deg,rgba(230,220,255,.9) 0px,rgba(230,220,255,.9) 40px,rgba(230,220,255,.8) 40px,rgba(230,220,255,.8) 80px,rgba(230,220,255,.9) 80px)
}
[data-style='sys-pastel-purple-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#E6DCFF
}
[data-style='sys-pastel-purple-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#E6DCFF
}
[data-style='sys-pastel-violet']{
    background:#FFDCFF
}
[data-style='sys-pastel-violet-chevron']{
    background:repeating-linear-gradient(45deg,rgba(255,220,255,.9) 0px,rgba(255,220,255,.9) 40px,rgba(255,220,255,.8) 40px,rgba(255,220,255,.8) 80px,rgba(255,220,255,.9) 80px)
}
[data-style='sys-pastel-violet-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#FFDCFF
}
[data-style='sys-pastel-violet-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#FFDCFF
}
[data-style='sys-pastel-pink']{
    background:#FFDCF0
}
[data-style='sys-pastel-pink-chevron']{
    background:repeating-linear-gradient(45deg,rgba(255,220,240,.9) 0px,rgba(255,220,240,.9) 40px,rgba(255,220,240,.8) 40px,rgba(255,220,240,.8) 80px,rgba(255,220,240,.9) 80px)
}
[data-style='sys-pastel-pink-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#FFDCF0
}
[data-style='sys-pastel-pink-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#FFDCF0
}
[data-style='sys-pastel-gray']{
    background:#d0d0d0
}
[data-style='sys-pastel-gray-chevron']{
    background:repeating-linear-gradient(45deg,rgba(220,220,220,.9) 0px,rgba(220,220,220,.9) 40px,rgba(220,220,220,.8) 40px,rgba(220,220,220,.8) 80px,rgba(220,220,220,.9) 80px)
}
[data-style='sys-pastel-gray-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#d0d0d0
}
[data-style='sys-pastel-gray-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#d0d0d0
}
[data-style='sys-pastel-black']{
    background:#a0a0a0
}
[data-style='sys-pastel-black-chevron']{
    background:repeating-linear-gradient(45deg,rgba(196,196,196,.75) 0px,rgba(196,196,196,.75) 40px,rgba(196,196,196,.8) 40px,rgba(196,196,196,.8) 80px,rgba(196,196,196,.75) 80px)
}
[data-style='sys-pastel-black-line']{
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#a0a0a0
}
[data-style='sys-pastel-black-pin']{
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0px,rgba(255,255,255,.4) 2px,rgba(255,255,255,0) 4px),#a0a0a0
}
[data-style='sys-green-chevron']{
    background:repeating-linear-gradient(45deg,rgba(0,182,0,.9) 0px,rgba(0,182,0,.9) 40px,rgba(0,182,0,.8) 40px,rgba(0,182,0,.8) 80px,rgba(0,182,0,.9) 80px);
    color:#FFF
}
[data-style='sys-red-chevron']{
    background:repeating-linear-gradient(45deg,#DD0000 0px,#DD0000 40px,#FF0000 40px,#FF0000 80px,#DD0000 80px);
    color:#FFF
}
[data-style='error']{
    background:#cc0000;
    color:#FFF
}

/* CHAT */
[data-style^='chat']{
    color:#fff !important;
    backdrop-filter:blur(3px);
    border:1px solid rgba(255,255,255,.2);
    transition:all .5s
}
[data-style^='chat']:hover{
    border:1px solid rgba(255,255,255,.4)
}
[data-style='chat-black-chevron']{
    background:repeating-linear-gradient(45deg,rgba(0,0,0,.75) 0px,rgba(0,0,0,.75) 40px,rgba(0,0,0,.8) 40px,rgba(0,0,0,.8) 80px,rgba(0,0,0,.75) 80px) !important
}
[data-style='chat-black']{
    background:rgba(0,0,0,.75) !important
}

/* COLOR */
[data-color='red']{
    color:rgb(255,0,0) !important
}
[data-color='orange']{
    color:rgb(255,128,0) !important
}
[data-color='yellow']{
    color:rgb(255,255,0) !important
}
[data-color='lime']{
    color:rgb(128,255,0) !important
}
[data-color='green']{
    color:rgb(0,255,0) !important
}
[data-color='teal']{
    color:rgb(0,255,180) !important
}
[data-color='cyan']{
    color:rgb(0,255,255) !important
}
[data-color='blue']{
    color:rgb(0,0,255) !important
}
[data-color='purple']{
    color:rgb(128,0,255) !important
}
[data-color='pink']{
    color:rgb(255,0,255) !important
}
[data-color='gray']{
    color:gray !important
}
[data-color='lightgray']{
    color:#C0C0C0 !important
}
[data-color='white']{
    color:rgb(255,255,255) !important
}

[data-bg='brown']{
    background:rgba(128,64,0,.07)
}
[data-bg='brown-chevron']{
    background:repeating-linear-gradient(45deg,rgba(128,64,0,.07) 0px,rgba(128,64,0,.07) 40px,rgba(128,64,0,.12) 40px,rgba(128,64,0,.12) 80px,rgba(128,64,0,.07) 80px)
}
[data-bg='red']{
    background:rgba(255,0,0,.05)
}
[data-bg='red-chevron']{
    background:repeating-linear-gradient(45deg,rgba(255,0,0,.05) 0px,rgba(255,0,0,.05) 40px,rgba(255,0,0,.1) 40px,rgba(255,0,0,.1) 80px,rgba(255,0,0,.05) 80px)
}
[data-bg='orange']{
    background:rgba(255,128,0,.05)
}
[data-bg='orange-chevron']{
    background:repeating-linear-gradient(45deg,rgba(255,128,0,.05) 0px,rgba(255,128,0,.05) 40px,rgba(255,128,0,.1) 40px,rgba(255,128,0,.1) 80px,rgba(255,128,0,.05) 80px)
}
[data-bg='yellow']{
    background:rgba(255,255,0,.07)
}
[data-bg='orange-chevron']{
    background:repeating-linear-gradient(45deg,rgba(255,255,0,.1) 0px,rgba(255,255,0,.1) 40px,rgba(255,255,0,.15) 40px,rgba(255,255,0,.15) 80px,rgba(255,255,0,.1) 80px)
}
[data-bg='lime']{
    background:rgba(128,255,0,.05)
}
[data-bg='lime-chevron']{
    background:repeating-linear-gradient(45deg,rgba(128,255,0,.05) 0px,rgba(128,255,0,.05) 40px,rgba(128,255,0,.1) 40px,rgba(128,255,0,.1) 80px,rgba(128,255,0,.05) 80px)
}
[data-bg='green']{
    background:rgba(0,255,0,.05)
}
[data-bg='green-chevron']{
    background:repeating-linear-gradient(45deg,rgba(0,255,0,.05) 0px,rgba(0,255,0,.05) 40px,rgba(0,255,0,.1) 40px,rgba(0,255,0,.1) 80px,rgba(0,255,0,.05) 80px)
}
[data-bg='teal']{
    background:rgba(0,255,180,.07)
}
[data-bg='teal-chevron']{
    background:repeating-linear-gradient(45deg,rgba(0,255,180,.07) 0px,rgba(0,255,180,.07) 40px,rgba(0,255,180,.12) 40px,rgba(0,255,180,.12) 80px,rgba(0,255,180,.07) 80px)
}
[data-bg='cyan']{
    background:rgba(0,255,255,.05)
}
[data-bg='cyan-chevron']{
    background:repeating-linear-gradient(45deg,rgba(0,255,255,.05) 0px,rgba(0,255,255,.05) 40px,rgba(0,255,255,.1) 40px,rgba(0,255,255,.1) 80px,rgba(0,255,255,.05) 80px)
}
[data-bg='blue']{
    background:rgba(0,0,255,.05)
}
[data-bg='blue-chevron']{
    background:repeating-linear-gradient(45deg,rgba(0,0,255,.05) 0px,rgba(0,0,255,.05) 40px,rgba(0,0,255,.1) 40px,rgba(0,0,255,.1) 80px,rgba(0,0,255,.05) 80px)
}
[data-bg='purple']{
    background:rgba(128,0,255,.05)
}
[data-bg='purple-chevron']{
    background:repeating-linear-gradient(45deg,rgba(128,0,255,.05) 0px,rgba(128,0,255,.05) 40px,rgba(128,0,255,.1) 40px,rgba(128,0,255,.1) 80px,rgba(128,0,255,.05) 80px)
}
[data-bg='pink']{
    background:rgba(255,0,255,.05)
}
[data-bg='pink-chevron']{
    background:repeating-linear-gradient(45deg,rgba(255,0,255,.05) 0px,rgba(255,0,255,.05) 40px,rgba(255,0,255,.1) 40px,rgba(255,0,255,.1) 80px,rgba(255,0,255,.05) 80px)
}
[data-bg='gray']{
    background:rgba(0,0,0,.1)
}
[data-bg='gray-chevron']{
    background:repeating-linear-gradient(45deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 40px,rgba(0,0,0,.15) 40px,rgba(0,0,0,.15) 80px,rgba(0,0,0,.1) 80px)
}
[data-bg='lightgray']{
    background:rgba(0,0,0,.06)
}
[data-bg='lightgray-chevron']{
    background:repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0px,rgba(0,0,0,.06) 40px,rgba(0,0,0,.12) 40px,rgba(0,0,0,.12) 80px,rgba(0,0,0,.06) 80px)
}
[data-bg='white']{
    background:rgba(255,255,255,.1)
}
[data-bg='error']{
    background:#cc0000;
    color:#fff !important;
    td,th{
        vertical-align:middle !important;
        color:#fff !important
    }
}