/* ===================================================== VARIABLES ===================================================== */ :root { --header-height: 84px; --sidebarPage-width: 260px; --sidebarPage-collapsed-width: 65px; --background-grey-1000: #F7F7F7; --background-html: #F7F7F7; --text-primary: #121316; --text-secondary: #737375; --interface-grey-900: #FFFFFF; --stroke-stroke-2: #E9E9E9; --interface-grey-800: #F7F7F7; --interface-grey-950: #FFFFFF; --cards-icon-background-background: #F7F7F7; --cards-icon-background-stroke: #F7F7F7; --cards-icon-background-icon: #121316; --interface-grey-0: #121316; --text-black-universal: #121316; --interface-grey-1000-universal: #121316; --text-primary-universal: #FFFFFF; --interface-grey-500: #737375; --interface-grey-400: #737375; --nav-item-primary-background-active: #EDEDED; --interface-grey-900-lvl-2: #E9E9E9; --interface-green-500: #62CA79; --counter-active: #62CA79; --text-black: #FFFFFF; --dropdown-menu-avatar-icon-default: #E9E9E9; --dropdown-menu-avatar-icon-active: #DEDEDE; --dropdown-menu-background: #FFFFFF; --nav-item-secondary-text-default: #121316; --nav-item-secondary-background-hover: #F7F7F7; --dropdown-menu-divider: #E9E9E9; --button-secondary-small-default: #1213161A; --button-secondary-small-default-last: #1213161A; --background-card: #FFFFFF1A; --stroke-stroke-3: #FFFFFF; --background-grey-1000-lvl-2: #FFFFFF; --stroke-stroke-1: #E9E9E9; --chips-not-selected-bg-active: #FFFFFF00; --chips-not-selected-stroke-default: #E9E9E9; --chips-not-selected-stroke-active: #121316; --chips-not-selected-stroke-default-2: #CFD0D1; --chips-selected-bg-default: #E9E9E9; --button-secondary-medium-default: #EDEDED; --button-primary-medium-disable: #E9E9E9; --button-primary-medium-default: #62CA79; --text-disable: #A0A1A2; --interface-grey-600: #E9E9E9; --interface-grey-700-lvl-2: #FFFFFF; --client-base-input-background-background: #FFFFFF; --client-base-input-stroke-default: #DEDEDE; --interface-grey-1000: #F7F7F7; --tooltip-background: #2A2B2E; --button-primary-small-default: #62CA79; --button-secondary-small-active: #3AAC53; --text-secondary-universal: #A0A1A2; --interface-purple: #6855F7; --background-grey-900-lvl-2: #F7F7F7; --background-blackout: #1213164D; --background-pop-up: #FFFFFF; --chips-not-selected-icon-active: #121316; --dashboard-tiles-background: #FFFFFF; --button-primary-small-hover: #3FBB5A; --button-primary-small-disable: #E9E9E9; --button-primary-small-pressed: #3AAC53; --button-secondary-small-hover: #12131633; --button-secondary-small-disable: #1213161A; --button-secondary-small-pressed: #1213164D; --tooltip-background: #2A2B2E; --Button-Secondary-Small-Hover: #12131633; --Button-Primary-Medium-Active: #3AAC53; --Charts-Red: #F03D32; --Charts-Green: #3FAE57; --Nav-item-Secondary-Background-Hover-Filter: #EDEDED; --Nav-item-Secondary-Background-Active: #F7F7F7; --Nav-item-Secondary-Icon-Active: #121316; --Dropdown-menu-Avatar-icon-Hover: #DEDEDE; --Chips-Not-selected-Icon-Default: #A0A1A2; --Stepper-Stepper: #DEDEDE; } html.dark { --background-html: #0f0f0f; } html.dark, body.dark { --background-grey-1000: #121316; --background-html: #0f0f0f; --text-primary: #FFFFFF; --text-secondary: #A0A1A2; --interface-grey-900: #191A1D; --stroke-stroke-2: #1E1F22; --interface-grey-800: #1E1F22; --interface-grey-950: #151619; --cards-icon-background-background: #62CA791A; --cards-icon-background-stroke: #62CA791A; --cards-icon-background-icon: #62CA79; --interface-grey-0: #FFFFFF; --text-black-universal: #121316; --interface-grey-1000-universal: #121316; --text-primary-universal: #FFFFFF; --interface-grey-500: #737375; --interface-grey-400: #A0A1A2; --nav-item-primary-background-active: #1E1F22; --interface-grey-900-lvl-2: #191A1D; --interface-green-500: #62CA79; --counter-active: #62CA79; --text-black: #121316; --dropdown-menu-avatar-icon-default: #363739; --dropdown-menu-avatar-icon-active: #363739; --dropdown-menu-background: #1E1F22E5; --nav-item-secondary-text-default: #A0A1A2; --nav-item-secondary-background-hover: #2A2B2E; --dropdown-menu-divider: #363739; --button-secondary-small-default: #363739; --button-secondary-small-default-last: #FFFFFF33; --background-card: #1213164D; --stroke-stroke-3: #2A2B2E; --background-grey-1000-lvl-2: #121316; --stroke-stroke-1: #2A2B2E; --chips-not-selected-bg-active: #62CA791A; --chips-not-selected-stroke-default: #2A2B2E; --chips-not-selected-stroke-active: #62CA79; --chips-not-selected-stroke-default-2: #2A2B2E; --chips-selected-bg-default: #62CA791A; --button-secondary-medium-default: #2A2B2E; --button-primary-medium-disable: #2A2B2E; --button-primary-medium-default: #62CA79; --text-disable: #525359; --interface-grey-600: #363739; --interface-grey-700-lvl-2: #2A2B2E; --client-base-input-background-background: #1E1F22; --client-base-input-stroke-default: #2A2B2E; --interface-grey-1000: #121316; --tooltip-background: #2A2B2E; --button-primary-small-default: #62CA79; --button-secondary-small-active: #3AAC53; --text-secondary-universal: #A0A1A2; --interface-purple: #6855F7; --background-grey-900-lvl-2: #191A1D; --background-blackout: #1E1F22E5; --background-pop-up: #121316; --chips-not-selected-icon-active: #62CA79; --dashboard-tiles-background: #1E1F22; --button-primary-small-hover: #3FBB5A; --button-primary-small-disable: #E9E9E9; --button-primary-small-pressed: #3AAC53; --tooltip-background: #2A2B2E; --Button-Secondary-Small-Hover: #525359; --Button-Primary-Medium-Active: #3AAC53; --Charts-Red: #F95349; --Charts-Green: #3FAE57; --Nav-item-Secondary-Background-Hover-Filter: #2A2B2E; --Nav-item-Secondary-Background-Active: #2A2B2E; --Nav-item-Secondary-Icon-Active: #ffffff; --Dropdown-menu-Avatar-icon-Hover: #363739; --Chips-Not-selected-Icon-Default: #A0A1A2; --Stepper-Stepper: #2A2B2E; } html, body { background-color: var(--background-html); font-family: 'Onest', sans-serif !important; } .table { --bs-table-border-color: var(--chips-not-selected-stroke-default) !important; } /* ===================================================== RESET / BASE ===================================================== */ *, *::before, *::after { box-sizing: border-box; } @supports (-moz-appearance: none) { * { scrollbar-width: thin; /* auto | thin | none */ } } html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; /* ❗ BODY НИКОГДА НЕ СКРОЛЛИТСЯ */ } /* ===================================================== ROOT WRAPPER ===================================================== */ .app-root { height: 100vh; /* ❗ ЖЁСТКО РАВЕН ЭКРАНУ */ display: flex; flex-direction: column; min-height: 0; /* ❗ ОБЯЗАТЕЛЬНО */ } .app-root-modules .content { overflow-y: hidden; } .app-modules-container { height: 100%; overflow-y: hidden; padding-bottom: 200px; scrollbar-width: none; -ms-overflow-style: none; } .app-modules-container::-webkit-scrollbar { display: none; width: 0; height: 0; } .app-modules-container.compareModule { overflow-y: auto; scrollbar-width: auto; -ms-overflow-style: auto; } .app-modules-container.compareModule #container{ height: auto; padding-bottom: 0; } .app-modules-container.compareModule::-webkit-scrollbar { display: block; width: 6px; height: auto; } /* ===================================================== HEADER ===================================================== */ .app-header { height: var(--header-height); background: var(--background-grey-1000); color: var(--text-primary); display: flex; align-items: center; flex-shrink: 0; /* ❗ НЕ УЧАСТВУЕТ Ð’ РОСТЕ */ } /* logoApp AREA */ .header-left { width: var(--sidebarPage-width); padding: 0 24px; display: flex; align-items: center; flex-shrink: 0; transition: width 0.25s ease; height: 100%; } .header-left.collapsed { width: var(--sidebarPage-collapsed-width); justify-content: flex-start; padding: 0 16.5px; } .logoApp { display: flex; align-items: center; gap: 8px; white-space: nowrap; width: 100%; justify-content: space-between; position: relative; } .toggle-btn { display: none; background: none; border: none; color: var(--interface-grey-400); cursor: pointer; width: 30px; height: 30px; border-radius: 8px; right: 0; position: absolute; } #toggleSidebar::after { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); margin-left: 6px; padding: 6px 8px; background: var(--tooltip-background); color: var(--text-primary-universal); font-size: 12px; white-space: nowrap; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 9999; box-shadow: 0px 0px 30px 0px #1213161A; } /* текст при СВЕРНУТОМ sidebar */ .header-left.collapsed #toggleSidebar::after { content: "Развернуть меню"; } /* текст при РАЗВЕРНУТОМ sidebar */ .header-left:not(.collapsed) #toggleSidebar::after { content: "Свернуть меню"; } /* показ при hover */ #toggleSidebar:hover::after { opacity: 1; } .collapsed .toggle-btn { right: -28px; } .collapsed .toggle-btn .toggleSidebarIcon { transform: rotate(-180deg); } .toggleSidebarIcon { color: currentColor; width: 20px; height: 20px; } .toggle-btn:hover { background: var(--interface-grey-900-lvl-2); } .toggle-btn.hovered { display: flex; justify-content: center; align-items: center; } .logoAppSVG { fill: var(--interface-grey-0); width: 124px; height: 16px; cursor: pointer; } .collapsed .logoAppSVG{ display: none; } .logoAppSVG_mini { width: 32px; height: 32px; display: none; cursor: pointer; } .collapsed .logoAppSVG_mini{ display: block; } .collapsed .logoApp { width: 32px; height: 32px; } /* HEADER CENTER */ .header-center { flex: 1; /* padding-left: 16px; */ font-size: 18px; font-weight: 500; opacity: 1; } .app-header:has(.collapsed) .header-left:hover ~ .header-center, .app-header:has(.collapsed) .toggle-btn.hovered ~ .header-center, .app-header:has(.collapsed) .header-left:hover ~ .header-center-demo .header-center-demo-bread, .app-header:has(.collapsed) .toggle-btn.hovered ~ .header-center-demo .header-center-demo-bread, .app-header:has(.collapsed).sidebar-hovered .header-center, .app-header:has(.collapsed).sidebar-hovered .header-center-demo .header-center-demo-bread { opacity: 0; } .header-center-demo { display: flex; flex-direction: row; align-items: center; flex: 1; } .header-center-demo-bread { min-width: 223px; width: auto; padding-left: 5px; } .header-center-demo-bread, .header-center-demo-bread a { font-size: 12px; color: var(--text-secondary); text-decoration: none; } .header-center-demo-bread a:hover { color: var(--Button-Primary-Medium-Active); } .header-center-demo-bread span{ color: var(--text-secondary-universal); } .header-center-demo-title { color: var(--text-primary); font-size: 16px; font-weight: 600; padding-left: 8px; } /* HEADER RIGHT */ .header-right { display: flex; align-items: center; gap: 16px; padding-right: 20px; } .header-right i { font-size: 18px; cursor: pointer; } .header-btn { width: 60px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--stroke-stroke-2); border-radius: 16px; background: transparent; color: var(--interface-grey-400); padding: 8px; position: relative; } .header-btn:hover { background: var(--interface-grey-900-lvl-2); border: 1px solid var(--stroke-stroke-2); } .header-btn-icon { width: 20px; height: 20px; } .header-btn-badge { position: absolute; right: -3px; top: -3px; color: var(--text-black); background: var(--counter-active); border-radius: 50%; width: 20px; height: 20px; font-size: 12px; display: flex; justify-content: center; align-items: center; } /* USER */ .header-user-container { height: 60px; width: auto; border: 1px solid var(--stroke-stroke-2); border-radius: 16px; background: transparent; color: var(--text-secondary); padding: 12px; display: flex; flex-direction: row; justify-content: space-between; min-width: 226px; align-items: center; } .header-user-container:hover { background: var(--interface-grey-900-lvl-2); } .header-user-container:hover .header-user-avatar { background: var(--Dropdown-menu-Avatar-icon-Hover); } .header-user-container .header-user-dropdown-toggle { display: flex; flex-direction: row; align-items: center; color: var(--text-primary); text-decoration: none; width: 100%; justify-content: space-between; } .header-user-avatar { width: 36px; height: 36px; border-radius: 8px; background: var(--dropdown-menu-avatar-icon-default); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-weight: 600; margin-right: 12px; } .header-user-name { display: flex; align-items: center; justify-content: center; margin-right: 12px; } .header-user-dropdown-toggle-arrow-icon { width: 12px; height: 12px; } .show .header-user-dropdown-toggle-arrow-icon { transform: rotate(-180deg); } .header-user-container .dropdown-menu.show { display: block; width: 100%; transform: translate(0, 65px) !important; padding: 8px; font-size: 14px; border-radius: 16px; border: transparent; box-shadow: 0px 0px 30px 0px #1213161A !important; background: var(--dropdown-menu-background); backdrop-filter: blur(25px); } .notification-ul.show { display: block; transform: translate(0, 65px) !important; width: 100%; padding: 8px; font-size: 14px; border-radius: 16px; border: transparent; box-shadow: 0px 0px 30px 0px #1213161A !important; background: var(--dropdown-menu-background); backdrop-filter: blur(25px); min-width: 380px; max-width: 450px } .notification-ul .dropdown-item { display: flex; gap: 8px; padding: 8px; color: var(--nav-item-secondary-text-default); text-decoration: none; white-space: nowrap; align-items: center; border-radius: 8px; line-height: 1.3; font-size: 13px; } .notification-ul .dropdown-item:hover { background: var(--nav-item-secondary-background-hover); color: var(--nav-item-secondary-text-default); } .notif-read { opacity: 0.6; } .notif-unread.marked-read { transition: all 0.4s ease; background-color: #fff !important; color: #6c757d !important; font-weight: normal !important; } .header-user-container li { margin-bottom: 4px; } .header-user-container li:last-child { margin-bottom: 0; } .header-user-container .dropdown-item { display: flex; gap: 8px; padding: 8px; color: var(--nav-item-secondary-text-default); text-decoration: none; white-space: nowrap; align-items: center; border-radius: 8px; line-height: 1.4; } .header-user-container .dropdown-item:hover { background: var(--nav-item-secondary-background-hover); color: var(--nav-item-secondary-text-default); } .header-user-dropdown-icon { color: #A0A1A2; width: 20px; height: 20px; } .header-user-container .dropdown-divider { border-top: 1px solid var(--dropdown-menu-divider); } .header-user-container:has(.header-user-dropdown-toggle.show) { background-color: var(--interface-grey-900-lvl-2); } .header-user-dropdown-toggle.show .header-user-avatar { background-color: var(--dropdown-menu-avatar-icon-active); } /* ===================================================== MAIN LAYOUT ❗❗❗ ===================================================== */ .app-layout { flex: 1; /* ❗ ЗАНИМАЕТ ОСТАТОК */ display: flex; min-height: 0; /* ❗ КЛЮЧ â„–1 */ max-height: 100%; /* ❗ НЕ ДАЁТ РАСТИ */ overflow: hidden; /* ❗ ЗАПРЕТ ВНЕШНЕГО СКРОЛЛА */ } /* ===================================================== sidebarPage ===================================================== */ .sidebarPage { width: var(--sidebarPage-width); background: var(--background-grey-1000); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; /* ❗ КЛЮЧ â„–2 */ transition: width 0.25s ease; padding: 0 14px; } .sidebarPage.collapsed { width: var(--sidebarPage-collapsed-width); } /* sidebarPage MENU (SCROLL) */ .sidebarPage-menu { flex: 1; min-height: 0; } .collapsed .sidebarPage-menu { display: flex; flex-direction: column; align-items: flex-start; } .collapsed .sidebarPage-link { width: 36px; } /* sidebarPage BOTTOM */ .sidebarPage-bottom { flex-shrink: 0; padding-bottom: 24px; } .collapsed .sidebarPage-bottom { display: flex; flex-direction: column; align-items: flex-start; } /* LINKS */ .sidebarPage a { display: flex; gap: 8px; padding: 8px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; align-items: center; border-radius: 8px; margin-bottom: 4px; line-height: 1.4; height: 36px; } .sidebarPage a:hover, .sidebarPage-link.active { background: var(--nav-item-primary-background-active); color: var(--text-primary); } .sidebarPage.collapsed .link-text { display: none; } .sidebarPage.collapsed .sidebarPage-link { position: relative; } /* tooltip */ .sidebarPage.collapsed .sidebarPage-link::after { content: attr(data-tooltip); position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 6px; padding: 6px 8px; background: var(--tooltip-background); color: var(--text-primary-universal); font-size: 12px; white-space: nowrap; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 9999; box-shadow: 0px 0px 30px 0px #1213161A; } /* hover */ .sidebarPage.collapsed .sidebarPage-link:hover::after { opacity: 1; } .header-left, .sidebarPage { transition: none; } body.anim-ready .header-left, body.anim-ready .sidebarPage { transition: width 0.25s ease; } .sidebar-collapsed-init .sidebarPage, .sidebar-collapsed-init .header-left { width: var(--sidebarPage-collapsed-width); } .sidebar-collapsed-init .header-left { justify-content: flex-start; padding: 0 16.5px; } .sidebar-collapsed-init .logoAppSVG_mini { display: block; } .sidebar-collapsed-init .logoApp { width: 32px; height: 32px; } .sidebar-collapsed-init .sidebarPage .link-text, .sidebar-collapsed-init .logoAppSVG { display: none; } /* ===================================================== CONTENT ❗❗❗ ===================================================== */ .content { flex: 1; min-height: 0; max-height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--background-grey-1000); position: relative; scrollbar-width: none; -ms-overflow-style: none; } .content::-webkit-scrollbar { display: none; width: 0; height: 0; } .mainPage.content { overflow: visible; } /* ===================================================== MODULES TAGS ===================================================== */ .modules-container-tags-group { display: flex; flex-direction: row; align-items: center; padding-bottom: 16px; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } /* Chrome, Edge, Safari */ .modules-container-tags-group::-webkit-scrollbar { width: 0; height: 0; } .tagsBtn { border-radius: 16px; padding: 12px 16px; background-color: transparent; border: 1px solid var(--chips-not-selected-stroke-default); color: var(--text-secondary); font-size: 14px; font-weight: 400; } .tagsBtn.active { color: var(--text-primary); background-color: var(--chips-not-selected-bg-active); border: 1px solid var(--chips-not-selected-stroke-active); } /* ===================================================== MODULES ===================================================== */ .modules-container { height: calc(100vh - 100px); background: var(--background-grey-1000-lvl-2); border-radius: 24px; padding: 16px 24px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; border: 1px solid var(--stroke-stroke-3); } /* Chrome, Edge, Safari */ .modules-container::-webkit-scrollbar { width: 0; height: 0; } .modules-container-cards_card { border: 2px solid var(--stroke-stroke-1); border-radius: 16px; overflow: hidden; margin: 12px 0 24px; position: relative; } .modules-container-cards_card-badge { position: absolute; right: 9px; top: 9px; border-radius: 8px; display: flex; justify-content: center; align-items: center; background: var(--interface-purple); color: var(--text-primary-universal); font-size: 12px; padding: 2px 8px; font-weight: 600; z-index: 9; } .modules-container-cards_card:hover, .modules-container-cards_card:has(.added), .modules-container-cards_card.active { border: 2px solid var(--interface-green-500); } .modules-container-cards_card.active .modules-container-cards_card-btn-add{ display: none; } /* .modules-container-cards_card:has(.added) .modules-container-cards_card-container-btn{ display: flex; } */ .modules-container-cards_card-img { position: relative; } .modules-container-cards_card:hover .modules-container-cards_card-container-btn { display: flex; } .modules-container-cards_card-container-btn { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: none; flex-direction: row; align-items: center; justify-content: center; background: var(--background-card); backdrop-filter: blur(5px); border-radius: 16px 16px 0px 0px; color: var(--text-primary); gap: 4px; } .modules-container-cards_card-btn:hover { color: var(--text-primary); } .modules-container-cards_card-btn-open:hover { background: var(--Button-Secondary-Small-Hover); } .modulesCardIcon { color: currentColor; width: 20px; height: 20px; } .modules-container-cards_card-body { padding: 16px; } .modules-container-cards_card-tags { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-bottom: 8px; } .modules-container-cards_card-title { font-size: 16px; font-weight: 600; color: var(--text-primary) !important; margin-bottom: 0; } .modules-container-cards_card-btn { display: flex; gap: 4px; padding: 8px; color: var(--text-primary); text-decoration: none; white-space: nowrap; align-items: center; border-radius: 8px; line-height: 1.4; background: var(--button-secondary-small-default); } .modules-container-cards_card-btn-add { color: var(--text-black); background: var(--interface-green-500); } /* ===================================================== MAIN Block ===================================================== */ .main_block { padding: 48px; border-radius: 24px; border: 1px solid var(--stroke-stroke-2); } .main_block_title { font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; } .main_block_desc { font-size: 14px; font-weight: 400; color: var(--text-secondary); margin-bottom: 12px; } .main_block_fast_card { background: var(--interface-grey-900); padding: 32px; border-radius: 24px; margin-top: 20px; } .fast_card_body { display: flex; flex-direction: column; } .fast_card_body_img_img { width: 100%; border-radius: 16px; } .fast_card_body_img { position: relative; } .fast_card_body_title { color: var(--text-secondary); font-size: 14px; margin-top: 16px; } .fast_card_body:hover .fast_card_body-container-btn, .fast_card_body-container-btn.active { display: flex; } .fast_card_body-container-btn { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: none; flex-direction: row; align-items: center; justify-content: center; background: var(--background-card); backdrop-filter: blur(5px); border-radius: 16px; border: 3px solid var(--interface-green-500); } .fast_card_body-container-btn-last { background: none; backdrop-filter: none; } .fast_card_body-btn { display: flex; gap: 4px; padding: 8px; color: var(--text-primary); text-decoration: none; white-space: nowrap; align-items: center; border-radius: 8px; line-height: 1.4; background: var(--button-secondary-small-default); backdrop-filter: blur(25px); } .fast_card_body-btn:hover { background: var(--Button-Secondary-Small-Hover); } .fast_card_body-btn-open { padding: 8px 12px 8px 8px; } .fast_card_body_all { cursor: pointer; } .fast_card_body_all:hover .fast_card_body-btn-last { background: var(--Button-Secondary-Small-Hover); } .fast_card_body-btn-last { background: var(--button-secondary-small-default-last); } .fast_card_body-btn:hover { color: var(--text-primary); } .fastCardIcon { color: currentColor; width: 20px; height: 20px; } /* ===================================================== SPECIAL Block ===================================================== */ .special_block { margin-top: 32px; padding-bottom: 32px; } .special_block_title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; } .special_card_body { display: flex; flex-direction: column; justify-content: flex-start; padding: 32px; border-radius: 24px; border: 1px solid var(--interface-grey-800); background: var(--interface-grey-950); text-decoration: none !important; position: relative; z-index: 10; overflow: hidden; box-shadow: 0 0 0 0 transparent; /* стартовое состояние */ transition: box-shadow 0.3s ease; } .special_card_body:hover { box-shadow: 0px 0px 30px 0px #1213161A; } .dark .special_card_body::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient( circle, rgba(81, 234, 102, 0.6) 0%, rgba(81, 234, 102, 0.25) 40%, rgba(81, 234, 102, 0) 70% ); filter: blur(80px); opacity: 0; transform: scale(0.8); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } .dark .special_card_body:hover::after { opacity: 1; transform: scale(1); } .special_card_body_icon { width: 36px; height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--cards-icon-background-background); border-radius: 8px; border: 1px solid var(--cards-icon-background-stroke); color: var(--cards-icon-background-icon); margin-bottom: 24px; } .specialCardIcon { color: currentColor; width: 20px; height: 20px; } .special_card_body_title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; } .special_card_body_desc { color: var(--text-secondary); font-size: 14px; } .special_card_body_badge { position: absolute; top: 10px; right: 10px; background: var(--interface-green-500); color: var(--text-black); font-size: 12px; font-weight: 400; padding: 2px 8px; border-radius: 20px; } /* ===================================================== Trial Block ===================================================== */ .trial_time { display: flex; flex-direction: row; align-items: center; justify-content: space-between; background: linear-gradient(90deg, #AEFD6E 0%, #F8FE6F 100%); border-radius: 16px; padding: 16px 24px; margin-bottom: 24px; } .trial_time_body { display: flex; flex-direction: row; align-items: center; } .trial_time_icon { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 16px; color: var(--text-black-universal); } .trialIcon { color: currentColor; width: 20px; height: 20px; } .trial_time_text { display: flex; flex-direction: row; align-items: center; } .trial_time_text_b { font-size: 14px; font-weight: 600; color: var(--text-black-universal); margin-right: 16px; } .trial_time_text_s { font-size: 14px; font-weight: 400; color: var(--text-black-universal); opacity: 0.7; } .trial_time_btn { display: block; background: var(--interface-grey-1000-universal); padding: 8px 12px; border-radius: 8px; color: var(--text-primary-universal); text-align: center; font-size: 14px; font-weight: 400; text-decoration: none; } .trial_time_btn:hover { color: var(--text-primary-universal); } /* ===================================================== Action Button Block ===================================================== */ .action_btn_container { position: absolute; bottom: 35px; right: 35px; display: flex; flex-direction: row; align-items: center; gap: 8px; z-index: 10; } .action_btn { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--button-secondary-medium-default); padding: 12px 16px; border-radius: 8px; color: var(--text-primary); text-align: center; font-size: 14px; font-weight: 400; text-decoration: none; } .action_btn:hover { color: var(--text-primary); } .actionBtnIcon { color: currentColor; width: 20px; height: 20px; } .action_btn_back { width: 44px; height: 44px; } .action_btn_go, .action_btn_end { background: var(--button-primary-medium-default); color: var(--text-black); } .action_btn_go:hover, .action_btn_end:hover { color: var(--text-black); } .action_btn_go.disabled { background: var(--button-primary-medium-disable); color: var(--text-disable); pointer-events: none; } .action_btn_end.disabled { background: var(--button-primary-medium-disable); color: var(--text-disable); } /* ===================================================== Calculator Block ===================================================== */ .calculator-container { display: flex; flex-direction: column; gap: 32px; padding: 24px 24px 85px 24px; border-radius: 24px; border: 1px solid var(--stroke-stroke-1); height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } /* Chrome, Edge, Safari */ .calculator-container::-webkit-scrollbar { width: 0; height: 0; } .calculator-container-title { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .calculator-container-title-text { display: flex; flex-direction: row; align-items: center; gap: 16px; } .calculator-container-title-text-h { font-size: 24px; font-weight: 600; color: var(--text-primary); } .calculator-container-title-text-t { display: flex; flex-direction: row; align-items: center; gap: 4px; background: var(--interface-grey-600); padding: 6px 8px; border-radius: 8px; } .calculator-container-title-text-t span{ font-size: 12px; color: var(--text-primary); } .billing-toggle { display: inline-flex; background: var(--interface-grey-900-lvl-2); padding: 4px; border-radius: 24px; gap: 4px; } .billing-toggle input { display: none; } .billing-toggle label { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 400; color: var(--text-primary); transition: all .25s ease; white-space: nowrap; } .billing-toggle input:checked + label { background: var(--interface-grey-700-lvl-2); color: var(--text-primary); } .billing-toggle-badge { background: var(--interface-purple); color: var(--text-primary-universal); font-size: 12px; padding: 2px 8px; border-radius: 999px; font-weight: 600; } .calculator-container-range { background: var(--interface-grey-900); padding: 16px 24px; border-radius: 24px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .calculator-container-range-title { font-size: 16px; color: var(--text-primary); } .clients-slider { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 65%; position: relative; } .clients-value { width: 105px; padding: 16px 10px; border-radius: 16px; border: 1px solid var(--client-base-input-stroke-default); background: var(--client-base-input-background-background); font-size: 14px; font-weight: 400; color: var(--text-primary); text-align: center; caret-color: var(--interface-green-500); outline: none; /* убираем стандартную рамку браузера */ } /* при фокусе */ .clients-value:focus { border-color: var(--interface-green-500); } .min-label, .max-label { font-size: 14px; color: var(--text-secondary); white-space: nowrap; } .range-wrapper { position: relative; width: 100%; height: 6px; } .range-wrapper input[type="range"] { position: absolute; width: 100%; height: 6px; background: transparent; appearance: none; z-index: 2; } .range-wrapper input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--interface-green-500); border-radius: 50%; cursor: pointer; } .range-wrapper input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--interface-green-500); border-radius: 50%; border: none; } .range-wrapper::before { content: ""; position: absolute; width: 100%; height: 6px; background: var(--interface-grey-800); border-radius: 999px; top: 0; left: 0; } .range-progress { position: absolute; height: 6px; background: var(--interface-green-500); border-radius: 999px; top: 0; left: 0; width: 0%; z-index: 1; } .limit-popover { position: absolute; right: -15px; bottom: -85px; width: auto; background: #2A2B2E; border-radius: 8px; padding: 6px 8px; box-shadow: 0px 0px 30px 0px var(--text-primary); color: var(--interface-grey-900); display: none; z-index: 10; } .limit-popover p { margin: 0 0 10px; line-height: 1.4; font-size: 12px; } .limit-popover p a { color: var(--interface-green-500); } .limit-popover button { width: auto; padding: 8px 12px; border-radius: 8px; border: none; background: var(--interface-grey-900); color: var(--text-primary); font-weight: 400; cursor: pointer; font-size: 14px; } .clients-value.manual-active { border-color: var(--text-primary); background: #fff; } .clients-value:focus { outline: none; box-shadow: none; } .calculator-card-body { display: flex; flex-direction: column; justify-content: space-between; height: 100%; border-radius: 24px; padding: 24px; background: var(--interface-grey-900); border: 2px solid transparent; } .calculator-card.active .calculator-card-body { border: 2px solid var(--interface-green-500); } .calculator-card-body-content { display: flex; flex-direction: column; gap: 32px; } .calculator-card-text { display: flex; flex-direction: column; gap: 10px; } .calculator-card-price { display: flex; flex-direction: column; gap: 0px; } .calculator-card-list { display: flex; flex-direction: column; gap: 8px; } .calculator-card-title { display: flex; flex-direction: row; align-items: center; gap: 12px; } .calculator-card-title span{ font-size: 24px; font-weight: 600; color: var(--text-primary); } .calculator-card-title .calculator-card-title-badge { background: var(--interface-green-500); color: #fff; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 400; } .calculator-card-desc { font-size: 14px; font-weight: 400; color: var(--text-secondary); } .calculator-card-price-digit .price-digit { font-size: 32px; font-weight: 600; color: var(--text-primary); } .calculator-card-price-digit .range_for_digit { font-size: 14px; font-weight: 600; color: var(--text-secondary); } .calculator-card-price-text .range_for_text { font-size: 14px; font-weight: 400; color: var(--text-secondary); } .calculator-card-list-item { font-size: 14px; font-weight: 400; color: var(--text-primary); display: flex; flex-direction: row; align-items: center; gap: 8px; } .cardListItemIcon { color: var(--interface-green-500); width: 12px; height: 12px; } .calculator-card-btn { width: 100%; background: var(--button-secondary-small-default); color: var(--text-primary); font-size: 14px; font-weight: 400; padding: 8px 12px; border-radius: 8px; border: none; margin-top: 16px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; } .calculator-card.active .calculator-card-btn { background: var(--button-primary-small-default); color: var(--text-black); } .calculator-card.active .calculator-card-btn.active { background: var(--button-secondary-small-active); } .cardBtnCheckIcon { color: currentColor; width: 20px; height: 20px; display: none; } .calculator-card-btn.active .cardBtnCheckIcon { display: block; } /* контейнер */ .checkbox-card-wrapper { position: relative; display: inline-flex; align-items: center; padding-right: 180px; /* ← ВАЖНО */ margin-right: -180px; /* ← компенсируем визуально */ } /* label = кликабельная зона */ .custom-checkbox { display: inline-flex; align-items: center; gap: 8px; /* ← УВЕЛИЧИВАЕТ ЗОНУ КЛИКА */ cursor: pointer; user-select: none; } /* ❗ полностью скрываем нативный checkbox */ .custom-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* кастомный квадрат */ .checkbox-card-box { width: 16px; height: 16px; border: 1px solid var(--interface-grey-600); border-radius: 4px; display: flex; align-items: center; justify-content: center; background: transparent; flex-shrink: 0; transition: all .2s ease; } /* галочка */ .checkbox-card-box svg { width: 10px; height: 8px; stroke: var(--interface-grey-1000); stroke-width: 2; fill: none; opacity: 0; transition: opacity .15s ease; } /* checked */ .custom-checkbox input:checked + .checkbox-card-box { background: var(--interface-green-500); border-color: var(--interface-green-500); } .custom-checkbox input:checked + .checkbox-card-box svg { opacity: 1; } /* текст */ .checkbox-card-label { font-size: 14px; color: var(--text-primary); white-space: nowrap; } .calculator-card-body .checkbox-card-wrapper:hover .checkbox-card-label { text-decoration: underline; } /* tooltip */ .checkbox-card-tooltip { position: absolute; left: calc(100% - 180px); /* ← ВНУТРИ hover-зоны */ top: 50%; transform: translate(12px, -49%); background: var(--tooltip-background); border-radius: 8px; padding: 6px 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 50; } .checkbox-card-tooltip a { text-decoration: none; font-size: 12px; color: var(--text-primary-universal); font-weight: 400; } /* показываем tooltip и держим hover */ .checkbox-card-wrapper:hover .checkbox-card-tooltip, .checkbox-card-tooltip:hover { opacity: 1; pointer-events: auto; } .error-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #F35E1D; color: #fff; padding: 12px 16px; border-radius: 16px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .3s, bottom .3s; z-index: 9999; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; } .error-toast.show { opacity: 1; bottom: 35px; } .errorToastIcon { color: currentColor; width: 16px; height: 16px; } .footer-info { color: var(--text-secondary-universal); font-weight: 400; font-size: 14px; } .footer-info a { color: var(--text-secondary-universal); } .calculator-total { position: fixed; bottom: 39.5px; left: 285px; background: #7C7C7C4D; backdrop-filter: blur(40px); color: var(--text-primary); padding: 8px 16px; border-radius: 16px; font-size: 14px; z-index: 9999; } .calculator-container .action_btn_container { right: 37px; } /* ===================================================== Form Block ===================================================== */ .form_container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 32px; padding: 24px 24px 85px 24px; border-radius: 24px; background: var(--background-grey-1000-lvl-2); height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; border: 1px solid var(--stroke-stroke-3); } /* Chrome, Edge, Safari */ .form_container::-webkit-scrollbar { width: 0; height: 0; } .form_container_list { border: 1px solid var(--stroke-stroke-1); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; max-width: 400px; } .form_container_list_title { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .form_container_list_title_t { color: var(--text-primary); font-size: 20px; font-weight: 600; } .form_container_list_btn { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--button-secondary-small-default); padding: 8px 12px; border-radius: 8px; color: var(--text-primary); text-align: center; font-size: 14px; font-weight: 400; text-decoration: none; } .form_container_list_btn:hover { color: var(--text-primary); } .form_container_list_modules { display: flex; flex-direction: column; gap: 24px; } .form_container_list_modules_title { margin-bottom: 8px; color: var(--text-secondary); font-size: 14px; } .form_container_list_modules_elements { display: flex; flex-direction: column; gap: 8px; } .form_container_list_modules_elements_item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .form_container_list_modules_elements_item_name { color: var(--text-primary); font-size: 14px; } .form_container_list_modules_elements_item_price { color: var(--text-secondary); font-size: 14px; } .form_container_list_total { display: flex; flex-direction: column; gap: 16px; } .form_container_list_total_summa { background: var(--background-grey-900-lvl-2); padding: 12px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; color: var(--text-secondary); font-size: 14px; } .form_container_list_total_summa_all { font-size: 20px; font-weight: 600; color: var(--text-secondary); } #total_summa_text_all { color: var(--text-primary); } .form_container_form { width: 100%; max-width: 550px; padding-top: 8px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .form_container_form_button { display: flex; flex-direction: column; gap: 24px; } .form_container_form_button .checkbox-card-label { white-space: normal; font-size: 12px; color: var(--text-secondary); } .form_container_form_button .checkbox-card-label a{ color: var(--text-secondary); } .form_container_form_button .custom-checkbox { align-items: baseline; } .btnFormSubmit { width: 100%; background: var(--button-primary-medium-default); padding: 12px 16px; border-radius: 8px; border: none; color: var(--text-black); font-size: 16px; } .form_container_form_main { display: flex; flex-direction: column; gap: 24px; } .form_container_form_title { display: flex; flex-direction: column; gap: 12px; } .form_container_form_title_b { font-size: 24px; color: var(--text-primary); font-weight: 600; } .form_container_form_title_text { font-size: 14px; color: var(--text-secondary); font-weight: 400; } .form_container_form_main_floating { display: flex; flex-direction: column; gap: 12px; } .form_container_form_main_floating .form-control { background-color: var(--interface-grey-800) !important; color: var(--text-primary); border: none !important; border-radius: 16px !important; } .form_container_form_main_floating .form-floating>label { color: var(--text-secondary); } #list_modules { height: 350px; overflow-y: auto; } #list_modules::-webkit-scrollbar { width: 2px; } .input-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; } .inputIcon { color: currentColor; width: 20px; height: 20px; } /* ERRORS */ .input-error, .form-control.input-error { border: 1px solid #F35E1D !important; } .custom-checkbox input.input-error + .checkbox-card-box { border: 1px solid #F35E1D !important; } /* GENERAL */ .form-control:focus { box-shadow: none !important; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: 0 !important; padding-right: 20px; } .row { --bs-gutter-x: 0.5rem !important; } /* MODAL */ .generalModalContent { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; border-radius: 24px; gap: 32px; background: var(--background-pop-up); border: none; } .modal-content { background: var(--background-pop-up); color: var(--text-primary); } .modal-header .btn-close { color: var(--text-primary); } .dark .modal-header .btn-close { color: var(--text-primary); background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important; } .generalModalContainer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; } .generalModalContainerIcon { width: 36px; height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--cards-icon-background-background); border-radius: 8px; border: 1px solid var(--cards-icon-background-stroke); color: var(--cards-icon-background-icon); } .generalModalIcon { color: currentColor; width: 20px; height: 20px; } .modal-radio-button-box .generalModalIcon { color: var(--chips-not-selected-icon-active); } .generalModalContainerText { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } .generalModalContainerTextB { font-size: 24px; color: var(--text-primary); font-weight: 600; } .generalModalContainerTextT { font-size: 14px; color: var(--text-secondary); font-weight: 400; } .generalModalBtn { width: 100%; background: var(--button-primary-medium-default); padding: 12px 16px; border-radius: 8px; border: none; color: var(--text-black); font-size: 16px; text-decoration: none; text-align: center; font-weight: 400; } .generalModalBtnClose { width: 36px; height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--interface-grey-400); background: var(--interface-grey-1000); border-radius: 8px; position: absolute; top: 15px; right: 15px; border: none; } .interfaceModalBtn { background: var(--button-secondary-medium-default); color: var(--text-primary); } .generalModalBtn.interfaceModalBtn:hover { color: var(--text-primary); } .generalModalBtn:hover { color: #fff; } .modal-backdrop { --bs-backdrop-bg: var(--background-blackout); --bs-backdrop-opacity: 1; } .modal-radio-button-group { display: flex; gap: 8px; } .modal-radio-button { position: relative; cursor: pointer; } .modal-radio-button input[type="radio"] { display: none; /* скрываем стандартный радио input */ } .modal-radio-button-box { display: flex; padding: 12px 16px; border: 1px solid var(--chips-not-selected-stroke-default); color: var(--text-secondary); border-radius: 16px; background-color: transparent; user-select: none; transition: all 0.2s; flex-direction: row; align-items: center; justify-content: center; gap: 4px; } /* когда выбран */ .modal-radio-button input[type="radio"]:checked + .modal-radio-button-box { border-color: var(--chips-not-selected-stroke-active); background: var(--chips-not-selected-bg-active); color: var(--text-primary); } .modal-radio-button input[type="radio"] + .modal-radio-button-box .generalModalIcon { color: var(--Chips-Not-selected-Icon-Default); } .modal-radio-button input[type="radio"]:checked + .modal-radio-button-box .generalModalIcon { color: var(--chips-not-selected-icon-active); } /* hover эффект */ .modal-radio-button-box:hover { border-color: var(--text-primary); color: var(--text-primary); opacity: 0.8; } .generalModalRow { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; width: 100%; gap: 50px; } .generalModalContainer .generalModalContainerTitle { color: var(--text-primary) !important; font-size: 24px; font-weight: 600; margin-bottom: 0; } #interfaceModal .generalModalContent { align-items: flex-start; } #interfaceModal .generalModalContainer { align-items: flex-start; gap: 32px; width: 100%; } #interfaceModal .modal-dialog, #connectionModal .modal-dialog { max-width: 555px; } .generalModalItemText { color: var(--text-secondary); font-size: 14px; margin-bottom: 16px; display: block; } #connectionModal .form_container_form_button { margin-top: 32px; } /* Header Modules Menu */ .header_modules_menu_container { height: auto; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; margin-bottom: 4px; } .header_modules_menu-container { height: 44px; width: auto; border: 1px solid var(--chips-not-selected-stroke-default-2); border-radius: 16px; background: var(--interface-grey-1000); color: var(--text-secondary); padding: 12px 16px; display: flex; flex-direction: row; justify-content: space-between; min-width: 223px; align-items: center; } .header_modules_menu-container .header_modules_menu-dropdown-toggle { display: flex; flex-direction: row; align-items: center; color: var(--text-secondary); text-decoration: none; width: 100%; justify-content: space-between; } .header_modules_menu-name { display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 14px; color: var(--text-secondary); } .header_modules_menu-dropdown-toggle-arrow-icon { width: 12px; height: 12px; color: var(--text-secondary); } .show .header_modules_menu-dropdown-toggle-arrow-icon { transform: rotate(-180deg); } .header_modules_menu-container .dropdown-menu.show { display: block; width: 535px; transform: translate(0, 58px) !important; padding: 8px 8px 16px 16px; font-size: 14px; border-radius: 16px; border: transparent; box-shadow: 0px 0px 16px 0px #121316B2 !important; background: var(--interface-grey-900); } .header_modules_menu-container .dropdown-item { display: flex; gap: 8px; padding: 8px; color: var(--text-primary); text-decoration: none; white-space: nowrap; align-items: center; border-radius: 8px; line-height: 1.4; } .header_modules_menu-container .dropdown-item:hover { background: #EDEDED; color: #323232; } .header_modules_menu-dropdown-icon { color: #A0A1A2; width: 20px; height: 20px; } .header_modules_menu-container .dropdown-divider { border-top: 1px solid var(--stroke-stroke-2); } .header_modules_menu-container:has(.header_modules_menu-dropdown-toggle.show) { /* background-color: var(--stroke-stroke-2); */ } .header_modules_menu-dropdown-toggle.show .header_modules_menu-avatar { background-color: #DEDEDE; } .header_module-container-cards_card { overflow: hidden; border-radius: 8px; border: 2px solid transparent; } .header_module-container-cards_card-img { position: relative; } .header_module-container-cards_card:hover { border: 2px solid var(--interface-green-500); } .header_module-container-cards_card:hover .header_module-container-cards_card-container-btn { display: flex; gap: 4px; } .header_module-container-cards_card-container-btn { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: none; flex-direction: row; align-items: center; justify-content: center; background: var(--background-card); backdrop-filter: blur(5px); border-radius: 8px; } .header_module-container-cards_card-btn:hover { color: var(--text-primary); } .headerModulesCardIcon { color: currentColor; width: 20px; height: 20px; } .header_module-container-cards_card-body { padding: 10px 8px; } .header_module-container-cards_card-tags { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-bottom: 8px; } .header_module-container-cards_card-title { font-size: 13px; font-weight: 400; color: var(--text-secondary); margin-bottom: 0; } .header_module-container-cards_card-btn { display: flex; gap: 4px; padding: 8px; color: var(--text-primary); text-decoration: none; white-space: nowrap; align-items: center; border-radius: 8px; line-height: 1.4; background: var(--button-secondary-small-default); backdrop-filter: blur(25px); } .module-container-cards-title { font-size: 20px; color: var(--text-primary); font-weight: 600; padding-bottom: 12px; } .header_module-container-cards { overflow-y: scroll; max-height: 710px; gap: 10px 0; } .header_modules_menu_wrapper { position: relative; overflow-x: auto; } .scroll-right-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); z-index: 10; background: var(--button-primary-medium-default); color: var(--text-black); border: none; padding: 5px 3px; cursor: pointer; height: 44px; width: 28px; display: flex; flex-direction: row; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; } .header_modules_menu_wrapper:hover .scroll-right-btn { opacity: 1; /* появляется при hover */ } .scrollRightBtnIcon { color: currentColor; width: 16px; height: 16px; transform: rotate(-90deg); } .header_modules_menu_list { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 3px 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } /* Chrome, Edge, Safari */ .header_modules_menu_list::-webkit-scrollbar { display: none; width: 0; height: 0; } .header_modules_menu_list_item { width: auto; height: 44px; border: 1px solid var(--chips-not-selected-stroke-default-2); border-radius: 16px; background: transparent; color: var(--text-secondary); padding: 12px 16px; display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative; white-space: nowrap; } .header_modules_menu_list_item.added:not(.active) { background: var(--chips-selected-bg-default); border: 1px solid transparent; color: var(--text-primary); } .header_modules_menu_list_item a { color: var(--text-secondary); font-size: 14px; text-decoration: none; } .header_modules_menu_list_item.active { border: 1px solid var(--chips-not-selected-stroke-active); background: var(--chips-not-selected-bg-active); color: var(--text-primary); } .header_modules_menu_list_item.active a { color: var(--text-primary); } .menu-badge-check { position: absolute; right: -2px; top: -1px; color: var(--text-black); background: var(--interface-green-500); border-radius: 50%; width: 16px; height: 16px; font-size: 12px; display: flex; justify-content: center; align-items: center; } .menuBadgeIcon { color: currentColor; width: 12px; height: 12px; } .action_btn_container_for_modules { position: absolute; bottom: 15px; right: 30px; display: flex; flex-direction: row; align-items: center; gap: 8px; z-index: 10; } .action_btn_modules { display: flex; flex-direction: row; align-items: center; justify-content: center; background: var(--button-secondary-medium-default); padding: 12px 16px; border-radius: 8px; color: var(--text-primary); text-align: center; font-size: 14px; font-weight: 400; gap: 4px; text-decoration: none; } .action_btn_modules:hover { color: var(--text-primary); } .actionBtnModulesIcon { color: currentColor; width: 20px; height: 20px; } .action_btn_modules_remove { width: 44px; height: 44px; padding: 0px } .action_btn_modules_add, .action_btn_modules_go { background: var(--button-primary-medium-default); color: var(--text-black); } .action_btn_modules_add:hover, .action_btn_modules_go:hover { color: var(--text-black); } /* DASHBOARDS */ .box, .sidebar { box-shadow: none !important; } .rounded { border-color: var(--stroke-stroke-1) !important; } .form-select { border-color: var(--stroke-stroke-1) !important; background-color: var(--dashboard-tiles-background) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23737375' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); color: var(--text-primary) !important; padding: 4px 20px 4px 5px !important; background-position: right 0.75rem center !important; } .form-select:focus { box-shadow: none !important; } .form-control, .select2-container--bootstrap-5 .select2-selection { border-color: var(--stroke-stroke-1) !important; background-color: var(--dashboard-tiles-background) !important; color: var(--text-primary) !important; } .select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection { box-shadow: none !important; } .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { color: var(--text-primary) !important; } .box, .sidebar, .accordion-item, .accordion-button, .card-body, .table-scroll thead th, .table-scroll tfoot td { background: var(--dashboard-tiles-background) !important; color: var(--text-primary) !important; } .accordion-button:not(.collapsed) { background: var(--dashboard-tiles-background) !important; background-color: var(--dashboard-tiles-background) !important; color: var(--text-primary) !important; box-shadow: none !important } .btn-success, .btn-primary, .btn-warning, .modules-container-cards_card-btn-add { background: var(--button-primary-medium-default) !important; border-color: var(--button-primary-medium-default) !important; color: var(--text-black); } .sibebar-buttons .btn-success, .sidebar-wrapper .btn-warning{ background: var(--Button-Primary-Medium-Active) !important; border-color: var(--Button-Primary-Medium-Active) !important; } .btn-success:hover, .btn-primary:hover, .btn-warning:hover, .modules-container-cards_card-btn-add:hover { background: var(--button-primary-small-hover) !important; border-color: var(--button-primary-small-hover) !important; color: var(--text-black); } .btn-success:active, .btn-primary:active, .btn-warning:active, .modules-container-cards_card-btn-add:active { background: var(--button-primary-small-pressed) !important; border-color: var(--button-primary-small-pressed) !important; color: var(--text-black); } .btn-success:focus, .btn-primary:focus, .btn-warning:focus, .modules-container-cards_card-btn-add:focus { background: var(--button-primary-small-pressed) !important; border-color: var(--button-primary-small-pressed) !important; color: var(--text-black); } .btn-success:disabled, .btn-primary:disabled, .btn-warning:disabled { background: var(--button-primary-small-disable) !important; border-color: var(--button-primary-small-disable) !important; color: var(--text-disable); } .btn-secondary { background: var(--button-secondary-small-default) !important; border-color: var(--button-secondary-small-default) !important; color: var(--text-primary); } .btn-secondary:hover { background: var(--button-secondary-small-hover) !important; border-color: var(--button-secondary-small-hover) !important; color: var(--text-primary); } .btn-secondary:focus, .btn-secondary:active { background: var(--button-secondary-small-pressed) !important; border-color: var(--button-secondary-small-pressed) !important; color: var(--text-primary); } .btn-secondary:disabled { background: var(--button-secondary-small-disable) !important; border-color: var(--button-secondary-small-disable) !important; color: var(--text-disable); } .form-check-input { background-color: transparent; border: 1px solid var(--interface-grey-600); outline: 0 !important; } .form-check-input:checked{ background-color: #888 !important; border: 0 !important; } .form-check-input:focus, .label::after, label.form-check-label:focus, .form-check-input::after, .form-check-input:not(:disabled):not(.disabled):active:focus { color: black; outline: 0 !important; border: 1px solid #888 !important; box-shadow: none !important; } .alert-custom img { width: 60px; } .alert-custom { display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--dashboard-tiles-background) !important; color: var(--text-primary) !important; } #container_alert { height: 85vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .searchTable { text-align: center; margin: 10px 0 5px 0; font-size: 10px; border-radius: 5px; background-color: transparent; border: 1px solid var(--chips-not-selected-stroke-default); color: var(--text-secondary); } .btn-group-chart .btn { color: var(--interface-grey-500); font-size: 16px; } .btn-group-chart .btn:hover { color: var(--interface-grey-0); } .text { color: var(--text-primary); } .progress-bar { background-color: var(--interface-green-500); color: #000; font-weight: 600; } .progress { --bs-progress-bg: var(--dashboard-tiles-background) !important; } .box .dropdown-menu.show { border-radius: 16px; border: transparent; box-shadow: 0px 0px 30px 0px #1213161A !important; background: var(--dropdown-menu-background); backdrop-filter: blur(25px); margin-top: 20px !important; padding: 12px; } .btn-group-chart li>button { background: none; border: none; display: flex; align-items: center; justify-content: flex-start; padding: 8px 8px; color: var(--nav-item-secondary-text-default); border-radius: 8px; font-size: 14px; } .btn-group-chart li>button span { font-weight: 400; margin-left: 10px; } .box .dropdown-menu.show .dropdown-item:focus, .box .dropdown-menu.show .dropdown-item:hover { background: var(--nav-item-secondary-background-hover); color: var(--nav-item-secondary-text-default); } .box .dropdown-menu.show .dropdown-divider { border-top: 1px solid var(--dropdown-menu-divider); } .mailLink a{ color: var(--interface-green-500) !important; } .toggle-categories{ cursor: pointer; } .range_container { position: relative; cursor: pointer; } .range_modal { position: absolute; z-index: 99999; width: 300px; padding: 10px 10px; display: none; border-radius: 10px !important; border: transparent; background: var(--interface-grey-900); } .range_modal_alone { top: 65px; left: 0px; } .range_modal_first, .range_modal_second { top: -75px; } .range_modal_second { right: 0; } .range_modal.active { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } .range_backdrop { position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: var(--background-blackout); display: none; } .range_backdrop.active { display: block; } .year_radio label{ width: 55px; } .daterangepicker { z-index: 99999; } .daterangepicker td.in-range { background-color: #57ac8333; } .daterangepicker td.active, .daterangepicker td.active:hover { background-color: #24935E; } .form_radio_btn { display: inline-block; } .form_radio_btn input[type=radio] { display: none; } .form_radio_btn label { display: inline-block; cursor: pointer; padding: 0px 5px; line-height: 25px; border: 1px solid var(--stroke-stroke-1); background-color: var(--dashboard-tiles-background) !important; color: var(--text-primary); border-radius: 3px; user-select: none; font-size: 9px; width: 60px; margin-top: 5px; text-align: center; font-weight: 600; } .select2-container--bootstrap-5 .select2-dropdown { color: var(--text-primary) !important; background-color: var(--background-grey-1000) !important; border: 1px solid var(--stroke-stroke-1) !important; } .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { border: 1px solid var(--interface-green-500) !important; } .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) { color: #fff; background-color: var(--interface-green-500) !important; } /* Checked */ .form_radio_btn input[type=radio]:checked + label { background: var(--button-primary-medium-default) !important; border-color: var(--button-primary-medium-default) !important; color: var(--text-black); } /* Hover */ .form_radio_btn label:hover { border: 1px solid var(--chips-not-selected-stroke-active); background: var(--chips-not-selected-bg-active); color: var(--text-primary); } .range_modal hr { border-top: 1px solid var(--dropdown-menu-divider); opacity: 1; margin: 10px 0; } .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml;utf8,") !important; } .compare_table_border tbody, .compare_table_border td, .compare_table_border tfoot, .compare_table_border th, .compare_table_border thead, .compare_table_border tr { border: 1px solid var(--chips-not-selected-stroke-default) !important; } .dark .bg-light { background-color: var(--dashboard-tiles-background) !important; } .tablePlan>:not(caption)>*>*, #cohortTable>:not(caption)>*>* { background: var(--dashboard-tiles-background) !important; color: var(--text-primary) !important; } .table-light { border-color: var(--chips-not-selected-stroke-default) !important; } .table .rowQ { background: #ffc1074a !important; } .table .rowY { background: #0d6efd24 !important; } .box-pane { display: block; } .box-pane .nav-link { background-color: var(--button-primary-medium-default) !important; color: var(--text-black); margin-right: 1em; font-size: 12px; } .box-pane .nav-link.active { background-color: var(--button-primary-small-pressed) !important; color: var(--text-primary-universal); } .text .tooltip_link { width: 15px; height: 15px; display: none; flex-direction: row; align-items: center; justify-content: center; border-radius: 50%; background: #3d3d3d; color: #b5b5b5; padding: 5px; font-weight: 700 !important; font-size: 10px; margin-left: 5px; position: absolute; top: 5px; right: 5px; line-height: 1; } .box-with-title .tooltip_link, .box:has(table) .tooltip_link { position: absolute; top: 23px; right: 30px; width: 15px; height: 15px; display: none; flex-direction: row; align-items: center; justify-content: center; border-radius: 50%; background: #3d3d3d; color: #b5b5b5; padding: 5px; font-weight: 700 !important; font-size: 10px; line-height: 1; } .detail_turnover { position: absolute; top: 6px; right: 5px; font-size: 7px; border: none; width: 15px; height: 15px; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius: 50%; background: var(--button-secondary-small-default); color: var(--text-primary); text-decoration: none; } .detail_turnover:hover { color: var(--text-primary); } .box:hover .text .tooltip_link, .box-with-title:hover .tooltip_link { display: flex; } .box:hover .detail_turnover, .box.active-tooltip .detail_turnover, .tooltips-always-on .detail_turnover{ right: 30px; } .tooltips-always-on .text .tooltip_link, .tooltips-always-on .box-with-title .tooltip_link { display: flex !important; } .light .tooltip_link { background: var(--nav-item-secondary-background-hover)!important; color: var(--interface-grey-0) !important; } .btn-group-chart { position: absolute; top: 23px; right: 8px; font-size: 44px; border: none; border-radius: 50%; width: 15px; height: 15px; padding: 0; } .btn-group-chart .dropdown-toggle { line-height: 1; } .btn-group-chart .dropdown-item.active, .btn-group-chart .dropdown-item:active { color: #212529; background-color: transparent; } .btn-group-chart .btn{ padding: 0; } .btn-group-chart .btn{ border: none !important } .btn-group-chart .dropdown-toggle::after { display: none; } .icon_chart { width: 13px; } .icon_chart i { color: #A0A1A2; } .box { padding: 10px; background: var(--dashboard-tiles-background) !important; border-radius: 10px; display: flex; flex-direction: column; align-items: normal; justify-content: center; /* margin-top: 10px; */ position: relative; text-align: left; } .box.box-pane { align-items: normal; } @keyframes loading { to { background-position-x: -20%; } } .box.loading::after { visibility: hidden; } .box span { font-weight: bold; } .sidebar { padding: 10px; background: #f0f0f0; border-radius: 10px; margin-top: 10px; } .accordion-container-group { margin-bottom: 8px; } .accordion-wrapper-group { margin-bottom: 5px; } .accordion-wrapper-group-collapse { padding-left: 5px; } .accordion-wrapper { margin-bottom: 1px; padding-left: 6px; padding-right: 8px; } .fix_tfoot, .fix_tfoot th, .fix_tfoot td, .table-scroll tfoot, .table-scroll tfoot th, .table-scroll tfoot td { position: -webkit-sticky; position: sticky; bottom: -2px; z-index: 4; background: var(--background-grey-1000) !important; color: var(--text-primary) !important; } .container_chart_pie { padding-top: 20px !important; } .sortable-table .table { height: 100%; margin-bottom: 0; } .sortable-table .table tr td:first-child { width: auto; max-width: 220px; } .accordion-button-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; } .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--text-primary); } .rfm-min[data-type="F"], .rfm-min[data-segment="M2"], .rfm-min[data-segment="M3"], .rfm-min[data-segment="M4"], .rfm-min[data-segment="M5"] { border-color: transparent !important; background-color: transparent !important; cursor: default !important } .rfm-hint-border{ border-radius: .375rem !important; } .funnel1 { width: 90%; margin: 10px auto 0 auto; background: #58d6d7 !important; color: #fff; } .funnel2 { width: 75%; margin: 10px auto 0 auto; background: #ff8080 !important; color: #fff; } .funnel3 { width: 60%; margin: 10px auto 0 auto; background: #ffcc78 !important; color: #fff; } .funnel4 { width: 45%; margin: 10px auto 0 auto; background: #636aff !important; color: #fff; } .funnel5 { width: 30%; margin: 10px auto 0 auto; background: #4397ff !important; color: #fff; } .funnel-table-container { display: none !important; position: relative; } .funnel-table-container.active { display: block !important; } .box-indicator-title { margin-bottom: 10px; text-align: left !important } .box-indicator-title { color: var(--text-secondary) !important; font-size: 12px; font-weight: 400 !important; } .box-digit-container { display: flex; flex-direction: column; align-items: flex-start; min-height: 37.5px; justify-content: space-between; } .box-indicator { align-items: flex-start !important; border-radius: 16px !important; padding: 8px 16px !important; min-height: 84px !important; gap: 2px; height: 100%; justify-content: space-between !important; } .past-row { display: flex; flex-direction: row; align-items: center; gap: 4px; flex-wrap: wrap; } .box-main-digit { font-size: 18px; font-weight: 600 !important; color: var(--text-primary) !important; line-height: 120%; } .past-container { font-size: 12px; font-weight: 700; line-height: 100%; gap: 2px; } .past-container:has(> span>.red), .text-red { color: var(--Charts-Red); font-weight: 700; } .past-container:has(> span>.green), .text-green { color: var(--Charts-Green); font-weight: 700; } .green { display: block; width: 12px; height: 12px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("data:image/svg+xml;utf8,"); } .red { display: block; width: 12px; height: 12px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("data:image/svg+xml;utf8,"); } .difference-container { line-height: 100%; } .difference-container span { color: var(--text-secondary) !important; font-size: 12px; font-weight: 400 !important; line-height: 100%; display: block; } .row { gap: 0.5rem 0; } #container { display: flex; flex-direction: column; gap: 0.5rem 0; padding-top: 10px; overflow-y: auto; height: calc(100vh - 140px); padding-bottom: 50px; } .box-radar-chart { margin-bottom: 10px; } .offcanvas { background-color: var(--background-grey-1000) !important; } .sidebar-wrapper .accordion-button:not(.accordion-wrapper-group-collapse .accordion-button), #top_s .accordion-button{ background: var(--nav-item-secondary-background-hover) !important; border-radius: 12px !important; padding: 8px !important; } #top_s .accordion-header { padding-bottom: 4px; } .accordion-wrapper-group-collapse .accordion-button { padding: 8px 0 8px 0 !important; } #segmentModal .select2.select2-container { max-height: 450px !important; overflow-y: auto !important; } .sort_th { cursor: pointer; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } .box-chart.active, .box-table.active, .box-multi-chart.active, .fullscreen:not(:has(.box-pie)) .box-multi-chart { height: 340px !important; max-height: 340px; padding: 10px; padding-top: 60px; } .container_chart_radar { margin-bottom: 10px; } .container_chart_radar .box-chart.active, .container_chart_radar .box-table.active { padding-top: 15px; height: 565px !important; max-height: 565px; } .container_chart_radar .box-table .table { margin-top: 15px; } .container_chart_radar .box-table .table tr td:first-child { width: 230px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .box-chart-Title-main { position: absolute; top: 21px; left: 12px; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 6px; line-height: 1.2; max-height: 20px; } .titleMainText { text-align: left; } .box-chart-Title-main .tooltip_link{ position: relative !important; top: auto !important; left: auto !important; right: auto !important; } .setRange { display: none; } .custom-select { position: absolute; top: 14px; right: 30px; cursor: pointer; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } .selected { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 112px; height: 36px; background: var(--nav-item-secondary-background-hover); padding: 8px; border-radius: 12px; color: var(--text-primary); font-weight: 500; font-size: 14px; } .selected:hover { background: var(--Nav-item-Secondary-Background-Hover-Filter); } /* стрелка */ .select-arrow-icon { transition: transform 0.25s ease; flex-shrink: 0; width: 12px; height: 12px; color: var(--interface-grey-500); } /* открыт — стрелка вверх */ .custom-select.open .select-arrow-icon { transform: rotate(180deg); } .options { display: none; position: absolute; top: 120%; right: 0; width: 200px; overflow: hidden; z-index: 10; border-radius: 16px; border: transparent; box-shadow: 0px 0px 30px 0px #1213161A !important; background: var(--dropdown-menu-background); backdrop-filter: blur(25px); padding: 12px; font-size: 14px; flex-direction: column; gap: 8px; } .options div { padding: 8px; border-radius: 8px; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .option-text { font-weight: 500 !important; } /* иконка по умолчанию скрыта */ .select-active-check { width: 20px; height: 20px; opacity: 0; flex-shrink: 0; color: var(--Nav-item-Secondary-Icon-Active); transition: opacity 0.2s ease; } /* показываем только у активного */ .options div.active .select-active-check { opacity: 1; } .options div:hover { background: var(--Nav-item-Secondary-Background-Active); } .custom-select.open .options { display: flex; } .options div.active { background: var(--Nav-item-Secondary-Background-Active); } .dropdownTypeChart { position: absolute; top: 14px; right: 147px; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dropdownTypeChart .dropdown-toggle { box-shadow: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 52px; height: 36px; background: var(--nav-item-secondary-background-hover); padding: 8px; border-radius: 12px; color: var(--text-primary); font-weight: 500; font-size: 14px; outline: none; box-shadow: none; border: 0; } .dropdownTypeChart .dropdown-toggle:hover { background: var(--Nav-item-Secondary-Background-Hover-Filter); } .dropdownTypeChart .dropdown-toggle:focus { outline: none; box-shadow: none; border: 0; } .dropdown-arrow-icon { width: 12px; height: 12px; transition: transform 0.2s ease; color: var(--interface-grey-500); } .dropdownTypeChart .dropdown-toggle::after { display: none; } .dropdownTypeChart .btn.dropdown-toggle[aria-expanded="true"] .dropdown-arrow-icon { transform: rotate(180deg); } .dropdownTypeChart .dropdown-menu.show { width: 250px; display: flex; flex-direction: column; gap: 8px; margin-top: 5px !important; } .dropdownTypeChart .dropdown-active-check { width: 20px; height: 20px; opacity: 1; } .dropdownTypeChart .dropdown-item, .typeChartRow { display: flex; align-items: center; } .dropdownTypeChart .dropdown-item { justify-content: space-between; } .dropdownTypeChart li>button { background: none; border: none; display: flex; align-items: center; justify-content: flex-start; padding: 8px 8px; color: var(--nav-item-secondary-text-default); border-radius: 8px; font-size: 14px; } .dropdownTypeChart li>button span { font-weight: 400; margin-left: 10px; } .dropdownTypeChart .dropdown-item:hover { background: var(--Nav-item-Secondary-Background-Active); } .dropdownTypeChart .dropdown-item.active { background: var(--Nav-item-Secondary-Background-Active); color: var(--nav-item-secondary-text-default); } .toggleLabelsChart { position: absolute; top: 14px; right: 204px; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .toggleLabels { box-shadow: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--nav-item-secondary-background-hover); padding: 8px; border-radius: 12px; color: var(--text-primary); font-weight: 500; font-size: 14px; outline: none; box-shadow: none; border: 0; } .chartIconEye { width: 20px; height: 20px; color: var(--interface-grey-0); } .toggleLabels:hover { background: var(--Nav-item-Secondary-Background-Hover-Filter); } .container_chart_pie .dropdownTypeChart, .container_chart_bar .dropdownTypeChart { right: 30px; } .container_chart_pie .toggleLabelsChart, .container_chart_bar .toggleLabelsChart{ right: 87px; } .CTOR .toggleLabelsChart { right: 147px; } .container_chart_big_pie { padding-top: 60px !important; } .totalChart { font-size: 16px; font-weight: 600; margin-bottom: 24px; } .totalChartContainer { width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; } .containerChartCanvas { position: relative; width: 100%; height: 365px; } .containerChartCanvasSmall { position: relative; width: 100%; height: 225px; } .smBox .titleMainText { max-width: 90px; font-size: 11.5px; letter-spacing: -0.4px; } .container_chart_table .dropdownTypeChart{ right: 30px; } .chartNoSettings .dropdownTypeChart{ right: 8px; } .container_chart_table { justify-content: flex-start; } .container_chart_pie_with_table { display: none; } .container_chart_pie_with_table.active { display: block; } .container_chart_bar.active { height: auto !important; max-height: none !important; } .smBox .totalChart { margin-bottom: 24px; } .h5Custom { color: var(--text-primary); } .form-select-sm~.select2-container--bootstrap-5 .select2-selection { font-size: 11px !important; border-radius: 12px; padding: 6px 12px; } .form-select.form-select-sm { border-radius: 12px; padding: 6px 30px 6px 12px !important; } .planFactModule .box { min-height: auto; } #columnsDropdown { min-width: 205px; } #unifiedTableContainer { border-radius: 8px; } .unified-table { margin-bottom: 0; } .unified-table thead.sticky-header { position: sticky; top: -1px; background: #eee; z-index: 10; cursor: pointer; user-select: none; } .unified-table th { vertical-align: middle; } .unified-table tr td:first-child, .unified-table tr th:first-child { width: 115px; max-width: 115px; } .unified-table .hour-row:hover { border: 2px solid var(--Button-Primary-Medium-Active) !important; } .tableTooltip { text-align: left; font-size: 12px; } .tableTooltip b { font-weight: 600; } .tableTooltip span { font-weight: 500; } .tRed { color: #F03D32; } .tGreen { color: #3FAE57; } .tGrey { color: #A0A1A2; } #cohortTable .cohortTd { cursor: pointer; } #cohortTable .cohortTd.active { border: 2px solid var(--Button-Primary-Medium-Active) !important; } #cohortTable .cohortTd:hover { border: 2px solid var(--Button-Primary-Medium-Active) !important; } .roiModal .modal-dialog{ max-width: 644px !important; } .roiModal .generalModalContainer, #chooseModal .generalModalContainer { width: 100%; align-items: normal; } .roiModal .calculator-card-body { cursor: pointer; user-select: none; } .roiModal .calculator-card-body:hover, .roiModal .btn-outline:hover { box-shadow: 0px 0px 15px 0px #12131624; } .stepROI { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-bottom: 12px; margin-top: 20px; } .stepROI_item { width: 50%; } .stepLine { width: 100%; height: 6px; border-radius: 20px; background: var(--Stepper-Stepper); margin-bottom: 12px; } .stepText { font-size: 14px; font-weight: 500; color: var(--text-secondary); } .stepROI_item.active .stepText { color: var(--text-primary); } .stepROI_item.active .stepLine { background: var(--interface-green-500); } .stepROI_box { display: flex; flex-direction: column; gap: 12px; background: var(--background-grey-900-lvl-2); border-radius: 24px; padding: 24px; } .stepROI_inputContainer { gap: 16px; } .stepROI_inputContainerRow { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .stepROI_inputContainerColumn { display: flex; flex-direction: column; } .stepROI_inputContainer_checkbox { display: flex; flex-direction: row; align-items: center; gap: 8px; } .stepROI_textContainer { display: flex; flex-direction: column; gap: 8px; } .stepROI_textContainer_item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .roiModal .clients-slider { max-width: 100%; } .stepROIStage { display: none; flex-direction: column; gap: 12px; } .stepROIStage.active { display: flex; } .roiModal .form_container_form_button { display: none; } .roiModal .form_container_form_button.active { display: flex; flex-direction: row; align-items: center; justify-content: center; } .roiModal .calculator-card-title span{ font-size: 14px; font-weight: 500; color: var(--text-primary); } .roiModal .calculator-card-price-digit .price-digit { font-size: 14px; font-weight: 500; color: var(--text-secondary); } .roiModal .calculator-card-price-digit .range_for_digit { font-size: 14px; font-weight: 500; color: var(--text-secondary); } .roiModal .calculator-card-body-content { display: flex; flex-direction: column; gap: 12px; } .roiModal .calculator-card-body { display: flex; flex-direction: column; justify-content: space-between; height: 100%; border-radius: 24px; padding: 16px; background: var(--interface-grey-900); border: 2px solid var(--stroke-stroke-1); } .roiModal .calculator-card-list { display: flex; flex-direction: column; gap: 0px; } .roiModal .calculator-card-list-item { font-size: 14px; font-weight: 500; color: var(--text-secondary); display: inline; } .roiModal .clients-value { width: 100px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--client-base-input-stroke-default); background: var(--client-base-input-background-background); font-size: 14px; font-weight: 400; color: var(--text-primary); text-align: center; caret-color: var(--interface-green-500); outline: none; } #revenueInput { width: 92px; padding: 8px 0px 8px 8px; border-radius: 12px 0 0 12px; border: 1px solid var(--client-base-input-stroke-default); background: var(--client-base-input-background-background); border-color: var(--client-base-input-stroke-default) !important; font-size: 14px; font-weight: 400; color: var(--text-primary); border-right: 0; text-align: center; caret-color: var(--interface-green-500); outline: none; } #hourInput { width: 34px; padding: 8px 0px 8px 8px; border-radius: 12px 0 0 12px; border: 1px solid var(--client-base-input-stroke-default); border-color: var(--client-base-input-stroke-default) !important; background: var(--client-base-input-background-background); font-size: 14px; font-weight: 400; color: var(--text-primary); border-right: 0; text-align: center; caret-color: var(--interface-green-500); outline: none; } .input-group-text { display: flex; align-items: center; font-size: 14px; font-weight: 400; line-height: 1.5; color: #A0A1A2 !important; text-align: center; white-space: nowrap; border-radius: 12px; border: 1px solid var(--client-base-input-stroke-default) !important; border-left: 0; background: var(--client-base-input-background-background) !important; padding-right: 8px; padding-left: 0; } .hourInputText { padding-left: 4px; } .form_container_form_title_b_small { font-size: 18px; } .form_container_form_title_b_small span { font-size: 14px; font-weight: 500; color: var(--text-secondary); } .stepROI_textContainer_item_title, .stepROI_textContainer_item_value { font-size: 14px; font-weight: 500; color: var(--text-secondary); } .fwb { font-size: 18px; font-weight: 600; color: var(--text-primary); } .generalModalBtn.btn-prev { width: 48px; height: 48px; padding: 12px; background: var(--button-secondary-medium-default); } .arrowBack { width: 20px; height: 20px; color: var(--interface-grey-0); } .roiModal .form_container_form_button { gap: 8px; } .roiModal .range-wrapper::before { background: var(--interface-grey-900-lvl-2); } #chooseModal .form_container_form_title { gap: 4px; } .calculator-card-btn-chose { background: var(--button-secondary-medium-default) !important; color: var(--text-primary) !important; font-weight: 500; } .btn-outline { border: 1px solid var(--stroke-stroke-1); background: var(--interface-grey-900); border-radius: 24px; padding: 16px; font-size: 14px; font-weight: 600; display: flex; justify-content: flex-start; align-items: center; width: 172px; height: 68px; cursor: pointer; user-select: none; } .btn-outline-small { border-radius: 16px; padding: 12px 16px; width: 46px; height: 44px; font-size: 14px; font-weight: 500; display: flex; justify-content: center; align-items: center; } .btn-check:checked+.btn-outline { border: 1px solid var(--interface-green-500); background: var(--interface-grey-900); } .stepROI_inputContainer_text { font-weight: 600; font-size: 16px; color: var(--text-primary); } .stepROI_inputContainer_text span{ font-weight: 500; font-size: 14px; color: var(--text-secondary); } .col-sidebar { width: 280px; } .col-content { width: calc(100% - 280px); } @media (max-width: 1200px) { .app-modules-container { overflow-y: auto; } #container { overflow-y: auto; height: auto; padding-bottom: 0; } .col-sidebar, .col-content { width: 100%; } .header_modules_menu_wrapper { display: none; } .header_modules_menu_container .dropdown { width: calc(100% - 20px); margin-top: 4px; } .header_modules_menu-container .dropdown-menu.show { width: 100%; } } @media (min-width: 1920px) { .containerChartCanvas { height: 365px; } .smBox .titleMainText { max-width: 90px; font-size: 11.5px; letter-spacing: -0.4px; } .containerChartCanvasSmall { height: 225px; } .totalChart { margin-bottom: 24px; } .smBox .totalChart { margin-bottom: 24px; } } @media (min-width: 2501px) { .containerChartCanvas { height: 435px; } .smBox .titleMainText { max-width: 150px; font-size: 14px; letter-spacing: 0px; } .containerChartCanvasSmall { height: 270px; } .totalChart { margin-bottom: 24px; } .smBox .totalChart { margin-bottom: 12px; } .col-sidebar { width: 340px; } .col-content { width: calc(100% - 340px); } } #t { max-width: 260px; background: rgba(30, 30, 30, 0.95); color: #fff; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4; box-shadow: 0 8px 20px rgba(0,0,0,0.25); z-index: 99999; pointer-events: none; }