@font-face {
    font-family: 'peyda';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('../fonts/PeydaWebFaNumRegular.woff2') format("woff2"), url('../fonts/PeydaWebFaNumRegular.woff2') format("woff"), url('../fonts/PeydaWebFaNumRegular.woff2') format("truetype")
}
[x-cloak] {
    display: none !important;
}
[title] {
    position: relative;
}

[title]::after {
    content: attr(title);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 999999999;
}

[title]:hover::after {
    opacity: 1;
}
[title].tooltip-bottom::after {
    bottom: auto;
    top: 125%;
}
:root {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: var(--bs-body-color);
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: var(--bs-box-shadow-sm);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);
    z-index: var(--bs-modal-zindex);
}

body {
    font-family: "peyda";
    margin: 0;
    background: #f8f9fb;
    color: #3a3f4b
}

a {
    color: inherit;
    text-decoration: none
}

ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.header {
    display: flex;
    align-items: center;
    background: #1e2749;
    color: #fff;
    padding: 5px 20px;
}

.header .logo {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 22px;
    margin-right: 30px;
    letter-spacing: -.03em
}

.header .logo svg {
    width: 30px;
    height: 30px;
    margin-right: 10px
}


nav.nav button {
    background: #1e2749;
    border: none;
    font-weight: normal;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    padding: 8px 14px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    border-bottom: 2px solid transparent;
}

nav.nav a {
    background: #1e2749;
    border: none;
    font-weight: 600;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    padding: 8px 14px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #1e2749;
    border-color: #1e2749
}

nav.nav button.active {
    background: #1e2749;
    border-bottom: 2px solid #b5a188;
    color: #fff
}

.filter-bar {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 20px 20px;
    gap: 15px;
    border-bottom: 1px solid #e2e8ef;
    height: 63px;
    /*overflow-x: auto;*/
    /*overflow-y: hidden;*/
}

.filter-bar button {
    background: transparent;
    border: none;
    color: #667085;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 8px
}

.filter-bar button.active, .filter-bar button:hover {
    color: #fff;
    padding: 9px;
    background: #fff;
    border-bottom: 2px solid #b5a188;
    font-weight: 700;
    color: #1e2749
}

.content {
    display: flex;
    gap: 30px;
    margin: 0 auto
}

.workspace-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    flex: 1
}

.workspace-item {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 1px 3px #1318731a;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: box-shadow .2s ease;
    max-height: 150px;
    text-align: center;
}

.workspace-item:hover {
    box-shadow: 0 4px 8px #13187333
}

.workspace-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 15px;
}

.workspace-info {
    display: flex;
    flex-direction: column
}

.workspace-info strong {
    font-weight: 700;
    color: #222537;
    font-size: 16px;
    line-height: 1.3
}

.workspace-info span {
    font-weight: 400;
    font-size: 13px;
    color: #667085
}

.right-panel {
    width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px #1318731a;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: #2a3a69;
    text-align: center;
    font-size: 14px
}

.right-panel h3 {
    font-weight: 600;
    font-size: 18px;
    margin: 0;
    color: #2a3a69
}

.right-panel p {
    margin: 0;
    font-weight: 400;
    font-size: 13px;
    color: #667085;
    max-width: 230px;
    line-height: 1.5
}

.right-panel img {
    width: 280px;
    user-select: none;
    border-radius: 10px
}

.right-panel .active-sessions-count {
    font-weight: 700;
    color: #2a3a69;
    font-size: 14px;
    margin-left: 8px;
    padding: 2px 9px;
    background: #f0f2f8;
    border-radius: 20px;
    display: inline-block;
    min-width: 22px;
    text-align: center
}

.button-success {
    background-color: initial;
    background-image: linear-gradient(-180deg, #00D775, #00BD68);
    border-radius: 5px;
    box-shadow: #0000001a 0 2px 4px;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-family: Inter, -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    height: 44px;
    line-height: 44px;
    outline: 0;
    overflow: hidden;
    padding: 0 20px;
    pointer-events: auto;
    position: relative;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: top;
    white-space: nowrap;
    width: 100%;
    z-index: 9;
    border: 0
}

.button-41:hover {
    background: #00bd68
}

.button-danger {
    background-color: initial;
    background-image: linear-gradient(-180deg, #e62143, #e62143);
    border-radius: 5px;
    box-shadow: #0000001a 0 2px 4px;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-family: Inter, -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    height: 44px;
    line-height: 44px;
    outline: 0;
    overflow: hidden;
    padding: 0 20px;
    pointer-events: auto;
    position: relative;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: top;
    white-space: nowrap;
    width: 100%;
    z-index: 9;
    border: 0
}

.button-41:hover {
    background: #e62143
}

.button-41:hover {
    background: #e62143
}

.launcher {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 12345;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center
}

.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}

.loader::before, .loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 5px solid #3a3f4b;
    animation: prixClipFix 2s linear infinite
}

.loader::after {
    inset: 8px;
    transform: rotate3d(90, 90, 0, 180deg);
    border-color: #FF3D00
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }
    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }
    75%, 100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }
}

.font-vazir {
    font-family: vazir;
}

.font-peyda {
    font-family: peyda;
}

.font-cf {
    font-family: cfFont;
}

.fs-35px {
    font-size: 35px !important;
}

.fs-14px {
    font-size: 14px !important;
}

.fs-13px {
    font-size: 13px !important;
}

.sidebar {
    width: 220px;
    min-width: 220px;
    background: linear-gradient(160deg, #1e2749, #1e2749);
    color: #fff;
    display: flex;
    flex-direction: column
}

.profile-pic {
    margin: 30px auto 15px;
    width: 80px;
    height: 80px;
    background-color: #3a4468;
    border-radius: 50%;
    border: 3px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 28px;
    user-select: none
}

.username {
    text-align: center;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 18px
}

.email {
    text-align: center;
    font-weight: 400;
    font-size: 13px;
    color: #ccd2ffcc;
    margin-bottom: 30px
}

.sidebar nav.nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 15px
}

.sidebar nav.nav button {
    background: transparent;
    border: none;
    color: #ccd2ffcc;
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .2s ease
}

.sidebar nav.nav button:hover, .sidebar nav.nav button.active {
    background-color: #6a7ee92b;
    color: #fff
}

.sidebar nav button svg {
    fill: #ccd2ffcc;
    width: 12px;
    height: 12px;
    transition: fill .2s ease
}

.sidebar nav.nav button:hover svg, .sidebar nav.nav button.active svg {
    fill: #fff
}

.signout-button {
    padding: 12px;
    border-top: 1px solid #5b68ad90;
    background-color: #e62143;
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color .3s ease;
    gap: 6px;
    margin: auto 15px 25px
}

.signout-button:hover {
    background-color: #c01a44
}

.signout-button svg {
    width: 18px;
    height: 18px;
    fill: #fff
}

.main-content {
    flex-grow: 1;
    background-color: #fff;
    padding: 30px 28px 28px;
    display: flex;
    flex-direction: column;
    position: relative
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    color: #6a7ee9;
    cursor: pointer;
    font-size: 2.2rem
}

.close-btn:hover {
    color: #1e2749
}

.main-header {
    font-weight: 600;
    font-size: 20px;
    color: #2a2e3f;
    margin-bottom: 25px
}

.profile-form {
    border: 1px solid #d2d5ec;
    border-radius: 6px;
    background-color: #f8f9fb;
    padding: 20px;
    box-shadow: 0 1px 3px #1318731a;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.profile-row {
    justify-content: space-between;
    background-color: #f6f7fa;
    border-radius: 6px;
    padding: 11px 16px;
    font-size: 14px;
    color: #3a3f4b;
    box-shadow: inset 0 1px 1px #0000000d
}

.profile-row label {
    font-weight: 600;
    color: #2a2e3f
}

.profile-row .value {
    color: #82889e;
    font-weight: 400
}

.not-set {
    color: #b8bbc9;
    font-style: italic
}

.reset-password-btn {
    position: absolute;
    top: 15px;
    right: 115px;
    background-color: #3a57e8;
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 22px;
    cursor: pointer;
    box-shadow: 0 2px 9px #2c43a3cc;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    user-select: none
}

.reset-password-btn svg {
    stroke: #fff;
    width: 16px;
    height: 16px;
    stroke-width: 2.1;
    stroke-linejoin: round;
    stroke-linecap: round;
    fill: none
}

.reset-password-btn:hover {
    box-shadow: 0 3px 16px #3a56ffe6
}

.bottom-toggle {
    margin-top: 30px;
    display: flex;
    justify-content: start;
    gap: 12px
}

.bottom-toggle button {
    background-color: #3a57e8;
    border: none;
    padding: 8px 22px;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px
}

.bottom-toggle button.inactive {
    background-color: #d7dbff;
    color: #3a57e8
}

.bottom-toggle button svg {
    width: 18px;
    height: 18px;
    fill: currentColor
}

