/* WINCO_BLACK_OS_V1 */

:root{
    --black-os-bg:#020303;
    --black-os-bg-2:#050708;
    --black-os-surface:rgba(255,255,255,.032);
    --black-os-surface-2:rgba(255,255,255,.020);
    --black-os-line:rgba(255,255,255,.070);
    --black-os-line-soft:rgba(255,255,255,.045);
    --black-os-text:#f8fafc;
    --black-os-muted:rgba(226,232,240,.58);
    --black-os-muted-2:rgba(226,232,240,.38);
    --black-os-green:#25d366;
    --black-os-green-soft:rgba(37,211,102,.095);
    --black-os-radius-xl:28px;
    --black-os-radius-lg:22px;
    --black-os-radius-md:16px;
    --black-os-shell:1540px;
}

html{
    background:#020303 !important;
}

body{
    background:
        radial-gradient(circle at 16% -10%, rgba(37,211,102,.055), transparent 28%),
        radial-gradient(circle at 86% 0%, rgba(255,255,255,.020), transparent 25%),
        linear-gradient(180deg, #020303 0%, #040607 52%, #020303 100%) !important;
    color:var(--black-os-text) !important;
    text-rendering:geometricPrecision;
}

main,
.app-main,
.client-app-main,
.page-shell,
.app-shell,
.content,
.main-content,
.dashboard,
.dashboard-shell,
.operation-shell,
.crm-shell,
.agenda-shell,
.container,
.container-xl,
.wrapper{
    max-width:var(--black-os-shell) !important;
    width:min(var(--black-os-shell), calc(100vw - 34px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

@media(min-width:1600px){
    main,
    .app-main,
    .client-app-main,
    .page-shell,
    .app-shell,
    .content,
    .main-content,
    .dashboard,
    .dashboard-shell,
    .operation-shell,
    .crm-shell,
    .agenda-shell,
    .container,
    .container-xl,
    .wrapper{
        max-width:1640px !important;
        width:min(1640px, calc(100vw - 54px)) !important;
    }
}

h1,h2,h3{
    color:var(--black-os-text) !important;
    letter-spacing:-.055em !important;
}

p, small{
    color:var(--black-os-muted) !important;
}

.card,
.panel,
.box,
.glass,
.metric-card,
.quick-card,
.operation-card,
.lead-card,
.settings-card,
.billing-card,
.media-card,
.feature-card,
.pricing-card,
.client-card,
.stat-card,
.dashboard-card,
.landing-card,
.hero-card,
section[class*="card"],
div[class*="card"]{
    border-radius:var(--black-os-radius-xl) !important;
    border:1px solid var(--black-os-line) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.036), rgba(255,255,255,.015)) !important;
    box-shadow:
        0 22px 70px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.030) !important;
}

button,
.btn,
a.btn,
.button{
    border-radius:14px !important;
    box-shadow:none !important;
    font-weight:850 !important;
}

button:not(.danger):not(.delete):not(.remove),
.btn:not(.danger):not(.delete):not(.remove),
a.btn:not(.danger):not(.delete):not(.remove),
.button:not(.danger):not(.delete):not(.remove){
    border:1px solid rgba(255,255,255,.080) !important;
    background:rgba(255,255,255,.034) !important;
    color:rgba(248,250,252,.88) !important;
}

button:hover,
.btn:hover,
a.btn:hover,
.button:hover{
    border-color:rgba(37,211,102,.18) !important;
    background:rgba(255,255,255,.055) !important;
}

button[type="submit"],
.btn-primary,
.primary,
.cta,
.cta-primary{
    background:rgba(37,211,102,.105) !important;
    border:1px solid rgba(37,211,102,.22) !important;
    color:#bbf7d0 !important;
}

input,
select,
textarea{
    border-radius:14px !important;
    background:rgba(0,0,0,.24) !important;
    border:1px solid rgba(255,255,255,.080) !important;
    color:var(--black-os-text) !important;
    box-shadow:none !important;
    outline:none !important;
}

input:focus,
select:focus,
textarea:focus{
    border-color:rgba(37,211,102,.25) !important;
    box-shadow:0 0 0 3px rgba(37,211,102,.050) !important;
}

.pill,
.badge,
.status,
.status-pill,
.tag,
.chip{
    border:1px solid rgba(255,255,255,.070) !important;
    background:rgba(255,255,255,.030) !important;
    color:rgba(248,250,252,.80) !important;
}

.pill.active,
.badge.active,
.status.active,
.status-pill.active,
.status-pill.ok,
.status-pill.online,
.tag.active,
.chip.active{
    border-color:rgba(37,211,102,.20) !important;
    background:rgba(37,211,102,.085) !important;
    color:#bbf7d0 !important;
}

table{
    width:100%;
    border-collapse:separate !important;
    border-spacing:0 8px !important;
}

th{
    color:var(--black-os-muted-2) !important;
    font-size:11px !important;
    text-transform:uppercase;
    letter-spacing:.11em;
    font-weight:900 !important;
    border:0 !important;
}

td{
    background:rgba(255,255,255,.022) !important;
    border-top:1px solid rgba(255,255,255,.046) !important;
    border-bottom:1px solid rgba(255,255,255,.046) !important;
    color:rgba(248,250,252,.84) !important;
}

tr td:first-child{
    border-left:1px solid rgba(255,255,255,.046) !important;
    border-radius:14px 0 0 14px !important;
}

tr td:last-child{
    border-right:1px solid rgba(255,255,255,.046) !important;
    border-radius:0 14px 14px 0 !important;
}

@media(max-width:720px){
    main,
    .app-main,
    .client-app-main,
    .page-shell,
    .app-shell,
    .content,
    .main-content,
    .dashboard,
    .dashboard-shell,
    .operation-shell,
    .crm-shell,
    .agenda-shell,
    .container,
    .container-xl,
    .wrapper{
        width:calc(100vw - 24px) !important;
    }
}