:root{
    --bl1:#8e8e93;
    --bl2:#8178fd;
    --d0:rgb(0,0,0);
    --d1:#101010;
    --d2:#161616;
    --d3:#1e1e1e;
    --d4:#323232;
    --d45:#343434;
    --d5:#8e8e8e;
    --d52:rgb(176,176,176,.2);
    --d53:rgb(176,176,176,.3);
    --d54:rgb(176,176,176,.4);
    --d56:rgb(176,176,176,.6);
    --d6:#b4b4c1;
    --d7:#A9A9A9;
    --g2:#34C759;
    --g3:#199438;
    --g4:#0f6d26;
    --gr3:#1f1f1f;
    --gr4:#272727;
    --gr5:rgb(40,40,40,.75);
    --gr6:#3B3B3B;
    --gr1:#1f1f1f;
    --gr61:rgba(82, 82, 82,.1);
    --h1fs:34pt;
    --icr:18.5px;
    --l0:rgb(255,255,255);
    --l3:rgb(103,103,103);
    --l9:rgb(175,175,175);
    --pl0:#5246ff;
    --pl1:rgb(26,13,201);
    --p3:#D2CFFF;
    --rd1:rgb(255,0,0);
    --rd2:rgb(66,15,15);
    --yw1:#E4A70A;
    --zi-chattop:888888;
    --zi-over:999999;   
}
@font-face{font-family:'Inter';src:url('../font/inter-regular.ttf') format('truetype');font-weight:normal;font-style:normal;}
@font-face{font-family:'InterBold';src:url('../font/inter-bold.ttf') format('truetype');font-weight:bold;font-style:bold;}
@font-face{font-family:'InterSemiBold';src:url('../font/inter-semibold.ttf') format('truetype');font-weight:bold;font-style:bold;}
*{
    box-sizing:border-box;
    &[hide]{display:none;opacity:0;visibility:hidden;}
    &[d]{color:var(--d0);}
    &[d='1']{background:var(--l0);border-color:var(--l0);}
    &[d='8']{background:var(--bl2);border-color:var(--bl2);}
    &[d='11']{background:#e89700;border-color:#e89700;}
    &[d='12']{background:#8a00ca;border-color:#8a00ca;color:var(--l0);}
    &[d='13']{background:#26e2b6;border-color:#26e2b6;}
    &[d='29']{background:#00c8ff;border-color:#00c8ff;}
    &[d='30']{background:#1adc00;border-color:#1adc00;}
    &[d='31']{background:#ffffff;border-color:#ffffff;}
    &[d='32']{background:#950505;border-color:#950505;color:var(--l0);}
    &[d='33']{background:#ff0000;border-color:#ff0000;}
    &[d='34']{background:#f2ff00;border-color:#f2ff00;}
    &[d='48']{background:#0032b1;border-color:#0032b1;color:var(--l0);}
    &[d='50']{background:#370051;border-color:#370051;color:var(--l0);}
    &[d='53']{background:#f797c4;border-color:#f797c4;}
    &[d='58']{background:#d2cfff;border-color:#d2cfff;}
    &[d='133']{background:#888888;border-color:#888888;}
    &[d='135']{background:#008EFF;border-color:#008EFF;}
    &[d='137']{background:#083f0b;border-color:#083f0b;}
    &[d='n']{background:transparent;border:2px solid var(--l9);}
    &[dt]{display:flex;flex-direction:row;&::before{align-self:center;border-radius:20px;content:'';display:block;height:12px;justify-self:center;margin-right:5.5px;max-height:12px;max-width:12px;width:12px;}}
    &[dt='1']::before{background:var(--l0);}
    &[dt='8']::before{background:var(--bl2);}
    &[dt='11']::before{background:#e89700;}
    &[dt='12']::before{background:#8a00ca;}
    &[dt='13']::before{background:#26e2b6;}
    &[dt='29']::before{background:#00c8ff;}
    &[dt='30']::before{background:#1adc00;}
    &[dt='31']::before{background:#ffffff;}
    &[dt='32']::before{background:#950505;}
    &[dt='33']::before{background:#ff0000;}
    &[dt='34']::before{background:#f2ff00;}
    &[dt='48']::before{background:#0032b1;}
    &[dt='50']::before{background:#370051;}
    &[dt='50']::before{background:#370051;}
    &[dt='53']::before{background:#f797c4;}
    &[dt='58']::before{background:#d2cfff;}
    &[inv]{opacity:0;pointer-events:none;user-select:none;}
    &[show]{position:relative;z-index:var(--zi-over);}
}
body{background-color:var(--d2);font-size:14pt;font-family:'Inter';height:100vh;margin:0;position:relative;touch-action:manipulation;width:100vw;-webkit-overflow-scrolling:touch;}
button{
    background:transparent;border:0;display:block;margin:0;padding:0;text-align:center;user-select:none;
    >*{pointer-events:none;}
    &[togg]{
        border:0;padding:0;
        div{background:var(--rd1);border-radius:10px;display:none;padding:0 16px;width:100%;&[off]{display:block;}}
        &[on]{
            div{background:var(--g4);display:none;&[on]{display:block;}}
        }
    }
}
details>summary{list-style:none;}
details>summary::-webkit-details-marker{display:none;}
form{align-items:flex-start;display:flex;flex-direction:column;height:max-content;width:100%;input{background:transparent;border:0;outline:0;}}
h1,h2,h3,h4,h5,h6{font-family:'InterBold';margin:0;padding:0;}
h1{color:var(--l9);font-weight:bold;font-size:var(--h1fs);margin:0;padding:0;}
html,body{overscroll-behavior:none;}
html{
    &[theme='0']{
        --d0:rgb(0,0,0);
        --d1:#101010;
        --d2:#161616;
        --d3:#1e1e1e;
        --d4:#323232;
        --d45:#343434;
        --d5:#8e8e8e;
        --d52:rgb(176,176,176,.2);
        --d54:rgb(176,176,176,.4);
        --d56:rgb(176,176,176,.6);
        --d6:#b4b4c1;
        --d7:#A9A9A9;
    }
}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--l0);transition:background-color 5000s ease-in-out 0s;box-shadow:inset 0 0 20px 20px #23232329;}
input{
    &[type='date']{
        color-scheme:dark;
        font-family:'Inter';
        font-size:16px;
        padding:0 16px 0 0;
    }
}
icond{border-radius:90px;height:12px;margin-right:4.5px;width:12px;}
iconn,iconu{border-color:transparent;border-style:solid;border-radius:90px;border-width:2px;flex-grow:0;line-height:52px;overflow:hidden;pointer-events:none;text-align:center;user-select:none;width:45px;}
iconu{
    background:var(--d4);color:var(--l9);height:52px;margin-right:12px;width:52px;
    >img{height:auto;width:110%;position:relative;top:-5%;left:-5%;}
    &[hi='0']{
        >img{display:none;}
    }
}
/* VIEWS */
auth{align-items:center;background:url("../img/butler.png");background-color:var(--d2);background-size:100vw 100vh;bottom:0;display:flex;flex-direction:column;height:100vh;justify-content:center;left:0;position:fixed;right:0;top:0;width:100dvw;z-index:var(--zi-over);&[active]{button[butler]{opacity:0;transition:all 20ms 1ms ease-in-out;visibility:visible;}inner{top:100vh;&[open]{top:0;transition:all 187ms 167ms ease-in-out;}}}button[butler]{height:86px;width:86px;opacity:1;padding:0;position:fixed;margin:0;display:block;svg{height:86px;width:86px;}}inner{display:flex;flex-direction:column;height:max-content;position:relative;top:0;&[hide]{opacity:0;top:100vh;}h2{color:var(--l0);font-size:32px;margin:0 0 22px 0;width:100%;}form{height:max-content;min-width:320px;width:100%;button[type="submit"]{background:var(--pl0);border-radius:10px;color:var(--l0);font-weight:bold;height:46px;line-height:46px;width:100%;}label{margin:0 0 16px 0;position:relative;width:100%;div{color:var(--l0);font-size:16px;font-weight:bold;height:22px;margin-bottom:4px;width:100%;}input{border-bottom:0.5px solid var(--l3);color:var(--l0);height:44px;width:100%;&::placeholder{color:var(--l3);}&[error]{border-color:var(--rd1);}}}}or{color:var(--l0);display:block;font-size:15px;height:22px;line-height:22px;margin:16px 0;text-align:center;width:100%;}options{display:flex;flex-direction:column;gap:12px;button{border:1px solid var(--d6);border-radius:10px;color:var(--l0);letter-spacing:0.25px;line-height:48px;height:48px;width:100%;svg{margin:0 10px 0 0;position:relative;top:3px;}}}}}
/* COMPONENTS */
editor{
    height:max-content;max-height:max-content;min-height:calc(100% - 83px);width:100%;
    form{
        width:100%;padding:0 16px;
        label{
            border-bottom:1px solid var(--d4);height:44px;font-size:14px;max-height:max-content;min-height:44px;display:flex;width:100%;flex-direction:row;justify-content:space-between;align-items:center;
            input{color:var(--l9);width:60%;}
            span{color:var(--l0);font-family:'InterBold';width:40%;}
            textarea{color:var(--l9);min-height:100px;width:60%;}
            &[for='edagent'],&[for='eddesc']{align-items:flex-start;height:max-content;max-height:max-content;span{height:44px;}textarea{background:transparent;border:0;color:var(--l9);line-height:20px;outline:0;padding:16px 0;width:100%;}}
            &[for='eddesc']{line-height:44px;textarea{line-height:16px;width:60%;}}
            &[for='edfirst'],&[for='edstart']{>div{display:flex;flex-direction:row;width:60%;input{&:first-child{width:50%;}}}}
        }
    }
}
menu{align-items:flex-start;background:var(--d1);border-top:.5px solid rgba(176, 176, 176, .3);display:flex;font-size:10pt;grid-area:n;height:63px;justify-content:flex-start;margin:0;padding:0;position:fixed;bottom:0;width:100%;inner{align-items:center;display:flex;flex-direction:row;height:var(--br);justify-content:space-evenly;margin:2px 0 0 0;width:100%;button{align-items:center;color:var(--bl1);display:flex;flex-direction:column;flex-grow:0;gap:2px;height:47px;justify-content:center;width:47px;icon{height:var(--icr);max-height:var(--icr);max-width:var(--icr);min-height:var(--icr);min-width:var(--icr);width:var(--icr);svg{height:var(--icr);width:var(--icr);>path{stroke:var(--bl1);}}}text{font-size:10pt;}&[active]{color:var(--bl2);>icon>svg>path{stroke:var(--bl2);}}}}}
message{background:var(--d2);border-top:.5px solid rgba(176, 176, 176, .3);display:flex;flex-direction:row;height:44px;width:100%;z-index:99;button{height:44px;width:44px;svg{stroke:var(--l0);}}label{flex-grow:1;height:100%;padding:6px 0;width:40%;input{border-radius:50px;height:32px;outline:0;padding:0 8px;width:100%;}}:focus{z-index:99999}}
modal{
    align-items:center;
    background:rgba(0, 0, 0, .5);
    bottom:0;
    display:flex;
    flex-direction:column;
    left:0;
    justify-content:center;
    position:fixed;
    right:0;
    top:0;
    z-index:99999999;
    panel{
        align-items:center;
        background:var(--d3);
        border-radius:10px;
        color:var(--l0);
        display:flex;
        flex-direction:column;
        gap:16px;
        justify-content:center;
        padding:16px;
        width:351px;
        div{
            font-family:'InterBold';
            font-size:16px;
            width:100%;
        }
        label{
            height:38px;
            width:100%;
            select{
                height:38px;
                padding:0 8px;
                width:100%;
            }
        }
    }
}
page{
    background:var(--d1);color:var(--l0);height:calc(100% - 63px);overflow-y:auto;position:absolute;top:0;width:100%;left:0;right:0;z-index:999999;
    >inner{
        background:var(--d1);height:calc(100% - 44px);max-height:100%;min-height:max-content;position:sticky;top:44px;width:100%;
        button,row{
            align-items:center;color:var(--l9);border-bottom:1px solid var(--d4);display:flex;flex-direction:row;flex-grow:0;font-size:16px;height:44px;justify-content:space-between;width:100%;z-index:100;
            >*{height:44px;line-height:44px;padding:0 16px;text-align:left;}
            icon{border-radius:20px;display:block;flex-grow:0;height:12px;margin:0 16px;padding:0;width:12px;}
            dept{border-left:.5px solid var(--d4);flex-grow:1;width:50%;}
            name{border-left:.5px solid var(--d4);flex-grow:1;width:50%;>*{&:first-child{padding-right:6px;}}}
        }
        button{font-style:italic;padding:0 16px;}
        none{align-items:flex-start;color:var(--l9);display:flex;flex-direction:column;height:44px;font-size:14px;font-style:italic;justify-content:center;width:100vw;padding:0 16px;}
        row{
            >*{border-left:1px solid var(--d52);pointer-events:none;}
            account,date,kind,paid,place,status,total,type,user{text-align:center;}
            account,kind,paid,status,user{max-width:60px;min-width:60px;width:60px;}
            date{max-width:95px;min-width:95px;width:95px;}
            dept{min-width:80px;text-align:center;width:max-content;}
            icon{margin:0 0 0 16px;max-width:12px;min-width:12px;width:12px;}
            name{border-left:0;overflow:hidden;white-space:nowrap;width:100%;&[name]{padding:0;}&[other]{border:0;}}
            paid,status{&[off]{color:var(--rd1);}&[on]{color:var(--g2);}}
            place,total,type{max-width:85px;min-width:85px;width:85px;}
            &[header]{background-color:var(--d1);margin:0;padding:0;pointer-events:none;position:sticky;top:44px;color:white;font-family:'InterBold';z-index:9999;icon{background:transparent;border:2px solid var(--d5);border-radius:90px;}&[user]{name{margin:0 0 0 16px;}}}
            &[inquiry]{>status{display:none;}}
            &[off]{>name,&[vendor]>kind{color:var(--d54);font-style:italic;}}
        }
        &[companies]{button{icon,name{border:0;padding:0;}}}
    }
    >top{
        height:44px;line-height:44px;text-align:center;background:var(--d2);bottom:44px;display:flex;flex-direction:row;position:sticky;top:0;height:44px;width:100%;z-index:9999;
        button{align-items:center;color:var(--bl2);display:flex;fill:var(--bl2);flex-direction:row;flex-grow:0;font-size:16px;gap:6px;line-height:44px;padding:0 16px;width:max-content;&:last-child{align-items:flex-end;justify-content:flex-end;}}
        h3{color:var(--l9);flex-grow:1;font-size:16px;font-weight:bold;width:40vw;}
    }

}
profile,vendor{
    display:flex;flex-direction:column;z-index:99999;background:var(--d2);color:var(--l9);width:100vw;
    actions{
        align-items:center;border-top:.5px solid var(--d52);display:flex;flex-direction:row;gap:16px;justify-content:space-between;padding:34px 16px 16px;
        button{
            border-radius:12px;color:var(--l0);height:34px;width:109px;flex-grow:1;
            &[block]{background:var(--rd1);}
            &[mute]{background:var(--l0);color:var(--d1);}
            &[report]{background:var(--d4);}
        }
    }
    details{
        background:var(--d1);min-height:44px;
        icon{rotate:180deg;}
        inner{
            color:var(--l0);display:flex;flex-direction:column;width:100%;
            contract{align-items:center;border-bottom:.5px solid var(--d52);display:flex;flex-direction:row;font-size:16px;height:51px;justify-content:space-between;padding:0 16px;width:100%;}
            mychats,mycontracts,mymap,myreviews,myschedule,mytasks{display:flex;flex-direction:column;font-size:13px;}
            mychats{
                chat{
                    display:flex;flex-direction:row;height:68px;padding:0 16px;width:100%;
                    *{height:100%;}
                    icon{flex-grow:0;text-align:right;width:34px;}
                    info{
                        display:flex;flex-direction:column;flex-grow:1;padding:16px 0;width:50%;
                        chatname{color:var(--l0);font-size:16px;}
                        date{color:var(--d5);font-size:12px;}
                    }
                }
            }
            mymap{loc{display:flex;flex-direction:Row;height:70px;line-height:70px;padding:0 16px;text-align:center;font-style:italic;width:100vw;}map{align-items:center;background:var(--d2);color:var(--l3);display:flex;flex-direction:column;height:100vw;justify-content:center;width:100vw;}&[offline]{loc{color:var(--d5);display:inline;height:44px;line-height:44px;}map{display:none;}}}
            myreviews{flex-direction:column-reverse;overview{background:var(--gr61);border-radius:10px;box-sizing:border-box;display:flex;flex-direction:row;height:max-content;justify-content:space-between;padding:16px;margin:16px 16px 24px;width:calc(100% - 32px);chart{align-items:center;display:flex;flex-direction:column;flex-grow:0;gap:8px;justify-content:flex-start;width:151px;bar{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;width:100%;span{font-family:'InterBold';width:10px;text-align:center;}svg{margin:0 5px;}total{background:var(--g2);display:block;height:6px;border-radius:10px;}}}totals{color:var(--l0);display:flex;flex-direction:column;flex-grow:0;font-family:'InterBold';gap:8px;text-align:right;width:100px;>*{width:100%;}revtotal{font-size:14px;}score{font-size:40px;height:40px;line-height:40px;width:100%;}stars{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%;svg{fill:var(--l0);height:16px;width:16px;}&[score="1"],&[score="2"],&[score="3"],&[score="4"],&[score="5"]{svg:first-child{fill:var(--yw1);}}&[score="2"],&[score="3"],&[score="4"],&[score="5"]{svg:nth-child(2){fill:var(--yw1);}}&[score="3"],&[score="4"],&[score="5"]{svg:nth-child(3){fill:var(--yw1);}}&[score="4"],&[score="5"]{svg:nth-child(4){fill:var(--yw1);}}&[score="5"]{svg:last-child(5){fill:var(--yw1);}}}}}reviews{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:0 16px 16px;width:calc(100% - 32px);}}
            none{margin-top:0;min-height:44px;padding:16px;width:100%;text-align:center;}
            >row{
                align-items:flex-start;display:flex;flex-direction:row;max-height:max-content;min-height:50px;justify-content:space-between;width:100%;
                div{
                    box-sizing:border-box;display:flex;flex-direction:row;font-size:16px;line-height:50px;min-height:50px;
                    &:first-child{flex-grow:1;height:50px;max-width:112px;min-width:112px;padding:0 16px;width:112px;}
                    &:last-child,&>name:first-child{border-bottom:0.5px solid var(--d52);flex-grow:1;flex-direction:column;width:25%;}
                    &>name:first-child{width:100%;}
                }
                &[dept]{
                    display:flex;flex-grow:0;height:50px;line-height:50px;max-height:50px;min-height:50px;
                    div{height:50px;line-height:50px;max-height:50px;min-height:50px;&:last-child{align-items:center;flex-direction:row;}}
                }
            }
            &[hours]{display:flex;flex-direction:column;}
        }
        summary{align-items:center;background:var(--gr1);border-top:.5px solid var(--d52);border-bottom:.5px solid transparent;display:flex;flex-direction:row;font-family:'InterBold';font-size:16px;height:44px;justify-content:space-between;padding:0 16px;}
        &[open]{summary{border-bottom:.5px solid var(--d52);}icon{rotate:0deg;}}
    }
    personal{align-items:center;background:var(--d1);border-top:.5px solid var(--d3);display:flex;flex-direction:row;gap:auto;height:66px;padding:11px 16px;width:100vw;methods{align-items:center;display:flex;flex-direction:row;flex-grow:0;gap:18px;margin-left:16px;min-width:150px;width:max-content;button,a{height:24px;width:24px;&[state="0"]{pointer-events:none;opacity:.25;}}}user,company{display:flex;flex-direction:column;flex-grow:1;width:20vw;name{color:var(--l0);font-family:'InterBold';font-size:18px;letter-spacing:-0.42px;overflow:hidden;white-space:nowrap;}phone{color:var(--d5);font-size:16px;}}}
    picture{
        align-items:center;background:var(--d1);color:var(--l9);display:flex;flex-direction:column;height:100vw;justify-content:center;overflow:hidden;text-align:center;width:100vw;
        >img{
            height:auto;pointer-events:none;
        }
        >none{color:var(--l9);box-sizing:border-box;font-size:20px;font-family:'InterBold';margin:20px;position:relative;}
        &[hi='0']{>img{display:none;}}
        &[hi='1']{>img{height:auto;width:100vw;}}
    }
    top{
        background:var(--d2);bottom:44px;display:flex;flex-direction:row;position:sticky;top:0;height:44px;width:100%;z-index:9999;
        *{height:44px;font-size:16px;line-height:44px;text-align:center;}
        button{align-items:center;color:var(--bl2);display:flex;fill:var(--bl2);flex-direction:row;flex-grow:0;gap:6px;line-height:44px;margin:0 0 0 9px;width:25vw;svg{height:21px;width:12px;}&:last-child{justify-content:flex-end;padding-right:16px;}}
        h3{flex-grow:1;font-weight:bold;width:40vw;}
    }
}
search{
    align-content:center;display:flex;flex-direction:column;justify-content:flex-start;padding:16px;position:relative;width:100%;
    div{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;min-height:72px;width:100%;>*{>*{pointer-events:none;}}item{background:var(--bl1);color:var(--d0);display:flex;flex-direction:row;height:34px;padding:16px;border-radius:20px;line-height:4px;align-items:center;gap:8px;width:max-content;>icon{>svg{fill:var(--d0);}}}}
    input{background:var(--l0);border-radius:90px;color:var(--d1);height:34px;padding:0 16px;position:relative;margin:0 0 16px;z-index:200;}
    results{background:var(--l0);border-radius:0 0 20px 20px;display:flex;flex-direction:column;align-items:flex-start;padding-top:15px;justify-content:flex-start;color:var(--d1);height:100px;left:0;margin:0 16px;overflow-x:hidden;overflow-y:auto;position:absolute;right:0;top:35px;width:calc(100% - 32px);z-index:199;>result{height:38px;line-height:38px;padding:0 16px;width:100%;}}
}
views{
    display:block;grid-area:v;height:calc(100% - 63.5px);overflow-x:hidden;overflow-y:auto;position:relative;width:100%;
    chatnew{
        background:var(--d2);display:flex;flex-direction:column;width:100%;position:fixed;top:0;height:calc(100% - 63.5px);
        form{
            align-items:center;display:flex;flex-direction:row;min-height:50px;justify-content:flex-start;width:100%;
            button{align-self:flex-start;height:44px;width:44px;svg{stroke:var(--l0);}}
            span{align-self:flex-start;color:var(--d5);height:50px;line-height:50px;text-align:center;width:50px;}
            label{flex-grow:1;height:100%;margin:0;padding:0;width:40%;div{display:flex;flex-direction:column;margin:8px 0 8px 8px;}}
            user{color:var(--l0);line-height:33px;height:33px;max-height:33px;min-height:33px;}
            &[error]{background:var(--rd1);}
        }
        thread{flex-grow:1;height:50%;width:100%;}
        >top{
            border-bottom:0;display:flex;flex-direction:row;height:44px;margin:0 16px;position:relative;
            button{color:var(--d5);height:100%;position:absolute;right:0;}
            h5{color:var(--l0);display:flex;height:100%;text-align:center;width:100%;align-items:center;justify-content:center;}
        }
        users{height:calc(100% - calc(83px + 94px));position:absolute;overflow-y:auto;top:94px;}
    }
    contact{
        height:100%;max-height:max-content;min-height:max-content;width:100%;margin-top:44px;position:relative;top:-44px;
        details{
            height:max-content;min-height:0;padding:0 16px;transition:all 20ms 1ms ease-in-out;width:100vw;
            summary{border-bottom:1px solid var(--d4);color:var(--d5);font-size:15px;font-family:'InterSemiBold';height:44px;line-height:44px;width:100%;}
            button{border-bottom:1px solid var(--d4);color:var(--l0);font-size:21px;height:44px;line-height:44px;max-height:44px;min-height:44px;text-align:left;text-transform:capitalize;width:100%;>span{font-size:16px;pointer-events:none;&:first-child{font-family:'Inter';margin-right:4px;}&:last-child{font-family:'InterBold';}}}
            &[open]{transition:all 20ms 1ms ease-in-out;}
        }
        &[f='user']{button:not([is='user']){display:none;opacity:0;visibility:hidden;}}
        &[f='vendor']{button:not([is='vendor']){display:none;opacity:0;visibility:hidden;}}
    }
    doc{
        align-items:center;background:var(--d1);bottom:0;display:flex;flex-direction:column;left:0;justify-content:flex-start;position:fixed;right:0;top:0;width:100%;
        top{
            background:var(--d1);color:var(--l9);display:flex;flex-direction:row;font-size:14px;height:44px;line-height:44px;width:100%;
            button{
                color:var(--l9);display:flex;flex-direction:row;flex-grow:0;gap:10px;line-height:44px;overflow:hidden;padding:0 10px;pointer-events:all;width:100px;white-space:nowrap;
                svg{fill:var(--l9);margin:10px 0;}
                &:first-child{width:max-content;}
                &:last-child{justify-content:flex-end;}
            }
            span{flex-grow:1;text-align:left;width:50%;}
        }
        >img{width:100%;}
    }
    navigator{align-items:center;justify-content:center;display:flex;flex-direction:column;font-size:11pt;height:100%;position:fixed;right:11px;text-align:center;top:0;width:10px;z-index:999999;a{color:var(--bl2);text-decoration:none;}}
    none{color:var(--d6);font-size:15px;margin-top:16px;text-align:center;width:100%;h3{font-size:24px;margin-bottom:8px;}}
    section{
        display:none;flex-direction:column;width:100%;
        &[active]{display:flex;}
        >top{
            color:var(--l0);background-color:var(--d2);display:flex;flex-direction:row;grid-area:t;height:73px;justify-content:space-between;line-height:73px;margin:0 16px;position:sticky;top:0;
            button{align-items:flex-end;display:flex;flex-direction:column;flex-grow:0;height:73px;justify-content:center;position:relative;width:52px;>svg{position:absolute;stroke:var(--l0);}}
            h2{flex-grow:1;height:73px;margin:0;padding:0;position:sticky;top:-40px;width:50%;}
        }
        &[chats]{
            chat{
                background:var(--d1);bottom:100px;height:calc(100% - 63px);left:0;position:fixed;right:0;top:0;width:100%;
                >thread{
                    display:flex;flex-direction:column;height:calc(100% - 88px);overflow-x:hidden;overflow-y:auto;padding:16px;width:100%;
                    >msg{
                        display:flex;flex-direction:row;max-width:max-content;min-width:10vw;
                        iconmi, iconu{align-self:flex-end;font-size:10px;height:32px;line-height:28px;min-height:32px;min-width:32px;width:32px;}
                        m{
                            background:var(--d7);border-radius:8px;display:flex;flex-direction:row;flex-grow:1;font-size:16px;font-family:'Inter';margin:2px;max-width:80vw;padding:8px;width:max-content;
                            s{margin-left:2.5px;position:relative;top:4px;svg{height:14px;}}
                            te{width:calc(100% - 40px);}
                            ti{align-self:flex-end;color:var(--d4);display:flex;flex-direction:column-reverse;flex-grow:0;font-size:11px;margin:0 0 0 17px;text-align:right;width:40px;}
                            tx{flex-grow:1;width:50%;}
                        }
                        s{display:none;}
                        &[u='me']{margin-left:auto;iconu{display:none;}m{background:var(--p3);}s{display:block;}}
                        &[g='0']{iconu{display:none;}}
                        &[typing]{width:100vw;display:flex;height:74px;color:white;max-height:44px;min-height:44px;line-height:44px;flex-direction:row;}
                        &[sent]{>m{>ti{flex-direction:row;align-items:center;justify-content:flex-end;gap:2.5px;}}}
                    }
                    &[g='0']{
                        msg{
                            >iconn{display:none;}
                        }
                    }
                }
                >top{
                    align-items:center;display:flex;flex-direction:row;height:44px;justify-content:center;padding:0 16px 0 0;width:100%;z-index:var(--zi-chattop);
                    button{
                        margin-right:16px;user-select:none;
                        svg{stroke:var(--l0);}
                        &[back]{height:44px;margin-right:0;width:44px;svg{stroke:var(--bl2);}}
                        &[users]{margin-right:0;>iconu{width:36px;height:36px;display:block;line-height:32px;text-align:center;}}
                        &:last-child{margin-right:0;}
                    }
                    info{
                        display:flex;flex-direction:column;flex-grow:1;margin-right:20px;overflow:hidden;width:calc(50% - 20px);
                        *{pointer-events:none;}
                        >name{color:var(--l0);font-family:'InterBold';font-size:16px;white-space:nowrap;}
                        >text{color:var(--d5);font-family:'Inter';font-size:12px;user-select:none;}
                    }
                }
                &[s]{m{>iconu{display:none;}}}
            }
            editusers{
                background:var(--d1);color:var(--l0);display:flex;flex-direction:column;left:0;position:absolute;top:0;right:0;z-index:var(--zi-over);bottom:0;
                top{align-items:center;border-bottom:0;display:flex;flex-direction:row;height:44px;justify-content:center;width:100%;button{color:var(--d5);display:block;font-size:17px;position:absolute;right:0;height:44px;margin-right:16px;}}
                userse{display:flex;flex-direction:row;height:33px;all{display:flex;flex-direction:row;flex-grow:1;width:50%;}button{margin-right:16px;>svg{stroke:var(--l0);}}button,span{flex-grow:0;}span{line-height:50px;margin:0 24px 0 16px;}}
                usersc{position:absolute;top:86px;height:calc(100% - calc(64px + 83.5px));overflow-y:auto;}
            }
            view{
                align-items:center;border-top:.5px solid var(--d52);display:flex;flex-direction:column;justify-content:flex-start;height:max-content;max-height:max-content;min-height:100%;overscroll-behavior:none;padding:0px;width:100vw;
                chatitem{
                    align-items:center;border-bottom:.5px solid var(--d52);display:flex;flex-direction:row;height:73.5px;justify-content:flex-start;padding:11px 16px;width:100%;button{flex-grow:0;height:52px;line-height:52px;>svg{fill:var(--l9);}}
                    &[n]{&::before{color:var(--l0);content:'•';font-size:20pt;margin:0 10px 0 -10px;}}
                    summary{color:var(--l0);display:flex;height:100%;flex-direction:column;flex-grow:1;justify-content:center;margin-right:16px;pointer-events:none;user-select:none;width:50%;>row{&:first-child{display:flex;flex-direction:row;gap:auto;justify-content:space-between;line-height:21px;>date,>data{font-size:14px;color:var(--d5);}>name{font-size:16px;color:var(--l0);}}&:last-child{color:var(--d5);font-size:14px;overflow:hidden;}}}
                }
            }
            top{border-bottom:.5px solid var(--d52);margin:0;padding:0 16px;}
            user{border-radius:8px;display:flex;font-size:16px;height:33px;margin:9px 3px;padding:6px 12px;background-color:var(--d3);white-space:nowrap;&:nth-child(2n){color:var(--bl2);}&:nth-child(2n + 1){color:var(--l0);}}
            users{height:max-content;max-height:84%;min-height:50px;overflow-x:hidden;overflow-y:auto;position:absolute;top:94px;width:100%;}
        }
        &[contacts]{
            view{   
                align-items:center;display:flex;flex-direction:column;max-height:max-content;position:sticky;width:100%;
                background:var(--d2);
                filter{
                    background:var(--d2);display:flex;flex-direction:column;padding:16px 16px 0 16px;position:sticky;top:0;width:100%;
                    label{position:relative;iconi{height:36px;left:16px;line-height:38px;position:absolute;top:0;}input{background:var(--d4);border:0;border-radius:10px;color:var(--l0);height:36px;padding:0 0 0 44px;width:100%;&::placeholder{color:var(--d5);}}}
                    label,row{height:36px;width:100%;}
                    row{
                        align-items:center;display:flex;flex-direction:row;gap:16px;margin:16px 0;
                        >*{flex-grow:0;height:34px;line-height:34px;}
                        buttons{display:flex;flex-direction:row;gap:16px;width:100%;}
                        button{background:var(--d4);border-radius:10px;color:var(--l0);flex-grow:1;padding:0 16px;&[all],&[people],&[vendor]{flex-grow:0;max-width:max-content;}&[active]{background:var(--bl2);}}
                        select{background:var(--d4);border:0;border-radius:10px;color:var(--l0);flex-grow:1;height:34px;padding:0 14px 0 7px;width:25%;}
                    }
                }
            }
            &[profile][active],&[vendor][active]{>top,view{display:none;opacity:0;visibility:hidden;}}
        }
        &[home]{
            top{justify-content:space-between;h5{font-weight:normal;margin:0;padding:0;}button{height:73px;width:73px;}}
            view{
                padding:0 16px 16px;width:100%;
                button{background:var(--gr4);border:1px solid var(--gr4);border-radius:10px;color:var(--l0);height:44px;}
                details{
                    border:.5px solid var(--gr4);border-radius:10px;width:100%;
                    >*{display:block;width:100%;}
                    inner{background:var(--gr4);border-radius:0 0 10px 10px;display:none;overflow:hidden;padding:16px;}
                    summary{
                        border-bottom:0;border-radius:10px 10px 0 0;display:flex;flex-direction:row;height:38px;justify-content:space-between;line-height:38px;max-height:38px;min-height:38px;overflow:hidden;
                        button{background:transparent;border:0;color:var(--bl2);line-height:38px;max-height:38px;min-height:38px;}
                        span{height:38px;}
                        &[head]{color:var(--l0);font-family:'InterBold';font-size:20px;padding:0 16px;}
                    }
                    &[open]{inner{display:block;}}
                }
                full{
                    color:var(--d5);display:block;font-size:16px;height:max-content;margin:0 0 16px;min-height:44px;width:100%;
                    button{background:var(--bl2);color:var(--d2);font-family:'InterBold';font-size:14px;}
                    >*{width:100%;}
                    &[alerts]{
                        margin:0;
                        alerts{
                            details{
                                border:0;border-radius:0;margin-bottom:16px;
                                inner{
                                    background:transparent;padding:16px 0 25px 0;
                                    item{
                                        align-items:center;background:var(--gr5);border-radius:10px;display:flex;flex-direction:row;height:56px;justify-content:space-between;padding:11px 16px;width:100%;
                                        button{background:var(--bl2);color:var(--d2);font-family:'InterBold';font-size:14px;height:34px;max-width:139px;min-width:139px;text-align:center;width:139px;}
                                    }
                                }
                                summary{background:#1F1F1F;border-radius:0;height:44px;line-height:44px;max-height:44px;min-height:44px;padding:0 0 0 16px;width:calc(100% + 32px);margin:0 0 0 -16px;>svg{height:12px;max-height:12px;max-width:7px;min-height:12px;min-width:7px;margin:16px;width:7px;}}
                                &[open]{margin-bottom:0px;summary{>svg{rotate:90deg;}}}
                            }
                        }
                        info{display:block;margin-bottom:16px;}
                    }
                }
                greet{color:var(--l0);display:block;font-family:'InterBold';font-size:20px;width:100%;margin:0 0 25px;}
            }
        }
        &[schedule]{
            background:var(--d1);height:max-content;min-height:100%;width:100%;
            top{background:var(--d1);}
            view{
                display:flex;flex-direction:column;height:100%;flex-grow:1;
                calendar{
                    height:100%;overflow:hidden;width:100vw;
                    >button{width:100%;}
                    month{
                        align-items:center;display:flex;flex-direction:row;height:44px;justify-content:center;line-height:44px;width:100%;           
                        >button{padding:0 16px;width:50px;}
                        >span{color:var(--bl2);flex-grow:1;text-align:center;width:50%;}            
                    }
                    table{
                        width:100%;
                        td{color:var(--d5);>*{pointer-events:none;}&[today]{font-family:'InterBold';position:relative;color:var(--l0);}}
                        td,th{width:calc(100% / 7);}
                        thead{color:var(--d54);font-size:13px;font-family:'Inter';height:18px;margin:4px 0 10px 0;max-height:18px;min-height:18px;text-transform:uppercase;width:100%;}
                        tr{height:52px;line-height:52px;max-height:52px;min-height:52px;text-align:center;width:100%;}
                    }
                    &[v='2']{table{>thead{height:18px;}tr{&[not]{display:none;}&[not][cnx]{display:contents;}}}}
                    &[v='3']{table{>thead{height:18px;}tr{&[curr]{display:contents;}&[not]{display:none;}}}}
                }
                schedule{
                    align-items:center;display:flex;flex-direction:column;flex-grow:1;height:30%;justify-content:flex-start;
                    inner{
                        width:100%;min-height:68px;
                        *{height:68px;line-height:68px;padding:0 16px;width:100%;}
                        none{display:block;text-align:center;}
                        item{background:var(--d45);}
                    }
                    top{background:var(--d2);color:var(--l0);font-family:'InterBold';height:44px;line-height:44px;padding:0 16px;width:100%;}
                }
            }
        }
        &[settings]{
            top{z-index:1;}
            view{
                align-items:center;background:var(--d2);color:var(--d5);display:flex;flex-direction:column;flex-grow:1;height:calc(100% - 44px);justify-content:flex-start;width:100%;
                z-index:999;
                button{align-items:center;border-bottom:.5px solid var(--d52);color:var(--d5);display:flex;flex-direction:row;font-size:18px;height:44px;justify-content:space-between;line-height:44px;padding:0 16px;width:100%;svg{height:12px;width:7px;}}
                >details{
                    background:var(--d2);position:sticky;top:68px;width:100%;
                    >summary{background:var(--gr1);border-bottom:.5px solid var(--d52);border-top:.5px solid var(--d52);font-family:'InterBold';height:44px;line-height:44px;padding:0 16px;width:100%;}
                    button{border-bottom:.5px solid var(--d52);display:block;height:44px;line-height:44px;padding:0 16px;text-align:left;width:100%;}
                    details{
                        border-bottom:.5px solid var(--d52);
                        summary{align-items:center;display:flex;flex-direction:row;font-family:'Inter';height:44px;justify-content:space-between;line-height:44px;padding:0 16px;width:100%;}
                        inner{
                            display:block;height:max-content;max-height:max-content;min-height:44px;padding:16px 0;width:100%;
                            full{
                                display:flex;flex-direction:row;padding:0 16px;width:100%;
                                form{
                                    display:flex;flex-direction:column;height:100%;justify-content:center;
                                    div{font-size:14px;text-align:left;margin:0 0 8px;}
                                    label{width:100%;input[type='file']{width:90px;}}
                                }
                                preview{display:block;flex-grow:0;height:100px;margin-right:16px;min-width:100px;overflow:hidden;width:100px;icon{align-items:center;display:flex;height:100px;justify-content:center;text-align:center;width:100px;img{height:100px;width:auto;}}}
                            }
                            h4{font-size:16px;margin:0 0 16px 0;padding:0 16px;width:100%;}
                            none{display:block;line-height:44px;text-align:center;}
                        }
                        &[open]{height:max-content;summary{border-bottom:.5px solid var(--d52);svg{rotate:90deg;}}}
                    }
                    switch{
                        border-bottom:.5px solid var(--d52);display:block;height:44px;width:100%;
                        label{
                            align-items:center;display:flex;flex-direction:row;height:44px;justify-content:space-between;min-height:44px;max-height:44px;padding:0 16px;width:100%;
                            input{opacity:0;visibility:hidden;}
                            toggle{
                                background-color:var(--d4);border-radius:90px;display:flex;flex-direction:row;height:31px;line-height:31px;overflow:hidden;position:relative;width:51px;
                                >div{background:var(--d5);border-radius:90px;height:27px;margin:2px;pointer-events:none;position:relative;right:0px;width:27px;transition:right calc(167ms / 2) 167ms ease-in-out;}   
                                &[on]{background:green;>div{background:var(--l0);right:-20px;}}
                            }
                        }
                    }
                    &[admin]{summary{align-items:center;display:flex;flex-direction:row;justify-content:space-between;background:var(--rd2);}}
                    &[open]{height:max-content;summary{border-bottom:.5px solid var(--d52);svg{rotate:90deg;}}}
                }
                search{
                    background:var(--d2);padding:16px;position:sticky;top:0;width:100%;
                    label{
                        position:relative;width:100%;
                        icon{bottom:0;height:16px;left:8px;margin-right:3.5px;position:absolute;top:2px;z-index:999;width:16px;svg{height:16px;width:16px;}}
                        input{background:var(--gr1);border:0;border-radius:10px;color:var(--d5);font-size:17px;height:36px;padding:8px 8px 8px 28px;position:relative;width:100%;z-index:99;}
                    }
                }
            }
        }
        &[tasks]{
            height:100%;width:100%;
            page{
                height:100%;min-height:100%;overflow-x:hidden;overflow-y:auto;
                inner{
                    row{
                        background:var(--gr4);height:68px;
                        button{pointer-events:all;}
                        div{border:0;&:first-child{font-family:'InterBold';font-size:14px;}}
                        &[cancel]{background:transparent;border:0;padding:16px;>button{background:var(--rd1);border:0;border-radius:10px;color:var(--l0);display:block;font-family:'InterBold';font-style:normal;text-align:center;width:100%;}}
                        &[contact]{div:last-child{line-height:20px;display:flex;flex-direction:row;align-items:center;gap:8px;}}
                        &[map]{height:100vw;width:100vw;}
                        &[vendor]{
                            height:max-content;max-height:max-content;min-height:max-content;
                            div:last-child{
                                line-height:20px;display:flex;flex-direction:row;align-items:center;gap:16px;
                                >div{align-items:flex-end;display:flex;flex-direction:column;font-size:14px;justify-content:flex-end;line-height:12px;>pocn{font-family:'InterBold';}}
                                >button{align-self:flex-end;flex-grow:0;height:14px;line-height:14px;margin-bottom:4px;min-height:14px;min-width:14px;padding:0;text-align:center;width:14px;display:flex;flex-direction:column;border:0;svg{padding:0;}}
                            }
                        }
                    }
                }
                top{
                    align-items:flex-start;display:flex;flex-direction:row;height:68px;justify-content:center;line-height:68px;margin:0;width:100%;
                    >*{height:68px;}
                    button{align-items:center;height:68px;justify-content:center;line-height:68px;text-align:center;width:68px;}
                    div{color:var(--l9);padding:0 8px;width:max-content;>span{font-family:'InterBold';}}
                    info{
                        align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;justify-content:center;padding:0 0 0 16px;
                        >name{color:var(--l0);font-size:16px;height:20px;}
                        >place{color:var(--d5);font-size:12px;}
                    }
                }
            }
            top{margin:0 0 0 16px;>button{align-items:center;}}
            view{
                >details{
                    background:var(--d2);
                    position:sticky;top:68px;width:100%;
                    >inner{
                        display:block;max-height:max-content;min-height:68px;text-align:center;width:100%;
                        >*{height:68px;}
                        none{display:block;height:68px;margin:0;line-height:68px;width:100%;}
                        task{
                            align-items:flex-start;border-bottom:.5px solid var(--d52);display:flex;flex-direction:row;height:68px;justify-content:center;line-height:68px;width:100%;
                            >*{height:68px;pointer-events:none;}
                            button{align-items:center;display:flex;flex-direction:column;justify-content:center;height:68px;line-height:68px;text-align:center;width:68px;>svg{height:18px;width:18px;}}
                            div{align-items:center;color:var(--l9);display:flex;flex-direction:row;padding:0;width:max-content;>span{font-family:'InterBold';}}
                            info{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;justify-content:center;padding:0 0 0 16px;>name{color:var(--l0);font-size:16px;height:20px;}>place{color:var(--d5);font-size:12px;}}
                            text{display:flex;flex-direction:row;font-size:12px;span{&:first-child{display:inline-block;margin-right:5px;width:38px;text-align:right;}}}
                            wheel{
                                flex-grow:0;height:21px;max-width:21px;position:relative;width:21px;
                                circle{
                                    border-style:solid;border-width:4px;background:transparent;border-radius:90px;bottom:0;display:block;height:21px;left:0;position:absolute;right:0;top:0;width:21px;
                                    &[a]{border:0;aspect-ratio:1;background-color:var(--d4);border-radius:50%;display:grid;place-items:center;}
                                    &[b]{border:0;background:var(--d2);width:13px;height:13px;position:absolute;left:4px;top:4px;}
                                    &[p='0']{background-image:conic-gradient(from 0deg,lightgray 0deg 0deg,transparent 0deg);}
                                    &[p='10']{background-image:conic-gradient(from 0deg,lightgray 0deg 30deg,transparent 30deg);}
                                    &[p='20']{background-image:conic-gradient(from 0deg,lightgray 0deg 60deg,transparent 60deg);}
                                    &[p='30']{background-image:conic-gradient(from 0deg,lightgray 0deg 90deg,transparent 90deg);}
                                    &[p='40']{background-image:conic-gradient(from 0deg,lightgray 0deg 120deg,transparent 120deg);}
                                    &[p='50']{background-image:conic-gradient(from 0deg,lightgray 0deg 150deg,transparent 150deg);}
                                    &[p='60']{background-image:conic-gradient(from 0deg,lightgray 0deg 180deg,transparent 180deg);}
                                    &[p='70']{background-image:conic-gradient(from 0deg,lightgray 0deg 210deg,transparent 210deg);}
                                    &[p='80']{background-image:conic-gradient(from 0deg,lightgray 0deg 240deg,transparent 240deg);}
                                    &[p='90']{background-image:conic-gradient(from 0deg,lightgray 0deg 270deg,transparent 270deg);}
                                    &[p='100']{background-image:conic-gradient(from 0deg,lightgray 0deg 300deg,transparent 300deg);}
                                }
                            }
                            &:last-child{border-bottom:0;}
                        }
                    }
                    >summary{align-items:center;background:var(--gr3);border-top:.5px solid var(--d52);color:var(--d5);display:flex;flex-direction:row;font-family:'InterBold';height:44px;line-height:44px;padding:0 16px;width:100%;svg{margin:0 auto 0 8px;}span{color:var(--l0);font-family:'Inter';font-size:14px;margin:0 4px 0 0;}}
                    &[open]{>summary{border-bottom:.5px solid var(--d52);}}
                    &:last-child{>summary{border-bottom:.5px solid var(--d52);}}
                    &[all]{
                        inner{
                            task{
                                align-items:flex-start;border-bottom:.5px solid var(--d52);color:var(--l0);display:flex;flex-direction:row;font-size:14px;justify-content:flex-start;
                                >*{pointer-events:all;}
                                div{align-items:flex-end;display:flex;flex-direction:row;flex-grow:0;justify-content:flex-end;max-width:calc(68px * 3);min-width:calc(68px * 3);padding:0;width:calc(68px * 3);>button{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--l0);height:100%;width:68px;}}
                                name{flex-grow:1;padding:0 16px;text-align:left;width:50%;}
                            }
                        }
                    }
                }
            }
        }
        view{filter{z-index:999;}}
    }
    >view{
        background:var(--d2);bottom:0;display:flex;flex-direction:column;height:calc(100% - 63px);max-height:calc(100% - 63px);min-height:calc(100% - 63px);left:0;overflow-x:hidden;overflow-y:auto;position:fixed;right:0;top:0;width:100%;
        >form{
            align-items:flex-start;display:flex;flex-direction:column;font-size:16px;height:max-content;justify-content:center;max-height:max-content;min-height:max-content;position:sticky;top:44px;width:100%;
            details{
                background:var(--d1);min-height:44px;overflow:hidden;width:100%;
                icon{rotate:180deg;}
                inner{
                    border-bottom:.5px solid var(--d53);color:var(--l0);display:flex;flex-direction:column;width:100%;position:relative; 
                    button{align-items:center;border:1px solid var(--bl2);border-radius:10px;color:var(--bl2);display:flex;flex-direction:row;flex-grow:0;font-family:'InterBold';font-size:14px;gap:10px;height:34px;justify-content:center;line-height:34px;margin:16px;width:calc(100% - 32px);}
                    >div{color:var(--l3);height:max-content;max-height:max-content;min-height:38px;padding:16px;font-size:14px;font-style:italic;line-height:16px;}
                    label{
                        align-items:flex-start;
                        display:flex;flex-direction:row;height:50px;justify-content:space-between;max-height:50px;min-height:max-content;width:100%;
                        input[error]{border-bottom:2px solid red;}
                        >*{box-sizing:border-box;color:var(--l0);line-height:50px;max-height:50px;min-height:50px;outline:0;padding:0 16px;width:100%;}
                        >div{
                            display:flex;flex-direction:row;font-size:16px;
                            &:first-child{color:var(--d5);flex-grow:1;height:50px;max-width:112px;min-width:112px;overflow:hidden;white-space:nowrap;width:112px;}
                            &[name]{&:first-child{border-bottom:.5px solid var(--d53);}&:last-child{display:flex;flex-direction:column;font-size:16px;max-height:100px;min-height:100px;padding:0;>input{border-bottom:.5px solid var(--d53);color:var(--l0);height:50px;font-size:16px;line-height:50px;max-height:50px;min-height:50px;width:100%;}}}
                            &:last-child{padding:0;}
                        }
                        >input{border-bottom:.5px solid var(--d53);font-size:14px;padding:0;width:calc(100% - 32px);}
                        >select{
                            appearance:none;-webkit-appearance:none;background:transparent;border:0;border-bottom:.5px solid var(--d53);font-size:14px;padding:0;
                            &[multiple]{
                                overflow-x:hidden;overflow-y:auto;padding:0;
                                >option{display:block;height:44px;max-height:max-content;padding:16px;}
                            }
                        }
                        textarea{
                            background:transparent;
                            border:0;
                            border-bottom:.5px solid var(--d53);
                            color:var(--l0);
                            font-family:'Inter';
                            height:100px;
                            line-height:16px;
                            max-height:100px;
                            min-height:100px;
                            padding:16px 16px 16px 0;
                            width:100%;
                        }
                        &[desc]{
                            height:100px;
                            max-height:100px;
                            min-height:100px;
                        }
                        &:last-child{>*{border-bottom:0;}}
                    }
                }
                summary{align-items:center;background:var(--gr1);border-top:.5px solid var(--d52);border-bottom:.5px solid transparent;color:var(--d5);display:flex;flex-direction:row;font-family:'InterBold';font-size:16px;height:44px;justify-content:space-between;padding:0 16px;icon{rotate:-90deg;svg{fill:var(--d5);}}}
                &[open]{summary{border-bottom:.5px solid var(--d52);icon{rotate:0deg;}}}
            }
            >input,select{color:var(--l0);font-size:16px;}
            personal{align-items:center;background:var(--d1);border-top:.5px solid var(--d3);display:flex;flex-direction:row;gap:auto;height:66px;padding:11px 16px;width:100vw;methods{align-items:center;display:flex;flex-direction:row;flex-grow:0;gap:18px;margin-left:16px;min-width:150px;width:max-content;button,a{height:24px;width:24px;&[state="0"]{pointer-events:none;opacity:.25;}}}user,company{display:flex;flex-direction:column;flex-grow:1;width:20vw;name{color:var(--l0);font-family:'InterBold';font-size:18px;letter-spacing:-0.42px;overflow:hidden;white-space:nowrap;&>first{margin:0 8px 0 0;}}phone{color:var(--d5);font-size:16px;}}}
            photo{
                align-items:center;display:flex;flex-direction:column;position:relative;height:100vw;left:0;justify-content:center;max-height:100vw;min-height:100vw;overflow:hidden;text-align:center;top:0;width:100vw;
                >*{position:absolute;}
                form{
                    align-items:center;flex-direction:column;
                    button{background:#5246FF;border-radius:10px;color:var(--l0);font-family:'Inter';height:38px;letter-spacing:.02px;width:100px;}
                    sep{border:0;color:var(--l0);display:block;margin:16px 0;}
                    input{z-index:100;&[type='file']{font-size:10px;width:70px;}}
                }
                img{align-self:center;min-height:102vw;z-index:1000;width:102vw;}
                &[none]{>img{display:none;}>form{display:flex;}}
                &[active]{>form{display:none;}>img{display:block;}}
            }
        }
        >top{background:var(--d2);height:44px;line-height:44px;text-align:center;bottom:44px;display:flex;flex-direction:row;position:sticky;top:0;height:44px;width:100%;z-index:9999;button{align-items:center;color:var(--bl2);display:flex;fill:var(--bl2);flex-direction:row;flex-grow:0;font-size:16px;gap:6px;line-height:44px;padding:0 16px;width:max-content;&:last-child{align-items:flex-end;justify-content:flex-end;}}h3{color:var(--l9);flex-grow:1;font-size:16px;font-weight:bold;text-transform:capitalize;width:40vw;}}
        &[properties]{>form{details[social]{>inner{label[properties]{display:none;}}}}}
        &[vendor]{>form{details[social]{>inner{label[vendor]{display:none;}}}}}
        &[users]{>form{details[social]{>inner{label[users]{display:none;}}}}}
    }
}