.password-row {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.password-row .forgot {
    font-size: 12px;
    color: #555;
    text-decoration: none
}

input[type="text"], input[type="number"], input[type="password"], input[type="email"] , input[type="file"], select {
    padding: 12px 14px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
}
input[type="color"] {
    height: 45px;
}
select {
    padding: 12px 2.25rem 12px .75rem !important;
}

.captcha-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.captcha-input {
    flex: 1;
}

.captcha-image-box {
    display: flex;
    align-items: center;
}

.captcha-image-box img {
    height: 38px;
    border-radius: 0.25rem 0 0 0.25rem;
}

.captcha-refresh-btn {
    height: 38px;
    width: 40px;
    background-color: #1e2749;
    border: 0;
    border-radius: 0 0.25rem 0.25rem 0;
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
}

@font-face {
    font-family: cfFont;
    src: url('../fonts/Inter-Regular.ttf')
}

@font-face {
    font-family: vazir;
    src: url('../fonts/Vazirmatn-Regular.woff2')
}

@font-face {
    font-family: pinar;
    src: url('../fonts/pinar-700.woff2')
}

.stream-box {
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 0 40px 0 #5e5c9a0f;
    position: relative;
    transition: border-radius .2s ease-in-out
}

.stream-box-title {
    color: #3e3f5e;
    font-weight: 700
}

.stream-box .stream-box-video {
    height: 160px
}

.stream-box .stream-box-video iframe {
    width: 100%;
    height: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px
}

.stream-box .stream-box-image {
    border-radius: 50%;
    border: 4px solid #fff;
    position: absolute;
    top: 138px;
    left: 24px;
    z-index: 3
}

.stream-box .stream-box-info {
    padding: 22px 28px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    position: relative;
    z-index: 2;
    transition: border-radius .2s ease-in-out
}

.stream-box .stream-box-meta {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 77px;
    border-top: 1px solid #eaeaf5;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: #fcfcfd;
    box-shadow: 0 0 40px 0 #3731ed0f;
    position: absolute;
    bottom: -77px;
    left: 0;
    z-index: 9999;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 1;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 77px;
    border-top: 1px solid #eaeaf5;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: #fcfcfd;
    box-shadow: 0 0 40px 0 #5e5c9a0f;
    position: absolute;
    bottom: -77px;
    left: 0;
    z-index: 9999;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 1;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.user-avatar.no-outline.small {
    width: 40px;
    height: 44px
}

.user-avatar.no-outline {
    width: 84px;
    height: 92px
}

.user-avatar.small {
    width: 50px;
    height: 56px
}

.user-avatar {
    display: block;
    width: 100px;
    height: 110px;
    position: relative
}

.user-avatar.no-outline.small .user-avatar-content {
    top: 6px;
    left: 5px
}

.user-avatar.no-outline .user-avatar-content {
    top: 9px;
    left: 8px
}

.user-avatar.small .user-avatar-content {
    top: 12px;
    left: 10px
}

.user-avatar .user-avatar-content {
    position: absolute;
    top: 18px;
    left: 16px;
    z-index: 3
}

.user-avatar.no-outline .user-avatar-progress, .user-avatar.no-outline .user-avatar-progress-border {
    top: 0;
    left: 0
}

.user-avatar.small .user-avatar-progress, .user-avatar.small .user-avatar-progress-border {
    top: 6px;
    left: 5px
}

.user-avatar .user-avatar-progress {
    z-index: 3
}

.user-avatar .user-avatar-progress, .user-avatar .user-avatar-progress-border {
    position: absolute;
    top: 9px;
    left: 8px;
    z-index: 2
}

.user-avatar.no-outline .user-avatar-progress, .user-avatar.no-outline .user-avatar-progress-border {
    top: 0;
    left: 0
}

.user-avatar.small .user-avatar-progress, .user-avatar.small .user-avatar-progress-border {
    top: 6px;
    left: 5px
}

.user-avatar .user-avatar-progress-border {
    z-index: 2
}

.user-avatar .user-avatar-progress, .user-avatar .user-avatar-progress-border {
    position: absolute;
    top: 9px;
    left: 8px;
    z-index: 2
}

.user-avatar.no-outline.small .user-avatar-badge {
    top: 21px;
    right: -3px
}

.user-avatar.no-outline .user-avatar-badge {
    top: 60px;
    right: -3px
}

.user-avatar.small .user-avatar-badge {
    width: 22px;
    height: 24px;
    top: 27px;
    right: 2px
}

.user-avatar .user-avatar-badge {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 28px;
    height: 32px;
    position: absolute;
    top: 68px;
    right: 5px;
    z-index: 4
}

.customer__cart {
    padding: 3rem 2rem;
    gap: 3rem
}

.customer__cart-content {
    flex: 1;
    gap: 3rem
}

.customer__section {
    flex: 1 0 30%;
    padding: 10px 20px;
    border-radius: 10px
}

.customer__section input {
    border-radius: 10px
}

.customer__section label {
    color: #BDBDBD;
    font-size: 14px
}

.customer__btn {
    height: fit-content;
    align-self: center;
    background-color: #FF4F04;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px
}

.user-preview.landscape {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 100px;
    padding-left: 84px;
    position: relative
}

.user-preview {
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 0 40px 0 #5e5c9a0f
}

.user-preview.landscape .user-preview-cover {
    width: 84px;
    height: 100%;
    border-top-right-radius: 0;
    border-bottom-left-radius: 12px;
    position: absolute;
    top: 0;
    left: 0
}

.user-preview .user-preview-cover {
    height: 96px;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px
}

.form-row, .table, figure, h1, h2, h3, h4, h5, h6, ol, p, ul {
    margin: 0
}

figure > img {
    width: 100%;
    height: 100%
}

img {
    vertical-align: middle;
    border-style: none
}

.user-preview.landscape .user-preview-info .badge-list {
    display: -ms-flexbox;
    display: flex
}

.user-preview.landscape .user-preview-info .badge-list, .user-preview.landscape .user-preview-info .social-links, .user-preview.landscape .user-preview-info .user-avatar-list, .user-preview.landscape .user-preview-info .user-avatar-list + .user-preview-actions, .user-preview.landscape .user-preview-info .user-preview-actions, .user-preview.landscape .user-preview-info .user-preview-social-links-wrap, .user-preview.landscape .user-preview-info .user-short-description + .user-stats {
    margin-top: 0
}

.user-preview .user-preview-info .badge-list {
    margin-top: 28px
}

.badge-list.small {
    grid-gap: 8px
}

.badge-list {
    display: grid;
    -ms-flex-pack: center;
    justify-content: center;
    grid-template-columns:repeat(auto-fit, 32px);
    grid-gap: 14px
}

.user-preview.landscape .user-preview-info .badge-list .badge-item {
    margin-right: 8px
}

.badge-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 32px;
    height: 35px;
    position: relative
}

.badge-item img {
    position: absolute;
    top: 0;
    left: 0
}

img {
    vertical-align: middle;
    border-style: none
}

.user-preview.landscape .user-preview-info .badge-list .badge-item {
    margin-right: 8px
}

.user-preview.landscape .user-preview-info .badge-list .badge-item {
    margin-right: 8px
}

.user-preview.landscape .user-preview-info .badge-list .badge-item:last-child {
    margin-right: 0
}

.user-stats {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

.user-stats .user-stat {
    position: relative
}

.user-stat {
    padding: 0 24px
}

.user-stat .user-stat-title {
    font-size: .875rem
}

.user-stat .user-stat-text, .user-stat .user-stat-title {
    font-weight: 500;
    text-transform: uppercase;
    text-align: center
}

.user-stat .user-stat-text {
    margin-top: 10px;
    color: #adafca;
    font-size: .6875rem
}

.user-preview.landscape .user-preview-info .social-links {
    width: 168px
}

.user-preview.landscape .user-preview-info .badge-list, .user-preview.landscape .user-preview-info .social-links, .user-preview.landscape .user-preview-info .user-avatar-list, .user-preview.landscape .user-preview-info .user-avatar-list + .user-preview-actions, .user-preview.landscape .user-preview-info .user-preview-actions, .user-preview.landscape .user-preview-info .user-preview-social-links-wrap, .user-preview.landscape .user-preview-info .user-short-description + .user-stats {
    margin-top: 0
}

.user-preview .user-preview-info .social-links {
    margin-top: 24px
}

.social-links {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center
}

.social-links.small .social-link {
    margin-right: 8px
}

.social-link.twitter {
    background-color: #1abcff
}

.social-link.small {
    width: 32px;
    height: 32px;
    border-radius: 8px
}

.social-links .social-link {
    margin-right: 12px
}

.social-link.small .social-link-icon {
    width: 10px;
    height: 10px
}

.icon-artstation, .icon-behance, .icon-cross, .icon-deviantart, .icon-discord, .icon-dribbble, .icon-facebook, .icon-google, .icon-instagram, .icon-patreon, .icon-twitch, .icon-twitter, .icon-youtube {
    fill: #fff;
    width: 12px;
    height: 12px
}

svg {
    overflow: hidden;
    vertical-align: middle
}

.social-links.small .social-link {
    margin-right: 8px
}

.social-link.instagram {
    background-color: #f8468d
}

.social-link.small {
    width: 32px;
    height: 32px;
    border-radius: 8px
}

.user-preview.landscape .user-preview-info .user-preview-actions {
    margin-top: 0
}

.user-preview.landscape .user-preview-info .user-preview-actions .button {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 64px;
    height: 44px
}

.user-preview.landscape .user-preview-info .user-preview-actions .button, .user-preview.landscape .user-preview-info .user-preview-actions .tag-sticker {
    margin-right: 12px
}

.user-preview .user-preview-info .user-preview-actions .button {
    width: 100%;
    margin-right: 16px
}

.button.secondary {
    background-color: #615dfa;
    box-shadow: 4px 7px 12px 0 #615dfa33
}

.user-preview .user-preview-info .user-preview-actions .button .button-icon {
    fill: #fff
}

.button .button-icon {
    fill: #fff;
    transition: fill .2s ease-in-out
}

.icon-add-friend, .icon-badges, .icon-big-grid-view, .icon-blog-posts, .icon-camera, .icon-clock, .icon-comment, .icon-cross-thin, .icon-delete, .icon-earnings, .icon-events, .icon-events-daily, .icon-events-monthly, .icon-events-weekly, .icon-forum, .icon-forums, .icon-friend, .icon-gif, .icon-group, .icon-info, .icon-item, .icon-list-grid-view, .icon-marketplace, .icon-members, .icon-newsfeed, .icon-overview, .icon-photos, .icon-pin, .icon-pinned, .icon-poll, .icon-profile, .icon-quests, .icon-remove-friend, .icon-return, .icon-revenue, .icon-send-message, .icon-settings, .icon-share, .icon-small-grid-view, .icon-status, .icon-store, .icon-streams, .icon-tags, .icon-thumbs-up, .icon-ticket, .icon-timeline, .icon-trophy, .icon-videos, .icon-wallet {
    fill: #adafca;
    width: 20px;
    height: 20px
}

.button {
    display: inline-block;
    height: 48px;
    border-radius: 10px;
    background-color: #3e3f5e;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
    transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
    box-shadow: 3px 5px 10px 0 #3e3f5e33
}

.widget-box .widget-box-footer .chart-info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 8px;
    padding-left: 36px
}

.progress-arc-wrap.tiny {
    width: 130px;
    height: 60px
}

.progress-arc-wrap {
    width: 140px;
    height: 140px;
    position: relative
}

.progress-arc-wrap .progress-arc {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2
}

.chartjs-size-monitor, .chartjs-size-monitor-expand, .chartjs-size-monitor-shrink {
    position: absolute;
    direction: ltr;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    z-index: -1
}

.progress-arc-wrap .progress-arc-info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.progress-arc-wrap.tiny .progress-arc-info .progress-arc-title {
    font-size: .75rem;
    text-transform: uppercase
}

.progress-arc-wrap .progress-arc-info .progress-arc-title {
    font-size: 2.25rem;
    font-weight: 400
}

.user-stats {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

.user-stat.big {
    padding: 0 30px
}

.user-stats .user-stat {
    position: relative
}

.user-stat.big .user-stat-title {
    font-size: 1.375rem
}

.user-stat .user-stat-title {
    font-size: .875rem
}

.user-stat .user-stat-text, .user-stat .user-stat-title {
    font-weight: 500;
    text-transform: uppercase;
    text-align: center
}

.user-stat.big .user-stat-text {
    font-size: .75rem
}

.user-stat .user-stat-text {
    margin-top: 10px;
    color: #adafca;
    font-size: .6875rem
}

.widget-box {
    padding: 32px 28px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 0 40px 0 #5e5c9a0f;
    position: relative
}

.widget-box .widget-box-actions, .widget-box .widget-box-actions .widget-box-action {
    display: -ms-flexbox;
    display: flex
}

.widget-box .widget-box-actions {
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.widget-box .widget-box-actions, .widget-box .widget-box-actions .widget-box-action {
    display: -ms-flexbox;
    display: flex
}

.widget-box .widget-box-title {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 18px
}

.user-stat .user-stat-title .user-stat-title-icon.positive {
    fill: #23d2e2
}

.icon-minus-small, .icon-plus-small {
    fill: #3e3f5e;
    width: 8px;
    height: 8px
}

.hide {
    display: none
}

.hero {
    display: inline-block;
    position: relative;
    width: 300px;
    min-width: 50px;
    height: 250px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 5px 5px 30px #0000004d;
    margin: 15px
}

.image {
    height: 70%
}

.second .text {
    background-image: linear-gradient(-20deg, #bb7413, #e7d25c)
}

.logo {
    height: 65px;
    width: 65px;
    position: absolute;
    bottom: 30%;
    left: 30px;
    overflow: hidden
}

.logo img {
    height: 100%
}

.main-text {
    position: absolute;
    color: #fff;
    font-weight: 600;
    left: 140px;
    bottom: 7%
}

.hero-btn {
    position: absolute;
    color: #fff;
    right: 30px;
    bottom: 10%;
    padding: 10px 20px;
    border: 1px solid #fff;
    animation: button-anim 2s ease 0s infinite normal forwards
}

@keyframes button-anim {
    0% {
        transform: translate(0)
    }
    20% {
        transform: translate(-2px, 2px)
    }
    40% {
        transform: translate(-2px, -2px)
    }
    60% {
        transform: translate(2px, 2px)
    }
    80% {
        transform: translate(2px, -2px)
    }
    100% {
        transform: translate(0)
    }
}

.hero-btn:hover {
    animation: none
}

.hero-btn a {
    color: #fff
}

.date {
    position: absolute;
    color: #fff;
    left: 30px;
    bottom: 7%
}

.c-dashboardInfo {
    margin-bottom: 15px
}

.c-dashboardInfo .wrap {
    background: #fff;
    box-shadow: 2px 10px 20px #0000001a;
    border-radius: 7px;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 40px 25px 20px;
    height: 100%
}

.c-dashboardInfo__title, .c-dashboardInfo__subInfo {
    color: #6c6c6c;
    font-size: 1.18em
}

.c-dashboardInfo span {
    display: block
}

.c-dashboardInfo__count {
    font-weight: 600;
    font-size: 2.5em;
    line-height: 64px;
    color: #323c43
}

.c-dashboardInfo .wrap:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    content: ""
}

.c-dashboardInfo:nth-child(1) .wrap:after {
    background: linear-gradient(82.59deg, #00c48c 0%, #00a173 100%)
}

.c-dashboardInfo:nth-child(2) .wrap:after {
    background: linear-gradient(81.67deg, #0084f4 0%, #1a4da2 100%)
}

.c-dashboardInfo:nth-child(3) .wrap:after {
    background: linear-gradient(69.83deg, #0084f4 0%, #00c48c 100%)
}

.c-dashboardInfo:nth-child(4) .wrap:after {
    background: linear-gradient(81.67deg, #ff647c 0%, #1f5dc5 100%)
}

.c-dashboardInfo__title svg {
    color: #d7d7d7;
    margin-left: 5px
}

.MuiSvgIcon-root-19 {
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 24px;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    user-select: none;
    flex-shrink: 0
}

.hide {
    display: none
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s
}

input:checked + .slider {
    background-color: #2196F3
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px)
}

.slider.round {
    border-radius: 34px
}

.slider.round:before {
    border-radius: 50%
}

.toggle {
    --width: 40px;
    --height: calc(var(--width) / 2);
    --border-radius: calc(var(--height) / 2);
    display: inline-block;
    cursor: pointer
}

.toggle__input {
    display: none
}

.toggle__fill {
    position: relative;
    width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    background: #ddd;
    transition: background .2s
}

.toggle__fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: var(--height);
    width: var(--height);
    background: #fff;
    box-shadow: 0 0 10px #00000040;
    border-radius: var(--border-radius);
    transition: transform .2s
}

.toggle__input:checked ~ .toggle__fill {
    background: #013D5B
}

.toggle__input:checked ~ .toggle__fill::after {
    transform: translateX(var(--height))
}

.card__header {
    padding: 24px;
    display: flex;
    align-items: center;
    height: 8rem
}

.card__header .avatar {
    width: 60px;
    flex-shrink: 0;
    margin-right: 12px
}

.card__header .avatar img {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    object-fit: cover
}

.card__header .name {
    width: 100%;
    font-size: 15px;
    color: #78858F;
    font-weight: 500
}

.card__header .name span {
    display: block;
    color: #000;
    font-size: 20px
}

.card__header .icon {
    font-size: 24px;
    line-height: 1;
    color: #000;
    flex-shrink: 0;
    margin-left: 12px
}

.card__body img {
    width: 100%
}

.card__footer {
    padding: 24px;
    font-size: 18px;
    color: #78858F;
    padding-top: 0
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.body {
    background-color: beige;
    display: flex;
    gap: 20px
}

.spinner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffffad;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center
}

.spinner.active {
    display: flex
}

.spinner__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px
}

.spinner__loading {
    position: absolute;
    width: 70px
}

.spinner__content {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 10px
}

.spinner__tube {
    width: 70px;
    position: relative
}

.spinner__wait {
    font-size: 17px;
    font-weight: 700
}

.spinner__reload {
    font-size: 12px
}

#cart__list {
    display: flex;
    gap: 20px
}

.main__cart {
    display: flex;
    flex-direction: column;
    width: 220px;
    border-radius: 20px;
    background-color: #ffff;
    gap: 15px;
    padding: 10px 20px;
    justify-content: flex-end;
    max-height: 311px
}

.main__cart-timer {
    border: 1px solid #eee;
    display: flex;
    padding: 10px;
    border-radius: 9px;
    gap: 5px
}

.main__cart-destroy {
    margin: 0;
    color: #003d5b
}

.main__cart-min {
    color: #f44336;
    margin: 0
}

.main__cart-logo {
    display: flex;
    justify-content: center
}

.main__cart-des {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.main__cart-title {
    color: #16192c;
    font-size: 20px
}

.main__cart-text {
    color: #425466
}

.main__cart-btns {
    display: flex;
    justify-content: space-between
}

.main__cart-button {
    color: #ffff;
    background-color: #003d5b;
    border-radius: 10px;
    padding: 10px 40px;
    border: 2px solid #003d5b;
    transition: background-color .5s ease-in-out;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer
}

.main__cart-button--start {
    width: 100%
}

.main__cart-trash {
    background-color: #f44336;
    border-radius: 10px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

.base-timer {
    position: relative;
    width: 30px;
    height: 30px
}

.base-timer__svg {
    transform: scaleX(-1)
}

.base-timer__circle {
    fill: none;
    stroke: none
}

.base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: grey
}

.base-timer__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear;
    fill-rule: nonzero;
    stroke: currentColor
}

.base-timer__path-remaining.green {
    color: #04f1a2
}

.base-timer__path-remaining.orange {
    color: #f1a104
}

.base-timer__path-remaining.red {
    color: #b90b04
}

.base-timer__label {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px
}

.btn-danger-custom {
    background: #bb0524;
    color: #ffffff;
}

.btn-danger-custom:hover {
    background: #8c041b;
    color: #ffffff;
}

.btn-gray-custom {
    background: #3a3f4b;
    color: #ffffff;
}

.btn-gray-custom:hover {
    background: #222327;
    color: #ffffff;
}

.submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px;
    width: max-content;
}

.submenu a {
    border-bottom: 2px solid transparent;
}

.submenu a.active-menu {
    border-bottom: 2px solid #b5a188;
}

.submenu.active {
    display: flex;
}

.submenu a {
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
}

.submenu a:hover {
    border-bottom: 2px solid #b5a188;
}

.dir-ltr {
    direction: ltr;
}

.breadcrumb-box {
    -webkit-box-shadow: 0 0 28px rgba(0, 0, 0, .08);
    box-shadow: 0 0 28px rgba(0, 0, 0, .08);
}

.custom-card {
    border-radius: 10px;
    -webkit-box-shadow: 0 0 28px rgba(0, 0, 0, .08);
    box-shadow: 0 0 28px rgba(0, 0, 0, .08);
    border: 0;
}

.custom-card .card-body {
    padding: 25px 0;
}

.strong-bar {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 6px;
    border-radius: 10px;
    background: var(--theme-light);
    -webkit-transition: background .3s;
    transition: background .3s;
    background-color: #cbccce;
}

.password-bar .strong-bar.bar-active-1 {
    background-color: #f7577e
}

.password-bar .strong-bar.bar-active-2 {
    background-color: #f9bf59
}

.password-bar .strong-bar.bar-active-3 {
    background-color: #5bc3e1
}

.password-bar .strong-bar.bar-active-4 {
    background-color: #02bc9c
}

.swal2-toast h2:where(.swal2-title) {
    margin: .5em 1em 0.5 1em !important;
    font-weight: bold;
}

.swal2-toast div:where(.swal2-html-container) {
    margin: 0 1em .5em 1em !important;
}

.swal2-backdrop-show {
    backdrop-filter: blur(0);
}

.mb-80px {
    margin-bottom: 80px;
}

.captcha-btn {
    margin-left: -10px;
}

.cursor-pointer {
    cursor: pointer;
}

.swal2-container, jdp-container {
    z-index: 999999999999 !important;
}

.password-eye {
    right: 10px;
    top: 12px;
}

.jdp-year select, .jdp-month select {
    padding: 0 !important;
}

.custom-lg-switch {
    min-height: inherit !important;
    font-size: 1.7rem;
}

.nav {
    display: flex;
    gap: 20px;
}

.filter-bar {
    display: block;
}

.mobile-nav-toggle {
    display: none;
}

@media (max-width: 768px) {
    .header {
        padding: 5px 20px;
        display: block;
    }

    nav.nav {
        width: 100%;
        display: none;
        width: 100%;
    }

    nav.nav button {
        width: 100%;
        padding: 8px 0;
        margin-bottom: 5px;
    }

    nav.nav.active {
        display: block;
    }

    .mobile-nav-toggle {
        display: block;
        background: none;
        border: none;
    }

    .change-lang, .full-screen {
        display: none;
    }

    .workspace-list {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .submenu a {
        width: max-content;
    }
}

.sidebar {
    width: 220px;
    background: linear-gradient(160deg, #1e2749, #1e2749);
    color: #fff;
    display: flex;
    flex-direction: column
}

.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: transparent !important;
    background-clip: padding-box;
    border: 0;
    border-radius: .3rem;
    outline: 0
}

.profile-pic {
    margin: 30px auto 15px;
    width: 80px;
    height: 80px;
    background-color: #3a4468;
    border-radius: 50%;
    border: 3px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 28px;
    user-select: none
}

.username {
    text-align: center;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 18px
}

.email {
    text-align: center;
    font-weight: 400;
    font-size: 13px;
    color: #ccd2ffcc;
    margin-bottom: 30px
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 15px
}

.sidebar nav button {
    background: transparent;
    border: none;
    color: #ccd2ffcc;
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .2s ease
}

.sidebar nav button:hover, .sidebar nav button.active {
    background-color: #6a7ee92b;
    color: #fff
}

.sidebar nav button svg {
    fill: #ccd2ffcc;
    width: 12px;
    height: 12px;
    transition: fill .2s ease
}

.sidebar nav button:hover svg, .sidebar nav button.active svg {
    fill: #fff
}

.signout-button {
    padding: 12px;
    border-top: 1px solid #5b68ad90;
    background-color: #e62143;
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color .3s ease;
    gap: 6px;
    margin: auto 15px 25px
}

.signout-button:hover {
    background-color: #c01a44
}

.signout-button svg {
    width: 18px;
    height: 18px;
    fill: #fff
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    color: #6a7ee9;
    cursor: pointer;
    font-size: 2.2rem
}

.close-btn:hover {
    color: #1e2749
}

.main-header {
    font-weight: 600;
    font-size: 20px;
    color: #2a2e3f;
    margin-bottom: 25px
}

.profile-form {
    border: 1px solid #d2d5ec;
    border-radius: 6px;
    background-color: #f8f9fb;
    padding: 20px;
    box-shadow: 0 1px 3px #1318731a;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.profile-row {
    justify-content: space-between;
    background-color: #f6f7fa;
    border-radius: 6px;
    padding: 11px 16px;
    font-size: 14px;
    color: #3a3f4b;
    box-shadow: inset 0 1px 1px #0000000d
}

.profile-row label {
    font-weight: 600;
    color: #2a2e3f
}

.profile-row .value {
    color: #82889e;
    font-weight: 400
}

.not-set {
    color: #b8bbc9;
    font-style: italic
}

.reset-password-btn {
    position: absolute;
    top: 15px;
    right: 115px;
    background-color: #3a57e8;
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 22px;
    cursor: pointer;
    box-shadow: 0 2px 9px #2c43a3cc;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    user-select: none
}

.reset-password-btn svg {
    stroke: #fff;
    width: 16px;
    height: 16px;
    stroke-width: 2.1;
    stroke-linejoin: round;
    stroke-linecap: round;
    fill: none
}

.reset-password-btn:hover {
    box-shadow: 0 3px 16px #3a56ffe6
}

.bottom-toggle {
    margin-top: 30px;
    display: flex;
    justify-content: start;
    gap: 12px
}

.bottom-toggle button {
    background-color: #3a57e8;
    border: none;
    padding: 8px 22px;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px
}

.bottom-toggle button.inactive {
    background-color: #d7dbff;
    color: #3a57e8
}

.bottom-toggle button svg {
    width: 18px;
    height: 18px;
    fill: currentColor
}
.tab-content > .tab-pane:not(.active){
    display:none;
}
#arc-checkbox {
    width: 100% !important;
}
.metric-card{
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border-radius:12px;
    color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.metric-icon{
    font-size:34px;
    opacity:.9;
}

.metric-content h6{
    font-size:14px;
    margin-bottom:3px;
    opacity:.9;
}

.metric-content p{
    margin:0;
    font-weight:600;
}

.bg-os{
    background:linear-gradient(135deg,#5f9cff,#3a63d1);
}

.bg-cpu{
    background:linear-gradient(135deg,#ff9f43,#ff6b00);
}

.bg-time{
    background:linear-gradient(135deg,#2ecc71,#1eaa59);
}


.resource-card{
    padding:22px;
    border-radius:12px;
    background:#fff;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.resource-header{
    font-weight:600;
    margin-bottom:12px;
    color:#555;
}

.resource-header i{
    margin-right:6px;
}

.big-progress{
    height:14px;
    border-radius:8px;
    background:#eee;
}

.progress-bar{
    border-radius:8px;
}

.cpu-bar{
    background:#ff6b00;
}

.mem-bar{
    background:#3a63d1;
}

.disk-bar{
    background:#c91f1f;
}

.resource-value{
    margin-top:10px;
    font-weight:600;
    color:#333;
}
:root{--ts-pr-clear-button:0;--ts-pr-caret:0;--ts-pr-min:.75rem}.ts-wrapper.single .ts-control,.ts-wrapper.single .ts-control input{cursor:pointer}.ts-control{padding-right:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-wrapper.plugin-drag_drop.multi>.ts-control>div.ui-sortable-placeholder{box-shadow:inset 0 0 12px 4px #fff;visibility:visible!important;background:#0000000f!important;border:0!important}.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder:after{content:"!";visibility:hidden}.ts-wrapper.plugin-drag_drop .ui-sortable-helper{box-shadow:0 2px 5px #0003}.plugin-checkbox_options .option input{margin-right:.5rem}.plugin-clear_button{--ts-pr-clear-button:1em}.plugin-clear_button .clear-button{cursor:pointer;opacity:0;transition:opacity .5s;position:absolute;top:50%;right:calc(.75rem - 5px);transform:translateY(-50%);background:0 0!important;margin-right:0!important}.plugin-clear_button.form-select .clear-button,.plugin-clear_button.single .clear-button{right:max(var(--ts-pr-caret),.75rem)}.plugin-clear_button.focus.has-items .clear-button,.plugin-clear_button:not(.disabled):hover.has-items .clear-button{opacity:1}.ts-wrapper .dropdown-header{background:#f8f8f8;border-bottom:1px solid #d0d0d0;border-radius:.375rem .375rem 0 0;padding:6px .75rem;position:relative}.ts-wrapper .dropdown-header-close{color:#343a40;opacity:.4;margin-top:-12px;line-height:20px;position:absolute;top:50%;right:.75rem;font-size:20px!important}.ts-wrapper .dropdown-header-close:hover{color:#000}.plugin-dropdown_input.focus.dropdown-active .ts-control{box-shadow:none;border:1px solid #ced4da;box-shadow:inset 0 1px 2px #00000013}.plugin-dropdown_input .dropdown-input{box-shadow:none;background:0 0;border:0 solid #d0d0d0;border-bottom-width:1px;width:100%;padding:.375rem .75rem;display:block}.plugin-dropdown_input.focus .ts-dropdown .dropdown-input{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.plugin-dropdown_input .items-placeholder{width:100%;box-shadow:none!important;border:0!important}.plugin-dropdown_input.dropdown-active .items-placeholder,.plugin-dropdown_input.has-items .items-placeholder{display:none!important}.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input{flex:none;min-width:4px}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-moz-placeholder{color:#0000}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder{color:#0000}.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content{display:flex}.ts-dropdown.plugin-optgroup_columns .optgroup{border-top:0;border-right:1px solid #f2f2f2;flex-grow:1;flex-basis:0;min-width:0}.ts-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0}.ts-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.ts-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0}.ts-wrapper.plugin-remove_button .item{align-items:center;display:inline-flex;padding-right:0!important}.ts-wrapper.plugin-remove_button .item .remove{box-sizing:border-box;color:inherit;vertical-align:middle;border-radius:0 2px 2px 0;padding:0 5px;text-decoration:none;display:inline-block}.ts-wrapper.plugin-remove_button .item .remove:hover{background:#0000000d}.ts-wrapper.plugin-remove_button.disabled .item .remove:hover{background:0 0}.ts-wrapper.plugin-remove_button .remove-single{font-size:23px;position:absolute;top:0;right:0}.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{border-left:1px solid #dee2e6;margin-left:5px}.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove{border-left-color:#0000}.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove{border-left-color:#fff}.ts-wrapper.plugin-remove_button.rtl .item .remove{border-right:1px solid #dee2e6;margin-right:5px}.ts-wrapper.plugin-remove_button.rtl .item.active .remove{border-right-color:#0000}.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove{border-right-color:#fff}.ts-wrapper{position:relative}.ts-control,.ts-control input,.ts-dropdown{font-smoothing:inherit;color:#343a40;font-family:inherit;font-size:inherit;line-height:1.5}.ts-control,.ts-wrapper.single.input-active .ts-control{cursor:text;background:#fff}.ts-control{box-shadow:none;box-sizing:border-box;z-index:1;border:1px solid #ced4da;border-radius:.375rem;flex-wrap:wrap;width:100%;padding:.375rem .75rem;position:relative;overflow:hidden}.ts-wrapper.multi.has-items .ts-control{padding:calc(.375rem - 1px) .75rem calc(.375rem - 4px)}.full .ts-control{background-color:#fff}.disabled .ts-control,.disabled .ts-control *{cursor:default!important}.focus .ts-control{box-shadow:none}.ts-control>*{vertical-align:baseline;display:inline-block}.ts-wrapper.multi .ts-control>div{color:#343a40;cursor:pointer;background:#efefef;border:0 solid #dee2e6;margin:0 3px 3px 0;padding:1px 5px}.ts-wrapper.multi .ts-control>div.active{color:#fff;background:#0d6efd;border:0 solid #0000}.ts-wrapper.multi.disabled .ts-control>div,.ts-wrapper.multi.disabled .ts-control>div.active{color:#878787;background:#fff;border:0 solid #fff}.ts-control>input{flex:auto;min-width:7rem;box-shadow:none!important;line-height:inherit!important;text-indent:0!important;-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important;background:0 0!important;border:0!important;max-width:100%!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;display:inline-block!important}.ts-control>input::-ms-clear{display:none}.ts-control>input:focus{outline:none!important}.has-items .ts-control>input{margin:0 4px!important}.ts-control.rtl{text-align:right}.ts-control.rtl.single .ts-control:after{left:calc(.75rem + 5px);right:auto}.ts-control.rtl .ts-control>input{margin:0 4px 0 -2px!important}.disabled .ts-control{opacity:.5;background-color:#e9ecef}.input-hidden .ts-control>input{opacity:0;position:absolute;left:-10000px}.ts-dropdown{box-sizing:border-box;z-index:10;background:#fff;border:1px solid #d0d0d0;border-top:0;border-radius:0 0 .375rem .375rem;width:100%;margin:.25rem 0 0;position:absolute;top:100%;left:0;box-shadow:0 1px 3px #0000001a}.ts-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.ts-dropdown [data-selectable] .highlight{background:#ffed2866;border-radius:1px}.ts-dropdown .create,.ts-dropdown .no-results,.ts-dropdown .optgroup-header,.ts-dropdown .option{padding:3px .75rem}.ts-dropdown .option,.ts-dropdown [data-disabled],.ts-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.ts-dropdown [data-selectable].option{cursor:pointer;opacity:1}.ts-dropdown .optgroup:first-child .optgroup-header{border-top:0}.ts-dropdown .optgroup-header{color:#6c757d;cursor:default;background:#fff}.ts-dropdown .active{color:#1e2125;background-color:#e9ecef}.ts-dropdown .active.create{color:#1e2125}.ts-dropdown .create{color:#343a4080}.ts-dropdown .spinner{width:30px;height:30px;margin:3px .75rem;display:inline-block}.ts-dropdown .spinner:after{content:" ";border:5px solid #d0d0d0;border-color:#d0d0d0 #0000;border-radius:50%;width:24px;height:24px;margin:3px;animation:1.2s linear infinite lds-dual-ring;display:block}@keyframes lds-dual-ring{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.ts-dropdown-content{overflow-scrolling:touch;scroll-behavior:smooth;max-height:200px;overflow:hidden auto}.ts-hidden-accessible{clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;width:1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.ts-wrapper.form-control,.ts-wrapper.form-select{box-shadow:none;height:auto;display:flex;padding:0!important}.ts-dropdown,.ts-dropdown.form-control,.ts-dropdown.form-select{border:1px solid var(--bs-border-color-translucent);z-index:1000;background:#fff;border-radius:.375rem;height:auto;padding:0;box-shadow:0 6px 12px #0000002d}.ts-dropdown .optgroup-header{font-size:.875rem;line-height:1.5}.ts-dropdown .optgroup:first-child:before{display:none}.ts-dropdown .optgroup:before{border-top:1px solid var(--bs-border-color-translucent);content:" ";height:0;margin:.5rem -.75rem;display:block;overflow:hidden}.ts-dropdown .create{padding-left:.75rem}.ts-dropdown-content{padding:5px 0}.ts-control{align-items:center;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;display:flex}@media (prefers-reduced-motion:reduce){.ts-control{transition:none}}.ts-control.dropdown -active{border-radius:.375rem}.focus .ts-control{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.ts-control .item{align-items:center;display:flex}.ts-wrapper.is-invalid,.was-validated .invalid,.was-validated :invalid+.ts-wrapper{border-color:#dc3545}.ts-wrapper.is-invalid:not(.single),.was-validated .invalid:not(.single),.was-validated :invalid+.ts-wrapper:not(.single){background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");background-position:right calc(.375em + .1875rem) center;background-repeat:no-repeat;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.ts-wrapper.is-invalid.single,.was-validated .invalid.single,.was-validated :invalid+.ts-wrapper.single{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");background-position:right .75rem center,right 2.25rem center;background-repeat:no-repeat;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.ts-wrapper.is-invalid.focus .ts-control,.was-validated .invalid.focus .ts-control,.was-validated :invalid+.ts-wrapper.focus .ts-control{border-color:#dc3545;box-shadow:0 0 0 .25rem #dc354540}.ts-wrapper.is-valid,.was-validated .valid,.was-validated :valid+.ts-wrapper{border-color:#198754}.ts-wrapper.is-valid:not(.single),.was-validated .valid:not(.single),.was-validated :valid+.ts-wrapper:not(.single){background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");background-position:right calc(.375em + .1875rem) center;background-repeat:no-repeat;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.ts-wrapper.is-valid.single,.was-validated .valid.single,.was-validated :valid+.ts-wrapper.single{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"),url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");background-position:right .75rem center,right 2.25rem center;background-repeat:no-repeat;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.ts-wrapper.is-valid.focus .ts-control,.was-validated .valid.focus .ts-control,.was-validated :valid+.ts-wrapper.focus .ts-control{border-color:#198754;box-shadow:0 0 0 .25rem #19875440}.ts-wrapper{min-height:calc(1.5em + .75rem + 2px);display:flex}.input-group-sm>.ts-wrapper,.ts-wrapper.form-control-sm,.ts-wrapper.form-select-sm{min-height:calc(1.5em + .5rem + 2px)}.input-group-sm>.ts-wrapper .ts-control,.ts-wrapper.form-control-sm .ts-control,.ts-wrapper.form-select-sm .ts-control{border-radius:.25rem;font-size:.875rem}.input-group-sm>.ts-wrapper.has-items .ts-control,.ts-wrapper.form-control-sm.has-items .ts-control,.ts-wrapper.form-select-sm.has-items .ts-control{padding-bottom:0;font-size:.875rem}.input-group-sm>.ts-wrapper.multi.has-items .ts-control,.ts-wrapper.form-control-sm.multi.has-items .ts-control,.ts-wrapper.form-select-sm.multi.has-items .ts-control{padding-top:calc(.75em - .40625rem - 1px)!important}.ts-wrapper.multi.has-items .ts-control{--ts-pr-min:calc(.75rem - 5px);padding-left:calc(.75rem - 5px)}.ts-wrapper.multi .ts-control>div{border-radius:calc(.375rem - 1px)}.input-group-lg>.ts-wrapper,.ts-wrapper.form-control-lg,.ts-wrapper.form-select-lg{min-height:calc(1.5em + 1rem + 2px)}.input-group-lg>.ts-wrapper .ts-control,.ts-wrapper.form-control-lg .ts-control,.ts-wrapper.form-select-lg .ts-control{border-radius:.5rem;font-size:1.25rem}.ts-wrapper:not(.form-control):not(.form-select){box-shadow:none;background:0 0;border:none;height:auto;padding:0}.ts-wrapper:not(.form-control):not(.form-select).single .ts-control{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:16px 12px}.ts-wrapper.form-select,.ts-wrapper.single{--ts-pr-caret:2.25rem}.ts-wrapper.form-control .ts-control,.ts-wrapper.form-control.single.input-active .ts-control,.ts-wrapper.form-select .ts-control,.ts-wrapper.form-select.single.input-active .ts-control{border:none!important}.ts-wrapper.form-control:not(.disabled) .ts-control,.ts-wrapper.form-control:not(.disabled).single.input-active .ts-control,.ts-wrapper.form-select:not(.disabled) .ts-control,.ts-wrapper.form-select:not(.disabled).single.input-active .ts-control{background:0 0!important}.input-group>.ts-wrapper{flex-grow:1}.input-group>.ts-wrapper:not(:nth-child(2))>.ts-control{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.ts-wrapper:not(:last-child)>.ts-control{border-top-right-radius:0;border-bottom-right-radius:0}
.more-btn {
    position: relative;
}
.more-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #1e2749;
    padding: 6px 0;
    z-index: 999;
    min-width: 180px;
}

.more-btn:hover .more-dropdown {
    display: block;
}
.temp-calc {
    visibility: hidden !important;
    display: inline-block !important;
    position: absolute !important;
    white-space: nowrap;
}

.nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
    overflow: visible;
    position: relative;
}

.nav-btn {
    flex-shrink: 0;
}

.nav > .nav-btn,
.more-btn {
    flex-shrink: 0;
}

.more-dropdown li {
    list-style: none;
    width: 100%;
}

.more-dropdown .nav-btn {
    width: 100%;
    display: flex;
    padding: 10px 15px;
    border: none;
}
/*pam*/
:root {
    --vw-bg:       #0f172a;
    --vw-bg2:      #1e293b;
    --vw-bg3:      #334155;
    --vw-surface:  #1e293b;
    --vw-border:   rgba(255,255,255,.08);
    --vw-border2:  rgba(255,255,255,.14);
    --vw-text:     #f1f5f9;
    --vw-text2:    #94a3b8;
    --vw-text3:    #64748b;
    --vw-primary:  #6366f1;
    --vw-primary-h:#4f46e5;
    --vw-success:  #10b981;
    --vw-danger:   #ef4444;
    --vw-warning:  #f59e0b;
    --vw-info:     #38bdf8;
    --vw-radius:   7px;
    --vw-radius-lg:12px;
    --vw-topbar-h: 48px;
    --vw-status-h: 26px;
    --vw-shadow-lg:0 8px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
}
.vw-wrap {
    display:flex; flex-direction:column;
    width:100vw; height:100vh;
    background:var(--vw-bg); overflow:hidden;
    font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace;
    font-size:13px; color:var(--vw-text);
}
.vw-wrap * { box-sizing:border-box; margin:0; padding:0; }
.vw-wrap .mdi { font-size:inherit; line-height:1; vertical-align:middle; }

.vw-topbar {
    height:var(--vw-topbar-h);
    background:#0a0f1a;
    border-bottom:1px solid var(--vw-border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 12px; gap:8px; flex-shrink:0; z-index:999;
}
.vw-topbar-left  { display:flex; align-items:center; gap:10px; flex:1; min-width:0; overflow:hidden; }
.vw-topbar-right { display:flex; align-items:center; gap:5px; flex-shrink:0; }

.vw-logo-link { display:flex; align-items:center; flex-shrink:0; opacity:.9; transition:opacity .15s; }
.vw-logo-link:hover { opacity:1; }

.vw-divider { width:1px; height:22px; background:var(--vw-border); flex-shrink:0; margin:0 4px; }

.vw-tab-bar {
    display:flex; align-items:center; gap:2px;
    flex:1; min-width:0; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; padding-bottom:1px;
}
.vw-tab-bar::-webkit-scrollbar { display:none; }

.vw-tab {
    display:flex; align-items:center; gap:3px; flex-shrink:0;
    border:1px solid transparent; border-radius:var(--vw-radius);
    transition:background .15s, border-color .15s; padding:0 4px 0 2px;
}
.vw-tab--active { background:rgba(99,102,241,.14); border-color:rgba(99,102,241,.3); }
.vw-tab:not(.vw-tab--active):hover { background:rgba(255,255,255,.04); border-color:var(--vw-border); }

.vw-tab-label {
    display:flex; align-items:center; gap:5px;
    background:none; border:none; cursor:pointer;
    color:var(--vw-text2); font-size:12px; padding:5px 6px;
    border-radius:5px; transition:color .15s; white-space:nowrap; font-family:'peyda';
}
.vw-tab--active .vw-tab-label { color:var(--vw-text); }
.vw-tab-label:hover { color:var(--vw-text); }
.vw-tab-icon { font-size:13px; opacity:.6; }
.vw-tab--active .vw-tab-icon { opacity:1; color:#a5b4fc; }

.vw-tab-close {
    display:flex; align-items:center; justify-content:center;
    width:18px; height:18px; background:none; border:none; cursor:pointer;
    color:var(--vw-text3); font-size:12px; border-radius:4px;
    opacity:1; transition:opacity .15s, background .15s, color .15s; flex-shrink:0;color:#f87171;
}
.vw-tab-close:hover { background:rgba(239,68,68,.15); }

.vw-tab-add {
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; background:none;
    border:1px solid var(--vw-border); border-radius:var(--vw-radius);
    cursor:pointer; color:var(--vw-text3); font-size:16px; flex-shrink:0;
    transition:background .15s, border-color .15s, color .15s;
}
.vw-tab-add:hover { background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.4); color:#a5b4fc; }

.vw-icon-btn {
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; background:rgba(255,255,255,.05);
    border:1px solid var(--vw-border); border-radius:var(--vw-radius);
    color:var(--vw-text2); cursor:pointer; font-size:16px; flex-shrink:0;
    transition:background .15s, border-color .15s, color .15s;
}
.vw-icon-btn:hover { background:rgba(255,255,255,.1); border-color:var(--vw-border2); color:var(--vw-text); }

.vw-action-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px; background:rgba(255,255,255,.05);
    border:1px solid var(--vw-border); border-radius:var(--vw-radius);
    color:var(--vw-text2); cursor:pointer; font-size:12px; font-family:inherit;
    white-space:nowrap; flex-shrink:0;
    transition:background .15s, border-color .15s, color .15s, transform .1s;
}
.vw-action-btn .mdi { font-size:14px; }
.vw-action-btn:hover { background:rgba(255,255,255,.09); border-color:var(--vw-border2); color:var(--vw-text); }
.vw-action-btn:active { transform:scale(.96); }
.vw-action-btn:disabled { opacity:.35; cursor:not-allowed; }
.vw-action-btn--danger { background:rgba(239,68,68,.1) !important; border-color:rgba(239,68,68,.3) !important; color:#fca5a5 !important; }
.vw-action-btn--danger:not(:disabled):hover { background:rgba(239,68,68,.2) !important; border-color:rgba(239,68,68,.6) !important; color:#fff !important; }

.vw-panes { flex:1; min-height:0; position:relative; background:#000; }
.vw-pane  { position:absolute; inset:0; }
.vw-guac  { width:100%; height:100%; background:#000; }

.vw-overlay {
    position:absolute; inset:0; z-index:10;
    background:rgba(7,10,20,.92);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(2px);
}
.vw-overlay-card {
    display:flex; flex-direction:column; align-items:center; gap:14px;
    text-align:center; max-width:380px; padding:32px;
}
.vw-overlay-icon {
    font-size:48px; color:var(--vw-primary); opacity:.6;
    animation:vwpulse 2s ease-in-out infinite;
}
@keyframes vwpulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.8;transform:scale(1.05)} }
.vw-overlay-msg { font-size:14px; color:var(--vw-text2); line-height:1.5; }
.vw-overlay-msg strong { color:var(--vw-info); font-weight:600;font-family: 'peyda'; }
.vw-clip-label {color:#ffffff}
.vw-error-box {
    display:flex; align-items:flex-start; gap:8px;
    background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35);
    border-radius:var(--vw-radius); padding:10px 14px;
    color:#fca5a5; font-size:13px; max-width:380px;
}
.vw-error-box .mdi { font-size:16px; flex-shrink:0; margin-top:1px; }

.vw-empty {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; color:var(--vw-text3);
}
.vw-empty-icon { font-size:52px; opacity:.18; }
.vw-empty p { font-size:14px; }

.vw-statusbar {
    height:var(--vw-status-h); background:#07090f;
    border-top:1px solid var(--vw-border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 14px; gap:12px; flex-shrink:0;
    font-size:11px; color:var(--vw-text3);
}
.vw-statusbar-left  { display:flex; align-items:center; gap:5px; }
.vw-statusbar-right { display:flex; align-items:center; gap:5px; }
.vw-statusbar .mdi  { font-size:12px; }
.vw-sb-sep  { opacity:.3; }

.vw-status-dot        { font-size:8px !important; color:var(--vw-text3); }
.vw-dot--connected    { color:var(--vw-success) !important; }
.vw-dot--connecting   { color:var(--vw-warning) !important; animation:vwpulse 1.2s ease-in-out infinite; }
.vw-dot--disconnected { color:var(--vw-text3)   !important; }
.vw-dot--error        { color:var(--vw-danger)  !important; }

.vw-drop-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(6, 10, 26, 0.88);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    animation: vwfadein .14s ease;
}
@keyframes vwfadein { from { opacity:0 } to { opacity:1 } }

.vw-drop-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; padding: 52px 72px;
    border: 2px dashed rgba(99,102,241,.55);
    border-radius: 20px; background: rgba(99,102,241,.07);
    text-align: center;
    animation: vwdropbounce .22s cubic-bezier(.32,.72,0,1);
}
@keyframes vwdropbounce { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }

.vw-drop-icon {
    font-size: 60px; color: #a5b4fc;
    animation: vwfloat 1.6s ease-in-out infinite;
}
@keyframes vwfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.vw-drop-title { font-size: 20px; font-weight: 700; color: var(--vw-text); letter-spacing: -.01em; }
.vw-drop-sub   { font-size: 13px; color: var(--vw-text2); }
.vw-drop-sub strong { color: var(--vw-info); }

.vw-upload-toast {
    position: fixed; bottom: 48px; right: 20px; z-index: 99998;
    width: 310px; background: var(--vw-surface);
    border: 1px solid var(--vw-border2); border-radius: var(--vw-radius-lg);
    box-shadow: var(--vw-shadow-lg); overflow: hidden;
    animation: vwslide .2s cubic-bezier(.32,.72,0,1);
}
@keyframes vwslide { from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:none} }

.vw-upload-toast.vw-toast--success { border-color: rgba(16,185,129,.4); }
.vw-upload-toast.vw-toast--error   { border-color: rgba(239,68,68,.4);  }
.vw-upload-toast.vw-toast--blocked { border-color: rgba(239,68,68,.6); background: rgba(30,10,10,.95); }

.vw-toast-inner { display: flex; align-items: center; gap: 11px; padding: 13px 15px; }

.vw-toast-icon { font-size: 22px; color: #a5b4fc; flex-shrink: 0; }
.vw-upload-toast.vw-toast--success .vw-toast-icon { color: var(--vw-success); }
.vw-upload-toast.vw-toast--error   .vw-toast-icon { color: var(--vw-danger);  }

.vw-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vw-toast-name {
    font-size: 12px; font-weight: 500; color: var(--vw-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vw-toast-bar-wrap { height: 4px; background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden; }
.vw-toast-bar {
    height: 100%; width: 0%; background: var(--vw-primary);
    border-radius: 99px; transition: width .35s cubic-bezier(.4,0,.2,1);
}
.vw-upload-toast.vw-toast--success .vw-toast-bar { background: var(--vw-success); }
.vw-upload-toast.vw-toast--error   .vw-toast-bar { background: var(--vw-danger);  }

.vw-toast-pct { font-size: 11px; color: var(--vw-text3); }
.vw-toast-close {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; background: none; border: none; cursor: pointer;
    color: var(--vw-text3); border-radius: 4px; font-size: 14px; flex-shrink: 0;
    transition: background .15s, color .15s;
}
.vw-toast-close:hover { background:rgba(255,255,255,.07); color:var(--vw-text); }

/* Modals */
.vw-backdrop {
    position:fixed; inset:0; z-index:99999;
    background:rgba(7,10,20,.75);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; padding:16px;
}
.vw-modal {
    background:var(--vw-surface); border:1px solid var(--vw-border2);
    border-radius:var(--vw-radius-lg); width:100%; max-width:460px;
    box-shadow:var(--vw-shadow-lg); display:flex; flex-direction:column;
    max-height:80vh; overflow:hidden;
    animation:vwslide .18s cubic-bezier(.32,.72,0,1);
}

.vw-modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:13px 18px; border-bottom:1px solid var(--vw-border);
    font-size:13.5px; font-weight:600; color:var(--vw-text);
    gap:8px; flex-shrink:0;
}
.vw-modal-header > span:first-child { display:flex; align-items:center; gap:8px; }
.vw-modal-header .mdi { font-size:17px; color:#a5b4fc; }

.vw-modal-close {
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px; background:none; border:none; cursor:pointer;
    color:var(--vw-text3); border-radius:6px; font-size:17px; flex-shrink:0;
    transition:background .15s, color .15s;
}
.vw-modal-close:hover { background:rgba(255,255,255,.07); color:var(--vw-text); }
.vw-modal-body   { padding:14px 16px; overflow-y:auto; flex:1; }
.vw-modal-footer { padding:11px 16px; border-top:1px solid var(--vw-border); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }

.vw-conn-row {
    display:flex; align-items:center; gap:10px; width:100%;
    background:transparent; border:1px solid transparent;
    border-radius:var(--vw-radius); padding:9px 11px; margin-bottom:3px;
    color:var(--vw-text); cursor:pointer; text-align:left; font-family:inherit;
    transition:background .12s, border-color .12s;
}
.vw-conn-row:hover { background:rgba(255,255,255,.04); border-color:var(--vw-border2); }
.vw-conn-info  { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.vw-conn-name  { font-size:13px; font-weight:500; color:var(--vw-text); }
.vw-conn-host  { font-size:11.5px; color:var(--vw-text3); }
.vw-conn-arrow { font-size:16px; color:var(--vw-text3); flex-shrink:0; }

.vw-proto-pill {
    display:inline-flex; align-items:center;
    font-size:10px; font-weight:700; letter-spacing:.07em;
    padding:3px 8px; border-radius:20px; flex-shrink:0;
}
.vw-proto-rdp    { background:rgba(29,78,216,.2);  color:#93c5fd; border:1px solid rgba(29,78,216,.35); }
.vw-proto-ssh    { background:rgba(6,95,70,.2);    color:#6ee7b7; border:1px solid rgba(6,95,70,.35); }
.vw-proto-vnc    { background:rgba(124,58,237,.2); color:#ddd6fe; border:1px solid rgba(124,58,237,.35); }
.vw-proto-telnet { background:rgba(146,64,14,.2);  color:#fde68a; border:1px solid rgba(146,64,14,.35); }

.vw-badge-row { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.vw-badge { display:inline-flex; align-items:center; font-size:10px; font-weight:600; letter-spacing:.04em; padding:2px 7px; border-radius:20px; }
.vw-badge--primary { background:rgba(99,102,241,.2);  color:#a5b4fc; border:1px solid rgba(99,102,241,.35); }
.vw-badge--success { background:rgba(16,185,129,.15); color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }
.vw-badge--warning { background:rgba(245,158,11,.15); color:#fde68a; border:1px solid rgba(245,158,11,.3); }
.vw-badge--info    { background:rgba(56,189,248,.12); color:#7dd3fc; border:1px solid rgba(56,189,248,.3); }
.vw-badge--danger  { background:rgba(239,68,68,.15);  color:#fca5a5; border:1px solid rgba(239,68,68,.3); }

.vw-manual-section { margin-top:10px; padding-top:10px; border-top:1px solid var(--vw-border); }
.vw-manual-toggle  { display:flex; align-items:center; gap:8px; cursor:pointer; padding:6px 4px; }
.vw-manual-label   { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--vw-text); }
.vw-manual-label .mdi { font-size:15px; color:#a5b4fc; }
.vw-manual-form { margin-top:10px; background:rgba(0,0,0,.2); border:1px solid var(--vw-border); border-radius:var(--vw-radius); padding:14px; }
.vw-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vw-field  { display:flex; flex-direction:column; gap:5px; }
.vw-label  { font-size:11.5px; font-weight:500; color:var(--vw-text2); }
.vw-required { color:var(--vw-danger); }
.vw-input {
    padding:7px 10px; font-size:13px;
    background:#070b13; border:1px solid var(--vw-border2);
    border-radius:var(--vw-radius); color:var(--vw-text);
    outline:none; caret-color:var(--vw-text); font-family:inherit;
    transition:border-color .15s, box-shadow .15s;
}
.vw-input:focus { border-color:var(--vw-primary); box-shadow:0 0 0 3px rgba(99,102,241,.18); }
.vw-input::placeholder { color:var(--vw-text3); }
.vw-perms-section { margin-top:12px; padding-top:12px; border-top:1px solid var(--vw-border); }
.vw-perms-title   { font-size:11.5px; font-weight:600; color:var(--vw-text3); margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em; }
.vw-perms-grid    { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.vw-check-label   { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--vw-text2); cursor:pointer; }
.vw-checkbox, .vw-radio { width:14px; height:14px; flex-shrink:0; accent-color:var(--vw-primary); cursor:pointer; }

.vw-back-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; background:none; border:none; cursor:pointer;
    color:var(--vw-text3); border-radius:5px; font-size:16px;
    transition:background .15s, color .15s;
}
.vw-back-btn:hover { background:rgba(255,255,255,.07); color:var(--vw-text); }

.vw-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 14px; font-size:12.5px; font-weight:500;
    border:1px solid var(--vw-border2); border-radius:var(--vw-radius);
    background:rgba(255,255,255,.06); color:var(--vw-text2); cursor:pointer;
    font-family:inherit; white-space:nowrap;
    transition:background .15s, border-color .15s, color .15s, transform .1s;
}
.vw-btn .mdi { font-size:14px; }
.vw-btn:hover  { background:rgba(255,255,255,.1); color:var(--vw-text); }
.vw-btn:active { transform:scale(.97); }
.vw-btn:disabled { opacity:.38; cursor:not-allowed; }
.vw-btn--primary { background:var(--vw-primary); border-color:var(--vw-primary); color:#fff; }
.vw-btn--primary:hover { background:var(--vw-primary-h); border-color:var(--vw-primary-h); color:#fff; }

.vw-empty-inline { display:flex; align-items:center; justify-content:center; gap:8px; padding:32px 0; font-size:13px; color:var(--vw-text3); }
.vw-empty-inline .mdi { font-size:20px; opacity:.4; }

.vw-textarea {
    width:100%; padding:8px 11px; font-size:13px;
    background:#070b13; border:1px solid var(--vw-border2);
    border-radius:var(--vw-radius); color:var(--vw-text);
    outline:none; caret-color:var(--vw-text); resize:vertical; font-family:inherit;
    transition:border-color .15s, box-shadow .15s;
}
.vw-textarea:focus { border-color:var(--vw-primary); box-shadow:0 0 0 3px rgba(99,102,241,.18); }
.vw-kbd { background:rgba(255,255,255,.08); border:1px solid var(--vw-border2); border-radius:4px; padding:1px 5px; font-size:11px; color:var(--vw-text2); font-family:inherit; }
.active-tab {
    border-bottom: 2px solid #1e2749 !important;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.tabs-scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tabs-scroll-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
}

.tabs-scroll-track::-webkit-scrollbar {
    display: none;
}

.tabs-scroll-track .nav-item {
    flex: 0 0 auto;
}

.tabs-scroll-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-card-bg, #fff);
    color: var(--bs-body-color, #495057);
    cursor: pointer;
    z-index: 3;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.tabs-scroll-btn:hover {
    background: var(--bs-tertiary-bg, #f1f3f5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.tabs-scroll-btn i {
    font-size: 1.1rem;
    line-height: 1;
}

.tabs-scroll-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    z-index: 2;
}

.tabs-scroll-fade-start {
    left: 36px;
    background: linear-gradient(to right, var(--bs-card-bg, #fff) 0%, transparent 100%);
}

.tabs-scroll-fade-end {
    right: 36px;
    background: linear-gradient(to left, var(--bs-card-bg, #fff) 0%, transparent 100%);
}

[dir="rtl"] .tabs-scroll-fade-start {
    left: auto;
    right: 36px;
    background: linear-gradient(to left, var(--bs-card-bg, #fff) 0%, transparent 100%);
}

[dir="rtl"] .tabs-scroll-fade-end {
    right: auto;
    left: 36px;
    background: linear-gradient(to right, var(--bs-card-bg, #fff) 0%, transparent 100%);
}

[dir="rtl"] .tabs-scroll-btn-start i.mdi-chevron-left::before {
    content: "\F0142";
}

[dir="rtl"] .tabs-scroll-btn-end i.mdi-chevron-right::before {
    content: "\F0141";
}
.vk-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    min-width: 36px;
    height: 34px;
    padding: 0 5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 5px;
    color: var(--vw-text, #e2e8f0);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .1s, border-color .1s, transform .07s;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}
.vk-key:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.18);
}
.vk-key:active, .vk-key.vk-pressed {
    background: rgba(99,102,241,0.28);
    border-color: rgba(99,102,241,0.55);
    transform: scale(0.93);
}
.vk-key.vk-special {
    background: rgba(255,255,255,0.03);
    font-size: 11px;
    color: var(--vw-text2, #94a3b8);
}
.vk-key.vk-mod-active {
    background: rgba(99,102,241,0.32) !important;
    border-color: rgba(99,102,241,0.65) !important;
    color: #a5b4fc !important;
}
.vk-key .vk-shift-label {
    font-size: 9px;
    color: var(--vw-text3, #64748b);
    line-height: 1;
}
.vk-row {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}
#vk-caps-btn.vk-caps-on {
    background: rgba(99,102,241,0.28) !important;
    border-color: rgba(99,102,241,0.55) !important;
    color: #a5b4fc !important;
}
.glowing-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #1e2749;
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1050;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    animation: pulse-glow 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse-glow {
    to {
        box-shadow: 0 0 0 20px rgba(0, 123, 255, 0);
    }
}
.btn-auth-primary .btn-icon {
    display: inline-block;
}

.btn-auth-primary.loading .btn-icon {
    display: none;
}