:root { --white: #fff; --white-50: #ffffff99; --black: #000; --white-100: #fafbfc; --gray-100: #f1f2f6; --gray-200: #d1d8e0; --gray-200-10: #d1d8e010; --gray-200-30: #d1d8e030; --gray-200-50: #d1d8e050; --gray-200-70: #d1d8e070; --gray-300: #a3b1c1; --gray-350: #98a8ba; --gray-300-40: #a3b1c140; --gray-400: #8e9fb3; --gray-500: #6e7a91; --dark-100: #131313; --dark-100-30: #13131330; --dark-100-50: #13131350; --dark-100-70: #13131370; --dark-100-90: #13131390; --dark-150: #1b1b1b; --dark-200: #2c2c2c; --dark-250: #272727; --dark-200-10: #57606f10; --dark-200-30: #57606f30; --dark-200-50: #57606f50; --dark-200-70: #57606f70; --dark-300: #464646; --dark-400: #5f5f5f; --dark-500: #858585; --red-100: #ea2027; --red-100-30: #ea202730; --red-100-50: #ea202750; --red-100-70: #ea202770; --red-100-90: #ea202790; --red-200: #c41319; --red-200-20: #c4131920; --red-200-50: #c4131950; --red-200-90: #c4131990; --green-100: #44bd32; --green-100-30: #44bd3230; --green-100-70: #44bd3270; --green-200: #339823; --green-200-60: #33982360; --green-200-90: #33982390; --orange-100: #ffa600; --orange-100-10: #ffa60010; --orange-100-30: #ffa60030; --orange-100-70: #ffa60070; --orange-100-80: #ffa60080; --orange-150: #eb9900; --orange-200: #e67e22; --orange-200-60: #e67e2250; --orange-200-90: #e67e2290; --orange-300: #e67e22; --blue-100: #2690ff; --blue-100-10: #2690ff10; --blue-100-30: #2690ff30; --blue-100-70: #2690ff70; --blue-200: #006ad9; --blue-200-60: #006ad960; --blue-200-90: #006ad990; --blue-300: #0051a6; --success-button-background: var(--green-100); --success-button-background-hover: var(--green-200); --success-button-color: var(--gray-100); --success-ghost-button-border: var(--green-100); --success-ghost-button-background-hover: var(--green-100-30); --success-ghost-button-color: var(--green-200); } html[data-theme="light"] { --background-default: var(--gray-100); --scrollbar-color: var(--gray-200); --header-background: var(--white); --header-border: var(--gray-200-70); --header-links-color: var(--dark-100); --header-links-color-hover: var(--orange-200); --setting-button-color: var(--dark-300); --setting-button-icon-mobile: var(--gray-300); --setting-button-color-hover: var(--dark-100); --audio-guide-background: var(--white); --audio-guide-circle-background: var(--gray-200-30); --audio-guide-circle-border: var(--blue-100); --audio-guide-icon: var(--dark-300); --audio-guide-text-color-desktop: var(--dark-400); --audio-guide-text-color-desktop-hover: var(--dark-100); --audio-guide-text-color-mobile: var(--dark-500); --mobile-visual-guide-button-background-hover: var(--gray-200); --mobile-visual-guide-button-background: var(--gray-200-30); --mobile-visual-guide-button-color: var(--dark-200); --mobile-hint-button-background-hover: var(--gray-200); --mobile-hint-button-background: var(--gray-200-30); --mobile-hint-button-color: var(--dark-200); --mobile-desc-button-background-hover: var(--gray-200); --mobile-desc-button-background: var(--gray-200-30); --mobile-desc-button-color: var(--dark-200); --header-text-logo-secondary: var(--dark-400); --header-text-logo-primary: var(--black); --custom-header-border: var(--gray-200-30); --custom-header-title-color: var(--dark-100); --nav-header-background: var(--white-100); --nav-header-text-color: var(--dark-400); --nav-header-active-link: var(--dark-100); --nav-header-back-button-text: var(--dark-500); --nav-header-back-button-icon: var(--black); --navigation-bar-background: var(--white); --navigation-bar-border: var(--gray-200); --navigation-bar-item-color: var(--gray-500); --navigation-bar-item-color-active: var(--dark-200); --mobile-menu-trigger-color: var(--dark-100); --mobile-menu-link-color: var(--dark-100); --mobile-menu-link-hover: var(--gray-200-50); --modal-backdrop: var(--dark-100-50); --modal-content-background: var(--gray-100); --modal-close-btn-icon-color: var(--white); --modal-close-btn-background: var(--gray-200); --modal-close-btn-background-hover: var(--gray-300); --drawer-backdrop: var(--dark-100-90); --drawer-content-background: var(--gray-100); --drawer-close-btn-icon-color: var(--white); --drawer-close-btn-background: var(--gray-200); --drawer-close-btn-background-hover: var(--gray-300); --description-drawer-title: var(--dark-100); --description-drawer-text: var(--dark-200); --description-modal-title: var(--dark-100); --description-modal-text: var(--dark-200); --sidebar-background: var(--white); --sidebar-border: var(--gray-200-70); --sidebar-profile-background: var(--gray-200-50); --sidebar-profile-avatar-border: var(--gray-200); --sidebar-profile-username-title: var(--gray-300); --sidebar-profile-username: var(--dark-200); --sidebar-profile-username-hover: var(--orange-100); --sidebar-profile-links-background-hover: var(--gray-100); --sidebar-profile-links-color: var(--dark-100); --sidebar-profile-links-border: var(--gray-100); --sidebar-profile-links-border-mobile: var(--gray-200-30); --sidebar-smart-connections-title-color: var(--dark-100); --sidebar-smart-connections-desc-color: var(--dark-200); --success-blob-background: var(--green-100); --success-blob-pulse-background: var(--green-100); --error-blob-background: var(--red-100); --error-blob-pulse-background: var(--red-100); --info-blob-background: var(--blue-100); --default-blob-background: var(--dark-200); --info-blob-pulse-background: var(--blue-100); --warning-blob-background: var(--orange-100); --warning-blob-pulse-background: var(--orange-100); --remaining-days-color: var(--black); --remaining-days-description-color: var(--dark-200); --default-button-background: var(--gray-200); --default-button-background-lighter-in-dark: var(--gray-200); --default-button-background-hover: var(--gray-300); --default-button-color: var(--dark-100); --warning-button-background: var(--orange-100); --warning-button-background-hover: var(--orange-200); --warning-button-color: var(--white); --warning-ghost-button-border: var(--orange-100); --warning-ghost-button-background-hover: var(--orange-100-30); --warning-ghost-button-color: var(--orange-200); --error-button-background: var(--red-100); --error-button-background-hover: var(--red-200); --error-button-color: var(--gray-100); --error-ghost-button-border: var(--red-100); --error-ghost-button-background-hover: var(--red-100-30); --error-ghost-button-color: var(--red-100); --info-button-background: var(--blue-200); --info-button-background-hover: var(--blue-300); --info-button-color: var(--gray-100); --info-ghost-button-border: var(--blue-200); --info-ghost-button-background-hover: var(--blue-100-30); --info-ghost-button-color: var(--blue-200); --default-field-border: var(--gray-200); --default-field-focus-border: var(--dark-200); --default-field-background: var(--white); --default-field-color: var(--dark-100); --default-field-placeholder-color: var(--gray-300); --error-field-border: var(--red-100); --error-field-focus-border: var(--red-200); --error-field-background: var(--red-100-30); --error-field-color: var(--dark-100); --error-field-placeholder-color: var(--red-100); --field-icon-color: var(--gray-300); --field-icon-success: var(--green-100); --field-icon-warning: var(--orange-100); --field-icon-error: var(--red-100); --field-icon-info: var(--blue-200); --snackbar-default-background: var(--dark-100); --snackbar-color: var(--gray-100); --snackbar-success-background: var(--green-100); --snackbar-error-background: var(--red-100); --snackbar-info-background: var(--blue-100); --snackbar-warning-background: var(--orange-100); --tooltip-background: var(--dark-100); --tooltip-color: var(--gray-100); --default-alert-background: var(--gray-200); --default-alert-border: var(--gray-300); --default-alert-color: var(--dark-100); --default-alert-close-background: var(--dark-100-30); --default-alert-close-background-hover: var(--dark-100-70); --default-alert-icon-color: var(--dark-200); --default-alert-close-icon-color: var(--white); --warning-alert-background: var(--orange-100-30); --warning-alert-border: var(--orange-100); --warning-alert-color: var(--dark-100); --warning-alert-close-background: var(--orange-200-60); --warning-alert-close-background-hover: var(--orange-200-90); --warning-alert-close-icon-color: var(--white); --warning-alert-icon-color: var(--orange-200); --info-alert-background: var(--blue-100-30); --info-alert-border: var(--blue-100); --info-alert-color: var(--dark-100); --info-alert-close-background: var(--blue-200-60); --info-alert-close-background-hover: var(--blue-200-90); --info-alert-close-icon-color: var(--white); --info-alert-icon-color: var(--blue-200); --error-alert-background: var(--red-100-30); --error-alert-border: var(--red-100); --error-alert-color: var(--dark-100); --error-alert-close-background: var(--red-200-50); --error-alert-close-background-hover: var(--red-200-90); --error-alert-close-icon-color: var(--white); --error-alert-icon-color: var(--red-100); --success-alert-background: var(--green-100-30); --success-alert-border: var(--green-100); --success-alert-color: var(--dark-100); --success-alert-close-background: var(--green-200-60); --success-alert-close-background-hover: var(--green-200-90); --success-alert-close-icon-color: var(--white); --success-alert-icon-color: var(--green-200); --service-card-background: var(--white); --service-card-background-hover: var(--white); --service-card-title-color: var(--dark-100); --service-card-servers-color: var(--dark-300); --service-card-border: var(--gray-200); --service-card-logo-color: var(--dark-300); --service-card-chevron-color: var(--gray-300); --session-card-background: var(--gray-200-50); --session-card-border: var(--gray-200); --session-card-label-color: var(--gray-700); --session-card-platform-icon-background: var(--green-100-30); --session-card-platform-icon-color: var(--black); --session-card-label: var(--gray-400); --session-card-value: var(--dark-100); --session-card-badge-background: var(--gray-200); --expire-section-background: var(--red-200-20); --expire-section-icon: var(--red-200); --expire-section-title: var(--dark-100); --expire-section-description: var(--dark-500); --confirm-modal-text-color: var(--dark-200); --confirm-modal-icon-color: var(--dark-200); --services-header-title-color: var(--dark-100); --icon-box-background: var(--white); --icon-box-color: var(--dark-100); --chart-background: var(--gray-200-30); --chart-rail: var(--gray-200); --default-chart-progress: var(--gray-100); --success-chart-progress: var(--green-100); --warning-chart-progress: var(--orange-100); --error-chart-progress: var(--red-100); --default-chart-remaining-days: var(--gray-200); --success-chart-remaining-days: var(--green-200); --warning-chart-remaining-days: var(--orange-200); --error-chart-remaining-days: var(--red-200); --chart-remaining-title: var(--dark-100); --chart-remaining-description: var(--dark-500); --hint-card-background: var(--gray-200-50); --hint-card-number: var(--dark-500); --hint-card-text: var(--dark-300); --mobile-service-header-background: var(--white-50); --mobile-service-header-status-text: var(--dark-100); --mobile-service-header-warning-status-title: var(--orange-100); --mobile-service-header-success-status-title: var(--green-200); --desktop-service-header-background: var(--gray-200-50); --desktop-service-header-audio-guide-background: var(--white); --desktop-service-header-image-background: var(--white-100); --desktop-service-header-title-color: var(--dark-200); --desktop-service-header-warning-status-title: var(--orange-200); --desktop-service-header-success-status-title: var(--green-100); --desktop-service-header-status-text: var(--dark-200); --tab-bar-background: var(--white-100); --tab-bar-background-hover: var(--gray-100); --tab-bar-item-color: var(--dark-200); --tab-bar-border: var(--gray-200); --tab-bar-active-item-border: var(--blue-100); --tab-bar-active-item-color: var(--blue-200); --service-tabs-background-active: var(--gray-200); --service-tabs-background-hover: var(--gray-200-50); --service-tabs-border: var(--gray-200); --service-tabs-text-color: var(--dark-300); --service-tabs-text-color-active: var(--dark-100); --service-tabs-icon-color: var(--gray-300); --service-tabs-icon-color-active: var(--dark-100); --tags-list-background: var(--white-100); --tags-list-with-bg-icon-color: var(--dark-100); --tags-list-icon-color: var(--gray-300); --tags-list-icon-color-hover: var(--blue-100); --server-card-background: var(--white); --server-card-border: var(--gray-200); --server-card-border-hover: var(--gray-400); --server-card-title: var(--dark-100); --server-card-flag-border: var(--gray-100); --server-card-copy-color: var(--dark-200); --server-card-copy-color-hover: var(--blue-100); --server-card-watermark-alpha: 0.05; --openvpn-import-tab-background: var(--white-100); --openvpn-import-tab-item-color: var(--dark-100); --openvpn-import-tab-active-item-color: var(--white); --openvpn-import-tab-active-item-background: var(--blue-100); --openvpn-import-tab-content-title-color: var(--dark-200); --table-border: var(--gray-200); --table-cell-color: var(--dark-100); --openvpn--header-flag-border: var(--white); --openvpn--header-border: var(--gray-300); --openvpn--header-title-label: var(--dark-300); --openvpn--header-title: var(--dark-100); --openvpn--content-title: var(--dark-100); --openvpn--hint-icon: var(--orange-100); --openvpn--hint-text: var(--dark-200); --service-servers-header-title: var(--dark-100); --service-servers-header-icon: var(--dark-100); --service-servers-filters-background: var(--gray-200-70); --service-servers-secret-key: var(--dark-200); --service-servers-secret-key-background: var(--blue-100-10); --service-servers-secret-key-border: var(--blue-100-30); --setup-service-servers-background: var(--gray-200-30); --setup-service-servers-title: var(--dark-100); --setup-service-servers-description: var(--dark-200); --filters-title: var(--dark-100); --filters-item-background: var(--dark-300); --filters-item-title: var(--gray-100); --filters-item-flag-border: var(--gray-300); --location-filter-modal-title: var(--dark-100); --location-card-background: var(--gray-200-50); --location-card-background-active: var(--gray-200); --location-card-background-hover: var(--gray-200); --location-card-border: var(--gray-200); --location-card-checkbox: var(--gray-200); --location-card-checkbox-hover: var(--gray-100); --location-card-checkbox-active: var(--blue-100); --location-card-checkbox-icon: var(--gray-100); --location-card-flag-border: var(--white-100); --location-card-hint: var(--gray-400); --location-card-title: var(--dark-100); --location-no-item-found-border: var(--dark-200-30); --location-no-item-found-icon: var(--gray-300); --location-no-item-found-text: var(--dark-100); --open-vpn-config-card-color: var(--dark-100); --tag-card-title: var(--dark-100); --tag-card-description: var(--dark-300); --tag-card-border: var(--gray-300); --tag-card-background: var(--gray-200-50); --tag-card-background-hover: var(--gray-200-70); --tag-card-checkbox: var(--gray-200); --tag-card-checkbox-hover: var(--gray-100); --tag-card-checkbox-active: var(--blue-100); --tag-card-checkbox-icon: var(--gray-100); --tag-hint-card-title: var(--dark-100); --tag-hint-card-description: var(--dark-300); --tag-hint-card-background: var(--gray-200-50); --server-list-empty-icon: var(--gray-200); --server-list-empty-title: var(--dark-100); --server-list-empty-border: var(--gray-200); --tutorial-card-background: var(--gray-200-70); --tutorial-card-background-hover: var(--gray-200); --tutorial-card-border: var(--gray-200); --tutorial-card-title: var(--dark-200); --tutorial-card-title-hover: var(--blue-200); --tutorial-card-prefix: var(--dark-400); --tutorial-card-icon: var(--dark-400); --tutorial-card-icon-hover: var(--blue-200); --tutorial-card-arrow: var(--dark-400); --change-information-title: var(--dark-100); --change-information-description: var(--dark-300); --change-information-user-agreement: var(--dark-200); --dns-action-agreement-title: var(--dark-100); --dns-action-agreement-description: var(--dark-300); --dns-action-agreement-user-agreement: var(--dark-200); --change-password-agreement-title: var(--dark-100); --change-password-agreement-description: var(--dark-300); --change-password-agreement-user-agreement: var(--dark-200); --create-service-title: var(--dark-100); --create-service-description: var(--dark-300); --create-service-user-agreement: var(--dark-200); --refresh-modal-text: var(--dark-200); --list-description: var(--dark-200); --disable-modal-title: var(--dark-100); --disable-modal-description: var(--dark-300); --wireguard-title: var(--dark-100); --wireguard-file-description: var(--dark-200); --wireguard-qr-code-title: var(--dark-200); --wireguard--header-flag-border: var(--white); --wireguard--header-border: var(--gray-300); --wireguard--header-title-label: var(--dark-300); --wireguard--header-title: var(--dark-100); --proxy-card-type: var(--dark-500); --proxy-card-table-border: var(--gray-200); --proxy-card-copy-hint: var(--dark-200); --ip-list-title: var(--dark-200); --ip-card-background: var(--white-100); --ip-card-border: var(--gray-200); --ip-card-add-new-one-text: var(--blue-100); --ip-card-add-new-one-background-hover: var(--blue-100-10); --ip-card-add-new-one-border-hover: var(--blue-100); --ip-card-title: var(--dark-200); --ip-card-ip: var(--dark-100); --user-ip-form-ip-box-gradient-1: var(--gray-200); --user-ip-form-ip-box-gradient-2: var(--gray-400); --user-ip-form-ip-box-color: var(--white); --user-ip-form-title: var(--dark-200); --label: var(--dark-200); --switch-label: var(--dark-200); --switch-icon: var(--dark-300); --setting-item-icon: var(--dark-300); --setting-item-label: var(--dark-200); --setting-item-description: var(--dark-300); --setting-item-border: var(--dark-200-10); --setting-header-color: var(--dark-300); --setting-header-border: var(--gray-200); --change-password-title: var(--dark-200); --access-block-background: var(--orange-100-10); --access-block-border: var(--orange-100-70); --access-block-icon: var(--orange-100); --access-block-title: var(--dark-200); --access-block-text: var(--dark-200); --chita-platforms-title-color: var(--black); --chita-platforms-title-border: var(--black); --chita-platforms-background: var(--gray-200-50); --chita-platforms-border: var(--gray-200); --chita-platforms-title: var(--dark-100); --chita-platforms-text: var(--dark-300); --chita-platforms-text-link: var(--blue-100); --chita-platforms-text-link-hover: var(--blue-200); --chita-platforms-text-bold: var(--dark-100); --chita-platforms-item-background: var(--gray-200-70); --chita-platforms-item-background-hover: var(--gray-300-40); --chita-platforms-item-text: var(--dark-300); --chita-platforms-item-icon: var(--blue-100); --payment-history-table-active-sort-button-background: var(--gray-300-40); --payment-history-table-active-sort-button-text: var(--black); --payment-history-table-header-background: var(--gray-200-50); --payment-history-table-header-text: var(--dark-200); --payment-history-table-item-rotated-arrow: var(--red-100); --payment-history-table-item-background: var(--white); --payment-history-table-body-background: var(--gray-200-50); --payment-history-table-item-divider: var(--gray-200); --payment-history-table-item-divider-dark: var(--gray-300); --payment-history-table-item-price-color: var(--blue-200); --payment-history-table-item-currency-color: var(--gray-300); --payment-history-table-button-background: var(--dark-200-10); --payment-history-table-button-background-hover: var(--dark-200-30); --payment-history-table-button-border: var(--dark-200-30); --payment-history-table-guide: var(--gray-400); --payment-history-table-status-icon: var(--white); --payment-history-table-status-success: var(--green-100); --payment-history-table-status-success-shadow: var(--green-100-30); --payment-history-table-status-failed: var(--red-100); --payment-history-table-status-failed-shadow: var(--red-100-30); --payment-history-table-status-fraud: var(--orange-100); --payment-history-table-status-fraud-shadow: var(--orange-100-30); --payment-history-table-status-refund: var(--blue-100); --payment-history-table-status-refund-shadow: var(--blue-100-30); --payment-history-table-active-page-background: var(--blue-200); --payment-renew-color: var(--blue-100); --payment-renew-background: var(--blue-100-30); --payment-new-color: var(--green-100); --payment-new-background: var(--green-100-30); --payment-filter-input-text: var(--dark-100); --payment-filter-text: var(--dark-200); --payment-filter-input-background: var(--white); --payment-filter-label: var(--dark-300); --payment-filter-background: var(--gray-200-50); --payment-filter-button-background: var(--white); --payment-filter-border: var(--gray-200); --payment-filter-background-hover: var(--blue-100-10); --payment-filter-border-hover: var(--blue-100-70); --payment-filter-body-background: var(--white); --payment-filter-body-border: var(--gray-200); --payment-filter-input-placeholder: var(--gray-300); --payment-filter-input-focus-color: var(--blue-100); --skeleton-background: var(--gray-200); --datepicker-background-color: #212121; --datepicker-text-color: #ffffff; --datepicker-hover-color: #484848; --datepicker-hover-text-color: #ffffff; --datepicker-primary-color: #005cb2; --datepicker-primary-text-color: #ffffff; --datepicker-secondary-color: #a9a9a9; --datepicker-border-color: #2d2d2d; --datepicker-menu-border-color: #2d2d2d; --datepicker-disabled-color: #737373; --datepicker-scroll-bar-background: #212121; --datepicker-scroll-bar-color: #484848; --datepicker-success-color: #00701a; --datepicker-danger-color: #e53935; --datepicker-highlight-color: rgba(0, 92, 178, 0.2); --event-modal-title-color: #212121; --event-modal-text-color: #2d2d2d; --event-modal-link-bg: var(--blue-100); --event-modal-strong-text-color: #e53935; --event-modal-link-color: #ffffff; --special-hint-text-color: var(--dark-300); --special-hint-orange: #f74832; --special-hint-bg: var(--orange-100-30); --special-hint-border: var(--orange-100-80); --modal-title-border: var(--gray-200); } /* */ html[data-theme="dark"] { --background-default: var(--dark-100); --scrollbar-color: var(--dark-300); --header-background: var(--dark-200); --header-border: var(--dark-300); --header-links-color: var(--white); --header-links-color-hover: var(--orange-100); --setting-button-color: var(--gray-300); --setting-button-icon-mobile: var(--gray-300); --setting-button-color-hover: var(--gray-100); --audio-guide-background: var(--dark-200); --audio-guide-circle-background: var(--dark-200-30); --audio-guide-circle-border: var(--blue-100); --audio-guide-icon: var(--gray-200); --audio-guide-text-color-desktop: var(--gray-300); --audio-guide-text-color-desktop-hover: var(--gray-200); --audio-guide-text-color-mobile: var(--gray-300); --mobile-visual-guide-button-background-hover: var(--dark-200-70); --mobile-visual-guide-button-background: var(--dark-200-30); --mobile-visual-guide-button-color: var(--gray-200); --mobile-hint-button-background-hover: var(--dark-200-70); --mobile-hint-button-background: var(--dark-200-30); --mobile-hint-button-color: var(--gray-200); --mobile-desc-button-background-hover: var(--dark-200-70); --mobile-desc-button-background: var(--dark-200-30); --mobile-desc-button-color: var(--gray-200); --header-text-logo-secondary: var(--gray-300); --header-text-logo-primary: var(--white); --custom-header-border: var(--dark-100-70); --custom-header-title-color: var(--gray-100); --nav-header-background: var(--dark-250); --nav-header-text-color: var(--gray-400); --nav-header-active-link: var(--gray-200); --nav-header-back-button-text: var(--gray-300); --nav-header-back-button-icon: var(--white); --navigation-bar-background: var(--dark-200); --navigation-bar-border: var(--dark-300); --navigation-bar-item-color: var(--gray-300); --navigation-bar-item-color-active: var(--gray-100); --mobile-menu-trigger-color: var(--gray-100); --mobile-menu-link-color: var(--gray-100); --mobile-menu-link-hover: var(--gray-200-50); --modal-backdrop: var(--dark-100-50); --modal-content-background: var(--dark-300); --modal-close-btn-icon-color: var(--gray-200); --modal-close-btn-background: var(--dark-200); --modal-close-btn-background-hover: var(--dark-100); --drawer-backdrop: var(--dark-100-50); --drawer-content-background: var(--dark-300); --drawer-close-btn-icon-color: var(--gray-200); --drawer-close-btn-background: var(--dark-200); --drawer-close-btn-background-hover: var(--dark-100); --description-drawer-title: var(--gray-100); --description-drawer-text: var(--gray-200); --description-modal-title: var(--gray-100); --description-modal-text: var(--gray-200); --sidebar-background: var(--dark-200); --sidebar-border: var(--dark-300); --sidebar-profile-background: var(--gray-200-30); --sidebar-profile-avatar-border: var(--dark-300); --sidebar-profile-username-title: var(--gray-200); --sidebar-profile-username: var(--gray-100); --sidebar-profile-username-hover: var(--orange-200); --sidebar-profile-links-background-hover: var(--dark-100); --sidebar-profile-links-color: var(--gray-100); --sidebar-profile-links-border: var(--dark-100-30); --sidebar-profile-links-border-mobile: var(--dark-200); --sidebar-smart-connections-title-color: var(--gray-100); --sidebar-smart-connections-desc-color: var(--gray-200); --success-blob-background: var(--green-100); --success-blob-pulse-background: var(--green-100); --error-blob-background: var(--red-100); --error-blob-pulse-background: var(--red-100); --info-blob-background: var(--blue-100); --default-blob-background: var(--gray-200); --info-blob-pulse-background: var(--blue-100); --warning-blob-background: var(--orange-100); --warning-blob-pulse-background: var(--orange-100); --remaining-days-color: var(--white); --remaining-days-description-color: var(--gray-200); --default-button-background: var(--dark-300); --default-button-background-lighter-in-dark: var(--dark-500); --default-button-background-hover: var(--dark-400); --default-button-color: var(--gray-100); --warning-button-background: var(--orange-200); --warning-button-background-hover: var(--orange-150); --warning-button-color: var(--white); --warning-ghost-button-border: var(--orange-100); --warning-ghost-button-background-hover: var(--orange-100-30); --warning-ghost-button-color: var(--orange-200); --error-button-background: var(--red-200); --error-button-background-hover: var(--red-100); --error-button-color: var(--gray-100); --error-ghost-button-border: var(--red-100); --error-ghost-button-background-hover: var(--red-100-30); --error-ghost-button-color: var(--red-100); --info-button-background: var(--blue-200); --info-button-background-hover: var(--blue-300); --info-button-color: var(--gray-100); --info-ghost-button-border: var(--blue-100); --info-ghost-button-background-hover: var(--blue-100-30); --info-ghost-button-color: var(--blue-100); --default-field-border: var(--dark-300); --default-field-focus-border: var(--white); --default-field-background: var(--dark-200-50); --default-field-color: var(--gray-200); --default-field-placeholder-color: var(--dark-500); --error-field-border: var(--red-100); --error-field-focus-border: var(--red-200); --error-field-background: var(--red-100-30); --error-field-color: var(--gray-100); --error-field-placeholder-color: var(--red-100); --field-icon-color: var(--gray-300); --field-icon-success: var(--green-100); --field-icon-warning: var(--orange-200); --field-icon-error: var(--red-100); --field-icon-info: var(--blue-100); --snackbar-default-background: var(--gray-100); --snackbar-color: var(--dark-100); --snackbar-success-background: var(--green-200); --snackbar-error-background: var(--red-200); --snackbar-info-background: var(--blue-200); --snackbar-warning-background: var(--orange-200); --tooltip-background: var(--gray-200); --tooltip-color: var(--dark-100); --default-alert-background: var(--dark-200); --default-alert-border: var(--dark-300); --default-alert-color: var(--gray-200); --default-alert-close-background: var(--dark-100-50); --default-alert-close-background-hover: var(--dark-100-70); --default-alert-close-icon-color: var(--gray-100); --default-alert-icon-color: var(--gray-200); --warning-alert-background: var(--orange-100-30); --warning-alert-border: var(--orange-200); --warning-alert-color: var(--gray-100); --warning-alert-close-background: var(--orange-200-60); --warning-alert-close-background-hover: var(--orange-200-90); --warning-alert-close-icon-color: var(--gray-100); --warning-alert-icon-color: var(--orange-200); --info-alert-background: var(--blue-100-30); --info-alert-border: var(--blue-200); --info-alert-color: var(--gray-100); --info-alert-close-background: var(--blue-200-60); --info-alert-close-background-hover: var(--blue-200-90); --info-alert-close-icon-color: var(--gray-100); --info-alert-icon-color: var(--blue-100); --error-alert-background: var(--red-200-50); --error-alert-border: var(--red-200); --error-alert-color: var(--gray-100); --error-alert-close-background: var(--red-100-50); --error-alert-close-background-hover: var(--red-100-90); --error-alert-close-icon-color: var(--gray-100); --error-alert-icon-color: var(--red-200); --success-alert-background: var(--green-100-30); --success-alert-border: var(--green-200); --success-alert-color: var(--gray-100); --success-alert-close-background: var(--green-200-60); --success-alert-close-background-hover: var(--green-200-90); --success-alert-close-icon-color: var(--gray-100); --success-alert-icon-color: var(--green-100); --service-card-background: var(--dark-200); --service-card-background-hover: var(--dark-300); --service-card-title-color: var(--gray-200); --service-card-servers-color: var(--gray-200); --service-card-border: var(--dark-300); --service-card-logo-color: var(--dark-400); --service-card-chevron-color: var(--gray-300); --session-card-background: var(--dark-200-50); --session-card-border: var(--gray-200-30); --session-card-label-color: var(--gray-700); --session-card-platform-icon-background: var(--green-100-30); --session-card-platform-icon-color: var(--white); --session-card-label: var(--dark-500); --session-card-value: var(--gray-100); --session-card-badge-background: var(--gray-300); --expire-section-background: var(--red-200-50); --expire-section-icon: var(--red-200); --expire-section-title: var(--gray-100); --expire-section-description: var(--gray-300); --confirm-modal-icon-color: var(--gray-100); --confirm-modal-text-color: var(--gray-100); --services-header-title-color: var(--gray-100); --icon-box-background: var(--dark-200); --icon-box-color: var(--gray-100); --chart-background: var(--dark-200-30); --chart-rail: var(--dark-300); --default-chart-progress: var(--gray-100); --success-chart-progress: var(--green-100); --warning-chart-progress: var(--orange-100); --error-chart-progress: var(--red-100); --default-chart-remaining-days: var(--gray-200); --success-chart-remaining-days: var(--green-200); --warning-chart-remaining-days: var(--orange-200); --error-chart-remaining-days: var(--red-200); --chart-remaining-title: var(--gray-200); --chart-remaining-description: var(--dark-500); --hint-card-background: var(--dark-200-50); --hint-card-number: var(--dark-500); --hint-card-text: var(--gray-300); --mobile-service-header-background: var(--dark-150); --mobile-service-header-status-text: var(--gray-200); --mobile-service-header-warning-status-title: var(--orange-200); --mobile-service-header-success-status-title: var(--green-200); --desktop-service-header-background: var(--dark-200-50); --desktop-service-header-audio-guide-background: var(--dark-100); --desktop-service-header-image-background: var(--gray-200-70); --desktop-service-header-title-color: var(--white); --desktop-service-header-warning-status-title: var(--orange-200); --desktop-service-header-success-status-title: var(--green-100); --desktop-service-header-status-text: var(--gray-200); --tab-bar-background: var(--dark-250); --tab-bar-background-hover: var(--dark-100); --tab-bar-border: var(--dark-300); --tab-bar-item-color: var(--gray-200); --tab-bar-active-item-border: var(--blue-100); --tab-bar-active-item-color: var(--blue-100); --service-tabs-background-active: var(--dark-200); --service-tabs-background-hover: var(--dark-200-30); --service-tabs-border: var(--dark-300); --service-tabs-text-color: var(--gray-300); --service-tabs-text-color-active: var(--gray-100); --service-tabs-icon-color: var(--gray-300); --service-tabs-icon-color-active: var(--gray-100); --tags-list-background: var(--dark-200); --tags-list-with-bg-icon-color: var(--gray-200); --tags-list-icon-color: var(--dark-500); --tags-list-icon-color-hover: var(--blue-100); --server-card-background: var(--dark-200); --server-card-border: var(--dark-300); --server-card-border-hover: var(--dark-500); --server-card-title: var(--gray-100); --server-card-flag-border: var(--dark-100-50); --server-card-copy-color: var(--gray-100); --server-card-copy-color-hover: var(--blue-100); --server-card-watermark-alpha: 0.2; --openvpn-import-tab-background: var(--dark-200); --openvpn-import-tab-item-color: var(--gray-200); --openvpn-import-tab-active-item-background: var(--blue-200); --openvpn-import-tab-active-item-color: var(--white); --openvpn-import-tab-content-title-color: var(--gray-100); --table-border: var(--dark-200); --table-cell-color: var(--gray-200); --openvpn--header-flag-border: var(--white); --openvpn--header-border: var(--gray-300); --openvpn--header-title-label: var(--gray-200); --openvpn--header-title: var(--gray-100); --openvpn--content-title: var(--gray-100); --openvpn--hint-icon: var(--orange-200); --openvpn--hint-text: var(--gray-200); --service-servers-header-title: var(--gray-100); --service-servers-header-icon: var(--gray-100); --service-servers-filters-background: var(--dark-200-50); --service-servers-secret-key: var(--gray-100); --service-servers-secret-key-background: var(--blue-100-30); --service-servers-secret-key-border: var(--blue-100-70); --setup-service-servers-background: var(--dark-200-30); --setup-service-servers-title: var(--gray-100); --setup-service-servers-description: var(--gray-200); --filters-title: var(--gray-100); --filters-item-background: var(--gray-300); --filters-item-title: var(--dark-100); --filters-item-flag-border: var(--dark-100); --location-filter-modal-title: var(--gray-100); --location-card-background: var(--dark-200-50); --location-card-background-active: var(--dark-200); --location-card-background-hover: var(--dark-200); --location-card-border: var(--dark-400); --location-card-checkbox: var(--dark-200-70); --location-card-checkbox-hover: var(--dark-100-70); --location-card-checkbox-active: var(--blue-200); --location-card-checkbox-icon: var(--gray-100); --location-card-flag-border: var(--dark-100); --location-card-hint: var(--gray-400); --location-card-title: var(--white); --location-no-item-found-border: var(--gray-200-30); --location-no-item-found-icon: var(--gray-300); --location-no-item-found-text: var(--gray-100); --open-vpn-config-card-color: var(--gray-100); --tag-card-title: var(--gray-100); --tag-card-description: var(--gray-200); --tag-card-border: var(--dark-500); --tag-card-background: var(--dark-100-50); --tag-card-background-hover: var(--dark-100-70); --tag-card-checkbox: var(--dark-200-70); --tag-card-checkbox-hover: var(--dark-100-70); --tag-card-checkbox-active: var(--blue-200); --tag-card-checkbox-icon: var(--gray-100); --tag-hint-card-title: var(--gray-100); --tag-hint-card-description: var(--gray-200); --tag-hint-card-background: var(--dark-100-50); --server-list-empty-icon: var(--dark-300); --server-list-empty-title: var(--gray-100); --server-list-empty-border: var(--dark-200); --tutorial-card-background: var(--dark-200-30); --tutorial-card-background-hover: var(--dark-200-50); --tutorial-card-border: var(--dark-300); --tutorial-card-title: var(--gray-100); --tutorial-card-title-hover: var(--blue-100); --tutorial-card-prefix: var(--gray-300); --tutorial-card-icon: var(--gray-300); --tutorial-card-icon-hover: var(--blue-100); --tutorial-card-arrow: var(--gray-400); --change-information-title: var(--gray-100); --change-information-description: var(--gray-200); --change-information-user-agreement: var(--gray-100); --dns-action-agreement-title: var(--gray-100); --dns-action-agreement-description: var(--gray-200); --dns-action-agreement-user-agreement: var(--gray-100); --change-password-agreement-title: var(--gray-100); --change-password-agreement-description: var(--gray-200); --change-password-agreement-user-agreement: var(--gray-100); --create-service-title: var(--gray-100); --create-service-description: var(--gray-200); --create-service-user-agreement: var(--gray-100); --refresh-modal-text: var(--gray-100); --list-description: var(--gray-100); --disable-modal-title: var(--gray-100); --disable-modal-description: var(--gray-300); --wireguard-title: var(--gray-100); --wireguard-file-description: var(--gray-200); --wireguard-qr-code-title: var(--dark-200); --wireguard--header-flag-border: var(--white); --wireguard--header-border: var(--gray-300); --wireguard--header-title-label: var(--gray-200); --wireguard--header-title: var(--gray-100); --proxy-card-type: var(--gray-300); --proxy-card-table-border: var(--dark-200-70); --proxy-card-copy-hint: var(--gray-100); --ip-list-title: var(--gray-100); --ip-card-background: var(--dark-200); --ip-card-border: var(--dark-300); --ip-card-add-new-one-text: var(--blue-100); --ip-card-add-new-one-background-hover: var(--blue-100-30); --ip-card-add-new-one-border-hover: var(--blue-100); --ip-card-title: var(--gray-200); --ip-card-ip: var(--gray-100); --user-ip-form-ip-box-gradient-1: var(--dark-200); --user-ip-form-ip-box-gradient-2: var(--dark-100); --user-ip-form-ip-box-color: var(--gray-300); --user-ip-form-title: var(--gray-100); --label: var(--gray-200); --switch-label: var(--white-100); --switch-icon: var(--gray-300); --setting-item-icon: var(--gray-300); --setting-item-label: var(--white-100); --setting-item-description: var(--gray-200); --setting-item-border: var(--gray-200-10); --setting-header-color: var(--gray-100); --setting-header-border: var(--dark-200); --change-password-title: var(--gray-100); --access-block-background: var(--orange-100-10); --access-block-border: var(--orange-100-70); --access-block-icon: var(--orange-200); --access-block-title: var(--gray-100); --access-block-text: var(--gray-100); --chita-platforms-title-color: var(--white); --chita-platforms-title-border: var(--white); --chita-platforms-background: var(--dark-200-50); --chita-platforms-border: var(--gray-200-30); --chita-platforms-title: var(--white); --chita-platforms-text: var(--gray-400); --chita-platforms-text-link: var(--blue-100); --chita-platforms-text-link-hover: var(--blue-200); --chita-platforms-text-bold: var(--white); --chita-platforms-item-background: var(--dark-200-30); --chita-platforms-item-background: var(--dark-200-30); --chita-platforms-item-background-hover: var(--dark-200-50); --chita-platforms-item-text: var(--white); --chita-platforms-item-icon: var(--blue-100); --payment-history-table-active-sort-button-text: var(--white); --payment-history-table-active-sort-button-background: var(--gray-300-40); --payment-history-table-header-background: var(--gray-200-50); --payment-history-table-header-text: var(--gray-200); --payment-history-table-item-rotated-arrow: var(--red-100); --payment-history-table-item-background: var(--gray-200-30); --payment-history-table-body-background: var(--dark-200-50); --payment-history-table-item-divider: var(--dark-400); --payment-history-table-item-divider-dark: var(--gray-300); --payment-history-table-item-price-color: var(--blue-200); --payment-history-table-item-currency-color: var(--gray-300); --payment-history-table-button-background: var(--dark-300); --payment-history-table-button-text: var(--gray-300); --payment-history-table-button-background-hover: var(--dark-400); --payment-history-table-button-border: var(--dark-400); --payment-history-table-guide: var(--gray-400); --payment-history-table-status-icon: var(--white); --payment-history-table-status-success: var(--green-100); --payment-history-table-status-success-shadow: var(--green-100-30); --payment-history-table-status-failed: var(--red-100); --payment-history-table-status-failed-shadow: var(--red-100-30); --payment-history-table-status-fraud: var(--orange-100); --payment-history-table-status-fraud-shadow: var(--orange-100-30); --payment-history-table-status-refund: var(--blue-100); --payment-history-table-status-refund-shadow: var(--blue-100-30); --payment-history-table-active-page-background: var(--blue-200); --payment-renew-color: var(--blue-100); --payment-renew-background: var(--blue-100-30); --payment-new-color: var(--green-100); --payment-new-background: var(--green-100-30); --payment-filter-input-text: var(--gray-100); --payment-filter-text: var(--gray-200); --payment-filter-label: var(--gray-300); --payment-filter-button-background: var(--dark-100); --payment-filter-background: var(--dark-200-50); --payment-filter-border: var(--dark-300); --payment-filter-background-hover: var(--dark-300); --payment-filter-border-hover: var(--dark-400); --payment-filter-body-background: var(--dark-200-50); --payment-filter-body-border: var(--dark-300); --payment-filter-input-placeholder: var(--gray-300); --payment-filter-input-focus-color: var(--blue-100); --payment-filter-input-background: var(--dark-100); --skeleton-background: var(--dark-200); --event-modal-title-color: var(--white); --event-modal-text-color: var(--white-100); --event-modal-link-bg: var(--blue-100); --event-modal-strong-text-color: var(--red-100); --event-modal-link-color: var(--white); --special-hint-text-color: var(--white-100); --special-hint-orange: var(--orange-100); --special-hint-bg: var(--orange-100-30); --special-hint-border: var(--orange-100-80); --modal-title-border: var(--dark-400); }