@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap");@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");@font-face{font-family:boxicons;font-weight:400;font-style:normal;src:url(/bot-auth/assets/boxicons-CSrLvhY_.eot);src:url(/bot-auth/assets/boxicons-CSrLvhY_.eot) format('embedded-opentype'),url(/bot-auth/assets/boxicons-CeGEncwm.woff2) format('woff2'),url(/bot-auth/assets/boxicons-CTVby2V1.woff) format('woff'),url(/bot-auth/assets/boxicons-EIQNrSje.ttf) format('truetype'),url(/bot-auth/assets/boxicons-Dp7W9qN3.svg?#boxicons) format('svg')}.bx{font-family:boxicons!important;font-weight:400;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto;display:inline-block;text-transform:none;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bx-ul{margin-left:2em;padding-left:0;list-style:none}.bx-ul>li{position:relative}.bx-ul .bx{font-size:inherit;line-height:inherit;position:absolute;left:-2em;width:2em;text-align:center}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes burst{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}90%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}@keyframes burst{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}90%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}@-webkit-keyframes flashing{0%{opacity:1}45%{opacity:0}90%{opacity:1}}@keyframes flashing{0%{opacity:1}45%{opacity:0}90%{opacity:1}}@-webkit-keyframes fade-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(-20px);transform:translateX(-20px);opacity:0}}@keyframes fade-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(-20px);transform:translateX(-20px);opacity:0}}@-webkit-keyframes fade-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(20px);transform:translateX(20px);opacity:0}}@keyframes fade-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}75%{-webkit-transform:translateX(20px);transform:translateX(20px);opacity:0}}@-webkit-keyframes fade-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(-20px);transform:translateY(-20px);opacity:0}}@keyframes fade-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(-20px);transform:translateY(-20px);opacity:0}}@-webkit-keyframes fade-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0}}@keyframes fade-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}75%{-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0}}@-webkit-keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.95,.95,.95) rotate3d(0,0,1,-10deg);transform:scale3d(.95,.95,.95) rotate3d(0,0,1,-10deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1,1,1) rotate3d(0,0,1,10deg);transform:scale3d(1,1,1) rotate3d(0,0,1,10deg)}40%,60%,80%{-webkit-transform:scale3d(1,1,1) rotate3d(0,0,1,-10deg);transform:scale3d(1,1,1) rotate3d(0,0,1,-10deg)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.95,.95,.95) rotate3d(0,0,1,-10deg);transform:scale3d(.95,.95,.95) rotate3d(0,0,1,-10deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1,1,1) rotate3d(0,0,1,10deg);transform:scale3d(1,1,1) rotate3d(0,0,1,10deg)}40%,60%,80%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bx-spin{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}.bx-spin-hover:hover{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}.bx-tada{-webkit-animation:tada 1.5s ease infinite;animation:tada 1.5s ease infinite}.bx-tada-hover:hover{-webkit-animation:tada 1.5s ease infinite;animation:tada 1.5s ease infinite}.bx-flashing{-webkit-animation:flashing 1.5s infinite linear;animation:flashing 1.5s infinite linear}.bx-flashing-hover:hover{-webkit-animation:flashing 1.5s infinite linear;animation:flashing 1.5s infinite linear}.bx-burst{-webkit-animation:burst 1.5s infinite linear;animation:burst 1.5s infinite linear}.bx-burst-hover:hover{-webkit-animation:burst 1.5s infinite linear;animation:burst 1.5s infinite linear}.bx-fade-up{-webkit-animation:fade-up 1.5s infinite linear;animation:fade-up 1.5s infinite linear}.bx-fade-up-hover:hover{-webkit-animation:fade-up 1.5s infinite linear;animation:fade-up 1.5s infinite linear}.bx-fade-down{-webkit-animation:fade-down 1.5s infinite linear;animation:fade-down 1.5s infinite linear}.bx-fade-down-hover:hover{-webkit-animation:fade-down 1.5s infinite linear;animation:fade-down 1.5s infinite linear}.bx-fade-left{-webkit-animation:fade-left 1.5s infinite linear;animation:fade-left 1.5s infinite linear}.bx-fade-left-hover:hover{-webkit-animation:fade-left 1.5s infinite linear;animation:fade-left 1.5s infinite linear}.bx-fade-right{-webkit-animation:fade-right 1.5s infinite linear;animation:fade-right 1.5s infinite linear}.bx-fade-right-hover:hover{-webkit-animation:fade-right 1.5s infinite linear;animation:fade-right 1.5s infinite linear}.bx-xs{font-size:1rem!important}.bx-sm{font-size:1.55rem!important}.bx-md{font-size:2.25rem!important}.bx-lg{font-size:3rem!important}.bx-fw{font-size:1.2857142857em;line-height:.8em;width:1.2857142857em;height:.8em;margin-top:-.2em!important;vertical-align:middle}.bx-pull-left{float:left;margin-right:.3em!important}.bx-pull-right{float:right;margin-left:.3em!important}.bx-rotate-90{transform:rotate(90deg)}.bx-rotate-180{transform:rotate(180deg)}.bx-rotate-270{transform:rotate(270deg)}.bx-flip-horizontal{transform:scaleX(-1)}.bx-flip-vertical{transform:scaleY(-1)}.bx-border{padding:.25em;border:.07em solid rgba(0,0,0,.1);border-radius:.25em}.bx-border-circle{padding:.25em;border:.07em solid rgba(0,0,0,.1);border-radius:50%}.bxs-balloon:before{content:"\eb60"}.bxs-castle:before{content:"\eb79"}.bxs-coffee-bean:before{content:"\eb92"}.bxs-objects-horizontal-center:before{content:"\ebab"}.bxs-objects-horizontal-left:before{content:"\ebc4"}.bxs-objects-horizontal-right:before{content:"\ebdd"}.bxs-objects-vertical-bottom:before{content:"\ebf6"}.bxs-objects-vertical-center:before{content:"\ef40"}.bxs-objects-vertical-top:before{content:"\ef41"}.bxs-pear:before{content:"\ef42"}.bxs-shield-minus:before{content:"\ef43"}.bxs-shield-plus:before{content:"\ef44"}.bxs-shower:before{content:"\ef45"}.bxs-sushi:before{content:"\ef46"}.bxs-universal-access:before{content:"\ef47"}.bx-child:before{content:"\ef48"}.bx-horizontal-left:before{content:"\ef49"}.bx-horizontal-right:before{content:"\ef4a"}.bx-objects-horizontal-center:before{content:"\ef4b"}.bx-objects-horizontal-left:before{content:"\ef4c"}.bx-objects-horizontal-right:before{content:"\ef4d"}.bx-objects-vertical-bottom:before{content:"\ef4e"}.bx-objects-vertical-center:before{content:"\ef4f"}.bx-objects-vertical-top:before{content:"\ef50"}.bx-rfid:before{content:"\ef51"}.bx-shield-minus:before{content:"\ef52"}.bx-shield-plus:before{content:"\ef53"}.bx-shower:before{content:"\ef54"}.bx-sushi:before{content:"\ef55"}.bx-universal-access:before{content:"\ef56"}.bx-vertical-bottom:before{content:"\ef57"}.bx-vertical-top:before{content:"\ef58"}.bxl-graphql:before{content:"\ef59"}.bxl-typescript:before{content:"\ef5a"}.bxs-color:before{content:"\ef39"}.bx-reflect-horizontal:before{content:"\ef3a"}.bx-reflect-vertical:before{content:"\ef3b"}.bx-color:before{content:"\ef3c"}.bxl-mongodb:before{content:"\ef3d"}.bxl-postgresql:before{content:"\ef3e"}.bxl-deezer:before{content:"\ef3f"}.bxs-hard-hat:before{content:"\ef2a"}.bxs-home-alt-2:before{content:"\ef2b"}.bxs-cheese:before{content:"\ef2c"}.bx-home-alt-2:before{content:"\ef2d"}.bx-hard-hat:before{content:"\ef2e"}.bx-cheese:before{content:"\ef2f"}.bx-cart-add:before{content:"\ef30"}.bx-cart-download:before{content:"\ef31"}.bx-no-signal:before{content:"\ef32"}.bx-signal-1:before{content:"\ef33"}.bx-signal-2:before{content:"\ef34"}.bx-signal-3:before{content:"\ef35"}.bx-signal-4:before{content:"\ef36"}.bx-signal-5:before{content:"\ef37"}.bxl-xing:before{content:"\ef38"}.bxl-meta:before{content:"\ef27"}.bx-lemon:before{content:"\ef28"}.bxs-lemon:before{content:"\ef29"}.bx-cricket-ball:before{content:"\ef0c"}.bx-baguette:before{content:"\ef0d"}.bx-bowl-hot:before{content:"\ef0e"}.bx-bowl-rice:before{content:"\ef0f"}.bx-cable-car:before{content:"\ef10"}.bx-candles:before{content:"\ef11"}.bx-circle-half:before{content:"\ef12"}.bx-circle-quarter:before{content:"\ef13"}.bx-circle-three-quarter:before{content:"\ef14"}.bx-cross:before{content:"\ef15"}.bx-fork:before{content:"\ef16"}.bx-knife:before{content:"\ef17"}.bx-money-withdraw:before{content:"\ef18"}.bx-popsicle:before{content:"\ef19"}.bx-scatter-chart:before{content:"\ef1a"}.bxs-baguette:before{content:"\ef1b"}.bxs-bowl-hot:before{content:"\ef1c"}.bxs-bowl-rice:before{content:"\ef1d"}.bxs-cable-car:before{content:"\ef1e"}.bxs-circle-half:before{content:"\ef1f"}.bxs-circle-quarter:before{content:"\ef20"}.bxs-circle-three-quarter:before{content:"\ef21"}.bxs-cricket-ball:before{content:"\ef22"}.bxs-invader:before{content:"\ef23"}.bx-male-female:before{content:"\ef24"}.bxs-popsicle:before{content:"\ef25"}.bxs-tree-alt:before{content:"\ef26"}.bxl-venmo:before{content:"\e900"}.bxl-upwork:before{content:"\e901"}.bxl-netlify:before{content:"\e902"}.bxl-java:before{content:"\e903"}.bxl-heroku:before{content:"\e904"}.bxl-go-lang:before{content:"\e905"}.bxl-gmail:before{content:"\e906"}.bxl-flask:before{content:"\e907"}.bxl-99designs:before{content:"\e908"}.bxl-500px:before{content:"\e909"}.bxl-adobe:before{content:"\e90a"}.bxl-airbnb:before{content:"\e90b"}.bxl-algolia:before{content:"\e90c"}.bxl-amazon:before{content:"\e90d"}.bxl-android:before{content:"\e90e"}.bxl-angular:before{content:"\e90f"}.bxl-apple:before{content:"\e910"}.bxl-audible:before{content:"\e911"}.bxl-aws:before{content:"\e912"}.bxl-baidu:before{content:"\e913"}.bxl-behance:before{content:"\e914"}.bxl-bing:before{content:"\e915"}.bxl-bitcoin:before{content:"\e916"}.bxl-blender:before{content:"\e917"}.bxl-blogger:before{content:"\e918"}.bxl-bootstrap:before{content:"\e919"}.bxl-chrome:before{content:"\e91a"}.bxl-codepen:before{content:"\e91b"}.bxl-c-plus-plus:before{content:"\e91c"}.bxl-creative-commons:before{content:"\e91d"}.bxl-css3:before{content:"\e91e"}.bxl-dailymotion:before{content:"\e91f"}.bxl-deviantart:before{content:"\e920"}.bxl-dev-to:before{content:"\e921"}.bxl-digg:before{content:"\e922"}.bxl-digitalocean:before{content:"\e923"}.bxl-discord:before{content:"\e924"}.bxl-discord-alt:before{content:"\e925"}.bxl-discourse:before{content:"\e926"}.bxl-django:before{content:"\e927"}.bxl-docker:before{content:"\e928"}.bxl-dribbble:before{content:"\e929"}.bxl-dropbox:before{content:"\e92a"}.bxl-drupal:before{content:"\e92b"}.bxl-ebay:before{content:"\e92c"}.bxl-edge:before{content:"\e92d"}.bxl-etsy:before{content:"\e92e"}.bxl-facebook:before{content:"\e92f"}.bxl-facebook-circle:before{content:"\e930"}.bxl-facebook-square:before{content:"\e931"}.bxl-figma:before{content:"\e932"}.bxl-firebase:before{content:"\e933"}.bxl-firefox:before{content:"\e934"}.bxl-flickr:before{content:"\e935"}.bxl-flickr-square:before{content:"\e936"}.bxl-flutter:before{content:"\e937"}.bxl-foursquare:before{content:"\e938"}.bxl-git:before{content:"\e939"}.bxl-github:before{content:"\e93a"}.bxl-gitlab:before{content:"\e93b"}.bxl-google:before{content:"\e93c"}.bxl-google-cloud:before{content:"\e93d"}.bxl-google-plus:before{content:"\e93e"}.bxl-google-plus-circle:before{content:"\e93f"}.bxl-html5:before{content:"\e940"}.bxl-imdb:before{content:"\e941"}.bxl-instagram:before{content:"\e942"}.bxl-instagram-alt:before{content:"\e943"}.bxl-internet-explorer:before{content:"\e944"}.bxl-invision:before{content:"\e945"}.bxl-javascript:before{content:"\e946"}.bxl-joomla:before{content:"\e947"}.bxl-jquery:before{content:"\e948"}.bxl-jsfiddle:before{content:"\e949"}.bxl-kickstarter:before{content:"\e94a"}.bxl-kubernetes:before{content:"\e94b"}.bxl-less:before{content:"\e94c"}.bxl-linkedin:before{content:"\e94d"}.bxl-linkedin-square:before{content:"\e94e"}.bxl-magento:before{content:"\e94f"}.bxl-mailchimp:before{content:"\e950"}.bxl-markdown:before{content:"\e951"}.bxl-mastercard:before{content:"\e952"}.bxl-mastodon:before{content:"\e953"}.bxl-medium:before{content:"\e954"}.bxl-medium-old:before{content:"\e955"}.bxl-medium-square:before{content:"\e956"}.bxl-messenger:before{content:"\e957"}.bxl-microsoft:before{content:"\e958"}.bxl-microsoft-teams:before{content:"\e959"}.bxl-nodejs:before{content:"\e95a"}.bxl-ok-ru:before{content:"\e95b"}.bxl-opera:before{content:"\e95c"}.bxl-patreon:before{content:"\e95d"}.bxl-paypal:before{content:"\e95e"}.bxl-periscope:before{content:"\e95f"}.bxl-php:before{content:"\e960"}.bxl-pinterest:before{content:"\e961"}.bxl-pinterest-alt:before{content:"\e962"}.bxl-play-store:before{content:"\e963"}.bxl-pocket:before{content:"\e964"}.bxl-product-hunt:before{content:"\e965"}.bxl-python:before{content:"\e966"}.bxl-quora:before{content:"\e967"}.bxl-react:before{content:"\e968"}.bxl-redbubble:before{content:"\e969"}.bxl-reddit:before{content:"\e96a"}.bxl-redux:before{content:"\e96b"}.bxl-sass:before{content:"\e96c"}.bxl-shopify:before{content:"\e96d"}.bxl-sketch:before{content:"\e96e"}.bxl-skype:before{content:"\e96f"}.bxl-slack:before{content:"\e970"}.bxl-slack-old:before{content:"\e971"}.bxl-snapchat:before{content:"\e972"}.bxl-soundcloud:before{content:"\e973"}.bxl-spotify:before{content:"\e974"}.bxl-spring-boot:before{content:"\e975"}.bxl-squarespace:before{content:"\e976"}.bxl-stack-overflow:before{content:"\e977"}.bxl-steam:before{content:"\e978"}.bxl-stripe:before{content:"\e979"}.bxl-tailwind-css:before{content:"\e97a"}.bxl-telegram:before{content:"\e97b"}.bxl-tiktok:before{content:"\e97c"}.bxl-trello:before{content:"\e97d"}.bxl-trip-advisor:before{content:"\e97e"}.bxl-tumblr:before{content:"\e97f"}.bxl-tux:before{content:"\e980"}.bxl-twitch:before{content:"\e981"}.bxl-twitter:before{content:"\e982"}.bxl-unity:before{content:"\e983"}.bxl-unsplash:before{content:"\e984"}.bxl-vimeo:before{content:"\e985"}.bxl-visa:before{content:"\e986"}.bxl-visual-studio:before{content:"\e987"}.bxl-vk:before{content:"\e988"}.bxl-vuejs:before{content:"\e989"}.bxl-whatsapp:before{content:"\e98a"}.bxl-whatsapp-square:before{content:"\e98b"}.bxl-wikipedia:before{content:"\e98c"}.bxl-windows:before{content:"\e98d"}.bxl-wix:before{content:"\e98e"}.bxl-wordpress:before{content:"\e98f"}.bxl-yahoo:before{content:"\e990"}.bxl-yelp:before{content:"\e991"}.bxl-youtube:before{content:"\e992"}.bxl-zoom:before{content:"\e993"}.bx-collapse-alt:before{content:"\e994"}.bx-collapse-horizontal:before{content:"\e995"}.bx-collapse-vertical:before{content:"\e996"}.bx-expand-horizontal:before{content:"\e997"}.bx-expand-vertical:before{content:"\e998"}.bx-injection:before{content:"\e999"}.bx-leaf:before{content:"\e99a"}.bx-math:before{content:"\e99b"}.bx-party:before{content:"\e99c"}.bx-abacus:before{content:"\e99d"}.bx-accessibility:before{content:"\e99e"}.bx-add-to-queue:before{content:"\e99f"}.bx-adjust:before{content:"\e9a0"}.bx-alarm:before{content:"\e9a1"}.bx-alarm-add:before{content:"\e9a2"}.bx-alarm-exclamation:before{content:"\e9a3"}.bx-alarm-off:before{content:"\e9a4"}.bx-alarm-snooze:before{content:"\e9a5"}.bx-album:before{content:"\e9a6"}.bx-align-justify:before{content:"\e9a7"}.bx-align-left:before{content:"\e9a8"}.bx-align-middle:before{content:"\e9a9"}.bx-align-right:before{content:"\e9aa"}.bx-analyse:before{content:"\e9ab"}.bx-anchor:before{content:"\e9ac"}.bx-angry:before{content:"\e9ad"}.bx-aperture:before{content:"\e9ae"}.bx-arch:before{content:"\e9af"}.bx-archive:before{content:"\e9b0"}.bx-archive-in:before{content:"\e9b1"}.bx-archive-out:before{content:"\e9b2"}.bx-area:before{content:"\e9b3"}.bx-arrow-back:before{content:"\e9b4"}.bx-arrow-from-bottom:before{content:"\e9b5"}.bx-arrow-from-left:before{content:"\e9b6"}.bx-arrow-from-right:before{content:"\e9b7"}.bx-arrow-from-top:before{content:"\e9b8"}.bx-arrow-to-bottom:before{content:"\e9b9"}.bx-arrow-to-left:before{content:"\e9ba"}.bx-arrow-to-right:before{content:"\e9bb"}.bx-arrow-to-top:before{content:"\e9bc"}.bx-at:before{content:"\e9bd"}.bx-atom:before{content:"\e9be"}.bx-award:before{content:"\e9bf"}.bx-badge:before{content:"\e9c0"}.bx-badge-check:before{content:"\e9c1"}.bx-ball:before{content:"\e9c2"}.bx-band-aid:before{content:"\e9c3"}.bx-bar-chart:before{content:"\e9c4"}.bx-bar-chart-alt:before{content:"\e9c5"}.bx-bar-chart-alt-2:before{content:"\e9c6"}.bx-bar-chart-square:before{content:"\e9c7"}.bx-barcode:before{content:"\e9c8"}.bx-barcode-reader:before{content:"\e9c9"}.bx-baseball:before{content:"\e9ca"}.bx-basket:before{content:"\e9cb"}.bx-basketball:before{content:"\e9cc"}.bx-bath:before{content:"\e9cd"}.bx-battery:before{content:"\e9ce"}.bx-bed:before{content:"\e9cf"}.bx-been-here:before{content:"\e9d0"}.bx-beer:before{content:"\e9d1"}.bx-bell:before{content:"\e9d2"}.bx-bell-minus:before{content:"\e9d3"}.bx-bell-off:before{content:"\e9d4"}.bx-bell-plus:before{content:"\e9d5"}.bx-bible:before{content:"\e9d6"}.bx-bitcoin:before{content:"\e9d7"}.bx-blanket:before{content:"\e9d8"}.bx-block:before{content:"\e9d9"}.bx-bluetooth:before{content:"\e9da"}.bx-body:before{content:"\e9db"}.bx-bold:before{content:"\e9dc"}.bx-bolt-circle:before{content:"\e9dd"}.bx-bomb:before{content:"\e9de"}.bx-bone:before{content:"\e9df"}.bx-bong:before{content:"\e9e0"}.bx-book:before{content:"\e9e1"}.bx-book-add:before{content:"\e9e2"}.bx-book-alt:before{content:"\e9e3"}.bx-book-bookmark:before{content:"\e9e4"}.bx-book-content:before{content:"\e9e5"}.bx-book-heart:before{content:"\e9e6"}.bx-bookmark:before{content:"\e9e7"}.bx-bookmark-alt:before{content:"\e9e8"}.bx-bookmark-alt-minus:before{content:"\e9e9"}.bx-bookmark-alt-plus:before{content:"\e9ea"}.bx-bookmark-heart:before{content:"\e9eb"}.bx-bookmark-minus:before{content:"\e9ec"}.bx-bookmark-plus:before{content:"\e9ed"}.bx-bookmarks:before{content:"\e9ee"}.bx-book-open:before{content:"\e9ef"}.bx-book-reader:before{content:"\e9f0"}.bx-border-all:before{content:"\e9f1"}.bx-border-bottom:before{content:"\e9f2"}.bx-border-inner:before{content:"\e9f3"}.bx-border-left:before{content:"\e9f4"}.bx-border-none:before{content:"\e9f5"}.bx-border-outer:before{content:"\e9f6"}.bx-border-radius:before{content:"\e9f7"}.bx-border-right:before{content:"\e9f8"}.bx-border-top:before{content:"\e9f9"}.bx-bot:before{content:"\e9fa"}.bx-bowling-ball:before{content:"\e9fb"}.bx-box:before{content:"\e9fc"}.bx-bracket:before{content:"\e9fd"}.bx-braille:before{content:"\e9fe"}.bx-brain:before{content:"\e9ff"}.bx-briefcase:before{content:"\ea00"}.bx-briefcase-alt:before{content:"\ea01"}.bx-briefcase-alt-2:before{content:"\ea02"}.bx-brightness:before{content:"\ea03"}.bx-brightness-half:before{content:"\ea04"}.bx-broadcast:before{content:"\ea05"}.bx-brush:before{content:"\ea06"}.bx-brush-alt:before{content:"\ea07"}.bx-bug:before{content:"\ea08"}.bx-bug-alt:before{content:"\ea09"}.bx-building:before{content:"\ea0a"}.bx-building-house:before{content:"\ea0b"}.bx-buildings:before{content:"\ea0c"}.bx-bulb:before{content:"\ea0d"}.bx-bullseye:before{content:"\ea0e"}.bx-buoy:before{content:"\ea0f"}.bx-bus:before{content:"\ea10"}.bx-bus-school:before{content:"\ea11"}.bx-cabinet:before{content:"\ea12"}.bx-cake:before{content:"\ea13"}.bx-calculator:before{content:"\ea14"}.bx-calendar:before{content:"\ea15"}.bx-calendar-alt:before{content:"\ea16"}.bx-calendar-check:before{content:"\ea17"}.bx-calendar-edit:before{content:"\ea18"}.bx-calendar-event:before{content:"\ea19"}.bx-calendar-exclamation:before{content:"\ea1a"}.bx-calendar-heart:before{content:"\ea1b"}.bx-calendar-minus:before{content:"\ea1c"}.bx-calendar-plus:before{content:"\ea1d"}.bx-calendar-star:before{content:"\ea1e"}.bx-calendar-week:before{content:"\ea1f"}.bx-calendar-x:before{content:"\ea20"}.bx-camera:before{content:"\ea21"}.bx-camera-home:before{content:"\ea22"}.bx-camera-movie:before{content:"\ea23"}.bx-camera-off:before{content:"\ea24"}.bx-capsule:before{content:"\ea25"}.bx-captions:before{content:"\ea26"}.bx-car:before{content:"\ea27"}.bx-card:before{content:"\ea28"}.bx-caret-down:before{content:"\ea29"}.bx-caret-down-circle:before{content:"\ea2a"}.bx-caret-down-square:before{content:"\ea2b"}.bx-caret-left:before{content:"\ea2c"}.bx-caret-left-circle:before{content:"\ea2d"}.bx-caret-left-square:before{content:"\ea2e"}.bx-caret-right:before{content:"\ea2f"}.bx-caret-right-circle:before{content:"\ea30"}.bx-caret-right-square:before{content:"\ea31"}.bx-caret-up:before{content:"\ea32"}.bx-caret-up-circle:before{content:"\ea33"}.bx-caret-up-square:before{content:"\ea34"}.bx-carousel:before{content:"\ea35"}.bx-cart:before{content:"\ea36"}.bx-cart-alt:before{content:"\ea37"}.bx-cast:before{content:"\ea38"}.bx-category:before{content:"\ea39"}.bx-category-alt:before{content:"\ea3a"}.bx-cctv:before{content:"\ea3b"}.bx-certification:before{content:"\ea3c"}.bx-chair:before{content:"\ea3d"}.bx-chalkboard:before{content:"\ea3e"}.bx-chart:before{content:"\ea3f"}.bx-chat:before{content:"\ea40"}.bx-check:before{content:"\ea41"}.bx-checkbox:before{content:"\ea42"}.bx-checkbox-checked:before{content:"\ea43"}.bx-checkbox-minus:before{content:"\ea44"}.bx-checkbox-square:before{content:"\ea45"}.bx-check-circle:before{content:"\ea46"}.bx-check-double:before{content:"\ea47"}.bx-check-shield:before{content:"\ea48"}.bx-check-square:before{content:"\ea49"}.bx-chevron-down:before{content:"\ea4a"}.bx-chevron-down-circle:before{content:"\ea4b"}.bx-chevron-down-square:before{content:"\ea4c"}.bx-chevron-left:before{content:"\ea4d"}.bx-chevron-left-circle:before{content:"\ea4e"}.bx-chevron-left-square:before{content:"\ea4f"}.bx-chevron-right:before{content:"\ea50"}.bx-chevron-right-circle:before{content:"\ea51"}.bx-chevron-right-square:before{content:"\ea52"}.bx-chevrons-down:before{content:"\ea53"}.bx-chevrons-left:before{content:"\ea54"}.bx-chevrons-right:before{content:"\ea55"}.bx-chevrons-up:before{content:"\ea56"}.bx-chevron-up:before{content:"\ea57"}.bx-chevron-up-circle:before{content:"\ea58"}.bx-chevron-up-square:before{content:"\ea59"}.bx-chip:before{content:"\ea5a"}.bx-church:before{content:"\ea5b"}.bx-circle:before{content:"\ea5c"}.bx-clinic:before{content:"\ea5d"}.bx-clipboard:before{content:"\ea5e"}.bx-closet:before{content:"\ea5f"}.bx-cloud:before{content:"\ea60"}.bx-cloud-download:before{content:"\ea61"}.bx-cloud-drizzle:before{content:"\ea62"}.bx-cloud-lightning:before{content:"\ea63"}.bx-cloud-light-rain:before{content:"\ea64"}.bx-cloud-rain:before{content:"\ea65"}.bx-cloud-snow:before{content:"\ea66"}.bx-cloud-upload:before{content:"\ea67"}.bx-code:before{content:"\ea68"}.bx-code-alt:before{content:"\ea69"}.bx-code-block:before{content:"\ea6a"}.bx-code-curly:before{content:"\ea6b"}.bx-coffee:before{content:"\ea6c"}.bx-coffee-togo:before{content:"\ea6d"}.bx-cog:before{content:"\ea6e"}.bx-coin:before{content:"\ea6f"}.bx-coin-stack:before{content:"\ea70"}.bx-collapse:before{content:"\ea71"}.bx-collection:before{content:"\ea72"}.bx-color-fill:before{content:"\ea73"}.bx-columns:before{content:"\ea74"}.bx-command:before{content:"\ea75"}.bx-comment:before{content:"\ea76"}.bx-comment-add:before{content:"\ea77"}.bx-comment-check:before{content:"\ea78"}.bx-comment-detail:before{content:"\ea79"}.bx-comment-dots:before{content:"\ea7a"}.bx-comment-edit:before{content:"\ea7b"}.bx-comment-error:before{content:"\ea7c"}.bx-comment-minus:before{content:"\ea7d"}.bx-comment-x:before{content:"\ea7e"}.bx-compass:before{content:"\ea7f"}.bx-confused:before{content:"\ea80"}.bx-conversation:before{content:"\ea81"}.bx-cookie:before{content:"\ea82"}.bx-cool:before{content:"\ea83"}.bx-copy:before{content:"\ea84"}.bx-copy-alt:before{content:"\ea85"}.bx-copyright:before{content:"\ea86"}.bx-credit-card:before{content:"\ea87"}.bx-credit-card-alt:before{content:"\ea88"}.bx-credit-card-front:before{content:"\ea89"}.bx-crop:before{content:"\ea8a"}.bx-crosshair:before{content:"\ea8b"}.bx-crown:before{content:"\ea8c"}.bx-cube:before{content:"\ea8d"}.bx-cube-alt:before{content:"\ea8e"}.bx-cuboid:before{content:"\ea8f"}.bx-current-location:before{content:"\ea90"}.bx-customize:before{content:"\ea91"}.bx-cut:before{content:"\ea92"}.bx-cycling:before{content:"\ea93"}.bx-cylinder:before{content:"\ea94"}.bx-data:before{content:"\ea95"}.bx-desktop:before{content:"\ea96"}.bx-detail:before{content:"\ea97"}.bx-devices:before{content:"\ea98"}.bx-dialpad:before{content:"\ea99"}.bx-dialpad-alt:before{content:"\ea9a"}.bx-diamond:before{content:"\ea9b"}.bx-dice-1:before{content:"\ea9c"}.bx-dice-2:before{content:"\ea9d"}.bx-dice-3:before{content:"\ea9e"}.bx-dice-4:before{content:"\ea9f"}.bx-dice-5:before{content:"\eaa0"}.bx-dice-6:before{content:"\eaa1"}.bx-directions:before{content:"\eaa2"}.bx-disc:before{content:"\eaa3"}.bx-dish:before{content:"\eaa4"}.bx-dislike:before{content:"\eaa5"}.bx-dizzy:before{content:"\eaa6"}.bx-dna:before{content:"\eaa7"}.bx-dock-bottom:before{content:"\eaa8"}.bx-dock-left:before{content:"\eaa9"}.bx-dock-right:before{content:"\eaaa"}.bx-dock-top:before{content:"\eaab"}.bx-dollar:before{content:"\eaac"}.bx-dollar-circle:before{content:"\eaad"}.bx-donate-blood:before{content:"\eaae"}.bx-donate-heart:before{content:"\eaaf"}.bx-door-open:before{content:"\eab0"}.bx-dots-horizontal:before{content:"\eab1"}.bx-dots-horizontal-rounded:before{content:"\eab2"}.bx-dots-vertical:before{content:"\eab3"}.bx-dots-vertical-rounded:before{content:"\eab4"}.bx-doughnut-chart:before{content:"\eab5"}.bx-down-arrow:before{content:"\eab6"}.bx-down-arrow-alt:before{content:"\eab7"}.bx-down-arrow-circle:before{content:"\eab8"}.bx-download:before{content:"\eab9"}.bx-downvote:before{content:"\eaba"}.bx-drink:before{content:"\eabb"}.bx-droplet:before{content:"\eabc"}.bx-dumbbell:before{content:"\eabd"}.bx-duplicate:before{content:"\eabe"}.bx-edit:before{content:"\eabf"}.bx-edit-alt:before{content:"\eac0"}.bx-envelope:before{content:"\eac1"}.bx-envelope-open:before{content:"\eac2"}.bx-equalizer:before{content:"\eac3"}.bx-eraser:before{content:"\eac4"}.bx-error:before{content:"\eac5"}.bx-error-alt:before{content:"\eac6"}.bx-error-circle:before{content:"\eac7"}.bx-euro:before{content:"\eac8"}.bx-exclude:before{content:"\eac9"}.bx-exit:before{content:"\eaca"}.bx-exit-fullscreen:before{content:"\eacb"}.bx-expand:before{content:"\eacc"}.bx-expand-alt:before{content:"\eacd"}.bx-export:before{content:"\eace"}.bx-extension:before{content:"\eacf"}.bx-face:before{content:"\ead0"}.bx-fast-forward:before{content:"\ead1"}.bx-fast-forward-circle:before{content:"\ead2"}.bx-female:before{content:"\ead3"}.bx-female-sign:before{content:"\ead4"}.bx-file:before{content:"\ead5"}.bx-file-blank:before{content:"\ead6"}.bx-file-find:before{content:"\ead7"}.bx-film:before{content:"\ead8"}.bx-filter:before{content:"\ead9"}.bx-filter-alt:before{content:"\eada"}.bx-fingerprint:before{content:"\eadb"}.bx-first-aid:before{content:"\eadc"}.bx-first-page:before{content:"\eadd"}.bx-flag:before{content:"\eade"}.bx-folder:before{content:"\eadf"}.bx-folder-minus:before{content:"\eae0"}.bx-folder-open:before{content:"\eae1"}.bx-folder-plus:before{content:"\eae2"}.bx-font:before{content:"\eae3"}.bx-font-color:before{content:"\eae4"}.bx-font-family:before{content:"\eae5"}.bx-font-size:before{content:"\eae6"}.bx-food-menu:before{content:"\eae7"}.bx-food-tag:before{content:"\eae8"}.bx-football:before{content:"\eae9"}.bx-fridge:before{content:"\eaea"}.bx-fullscreen:before{content:"\eaeb"}.bx-game:before{content:"\eaec"}.bx-gas-pump:before{content:"\eaed"}.bx-ghost:before{content:"\eaee"}.bx-gift:before{content:"\eaef"}.bx-git-branch:before{content:"\eaf0"}.bx-git-commit:before{content:"\eaf1"}.bx-git-compare:before{content:"\eaf2"}.bx-git-merge:before{content:"\eaf3"}.bx-git-pull-request:before{content:"\eaf4"}.bx-git-repo-forked:before{content:"\eaf5"}.bx-glasses:before{content:"\eaf6"}.bx-glasses-alt:before{content:"\eaf7"}.bx-globe:before{content:"\eaf8"}.bx-globe-alt:before{content:"\eaf9"}.bx-grid:before{content:"\eafa"}.bx-grid-alt:before{content:"\eafb"}.bx-grid-horizontal:before{content:"\eafc"}.bx-grid-small:before{content:"\eafd"}.bx-grid-vertical:before{content:"\eafe"}.bx-group:before{content:"\eaff"}.bx-handicap:before{content:"\eb00"}.bx-happy:before{content:"\eb01"}.bx-happy-alt:before{content:"\eb02"}.bx-happy-beaming:before{content:"\eb03"}.bx-happy-heart-eyes:before{content:"\eb04"}.bx-hash:before{content:"\eb05"}.bx-hdd:before{content:"\eb06"}.bx-heading:before{content:"\eb07"}.bx-headphone:before{content:"\eb08"}.bx-health:before{content:"\eb09"}.bx-heart:before{content:"\eb0a"}.bx-heart-circle:before{content:"\eb0b"}.bx-heart-square:before{content:"\eb0c"}.bx-help-circle:before{content:"\eb0d"}.bx-hide:before{content:"\eb0e"}.bx-highlight:before{content:"\eb0f"}.bx-history:before{content:"\eb10"}.bx-hive:before{content:"\eb11"}.bx-home:before{content:"\eb12"}.bx-home-alt:before{content:"\eb13"}.bx-home-circle:before{content:"\eb14"}.bx-home-heart:before{content:"\eb15"}.bx-home-smile:before{content:"\eb16"}.bx-horizontal-center:before{content:"\eb17"}.bx-hotel:before{content:"\eb18"}.bx-hourglass:before{content:"\eb19"}.bx-id-card:before{content:"\eb1a"}.bx-image:before{content:"\eb1b"}.bx-image-add:before{content:"\eb1c"}.bx-image-alt:before{content:"\eb1d"}.bx-images:before{content:"\eb1e"}.bx-import:before{content:"\eb1f"}.bx-infinite:before{content:"\eb20"}.bx-info-circle:before{content:"\eb21"}.bx-info-square:before{content:"\eb22"}.bx-intersect:before{content:"\eb23"}.bx-italic:before{content:"\eb24"}.bx-joystick:before{content:"\eb25"}.bx-joystick-alt:before{content:"\eb26"}.bx-joystick-button:before{content:"\eb27"}.bx-key:before{content:"\eb28"}.bx-label:before{content:"\eb29"}.bx-landscape:before{content:"\eb2a"}.bx-laptop:before{content:"\eb2b"}.bx-last-page:before{content:"\eb2c"}.bx-laugh:before{content:"\eb2d"}.bx-layer:before{content:"\eb2e"}.bx-layer-minus:before{content:"\eb2f"}.bx-layer-plus:before{content:"\eb30"}.bx-layout:before{content:"\eb31"}.bx-left-arrow:before{content:"\eb32"}.bx-left-arrow-alt:before{content:"\eb33"}.bx-left-arrow-circle:before{content:"\eb34"}.bx-left-down-arrow-circle:before{content:"\eb35"}.bx-left-indent:before{content:"\eb36"}.bx-left-top-arrow-circle:before{content:"\eb37"}.bx-library:before{content:"\eb38"}.bx-like:before{content:"\eb39"}.bx-line-chart:before{content:"\eb3a"}.bx-line-chart-down:before{content:"\eb3b"}.bx-link:before{content:"\eb3c"}.bx-link-alt:before{content:"\eb3d"}.bx-link-external:before{content:"\eb3e"}.bx-lira:before{content:"\eb3f"}.bx-list-check:before{content:"\eb40"}.bx-list-minus:before{content:"\eb41"}.bx-list-ol:before{content:"\eb42"}.bx-list-plus:before{content:"\eb43"}.bx-list-ul:before{content:"\eb44"}.bx-loader:before{content:"\eb45"}.bx-loader-alt:before{content:"\eb46"}.bx-loader-circle:before{content:"\eb47"}.bx-location-plus:before{content:"\eb48"}.bx-lock:before{content:"\eb49"}.bx-lock-alt:before{content:"\eb4a"}.bx-lock-open:before{content:"\eb4b"}.bx-lock-open-alt:before{content:"\eb4c"}.bx-log-in:before{content:"\eb4d"}.bx-log-in-circle:before{content:"\eb4e"}.bx-log-out:before{content:"\eb4f"}.bx-log-out-circle:before{content:"\eb50"}.bx-low-vision:before{content:"\eb51"}.bx-magnet:before{content:"\eb52"}.bx-mail-send:before{content:"\eb53"}.bx-male:before{content:"\eb54"}.bx-male-sign:before{content:"\eb55"}.bx-map:before{content:"\eb56"}.bx-map-alt:before{content:"\eb57"}.bx-map-pin:before{content:"\eb58"}.bx-mask:before{content:"\eb59"}.bx-medal:before{content:"\eb5a"}.bx-meh:before{content:"\eb5b"}.bx-meh-alt:before{content:"\eb5c"}.bx-meh-blank:before{content:"\eb5d"}.bx-memory-card:before{content:"\eb5e"}.bx-menu:before{content:"\eb5f"}.bx-menu-alt-left:before{content:"\ef5b"}.bx-menu-alt-right:before{content:"\eb61"}.bx-merge:before{content:"\eb62"}.bx-message:before{content:"\eb63"}.bx-message-add:before{content:"\eb64"}.bx-message-alt:before{content:"\eb65"}.bx-message-alt-add:before{content:"\eb66"}.bx-message-alt-check:before{content:"\eb67"}.bx-message-alt-detail:before{content:"\eb68"}.bx-message-alt-dots:before{content:"\eb69"}.bx-message-alt-edit:before{content:"\eb6a"}.bx-message-alt-error:before{content:"\eb6b"}.bx-message-alt-minus:before{content:"\eb6c"}.bx-message-alt-x:before{content:"\eb6d"}.bx-message-check:before{content:"\eb6e"}.bx-message-detail:before{content:"\eb6f"}.bx-message-dots:before{content:"\eb70"}.bx-message-edit:before{content:"\eb71"}.bx-message-error:before{content:"\eb72"}.bx-message-minus:before{content:"\eb73"}.bx-message-rounded:before{content:"\eb74"}.bx-message-rounded-add:before{content:"\eb75"}.bx-message-rounded-check:before{content:"\eb76"}.bx-message-rounded-detail:before{content:"\eb77"}.bx-message-rounded-dots:before{content:"\eb78"}.bx-message-rounded-edit:before{content:"\ef5c"}.bx-message-rounded-error:before{content:"\eb7a"}.bx-message-rounded-minus:before{content:"\eb7b"}.bx-message-rounded-x:before{content:"\eb7c"}.bx-message-square:before{content:"\eb7d"}.bx-message-square-add:before{content:"\eb7e"}.bx-message-square-check:before{content:"\eb7f"}.bx-message-square-detail:before{content:"\eb80"}.bx-message-square-dots:before{content:"\eb81"}.bx-message-square-edit:before{content:"\eb82"}.bx-message-square-error:before{content:"\eb83"}.bx-message-square-minus:before{content:"\eb84"}.bx-message-square-x:before{content:"\eb85"}.bx-message-x:before{content:"\eb86"}.bx-meteor:before{content:"\eb87"}.bx-microchip:before{content:"\eb88"}.bx-microphone:before{content:"\eb89"}.bx-microphone-off:before{content:"\eb8a"}.bx-minus:before{content:"\eb8b"}.bx-minus-back:before{content:"\eb8c"}.bx-minus-circle:before{content:"\eb8d"}.bx-minus-front:before{content:"\eb8e"}.bx-mobile:before{content:"\eb8f"}.bx-mobile-alt:before{content:"\eb90"}.bx-mobile-landscape:before{content:"\eb91"}.bx-mobile-vibration:before{content:"\ef5d"}.bx-money:before{content:"\eb93"}.bx-moon:before{content:"\eb94"}.bx-mouse:before{content:"\eb95"}.bx-mouse-alt:before{content:"\eb96"}.bx-move:before{content:"\eb97"}.bx-move-horizontal:before{content:"\eb98"}.bx-move-vertical:before{content:"\eb99"}.bx-movie:before{content:"\eb9a"}.bx-movie-play:before{content:"\eb9b"}.bx-music:before{content:"\eb9c"}.bx-navigation:before{content:"\eb9d"}.bx-network-chart:before{content:"\eb9e"}.bx-news:before{content:"\eb9f"}.bx-no-entry:before{content:"\eba0"}.bx-note:before{content:"\eba1"}.bx-notepad:before{content:"\eba2"}.bx-notification:before{content:"\eba3"}.bx-notification-off:before{content:"\eba4"}.bx-outline:before{content:"\eba5"}.bx-package:before{content:"\eba6"}.bx-paint:before{content:"\eba7"}.bx-paint-roll:before{content:"\eba8"}.bx-palette:before{content:"\eba9"}.bx-paperclip:before{content:"\ebaa"}.bx-paper-plane:before{content:"\ef61"}.bx-paragraph:before{content:"\ebac"}.bx-paste:before{content:"\ebad"}.bx-pause:before{content:"\ebae"}.bx-pause-circle:before{content:"\ebaf"}.bx-pen:before{content:"\ebb0"}.bx-pencil:before{content:"\ebb1"}.bx-phone:before{content:"\ebb2"}.bx-phone-call:before{content:"\ebb3"}.bx-phone-incoming:before{content:"\ebb4"}.bx-phone-off:before{content:"\ebb5"}.bx-phone-outgoing:before{content:"\ebb6"}.bx-photo-album:before{content:"\ebb7"}.bx-pie-chart:before{content:"\ebb8"}.bx-pie-chart-alt:before{content:"\ebb9"}.bx-pie-chart-alt-2:before{content:"\ebba"}.bx-pin:before{content:"\ebbb"}.bx-planet:before{content:"\ebbc"}.bx-play:before{content:"\ebbd"}.bx-play-circle:before{content:"\ebbe"}.bx-plug:before{content:"\ebbf"}.bx-plus:before{content:"\ebc0"}.bx-plus-circle:before{content:"\ebc1"}.bx-plus-medical:before{content:"\ebc2"}.bx-podcast:before{content:"\ebc3"}.bx-pointer:before{content:"\ef5e"}.bx-poll:before{content:"\ebc5"}.bx-polygon:before{content:"\ebc6"}.bx-pound:before{content:"\ebc7"}.bx-power-off:before{content:"\ebc8"}.bx-printer:before{content:"\ebc9"}.bx-pulse:before{content:"\ebca"}.bx-purchase-tag:before{content:"\ebcb"}.bx-purchase-tag-alt:before{content:"\ebcc"}.bx-pyramid:before{content:"\ebcd"}.bx-qr:before{content:"\ebce"}.bx-qr-scan:before{content:"\ebcf"}.bx-question-mark:before{content:"\ebd0"}.bx-radar:before{content:"\ebd1"}.bx-radio:before{content:"\ebd2"}.bx-radio-circle:before{content:"\ebd3"}.bx-radio-circle-marked:before{content:"\ebd4"}.bx-receipt:before{content:"\ebd5"}.bx-rectangle:before{content:"\ebd6"}.bx-recycle:before{content:"\ebd7"}.bx-redo:before{content:"\ebd8"}.bx-refresh:before{content:"\ebd9"}.bx-registered:before{content:"\ebda"}.bx-rename:before{content:"\ebdb"}.bx-repeat:before{content:"\ebdc"}.bx-reply:before{content:"\ef5f"}.bx-reply-all:before{content:"\ebde"}.bx-repost:before{content:"\ebdf"}.bx-reset:before{content:"\ebe0"}.bx-restaurant:before{content:"\ebe1"}.bx-revision:before{content:"\ebe2"}.bx-rewind:before{content:"\ebe3"}.bx-rewind-circle:before{content:"\ebe4"}.bx-right-arrow:before{content:"\ebe5"}.bx-right-arrow-alt:before{content:"\ebe6"}.bx-right-arrow-circle:before{content:"\ebe7"}.bx-right-down-arrow-circle:before{content:"\ebe8"}.bx-right-indent:before{content:"\ebe9"}.bx-right-top-arrow-circle:before{content:"\ebea"}.bx-rocket:before{content:"\ebeb"}.bx-rotate-left:before{content:"\ebec"}.bx-rotate-right:before{content:"\ebed"}.bx-rss:before{content:"\ebee"}.bx-ruble:before{content:"\ebef"}.bx-ruler:before{content:"\ebf0"}.bx-run:before{content:"\ebf1"}.bx-rupee:before{content:"\ebf2"}.bx-sad:before{content:"\ebf3"}.bx-save:before{content:"\ebf4"}.bx-scan:before{content:"\ebf5"}.bx-screenshot:before{content:"\ef60"}.bx-search:before{content:"\ebf7"}.bx-search-alt:before{content:"\ebf8"}.bx-search-alt-2:before{content:"\ebf9"}.bx-selection:before{content:"\ebfa"}.bx-select-multiple:before{content:"\ebfb"}.bx-send:before{content:"\ebfc"}.bx-server:before{content:"\ebfd"}.bx-shape-circle:before{content:"\ebfe"}.bx-shape-polygon:before{content:"\ebff"}.bx-shape-square:before{content:"\ec00"}.bx-shape-triangle:before{content:"\ec01"}.bx-share:before{content:"\ec02"}.bx-share-alt:before{content:"\ec03"}.bx-shekel:before{content:"\ec04"}.bx-shield:before{content:"\ec05"}.bx-shield-alt:before{content:"\ec06"}.bx-shield-alt-2:before{content:"\ec07"}.bx-shield-quarter:before{content:"\ec08"}.bx-shield-x:before{content:"\ec09"}.bx-shocked:before{content:"\ec0a"}.bx-shopping-bag:before{content:"\ec0b"}.bx-show:before{content:"\ec0c"}.bx-show-alt:before{content:"\ec0d"}.bx-shuffle:before{content:"\ec0e"}.bx-sidebar:before{content:"\ec0f"}.bx-sitemap:before{content:"\ec10"}.bx-skip-next:before{content:"\ec11"}.bx-skip-next-circle:before{content:"\ec12"}.bx-skip-previous:before{content:"\ec13"}.bx-skip-previous-circle:before{content:"\ec14"}.bx-sleepy:before{content:"\ec15"}.bx-slider:before{content:"\ec16"}.bx-slider-alt:before{content:"\ec17"}.bx-slideshow:before{content:"\ec18"}.bx-smile:before{content:"\ec19"}.bx-sort:before{content:"\ec1a"}.bx-sort-alt-2:before{content:"\ec1b"}.bx-sort-a-z:before{content:"\ec1c"}.bx-sort-down:before{content:"\ec1d"}.bx-sort-up:before{content:"\ec1e"}.bx-sort-z-a:before{content:"\ec1f"}.bx-spa:before{content:"\ec20"}.bx-space-bar:before{content:"\ec21"}.bx-speaker:before{content:"\ec22"}.bx-spray-can:before{content:"\ec23"}.bx-spreadsheet:before{content:"\ec24"}.bx-square:before{content:"\ec25"}.bx-square-rounded:before{content:"\ec26"}.bx-star:before{content:"\ec27"}.bx-station:before{content:"\ec28"}.bx-stats:before{content:"\ec29"}.bx-sticker:before{content:"\ec2a"}.bx-stop:before{content:"\ec2b"}.bx-stop-circle:before{content:"\ec2c"}.bx-stopwatch:before{content:"\ec2d"}.bx-store:before{content:"\ec2e"}.bx-store-alt:before{content:"\ec2f"}.bx-street-view:before{content:"\ec30"}.bx-strikethrough:before{content:"\ec31"}.bx-subdirectory-left:before{content:"\ec32"}.bx-subdirectory-right:before{content:"\ec33"}.bx-sun:before{content:"\ec34"}.bx-support:before{content:"\ec35"}.bx-swim:before{content:"\ec36"}.bx-sync:before{content:"\ec37"}.bx-tab:before{content:"\ec38"}.bx-table:before{content:"\ec39"}.bx-tachometer:before{content:"\ec3a"}.bx-tag:before{content:"\ec3b"}.bx-tag-alt:before{content:"\ec3c"}.bx-target-lock:before{content:"\ec3d"}.bx-task:before{content:"\ec3e"}.bx-task-x:before{content:"\ec3f"}.bx-taxi:before{content:"\ec40"}.bx-tennis-ball:before{content:"\ec41"}.bx-terminal:before{content:"\ec42"}.bx-test-tube:before{content:"\ec43"}.bx-text:before{content:"\ec44"}.bx-time:before{content:"\ec45"}.bx-time-five:before{content:"\ec46"}.bx-timer:before{content:"\ec47"}.bx-tired:before{content:"\ec48"}.bx-toggle-left:before{content:"\ec49"}.bx-toggle-right:before{content:"\ec4a"}.bx-tone:before{content:"\ec4b"}.bx-traffic-cone:before{content:"\ec4c"}.bx-train:before{content:"\ec4d"}.bx-transfer:before{content:"\ec4e"}.bx-transfer-alt:before{content:"\ec4f"}.bx-trash:before{content:"\ec50"}.bx-trash-alt:before{content:"\ec51"}.bx-trending-down:before{content:"\ec52"}.bx-trending-up:before{content:"\ec53"}.bx-trim:before{content:"\ec54"}.bx-trip:before{content:"\ec55"}.bx-trophy:before{content:"\ec56"}.bx-tv:before{content:"\ec57"}.bx-underline:before{content:"\ec58"}.bx-undo:before{content:"\ec59"}.bx-unite:before{content:"\ec5a"}.bx-unlink:before{content:"\ec5b"}.bx-up-arrow:before{content:"\ec5c"}.bx-up-arrow-alt:before{content:"\ec5d"}.bx-up-arrow-circle:before{content:"\ec5e"}.bx-upload:before{content:"\ec5f"}.bx-upside-down:before{content:"\ec60"}.bx-upvote:before{content:"\ec61"}.bx-usb:before{content:"\ec62"}.bx-user:before{content:"\ec63"}.bx-user-check:before{content:"\ec64"}.bx-user-circle:before{content:"\ec65"}.bx-user-minus:before{content:"\ec66"}.bx-user-pin:before{content:"\ec67"}.bx-user-plus:before{content:"\ec68"}.bx-user-voice:before{content:"\ec69"}.bx-user-x:before{content:"\ec6a"}.bx-vector:before{content:"\ec6b"}.bx-vertical-center:before{content:"\ec6c"}.bx-vial:before{content:"\ec6d"}.bx-video:before{content:"\ec6e"}.bx-video-off:before{content:"\ec6f"}.bx-video-plus:before{content:"\ec70"}.bx-video-recording:before{content:"\ec71"}.bx-voicemail:before{content:"\ec72"}.bx-volume:before{content:"\ec73"}.bx-volume-full:before{content:"\ec74"}.bx-volume-low:before{content:"\ec75"}.bx-volume-mute:before{content:"\ec76"}.bx-walk:before{content:"\ec77"}.bx-wallet:before{content:"\ec78"}.bx-wallet-alt:before{content:"\ec79"}.bx-water:before{content:"\ec7a"}.bx-webcam:before{content:"\ec7b"}.bx-wifi:before{content:"\ec7c"}.bx-wifi-0:before{content:"\ec7d"}.bx-wifi-1:before{content:"\ec7e"}.bx-wifi-2:before{content:"\ec7f"}.bx-wifi-off:before{content:"\ec80"}.bx-wind:before{content:"\ec81"}.bx-window:before{content:"\ec82"}.bx-window-alt:before{content:"\ec83"}.bx-window-close:before{content:"\ec84"}.bx-window-open:before{content:"\ec85"}.bx-windows:before{content:"\ec86"}.bx-wine:before{content:"\ec87"}.bx-wink-smile:before{content:"\ec88"}.bx-wink-tongue:before{content:"\ec89"}.bx-won:before{content:"\ec8a"}.bx-world:before{content:"\ec8b"}.bx-wrench:before{content:"\ec8c"}.bx-x:before{content:"\ec8d"}.bx-x-circle:before{content:"\ec8e"}.bx-yen:before{content:"\ec8f"}.bx-zoom-in:before{content:"\ec90"}.bx-zoom-out:before{content:"\ec91"}.bxs-party:before{content:"\ec92"}.bxs-hot:before{content:"\ec93"}.bxs-droplet:before{content:"\ec94"}.bxs-cat:before{content:"\ec95"}.bxs-dog:before{content:"\ec96"}.bxs-injection:before{content:"\ec97"}.bxs-leaf:before{content:"\ec98"}.bxs-add-to-queue:before{content:"\ec99"}.bxs-adjust:before{content:"\ec9a"}.bxs-adjust-alt:before{content:"\ec9b"}.bxs-alarm:before{content:"\ec9c"}.bxs-alarm-add:before{content:"\ec9d"}.bxs-alarm-exclamation:before{content:"\ec9e"}.bxs-alarm-off:before{content:"\ec9f"}.bxs-alarm-snooze:before{content:"\eca0"}.bxs-album:before{content:"\eca1"}.bxs-ambulance:before{content:"\eca2"}.bxs-analyse:before{content:"\eca3"}.bxs-angry:before{content:"\eca4"}.bxs-arch:before{content:"\eca5"}.bxs-archive:before{content:"\eca6"}.bxs-archive-in:before{content:"\eca7"}.bxs-archive-out:before{content:"\eca8"}.bxs-area:before{content:"\eca9"}.bxs-arrow-from-bottom:before{content:"\ecaa"}.bxs-arrow-from-left:before{content:"\ecab"}.bxs-arrow-from-right:before{content:"\ecac"}.bxs-arrow-from-top:before{content:"\ecad"}.bxs-arrow-to-bottom:before{content:"\ecae"}.bxs-arrow-to-left:before{content:"\ecaf"}.bxs-arrow-to-right:before{content:"\ecb0"}.bxs-arrow-to-top:before{content:"\ecb1"}.bxs-award:before{content:"\ecb2"}.bxs-baby-carriage:before{content:"\ecb3"}.bxs-backpack:before{content:"\ecb4"}.bxs-badge:before{content:"\ecb5"}.bxs-badge-check:before{content:"\ecb6"}.bxs-badge-dollar:before{content:"\ecb7"}.bxs-ball:before{content:"\ecb8"}.bxs-band-aid:before{content:"\ecb9"}.bxs-bank:before{content:"\ecba"}.bxs-bar-chart-alt-2:before{content:"\ecbb"}.bxs-bar-chart-square:before{content:"\ecbc"}.bxs-barcode:before{content:"\ecbd"}.bxs-baseball:before{content:"\ecbe"}.bxs-basket:before{content:"\ecbf"}.bxs-basketball:before{content:"\ecc0"}.bxs-bath:before{content:"\ecc1"}.bxs-battery:before{content:"\ecc2"}.bxs-battery-charging:before{content:"\ecc3"}.bxs-battery-full:before{content:"\ecc4"}.bxs-battery-low:before{content:"\ecc5"}.bxs-bed:before{content:"\ecc6"}.bxs-been-here:before{content:"\ecc7"}.bxs-beer:before{content:"\ecc8"}.bxs-bell:before{content:"\ecc9"}.bxs-bell-minus:before{content:"\ecca"}.bxs-bell-off:before{content:"\eccb"}.bxs-bell-plus:before{content:"\eccc"}.bxs-bell-ring:before{content:"\eccd"}.bxs-bible:before{content:"\ecce"}.bxs-binoculars:before{content:"\eccf"}.bxs-blanket:before{content:"\ecd0"}.bxs-bolt:before{content:"\ecd1"}.bxs-bolt-circle:before{content:"\ecd2"}.bxs-bomb:before{content:"\ecd3"}.bxs-bone:before{content:"\ecd4"}.bxs-bong:before{content:"\ecd5"}.bxs-book:before{content:"\ecd6"}.bxs-book-add:before{content:"\ecd7"}.bxs-book-alt:before{content:"\ecd8"}.bxs-book-bookmark:before{content:"\ecd9"}.bxs-book-content:before{content:"\ecda"}.bxs-book-heart:before{content:"\ecdb"}.bxs-bookmark:before{content:"\ecdc"}.bxs-bookmark-alt:before{content:"\ecdd"}.bxs-bookmark-alt-minus:before{content:"\ecde"}.bxs-bookmark-alt-plus:before{content:"\ecdf"}.bxs-bookmark-heart:before{content:"\ece0"}.bxs-bookmark-minus:before{content:"\ece1"}.bxs-bookmark-plus:before{content:"\ece2"}.bxs-bookmarks:before{content:"\ece3"}.bxs-bookmark-star:before{content:"\ece4"}.bxs-book-open:before{content:"\ece5"}.bxs-book-reader:before{content:"\ece6"}.bxs-bot:before{content:"\ece7"}.bxs-bowling-ball:before{content:"\ece8"}.bxs-box:before{content:"\ece9"}.bxs-brain:before{content:"\ecea"}.bxs-briefcase:before{content:"\eceb"}.bxs-briefcase-alt:before{content:"\ecec"}.bxs-briefcase-alt-2:before{content:"\eced"}.bxs-brightness:before{content:"\ecee"}.bxs-brightness-half:before{content:"\ecef"}.bxs-brush:before{content:"\ecf0"}.bxs-brush-alt:before{content:"\ecf1"}.bxs-bug:before{content:"\ecf2"}.bxs-bug-alt:before{content:"\ecf3"}.bxs-building:before{content:"\ecf4"}.bxs-building-house:before{content:"\ecf5"}.bxs-buildings:before{content:"\ecf6"}.bxs-bulb:before{content:"\ecf7"}.bxs-bullseye:before{content:"\ecf8"}.bxs-buoy:before{content:"\ecf9"}.bxs-bus:before{content:"\ecfa"}.bxs-business:before{content:"\ecfb"}.bxs-bus-school:before{content:"\ecfc"}.bxs-cabinet:before{content:"\ecfd"}.bxs-cake:before{content:"\ecfe"}.bxs-calculator:before{content:"\ecff"}.bxs-calendar:before{content:"\ed00"}.bxs-calendar-alt:before{content:"\ed01"}.bxs-calendar-check:before{content:"\ed02"}.bxs-calendar-edit:before{content:"\ed03"}.bxs-calendar-event:before{content:"\ed04"}.bxs-calendar-exclamation:before{content:"\ed05"}.bxs-calendar-heart:before{content:"\ed06"}.bxs-calendar-minus:before{content:"\ed07"}.bxs-calendar-plus:before{content:"\ed08"}.bxs-calendar-star:before{content:"\ed09"}.bxs-calendar-week:before{content:"\ed0a"}.bxs-calendar-x:before{content:"\ed0b"}.bxs-camera:before{content:"\ed0c"}.bxs-camera-home:before{content:"\ed0d"}.bxs-camera-movie:before{content:"\ed0e"}.bxs-camera-off:before{content:"\ed0f"}.bxs-camera-plus:before{content:"\ed10"}.bxs-capsule:before{content:"\ed11"}.bxs-captions:before{content:"\ed12"}.bxs-car:before{content:"\ed13"}.bxs-car-battery:before{content:"\ed14"}.bxs-car-crash:before{content:"\ed15"}.bxs-card:before{content:"\ed16"}.bxs-caret-down-circle:before{content:"\ed17"}.bxs-caret-down-square:before{content:"\ed18"}.bxs-caret-left-circle:before{content:"\ed19"}.bxs-caret-left-square:before{content:"\ed1a"}.bxs-caret-right-circle:before{content:"\ed1b"}.bxs-caret-right-square:before{content:"\ed1c"}.bxs-caret-up-circle:before{content:"\ed1d"}.bxs-caret-up-square:before{content:"\ed1e"}.bxs-car-garage:before{content:"\ed1f"}.bxs-car-mechanic:before{content:"\ed20"}.bxs-carousel:before{content:"\ed21"}.bxs-cart:before{content:"\ed22"}.bxs-cart-add:before{content:"\ed23"}.bxs-cart-alt:before{content:"\ed24"}.bxs-cart-download:before{content:"\ed25"}.bxs-car-wash:before{content:"\ed26"}.bxs-category:before{content:"\ed27"}.bxs-category-alt:before{content:"\ed28"}.bxs-cctv:before{content:"\ed29"}.bxs-certification:before{content:"\ed2a"}.bxs-chalkboard:before{content:"\ed2b"}.bxs-chart:before{content:"\ed2c"}.bxs-chat:before{content:"\ed2d"}.bxs-checkbox:before{content:"\ed2e"}.bxs-checkbox-checked:before{content:"\ed2f"}.bxs-checkbox-minus:before{content:"\ed30"}.bxs-check-circle:before{content:"\ed31"}.bxs-check-shield:before{content:"\ed32"}.bxs-check-square:before{content:"\ed33"}.bxs-chess:before{content:"\ed34"}.bxs-chevron-down:before{content:"\ed35"}.bxs-chevron-down-circle:before{content:"\ed36"}.bxs-chevron-down-square:before{content:"\ed37"}.bxs-chevron-left:before{content:"\ed38"}.bxs-chevron-left-circle:before{content:"\ed39"}.bxs-chevron-left-square:before{content:"\ed3a"}.bxs-chevron-right:before{content:"\ed3b"}.bxs-chevron-right-circle:before{content:"\ed3c"}.bxs-chevron-right-square:before{content:"\ed3d"}.bxs-chevrons-down:before{content:"\ed3e"}.bxs-chevrons-left:before{content:"\ed3f"}.bxs-chevrons-right:before{content:"\ed40"}.bxs-chevrons-up:before{content:"\ed41"}.bxs-chevron-up:before{content:"\ed42"}.bxs-chevron-up-circle:before{content:"\ed43"}.bxs-chevron-up-square:before{content:"\ed44"}.bxs-chip:before{content:"\ed45"}.bxs-church:before{content:"\ed46"}.bxs-circle:before{content:"\ed47"}.bxs-city:before{content:"\ed48"}.bxs-clinic:before{content:"\ed49"}.bxs-cloud:before{content:"\ed4a"}.bxs-cloud-download:before{content:"\ed4b"}.bxs-cloud-lightning:before{content:"\ed4c"}.bxs-cloud-rain:before{content:"\ed4d"}.bxs-cloud-upload:before{content:"\ed4e"}.bxs-coffee:before{content:"\ed4f"}.bxs-coffee-alt:before{content:"\ed50"}.bxs-coffee-togo:before{content:"\ed51"}.bxs-cog:before{content:"\ed52"}.bxs-coin:before{content:"\ed53"}.bxs-coin-stack:before{content:"\ed54"}.bxs-collection:before{content:"\ed55"}.bxs-color-fill:before{content:"\ed56"}.bxs-comment:before{content:"\ed57"}.bxs-comment-add:before{content:"\ed58"}.bxs-comment-check:before{content:"\ed59"}.bxs-comment-detail:before{content:"\ed5a"}.bxs-comment-dots:before{content:"\ed5b"}.bxs-comment-edit:before{content:"\ed5c"}.bxs-comment-error:before{content:"\ed5d"}.bxs-comment-minus:before{content:"\ed5e"}.bxs-comment-x:before{content:"\ed5f"}.bxs-compass:before{content:"\ed60"}.bxs-component:before{content:"\ed61"}.bxs-confused:before{content:"\ed62"}.bxs-contact:before{content:"\ed63"}.bxs-conversation:before{content:"\ed64"}.bxs-cookie:before{content:"\ed65"}.bxs-cool:before{content:"\ed66"}.bxs-copy:before{content:"\ed67"}.bxs-copy-alt:before{content:"\ed68"}.bxs-copyright:before{content:"\ed69"}.bxs-coupon:before{content:"\ed6a"}.bxs-credit-card:before{content:"\ed6b"}.bxs-credit-card-alt:before{content:"\ed6c"}.bxs-credit-card-front:before{content:"\ed6d"}.bxs-crop:before{content:"\ed6e"}.bxs-crown:before{content:"\ed6f"}.bxs-cube:before{content:"\ed70"}.bxs-cube-alt:before{content:"\ed71"}.bxs-cuboid:before{content:"\ed72"}.bxs-customize:before{content:"\ed73"}.bxs-cylinder:before{content:"\ed74"}.bxs-dashboard:before{content:"\ed75"}.bxs-data:before{content:"\ed76"}.bxs-detail:before{content:"\ed77"}.bxs-devices:before{content:"\ed78"}.bxs-diamond:before{content:"\ed79"}.bxs-dice-1:before{content:"\ed7a"}.bxs-dice-2:before{content:"\ed7b"}.bxs-dice-3:before{content:"\ed7c"}.bxs-dice-4:before{content:"\ed7d"}.bxs-dice-5:before{content:"\ed7e"}.bxs-dice-6:before{content:"\ed7f"}.bxs-direction-left:before{content:"\ed80"}.bxs-direction-right:before{content:"\ed81"}.bxs-directions:before{content:"\ed82"}.bxs-disc:before{content:"\ed83"}.bxs-discount:before{content:"\ed84"}.bxs-dish:before{content:"\ed85"}.bxs-dislike:before{content:"\ed86"}.bxs-dizzy:before{content:"\ed87"}.bxs-dock-bottom:before{content:"\ed88"}.bxs-dock-left:before{content:"\ed89"}.bxs-dock-right:before{content:"\ed8a"}.bxs-dock-top:before{content:"\ed8b"}.bxs-dollar-circle:before{content:"\ed8c"}.bxs-donate-blood:before{content:"\ed8d"}.bxs-donate-heart:before{content:"\ed8e"}.bxs-door-open:before{content:"\ed8f"}.bxs-doughnut-chart:before{content:"\ed90"}.bxs-down-arrow:before{content:"\ed91"}.bxs-down-arrow-alt:before{content:"\ed92"}.bxs-down-arrow-circle:before{content:"\ed93"}.bxs-down-arrow-square:before{content:"\ed94"}.bxs-download:before{content:"\ed95"}.bxs-downvote:before{content:"\ed96"}.bxs-drink:before{content:"\ed97"}.bxs-droplet-half:before{content:"\ed98"}.bxs-dryer:before{content:"\ed99"}.bxs-duplicate:before{content:"\ed9a"}.bxs-edit:before{content:"\ed9b"}.bxs-edit-alt:before{content:"\ed9c"}.bxs-edit-location:before{content:"\ed9d"}.bxs-eject:before{content:"\ed9e"}.bxs-envelope:before{content:"\ed9f"}.bxs-envelope-open:before{content:"\eda0"}.bxs-eraser:before{content:"\eda1"}.bxs-error:before{content:"\eda2"}.bxs-error-alt:before{content:"\eda3"}.bxs-error-circle:before{content:"\eda4"}.bxs-ev-station:before{content:"\eda5"}.bxs-exit:before{content:"\eda6"}.bxs-extension:before{content:"\eda7"}.bxs-eyedropper:before{content:"\eda8"}.bxs-face:before{content:"\eda9"}.bxs-face-mask:before{content:"\edaa"}.bxs-factory:before{content:"\edab"}.bxs-fast-forward-circle:before{content:"\edac"}.bxs-file:before{content:"\edad"}.bxs-file-archive:before{content:"\edae"}.bxs-file-blank:before{content:"\edaf"}.bxs-file-css:before{content:"\edb0"}.bxs-file-doc:before{content:"\edb1"}.bxs-file-export:before{content:"\edb2"}.bxs-file-find:before{content:"\edb3"}.bxs-file-gif:before{content:"\edb4"}.bxs-file-html:before{content:"\edb5"}.bxs-file-image:before{content:"\edb6"}.bxs-file-import:before{content:"\edb7"}.bxs-file-jpg:before{content:"\edb8"}.bxs-file-js:before{content:"\edb9"}.bxs-file-json:before{content:"\edba"}.bxs-file-md:before{content:"\edbb"}.bxs-file-pdf:before{content:"\edbc"}.bxs-file-plus:before{content:"\edbd"}.bxs-file-png:before{content:"\edbe"}.bxs-file-txt:before{content:"\edbf"}.bxs-film:before{content:"\edc0"}.bxs-filter-alt:before{content:"\edc1"}.bxs-first-aid:before{content:"\edc2"}.bxs-flag:before{content:"\edc3"}.bxs-flag-alt:before{content:"\edc4"}.bxs-flag-checkered:before{content:"\edc5"}.bxs-flame:before{content:"\edc6"}.bxs-flask:before{content:"\edc7"}.bxs-florist:before{content:"\edc8"}.bxs-folder:before{content:"\edc9"}.bxs-folder-minus:before{content:"\edca"}.bxs-folder-open:before{content:"\edcb"}.bxs-folder-plus:before{content:"\edcc"}.bxs-food-menu:before{content:"\edcd"}.bxs-fridge:before{content:"\edce"}.bxs-game:before{content:"\edcf"}.bxs-gas-pump:before{content:"\edd0"}.bxs-ghost:before{content:"\edd1"}.bxs-gift:before{content:"\edd2"}.bxs-graduation:before{content:"\edd3"}.bxs-grid:before{content:"\edd4"}.bxs-grid-alt:before{content:"\edd5"}.bxs-group:before{content:"\edd6"}.bxs-guitar-amp:before{content:"\edd7"}.bxs-hand:before{content:"\edd8"}.bxs-hand-down:before{content:"\edd9"}.bxs-hand-left:before{content:"\edda"}.bxs-hand-right:before{content:"\eddb"}.bxs-hand-up:before{content:"\eddc"}.bxs-happy:before{content:"\eddd"}.bxs-happy-alt:before{content:"\edde"}.bxs-happy-beaming:before{content:"\eddf"}.bxs-happy-heart-eyes:before{content:"\ede0"}.bxs-hdd:before{content:"\ede1"}.bxs-heart:before{content:"\ede2"}.bxs-heart-circle:before{content:"\ede3"}.bxs-heart-square:before{content:"\ede4"}.bxs-help-circle:before{content:"\ede5"}.bxs-hide:before{content:"\ede6"}.bxs-home:before{content:"\ede7"}.bxs-home-circle:before{content:"\ede8"}.bxs-home-heart:before{content:"\ede9"}.bxs-home-smile:before{content:"\edea"}.bxs-hotel:before{content:"\edeb"}.bxs-hourglass:before{content:"\edec"}.bxs-hourglass-bottom:before{content:"\eded"}.bxs-hourglass-top:before{content:"\edee"}.bxs-id-card:before{content:"\edef"}.bxs-image:before{content:"\edf0"}.bxs-image-add:before{content:"\edf1"}.bxs-image-alt:before{content:"\edf2"}.bxs-inbox:before{content:"\edf3"}.bxs-info-circle:before{content:"\edf4"}.bxs-info-square:before{content:"\edf5"}.bxs-institution:before{content:"\edf6"}.bxs-joystick:before{content:"\edf7"}.bxs-joystick-alt:before{content:"\edf8"}.bxs-joystick-button:before{content:"\edf9"}.bxs-key:before{content:"\edfa"}.bxs-keyboard:before{content:"\edfb"}.bxs-label:before{content:"\edfc"}.bxs-landmark:before{content:"\edfd"}.bxs-landscape:before{content:"\edfe"}.bxs-laugh:before{content:"\edff"}.bxs-layer:before{content:"\ee00"}.bxs-layer-minus:before{content:"\ee01"}.bxs-layer-plus:before{content:"\ee02"}.bxs-layout:before{content:"\ee03"}.bxs-left-arrow:before{content:"\ee04"}.bxs-left-arrow-alt:before{content:"\ee05"}.bxs-left-arrow-circle:before{content:"\ee06"}.bxs-left-arrow-square:before{content:"\ee07"}.bxs-left-down-arrow-circle:before{content:"\ee08"}.bxs-left-top-arrow-circle:before{content:"\ee09"}.bxs-like:before{content:"\ee0a"}.bxs-location-plus:before{content:"\ee0b"}.bxs-lock:before{content:"\ee0c"}.bxs-lock-alt:before{content:"\ee0d"}.bxs-lock-open:before{content:"\ee0e"}.bxs-lock-open-alt:before{content:"\ee0f"}.bxs-log-in:before{content:"\ee10"}.bxs-log-in-circle:before{content:"\ee11"}.bxs-log-out:before{content:"\ee12"}.bxs-log-out-circle:before{content:"\ee13"}.bxs-low-vision:before{content:"\ee14"}.bxs-magic-wand:before{content:"\ee15"}.bxs-magnet:before{content:"\ee16"}.bxs-map:before{content:"\ee17"}.bxs-map-alt:before{content:"\ee18"}.bxs-map-pin:before{content:"\ee19"}.bxs-mask:before{content:"\ee1a"}.bxs-medal:before{content:"\ee1b"}.bxs-megaphone:before{content:"\ee1c"}.bxs-meh:before{content:"\ee1d"}.bxs-meh-alt:before{content:"\ee1e"}.bxs-meh-blank:before{content:"\ee1f"}.bxs-memory-card:before{content:"\ee20"}.bxs-message:before{content:"\ee21"}.bxs-message-add:before{content:"\ee22"}.bxs-message-alt:before{content:"\ee23"}.bxs-message-alt-add:before{content:"\ee24"}.bxs-message-alt-check:before{content:"\ee25"}.bxs-message-alt-detail:before{content:"\ee26"}.bxs-message-alt-dots:before{content:"\ee27"}.bxs-message-alt-edit:before{content:"\ee28"}.bxs-message-alt-error:before{content:"\ee29"}.bxs-message-alt-minus:before{content:"\ee2a"}.bxs-message-alt-x:before{content:"\ee2b"}.bxs-message-check:before{content:"\ee2c"}.bxs-message-detail:before{content:"\ee2d"}.bxs-message-dots:before{content:"\ee2e"}.bxs-message-edit:before{content:"\ee2f"}.bxs-message-error:before{content:"\ee30"}.bxs-message-minus:before{content:"\ee31"}.bxs-message-rounded:before{content:"\ee32"}.bxs-message-rounded-add:before{content:"\ee33"}.bxs-message-rounded-check:before{content:"\ee34"}.bxs-message-rounded-detail:before{content:"\ee35"}.bxs-message-rounded-dots:before{content:"\ee36"}.bxs-message-rounded-edit:before{content:"\ee37"}.bxs-message-rounded-error:before{content:"\ee38"}.bxs-message-rounded-minus:before{content:"\ee39"}.bxs-message-rounded-x:before{content:"\ee3a"}.bxs-message-square:before{content:"\ee3b"}.bxs-message-square-add:before{content:"\ee3c"}.bxs-message-square-check:before{content:"\ee3d"}.bxs-message-square-detail:before{content:"\ee3e"}.bxs-message-square-dots:before{content:"\ee3f"}.bxs-message-square-edit:before{content:"\ee40"}.bxs-message-square-error:before{content:"\ee41"}.bxs-message-square-minus:before{content:"\ee42"}.bxs-message-square-x:before{content:"\ee43"}.bxs-message-x:before{content:"\ee44"}.bxs-meteor:before{content:"\ee45"}.bxs-microchip:before{content:"\ee46"}.bxs-microphone:before{content:"\ee47"}.bxs-microphone-alt:before{content:"\ee48"}.bxs-microphone-off:before{content:"\ee49"}.bxs-minus-circle:before{content:"\ee4a"}.bxs-minus-square:before{content:"\ee4b"}.bxs-mobile:before{content:"\ee4c"}.bxs-mobile-vibration:before{content:"\ee4d"}.bxs-moon:before{content:"\ee4e"}.bxs-mouse:before{content:"\ee4f"}.bxs-mouse-alt:before{content:"\ee50"}.bxs-movie:before{content:"\ee51"}.bxs-movie-play:before{content:"\ee52"}.bxs-music:before{content:"\ee53"}.bxs-navigation:before{content:"\ee54"}.bxs-network-chart:before{content:"\ee55"}.bxs-news:before{content:"\ee56"}.bxs-no-entry:before{content:"\ee57"}.bxs-note:before{content:"\ee58"}.bxs-notepad:before{content:"\ee59"}.bxs-notification:before{content:"\ee5a"}.bxs-notification-off:before{content:"\ee5b"}.bxs-offer:before{content:"\ee5c"}.bxs-package:before{content:"\ee5d"}.bxs-paint:before{content:"\ee5e"}.bxs-paint-roll:before{content:"\ee5f"}.bxs-palette:before{content:"\ee60"}.bxs-paper-plane:before{content:"\ee61"}.bxs-parking:before{content:"\ee62"}.bxs-paste:before{content:"\ee63"}.bxs-pen:before{content:"\ee64"}.bxs-pencil:before{content:"\ee65"}.bxs-phone:before{content:"\ee66"}.bxs-phone-call:before{content:"\ee67"}.bxs-phone-incoming:before{content:"\ee68"}.bxs-phone-off:before{content:"\ee69"}.bxs-phone-outgoing:before{content:"\ee6a"}.bxs-photo-album:before{content:"\ee6b"}.bxs-piano:before{content:"\ee6c"}.bxs-pie-chart:before{content:"\ee6d"}.bxs-pie-chart-alt:before{content:"\ee6e"}.bxs-pie-chart-alt-2:before{content:"\ee6f"}.bxs-pin:before{content:"\ee70"}.bxs-pizza:before{content:"\ee71"}.bxs-plane:before{content:"\ee72"}.bxs-plane-alt:before{content:"\ee73"}.bxs-plane-land:before{content:"\ee74"}.bxs-planet:before{content:"\ee75"}.bxs-plane-take-off:before{content:"\ee76"}.bxs-playlist:before{content:"\ee77"}.bxs-plug:before{content:"\ee78"}.bxs-plus-circle:before{content:"\ee79"}.bxs-plus-square:before{content:"\ee7a"}.bxs-pointer:before{content:"\ee7b"}.bxs-polygon:before{content:"\ee7c"}.bxs-printer:before{content:"\ee7d"}.bxs-purchase-tag:before{content:"\ee7e"}.bxs-purchase-tag-alt:before{content:"\ee7f"}.bxs-pyramid:before{content:"\ee80"}.bxs-quote-alt-left:before{content:"\ee81"}.bxs-quote-alt-right:before{content:"\ee82"}.bxs-quote-left:before{content:"\ee83"}.bxs-quote-right:before{content:"\ee84"}.bxs-quote-single-left:before{content:"\ee85"}.bxs-quote-single-right:before{content:"\ee86"}.bxs-radiation:before{content:"\ee87"}.bxs-radio:before{content:"\ee88"}.bxs-receipt:before{content:"\ee89"}.bxs-rectangle:before{content:"\ee8a"}.bxs-registered:before{content:"\ee8b"}.bxs-rename:before{content:"\ee8c"}.bxs-report:before{content:"\ee8d"}.bxs-rewind-circle:before{content:"\ee8e"}.bxs-right-arrow:before{content:"\ee8f"}.bxs-right-arrow-alt:before{content:"\ee90"}.bxs-right-arrow-circle:before{content:"\ee91"}.bxs-right-arrow-square:before{content:"\ee92"}.bxs-right-down-arrow-circle:before{content:"\ee93"}.bxs-right-top-arrow-circle:before{content:"\ee94"}.bxs-rocket:before{content:"\ee95"}.bxs-ruler:before{content:"\ee96"}.bxs-sad:before{content:"\ee97"}.bxs-save:before{content:"\ee98"}.bxs-school:before{content:"\ee99"}.bxs-search:before{content:"\ee9a"}.bxs-search-alt-2:before{content:"\ee9b"}.bxs-select-multiple:before{content:"\ee9c"}.bxs-send:before{content:"\ee9d"}.bxs-server:before{content:"\ee9e"}.bxs-shapes:before{content:"\ee9f"}.bxs-share:before{content:"\eea0"}.bxs-share-alt:before{content:"\eea1"}.bxs-shield:before{content:"\eea2"}.bxs-shield-alt-2:before{content:"\eea3"}.bxs-shield-x:before{content:"\eea4"}.bxs-ship:before{content:"\eea5"}.bxs-shocked:before{content:"\eea6"}.bxs-shopping-bag:before{content:"\eea7"}.bxs-shopping-bag-alt:before{content:"\eea8"}.bxs-shopping-bags:before{content:"\eea9"}.bxs-show:before{content:"\eeaa"}.bxs-skip-next-circle:before{content:"\eeab"}.bxs-skip-previous-circle:before{content:"\eeac"}.bxs-skull:before{content:"\eead"}.bxs-sleepy:before{content:"\eeae"}.bxs-slideshow:before{content:"\eeaf"}.bxs-smile:before{content:"\eeb0"}.bxs-sort-alt:before{content:"\eeb1"}.bxs-spa:before{content:"\eeb2"}.bxs-speaker:before{content:"\eeb3"}.bxs-spray-can:before{content:"\eeb4"}.bxs-spreadsheet:before{content:"\eeb5"}.bxs-square:before{content:"\eeb6"}.bxs-square-rounded:before{content:"\eeb7"}.bxs-star:before{content:"\eeb8"}.bxs-star-half:before{content:"\eeb9"}.bxs-sticker:before{content:"\eeba"}.bxs-stopwatch:before{content:"\eebb"}.bxs-store:before{content:"\eebc"}.bxs-store-alt:before{content:"\eebd"}.bxs-sun:before{content:"\eebe"}.bxs-tachometer:before{content:"\eebf"}.bxs-tag:before{content:"\eec0"}.bxs-tag-alt:before{content:"\eec1"}.bxs-tag-x:before{content:"\eec2"}.bxs-taxi:before{content:"\eec3"}.bxs-tennis-ball:before{content:"\eec4"}.bxs-terminal:before{content:"\eec5"}.bxs-thermometer:before{content:"\eec6"}.bxs-time:before{content:"\eec7"}.bxs-time-five:before{content:"\eec8"}.bxs-timer:before{content:"\eec9"}.bxs-tired:before{content:"\eeca"}.bxs-toggle-left:before{content:"\eecb"}.bxs-toggle-right:before{content:"\eecc"}.bxs-tone:before{content:"\eecd"}.bxs-torch:before{content:"\eece"}.bxs-to-top:before{content:"\eecf"}.bxs-traffic:before{content:"\eed0"}.bxs-traffic-barrier:before{content:"\eed1"}.bxs-traffic-cone:before{content:"\eed2"}.bxs-train:before{content:"\eed3"}.bxs-trash:before{content:"\eed4"}.bxs-trash-alt:before{content:"\eed5"}.bxs-tree:before{content:"\eed6"}.bxs-trophy:before{content:"\eed7"}.bxs-truck:before{content:"\eed8"}.bxs-t-shirt:before{content:"\eed9"}.bxs-tv:before{content:"\eeda"}.bxs-up-arrow:before{content:"\eedb"}.bxs-up-arrow-alt:before{content:"\eedc"}.bxs-up-arrow-circle:before{content:"\eedd"}.bxs-up-arrow-square:before{content:"\eede"}.bxs-upside-down:before{content:"\eedf"}.bxs-upvote:before{content:"\eee0"}.bxs-user:before{content:"\eee1"}.bxs-user-account:before{content:"\eee2"}.bxs-user-badge:before{content:"\eee3"}.bxs-user-check:before{content:"\eee4"}.bxs-user-circle:before{content:"\eee5"}.bxs-user-detail:before{content:"\eee6"}.bxs-user-minus:before{content:"\eee7"}.bxs-user-pin:before{content:"\eee8"}.bxs-user-plus:before{content:"\eee9"}.bxs-user-rectangle:before{content:"\eeea"}.bxs-user-voice:before{content:"\eeeb"}.bxs-user-x:before{content:"\eeec"}.bxs-vector:before{content:"\eeed"}.bxs-vial:before{content:"\eeee"}.bxs-video:before{content:"\eeef"}.bxs-video-off:before{content:"\eef0"}.bxs-video-plus:before{content:"\eef1"}.bxs-video-recording:before{content:"\eef2"}.bxs-videos:before{content:"\eef3"}.bxs-virus:before{content:"\eef4"}.bxs-virus-block:before{content:"\eef5"}.bxs-volume:before{content:"\eef6"}.bxs-volume-full:before{content:"\eef7"}.bxs-volume-low:before{content:"\eef8"}.bxs-volume-mute:before{content:"\eef9"}.bxs-wallet:before{content:"\eefa"}.bxs-wallet-alt:before{content:"\eefb"}.bxs-washer:before{content:"\eefc"}.bxs-watch:before{content:"\eefd"}.bxs-watch-alt:before{content:"\eefe"}.bxs-webcam:before{content:"\eeff"}.bxs-widget:before{content:"\ef00"}.bxs-window-alt:before{content:"\ef01"}.bxs-wine:before{content:"\ef02"}.bxs-wink-smile:before{content:"\ef03"}.bxs-wink-tongue:before{content:"\ef04"}.bxs-wrench:before{content:"\ef05"}.bxs-x-circle:before{content:"\ef06"}.bxs-x-square:before{content:"\ef07"}.bxs-yin-yang:before{content:"\ef08"}.bxs-zap:before{content:"\ef09"}.bxs-zoom-in:before{content:"\ef0a"}.bxs-zoom-out:before{content:"\ef0b"}* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12.5px;
font-family: "Nunito", sans-serif;
}
:root {
/* Primary Brand Colors */
--color-home-bg: #f5f5f2;
--color-primary: #ffca40;
--color-primary-lighter: #ffe599;
--color-primary-lighter-50: #fff2cb;
--color-primary-darker: #cc9c2d;
--color-primary-hover: #f5c036;
--color-primary-active: #d9a52c;
--color-primary-disabled: #e6d8a8;
--color-primary-text-disabled: #8c8c8c;
/* Secondary / Accent Colors */
--color-secondary: #c8161d;
--color-secondary-light: #e03a3f;
--color-secondary-dark: #9f1217;
--color-secondary-hover: #b8141b;
--color-secondary-active: #8f1115;
--color-secondary-disabled: #e8b4b6;
--color-secondary-text-disabled: #7a7a7a;
/* Status Colors */
--color-success: #1fc16b;
--color-success-bg: #c2f7db;
--color-success-bg-50: #e1fbed;
--color-warning: #f59e0b;
--color-warning-bg: #fef9c3;
--color-error-bg: #ffe7e8;
--color-error: #fb3748;
--color-info-bg: #d9eaff;
--color-info: #0054a6;
--discard-bg-color: #fce9eb;
--color-active: #2563eb;
/* WhatsApp */
--color-whatsapp: #25d366;
--color-whatsapp-darker: #17d35c;
--color-whatsapp-lighter: #dcf8c6;
/* Grayscale Palette */
--color-white: #ffffff;
--color-black: #000000;
--text-color: #3d3d3d;
--color-gray-10: #f5f5f5;
--color-gray-20: #f8f8f8;
--color-gray-50: #f9fafb;
--color-gray-100: #f8f8f7;
--color-gray-150: #eae8e8;
--color-gray-200: #e2e2e2;
--color-gray-300: #d1d1d1;
--color-gray-400: #b5b5b5;
--color-gray-500: #9a9a9a;
--color-gray-600: #7d7d7d;
--color-gray-700: #626262;
--color-gray-800: #4a4a4a;
--color-gray-900: #3333;
--view-heading-color: #5d5d5d;
--color-color-1000: rgba(138, 137, 137, 0.2);
/* Light UI Border Gray */
--color-gray-250: #cfd4da;
--color-gray-75: #f6f8fa;
--bg-active: #f5f8fc;
/* Background & Border */
--bg-body: var(--color-gray-50);
--bg-card: var(--color-white);
--border-color: var(--color-gray-200);
--bg-page: #f5f7fb;
/* Text Colors */
--text-primary: var(--color-gray-900);
--text-secondary: var(--color-gray-600);
--text-muted: var(--color-gray-500);
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}
/* Article */
.article-drop {
font-weight: 600;
}
.article-drop {
position: relative;
}
.article-drop::after {
display: none;
}
.inbox-left {
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
z-index: 100;
padding-right: 15px;
}
.title-text {
font-size: 14px !important;
/* padding: 1px 15px; */
margin-bottom: 5px;
text-align: left;
font-weight: 500;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
.article-drop:hover {
color: var(--color-secondary-hover) !important;
background-color: var(--color-gray-150) !important;
border: none !important;
}
/* .article-drop svg {
margin-left: auto;
} */
.right-actions svg {
margin-left: auto;
}
.article-drop1 {
padding-left: 10px !important;
}
.right-actions {
display: flex;
align-items: center;
gap: 8px;
}
.hover-actions {
display: flex;
gap: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease;
}
.article-drop:hover .hover-actions,
.hover-actions:hover {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Icon styles */
.hover-actions svg {
cursor: pointer;
font-size: 13px;
}
/* Article content text */
.article-content {
font-size: 14px !important;
/* margin-top: -8px; */
}
* Article css */
/* ReactQuill border radius */
/* Match toolbar corners */
.ql-toolbar {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/* Match editor bottom corners */
.ql-container.ql-snow {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
/* Help desk sidebar */
.side-head{
height: calc(100vh - 120px);
}
.help-sidebars {
position: sticky;
top: 0;
height: 100%;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
/* Mobile fix */
@media (max-width: 767px) {
.help-sidebar {
position: relative;
max-height: none;
}
}
.help-sidebar::-webkit-scrollbar {
width: 6px;
}
/*
.help-sidebar::-webkit-scrollbar-thumb {
background-color: var( --color-gray-250);
border-radius: 10px;
}
.help-sidebar::-webkit-scrollbar-track {
background: transparent;
} */
.inbox-layout {
height: 100%;
}
.hover-row:hover {
background-color: var(--color-gray-75);
}
.level-1 {
font-weight: 600;
}
.level-3,
.article-content {
min-height: 36px;
height: 36px;
display: flex;
align-items: center;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.level-2,
.level-3,
.article-content {
position: relative;
border-left: 3px solid transparent;
transition: background-color 0.2s ease, border-left 0.2s ease;
margin-top: 4px;
}
/* new */
.level-1,
.level-2,
.level-3,
.article-content {
padding-left: 25px;
border-left: none !important;
border-right: none !important;
}
.level-active {
background-color: var(--bg-active);
border-radius: 4px;
}
.article-drop {
padding-top: 6px;
padding-bottom: 6px;
}
.help-row {
height: 36px; /* choose 36 or 40 */
/* min-height: 32px; */
display: flex;
align-items: center;
padding: 0 8px;
overflow: hidden;
}
.right-actions,
.hover-actions {
height: 100%;
display: flex;
align-items: center;
}
.help-page {
background-color: var(--bg-page); /* light grey */
min-height: 100vh;
}
.demo-btndel{
background-color: var( --color-secondary-light) !important;
margin-bottom: 0px !important;
color: var(--color-white) !important;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12.5px;
font-family: "Nunito", sans-serif;
}
:root {
/* Primary Brand Colors */
--color-home-bg: #f5f5f2;
--color-primary: #ffca40;
--color-primary-lighter: #ffe599;
--color-primary-lighter-50: #fff2cb;
--color-primary-lighter-10: rgba(255, 248, 216, 0.76);
--color-primary-darker: #cc9c2d;
--color-primary-hover: #f5c036;
--color-primary-active: #d9a52c;
--color-primary-disabled: #e6d8a8;
--color-primary-text-disabled: #8c8c8c;
/* Secondary / Accent Colors */
--color-secondary: #c8161d;
--color-secondary-light: #e03a3f;
--color-secondary-dark: #9f1217;
--color-secondary-hover: #b8141b;
--color-secondary-active: #8f1115;
--color-secondary-disabled: #e8b4b6;
--color-secondary-text-disabled: #7a7a7a;
/* Status Colors */
--color-success: #1fc16b;
--color-success-bg: #c2f7db;
--color-success-bg-50: #e1fbed;
--color-warning: #f59e0b;
--color-warning-bg: #fef9c3;
--color-error-bg: #ffe7e8;
--color-error: #fb3748;
--color-info-bg: #d9eaff;
--color-info: #0054a6;
--discard-bg-color: #fce9eb;
/* WhatsApp */
--color-whatsapp: #25d366;
--color-whatsapp-darker: #17d35c;
--color-whatsapp-lighter: #dcf8c6;
/* Grayscale Palette */
--color-white: #ffffff;
--color-black: #000000;
--text-color: #3d3d3d;
--color-gray-10: #f5f5f5;
--color-gray-20: #f8f8f8;
--color-gray-50: #f9fafb;
--color-gray-100: #f8f8f7;
--color-gray-150: #eae8e8;
--color-gray-200: #e2e2e2;
--color-gray-300: #d1d1d1;
--color-gray-400: #b5b5b5;
--color-gray-500: #9a9a9a;
--color-gray-600: #7d7d7d;
--color-gray-700: #626262;
--color-gray-800: #4a4a4a;
--color-gray-900: #3333;
--view-heading-color: #5d5d5d;
--color-color-1000: rgba(138, 137, 137, 0.2);
/* Background & Border */
--bg-body: var(--color-gray-50);
--bg-card: var(--color-white);
--border-color: var(--color-gray-200);
/* Text Colors */
--text-primary: var(--color-gray-900);
--text-secondary: var(--color-gray-600);
--text-muted: var(--color-gray-500);
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* card overlay */
--preview: rgba(15, 15, 15, 0.55);
--option-color: #6c757d;
--option-bg: #f8f9fa;
--select-option: #e9ecef;
--select-color: #212529;
}
.sprinkle-wrapper {
position: relative;
width: 140px;
height: 140px;
}
.check-circle {
width: 120px;
height: 120px;
border-radius: 50%;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
/* Sprinkle dots */
.sprinkle {
position: absolute;
width: 8px;
height: 8px;
background: #ffffff;
border-radius: 50%;
top: 50%;
left: 50%;
transform-origin: center;
animation: sprinkle-burst 1.2s ease-out infinite;
}
/* Position each sprinkle in a circle */
.sprinkle:nth-child(1) { transform: rotate(0deg) translate(60px); }
.sprinkle:nth-child(2) { transform: rotate(30deg) translate(60px); }
.sprinkle:nth-child(3) { transform: rotate(60deg) translate(60px); }
.sprinkle:nth-child(4) { transform: rotate(90deg) translate(60px); }
.sprinkle:nth-child(5) { transform: rotate(120deg) translate(60px); }
.sprinkle:nth-child(6) { transform: rotate(150deg) translate(60px); }
.sprinkle:nth-child(7) { transform: rotate(180deg) translate(60px); }
.sprinkle:nth-child(8) { transform: rotate(210deg) translate(60px); }
.sprinkle:nth-child(9) { transform: rotate(240deg) translate(60px); }
.sprinkle:nth-child(10) { transform: rotate(270deg) translate(60px); }
.sprinkle:nth-child(11) { transform: rotate(300deg) translate(60px); }
.sprinkle:nth-child(12) { transform: rotate(330deg) translate(60px); }
/* Animation */
@keyframes sprinkle-burst {
0% {
opacity: 0;
transform: scale(0.3) translate(0);
}
40% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.2) translate(0);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12.5px;
font-family: "Nunito", sans-serif;
}
:root {
/* Primary Brand Colors */
--color-home-bg: #f5f5f2;
--color-primary: #ffca40;
--color-primary-lighter: #ffe599;
--color-primary-lighter-50: #fff2cb;
--color-primary-darker: #cc9c2d;
--color-primary-hover: #f5c036;
--color-primary-active: #d9a52c;
--color-primary-disabled: #e6d8a8;
--color-primary-text-disabled: #8c8c8c;
/* Secondary / Accent Colors */
--color-secondary: #c8161d;
--color-secondary-light: #e03a3f;
--color-secondary-dark: #9f1217;
--color-secondary-hover: #b8141b;
--color-secondary-active: #8f1115;
--color-secondary-disabled: #e8b4b6;
--color-secondary-text-disabled: #7a7a7a;
/* Status Colors */
--color-success: #1fc16b;
--color-success-bg: #c2f7db;
--color-success-bg-50: #e1fbed;
--color-warning: #f59e0b;
--color-warning-bg: #fef9c3;
--color-error-bg: #ffe7e8;
--color-error: #fb3748;
--color-info-bg: #d9eaff;
--color-info: #0054a6;
--discard-bg-color: #fce9eb;
/* WhatsApp */
--color-whatsapp: #25d366;
--color-whatsapp-darker: #17d35c;
--color-whatsapp-lighter: #dcf8c6;
/* Grayscale Palette */
--color-white: #ffffff;
--color-black: #000000;
--text-color: #3d3d3d;
--color-gray-10: #f5f5f5;
--color-gray-20: #f8f8f8;
--color-gray-50: #f9fafb;
--color-gray-100: #f8f8f7;
--color-gray-150: #eae8e8;
--color-gray-200: #e2e2e2;
--color-gray-300: #d1d1d1;
--color-gray-400: #b5b5b5;
--color-gray-500: #9a9a9a;
--color-gray-600: #7d7d7d;
--color-gray-700: #626262;
--color-gray-800: #4a4a4a;
--color-gray-900: #3333;
--view-heading-color: #5d5d5d;
--color-color-1000: rgba(138, 137, 137, 0.2);
/* ---------------- TEXT ---------------- */
--text-primary: var(--color-gray-900);
--text-secondary: var(--color-gray-600);
--text-muted: var(--color-gray-500);
--view-heading-color: #5d5d5d;
/* ---------------- BORDERS & BG ---------------- */
--border-default: var(--color-gray-200);
--border-hover: var(--color-gray-300);
--bg-body: var(--color-gray-50);
--bg-card: var(--color-white);
--bg-hover: #f8f9fc;
--bg-icon-hover: #f5f5f5;
/* ---------------- SCROLLBAR ---------------- */
--scrollbar-thumb: #c1c1c1;
--scrollbar-track: #f1f1f1;
/* ---------------- SHADOWS ---------------- */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* ---------------- ICON PICKER ---------------- */
--icon-border: var(--color-gray-300);
--icon-text: var(--color-gray-600);
--icon-selected-border: var(--color-primary);
}
.color-preview-circle {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid var(--color-secondary);
}
.card {
border-radius: 12px;
}
/* ---------------- TABLE ---------------- */
.modern-table th {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.modern-table td {
font-size: 14px;
padding: 12px 10px;
}
.modern-table tr:hover {
background-color: var(--bg-hover) !important;
}
.modern-table .statusTag {
padding: 4px 10px;
font-size: 12px;
border-radius: 20px;
}
.status-success {
background-color: var(--color-success-bg);
color: var(--color-success-text);
}
.table-hover tbody tr {
transition: background-color 0.15s ease-in-out;
}
/* -- ICON PICKER -- */
.icons-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: 12px;
max-height: 420px;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.icons-grid::-webkit-scrollbar {
width: 6px;
}
.icons-grid::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
.icons-grid::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 6px;
}
.icon-item {
cursor: pointer;
border: 1px solid var(--icon-border);
padding: 10px 6px;
text-align: center;
background-color: var(--color-white);
}
.icon-item:hover {
background-color: var(--bg-icon-hover);
}
.icon-name {
font-size: 10px;
margin-top: 4px;
color: var(--icon-text);
word-break: break-all;
}
.doc-dropdown .dropdown-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 6px 10px;
background: transparent;
border: none;
cursor: pointer;
font-size: 13px;
}
.doc-dropdown .dropdown-btn svg {
flex-shrink: 0;
}
.default-radio {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--color-primary);
cursor: pointer;
position: relative;
outline: none;
background-color: transparent;
}
.default-radio:checked::before {
content: "";
width: 10px;
height: 10px;
background-color: var(--color-primary);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12.5px;
font-family: "Nunito", sans-serif;
}
:root {
/* Primary Brand Colors */
--color-home-bg: #f5f5f2;
--color-primary: #ffca40;
--color-primary-lighter: #ffe599;
--color-primary-lighter-50: #fff2cb;
--color-primary-darker: #cc9c2d;
--color-primary-hover: #f5c036;
--color-primary-active: #d9a52c;
--color-primary-disabled: #e6d8a8;
--color-primary-text-disabled: #8c8c8c;
--card-blue1: linear-gradient(135deg, #eff7f4 20%, #f7f2f8 50%, #fde8f1 100%);
/* Secondary / Accent Colors */
--color-secondary: #c8161d;
--color-secondary-light: #e03a3f;
--color-secondary-dark: #9f1217;
--color-secondary-hover: #b8141b;
--color-secondary-active: #8f1115;
--color-secondary-disabled: #e8b4b6;
--color-secondary-text-disabled: #7a7a7a;
/* Status Colors */
--color-success: #1fc16b;
--color-success-bg: #c2f7db;
--color-success-bg-50: #e1fbed;
--color-warning: #f59e0b;
--color-warning-bg: #fef9c3;
--color-error-bg: #ffe7e8;
--color-error: #fb3748;
--color-info-bg: #d9eaff;
--color-info: #0054a6;
--discard-bg-color: #fce9eb;
/* WhatsApp */
--color-whatsapp: #25d366;
--color-whatsapp-darker: #17d35c;
--color-whatsapp-lighter: #dcf8c6;
/* Grayscale Palette */
--color-white: #ffffff;
--color-black: #000000;
--text-color: #3d3d3d;
--color-gray-10: #f5f5f5;
--color-gray-20: #f8f8f8;
--color-gray-50: #f9fafb;
--color-gray-100: #f8f8f7;
--color-gray-150: #eae8e8;
--color-gray-200: #e2e2e2;
--color-gray-300: #d1d1d1;
--color-gray-400: #b5b5b5;
--color-gray-500: #9a9a9a;
--color-gray-600: #7d7d7d;
--color-gray-700: #626262;
--color-gray-800: #4a4a4a;
--color-gray-900: #3333;
--view-heading-color: #5d5d5d;
--color-color-1000: rgba(138, 137, 137, 0.2);
--color-purple-100:rgb(233, 177, 233);
--radial-yellow-gradient: linear-gradient(
to right,
#ffe550 0%,
#f1fc59 50%,
#fdfc47 100%
);
/* Background & Border */
--bg-body: var(--color-gray-50);
--bg-card: var(--color-white);
--border-color: var(--color-gray-200);
/* Text Colors */
--text-primary: var(--text-color);
--text-secondary: var(--view-heading-color);
--text-muted: var(--color-gray-600);
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}
/* Logo auth */
.logo-auth {
padding-top: 15px !important;
width: 150px !important;
margin-left: 30px !important;
}
/* ANNOUNCEMENT BAR */
.announcement-bar {
background: var(--color-primary) !important;
color: var(--color-black) !important;
text-align: center;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
}
/* NAVBAR */
.docs-navbar {
background: var(--card-blue1) !important;
padding: 1px 0 !important;
align-items: center;
justify-content: center;
/* monish */
/* position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
z-index: 1000; */
}
/* SEARCH */
.search-wrapper {
position: relative;
/* background: var(--color-black) !important; */
border-radius: 6px;
padding: 8px 36px;
font-size: 14px !important;
}
.search-input {
width: 100%;
background: transparent;
border: none;
outline: none;
color: var(--color-black) !important;
font-size: 14px;
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--color-white) !important;
font-size: 15px !important;
}
/* RIGHT ACTIONS */
.nav-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px !important;
padding-right: 40px !important;
}
.nav-actions a {
text-decoration: none !important;
font-size: 16px !important;
color: var(--color-black) !important;
font-weight: 600;
}
/* Buttons */
.btn-get-started:hover {
transform: translateY(-1px);
box-shadow: 0px 10px 15px var(--primary-100) !important;
}
.help-page {
min-height: calc(100vh - 96px);
}
.help-page .col-md-4,
.help-page .col-lg-3 {
height: calc(100vh - 96px);
}
/* Right side bar */
.help-page .col-md-8,
.help-page .col-lg-9 {
height: calc(70vh);
overflow-y: auto;
}
/* CARD MUST FILL COLUMN */
.help-page .col-md-8 .card,
.help-page .col-lg-9 .card {
height: 100%;
}
/* OPTIONAL: SMOOTH SCROLL */
.help-page .col-md-8,
.help-page .col-lg-9 {
scroll-behavior: smooth;
}
.dark-theme {
/* Backgrounds */
/* --bg-body: #020617;
--bg-card: #020617; */
/* Text */
--text-primary: #e5e7eb;
--text-secondary: #cbd5f5;
--text-muted: #94a3b8;
/* Borders */
--border-color: #f7c7fc;
/* Surfaces */
--surface-hover: #0f172a;
}
.help-page {
background: var(--card-blue1) !important;
}
.btn-get-started {
background: linear-gradient(to right, #8e2de2, #c84bcf, #ff8a65);
color: #fff !important;
font-size: 13px !important;
padding: 10px 20px;
border-radius: 30px;
font-weight: 700;
border: none;
outline: none;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
transition: 0.3s ease;
}
.help-sidebar {
background-color: var(--bg-card);
color: var(--text-primary);
}
.article-drop {
color: var(--text-primary);
}
.article-drop:hover {
background-color: var(--surface-hover);
}
.border-top,
.border-bottom,
hr {
border-color: var(--border-color) !important;
}
.text-muted {
color: var(--text-muted) !important;
}
.search-input {
color: var(--text-primary);
}
.search-input::placeholder {
color: var(--text-muted);
}
.search-icon {
color: var(--text-muted);
}
.nav-actions a {
color: var(--text-primary);
}
/* =========================
SIDEBAR FOOTER (CLEAN)
========================= */
.help-footer-box {
padding: 12px;
border-radius: 10px;
border: 1px solid var(--border-color);
background-color: var(--bg-card);
}
.help-footer-box p {
color: var(--color-black);
margin-bottom: 8px;
}
/* Footer buttons */
.help-footer-box button {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-primary);
}
.help-footer-box button:hover {
background-color: var(--surface-hover);
}
/* FAQ / Contact rows */
.help-sidebar .btn.text-start {
color: var(--text-secondary);
}
.help-sidebar .btn.text-start:hover {
background-color: var(--surface-hover);
}
.dark-theme .help-footer-box {
background:var(--card-blue1);
}
.dark-theme .footer-icon {
background-color: #0f172a;
}
.help-sidebar hr {
border-color: var(--border-color);
}
.help-sidebar .text-muted {
color: var(--text-muted) !important;
}
.help-sidebar > div:last-child {
background: linear-gradient(to top, var(--bg-card), transparent);
}
.help-sidebar .bg-white,
.help-sidebar .bg-light {
background-color: transparent !important;
}
/* Icon circle */
.footer-icon {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
/* =========================
SIDEBAR CARD FIX (FINAL)
========================= */
.help-sidebar-card {
background-color: var(--bg-card) !important;
}
/* Ensure sidebar fills and no white gap */
.help-sidebar {
background-color: var(--bg-card);
height: 100%;
/* monish */
/* flex: 1;
overflow-y: auto;
padding-bottom: 12px; */
}
/* Dark mode explicit */
.dark-theme .help-sidebar-card {
background:var(--color-white)
}
/* =========================
LIGHT MODE CLEANUP
========================= */
.help-page {
background-color: var(--bg-body);
}
/* .card,
.help-sidebar-card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
} */
.card {
/* background-color: var(--bg-card); */
border: 1px solid var(--border-color);
}
/* monish */
.help-sidebar-card {
background-color: var(--bg-card);
border: none;
}
.article-drop {
border-radius: 6px;
transition: background-color 0.2s ease;
}
.article-drop:hover {
background-color: var(--color-gray-100);
}
.level-active,
.article-drop.active {
background-color: var(--color-primary-lighter-50);
color: var(--text-primary);
font-weight: 600;
}
.sidebar-footer {
border-top: 1px solid var(--border-color);
padding-top: 12px;
}
.footer-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 6px;
background: var(--color-white);
border: none;
color: var(--text-secondary);
text-align: left;
}
.footer-link:hover {
background-color: var(--color-gray-100);
border-radius: 6px;
}
.footer-icon {
width: 26px;
height: 26px;
border-radius: 50%;
background-color: var(--color-gray-100);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.footer-help-box {
margin-top: 12px;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 8px;
background-color: var(--color-gray-50);
}
.minHeightContainer {
/* background-color: var(--bg-card); */
border-radius: 12px;
border: 1px solid var(--border-color);
}
.help-page .col-md-4,
.help-page .col-lg-3 {
background-color: var(--bg-card);
}
.card {
/* background: var(--bg-card) !important; */
box-shadow: none !important;
}
.help-page .col-md-4,
.help-page .col-lg-3 {
background-color: var(--bg-card);
padding-bottom: 16px;
}
.help-footer-box {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
}
.footer-link {
color: var(--color-black);
}
.footer-link:hover {
background-color: var(--card-blue1);
}
body:not(.dark-theme) .search-wrapper {
background-color: #ffffff !important;
border: 1px solid var(--border-color);
}
body:not(.dark-theme) .search-input {
color: var(--text-primary) !important;
}
body:not(.dark-theme) .search-input::placeholder {
color: var(--text-muted) !important;
}
body:not(.dark-theme) .search-icon {
color: var(--text-muted) !important;
}
.dark-theme .search-wrapper {
background-color: var(--color-white);
border: 1px solid var(--color-white);
}
.dark-theme .search-input {
color: var(--color-black);
}
.dark-theme .search-icon {
color: var(--text-muted);
}
body:not(.dark-theme) h1,
body:not(.dark-theme) h2,
body:not(.dark-theme) h3 {
color: var(--view-heading-color);
}
.dark-theme .level-active,
.dark-theme .article-drop.active {
background-color: #1e293b;
color: #e5e7eb;
}
.title-text {
color: var(--color-black) !important;
opacity: 1 !important;
}
.yellow-cards {
border-left-width: 3px;
border-right-width: 3px;
}
/* MOBILE */
@media (max-width: 768px) {
.brand-logo {
font-size: 18px;
}
.version-select {
font-size: 12px;
}
}
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.doc-card {
border: 1px solid #e6e6e6;
border-radius: 12px;
padding: 16px;
cursor: pointer;
position: relative;
background: var(--color-white);
transition: box-shadow 0.2s ease;
}
.doc-card:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.doc-icon {
color: var(--color-primary);
margin-bottom: 10px;
}
.doc-title {
font-weight: 600;
margin-bottom: 4px;
}
.status.active {
color: var(--color-success);
}
.status.inactive {
color: var(--color-error);
}
.doc-menu {
position: absolute;
top: 12px;
right: 12px;
cursor: pointer;
}
/* card highlight when menu open */
.doc-card.menu-open {
border: 1px solid var(--color-primary);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
/* dropdown */
.doc-dropdown {
position: absolute;
right: 0;
top: 26px;
background: var(--color-white);
border: 1px solid #e6e6e6;
border-radius: 8px;
z-index: 20;
min-width: 120px;
padding: 4px 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.doc-dropdown button {
padding: 8px 14px;
width: 100%;
border: none;
background: transparent;
text-align: left;
font-size: 14px;
}
.doc-dropdown button:hover {
background: #f5f5f5;
}
.help-sidebar {
height: 100%;
}
.help-sidebar-card {
display: flex;
flex-direction: column;
/* monish */
/* background-color: var(--bg-card);
border: none;
position: fixed;
top: 64px;
left: 0;
width: 400px;
height: calc(100vh - 64px);
display: flex;
flex-direction: column;
z-index: 900; */
}
.help-footer {
position: sticky;
bottom: 0;
background: #000;
}
.right-content {
height: calc(100vh - 120px);
}
.article-html-content {
font-size: 15px;
line-height: 1.8;
color: var(--color-black);
}
.article-html-content p {
margin-bottom: 12px;
}
.article-html-content strong {
color: var(--color-black);
font-weight: 800;
}
.article-html-content ul,
.article-html-content ol {
padding-left: 20px;
}
.article-html-content li {
margin-bottom: 8px;
}
.article-html-content img,
.article-html-content iframe,
.article-html-content video {
max-width: 100%;
height: auto;
}
/* LEFT MENU */
.help-menu-item {
width: 100%;
padding: 10px 14px;
background:white;
border: none;
display: flex;
justify-content: space-between;
align-items: center;
color:var(--color-black);
cursor: pointer;
box-shadow: none;
}
.help-menu-item:hover {
background: var(--card-blue1);
}
.menu-left {
display: flex;
align-items: center;
gap: 8px;
}
.sub-article {
padding-left: 38px;
font-size: 14px;
color: #c7d2fe;
}
.menu-icon {
opacity: 0.8;
}
.menu-dot {
opacity: 0.7;
}
/* ACTIVE ARTICLE */
.active-article {
background: var(--card-blue1);
border-left: 3px solid #3b82f6;
color: var(--color-black);
}
.rotate-180 {
transform: rotate(180deg);
}
.search-wrapper {
position: relative;
}
.search-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 8px;
margin-top: 6px;
max-height: 280px;
overflow-y: auto;
z-index: 9999;
}
.suggestion-item {
padding: 10px 14px;
cursor: pointer;
display: flex;
flex-direction: column;
}
.suggestion-item:hover {
background: rgba(255, 255, 255, 0.06);
}
.suggestion-title {
color: #fff;
font-size: 14px;
font-weight: 500;
}
.suggestion-category {
font-size: 12px;
color: #94a3b8;
}
/* WebKit Scrollbar */
.article-content-wrapper::-webkit-scrollbar {
width: 8px;
}
.article-content-wrapper::-webkit-scrollbar-track {
background: #0f172a; /* light black */
border-radius: 10px;
}
.article-content-wrapper::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.35);
border-radius: 10px;
transition: background 0.3s ease;
}
.article-content-wrapper::-webkit-scrollbar-thumb:hover {
background: #ffffff; /* white hover */
}
/* ReactQuill Height & Border Fix */
.custom-quill {
border: 1px solid #dee2e6;
border-radius: 8px;
}
.custom-quill .ql-toolbar {
border-bottom: 1px solid #dee2e6;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.custom-quill .ql-container {
border: none;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.custom-quill .ql-editor {
min-height: 200px;
padding: 16px;
font-size: 14px;
}
.help-page .row > [class*="col-"] {
height: auto;
}
.icon-bg {
width: 36px;
height: 36px;
background: var(--text-color);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-bg svg {
color: var(--color-primary);
}
.carousel-left {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -100%);
z-index: 10;
border-radius: 50%;
padding: 7px 10px;
}
.carousel-right {
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -100%);
z-index: 10;
border-radius: 50%;
padding: 7px 10px;
}
/* Main container */
section.overflow-hidden {
background-color: var(--bg-body);
position: relative;
}
/* Fixed headers */
.announcement-bar.fixed-top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2000;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.docs-navbar.fixed-top {
position: fixed;
top: 30px;
left: 0;
right: 0;
z-index: 1500;
height: 64px;
background: var(--bg-card) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid var(--border-color);
}
/* Main content area */
.help-page.position-absolute {
background-color: var(--bg-body);
position: absolute !important;
top: 94px;
left: 0;
right: 0;
bottom: 0;
}
.container-fluid.h-100 {
padding-right: 15px;
padding-left: 15px;
background: var(--card-blue1);
}
.col-12.col-md-4.col-lg-3 {
padding-right: 8px !important;
padding-left: 15px !important;
background: var(--card-blue1);
}
/* Right content adjustments */
.col-12.col-md-8.col-lg-9 {
padding-left: 0 !important;
padding-right: 15px !important;
}
/* Card inside right content */
.col-12.col-md-8.col-lg-9 .card {
height: 100%;
border-radius: 12px;
margin: 0;
}
/* Scrollable content inside card */
.article-content-wrapper {
height: 100%;
overflow-y: auto;
padding: 24px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.announcement-bar.fixed-top {
height: 25px;
font-size: 12px;
}
.docs-navbar.fixed-top {
top: 25px;
height: 56px;
}
.help-page.position-absolute {
top: 81px;
}
.col-12.col-md-4.col-lg-3,
.col-12.col-md-8.col-lg-9 {
height: 50vh;
padding-left: 15px !important;
padding-right: 15px !important;
}
.col-12.col-md-4.col-lg-3 {
margin-bottom: 15px;
}
.help-sidebar-card {
margin-bottom: 0;
}
}
/* Fix for right content scrollbar */
.col-12.col-md-8.col-lg-9 > div::-webkit-scrollbar {
width: 8px;
}
.col-12.col-md-8.col-lg-9 > div::-webkit-scrollbar-thumb {
border-radius: 4px;
}
/* Ordered list = numbers */
.article-html-content ol > li[data-list="ordered"] {
list-style-type: decimal;
}
/* Bullet list */
.article-html-content ol > li[data-list="bullet"] {
list-style-type: disc;
margin-left: 1.2rem;
}
/* Spacing */
.article-html-content ol {
padding-left: 1.6rem;
}
.article-html-content li {
display: list-item;
margin-bottom: 8px;
}
/* Hide Quill helper */
.article-html-content .ql-ui {
display: none;
}
.col-12.col-md-4.col-lg-3 {
position: relative !important;
}
.help-sidebar-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.help-sidebar {
flex: 1;
overflow-y: auto;
padding-bottom: 150px;
position: relative;
z-index: 1;
}
.help-sidebar-card > div:last-child {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: var(--bg-card);
border-top: 1px solid var(--border-color);
z-index: 10;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.help-footer-box {
background-color: var(--bg-card);
}
/* Dark mode specific */
.dark-theme .help-sidebar-card > div:last-child {
background:var(--card-blue1);
backdrop-filter: blur(8px);
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.help-sidebar {
padding-bottom: 130px;
}
}
.help-sidebar::-webkit-scrollbar,
.col-12.col-md-8.col-lg-9 > div::-webkit-scrollbar,
.article-content-wrapper::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
background: transparent;
}
.help-sidebar,
.col-12.col-md-8.col-lg-9 > div,
.article-content-wrapper {
-ms-overflow-style: none;
scrollbar-width: none;
overflow-y: auto;
overflow-x: hidden;
}
.help-sidebar,
.col-12.col-md-8.col-lg-9 > div,
.article-content-wrapper {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.help-sidebar::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(to top, var(--bg-card), transparent);
pointer-events: none;
opacity: 0.7;
}
.footer-link,
.footer-link:hover,
.footer-link:focus,
.footer-link:active {
text-decoration: none;
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12.5px;
font-family: "Nunito", sans-serif;
}
:root {
/* Primary Brand Colors */
--color-home-bg: #f5f5f2;
--color-primary: #ffca40;
--color-primary-lighter: #ffe599;
--color-primary-lighter-50: #fff2cb;
--color-primary-darker: #cc9c2d;
--color-primary-hover: #f5c036;
--color-primary-active: #d9a52c;
--color-primary-disabled: #e6d8a8;
--color-primary-text-disabled: #8c8c8c;
/* Secondary / Accent Colors */
--color-secondary: #c8161d;
--color-secondary-light: #e03a3f;
--color-secondary-dark: #9f1217;
--color-secondary-hover: #b8141b;
--color-secondary-active: #8f1115;
--color-secondary-disabled: #e8b4b6;
--color-secondary-text-disabled: #7a7a7a;
/* Status Colors */
--color-success: #1fc16b;
--color-success-bg: #c2f7db;
--color-success-bg-50: #e1fbed;
--color-warning: #f59e0b;
--color-warning-bg: #fef9c3;
--color-error-bg: #ffe7e8;
--color-error: #fb3748;
--color-info-bg: #d9eaff;
--color-info: #0054a6;
--discard-bg-color: #fce9eb;
/* WhatsApp */
--color-whatsapp: #25d366;
--color-whatsapp-darker: #17d35c;
--color-whatsapp-lighter: #dcf8c6;
/* Grayscale Palette */
--color-white: #ffffff;
--color-black: #000000;
--text-color: #3d3d3d;
--color-gray-10: #f5f5f5;
--color-gray-20: #f8f8f8;
--color-gray-50: #f9fafb;
--color-gray-100: #f8f8f7;
--color-gray-150: #eae8e8;
--color-gray-200: #e2e2e2;
--color-gray-300: #d1d1d1;
--color-gray-400: #b5b5b5;
--color-gray-500: #9a9a9a;
--color-gray-600: #7d7d7d;
--color-gray-700: #626262;
--color-gray-800: #4a4a4a;
--color-gray-900: #3333;
--view-heading-color: #5d5d5d;
--color-color-1000: rgba(138, 137, 137, 0.2);
/* Background & Border */
--bg-body: var(--color-gray-50);
--bg-card: var(--color-white);
--border-color: var(--color-gray-200);
/* Text Colors */
--text-primary: var(--color-gray-900);
--text-secondary: var(--color-gray-600);
--text-muted: var(--color-gray-500);
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* card overlay */
--preview: rgba(15, 15, 15, 0.55);
--option-color: #6c757d;
--option-bg: #f8f9fa;
--select-option: #e9ecef;
--select-color: #212529;
}
.fullCircle {
stroke: var(--color-gray-150);
stroke-width: 3;
fill: none;
r: 44;
cx: 50;
cy: 50;
}
.filledCircle {
stroke: var(--color-primary);
stroke-width: 3;
fill: none;
r: 44;
cx: 50;
cy: 50;
stroke-linecap: round;
}
.progressPercentage {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
z-index: 10;
}
.progressPercentage .circle {
background: var(--color-primary);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
padding: 1px 2px;
}
.progressPercentage .circle span {
font-size: 6px;
color: var(--color-white);
font-weight: bold;
}
.profileImage {
border-radius: 50%;
overflow: hidden;
width: 45px;
height: 45px;
}
.profileImage img {
width: 100%;
height: 100%;
object-fit: cover;
}
.heatmap-grid {
display: flex;
gap: 3px;
direction: rtl;
}
.heatmap-day {
display: flex;
flex-direction: column;
gap: 3px;
}
.heatmap-square {
width: 9px;
height: 9px;
border-radius: 2px;
background-color: #ebedf0;
transition: all 0.15s ease;
}
.heatmap-square:hover {
transform: scale(1.4);
z-index: 2;
box-shadow: 0 0 0 3px rgba(255, 202, 64, 0.4);
}
.heatmap-legend {
margin-top: 5px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
color: var(--text-muted);
}
.heatmap-legend span {
font-size: 10px;
}
.legend-squares {
display: flex;
gap: 3px;
}
.legend-square {
width: 9px;
height: 9px;
}
.section-title {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
}
.inboxs-list {
display: flex;
flex-direction: column;
gap: 16px;
padding: 8px;
background-color: var(--color-gray-100);
border-radius: 20px;
}
.inboxs-scroll {
max-height: 150px;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 4px;
}
.inboxs-scroll::-webkit-scrollbar {
width: 4px;
}
.inboxs-scroll::-webkit-scrollbar-thumb {
background: var(--color-gray-300);
border-radius: 4px;
}
.inbox-card {
padding-top: 8px;
border-top: 1.5px dashed var(--color-gray-200);
}
.inbox-card.first-card {
border-top: none;
}
.inboxImage {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 2px solid white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.inboxImage img {
width: 100%;
height: 100%;
object-fit: cover;
}
.inbox-name {
font-weight: 600;
font-size: 13px;
color: var(--color-black);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.inbox-label {
font-size: 11.5px;
color: var(--text-muted);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 991px) and (max-width: 1240px) {
.inbox-name {
padding-left: 10px;
}
.inbox-label {
padding-left: 10px;
}
}
.inboxTime {
font-size: 9px;
color: var(--text-muted);
}
.unReadCount {
background: var(--color-secondary);
color: var(--color-white);
border-radius: 50%;
height: 12px;
width: 12px;
font-size: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.see-all-btn {
align-self: center;
background: var(--color-primary-lighter-50);
border: none;
color: var(--color-primary);
font-weight: 600;
font-size: 14px;
width: 100%;
padding: 5px 12px;
border-radius: 15px;
}
.see-all-btn:hover,
.see-all.active {
background: transparent !important;
border: 1px solid var(--color-primary) !important;
transform: translateY(-1px);
}
.addinbox {
border: 1px solid var(--color-gray-150);
color: var(--color-black);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 5px;
}
.addinbox:hover,
.addinbox.active {
background-color: var(--color-gray-150) !important;
}
.dashboard-sticky {
position: fixed;
}
@media (max-width: 991.98px) {
.dashboard-sticky {
position: static;
}
}
.chartIcon {
color: var(--color-primary);
background-color: var(--color-primary-lighter-50);
padding: 5px;
border-radius: 8px;
}
.totalFlow {
color: var(--color-primary) !important;
font-weight: bold !important;
}
.chartLabel {
max-height: 160px;
overflow-y: auto;
padding-left: 4px;
}
.chartLabel::-webkit-scrollbar {
width: 4px;
}
.chartLabel::-webkit-scrollbar-thumb {
background: var(--color-gray-300);
border-radius: 4px;
}
.pieChartLabel {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.growthPercentage {
color: var(--color-success);
background-color: var(--color-success-bg-50);
padding: 2px 4px;
border-radius: 4px;
font-size: 10px;
font-weight: 550;
}
/* === Greeting === */
.user-greeting-wrapper {
position: relative;
}
.greeting-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.greeting-text {
margin-bottom: 0;
font-weight: 700;
}
.chevron-icon {
transition: transform 0.3s ease;
}
.chevron-open {
transform: rotate(180deg);
}
/* === Dropdown Menu === */
.user-dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
min-width: 240px;
max-height: 320px;
overflow-y: auto;
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 12px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
padding: 8px;
margin-top: 4px;
}
.user-dropdown-item {
display: flex;
align-items: center;
padding: 8px 12px;
border-radius: 8px;
margin-bottom: 4px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.user-dropdown-item:hover {
background-color: var(--color-gray-10);
}
.user-selected {
background-color: var(--color-primary-lighter-50) !important;
}
/* === Avatar styles === */
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
margin-right: 14px;
border: 2px solid transparent;
transition: border-color 0.2s ease;
}
.avatar-selected {
border-color: var(--color-primary);
}
/* === User name & info === */
.user-info {
display: flex;
flex-direction: column;
}
.user-name {
font-weight: 500;
}
.name-selected {
color: var(--color-primary-darker);
}
.current-label {
font-size: 0.75rem;
color: var(--color-gray-500);
}
.motivation-text {
margin-top: 4px;
}
.heatmap-container {
width: 100%;
display: flex;
justify-content: center;
}
.heatmap-wrapper {
width: 100%;
max-width: 420px;
justify-content: center;
}
.heatmap-content {
display: flex;
flex-direction: column;
align-items: center;
}
.heatmap-grid-responsive {
justify-content: center;
}
.heatmap-legend-responsive {
width: 100%;
display: flex;
justify-content: center;
}
@media (max-width: 576px) {
.heatmap-wrapper {
max-width: 100%;
}
.heatmap-grid-responsive {
gap: 3px;
}
.heatmap-day-column {
gap: 3px;
}
}
@media (min-width: 1400px) {
.heatmap-wrapper {
max-width: 480px;
}
}
.dashboard-sticky .card>div>div[style*="display: flex"] {
width: 100%;
justify-content: center;
}
.dashboard-sticky .heatmap-grid {
margin-left: auto;
margin-right: auto;
}
.dashboard-sticky .heatmap-grid~.heatmap-legend,
.dashboard-sticky .heatmap-grid~.heatmap-legend,
.dashboard-sticky .heatmap-grid~.heatmap-legend span {
justify-content: center;
}
.dashboard-sticky .heatmap-day,
.dashboard-sticky .heatmap-legend {
align-items: center;
}
@media (min-width: 1200px) {
.dashboard-sticky .heatmap-grid {
max-width: 420px;
}
}
@media (max-width: 576px) {
.dashboard-sticky .heatmap-grid {
max-width: 100%;
}
}
.dashboard-sticky {
position: sticky;
top: 1rem;
z-index: 10;
}
@media (max-width: 991.98px) {
.dashboard-sticky {
position: static !important;
margin-top: 1.5rem;
}
.card.p-3 {
padding: 1rem !important;
}
.position-relative[style*="width: \"65px\""] {
width: 55px !important;
height: 55px !important;
}
.profileImage {
width: 38px !important;
height: 38px !important;
}
.progressPercentage .circle span {
font-size: 5.2px !important;
}
.greeting-text {
font-size: 1.1rem !important;
}
.motivation-text {
font-size: 0.8rem !important;
}
.heatmap-container,
.inboxs-list {
padding: 12px !important;
}
.y-label,
.x-label {
font-size: 0.65rem !important;
}
.inboxs-scroll {
max-height: 180px !important;
}
.inbox-name {
font-size: 12.5px !important;
}
}
@media (min-width: 576px) and (max-width: 991.98px) {
.dashboard-sticky {
top: 1.5rem;
}
.card.p-3 {
padding: 1.25rem !important;
}
.position-relative[style*="width: \"65px\""] {
width: 70px !important;
height: 70px !important;
}
.profileImage {
width: 48px !important;
height: 48px !important;
}
.y-label,
.x-label {
font-size: 0.78rem !important;
}
}
@media (min-width: 992px) and (max-width: 1399px) {
.dashboard-sticky {
top: 1.5rem;
}
.card {
padding: 1.25rem 1.5rem !important;
}
.inboxs-scroll {
max-height: 240px !important;
}
}
@media (min-width: 1400px) {
.dashboard-sticky {
top: 2rem;
}
.card {
padding: 1.75rem 2rem !important;
border-radius: 1.25rem !important;
}
.position-relative[style*="width: \"65px\""] {
width: 80px !important;
height: 80px !important;
}
.profileImage {
width: 58px !important;
height: 58px !important;
}
.greeting-text {
font-size: 1.4rem !important;
}
.y-label,
.x-label {
font-size: 0.95rem !important;
}
.inboxs-scroll {
max-height: 340px !important;
}
.inbox-name {
font-size: 15px !important;
}
}
@media (max-width: 400px) {
.user-greeting-wrapper {
font-size: 0.95rem;
}
.user-dropdown-menu {
min-width: 220px;
left: 0 !important;
right: 0 !important;
transform: none !important;
margin: 0 auto;
}
}
@media (min-width: 992px) {
.dashboard-sticky .card {
padding-top: 1.25rem !important;
}
}
@media (min-width: 1400px) {
.dashboard-sticky .position-relative[style*="width"] {
width: 72px !important;
height: 72px !important;
}
}._voiceModalDialog_18859_1 ._modal-content_18859_1 {
border: none;
border-radius: 24px;
overflow: hidden;
}
._voiceModal_18859_1 {
padding: 14px;
position: relative;
background: #fff;
border-radius: 24px;
}
._voiceClose_18859_27 {
position: absolute;
right: 14px;
top: 14px;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: #f3f4f8;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
._voiceClose_18859_27:hover {
background: #ede9fe;
color: #7b3ff2;
}
._voiceTitle_18859_69 {
text-align: center;
font-weight: 700;
font-size: 20px;
margin-bottom: 12px;
color: #111110;
}
._voiceCard_18859_85 {
border: 1px solid #ececec;
border-radius: 16px;
padding: 14px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
margin-top: 12px;
}
._voiceListening_18859_103 {
color: #7b3ff2 !important;
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}
._voiceWave_18859_117 {
width: 100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
._waveBar_18859_135 {
width: 4px;
height: 12px;
border-radius: 10px;
background: linear-gradient(to top, #7b3ff2, #2d8cff);
}
._waveAnimate_18859_149 {
animation: _waveMove_18859_1 0.9s infinite ease-in-out;
}
._waveBar_18859_135:nth-child(odd) {
animation-duration: 0.8s;
}
._waveBar_18859_135:nth-child(even) {
animation-duration: 1.1s;
}
._waveBar_18859_135:nth-child(3n) {
animation-duration: 1.4s;
}
._waveBar_18859_135:nth-child(4n) {
animation-duration: 1.2s;
}
._waveBar_18859_135:nth-child(5n) {
animation-duration: 0.95s;
}
@keyframes _waveMove_18859_1 {
0% {
height: 10px;
}
20% {
height: 45px;
}
40% {
height: 20px;
}
60% {
height: 65px;
}
80% {
height: 35px;
}
100% {
height: 10px;
}
}
._voiceMic_18859_249 {
width: 56px;
height: 56px;
border: none;
border-radius: 50%;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
box-shadow: 0 5px 15px rgba(123, 63, 242, 0.35);
cursor: pointer;
transition: all 0.2s;
}
._voiceMic_18859_249:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(123, 63, 242, 0.45);
}
._voiceMic_18859_249:active {
transform: scale(0.95);
}
._voiceHint_18859_299 {
color: #777;
font-size: 12px;
margin: 0;
}
._voiceTextCard_18859_311 {
margin-top: 12px;
border: 1px solid #ececec;
border-radius: 14px;
padding: 12px;
}
._voiceHeader_18859_325 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
color: #374151;
}
._voiceTextarea_18859_345 {
width: 100%;
min-height: 70px;
border: 1px solid #ececec;
border-radius: 10px;
resize: none;
padding: 8px 10px;
outline: none;
font-size: 14px;
background-color: white;
transition: border-color 0.2s;
}
._voiceTextarea_18859_345:focus {
border-color: #7b3ff2;
box-shadow: 0 0 0 3px rgba(123, 63, 242, 0.1);
}
._voiceSaved_18859_381 {
margin-top: 8px;
display: flex;
align-items: center;
gap: 6px;
color: #5a5a5a;
font-size: 12px;
}
._voiceRetry_18859_399 {
margin: 12px auto;
display: flex;
align-items: center;
gap: 8px;
border: none;
background: transparent;
color: #7b3ff2;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
._voiceRetry_18859_399:hover {
color: #6b35e0;
transform: translateX(2px);
}
._voiceActions_18859_437 {
display: flex;
gap: 10px;
}
._editBtn_18859_447,
._sendBtn_18859_449 {
flex: 1;
height: 42px;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
transition: all 0.2s;
}
._editBtn_18859_447 {
background: #fff;
color: #7b3ff2;
border: 2px solid #7b3ff2;
cursor: pointer;
}
._editBtn_18859_447:hover {
background: #ede9fe;
transform: translateY(-1px);
}
._editBtn_18859_447:active {
transform: translateY(0);
}
._sendBtn_18859_449 {
border: none;
color: #fff;
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
cursor: pointer;
box-shadow: 0 2px 8px rgba(123, 63, 242, 0.25);
}
._sendBtn_18859_449:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(123, 63, 242, 0.35);
}
._sendBtn_18859_449:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* ── Buttons ── */
._btn_yellow_18859_541 {
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
border: none;
color: #fff;
font-family: var(--font);
font-weight: 500;
font-size: 13px;
padding: 9px 18px;
border-radius: 99px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.18s ease;
white-space: nowrap;
line-height: 1;
}
._btn_yellow_18859_541:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(123, 63, 242, 0.45);
}
._btn_yellow_18859_541:active {
transform: translateY(0);
}
._btn_yellow_18859_541:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
._apiError_18859_607 {
margin-top: 10px;
padding: 10px 12px;
border-radius: 8px;
background: #ede9fe;
color: #7b3ff2;
font-size: 13px;
font-weight: 500;
border: 1px solid #c4b5fd;
}
/* Label button */
._actionGroup_18859_631 .btn-primary {
background: #ffffff !important;
border-color: rgb(174, 221, 240);
color: #374151 !important;
border-radius: 15px;
}
._actionGroup_18859_631 .btn-primary:hover,
._actionGroup_18859_631 .btn-primary:focus {
background: linear-gradient(90deg, #7b3ff2, #2d8cff) !important;
border-color: rgb(163, 189, 241);
color: #ffffff !important;
}
/* Secondary label */
._actionGroup_18859_631 .btn-secondary {
background: #ffffff !important;
border-color: rgb(174, 221, 240);
color: #374151 !important;
border-radius: 15px;
}
._actionGroup_18859_631 .btn-secondary:hover,
._actionGroup_18859_631 .btn-secondary:focus {
background: linear-gradient(90deg, #7b3ff2, #2d8cff) !important;
border-color: rgb(163, 189, 241);
color: #ffffff !important;
}
/* Dismiss button */
._actionGroup_18859_631 .btn-danger {
color: #fff !important;
background: linear-gradient(90deg, #7b3ff2, #2d8cff) !important;
border: none !important;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
._actionGroup_18859_631 {
margin-right: 12px;
margin-bottom: 0px;
padding: 0px;
font-size: 8px !important;
}
._suggestedActions_18859_721 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
._spinIcon_18859_735 {
animation: _spin_18859_735 1s linear infinite;
}
@keyframes _spin_18859_735 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ── Responsive ── */
@media (max-width: 576px) {
._voiceModal_18859_1 {
padding: 12px;
}
._voiceActions_18859_437 {
flex-direction: column;
}
._voiceWave_18859_117 {
gap: 2px;
}
._waveBar_18859_135 {
width: 3px;
}
._voiceTitle_18859_69 {
font-size: 18px;
}
._voiceListening_18859_103 {
font-size: 16px;
}
}
/* ===== Send Button Fix ===== */
._voiceActions_18859_437 ._sendBtn_18859_449 {
width: 100%;
min-height: 42px;
padding: 0 16px !important;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 10px;
line-height: 1;
white-space: nowrap;
}
._voiceActions_18859_437 ._sendBtn_18859_449 svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
._voiceActions_18859_437 ._sendBtn_18859_449 span {
display: inline-flex;
align-items: center;
justify-content: center;
}
._summaryBody_xdk1m_1 {
padding: 28px;
}
._successIcon_xdk1m_9 {
width: 72px;
height: 72px;
margin: 0 auto 18px;
border-radius: 50%;
background: #ecfdf3;
color: #16a34a;
display: flex;
align-items: center;
justify-content: center;
font-size: 42px;
}
._title_xdk1m_35 {
text-align: center;
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
color: #111827;
}
._subTitle_xdk1m_51 {
text-align: center;
color: #6b7280;
font-size: 14px;
margin-bottom: 24px;
}
._summaryCard_xdk1m_65 {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 18px;
background: #f8fafc;
margin-bottom: 20px;
}
._cardTitle_xdk1m_81 {
font-size: 16px;
font-weight: 600;
margin-bottom: 16px;
}
._section_xdk1m_93 {
margin-top: 18px;
}
._section_xdk1m_93:first-child {
margin-top: 0;
}
._sectionTitle_xdk1m_109 {
font-size: 13px;
font-weight: 700;
color: #2563eb;
text-transform: uppercase;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid #dbeafe;
}
._summaryRow_xdk1m_129 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 10px 0;
border-bottom: 1px solid #e5e7eb;
}
._summaryRow_xdk1m_129:last-child {
border-bottom: none;
}
._summaryRow_xdk1m_129 span {
color: #6b7280;
font-size: 14px;
}
._summaryRow_xdk1m_129 strong {
color: #111827;
font-size: 14px;
font-weight: 600;
text-align: right;
word-break: break-word;
}
._linkSection_xdk1m_181 {
margin-bottom: 24px;
}
._linkSection_xdk1m_181 label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #374151;
}
._linkBox_xdk1m_203 {
display: flex;
border: 1px solid #d1d5db;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
._linkBox_xdk1m_203 input {
flex: 1;
border: none;
outline: none;
padding: 12px;
font-size: 13px;
}
._linkBox_xdk1m_203 button {
width: 52px;
border: none;
background: #0d6efd;
color: #fff;
cursor: pointer;
transition: 0.2s;
}
._linkBox_xdk1m_203 button:hover {
background: #0d6efd;
}
._footer_xdk1m_261 {
display: flex;
justify-content: flex-end;
gap: 12px;
}
._footer_xdk1m_261 button {
min-width: 140px;
}
@media (max-width: 768px) {
._summaryBody_xdk1m_1 {
padding: 20px;
}
._summaryRow_xdk1m_129 {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
._footer_xdk1m_261 {
flex-direction: column;
}
._footer_xdk1m_261 button {
width: 100%;
}
}
._summaryCard_xdk1m_65 {
padding: 10px;
}
._infoCard_xdk1m_327 {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 14px;
transition: all 0.2s ease;
}
._infoCard_xdk1m_327:hover {
border-color: #0d6efd;
box-shadow: 0 2px 8px rgba(13, 110, 253, 0.08);
}
._label_xdk1m_353 {
font-size: 12px;
color: #6c757d;
margin-bottom: 6px;
}
._value_xdk1m_365 {
font-size: 15px;
font-weight: 600;
color: #212529;
word-break: break-word;
}
._linkBox_xdk1m_203 {
display: flex;
align-items: center;
border: 1px solid #dee2e6;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
._linkText_xdk1m_395 {
flex: 1;
padding: 12px 14px;
font-size: 14px;
color: #495057;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._copyBtn_xdk1m_415 {
width: 52px;
height: 48px;
border: none;
border-left: 1px solid #dee2e6;
background: #fff;
color: #0d6efd;
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s;
}
._copyBtn_xdk1m_415:hover {
background: #0d6efd;
color: #fff;
}
._copyBtn_xdk1m_415:focus {
box-shadow: none;
}
@media (max-width: 576px) {
._linkText_xdk1m_395 {
font-size: 13px;
padding: 10px 12px;
}
._copyBtn_xdk1m_415 {
width: 46px;
height: 44px;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12.5px;
font-family: "Nunito", sans-serif;
}
:root {
/* Primary Brand Colors */
--color-home-bg: #f5f5f2;
--color-primary: #ffca40;
--color-primary-lighter: #ffe599;
--color-primary-lighter-50: #fff2cb;
--color-primary-darker: #cc9c2d;
--color-primary-hover: #f5c036;
--color-primary-active: #d9a52c;
--color-primary-disabled: #e6d8a8;
--color-primary-text-disabled: #8c8c8c;
/* Secondary / Accent Colors */
--color-secondary: #c8161d;
--color-secondary-light: #e03a3f;
--color-secondary-dark: #9f1217;
--color-secondary-hover: #b8141b;
--color-secondary-active: #8f1115;
--color-secondary-disabled: #e8b4b6;
--color-secondary-text-disabled: #7a7a7a;
/* Status Colors */
--color-success: #1fc16b;
--color-success-bg: #c2f7db;
--color-warning: #f59e0b;
--color-warning-bg: #fef9c3;
--color-error-bg: #ffe7e8;
--color-error: #fb3748;
--color-info-bg: #d9eaff;
--color-info: #0054a6;
--discard-bg-color: #fce9eb;
/* WhatsApp */
--color-whatsapp: #25d366;
--color-whatsapp-darker: #17d35c;
--color-whatsapp-lighter: #dcf8c6;
/* Grayscale Palette */
--color-white: #ffffff;
--color-black: #000000;
--text-color: #3d3d3d;
--color-gray-10: #f5f5f5;
--color-gray-20: #f8f8f8;
--color-gray-50: #f9fafb;
--color-gray-100: #f8f8f7;
--color-gray-200: #e2e2e2;
--color-gray-300: #d1d1d1;
--color-gray-400: #b5b5b5;
--color-gray-500: #9a9a9a;
--color-gray-600: #7d7d7d;
--color-gray-700: #626262;
--color-gray-800: #4a4a4a;
--color-gray-900: #3333;
--view-heading-color: #5d5d5d;
--color-color-1000: rgba(138, 137, 137, 0.2);
/* Background & Border */
--bg-body: var(--color-gray-50);
--bg-card: var(--color-white);
--border-color: var(--color-gray-200);
/* Text Colors */
--text-primary: var(--color-gray-900);
--text-secondary: var(--color-gray-600);
--text-muted: var(--color-gray-500);
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}
.inbox-layout {
height: 82vh;
overflow-y: auto;
}
.inbox-layout::-webkit-scrollbar {
display: none;
}
/* LEFT PANEL */
.inbox-left {
height: 82vh !important;
overflow-y: auto;
background: var(--color-gray-100);
border-right: 1px solid var(--color-gray-200);
}
.inbox-left::-webkit-scrollbar {
display: none;
}
.panel-searchIcon {
background-color: var(--color-white);
padding: 7px;
font-size: 28px;
border-radius: 40%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
.panel-searchIcon:hover {
background-color: var(--color-gray-200);
}
.panel-filterIcon {
background-color: var(--color-white);
padding: 7px;
font-size: 28px;
border-radius: 40%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
.panel-filterIcon:hover {
background-color: var(--color-gray-200);
}
.panel-dropdown {
position: relative;
width: max-content;
}
.panel-btn {
font-size: 22px;
font-weight: bold;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
.panel-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 6px;
width: 160px;
background: var(--color-white);
border-radius: 8px;
box-shadow: var(--shadow-md);
padding: 5px;
z-index: 1000;
list-style: none;
}
.panel-menu li {
padding: 8px 12px;
cursor: pointer;
border-radius: 6px;
}
.panel-menu li:hover {
background-color: var(--color-gray-100);
}
.search-box {
width: 100%;
padding: 8px;
border-radius: 20px;
border: 0.5px solid var(--color-gray-100);
outline: none;
}
.search-box:focus,
.search-box:active {
border: none;
outline: none;
box-shadow: none;
}
.conversation-card {
display: flex;
align-items: center;
background: var(--color-white);
padding: 12px;
border-radius: 14px;
margin-bottom: 10px;
box-shadow: var(--shadow-sm);
min-height: 70px;
cursor: pointer;
}
.conversation-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
}
.label-wrap {
display: flex;
gap: 5px;
max-width: 150px;
overflow-x: auto;
white-space: nowrap;
}
/* Labels */
.label-badge {
font-size: 9px;
padding: 2px 7px;
border-radius: 10px;
color: var(--color-black);
}
/* Hide scroll bar (label area) */
.label-wrap::-webkit-scrollbar {
display: none;
}
.chat-tabs {
justify-content: space-between !important;
background: var(--color-white);
border-radius: 10px;
margin-bottom: 10px;
width: 100%;
}
.chat-tab {
padding: 4px 20px;
border-radius: 8px;
font-size: 12px;
cursor: pointer;
color: var(--color-black);
transition: all 0.2s ease;
white-space: nowrap;
}
.chat-tab:hover {
background: var(--color-primary-lighter);
}
.chat-tab.active {
background: var(--color-primary);
box-shadow: var(--shadow-sm);
color: var(--color-black);
font-weight: 600;
}
.avatar-circle {
font-size: 14px;
letter-spacing: 1px;
height: 40px;
width: 40px;
min-width: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary));
color: var(--color-white);
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
}
.myAvatarCircle {
font-size: 14px;
letter-spacing: 1px;
height: 40px;
width: 40px;
min-width: 40px;
border-radius: 50%;
background-color: var(--color-secondary-light);
color: var(--color-white);
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
}
.conversation-content {
margin-left: 12px;
width: 100%;
}
.conversation-name {
font-weight: bold;
margin: 0;
max-width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conversation-time {
font-size: 10px;
color: var(--color-gray-400);
}
.conversation-msg {
font-size: 11px;
color: var(--color-gray-700);
}
.conversation-msg *,
.conversation-msg strong,
.conversation-msg em,
.conversation-msg span,
.conversation-msg p,
.conversation-msg br {
font-size: inherit !important;
line-height: 1.4;
}
.message-badge {
background: var(--color-secondary);
color: var(--color-white);
border-radius: 50%;
height: 12px;
min-width: 12px;
font-size: 6px;
display: flex;
align-items: center;
justify-content: center;
}
/* Message header */
.message-head {
position: relative;
height: 82vh;
overflow-y: scroll;
margin-top: 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.message-head::-webkit-scrollbar {
display: none;
}
.message-header {
position: sticky;
top: 0 !important;
z-index: 100;
background-color: var(--color-gray-100);
padding: 6px;
margin-bottom: 15px !important;
/* border-radius: 15px; */
}
/* CENTER PANEL */
.message-panel {
height: 82vh;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
border-radius: 8px;
background: var(--color-white);
padding: 10px;
}
.chat-header {
position: sticky;
top: 0;
z-index: 2;
background: var(--color-gray-100);
display: flex;
justify-content: space-between;
padding: 12px 16px;
border-radius: 50px;
}
.chat-user {
display: flex;
gap: 10px;
align-items: center;
}
.chat-user h6 {
margin: 0;
font-size: 14px;
font-weight: 700;
}
.chat-user small {
color: var(--color-gray-600);
}
.chat-actions {
display: flex;
align-items: center;
gap: 5px;
}
.chat-actions span {
background-color: var(--color-gray-100);
border-radius: 50%;
height: 28px;
width: 28px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.chat-actions span svg {
font-size: 10px;
color: var(--color-gray-600);
}
.chat-actions span:hover {
border: 1px solid var(--color-gray-300);
background-color: var(--color-gray-100);
}
.chat-actions span:hover svg {
color: var(--color-gray-600);
}
.chat-body {
flex: 1;
overflow-y: auto;
padding: 0px 10px;
}
.chat-body::-webkit-scrollbar {
width: 0;
}
.date-divider {
display: flex;
align-items: center;
text-align: center;
margin: 12px 0;
}
.date-divider::before,
.date-divider::after {
content: "";
flex: 1;
border-bottom: 1px solid var(--color-gray-100);
}
.date-divider span {
padding: 0 10px;
font-size: 10px;
color: var(--color-gray-600);
}
.chat-row {
display: flex;
align-items: flex-end;
margin-bottom: 12px;
gap: 8px;
}
.chat-row.right {
justify-content: flex-end;
}
.customChat-box,
.myChat-box {
max-width: 70%;
padding: 8px 10px;
font-size: 13px;
border-radius: 10px;
position: relative;
line-height: 1.4;
}
.customChat-box {
background-color: var(--color-gray-100);
color: var(--color-black);
border-top-left-radius: 0;
}
.myChat-box {
background-color: var(--color-primary-lighter-50);
color: var(--color-black);
border-top-right-radius: 0;
}
.chat-time {
display: block;
font-size: 9px;
text-align: right;
margin-top: 4px;
color: var(--color-gray-600);
}
.chat-input {
position: sticky;
bottom: 0;
background: var(--color-white);
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.send-btn,
.send-btn:hover,
.send-btn.active {
height: 32px;
width: 35px;
border-radius: 40%;
background: var(--color-primary) !important;
border: none;
color: var(--color-black) !important;
cursor: pointer;
}
.upload-btn,
.upload-btn:hover,
.upload-btn.active {
height: 32px;
width: 35px;
border-radius: 40%;
background: var(--color-white) !important;
border: 1px solid var(--color-gray-300) !important;
color: var(--color-primary) !important;
cursor: pointer;
}
.file-options-dropdown {
position: absolute;
bottom: 80%;
left: 0;
background: var(--color-white);
border: 1px solid var(--color-gray-300);
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 10;
min-width: 120px;
}
.file-options-dropdown .dropdown-item {
display: flex;
align-items: center;
padding: 8px 12px;
width: 100%;
border: none;
background: none;
text-align: left;
cursor: pointer;
}
.file-options-dropdown .dropdown-item:hover {
background-color: var(--color-home-bg);
}
.attachment-preview-container {
display: flex;
gap: 10px;
padding: 5px;
}
.attachment-preview {
width: 80px;
height: 80px;
border: 1px solid #eee;
border-radius: 8px;
position: relative;
padding: 5px;
}
.preview-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.file-icon-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.file-name {
margin-top: 5px;
font-size: 12px;
text-align: center;
color: #555;
}
.remove-btn {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
font-size: 8px;
background: rgb(0 0 0 / 0.6);
color: white;
border-radius: 50%;
padding: 2px 5px;
}
.more-files-box {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-gray-20);
border: 1px solid var(--color-gray-200);
border-radius: 8px;
font-weight: bold;
font-size: 18px;
color: var(--color-gray-900);
}
.more-files-count {
font-size: 18px;
font-weight: 600;
}
/* RIGHT PANEL */
.detail-panel {
height: 82vh;
overflow-y: auto;
border-radius: 8px;
background: var(--color-white);
}
.detail-panel::-webkit-scrollbar {
display: none;
}
/* Header */
.details-header {
display: flex;
justify-content: center;
gap: 4px;
padding: 12px 16px;
font-weight: 600;
border-bottom: 1px solid var(--color-gray-10);
}
.header-icon {
font-size: 18px;
color: var(--text-color);
}
.details-title {
font-size: 14px;
color: var(--color-black);
font-weight: bold;
}
.details-value {
font-size: 13px;
font-weight: 500;
color: var(--color-black);
}
.detailIcon {
color: var(--color-gray-600);
font-size: 14px;
}
.tagsAdd-btn {
background-color: var(--color-gray-100);
color: var(--text-color);
font-weight: bold;
}
.tagsAdd-btn:hover {
background-color: var(--color-gray-100);
color: var(--text-color);
border: 1px solid var(--color-gray-200);
font-weight: bold;
}
.custom-badge {
background: var(--color-primary);
color: var(--color-white);
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.tag-dropdown {
position: absolute;
background: var(--color-white);
border-radius: 6px;
width: 200px;
z-index: 100;
}
.tag-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
}
.tag-item:hover {
background-color: var(--color-gray-200);
}
.tag-item.disabled {
display: none;
}
.tag-color2 {
width: 12px;
height: 12px;
border-radius: 4px;
flex-shrink: 0;
}
.tag-name {
font-size: 14px;
font-weight: 500;
}
.tag-list {
max-height: 120px;
overflow-y: auto;
padding-right: 4px;
}
.tag-list::-webkit-scrollbar {
width: 6px;
}
.tag-list::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.25);
/* background-color: var(--color-gray-200); */
border-radius: 4px;
}
.tag-list::-webkit-scrollbar-track {
background: transparent;
}
.modal-backdrop-custom {
position: fixed;
inset: 0;
background: var(--shadow-sm);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}
.modal-box {
background: var(--color-white);
padding: 16px;
width: 300px;
border-radius: 8px;
}
.color-picker-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.color-circle {
width: 30px;
height: 30px;
border-radius: 35%;
cursor: pointer;
border: 1px solid var(--color-gray-10);
transition: border 0.2s ease-in-out;
}
.color-circle1 {
width: 40px;
height: 37px;
border-radius: 30%;
cursor: pointer;
}
.color-circle.selected {
border: 0.5px solid var(--color-black);
}
/* tags */
.single-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 12px;
padding-left: 5px;
border-radius: 16px;
position: relative;
white-space: nowrap;
gap: 12px;
transition: padding-right 0.25s ease;
font-size: 14px;
font-weight: 500;
cursor: pointer
}
.single-tag:hover {
padding-right: 36px;
}
.delete-tag {
position: absolute;
right: 1px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
font-weight: bold;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
line-height: 1;
}
.single-tag:hover .delete-tag {
opacity: 1;
pointer-events: auto;
}
.tag-text {
color: var(--color-black);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
white-space: nowrap;
padding-left: 5px;
}
.create-tag {
cursor: pointer;
text-align: center;
border: 1px solid var(--color-gray-300);
color: var(--color-black);
padding: 8px 15px;
border-radius: 10px;
}
.create-tag:hover {
cursor: pointer;
text-align: center;
transform: translateY(-1px);
background-color: var(--color-gray-200);
}
.view-edit-btn {
color: var(--text-color);
border: none;
}
.view-edit-btn:hover,
.view-edit-btn:active {
color: var(--text-color);
padding: 5px 10px;
border-radius: 10px;
background-color: var(--color-gray-100);
border: none;
}
.view-edit-btn:focus {
outline: none;
box-shadow: 0 0 0 3px var(--color-gray-100);
}
.delete-box {
background-color: var(--color-error-bg);
padding: 12px 14px;
border-radius: 8px;
font-size: 1px;
color: var(--color-error);
}
.view-delete-btn:focus {
outline: none;
box-shadow: 0 0 0 3px var(--color-gray-100);
}
.view-delete-btn {
color: var(--color-error);
background-color: var(--color-error-bg);
padding: 5px 10px;
border-radius: 7px;
border: none;
}
.view-delete-btn1 {
color: var(--color-error);
background-color: var(--color-error-bg);
padding: 10px 10px;
border-radius: 8px;
border: none;
}
.delete-btn {
color: var(--color-error);
background-color: var(--color-error-bg);
padding: 5px 10px;
border-radius: 7px;
border: none;
}
.NameModal-title {
/* background-color: var(--color-gray-100); */
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
/* Skeleton Loader Start */
@keyframes pulse {
0% {
opacity: 0.6;
}
50% {
opacity: 1;
}
100% {
opacity: 0.6;
}
}
.skeleton-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
margin-bottom: 10px;
border-radius: 10px;
animation: pulse 1.5s infinite ease-in-out;
}
.skeleton-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background: #e3e3e3;
}
.skeleton-lines {
flex: 1;
}
.skeleton-line {
height: 12px;
background: #e3e3e3;
margin-bottom: 8px;
border-radius: 4px;
}
.skeleton-line.short {
width: 30%;
}
.skeleton-line.medium {
width: 60%;
}
.skeleton-line.long {
width: 90%;
}
/* Skeleton Loader End */
.file-message-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
}
.chat-image {
width: 140px;
object-fit: cover;
}
.myChat-box .file-box {
display: flex;
align-items: center;
background: var(--color-primary-lighter-50);
}
.file-title {
font-size: 12px;
font-weight: 500;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.read-more-link {
color: #007bff;
cursor: pointer;
display: block;
margin-top: 5px;
text-align: end;
}
.snippet-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
.snippet-card {
background: var(--color-primary-lighter-50);
max-width: 200px;
}
.snippet-image {
width: 100%;
margin-bottom: 10px;
}
.snippet-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 6px;
}
.snippet-description {
font-size: 13px;
color: var(--color-black);
margin-bottom: 10px;
}
.carousel-container {
position: relative;
display: flex;
align-items: stretch;
}
.carousel-card {
width: 200px;
height: 100%;
background: var(--color-primary-lighter-50);
display: flex;
flex-direction: column;
align-items: stretch;
}
.carousel-arrow {
position: absolute;
top: 50%;
border: none;
background-color: var(--color-gray-100);
border-radius: 50%;
cursor: pointer;
color: var(--text-secondary);
padding: 5px 7px;
}
.carousel-arrow:hover {
background-color: var(--color-primary-lighter);
color: var(--color-primary);
}
.carousel-arrow.left {
left: -25px;
}
.carousel-arrow.right {
right: -25px;
}
.carousel-placeholder {
width: 100%;
height: 100%;
background-color: var(--color-gray-300);
color: var(--color-gray-700);
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-media {
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.carousel-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.carousel-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 6px;
min-height: 1.4em;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.carousel-description {
font-size: 13px;
color: var(--color-black);
margin-bottom: 10px;
min-height: calc(1.2em * 3);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex-grow: 1;
}
.carousel-price {
font-size: 14px;
font-weight: 700;
margin-bottom: 6px;
color: var(--color-gray-800);
min-height: 1.2em;
}
.secondaryButton.invisible {
visibility: hidden;
}
.messageIcon {
background-color: var(--color-primary-lighter-50);
padding: 8px;
border-radius: 10px;
color: var(--text-secondary);
}
.delete-btn,
.delete-btn:hover,
.delete-btn.active {
color: var(--color-error);
background-color: var(--color-error-bg);
padding: 5px 7px;
border-radius: 50%;
border: none;
}
.delete-btn-switch,
.delete-btn-switch:hover,
.delete-btn-switch.active {
color: var(--color-error);
background-color: var(--color-error-bg);
padding: 5px 13px;
border-radius: 50%;
border: none;
}
.info-box {
background-color: var(--color-gray-100);
padding: 15px;
border-radius: 8px;
line-height: 1.8;
}
.form-message {
color: var(--color-gray-800);
}
.replay-media-item {
display: flex;
align-items: center;
justify-content: center;
}
.replay-box img.replay-image {
max-width: 150px;
border-radius: 8px;
}
.question-button {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--color-gray-500);
padding-top: 10px;
padding-bottom: 10px;
}
.question-button:first-child {
border-top: none !important;
padding-top: 0 !important;
}
.message-panel,
.message-panel * {
word-wrap: break-word;
overflow-wrap: anywhere;
word-break: break-word;
}
.audio-box {
background: transparent !important;
padding: 0 !important;
}
.audio-box audio {
background: transparent !important;
padding: 0 !important;
max-width: 100% !important;
}
.audio-box audio::-webkit-media-controls-panel {
background-color: transparent !important;
padding: 0 !important;
}
.audio-box audio::-webkit-media-controls-enclosure {
background-color: transparent !important;
padding: 0 !important;
}
/* Start lead chat Container */
.leadview-chat {
display: flex;
flex-direction: column;
height: 600px; /* total height of the chat section */
border-radius: 12px;
overflow: hidden;
background: var(--color-white) !important;
}
/* Header */
.leadview-chat-header {
background: var(--color-gray-100) !important;
margin-top: 10px !important;
padding: 12px 16px;
display: flex;
/* justify-content: space-between; */
align-items: center;
border-radius: 30px !important;
}
.leadview-chat-header-left {
display: flex;
align-items: center;
}
.leadview-chat-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-primary) !important;
color: var(--color-white) !important;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
margin-right: 8px;
}
.leadview-chat-subtitle {
font-size: 12px;
color: var(--color-gray-600) !important;
}
/* Chat Body */
.leadview-chat-body {
flex-grow: 1;
overflow-y: auto;
padding: 12px 16px;
background: var(--color-white) !important;
scrollbar-width: none;
-ms-overflow-style: none;
}
/* Scrollbar styling (optional) */
.leadview-chat-body::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.leadview-chat-body::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
/* Chat Row */
.leadview-chat-row {
display: flex;
margin-bottom: 12px;
}
.leadview-chat-row.justify-end {
justify-content: flex-end;
}
/* Avatar circle */
.leadview-avatar-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-primary-hover) !important;
color: var(--color-white) !important;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
margin-right: 8px;
}
.leadview-chat-row.justify-end .leadview-avatar-circle {
margin-left: 8px;
margin-right: 0;
}
.leadview-avatar-circle1 {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-error) !important;
color: var(--color-white) !important;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
margin-right: 8px;
}
.leadview-chat-row.justify-end .leadview-avatar-circle1 {
margin-left: 8px;
margin-right: 0;
}
/* Chat Boxes */
.leadview-chat-box {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
padding: 8px 12px;
border-radius: 12px;
max-width: 70%;
}
.leadview-chat-box.agent {
background: var(--color-primary-lighter-50) !important;
align-self: flex-end;
}
.leadview-chat-box.user {
background: var(--color-gray-100) !important;
}
.leadview-chat-time {
font-size: 10px;
color: var(--color-gray-700);
align-self: flex-end;
margin-top: 4px;
}
.leadview-chat {
display: flex;
flex-direction: column;
height: 520px !important;
}
.leadview-chat-header {
flex-shrink: 0;
}
.leadview-chat-body {
flex: 1;
overflow-y: auto;
padding: 12px 16px;
}
/* End lead chat */
.textPrimary {
color: var(--color-primary);
padding: 0 !important;
}
.detail-panel .form-control {
height: 30px;
border-radius: 5px !important;
}
/* Inbox List */
.inbox-tabs {
border: none !important;
gap: 15px;
}
.inbox-tabs .nav-link {
border: none !important;
background: transparent !important;
color: var(--color-gray-700);
font-weight: 700;
padding: 12px 0;
position: relative;
font-size: 14px;
}
.inbox-tabs .nav-link:hover {
color: var(--color-primary);
}
.inbox-tabs .nav-link.active {
background: transparent !important;
border: none !important;
color: var(--color-black) !important;
font-weight: 800 !important;
}
.inbox-tabs .nav-link.active::after {
content: "";
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 2px;
background: var(--color-primary);
border-radius: 2px;
}
.inbox-dropdown {
cursor: pointer !important;
}
.inbox-dropdown:hover {
background-color: var(--color-gray-300);
}
.createStatus {
border: 1px solid var(--color-gray-200);
color: var(--color-black);
border-radius: 10px;
padding: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.inboxList .form-check-input:checked {
background-color: var(--color-primary) !important;
border: 1px solid var(--color-primary-active);
}
.call-detail-scroll {
height: 520px; /* fixed height */
overflow-y: auto;
overflow-x: hidden;
padding: 20px;
}
/* Hide scrollbar for Chrome, Edge, Safari */
.call-detail-scroll::-webkit-scrollbar {
width: 0px;
background: transparent;
}
/* Hide scrollbar for Firefox */
.call-detail-scroll {
scrollbar-width: none;
}
/* Hide scrollbar for IE */
.call-detail-scroll {
-ms-overflow-style: none;
}
.wave-container {
display: flex;
align-items: center;
gap: 3px;
height: 60px;
}
.wave-bar {
width: 4px;
background: #4f46e5;
border-radius: 2px;
animation: waveAnim 1.2s infinite ease-in-out;
}
.wave-bar:nth-child(2) { animation-delay: 0.1s }
.wave-bar:nth-child(3) { animation-delay: 0.2s }
.wave-bar:nth-child(4) { animation-delay: 0.3s }
.wave-bar:nth-child(5) { animation-delay: 0.4s }
.wave-bar:nth-child(6) { animation-delay: 0.5s }
@keyframes waveAnim {
0%, 100% { height: 10px }
50% { height: 50px }
}
/*!
* Quill Editor v2.0.3
* https://quilljs.com
* Copyright (c) 2017-2024, Slab
* Copyright (c) 2014, Jason Chen
* Copyright (c) 2013, salesforce.com
*/
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}
/*# sourceMappingURL=quill.snow.css.map*//* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
direction: ltr;
--xy-edge-stroke-default: #b1b1b7;
--xy-edge-stroke-width-default: 1;
--xy-edge-stroke-selected-default: #555;
--xy-connectionline-stroke-default: #b1b1b7;
--xy-connectionline-stroke-width-default: 1;
--xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
--xy-minimap-background-color-default: #fff;
--xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
--xy-minimap-mask-stroke-color-default: transparent;
--xy-minimap-mask-stroke-width-default: 1;
--xy-minimap-node-background-color-default: #e2e2e2;
--xy-minimap-node-stroke-color-default: transparent;
--xy-minimap-node-stroke-width-default: 2;
--xy-background-color-default: transparent;
--xy-background-pattern-dots-color-default: #91919a;
--xy-background-pattern-lines-color-default: #eee;
--xy-background-pattern-cross-color-default: #e2e2e2;
background-color: var(--xy-background-color, var(--xy-background-color-default));
--xy-node-color-default: inherit;
--xy-node-border-default: 1px solid #1a192b;
--xy-node-background-color-default: #fff;
--xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
--xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
--xy-node-border-radius-default: 3px;
--xy-handle-background-color-default: #1a192b;
--xy-handle-border-color-default: #fff;
--xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
--xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
--xy-controls-button-background-color-default: #fefefe;
--xy-controls-button-background-color-hover-default: #f4f4f4;
--xy-controls-button-color-default: inherit;
--xy-controls-button-color-hover-default: inherit;
--xy-controls-button-border-color-default: #eee;
--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
--xy-edge-label-background-color-default: #ffffff;
--xy-edge-label-color-default: inherit;
--xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
--xy-edge-stroke-default: #3e3e3e;
--xy-edge-stroke-width-default: 1;
--xy-edge-stroke-selected-default: #727272;
--xy-connectionline-stroke-default: #b1b1b7;
--xy-connectionline-stroke-width-default: 1;
--xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
--xy-minimap-background-color-default: #141414;
--xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
--xy-minimap-mask-stroke-color-default: transparent;
--xy-minimap-mask-stroke-width-default: 1;
--xy-minimap-node-background-color-default: #2b2b2b;
--xy-minimap-node-stroke-color-default: transparent;
--xy-minimap-node-stroke-width-default: 2;
--xy-background-color-default: #141414;
--xy-background-pattern-dots-color-default: #555;
--xy-background-pattern-lines-color-default: #333;
--xy-background-pattern-cross-color-default: #333;
--xy-node-color-default: #f8f8f8;
--xy-node-border-default: 1px solid #3c3c3c;
--xy-node-background-color-default: #1e1e1e;
--xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
--xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
--xy-handle-background-color-default: #bebebe;
--xy-handle-border-color-default: #1e1e1e;
--xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
--xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
--xy-controls-button-background-color-default: #2b2b2b;
--xy-controls-button-background-color-hover-default: #3e3e3e;
--xy-controls-button-color-default: #f8f8f8;
--xy-controls-button-color-hover-default: #fff;
--xy-controls-button-border-color-default: #5b5b5b;
--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
--xy-edge-label-background-color-default: #141414;
--xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
pointer-events: none;
z-index: -1;
}
.react-flow__container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.react-flow__pane {
z-index: 1;
touch-action: none;
}
.react-flow__pane.draggable {
cursor: grab;
}
.react-flow__pane.dragging {
cursor: grabbing;
}
.react-flow__pane.selection {
cursor: pointer;
}
.react-flow__viewport {
transform-origin: 0 0;
z-index: 2;
pointer-events: none;
}
.react-flow__renderer {
z-index: 4;
}
.react-flow__selection {
z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
outline: none;
}
.react-flow__edge-path {
stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
fill: none;
}
.react-flow__connection-path {
stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
fill: none;
}
.react-flow .react-flow__edges {
position: absolute;
}
.react-flow .react-flow__edges svg {
overflow: visible;
position: absolute;
pointer-events: none;
}
.react-flow__edge {
pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
cursor: pointer;
}
.react-flow__edge.animated path {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
.react-flow__edge.animated path.react-flow__edge-interaction {
stroke-dasharray: none;
animation: none;
}
.react-flow__edge.inactive {
pointer-events: none;
}
.react-flow__edge.selected,
.react-flow__edge:focus,
.react-flow__edge:focus-visible {
outline: none;
}
.react-flow__edge.selected .react-flow__edge-path,
.react-flow__edge.selectable:focus .react-flow__edge-path,
.react-flow__edge.selectable:focus-visible .react-flow__edge-path {
stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
}
.react-flow__edge-textwrapper {
pointer-events: all;
}
.react-flow__edge .react-flow__edge-text {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
pointer-events: none;
}
.react-flow__connection .animated {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
svg.react-flow__connectionline {
z-index: 1001;
overflow: visible;
position: absolute;
}
.react-flow__nodes {
pointer-events: none;
transform-origin: 0 0;
}
.react-flow__node {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
box-sizing: border-box;
cursor: default;
}
.react-flow__node.selectable {
cursor: pointer;
}
.react-flow__node.draggable {
cursor: grab;
pointer-events: all;
}
.react-flow__node.draggable.dragging {
cursor: grabbing;
}
.react-flow__nodesselection {
z-index: 3;
transform-origin: left top;
pointer-events: none;
}
.react-flow__nodesselection-rect {
position: absolute;
pointer-events: all;
cursor: grab;
}
.react-flow__handle {
position: absolute;
pointer-events: none;
min-width: 5px;
min-height: 5px;
width: 6px;
height: 6px;
background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
border-radius: 100%;
}
.react-flow__handle.connectingfrom {
pointer-events: all;
}
.react-flow__handle.connectionindicator {
pointer-events: all;
cursor: crosshair;
}
.react-flow__handle-bottom {
top: auto;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
}
.react-flow__handle-top {
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
.react-flow__handle-left {
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
.react-flow__handle-right {
top: 50%;
right: 0;
transform: translate(50%, -50%);
}
.react-flow__edgeupdater {
cursor: move;
pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
pointer-events: none;
}
.react-flow__panel {
position: absolute;
z-index: 5;
margin: 15px;
}
.react-flow__panel.top {
top: 0;
}
.react-flow__panel.bottom {
bottom: 0;
}
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
left: 50%;
transform: translateX(-15px) translateX(-50%);
}
.react-flow__panel.left {
left: 0;
}
.react-flow__panel.right {
right: 0;
}
.react-flow__panel.left.center, .react-flow__panel.right.center {
top: 50%;
transform: translateY(-15px) translateY(-50%);
}
.react-flow__attribution {
font-size: 10px;
background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
padding: 2px 3px;
margin: 0;
}
.react-flow__attribution a {
text-decoration: none;
color: #999;
}
@keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
.react-flow__edgelabel-renderer {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
left: 0;
top: 0;
}
.react-flow__viewport-portal {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.react-flow__minimap {
background: var(
--xy-minimap-background-color-props,
var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
);
}
.react-flow__minimap-svg {
display: block;
}
.react-flow__minimap-mask {
fill: var(
--xy-minimap-mask-background-color-props,
var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
);
stroke: var(
--xy-minimap-mask-stroke-color-props,
var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
);
stroke-width: var(
--xy-minimap-mask-stroke-width-props,
var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
);
}
.react-flow__minimap-node {
fill: var(
--xy-minimap-node-background-color-props,
var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
);
stroke: var(
--xy-minimap-node-stroke-color-props,
var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
);
stroke-width: var(
--xy-minimap-node-stroke-width-props,
var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
);
}
.react-flow__background-pattern.dots {
fill: var(
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
);
}
.react-flow__background-pattern.lines {
stroke: var(
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
);
}
.react-flow__background-pattern.cross {
stroke: var(
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
);
}
.react-flow__controls {
display: flex;
flex-direction: column;
box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
flex-direction: row;
}
.react-flow__controls-button {
display: flex;
justify-content: center;
align-items: center;
height: 26px;
width: 26px;
padding: 4px;
border: none;
background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
border-bottom: 1px solid
var(
--xy-controls-button-border-color-props,
var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
);
color: var(
--xy-controls-button-color-props,
var(--xy-controls-button-color, var(--xy-controls-button-color-default))
);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.react-flow__controls-button svg {
width: 100%;
max-width: 12px;
max-height: 12px;
fill: currentColor;
}
.react-flow__edge.updating .react-flow__edge-path {
stroke: #777;
}
.react-flow__edge-text {
font-size: 10px;
}
.react-flow__node.selectable:focus,
.react-flow__node.selectable:focus-visible {
outline: none;
}
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
padding: 10px;
border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
width: 150px;
font-size: 12px;
color: var(--xy-node-color, var(--xy-node-color-default));
text-align: center;
border: var(--xy-node-border, var(--xy-node-border-default));
background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
}
.react-flow__node-input.selectable.selected,
.react-flow__node-input.selectable:focus,
.react-flow__node-input.selectable:focus-visible,
.react-flow__node-default.selectable.selected,
.react-flow__node-default.selectable:focus,
.react-flow__node-default.selectable:focus-visible,
.react-flow__node-output.selectable.selected,
.react-flow__node-output.selectable:focus,
.react-flow__node-output.selectable:focus-visible,
.react-flow__node-group.selectable.selected,
.react-flow__node-group.selectable:focus,
.react-flow__node-group.selectable:focus-visible {
box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
}
.react-flow__node-group {
background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible,
.react-flow__selection:focus,
.react-flow__selection:focus-visible {
outline: none;
}
.react-flow__controls-button:hover {
background: var(
--xy-controls-button-background-color-hover-props,
var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
);
color: var(
--xy-controls-button-color-hover-props,
var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
);
}
.react-flow__controls-button:disabled {
pointer-events: none;
}
.react-flow__controls-button:disabled svg {
fill-opacity: 0.4;
}
.react-flow__controls-button:last-child {
border-bottom: none;
}
.react-flow__controls.horizontal .react-flow__controls-button {
border-bottom: none;
border-right: 1px solid
var(
--xy-controls-button-border-color-props,
var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
);
}
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
border-right: none;
}
.react-flow__resize-control {
position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
width: 5px;
height: 5px;
border: 1px solid #fff;
border-radius: 1px;
background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
left: 0;
top: 50%;
}
.react-flow__resize-control.handle.right {
left: 100%;
top: 50%;
}
.react-flow__resize-control.handle.top {
left: 50%;
top: 0;
}
.react-flow__resize-control.handle.bottom {
left: 50%;
top: 100%;
}
.react-flow__resize-control.handle.top.left {
left: 0;
}
.react-flow__resize-control.handle.bottom.left {
left: 0;
}
.react-flow__resize-control.handle.top.right {
left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
border-width: 0;
border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
width: 1px;
transform: translate(-50%, 0);
top: 0;
height: 100%;
}
.react-flow__resize-control.line.left {
left: 0;
border-left-width: 1px;
}
.react-flow__resize-control.line.right {
left: 100%;
border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
height: 1px;
transform: translate(0, -50%);
left: 0;
width: 100%;
}
.react-flow__resize-control.line.top {
top: 0;
border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
border-bottom-width: 1px;
top: 100%;
}
.react-flow__edge-textbg {
fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}
/* ════════════════════════════════════════════════════════════════
GRADIENT DESIGN SYSTEM — Flow Node
════════════════════════════════════════════════════════════════ */
:root {
/* ── Core Brand Gradients ── */
--grad-primary: linear-gradient(90deg, #7A2CF3 0%, #B94CE8 45%, #F58B69 100%);
--grad-primary-hover: linear-gradient(90deg, #6B1FE8 0%, #A63DDF 45%, #EE7A57 100%);
--grad-primary-disabled: linear-gradient(90deg, #B8A7E8 0%, #D2B7E6 45%, #E7C6B8 100%);
--grad-soft: linear-gradient(135deg, rgba(122, 44, 243, 0.10) 0%, rgba(185, 76, 232, 0.07) 50%, rgba(245, 139, 105, 0.08) 100%);
--grad-node-start: linear-gradient(135deg, rgba(122, 44, 243, 0.18) 0%, rgba(185, 76, 232, 0.12) 100%);
--grad-node-end: linear-gradient(135deg, rgba(245, 139, 105, 0.22) 0%, rgba(238, 122, 87, 0.15) 100%);
--grad-node-common: linear-gradient(135deg, rgba(185, 76, 232, 0.14) 0%, rgba(245, 139, 105, 0.10) 100%);
/* ── Solid Stops ── */
--clr-purple: #7A2CF3;
--clr-purple-dark: #6B1FE8;
--clr-violet: #B94CE8;
--clr-peach: #F58B69;
--clr-peach-dark: #EE7A57;
/* ── Tints ── */
--clr-purple-08: rgba(122, 44, 243, 0.08);
--clr-purple-12: rgba(122, 44, 243, 0.12);
--clr-purple-18: rgba(122, 44, 243, 0.18);
--clr-peach-10: rgba(245, 139, 105, 0.10);
--clr-peach-22: rgba(245, 139, 105, 0.22);
/* ── Node Colors ── */
--node-header-bg-primary: rgba(122, 44, 243, 0.18);
--node-header-bg-primary-1: rgba(245, 139, 105, 0.22);
--node-header-bg-secondary: rgba(185, 76, 232, 0.14);
--node-text: #151515;
/* ── Status ── */
--color-success: #1fc16b;
--color-success-bg: #c2f7db;
--color-warning: #f59e0b;
--color-warning-bg: #fef9c3;
--color-error: #ef4444;
--color-error-bg: #ffe7e8;
--color-info-bg: #d9eaff;
--color-info: #0054a6;
/* ── Neutrals ── */
--color-home-bg: #f5f5f2;
--color-white: #ffffff;
--color-black: #000000;
--color-gray-50: #f9fafb;
--color-gray-100: #f8f8f7;
--color-gray-200: #e2e2e2;
--color-gray-300: #d1d1d1;
--color-gray-400: #b5b5b5;
--color-gray-500: #9a9a9a;
--color-gray-600: #7d7d7d;
--color-gray-700: #626262;
--color-gray-800: #4a4a4a;
--bg-card: #ffffff;
--border-color: #e2e2e2;
--text-muted: #9a9a9a;
--text-secondary: #7d7d7d;
/* ── Shadows ── */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* ── Email Preview ── */
--email-btn-bg: #1a73e8;
/* ── WhatsApp ── */
--color-whatsapp: #25d366;
--color-whatsapp-darker: #17d35c;
--color-whatsapp-lighter: #dcf8c6;
/* ── Discard ── */
--discard-bg-color: rgba(245, 139, 105, 0.15);
}
/* ════════════════════
REACT FLOW OVERRIDES
════════════════════ */
.react-flow__attribution a {
display: none !important;
}
.react-flow__handle {
background-color: #9b9b9b;
}
/* ════════════════════
FLOW NODE BASE
════════════════════ */
.flow-node {
width: 190px;
background: var(--color-white);
border-radius: 18px;
padding: 0;
border: 1px solid var(--border-color);
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.08);
font-family: sans-serif;
position: relative;
}
.flow-node-header {
text-align: center;
gap: 6px;
padding: 8px 14px;
border-radius: 18px;
font-weight: 600;
font-size: 14px;
}
.node-icon {
font-size: 23px !important;
}
.node-name {
font-size: 20px;
}
.custom-out-dotes {
position: relative;
top: -8px;
background: #ffffff;
border: 2px solid var(--clr-peach);
width: 8px;
height: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.flow-node-content {
padding: 16px;
}
.flow-node-content h3 {
margin: 0;
font-size: 14px;
}
.flow-node-content p {
margin: 6px 0 0;
font-size: 12px;
color: var(--text-muted);
}
.flow-node-handle {
background: #9c9c9c !important;
width: 7px !important;
height: 7px !important;
border-radius: 50%;
border: 2px solid var(--clr-peach);
}
/* Hover / delete */
.node-hover-container {
position: relative;
}
.node-delete-btn {
position: absolute;
top: -10px;
right: -10px;
width: 26px;
height: 26px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
color: var(--color-error);
cursor: pointer;
opacity: 0;
transform: scale(0.8);
pointer-events: none;
z-index: 999;
transition: opacity 0.2s ease, transform 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.node-hover-container:hover .node-delete-btn {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.node-delete-btn:hover {
background-color: var(--color-error-bg);
}
/* ── Node Themes ── */
.node-start {
border-color: rgba(122, 44, 243, 0.3);
}
.node-start .flow-node-header {
background: var(--grad-node-start);
color: var(--node-text);
}
.node-common-color {
border-color: rgba(185, 76, 232, 0.25);
}
.node-common-color .flow-node-header {
background: var(--grad-node-common);
color: var(--node-text);
}
.node-end {
border-color: rgba(245, 139, 105, 0.3);
}
.node-end .flow-node-header {
background: var(--grad-node-end);
color: var(--color-black);
}
/* ── Node Button ── */
.nodeButton {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--grad-primary);
color: #fff;
border: none;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
transition: 0.15s ease;
}
.nodeButton:hover {
opacity: 0.88;
}
.nodeButton:active {
opacity: 1;
transform: scale(0.9);
}
/* ════════════════════
COMPACT MODAL
════════════════════ */
.compact-modal .modal-dialog {
max-width: 650px;
}
.compact-node-body {
padding: 18px 18px !important;
}
.compact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.compact-card {
background: var(--color-gray-50);
border: 1px solid var(--border-color);
padding: 14px 6px;
border-radius: 20px;
cursor: pointer;
text-align: center;
transition: 0.15s ease;
box-shadow: var(--shadow-sm);
}
.compact-card:hover {
background: rgba(122, 44, 243, 0.06);
border-color: rgba(122, 44, 243, 0.3);
transform: translateY(-2px);
}
.compact-icon {
font-size: 22px;
margin-bottom: 4px;
}
.compact-label {
font-size: 13px;
font-weight: 500;
color: var(--color-black);
margin: 0;
}
/* ════════════════════
SIMULATOR
════════════════════ */
.simulator-wrapper {
display: flex;
flex-direction: column;
height: 100%;
background: var(--bg-card);
border-left: 1px solid var(--border-color);
padding: 5px;
}
.simulator-header {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 12px;
padding: 6px 0;
}
.sim-title {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--color-gray-600);
}
.sim-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 12px;
border: none;
cursor: pointer;
font-size: 12px;
box-shadow: var(--shadow-sm);
transition: 0.2s ease;
}
.sim-start {
background: var(--grad-primary);
color: #fff;
}
.sim-start:hover {
opacity: 0.88;
}
.sim-stop {
background: var(--color-error-bg);
color: var(--color-error);
}
.sim-reset {
background: var(--color-gray-100);
color: var(--text-secondary);
}
.sim-reset:hover {
background: var(--color-gray-200);
}
.sim-chat-area {
position: relative;
flex: 1;
padding: 12px;
background: var(--color-gray-50);
border-radius: 16px;
border: 1px solid var(--border-color);
overflow-y: auto;
}
.sim-info-floating {
position: absolute;
bottom: 12px;
left: 12px;
width: 32px;
height: 32px;
color: var(--color-gray-700);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s;
}
.sim-info-floating:hover {
background: var(--color-info);
color: white;
}
.sim-msg-bot,
.sim-msg-user {
display: flex;
margin-bottom: 10px;
}
.sim-msg-user {
justify-content: flex-end;
}
.msg-bubble {
padding: 8px 14px;
border-radius: 14px;
max-width: 80%;
box-shadow: var(--shadow-sm);
font-size: 13px;
white-space: pre-wrap;
}
.sim-msg-bot .msg-bubble {
background: var(--color-white);
border: 1px solid var(--border-color);
}
.sim-msg-user .msg-bubble {
background: var(--grad-primary);
color: white;
}
.sim-choices {
margin-top: 10px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.choice-btn {
padding: 6px 12px;
border-radius: 10px;
background: rgba(122, 44, 243, 0.08);
border: 1px solid rgba(122, 44, 243, 0.25);
cursor: pointer;
transition: 0.2s;
}
.choice-btn:hover {
background: var(--grad-primary);
color: #fff;
border-color: transparent;
}
.attr-btn {
position: absolute;
right: 10px;
top: 34px;
background: var(--color-gray-200);
border: none;
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
}
.attr-btn-new {
position: absolute;
right: 44px;
top: 9px;
background: var(--color-gray-200);
border: none;
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
}
.attr-btn1 {
position: absolute;
right: 10px;
top: 10px;
background: var(--color-gray-200);
border: none;
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
}
.attribute-box {
position: absolute;
right: 0;
top: 95px;
width: 230px;
background: var(--color-white);
border-radius: 10px;
box-shadow: var(--shadow-sm);
padding: 10px;
z-index: 100;
}
.attr-item {
padding: 6px;
cursor: pointer;
border-radius: 5px;
}
.attr-item:hover {
background: var(--color-gray-100);
}
.attr-chip {
cursor: pointer;
}
.attribute-dropdown {
position: absolute;
top: 50%;
right: 0;
z-index: 9999;
background: var(--color-white);
padding: 10px;
border-radius: 6px;
box-shadow: var(--shadow-sm);
}
/* ════════════════════
NODE LIST
════════════════════ */
.node-list-body {
padding: 20px;
}
.node-list-item {
display: flex;
justify-content: space-between;
align-items: center;
background: #f7f7f7;
padding: 8px 14px;
border-radius: 10px;
margin-bottom: 12px;
cursor: pointer;
transition: 0.2s ease;
}
.node-list-item:hover {
background: #ececec;
}
.node-left {
display: flex;
align-items: center;
gap: 14px;
}
.node-label {
font-size: 13px;
font-weight: 600;
color: #222;
}
.node-right-arrow {
color: #999;
}
.node-text-block {
display: flex;
flex-direction: column;
}
.node-desc {
font-size: 12px;
color: #8a8a8a;
margin-top: 2px;
}
.no-results {
text-align: center;
padding: 20px 0;
color: #999;
font-size: 14px;
}
.tag-btns {
background-color: rgba(185, 76, 232, 0.12);
color: #000;
}
.searchHeader {
display: flex;
align-items: center;
padding: 12px 20px;
gap: 10px;
}
.nodeSearchInput {
width: 100%;
padding: 8px 12px;
border-radius: 6px;
border: 1px solid #dcdcdc;
font-size: 14px;
outline: none;
}
.nodeSearchInput:focus {
border-color: rgba(122, 44, 243, 0.5);
}
/* ════════════════════
RIGHT TOOLBAR
════════════════════ */
.ui-right-toolbar {
position: absolute;
right: 12px;
top: 90px;
display: flex;
flex-direction: column;
gap: 14px;
z-index: 20;
}
.ui-right-toolbar button {
width: 42px;
height: 42px;
border-radius: 12px;
border: 1px solid #ddd;
background: #fff;
cursor: pointer;
font-size: 18px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.ui-right-toolbar button:hover {
background: rgba(122, 44, 243, 0.06);
}
/* ════════════════════
SIMULATOR OFFCANVAS
════════════════════ */
.simulator-offcanvas {
position: fixed;
top: 0;
right: -320px;
width: 320px;
height: 100vh;
background: #fff;
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.15);
transition: right 0.3s ease;
z-index: 999;
display: flex;
flex-direction: column;
}
.simulator-offcanvas.open {
right: 0;
}
.sim-header {
padding: 14px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
/* ════════════════════
EMAIL
════════════════════ */
.email-title {
font-size: 22px;
font-weight: bold;
}
.email-content {
font-size: 16px;
color: var(--color-gray-700);
}
.email-cta-btn {
background-color: var(--email-btn-bg);
color: var(--color-white);
padding: 8px 25px;
border-radius: 3px;
font-weight: bold;
text-decoration: none;
display: inline-block;
}
.email-cta-btn:hover {
color: var(--node-text);
background-color: var(--color-white);
border: 1px solid var(--email-btn-bg);
}
.codeConsoleBg {
background-color: rgba(122, 44, 243, 0.07);
padding: 8px 10px;
font-size: 11px;
margin-top: 3px;
border-radius: 4px;
color: var(--color-error);
}
/* ════════════════════
THEME TOGGLE
════════════════════ */
.theme-toggle {
position: relative;
width: 58px;
height: 28px;
border-radius: 20px;
border: 1px solid var(--border-color);
background: var(--bg-card);
cursor: pointer;
padding: 0 6px;
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
}
.theme-toggle .icon {
font-size: 14px;
width: 18px;
text-align: center;
z-index: 3;
pointer-events: none;
}
.theme-toggle .sun,
.theme-toggle .moon {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.theme-toggle .sun {
opacity: 0;
transform: scale(0);
}
.theme-toggle .moon {
opacity: 1;
transform: scale(1);
}
.theme-toggle.active .sun {
opacity: 1;
transform: scale(1);
}
.theme-toggle.active .moon {
opacity: 0;
transform: scale(0);
}
.theme-toggle .slider {
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--grad-primary);
transition: transform 0.25s ease;
z-index: 1;
}
.theme-toggle.active .slider {
transform: translateX(28px);
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12.5px;
font-family: "Nunito", sans-serif;
}
:root {
/* ===== PRIMARY GRADIENT SYSTEM ===== */
/* Default / Active */
--color-primary: linear-gradient(
90deg,
#7a2cf3 0%,
#b94ce8 45%,
#f58b69 100%
);
/* Hover */
--color-primary-hover: linear-gradient(
90deg,
#6b1fe8 0%,
#a63ddf 45%,
#ee7a57 100%
);
/* Active/Pressed */
--color-primary-active: linear-gradient(
90deg,
#7a2cf3 0%,
#b94ce8 45%,
#f58b69 100%
);
/* Disabled */
--color-primary-disabled: linear-gradient(
90deg,
#b8a7e8 0%,
#d2b7e6 45%,
#e7c6b8 100%
);
/* Darker variant */
--color-primary-darker: linear-gradient(
90deg,
#6518e0 0%,
#a03ad0 45%,
#e0724f 100%
);
/* Primary Solid Colors (for backgrounds, badges, fills where gradient can't be used) */
--color-primary-solid: #7a2cf3;
--color-primary-solid-mid: #b94ce8;
--color-primary-solid-end: #f58b69;
--color-primary-solid-hover: #6b1fe8;
--color-primary-solid-disabled: #b8a7e8;
/* Primary Light Tints (backgrounds, subtle fills) */
--color-primary-lighter: #e8d5fc;
/* soft violet tint */
--color-primary-lighter-50: #f0e6fd;
/* very light violet */
--color-primary-lighter-10: rgba(122, 44, 243, 0.07);
/* ultra-light tint */
/* Primary Text Disabled */
--color-primary-text-disabled: #9b8ab5;
/* ===== BRAND BACKGROUND ===== */
--color-home-bg: #f5f5f2;
/* ===== SECONDARY / ACCENT COLORS ===== */
--color-secondary: #c8161d;
--color-secondary-light: #e03a3f;
--color-secondary-dark: #9f1217;
--color-secondary-hover: #b8141b;
--color-secondary-active: #8f1115;
--color-secondary-disabled: #e8b4b6;
--color-secondary-text-disabled: #7a7a7a;
/* ===== STATUS COLORS ===== */
--color-success: #1fc16b;
--color-success-bg: #c2f7db;
--color-success-bg-50: #e1fbed;
--color-warning: #f59e0b;
--color-warning-bg: #fef9c3;
--color-error-bg: #ffe7e8;
--color-error: #fb3748;
--color-info-bg: #d9eaff;
--color-info: #0054a6;
--discard-bg-color: #fce9eb;
/* ===== WHATSAPP ===== */
--color-whatsapp: #25d366;
--color-whatsapp-darker: #17d35c;
--color-whatsapp-lighter: #dcf8c6;
/* ===== GRAYSCALE ===== */
--color-white: #ffffff;
--color-black: #000000;
--text-color: #3d3d3d;
--color-gray-10: #f5f5f5;
--color-gray-20: #f8f8f8;
--color-gray-50: #f9fafb;
--color-gray-100: #f8f8f7;
--color-gray-150: #eae8e8;
--color-gray-200: #e2e2e2;
--color-gray-300: #d1d1d1;
--color-gray-400: #b5b5b5;
--color-gray-500: #9a9a9a;
--color-gray-600: #7d7d7d;
--color-gray-700: #626262;
--color-gray-800: #4a4a4a;
--color-gray-900: #3333;
--view-heading-color: #5d5d5d;
--color-color-1000: rgba(138, 137, 137, 0.2);
/* ===== BACKGROUND & BORDER ===== */
--bg-body: var(--color-gray-50);
--bg-card: var(--color-white);
--border-color: var(--color-gray-200);
/* ===== TEXT COLORS ===== */
--text-primary: var(--color-gray-900);
--text-secondary: var(--color-gray-600);
--text-muted: var(--color-gray-500);
/* ===== SHADOWS ===== */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* ===== CARD OVERLAY ===== */
--preview: rgba(15, 15, 15, 0.55);
--option-color: #6c757d;
--option-bg: #f8f9fa;
--select-option: #e9ecef;
--select-color: #212529;
}
/* ===== GRADIENT UTILITY CLASSES ===== */
.gradient-bg {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
}
.gradient-text {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.minHeightContainer {
min-height: 65vh;
border: none;
}
.form-control,
.form-select {
background-color: var(--color-white) !important;
border-radius: 12px !important;
padding: 10px;
font-size: 15px;
transition: all 0.2s ease-in-out;
}
.form-control:focus {
border-color: var(--color-primary-solid) !important;
box-shadow: 0 0 0 3px rgba(122, 44, 243, 0.18) !important;
background-color: var(--color-white) !important;
}
/* Login Start */
.login-hero {
background: linear-gradient(135deg, #7a2cf3, #b94ce8, #f58b69);
color: var(--color-white);
position: relative;
overflow: hidden;
background-image:
radial-gradient(
circle at 10% 20%,
rgba(255, 255, 255, 0.1) 0%,
transparent 20%
),
radial-gradient(
circle at 90% 80%,
rgba(255, 255, 255, 0.1) 0%,
transparent 20%
);
}
.hero-overlay {
background: var(--color-home-bg);
}
.features-carousel {
transition: var(--transition);
}
.feature-highlight h3 {
font-weight: 900;
}
.feature-indicators .indicator {
width: 10px;
height: 10px;
background-color: var(--color-gray-300);
border-radius: 50%;
border: none;
transition: all 0.25s ease;
}
.feature-indicators .indicator.active {
width: 20px;
height: 9px;
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
border-radius: 20px;
}
/* Right side login Section */
.login-subtitle {
color: var(--color-black);
}
.login-box {
background: var(--color-white);
padding: 40px 30px;
}
@media (min-width: 768px) {
.login-box {
min-height: 100vh;
}
}
.login-inner {
width: 100%;
max-width: 440px;
padding-top: 10px;
}
.login-title {
font-size: 30px;
font-weight: 900;
color: var(--color-black);
}
.login-subtitle {
font-size: 14px;
color: var(--text-secondary);
}
.input-box {
background: var(--color-gray-200);
padding: 12px 14px;
border-radius: 8px;
font-size: 14px;
color: var(--color-black);
}
.input-box::placeholder {
color: var(--text-muted);
}
.input-box:focus {
box-shadow: 0 0 0 2px var(--color-primary-solid);
}
.password-eye {
position: absolute;
right: 30px;
top: 9px;
cursor: pointer;
color: var(--color-gray-600);
font-size: 18px;
}
.login-or {
font-size: 14px;
color: var(--text-muted);
}
/* Social media */
.social-btn {
border: 1px solid var(--color-gray-400);
padding: 10px;
border-radius: 8px;
font-size: 10px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
gap: 1px;
background: var(--color-white);
width: 100%;
transition: 0.2s ease;
}
.social-btn img {
display: block;
height: 16px;
}
.social-btn:hover {
border: 1px solid var(--color-gray-600) !important;
background: var(--color-gray-100);
}
.login-forgot {
color: var(--color-secondary);
text-decoration: none;
font-weight: 500;
cursor: pointer;
}
.login-forgot:hover {
text-decoration: underline;
cursor: pointer;
}
.login-bottom-text {
font-size: 13px;
color: var(--text-secondary);
}
.login-bottom-text a {
color: var(--color-secondary);
text-decoration: none;
font-weight: 600;
}
.login-bottom-text a:hover {
text-decoration: underline;
}
/* Login End */
/* ===== BUTTONS START ===== */
.primaryButton {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
color: var(--color-white);
border-radius: 7px;
padding: 8px;
font-size: 15px;
font-weight: 900 !important;
border: none;
}
.primaryButton:hover {
background: linear-gradient(90deg, #6b1fe8 0%, #a63ddf 45%, #ee7a57 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(122, 44, 243, 0.35);
border-radius: 10px;
color: var(--color-white);
}
.primaryButton:active {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
transform: translateY(0);
box-shadow: none;
color: var(--color-white);
}
.primaryButton:disabled,
.primaryButton[disabled] {
background: linear-gradient(90deg, #b8a7e8 0%, #d2b7e6 45%, #e7c6b8 100%);
color: var(--color-primary-text-disabled);
cursor: not-allowed;
opacity: 0.7;
transform: none;
box-shadow: none;
}
.form-label {
font-size: 12px;
}
.border-btn {
border: 1px solid var(--color-primary-solid);
color: var(--color-primary-solid);
border-radius: 8px;
padding: 6px;
font-size: 12px;
font-weight: 700 !important;
background: transparent;
}
.border-btn:hover {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
color: var(--color-white);
border-color: transparent;
border-radius: 8px;
padding: 6px;
font-size: 12px;
font-weight: 700 !important;
}
.add-btn {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
color: var(--color-white);
border-radius: 8px;
padding: 8px 10px;
font-size: 12px;
font-weight: 700 !important;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
border: none;
}
.add-btn:hover,
.add-btn.active {
background: linear-gradient(
90deg,
#6b1fe8 0%,
#a63ddf 45%,
#ee7a57 100%
) !important;
color: var(--color-white) !important;
transform: translateY(-1px);
box-shadow: 0 5px 15px rgba(122, 44, 243, 0.35);
}
.secondaryButton {
background-color: var(--color-secondary-hover);
color: var(--color-error-bg);
font-weight: 700;
border-radius: 8px;
padding: 8px 10px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
border: none;
}
.secondaryButton:hover {
background-color: var(--color-secondary-light);
color: var(--color-error-bg);
transform: translateY(-1px);
box-shadow: 0px 5px 10px var(--color-secondary-disabled);
}
.secondaryButton:active {
background-color: var(--color-secondary-active);
transform: translateY(0);
box-shadow: none;
}
.secondaryButton:disabled,
.secondaryButton[disabled] {
background-color: var(--color-secondary-disabled);
color: var(--color-secondary-text-disabled);
cursor: not-allowed;
opacity: 0.6;
transform: none;
box-shadow: none;
}
.chatBot-text-btn {
background-color: var(--color-secondary-hover);
color: var(--color-error-bg);
font-weight: 700;
border-radius: 8px;
padding: 8px 10px;
font-size: 14px;
display: inline-flex;
align-items: center;
border: none;
white-space: nowrap;
}
.chatBot-text-btn:hover,
.chatBot-text-btn:active {
background-color: var(--color-secondary-light);
color: var(--color-error-bg);
transform: translateY(-1px);
box-shadow: 0px 5px 10px var(--color-secondary-disabled);
}
.linkText {
color: var(--color-secondary);
}
.discard-btn {
background-color: var(--discard-bg-color);
border-radius: 8px;
padding: 8px 10px;
border-color: var(--color-error);
color: var(--color-error);
font-size: 14px;
font-weight: 700 !important;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
}
.discard-btn:hover,
.discard-btn.active {
background-color: var(--color-error) !important;
color: var(--discard-bg-color) !important;
transform: translateY(-1px);
box-shadow: 0px 5px 10px var(--color-secondary-disabled);
}
@media (min-width: 1025px) {
.discard-btn::after {
content: "Discard Changes";
margin-left: 6px;
display: inline-block;
font-weight: 600;
}
}
.back-btn {
background-color: var(--color-gray-100);
padding: 7px 12px;
border-radius: 10px;
border: 1px solid var(--color-gray-300);
}
.back-btn:hover,
.back-btn:active {
background-color: var(--color-gray-200);
padding: 7px 12px;
border-radius: 10px;
}
.back-btn:focus {
outline: none;
box-shadow: 0 0 0 3px var(--color-gray-100);
}
.back-btn1 {
background-color: var(--color-gray-100);
padding: 7px 12px;
border-radius: 10px;
border: 1px solid var(--color-gray-300);
}
.back-btn1:hover,
.back-btn1:active {
background-color: var(--color-gray-200);
border-radius: 10px;
}
.back-btn1:focus {
outline: none;
box-shadow: 0 0 0 3px var(--color-gray-100);
}
.view-edit-btn {
color: var(--text-color);
background-color: var(--color-primary-lighter-50);
padding: 5px 10px;
border-radius: 10px;
border: none;
}
.view-edit-btn:hover,
.view-edit-btn:active {
color: var(--text-color);
padding: 5px 10px;
border-radius: 10px;
background-color: var(--color-gray-100);
border: none;
}
.view-edit-btn:focus {
outline: none;
box-shadow: 0 0 0 3px var(--color-gray-100);
}
.view-delete-btn {
color: var(--color-error);
background-color: var(--color-error-bg);
padding: 5px 10px;
border-radius: 7px;
border: none;
}
.view-delete-btn:hover,
.view-delete-btn:active {
color: var(--color-error);
background-color: var(--color-error-bg);
padding: 5px 10px;
border-radius: 7px;
border: none;
}
.view-delete-btn:focus {
outline: none;
box-shadow: 0 0 0 3px var(--color-gray-100);
}
.delete-btn3 {
color: var(--color-error);
background-color: var(--color-error-bg);
padding: 5px 10px;
border-radius: 10px;
border: none;
}
.delete-btn3:hover,
.delete-btn3:active {
color: var(--color-secondary-light);
background-color: var(--color-gray-100);
border: none;
padding: 5px 10px;
border-radius: 7px;
}
.delete-btn3:focus {
outline: none;
box-shadow: 0 0 0 3px var(--color-gray-100);
}
.table-delete-btn-wrapper .delete-btn3 {
padding: 0 8px;
}
.bot-config-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 8px 10px;
font-weight: 600;
color: var(--color-white);
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
border: none;
border-radius: 8px;
text-decoration: none;
}
.bot-config-btn:hover {
background: linear-gradient(90deg, #6b1fe8 0%, #a63ddf 45%, #ee7a57 100%);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
color: var(--color-white);
}
.bot-config-btn .me-2 {
font-size: 1.25em;
transition: transform 0.2s ease;
}
.bot-config-btn:hover .me-2 {
transform: rotate(15deg);
}
/* Buttons End */
/* Profile Start */
.profile-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--color-error);
}
.profile-name {
font-size: 18px;
font-weight: bolder;
margin-bottom: 0.3rem;
color: var(--color-black);
text-decoration: none;
}
/* Profile End */
.MuiTablePagination-root {
padding: 8px !important;
}
/* Text Style Start */
.tableMainText {
font-family: "Nunito", sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0%;
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
display: inline-block;
}
.capitalizeFirstLetter::first-letter {
text-transform: uppercase;
}
.masterHeading {
font-family: "Nunito", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 100%;
letter-spacing: 0%;
color: var(--text-color);
}
.masterText {
font-family: "Nunito", sans-serif;
font-weight: 600;
font-size: 12px;
line-height: 100%;
letter-spacing: 0%;
color: var(--input-text);
}
.tableHeading {
font-family: "Nunito", sans-serif;
font-weight: 600;
font-size: 20px;
letter-spacing: 0%;
color: var(--color-black);
margin-bottom: 0px;
margin-left: 15px;
}
.table-heading {
font-size: 20px;
font-weight: bold !important;
color: var(--text-color);
}
.table-subheading {
font-size: 16px !important;
font-weight: bold !important;
color: var(--text-color);
}
.subHeading {
font-size: 14px;
display: flex;
align-items: center;
font-weight: 600;
}
@media (max-width: 767px) {
.table-heading {
font-size: calc(0.9rem + 0.9vw) !important;
}
.table-subheading {
font-size: calc(0.7rem + 0.6vw) !important;
}
.add-btn {
padding: 5px 10px;
}
}
.view-header {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 20px;
font-weight: 600 !important;
}
.view-label-text {
font-family: "Nunito", sans-serif;
color: var(--color-black);
font-size: 14px !important;
font-weight: 500 !important;
}
.view-label-text-2 {
font-family: "Nunito", sans-serif;
color: var(--color-black);
font-size: 14px !important;
font-weight: 500 !important;
}
.view-head-text {
font-size: 14px;
font-weight: 400;
font-family: "Nunito", sans-serif;
color: var(--view-heading-color);
}
.view-data-text {
font-size: 16px;
font-weight: 600;
font-family: "Nunito", sans-serif;
color: var(--text-color);
}
.view-heading {
color: var(--text-color);
font-weight: 700;
}
.tableActionIcon {
color: var(--color-primary-solid);
background-color: var(--color-primary-lighter-50);
padding: 5px 10px;
border-radius: 10px;
}
.tableActionIcon:hover,
.tableActionIcon:active {
color: var(--text-color);
padding: 5px 10px;
border-radius: 10px;
background-color: var(--color-gray-100);
}
.tableOtherActionIcon {
color: var(--text-color);
background-color: var(--color-gray-200);
padding: 5px 10px;
border-radius: 10px;
}
.tableOtherActionIcon:hover,
.tableOtherActionIcon:active {
color: var(--text-color);
padding: 5px 10px;
border-radius: 10px;
background-color: var(--color-gray-100);
}
/* Text Style End */
.progress-step {
height: 6px;
flex: 1;
border-radius: 20px;
background: var(--color-secondary-disabled);
transition: 0.4s;
}
.progress-step.active {
background: var(--color-secondary);
}
.progress-step.done {
background: var(--color-secondary-disabled);
opacity: 0.6;
}
/* Loading Start */
.loader-container {
display: flex;
justify-content: center;
align-items: center;
}
.loadingHeading {
font-weight: bold;
color: var(--color-black);
font-size: 28px;
}
.loadingText {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: inherit !important;
font-weight: inherit;
}
/* Loading End */
.modal-body {
overflow-y: auto;
max-height: 70vh;
}
.modal-body::-webkit-scrollbar {
width: 0px;
}
/* Feedback Start */
.feedback-title {
font-weight: bold;
}
.feedback-subtitle {
font-size: 12px;
}
.item-desc {
font-size: 14px;
}
.customer-image {
width: 40px;
height: 40px;
padding: 6px;
background-color: var(--color-warning-bg);
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
.customer-image1 {
width: 40px;
height: 40px;
padding: 6px;
background-color: var(--color-error);
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
.customer-image-inner img {
width: 100%;
height: 100%;
object-fit: contain;
}
.content-box .item-title {
font-weight: bold;
font-size: 15px;
}
.content-box1 .item-title1 {
font-weight: bold;
font-size: 12px;
}
.content-box1 .item-desc1 {
font-size: 12px;
}
.login-check .form-check-input {
font-size: 12px !important;
}
.emoji img {
width: 40px !important;
height: 40px !important;
transition: 0.2s ease-in-out;
}
.emoji img:hover {
transform: scale(1.15);
}
.like {
font-size: 15px;
}
.content-box .item-desc {
font-size: 14px;
}
.netpromoter-switch {
transform: scale(1.5);
cursor: pointer;
}
.survey-message {
font-weight: bold;
font-size: 17px;
}
.left-section {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.csat-title {
font-size: 14px;
font-weight: 600;
}
.right-section {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.emoji-card {
background: var(--color-gray-100);
border-radius: 16px;
box-shadow: var(--shadow-sm);
padding: 20px;
margin-left: 40px !important;
}
.rating-title {
font-size: 20px;
font-weight: 600;
text-align: center;
margin-bottom: 10px;
}
.rating-subtext {
text-align: center;
font-size: 16px;
margin-bottom: 20px;
}
.rating-box {
display: flex;
justify-content: space-evenly;
padding: 10px 12px;
}
.rating-item {
display: flex;
align-items: center;
cursor: pointer;
padding: 10px 12px;
border-radius: 12px;
transition:
transform 0.2s ease,
background-color 0.2s ease;
}
.rating-item:hover {
background-color: var(--color-primary-lighter);
transform: scale(1.05);
}
.emoji {
font-size: 29px;
}
.emoji-label {
font-size: 19px;
text-align: center;
}
.survey-title {
font-size: 14px;
font-weight: 600;
}
.nps-card {
margin-left: 36px;
background-color: var(--color-gray-10);
border-radius: 16px;
box-shadow: var(--shadow-sm);
border: none;
}
.question-text {
font-size: 15px;
font-weight: 600;
}
.question-text1 {
font-size: 17px;
}
.emoji-container .emoji {
font-size: 30px;
cursor: pointer;
transition: transform 0.2s;
}
.emoji-container .emoji:hover {
transform: scale(1.3);
}
.feedback-label {
font-size: 16px;
font-weight: 500;
color: var(--color-black);
}
.feedback-input {
margin-top: 5px;
border-radius: 12px;
padding: 10px 15px;
font-size: 16px;
box-shadow: var(--shadow-sm);
background-color: var(--color-white);
}
.feedback-input:focus {
outline: none;
border-color: var(--color-gray-100);
box-shadow: var(--shadow-sm);
}
.card .feedback-page {
padding: 20px;
}
/* Feedback End */
/* Control Panel Start */
.colorGroup .form-control {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
.colorGroup .input-group-text,
.colorGroup .form-control-color {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.logoInput {
width: 90px;
height: 90px;
cursor: pointer;
border: 1px solid var(--color-gray-300);
position: relative;
border-radius: 20px;
}
.logoUpload {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-gray-20);
color: var(--color-gray-700);
}
.logoCancel {
position: relative;
top: -60px;
right: -30px;
padding: 2px;
z-index: 999;
}
.custom-tab {
color: var(--color-gray-600) !important;
text-align: left;
border: none !important;
background: transparent !important;
padding: 10px 12px !important;
border-radius: 8px !important;
transition: all 0.3s ease;
position: relative;
font-weight: 600 !important;
font-size: 14px;
display: flex;
align-items: center;
}
.custom-tab:hover {
background-color: var(--color-gray-10) !important;
color: var(--color-black) !important;
}
.custom-tab.active {
background-color: transparent !important;
color: var(--color-black) !important;
font-weight: 600;
}
.custom-tab.active::after {
content: "";
position: absolute;
right: -1px;
top: 10%;
height: 80%;
width: 4px;
background: linear-gradient(180deg, #7a2cf3 0%, #b94ce8 50%, #f58b69 100%);
border-radius: 4px;
}
.domain-card {
border: 1px solid var(--color-gray-400);
border-radius: 12px;
padding: 10px;
cursor: pointer;
transition: 0.2s ease;
text-align: center;
}
.domain-card:hover {
border-color: var(--color-gray-800);
}
.domain-card.active {
border: 2px solid var(--color-primary-solid);
}
.domain-card-title {
font-size: 14px;
font-weight: 600;
color: var(--color-black);
}
.domain-card-subtext {
font-size: 12px;
color: var(--color-gray-500);
}
.integration-card {
padding: 15px;
background: linear-gradient(
to bottom,
var(--discard-bg-color),
var(--color-white)
);
border-radius: 12px;
cursor: pointer;
border: 1px solid var(--color-gray-200);
position: relative;
transition: 0.3s ease;
pointer-events: auto;
min-height: 240px;
}
.integration-card .add-btn {
display: none;
}
.integration-card .logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
width: 150px;
}
.integration-card .card-title {
margin-bottom: 1.75rem;
transition: 0.3s;
}
.integration-card:hover .add-btn {
display: block;
}
.integration-card:hover .logo {
margin-top: 0;
margin-bottom: 0.5rem;
}
.integration-card:hover .card-title {
margin-bottom: 0.5rem;
}
.rad {
border-radius: 8px;
}
.table th,
.table td {
vertical-align: middle;
}
.whatsappBtn {
background-color: var(--color-whatsapp);
color: var(--color-black) !important;
padding: 8px 12px;
font-size: 14px;
font-weight: 700;
border: 1px solid var(--color-whatsapp);
border-radius: 10px;
}
.whatsappBtn:hover,
.whatsappBtn.active {
background-color: var(--color-whatsapp-darker) !important;
border: 1px solid var(--color-whatsapp-darker) !important;
transform: translateY(-1px);
box-shadow: 0px 5px 10px var(--color-whatsapp-lighter);
}
.whatsappBtn1 {
background-color: var(--color-whatsapp);
color: var(--color-black) !important;
font-size: 13px;
font-weight: 700;
border: 1px solid var(--color-whatsapp);
border-radius: 10px;
}
.whatsappBtn1:hover,
.whatsappBtn1.active {
background-color: var(--color-whatsapp-darker) !important;
border: 1px solid var(--color-whatsapp-darker) !important;
transform: translateY(-1px);
box-shadow: 0px 5px 10px var(--color-whatsapp-lighter);
}
.learnMoreBtn {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
color: var(--color-white) !important;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
border: none !important;
border-radius: 10px;
}
.learnMoreBtn:hover,
.learnMoreBtn.active {
background: linear-gradient(90deg, #6b1fe8 0%, #a63ddf 45%, #ee7a57 100%);
transform: translateY(-1px);
box-shadow: 0px 5px 10px rgba(122, 44, 243, 0.3);
}
.role-btn {
padding: 6px 9px;
color: var(--color-primary-solid) !important;
font-size: 12px;
font-weight: 500;
border: 1px solid var(--color-primary-solid);
background: transparent;
}
.role-btn:hover,
.role-btn:active {
background: linear-gradient(
90deg,
#7a2cf3 0%,
#b94ce8 45%,
#f58b69 100%
) !important;
color: var(--color-white) !important;
border-color: transparent;
}
.role-header {
color: var(--color-gray-500) !important;
font-size: 14px;
font-weight: bold !important;
font-weight: 500;
}
.role .form-check-input:checked {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
border: 1px solid var(--color-primary-solid);
}
.codeSnippet {
font-size: 14px;
user-select: none;
pointer-events: none;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-all;
color: var(--color-gray-400);
}
/* Control Panel End */
.side-heading {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0px;
font-weight: 600;
font-size: 18px;
}
.profile-image-wrapper {
min-height: 150px;
}
.profile-image-box {
width: 100px;
height: 100px;
border: 1px solid var(--discard-bg-color);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
}
.profile-pic {
width: 90%;
height: 90%;
object-fit: contain;
border-radius: 10px;
}
.profile-title {
text-align: start;
font-size: 27px !important;
font-weight: 800;
margin-left: 10px;
margin-bottom: 10px;
}
.form-wrapper {
max-height: 480px;
overflow-y: scroll;
padding-right: 10px;
scrollbar-width: none;
}
.form-wrapper::-webkit-scrollbar {
display: none;
}
.disabled-action {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.view-data-text1 {
white-space: pre-wrap;
word-break: break-word;
}
.view-data-text1 {
font-size: 16px;
font-weight: 600;
font-family: "Nunito", sans-serif;
color: var(--text-color);
}
.custom-modal-md .modal-body {
padding: 24px;
}
.product-image-wrapper {
width: 100%;
max-width: 260px;
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-white);
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.project-wrap {
max-height: 100%;
overflow-y: auto;
padding-right: 10px;
scrollbar-width: none;
}
.project-wrap::-webkit-scrollbar {
display: none !important;
}
.custom-tab.logout-btn:hover {
color: var(--color-error) !important;
background-color: var(--color-error-bg) !important;
}
.disabled-btn {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.delete-input {
color: var(--color-error);
font-weight: 700;
font-size: 12px;
}
.delete-icon.login {
display: flex;
justify-content: center;
margin-top: 20px;
}
.menu-btn {
padding: 10px 20px;
font-size: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.delete-btn1 {
background-color: var(--color-gray-10);
color: var(--color-error);
font-size: 15px !important;
font-weight: 700;
margin-top: 4px;
}
.delete-icon-img {
margin-right: 10px;
font-size: 25px;
font-weight: 700;
}
.inputLable {
font-size: 14px;
font-weight: 700;
}
.section-heading {
font-size: 20px;
font-weight: 700;
position: sticky;
top: 0;
background: var(--color-white);
z-index: 10;
padding: 10px 0;
}
.Male-radio,
.Female-radio {
font-size: 14px;
font-weight: 500;
}
.Male-radio input[type="radio"],
.Female-radio input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-white);
border: 1px solid var(--color-black);
cursor: pointer;
}
.Male-radio input[type="radio"]:checked,
.Female-radio input[type="radio"]:checked {
background: var(--color-primary-solid);
border: none;
}
.position-relative {
position: relative;
}
.verified-inside {
position: absolute;
right: 20px;
bottom: -4%;
transform: translateY(-50%);
color: var(--color-success-bg);
padding: 2px 8px;
font-size: 15px !important;
border-radius: 12px;
font-weight: bold;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.verify-badge {
color: var(--color-success-bg);
margin-right: 10px;
}
.login-savebutton {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
margin-top: 40px !important;
padding: 15px;
font-size: 18px !important;
font-weight: 700;
border-radius: 6px;
text-align: center;
cursor: pointer;
color: var(--color-white);
}
.logout-icon {
width: 15px;
height: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
}
.logout-icon svg {
width: 100%;
height: 100%;
color: var(--color-black);
}
.menu-icon {
width: 15px;
height: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
}
.menu-icon svg {
width: 100%;
height: 100%;
}
/* Select Input */
.react-select-container {
width: 100%;
}
.react-select__control {
background-color: var(--color-white) !important;
border-radius: 12px !important;
padding: 3px 6px !important;
font-size: 15px !important;
border: 1px solid #ced4da !important;
transition: all 0.2s ease-in-out !important;
}
.react-select__control--is-focused {
border-color: var(--color-primary-solid) !important;
box-shadow: 0 0 0 3px rgba(122, 44, 243, 0.18) !important;
background-color: var(--color-white) !important;
}
.react-select__control:hover {
border-color: var(--color-primary-solid) !important;
}
.react-select__placeholder {
font-size: 15px;
color: #757575;
}
.react-select__single-value {
font-size: 15px;
color: #000;
}
.react-select__menu {
border-radius: 10px;
z-index: 99999 !important;
}
/* Form Switch */
.form-check.form-switch .form-check-input {
width: 48px !important;
height: 24px !important;
background-color: #ccc;
border: none;
background-image: none !important;
position: relative;
cursor: pointer;
transition: background-color 0.4s;
}
.form-check.form-switch .form-check-input:before {
content: "";
position: absolute;
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
.form-check .form-check-input:checked {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
border: none;
}
.form-check .form-check-input:focus {
border-color: var(--color-primary-solid) !important;
box-shadow: 0 0 0 3px rgba(122, 44, 243, 0.18) !important;
}
.form-check.form-switch .form-check-input:checked {
background: linear-gradient(
90deg,
#7a2cf3 0%,
#b94ce8 45%,
#f58b69 100%
) !important;
}
.form-check.form-switch .form-check-input:checked:before {
transform: translateX(24px);
}
.form-check.form-switch .form-check-input {
background-image: none !important;
}
.form-check.form-switch .form-check-input:focus {
border-color: var(--color-primary-solid) !important;
box-shadow: 0 0 0 3px rgba(122, 44, 243, 0.18) !important;
}
.css-10gei56 {
box-shadow: none !important;
}
.custom-input {
border-radius: 5px;
border: 1px solid var(--color-gray-100);
outline: none;
}
.input-error {
border-color: var(--color-error) !important;
background-image: none !important;
}
.otp-input {
width: 50px;
height: 42px;
border: 1px solid var(--color-gray-300);
background-color: var(--color-white);
border-radius: 5px;
outline: none;
text-align: center;
font-size: 16px;
}
.otp-error {
border-color: var(--color-error) !important;
}
.custom-input:focus,
.otp-input:focus {
box-shadow: none;
outline: none;
}
/* Badge Start */
.statusTag {
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
line-height: 1;
border: none;
text-transform: capitalize;
}
.status-success {
background-color: var(--color-success-bg);
color: var(--color-success);
}
.status-warning {
background-color: var(--color-warning-bg);
color: var(--color-warning);
}
.status-danger {
background-color: var(--color-error-bg);
color: var(--color-error);
}
.status-info {
background-color: var(--color-info-bg);
color: var(--color-info);
}
.status-muted {
background-color: var(--color-gray-200);
color: var(--color-gray-800);
}
/* Badge End */
/* Circular Floating Button */
.floating-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, #7a2cf3 0%, #b94ce8 50%, #f58b69 100%);
color: var(--color-white);
box-shadow: 0 4px 12px rgba(122, 44, 243, 0.4);
cursor: pointer;
z-index: 9999;
}
.attributes-btn {
position: fixed;
bottom: 70px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, #7a2cf3 0%, #b94ce8 50%, #f58b69 100%);
color: var(--color-white);
box-shadow: 0 4px 12px rgba(122, 44, 243, 0.4);
cursor: pointer;
z-index: 9999;
}
/* Sliding Panel */
.floating-panel {
position: fixed;
right: -260px;
top: 0;
height: 100vh;
width: 260px;
background: #fff;
border-left: 1px solid #ddd;
padding: 16px;
box-shadow: -2px 0px 12px rgba(0, 0, 0, 0.15);
transition: right 0.3s ease-in-out;
z-index: 9998;
overflow-y: auto;
}
.floating-panel.open {
right: 0;
}
.panel-title {
font-weight: bold;
margin-bottom: 12px;
}
.tableIcon {
color: var(--text-color);
background-color: var(--color-success-bg);
padding: 5px 10px;
border-radius: 10px;
}
.tableIcon:hover,
.tableIcon:active {
color: var(--text-color);
padding: 5px 10px;
border-radius: 10px;
background-color: var(--color-gray-100);
}
.table-heading th {
color: var(--color-gray-600) !important;
font-weight: 500;
}
.table-center td,
.table-center th {
vertical-align: middle;
}
.pagination .page-item {
margin: 0 4px;
}
.pagination .page-link {
padding: 5px 12px;
border-radius: 6px;
font-size: 13px;
color: var(--color-gray-600);
border: none;
background: transparent;
box-shadow: none !important;
}
.pagination .page-item.active .page-link {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
color: var(--color-white);
border-radius: 6px;
}
.modal-body {
max-height: 60vh;
overflow-y: auto;
}
.modal-footer {
border-top: none;
}
.custom-modal-md .modal-content {
display: flex;
flex-direction: column;
}
.custom-modal-md .modal-body {
flex: 1;
overflow-y: auto;
}
/* Card */
.product-card {
padding: 10px;
border-radius: 15px;
cursor: pointer;
border: 1px solid var(--color-gray-200);
width: 20rem;
margin-left: 80px;
}
.empty-message-state {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: var(--color-white);
border-radius: 16px;
box-shadow: var(--shadow-sm);
}
.empty-box {
text-align: center;
padding: 40px 20px;
color: var(--text-secondary);
}
.centered-quill .ql-toolbar {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.centered-quill .ql-container {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height: 80px !important;
}
.card {
border-radius: 12px;
}
.progress {
background: var(--color-primary-lighter-50);
border-radius: 6px;
height: 5px;
}
.badge {
font-size: 12px;
padding: 6px 10px;
border-radius: 6px;
}
.custom-progress .progress-bar {
background: linear-gradient(
90deg,
#7a2cf3 0%,
#b94ce8 45%,
#f58b69 100%
) !important;
}
.subscriptionSection {
height: 73vh;
overflow-y: auto;
}
.subscriptionSection::-webkit-scrollbar {
display: none;
}
.currentPlanCard {
background: var(--color-gray-50);
box-shadow: var(--shadow-sm);
border-radius: 25px;
}
.subscriptionCard {
background: var(--color-gray-50);
box-shadow: var(--shadow-sm);
border-radius: 32px;
}
.plan-card {
border-radius: 32px;
background: var(--color-gray-50);
min-height: 200px;
box-shadow: var(--shadow-sm);
}
.plan-card ul li {
font-size: 14px;
line-height: 26px;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.icon-check {
color: var(--color-primary-solid);
font-size: 16px;
}
.business-bg {
background: var(--color-primary-lighter-50);
}
.vertical-line {
border-left: 1px solid var(--color-gray-300);
max-height: 260px;
overflow-y: auto;
}
.vertical-line::-webkit-scrollbar {
width: 6px;
}
.vertical-line::-webkit-scrollbar-thumb {
border-radius: 10px;
}
.vertical-line::-webkit-scrollbar-track {
background: transparent;
}
.subscription-tabs {
display: flex;
justify-content: space-between;
background: var(--color-gray-100);
padding: 6px;
border-radius: 10px;
margin-bottom: 10px;
}
.subscription-tab {
padding: 8px 28px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
color: var(--color-black);
transition: all 0.2s ease;
user-select: none;
}
.subscription-tab:hover {
background: var(--color-primary-lighter);
}
.subscription-tab.active {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
box-shadow: var(--shadow-sm);
color: var(--color-white);
font-weight: 600;
}
/* Dashboard Start */
.info-banner {
background: var(--color-gray-150);
padding: 10px 15px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.banner-title {
font-size: 16px;
font-weight: 700;
color: var(--color-gray-700);
margin-bottom: 4px;
}
.banner-desc {
color: var(--text-secondary);
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
@media (max-width: 992px) {
.banner-desc {
white-space: normal;
}
}
.stepper-wrapper {
width: 100%;
max-width: 650px;
margin: auto;
}
.step-container {
position: relative;
}
.toggle-icon {
margin-left: auto;
cursor: pointer;
}
.step-header {
display: flex;
align-items: center;
padding: 12px;
border-radius: 20px;
background: var(--color-gray-20);
cursor: pointer;
transition: all 0.25s;
}
.step-header.active {
background: var(--color-primary-lighter-50);
}
.step-header.completed {
background: var(--color-success-bg-50) !important;
}
.step-number.done {
background-color: var(--color-success-bg) !important;
color: var(--color-black);
font-weight: bold;
}
.step-number {
width: 34px;
height: 34px;
background: var(--color-primary-lighter);
color: var(--color-primary-solid);
font-weight: bold;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
}
.step-body {
background: var(--color-white);
padding: 15px 18px;
border-radius: 10px;
margin-top: 15px;
}
.step-line {
width: 2px;
height: 25px;
background: var(--color-gray-400);
margin: 6px 0 6px 17px;
}
.close-btn {
background-color: var(--color-gray-200);
color: var(--color-black);
border-radius: 15px;
padding: 10px 15px;
font-size: 14px;
font-weight: 700 !important;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
}
.close-btn:hover,
.close-btn.active {
background-color: var(--color-gray-300) !important;
transform: translateY(-1px);
box-shadow: 0px 5px 10px var(--color-gray-200) !important;
}
.onboarding-floating {
position: fixed;
bottom: 12px;
right: 20px;
background: var(--color-secondary);
color: var(--color-white);
padding: 3px;
border-radius: 6px;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
z-index: 9999;
}
.card1 {
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
border: none;
border-radius: 15px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.card1 .icon {
color: var(--color-primary-solid);
background-color: var(--color-primary-lighter-50);
padding: 8px;
border-radius: 10px;
font-size: 40px !important;
}
.card2 {
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
border: none;
border-radius: 15px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.card2 .icon {
color: var(--color-secondary);
background-color: var(--color-error-bg);
padding: 8px;
border-radius: 10px;
font-size: 40px !important;
}
.card3 {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border: none;
border-radius: 15px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.card3 .icon {
color: var(--color-info);
background-color: var(--color-info-bg);
padding: 8px;
border-radius: 10px;
font-size: 40px !important;
}
.card4 {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border: none;
border-radius: 15px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.card4 .icon {
color: var(--color-gray-800);
background-color: var(--color-gray-200);
padding: 8px;
border-radius: 10px;
font-size: 40px !important;
}
.rdrDayNumber span {
color: var(--color-black) !important;
}
/* Dashboard End */
.sampleContainer {
background-color: var(--color-primary-lighter-50);
}
.sampleSubContainer {
height: 50px !important;
overflow: auto;
}
.register-success-wrapper {
background: linear-gradient(
135deg,
var(--color-gray-100),
var(--color-gray-50)
);
}
.success-card {
width: 100%;
max-width: 420px;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(14px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
animation: fadeUp 0.5s ease;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.successIcon svg {
color: var(--color-success);
filter: drop-shadow(0 4px 10px rgba(40, 199, 111, 0.3));
background-color: var(--color-success-bg);
border-radius: 50%;
padding: 5px;
}
.email-box {
padding: 10px 16px;
font-weight: 600;
background: var(--color-primary-lighter-50);
color: var(--color-black);
border-radius: 15px;
display: inline-block;
}
.gmail-btn {
background: linear-gradient(135deg, #ea4335, #ff6d63);
color: white !important;
border-radius: 10px;
padding: 10px;
font-weight: 600;
border: none;
transition: 0.2s ease;
}
.gmail-btn:hover {
transform: scale(1.03);
box-shadow: 0 8px 20px rgba(234, 67, 53, 0.3);
}
.back-login {
color: #0d6efd;
cursor: pointer;
font-weight: 500;
transition: 0.2s;
}
.back-login:hover {
color: #084298;
transform: translateX(-3px);
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.htmlContent {
background-color: var(--color-gray-200);
max-height: 280px;
overflow-y: auto;
padding: 10px;
border-radius: 8px;
}
.input-yellow {
background: linear-gradient(
90deg,
rgba(122, 44, 243, 0.08) 0%,
rgba(185, 76, 232, 0.08) 45%,
rgba(245, 139, 105, 0.08) 100%
) !important;
border-radius: 12px !important;
padding: 10px;
font-size: 15px;
transition: all 0.2s ease-in-out;
}
.input-yellow::placeholder {
color: var(--color-black) !important;
opacity: 1;
}
/* ACTIVE page */
.MuiPagination-root .MuiPaginationItem-root.Mui-selected {
background: linear-gradient(
90deg,
#7a2cf3 0%,
#b94ce8 45%,
#f58b69 100%
) !important;
color: var(--color-white) !important;
}
.MuiPagination-root .MuiPaginationItem-root {
border-radius: 6px !important;
color: var(--color-gray-600) !important;
border: none !important;
background-color: transparent !important;
}
.MuiPaginationItem-root .MuiTouchRipple-root {
display: none !important;
}
.css-wsew38 {
align-items: center !important;
}
.clear-btn {
background-color: var(--discard-bg-color);
padding: 10px 15px;
border-color: var(--color-error);
color: var(--color-error);
border-radius: 15px;
font-size: 14px;
font-weight: 700 !important;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
}
.clear-btn:hover,
.clear-btn.active {
background-color: var(--color-error) !important;
color: var(--discard-bg-color) !important;
transform: translateY(-1px);
box-shadow: 0px 5px 10px var(--color-secondary-disabled);
}
.color-preview-circle {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid #f40707;
}
.rating-item1 {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
padding: 12px 16px;
border-radius: 12px;
transition:
transform 0.2s ease,
background-color 0.2s ease;
}
/* ===== MOBILE SIDEBAR FIX ===== */
.sidebar-button {
cursor: pointer;
z-index: 1100;
}
.style-chip {
padding: 8px 16px;
border-radius: 20px;
border: 1px solid var(--color-primary-solid);
background: var(--color-white);
cursor: pointer;
transition: 0.2s;
}
.style-chip.active {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
color: var(--color-white);
border-color: transparent;
}
.style-chip:hover {
background: var(--color-primary-lighter);
}
.userTableWrapper .MuiBox-root > div:nth-child(2) {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
min-width: 0 !important;
flex-shrink: 1 !important;
}
/* Overview tags */
.tag-chip {
border: 1px solid var(--color-gray-100);
padding: 2px 12px;
border-radius: 50px;
display: inline-block;
background-color: var(--color-gray-100);
font-size: 10px;
font-weight: 700;
}
svg circle {
transition: stroke-dasharray 0.4s ease;
}
.project-name {
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.default-project-check {
color: var(--color-primary-solid);
font-size: 16px;
margin-right: 6px;
}
/* ChatBot Texting Start */
.chatBot-Heading {
font-size: 32px;
font-weight: 800;
}
.chatBot-Subtitle {
font-size: 16px;
font-weight: 600;
color: var(--view-heading-color);
}
.chatBot-Subtitle1 {
font-size: 12px;
font-weight: 600;
color: var(--view-heading-color);
}
.chatbot-launcher {
position: absolute;
bottom: 10px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-primary-lighter);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-sm);
z-index: 10;
}
.chatbot-launcher img {
width: 32px;
height: 32px;
}
.another-chat-btn {
background-color: var(--color-secondary-disabled);
color: var(--color-secondary);
font-weight: bolder;
padding: 8px 15px;
}
.another-chat-btn:hover,
.another-chat-btn:active {
background-color: var(--color-white);
color: var(--color-secondary);
border: 0.5px solid var(--color-secondary);
font-weight: bolder;
padding: 8px 15px;
}
.another-chat-btn1 {
background-color: var(--color-white);
color: var(--color-secondary);
font-weight: bolder;
padding: 8px 15px;
}
.another-chat-btn1:hover,
.another-chat-btn1:active {
background-color: var(--color-secondary-disabled);
color: var(--color-secondary);
font-weight: bolder;
padding: 8px 15px;
}
/* ChatBot Texting End */
/* Overview */
.custom-card .card-body {
padding: 1rem 1.25rem;
}
.details-value {
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
}
.section-icon {
vertical-align: middle;
}
.tag-chip {
background: var(--color-white);
border-radius: 20px;
padding: 3px 10px;
font-size: 0.7rem;
white-space: nowrap;
}
@media (max-width: 768px) {
.custom-card .row {
row-gap: 10px;
}
.custom-card .col-10,
.custom-card .col-2 {
flex: 0 0 100%;
max-width: 100%;
text-align: left !important;
}
.custom-card .col-2 {
margin-top: 8px;
}
.custom-card .btn {
width: 100%;
}
.custom-card .col-6 {
flex: 0 0 100%;
max-width: 100%;
margin-left: 0 !important;
justify-content: flex-start;
}
.details-value {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.tag-chip {
font-size: 0.65rem;
padding: 2px 8px;
}
.custom-card .card-body {
padding: 0.9rem;
}
}
/* Dashboard CSS Start */
.main-dashboard {
margin: 0;
padding: 0.5rem;
background-color: var(--color-white);
}
.table-heading {
font-size: 1.5rem;
font-weight: 700;
}
.react-date-range-wrapper {
position: relative;
}
.react-date-range-wrapper .shadow {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 95vw !important;
max-width: 800px !important;
z-index: 1050 !important;
overflow: auto !important;
max-height: 90vh !important;
}
.rdrDateRangePicker {
width: 100% !important;
}
.rdrCalendarWrapper {
width: 100% !important;
font-size: 12px !important;
}
.rdrMonthAndYearWrapper {
padding: 0 !important;
}
.rdrMonthName {
font-size: 14px !important;
}
.rdrDay {
height: 35px !important;
width: 35px !important;
}
.rdrDayNumber {
font-size: 12px !important;
}
.react-select-container {
width: 100%;
}
.react-select__menu {
z-index: 1000;
}
/* Metric Cards */
.metric-card {
border-radius: 12px;
border: none;
padding: 1rem;
transition: transform 0.2s;
min-height: 120px;
}
.metric-card:hover {
transform: translateY(-2px);
}
.metric-card .icon {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.metric-card .fs-3 {
font-size: 1.8rem !important;
line-height: 1.2;
}
.metric-card .view-heading {
font-size: 0.85rem;
text-align: center;
margin-top: 0.5rem;
color: var(--color-gray-400);
}
.line-chart-card,
.info-card {
border-radius: 12px;
overflow: hidden;
}
.apexcharts-heatmap {
width: 100% !important;
}
.apexcharts-canvas {
width: 100% !important;
}
.apexcharts-tooltip {
font-size: 12px !important;
padding: 8px !important;
}
.apexcharts-tooltip-title {
font-size: 11px !important;
margin-bottom: 4px !important;
}
.dashboard-left,
.dashboard-right {
padding: 0.5rem;
}
@media (max-width: 768px) {
.main-dashboard {
padding: 0.25rem;
}
.main-dashboard > .row:first-child {
margin-bottom: 1rem;
}
.table-heading {
font-size: 1.25rem;
display: block;
margin-bottom: 0.5rem;
text-align: center;
}
.dashboard-left,
.dashboard-right {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
padding: 0.25rem;
}
.dashboard-right .card {
margin-top: 1rem;
height: 400px !important;
}
.apexcharts-heatmap .apexcharts-xaxis-label {
font-size: 9px !important;
transform: rotate(-45deg);
text-anchor: end;
}
.apexcharts-heatmap .apexcharts-yaxis-label {
font-size: 9px !important;
}
.react-date-range-wrapper .shadow {
width: 100vw !important;
max-width: 100% !important;
padding: 0.5rem !important;
margin: 0 !important;
}
.rdrDateRangePicker {
flex-direction: column !important;
}
.rdrMonthAndYearPickers {
font-size: 14px !important;
}
.rdrMonth {
padding: 0 5px !important;
}
.rdrDay {
height: 30px !important;
width: 30px !important;
}
.metric-card {
min-height: 100px;
padding: 0.75rem;
}
.metric-card .icon {
font-size: 1.5rem;
}
.metric-card .fs-3 {
font-size: 1.5rem !important;
}
.metric-card .view-heading {
font-size: 0.75rem;
}
.line-chart-card {
height: 300px !important;
margin-top: 1rem;
}
.dashboard-left > .row {
height: auto !important;
margin-bottom: 1rem;
}
.dashboard-left > .row > div {
margin-bottom: 1rem;
}
.dashboard-left .row > .col-6,
.dashboard-left .row > .col-6.d-flex {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
.info-card {
height: auto !important;
min-height: 200px;
}
.info-card .fs-1 {
font-size: 2.5rem !important;
}
.text-muted.fs-5 {
font-size: 0.9rem !important;
}
.bg-light.rounded-3 {
font-size: 0.75rem;
padding: 0.25rem 0.5rem !important;
}
.learnMoreBtn {
padding: 0.35rem 0.75rem;
font-size: 0.75rem;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.dashboard-left {
width: 66.666% !important;
}
.dashboard-right {
width: 33.333% !important;
}
.heatmap-card {
height: 500px !important;
}
.metric-card .view-heading {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.dashboard-right .card {
height: 350px !important;
}
.apexcharts-heatmap .apexcharts-xaxis-label {
font-size: 8px !important;
}
.apexcharts-heatmap .apexcharts-yaxis-label {
font-size: 8px !important;
}
.col-md-3.col-6 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-bottom: 0.5rem !important;
}
.main-dashboard .dashboard-left .row .card.p-3,
.main-dashboard .dashboard-right .card.p-3 {
padding: 0.85rem !important;
}
}
.apexcharts-legend-series {
margin: 2px 8px !important;
}
.apexcharts-canvas {
min-width: 100px !important;
}
.form-control[readonly] {
background-color: var(--color-white);
cursor: pointer;
border-radius: 8px;
padding: 0.75rem;
}
.react-select__menu,
.react-date-range-wrapper .shadow {
z-index: 1050;
}
/* Dashboard end */
.install-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: 1px solid var(--color-gray-200);
}
.install-tab {
background: transparent;
border: none;
padding: 12px 0;
font-weight: 600;
font-size: 13px;
color: var(--color-gray-600);
cursor: pointer;
position: relative;
transition: color 0.25s ease;
}
.install-tab:hover {
color: var(--text-color);
}
.install-tab.active {
color: var(--text-color);
}
.install-tab.active::after {
content: "";
position: absolute;
left: 20%;
bottom: -1px;
width: 60%;
height: 2px;
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
border-radius: 2px;
}
.copy-btn {
width: 100%;
padding: 10px 14px;
background: var(--color-gray-150);
color: var(--text-color);
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
transition: all 0.25s ease;
}
.copy-btn:hover {
background: var(--color-gray-200);
}
.copy-btn:active {
background: var(--color-gray-300);
}
.install-code {
background: var(--color-gray-50);
border: 1px solid var(--color-gray-200);
border-radius: 10px;
padding: 14px;
font-size: 12px;
color: var(--text-color);
}
.copy-btn.copied {
background: var(--color-gray-200);
color: var(--color-gray-800);
}
.copy-btn {
transition:
background 0.25s ease,
transform 0.15s ease;
}
.copy-btn.copied {
transform: scale(0.98);
}
.video-thumb {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 12px;
background: transparent;
cursor: pointer;
}
.video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.trash-red {
color: var(--color-secondary);
cursor: pointer;
}
.trash-wrapper {
display: flex;
align-items: center;
height: 38px;
}
/* Website Card Header */
.website-card-header {
display: flex;
align-items: center;
gap: 8px;
}
.website-card-title {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.website-card-status {
flex-shrink: 0;
}
.dropdown-toggle::after {
display: none !important;
}
.no-caret-dropdown .dropdown-toggle::after {
display: none !important;
}
.website-image-wrapper {
position: relative;
}
.website-preview-overlay {
position: absolute;
inset: 0;
background: var(--preview) !important;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
animation: fadeIn 0.25s ease;
}
.website-preview-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
border-radius: 30px;
font-size: 14px;
font-weight: 600;
color: var(--color-white);
animation: popIn 0.25s ease;
}
.statusTag {
border: none;
outline: none;
}
.statusTag:focus {
outline: none;
box-shadow: none;
}
.statusTag option {
color: var(--option-color);
background-color: var(--option-bg);
font-weight: 500;
}
.statusTag option:checked {
color: var(--select-color);
background-color: var(--select-option);
}
.preview-dot {
width: 8px;
height: 8px;
background: var(--color-whatsapp);
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes popIn {
from {
transform: scale(0.85);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.website-card-ui {
border-radius: 14px;
overflow: visible;
}
.website-card-ui .card-img-top {
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.dropdown-icon-item {
display: flex;
align-items: center;
gap: 10px;
}
.dropdown-icon-item svg {
display: block;
vertical-align: middle;
transform: translateY(-1.3px);
}
.website-image-wrapper {
position: relative;
height: 200px;
overflow: hidden !important;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
background: var(--color-white);
}
.website-preview-crop {
width: 100%;
height: 100%;
overflow: hidden;
}
.website-preview-frame {
width: 1150px;
height: 580px;
border: none;
transform: scale(0.38);
transform-origin: top left;
pointer-events: none;
}
@media (min-width: 1800px) {
.website-preview-frame {
width: 600000px !important;
height: 900px;
transform: scale(0.46);
}
}
@media (max-width: 1200px) {
.website-preview-frame {
width: 1300px;
height: 720px;
transform: scale(0.4);
}
}
@media (max-width: 992px) {
.website-preview-frame {
width: 1150px;
height: 650px;
transform: scale(0.35);
}
}
@media (max-width: 576px) {
.website-preview-frame {
width: 1050px;
height: 600px;
transform: scale(0.3);
}
}
@media (max-width: 400px) {
.website-preview-frame {
width: 950px;
height: 540px;
transform: scale(0.28);
}
}
.website-preview-frame::-webkit-scrollbar {
display: none;
}
.website-preview-frame {
scrollbar-width: none;
-ms-overflow-style: none;
}
.website-preview-overlay.clickable {
pointer-events: auto !important;
cursor: pointer;
}
.website-preview-overlay.clickable:hover {
background: rgba(0, 0, 0, 0.1) !important;
}
@media (max-width: 992px) {
.website-image-wrapper {
height: 180px;
}
.website-preview-frame {
width: 1100px;
height: 530px;
transform: scale(0.35);
}
.website-preview-badge {
font-size: 13px;
padding: 8px 14px;
}
.website-card-title h5 {
font-size: 15px;
}
.statusTag {
font-size: 11px;
padding: 3px 8px;
}
.dropdown-icon-item {
gap: 8px;
}
}
@media (max-width: 576px) {
.container > .d-flex {
flex-direction: column;
gap: 10px;
}
.website-image-wrapper {
height: 150px;
}
.website-preview-frame {
width: 1000px;
height: 500px;
transform: scale(0.3);
}
.website-preview-badge {
font-size: 12px;
padding: 7px 12px;
}
.website-card-title h5 {
font-size: 14px;
}
.statusTag {
font-size: 10px;
padding: 3px 6px;
}
.card-body {
padding: 12px;
}
.dropdown-item {
padding: 10px 12px;
}
.website-card-header,
.card-body > .d-flex {
flex-wrap: nowrap;
align-items: center;
}
.website-card-title {
min-width: 0;
max-width: 60%;
}
.website-card-status {
flex-shrink: 0;
}
.dropdown {
position: relative;
z-index: 10;
}
}
@media (max-width: 400px) {
.website-image-wrapper {
height: 135px;
}
.website-preview-frame {
width: 900px;
height: 480px;
transform: scale(0.28);
}
.website-preview-badge {
font-size: 11px;
padding: 6px 10px;
}
.website-card-title h5 {
font-size: 13px;
}
}
@media (min-width: 1400px) {
.website-card-ui {
max-width: 420px;
margin: 0 auto;
}
}
@media (min-width: 1800px) {
.website-card-ui {
max-width: 380px;
margin: 0 auto;
}
.website-image-wrapper {
height: 180px;
}
}
@media (min-width: 1800px) {
.website-preview-frame {
transform: scale(0.42);
}
}
.website-details-scroll1 {
max-height: 45vh;
overflow-y: auto;
padding-right: 10px;
border-right: 1px solid var(--color-gray-400);
}
.website-details-scroll1::-webkit-scrollbar {
width: 6px;
}
.website-details-scroll1::-webkit-scrollbar-thumb {
background-color: var(--shadow-lg);
border-radius: 3px;
}
.website-details-scroll1::-webkit-scrollbar-track {
background: transparent;
}
.form-label1 {
font-size: 14px !important;
font-weight: 600;
}
.preview-content {
font-size: 14px !important;
}
.preview-items li {
font-size: 14px !important;
}
.preview-content-card {
min-height: 350px;
border: none !important;
border-radius: 6px;
padding: 10px;
cursor: text;
}
.fd-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(2px);
z-index: 1040;
}
.fd-panel {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 340px;
max-height: 80vh;
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
z-index: 1050;
background: #fff;
}
.fd-header {
flex-shrink: 0;
background: linear-gradient(135deg, #7a2cf3 0%, #b94ce8 50%, #f58b69 100%);
padding: 18px 20px 16px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.fd-header-title {
color: white;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
.fd-header-sub {
color: rgba(255, 255, 255, 0.75);
font-size: 12px;
margin-top: 3px;
}
.fd-close-btn {
background: rgba(92, 92, 92, 0.368);
border: none;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
}
.fd-body {
flex: 1;
overflow-y: auto;
padding: 8px 20px;
}
.fd-body::-webkit-scrollbar {
width: 4px;
}
.fd-body::-webkit-scrollbar-track {
background: transparent;
}
.fd-body::-webkit-scrollbar-thumb {
background: var(--color-gray-500);
border-radius: 4px;
}
.fd-filter-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.fd-toggle-wrap {
cursor: pointer;
display: inline-flex;
align-items: center;
}
.fd-toggle-input {
display: none;
}
.fd-toggle-track {
width: 44px;
height: 24px;
border-radius: 999px;
position: relative;
display: flex;
align-items: center;
transition: background-color 0.25s ease;
}
.fd-toggle-thumb {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
transition: transform 0.25s ease;
}
.fd-field-block {
width: 100%;
}
.fd-footer {
flex-shrink: 0;
display: flex;
gap: 12px;
padding: 16px 20px;
background: #fafbfc;
border-top: 1px solid #f1f5f9;
}
.fd-cancel-btn,
.fd-cancel-btn:hover,
.fd-cancel-btn.active {
flex: 1 1 0%;
padding: 9px 0px;
border-radius: 8px;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #6b7280;
font-weight: 700;
}
.fd-apply-btn,
.fd-apply-btn:hover,
.fd-apply-btn.active {
flex: 2 1 0%;
padding: 9px 0px;
border-radius: 8px;
border: none;
color: white;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #7a2cf3 0%, #b94ce8 50%, #f58b69 100%);
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}
.pill-select {
display: flex;
gap: 10px;
flex-wrap: nowrap;
overflow-x: auto;
}
.pill-select::-webkit-scrollbar {
height: 2px;
}
.pill-select::-webkit-scrollbar-track {
background: transparent;
}
.pill-select::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 2px;
}
.pill-btn {
flex: 0 0 auto;
border: 1px solid var(--color-gray-500);
background: var(--color-white);
border-radius: 999px;
padding: 7px 14px;
font-size: 13px;
font-weight: 600;
align-items: center;
transition: all 0.2s ease;
white-space: nowrap;
}
.pill-btn:hover {
border-color: var(--color-primary-solid);
color: var(--color-primary-solid);
}
.pill-btn.active {
background: var(--color-primary-lighter-50);
border-color: var(--color-primary-solid);
color: var(--color-primary-solid);
}
/* AI prompt */
.ai-prompt-sticky-wrapper {
position: sticky;
bottom: 24px;
z-index: 5;
margin-top: 5px;
border-radius: 20px;
box-shadow:
0 -10px 30px rgba(0, 0, 0, 0.08),
0 -2px 6px rgba(0, 0, 0, 0.04);
}
.ai-prompt-surface {
background: #fff;
border-radius: 18px;
border: 1px solid #e5e7eb;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ai-prompt-editor {
min-height: 60px;
max-height: 260px;
overflow-y: auto;
padding: 16px 18px 0px;
border-radius: 20px;
background: #fff;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
font-size: 15px;
line-height: 1.6;
color: #111827;
outline: none;
transition: all 0.2s ease;
}
.ai-prompt-editor:not(:empty) + .ai-prompt-actions .ai-build-btn {
box-shadow: 0 0 0 4px rgba(122, 44, 243, 0.2);
}
.ai-prompt-editor:empty::before {
content: attr(placeholder);
color: #9ca3af;
pointer-events: none;
}
.ai-prompt-editor:focus {
background: #ffffff;
border-color: var(--color-primary-solid);
box-shadow: 0 0 0 4px rgba(122, 44, 243, 0.15);
}
.ai-prompt-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 7px;
margin-right: 7px;
}
.ai-build-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 20px;
border-radius: 999px;
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
color: #ffffff;
font-weight: 700;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.ai-build-btn:hover {
background: linear-gradient(90deg, #6b1fe8 0%, #a63ddf 45%, #ee7a57 100%);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(122, 44, 243, 0.4);
}
.ai-prompt-editor:empty::before {
content: attr(data-placeholder);
color: #9ca3af;
pointer-events: none;
white-space: pre-wrap;
}
.empty-state-wrapper {
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
.empty-state-card {
text-align: center;
background: #ffffff;
border: 1px dashed #e5e7eb;
border-radius: 16px;
padding: 40px 32px;
max-width: 420px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.empty-icon {
font-size: 48px;
margin-bottom: 12px;
}
.empty-state-card h4 {
font-weight: 600;
margin-bottom: 8px;
color: #111827;
}
.empty-state-card p {
font-size: 14px;
color: #6b7280;
margin-bottom: 20px;
}
.form-section {
border-bottom: 1px solid #eee;
padding-bottom: 16px;
}
.section-title {
font-weight: 600;
}
.section-card {
background: #fff;
border-radius: 10px;
}
.website-preview-placeholder {
height: 200px;
background: linear-gradient(135deg, #f8fafc, #eef2ff);
display: flex;
align-items: center;
justify-content: center;
}
.placeholder-content {
text-align: center;
}
.website-preview-placeholder .spinner-border {
width: 32px;
height: 32px;
}
/* Icon position grid */
.icon-position-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px 20px;
max-width: 420px;
margin: 0 auto;
}
.position-tile {
aspect-ratio: 1 / 1;
border-radius: 6px;
border: 1px solid #d0d5dd;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
background: #fff;
}
.position-tile:hover {
border-color: var(--color-primary-solid);
}
.position-tile.active {
border: 2px solid var(--color-primary-solid);
background: var(--color-primary-lighter-10);
}
.position-tile-preview {
width: 20px;
height: 20px;
background: #9ca3af;
border-radius: 50%;
}
.position-tile-preview.top-left {
margin: 10px auto auto 10px;
}
.position-tile-preview.top-center {
margin: 10px auto auto;
}
.position-tile-preview.top-right {
margin: 10px 10px auto auto;
}
.position-tile-preview.bottom-left {
margin: auto auto 10px 10px;
}
.position-tile-preview.bottom-center {
margin: auto auto 10px;
}
.position-tile-preview.bottom-right {
margin: auto 10px 10px auto;
}
.position-selector {
display: flex;
gap: 16px;
}
.position-card {
width: 110px;
height: 52px;
border-radius: 6px;
border: 1px solid #d0d5dd;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
background: #fff;
}
.position-card:hover {
border-color: var(--color-primary-solid);
}
.position-card.active {
border: 2px solid var(--color-primary-solid);
background: var(--color-primary-lighter-10);
}
.position-preview {
width: 16px;
height: 22px;
background: #9ca3af;
border-radius: 2px;
}
.position-preview.left {
margin-right: auto;
margin-left: 8px;
}
.position-preview.center {
margin: auto;
}
.position-preview.right {
margin-left: auto;
margin-right: 8px;
}
.window-size-selector {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.window-size-btn {
border: 1px solid #e5e7eb;
background: #ffffff;
padding: 6px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: #6b7280;
cursor: pointer;
transition: all 0.2s ease;
}
.window-size-btn:hover {
border-color: var(--color-primary-solid);
color: var(--color-primary-solid);
}
.window-size-btn.active {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
border-color: transparent;
color: var(--color-white);
}
.color-palette {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.color-swatch {
width: 28px;
height: 28px;
border-radius: 6px;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s ease;
}
.color-swatch:hover {
transform: scale(1.1);
}
.color-swatch.active {
border-color: var(--color-primary-solid);
}
/* Avatar */
.avatar-scroll-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.avatar-strip {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-behavior: smooth;
max-width: 260px;
}
.avatar-strip::-webkit-scrollbar {
display: none;
}
.avatar-option {
width: 46px;
height: 46px;
border-radius: 50%;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-option img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
display: block;
}
.avatar-option.active {
border-color: var(--color-primary-solid);
}
.fixed-upload {
flex-shrink: 0;
}
.add-avatar {
background: var(--color-primary-lighter-50);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 600;
}
.avatar-scroll-btn {
border: none;
background: var(--color-white);
font-size: 18px;
cursor: pointer;
padding: 0 6px;
}
.appearance-scroll {
max-height: calc(100vh - 220px);
overflow-y: auto;
padding-right: 10px;
}
.appearance-scroll::-webkit-scrollbar {
width: 6px;
}
.appearance-scroll::-webkit-scrollbar-thumb {
background-color: var(--shadow-lg);
border-radius: 3px;
}
.starter-input {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.input-group1 {
display: flex;
align-items: stretch;
}
.input-group1 .form-control {
border-radius: 10px 0 0 10px !important;
height: 35px;
font-size: 14px;
}
.input-group-text1 {
background: var(--color-gray-10);
border: 1px solid var(--color-gray-200);
border-left: none;
padding: 0 14px;
height: 35px;
display: flex;
align-items: center;
border-radius: 0 10px 10px 0;
font-size: 14px;
font-weight: 600;
color: var(--color-gray-600);
}
.floating-color-picker {
position: fixed;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
border: none;
}
.color-picker-wrapper {
width: 32px !important;
height: 33px !important;
border-radius: 8px !important;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s ease;
overflow: hidden;
}
.color-picker-wrapper:hover {
transform: scale(1.1);
}
.color-picker-wrapper.active {
border-color: var(--color-primary-solid);
}
.color-picker-label {
width: 100%;
height: 100%;
display: block;
}
.color-picker-label input {
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.color-palette {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.color-swatch,
.color-picker-wrapper {
width: 29px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* Website builder */
.wc-container {
width: 100%;
height: 70vh !important;
min-height: 30vh;
border-radius: 2% !important;
background: var(--color-primary-lighter-10);
padding: 20px;
display: flex;
flex-direction: column;
}
.wc-messages {
overflow-y: auto;
scrollbar-width: none;
}
.wc-messages::-webkit-scrollbar {
display: none;
}
.wc-message {
display: flex;
align-items: flex-end;
gap: 10px;
margin-bottom: 12px;
width: 100%;
}
.wc-bot {
justify-content: flex-start;
}
.wc-user {
justify-content: flex-end;
margin-left: auto;
}
.wc-message-body {
max-width: 80%;
padding: 10px 14px;
border-radius: 16px;
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.wc-user .wc-message-body {
background: #ffffff;
border-bottom-right-radius: 6px;
color: var(--color-black);
}
.wc-bot .wc-message-body {
border-bottom-left-radius: 6px;
}
.wc-message-body p {
margin: 0;
padding: 0;
line-height: 1.5;
font-size: 16px;
word-wrap: break-word;
white-space: normal;
}
.wc-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
}
.wc-avatar1 {
width: 42px;
height: 42px;
border-radius: 50%;
}
.typing-loader {
display: flex;
gap: 5px;
margin-left: 44px;
}
.typing-loader span {
width: 8px;
height: 8px;
background: var(--color-gray-500);
border-radius: 50%;
animation: blink 1.6s infinite both;
margin-top: 13px !important;
}
.typing-loader span:nth-child(2) {
animation-delay: 0.2s;
}
.typing-loader span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes blink {
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.wc-message {
display: flex;
align-items: flex-start;
}
.btn-wrapper1 {
margin-left: 40px !important;
gap: 5px !important;
flex-wrap: wrap;
}
.btn-add2 {
padding: 8px 16px;
border: none;
cursor: pointer;
font-weight: 600;
border: 2px solid var(--color-primary-solid) !important;
font-weight: 700;
border-radius: 20px !important;
}
.btn-add2:active,
.btn-add2:hover {
background: linear-gradient(
90deg,
#7a2cf3 0%,
#b94ce8 45%,
#f58b69 100%
) !important;
color: var(--color-white) !important;
}
.wc-message-body.chat-pending-input {
position: relative;
padding: 13px 75px 14px 16px !important;
background: var(--color-white) !important;
border-bottom-right-radius: 6px;
}
.chat-pending-textarea {
width: 100%;
min-height: 48px;
max-height: 200px !important;
min-width: 0;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
background: transparent;
border: none;
outline: none;
font-size: 16px;
line-height: 1.5;
color: var(--color-black);
resize: none;
word-break: break-word;
overflow-wrap: anywhere;
}
.chat-pending-input {
flex: 1;
min-width: 0;
}
.chat-pending-textarea::placeholder {
color: var(--color-gray-500) !important;
}
.chat-pending-send {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
height: 34px;
padding: 0 13px;
border-radius: 999px;
background: linear-gradient(
90deg,
#7a2cf3 0%,
#b94ce8 45%,
#f58b69 100%
) !important;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
}
.chat-pending-send:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.chat-pending-send svg {
font-size: 16px;
color: var(--color-white) !important;
padding-left: 2px !important;
}
/* Edit Header Styles */
.edit-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
color: var(--color-white);
display: flex;
align-items: center;
padding: 0 24px;
z-index: 10001;
box-shadow: 0 4px 20px rgba(122, 44, 243, 0.35);
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.edit-header-left {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.brand-section {
display: flex;
align-items: center;
}
.logo-container {
display: flex;
align-items: center;
gap: 12px;
}
.loading-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.loading-text {
margin-top: 20px;
color: var(--color-gray-600);
font-size: 16px;
}
.floating-pencil {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.logo {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.brand-text {
display: flex;
flex-direction: column;
}
.brand-title {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
}
.brand-subtitle {
font-size: 11px;
opacity: 0.8;
font-weight: 400;
letter-spacing: 0.3px;
}
.center-section {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.status-indicator {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
padding: 8px 16px;
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
animation: pulse 2s infinite;
}
.status-text {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
}
.action-section {
display: flex;
align-items: center;
gap: 12px;
}
.toast-container {
top: calc(var(--header-height, 64px) + 8px);
}
.edit-header {
position: fixed;
top: 0;
z-index: 1000;
}
.Toastify__toast-container {
z-index: 99999 !important;
top: 72px !important;
}
.toast-container {
position: fixed;
top: 72px;
right: 16px;
z-index: 99999;
}
.button-icon {
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 8px;
}
.invalid-wrapper {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f5f5f5;
}
.invalid-card {
background: #fff;
padding: 32px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.website-preview-iframe {
width: 100%;
height: 99vh;
border: none;
}
.website-preview-iframe.edit-mode {
height: calc(99vh - 64px);
margin-top: 64px;
}
@keyframes fadeInOut {
0% {
opacity: 0;
transform: translateY(-10px);
}
20% {
opacity: 1;
transform: translateY(0);
}
80% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-10px);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes slideIn {
0% {
opacity: 0;
transform: translateX(100px);
}
20% {
opacity: 1;
transform: translateX(0);
}
80% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(100px);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.edit-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent
);
animation: headerGlow 3s linear infinite;
pointer-events: none;
}
@keyframes headerGlow {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(200%);
}
}
.header-background {
position: absolute;
inset: 0;
overflow: hidden;
z-index: -1;
}
.bg-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(185, 76, 232, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(122, 44, 243, 0.15) 1px, transparent 1px);
background-size: 20px 20px;
animation: slideGrid 20s linear infinite;
}
/* Payment Success Start */
.payment-success-section {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
background: #f6f8fb;
position: relative;
overflow: hidden;
}
.success-layout {
background: #fff;
border-radius: 18px;
padding: 40px 50px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.tick-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 16px;
}
.tick-image {
width: 80px;
height: auto;
}
.success-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
}
.success-text {
font-size: 15px;
font-weight: 500;
line-height: 1.6;
margin-bottom: 25px;
}
.success-actions {
margin-top: 10px;
}
.success-actions .btn {
padding: 10px 22px;
border-radius: 8px;
font-size: 14px;
}
.success-image {
max-width: 400px;
width: 100%;
text-align: center;
}
.confetti {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 5;
}
.confetti-piece {
position: absolute;
top: -10px;
width: 8px;
height: 14px;
background: #22c55e;
opacity: 0.9;
animation: confetti-fall 3s linear infinite;
}
.confetti-piece:nth-child(odd) {
background: #7a2cf3;
}
.confetti-piece:nth-child(3n) {
background: #b94ce8;
}
.confetti-piece:nth-child(4n) {
background: #f58b69;
}
.confetti-piece:nth-child(1) {
left: 5%;
animation-delay: 0s;
}
.confetti-piece:nth-child(2) {
left: 12%;
animation-delay: 0.3s;
}
.confetti-piece:nth-child(3) {
left: 18%;
animation-delay: 0.6s;
}
.confetti-piece:nth-child(4) {
left: 25%;
animation-delay: 0.1s;
}
.confetti-piece:nth-child(5) {
left: 32%;
animation-delay: 0.5s;
}
.confetti-piece:nth-child(6) {
left: 40%;
animation-delay: 0.2s;
}
.confetti-piece:nth-child(7) {
left: 48%;
animation-delay: 0.7s;
}
.confetti-piece:nth-child(8) {
left: 55%;
animation-delay: 0.4s;
}
.confetti-piece:nth-child(9) {
left: 63%;
animation-delay: 0.9s;
}
.confetti-piece:nth-child(10) {
left: 70%;
animation-delay: 0.6s;
}
.confetti-piece:nth-child(11) {
left: 78%;
animation-delay: 0.3s;
}
.confetti-piece:nth-child(12) {
left: 85%;
animation-delay: 0.8s;
}
.confetti-piece:nth-child(13) {
left: 92%;
animation-delay: 0.5s;
}
@keyframes confetti-fall {
0% {
transform: translateY(-10px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
@media (max-width: 768px) {
.success-layout {
flex-direction: column;
padding: 30px 20px;
text-align: center;
}
.success-steps {
justify-content: center;
}
}
/* Payment Success End */
/* User Message edit icon */
.wc-message.wc-user .wc-message-body > div button {
position: absolute;
top: -30px;
right: -10px;
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transform: scale(0.8);
}
.wc-message.wc-user .wc-message-body > div:hover button {
opacity: 1;
transform: scale(1);
}
.wc-message.wc-user .wc-message-body > div {
position: relative;
transition: all 0.3s ease;
margin: 0;
}
/* Dashboard Scroll */
.dashboardScroll {
height: calc(100vh - 70px);
overflow-y: auto;
overflow-x: hidden;
}
.dashboardScroll::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.dashboardScroll {
scrollbar-width: none;
}
.dashboardScroll {
-ms-overflow-style: none;
}
/* VOICE AGENT */
.step-form {
position: relative;
min-height: 65vh;
}
.step-content {
}
.step-footer {
position: sticky;
bottom: 0;
padding: 16px 0;
display: flex;
justify-content: space-between;
border-top: 1px solid var(--color-gray-150);
}
.step-nav-text {
font-size: 14px;
font-weight: 500;
padding: 8px 18px;
cursor: pointer;
border-radius: 999px;
transition: all 0.25s ease;
}
.step-nav-text:hover {
background: linear-gradient(90deg, #6b1fe8 0%, #a63ddf 45%, #ee7a57 100%);
color: var(--color-white);
}
/* Order Payment Start */
.order-summary-table {
width: 100%;
border-collapse: collapse;
}
.order-summary-table td {
padding: 10px 6px;
vertical-align: middle;
border: none;
border-bottom: 0.5px solid #dadada;
}
.order-summary-table tr:last-child td {
border-bottom: none;
}
.order-summary-table .label-cell {
font-weight: 600;
color: #bfc6d4;
width: 40%;
}
.order-summary-table .value-cell {
text-align: right;
color: var(--color-black);
}
.status-select {
border-radius: 6px;
padding: 2px 10px;
font-size: 11px;
border: 1px solid #ccc;
background-color: #f9f9f9;
color: var(--color-black);
}
.status-badge {
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
text-transform: capitalize;
}
.status-badge.created {
color: #ffc107;
}
.status-badge.paid {
color: #28a745;
}
.status-badge.failed {
color: #dc3545;
}
.backGroundGradient {
background: linear-gradient(135deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
}
.upgradeBtn {
background-color: var(--color-secondary);
color: var(--color-home-bg);
border-radius: 10px;
font-size: 13px;
font-weight: 600;
transition: all 0.25s ease;
box-shadow: 0 6px 14px rgba(17, 24, 39, 0.25);
}
.upgradeBtn:hover {
background-color: var(--color-secondary-dark) !important;
color: var(--color-home-bg) !important;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(17, 24, 39, 0.35);
}
.upgradeHeading {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
color: var(--color-white);
}
.upgradeDesc {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
}
/* Order Payment End */
/* Leads */
.leads-dropdown {
top: 100%;
left: 0;
min-width: 80px;
border-radius: 6px;
padding: 0.5rem 0;
list-style: none;
}
.leads-dropdown .dropdown-item {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
color: var(--color-black);
background-color: var(--color-white);
border: none;
text-align: left;
cursor: pointer;
}
.leads-dropdown .dropdown-item:hover {
background-color: var(--color-primary-lighter-50);
color: var(--color-black);
}
.success-btn {
background-color: var(--color-success-bg) !important;
color: var(--color-success) !important;
border: none;
}
.danger-btn {
background-color: var(--color-error-bg) !important;
color: var(--color-error) !important;
border: none;
}
.MuiCheckbox-colorPrimary {
color: var(--color-primary-solid) !important;
}
/* Call */
.calldays {
background-color: var(--color-white) !important;
color: var(--color-primary-solid);
border-radius: 25%;
border: 1px solid var(--color-primary-solid);
padding: 7px 10px !important;
}
.calldays:hover,
.calldays:active {
background: linear-gradient(
90deg,
#7a2cf3 0%,
#b94ce8 45%,
#f58b69 100%
) !important;
color: var(--color-white) !important;
border: none;
}
.timepicker-call {
width: 600px !important;
border-radius: 25px !important;
}
.css-vycme6-MuiPickersInputBase-root-MuiPickersOutlinedInput-root {
border-radius: 15px !important;
line-height: 1 !important;
}
.timepicker-call .MuiOutlinedInput-root {
border-radius: 15px !important;
}
.timepicker-call .MuiPickersSectionList-root {
opacity: 1 !important;
/* padding: 12.5px !important; */
width: 100%;
}
.timepicker-call
.MuiOutlinedInput-root.Mui-focused
.MuiPickersSectionList-root {
opacity: 1 !important;
}
.timepicker-call .MuiOutlinedInput-root.Mui-focused fieldset {
border-color: var(--color-primary-solid) !important;
border-width: 1px;
}
.timepicker-call .MuiOutlinedInput-root:focus-within {
box-shadow: none !important;
}
@keyframes pulse-dot {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.pulse-dot {
animation: pulse-dot 1.5s infinite;
}
.paymentSuccess-btn {
background-color: var(--color-success);
color: var(--color-white);
border-radius: 7px;
padding: 8px;
font-size: 12px;
font-weight: 400 !important;
}
.paymentSuccess-btn:hover {
background-color: var(--color-success);
color: var(--color-white);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
border-radius: 10px;
}
/* Subscription card */
.plan-feature {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 2px;
border-radius: 10px;
}
.plan-feature-icon {
font-size: 16px;
margin-top: 3px;
flex-shrink: 0;
color: var(--color-primary-solid);
}
.plan-feature-text {
line-height: 1.5;
font-size: 14px;
}
.plan-card {
position: relative;
background: linear-gradient(135deg, var(--bg-card), var(--color-gray-50));
border-radius: 18px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
transition: all 0.35s ease;
overflow: hidden;
animation: fadeUp 0.6s ease forwards;
}
.plan-card:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: var(--shadow-lg);
}
.plan-badge {
display: inline-block;
padding: 6px 14px;
font-size: 13px;
font-weight: 700;
border-radius: 999px;
background: var(--color-primary-lighter-50);
color: var(--color-primary-solid);
width: fit-content;
margin-bottom: 12px;
}
.plan-price {
font-size: 3.2rem;
font-weight: 800;
letter-spacing: -1px;
line-height: 1;
color: var(--text-black);
}
.plan-tagline {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 18px;
}
.plan-card ul li:hover {
background: var(--color-primary-lighter-10);
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.plan-capability-item {
padding: 6px 10px;
background: #f8f9fa;
border-radius: 20px;
}
.plan-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
600px circle at top left,
rgba(122, 44, 243, 0.08),
transparent 40%
);
opacity: 0;
transition: opacity 0.35s ease;
z-index: 0;
pointer-events: none;
}
.plan-card:hover::before {
opacity: 1;
}
.plan-feature:hover {
background: var(--color-primary-lighter-10);
}
.plan-card.active {
border: 2px solid var(--color-primary-solid);
}
/* Usage cards */
.usage-human .usage-icon {
color: #7a2cf3;
}
.usage-flow .usage-icon {
color: #9b3def;
}
.usage-ai .usage-icon {
color: #b94ce8;
}
.usage-content .usage-icon {
color: #0d9488;
}
.usage-website .usage-icon {
color: #0891b2;
}
.usage-whatsapp .usage-icon {
color: #25d366;
}
.usage-message .usage-icon {
color: #d97a5e;
}
.usage-credit .usage-icon {
color: #f58b69;
}
.usage-icon {
transition:
transform 0.3s ease,
color 0.3s ease;
}
.subscriptionCard:hover .usage-icon {
transform: scale(1.15);
}
.deleteDropdownButton {
color: var(--color-error);
}
.deleteDropdownButton:hover {
background-color: var(--color-error-bg);
color: var(--color-error);
}
/* Subscription modal */
.subscription-modal-wrapper {
display: flex;
flex-direction: column;
max-height: 85vh;
}
.subscription-modal-body {
display: flex;
flex: 1;
overflow: hidden;
}
.plan-list {
width: 50%;
border-right: 1px solid #e5e7eb;
padding: 12px;
}
.plan-item {
padding: 12px;
border-radius: 8px;
margin-bottom: 8px;
cursor: pointer;
background: #f9fafb;
border: 1px solid var(--color-primary-solid);
}
.highlight-section {
animation: pulseGlow 2s ease-in-out;
}
@keyframes pulseGlow {
0% {
background-color: transparent;
}
50% {
background-color: rgba(122, 44, 243, 0.08);
}
100% {
background-color: transparent;
}
}
.plan-amount {
font-size: 13px;
font-weight: 700;
}
.plan-item.active {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
color: var(--color-white);
}
.plan-details {
width: 50%;
padding: 16px;
overflow-y: auto;
}
.plan-feature-list {
padding-left: 18px;
}
.plan-taglines,
.plan-tax {
font-size: 10px;
}
.custom-modal-md .modal-content {
max-height: 85vh;
display: flex;
flex-direction: column;
}
.custom-modal-md .modal-body {
flex: 1;
}
.subscription-modal-footer {
padding: 16px;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: end;
align-items: center;
}
.plan-details {
scrollbar-width: thin;
scrollbar-color: #ffffff #ffffff;
}
.billing-toggle-center {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: #000;
background-color: #cfcfcf1b;
border-radius: 10px;
padding: 5px;
}
.billing-btn {
padding: 6px 14px;
border-radius: 6px;
border: 1px solid transparent;
background: transparent;
color: #000;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.billing-btn.active {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
border-color: transparent;
color: var(--color-white);
}
.billing-btn:not(.active) {
color: #000;
}
.billing-btn:hover:not(.active) {
background-color: var(--color-primary-lighter);
}
.billing-btn:hover {
background: linear-gradient(90deg, #6b1fe8 0%, #a63ddf 45%, #ee7a57 100%);
color: var(--color-white);
}
.plan-details::-webkit-scrollbar {
width: 8px;
}
.plan-details::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 10px;
}
.plan-details::-webkit-scrollbar-thumb {
background-color: #ffffff;
border-radius: 10px;
border: 2px solid #ffffff;
}
.plan-details::-webkit-scrollbar-thumb:hover {
background-color: #ffffff;
}
/* Alert Banner */
.alert-banner {
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
width: 100%;
}
.alert-message {
line-height: 1.4;
}
.alert-icon {
font-size: 18px;
margin-top: 2px;
}
.alert-banner.warning {
background-color: #fff1d6;
border: 1px solid #ffe2a8;
color: #6b4f00;
}
.alert-banner.warning .alert-icon {
color: #f5b400;
}
.alert-banner.error {
background-color: #fde2e2;
border: 1px solid #f5b5b5;
color: #7f1d1d;
}
.alert-banner.error .alert-icon {
color: #ef4444;
}
.alert-action {
color: #2563eb;
font-weight: 500;
white-space: nowrap;
}
@media (max-width: 576px) {
.alert-banner {
font-size: 13px;
padding: 10px 12px;
}
.alert-icon {
font-size: 16px;
}
.alert-action {
align-self: flex-start;
}
}
.highlight-plans {
animation: highlightFade 2s ease-in-out;
}
@keyframes highlightFade {
0% {
background-color: var(--color-primary-lighter);
}
50% {
background-color: transparent;
}
}
.alert-open {
opacity: 1;
transform: translateY(0);
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.alert-closing {
opacity: 0;
transform: translateY(-8px);
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.alert-close {
color: inherit;
opacity: 0.6;
font-size: 18px;
line-height: 1;
}
.alert-close:hover {
opacity: 1;
}
/* Sidebar active tabs */
.hide-mobile {
display: block;
}
@media (max-width: 767px) {
.hide-mobile {
display: none !important;
}
}
.responsive-sidebar {
display: flex;
scrollbar-width: none;
-ms-overflow-style: none;
}
.responsive-sidebar::-webkit-scrollbar {
display: none;
}
.responsive-sidebar .custom-tab {
position: relative;
display: flex;
align-items: center;
background: transparent !important;
border: none !important;
font-weight: 500;
color: #555;
white-space: nowrap;
}
@media (min-width: 768px) {
.responsive-sidebar {
flex-direction: column;
overflow-x: hidden;
overflow-y: visible;
}
.responsive-sidebar .custom-tab {
width: 100%;
margin-bottom: 8px;
border-left: 3px solid transparent;
}
.responsive-sidebar .custom-tab.active {
border-left: 3px solid var(--color-primary-solid);
font-weight: 600;
}
}
@media (max-width: 767px) {
.responsive-sidebar {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.responsive-sidebar .custom-tab {
margin-right: 20px;
padding-bottom: 8px;
}
.responsive-sidebar .custom-tab.active {
border-left: none !important;
}
.responsive-sidebar .tab-text {
position: relative;
display: inline-block;
}
.responsive-sidebar .custom-tab.active .tab-text::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
border-radius: 3px;
}
}
@media (max-width: 767px) {
.custom-tab.active::after {
content: none !important;
}
}
.delete-tab {
color: var(--color-error) !important;
}
.tab-text {
font-size: inherit;
font-weight: inherit;
}
/* Status select */
.status-select {
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
border: none !important;
outline: none !important;
cursor: pointer;
text-align: center;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px;
padding-right: 24px;
}
.status-info {
background-color: #e3f2fd !important;
color: #0d6efd !important;
}
.status-primary {
background-color: #ede8fc !important;
color: #7a2cf3 !important;
}
.status-warning {
background-color: #fff3cd !important;
color: #f57c00 !important;
}
.status-success {
background-color: #e8f5e9 !important;
color: #2e7d32 !important;
}
.status-purple {
background-color: #f0e6fd !important;
color: #b94ce8 !important;
}
.status-dark {
background-color: #eceff1 !important;
color: #37474f !important;
}
.status-danger {
background-color: #ffebee !important;
color: #c62828 !important;
}
.status-muted {
background-color: #f5f5f5 !important;
color: #757575 !important;
}
.tableMainText {
font-size: 13px;
font-weight: 700;
}
.tableSubText {
font-size: 11px;
color: #888;
}
/* MUI DateTimePicker */
.MuiFormControl-root {
display: block !important;
width: 100% !important;
}
.MuiOutlinedInput-root {
border-radius: 12px !important;
height: 42px !important;
}
.MuiInputBase-input {
padding: 10px 12px !important;
font-size: 15px !important;
}
.dropdownScroll {
max-height: 110px;
overflow-y: auto;
}
.dropdownScroll::-webkit-scrollbar {
width: 4px;
}
.dropdownScroll::-webkit-scrollbar-thumb {
background-color: #d1d5db;
border-radius: 4px;
}
.dropdownScroll::-webkit-scrollbar-track {
background-color: transparent;
}
.inbox-table tr td {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
.wc-message-body.editing {
position: relative;
padding: 13px 5px 14px 16px !important;
background: var(--color-white) !important;
border-bottom-right-radius: 6px;
max-width: 80%;
width: 100%;
}
.info-icon {
cursor: pointer;
color: #6c757d;
}
.info-icon:hover {
color: #0d6efd;
}
.call-history-container .MuiTableContainer-root {
overflow: hidden !important;
}
.call-history-container .MuiTable-root {
overflow: hidden !important;
}
.call-history-container .table-responsive {
overflow: hidden !important;
}
.call-history-container .reusable-table-wrapper {
overflow: hidden !important;
}
/* Payment success table */
.subscription-table th {
background: #f8f9fa;
font-weight: 600;
}
.subscription-meta p {
margin-bottom: 6px;
}
.details-value {
word-break: break-word;
overflow-wrap: anywhere;
white-space: normal;
max-width: 160px;
}
.voice-play-badge {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e0e7ff;
cursor: pointer;
transition: all 0.2s ease;
}
.voice-play-badge:hover {
background: linear-gradient(90deg, #6b1fe8 0%, #a63ddf 45%, #ee7a57 100%);
color: #fff;
}
.waveform-loader {
gap: 4px;
}
.wave-bar {
width: 4px;
height: 30px;
background: linear-gradient(180deg, #7a2cf3 0%, #f58b69 100%);
border-radius: 4px;
animation: wave 1s ease-in-out infinite;
}
.wave-bar:nth-child(2) {
animation-delay: 0.1s;
height: 40px;
}
.wave-bar:nth-child(3) {
animation-delay: 0.2s;
height: 50px;
}
.wave-bar:nth-child(4) {
animation-delay: 0.3s;
height: 40px;
}
.wave-bar:nth-child(5) {
animation-delay: 0.4s;
height: 30px;
}
@keyframes wave {
0%,
100% {
transform: scaleY(0.5);
opacity: 0.5;
}
50% {
transform: scaleY(1.2);
opacity: 1;
}
}
.subscription-card {
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e5e7eb;
}
.plan-title {
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #1e293b;
}
.meta-label {
font-size: 13px;
color: #64748b;
margin-bottom: 4px;
}
.meta-value {
font-size: 16px;
font-weight: 600;
color: #0f172a;
}
.border-end {
border-right: 1px solid #e5e7eb;
}
.css-unhb03-MuiNativeSelect-root-MuiSelect-select-MuiInputBase-input-MuiInput-input.css-unhb03-MuiNativeSelect-root-MuiSelect-select-MuiInputBase-input-MuiInput-input.css-unhb03-MuiNativeSelect-root-MuiSelect-select-MuiInputBase-input-MuiInput-input {
font-size: 12px !important;
margin-right: 5px;
padding-left: 0 !important;
}
.domain-setup-card {
background: white;
border-radius: 24px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
border: 1px solid #f0f2f5;
}
.setup-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #7a2cf3 0%, #b94ce8 50%, #f58b69 100%);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.domain-input-section {
background: #f8fafd;
border-radius: 20px;
padding: 25px;
border: 1px dashed #d0d9e8;
}
.domain-input-group {
flex: 1;
min-width: 300px;
}
.domain-input {
height: 48px;
border: 2px solid #eef2f6;
border-radius: 12px;
font-size: 15px;
padding: 0 16px;
transition: all 0.2s ease;
}
.domain-preview {
margin-top: 12px;
padding: 10px 16px;
background: white;
border-radius: 10px;
border: 1px solid #eef2f6;
}
.preview-label {
color: #6b7280;
font-size: 13px;
margin-right: 8px;
}
.preview-domain {
font-weight: 600;
color: var(--color-secondary-dark);
font-size: 16px;
}
.publish-btn {
height: 48px;
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
padding: 0 32px;
color: white;
display: flex;
align-items: center;
transition: all 0.3s ease;
white-space: nowrap;
}
.publish-btn:hover:not(:disabled) {
background: linear-gradient(90deg, #6b1fe8 0%, #a63ddf 45%, #ee7a57 100%);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(122, 44, 243, 0.3);
}
.publish-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: #a0aec0;
}
.domain-info-card {
margin-top: 20px;
padding: 16px 20px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 16px;
display: flex;
gap: 12px;
align-items: center;
}
.info-icon {
font-size: 20px;
}
.info-content {
color: #065f46;
font-size: 14px;
line-height: 1.5;
}
/* Stepper Styles */
.stepper-title {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #f0f2f5;
}
.stepper-vertical {
display: flex;
flex-direction: column;
}
.step-item {
display: flex;
gap: 16px;
position: relative;
}
.step-connector-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.step-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: 18px;
transition: all 0.3s ease;
z-index: 1;
}
.step-icon.active {
background: linear-gradient(135deg, #7a2cf3 0%, #b94ce8 50%, #f58b69 100%);
color: white;
box-shadow: 0 8px 20px rgba(122, 44, 243, 0.35);
}
.step-connector {
width: 2px;
height: 40px;
background: #e5e7eb;
margin: 4px 0;
transition: all 0.3s ease;
}
.step-connector.completed {
background: #10b981;
}
.step-content {
flex: 1;
padding-top: 8px;
}
.step-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 5px;
flex-wrap: wrap;
}
.step-title {
font-weight: 600;
font-size: 15px;
color: #6b7280;
margin-top: 2px;
}
.step-title.active {
color: var(--color-primary-solid);
font-size: 16px;
}
.step-summary {
background: #f8fafd;
border-radius: 16px;
}
.step-summary h6 {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 15px;
}
.summary-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.summary-item span:first-child {
color: #6b7280;
}
.summary-item strong {
color: #1f2937;
font-weight: 600;
}
.step-right {
flex: 1;
padding-bottom: 20px;
}
.step-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.step-desc {
font-size: 13px;
color: #666;
}
.badge1 {
font-size: 11px;
padding: 3px 8px;
border-radius: 6px;
text-transform: capitalize;
}
.badge1.completed {
color: #16a34a;
}
.badge1.current {
color: var(--color-primary-solid);
}
.badge1.upcoming {
color: #999;
}
.publish-stepper {
background: var(--color-white, #ffffff);
border-radius: 24px;
padding: 30px;
box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
border: 1px solid var(--color-gray-200, #e2e2e2);
position: sticky;
top: 30px;
}
.step-icon.completed {
background: var(--color-success-bg, #c2f7db);
color: var(--color-success, #1fc16b);
border-color: var(--color-success, #1fc16b);
}
.step-label {
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.step-summary {
margin-top: 30px;
padding: 20px;
background: var(--color-gray-100, #f8f8f7);
border-radius: 16px;
border: 1px solid var(--color-gray-200, #e2e2e2);
}
@media (max-width: 768px) {
.publish-stepper {
position: static;
margin-top: 30px;
}
.step-top {
flex-wrap: wrap;
gap: 8px;
}
}
.domain-success-card {
margin-top: 15px;
padding: 15px;
border-radius: 10px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
}
.domain-error-card {
margin-top: 15px;
padding: 15px;
border-radius: 10px;
background: #fef2f2;
border: 1px solid #fecaca;
}
.domain-success-clean {
margin-top: 20px;
}
.domain-success-clean {
margin-top: 24px;
padding: 24px;
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border-radius: 20px;
border: 1px solid #86efac;
position: relative;
overflow: hidden;
}
.success-title1 {
font-size: 20px;
font-weight: 700;
color: #166534;
margin-bottom: 8px;
line-height: 1.3;
}
.success-message1 {
font-size: 14px;
color: #15803d;
margin-bottom: 16px;
line-height: 1.5;
}
.purchase-btn {
flex: 2;
background: #22c55e;
color: white;
border: none;
border-radius: 14px;
padding: 14px 20px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.purchase-btn:hover {
background: #16a34a;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}
/* Loading shimmer */
.domain-shimmer {
margin-top: 20px;
}
@keyframes shimmer {
0% {
background-position: -400px 0;
}
100% {
background-position: 400px 0;
}
}
.shimmer-line,
.shimmer-button {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
background-size: 400px 100%;
animation: shimmer 1.2s infinite linear;
border-radius: 6px;
}
.shimmer-line.title {
height: 16px;
width: 60%;
margin-bottom: 10px;
}
.shimmer-line.sub {
height: 12px;
width: 80%;
margin-bottom: 20px;
}
.shimmer-button {
height: 40px;
width: 100%;
border-radius: 30px;
}
.pill-select {
display: grid;
grid-template-columns: repeat(2, 2fr);
gap: 10px;
}
.pill-btn {
width: 100%;
text-align: center;
}
.cb-card-ui {
border: 2px solid transparent;
border-radius: 14px;
padding: 18px 10px;
text-align: center;
cursor: pointer;
transition: 0.2s ease;
background: #f9f9f9;
}
.cb-card-ui:hover {
border-color: var(--color-primary-solid);
}
.cb-card-ui.active {
border-color: var(--color-primary-solid);
background: var(--color-primary-lighter-50);
}
.cb-icon {
font-size: 32px;
margin-bottom: 8px;
}
.cb-icon img {
width: 40px;
height: 40px;
object-fit: contain;
}
.cb-name {
font-size: 14px;
margin: 0;
color: #444;
}
.skeleton {
pointer-events: none;
}
.skeleton-box {
width: 40px;
height: 40px;
border-radius: 8px;
background: #e0e0e0;
margin: 0 auto 8px;
}
.skeleton-text {
width: 70%;
height: 12px;
margin: 0 auto;
background: #e0e0e0;
border-radius: 6px;
}
.skeleton-box,
.skeleton-text {
position: relative;
overflow: hidden;
}
.domain-type-card {
border: 2px solid #eee;
padding: 20px;
border-radius: 12px;
cursor: pointer;
text-align: center;
transition: 0.3s;
background: #fff;
}
.domain-type-card:hover {
border-color: var(--color-primary-solid);
}
.domain-type-card.active {
border: 2px solid var(--color-primary-solid);
background: var(--color-primary-lighter-10);
}
.skeleton-box::after,
.skeleton-text::after {
content: "";
position: absolute;
top: 0;
left: -150%;
height: 100%;
width: 150%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent
);
animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
100% {
left: 100%;
}
}
.cb-card-ui {
border: 1px solid #ddd;
}
/* Lead add manually */
.lead-card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
border: 1px solid #f1f1f1;
transition: all 0.3s ease;
}
.lead-card:hover {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.add-row-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 10px;
background: #111827;
color: #fff;
border: none;
font-size: 13px;
transition: all 0.2s ease;
}
.add-row-btn:hover {
background: #1f2937;
}
.table-container {
background: #ffffff;
border-radius: 14px;
border: 1px solid #e5e7eb;
overflow: hidden;
}
.add-btn-modern {
display: flex;
align-items: center;
gap: 6px;
background: #43a057;
color: #fff;
border: none;
padding: 6px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.add-btn-modern:hover {
background: #37b356;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
.add-btn-modern:active {
transform: translateY(0px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.delete-cell {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.delete-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: 8px;
background-color: var(--color-error-bg);
color: var(--color-error);
cursor: pointer;
transition: all 0.2s ease;
}
.delete-btn:hover {
background-color: var(--color-error);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.delete-btn:focus {
outline: none;
box-shadow: none;
}
.lead-card {
min-height: 500px;
padding: 20px 24px;
border-radius: 16px;
background: var(--color-white);
box-shadow: var(--shadow-sm);
}
.lead-card .table-container {
margin-top: 16px;
}
.MuiDataGrid-row {
min-height: 60px !important;
}
.MuiDataGrid-cell {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
/* Modern Tab Switch */
.tab-switch {
display: inline-flex;
background: #f1f5f9;
padding: 4px;
border-radius: 30px;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
}
.tab-btn {
border: none;
background: transparent;
padding: 8px 20px;
border-radius: 30px;
font-size: 13px;
font-weight: 500;
color: #6b7280;
transition: all 0.25s ease;
position: relative;
}
.tab-btn.active {
background: #ffffff;
color: #111827;
font-weight: 600;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.tab-btn:hover {
color: #111827;
}
.upload-body {
padding: 40px 20px;
font-size: 13px;
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border: 2px dashed #d1d5db;
border-radius: 16px;
background: linear-gradient(145deg, #ffffff, #f9fafb);
transition: all 0.3s ease;
position: relative;
}
.download-btn {
position: absolute;
top: 12px;
right: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecfdf5;
color: #16a34a;
border: 1px solid #bbf7d0;
transition: all 0.25s ease;
cursor: pointer;
text-decoration: none;
}
.download-btn:hover {
background: #16a34a;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(22, 163, 74, 0.25);
}
.download-btn:active {
transform: scale(0.95);
}
.learnMoreBtn1 {
background-color: var(--color-white);
color: var(--color-black) !important;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
border: 1px solid var(--color-gray-300) !important;
border-radius: 10px;
}
.learnMoreBtn1:hover,
.learnMoreBtn1.active {
transform: translateY(-1px);
box-shadow: 0px 5px 10px var(--color-gray-200);
}
.download-sample-btn {
width: fit-content;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
border-radius: 12px;
background-color: var(--color-primary-lighter-50);
color: var(--text-color);
border: none;
transition: all 0.2s ease;
text-decoration: none;
position: absolute;
top: 12px;
right: 12px;
}
.download-sample-btn:hover {
background-color: var(--color-gray-100);
transform: translateY(-1px);
}
.scroll-button {
height: 350px;
overflow-y: auto;
border-radius: 12px;
}
/* Leads */
.lead-info-wrapper {
display: flex;
flex-direction: column;
gap: 14px;
}
.lead-card1 {
background: #fff;
border-radius: 14px;
padding: 14px;
border: 1px solid #eee;
}
.card-header1 {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 14px;
color: #333;
margin-bottom: 10px;
}
.info-box {
border: 1px solid #eee;
border-radius: 10px;
padding: 12px;
}
.lead-name {
font-weight: 600;
margin-bottom: 10px;
}
.card-body1 p,
.info-box p {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #555;
margin: 6px 0;
}
.user-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #f1f1f1;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
margin-top: 8px;
}
.user-chip img {
width: 22px;
height: 22px;
border-radius: 50%;
}
.insight1 {
display: flex;
justify-content: space-between;
font-size: 13px;
margin-bottom: 6px;
}
.lead-info-wrapper {
display: flex;
flex-direction: column;
gap: 13px;
}
.leads-right-scroll {
padding-left: 3px !important;
}
.sentiment {
font-size: 13px;
}
.sentiment span {
color: var(--color-primary-solid);
font-weight: 500;
}
.detail-link {
font-size: 13px;
color: #666;
cursor: pointer;
}
.task-row {
display: flex;
justify-content: space-between;
font-size: 13px;
}
.time3 {
color: #888;
font-size: 12px;
}
.add-task {
display: flex;
justify-content: space-between;
font-size: 13px;
margin-top: 10px;
color: #666;
cursor: pointer;
}
.lead-header {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 16px;
border-radius: 14px;
border: 1px solid #eee;
}
.lead-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.avatar5 {
width: 48px;
height: 48px;
background: var(--color-primary-lighter);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--color-primary-solid);
}
.lead-title {
margin: 0;
font-weight: 600;
}
.lead-tags {
display: flex;
gap: 6px;
margin-top: 4px;
}
.tag-lead {
background: #f3f4f6;
padding: 3px 8px;
border-radius: 8px;
font-size: 12px;
}
.tag-lead.success {
background: var(--color-primary-lighter-50);
color: var(--color-primary-solid);
}
.lead-actions {
display: flex;
gap: 8px;
}
.lead-subinfo {
display: flex;
justify-content: space-between;
margin-top: 12px;
background: #fff;
padding: 14px;
border-radius: 14px;
border: 1px solid #eee;
}
.lead-subinfo small {
color: #888;
font-size: 12px;
}
.lead-subinfo p {
margin: 0;
font-size: 13px;
}
.positive1 {
color: green;
font-weight: 500;
}
.high1 {
color: var(--color-primary-solid-mid);
font-weight: 500;
}
@media (max-width: 992px) {
.lead-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.lead-actions {
width: 100%;
flex-wrap: wrap;
gap: 8px;
}
.lead-actions .btn {
flex: 1 1 auto;
justify-content: center;
}
.lead-subinfo {
flex-wrap: wrap;
gap: 12px;
}
.lead-subinfo > div {
flex: 1 1 45%;
}
}
@media (max-width: 576px) {
.lead-header-left {
align-items: flex-start;
}
.avatar5 {
width: 40px;
height: 40px;
font-size: 14px;
}
.lead-title {
font-size: 15px;
}
.lead-tags {
flex-wrap: wrap;
}
.lead-actions {
flex-direction: column;
width: 100%;
}
.lead-actions .btn {
width: 100%;
}
.lead-subinfo {
flex-direction: column;
}
.lead-subinfo > div {
width: 100%;
}
.card-body1 p,
.info-box p {
font-size: 12px;
}
.task-row {
flex-direction: column;
gap: 4px;
}
.user-chip.w-50 {
width: 100% !important;
}
}
@media (max-width: 400px) {
.lead-title {
font-size: 14px;
}
.lead-actions .btn {
font-size: 12px;
padding: 6px;
}
.lead-subinfo p {
font-size: 12px;
}
}
.status-card {
background: #fff;
border-radius: 16px;
border: 1px solid #eee;
padding: 14px;
}
.status-box {
background: #fafafa;
border-radius: 12px;
padding: 12px;
}
.status-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.status-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.status-pill {
display: flex;
align-items: center;
gap: 6px;
background: var(--color-primary-lighter-50);
color: var(--color-primary-solid);
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
white-space: nowrap;
}
.dot1 {
width: 6px;
height: 6px;
background: var(--color-primary-solid-mid);
border-radius: 50%;
}
.status-time-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #666;
margin: 8px 0;
}
.status-users {
display: flex;
justify-content: space-between;
align-items: center;
}
.user-chip {
display: flex;
align-items: center;
gap: 6px;
background: #f1f1f1;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
max-width: 100%;
overflow: hidden;
}
.user-chip span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-chip img {
width: 22px;
height: 22px;
border-radius: 50%;
}
.status-actions1 {
display: flex;
gap: 8px;
margin-top: 12px;
}
.status-actions1 .btn {
flex: 1;
font-size: 11px;
padding: 6px 6px;
white-space: nowrap;
}
.next-card,
.notes-card {
background: #fff;
border-radius: 14px;
border: 1px solid #eee;
padding: 14px;
margin-top: 12px;
}
.next-text {
font-size: 13px;
color: #444;
margin: 8px 0;
}
.next-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
}
.priority1 {
font-size: 11px;
white-space: nowrap;
color: #888;
}
.note-box {
background: #fafafa;
border-radius: 10px;
padding: 10px;
margin-top: 10px;
position: relative;
}
.note-tag {
position: absolute;
top: -8px;
right: 10px;
background: var(--color-primary-lighter);
font-size: 10px;
padding: 2px 6px;
border-radius: 6px;
}
.note-title {
font-size: 12px;
color: #666;
}
.note-text {
font-size: 13px;
color: #333;
}
.tasked {
margin-top: 12px;
}
.tasked h6 {
font-size: 13px;
margin-bottom: 6px;
}
.add-note {
margin-top: 10px;
font-size: 13px;
color: #888;
cursor: pointer;
}
.status-card,
.next-card,
.notes-card {
width: 100%;
min-width: 0;
}
@media (max-width: 992px) {
.status-actions1 {
flex-direction: column;
}
.status-actions1 .btn {
width: 100%;
}
}
/* ConversationJourney */
.conversation-journey {
background: white;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
min-height: 100px !important;
display: flex;
flex-direction: column;
}
.journey-header {
padding: 16px 20px;
}
.journey-header h6 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.journey-tabs {
display: flex;
padding: 2px 3px;
background: white;
border-bottom: 1px solid #e9ecef;
overflow-x: auto;
flex-wrap: wrap;
}
.tab-button {
padding: 8px 18px;
font-weight: 500;
background: transparent;
border: none;
border-radius: 40px;
color: #64748b;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.tab-button:hover {
background: var(--color-primary-lighter-10);
color: var(--color-primary-solid);
}
.tab-button.active {
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
color: white;
}
.journey-chat {
height: 360px;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 6px;
flex-shrink: 0;
}
.journey-chat::-webkit-scrollbar {
width: 6px;
}
.journey-chat::-webkit-scrollbar-track {
background: #e2e8f0;
border-radius: 10px;
}
.journey-chat::-webkit-scrollbar-thumb {
background: #94a3b8;
border-radius: 10px;
}
.empty-state1 {
text-align: center;
padding: 40px;
color: #94a3b8;
font-size: 14px;
}
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.journey-chat {
padding: 12px;
}
.message-bubble3 {
max-width: 85%;
font-size: 13px;
}
.avatar3 {
width: 28px;
height: 28px;
}
.tab-button {
padding: 6px 14px;
font-size: 12px;
}
}
.voice-wave {
flex: 1;
display: flex;
align-items: center;
gap: 2px;
height: 30px;
}
.voice-wave span {
width: 3px;
height: 8px;
background: var(--color-primary-solid-mid);
border-radius: 2px;
}
.voice-wave span:nth-child(odd) {
height: 14px;
}
.voice-wave span:nth-child(3n) {
height: 20px;
}
.chat-row3 {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
position: relative;
}
.chat-row3.user {
justify-content: flex-end;
}
.avatar3 {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: #f1f5f9;
padding: 4px;
}
.message-bubble3 {
max-width: 70%;
padding: 10px 16px;
border-radius: 18px;
font-size: 14px;
line-height: 1.5;
word-break: break-word;
position: relative;
z-index: 1;
}
.bot-message3 {
background: #eef2f6;
color: #1e293b;
border-top-left-radius: 4px;
}
.user-message3 {
background: var(--color-primary-lighter-50);
color: var(--color-primary-solid);
border-bottom-right-radius: 4px;
}
.message-header3 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 3px;
font-size: 12px;
position: relative;
}
.sender3 {
font-weight: 700;
color: var(--color-primary-solid);
}
.subject3 {
font-weight: 500;
color: var(--color-primary-solid-mid);
background: rgba(185, 76, 232, 0.1);
padding: 2px 8px;
border-radius: 12px;
}
.platform3 {
color: #64748b;
font-size: 11px;
}
.time3 {
color: #94a3b8;
font-size: 10px;
margin-left: auto;
}
.message-text3 {
line-height: 1.45;
}
.voice-card-clean3 {
background: #fff;
border-radius: 14px;
border: 1px solid #eee;
padding: 12px;
}
.voice-top3 {
display: flex;
align-items: center;
gap: 10px;
}
.voice-avatar3 {
width: 36px;
height: 36px;
border-radius: 50%;
}
.voice-info3 {
flex: 1;
}
.voice-name3 {
font-weight: 600;
font-size: 13px;
}
.voice-meta3 {
font-size: 11px;
color: #777;
}
.voice-time-right3 {
font-size: 11px;
color: #888;
}
.voice-tag3 {
display: flex;
gap: 6px;
margin: 8px 0;
}
.badge-inbound3 {
background: var(--color-primary-lighter-50);
color: var(--color-primary-solid);
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
}
.badge-agent3 {
background: #f3f4f6;
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
}
.voice-player3 {
display: flex;
align-items: center;
gap: 10px;
}
.play-btn3 {
width: 34px;
height: 34px;
border-radius: 10px;
border: none;
background: var(--color-primary-lighter);
cursor: pointer;
}
.voice-wave3 {
flex: 1;
display: flex;
align-items: center;
gap: 2px;
height: 30px;
}
.voice-wave3 span {
width: 3px;
height: 8px;
background: var(--color-primary-solid-mid);
border-radius: 2px;
}
.voice-duration3 {
display: flex;
justify-content: space-between;
font-size: 11px;
color: #666;
width: 70px;
}
/* Timeline card */
.timeline-card2 {
background: #fff;
border-radius: 16px;
border: 1px solid #e5e7eb;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.timeline-header2 {
font-weight: 600;
font-size: 15px;
margin-bottom: 16px;
}
.timeline-scroll2 {
overflow-x: auto;
padding-bottom: 10px;
}
.timeline-scroll2::-webkit-scrollbar {
height: 6px;
}
.timeline-scroll2::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 6px;
}
.timeline-track2 {
display: flex;
align-items: flex-start;
gap: 40px;
min-width: max-content;
}
.timeline-step2 {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.timeline-icon2 {
width: 38px;
height: 38px;
background: var(--color-primary-lighter-50);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
z-index: 2;
}
.timeline-line2 {
position: absolute;
top: 18px;
left: 50%;
width: 120px;
height: 2px;
background: linear-gradient(90deg, #7a2cf3 0%, #b94ce8 45%, #f58b69 100%);
z-index: 1;
}
.timeline-content2 {
margin-top: 12px;
background: #f9fafb;
padding: 10px 12px;
border-radius: 10px;
text-align: center;
min-width: 120px;
border: 1px solid #eee;
}
.timeline-title2 {
font-size: 13px;
font-weight: 500;
}
.timeline-time2 {
font-size: 11px;
color: #777;
}
.voice_button1 {
display: flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 2px 15px;
border: none;
border-radius: 6px;
background: #2563eb;
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.voice_button1:hover {
background: #1d4ed8;
}
.voice_button1 svg {
font-size: 16px;
}
.voice_button1 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 12px;
height: 32px;
border: none;
border-radius: 6px;
background: #2563eb;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
flex-shrink: 0;
}
.voice_button1:hover {
background: #1d4ed8;
}
.voice_button1 svg {
font-size: 14px;
}
.voice_button1 span {
display: inline-block;
}
:root {
/* Primary Brand Colors */
--color-home-bg: #f5f5f2;
--color-primary: #ffca40;
--color-primary-lighter: #ffe599;
--color-primary-lighter-50: #fff2cb;
--color-primary-lighter-10: rgba(255, 248, 216, 0.76);
--color-primary-darker: #cc9c2d;
--color-primary-hover: #f5c036;
--color-primary-active: #d9a52c;
--color-primary-disabled: #e6d8a8;
--color-primary-text-disabled: #8c8c8c;
}
/* Phone Frame */
.phone-frame {
width: 300px;
background: #fff;
border-radius: 30px;
border: 6px solid #2b2b2b;
overflow: hidden;
}
/* Header */
.phone-header {
padding: 14px;
border-bottom: 1px solid #ddd;
text-align: center;
}
.logo-circle {
width: 85px;
height: 85px;
background: #e5e5e5;
border-radius: 50%;
margin: 0 auto 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
.ImWhatsapp {
font-size: 30px;
font-weight: bolder;
}
/* Body */
.phone-body {
padding: 14px;
font-size: 13px;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: start;
}
/* Info rows */
.info-row {
display: flex;
gap: 8px;
margin-bottom: 6px;
align-items: flex-start;
}
.wsr-icon {
min-width: 10px;
color: #ffae00;
}
/* WRAP FIX (IMPORTANT) */
.wrap-text {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Footer */
.phone-footer {
border-top: 1px solid #ddd;
padding: 8px;
text-align: center;
font-size: 12px;
color: #0a7c5f;
}
/* Country dropdown */
.country-code {
width: 90px;
}
/* Responsive */
@media (max-width: 768px) {
.phone-frame {
margin-top: 20px;
}
}
.setup-card {
border: 1px solid #eee;
border-radius: 8px;
padding: 14px;
margin-bottom: 12px;
background: #fff;
}
.setup-card.disabled {
opacity: 0.5;
}
/* Icon */
.icon-circle {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-right: 12px;
}
/* Right preview */
.preview-wrapper {
position: relative;
background: #f3f3f3;
}
.preview-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.25;
}
/* Preview button */
.preview-btn {
position: absolute;
left: 50%;
bottom: 120px;
transform: translateX(-50%);
padding: 8px 18px;
background-color: var(--color-primary);
color: black;
font-weight: 600;
}
.preview-btn:hover {
position: absolute;
left: 50%;
bottom: 119px;
transform: translateX(-50%);
padding: 8px 18px;
background-color: var(--color-primary);
color: black;
font-weight: 600;
}
/* Hover zoom effect for active setup cards */
.setup-card {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.setup-card:not(.disabled):hover {
transform: scale(1.03);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
cursor: pointer;
}
.box-color {
background-color: var(--color-primary);
}
.whatsapp-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: #e8f7ef;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 1px 0px 4px 2px #4646462b;
}
.vertical-divider {
width: 1px;
background: #e5e5e5;
height: 100%;
}
.support-img {
max-width: 260px;
}
@media (max-width: 991px) {
.vertical-divider {
display: none;
}
}
.border-btn {
border: 1px solid var(--color-primary);
color: var(--color-primary);
}
/* GRID */
._cardGrid_1fs4f_3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
padding: 10px;
}
/* CARD */
._cardBox_1fs4f_19 {
border-radius: 10px;
padding: 10px 12px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
transition: 0.2s;
border: 1px solid #f0f2f5;
}
/* HEADER */
._cardHeader_1fs4f_39 {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
._cardBox_1fs4f_19:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
._icon_1fs4f_59 {
font-size: 14px;
color: #6b7280;
}
._title_1fs4f_69 {
font-size: 12px;
font-weight: 600;
color: #374151;
}
/* BODY */
._cardBody_1fs4f_83 {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2px;
}
._count_1fs4f_97 {
font-size: 16px;
font-weight: 700;
color: #111827;
}
/* BADGE */
._badge_1fs4f_111 {
font-size: 10px;
padding: 2px 6px;
border-radius: 999px;
font-weight: 600;
}
._badgeGreen_1fs4f_125 {
background: #e6f4ea;
color: #16a34a;
}
._badgeRed_1fs4f_135 {
background: #fdecea;
color: #dc2626;
}
/* SUBTITLE */
._subtitle_1fs4f_147 {
font-size: 10px;
color: #6b7280;
margin-top: 2px;
}
/* pie charts */
._chartGrid_1fs4f_163 {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 12px;
padding: 10px;
}
/* RESPONSIVE */
@media (max-width: 992px) {
._chartGrid_1fs4f_163 {
grid-template-columns: 1fr;
}
}
._chartCard_1fs4f_193 {
background: #fff;
border-radius: 12px;
padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: 0.2s;
}
._bigCard_1fs4f_213 {
padding-bottom: 6px;
}
._chartTitle_1fs4f_221 {
font-size: 12px;
font-weight: 600;
color: #374151;
}
/* HEADER */
._chartHeader_1fs4f_235 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
/* TABS */
._tabSwitch_1fs4f_251 {
display: flex;
gap: 6px;
font-size: 10px;
}
._tabSwitch_1fs4f_251 span {
padding: 3px 8px;
border-radius: 6px;
cursor: pointer;
color: #6b7280;
}
._activeTab_1fs4f_277 {
background: #f3f4f6;
color: #111827;
font-weight: 600;
}
/* quality metrics */
._metricsGrid_1fs4f_293 {
display: grid;
grid-template-columns: 2fr 2fr 1fr;
gap: 12px;
padding: 10px;
}
@media (max-width: 992px) {
._metricsGrid_1fs4f_293 {
grid-template-columns: 1fr;
}
}
/* CARD */
._metricsCard_1fs4f_321 {
background: #fff;
border-radius: 12px;
padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
._metricsTitle_1fs4f_335 {
font-size: 12px;
font-weight: 600;
margin-bottom: 10px;
}
._efficiencyGrid_1fs4f_347 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
._effCard_1fs4f_359 {
background: #f9fafb;
padding: 8px;
border-radius: 8px;
}
._effValue_1fs4f_371 {
font-size: 14px;
font-weight: 700;
}
._effLabel_1fs4f_381 {
font-size: 11px;
color: #6b7280;
}
._effBadge_1fs4f_391 {
font-size: 10px;
padding: 2px 6px;
border-radius: 999px;
display: inline-block;
margin-top: 2px;
}
/* =========================================================
GLOBAL PAGE RESET
========================================================= */
html,
body,
#root {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* =========================================================
HEADER
========================================================= */
._header_1sl8y_49 {
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 56px;
min-height: 56px;
margin: 0;
padding: 0;
background: #ffffff;
border-bottom: 1px solid #dfe6f0;
box-sizing: border-box;
/*
No shadow when page is at the top.
Shadow appears after scrolling.
*/
box-shadow: none;
transition:
box-shadow 0.25s ease,
border-color 0.25s ease;
}
/* =========================================================
HEADER SHADOW WHEN PAGE IS SCROLLED
========================================================= */
._headerScrolled_1sl8y_125 {
box-shadow:
0 2px 8px rgba(15, 23, 42, 0.08),
0 6px 18px rgba(15, 23, 42, 0.06);
border-bottom-color: #d6deea;
}
/* =========================================================
HEADER INNER
========================================================= */
._headerInner_1sl8y_149 {
width: 100%;
height: 56px;
min-height: 56px;
display: flex;
align-items: center;
margin: 0;
padding: 0 10px;
box-sizing: border-box;
background: #ffffff;
}
/* =========================================================
BRAND / LOGO
========================================================= */
._brand_1sl8y_191 {
width: 210px;
min-width: 210px;
height: 56px;
min-height: 56px;
display: flex;
align-items: center;
flex-shrink: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
._brandLogo_1sl8y_227 {
width: 120px;
height: 40px;
display: flex;
align-items: center;
justify-content: flex-start;
flex-shrink: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
._brandLogo_1sl8y_227 img {
width: 115px;
height: 38px;
max-width: 115px;
max-height: 38px;
object-fit: contain;
object-position: left center;
display: block;
margin: 0;
padding: 0;
}
/* =========================================================
NAVIGATION
========================================================= */
._navigation_1sl8y_299 {
height: 56px;
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
gap: 2px;
min-width: 0;
margin: 0;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
._navigation_1sl8y_299::-webkit-scrollbar {
display: none;
}
/* =========================================================
NAV ITEM
========================================================= */
._navItem_1sl8y_363 {
position: relative;
height: 42px;
min-height: 42px;
min-width: max-content;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 15px;
margin: 0 3px;
border: 0;
outline: none;
background: transparent;
color: #334155;
font-size: 14px;
font-weight: 500;
line-height: 1;
cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
flex: 0 0 auto;
flex-shrink: 0;
border-radius: 10px;
/*
Smooth tab interaction.
*/
transform: translateY(0);
transition:
color 0.2s ease,
background-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
/* =========================================================
NAV ICON
========================================================= */
._navItem_1sl8y_363 svg {
width: 20px;
height: 20px;
flex-shrink: 0;
transition:
transform 0.2s ease,
color 0.2s ease;
}
/* =========================================================
HOVER
========================================================= */
._navItem_1sl8y_363:hover {
color: #1677ff;
background: #f7faff;
transform: translateY(-1px);
}
._navItem_1sl8y_363:hover svg {
transform: scale(1.04);
}
/* =========================================================
ACTIVE / CURRENT PAGE
========================================================= */
._navItem_1sl8y_363._active_1sl8y_537 {
color: #1677ff;
font-weight: 600;
background: #e8f2ff;
height: 42px;
min-height: 42px;
margin: 0 3px;
border-radius: 10px;
/*
Small shadow makes active tab visible
against white navbar.
*/
box-shadow: 0 2px 7px rgba(22, 119, 255, 0.08);
animation: _activeTabIn_1sl8y_1 0.22s ease-out;
}
/* =========================================================
ACTIVE TAB ANIMATION
========================================================= */
@keyframes _activeTabIn_1sl8y_1 {
0% {
opacity: 0.7;
transform: translateY(2px) scale(0.97);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* =========================================================
ACTIVE ICON
========================================================= */
._navItem_1sl8y_363._active_1sl8y_537 svg {
transform: scale(1.02);
}
/* =========================================================
REMOVE OLD BOTTOM ACTIVE LINE
========================================================= */
._navItem_1sl8y_363._active_1sl8y_537::after {
display: none;
content: none;
}
/* =========================================================
FOCUS
========================================================= */
._navItem_1sl8y_363:focus {
outline: none;
}
._navItem_1sl8y_363:focus-visible {
outline: 2px solid #b9d7ff;
outline-offset: -2px;
}
/* =========================================================
LARGE TABLET
========================================================= */
@media (max-width: 1200px) {
._header_1sl8y_49 {
height: 44px;
min-height: 44px;
}
._headerInner_1sl8y_149 {
height: 44px;
min-height: 44px;
padding: 0 18px;
}
._brand_1sl8y_191 {
width: 190px;
min-width: 190px;
height: 44px;
min-height: 44px;
}
._brandLogo_1sl8y_227 {
width: 110px;
height: 38px;
}
._brandLogo_1sl8y_227 img {
width: 105px;
height: 36px;
max-width: 105px;
max-height: 36px;
}
._navigation_1sl8y_299 {
height: 44px;
min-height: 44px;
}
._navItem_1sl8y_363 {
height: 36px;
min-height: 36px;
padding: 0 13px;
margin: 0 3px;
font-size: 13px;
border-radius: 9px;
}
._navItem_1sl8y_363._active_1sl8y_537 {
height: 36px;
min-height: 36px;
margin: 0 3px;
border-radius: 9px;
}
._navItem_1sl8y_363 svg {
width: 19px;
height: 19px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
._header_1sl8y_49 {
height: 44px;
min-height: 44px;
}
._headerInner_1sl8y_149 {
height: 44px;
min-height: 44px;
padding: 0 14px;
}
._brand_1sl8y_191 {
width: 160px;
min-width: 160px;
height: 44px;
min-height: 44px;
}
._brandLogo_1sl8y_227 {
width: 105px;
height: 38px;
}
._brandLogo_1sl8y_227 img {
width: 100px;
height: 36px;
max-width: 100px;
max-height: 36px;
}
._navigation_1sl8y_299 {
height: 44px;
min-height: 44px;
gap: 0;
}
._navItem_1sl8y_363 {
height: 36px;
min-height: 36px;
padding: 0 11px;
gap: 6px;
margin: 0 2px;
font-size: 12px;
border-radius: 9px;
}
._navItem_1sl8y_363._active_1sl8y_537 {
height: 36px;
min-height: 36px;
margin: 0 2px;
border-radius: 9px;
}
._navItem_1sl8y_363 svg {
width: 18px;
height: 18px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
._header_1sl8y_49 {
position: sticky;
position: -webkit-sticky;
top: 0;
width: 100%;
height: auto;
min-height: 0;
margin: 0;
padding: 0;
background: #ffffff;
}
._headerInner_1sl8y_149 {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
height: auto;
min-height: auto;
margin: 0;
padding: 0;
overflow: visible;
}
/* =======================================================
MOBILE LOGO ROW
======================================================= */
._brand_1sl8y_191 {
width: 100%;
min-width: 0;
height: 46px;
min-height: 46px;
display: flex;
align-items: center;
padding: 0 14px;
box-sizing: border-box;
border-bottom: 1px solid #edf1f6;
background: #ffffff;
}
._brandLogo_1sl8y_227 {
width: 125px;
height: 40px;
display: flex;
align-items: center;
justify-content: flex-start;
}
._brandLogo_1sl8y_227 img {
width: 120px;
height: 38px;
max-width: 120px;
max-height: 38px;
object-fit: contain;
object-position: left center;
}
/* =======================================================
MOBILE NAV ROW
======================================================= */
._navigation_1sl8y_299 {
width: 100%;
height: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: flex-start;
flex: none;
overflow-x: auto;
overflow-y: hidden;
gap: 0;
padding: 0 5px;
box-sizing: border-box;
background: #ffffff;
scrollbar-width: none;
-ms-overflow-style: none;
}
._navigation_1sl8y_299::-webkit-scrollbar {
display: none;
}
/* =====================================================
MOBILE NAV ITEM
===================================================== */
._navItem_1sl8y_363 {
height: 36px;
min-height: 36px;
min-width: 90px;
padding: 0 12px;
gap: 6px;
flex: 0 0 auto;
flex-shrink: 0;
font-size: 12px;
border-radius: 9px;
margin: 0 2px;
box-sizing: border-box;
}
._navItem_1sl8y_363 svg {
width: 17px;
height: 17px;
flex-shrink: 0;
}
/* =====================================================
MOBILE ACTIVE
===================================================== */
._navItem_1sl8y_363._active_1sl8y_537 {
height: 36px;
min-height: 36px;
margin: 0 2px;
border-radius: 9px;
background: #e8f2ff;
color: #1677ff;
}
._navItem_1sl8y_363._active_1sl8y_537::after {
display: none;
}
/* =====================================================
NO EXTRA SPACE
===================================================== */
._header_1sl8y_49::after {
display: none;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
._brand_1sl8y_191 {
height: 44px;
min-height: 44px;
padding: 0 12px;
}
._brandLogo_1sl8y_227 {
width: 120px;
height: 38px;
}
._brandLogo_1sl8y_227 img {
width: 115px;
height: 36px;
max-width: 115px;
max-height: 36px;
}
._navigation_1sl8y_299 {
height: 42px;
min-height: 42px;
padding: 0 4px;
}
._navItem_1sl8y_363 {
height: 34px;
min-height: 34px;
min-width: 86px;
padding: 0 10px;
gap: 5px;
font-size: 11px;
margin: 0 2px;
border-radius: 8px;
}
._navItem_1sl8y_363._active_1sl8y_537 {
height: 34px;
min-height: 34px;
margin: 0 2px;
border-radius: 8px;
}
._navItem_1sl8y_363 svg {
width: 16px;
height: 16px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 350px) {
._brand_1sl8y_191 {
padding: 0 10px;
}
._brandLogo_1sl8y_227 {
width: 110px;
height: 36px;
}
._brandLogo_1sl8y_227 img {
width: 105px;
height: 34px;
max-width: 105px;
max-height: 34px;
}
._navigation_1sl8y_299 {
height: 42px;
min-height: 42px;
padding: 0 3px;
}
._navItem_1sl8y_363 {
min-width: 80px;
height: 34px;
min-height: 34px;
padding: 0 9px;
font-size: 11px;
margin: 0 2px;
border-radius: 8px;
}
._navItem_1sl8y_363._active_1sl8y_537 {
height: 34px;
min-height: 34px;
margin: 0 2px;
border-radius: 8px;
}
._navItem_1sl8y_363 svg {
width: 15px;
height: 15px;
}
}
/* =========================================================
OVERLAY
========================================================= */
._overlay_ekgz8_9 {
position: fixed;
inset: 0;
z-index: 3000;
padding: 20px;
background: rgba(10, 22, 48, 0.52);
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================================
MODAL
========================================================= */
._modal_ekgz8_45 {
width: 100%;
max-width: 1050px;
max-height: calc(100vh - 40px);
overflow: hidden;
border-radius: 12px;
background: #ffffff;
box-shadow:
0 25px 80px rgba(14, 32, 71, 0.28),
0 5px 20px rgba(14, 32, 71, 0.12);
display: flex;
flex-direction: column;
position: relative;
}
/* =========================================================
HEADER
========================================================= */
._header_ekgz8_95 {
padding: 18px 20px;
border-bottom: 1px solid #e6ecf5;
display: flex;
align-items: center;
justify-content: space-between;
flex: 0 0 auto;
}
._headerContent_ekgz8_119 {
display: flex;
align-items: center;
gap: 12px;
}
._headerIcon_ekgz8_131 {
width: 40px;
height: 40px;
border-radius: 8px;
background: #eaf3ff;
color: #1769e8;
display: flex;
align-items: center;
justify-content: center;
}
._headerIcon_ekgz8_131 svg {
width: 20px;
height: 20px;
}
._header_ekgz8_95 h2 {
margin: 0;
color: #101c4c;
font-size: 18px;
line-height: 1.2;
font-weight: 700;
}
._header_ekgz8_95 p {
margin: 4px 0 0;
color: #7889aa;
font-size: 11px;
}
._closeButton_ekgz8_207 {
width: 32px;
height: 32px;
border: 0;
border-radius: 6px;
background: transparent;
color: #7182a2;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
._closeButton_ekgz8_207:hover {
background: #f1f4f9;
color: #25375f;
}
._closeButton_ekgz8_207 svg {
width: 18px;
height: 18px;
}
/* =========================================================
TABS
========================================================= */
._tabs_ekgz8_269 {
padding: 0 20px;
border-bottom: 1px solid #e6ecf5;
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
._tab_ekgz8_269 {
height: 45px;
padding: 0 14px;
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
color: #7182a2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
._tab_ekgz8_269:hover {
color: #1769e8;
}
._activeTab_ekgz8_351 {
border-bottom-color: #1769e8;
color: #1769e8;
}
._tab_ekgz8_269 svg {
width: 15px;
height: 15px;
}
._countBadge_ekgz8_371 {
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: 20px;
background: #edf3fb;
color: #526b96;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 700;
}
/* =========================================================
BODY
========================================================= */
._body_ekgz8_417 {
min-height: 0;
overflow-y: auto;
position: relative;
}
/* =========================================================
DOCUMENT LIST
========================================================= */
._documentsView_ekgz8_441 {
padding: 20px;
}
._listHeader_ekgz8_449 {
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
._listHeader_ekgz8_449 h3,
._formIntro_ekgz8_471 h3 {
margin: 0;
color: #132253;
font-size: 15px;
font-weight: 700;
}
._listHeader_ekgz8_449 p,
._formIntro_ekgz8_471 p {
margin: 4px 0 0;
color: #7b8cac;
font-size: 10px;
}
._refreshButton_ekgz8_507 {
height: 32px;
padding: 0 11px;
border: 1px solid #d5dfef;
border-radius: 6px;
background: #ffffff;
color: #3d527c;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._refreshButton_ekgz8_507:hover {
background: #f5f8fd;
}
._refreshButton_ekgz8_507 svg {
width: 14px;
height: 14px;
}
/* =========================================================
DOCUMENT CARDS
========================================================= */
._documentList_ekgz8_575 {
display: flex;
flex-direction: column;
gap: 9px;
}
._documentCard_ekgz8_589 {
padding: 13px;
border: 1px solid #e0e7f2;
border-radius: 8px;
background: #ffffff;
display: flex;
align-items: flex-start;
gap: 12px;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
._documentCard_ekgz8_589:hover {
border-color: #c8d7ec;
box-shadow: 0 4px 15px rgba(29, 55, 100, 0.06);
}
._documentIcon_ekgz8_637 {
width: 36px;
height: 36px;
flex: 0 0 36px;
border-radius: 7px;
background: #edf3fb;
color: #4b6794;
display: flex;
align-items: center;
justify-content: center;
}
._documentIcon_ekgz8_637 svg {
width: 17px;
height: 17px;
}
._documentInfo_ekgz8_679 {
min-width: 0;
flex: 1;
}
._documentTitleRow_ekgz8_689 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
._documentTitleRow_ekgz8_689 h4 {
margin: 0;
color: #17295a;
font-size: 12px;
font-weight: 700;
}
._documentCategory_ekgz8_723 {
display: block;
margin-top: 3px;
color: #5270a0;
font-size: 9px;
font-weight: 600;
}
._documentInfo_ekgz8_679 p {
margin: 5px 0 0;
color: #7485a5;
font-size: 10px;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
._documentMeta_ekgz8_775 {
margin-top: 7px;
display: flex;
flex-wrap: wrap;
gap: 12px;
color: #9aa8bf;
font-size: 9px;
}
._approvedBadge_ekgz8_801,
._expiredBadge_ekgz8_803 {
min-height: 18px;
padding: 0 6px;
border-radius: 5px;
display: inline-flex;
align-items: center;
font-size: 8px;
font-weight: 700;
}
._approvedBadge_ekgz8_801 {
background: #e4f8f0;
color: #008d66;
}
._expiredBadge_ekgz8_803 {
background: #ffe8e8;
color: #d83232;
}
/* =========================================================
DOCUMENT ACTIONS
========================================================= */
._documentActions_ekgz8_859 {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
}
._viewButton_ekgz8_877,
._deleteButton_ekgz8_879 {
height: 31px;
padding: 0 9px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 9px;
font-weight: 700;
cursor: pointer;
}
._viewButton_ekgz8_877 svg,
._deleteButton_ekgz8_879 svg {
width: 13px;
height: 13px;
}
._viewButton_ekgz8_877 {
border: 1px solid #cfe0f8;
background: #f4f8ff;
color: #1769e8;
}
._viewButton_ekgz8_877:hover {
background: #eaf3ff;
}
._deleteButton_ekgz8_879 {
border: 1px solid #ffd2d6;
background: #fff1f2;
color: #e13c45;
}
._deleteButton_ekgz8_879:hover {
background: #ffe5e7;
}
._viewButton_ekgz8_877:disabled,
._deleteButton_ekgz8_879:disabled,
._refreshButton_ekgz8_507:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* =========================================================
ADD DOCUMENT
========================================================= */
._addView_ekgz8_995 {
padding: 20px;
}
._formIntro_ekgz8_471 {
margin-bottom: 18px;
}
._formGrid_ekgz8_1011 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
._formGroup_ekgz8_1027 {
min-width: 0;
}
._formGroup_ekgz8_1027 label {
display: block;
margin-bottom: 6px;
color: #34466f;
font-size: 10px;
font-weight: 700;
}
._formGroup_ekgz8_1027 label > span {
color: #df3030;
}
._formGroup_ekgz8_1027 input,
._formGroup_ekgz8_1027 select {
width: 100%;
height: 37px;
box-sizing: border-box;
padding: 0 10px;
border: 1px solid #d5e0ef;
border-radius: 6px;
outline: none;
background: #ffffff;
color: #273a65;
font-family: inherit;
font-size: 11px;
}
._formGroup_ekgz8_1027 input:focus,
._formGroup_ekgz8_1027 select:focus {
border-color: #3d86ec;
box-shadow: 0 0 0 2px rgba(61, 134, 236, 0.08);
}
._hiddenFileInput_ekgz8_1125 {
display: none;
}
._fileUpload_ekgz8_1133 {
width: 100%;
min-height: 66px;
box-sizing: border-box;
padding: 10px;
border: 1px dashed #b9cce7;
border-radius: 7px;
background: #f8fbff;
display: flex !important;
align-items: center;
gap: 9px;
cursor: pointer;
}
._fileUpload_ekgz8_1133:hover {
border-color: #6da0e7;
background: #f3f8ff;
}
._fileUpload_ekgz8_1133 > svg {
width: 22px;
height: 22px;
flex: 0 0 22px;
color: #347fe0;
}
._fileUpload_ekgz8_1133 div {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
}
._fileUpload_ekgz8_1133 strong {
color: #344c79;
font-size: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._fileUpload_ekgz8_1133 div span {
margin-top: 3px;
color: #8999b5;
font-size: 8px;
}
._browseText_ekgz8_1255 {
padding: 5px 8px;
border-radius: 5px;
background: #e9f2ff;
color: #2671d6;
font-size: 9px;
font-weight: 700;
}
/* =========================================================
FORM FOOTER
========================================================= */
._formFooter_ekgz8_1287 {
margin-top: 22px;
padding-top: 15px;
border-top: 1px solid #e6ecf5;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
._primaryButton_ekgz8_1315,
._secondaryButton_ekgz8_1317 {
height: 34px;
padding: 0 13px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
._primaryButton_ekgz8_1315 {
border: 1px solid #146de7;
background: #146de7;
color: #ffffff;
}
._primaryButton_ekgz8_1315:hover {
background: #075dcc;
}
._secondaryButton_ekgz8_1317 {
border: 1px solid #d3ddeb;
background: #ffffff;
color: #536684;
}
._secondaryButton_ekgz8_1317:hover {
background: #f4f7fb;
}
._primaryButton_ekgz8_1315 svg,
._secondaryButton_ekgz8_1317 svg {
width: 14px;
height: 14px;
}
._primaryButton_ekgz8_1315:disabled,
._secondaryButton_ekgz8_1317:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* =========================================================
EMPTY / LOADING
========================================================= */
._loadingState_ekgz8_1431,
._emptyState_ekgz8_1433 {
min-height: 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
._loadingState_ekgz8_1431 {
gap: 8px;
color: #7183a4;
font-size: 11px;
}
._loadingState_ekgz8_1431 svg {
width: 20px;
height: 20px;
}
._emptyIcon_ekgz8_1483 {
width: 46px;
height: 46px;
border-radius: 50%;
background: #edf3fb;
color: #58739d;
display: flex;
align-items: center;
justify-content: center;
}
._emptyIcon_ekgz8_1483 svg {
width: 20px;
height: 20px;
}
._emptyState_ekgz8_1433 h4 {
margin: 11px 0 0;
color: #243866;
font-size: 13px;
}
._emptyState_ekgz8_1433 p {
max-width: 400px;
margin: 5px 0 13px;
color: #8191ad;
font-size: 10px;
line-height: 1.5;
}
/* =========================================================
DOCUMENT DETAILS
========================================================= */
._documentDetails_ekgz8_1567 {
padding: 20px;
}
._backButton_ekgz8_1575 {
border: 0;
background: transparent;
color: #3676d1;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
cursor: pointer;
padding: 0;
}
._backButton_ekgz8_1575:hover {
color: #1459b5;
}
._backButton_ekgz8_1575 svg {
width: 14px;
height: 14px;
}
._detailHeader_ekgz8_1633 {
margin-top: 18px;
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 18px;
border-bottom: 1px solid #e6ecf5;
}
._detailIcon_ekgz8_1659 {
width: 44px;
height: 44px;
border-radius: 8px;
background: #edf3fb;
color: #49658f;
display: flex;
align-items: center;
justify-content: center;
}
._detailIcon_ekgz8_1659 svg {
width: 21px;
height: 21px;
}
._categoryLabel_ekgz8_1697 {
color: #4e73a9;
font-size: 9px;
font-weight: 700;
}
._detailHeader_ekgz8_1633 h3 {
margin: 3px 0 0;
color: #142454;
font-size: 16px;
font-weight: 700;
}
._detailHeader_ekgz8_1633 p {
margin: 3px 0 0;
color: #8594ad;
font-size: 9px;
}
._detailGrid_ekgz8_1745 {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
._detailItem_ekgz8_1765 {
padding: 11px;
border: 1px solid #e2e9f3;
border-radius: 7px;
background: #fafcff;
display: flex;
flex-direction: column;
}
._detailItem_ekgz8_1765 span {
color: #8796ae;
font-size: 8px;
font-weight: 600;
}
._detailItem_ekgz8_1765 strong {
margin-top: 4px;
color: #314873;
font-size: 10px;
}
._approved_ekgz8_801 {
color: #00966b !important;
}
._pending_ekgz8_1827 {
color: #d88400 !important;
}
._contentSection_ekgz8_1835 {
margin-top: 17px;
}
._sectionTitle_ekgz8_1843 {
margin-bottom: 6px;
color: #314873;
font-size: 10px;
font-weight: 700;
}
._contentBox_ekgz8_1861,
._summaryBox_ekgz8_1863 {
padding: 12px;
border: 1px solid #e0e7f1;
border-radius: 7px;
background: #fafcff;
color: #536684;
font-size: 10px;
line-height: 1.65;
white-space: pre-wrap;
}
._summaryBox_ekgz8_1863 {
line-height: 1.5;
}
/* =========================================================
LOADING OVERLAY
========================================================= */
._loadingOverlay_ekgz8_1913 {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.72);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #536a91;
font-size: 10px;
z-index: 5;
}
._loadingOverlay_ekgz8_1913 svg {
width: 18px;
height: 18px;
}
/* =========================================================
ANIMATION
========================================================= */
._spinning_ekgz8_1971 {
animation: _spin_ekgz8_1971 0.8s linear infinite;
}
@keyframes _spin_ekgz8_1971 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 800px) {
._overlay_ekgz8_9 {
padding: 10px;
}
._modal_ekgz8_45 {
max-height: calc(100vh - 20px);
}
._formGrid_ekgz8_1011 {
grid-template-columns: 1fr;
}
._detailGrid_ekgz8_1745 {
grid-template-columns: 1fr 1fr;
}
._documentCard_ekgz8_589 {
flex-wrap: wrap;
}
._documentInfo_ekgz8_679 {
width: calc(100% - 48px);
}
._documentActions_ekgz8_859 {
width: 100%;
padding-left: 48px;
}
}
@media (max-width: 550px) {
._header_ekgz8_95 {
padding: 14px;
}
._tabs_ekgz8_269 {
padding: 0 14px;
}
._documentsView_ekgz8_441,
._addView_ekgz8_995,
._documentDetails_ekgz8_1567 {
padding: 14px;
}
._detailGrid_ekgz8_1745 {
grid-template-columns: 1fr;
}
._documentActions_ekgz8_859 {
padding-left: 0;
}
}
/* =========================================================
DOCUMENT PREVIEW
========================================================= */
._documentPreview_ekgz8_2125 {
width: 100%;
border: 1px solid #dfe6f0;
border-radius: 8px;
overflow: hidden;
background: #eef1f5;
}
._wordViewer_ekgz8_2147 {
max-height: 720px;
padding: 28px;
overflow-y: auto;
background: #eef1f5;
}
/* =========================================================
WORD DOCUMENT PAGE
========================================================= */
._wordDocument_ekgz8_2175 {
width: min(820px, 100%);
min-height: 1000px;
margin: 0 auto;
padding: 65px 70px;
box-sizing: border-box;
background: #ffffff;
color: #202020;
box-shadow:
0 2px 5px rgba(20, 35, 65, 0.08),
0 8px 25px rgba(20, 35, 65, 0.08);
font-family: "Aptos", "Calibri", "Segoe UI", Arial, sans-serif;
font-size: 13px;
line-height: 1.65;
}
/* =========================================================
WORD HEADINGS
========================================================= */
._wordDocument_ekgz8_2175 h1 {
margin: 0 0 28px;
color: #1f2937;
font-family: "Aptos Display", "Calibri", "Segoe UI", Arial, sans-serif;
font-size: 26px;
line-height: 1.25;
font-weight: 700;
border-bottom: 1px solid #d9dee7;
padding-bottom: 15px;
}
._wordDocument_ekgz8_2175 h2 {
margin: 30px 0 13px;
color: #1f2937;
font-size: 19px;
line-height: 1.35;
font-weight: 700;
}
._wordDocument_ekgz8_2175 h3 {
margin: 22px 0 10px;
color: #26364f;
font-size: 15px;
line-height: 1.4;
font-weight: 700;
}
/* =========================================================
WORD PARAGRAPHS
========================================================= */
._wordDocument_ekgz8_2175 p {
margin: 0 0 13px;
color: #303b4d;
font-size: 13px;
line-height: 1.7;
text-align: left;
}
/* =========================================================
WORD TABLE
========================================================= */
._wordTable_ekgz8_2359 {
width: 100%;
margin: 18px 0 24px;
border-collapse: collapse;
table-layout: fixed;
font-size: 11px;
background: #ffffff;
}
._wordTable_ekgz8_2359 td {
padding: 8px 10px;
border: 1px solid #cfd6e1;
vertical-align: top;
color: #303b4d;
line-height: 1.5;
word-break: break-word;
}
._wordTable_ekgz8_2359 tr:first-child td {
background: #f1f4f8;
color: #253858;
font-weight: 700;
}
/* =========================================================
EMPTY CONTENT
========================================================= */
._noDocumentContent_ekgz8_2439 {
min-height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
._noDocumentContent_ekgz8_2439 svg {
width: 40px;
height: 40px;
color: #8192ad;
}
._noDocumentContent_ekgz8_2439 h4 {
margin: 12px 0 5px;
color: #30466f;
font-size: 14px;
}
._noDocumentContent_ekgz8_2439 p {
margin: 0;
color: #8796ae;
font-size: 10px;
}
/* =========================================================
SCROLLBAR
========================================================= */
._wordViewer_ekgz8_2147::-webkit-scrollbar {
width: 8px;
}
._wordViewer_ekgz8_2147::-webkit-scrollbar-track {
background: #e7ebf1;
}
._wordViewer_ekgz8_2147::-webkit-scrollbar-thumb {
background: #bdc7d5;
border-radius: 10px;
}
._wordViewer_ekgz8_2147::-webkit-scrollbar-thumb:hover {
background: #a7b3c4;
}
/* =========================================================
PAGE
========================================================= */
._page_1hpz7_9 {
min-height: calc(100vh - 68px);
background: #f8fbff;
color: #10245a;
padding: 10px;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
._pageTitle_1hpz7_35 {
display: flex;
flex-direction: column;
}
._pageTitle_1hpz7_35 h1 {
margin: 0;
color: #101c4c;
font-size: 18px !important;
line-height: 1.2;
font-weight: 700;
}
._pageTitle_1hpz7_35 p {
margin: 5px 0 0;
color: #687ca8;
font-size: 10px;
line-height: 1.4;
}
/* =========================================================
HEADER
========================================================= */
._pageHeader_1hpz7_81 {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
._breadcrumb_1hpz7_97 {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
font-size: 10px;
color: #7082a8;
}
._breadcrumb_1hpz7_97 strong {
color: #4e6593;
font-weight: 600;
}
._pageHeader_1hpz7_81 h1 {
margin: 0;
color: #101c4c;
font-size: 22px;
line-height: 1.2;
font-weight: 700;
}
._pageHeader_1hpz7_81 p {
margin: 5px 0 0;
color: #687ca8;
font-size: 12px;
line-height: 1.4;
}
._headerActions_1hpz7_155 {
display: flex;
align-items: center;
gap: 7px;
}
/* =========================================================
HEADER BUTTONS
========================================================= */
._newTenderButton_1hpz7_175,
._refreshButton_1hpz7_177 {
height: 32px;
border-radius: 6px;
padding: 0 11px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition: 0.15s ease;
}
._newTenderButton_1hpz7_175 {
border: 1px solid #1169e8;
background: #1169e8;
color: #fff;
}
._newTenderButton_1hpz7_175:hover {
background: #075ccc;
}
._refreshButton_1hpz7_177 {
border: 1px solid #d5dfef;
background: #fff;
color: #243765;
}
._refreshButton_1hpz7_177:hover {
background: #f5f8fd;
}
._newTenderButton_1hpz7_175:disabled,
._refreshButton_1hpz7_177:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* =========================================================
FILTER BAR
========================================================= */
._filterBar_1hpz7_265 {
display: grid;
grid-template-columns: 2.1fr 0.8fr 1fr 1fr;
gap: 9px;
margin-bottom: 14px;
}
._searchFilter_1hpz7_279,
._selectFilter_1hpz7_281 {
height: 38px;
box-sizing: border-box;
border: 1px solid #d8e3f3;
border-radius: 6px;
background: #fff;
display: flex;
align-items: center;
position: relative;
color: #6277a1;
}
._searchFilter_1hpz7_279 {
padding: 0 11px;
gap: 7px;
}
._searchFilter_1hpz7_279 svg {
flex: 0 0 auto;
width: 15px;
height: 15px;
}
._searchFilter_1hpz7_279 input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: #253966;
font-size: 10px;
}
._searchFilter_1hpz7_279 input::placeholder {
color: #8294b8;
}
._selectFilter_1hpz7_281 {
padding: 0 9px;
gap: 6px;
}
._selectFilter_1hpz7_281 > svg:first-child {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
._selectFilter_1hpz7_281 > svg:last-child {
position: absolute;
right: 8px;
width: 12px;
height: 12px;
pointer-events: none;
}
._selectFilter_1hpz7_281 select {
width: 100%;
height: 100%;
border: 0;
outline: 0;
appearance: none;
background: transparent;
color: #263968;
font-size: 10px;
cursor: pointer;
padding-right: 17px;
}
/* =========================================================
SUMMARY CARDS
========================================================= */
._summaryGrid_1hpz7_425 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 9px;
margin-bottom: 14px;
}
._summaryCard_1hpz7_439 {
min-height: 76px;
padding: 11px 13px;
box-sizing: border-box;
border: 1px solid #dce6f5;
border-radius: 6px;
background: #fff;
display: flex;
align-items: center;
gap: 11px;
}
._summaryIcon_1hpz7_463 {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
._summaryIcon_1hpz7_463 svg {
width: 19px;
height: 19px;
}
._iconBlue_1hpz7_493 {
color: #1671e8;
background: #e9f3ff;
}
._iconOrange_1hpz7_503 {
color: #f39a00;
background: #fff4dd;
}
._iconRed_1hpz7_513 {
color: #e63232;
background: #ffebeb;
}
._iconGreen_1hpz7_523 {
color: #00a875;
background: #e7f8f1;
}
._summaryContent_1hpz7_533 {
display: flex;
flex-direction: column;
min-width: 0;
}
._summaryContent_1hpz7_533 strong {
color: #101c4c;
font-size: 18px;
line-height: 1;
font-weight: 700;
}
._summaryContent_1hpz7_533 span {
margin-top: 4px;
color: #182b5d;
font-size: 11px;
font-weight: 600;
}
._summaryContent_1hpz7_533 small {
margin-top: 3px;
color: #8495b8;
font-size: 9px;
}
/* =========================================================
TABLE
========================================================= */
._tableCard_1hpz7_593 {
width: 100%;
min-width: 0;
}
/*
ReusableTable owns the actual Material React Table styling.
These selectors make the table fit the Tender Dashboard.
*/
._tableCard_1hpz7_593 .tableHeading {
color: #132253 !important;
font-size: 15px !important;
font-weight: 700 !important;
}
._tableCard_1hpz7_593 .MuiTableContainer-root {
min-height: 0 !important;
}
._tableCard_1hpz7_593 .MuiTableHead-root th {
white-space: nowrap;
}
._tableCard_1hpz7_593 .MuiTableBody-root td {
vertical-align: middle;
}
/* =========================================================
TENDER CELL
========================================================= */
._tenderCell_1hpz7_657 {
display: flex;
align-items: center;
gap: 7px;
min-width: 180px;
}
._tenderCellIcon_1hpz7_671 {
width: 31px;
height: 31px;
flex: 0 0 31px;
border-radius: 6px;
background: #edf3fb;
color: #49658f;
display: flex;
align-items: center;
justify-content: center;
}
._tenderCellIcon_1hpz7_671 svg {
width: 16px;
height: 16px;
}
._tenderCellContent_1hpz7_705 {
min-width: 0;
display: flex;
flex-direction: column;
}
._tenderCellContent_1hpz7_705 strong {
color: #102154;
font-size: 10px;
line-height: 1.3;
font-weight: 700;
white-space: normal;
}
._tenderCellContent_1hpz7_705 span {
margin-top: 2px;
color: #687ca5;
font-size: 9px;
line-height: 1.25;
font-weight: 500;
}
/* =========================================================
REFERENCE
========================================================= */
._referenceCell_1hpz7_757 {
color: #6377a2;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
/* =========================================================
STATUS
========================================================= */
._statusBadge_1hpz7_779 {
min-height: 23px;
padding: 0 7px;
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9px;
font-weight: 700;
white-space: nowrap;
}
._statusDot_1hpz7_803 {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
._statusReady_1hpz7_817 {
color: #009b6b;
background: #e3f8f0;
}
._statusDraft_1hpz7_827 {
color: #617292;
background: #edf2f8;
}
._statusPreparing_1hpz7_837 {
color: #1474df;
background: #e8f2ff;
}
._statusAnalyzing_1hpz7_847 {
color: #7446d8;
background: #f0eaff;
}
._statusVerified_1hpz7_857 {
color: #009b6b;
background: #e3f8f0;
}
._statusFinalized_1hpz7_867 {
color: #526581;
background: #e9eef5;
}
._statusDefault_1hpz7_877 {
color: #68799a;
background: #eef2f7;
}
/* =========================================================
PROGRESS
========================================================= */
._progressCell_1hpz7_895 {
width: 100px;
}
._progressCell_1hpz7_895 strong {
display: block;
margin-bottom: 4px;
color: #16255b;
font-size: 10px;
font-weight: 700;
}
._progressTrack_1hpz7_919 {
width: 100%;
height: 6px;
overflow: hidden;
border-radius: 20px;
background: #e7edf5;
}
._progressBar_1hpz7_935 {
height: 100%;
border-radius: inherit;
background: #287cf0;
transition: width 0.2s ease;
}
/* =========================================================
ATTENTION
========================================================= */
._attentionCell_1hpz7_957 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
max-width: 190px;
}
._attentionBadge_1hpz7_973 {
min-height: 20px;
padding: 0 6px;
border-radius: 5px;
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 8px;
font-weight: 700;
white-space: nowrap;
}
._attentionBadge_1hpz7_973 svg {
width: 10px;
height: 10px;
}
._attention_input_1hpz7_1007 {
color: #d92f2f;
background: #ffebeb;
}
._attention_upload_1hpz7_1017 {
color: #d88200;
background: #fff2d9;
}
._attention_approval_1hpz7_1027 {
color: #426ca7;
background: #eaf2ff;
}
._attention_conflict_1hpz7_1037 {
color: #b02626;
background: #ffe4e4;
}
._attention_success_1hpz7_1047 {
color: #008e66;
background: #e1f7ef;
}
._attention_review_1hpz7_1057 {
color: #2772d4;
background: #e8f2ff;
}
/* =========================================================
CLOSING DATE
========================================================= */
._closingCell_1hpz7_1075 {
display: flex;
flex-direction: column;
gap: 3px;
}
._closingCell_1hpz7_1075 strong {
color: #1d3369;
font-size: 10px;
font-weight: 700;
white-space: nowrap;
}
._closingCell_1hpz7_1075 span {
color: #7185aa;
font-size: 9px;
font-weight: 500;
}
._daysUrgent_1hpz7_1113 {
color: #df421e !important;
font-weight: 700 !important;
}
._daysClosed_1hpz7_1123 {
color: #dc2727 !important;
font-weight: 700 !important;
}
/* =========================================================
UPDATED
========================================================= */
._updatedCell_1hpz7_1141 {
display: flex;
flex-direction: column;
gap: 2px;
}
._updatedCell_1hpz7_1141 strong {
color: #526990;
font-size: 10px;
font-weight: 600;
}
._updatedCell_1hpz7_1141 span {
color: #8798b9;
font-size: 8px;
}
/* =========================================================
TENDER ACTION BUTTONS
========================================================= */
._tenderActions_1hpz7_1183 {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
white-space: nowrap;
}
/* View button */
._tenderActions_1hpz7_1183 ._openButton_1hpz7_1203 {
width: 31px;
height: 30px;
min-width: 31px;
padding: 0;
box-sizing: border-box;
border: 1px solid #80b5ff;
border-radius: 6px;
background: #ffffff;
color: #1769e8;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
._tenderActions_1hpz7_1183 ._openButton_1hpz7_1203:hover {
background: #eef6ff;
border-color: #3d8cf5;
}
._tenderActions_1hpz7_1183 ._openButton_1hpz7_1203 svg {
width: 13px;
height: 13px;
stroke-width: 2;
}
/* Delete button */
._tenderActions_1hpz7_1183 .delete-btn3 {
width: 31px;
height: 30px;
min-width: 31px;
padding: 0;
box-sizing: border-box;
border: 1px solid #ffd0d4;
border-radius: 6px;
background: #fff0f1;
color: #ef4444;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
._tenderActions_1hpz7_1183 .delete-btn3:hover {
background: #ffe4e6;
border-color: #ffb8be;
color: #dc2626;
}
._tenderActions_1hpz7_1183 .delete-btn3 svg {
width: 13px;
height: 13px;
stroke-width: 2;
}
/* =========================================================
COMPANY KNOWLEDGE BUTTON
========================================================= */
._companyKnowledgeButton_1hpz7_1365 {
height: 32px;
padding: 0 11px;
border-radius: 6px;
border: 1px solid #1169e8;
background: #1169e8;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
._companyKnowledgeButton_1hpz7_1365:hover {
background: #075ccc;
border-color: #b6c9e4;
/* color: #1769e8; */
}
._companyKnowledgeButton_1hpz7_1365 svg {
width: 13px;
height: 13px;
}
/* =========================================================
MODAL
========================================================= */
._modalOverlay_1hpz7_1447 {
position: fixed;
inset: 0;
z-index: 2000;
padding: 16px;
background: rgba(12, 25, 55, 0.42);
display: flex;
align-items: center;
justify-content: center;
}
._modal_1hpz7_1447 {
width: 100%;
max-width: 430px;
overflow: hidden;
border-radius: 8px;
background: #fff;
box-shadow: 0 20px 55px rgba(14, 32, 71, 0.25);
}
._modalHeader_1hpz7_1487 {
padding: 13px 15px;
display: flex;
align-items: flex-start;
justify-content: space-between;
border-bottom: 1px solid #e5ebf4;
}
._modalHeader_1hpz7_1487 h3 {
margin: 0;
color: #122151;
font-size: 14px;
font-weight: 700;
}
._modalHeader_1hpz7_1487 p {
margin: 3px 0 0;
color: #7889aa;
font-size: 10px;
}
._modalCloseButton_1hpz7_1529 {
width: 25px;
height: 25px;
border: 0;
border-radius: 5px;
background: transparent;
color: #6e7e9d;
font-size: 17px;
cursor: pointer;
}
._modalCloseButton_1hpz7_1529:hover {
background: #f2f5fa;
}
._modalBody_1hpz7_1559 {
padding: 14px 15px;
}
._formGroup_1hpz7_1567 {
margin-bottom: 11px;
}
._formGroup_1hpz7_1567:last-child {
margin-bottom: 0;
}
._formGroup_1hpz7_1567 label {
display: block;
margin-bottom: 4px;
color: #34466f;
font-size: 10px;
font-weight: 700;
}
._formGroup_1hpz7_1567 label span {
color: #dc2e2e;
}
._formGroup_1hpz7_1567 input,
._formGroup_1hpz7_1567 textarea {
width: 100%;
box-sizing: border-box;
padding: 7px 8px;
border: 1px solid #d4dfef;
border-radius: 5px;
outline: none;
background: #fff;
color: #24365e;
font-family: inherit;
font-size: 10px;
}
._formGroup_1hpz7_1567 input {
height: 31px;
}
._formGroup_1hpz7_1567 textarea {
min-height: 80px;
resize: vertical;
}
._formGroup_1hpz7_1567 input:focus,
._formGroup_1hpz7_1567 textarea:focus {
border-color: #3d86ec;
box-shadow: 0 0 0 2px rgba(61, 134, 236, 0.08);
}
._modalFooter_1hpz7_1665 {
padding: 9px 15px;
border-top: 1px solid #e5ebf4;
background: #f9fbfe;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
._cancelButton_1hpz7_1685,
._createButton_1hpz7_1687 {
height: 29px;
padding: 0 11px;
border-radius: 5px;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
._cancelButton_1hpz7_1685 {
border: 1px solid #d3ddeb;
background: #fff;
color: #536684;
}
._cancelButton_1hpz7_1685:hover {
background: #f4f7fb;
}
._createButton_1hpz7_1687 {
border: 1px solid #146de7;
background: #146de7;
color: #fff;
}
._createButton_1hpz7_1687:hover {
background: #075dcc;
}
._cancelButton_1hpz7_1685:disabled,
._createButton_1hpz7_1687:disabled,
._modalCloseButton_1hpz7_1529:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* =========================================================
ANIMATION
========================================================= */
._spinning_1hpz7_1767 {
animation: _spin_1hpz7_1767 0.8s linear infinite;
}
@keyframes _spin_1hpz7_1767 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1200px) {
._filterBar_1hpz7_265 {
grid-template-columns: 1.5fr 1fr 1fr;
}
._searchFilter_1hpz7_279 {
grid-column: span 3;
}
._summaryGrid_1hpz7_425 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
._page_1hpz7_9 {
padding: 10px;
}
._pageHeader_1hpz7_81 {
flex-direction: column;
gap: 10px;
}
._headerActions_1hpz7_155 {
padding-top: 0;
}
._filterBar_1hpz7_265 {
grid-template-columns: 1fr;
}
._searchFilter_1hpz7_279 {
grid-column: auto;
}
._summaryGrid_1hpz7_425 {
grid-template-columns: 1fr;
}
._summaryCard_1hpz7_439 {
min-height: 70px;
}
}
/* =========================================================
FILTER TOGGLE BUTTON
========================================================= */
._filterButton_1hpz7_1901 {
position: relative;
width: 32px;
height: 32px;
min-width: 32px;
padding: 0;
border: 1px solid #d5dfef;
border-radius: 6px;
background: #ffffff;
color: #243765;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
._filterButton_1hpz7_1901 svg {
width: 14px;
height: 14px;
}
._filterButton_1hpz7_1901:hover {
background: #f5f8fd;
border-color: #b9c9df;
color: #1769e8;
}
._filterButtonActive_1hpz7_1977 {
background: #eef6ff;
border-color: #80b5ff;
color: #1769e8;
}
._filterButtonActive_1hpz7_1977:hover {
background: #e5f1ff;
border-color: #5f9df5;
}
/* Small dot when filters are applied */
._filterIndicator_1hpz7_2003 {
position: absolute;
top: 5px;
right: 5px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #1769e8;
border: 1px solid #ffffff;
}
._filterBar_1hpz7_265 {
display: grid;
grid-template-columns: 2.1fr 0.8fr 1fr 1fr auto;
gap: 9px;
margin-bottom: 14px;
animation: _filterSlideDown_1hpz7_1 0.16s ease-out;
}
@keyframes _filterSlideDown_1hpz7_1 {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
._filterBar_1hpz7_265 {
display: grid;
grid-template-columns: 2.1fr 0.8fr 1fr 1fr auto;
gap: 9px;
margin-bottom: 14px;
animation: _filterSlideDown_1hpz7_1 0.16s ease-out;
}
._clearFiltersButton_1hpz7_2089 {
height: 38px;
padding: 0 11px;
border: 1px solid #d5dfef;
border-radius: 6px;
background: #ffffff;
color: #526990;
font-size: 10px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
._clearFiltersButton_1hpz7_2089:hover {
background: #f5f8fd;
border-color: #b9c9df;
color: #1769e8;
}
/* =========================================================
MOBILE BUTTON RESPONSIVE FIX
========================================================= */
@media (max-width: 768px) {
._page_1hpz7_9 {
width: 100%;
max-width: 100%;
overflow-x: hidden;
padding: 10px;
}
._pageHeader_1hpz7_81 {
width: 100%;
min-width: 0;
margin-bottom: 10px;
gap: 8px;
}
._headerActions_1hpz7_155 {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px 36px;
gap: 6px;
align-items: stretch;
}
._companyKnowledgeButton_1hpz7_1365,
._newTenderButton_1hpz7_175 {
width: 100%;
min-width: 0;
height: 36px;
padding: 0 8px;
gap: 5px;
border-radius: 7px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
}
._companyKnowledgeButton_1hpz7_1365 span,
._newTenderButton_1hpz7_175 span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._companyKnowledgeButton_1hpz7_1365 svg,
._newTenderButton_1hpz7_175 svg {
width: 15px;
height: 15px;
flex: 0 0 auto;
}
._filterButton_1hpz7_1901,
._refreshButton_1hpz7_177 {
width: 36px;
min-width: 36px;
height: 36px;
padding: 0;
border-radius: 7px;
}
._filterButton_1hpz7_1901 svg,
._refreshButton_1hpz7_177 svg {
width: 15px;
height: 15px;
}
._summaryGrid_1hpz7_425 {
width: 100%;
gap: 8px;
}
._summaryCard_1hpz7_439 {
width: 100%;
min-width: 0;
}
}
/* =========================================================
SMALL MOBILE BUTTONS
========================================================= */
@media (max-width: 480px) {
._page_1hpz7_9 {
padding: 8px;
}
._headerActions_1hpz7_155 {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px 34px;
gap: 5px;
}
._companyKnowledgeButton_1hpz7_1365,
._newTenderButton_1hpz7_175 {
height: 34px;
padding: 0 7px;
font-size: 10px;
}
._companyKnowledgeButton_1hpz7_1365 svg,
._newTenderButton_1hpz7_175 svg {
width: 14px;
height: 14px;
}
._filterButton_1hpz7_1901,
._refreshButton_1hpz7_177 {
width: 34px;
min-width: 34px;
height: 34px;
}
._filterButton_1hpz7_1901 svg,
._refreshButton_1hpz7_177 svg {
width: 14px;
height: 14px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 360px) {
._headerActions_1hpz7_155 {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px 32px;
gap: 4px;
}
._companyKnowledgeButton_1hpz7_1365,
._newTenderButton_1hpz7_175 {
height: 33px;
padding: 0 6px;
font-size: 9px;
}
._companyKnowledgeButton_1hpz7_1365 svg,
._newTenderButton_1hpz7_175 svg {
width: 13px;
height: 13px;
}
._filterButton_1hpz7_1901,
._refreshButton_1hpz7_177 {
width: 32px;
min-width: 32px;
height: 33px;
}
}
/* =========================================================
EMAIL TAB
CLEAN / UPDATED FULL CSS
========================================================= */
._emailLayout_okz6e_9 {
width: 100%;
min-height: calc(100vh - 68px);
display: grid;
grid-template-columns: 1fr;
gap: 16px;
box-sizing: border-box;
background: #f8fbff;
color: #10245a;
padding: 10px;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
/* =========================================================
COMMON CARD
========================================================= */
._inboxCard_okz6e_71,
._aiCard_okz6e_73 {
min-width: 0;
border: 1px solid #d7e4f7;
border-radius: 8px;
background: #ffffff;
box-sizing: border-box;
}
/* =========================================================
INBOX HEADER
========================================================= */
._cardHeader_okz6e_103 {
padding: 10px 14px 8px;
}
._titleGroup_okz6e_111,
._aiHeader_okz6e_113 {
display: flex;
align-items: center;
gap: 8px;
}
._titleGroup_okz6e_111 svg {
color: #0877f9;
}
._titleGroup_okz6e_111 h2,
._aiHeader_okz6e_113 h2 {
margin: 0;
color: #111d68;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
}
/* =========================================================
INBOX TOOLBAR
========================================================= */
._inboxToolbar_okz6e_165 {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 8px;
box-sizing: border-box;
}
/* =========================================================
SEARCH
========================================================= */
._searchWrapper_okz6e_199 {
min-width: 0;
flex: 1;
height: 38px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 11px;
border: 1px solid var(--border, #d1d5db);
border-radius: 6px;
background: #ffffff;
color: var(--text-muted, #6b7280);
box-sizing: border-box;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
._searchWrapper_okz6e_199:focus-within {
border-color: #0877f9;
box-shadow: 0 0 0 3px rgba(8, 119, 249, 0.12);
}
._searchWrapper_okz6e_199 svg {
flex: 0 0 auto;
color: #101d68;
}
._searchWrapper_okz6e_199 input {
width: 100%;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
outline: none;
background: transparent;
color: var(--text-primary, #1f2937);
font-family: inherit;
font-size: 13px;
}
._searchWrapper_okz6e_199 input::placeholder {
color: var(--text-muted, #9ca3af);
}
/* =========================================================
REFRESH BUTTON
========================================================= */
._refreshButton_okz6e_329 {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--border, #d1d5db);
border-radius: 6px;
background: #ffffff;
color: var(--text-secondary, #6b7280);
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
._refreshButton_okz6e_329:hover:not(:disabled) {
border-color: #0877f9;
background: #f2f7ff;
color: #0877f9;
}
._refreshButton_okz6e_329:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* =========================================================
FILTERS
========================================================= */
._filters_okz6e_419 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 0 12px 9px;
border-bottom: 1px solid var(--border, #e5e7eb);
box-sizing: border-box;
}
/* =========================================================
FILTER BUTTON
========================================================= */
._filterButton_okz6e_455 {
min-height: 29px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 10px;
border: 1px solid #d9dde5;
border-radius: 6px;
background: #ffffff;
color: #6b7280;
font-family: inherit;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}
._filterButton_okz6e_455:hover {
border-color: #0877f9;
background: #f3f8ff;
color: #0877f9;
}
/* =========================================================
ACTIVE FILTER
BOTH TABS SAME BLUE
========================================================= */
._activeFilter_okz6e_549 {
border-color: #0877f9 !important;
background: #0877f9 !important;
color: #ffffff !important;
box-shadow: 0 2px 6px rgba(8, 119, 249, 0.22);
}
._activeFilter_okz6e_549:hover {
border-color: #0569dd !important;
background: #0569dd !important;
color: #ffffff !important;
box-shadow: 0 3px 8px rgba(8, 119, 249, 0.28);
}
._activeFilter_okz6e_549 svg {
color: #ffffff !important;
}
/* =========================================================
URGENT & PRIORITY ACTIVE
FIRST TAB
========================================================= */
._filters_okz6e_419 ._filterButton_okz6e_455:first-child._activeFilter_okz6e_549 {
border-color: #0877f9;
background: #0877f9;
color: #ffffff;
box-shadow: 0 2px 6px rgba(8, 119, 249, 0.22);
}
._filters_okz6e_419 ._filterButton_okz6e_455:first-child._activeFilter_okz6e_549:hover {
border-color: #0569dd;
background: #0569dd;
color: #ffffff;
}
._filters_okz6e_419 ._filterButton_okz6e_455:first-child._activeFilter_okz6e_549 svg {
color: #ffffff;
}
/* =========================================================
ALL ACTIVE
SECOND TAB
========================================================= */
._filters_okz6e_419 ._filterButton_okz6e_455:nth-child(2)._activeFilter_okz6e_549 {
border-color: #0877f9;
background: #0877f9;
color: #ffffff;
box-shadow: 0 2px 6px rgba(8, 119, 249, 0.22);
}
._filters_okz6e_419 ._filterButton_okz6e_455:nth-child(2)._activeFilter_okz6e_549:hover {
border-color: #0569dd;
background: #0569dd;
color: #ffffff;
}
._filters_okz6e_419 ._filterButton_okz6e_455:nth-child(2)._activeFilter_okz6e_549 svg {
color: #ffffff;
}
/* =========================================================
FILTER ICON
========================================================= */
._filterIcon_okz6e_713 {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: inherit;
}
/* Urgent / Priority icon inactive */
._priorityIcon_okz6e_741 {
display: flex;
color: #0877f9;
}
/* Active icon */
._activeFilter_okz6e_549 ._priorityIcon_okz6e_741 {
color: #ffffff;
}
._spamIcon_okz6e_763 {
display: flex;
color: #111d68;
}
._activeFilter_okz6e_549 ._spamIcon_okz6e_763 {
color: #ffffff;
}
._filterSummary_okz6e_783 {
margin-left: auto;
color: var(--text-muted, #9ca3af);
font-size: 10px;
font-weight: 500;
}
/* =========================================================
EMAIL LIST
========================================================= */
._emailList_okz6e_809 {
padding: 0 14px 10px;
}
/* =========================================================
EMAIL ITEM
========================================================= */
._emailItem_okz6e_825 {
width: 100%;
min-height: 69px;
display: grid;
grid-template-columns: 10px 40px minmax(0, 1fr) auto;
align-items: center;
gap: 7px;
padding: 7px 4px;
border: 0;
border-bottom: 1px solid #e1e9f5;
background: #ffffff;
text-align: left;
font-family: inherit;
cursor: pointer;
box-sizing: border-box;
transition:
background 0.15s ease,
border-color 0.15s ease;
}
._emailItem_okz6e_825:hover {
background: #f8fbff;
}
._emailItem_okz6e_825:disabled {
cursor: wait;
opacity: 0.82;
}
._selectedEmail_okz6e_905 {
margin: 0;
padding-left: 4px;
padding-right: 4px;
border-radius: 5px;
background: #eef6ff;
}
._selectedEmail_okz6e_905:hover {
background: #eef6ff;
}
/* =========================================================
UNREAD DOT
========================================================= */
._unreadDot_okz6e_943 {
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
}
._showUnread_okz6e_961 {
background: #0877f9;
}
/* =========================================================
AVATAR
========================================================= */
._avatar_okz6e_977 {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e9f3ff;
color: #0877f9;
font-size: 11px;
font-weight: 500;
}
/* =========================================================
EMAIL CONTENT
========================================================= */
._emailContent_okz6e_1021 {
min-width: 0;
display: flex;
flex-direction: column;
}
._emailTop_okz6e_1035 {
min-width: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
._emailTitleArea_okz6e_1055 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
._sender_okz6e_1073 {
color: #101d68;
font-size: 11px;
font-weight: 700;
line-height: 1.25;
}
._subject_okz6e_1089 {
color: #101d68;
font-size: 11px;
font-weight: 600;
line-height: 1.25;
}
._emailTime_okz6e_1105 {
flex-shrink: 0;
color: #6c80bb;
font-size: 10px;
white-space: nowrap;
}
._preview_okz6e_1125 {
margin-top: 3px;
overflow: hidden;
color: #6680c1;
font-size: 10px;
line-height: 1.35;
white-space: nowrap;
text-overflow: ellipsis;
}
/* =========================================================
EMAIL META
========================================================= */
._emailMeta_okz6e_1161 {
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 5px;
color: #6479b6;
font-size: 10px;
}
._project_okz6e_1193,
._attachments_okz6e_1195 {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
._attachments_okz6e_1195 {
color: var(--text-muted, #6b7280);
font-size: 10px;
font-weight: 500;
}
._project_okz6e_1193 svg,
._attachments_okz6e_1195 svg {
color: #101d68;
}
._metaDivider_okz6e_1237 {
color: #9aa9c8;
}
/* =========================================================
RIGHT STATUS
========================================================= */
._emailStatus_okz6e_1253 {
min-width: 82px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
._statusBadge_okz6e_1273 {
min-height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 9px;
border-radius: 6px;
white-space: nowrap;
font-size: 10px;
font-weight: 500;
}
._urgentBadge_okz6e_1311 {
background: #fff0ef;
color: #ee2222;
}
._priorityBadge_okz6e_1323 {
background: #edf5ff;
color: #0877f9;
}
._unreadBadge_okz6e_1335 {
background: #e9f3ff;
color: #0877f9;
}
._unreadBadgeDot_okz6e_1347 {
width: 7px;
height: 7px;
border-radius: 50%;
background: #0877f9;
}
._followUpBadge_okz6e_1365,
._repliedBadge_okz6e_1367 {
background: #e9fff6;
color: #08a969;
}
/* =========================================================
CLASSIFICATION BADGE
========================================================= */
._classificationBadge_okz6e_1387 {
min-height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
._classificationNormal_okz6e_1423 {
border: 1px solid #bae6fd;
background: #f0f9ff;
color: #0369a1;
}
._classificationImportant_okz6e_1439 {
border: 1px solid #fed7aa;
background: #fff7ed;
color: #c2410c;
}
._classificationSpam_okz6e_1455 {
border: 1px solid #fecaca;
background: #fef2f2;
color: #dc2626;
}
._classificationNewsletter_okz6e_1471 {
border: 1px solid #ddd6fe;
background: #f5f3ff;
color: #7c3aed;
}
/* =========================================================
CLASSIFICATION ROW
========================================================= */
._emailClassificationImportant_okz6e_1495 {
border-left: 3px solid #f59e0b;
}
._emailClassificationSpam_okz6e_1503 {
border-left: 3px solid #ef4444;
background: #fffafa;
}
._emailClassificationNewsletter_okz6e_1515 {
border-left: 3px solid #8b5cf6;
}
._emailClassificationNormal_okz6e_1523 {
border-left: 3px solid transparent;
}
/* =========================================================
AI DRAFT STATUS
========================================================= */
._draftStatusBadge_okz6e_1539 {
min-height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 2px 7px;
border: 1px solid transparent;
border-radius: var(--radius-full, 9999px);
font-size: 10px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
._draftCompleted_okz6e_1581 {
border-color: rgba(34, 197, 94, 0.2);
background: rgba(34, 197, 94, 0.08);
color: #15803d;
}
._draftProcessing_okz6e_1597 {
border-color: rgba(8, 119, 249, 0.2);
background: rgba(8, 119, 249, 0.08);
color: #0877f9;
}
._draftProcessing_okz6e_1597 svg {
animation: _draftSpin_okz6e_1 1.4s linear infinite;
}
._draftPending_okz6e_1621 {
border-color: rgba(148, 163, 184, 0.25);
background: #f8fafc;
color: #64748b;
}
._draftFailed_okz6e_1637 {
border-color: rgba(239, 68, 68, 0.18);
background: rgba(239, 68, 68, 0.07);
color: #dc2626;
}
._draftAvailable_okz6e_1653 {
display: inline-flex;
align-items: center;
gap: 4px;
color: #0877f9;
font-size: 10.5px;
font-weight: 600;
}
@keyframes _draftSpin_okz6e_1 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* =========================================================
EMPTY STATE
========================================================= */
._emptyState_okz6e_1705 {
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
color: #7182b8;
font-size: 11px;
}
/* =========================================================
RETRY
========================================================= */
._retryButton_okz6e_1737 {
margin-top: 10px;
padding: 6px 12px;
border: 1px solid #0877f9;
border-radius: 6px;
background: #ffffff;
color: #0877f9;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
._retryButton_okz6e_1737:hover {
background: #f3f8ff;
}
/* =========================================================
AI CARD
========================================================= */
._aiCard_okz6e_73 {
align-self: start;
}
/* =========================================================
AI HEADER
========================================================= */
._aiHeader_okz6e_113 {
padding: 10px 14px 8px;
align-items: flex-start;
}
._aiHeader_okz6e_113 > svg {
flex-shrink: 0;
color: #00a96b;
}
._aiHeader_okz6e_113 > div {
min-width: 0;
flex: 1;
}
._aiHeader_okz6e_113 h2 {
margin: 0;
}
._aiLogCount_okz6e_1847 {
display: block;
margin-top: 2px;
color: var(--text-muted, #9ca3af);
font-size: 10px;
font-weight: 500;
}
/* =========================================================
AI SCROLL
========================================================= */
._aiTimelineScroll_okz6e_1877 {
width: 100%;
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
box-sizing: border-box;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
._aiTimelineScroll_okz6e_1877::-webkit-scrollbar {
width: 5px;
}
._aiTimelineScroll_okz6e_1877::-webkit-scrollbar-track {
background: transparent;
}
._aiTimelineScroll_okz6e_1877::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #cbd5e1;
}
._aiTimelineScroll_okz6e_1877::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* =========================================================
AI STATE
========================================================= */
._aiState_okz6e_1955 {
min-height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px 12px;
color: var(--text-muted, #6b7280);
font-size: 11px;
text-align: center;
}
._aiState_okz6e_1955 button {
padding: 5px 10px;
border: 1px solid #0877f9;
border-radius: 5px;
background: #ffffff;
color: #0877f9;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
._aiState_okz6e_1955 button:hover {
background: #f3f8ff;
}
._aiLoadingMore_okz6e_2033,
._aiScrollHint_okz6e_2035 {
padding: 9px 8px;
color: var(--text-muted, #9ca3af);
font-size: 10px;
font-weight: 500;
text-align: center;
}
/* =========================================================
TIMELINE
========================================================= */
._timeline_okz6e_2065 {
padding: 2px 14px 12px;
}
._timelineItem_okz6e_2073 {
min-height: 53px;
display: grid;
grid-template-columns: 25px minmax(0, 1fr);
}
._timelineIndicator_okz6e_2087 {
position: relative;
display: flex;
justify-content: center;
}
._timelineCheck_okz6e_2101 {
position: relative;
z-index: 2;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0bb56e;
color: #ffffff;
}
._timelineFailed_okz6e_2137 {
background: #ef4444 !important;
color: #ffffff !important;
}
._timelineLine_okz6e_2149 {
position: absolute;
top: 25px;
bottom: -1px;
width: 2px;
background: #7ee7bb;
}
._timelineContent_okz6e_2171 {
min-width: 0;
padding-left: 9px;
padding-bottom: 9px;
}
._timelineTitleRow_okz6e_2185 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
._timelineTitleRow_okz6e_2185 strong {
color: #101d68;
font-size: 11px;
font-weight: 600;
}
._timelineTitleRow_okz6e_2185 span {
flex-shrink: 0;
color: #6680c1;
font-size: 10px;
}
._timelineContent_okz6e_2171 p {
margin: 2px 0 0;
color: #7182b8;
font-size: 10px;
line-height: 1.35;
}
._lastTimelineItem_okz6e_2249 {
min-height: 25px;
}
/* =========================================================
PAGINATION
========================================================= */
._pagination_okz6e_2265 {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid var(--color-border, #e5e7eb);
background: #ffffff;
box-sizing: border-box;
}
._paginationInfo_okz6e_2301 {
color: var(--color-text-muted, #6b7280);
font-size: 12px;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
}
._paginationActions_okz6e_2321 {
display: flex;
align-items: center;
gap: 8px;
}
._paginationActions_okz6e_2321 button {
min-width: 74px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px;
border: 1px solid var(--color-border, #d1d5db);
border-radius: 6px;
background: #ffffff;
color: var(--color-text-primary, #1f2937);
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition:
color 0.18s ease,
background-color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
._paginationActions_okz6e_2321 button:hover:not(:disabled) {
border-color: #0877f9;
background: #f3f8ff;
color: #0877f9;
}
._paginationActions_okz6e_2321 button:active:not(:disabled) {
transform: translateY(1px);
border-color: #0569dd;
color: #0569dd;
}
._paginationActions_okz6e_2321 button:focus-visible {
outline: none;
border-color: #0877f9;
box-shadow: 0 0 0 3px rgba(8, 119, 249, 0.15);
}
._paginationActions_okz6e_2321 button:disabled {
border-color: #e5e7eb;
background: #f8fafc;
color: #9ca3af;
cursor: not-allowed;
opacity: 0.7;
}
/* =========================================================
EMAIL DETAIL FULL
========================================================= */
._emailDetailFull_okz6e_2477 {
width: 100%;
min-width: 0;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1050px) {
._emailLayout_okz6e_9 {
grid-template-columns: 1fr;
}
._aiCard_okz6e_73 {
width: 100%;
}
}
@media (max-width: 767px) {
._inboxToolbar_okz6e_165 {
padding: 8px 8px 7px;
}
._filters_okz6e_419 {
padding: 0 8px 8px;
}
._filterSummary_okz6e_783 {
width: 100%;
margin-left: 0;
}
._emailItem_okz6e_825 {
grid-template-columns: 8px 36px minmax(0, 1fr);
}
._avatar_okz6e_977 {
width: 36px;
height: 36px;
}
._emailStatus_okz6e_1253 {
grid-column: 3;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
margin-top: 3px;
}
._emailTime_okz6e_1105 {
font-size: 9px;
}
._draftStatusBadge_okz6e_1539 {
padding: 2px 6px;
font-size: 9px;
}
._emailMeta_okz6e_1161 {
gap: 5px;
}
._aiTimelineScroll_okz6e_1877 {
max-height: 380px;
}
._pagination_okz6e_2265 {
align-items: stretch;
flex-direction: column;
gap: 10px;
padding: 12px;
}
._paginationInfo_okz6e_2301 {
text-align: center;
}
._paginationActions_okz6e_2321 {
width: 100%;
justify-content: center;
}
._paginationActions_okz6e_2321 button {
flex: 1;
max-width: 140px;
}
}
@media (max-width: 500px) {
._emailItem_okz6e_825 {
grid-template-columns: 8px 34px minmax(0, 1fr);
gap: 6px;
}
._avatar_okz6e_977 {
width: 34px;
height: 34px;
font-size: 10px;
}
._sender_okz6e_1073,
._subject_okz6e_1089 {
font-size: 10px;
}
._preview_okz6e_1125 {
display: -webkit-box;
overflow: hidden;
white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
._emailMeta_okz6e_1161 {
flex-wrap: wrap;
}
}
@media (max-width: 480px) {
._pagination_okz6e_2265 {
padding: 10px;
}
._paginationInfo_okz6e_2301 {
font-size: 11px;
}
._paginationActions_okz6e_2321 {
gap: 6px;
}
._paginationActions_okz6e_2321 button {
min-width: 0;
height: 30px;
padding: 0 10px;
font-size: 11px;
}
}/* =========================================================
EMAIL DETAIL PAGE
========================================================= */
._page_d17zl_9 {
width: 100%;
min-width: 0;
/*
* IMPORTANT FIX:
* old min-height: 100vh creates extra empty bottom space
*/
height: calc(100vh - 78px);
min-height: 0;
padding: 12px;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
color: #101d68;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
/* =========================================================
TOP BAR
========================================================= */
._topBar_d17zl_77 {
width: 100%;
min-width: 0;
flex: 0 0 auto;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* =========================================================
BACK BUTTON
========================================================= */
._backButton_d17zl_115 {
min-height: 30px;
padding: 5px 8px;
border: 0;
border-radius: 6px;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #0872f5;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
._backButton_d17zl_115:hover {
background: #f0f7ff;
}
._backButton_d17zl_115 svg {
flex-shrink: 0;
}
/* =========================================================
MAIN GRID
========================================================= */
._detailGrid_d17zl_195 {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 auto;
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
gap: 12px;
align-items: stretch;
overflow: hidden;
}
/* =========================================================
CARD
========================================================= */
._card_d17zl_235 {
width: 100%;
min-width: 0;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid #d7e4f7;
border-radius: 10px;
background: #ffffff;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
/* =========================================================
CARD HEADER
========================================================= */
._cardHeader_d17zl_281 {
width: 100%;
min-height: 48px;
flex: 0 0 48px;
padding: 10px 12px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid #edf2f9;
background: #ffffff;
}
._titleGroup_d17zl_319 {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
._titleGroup_d17zl_319 svg {
flex-shrink: 0;
color: #0872f5;
}
._titleGroup_d17zl_319 h1 {
min-width: 0;
margin: 0;
color: #101d68;
font-size: 15px;
line-height: 1.2;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =========================================================
EMAIL BOX - LEFT PANEL
========================================================= */
._emailBox_d17zl_383 {
width: calc(100% - 16px);
min-width: 0;
min-height: 0;
flex: 1 1 auto;
margin: 8px;
border: 1px solid #dce8f8;
border-radius: 8px;
background: #ffffff;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
}
._emailBox_d17zl_383::-webkit-scrollbar {
width: 6px;
}
._emailBox_d17zl_383::-webkit-scrollbar-track {
background: transparent;
}
._emailBox_d17zl_383::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #cbd8ea;
}
/* =========================================================
EMAIL INFO
========================================================= */
._emailInfo_d17zl_459 {
padding: 12px;
box-sizing: border-box;
}
._infoRow_d17zl_469 {
width: 100%;
min-height: 24px;
display: grid;
grid-template-columns: 90px minmax(0, 1fr);
align-items: center;
gap: 8px;
}
._infoLabel_d17zl_489 {
color: #7182b8;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
._infoValue_d17zl_503,
._projectValue_d17zl_505,
._receivedValue_d17zl_507 {
min-width: 0;
color: #101d68;
font-size: 12px;
line-height: 1.4;
overflow-wrap: anywhere;
}
._infoValue_d17zl_503 {
font-weight: 500;
}
._projectValue_d17zl_505 {
color: #0872f5;
font-weight: 500;
}
._receivedValue_d17zl_507 {
color: #6178b5;
}
/* =========================================================
DIVIDER
========================================================= */
._divider_d17zl_561 {
width: calc(100% - 24px);
height: 1px;
margin: 0 12px;
background: #dce6f3;
}
/* =========================================================
EMAIL BODY
========================================================= */
._emailBody_d17zl_587 {
width: calc(100% - 16px);
margin: 8px;
padding: 12px;
border-radius: 8px;
background: #f3f8fe;
color: #101d68;
font-size: 12px;
line-height: 1.7;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: break-word;
}
._emailBody_d17zl_587 p {
margin: 0 0 13px;
}
._emailBody_d17zl_587 p:last-child {
margin-bottom: 0;
}
._bodySpacer_d17zl_645 {
height: 8px;
}
/* =========================================================
CLASSIFICATION BADGE
========================================================= */
._classificationBadge_d17zl_661 {
flex-shrink: 0;
min-height: 22px;
padding: 3px 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #dbe5f3;
border-radius: 9999px;
background: #f8fafc;
color: #536da9;
font-size: 9px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
._classificationImportant_d17zl_707 {
border-color: rgba(245, 158, 11, 0.2);
background: rgba(245, 158, 11, 0.08);
color: #d97706;
}
._classificationUrgent_d17zl_719 {
border-color: rgba(239, 68, 68, 0.2);
background: rgba(239, 68, 68, 0.08);
color: #dc2626;
}
._classificationSpam_d17zl_731 {
border-color: rgba(239, 68, 68, 0.18);
background: rgba(239, 68, 68, 0.06);
color: #b91c1c;
}
/* =========================================================
ATTACHMENTS
========================================================= */
._attachmentsSection_d17zl_751 {
width: 100%;
margin-top: 4px;
padding: 10px 12px 12px;
border-top: 1px solid #e5edf7;
box-sizing: border-box;
}
._attachmentTitle_d17zl_773 {
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
color: #475569;
font-size: 11px;
font-weight: 700;
}
._attachmentTitle_d17zl_773 svg {
flex-shrink: 0;
color: #101d68;
}
._attachmentGrid_d17zl_807 {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
._attachmentCard_d17zl_823 {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 9px 10px;
border: 1px solid #dbe5ef;
border-radius: 8px;
background: #ffffff;
box-sizing: border-box;
}
._attachmentCard_d17zl_823:hover {
border-color: #9dc8fa;
background: #f7fbff;
}
._fileIcon_d17zl_871,
._pdfIcon_d17zl_873 {
width: 32px;
height: 34px;
flex: 0 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
._fileIcon_d17zl_871 {
background: rgba(8, 114, 245, 0.08);
color: #0872f5;
}
._pdfIcon_d17zl_873 {
background: #ef2c2c;
color: #ffffff;
}
._attachmentInfo_d17zl_919 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
._attachmentInfo_d17zl_919 strong {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #0f172a;
font-size: 10px;
font-weight: 700;
}
._attachmentInfo_d17zl_919 span {
color: #94a3b8;
font-size: 9px;
}
._attachmentActions_d17zl_969 {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
._previewButton_d17zl_985,
._downloadButton_d17zl_987 {
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 9px;
border-radius: 6px;
font-family: inherit;
font-size: 10px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
._previewButton_d17zl_985 {
border: 1px solid #bfdbfe;
background: #eff6ff;
color: #2563eb;
}
._downloadButton_d17zl_987 {
border: 1px solid #bae6fd;
background: #f0f9ff;
color: #0284c7;
}
._previewButton_d17zl_985:hover:not(:disabled) {
background: #dbeafe;
}
._downloadButton_d17zl_987:hover:not(:disabled) {
background: #e0f2fe;
}
._previewButton_d17zl_985:disabled,
._downloadButton_d17zl_987:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* =========================================================
RIGHT PANEL - DRAFT WRAPPER
========================================================= */
._draftWrapper_d17zl_1087 {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 auto;
padding: 8px;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
background: #ffffff;
}
._draftWrapper_d17zl_1087::-webkit-scrollbar {
width: 6px;
}
._draftWrapper_d17zl_1087::-webkit-scrollbar-track {
background: transparent;
}
._draftWrapper_d17zl_1087::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #cbd8ea;
}
/* =========================================================
DRAFT EDITOR
========================================================= */
._draftEditor_d17zl_1161 {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 auto;
display: flex;
}
._draftTextarea_d17zl_1181 {
display: block;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 1 auto;
min-height: 280px;
padding: 13px 14px;
border: 1px solid #d7e4f7;
border-radius: 8px;
outline: none;
background: #fbfdff;
color: #101d68;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 12px;
line-height: 1.6;
resize: none;
box-sizing: border-box;
overflow-y: auto;
transition:
border-color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease;
}
._draftTextarea_d17zl_1181:hover:not(:disabled) {
border-color: #a8cafa;
}
._draftTextarea_d17zl_1181:focus {
border-color: #0872f5;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(8, 114, 245, 0.1);
}
._draftTextarea_d17zl_1181::placeholder {
color: #8ca0c9;
}
._draftTextarea_d17zl_1181:disabled {
background: #f5f8fc;
color: #7182b8;
cursor: not-allowed;
opacity: 0.85;
}
/* =========================================================
SENT REPLY NOTICE
========================================================= */
._sentReplyNotice_d17zl_1311 {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 8px 10px;
border: 1px solid #bbf7d0;
border-radius: 7px;
background: #f0fdf4;
color: #166534;
}
._sentReplyIcon_d17zl_1341 {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: #dcfce7;
color: #16a34a;
}
._sentReplyNotice_d17zl_1311 > div {
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
._sentReplyNotice_d17zl_1311 strong {
font-size: 11px;
font-weight: 700;
}
._sentReplyNotice_d17zl_1311 span {
font-size: 10px;
}
/* =========================================================
DRAFT ACTIONS
========================================================= */
._draftActions_d17zl_1417 {
width: 100%;
flex: 0 0 auto;
padding-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
box-sizing: border-box;
}
._draftActionLeft_d17zl_1449 {
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
._generateButton_d17zl_1467,
._editButton_d17zl_1469,
._sendButton_d17zl_1471 {
min-height: 38px;
padding: 0 15px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
opacity 0.15s ease;
}
._generateButton_d17zl_1467,
._editButton_d17zl_1469 {
border: 1px solid #0872f5;
background: #ffffff;
color: #0872f5;
}
._generateButton_d17zl_1467:hover:not(:disabled),
._editButton_d17zl_1469:hover:not(:disabled) {
background: #f0f7ff;
}
._sendButton_d17zl_1471 {
border: 1px solid #0872f5;
background: #0872f5;
color: #ffffff;
}
._sendButton_d17zl_1471:hover:not(:disabled) {
border-color: #005edb;
background: #005edb;
}
._generateButton_d17zl_1467:disabled,
._editButton_d17zl_1469:disabled,
._sendButton_d17zl_1471:disabled {
opacity: 0.5;
cursor: not-allowed;
}
._actionInfo_d17zl_1587 {
color: #8192bd;
font-size: 9px;
font-weight: 500;
white-space: nowrap;
}
/* =========================================================
DRAFT STATUS BADGES
========================================================= */
._draftReadyBadge_d17zl_1609 {
min-height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 3px 8px;
border: 1px solid rgba(34, 197, 94, 0.2);
border-radius: 9999px;
background: rgba(34, 197, 94, 0.08);
color: #15803d;
font-size: 10px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
._draftGeneratingBadge_d17zl_1655 {
min-height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 3px 8px;
border: 1px solid rgba(29, 157, 204, 0.18);
border-radius: 9999px;
background: rgba(29, 157, 204, 0.08);
color: #1d9dcc;
font-size: 10px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
._draftGeneratingBadge_d17zl_1655 svg {
flex-shrink: 0;
animation: _aiDraftPulse_d17zl_1 1.2s ease-in-out infinite;
}
@keyframes _aiDraftPulse_d17zl_1 {
0%,
100% {
opacity: 0.5;
transform: scale(0.9);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
._page_d17zl_9 {
height: auto;
min-height: calc(100vh - 78px);
overflow: visible;
}
._detailGrid_d17zl_195 {
grid-template-columns: 1fr;
overflow: visible;
}
._card_d17zl_235 {
min-height: 420px;
height: auto;
}
._emailBox_d17zl_383 {
max-height: 520px;
}
._draftWrapper_d17zl_1087 {
min-height: 420px;
max-height: 560px;
}
._draftTextarea_d17zl_1181 {
min-height: 300px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
._page_d17zl_9 {
padding: 10px;
}
._topBar_d17zl_77 {
margin-bottom: 8px;
}
._cardHeader_d17zl_281 {
min-height: 42px;
flex-basis: 42px;
padding: 8px 10px;
}
._attachmentCard_d17zl_823 {
grid-template-columns: 32px minmax(0, 1fr);
}
._attachmentActions_d17zl_969 {
grid-column: 1 / -1;
width: 100%;
}
._previewButton_d17zl_985,
._downloadButton_d17zl_987 {
flex: 1;
}
._infoRow_d17zl_469 {
grid-template-columns: 72px minmax(0, 1fr);
}
._draftActions_d17zl_1417 {
align-items: stretch;
flex-direction: column;
}
._draftActionLeft_d17zl_1449 {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
._generateButton_d17zl_1467,
._editButton_d17zl_1469,
._sendButton_d17zl_1471 {
width: 100%;
min-height: 36px;
}
._actionInfo_d17zl_1587 {
width: 100%;
text-align: center;
white-space: normal;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 450px) {
._page_d17zl_9 {
padding: 8px;
}
._emailBox_d17zl_383 {
width: calc(100% - 12px);
margin: 6px;
}
._emailBody_d17zl_587 {
width: calc(100% - 12px);
margin: 6px;
padding: 9px;
}
._infoRow_d17zl_469 {
grid-template-columns: 1fr;
gap: 2px;
margin-bottom: 7px;
}
._infoRow_d17zl_469:last-child {
margin-bottom: 0;
}
._draftTextarea_d17zl_1181 {
min-height: 240px;
padding: 10px;
font-size: 11px;
}
._titleGroup_d17zl_319 h1 {
font-size: 13px;
}
._classificationBadge_d17zl_661,
._draftReadyBadge_d17zl_1609,
._draftGeneratingBadge_d17zl_1655 {
font-size: 8px;
}
}
/* =========================================================
EMAIL DETAIL
FINAL RESPONSIVE LAYOUT FIX
========================================================= */
/* =========================================================
DESKTOP DEFAULT
========================================================= */
._page_d17zl_9 {
width: 100%;
min-width: 0;
height: calc(100dvh - 76px);
min-height: 0;
padding: 12px;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
}
/* =========================================================
TOP BAR
========================================================= */
._topBar_d17zl_77 {
width: 100%;
min-width: 0;
flex: 0 0 auto;
margin: 0 0 10px;
display: flex;
align-items: center;
box-sizing: border-box;
}
/* =========================================================
MAIN GRID
========================================================= */
._detailGrid_d17zl_195 {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 0;
display: grid;
grid-template-columns:
minmax(0, 1.7fr)
minmax(340px, 1fr);
gap: 12px;
align-items: stretch;
overflow: hidden;
box-sizing: border-box;
}
/* =========================================================
LEFT / RIGHT CARD
========================================================= */
._card_d17zl_235 {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
}
/* =========================================================
LEFT SIDE
========================================================= */
._emailBox_d17zl_383 {
width: calc(100% - 16px);
min-width: 0;
min-height: 0;
flex: 1 1 0;
margin: 8px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #cbd8ea transparent;
}
/* =========================================================
RIGHT SIDE
========================================================= */
._draftWrapper_d17zl_1087 {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 0;
padding: 8px;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background: #ffffff;
scrollbar-width: thin;
scrollbar-color: #cbd8ea transparent;
}
/* =========================================================
DRAFT EDITOR
========================================================= */
._draftEditor_d17zl_1161 {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 0;
display: flex;
box-sizing: border-box;
}
._draftTextarea_d17zl_1181 {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 220px;
flex: 1 1 0;
box-sizing: border-box;
resize: none;
overflow-y: auto;
}
/* =========================================================
ACTIONS
========================================================= */
._draftActions_d17zl_1417 {
width: 100%;
flex: 0 0 auto;
padding-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
box-sizing: border-box;
}
._draftActionLeft_d17zl_1449 {
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
/* =========================================================
ATTACHMENT CARD
========================================================= */
._attachmentCard_d17zl_823 {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns:
34px
minmax(0, 1fr)
auto;
align-items: center;
gap: 10px;
box-sizing: border-box;
}
._attachmentInfo_d17zl_919 {
min-width: 0;
}
._attachmentInfo_d17zl_919 strong {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._attachmentActions_d17zl_969 {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* =========================================================
SCROLLBARS
========================================================= */
._emailBox_d17zl_383::-webkit-scrollbar,
._draftWrapper_d17zl_1087::-webkit-scrollbar,
._draftTextarea_d17zl_1181::-webkit-scrollbar {
width: 6px;
}
._emailBox_d17zl_383::-webkit-scrollbar-track,
._draftWrapper_d17zl_1087::-webkit-scrollbar-track,
._draftTextarea_d17zl_1181::-webkit-scrollbar-track {
background: transparent;
}
._emailBox_d17zl_383::-webkit-scrollbar-thumb,
._draftWrapper_d17zl_1087::-webkit-scrollbar-thumb,
._draftTextarea_d17zl_1181::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #cbd8ea;
}
/* =========================================================
MEDIUM DESKTOP
========================================================= */
@media (max-width: 1250px) {
._detailGrid_d17zl_195 {
grid-template-columns:
minmax(0, 1.5fr)
minmax(320px, 1fr);
gap: 10px;
}
._page_d17zl_9 {
padding: 10px;
}
._draftTextarea_d17zl_1181 {
min-height: 220px;
}
._generateButton_d17zl_1467,
._sendButton_d17zl_1471 {
padding-left: 11px;
padding-right: 11px;
}
}
/* =========================================================
SHORT HEIGHT SCREEN
IMPORTANT:
DevTools open / laptop small-height screen-ல்
page height force பண்ணாமல் vertical scroll allow செய்கிறது.
========================================================= */
@media (min-width: 1101px) and (max-height: 700px) {
._page_d17zl_9 {
height: auto;
min-height: 620px;
overflow-x: hidden;
overflow-y: auto;
padding: 10px 12px 12px;
}
._detailGrid_d17zl_195 {
flex: none;
height: 510px;
min-height: 510px;
overflow: hidden;
}
._card_d17zl_235 {
height: 100%;
min-height: 0;
}
._emailBox_d17zl_383 {
min-height: 0;
overflow-y: auto;
}
._draftWrapper_d17zl_1087 {
min-height: 0;
overflow-y: auto;
}
._draftEditor_d17zl_1161 {
min-height: 0;
}
._draftTextarea_d17zl_1181 {
min-height: 250px;
}
}
/* =========================================================
VERY SHORT HEIGHT
========================================================= */
@media (min-width: 1101px) and (max-height: 520px) {
._page_d17zl_9 {
min-height: 590px;
}
._detailGrid_d17zl_195 {
height: 480px;
min-height: 480px;
}
._draftTextarea_d17zl_1181 {
min-height: 230px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
._page_d17zl_9 {
width: 100%;
height: auto;
min-height: calc(100dvh - 76px);
padding: 10px;
overflow-x: hidden;
overflow-y: visible;
}
._detailGrid_d17zl_195 {
width: 100%;
min-height: 0;
flex: none;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
overflow: visible;
}
._card_d17zl_235 {
width: 100%;
height: auto;
min-height: 420px;
overflow: hidden;
}
._emailBox_d17zl_383 {
min-height: 350px;
max-height: 520px;
overflow-y: auto;
}
._draftWrapper_d17zl_1087 {
min-height: 400px;
max-height: 540px;
overflow-y: auto;
}
._draftEditor_d17zl_1161 {
min-height: 300px;
}
._draftTextarea_d17zl_1181 {
min-height: 300px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
._page_d17zl_9 {
padding: 8px;
}
._topBar_d17zl_77 {
margin-bottom: 8px;
}
._detailGrid_d17zl_195 {
gap: 10px;
}
._card_d17zl_235 {
min-height: 360px;
}
._emailBox_d17zl_383 {
width: calc(100% - 12px);
margin: 6px;
min-height: 320px;
max-height: 480px;
}
._infoRow_d17zl_469 {
grid-template-columns:
72px
minmax(0, 1fr);
}
._emailBody_d17zl_587 {
width: calc(100% - 12px);
margin: 6px;
padding: 10px;
}
._attachmentCard_d17zl_823 {
grid-template-columns:
32px
minmax(0, 1fr);
gap: 8px;
}
._attachmentActions_d17zl_969 {
grid-column: 1 / -1;
width: 100%;
}
._previewButton_d17zl_985,
._downloadButton_d17zl_987 {
flex: 1;
min-width: 0;
}
._draftWrapper_d17zl_1087 {
min-height: 360px;
max-height: none;
padding: 7px;
}
._draftEditor_d17zl_1161 {
min-height: 260px;
}
._draftTextarea_d17zl_1181 {
min-height: 260px;
padding: 11px;
font-size: 11px;
}
._draftActions_d17zl_1417 {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 8px;
}
._draftActionLeft_d17zl_1449 {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
._generateButton_d17zl_1467,
._editButton_d17zl_1469,
._sendButton_d17zl_1471 {
width: 100%;
min-width: 0;
}
._actionInfo_d17zl_1587 {
width: 100%;
text-align: center;
white-space: normal;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 450px) {
._page_d17zl_9 {
padding: 6px;
}
._backButton_d17zl_115 {
padding-left: 4px;
padding-right: 4px;
font-size: 10px;
}
._card_d17zl_235 {
min-height: 340px;
}
._infoRow_d17zl_469 {
grid-template-columns: 1fr;
gap: 2px;
margin-bottom: 8px;
}
._emailBox_d17zl_383 {
min-height: 300px;
}
._attachmentActions_d17zl_969 {
flex-direction: column;
}
._previewButton_d17zl_985,
._downloadButton_d17zl_987 {
width: 100%;
}
._draftWrapper_d17zl_1087 {
min-height: 340px;
}
._draftEditor_d17zl_1161 {
min-height: 240px;
}
._draftTextarea_d17zl_1181 {
min-height: 240px;
padding: 10px;
}
._titleGroup_d17zl_319 h1 {
font-size: 13px;
}
}
/* =========================================================
REGENERATE DRAFT MODAL
========================================================= */
._regenerateModalOverlay_d17zl_3283 {
position: fixed;
inset: 0;
z-index: 9999;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(2px);
}
/* =========================================================
MODAL
========================================================= */
._regenerateModal_d17zl_3283 {
width: min(520px, 100%);
max-height: calc(100dvh - 40px);
overflow: hidden;
border: 1px solid #d7e4f7;
border-radius: 12px;
background: #ffffff;
box-shadow:
0 20px 55px rgba(15, 23, 42, 0.2);
color: #101d68;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
/* =========================================================
MODAL HEADER
========================================================= */
._regenerateModalHeader_d17zl_3383 {
min-height: 68px;
padding: 14px 16px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #e7eef8;
box-sizing: border-box;
}
._regenerateModalHeader_d17zl_3383 > div {
min-width: 0;
}
._regenerateModalHeader_d17zl_3383 h2 {
margin: 0;
color: #101d68;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
._regenerateModalHeader_d17zl_3383 p {
margin: 4px 0 0;
color: #7182a8;
font-size: 11px;
line-height: 1.5;
}
/* =========================================================
MODAL CLOSE
========================================================= */
._regenerateModalClose_d17zl_3469 {
width: 30px;
height: 30px;
flex: 0 0 30px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: transparent;
color: #64748b;
cursor: pointer;
}
._regenerateModalClose_d17zl_3469:hover:not(:disabled) {
background: #f1f5f9;
color: #0f172a;
}
._regenerateModalClose_d17zl_3469:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================
MODAL BODY
========================================================= */
._regenerateModalBody_d17zl_3545 {
padding: 16px;
box-sizing: border-box;
}
._regenerateLabel_d17zl_3557 {
display: block;
margin-bottom: 7px;
color: #334155;
font-size: 11px;
font-weight: 600;
}
/* =========================================================
MODAL TEXTAREA
========================================================= */
._regenerateTextarea_d17zl_3587 {
width: 100%;
min-width: 0;
min-height: 120px;
max-height: 260px;
padding: 11px 12px;
resize: vertical;
border: 1px solid #cbdcf2;
border-radius: 8px;
outline: none;
background: #fbfdff;
color: #101d68;
font-family: inherit;
font-size: 12px;
line-height: 1.6;
box-sizing: border-box;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background 0.15s ease;
}
._regenerateTextarea_d17zl_3587:hover:not(:disabled) {
border-color: #9dc8fa;
}
._regenerateTextarea_d17zl_3587:focus {
border-color: #0872f5;
background: #ffffff;
box-shadow:
0 0 0 3px
rgba(8, 114, 245, 0.1);
}
._regenerateTextarea_d17zl_3587::placeholder {
color: #94a3b8;
}
._regenerateTextarea_d17zl_3587:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* =========================================================
API EXAMPLE
========================================================= */
._regenerateExample_d17zl_3707 {
margin-top: 8px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
color: #94a3b8;
font-size: 9px;
}
._regenerateExample_d17zl_3707 code {
padding: 3px 6px;
border-radius: 4px;
background: #f1f5f9;
color: #475569;
font-family:
"SFMono-Regular",
Consolas,
monospace;
font-size: 9px;
}
/* =========================================================
MODAL FOOTER
========================================================= */
._regenerateModalFooter_d17zl_3777 {
padding: 11px 16px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid #e7eef8;
background: #fbfdff;
box-sizing: border-box;
}
/* =========================================================
MODAL BUTTONS
========================================================= */
._regenerateCancelButton_d17zl_3817,
._regenerateSubmitButton_d17zl_3819 {
min-height: 36px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 7px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
opacity 0.15s ease;
}
._regenerateCancelButton_d17zl_3817 {
border: 1px solid #d7e1ed;
background: #ffffff;
color: #475569;
}
._regenerateCancelButton_d17zl_3817:hover:not(:disabled) {
background: #f8fafc;
}
._regenerateSubmitButton_d17zl_3819 {
border: 1px solid #0872f5;
background: #0872f5;
color: #ffffff;
}
._regenerateSubmitButton_d17zl_3819:hover:not(:disabled) {
border-color: #0064df;
background: #0064df;
}
._regenerateCancelButton_d17zl_3817:disabled,
._regenerateSubmitButton_d17zl_3819:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================
MOBILE MODAL
========================================================= */
@media (max-width: 600px) {
._regenerateModalOverlay_d17zl_3283 {
padding: 12px;
}
._regenerateModal_d17zl_3283 {
width: 100%;
}
._regenerateModalHeader_d17zl_3383 {
padding: 12px;
}
._regenerateModalBody_d17zl_3545 {
padding: 12px;
}
._regenerateTextarea_d17zl_3587 {
min-height: 130px;
}
._regenerateModalFooter_d17zl_3777 {
padding: 10px 12px;
}
._regenerateCancelButton_d17zl_3817,
._regenerateSubmitButton_d17zl_3819 {
flex: 1;
}
}
/* =========================================================
INITIAL AI DRAFT LOADER
ONLY REPLY TEXTAREA AREA
========================================================= */
._draftEditor_d17zl_1161 {
position: relative;
}
/* =========================================================
LOADING STATE
========================================================= */
._draftEditorLoading_d17zl_4031 {
position: relative;
overflow: hidden;
}
/* =========================================================
OVERLAY
========================================================= */
._initialDraftLoader_d17zl_4051 {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px;
background:
rgba(248, 251, 255, 0.96);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border-radius: inherit;
}
/* =========================================================
SPINNER
========================================================= */
._initialDraftSpinner_d17zl_4107 {
width: 22px;
height: 22px;
flex: 0 0 22px;
border: 2px solid #dbeafe;
border-top-color: #1677ff;
border-radius: 50%;
animation:
_initialDraftSpin_d17zl_4107
0.75s
linear
infinite;
}
/* =========================================================
TEXT
========================================================= */
._initialDraftLoaderText_d17zl_4151 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
._initialDraftLoaderText_d17zl_4151 strong {
color: #111827;
font-size: 11px;
font-weight: 700;
line-height: 16px;
}
._initialDraftLoaderText_d17zl_4151 span {
color: #64748b;
font-size: 9px;
font-weight: 500;
line-height: 14px;
}
/* =========================================================
ANIMATION
========================================================= */
@keyframes _initialDraftSpin_d17zl_4107 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 768px) {
._initialDraftLoader_d17zl_4051 {
gap: 8px;
padding: 14px;
}
._initialDraftSpinner_d17zl_4107 {
width: 20px;
height: 20px;
flex-basis: 20px;
}
._initialDraftLoaderText_d17zl_4151 strong {
font-size: 10px;
}
._initialDraftLoaderText_d17zl_4151 span {
font-size: 8px;
}
}/* =========================================================
MAIN LAYOUT
========================================================= */
._compliancePage_fqtso_9 {
width: 100%;
max-width: 100%;
height: calc(100vh - 68px);
min-height: 0;
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 16px;
align-items: stretch;
overflow: hidden;
background: #f8fbff;
color: #10245a;
padding: 10px;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
._compliancePage_fqtso_9,
._compliancePage_fqtso_9 * {
box-sizing: border-box;
}
/* =========================================================
LEFT CHAT COLUMN
========================================================= */
._chatColumn_fqtso_89 {
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
overflow: hidden;
}
/* =========================================================
RIGHT COLUMN
========================================================= */
._rightColumn_fqtso_127 {
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 12px;
/*
Important:
Right column itself should not scroll.
Reference list handles its own scrolling.
*/
overflow: hidden;
scrollbar-width: thin;
scrollbar-color: #c8d8eb transparent;
}
._rightColumn_fqtso_127::-webkit-scrollbar {
width: 7px;
}
._rightColumn_fqtso_127::-webkit-scrollbar-track {
background: transparent;
}
._rightColumn_fqtso_127::-webkit-scrollbar-thumb {
background: #c8d8eb;
border-radius: 10px;
}
._rightColumn_fqtso_127::-webkit-scrollbar-thumb:hover {
background: #aebfd5;
}
/* =========================================================
CHAT CARD
========================================================= */
._chatCard_fqtso_215 {
min-width: 0;
min-height: 0;
width: 100%;
height: auto;
/*
Allow the chat card to consume all available height.
*/
flex: 1 1 0;
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #d9e6f5;
border-radius: 9px;
overflow: hidden;
}
/* =========================================================
CHAT HEADER
========================================================= */
._chatHeader_fqtso_269 {
min-height: 52px;
flex: 0 0 auto;
padding: 9px 12px;
border-bottom: 1px solid #e5edf7;
display: flex;
align-items: center;
}
._chatTitleGroup_fqtso_295 {
min-width: 0;
display: flex;
align-items: center;
gap: 9px;
}
._chatHeaderIcon_fqtso_313 {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #eaf4ff;
color: #0877f9;
}
._chatTitleGroup_fqtso_295 h2 {
margin: 0 0 2px;
color: #10265f;
font-size: 14px;
font-weight: 700;
}
._chatTitleGroup_fqtso_295 p {
margin: 0;
color: #7a8cab;
font-size: 10px;
}
/* =========================================================
CHAT MESSAGES
========================================================= */
._chatMessages_fqtso_387 {
min-width: 0;
min-height: 0;
/*
Critical scroll fix.
*/
flex: 1 1 0;
height: auto;
padding: 14px 12px;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 16px;
background: #ffffff;
scrollbar-width: thin;
scrollbar-color: #c8d8eb transparent;
}
._chatMessages_fqtso_387::-webkit-scrollbar {
width: 7px;
}
._chatMessages_fqtso_387::-webkit-scrollbar-track {
background: transparent;
}
._chatMessages_fqtso_387::-webkit-scrollbar-thumb {
background: #c8d8eb;
border-radius: 10px;
}
._chatMessages_fqtso_387::-webkit-scrollbar-thumb:hover {
background: #aebfd5;
}
/* =========================================================
USER MESSAGE
========================================================= */
._userMessageRow_fqtso_483 {
min-width: 0;
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 7px;
position: relative;
padding-left: 50px;
}
._userMessageBubble_fqtso_511 {
min-width: 0;
max-width: 78%;
overflow-wrap: anywhere;
padding: 9px 11px;
border-radius: 9px 9px 3px 9px;
background: #e6f1ff;
color: #17346f;
font-size: 11px;
line-height: 1.5;
}
._youAvatar_fqtso_545 {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #edf5ff;
color: #4e76ac;
border: 1px solid #d9e8fa;
}
._assistantAvatar_fqtso_581 {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e9f4ff;
color: #0877f9;
}
._messageLabel_fqtso_613 {
position: absolute;
right: 2px;
top: 33px;
color: #7285a7;
font-size: 9px;
}
/* =========================================================
ASSISTANT MESSAGE
========================================================= */
._assistantMessageRow_fqtso_643 {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 9px;
}
._assistantIdentity_fqtso_661 {
width: 45px;
flex: 0 0 45px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: #61769c;
font-size: 9px;
}
._assistantContent_fqtso_695 {
min-width: 0;
max-width: 78%;
flex: 1 1 auto;
}
._assistantBubble_fqtso_711 {
min-width: 0;
padding: 10px 11px;
border-radius: 4px 9px 9px 9px;
background: #f5f8fc;
color: #1d376f;
font-size: 11px;
line-height: 1.5;
overflow-wrap: anywhere;
}
._emailSubject_fqtso_743 {
padding: 0 0 7px;
color: #172f69;
font-size: 11px;
font-weight: 600;
}
._assistantText_fqtso_761 {
min-width: 0;
white-space: normal;
}
/* =========================================================
CHAT ACTIONS
========================================================= */
._messageActions_fqtso_781 {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 9px;
}
._messageActions_fqtso_781 button {
height: 28px;
padding: 0 10px;
border: 1px solid #d5e4f5;
border-radius: 6px;
background: #ffffff;
color: #1761b7;
cursor: pointer;
font-size: 10px;
}
._messageActions_fqtso_781 button:hover {
background: #edf6ff;
}
/* =========================================================
CHAT FILE
========================================================= */
._chatFileCard_fqtso_849 {
min-width: 0;
margin-top: 9px;
min-height: 60px;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #dce8f5;
border-radius: 7px;
background: #ffffff;
}
._chatPdfIcon_fqtso_889 {
width: 32px;
height: 38px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: #ffe7e7;
color: #e52d2d;
}
._chatFileInfo_fqtso_921 {
flex: 1;
min-width: 0;
}
._chatFileInfo_fqtso_921 strong {
display: block;
margin-bottom: 3px;
color: #10265f;
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._chatFileInfo_fqtso_921 span {
color: #8291ad;
font-size: 9px;
}
._fileActions_fqtso_977 {
display: flex;
flex: 0 0 auto;
gap: 5px;
}
._fileActions_fqtso_977 button {
height: 27px;
padding: 0 8px;
display: flex;
align-items: center;
gap: 4px;
border: 1px solid #dbe7f5;
border-radius: 6px;
background: #ffffff;
color: #1761b7;
cursor: pointer;
font-size: 9px;
}
._fileActions_fqtso_977 ._shareFileButton_fqtso_1035 {
background: #0877f9;
border-color: #0877f9;
color: #ffffff;
}
._fileDescription_fqtso_1051 {
margin-top: 7px;
color: #687d9f;
font-size: 10px;
}
/* =========================================================
QUICK ACTIONS
========================================================= */
._quickActions_fqtso_1075 {
flex: 0 0 auto;
padding: 7px 10px;
display: flex;
gap: 6px;
overflow-x: auto;
border-top: 1px solid #edf2f8;
}
._quickActions_fqtso_1075 button {
flex: 0 0 auto;
height: 28px;
padding: 0 10px;
border: 1px solid #e0ebf8;
border-radius: 14px;
background: #eef6ff;
color: #1761b7;
cursor: pointer;
font-size: 9px;
white-space: nowrap;
}
._quickActions_fqtso_1075 button:hover {
background: #e3f0ff;
}
/* =========================================================
CHAT INPUT
========================================================= */
._chatInputArea_fqtso_1159 {
min-height: 48px;
flex: 0 0 auto;
margin: 0 9px 9px;
padding: 5px 5px 5px 8px;
display: flex;
align-items: center;
gap: 6px;
border: 1px solid #d5e3f2;
border-radius: 7px;
background: #ffffff;
}
._attachButton_fqtso_1199 {
width: 29px;
height: 29px;
flex: 0 0 29px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: #5276a8;
cursor: pointer;
}
._chatInputArea_fqtso_1159 textarea {
flex: 1;
min-width: 0;
width: 100%;
height: 28px;
padding: 6px 3px;
resize: none;
border: 0;
outline: 0;
background: transparent;
color: #19366f;
font-family: inherit;
font-size: 10px;
line-height: 1.5;
}
._chatInputArea_fqtso_1159 textarea::placeholder {
color: #8999b5;
}
._chatSendButton_fqtso_1297 {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: #0877f9;
color: #ffffff;
cursor: pointer;
}
._chatSendButton_fqtso_1297:hover {
background: #0568dc;
}
/* =========================================================
COMMON RIGHT CARDS
========================================================= */
._card_fqtso_1351 {
min-width: 0;
width: 100%;
background: #ffffff;
border: 1px solid #d9e6f5;
border-radius: 9px;
overflow: hidden;
}
/* =========================================================
SOURCE / REFERENCE CARD
========================================================= */
._rightColumn_fqtso_127 > ._card_fqtso_1351:first-child {
min-height: 0;
flex: 1 1 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* =========================================================
DOCUMENT SUMMARY CARD
========================================================= */
._documentSummaryCard_fqtso_1415 {
/*
Keep summary always visible.
*/
flex: 0 0 auto;
min-height: 0;
overflow: hidden;
}
/* =========================================================
TITLE GROUP
========================================================= */
._titleGroup_fqtso_1445 {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 9px;
}
._titleGroup_fqtso_1445 > div {
min-width: 0;
}
._headerIcon_fqtso_1471 {
width: 28px;
height: 28px;
flex: 0 0 28px;
display: flex;
align-items: center;
justify-content: center;
color: #0877f9;
}
/* =========================================================
RIGHT CARD HEADERS
========================================================= */
._referenceHeader_fqtso_1505,
._snapshotHeader_fqtso_1507 {
min-height: 52px;
flex: 0 0 auto;
padding: 10px 12px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
._referenceHeader_fqtso_1505 {
flex-wrap: wrap;
}
._referenceHeader_fqtso_1505 h2,
._snapshotHeader_fqtso_1507 h2 {
margin: 0 0 3px;
color: #10265f;
font-size: 14px;
font-weight: 700;
}
._referenceHeader_fqtso_1505 p,
._snapshotHeader_fqtso_1507 p {
margin: 0;
color: #7b8baa;
font-size: 10px;
line-height: 1.4;
}
/* =========================================================
REFERENCE ACTIONS
========================================================= */
._referenceActions_fqtso_1597 {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex: 0 0 auto;
min-width: 0;
}
/* =========================================================
ADD FILE
========================================================= */
._addFileButton_fqtso_1631 {
height: 30px;
padding: 0 9px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
flex: 0 0 auto;
white-space: nowrap;
border: 1px solid #cfe0f3;
border-radius: 6px;
background: #ffffff;
color: #0877f9;
cursor: pointer;
font-size: 10px;
font-weight: 600;
}
._addFileButton_fqtso_1631:hover {
background: #f1f7ff;
}
/* =========================================================
REFERENCES LIST
========================================================= */
._referenceList_fqtso_1703 {
min-width: 0;
min-height: 0;
/*
Critical:
Reference list gets all remaining space.
*/
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 7px;
padding: 0 12px 12px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: #c8d8eb transparent;
}
._referenceList_fqtso_1703::-webkit-scrollbar {
width: 6px;
}
._referenceList_fqtso_1703::-webkit-scrollbar-track {
background: transparent;
}
._referenceList_fqtso_1703::-webkit-scrollbar-thumb {
background: #c8d8eb;
border-radius: 10px;
}
._referenceList_fqtso_1703::-webkit-scrollbar-thumb:hover {
background: #aebfd5;
}
/* =========================================================
REFERENCE CARD
========================================================= */
._referenceCard_fqtso_1795 {
min-width: 0;
width: 100%;
/*
Do not allow document cards to shrink.
*/
flex: 0 0 auto;
min-height: 62px;
padding: 8px;
display: flex;
align-items: center;
gap: 9px;
border: 1px solid #dce8f5;
border-radius: 7px;
background: #ffffff;
}
._referenceFileIcon_fqtso_1847 {
width: 32px;
height: 38px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
._pdfReference_fqtso_1873 {
background: #ffe7e7;
color: #ef3333;
}
._blueReference_fqtso_1883 {
background: #eef6ff;
color: #0877f9;
}
._greenReference_fqtso_1893 {
background: #e3f8ee;
color: #05a567;
}
._uploadedIcon_fqtso_1903 {
background: #f0ecff;
color: #7049d8;
}
._referenceContent_fqtso_1913 {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
._referenceContent_fqtso_1913 strong {
display: block;
margin-bottom: 2px;
color: #10265f;
font-size: 11px;
overflow-wrap: anywhere;
word-break: break-word;
}
._referenceSection_fqtso_1957 {
display: block;
margin-bottom: 2px;
color: #0877f9;
font-size: 10px;
font-weight: 600;
overflow-wrap: anywhere;
}
._referenceDescription_fqtso_1985 {
display: block;
color: #7789a9;
font-size: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._viewButton_fqtso_2013 {
flex: 0 0 auto;
padding: 5px 4px;
border: 0;
background: transparent;
color: #0877f9;
cursor: pointer;
font-size: 10px;
white-space: nowrap;
}
._viewButton_fqtso_2013:hover {
text-decoration: underline;
}
/* =========================================================
DOCUMENT SUMMARY
========================================================= */
._documentSummaryGrid_fqtso_2065 {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
padding: 0 12px 10px;
}
/* =========================================================
SNAPSHOT CONTENT
========================================================= */
._snapshotContent_fqtso_2101 {
min-width: 0;
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr))
76px;
gap: 5px;
padding: 0 10px 10px;
}
/* =========================================================
SNAPSHOT CARDS
========================================================= */
._snapshotCard_fqtso_2137 {
min-width: 0;
min-height: 62px;
padding: 7px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 7px;
overflow: hidden;
}
._snapshotCard_fqtso_2137 span {
font-size: 8px;
line-height: 1.2;
}
._snapshotCard_fqtso_2137 strong {
font-size: 18px;
line-height: 1;
}
._snapshotblue_fqtso_2197 {
background: #edf6ff;
color: #0877f9;
}
._snapshotgreen_fqtso_2209 {
background: #eaf9f2;
color: #07945d;
}
._snapshotred_fqtso_2221 {
background: #fff0f0;
color: #ee3030;
}
._snapshotgray_fqtso_2233 {
background: #f0f4f8;
color: #647696;
}
/* =========================================================
PROGRESS
========================================================= */
._progressWrapper_fqtso_2253 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #526687;
font-size: 8px;
text-align: center;
}
._progressCircle_fqtso_2287 {
width: 52px;
height: 52px;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: conic-gradient(#0877f9 0deg 230deg, #dce7f2 230deg 360deg);
}
._progressInner_fqtso_2319 {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #ffffff;
}
._progressInner_fqtso_2319 strong {
color: #172f69;
font-size: 12px;
}
/* =========================================================
RESPONSIVE
========================================================= */
/* =========================================================
LARGE DESKTOP / LAPTOP
========================================================= */
@media (max-width: 1280px) {
._compliancePage_fqtso_9 {
grid-template-columns:
minmax(0, 1.65fr)
minmax(340px, 1fr);
gap: 12px;
}
._documentSummaryGrid_fqtso_2065 {
gap: 5px;
padding-left: 10px;
padding-right: 10px;
}
._referenceHeader_fqtso_1505,
._snapshotHeader_fqtso_1507 {
padding-left: 10px;
padding-right: 10px;
}
._snapshotContent_fqtso_2101 {
grid-template-columns:
repeat(4, minmax(0, 1fr))
70px;
}
._snapshotCard_fqtso_2137 {
min-height: 60px;
padding: 6px;
}
._snapshotCard_fqtso_2137 strong {
font-size: 17px;
}
}
/* =========================================================
TABLET + SMALLER LAPTOP
========================================================= */
@media (max-width: 1100px) {
._compliancePage_fqtso_9 {
grid-template-columns: minmax(0, 1fr);
height: auto;
min-height: calc(100vh - 68px);
overflow-x: hidden;
overflow-y: auto;
padding: 10px;
}
._chatColumn_fqtso_89 {
height: auto;
min-height: 0;
overflow: visible;
}
._chatCard_fqtso_215 {
height: min(720px, calc(100vh - 100px));
min-height: 560px;
flex: none;
}
._chatMessages_fqtso_387 {
min-height: 0;
}
/*
Do NOT use overflow: visible here.
*/
._rightColumn_fqtso_127 {
height: auto;
min-height: 0;
overflow: visible;
}
._rightColumn_fqtso_127 > ._card_fqtso_1351:first-child {
flex: none;
min-height: 0;
}
/*
On stacked layout, keep a reasonable
scroll area for documents.
*/
._referenceList_fqtso_1703 {
max-height: 450px;
}
._documentSummaryCard_fqtso_1415 {
flex: none;
}
._documentSummaryGrid_fqtso_2065 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 768px) {
._compliancePage_fqtso_9 {
min-height: calc(100vh - 68px);
padding: 10px;
gap: 12px;
}
._chatCard_fqtso_215 {
height: 620px;
min-height: 0;
}
._userMessageBubble_fqtso_511,
._assistantContent_fqtso_695 {
max-width: 84%;
}
._referenceHeader_fqtso_1505,
._snapshotHeader_fqtso_1507 {
align-items: flex-start;
}
._referenceActions_fqtso_1597 {
width: 100%;
justify-content: flex-end;
}
._referenceList_fqtso_1703 {
max-height: 420px;
}
._documentSummaryGrid_fqtso_2065 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
._snapshotContent_fqtso_2101 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 480px) {
._compliancePage_fqtso_9 {
padding: 8px;
gap: 10px;
}
._chatHeader_fqtso_269 {
padding: 8px 10px;
}
._chatMessages_fqtso_387 {
padding: 12px 9px;
gap: 12px;
}
._chatCard_fqtso_215 {
height: 560px;
}
._userMessageRow_fqtso_483 {
padding-left: 30px;
gap: 5px;
}
._userMessageBubble_fqtso_511,
._assistantContent_fqtso_695 {
max-width: calc(100% - 36px);
}
._assistantMessageRow_fqtso_643 {
gap: 6px;
}
._assistantIdentity_fqtso_661 {
width: 38px;
flex-basis: 38px;
}
._assistantAvatar_fqtso_581 {
width: 29px;
height: 29px;
}
._assistantBubble_fqtso_711 {
padding: 9px 10px;
}
._chatInputArea_fqtso_1159 {
margin: 0 7px 7px;
padding-left: 6px;
}
._chatInputArea_fqtso_1159 textarea {
font-size: 10px;
}
._referenceHeader_fqtso_1505,
._snapshotHeader_fqtso_1507 {
padding: 10px;
}
._titleGroup_fqtso_1445 {
width: 100%;
}
._referenceActions_fqtso_1597 {
justify-content: stretch;
gap: 6px;
}
._referenceActions_fqtso_1597 ._addFileButton_fqtso_1631 {
flex: 1 1 0;
min-width: 0;
}
._referenceList_fqtso_1703 {
max-height: 380px;
padding: 0 8px 8px;
}
._referenceCard_fqtso_1795 {
align-items: flex-start;
gap: 7px;
padding: 7px;
}
._referenceFileIcon_fqtso_1847 {
width: 30px;
height: 36px;
flex-basis: 30px;
}
._viewButton_fqtso_2013 {
padding: 5px 2px;
}
._documentSummaryGrid_fqtso_2065 {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 0 10px 10px;
gap: 6px;
}
._snapshotContent_fqtso_2101 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
._snapshotCard_fqtso_2137 {
min-height: 58px;
}
}
/* =========================================================
VERY SMALL PHONES
========================================================= */
@media (max-width: 360px) {
._compliancePage_fqtso_9 {
padding: 6px;
}
._chatCard_fqtso_215 {
height: 530px;
}
._chatTitleGroup_fqtso_295 h2 {
font-size: 13px;
}
._referenceHeader_fqtso_1505 h2,
._snapshotHeader_fqtso_1507 h2 {
font-size: 13px;
}
._addFileButton_fqtso_1631 {
font-size: 9px;
padding: 0 7px;
}
._documentSummaryGrid_fqtso_2065 {
grid-template-columns: 1fr 1fr;
}
._snapshotContent_fqtso_2101 {
grid-template-columns: 1fr 1fr;
}
}
/* =========================================================
MARKDOWN CHAT CONTENT
========================================================= */
._markdownMessage_fqtso_3039 {
width: 100%;
min-width: 0;
color: #1d376f;
font-size: 11px;
line-height: 1.55;
overflow-wrap: anywhere;
}
/* =========================================================
PARAGRAPHS
========================================================= */
._markdownParagraph_fqtso_3075 {
margin: 0 0 10px;
}
._markdownParagraph_fqtso_3075:last-child {
margin-bottom: 0;
}
/* =========================================================
HEADINGS
========================================================= */
._markdownH1_fqtso_3099,
._markdownH2_fqtso_3101,
._markdownH3_fqtso_3103 {
color: #10265f;
font-weight: 700;
line-height: 1.3;
}
._markdownH1_fqtso_3099 {
margin: 0 0 10px;
font-size: 15px;
}
._markdownH2_fqtso_3101 {
margin: 0 0 9px;
font-size: 14px;
}
._markdownH3_fqtso_3103 {
margin: 12px 0 6px;
font-size: 12px;
}
._markdownH1_fqtso_3099:first-child,
._markdownH2_fqtso_3101:first-child,
._markdownH3_fqtso_3103:first-child {
margin-top: 0;
}
/* =========================================================
BOLD / ITALIC
========================================================= */
._markdownStrong_fqtso_3175 {
color: #173c80;
font-weight: 700;
}
._markdownEm_fqtso_3187 {
font-style: italic;
}
/* =========================================================
LISTS
========================================================= */
._markdownList_fqtso_3203,
._markdownOrderedList_fqtso_3205 {
margin: 6px 0 10px;
padding-left: 20px;
}
._markdownList_fqtso_3203 {
list-style-type: disc;
}
._markdownOrderedList_fqtso_3205 {
list-style-type: decimal;
}
._markdownListItem_fqtso_3233 {
margin: 4px 0;
padding-left: 2px;
line-height: 1.55;
}
._markdownListItem_fqtso_3233 > ._markdownList_fqtso_3203,
._markdownListItem_fqtso_3233 > ._markdownOrderedList_fqtso_3205 {
margin-top: 4px;
margin-bottom: 4px;
}
/* =========================================================
NESTED BULLET LISTS
========================================================= */
._markdownList_fqtso_3203 ._markdownList_fqtso_3203 {
list-style-type: circle;
}
._markdownList_fqtso_3203 ._markdownList_fqtso_3203 ._markdownList_fqtso_3203 {
list-style-type: square;
}
/* =========================================================
BLOCKQUOTE
========================================================= */
._markdownBlockquote_fqtso_3295 {
margin: 10px 0;
padding: 7px 10px;
border-left: 3px solid #8bbcf5;
background: #edf5ff;
color: #526b91;
border-radius: 0 6px 6px 0;
}
/* =========================================================
INLINE CODE
========================================================= */
._markdownInlineCode_fqtso_3331 {
padding: 2px 5px;
border-radius: 4px;
background: #eaf2fb;
color: #174a91;
font-family:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
monospace;
font-size: 10px;
}
/* =========================================================
CODE BLOCK
========================================================= */
._markdownCodeBlock_fqtso_3371 {
margin: 9px 0;
padding: 9px 10px;
overflow-x: auto;
border: 1px solid #dce7f4;
border-radius: 6px;
background: #eef3f8;
color: #243b64;
font-size: 10px;
line-height: 1.5;
}
._markdownCodeBlock_fqtso_3371 code {
font-family:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
monospace;
}
/* =========================================================
DIVIDER
========================================================= */
._markdownDivider_fqtso_3431 {
margin: 12px 0;
border: 0;
border-top: 1px solid #dce6f2;
}
/* =========================================================
LINKS
========================================================= */
._markdownMessage_fqtso_3039 a {
color: #0877f9;
text-decoration: underline;
text-underline-offset: 2px;
}
._markdownMessage_fqtso_3039 a:hover {
color: #0568dc;
}
/* =========================================================
TABLES
========================================================= */
._markdownMessage_fqtso_3039 table {
width: 100%;
margin: 10px 0;
border-collapse: collapse;
font-size: 10px;
overflow: hidden;
}
._markdownMessage_fqtso_3039 th,
._markdownMessage_fqtso_3039 td {
padding: 6px 7px;
border: 1px solid #dce6f2;
text-align: left;
vertical-align: top;
}
._markdownMessage_fqtso_3039 th {
background: #edf4fb;
color: #17346f;
font-weight: 700;
}
._markdownMessage_fqtso_3039 td {
background: #ffffff;
}
/* =========================================================
IMAGES
========================================================= */
._markdownMessage_fqtso_3039 img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
/* =========================================================
AI THINKING / TYPING
========================================================= */
._aiStatusBubble_fqtso_3589 {
min-width: 135px;
padding: 9px 11px;
}
._aiStatus_fqtso_3589 {
display: flex;
align-items: center;
gap: 7px;
min-height: 18px;
}
._aiStatusText_fqtso_3621 {
color: #61769c;
font-size: 10px;
line-height: 1;
white-space: nowrap;
}
._aiDots_fqtso_3641 {
display: inline-flex;
align-items: center;
gap: 3px;
height: 12px;
}
._aiDots_fqtso_3641 span {
width: 4px;
height: 4px;
border-radius: 50%;
background: #0877f9;
animation: _aiTypingDot_fqtso_1 1.2s infinite ease-in-out;
}
._aiDots_fqtso_3641 span:nth-child(1) {
animation-delay: 0s;
}
._aiDots_fqtso_3641 span:nth-child(2) {
animation-delay: 0.15s;
}
._aiDots_fqtso_3641 span:nth-child(3) {
animation-delay: 0.3s;
}
/* =========================================================
AI TYPING ANIMATION
========================================================= */
@keyframes _aiTypingDot_fqtso_1 {
0%,
60%,
100% {
transform: translateY(0);
opacity: 0.35;
}
30% {
transform: translateY(-3px);
opacity: 1;
}
}
/* =========================================================
LEADS PAGE
========================================================= */
._leadsPage_13nra_9 {
min-height: calc(100vh - 68px);
background: #f8fbff;
color: #10245a;
padding: 10px;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
box-sizing: border-box;
}
/* =========================================================
HEADER
========================================================= */
._leadsHeader_13nra_47 {
width: 100%;
min-width: 0;
min-height: 54px;
padding: 0 4px 12px;
display: grid;
grid-template-columns:
auto
minmax(300px, 1fr)
auto;
align-items: center;
gap: 16px;
box-sizing: border-box;
}
/* =========================================================
TITLE
========================================================= */
._titleGroup_13nra_97 {
min-width: 0;
display: flex;
align-items: center;
gap: 9px;
}
._titleGroup_13nra_97 h2 {
margin: 0;
color: #10265f;
font-size: 19px;
font-weight: 700;
line-height: 1;
}
._totalCount_13nra_137 {
min-width: 34px;
height: 25px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #dbe8f8;
border-radius: 9999px;
background: #eef5ff;
color: #1b4383;
font-size: 11px;
font-weight: 600;
box-sizing: border-box;
}
/* =========================================================
HEADER CONTROLS
========================================================= */
._headerControls_13nra_191 {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* =========================================================
SEARCH
========================================================= */
._searchBox_13nra_219 {
width: 230px;
height: 34px;
padding: 0 10px;
display: flex;
align-items: center;
gap: 6px;
border: 1px solid #d7e3f1;
border-radius: 6px;
background: #ffffff;
color: #7387a8;
box-sizing: border-box;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background 0.15s ease;
}
._searchBox_13nra_219:hover {
border-color: #b6cae4;
}
._searchBox_13nra_219:focus-within {
border-color: #78aef8;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(8, 119, 249, 0.08);
}
._searchBox_13nra_219 svg {
flex: 0 0 auto;
color: #7890b4;
}
._searchBox_13nra_219 input {
width: 100%;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
outline: 0;
background: transparent;
color: #19366f;
font-family: inherit;
font-size: 11px;
font-weight: 400;
}
._searchBox_13nra_219 input::placeholder {
color: #8291aa;
}
/* =========================================================
SOURCE SELECT
========================================================= */
._sourceSelect_13nra_361 {
width: 115px;
height: 34px;
flex: 0 0 115px;
padding: 0 26px 0 10px;
border: 1px solid #d7e3f1;
border-radius: 6px;
outline: none;
background-color: #ffffff;
color: #19366f;
font-family: inherit;
font-size: 10px;
font-weight: 500;
cursor: pointer;
box-sizing: border-box;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background 0.15s ease;
}
._sourceSelect_13nra_361:hover:not(:disabled) {
border-color: #abc6ea;
background-color: #fbfdff;
}
._sourceSelect_13nra_361:focus {
border-color: #0877f9;
box-shadow: 0 0 0 3px rgba(8, 119, 249, 0.08);
}
._sourceSelect_13nra_361:disabled {
background: #f5f7fa;
color: #8c9bb4;
cursor: not-allowed;
opacity: 0.7;
}
/* =========================================================
REFRESH BUTTON
========================================================= */
._refreshButton_13nra_475 {
width: 34px;
height: 34px;
flex: 0 0 34px;
padding: 0;
border: 1px solid #d7e3f1;
border-radius: 6px;
outline: none;
background: #ffffff;
color: #506b99;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-sizing: border-box;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}
._refreshButton_13nra_475:hover:not(:disabled) {
border-color: #0877f9;
background: #eef6ff;
color: #0877f9;
}
._refreshButton_13nra_475:active:not(:disabled) {
transform: scale(0.96);
}
._refreshButton_13nra_475:focus-visible {
border-color: #0877f9;
box-shadow: 0 0 0 3px rgba(8, 119, 249, 0.1);
}
._refreshButton_13nra_475:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================
STATUS FILTERS
========================================================= */
._filters_13nra_597 {
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
._filterButton_13nra_617 {
min-width: max-content;
height: 28px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 9999px;
background: #f1f6fc;
color: #3d5885;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
font-family: inherit;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
transition:
background 0.15s ease,
color 0.15s ease,
border-color 0.15s ease;
}
._filterButton_13nra_617 span {
font-size: inherit;
font-weight: inherit;
}
._filterButton_13nra_617:hover {
background: #e7f0fb;
color: #24589b;
}
._activeFilter_13nra_709 {
border-color: #d9eaff;
background: #e8f2ff;
color: #0877f9;
}
/* =========================================================
TABLE WRAPPER (legacy custom table — kept, now unused
by the JSX, but left in place per "don't change anything
else")
========================================================= */
._tableWrapper_13nra_737 {
width: 100%;
min-width: 0;
overflow-x: auto;
border: 1px solid #e1e9f3;
border-radius: 8px;
background: #ffffff;
box-sizing: border-box;
}
/* =========================================================
TABLE (legacy)
========================================================= */
._leadsTable_13nra_773 {
width: 100%;
min-width: 920px;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
/* =========================================================
TABLE HEADER (legacy)
========================================================= */
._leadsTable_13nra_773 thead {
background: #f5f8fc;
}
._leadsTable_13nra_773 th {
height: 42px;
padding: 0 12px;
border-bottom: 1px solid #e1e9f3;
background: #f5f8fc;
color: #52688f;
text-align: left;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
box-sizing: border-box;
}
._leadsTable_13nra_773 th:nth-child(1) {
width: 19%;
}
._leadsTable_13nra_773 th:nth-child(2) {
width: 40%;
}
._leadsTable_13nra_773 th:nth-child(3) {
width: 15%;
}
._leadsTable_13nra_773 th:nth-child(4) {
width: 15%;
}
._leadsTable_13nra_773 th:nth-child(5) {
width: 11%;
}
/* =========================================================
TABLE ROW (legacy)
========================================================= */
._leadRow_13nra_899 {
height: 48px;
border-bottom: 1px solid #e5ecf4;
background: #ffffff;
cursor: pointer;
transition: background 0.15s ease;
}
._leadRow_13nra_899:last-child {
border-bottom: 0;
}
._leadRow_13nra_899:hover {
background: #f8fbff;
}
._leadsTable_13nra_773 td {
padding: 8px 12px;
color: #233d73;
font-size: 10px;
vertical-align: middle;
box-sizing: border-box;
}
/* =========================================================
NAME (used by ReusableTable's Name column Cell too)
========================================================= */
._nameCell_13nra_971 {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
}
._avatar_13nra_989 {
width: 36px;
height: 36px;
flex: 0 0 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #dbe8f8;
border-radius: 50%;
background: #eaf2ff;
color: #19366f;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
._nameCell_13nra_971 strong {
min-width: 0;
overflow: hidden;
color: #12275d;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
/* =========================================================
INQUIRY (used by ReusableTable's Inquiry column Cell too)
========================================================= */
._inquiry_13nra_1071 {
width: 100%;
max-width: 100%;
overflow: hidden;
color: #687da2;
font-size: 10px;
white-space: nowrap;
text-overflow: ellipsis;
}
/* =========================================================
SOURCE BADGE
========================================================= */
._sourceBadge_13nra_1107 {
width: fit-content;
min-height: 22px;
padding: 0 7px;
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid transparent;
border-radius: 6px;
box-sizing: border-box;
font-family: inherit;
font-size: 8px !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap;
}
._sourceBadge_13nra_1107 * {
font-family: inherit;
font-size: 8px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
._sourceIcon_13nra_1169 {
width: 15px;
height: 15px;
flex: 0 0 15px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px !important;
line-height: 1 !important;
}
/* =========================================================
WHATSAPP
========================================================= */
._source-whatsapp_13nra_1205 {
background: #eaf8f2;
color: #188a63;
border-color: #d7f1e5;
}
._source-whatsapp_13nra_1205 ._sourceIcon_13nra_1169 {
border-radius: 50%;
background: #12b86a;
color: #ffffff;
}
/* =========================================================
FACEBOOK
========================================================= */
._source-facebook_13nra_1245 {
background: #eef4ff;
color: #1753a4;
border-color: #dce8ff;
}
._source-facebook_13nra_1245 ._sourceIcon_13nra_1169 {
border-radius: 50%;
background: #1877f2;
color: #ffffff;
}
/* =========================================================
INSTAGRAM
========================================================= */
._source-instagram_13nra_1285 {
background: #f6f1fb;
color: #7036a8;
border-color: #e9dcf5;
}
._source-instagram_13nra_1285 ._sourceIcon_13nra_1169 {
border-radius: 6px;
background: linear-gradient(135deg, #7b3fe4, #e1306c, #f77737);
color: #ffffff;
}
/* =========================================================
WEBSITE
========================================================= */
._source-website_13nra_1325 {
background: #eef4ff;
color: #294a83;
border-color: #dce8f8;
}
._source-website_13nra_1325 ._sourceIcon_13nra_1169 {
color: #0877f9;
}
/* =========================================================
REFERRAL
========================================================= */
._source-referral_13nra_1357 {
background: #f1f7ff;
color: #294a83;
border-color: #dce8f8;
}
._source-referral_13nra_1357 ._sourceIcon_13nra_1169 {
color: #0877f9;
}
/* =========================================================
LINKEDIN
========================================================= */
._source-linkedin_13nra_1389 {
background: #edf6fb;
color: #176087;
border-color: #d9edf6;
}
._source-linkedin_13nra_1389 ._sourceIcon_13nra_1169 {
border-radius: 4px;
background: #0a76a8;
color: #ffffff;
}
/* =========================================================
GOOGLE FORM
========================================================= */
._source-googleform_13nra_1429 {
background: #eef5ff;
color: #1769e0;
border: 1px solid #dbe9ff;
}
._source-googleform_13nra_1429 ._sourceIcon_13nra_1169 {
color: #1769e0;
}
/* =========================================================
FORM
========================================================= */
._source-form_13nra_1461 {
background: #eef5ff;
color: #1769e0;
border: 1px solid #dbe9ff;
}
._source-form_13nra_1461 ._sourceIcon_13nra_1169 {
color: #1769e0;
}
/* =========================================================
DATE / TIME
========================================================= */
._dateTime_13nra_1493 {
display: inline-block;
color: #65799d;
font-size: 10px;
font-weight: 400;
white-space: nowrap;
}
/* =========================================================
STATUS BADGE
========================================================= */
._statusBadge_13nra_1523 {
min-height: 22px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 6px;
background: #edf2f8;
color: #466187;
font-size: 8px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
box-sizing: border-box;
}
._emailCell_13nra_1573 {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
._emailText_13nra_1589 {
display: block;
overflow: hidden;
color: #65799d;
font-size: 10px;
font-weight: 400;
line-height: 1.4;
white-space: nowrap;
text-overflow: ellipsis;
}
._phoneText_13nra_1621 {
display: block;
overflow: hidden;
color: #65799d;
font-size: 10px;
font-weight: 400;
line-height: 1.4;
white-space: nowrap;
text-overflow: ellipsis;
}
._statusNew_13nra_1651 {
background: #e9f3ff;
color: #0877f9;
border-color: #d8eaff;
}
._statusFollowUp_13nra_1667 {
background: #fff3d6;
color: #d98a00;
border-color: #f9e8bc;
}
._statusQualified_13nra_1683 {
background: #dcf8e7;
color: #0a9c56;
border-color: #c9efd9;
}
._statusNurture_13nra_1699 {
background: #edf1f7;
color: #687a9b;
border-color: #e0e6ef;
}
._statusContacted_13nra_1715 {
background: #eef2f7;
color: #536b94;
border-color: #dfe6ef;
}
/* =========================================================
EMPTY / LOADING (legacy)
========================================================= */
._emptyState_13nra_1739 {
height: 140px !important;
padding: 25px !important;
text-align: center !important;
color: #7d8da8 !important;
font-size: 11px !important;
}
/* =========================================================
ERROR STATE (legacy inline table error — kept)
========================================================= */
._errorState_13nra_1771 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
}
._errorState_13nra_1771 span {
color: #7184a4;
font-size: 11px;
}
._errorState_13nra_1771 button {
min-width: 70px;
height: 32px;
padding: 0 12px;
border: 1px solid #0877f9;
border-radius: 6px;
background: #ffffff;
color: #0877f9;
font-family: inherit;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
._errorState_13nra_1771 button:hover {
background: #0877f9;
color: #ffffff;
}
/* =========================================================
PAGINATION (legacy — ReusableTable now renders its own)
========================================================= */
._pagination_13nra_1873 {
width: 100%;
min-height: 52px;
padding: 9px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid #e1e9f3;
border-top: 0;
border-radius: 0 0 8px 8px;
background: #ffffff;
box-sizing: border-box;
}
._paginationInfo_13nra_1917 {
color: #536b94;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
}
._paginationActions_13nra_1935 {
display: flex;
align-items: center;
gap: 7px;
}
._paginationActions_13nra_1935 button {
min-width: 74px;
height: 32px;
padding: 0 12px;
border: 1px solid #d7e3f1;
border-radius: 6px;
outline: none;
background: #ffffff;
color: #294a83;
font-family: inherit;
font-size: 10px;
font-weight: 600;
cursor: pointer;
box-sizing: border-box;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease;
}
._paginationActions_13nra_1935 button:hover:not(:disabled) {
border-color: #0877f9;
background: #eef6ff;
color: #0877f9;
}
._paginationActions_13nra_1935 button:focus-visible {
border-color: #0877f9;
box-shadow: 0 0 0 3px rgba(8, 119, 249, 0.08);
}
._paginationActions_13nra_1935 button:disabled {
border-color: #e5eaf1;
background: #f7f9fc;
color: #a4afc0;
cursor: not-allowed;
opacity: 1;
}
/* =========================================================
SCROLLBAR
========================================================= */
._tableWrapper_13nra_737::-webkit-scrollbar,
._filters_13nra_597::-webkit-scrollbar {
height: 5px;
}
._tableWrapper_13nra_737::-webkit-scrollbar-track,
._filters_13nra_597::-webkit-scrollbar-track {
background: transparent;
}
._tableWrapper_13nra_737::-webkit-scrollbar-thumb,
._filters_13nra_597::-webkit-scrollbar-thumb {
border-radius: 9999px;
background: #cbd8e8;
}
._tableWrapper_13nra_737::-webkit-scrollbar-thumb:hover,
._filters_13nra_597::-webkit-scrollbar-thumb:hover {
background: #b5c6dc;
}
/* =========================================================
RESPONSIVE - 1200
========================================================= */
@media (max-width: 1200px) {
._leadsHeader_13nra_47 {
grid-template-columns:
auto
1fr;
align-items: center;
}
._headerControls_13nra_191 {
justify-content: flex-end;
}
._filters_13nra_597 {
grid-column: 1 / -1;
justify-content: flex-end;
}
}
/* =========================================================
RESPONSIVE - 900
========================================================= */
@media (max-width: 900px) {
._leadsHeader_13nra_47 {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
._titleGroup_13nra_97 {
width: 100%;
}
._headerControls_13nra_191 {
width: 100%;
justify-content: flex-start;
}
._searchBox_13nra_219 {
flex: 1;
width: auto;
min-width: 180px;
}
._filters_13nra_597 {
width: 100%;
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 3px;
}
}
/* =========================================================
RESPONSIVE - 700
========================================================= */
@media (max-width: 700px) {
._leadsPage_13nra_9 {
padding: 9px;
}
._leadsHeader_13nra_47 {
padding: 0 0 10px;
}
._titleGroup_13nra_97 h2 {
font-size: 20px;
}
._totalCount_13nra_137 {
min-width: 34px;
height: 27px;
padding: 0 8px;
font-size: 11px;
}
._headerControls_13nra_191 {
flex-wrap: wrap;
}
._searchBox_13nra_219 {
width: 100%;
flex: 0 0 100%;
}
._sourceSelect_13nra_361 {
flex: 1;
width: auto;
}
._filters_13nra_597 {
flex-wrap: nowrap;
}
._filterButton_13nra_617 {
flex: 0 0 auto;
}
._pagination_13nra_1873 {
flex-direction: column;
align-items: stretch;
}
._paginationInfo_13nra_1917 {
text-align: center;
}
._paginationActions_13nra_1935 {
width: 100%;
}
._paginationActions_13nra_1935 button {
flex: 1;
}
}
/* =========================================================
RESPONSIVE - 450
========================================================= */
@media (max-width: 450px) {
._leadsPage_13nra_9 {
padding: 7px;
}
._sourceSelect_13nra_361 {
width: calc(100% - 48px);
flex: 1;
}
._refreshButton_13nra_475 {
width: 40px;
flex: 0 0 40px;
}
._filterButton_13nra_617 {
height: 32px;
padding: 0 10px;
font-size: 9px;
}
._pagination_13nra_1873 {
padding: 8px;
}
}
/* =========================================================
VIEW MODAL OVERLAY
========================================================= */
._viewModalOverlay_13nra_2457 {
position: fixed;
inset: 0;
z-index: 1500;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.38);
backdrop-filter: blur(2px);
box-sizing: border-box;
}
/* =========================================================
VIEW MODAL
========================================================= */
._viewModal_13nra_2457 {
width: min(720px, 100%);
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
border: 1px solid #dce7f5;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
overflow: hidden;
}
/* =========================================================
MODAL HEADER
========================================================= */
._viewModalHeader_13nra_2545 {
min-height: 68px;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid #e8eef6;
box-sizing: border-box;
}
._viewModalTitle_13nra_2577 {
min-width: 0;
display: flex;
align-items: center;
gap: 11px;
}
._viewClientAvatar_13nra_2595 {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dbe8f8;
border-radius: 50%;
background: #eaf2ff;
color: #19366f;
font-size: 12px;
font-weight: 700;
}
._viewModalTitle_13nra_2577 h3 {
margin: 0 0 3px;
overflow: hidden;
color: #10265f;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
}
._viewModalTitle_13nra_2577 p {
margin: 0;
color: #8090aa;
font-size: 10px;
}
/* =========================================================
MODAL CLOSE
========================================================= */
._viewModalClose_13nra_2689 {
width: 34px;
height: 34px;
flex: 0 0 34px;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: #607594;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
._viewModalClose_13nra_2689:hover:not(:disabled) {
background: #f0f5fb;
color: #0877f9;
}
._viewModalClose_13nra_2689:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================
MODAL BODY
========================================================= */
._viewModalBody_13nra_2777 {
min-height: 220px;
max-height: calc(100vh - 180px);
padding: 16px;
overflow-y: auto;
box-sizing: border-box;
}
/* =========================================================
CLIENT INFO GRID
========================================================= */
._viewInfoGrid_13nra_2807 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
._viewInfoCard_13nra_2823 {
min-width: 0;
min-height: 64px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #e0e9f5;
border-radius: 8px;
background: #fbfdff;
box-sizing: border-box;
}
._viewInfoWide_13nra_2861 {
grid-column: 1 / -1;
}
._viewInfoIcon_13nra_2869 {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: #eaf3ff;
color: #0877f9;
font-size: 14px;
}
._viewInfoContent_13nra_2907 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
._viewInfoContent_13nra_2907 span {
color: #8392aa;
font-size: 9px;
font-weight: 500;
}
._viewInfoContent_13nra_2907 strong {
min-width: 0;
overflow: hidden;
color: #17356d;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
/* =========================================================
ADDITIONAL INFORMATION
========================================================= */
._viewSection_13nra_2975 {
margin-top: 14px;
padding-top: 13px;
border-top: 1px solid #edf1f7;
}
._viewSection_13nra_2975 h4 {
margin: 0 0 10px;
color: #10265f;
font-size: 12px;
font-weight: 700;
}
._viewDetailRows_13nra_3009 {
border: 1px solid #e1e9f3;
border-radius: 8px;
overflow: hidden;
}
._viewDetailRow_13nra_3009 {
min-height: 40px;
padding: 8px 11px;
display: grid;
grid-template-columns:
120px
minmax(0, 1fr);
align-items: center;
gap: 10px;
border-bottom: 1px solid #edf2f7;
box-sizing: border-box;
}
._viewDetailRow_13nra_3009:last-child {
border-bottom: 0;
}
._viewDetailRow_13nra_3009 span {
color: #7b8da8;
font-size: 10px;
}
._viewDetailRow_13nra_3009 strong {
color: #29456f;
font-size: 10px;
font-weight: 500;
line-height: 1.45;
word-break: break-word;
}
/* =========================================================
MODAL LOADING
========================================================= */
._viewLoading_13nra_3113 {
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
color: #7487a5;
font-size: 11px;
}
._viewLoading_13nra_3113 svg {
font-size: 20px;
color: #0877f9;
animation: _clientViewSpin_13nra_1 0.8s linear infinite;
}
@keyframes _clientViewSpin_13nra_1 {
to {
transform: rotate(360deg);
}
}
/* =========================================================
MODAL ERROR
========================================================= */
._viewError_13nra_3179 {
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: #7487a5;
font-size: 11px;
text-align: center;
}
._viewError_13nra_3179 button {
min-height: 32px;
padding: 0 14px;
border: 1px solid #0877f9;
border-radius: 6px;
background: #ffffff;
color: #0877f9;
font-family: inherit;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
._viewError_13nra_3179 button:hover {
background: #0877f9;
color: #ffffff;
}
/* =========================================================
MODAL FOOTER
========================================================= */
._viewModalFooter_13nra_3279 {
min-height: 56px;
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid #e8eef6;
background: #fbfdff;
box-sizing: border-box;
}
._viewCloseButton_13nra_3311 {
min-width: 85px;
height: 34px;
padding: 0 15px;
border: 1px solid #d4e0ef;
border-radius: 7px;
background: #ffffff;
color: #344f79;
font-family: inherit;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
._viewCloseButton_13nra_3311:hover:not(:disabled) {
border-color: #0877f9;
background: #eef6ff;
color: #0877f9;
}
._viewCloseButton_13nra_3311:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================
MODAL SCROLLBAR
========================================================= */
._viewModalBody_13nra_2777::-webkit-scrollbar {
width: 5px;
}
._viewModalBody_13nra_2777::-webkit-scrollbar-track {
background: transparent;
}
._viewModalBody_13nra_2777::-webkit-scrollbar-thumb {
border-radius: 9999px;
background: #cbd8e8;
}
/* =========================================================
MOBILE MODAL
========================================================= */
@media (max-width: 650px) {
._viewModalOverlay_13nra_2457 {
padding: 10px;
}
._viewModal_13nra_2457 {
max-height: calc(100vh - 20px);
}
._viewInfoGrid_13nra_2807 {
grid-template-columns: 1fr;
}
._viewInfoWide_13nra_2861 {
grid-column: auto;
}
._viewDetailRow_13nra_3009 {
grid-template-columns: 1fr;
gap: 3px;
}
}
/* =========================================================
VERY SMALL DEVICES
========================================================= */
@media (max-width: 400px) {
._leadsPage_13nra_9 {
padding: 6px;
}
._titleGroup_13nra_97 h2 {
font-size: 19px;
}
._headerControls_13nra_191 {
gap: 6px;
}
._sourceSelect_13nra_361 {
min-width: 0;
}
._viewModalHeader_13nra_2545 {
padding: 11px 12px;
}
._viewModalBody_13nra_2777 {
padding: 12px;
}
._viewModalFooter_13nra_3279 {
padding: 9px 12px;
}
}
/* =========================================================
NEW: TABLE CARD WRAPPER + ERROR BANNER
(added for the ReusableTable swap — mirrors Tender.module.css)
========================================================= */
._tableCard_13nra_3559 {
width: 100%;
min-width: 0;
}
._errorBanner_13nra_3569 {
width: 100%;
min-height: 44px;
margin-bottom: 10px;
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid #ffd0d4;
border-radius: 8px;
background: #fff5f5;
color: #b42323;
font-size: 11px;
box-sizing: border-box;
}
._errorBanner_13nra_3569 button {
min-width: 70px;
height: 30px;
padding: 0 12px;
border: 1px solid #0877f9;
border-radius: 6px;
background: #ffffff;
color: #0877f9;
font-family: inherit;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
._errorBanner_13nra_3569 button:hover {
background: #0877f9;
color: #ffffff;
}
/* ================================================================
OVERLAY
================================================================ */
._overlay_1ulx4_13 {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
background: rgba(15, 30, 58, 0.42);
backdrop-filter: blur(2px);
}
/* ================================================================
MODAL
================================================================ */
._modal_1ulx4_69 {
width: 100%;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #dfe7f2;
border-radius: 12px;
background: #ffffff;
box-shadow:
0 20px 55px rgba(15, 23, 42, 0.18),
0 4px 12px rgba(15, 23, 42, 0.08);
box-sizing: border-box;
}
._analyseModal_1ulx4_117 {
max-width: 620px;
}
._recommendModal_1ulx4_125 {
max-width: 760px;
}
/* ================================================================
COMMON HEADER
================================================================ */
._modalHeader_1ulx4_145 {
position: relative;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 16px 18px 13px;
border-bottom: 1px solid #e5ebf3;
box-sizing: border-box;
}
._headerContent_1ulx4_177 {
min-width: 0;
flex: 1;
}
._headerContent_1ulx4_177 h2 {
margin: 0;
color: #15244b;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
}
._headerContent_1ulx4_177 p {
margin: 4px 0 0;
color: #72809d;
font-size: 11px;
font-weight: 400;
line-height: 1.45;
}
/* ================================================================
CLOSE
================================================================ */
._closeButton_1ulx4_249 {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 30px;
padding: 0;
border: none;
background: transparent;
color: #64748b;
cursor: pointer;
font-size: 18px;
}
._closeButton_1ulx4_249:hover {
color: #1e3a8a;
}
/* ================================================================
ATTACHED SECTION
================================================================ */
._attachedSection_1ulx4_321 {
margin: 12px 18px 0;
padding: 10px;
border: 1px solid #dce6f4;
border-radius: 9px;
background: #f6f9ff;
box-sizing: border-box;
}
/* ================================================================
ATTACHED TOP
================================================================ */
._attachedTop_1ulx4_361 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 9px;
}
._attachedTitle_1ulx4_385 {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
._attachedTitle_1ulx4_385 strong {
color: #172650;
font-size: 11px;
font-weight: 700;
}
._paperclipCircle_1ulx4_421 {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
border-radius: 50%;
background: #e5efff;
color: #0866ff;
}
._paperclipCircle_1ulx4_421 svg {
width: 14px;
height: 14px;
}
/* ================================================================
ADD MORE
================================================================ */
._addMoreButton_1ulx4_485 {
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 10px;
border: 1px solid #d9e4f3;
border-radius: 7px;
background: #ffffff;
color: #0866ff;
font-size: 10px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
}
._addMoreButton_1ulx4_485:hover {
border-color: #9fc2ff;
background: #f1f6ff;
}
._addMoreButton_1ulx4_485 svg {
width: 12px;
height: 12px;
}
._addMoreButton_1ulx4_485 input {
display: none;
}
/* ================================================================
ATTACHED FILES
================================================================ */
._attachedFiles_1ulx4_593 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}
._attachedFile_1ulx4_593 {
min-width: 0;
min-height: 46px;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 7px;
border: 1px solid #dce5f1;
border-radius: 7px;
background: #ffffff;
box-sizing: border-box;
}
._fileTypeIcon_1ulx4_653 {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 30px;
border-radius: 6px;
font-size: 15px;
}
._fileTypeIcon_1ulx4_653 svg {
width: 15px;
height: 15px;
}
._attachedFileName_1ulx4_701 {
min-width: 0;
flex: 1;
overflow: hidden;
color: #26365d;
font-size: 9px;
font-weight: 600;
line-height: 1.35;
text-overflow: ellipsis;
}
._removeFileButton_1ulx4_737 {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 20px;
padding: 0;
border: none;
background: transparent;
color: #94a3b8;
cursor: pointer;
}
._removeFileButton_1ulx4_737:hover {
color: #2563eb;
}
._removeFileButton_1ulx4_737 svg {
width: 12px;
height: 12px;
}
/* ================================================================
FILE COLORS
================================================================ */
._file_pdf_1ulx4_817 {
background: #ffe9eb;
color: #ef4444;
}
._file_doc_1ulx4_829 {
background: #e8f0ff;
color: #2563eb;
}
._file_presentation_1ulx4_841 {
background: #fff0e4;
color: #f97316;
}
._file_sheet_1ulx4_853 {
background: #e5f8ef;
color: #00a878;
}
._file_file_1ulx4_865 {
background: #edf3ff;
color: #2563eb;
}
/* ================================================================
INFO ROW
================================================================ */
._infoRow_1ulx4_889 {
display: flex;
align-items: center;
gap: 7px;
padding: 10px 18px;
border-bottom: 1px solid #e5ebf3;
color: #657594;
font-size: 10px;
line-height: 1.4;
}
._infoIcon_1ulx4_925 {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 16px;
border-radius: 50%;
background: #edf3fb;
color: #71809b;
}
._infoIcon_1ulx4_925 svg {
width: 11px;
height: 11px;
}
/* ================================================================
ANALYSIS LIST
================================================================ */
._analysisList_1ulx4_989 {
overflow-y: auto;
max-height: 305px;
}
._analysisItem_1ulx4_1001 {
min-height: 78px;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 38px 22px;
align-items: center;
gap: 9px;
padding: 10px 18px;
border-bottom: 1px solid #e6ebf2;
box-sizing: border-box;
}
._analysisItem_1ulx4_1001:last-child {
border-bottom: none;
}
/* ================================================================
ANALYSIS ICON
================================================================ */
._analysisIcon_1ulx4_1057 {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
font-size: 17px;
}
._analysisIcon_1ulx4_1057 svg {
width: 17px;
height: 17px;
}
/* ================================================================
ANALYSIS CONTENT
================================================================ */
._analysisContent_1ulx4_1113 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._analysisContent_1ulx4_1113 strong {
min-width: 0;
overflow: hidden;
color: #172650;
font-size: 11px;
font-weight: 600;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
._analysisContent_1ulx4_1113 > span {
min-width: 0;
overflow: hidden;
color: #72809d;
font-size: 10px;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================================================================
PROGRESS
================================================================ */
._progressTrack_1ulx4_1213 {
width: 100%;
height: 6px;
margin-top: 3px;
overflow: hidden;
border-radius: 999px;
background: #e2e9f3;
}
._progressBar_1ulx4_1241 {
height: 100%;
border-radius: inherit;
background: #3b82f6;
transition: width 450ms ease;
}
/* ================================================================
PROGRESS VALUE
================================================================ */
._progressValue_1ulx4_1273 {
display: flex;
align-items: center;
justify-content: flex-end;
}
._progressValue_1ulx4_1273 strong {
color: #26365d;
font-size: 10px;
font-weight: 700;
}
/* ================================================================
LOADING CIRCLE
================================================================ */
._loadingCircle_1ulx4_1317 {
width: 19px;
height: 19px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #dce7f5;
border-top-color: #0866ff;
border-radius: 50%;
animation: _spin_1ulx4_1 0.9s linear infinite;
box-sizing: border-box;
}
._loadingComplete_1ulx4_1361 {
border: 1px solid #35a36e;
background: #e7f8ef;
color: #00a878;
animation: none;
}
._loadingComplete_1ulx4_1361 svg {
width: 11px;
height: 11px;
}
@keyframes _spin_1ulx4_1 {
to {
transform: rotate(360deg);
}
}
/* ================================================================
MODAL FOOTER
================================================================ */
._modalFooter_1ulx4_1417 {
min-height: 60px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 10px 18px;
border-top: 1px solid #e5ebf3;
box-sizing: border-box;
}
/* ================================================================
CANCEL
================================================================ */
._cancelButton_1ulx4_1465,
._backButton_1ulx4_1467 {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 13px;
border: 1px solid #dce4ef;
border-radius: 7px;
background: #ffffff;
color: #27375d;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._cancelButton_1ulx4_1465:hover,
._backButton_1ulx4_1467:hover {
background: #f7f9fc;
border-color: #c9d4e4;
}
/* ================================================================
CONTINUE
================================================================ */
._continueButton_1ulx4_1545 {
min-width: 105px;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 14px;
border: 1px solid #0866ff;
border-radius: 7px;
background: #0866ff;
color: #ffffff;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._continueButton_1ulx4_1545:hover:not(:disabled) {
background: #0059e8;
border-color: #0059e8;
}
._continueButton_1ulx4_1545:disabled {
opacity: 0.45;
cursor: not-allowed;
}
._buttonSpinner_1ulx4_1629 {
width: 12px;
height: 12px;
border: 1.5px solid rgba(255, 255, 255, 0.45);
border-top-color: #ffffff;
border-radius: 50%;
animation: _spin_1ulx4_1 0.8s linear infinite;
}
/* ================================================================
RECOMMEND HEADER
================================================================ */
._recommendHeader_1ulx4_1669 {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 16px 18px 13px;
border-bottom: 1px solid #e5ebf3;
box-sizing: border-box;
}
._folderHeaderIcon_1ulx4_1697 {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
border-radius: 50%;
background: #eaf3ff;
color: #0866ff;
}
._folderHeaderIcon_1ulx4_1697 svg {
width: 20px;
height: 20px;
}
/* ================================================================
RECOMMENDATION LIST
================================================================ */
._recommendationList_1ulx4_1761 {
display: flex;
flex-direction: column;
gap: 7px;
padding: 10px 18px;
overflow-y: auto;
max-height: 360px;
}
._recommendationItem_1ulx4_1789 {
min-width: 0;
display: grid;
grid-template-columns: 38px 150px minmax(0, 1fr) 85px;
align-items: center;
gap: 9px;
min-height: 148px;
padding: 8px 10px;
border: 1px solid #e1e8f1;
border-radius: 8px;
background: #ffffff;
box-sizing: border-box;
}
/* ================================================================
RECOMMEND FILE ICON
================================================================ */
._recommendationFileIcon_1ulx4_1849 {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
font-size: 17px;
}
._recommendationFileIcon_1ulx4_1849 svg {
width: 17px;
height: 17px;
}
/* ================================================================
RECOMMEND FILE NAME
================================================================ */
._recommendationFile_1ulx4_1849 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._recommendationFile_1ulx4_1849 strong {
min-width: 0;
overflow: hidden;
color: #172650;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
._recommendationFile_1ulx4_1849 span {
color: #7785a0;
font-size: 9px;
}
/* ================================================================
PATH SECTION
================================================================ */
._pathSection_1ulx4_1985 {
min-width: 0;
min-height: 130px;
display: flex;
flex-direction: column;
gap: 3px;
}
._pathLabel_1ulx4_2009 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
color: #657492;
font-size: 9px;
}
._confidenceBadge_1ulx4_2037 {
padding: 3px 6px;
border-radius: 5px;
background: #e2f7ee;
color: #00a878;
font-size: 8px;
font-weight: 700;
white-space: nowrap;
}
._pathInput_1ulx4_2069 {
min-width: 0;
height: 31px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 8px;
border: 1px solid #dfe7f1;
border-radius: 6px;
background: #ffffff;
box-sizing: border-box;
}
._pathInput_1ulx4_2069 svg {
width: 13px;
height: 13px;
flex: 0 0 auto;
color: #0866ff;
}
._pathInput_1ulx4_2069 span {
min-width: 0;
overflow: hidden;
color: #415172;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
._pathReason_1ulx4_2161 {
display: flex;
align-items: center;
gap: 4px;
color: #61718f;
font-size: 8px;
}
._pathReason_1ulx4_2161 span {
font-size: 10px;
}
._pathReason_1ulx4_2161 svg {
width: 10px;
height: 10px;
color: #0866ff;
}
/* ================================================================
APPROVE
================================================================ */
._approveButton_1ulx4_2215 {
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0 8px;
border: 1px solid #b9d3fa;
border-radius: 7px;
background: #ffffff;
color: #0866ff;
font-size: 9px;
font-weight: 600;
cursor: pointer;
}
._approveButton_1ulx4_2215:hover {
background: #f1f6ff;
border-color: #0866ff;
}
._approveButton_1ulx4_2215 svg {
width: 13px;
height: 13px;
}
._approveButton_1ulx4_2215._approved_1ulx4_2285 {
border-color: #9ed9bf;
background: #ecfaf3;
color: #008f68;
}
/* ================================================================
FOLDER NOTICE
================================================================ */
._folderNotice_1ulx4_2309 {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 18px 10px;
padding: 9px 10px;
border-radius: 8px;
background: #edf5ff;
color: #536886;
box-sizing: border-box;
}
._noticeIcon_1ulx4_2347 {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
color: #0866ff;
}
._noticeIcon_1ulx4_2347 svg {
width: 15px;
height: 15px;
}
._folderNotice_1ulx4_2309 > div {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._folderNotice_1ulx4_2309 strong {
color: #24375f;
font-size: 10px;
font-weight: 700;
}
._folderNotice_1ulx4_2309 span:not(._noticeIcon_1ulx4_2347) {
color: #667895;
font-size: 9px;
line-height: 1.4;
}
/* ================================================================
RECOMMEND FOOTER
================================================================ */
._recommendFooter_1ulx4_2439 {
justify-content: space-between;
}
._footerRight_1ulx4_2447 {
display: flex;
align-items: center;
gap: 7px;
}
/* ================================================================
APPROVE ALL
================================================================ */
._approveAllButton_1ulx4_2469 {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 12px;
border: 1px solid #b9d3fa;
border-radius: 7px;
background: #ffffff;
color: #0866ff;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._approveAllButton_1ulx4_2469:hover {
background: #f1f6ff;
border-color: #0866ff;
}
._approveAllButton_1ulx4_2469 svg {
width: 13px;
height: 13px;
}
/* ================================================================
SAVE
================================================================ */
._saveButton_1ulx4_2547 {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 13px;
border: 1px solid #0866ff;
border-radius: 7px;
background: #0866ff;
color: #ffffff;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._saveButton_1ulx4_2547:hover {
background: #0059e8;
border-color: #0059e8;
}
._saveButton_1ulx4_2547 svg {
width: 14px;
height: 14px;
}
/* ================================================================
FOLDER SEARCH INPUT
================================================================ */
._folderSearchWrapper_1ulx4_2629 {
position: relative;
min-width: 0;
height: 31px;
display: flex;
align-items: center;
margin-top: 3px;
border: 1px solid #dfe7f1;
border-radius: 6px;
background: #ffffff;
box-sizing: border-box;
}
._folderSearchWrapper_1ulx4_2629:focus-within {
border-color: #9fc2ff;
}
._folderSearchIcon_1ulx4_2663 {
width: 13px;
height: 13px;
flex: 0 0 auto;
margin-left: 8px;
color: #0866ff;
}
._folderSearchWrapper_1ulx4_2629 input {
min-width: 0;
flex: 1;
height: 100%;
padding: 0 6px;
border: none;
outline: none;
background: transparent;
color: #415172;
font-size: 9px;
}
._folderSearchWrapper_1ulx4_2629 input::placeholder {
color: #8a97ad;
}
._folderDropdownButton_1ulx4_2711 {
width: 28px;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
padding: 0;
border: none;
background: transparent;
color: #71809b;
cursor: pointer;
}
._folderDropdownButton_1ulx4_2711:hover {
color: #0866ff;
}
._folderDropdownButton_1ulx4_2711 svg {
width: 13px;
height: 13px;
}
._folderDropdown_1ulx4_2711 {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 100;
max-height: 160px;
overflow-y: auto;
padding: 4px;
border: 1px solid #dce5f1;
border-radius: 6px;
background: #ffffff;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
box-sizing: border-box;
}
._folderOption_1ulx4_2787 {
width: 100%;
display: flex;
align-items: center;
gap: 6px;
padding: 7px;
border: none;
border-radius: 5px;
background: transparent;
color: #415172;
font-size: 9px;
text-align: left;
cursor: pointer;
}
._folderOption_1ulx4_2787:hover {
background: #f1f6ff;
color: #0866ff;
}
._folderOption_1ulx4_2787 svg {
width: 12px;
height: 12px;
flex: 0 0 auto;
}
._folderOption_1ulx4_2787 span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._noFolderOption_1ulx4_2849 {
padding: 8px;
color: #8a97ad;
font-size: 9px;
text-align: center;
}
/* ================================================================
SCROLLBAR
================================================================ */
._analysisList_1ulx4_989::-webkit-scrollbar,
._recommendationList_1ulx4_1761::-webkit-scrollbar {
width: 5px;
}
._analysisList_1ulx4_989::-webkit-scrollbar-track,
._recommendationList_1ulx4_1761::-webkit-scrollbar-track {
background: transparent;
}
._analysisList_1ulx4_989::-webkit-scrollbar-thumb,
._recommendationList_1ulx4_1761::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #cbd5e1;
}
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 760px) {
._overlay_1ulx4_13 {
padding: 12px;
}
._recommendationItem_1ulx4_1789 {
grid-template-columns: 38px minmax(0, 1fr) 80px;
}
._recommendationFile_1ulx4_1849 {
display: none;
}
._pathSection_1ulx4_1985 {
grid-column: 2;
}
._approveButton_1ulx4_2215 {
grid-column: 3;
}
}
@media (max-width: 560px) {
._analyseModal_1ulx4_117,
._recommendModal_1ulx4_125 {
max-width: 100%;
}
._modalHeader_1ulx4_145,
._recommendHeader_1ulx4_1669 {
padding-left: 13px;
padding-right: 13px;
}
._attachedSection_1ulx4_321 {
margin-left: 13px;
margin-right: 13px;
}
._attachedFiles_1ulx4_593 {
grid-template-columns: 1fr;
}
._analysisItem_1ulx4_1001 {
grid-template-columns: 34px minmax(0, 1fr) 32px;
padding-left: 13px;
padding-right: 13px;
}
._loadingCircle_1ulx4_1317 {
display: none;
}
._infoRow_1ulx4_889 {
padding-left: 13px;
padding-right: 13px;
}
._modalFooter_1ulx4_1417 {
padding-left: 13px;
padding-right: 13px;
}
._recommendationList_1ulx4_1761 {
padding-left: 13px;
padding-right: 13px;
}
._folderNotice_1ulx4_2309 {
margin-left: 13px;
margin-right: 13px;
}
._recommendFooter_1ulx4_2439 {
align-items: stretch;
flex-direction: column;
}
._footerRight_1ulx4_2447 {
width: 100%;
}
._backButton_1ulx4_1467 {
width: 100%;
}
._approveAllButton_1ulx4_2469,
._saveButton_1ulx4_2547 {
flex: 1;
}
}
/* ================================================================
AI FILE SEARCH AGENT
FIXED DESKTOP PAGE
LEFT + RIGHT INDEPENDENT SCROLL
================================================================ */
._page_9dkm5_13 {
width: 100%;
height: calc(100dvh - 68px);
min-height: 0;
padding: 10px;
box-sizing: border-box;
background: #f8fbff;
color: #10245a;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
/*
* IMPORTANT:
* Entire browser page fixed.
* Only internal lists scroll.
*/
overflow: hidden;
}
/* ================================================================
HEADER
================================================================ */
._header_9dkm5_77 {
display: none;
}
._brand_9dkm5_85 {
display: flex;
align-items: center;
gap: 10px;
}
._brandIcon_9dkm5_97 {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
border: 1px solid #0866ff;
border-radius: 50%;
background: #eef5ff;
color: #0866ff;
font-size: 20px;
}
._brand_9dkm5_85 h1 {
margin: 0;
color: #101b3d;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
._brand_9dkm5_85 p {
margin: 3px 0 0;
color: #7b88a5;
font-size: 11px;
line-height: 1.4;
}
/* ================================================================
WORKSPACE
================================================================ */
._workspace_9dkm5_181 {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns:
minmax(0, 1fr)
315px;
gap: 12px;
align-items: stretch;
overflow: hidden;
box-sizing: border-box;
}
/* ================================================================
LEFT MAIN AREA
================================================================ */
._main_9dkm5_233 {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
box-sizing: border-box;
}
/* ================================================================
SEARCH SECTION
FIXED AREA
================================================================ */
._searchSection_9dkm5_277 {
width: 100%;
min-width: 0;
min-height: 0;
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 9px;
box-sizing: border-box;
}
/* ================================================================
SEARCH BOX
================================================================ */
._searchBox_9dkm5_317 {
width: 100%;
min-width: 0;
min-height: 48px;
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 7px;
padding: 4px 6px;
box-sizing: border-box;
border: 1px solid #dce5f2;
border-radius: 9px;
background: #ffffff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
transition:
border-color 140ms ease,
box-shadow 140ms ease;
}
._searchBox_9dkm5_317:focus-within {
border-color: #b9cff0;
box-shadow:
0 0 0 2px rgba(37, 99, 235, 0.05);
}
._searchIcon_9dkm5_387 {
flex: 0 0 auto;
margin-left: 7px;
color: #71809e;
font-size: 16px;
}
._searchBox_9dkm5_317 input {
flex: 1 1 auto;
min-width: 0;
height: 36px;
padding: 0 3px;
border: none !important;
outline: none !important;
background: transparent !important;
color: #172554;
font: inherit;
font-size: 12px;
font-weight: 500;
box-shadow: none !important;
}
._searchBox_9dkm5_317 input::placeholder {
color: #8b97ae;
opacity: 1;
}
._searchBox_9dkm5_317 input:focus,
._searchBox_9dkm5_317 input:focus-visible,
._searchBox_9dkm5_317 input:active {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* ================================================================
MICROPHONE
================================================================ */
._micButton_9dkm5_489 {
width: 32px;
height: 34px;
flex: 0 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 7px;
background: transparent;
color: #71809e;
cursor: pointer;
font-size: 15px;
transition:
background 140ms ease,
color 140ms ease;
}
._micButton_9dkm5_489:hover {
background: #f0f6ff;
color: #0866ff;
}
/* ================================================================
SEARCH BUTTON
================================================================ */
._searchButton_9dkm5_565 {
min-width: 145px;
height: 38px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 13px;
border: 1px solid #0866ff;
border-radius: 8px;
background: #0866ff;
color: #ffffff;
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
box-shadow:
0 1px 2px rgba(8, 102, 255, 0.12);
transition:
background 140ms ease,
border-color 140ms ease,
transform 140ms ease;
}
._searchButton_9dkm5_565 svg {
width: 14px;
height: 14px;
}
._searchButton_9dkm5_565:hover:not(:disabled) {
background: #0059e8;
border-color: #0059e8;
}
._searchButton_9dkm5_565:active:not(:disabled) {
transform: translateY(1px);
}
._searchButton_9dkm5_565:disabled {
opacity: 0.65;
cursor: not-allowed;
transform: none;
}
/* ================================================================
QUICK SEARCHES
================================================================ */
._quickSearches_9dkm5_689 {
width: 100%;
min-width: 0;
flex: 0 0 auto;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
box-sizing: border-box;
}
/* ================================================================
QUICK CHIP
================================================================ */
._quickChip_9dkm5_729 {
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 11px;
border: 1px solid #dfe7f3;
border-radius: 999px;
background: #ffffff;
color: #34446b;
font: inherit;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition:
background 140ms ease,
border-color 140ms ease,
color 140ms ease;
}
._quickChip_9dkm5_729 svg {
width: 13px;
height: 13px;
flex: 0 0 auto;
color: #6d7c99;
}
._quickChip_9dkm5_729:hover:not(:disabled) {
border-color: #bcd4ff;
background: #f2f7ff;
color: #0866ff;
}
._quickChip_9dkm5_729:hover:not(:disabled) svg {
color: #0866ff;
}
._quickChip_9dkm5_729:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ================================================================
LIMIT CONTROL
================================================================ */
._limitControl_9dkm5_851 {
height: 32px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0 8px;
border: 1px solid #dfe7f3;
border-radius: 999px;
background: #ffffff;
white-space: nowrap;
box-sizing: border-box;
}
._limitLabel_9dkm5_895 {
color: #52617d;
font-size: 11px;
font-weight: 500;
}
._limitControl_9dkm5_851 input {
width: 42px;
height: 25px;
padding: 0 5px;
border: 1px solid #e0e7f1;
border-radius: 7px;
outline: none;
background: #ffffff;
color: #1e2b50;
font: inherit;
font-size: 11px;
font-weight: 600;
text-align: center;
box-sizing: border-box;
}
._limitControl_9dkm5_851 input:focus {
border-color: #a9c8ff;
box-shadow:
0 0 0 2px rgba(37, 99, 235, 0.06);
}
._limitControl_9dkm5_851 input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
._limitControl_9dkm5_851 input::-webkit-outer-spin-button,
._limitControl_9dkm5_851 input::-webkit-inner-spin-button {
margin: 0;
appearance: none;
}
._limitControl_9dkm5_851 input[type="number"] {
appearance: textfield;
}
/* ================================================================
COMMON CARD
================================================================ */
._card_9dkm5_1013 {
width: 100%;
min-width: 0;
min-height: 0;
box-sizing: border-box;
border: 1px solid #dfe7f2;
border-radius: 10px;
background: #ffffff;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.035);
}
/* ================================================================
RESULTS SECTION
Header fixed.
Result list consumes remaining height.
================================================================ */
._resultsSection_9dkm5_1061 {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 0;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
}
/* ================================================================
RESULTS TITLE
================================================================ */
._resultsTop_9dkm5_1101 {
width: 100%;
min-height: 27px;
flex: 0 0 27px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 5px;
box-sizing: border-box;
}
._resultsTitle_9dkm5_1135 {
min-width: 0;
display: flex;
align-items: baseline;
gap: 7px;
}
._resultsTitle_9dkm5_1135 h2 {
margin: 0;
color: #101b3d;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
}
._resultsTitle_9dkm5_1135 span {
color: #8792aa;
font-size: 11px;
font-weight: 400;
}
/* ================================================================
RESULTS LIST
MAIN FIX:
LEFT SIDE ONLY SCROLLS HERE.
================================================================ */
._resultsList_9dkm5_1201 {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 0;
/*
* IMPORTANT:
* old:
* overflow: hidden;
*
* new:
*/
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid #dfe7f2;
border-radius: 10px;
background: #ffffff;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.035);
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: #b8c8df transparent;
}
/* Chrome / Edge / Safari */
._resultsList_9dkm5_1201::-webkit-scrollbar {
width: 6px;
}
._resultsList_9dkm5_1201::-webkit-scrollbar-track {
background: transparent;
}
._resultsList_9dkm5_1201::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #b8c8df;
}
._resultsList_9dkm5_1201::-webkit-scrollbar-thumb:hover {
background: #91a8ca;
}
/* ================================================================
RESULT ITEM
================================================================ */
._resultItem_9dkm5_1317 {
width: 100%;
min-width: 0;
min-height: 76px;
flex: 0 0 auto;
display: grid;
grid-template-columns:
48px
minmax(0, 1fr)
62px
34px;
align-items: center;
gap: 9px;
padding: 9px 10px;
box-sizing: border-box;
border-bottom: 1px solid #e5ebf3;
background: #ffffff;
transition:
background 140ms ease,
border-color 140ms ease;
}
._resultItem_9dkm5_1317:last-child {
border-bottom: none;
}
._resultItem_9dkm5_1317:hover {
background: #f8fbff;
}
/* ================================================================
BEST RESULT
================================================================ */
._bestResult_9dkm5_1407 {
background: #f5f9ff;
}
._bestResult_9dkm5_1407:hover {
background: #f1f7ff;
}
/* ================================================================
FILE ICON
================================================================ */
._fileIcon_9dkm5_1431 {
width: 48px;
height: 48px;
flex: 0 0 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 20px;
box-sizing: border-box;
}
._fileIcon_9dkm5_1431 svg {
width: 19px;
height: 19px;
}
._file_pdf_9dkm5_1475 {
background: #ffe9eb;
color: #ef4444;
}
._file_sheet_9dkm5_1487 {
background: #e4f8ef;
color: #00a878;
}
._file_doc_9dkm5_1499 {
background: #e8f0ff;
color: #0866ff;
}
._file_presentation_9dkm5_1511 {
background: #fff2df;
color: #f59e0b;
}
._file_file_9dkm5_1523 {
background: #edf3ff;
color: #2563eb;
}
/* ================================================================
FILE CONTENT
================================================================ */
._fileContent_9dkm5_1543 {
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
._fileTitleRow_9dkm5_1561 {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
._fileTitleRow_9dkm5_1561 h3 {
min-width: 0;
margin: 0;
overflow: hidden;
color: #182650;
font-size: 12px;
font-weight: 600;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================================================================
BEST MATCH
================================================================ */
._bestMatchBadge_9dkm5_1621 {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 6px;
border-radius: 999px;
background: #eaf3ff;
color: #0866ff;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
}
._bestMatchBadge_9dkm5_1621 svg {
width: 10px;
height: 10px;
}
/* ================================================================
DESCRIPTION
================================================================ */
._fileContent_9dkm5_1543 > p {
min-width: 0;
margin: 4px 0 5px;
overflow: hidden;
color: #75829e;
font-size: 10px;
font-weight: 400;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================================================================
FILE META
================================================================ */
._fileMeta_9dkm5_1723 {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
}
._fileMeta_9dkm5_1723 span {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 4px;
overflow: hidden;
color: #71809b;
font-size: 10px;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
._fileMeta_9dkm5_1723 svg {
width: 12px;
height: 12px;
flex: 0 0 auto;
color: #8290aa;
}
/* ================================================================
RELEVANCE
================================================================ */
._relevance_9dkm5_1809 {
min-width: 62px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 1px;
}
._relevance_9dkm5_1809 strong {
color: #00a878;
font-size: 16px;
font-weight: 700;
line-height: 1.1;
}
._relevance_9dkm5_1809 span {
color: #8792aa;
font-size: 9px;
line-height: 1.2;
}
/* ================================================================
ICON BUTTON
================================================================ */
._iconBtn_9dkm5_1871 {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #e0e7f0;
border-radius: 50%;
background: #ffffff;
color: #687792;
cursor: pointer;
box-sizing: border-box;
transition:
background 140ms ease,
border-color 140ms ease,
color 140ms ease;
}
._iconBtn_9dkm5_1871:hover {
border-color: #b9d1f8;
background: #f1f6ff;
color: #0866ff;
}
._iconBtn_9dkm5_1871 svg {
width: 17px;
height: 17px;
}
/* ================================================================
EMPTY RESULTS
================================================================ */
._emptyResults_9dkm5_1961 {
width: 100%;
height: 100%;
min-height: 105px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 20px;
box-sizing: border-box;
color: #8995ac;
font-size: 11px;
text-align: center;
}
._emptyResults_9dkm5_1961 svg {
width: 26px;
height: 26px;
color: #9aabc5;
}
/* ================================================================
RIGHT SIDE
Whole right column fixed.
================================================================ */
._workspace_9dkm5_181 > aside {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
box-sizing: border-box;
}
/* ================================================================
ATTACHMENTS PANEL
FIXED TOP PANEL
================================================================ */
._attachmentsPanel_9dkm5_2079 {
flex: 0 0 auto;
padding: 10px;
overflow: hidden;
}
/* ================================================================
ADD ATTACHMENTS
================================================================ */
._addAttachmentsButton_9dkm5_2103 {
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 10px;
border: 1px solid #0866ff;
border-radius: 8px;
background: #ffffff;
color: #0866ff;
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
box-sizing: border-box;
transition:
background 140ms ease,
color 140ms ease,
border-color 140ms ease;
}
._addAttachmentsButton_9dkm5_2103:hover {
border-color: #0866ff;
background: #f1f6ff;
color: #0059e8;
}
._addAttachmentsButton_9dkm5_2103 svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
/* ================================================================
ATTACHMENT DESCRIPTION
================================================================ */
._attachmentsDescription_9dkm5_2205 {
margin: 8px 2px 9px;
color: #7d89a2;
font-size: 10px;
line-height: 1.55;
}
/* ================================================================
UPLOADED FILES
================================================================ */
._uploadedFiles_9dkm5_2231 {
max-height: 150px;
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 6px;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
}
._uploadedFiles_9dkm5_2231::-webkit-scrollbar {
width: 5px;
}
._uploadedFiles_9dkm5_2231::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #c2d0e3;
}
._uploadedFile_9dkm5_2231 {
min-width: 0;
min-height: 48px;
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border: 1px solid #dfe7f2;
border-radius: 8px;
background: #f5f8ff;
box-sizing: border-box;
}
._uploadedFileIcon_9dkm5_2325 {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: #ffffff;
color: #0866ff;
}
._uploadedFileIcon_9dkm5_2325 svg {
width: 17px;
height: 17px;
}
._uploadedFileInfo_9dkm5_2367 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._uploadedFileInfo_9dkm5_2367 strong {
min-width: 0;
overflow: hidden;
color: #182650;
font-size: 10px;
font-weight: 600;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
._uploadedFileInfo_9dkm5_2367 span {
color: #73819d;
font-size: 9px;
line-height: 1.2;
}
/* ================================================================
RECENT SEARCH PANEL
Takes remaining right-side height.
================================================================ */
._recentPanel_9dkm5_2441 {
min-width: 0;
min-height: 0;
flex: 1 1 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ================================================================
RECENT HEADER
FIXED
================================================================ */
._recentHeader_9dkm5_2475 {
width: 100%;
min-height: 46px;
flex: 0 0 46px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 11px;
border-bottom: 1px solid #e2e8f1;
background: #ffffff;
box-sizing: border-box;
position: relative;
z-index: 2;
}
._recentHeader_9dkm5_2475 > div {
display: flex;
align-items: center;
gap: 7px;
}
._recentHeader_9dkm5_2475 svg {
width: 15px;
height: 15px;
color: #0866ff;
}
._recentHeader_9dkm5_2475 h2 {
margin: 0;
color: #182650;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
}
/* ================================================================
RECENT LIST
RIGHT SIDE ONLY THIS AREA SCROLLS.
================================================================ */
._recentList_9dkm5_2579 {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #b8c8df transparent;
}
._recentList_9dkm5_2579::-webkit-scrollbar {
width: 6px;
}
._recentList_9dkm5_2579::-webkit-scrollbar-track {
background: transparent;
}
._recentList_9dkm5_2579::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #b8c8df;
}
._recentList_9dkm5_2579::-webkit-scrollbar-thumb:hover {
background: #91a8ca;
}
/* ================================================================
RECENT ITEM
================================================================ */
._recentItem_9dkm5_2663 {
width: 100%;
min-width: 0;
min-height: 56px;
flex: 0 0 auto;
display: grid;
grid-template-columns:
30px
minmax(0, 1fr)
31px;
align-items: center;
gap: 7px;
padding: 7px 9px;
border-bottom: 1px solid #e6ebf2;
box-sizing: border-box;
transition:
background 140ms ease;
}
._recentItem_9dkm5_2663:last-child {
border-bottom: none;
}
._recentItem_9dkm5_2663:hover {
background: #f8fbff;
}
/* ================================================================
RECENT SEARCH ICON
================================================================ */
._recentSearchIcon_9dkm5_2745 {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background: #edf4ff;
color: #0866ff;
cursor: pointer;
box-sizing: border-box;
}
._recentSearchIcon_9dkm5_2745:hover {
background: #e1edff;
}
._recentSearchIcon_9dkm5_2745 svg {
width: 14px;
height: 14px;
}
/* ================================================================
RECENT CONTENT
================================================================ */
._recentContent_9dkm5_2817 {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 0;
border: none;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
overflow: hidden;
}
._recentContent_9dkm5_2817 strong {
width: 100%;
min-width: 0;
overflow: hidden;
color: #1c2a50;
font-size: 10px;
font-weight: 600;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
._recentContent_9dkm5_2817 span {
width: 100%;
min-width: 0;
overflow: hidden;
color: #7b88a2;
font-size: 9px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
._recentContent_9dkm5_2817:hover strong {
color: #0866ff;
}
/* ================================================================
RECENT REFRESH BUTTON
================================================================ */
._recentItem_9dkm5_2663 ._iconBtn_9dkm5_1871 {
width: 30px;
height: 30px;
flex: 0 0 30px;
border-radius: 8px;
}
._recentItem_9dkm5_2663 ._iconBtn_9dkm5_1871 svg {
width: 15px;
height: 15px;
}
/* ================================================================
EMPTY RECENT
================================================================ */
._emptyRecent_9dkm5_2983 {
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-sizing: border-box;
color: #8a96ad;
font-size: 10px;
text-align: center;
}
/* ================================================================
OPTIONAL / OLD CLASSES
================================================================ */
._summaryCard_9dkm5_3025,
._aiAvatar_9dkm5_3027,
._aiAvatarRobot_9dkm5_3029,
._aiAvatarSparkle_9dkm5_3031,
._summaryContent_9dkm5_3033,
._summaryActions_9dkm5_3035 {
display: none;
}
._secondaryButton_9dkm5_3043 {
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 9px;
border: 1px solid #dfe7f2;
border-radius: 7px;
background: #ffffff;
color: #34446b;
font-size: 10px;
cursor: pointer;
}
._secondaryButton_9dkm5_3043:hover {
border-color: #bcd4ff;
background: #f2f7ff;
color: #0866ff;
}
._filters_9dkm5_3103 {
display: flex;
align-items: center;
gap: 7px;
}
._filterSelect_9dkm5_3117 {
min-height: 32px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 8px;
border: 1px solid #dfe7f2;
border-radius: 7px;
background: #ffffff;
color: #63708c;
font-size: 10px;
}
._filterSelect_9dkm5_3117 select {
border: none;
outline: none;
background: transparent;
color: #34446b;
font-size: 10px;
}
/* ================================================================
MEDIUM DESKTOP
================================================================ */
@media (max-width: 1200px) {
._workspace_9dkm5_181 {
grid-template-columns:
minmax(0, 1fr)
285px;
gap: 10px;
}
._resultItem_9dkm5_1317 {
grid-template-columns:
44px
minmax(0, 1fr)
58px
32px;
gap: 8px;
padding: 8px;
}
._fileIcon_9dkm5_1431 {
width: 44px;
height: 44px;
flex-basis: 44px;
}
._relevance_9dkm5_1809 {
min-width: 58px;
}
._relevance_9dkm5_1809 strong {
font-size: 14px;
}
}
/* ================================================================
SHORT DESKTOP HEIGHT
DevTools / laptop small-height support.
================================================================ */
@media (min-width: 1001px) and (max-height: 650px) {
._page_9dkm5_13 {
padding: 8px;
height: calc(100dvh - 68px);
}
._workspace_9dkm5_181 {
gap: 9px;
}
._main_9dkm5_233 {
gap: 7px;
}
._searchSection_9dkm5_277 {
gap: 6px;
}
._searchBox_9dkm5_317 {
min-height: 43px;
}
._searchButton_9dkm5_565 {
height: 35px;
}
._quickChip_9dkm5_729,
._limitControl_9dkm5_851 {
min-height: 29px;
height: 29px;
}
._resultItem_9dkm5_1317 {
min-height: 66px;
padding-top: 6px;
padding-bottom: 6px;
}
._attachmentsPanel_9dkm5_2079 {
padding: 8px;
}
._addAttachmentsButton_9dkm5_2103 {
height: 36px;
}
._recentHeader_9dkm5_2475 {
min-height: 42px;
flex-basis: 42px;
}
._recentItem_9dkm5_2663 {
min-height: 51px;
}
}
/* ================================================================
TABLET
Natural page scroll is better once columns stack.
================================================================ */
@media (max-width: 1000px) {
._page_9dkm5_13 {
height: auto;
min-height: calc(100dvh - 68px);
overflow-x: hidden;
overflow-y: auto;
}
._workspace_9dkm5_181 {
height: auto;
display: grid;
grid-template-columns: 1fr;
overflow: visible;
}
._main_9dkm5_233 {
height: auto;
overflow: visible;
}
._resultsSection_9dkm5_1061 {
flex: 0 0 auto;
overflow: visible;
}
._resultsList_9dkm5_1201 {
height: min(520px, 60dvh);
min-height: 300px;
flex: none;
overflow-y: auto;
}
._workspace_9dkm5_181 > aside {
height: auto;
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
gap: 10px;
overflow: visible;
}
._attachmentsPanel_9dkm5_2079 {
height: fit-content;
}
._recentPanel_9dkm5_2441 {
height: 420px;
min-height: 320px;
flex: none;
}
}
/* ================================================================
SMALL TABLET
================================================================ */
@media (max-width: 760px) {
._workspace_9dkm5_181 > aside {
grid-template-columns: 1fr;
}
._searchBox_9dkm5_317 {
min-height: 46px;
}
._searchButton_9dkm5_565 {
min-width: 125px;
padding: 0 10px;
}
._quickSearches_9dkm5_689 {
flex-wrap: nowrap;
padding-bottom: 3px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
._quickSearches_9dkm5_689::-webkit-scrollbar {
height: 4px;
}
._quickSearches_9dkm5_689::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #c3d0e2;
}
._quickChip_9dkm5_729,
._limitControl_9dkm5_851 {
flex: 0 0 auto;
}
._resultsList_9dkm5_1201 {
height: 500px;
min-height: 300px;
}
._recentPanel_9dkm5_2441 {
height: 400px;
min-height: 300px;
}
}
/* ================================================================
MOBILE
================================================================ */
@media (max-width: 560px) {
._page_9dkm5_13 {
height: auto;
min-height: calc(100dvh - 68px);
padding: 8px;
overflow-x: hidden;
overflow-y: auto;
}
._workspace_9dkm5_181 {
grid-template-columns: 1fr;
gap: 9px;
}
._main_9dkm5_233 {
gap: 9px;
}
._searchBox_9dkm5_317 {
flex-wrap: wrap;
padding: 5px;
}
._searchBox_9dkm5_317 input {
min-width: 0;
flex:
1 1
calc(100% - 50px);
}
._micButton_9dkm5_489 {
flex: 0 0 30px;
}
._searchButton_9dkm5_565 {
width: 100%;
min-width: 0;
}
._quickSearches_9dkm5_689 {
gap: 6px;
}
._resultsList_9dkm5_1201 {
height: 480px;
min-height: 280px;
}
._resultItem_9dkm5_1317 {
grid-template-columns:
40px
minmax(0, 1fr)
32px;
gap: 7px;
padding: 8px;
}
._fileIcon_9dkm5_1431 {
width: 40px;
height: 40px;
flex-basis: 40px;
}
._fileIcon_9dkm5_1431 svg {
width: 17px;
height: 17px;
}
._relevance_9dkm5_1809 {
display: none;
}
._resultItem_9dkm5_1317 > ._iconBtn_9dkm5_1871 {
grid-column: 3;
}
._fileMeta_9dkm5_1723 {
gap: 7px;
}
._fileMeta_9dkm5_1723 span:nth-child(2) {
display: none;
}
._recentPanel_9dkm5_2441 {
height: 380px;
min-height: 280px;
}
._recentItem_9dkm5_2663 {
grid-template-columns:
30px
minmax(0, 1fr)
30px;
}
}
/* ================================================================
VERY SMALL MOBILE
================================================================ */
@media (max-width: 380px) {
._page_9dkm5_13 {
padding: 6px;
}
._resultItem_9dkm5_1317 {
grid-template-columns:
36px
minmax(0, 1fr)
30px;
gap: 6px;
}
._fileIcon_9dkm5_1431 {
width: 36px;
height: 36px;
flex-basis: 36px;
}
._fileTitleRow_9dkm5_1561 {
gap: 4px;
}
._bestMatchBadge_9dkm5_1621 {
display: none;
}
._fileContent_9dkm5_1543 > p {
font-size: 9px;
}
._fileMeta_9dkm5_1723 span {
font-size: 9px;
}
._recentItem_9dkm5_2663 {
padding-left: 7px;
padding-right: 7px;
}
._resultsList_9dkm5_1201 {
height: 440px;
}
._recentPanel_9dkm5_2441 {
height: 350px;
}
}* {
box-sizing: border-box;
}
html,
body,
#root {
min-height: 100%;
}
/* =========================================================
PAGE
========================================================= */
._assistantPage_14fvm_29 {
min-height: calc(100vh - 68px);
height: calc(100vh - 68px);
background: #f8fbff;
color: #10245a;
padding: 10px;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
overflow: hidden;
}
/* =========================================================
WORKSPACE
========================================================= */
._workspace_14fvm_77 {
width: 100%;
height: 100%;
max-width: 1680px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 14px;
align-items: stretch;
min-height: 0;
}
/* =========================================================
COMMON CARD
========================================================= */
._chatPanel_14fvm_121,
._sideCard_14fvm_123 {
min-width: 0;
background: #fff;
border: 1px solid #dce5f2;
border-radius: 14px;
box-shadow: 0 2px 8px rgba(24, 54, 92, 0.06);
}
/* =========================================================
LEFT CHAT
========================================================= */
._chatPanel_14fvm_121 {
width: 100%;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* =========================================================
CHAT HEADER
========================================================= */
._chatHeader_14fvm_187 {
flex: 0 0 auto;
min-height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid #e7edf5;
}
._eyebrow_14fvm_219 {
margin-bottom: 2px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.12em;
color: #285ee8;
}
._chatHeader_14fvm_187 h1 {
margin: 0;
color: #10284d;
font-size: 18px;
font-weight: 600;
line-height: 1.2;
}
._chatHeader_14fvm_187 p {
margin: 3px 0 0;
color: #71809a;
font-size: 11px;
}
._liveStatus_14fvm_279 {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 9px;
border: 1px solid #dce5f2;
border-radius: 999px;
color: #526987;
font-size: 10px;
white-space: nowrap;
}
._liveStatus_14fvm_279 span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #20b56a;
}
/* =========================================================
CHAT SCROLL AREA
========================================================= */
._messages_14fvm_347 {
flex: 1 1 auto;
width: 100%;
min-width: 0;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding: 16px 20px 10px;
scrollbar-width: thin;
scrollbar-color: #cbd6e6 transparent;
}
._messages_14fvm_347::-webkit-scrollbar,
._pendingList_14fvm_389::-webkit-scrollbar,
._tendersList_14fvm_391::-webkit-scrollbar,
._recentWork_14fvm_393::-webkit-scrollbar {
width: 6px;
}
._messages_14fvm_347::-webkit-scrollbar-track,
._pendingList_14fvm_389::-webkit-scrollbar-track,
._tendersList_14fvm_391::-webkit-scrollbar-track,
._recentWork_14fvm_393::-webkit-scrollbar-track {
background: transparent;
}
._messages_14fvm_347::-webkit-scrollbar-thumb,
._pendingList_14fvm_389::-webkit-scrollbar-thumb,
._tendersList_14fvm_391::-webkit-scrollbar-thumb,
._recentWork_14fvm_393::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #cbd6e6;
}
._messages_14fvm_347::-webkit-scrollbar-thumb:hover,
._pendingList_14fvm_389::-webkit-scrollbar-thumb:hover,
._tendersList_14fvm_391::-webkit-scrollbar-thumb:hover,
._recentWork_14fvm_393::-webkit-scrollbar-thumb:hover {
background: #b6c3d7;
}
/* =========================================================
LOADING / EMPTY
========================================================= */
._loadingState_14fvm_455,
._emptyState_14fvm_457 {
min-height: 250px;
display: grid;
place-content: center;
justify-items: center;
text-align: center;
color: #7b8ba4;
}
._loadingState_14fvm_455 {
gap: 8px;
font-size: 11px;
}
._loadingSpinner_14fvm_493 {
width: 22px;
height: 22px;
border: 2px solid #e4ebf5;
border-top-color: #2b65f5;
border-radius: 50%;
animation: _spin_14fvm_1 0.8s linear infinite;
}
@keyframes _spin_14fvm_1 {
to {
transform: rotate(360deg);
}
}
._emptyIcon_14fvm_531 {
width: 42px;
height: 42px;
display: grid;
place-items: center;
margin: 0 auto 9px;
border-radius: 12px;
background: #edf3ff;
color: #2b65f5;
}
._emptyState_14fvm_457 h3 {
margin: 0 0 4px;
color: #17345f;
font-size: 15px;
}
._emptyState_14fvm_457 p {
max-width: 280px;
margin: 0;
font-size: 11px;
line-height: 1.45;
}
/* =========================================================
MESSAGES
========================================================= */
._messageRow_14fvm_607 {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 14px;
}
._userRow_14fvm_625 {
justify-content: flex-end;
}
._assistantRow_14fvm_633 {
justify-content: flex-start;
}
._messageStack_14fvm_641 {
min-width: 0;
max-width: min(760px, 84%);
}
._userMessage_14fvm_653 {
max-width: 100%;
padding: 9px 12px;
border-radius: 14px 14px 4px 14px;
background: #2563eb;
color: #fff;
box-shadow: 0 2px 7px rgba(37, 99, 235, 0.15);
}
._userMessage_14fvm_653 p {
margin: 0;
font-size: 12px;
line-height: 1.55;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
._assistantAvatar_14fvm_705,
._userAvatar_14fvm_707 {
flex: 0 0 30px;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
}
._assistantAvatar_14fvm_705 {
color: #2b65f5;
background: #edf3ff;
border: 1px solid #d8e5ff;
}
._userAvatar_14fvm_707 {
color: #fff;
background: #183a72;
}
._assistantBubble_14fvm_759 {
min-width: 0;
padding: 11px 13px;
border: 1px solid #dce5f2;
border-radius: 4px 14px 14px 14px;
background: #fff;
box-shadow: 0 2px 6px rgba(24, 54, 92, 0.04);
}
._updateBubble_14fvm_787 {
border-left: 2px solid #2b65f5;
background: #f8fbff;
}
._updateLabel_14fvm_799 {
display: inline-flex;
margin-bottom: 6px;
padding: 2px 6px;
border-radius: 999px;
background: #edf3ff;
color: #2b65f5;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.07em;
}
._messageText_14fvm_839 {
color: #17345f;
font-size: 12px;
line-height: 1.55;
overflow-wrap: anywhere;
}
._messageMeta_14fvm_859 {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 0 2px;
color: #8492a8;
font-size: 9px;
}
._userRow_14fvm_625 ._messageMeta_14fvm_859 {
justify-content: flex-end;
}
._copyMessage_14fvm_897 {
display: inline-grid;
place-items: center;
padding: 0;
border: 0;
background: transparent;
color: #7b8ba4;
cursor: pointer;
}
._copyMessage_14fvm_897:hover {
color: #2b65f5;
}
/* =========================================================
MESSAGE ATTACHMENTS
========================================================= */
._messageAttachments_14fvm_945,
._attachmentList_14fvm_947 {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 8px;
}
._attachmentChip_14fvm_965,
._fileCard_14fvm_967 {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
min-width: 0;
text-align: left;
cursor: pointer;
font-family: inherit;
}
._attachmentChip_14fvm_965 {
padding: 5px 7px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 7px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 10px;
}
._attachmentChip_14fvm_965 span {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._fileCard_14fvm_967 {
padding: 7px;
border: 1px solid #e1e8f2;
border-radius: 8px;
background: #f8fafc;
color: #17345f;
}
._fileCard_14fvm_967:hover {
border-color: #bfd1ef;
background: #f5f8fd;
}
._fileIcon_14fvm_1089 {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: grid;
place-items: center;
border-radius: 7px;
background: #eaf1ff;
color: #2b65f5;
}
._fileInfo_14fvm_1121 {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
._fileInfo_14fvm_1121 strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
}
._fileInfo_14fvm_1121 span {
color: #8290a5;
font-size: 9px;
}
._downloadIcon_14fvm_1175 {
flex: 0 0 auto;
width: 13px;
height: 13px;
color: #2b65f5;
}
/* =========================================================
ACTION BUTTONS
========================================================= */
._messageActions_14fvm_1201 {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
._approveButton_14fvm_1219,
._rejectButton_14fvm_1221 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 30px;
padding: 0 10px;
border-radius: 8px;
font-family: inherit;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
._approveButton_14fvm_1219 {
border: 1px solid #2563eb;
background: #2563eb;
color: #fff;
}
._approveButton_14fvm_1219:hover {
background: #1d58df;
}
._rejectButton_14fvm_1221 {
border: 1px solid #d9e2ef;
background: #fff;
color: #415a7c;
}
._rejectButton_14fvm_1221:hover {
border-color: #bfcde0;
background: #f8fafc;
}
._approveButton_14fvm_1219:disabled,
._rejectButton_14fvm_1221:disabled,
._attachButton_14fvm_1321:disabled,
._sendButton_14fvm_1323:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* =========================================================
TYPING
========================================================= */
._typingBubble_14fvm_1343 {
display: flex;
align-items: center;
gap: 3px;
width: fit-content;
padding: 9px 12px;
border: 1px solid #dce5f2;
border-radius: 4px 14px 14px 14px;
background: #fff;
}
._typingBubble_14fvm_1343 span {
width: 4px;
height: 4px;
border-radius: 50%;
background: #8190a7;
animation: _bounce_14fvm_1 1.1s infinite ease-in-out;
}
._typingBubble_14fvm_1343 span:nth-child(2) {
animation-delay: 0.12s;
}
._typingBubble_14fvm_1343 span:nth-child(3) {
animation-delay: 0.24s;
}
@keyframes _bounce_14fvm_1 {
0%,
60%,
100% {
transform: translateY(0);
}
30% {
transform: translateY(-3px);
}
}
/* =========================================================
ERROR
========================================================= */
._errorBanner_14fvm_1447 {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 14px 6px;
padding: 7px 9px;
border: 1px solid #f0caca;
border-radius: 8px;
background: #fff6f6;
color: #a63838;
font-size: 10px;
}
._errorBanner_14fvm_1447 span {
min-width: 0;
overflow-wrap: anywhere;
}
._errorBanner_14fvm_1447 button {
flex: 0 0 auto;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
}
/* =========================================================
COMPOSER
========================================================= */
._composer_14fvm_1549 {
flex: 0 0 auto;
min-width: 0;
padding: 6px 14px 10px;
border-top: 1px solid #e7edf5;
background: #fff;
}
/* =========================================================
QUICK ACTIONS
========================================================= */
._quickActions_14fvm_1581 {
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 6px;
scrollbar-width: thin;
scrollbar-color: #cbd6e6 transparent;
}
._quickActions_14fvm_1581::-webkit-scrollbar {
height: 4px;
}
._quickActions_14fvm_1581::-webkit-scrollbar-track {
background: transparent;
}
._quickActions_14fvm_1581::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #cbd6e6;
}
._quickAction_14fvm_1581 {
flex: 0 0 auto;
padding: 5px 9px;
border: 1px solid #dce5f2;
border-radius: 999px;
background: #fff;
color: #5b6f8d;
font-family: inherit;
font-size: 10px;
cursor: pointer;
}
._quickAction_14fvm_1581:hover {
border-color: #b9cdf5;
color: #245edb;
background: #f7faff;
}
/* =========================================================
SELECTED FILE
========================================================= */
._selectedFile_14fvm_1701 {
display: flex;
align-items: center;
gap: 6px;
max-width: 100%;
margin: 0 0 6px;
padding: 5px 8px;
border: 1px solid #dce5f2;
border-radius: 7px;
color: #526987;
font-size: 10px;
}
._selectedFile_14fvm_1701 span {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._selectedFile_14fvm_1701 button {
flex: 0 0 auto;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: transparent;
color: #71809a;
cursor: pointer;
}
/* =========================================================
INPUT
========================================================= */
._inputArea_14fvm_1809 {
display: flex;
align-items: center;
gap: 6px;
}
._inputArea_14fvm_1809 > input[type="text"] {
flex: 1;
min-width: 0;
height: 40px;
padding: 0 11px;
border: 1px solid #dce5f2;
border-radius: 9px;
outline: none;
color: #17345f;
font-family: inherit;
font-size: 11px;
background: #f9fbfe;
}
._inputArea_14fvm_1809 > input[type="text"]:focus {
border-color: #2b65f5;
background: #fff;
box-shadow: 0 0 0 3px rgba(43, 101, 245, 0.08);
}
._inputArea_14fvm_1809 > input[type="text"]:disabled {
cursor: not-allowed;
opacity: 0.7;
}
/* =========================================================
ATTACH / SEND
========================================================= */
._attachButton_14fvm_1321,
._sendButton_14fvm_1323 {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 9px;
cursor: pointer;
}
._attachButton_14fvm_1321 {
border: 1px solid #dce5f2;
background: #fff;
color: #536985;
}
._attachButton_14fvm_1321:hover:not(:disabled) {
border-color: #bfd1ef;
color: #2b65f5;
}
._sendButton_14fvm_1323 {
border: 0;
background: #2563eb;
color: #fff;
}
._sendButton_14fvm_1323:hover:not(:disabled) {
background: #1d58df;
}
._hiddenFileInput_14fvm_1989 {
display: none;
}
/* =========================================================
RIGHT SIDEBAR
========================================================= */
._sidePanel_14fvm_2005 {
width: 100%;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
gap: 12px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 2px;
scrollbar-width: thin;
scrollbar-color: #cbd6e6 transparent;
}
._sidePanel_14fvm_2005::-webkit-scrollbar {
width: 6px;
}
._sidePanel_14fvm_2005::-webkit-scrollbar-track {
background: transparent;
}
._sidePanel_14fvm_2005::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #cbd6e6;
}
._sidePanel_14fvm_2005::-webkit-scrollbar-thumb:hover {
background: #b6c3d7;
}
/* =========================================================
SIDE CARDS
========================================================= */
._sideCard_14fvm_123 {
width: 100%;
flex: 0 0 200px;
height: 200px;
min-height: 200px;
max-height: 200px;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 12px;
}
/* =========================================================
SIDE CARD HEADER
========================================================= */
._sideCardHeader_14fvm_2139 {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
._sideCardHeader_14fvm_2139 h2 {
margin: 0;
color: #4e6587;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
}
._countBadge_14fvm_2187 {
min-width: 23px;
height: 19px;
display: inline-grid;
place-items: center;
padding: 0 6px;
border-radius: 999px;
background: #fff1d9;
color: #b97813;
font-size: 9px;
font-weight: 800;
}
/* =========================================================
EMPTY SIDE CARD
========================================================= */
._sideEmpty_14fvm_2235 {
flex: 1 1 auto;
min-height: 0;
display: grid;
place-items: center;
text-align: center;
}
._sideEmpty_14fvm_2235 p {
margin: 0;
color: #8997aa;
font-size: 10px;
line-height: 1.45;
}
/* =========================================================
WAITING LIST
========================================================= */
._pendingList_14fvm_389 {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 3px;
scrollbar-width: thin;
scrollbar-color: #cbd6e6 transparent;
}
._pendingItem_14fvm_2321 {
padding: 8px;
border: 1px solid #dce5f2;
border-radius: 9px;
background: #fbfcfe;
}
._pendingItem_14fvm_2321 + ._pendingItem_14fvm_2321 {
margin-top: 6px;
}
._pendingType_14fvm_2349 {
display: block;
margin-bottom: 4px;
color: #8291a7;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.07em;
}
._pendingItem_14fvm_2321 strong {
display: block;
color: #10284d;
font-size: 11px;
line-height: 1.3;
}
._pendingItem_14fvm_2321 p {
margin: 5px 0 7px;
color: #6f809b;
font-size: 10px;
line-height: 1.4;
overflow-wrap: anywhere;
}
._pendingActions_14fvm_2421 {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
._pendingActions_14fvm_2421 ._approveButton_14fvm_1219,
._pendingActions_14fvm_2421 ._rejectButton_14fvm_1221 {
min-height: 27px;
padding: 0 8px;
font-size: 9px;
}
/* =========================================================
TENDERS
========================================================= */
._tendersList_14fvm_391 {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 3px;
scrollbar-width: thin;
scrollbar-color: #cbd6e6 transparent;
}
._tenderItem_14fvm_2497 {
display: flex;
flex-direction: column;
gap: 4px;
}
._tenderItem_14fvm_2497 + ._tenderItem_14fvm_2497 {
margin-top: 9px;
padding-top: 9px;
border-top: 1px solid #edf1f6;
}
._tenderItem_14fvm_2497 strong {
color: #10284d;
font-size: 11px;
line-height: 1.3;
}
._tenderItem_14fvm_2497 > span,
._tenderItem_14fvm_2497 small {
color: #71809a;
font-size: 9px;
line-height: 1.35;
}
._progressTrack_14fvm_2561 {
width: 100%;
height: 4px;
margin-top: 2px;
overflow: hidden;
border-radius: 999px;
background: #e7edf6;
}
._progressBar_14fvm_2589 {
height: 100%;
border-radius: inherit;
background: #2b65f5;
}
/* =========================================================
TODAY
========================================================= */
._statsGrid_14fvm_2613 {
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
}
._statsGrid_14fvm_2613 > div {
min-width: 0;
padding: 7px 6px;
border-radius: 8px;
background: #f6f8fc;
}
._statsGrid_14fvm_2613 strong {
display: block;
margin-bottom: 2px;
color: #10284d;
font-size: 16px;
line-height: 1;
}
._statsGrid_14fvm_2613 span {
display: block;
color: #70819d;
font-size: 8px;
line-height: 1.2;
}
/* =========================================================
RECENT WORK
========================================================= */
._recentWork_14fvm_393 {
flex: 1 1 auto;
min-height: 0;
margin-top: 8px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 3px;
scrollbar-width: thin;
scrollbar-color: #cbd6e6 transparent;
}
._workItem_14fvm_2743 {
display: flex;
align-items: flex-start;
gap: 6px;
}
._workItem_14fvm_2743 + ._workItem_14fvm_2743 {
margin-top: 6px;
}
._workItem_14fvm_2743 > span {
flex: 0 0 4px;
width: 4px;
height: 4px;
margin-top: 5px;
border-radius: 50%;
background: #2b65f5;
}
._workItem_14fvm_2743 p {
min-width: 0;
margin: 0;
color: #5d718f;
font-size: 9px;
line-height: 1.4;
overflow-wrap: anywhere;
}
._noWork_14fvm_2821 {
margin: 3px 0;
color: #8997aa;
font-size: 9px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
._assistantPage_14fvm_29 {
height: auto;
min-height: calc(100vh - 68px);
padding: 12px;
overflow: auto;
}
._workspace_14fvm_77 {
height: auto;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
align-items: start;
}
._chatPanel_14fvm_121 {
height: 630px;
min-height: 630px;
max-height: 630px;
}
._sidePanel_14fvm_2005 {
height: auto;
max-height: none;
display: flex;
flex-direction: column;
gap: 10px;
overflow: visible;
}
._sideCard_14fvm_123 {
flex: 0 0 200px;
height: 200px;
min-height: 200px;
max-height: 200px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
._assistantPage_14fvm_29 {
height: auto;
min-height: calc(100vh - 68px);
padding: 8px;
overflow: auto;
}
._workspace_14fvm_77 {
height: auto;
gap: 10px;
}
._chatPanel_14fvm_121 {
height: 630px;
min-height: 630px;
max-height: 630px;
border-radius: 12px;
}
._chatHeader_14fvm_187 {
min-height: 64px;
padding: 10px 12px;
}
._chatHeader_14fvm_187 h1 {
font-size: 16px;
}
._chatHeader_14fvm_187 p {
font-size: 10px;
}
._liveStatus_14fvm_279 {
padding: 5px 8px;
font-size: 9px;
}
._messages_14fvm_347 {
padding: 13px 10px 7px;
}
._messageStack_14fvm_641 {
max-width: 89%;
}
._assistantBubble_14fvm_759 {
padding: 10px 11px;
}
._messageText_14fvm_839,
._userMessage_14fvm_653 p {
font-size: 11px;
}
._composer_14fvm_1549 {
padding: 6px 8px 8px;
}
._quickActions_14fvm_1581 {
padding-bottom: 5px;
}
._quickAction_14fvm_1581 {
padding: 5px 8px;
font-size: 9px;
}
._inputArea_14fvm_1809 {
gap: 5px;
}
._inputArea_14fvm_1809 > input[type="text"] {
height: 38px;
padding: 0 9px;
font-size: 10px;
}
._attachButton_14fvm_1321,
._sendButton_14fvm_1323 {
flex-basis: 38px;
width: 38px;
height: 38px;
}
._sidePanel_14fvm_2005 {
height: auto;
max-height: none;
gap: 8px;
overflow: visible;
}
._sideCard_14fvm_123 {
flex: 0 0 200px;
height: 200px;
min-height: 200px;
max-height: 200px;
padding: 11px;
border-radius: 12px;
}
._sideCardHeader_14fvm_2139 {
margin-bottom: 7px;
}
._sideCardHeader_14fvm_2139 h2 {
font-size: 10px;
}
._pendingActions_14fvm_2421 {
flex-wrap: wrap;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
._chatPanel_14fvm_121 {
height: 630px;
min-height: 630px;
max-height: 630px;
}
._chatHeader_14fvm_187 {
padding: 9px 10px;
}
._chatHeader_14fvm_187 h1 {
font-size: 15px;
}
._chatHeader_14fvm_187 p {
font-size: 9px;
}
._liveStatus_14fvm_279 {
padding: 4px 7px;
font-size: 8px;
}
._messages_14fvm_347 {
padding: 11px 8px 6px;
}
._messageStack_14fvm_641 {
max-width: 91%;
}
._assistantAvatar_14fvm_705,
._userAvatar_14fvm_707 {
flex-basis: 27px;
width: 27px;
height: 27px;
}
._assistantBubble_14fvm_759 {
padding: 9px 10px;
}
._messageText_14fvm_839,
._userMessage_14fvm_653 p {
font-size: 10px;
}
._composer_14fvm_1549 {
padding: 5px 7px 7px;
}
._attachButton_14fvm_1321,
._sendButton_14fvm_1323 {
flex-basis: 36px;
width: 36px;
height: 36px;
}
._inputArea_14fvm_1809 > input[type="text"] {
height: 36px;
font-size: 10px;
}
._sideCard_14fvm_123 {
flex: 0 0 200px;
height: 200px;
min-height: 200px;
max-height: 200px;
}
}
._page_jgmw3_1 {
min-height: 100vh;
width: 100%;
margin: 0 !important;
padding: 0 !important;
min-height: 100vh;
background: #ffffff;
color: #101d68;
box-sizing: border-box;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
/* =========================================================
HEADER
========================================================= */
/* .page {
margin: 0 !important;
padding: 0 !important;
width: 100%;
min-height: 100vh;
} */
._tabContent_jgmw3_55 {
margin: 0 !important;
padding: 0 !important;
}
._pageHeader_jgmw3_63 {
margin-bottom: 8px;
}
._pageHeader_jgmw3_63 h1 {
margin: 0;
color: #101d68;
font-size: 22px;
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.3px;
}
._pageHeader_jgmw3_63 p {
margin: 3px 0 0;
color: #7181b7;
font-size: 12px;
line-height: 1.4;
}
/* =========================================================
TABS
========================================================= */
._tabs_jgmw3_111 {
width: 100%;
display: grid;
grid-template-columns: repeat(6, 1fr);
border: 1px solid #d7e2f5;
border-radius: 6px;
overflow: hidden;
margin-bottom: 10px;
background: #ffffff;
}
._tab_jgmw3_55 {
position: relative;
min-height: 42px;
border: 0;
border-right: 1px solid #d7e2f5;
background: #ffffff;
color: #111d68;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
._tab_jgmw3_55:last-child {
border-right: 0;
}
._tab_jgmw3_55:hover {
background: #f5f9ff;
}
._activeTab_jgmw3_185 {
color: #0867ed;
background: #eef6ff;
}
._activeTab_jgmw3_185::after {
content: "";
position: absolute;
height: 2px;
left: 0;
right: 0;
bottom: 0;
background: #0874ff;
}
/* =========================================================
CARDS
========================================================= */
._card_jgmw3_223 {
border: 1px solid #d7e4f7;
border-radius: 7px;
background: #ffffff;
box-sizing: border-box;
}
._topGrid_jgmw3_237 {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(300px, 0.98fr);
gap: 12px;
margin-bottom: 10px;
}
._topGrid_jgmw3_237 > ._card_jgmw3_223 {
min-width: 0;
}
._cardTitle_jgmw3_259 {
display: flex;
align-items: center;
gap: 7px;
padding: 10px 14px 7px;
color: #111d68;
}
._cardTitle_jgmw3_259 svg {
color: #066cf0;
flex-shrink: 0;
}
._cardTitle_jgmw3_259 h2 {
margin: 0;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
}
/* =========================================================
UPLOAD AREA
========================================================= */
._hiddenInput_jgmw3_307 {
display: none;
}
._dropZone_jgmw3_315 {
margin: 0 14px 7px;
min-height: 88px;
border: 1px dashed #b8d5ff;
border-radius: 6px;
background: linear-gradient(180deg, #f8fcff 0%, #f5faff 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #14236e;
cursor: pointer;
transition: 0.2s ease;
}
._dropZone_jgmw3_315:hover,
._dragging_jgmw3_355 {
border-color: #1477f9;
background: #eef7ff;
}
._uploadIcon_jgmw3_365 {
color: #0874f9;
margin-bottom: 2px;
}
._dropZone_jgmw3_315 strong {
font-size: 12px;
font-weight: 600;
}
._dropZone_jgmw3_315 span {
margin-top: 2px;
font-size: 11px;
}
._dropZone_jgmw3_315 small {
margin-top: 5px;
color: #6d7fb8;
font-size: 10px;
}
/* =========================================================
UPLOADED FILES
========================================================= */
._uploadedFiles_jgmw3_415 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
padding: 0 14px;
}
._fileItem_jgmw3_429 {
min-width: 0;
border: 1px solid #dce7f7;
border-radius: 6px;
padding: 6px 8px;
display: flex;
align-items: center;
gap: 7px;
box-sizing: border-box;
}
._pdfIcon_jgmw3_459 {
width: 25px;
height: 29px;
flex-shrink: 0;
border-radius: 4px;
background: #f04444;
color: #ffffff;
font-size: 7px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
._pdfIcon_jgmw3_459::after {
content: "";
position: absolute;
bottom: 4px;
left: 4px;
right: 4px;
height: 1px;
background: rgba(255, 255, 255, 0.75);
}
._fileInfo_jgmw3_517 {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
}
._fileInfo_jgmw3_517 strong {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #14236e;
font-size: 11px;
font-weight: 600;
}
._fileInfo_jgmw3_517 span {
margin-top: 2px;
color: #7484ba;
font-size: 10px;
}
._fileInfo_jgmw3_517 b {
padding: 0 2px;
}
._fileActions_jgmw3_573 {
display: flex;
align-items: center;
gap: 7px;
}
._successCircle_jgmw3_585 {
width: 17px;
height: 17px;
border-radius: 50%;
background: #16b86b;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
._removeButton_jgmw3_611 {
border: 0;
background: transparent;
color: #19327c;
padding: 1px;
cursor: pointer;
}
/* =========================================================
DOCUMENT TYPE CHIPS
========================================================= */
._documentTypes_jgmw3_635 {
padding: 10px 14px 12px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
._documentTypes_jgmw3_635 span {
min-height: 28px;
padding: 0 8px;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 5px;
border-radius: 5px;
background: #f5f9ff;
color: #182871;
font-size: 10px;
font-weight: 500;
}
._documentTypes_jgmw3_635 svg {
color: #0873ef;
}
/* =========================================================
PREPARE TENDER
========================================================= */
._prepareCard_jgmw3_705 {
padding-bottom: 10px;
}
._prepareText_jgmw3_713 {
padding: 0 14px;
}
._prepareText_jgmw3_713 strong {
display: block;
color: #182871;
font-size: 12px;
line-height: 1.35;
}
._prepareText_jgmw3_713 p {
margin: 3px 0 0;
color: #6f80b6;
font-size: 11px;
line-height: 1.4;
}
._aiInfoBox_jgmw3_753 {
margin: 10px 14px 8px;
padding: 8px 10px;
border-radius: 6px;
background: #eef6ff;
display: flex;
gap: 8px;
}
._lightBulb_jgmw3_775 {
width: 22px;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: flex-start;
color: #101d68;
font-size: 20px;
line-height: 1;
}
._aiInfoBox_jgmw3_753 strong {
color: #14236e;
font-size: 11px;
}
._aiInfoBox_jgmw3_753 p {
margin: 2px 0 0;
color: #6578b3;
font-size: 10px;
line-height: 1.35;
}
._checkboxRow_jgmw3_827 {
padding: 0 14px;
display: flex;
align-items: center;
gap: 6px;
position: relative;
color: #172873;
font-size: 11px;
cursor: pointer;
}
._checkboxRow_jgmw3_827 input {
position: absolute;
opacity: 0;
pointer-events: none;
}
._customCheckbox_jgmw3_867 {
width: 18px;
height: 18px;
flex-shrink: 0;
border-radius: 3px;
background: #0873ef;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
._checkboxRow_jgmw3_827 > svg {
margin-left: 1px;
color: #6d7fb6;
}
._reviewText_jgmw3_905 {
margin: 3px 14px 9px 38px;
color: #7181b7;
font-size: 10px;
}
._prepareButton_jgmw3_919 {
margin: 0 14px;
width: calc(100% - 28px);
min-height: 37px;
border: 0;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
color: #ffffff;
background: #0872f5;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
._prepareButton_jgmw3_919:hover {
background: #005edb;
}
._prepareButton_jgmw3_919 span {
font-size: 17px;
margin-left: 2px;
}
/* =========================================================
PROJECT SUMMARY
========================================================= */
._projectHeader_jgmw3_991 {
padding: 9px 14px 6px;
}
._projectTitle_jgmw3_999 {
display: flex;
align-items: center;
gap: 7px;
}
._projectTitle_jgmw3_999 svg {
color: #0872f5;
}
._projectTitle_jgmw3_999 h2 {
margin: 0;
font-size: 14px;
color: #111d68;
}
._projectStats_jgmw3_1033 {
padding: 3px 14px 10px;
display: grid;
grid-template-columns:
1.2fr
1fr
0.9fr
0.95fr
1.55fr;
gap: 7px;
align-items: stretch;
}
._statCard_jgmw3_1065 {
min-height: 45px;
padding: 6px 8px;
box-sizing: border-box;
border-radius: 5px;
background: #f4f8fd;
display: flex;
align-items: center;
gap: 7px;
}
._statIcon_jgmw3_1095 {
color: #0872f5;
display: flex;
align-items: center;
}
._statCard_jgmw3_1065 > div:last-child {
min-width: 0;
display: flex;
flex-direction: column;
}
._statCard_jgmw3_1065 span {
color: #7182b8;
font-size: 9px;
}
._statCard_jgmw3_1065 strong {
margin-top: 1px;
color: #14236e;
font-size: 11px;
font-weight: 600;
}
._statusCircle_jgmw3_1149 {
width: 24px;
height: 24px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
._green_jgmw3_1173 {
color: #ffffff;
background: #15b86c;
}
._yellow_jgmw3_1183 {
color: #ffffff;
background: #f6ae0a;
}
/* =========================================================
PROGRESS
========================================================= */
._progressArea_jgmw3_1201 {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
._progressRing_jgmw3_1215 {
--progress: 144deg;
width: 51px;
height: 51px;
border-radius: 50%;
background: conic-gradient(#0872f5 var(--progress), #dce5f2 0deg);
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
._progressInner_jgmw3_1251 {
width: 39px;
height: 39px;
border-radius: 50%;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
._progressInner_jgmw3_1251 strong {
color: #111d68;
font-size: 13px;
}
._progressLabel_jgmw3_1285 {
display: flex;
flex-direction: column;
}
._progressLabel_jgmw3_1285 strong {
color: #172873;
font-size: 10px;
line-height: 1.3;
}
._progressLabel_jgmw3_1285 span {
color: #172873;
font-size: 10px;
}
/* =========================================================
CHECKLIST
========================================================= */
._checklistCard_jgmw3_1325 {
margin-top: 10px;
overflow: hidden;
}
._tableWrapper_jgmw3_1335 {
width: 100%;
overflow-x: auto;
padding: 0 14px 10px;
box-sizing: border-box;
}
._checklistTable_jgmw3_1353 {
width: 100%;
min-width: 900px;
border-collapse: collapse;
table-layout: fixed;
}
._checklistTable_jgmw3_1353 thead tr {
background: #edf5fc;
}
._checklistTable_jgmw3_1353 th {
height: 24px;
padding: 0 7px;
text-align: left;
color: #14236e;
font-size: 10px;
font-weight: 600;
}
._checklistTable_jgmw3_1353 th:nth-child(1) {
width: 4%;
}
._checklistTable_jgmw3_1353 th:nth-child(2) {
width: 21%;
}
._checklistTable_jgmw3_1353 th:nth-child(3) {
width: 16%;
}
._checklistTable_jgmw3_1353 th:nth-child(4) {
width: 16%;
}
._checklistTable_jgmw3_1353 th:nth-child(5) {
width: 37%;
}
._checklistTable_jgmw3_1353 th:nth-child(6) {
width: 6%;
}
._checklistTable_jgmw3_1353 td {
height: 27px;
padding: 2px 7px;
border-bottom: 1px solid #e2e9f4;
color: #172873;
font-size: 10px;
vertical-align: middle;
}
._documentName_jgmw3_1475 {
font-weight: 500;
}
._requirement_jgmw3_1483 {
color: #7182b8 !important;
}
._foundStatus_jgmw3_1491,
._pendingStatus_jgmw3_1493 {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 500;
}
._foundStatus_jgmw3_1491 {
color: #12ad68;
}
._pendingStatus_jgmw3_1493 {
color: #f2a600;
}
._smallGreenCircle_jgmw3_1529,
._smallYellowCircle_jgmw3_1531 {
width: 16px;
height: 16px;
border-radius: 50%;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
}
._smallGreenCircle_jgmw3_1529 {
background: #13b56b;
}
._smallYellowCircle_jgmw3_1531 {
background: #f4ab00;
}
._sourceCell_jgmw3_1571 {
display: flex;
align-items: center;
gap: 6px;
color: #7182b8;
}
._sourceCell_jgmw3_1571 svg {
color: #14236e;
flex-shrink: 0;
}
._actionCell_jgmw3_1597 {
display: flex;
align-items: center;
gap: 35px;
}
._actionCell_jgmw3_1597 > span {
color: #7182b8;
white-space: nowrap;
}
._aiAction_jgmw3_1619,
._uploadAction_jgmw3_1621 {
min-width: 90px;
height: 22px;
padding: 0 7px;
border-radius: 4px;
background: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 9px;
font-weight: 500;
cursor: pointer;
}
._aiAction_jgmw3_1619 {
border: 1px solid #a6cfff;
color: #0872f5;
background: #edf6ff;
}
._uploadAction_jgmw3_1621 {
min-width: 108px;
border: 1px solid #0872f5;
color: #0872f5;
}
._aiAction_jgmw3_1619:hover {
background: #e1f0ff;
}
._uploadAction_jgmw3_1621:hover {
background: #f0f7ff;
}
._viewCell_jgmw3_1701 {
text-align: right;
}
._viewButton_jgmw3_1709 {
border: 0;
background: transparent;
color: #0872f5;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._viewButton_jgmw3_1709:hover {
text-decoration: underline;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1200px) {
._page_jgmw3_1 {
padding-left: 14px;
padding-right: 14px;
}
._topGrid_jgmw3_237 {
grid-template-columns: 1fr;
}
._projectStats_jgmw3_1033 {
grid-template-columns: repeat(2, 1fr);
}
._progressArea_jgmw3_1201 {
justify-content: flex-start;
}
}
@media (max-width: 900px) {
._tabs_jgmw3_111 {
grid-template-columns: repeat(3, 1fr);
}
._tab_jgmw3_55:nth-child(3) {
border-right: 0;
}
._tab_jgmw3_55:nth-child(-n + 3) {
border-bottom: 1px solid #d7e2f5;
}
._uploadedFiles_jgmw3_415 {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
._page_jgmw3_1 {
padding: 10px;
}
._pageHeader_jgmw3_63 h1 {
font-size: 18px;
}
._pageHeader_jgmw3_63 p {
font-size: 10px;
}
._tabs_jgmw3_111 {
grid-template-columns: repeat(2, 1fr);
}
._tab_jgmw3_55 {
min-height: 40px;
font-size: 10px;
}
._projectStats_jgmw3_1033 {
grid-template-columns: 1fr;
}
._actionCell_jgmw3_1597 {
gap: 12px;
}
._dropZone_jgmw3_315 {
min-height: 80px;
}
}
/* =========================================================
AI ANALYTICS DASHBOARD
CLEAN / FULL WIDTH / COMPACT VERSION
========================================================= */
* {
box-sizing: border-box;
}
/* =========================================================
PAGE
========================================================= */
._page_jptn4_27 {
width: 100%;
height: calc(100vh - 60px);
min-height: 0;
padding: 8px 8px 10px;
overflow: hidden;
background: #f8fbff;
color: #10245a;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
/* =========================================================
MAIN CONTAINER
IMPORTANT:
Removed max-width: 1320px
Removed centered large side spaces
========================================================= */
._container_jptn4_83 {
width: 100%;
max-width: none;
height: 100%;
min-height: 0;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
/* =========================================================
DASHBOARD SCROLL AREA
========================================================= */
._dashboardScroll_jptn4_119 {
width: 100%;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 0 3px 8px 0;
scrollbar-width: thin;
scrollbar-color: #cbd8e8 transparent;
}
._dashboardScroll_jptn4_119::-webkit-scrollbar {
width: 5px;
}
._dashboardScroll_jptn4_119::-webkit-scrollbar-track {
background: transparent;
}
._dashboardScroll_jptn4_119::-webkit-scrollbar-thumb {
background: #cbd8e8;
border-radius: 10px;
}
._dashboardScroll_jptn4_119::-webkit-scrollbar-thumb:hover {
background: #aebfd5;
}
/* =========================================================
PAGE HEADER
========================================================= */
._pageTitleRow_jptn4_191 {
width: 100%;
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 2px;
}
._titleBlock_jptn4_217 {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
}
._titleIcon_jptn4_235 {
width: 35px;
height: 35px;
flex: 0 0 35px;
display: grid;
place-items: center;
border: 1.5px solid #1677ff;
border-radius: 50%;
color: #1677ff;
background: #ffffff;
}
._titleBlock_jptn4_217 h1,
._titleBlock_jptn4_217 h3 {
margin: 0 0 3px;
color: #050505;
font-size: 20px;
font-weight: 800;
line-height: 1.2;
}
._titleBlock_jptn4_217 p {
margin: 0;
color: #4b5563;
font-size: 11px;
font-weight: 500;
line-height: 1.35;
}
/* =========================================================
DATE RANGE
========================================================= */
._dateRangeWrapper_jptn4_317 {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}
._dateButton_jptn4_335,
._selectButton_jptn4_337 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid #d8e2ef;
background: #ffffff;
color: #111827;
cursor: pointer;
white-space: nowrap;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background 0.15s ease;
}
._dateButton_jptn4_335 {
min-width: 200px;
height: 34px;
padding: 0 11px;
border-radius: 7px;
font-size: 10px;
font-weight: 600;
}
._dateButton_jptn4_335:hover {
border-color: #b9cce5;
background: #fbfdff;
}
._dateButton_jptn4_335:focus {
outline: none;
border-color: #1683ff;
box-shadow: 0 0 0 2px rgba(22, 131, 255, 0.08);
}
._dateButton_jptn4_335 svg {
flex-shrink: 0;
color: #111827;
}
._dateArrow_jptn4_441 {
margin-left: 3px;
color: #64748b;
font-size: 13px;
line-height: 1;
}
._hiddenDateInput_jptn4_459 {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
overflow: hidden;
}
/* =========================================================
COMMON CARD
========================================================= */
._kpiCard_jptn4_491,
._card_jptn4_493 {
min-width: 0;
background: #ffffff;
border: 1px solid #e0e9f5;
border-radius: 8px;
box-shadow: 0 1px 5px rgba(31, 73, 125, 0.025);
}
._card_jptn4_493 {
padding: 10px;
}
/* =========================================================
KPI GRID
========================================================= */
._kpiGrid_jptn4_531 {
width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
margin-bottom: 9px;
}
._kpiCard_jptn4_491 {
min-height: 80px;
padding: 9px 10px;
display: flex;
align-items: center;
gap: 9px;
}
._kpiIcon_jptn4_575 {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: grid;
place-items: center;
border-radius: 9px;
}
._blue_jptn4_599 {
color: #0879ff;
background: #edf5ff;
}
._purple_jptn4_609 {
color: #6e22ff;
background: #f2eaff;
}
._orange_jptn4_619 {
color: #f59a00;
background: #fff5e7;
}
._green_jptn4_629 {
color: #08b77a;
background: #e7f9f2;
}
._kpiMain_jptn4_639 {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
}
._kpiMain_jptn4_639 h3 {
margin: 0 0 3px;
overflow: hidden;
color: #050505;
font-size: 12px !important;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
text-overflow: ellipsis;
}
._kpiMain_jptn4_639 strong {
margin-bottom: 3px;
color: #020617;
font-size: 22px;
font-weight: 800;
line-height: 1;
}
._kpiMain_jptn4_639 span {
color: #374151;
font-size: 11px !important;
font-weight: 500;
line-height: 1.2;
}
._kpiChange_jptn4_721 {
align-self: center;
display: flex;
flex-direction: column;
gap: 2px;
text-align: right;
white-space: nowrap;
}
._kpiChange_jptn4_721 b {
font-size: 11px;
font-weight: 750;
}
._kpiChange_jptn4_721 span {
color: #374151;
font-size: 8px;
font-weight: 500;
}
._positive_jptn4_769 {
color: #08b77a;
}
._negative_jptn4_777 {
color: #f04444;
}
/* =========================================================
CHART GRID
========================================================= */
._chartGrid_jptn4_793 {
width: 100%;
display: grid;
grid-template-columns:
minmax(0, 1.03fr)
minmax(0, 0.9fr)
minmax(0, 1.03fr);
gap: 9px;
margin-bottom: 9px;
}
/* =========================================================
CARD HEADER
========================================================= */
._cardHeader_jptn4_829 {
width: 100%;
min-height: 38px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
._cardTitle_jptn4_851 {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 7px;
}
._smallIcon_jptn4_869 {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: grid;
place-items: center;
border-radius: 8px;
}
._cardTitle_jptn4_851 h2 {
margin: 1px 0 2px;
color: #050505;
font-size: 13px !important;
font-weight: 750;
line-height: 1.2;
}
._cardTitle_jptn4_851 p {
margin: 0;
color: #4b5563;
font-size: 11px !important;
font-weight: 500;
line-height: 1.25;
}
._selectButton_jptn4_337 {
min-height: 27px;
padding: 0 8px;
border-radius: 6px;
color: #111827;
font-size: 9px;
font-weight: 600;
}
._selectButton_jptn4_337:hover {
border-color: #bad0e8;
background: #f8fbff;
}
/* =========================================================
LINE CHART
========================================================= */
._chartArea_jptn4_977 {
position: relative;
width: 100%;
height: 170px;
padding-top: 4px;
}
._chart_jptn4_793 {
width: 100%;
height: 100%;
overflow: visible;
}
._gridLine_jptn4_1009 {
stroke: #e5edf7;
stroke-width: 1;
}
._axisText_jptn4_1019 {
fill: #374151;
font-size: 9px;
font-weight: 600;
}
._area_jptn4_1033 {
fill: rgba(30, 126, 255, 0.09);
}
._line_jptn4_1041 {
fill: none;
stroke: #147cf5;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
._point_jptn4_1059 {
fill: #147cf5;
stroke: #ffffff;
stroke-width: 2;
}
._chartTooltip_jptn4_1073 {
position: absolute;
top: 6px;
right: 10px;
padding: 5px 7px;
display: flex;
flex-direction: column;
gap: 1px;
background: #ffffff;
border: 1px solid #e2eaf5;
border-radius: 7px;
box-shadow: 0 3px 10px rgba(35, 70, 120, 0.08);
font-size: 9px;
}
._chartTooltip_jptn4_1073 b {
color: #38537d;
}
._chartTooltip_jptn4_1073 span {
color: #7788aa;
}
/* =========================================================
DONUT CHART
========================================================= */
._donutWrap_jptn4_1141 {
min-height: 170px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
._donut_jptn4_1141 {
width: 145px;
height: 145px;
transform: rotate(-90deg);
}
._donutTrack_jptn4_1173,
._donutSegment_jptn4_1175 {
fill: none;
stroke-width: 28;
}
._donutTrack_jptn4_1173 {
stroke: #edf2f8;
}
._donutSegment_jptn4_1175 {
stroke-linecap: butt;
}
._donutSegment_jptn4_1175._orange_jptn4_619 {
stroke: #ffb52d;
}
._donutSegment_jptn4_1175._blue_jptn4_599 {
stroke: #67adf6;
}
._donutSegment_jptn4_1175._green_jptn4_629 {
stroke: #1fc39d;
}
._donutValue_jptn4_1227,
._donutLabel_jptn4_1229 {
transform: rotate(90deg);
transform-origin: 110px 110px;
}
._donutValue_jptn4_1227 {
fill: #050505;
font-size: 25px;
font-weight: 800;
}
._donutLabel_jptn4_1229 {
fill: #4b5563;
font-size: 11px;
font-weight: 500;
}
._donutLegend_jptn4_1267 {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
color: #374151;
font-size: 9px;
font-weight: 600;
}
._donutLegend_jptn4_1267 span {
display: inline-flex;
align-items: center;
gap: 4px;
}
._donutLegend_jptn4_1267 b {
margin-left: 2px;
color: #050505;
font-weight: 800;
}
._donutLegend_jptn4_1267 i,
._chartLegend_jptn4_1327 i {
width: 7px;
height: 7px;
display: inline-block;
border-radius: 50%;
}
._legendOrange_jptn4_1345 {
background: #ffab12;
}
._legendBlue_jptn4_1353 {
background: #69b0f4;
}
._legendGreen_jptn4_1361 {
background: #18bd94;
}
/* =========================================================
BAR CHART
========================================================= */
._chartLegend_jptn4_1327 {
display: flex;
align-items: center;
gap: 7px;
color: #374151;
font-size: 8px;
font-weight: 600;
white-space: nowrap;
}
._chartLegend_jptn4_1327 span {
display: inline-flex;
align-items: center;
gap: 3px;
}
._dotPrimary_jptn4_1419 {
background: #147cf5;
}
._dotSecondary_jptn4_1427 {
background: #83c2f7;
}
._barChart_jptn4_1435 {
width: 100%;
height: 170px;
display: flex;
padding: 8px 3px 4px 0;
}
._barYAxis_jptn4_1453 {
width: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 19px;
color: #374151;
font-size: 8px;
font-weight: 600;
text-align: right;
}
._barPlot_jptn4_1487 {
position: relative;
flex: 1;
min-width: 0;
border-left: 1px solid #e3ebf5;
border-bottom: 1px solid #e3ebf5;
}
._barGrid_jptn4_1509 {
position: absolute;
right: 0;
left: 0;
border-top: 1px solid #e7eef7;
}
._bars_jptn4_1525 {
position: absolute;
inset: 0 3px 0 5px;
display: flex;
align-items: flex-end;
justify-content: space-around;
gap: 5px;
}
._barGroup_jptn4_1549 {
position: relative;
height: 100%;
flex: 1;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
padding-bottom: 20px;
}
._bar_jptn4_1435 {
width: 9px;
min-height: 2px;
border-radius: 3px 3px 0 0;
}
._barPrimary_jptn4_1595 {
background: #267ee8;
}
._barSecondary_jptn4_1603 {
background: #83c2f4;
}
._barGroup_jptn4_1549 span {
position: absolute;
bottom: 3px;
color: #374151;
font-size: 7px;
font-weight: 600;
white-space: nowrap;
}
/* =========================================================
BOTTOM GRID
========================================================= */
._bottomGrid_jptn4_1643 {
width: 100%;
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr)
minmax(0, 0.82fr);
gap: 9px;
margin-bottom: 4px;
}
/* =========================================================
TOP SOURCES
========================================================= */
._sourceList_jptn4_1679 {
width: 100%;
padding: 4px 1px 2px;
}
._sourceRow_jptn4_1691 {
min-height: 25px;
display: grid;
grid-template-columns: 78px minmax(0, 1fr) 28px 32px;
align-items: center;
gap: 6px;
color: #374151;
font-size: 9px;
font-weight: 600;
}
._sourceName_jptn4_1721 {
overflow: hidden;
color: #111827;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
._sourceTrack_jptn4_1743 {
width: 100%;
height: 7px;
overflow: hidden;
background: #e8eef6;
border-radius: 4px;
}
._sourceFill_jptn4_1765 {
height: 100%;
background: #3188ef;
border-radius: inherit;
}
._sourceRow_jptn4_1691 b {
color: #050505;
font-size: 9px;
font-weight: 800;
}
._sourceRow_jptn4_1691 > span:last-child {
color: #374151;
font-weight: 600;
text-align: right;
}
/* =========================================================
ACTIVITY
========================================================= */
._activityList_jptn4_1819 {
padding-top: 2px;
}
._activityRow_jptn4_1827 {
min-height: 34px;
display: flex;
align-items: center;
gap: 7px;
border-bottom: 1px solid #edf1f6;
}
._activityRow_jptn4_1827:last-child {
border-bottom: 0;
}
._activityIcon_jptn4_1857 {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: grid;
place-items: center;
color: #147cf5;
background: #eef6ff;
border-radius: 7px;
}
._activityText_jptn4_1887 {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
._activityText_jptn4_1887 b {
overflow: hidden;
color: #050505;
font-size: 9px;
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
}
._activityText_jptn4_1887 span {
color: #4b5563;
font-size: 8px;
font-weight: 500;
}
._activityRow_jptn4_1827 time {
color: #374151;
font-size: 8px;
font-weight: 500;
white-space: nowrap;
}
._viewAll_jptn4_1963 {
border: 0;
background: transparent;
color: #006eff;
font-size: 9px;
font-weight: 700;
cursor: pointer;
}
/* =========================================================
QUICK INSIGHTS
========================================================= */
._insightList_jptn4_1995 {
display: flex;
flex-direction: column;
gap: 4px;
}
._insightRow_jptn4_2009 {
min-height: 35px;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 5px;
background: #fbfdff;
border: 1px solid #edf2f8;
border-radius: 7px;
}
._insightIcon_jptn4_2041 {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: grid;
place-items: center;
color: #0879ff;
background: #eef6ff;
border-radius: 7px;
}
._insightRow_jptn4_2009 > div:nth-child(2) {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
._insightRow_jptn4_2009 b {
color: #050505;
font-size: 11px !important;
font-weight: 700;
}
._insightRow_jptn4_2009 span {
color: #4b5563;
font-size: 8px;
font-weight: 500;
}
._insightRow_jptn4_2009 > svg {
flex: 0 0 auto;
color: #374151;
}
/* =========================================================
AI PROMPT
========================================================= */
._aiPrompt_jptn4_2139 {
width: 100%;
min-height: 58px;
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 9px;
margin-top: 7px;
padding: 7px 10px;
position: relative;
z-index: 10;
background: #ffffff;
border: 1px solid #73aeff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(29, 116, 230, 0.05);
}
._promptIcon_jptn4_2189 {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: #0879ff;
}
._promptText_jptn4_2209 {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
._promptText_jptn4_2209 > span {
display: block;
margin-bottom: 2px;
color: #4b5563;
font-size: 11px !important;
font-weight: 500;
line-height: 13px;
}
._promptText_jptn4_2209 textarea {
width: 100%;
min-height: 42px;
max-height: 42px;
margin: 0;
padding: 2px 0;
resize: none;
overflow-y: auto;
border: 0;
outline: 0;
background: transparent;
color: #111827;
box-shadow: none;
font-family: inherit;
font-size: 11px;
font-weight: 500;
line-height: 17px;
}
._promptText_jptn4_2209 textarea:focus {
border: 0;
outline: 0;
box-shadow: none;
}
._promptText_jptn4_2209 textarea::placeholder {
color: #94a3b8;
}
._promptAction_jptn4_2327 {
width: 36px;
height: 36px;
flex: 0 0 36px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: #0879ff;
color: #ffffff;
font-size: 17px;
cursor: pointer;
transition:
transform 0.15s ease,
background 0.15s ease;
}
._promptAction_jptn4_2327:hover:not(:disabled) {
background: #006ee6;
transform: scale(1.03);
}
._promptAction_jptn4_2327:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* =========================================================
AI FULL SCREEN LOADER
========================================================= */
._aiFullLoader_jptn4_2413 {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(248, 251, 255, 0.72);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
._aiLoaderCard_jptn4_2447 {
position: relative;
width: 300px;
min-height: 175px;
overflow: hidden;
padding: 25px 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.96);
border: 1px solid #d9e7f7;
border-radius: 16px;
box-shadow:
0 20px 50px rgba(30, 80, 140, 0.12),
0 4px 15px rgba(30, 80, 140, 0.06);
}
._aiLoaderCard_jptn4_2447::before {
content: "";
position: absolute;
top: 0;
left: -40%;
width: 180%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
#1683ff,
#63b3ff,
transparent
);
animation: _aiLoaderLine_jptn4_1 2s ease-in-out infinite;
}
._aiLoaderCard_jptn4_2447::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
90deg,
#1683ff 0%,
#63b3ff 50%,
#1683ff 100%
);
background-size: 200% 100%;
animation: _aiLoaderProgress_jptn4_1 1.5s linear infinite;
}
._aiLoaderSpinner_jptn4_2583 {
position: relative;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
background: #f1f7ff;
border-radius: 50%;
box-shadow:
0 0 0 7px rgba(22, 131, 255, 0.05),
0 0 25px rgba(22, 131, 255, 0.08);
}
._aiLoaderSpinner_jptn4_2583::before {
content: "";
position: absolute;
inset: -3px;
border: 2px solid transparent;
border-top-color: #1683ff;
border-right-color: #1683ff;
border-radius: 50%;
animation: _aiLoaderRotate_jptn4_1 0.9s linear infinite;
}
._aiLoaderSpinner_jptn4_2583::after {
content: "";
position: absolute;
inset: 3px;
border: 1px dashed #b9d9ff;
border-radius: 50%;
animation: _aiLoaderRotateReverse_jptn4_1 2s linear infinite;
}
._aiLoaderSpinnerInner_jptn4_2681 {
width: 20px;
height: 20px;
background: #1683ff;
border-radius: 50%;
box-shadow:
0 0 0 5px rgba(22, 131, 255, 0.12),
0 0 18px rgba(22, 131, 255, 0.35);
animation: _aiLoaderPulse_jptn4_1 1.2s ease-in-out infinite;
}
._aiLoaderTitle_jptn4_2711 {
color: #111827;
font-size: 13px;
font-weight: 700;
line-height: 18px;
text-align: center;
}
._aiLoaderText_jptn4_2731 {
margin-top: 6px;
color: #64748b;
font-size: 10px;
font-weight: 500;
line-height: 15px;
text-align: center;
}
/* =========================================================
LOADER ANIMATIONS
========================================================= */
@keyframes _aiLoaderRotate_jptn4_1 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes _aiLoaderRotateReverse_jptn4_1 {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
@keyframes _aiLoaderPulse_jptn4_1 {
0%,
100% {
transform: scale(0.8);
opacity: 0.65;
}
50% {
transform: scale(1);
opacity: 1;
}
}
@keyframes _aiLoaderLine_jptn4_1 {
0% {
transform: translateX(-35%);
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
transform: translateX(35%);
opacity: 0;
}
}
@keyframes _aiLoaderProgress_jptn4_1 {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* =========================================================
LARGE LAPTOP
<= 1400px
========================================================= */
@media (max-width: 1400px) {
._page_jptn4_27 {
padding-left: 7px;
padding-right: 7px;
}
._chartGrid_jptn4_793,
._bottomGrid_jptn4_1643 {
gap: 8px;
}
._kpiGrid_jptn4_531 {
gap: 8px;
}
._card_jptn4_493 {
padding: 9px;
}
}
/* =========================================================
LAPTOP
<= 1200px
========================================================= */
@media (max-width: 1200px) {
._page_jptn4_27 {
padding: 8px 7px 10px;
}
._kpiGrid_jptn4_531 {
gap: 8px;
}
._kpiCard_jptn4_491 {
padding: 9px;
}
._kpiChange_jptn4_721 {
display: none;
}
._chartGrid_jptn4_793,
._bottomGrid_jptn4_1643 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
._chartGrid_jptn4_793 ._card_jptn4_493:last-child,
._bottomGrid_jptn4_1643 ._card_jptn4_493:last-child {
grid-column: 1 / -1;
}
}
/* =========================================================
TABLET
<= 992px
========================================================= */
@media (max-width: 992px) {
._page_jptn4_27 {
padding: 8px 7px 10px;
}
._pageTitleRow_jptn4_191 {
min-height: 52px;
}
._titleBlock_jptn4_217 h1,
._titleBlock_jptn4_217 h3 {
font-size: 18px;
}
._titleBlock_jptn4_217 p {
font-size: 10px;
}
._kpiGrid_jptn4_531 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
._chartGrid_jptn4_793,
._bottomGrid_jptn4_1643 {
grid-template-columns: 1fr;
}
._chartGrid_jptn4_793 ._card_jptn4_493:last-child,
._bottomGrid_jptn4_1643 ._card_jptn4_493:last-child {
grid-column: auto;
}
._chartArea_jptn4_977,
._barChart_jptn4_1435 {
height: 175px;
}
._donutWrap_jptn4_1141 {
min-height: 175px;
}
}
/* =========================================================
MOBILE / TABLET
<= 768px
========================================================= */
@media (max-width: 768px) {
._page_jptn4_27 {
height: calc(100vh - 50px);
padding: 7px 6px 9px;
}
._dashboardScroll_jptn4_119 {
padding-right: 2px;
padding-bottom: 7px;
}
._pageTitleRow_jptn4_191 {
min-height: auto;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 5px 1px 8px;
}
._dateRangeWrapper_jptn4_317 {
width: 100%;
}
._dateButton_jptn4_335 {
width: 100%;
min-width: 0;
}
._kpiGrid_jptn4_531 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
._kpiCard_jptn4_491 {
min-height: 76px;
padding: 8px;
}
._kpiIcon_jptn4_575 {
width: 38px;
height: 38px;
flex-basis: 38px;
}
._kpiMain_jptn4_639 h3 {
font-size: 10px !important;
}
._kpiMain_jptn4_639 strong {
font-size: 20px;
}
._kpiMain_jptn4_639 span {
font-size: 8px !important;
}
._card_jptn4_493 {
padding: 9px;
}
._cardHeader_jptn4_829 {
flex-wrap: wrap;
}
._chartLegend_jptn4_1327 {
width: 100%;
justify-content: flex-end;
}
._sourceRow_jptn4_1691 {
grid-template-columns: 70px minmax(0, 1fr) 26px 28px;
}
._aiPrompt_jptn4_2139 {
min-height: 56px;
gap: 8px;
margin-top: 6px;
padding: 7px 9px;
}
._promptText_jptn4_2209 > span {
font-size: 8px !important;
}
._promptText_jptn4_2209 textarea {
font-size: 10px;
line-height: 16px;
}
._promptAction_jptn4_2327 {
width: 34px;
height: 34px;
flex-basis: 34px;
}
}
/* =========================================================
SMALL MOBILE
<= 576px
========================================================= */
@media (max-width: 576px) {
._page_jptn4_27 {
height: calc(100vh - 45px);
padding: 6px 5px 8px;
}
._dashboardScroll_jptn4_119 {
padding-right: 1px;
padding-bottom: 5px;
}
._titleBlock_jptn4_217 {
gap: 8px;
}
._titleBlock_jptn4_217 h1,
._titleBlock_jptn4_217 h3 {
font-size: 16px;
}
._titleBlock_jptn4_217 p {
font-size: 9px;
}
._kpiGrid_jptn4_531 {
grid-template-columns: 1fr;
gap: 7px;
}
._kpiCard_jptn4_491 {
min-height: 70px;
}
._kpiIcon_jptn4_575 {
width: 38px;
height: 38px;
flex-basis: 38px;
}
._kpiMain_jptn4_639 strong {
font-size: 20px;
}
._card_jptn4_493 {
padding: 8px;
}
._cardTitle_jptn4_851 h2 {
font-size: 11px !important;
}
._cardTitle_jptn4_851 p {
font-size: 8px !important;
}
._smallIcon_jptn4_869 {
width: 27px;
height: 27px;
flex-basis: 27px;
}
._chartArea_jptn4_977,
._barChart_jptn4_1435 {
height: 155px;
}
._donutWrap_jptn4_1141 {
min-height: 165px;
}
._donut_jptn4_1141 {
width: 135px;
height: 135px;
}
._donutLegend_jptn4_1267 {
gap: 7px;
font-size: 8px;
}
._sourceRow_jptn4_1691 {
grid-template-columns: 65px minmax(0, 1fr) 25px 27px;
gap: 5px;
font-size: 8px;
}
._sourceTrack_jptn4_1743 {
height: 6px;
}
._aiPrompt_jptn4_2139 {
min-height: 54px;
gap: 7px;
margin-top: 5px;
}
._promptText_jptn4_2209 textarea {
min-height: 24px;
font-size: 10px;
}
._promptAction_jptn4_2327 {
width: 32px;
height: 32px;
flex-basis: 32px;
}
._aiLoaderCard_jptn4_2447 {
width: calc(100% - 40px);
max-width: 300px;
min-height: 165px;
padding: 22px;
}
._aiLoaderSpinner_jptn4_2583 {
width: 48px;
height: 48px;
}
._aiLoaderTitle_jptn4_2711 {
font-size: 12px;
}
._aiLoaderText_jptn4_2731 {
font-size: 9px;
}
}
/* =========================================================
EXTRA SMALL
<= 400px
========================================================= */
@media (max-width: 400px) {
._page_jptn4_27 {
padding-left: 4px;
padding-right: 4px;
}
._titleBlock_jptn4_217 h1,
._titleBlock_jptn4_217 h3 {
font-size: 15px;
}
._titleBlock_jptn4_217 p {
font-size: 8px;
}
._cardTitle_jptn4_851 h2 {
font-size: 10px !important;
}
._selectButton_jptn4_337 {
min-height: 25px;
padding: 0 6px;
font-size: 8px;
}
._chartArea_jptn4_977,
._barChart_jptn4_1435 {
height: 145px;
}
._donut_jptn4_1141 {
width: 125px;
height: 125px;
}
._donutLegend_jptn4_1267 {
gap: 5px;
font-size: 7px;
}
._sourceRow_jptn4_1691 {
grid-template-columns: 58px minmax(0, 1fr) 22px 24px;
gap: 4px;
}
}/* Ask AI answer view. Cards, KPI tiles and charts come from AiAnalytics.module.css;
this file only adds the answer banner, the grid rows, chips and small helpers. */
._wrap_1yd3p_7 {
display: flex;
flex-direction: column;
gap: 10px;
}
/* ---------- answer banner ---------- */
._answerCard_1yd3p_21 {
background: #fff;
border: 1px solid #cfe2ff;
border-radius: 8px;
padding: 10px 12px;
}
._answerHead_1yd3p_35 {
display: flex;
align-items: flex-start;
gap: 10px;
}
._answerIcon_1yd3p_47 {
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 8px;
display: grid;
place-items: center;
background: #edf5ff;
color: #0879ff;
}
._answerText_1yd3p_69 {
flex: 1;
min-width: 0;
}
._question_1yd3p_79 {
display: block;
color: #64748b;
font-size: 11px;
margin-bottom: 3px;
}
._answerText_1yd3p_69 p {
margin: 0;
color: #0f172a;
font-size: 13.5px;
line-height: 1.5;
max-width: 90ch;
}
._answerMeta_1yd3p_109 {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #edf1f6;
}
._answerMeta_1yd3p_109 h3 {
margin: 0;
font-size: 14px;
font-weight: 750;
color: #050505;
}
._answerMeta_1yd3p_109 span {
color: #64748b;
font-size: 11.5px;
}
/* ---------- rows of chart / list cards ---------- */
._row_1yd3p_155 {
display: grid;
gap: 10px;
}
._row2_1yd3p_165 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
._row3_1yd3p_173 {
grid-template-columns: 1.08fr 0.95fr 1.08fr;
}
/* ---------- small helpers ---------- */
._kpiText_1yd3p_183 {
font-size: 16px !important;
line-height: 1.2 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
}
._neutral_1yd3p_203 {
color: #64748b;
}
._legendDot_1yd3p_211 {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
._empty_1yd3p_225 {
min-height: 150px;
display: grid;
place-items: center;
color: #64748b;
font-size: 12px;
border: 1px dashed #e0e9f5;
border-radius: 8px;
margin-top: 6px;
}
/* ---------- suggested question chips (above the Ask AI box) ---------- */
._chips_1yd3p_249 {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 6px 1px 0;
scrollbar-width: thin;
}
._chip_1yd3p_249 {
flex: 0 0 auto;
border: 1px solid #cfe2ff;
background: #fff;
color: #0b5ed7;
border-radius: 999px;
padding: 4px 11px;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
._chip_1yd3p_249:hover {
background: #edf5ff;
}
._chip_1yd3p_249:focus-visible {
outline: 2px solid #0879ff;
outline-offset: 2px;
}
._chip_1yd3p_249:disabled {
opacity: 0.55;
cursor: default;
}
._chipActive_1yd3p_319 {
background: #0879ff;
border-color: #0879ff;
color: #fff;
}
._chipActive_1yd3p_319:hover {
background: #0870e8;
}
@media (max-width: 992px) {
._row2_1yd3p_165,
._row3_1yd3p_173 {
grid-template-columns: 1fr;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ═══════════════════════════════════════════════════
GRADIENT DESIGN SYSTEM
══════════════════════════════════════════════════ */
:root {
/* ── Core Brand Gradients ── */
--grad-primary: linear-gradient(90deg, #7A2CF3 0%, #B94CE8 45%, #F58B69 100%);
--grad-primary-hover: linear-gradient(90deg, #6B1FE8 0%, #A63DDF 45%, #EE7A57 100%);
--grad-primary-disabled: linear-gradient(90deg, #B8A7E8 0%, #D2B7E6 45%, #E7C6B8 100%);
--grad-primary-soft: linear-gradient(90deg, rgba(122, 44, 243, 0.12) 0%, rgba(185, 76, 232, 0.10) 45%, rgba(245, 139, 105, 0.08) 100%);
--grad-primary-border: linear-gradient(90deg, rgba(122, 44, 243, 0.35) 0%, rgba(185, 76, 232, 0.30) 45%, rgba(245, 139, 105, 0.25) 100%);
--grad-card-shimmer: linear-gradient(135deg, rgba(122, 44, 243, 0.06) 0%, rgba(185, 76, 232, 0.04) 50%, rgba(245, 139, 105, 0.06) 100%);
/* ── Solid Stops (extracted from gradient) ── */
--clr-purple: #7A2CF3;
--clr-purple-dark: #6B1FE8;
--clr-violet: #B94CE8;
--clr-peach: #F58B69;
--clr-peach-dark: #EE7A57;
/* ── Semantic tints (gradient-derived) ── */
--clr-purple-10: rgba(122, 44, 243, 0.08);
--clr-purple-15: rgba(122, 44, 243, 0.12);
--clr-purple-20: rgba(122, 44, 243, 0.18);
--clr-purple-30: rgba(122, 44, 243, 0.28);
--clr-violet-10: rgba(185, 76, 232, 0.10);
--clr-peach-10: rgba(245, 139, 105, 0.10);
/* ── Status Colors (gradient-harmonised) ── */
--clr-success: #12b981;
--clr-success-bg: #ecfdf5;
--clr-success-bd: #a7f3d0;
--clr-warning: #f59e0b;
--clr-warning-bg: #fffbeb;
--clr-warning-bd: #fcd34d;
--clr-error: #ef4444;
--clr-error-bg: #fef2f2;
--clr-error-bd: #fca5a5;
--clr-error-dark: #dc2626;
/* ── Neutrals ── */
--clr-white: #ffffff;
--clr-t1: #1c1917;
--clr-t2: #6b6560;
--clr-tm: #a8a29e;
--clr-border: #e2ddd6;
--clr-border2: #ece9e3;
/* ── Board / Column Backgrounds ── */
--bg-board: #edeae4;
--col-bg-new: #f5f4f1;
--col-bg-progress: #f4f0fc;
--col-bg-review: #fdf6ec;
--col-bg-completed: #f0f8f4;
--col-acc-new: #6b7280;
--col-acc-progress: #7A2CF3;
--col-acc-review: #f59e0b;
--col-acc-completed: #12b981;
/* ── Surface ── */
--card: #ffffff;
--sidebar-bg: #ffffff;
--header-bg: #ffffff;
/* ── Radii ── */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 18px;
/* ── Shadows ── */
--sh-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
--sh-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
--sh-lg: 0 8px 40px rgba(0, 0, 0, 0.13), 0 2px 10px rgba(0, 0, 0, 0.07);
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--clr-border);
border-radius: 4px;
}
/* ═══════════════════════════════════════════════════
LAYOUT
══════════════════════════════════════════════════ */
.ab-layout {
display: flex;
height: 100vh;
overflow: hidden;
background: var(--bg-board);
}
/* ═══════════════════════════════════════════════════
LEFT SIDEBAR
══════════════════════════════════════════════════ */
.ab-left-sb {
width: 216px;
background: var(--sidebar-bg);
border-right: 1px solid var(--clr-border);
display: flex;
flex-direction: column;
padding: 18px 14px 14px;
overflow-y: auto;
flex-shrink: 0;
}
.ab-sb-brand h2 {
font-size: 14px;
font-weight: 700;
color: var(--clr-t1);
line-height: 1.1;
}
.ab-sb-brand p {
font-size: 11px;
color: var(--clr-tm);
margin-top: 2px;
}
.ab-sec-title {
font-size: 10px;
font-weight: 600;
color: var(--clr-tm);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.ab-stat-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.ab-stat-lbl {
font-size: 11px;
color: var(--clr-t2);
}
.ab-stat-bdg {
display: flex;
align-items: center;
gap: 4px;
}
.ab-s-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.ab-s-val {
font-size: 10px;
font-weight: 600;
font-family: "DM Mono", monospace;
}
.ab-roster-sec {
margin-top: 22px;
}
.ab-r-item {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 6px;
border-radius: var(--r-md);
cursor: pointer;
transition: background 0.15s;
margin-bottom: 1px;
}
.ab-r-item:hover {
background: #f5f4f1;
}
.ab-r-av {
width: 34px;
height: 34px;
border-radius: var(--r-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
position: relative;
}
.ab-r-online {
position: absolute;
bottom: 1px;
right: 1px;
width: 7px;
height: 7px;
border-radius: 50%;
border: 1.5px solid #fff;
}
.ab-r-info h4 {
font-size: 12px;
font-weight: 600;
color: var(--clr-t1);
line-height: 1.2;
}
.ab-r-info p {
font-size: 10px;
color: var(--clr-tm);
line-height: 1.3;
}
/* ═══════════════════════════════════════════════════
MAIN
══════════════════════════════════════════════════ */
.ab-main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
/* ═══════════════════════════════════════════════════
BOARD HEADER
══════════════════════════════════════════════════ */
.ab-brd-hdr {
background: var(--header-bg);
border-bottom: 1px solid var(--clr-border);
padding: 0 22px;
height: 54px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
gap: 12px;
}
.ab-brd-title-g {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.ab-brd-title-g h1 {
font-size: 18px;
font-weight: 700;
color: var(--clr-t1);
white-space: nowrap;
}
.ab-live-bdg {
display: flex;
align-items: center;
gap: 5px;
background: var(--clr-success-bg);
border: 1px solid var(--clr-success-bd);
border-radius: 20px;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
color: var(--clr-success);
white-space: nowrap;
}
.ab-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--clr-success);
animation: ab-pulse 2s infinite;
}
@keyframes ab-pulse {
0%,
100% {
opacity: 1
}
50% {
opacity: 0.35
}
}
.ab-brd-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.ab-srch {
display: flex;
align-items: center;
gap: 7px;
background: #f5f4f1;
border: 1px solid var(--clr-border);
border-radius: var(--r-md);
padding: 6px 11px;
width: 230px;
transition: border-color 0.15s;
}
.ab-srch:focus-within {
border-color: rgba(122, 44, 243, 0.4);
}
.ab-srch input {
border: none;
background: transparent;
font-family: "DM Sans", sans-serif;
font-size: 12px;
color: var(--clr-t1);
outline: none;
width: 100%;
}
.ab-srch input::placeholder {
color: var(--clr-tm);
}
.add-btn {
background: var(--grad-primary) !important;
color: #fff !important;
border: none !important;
border-radius: var(--r-md) !important;
padding: 7px 14px !important;
font-size: 12px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: opacity 0.15s, transform 0.15s !important;
white-space: nowrap;
}
.add-btn:hover {
opacity: 0.88;
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════
BOARD
══════════════════════════════════════════════════ */
.ab-board {
flex: 1;
display: flex;
overflow-x: auto;
padding: 20px 22px;
gap: 14px;
align-items: flex-start;
background: var(--bg-board);
}
.ab-board-loading {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--clr-tm);
font-size: 13px;
}
/* ═══════════════════════════════════════════════════
SPINNER
══════════════════════════════════════════════════ */
.ab-spinner {
width: 28px;
height: 28px;
border: 3px solid var(--clr-border);
border-top-color: var(--clr-purple);
border-radius: 50%;
animation: ab-spin 0.7s linear infinite;
}
@keyframes ab-spin {
to {
transform: rotate(360deg);
}
}
.ab-btn-spin {
display: inline-block;
width: 11px;
height: 11px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: ab-spin 0.6s linear infinite;
vertical-align: middle;
margin-right: 4px;
}
/* ═══════════════════════════════════════════════════
KANBAN COLUMN
══════════════════════════════════════════════════ */
.ab-col {
min-width: 240px;
width: 240px;
display: flex;
flex-direction: column;
flex-shrink: 0;
border-radius: var(--r-xl);
padding: 14px 10px 10px;
max-height: calc(100vh - 94px);
min-height: 260px;
}
.ab-col.ab-col-new {
background: var(--col-bg-new);
}
.ab-col.ab-col-inProgress {
background: var(--col-bg-progress);
}
.ab-col.ab-col-inReview {
background: var(--col-bg-review);
}
.ab-col.ab-col-completed {
background: var(--col-bg-completed);
}
.ab-col-hdr {
margin-bottom: 11px;
padding: 0 2px;
flex-shrink: 0;
}
.ab-col-title-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.ab-col-icon {
font-size: 13px;
line-height: 1;
display: flex;
align-items: center;
}
.ab-col-title {
font-size: 13px;
font-weight: 700;
color: var(--clr-t1);
}
.ab-col-cnt {
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 20px;
padding: 1px 8px;
font-size: 10px;
font-weight: 600;
color: var(--clr-t2);
}
.ab-col-desc {
font-size: 10px;
color: var(--clr-tm);
line-height: 1.45;
}
.ab-col-body {
display: flex;
flex-direction: column;
gap: 9px;
min-height: 160px;
padding: 2px 2px 4px;
border-radius: var(--r-lg);
overflow-y: auto;
flex: 1;
}
.ab-col-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 440px;
font-size: 11px;
color: var(--clr-tm);
overflow-y: hidden !important;
}
.ab-col-empty-icon {
font-size: 22px;
opacity: 0.5;
}
/* ═══════════════════════════════════════════════════
TASK CARD
══════════════════════════════════════════════════ */
.ab-card {
background: #fff;
border: 1px solid var(--clr-border);
border-radius: var(--r-lg);
padding: 13px 13px 11px;
cursor: pointer;
flex-shrink: 0;
transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
box-shadow: var(--sh-sm);
user-select: none;
position: relative;
}
.ab-card:hover {
box-shadow: var(--sh-md);
transform: translateY(-1px);
border-color: rgba(122, 44, 243, 0.25);
}
.ab-card-del {
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
border-radius: 50%;
background: transparent;
border: none;
color: var(--clr-tm);
font-size: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.15s, background 0.15s, color 0.15s;
z-index: 2;
}
.ab-card:hover .ab-card-del {
opacity: 1;
}
.ab-card-del:hover {
background: var(--clr-error-bg);
color: var(--clr-error);
}
/* In-Progress animated gradient border */
.ab-card.ab-inp {
border: 1.5px solid transparent;
}
.ab-card.ab-inp::before {
content: "";
position: absolute;
inset: -1.5px;
border-radius: var(--r-lg);
background: var(--grad-primary);
background-size: 300% 100%;
animation: ab-borderMove 3s linear infinite;
z-index: 0;
}
.ab-card.ab-inp::after {
content: "";
position: absolute;
inset: 1.5px;
border-radius: calc(var(--r-lg) - 1.5px);
background: #fff;
z-index: 0;
}
.ab-card.ab-inp>* {
position: relative;
z-index: 1;
}
@keyframes ab-borderMove {
0% {
background-position: 0% 0
}
100% {
background-position: 300% 0
}
}
.ab-card-title {
font-size: 12px;
font-weight: 600;
color: var(--clr-t1);
line-height: 1.45;
margin-bottom: 10px;
padding-right: 18px;
}
.ab-pip {
display: flex;
gap: 3px;
margin-bottom: 10px;
}
.ab-pip-d {
height: 4px;
border-radius: 3px;
flex: 1;
transition: background 0.2s;
}
.ab-pip-d.ab-on {
background: var(--grad-primary);
}
.ab-pip-d.ab-off {
background: var(--clr-border);
}
.ab-ag-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 9px;
}
.ab-ag-av {
width: 20px;
height: 20px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
.ab-ag-nm {
font-size: 11px;
color: var(--clr-t2);
font-weight: 500;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ab-ag-on {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--clr-success);
flex-shrink: 0;
}
.ab-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 9px;
}
.ab-tag {
padding: 2px 8px;
border-radius: 20px;
font-size: 10px;
font-weight: 500;
background: var(--clr-purple-10);
color: var(--clr-purple);
border: 1px solid rgba(122, 44, 243, 0.15);
}
.ab-tag.ab-pri {
background: #fef3c7;
color: #92400e;
border-color: #fcd34d;
}
.ab-card-ft {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.ab-card-time {
font-size: 10px;
color: var(--clr-tm);
flex-shrink: 0;
}
.ab-pub-badge {
font-size: 9px;
font-weight: 600;
padding: 1px 6px;
border-radius: 20px;
text-transform: capitalize;
background: #f3f4f6;
color: var(--clr-t2);
}
.ab-pub-badge.ab-pub-ok {
background: var(--clr-success-bg);
color: #059669;
}
.ab-pub-badge.ab-pub-fail {
background: var(--clr-error-bg);
color: var(--clr-error);
}
.ab-card-details-btn {
padding: 5px;
border-radius: 5px;
background-color: var(--clr-purple-10);
color: var(--clr-t2);
}
/* ═══════════════════════════════════════════════════
DELETE DIALOG
══════════════════════════════════════════════════ */
.ab-dlg-ov {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 200;
backdrop-filter: blur(3px);
animation: ab-fadeIn 0.2s ease;
}
.ab-dlg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 201;
background: #fff;
border-radius: var(--r-xl);
padding: 28px 28px 22px;
width: 360px;
box-shadow: var(--sh-lg);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
animation: ab-dlgIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ab-dlgIn {
from {
transform: translate(-50%, -48%) scale(0.92);
opacity: 0;
}
to {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.ab-dlg-icon {
font-size: 36px;
margin-bottom: 12px;
}
.ab-dlg-title {
font-size: 16px;
font-weight: 700;
color: var(--clr-t1);
margin-bottom: 8px;
}
.ab-dlg-msg {
font-size: 12px;
color: var(--clr-t2);
line-height: 1.6;
margin-bottom: 22px;
}
.ab-dlg-msg strong {
color: var(--clr-t1);
}
.ab-dlg-actions {
display: flex;
gap: 10px;
width: 100%;
}
.ab-dlg-cancel {
flex: 1;
padding: 9px 0;
border-radius: var(--r-md);
border: 1px solid var(--clr-border);
background: #fff;
font-family: "DM Sans", sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--clr-t2);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.ab-dlg-cancel:hover:not(:disabled) {
background: #f5f4f1;
border-color: var(--clr-t2);
}
.ab-dlg-cancel:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ab-dlg-confirm {
flex: 1;
padding: 9px 0;
border-radius: var(--r-md);
border: none;
background: var(--grad-primary);
font-family: "DM Sans", sans-serif;
font-size: 13px;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ab-dlg-confirm:hover:not(:disabled) {
opacity: 0.88;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(122, 44, 243, 0.3);
}
.ab-dlg-confirm:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ═══════════════════════════════════════════════════
OFFCANVAS
══════════════════════════════════════════════════ */
.ab-oc-ov {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.13);
z-index: 100;
backdrop-filter: blur(1.5px);
animation: ab-fadeIn 0.2s ease;
}
@keyframes ab-fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
.ab-oc-panel {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 460px;
background: #fff;
border-left: 1px solid var(--clr-border);
box-shadow: var(--sh-lg);
z-index: 9999;
display: flex;
flex-direction: column;
animation: ab-slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
@keyframes ab-slideIn {
from {
transform: translateX(100%)
}
to {
transform: translateX(0)
}
}
.ab-oc-loading {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--clr-tm);
font-size: 13px;
}
.ab-oc-hdr {
position: relative;
padding: 16px 18px 12px;
border-bottom: 1px solid var(--clr-border);
flex-shrink: 0;
}
.ab-oc-hdr-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 9px;
gap: 10px;
}
.ab-oc-title {
font-size: 15px;
font-weight: 700;
color: var(--clr-t1);
line-height: 1.35;
}
.ab-close-btn {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
background: #fff;
border: none;
font-size: 20px;
cursor: pointer;
}
.ab-close-btn:hover {
color: var(--clr-t1);
}
.ab-oc-meta {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 7px;
}
.ab-tid-bdg {
background: #f3f4f6;
border-radius: 20px;
padding: 2px 9px;
font-size: 10px;
font-family: "DM Mono", monospace;
color: var(--clr-t2);
font-weight: 500;
}
.ab-st-bdg {
border-radius: 20px;
padding: 2px 9px;
font-size: 10px;
font-weight: 600;
}
.ab-st-bdg.ab-cmp {
background: var(--clr-success-bg);
color: #059669;
border: 1px solid var(--clr-success-bd);
}
.ab-st-bdg.ab-inp2 {
background: var(--clr-purple-10);
color: var(--clr-purple);
border: 1px solid rgba(122, 44, 243, 0.2);
}
.ab-st-bdg.ab-rev {
background: var(--clr-warning-bg);
color: #d97706;
border: 1px solid var(--clr-warning-bd);
}
.ab-st-bdg.ab-new2 {
background: #f3f4f6;
color: #6b7280;
border: 1px solid #e5e7eb;
}
.ab-pri-bdg {
border-radius: 20px;
padding: 2px 9px;
font-size: 10px;
font-weight: 600;
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
text-transform: capitalize;
}
.ab-oc-assigned {
font-size: 11px;
color: var(--clr-tm);
display: flex;
align-items: center;
gap: 5px;
}
.ab-oc-assigned span {
color: var(--clr-t2);
font-weight: 500;
}
.ab-oc-scroll {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0;
}
.ab-oc-section {
padding: 16px 18px;
border-bottom: 1px solid var(--clr-border);
}
.ab-oc-section:last-child {
border-bottom: none;
}
.ab-oc-section-title {
font-size: 11px;
font-weight: 700;
color: var(--clr-t1);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ab-oc-desc {
font-size: 11px;
color: var(--clr-t2);
line-height: 1.6;
padding: 10px 12px;
background: #f9f8f6;
border-radius: var(--r-md);
border: 1px solid var(--clr-border2);
}
/* Pipeline Tracker */
.ab-pip-steps {
display: flex;
align-items: flex-start;
}
.ab-pip-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
flex: 1;
position: relative;
}
.ab-pip-step:not(:last-child)::after {
content: "";
position: absolute;
top: 17px;
left: 55%;
right: -45%;
height: 2px;
background: var(--clr-border);
z-index: 0;
}
.ab-pip-step.ab-done:not(:last-child)::after {
background: var(--grad-primary);
}
.ab-pip-av {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
border: 2px solid var(--clr-border);
background: #fff;
position: relative;
z-index: 1;
transition: border-color 0.2s, background 0.2s;
}
.ab-pip-step.ab-done .ab-pip-av {
border-color: var(--clr-purple);
}
.ab-pip-nm {
font-size: 8px;
font-weight: 600;
color: var(--clr-t2);
text-align: center;
max-width: 48px;
}
.ab-pip-rl {
font-size: 7px;
color: var(--clr-tm);
text-align: center;
max-width: 52px;
line-height: 1.3;
}
/* Publication section */
.ab-pub-section-hdr {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
gap: 4px;
}
.ab-pub-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.ab-pub-btn,
.ab-pub-btn1 {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: var(--r-md);
font-family: "DM Sans", sans-serif;
font-size: 11px;
font-weight: 600;
cursor: pointer;
border: none;
transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
white-space: nowrap;
}
.ab-pub-btn {
padding: 5px 12px;
}
.ab-pub-btn1 {
padding: 3px 8px;
}
.ab-pub-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none !important;
}
.ab-pub-btn-primary {
background: var(--grad-primary);
color: #fff;
}
.ab-pub-btn-primary:hover:not(:disabled) {
opacity: 0.88;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(122, 44, 243, 0.3);
}
.ab-pub-btn-retry {
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
}
.ab-pub-btn-retry:hover:not(:disabled) {
background: #fde68a;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}
.ab-pub-btn.ab-pub-btn-done {
background: var(--clr-success-bg) !important;
color: #059669 !important;
border: 1px solid var(--clr-success-bd) !important;
box-shadow: none !important;
}
.ab-pub-feedback {
font-size: 11px;
padding: 6px 10px;
border-radius: var(--r-sm);
margin-bottom: 10px;
line-height: 1.5;
}
.ab-pub-feedback-ok {
background: var(--clr-success-bg);
color: #059669;
border: 1px solid var(--clr-success-bd);
}
.ab-pub-feedback-err {
background: var(--clr-error-bg);
color: var(--clr-error);
border: 1px solid var(--clr-error-bd);
}
.ab-pub-list {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 4px;
}
.ab-pub-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 10px;
background: #f9f8f6;
border: 1px solid var(--clr-border2);
border-radius: var(--r-md);
}
.ab-pub-platform {
font-size: 11px;
font-weight: 500;
color: var(--clr-t2);
text-transform: capitalize;
}
.ab-pub-item-right {
display: flex;
align-items: center;
gap: 6px;
}
.ab-pub-err {
cursor: help;
border: 1px solid var(--clr-error-bd);
border-radius: 50%;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 700;
color: var(--clr-error);
}
/* Accordion */
.ab-acc-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.ab-acc-item {
border: 1px solid var(--clr-border);
border-radius: var(--r-md);
background: #fff;
overflow: hidden;
transition: border-color 0.15s;
}
.ab-acc-item.ab-acc-open {
border-color: rgba(122, 44, 243, 0.4);
}
.ab-acc-hdr {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 10px 12px !important;
cursor: pointer;
transition: background 0.15s;
user-select: none;
gap: 6px;
}
.ab-acc-hdr:hover {
background: rgba(122, 44, 243, 0.04);
}
.ab-acc-hdr-right {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.ab-acc-left {
display: flex;
align-items: center;
gap: 9px;
}
.ab-acc-av {
width: 26px;
height: 26px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.ab-acc-info {
display: flex;
flex-direction: column;
gap: 1px;
}
.ab-acc-lbl {
font-size: 12px;
font-weight: 600;
color: var(--clr-t1);
}
.ab-acc-from {
font-size: 10px;
color: var(--clr-tm);
}
.ab-acc-arrow {
font-size: 9px;
color: var(--clr-tm);
flex-shrink: 0;
margin-left: 2px;
transition: color 0.2s;
}
.ab-acc-item.ab-acc-open .ab-acc-arrow {
color: var(--clr-purple);
}
.ab-acc-body {
padding: 0 12px 12px;
border-top: 1px solid var(--clr-border2);
background: #fafafa;
}
.ab-acc-text {
font-size: 11px;
color: var(--clr-t2);
line-height: 1.65;
white-space: pre-wrap;
padding-top: 10px;
}
.ab-acc-json {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 10px;
}
.ab-acc-field-lbl {
display: block;
font-size: 9px;
font-weight: 700;
color: var(--clr-purple);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 4px;
}
.ab-acc-field p {
font-size: 11px;
color: var(--clr-t2);
line-height: 1.6;
}
.ab-acc-field ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 3px;
}
.ab-acc-field ul li {
font-size: 11px;
color: var(--clr-t2);
line-height: 1.5;
padding-left: 12px;
position: relative;
}
.ab-acc-field ul li::before {
content: "·";
position: absolute;
left: 0;
color: var(--clr-purple);
font-weight: 700;
}
.ab-acc-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.ab-acc-tag {
padding: 2px 7px;
border-radius: 20px;
font-size: 10px;
background: #f3f4f6;
color: var(--clr-t2);
border: 1px solid var(--clr-border);
}
.ab-acc-tag.ab-acc-tag-hash {
background: var(--clr-purple-10);
color: var(--clr-purple);
border-color: rgba(122, 44, 243, 0.2);
}
.ab-acc-img-wrap {
padding-top: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ab-acc-img {
width: 100%;
border-radius: var(--r-md);
border: 1px solid var(--clr-border);
display: block;
object-fit: cover;
max-height: 240px;
}
.ab-acc-prompt {
font-size: 10px;
color: var(--clr-tm);
line-height: 1.5;
background: #f5f4f1;
padding: 7px 9px;
border-radius: var(--r-sm);
border: 1px solid var(--clr-border2);
}
.ab-acc-img-preview {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
.ab-acc-img-preview:hover {
transform: scale(1.05);
}
.ab-acc-img-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
color: var(--clr-purple);
text-decoration: none;
padding: 5px 10px;
border: 1px solid rgba(122, 44, 243, 0.25);
border-radius: var(--r-sm);
background: var(--clr-purple-10);
transition: background 0.15s, border-color 0.15s;
align-self: flex-start;
}
.ab-acc-img-link:hover {
background: rgba(122, 44, 243, 0.18);
border-color: var(--clr-purple);
}
/* Conversation */
.ab-oc-section-msgs {
background: #fafaf9;
}
.ab-msgs-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.ab-cb-wrap {
display: flex;
gap: 8px;
align-items: flex-start;
}
.ab-cb-wrap.ab-usr {
flex-direction: row-reverse;
}
.ab-cb-av {
width: 26px;
height: 26px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.ab-bubble {
max-width: 280px;
padding: 8px 11px;
border-radius: var(--r-md);
font-size: 12px;
line-height: 1.5;
color: var(--clr-t1);
background: #f5f4f1;
border: 1px solid var(--clr-border);
}
.ab-bubble.ab-usr-b {
background: var(--grad-primary);
color: #fff;
border-color: transparent;
}
.ab-cb-sender {
font-size: 10px;
font-weight: 700;
color: var(--clr-t2);
margin-bottom: 3px;
}
.ab-cb-time {
font-size: 9px;
color: var(--clr-tm);
margin-top: 3px;
}
.ab-sys-msg {
text-align: center;
font-size: 10px;
color: var(--clr-tm);
padding: 3px 12px;
background: #f0efed;
border-radius: 20px;
align-self: center;
border: 1px solid var(--clr-border);
}
/* Chat input */
.ab-ci-bar {
padding: 10px 18px 12px;
border-top: 1px solid var(--clr-border);
display: flex;
align-items: center;
gap: 7px;
background: #fff;
flex-shrink: 0;
}
.ab-ci-bar input {
flex: 1;
border: 1px solid var(--clr-border);
border-radius: var(--r-md);
padding: 8px 11px;
font-family: "DM Sans", sans-serif;
font-size: 12px;
color: var(--clr-t1);
outline: none;
background: #f5f4f1;
transition: border-color 0.15s;
}
.ab-ci-bar input:focus {
border-color: rgba(122, 44, 243, 0.4);
}
.ab-ci-bar input::placeholder {
color: var(--clr-tm);
}
.ab-ci-ico {
font-size: 14px;
color: var(--clr-tm);
cursor: pointer;
padding: 4px;
transition: color 0.15s;
}
.ab-ci-ico:hover {
color: var(--clr-purple);
}
.ab-ci-send {
width: 32px;
height: 32px;
border-radius: var(--r-sm);
background: var(--grad-primary);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 700;
transition: opacity 0.15s, transform 0.15s;
flex-shrink: 0;
}
.ab-ci-send:hover {
opacity: 0.88;
transform: translateY(-1px);
}
@keyframes ab-toast-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(-16px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* Version navigator */
.acc-ver-bar {
display: inline-flex;
align-items: center;
gap: 2px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 2px 4px;
flex-shrink: 0;
}
.acc-ver-btn {
width: 18px;
height: 18px;
border: none;
background: transparent;
cursor: pointer;
color: #6b7280;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
line-height: 1;
padding: 0;
transition: background 0.12s, color 0.12s;
}
.acc-ver-btn:hover:not(:disabled) {
background: var(--clr-purple-10);
color: var(--clr-purple);
}
.acc-ver-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.acc-ver-label {
font-size: 10px;
font-weight: 600;
color: #374151;
font-family: "DM Mono", monospace;
min-width: 26px;
text-align: center;
user-select: none;
}
.acc-ver-spin {
display: inline-block;
width: 10px;
height: 10px;
border: 1.5px solid rgba(122, 44, 243, 0.25);
border-top-color: var(--clr-purple);
border-radius: 50%;
animation: acc-rot 0.65s linear infinite;
margin: 3px 6px;
}
@keyframes acc-rot {
to {
transform: rotate(360deg);
}
}
.acc-ver-ts {
font-size: 10px;
color: var(--clr-tm);
background: #f9f8f6;
border: 1px solid var(--clr-border2);
border-radius: 6px;
padding: 4px 9px;
margin-bottom: 10px;
display: inline-block;
}
/* Task output actions */
.toa-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
margin-left: auto;
padding-right: 6px;
}
.toa-icon-btn {
width: 24px;
height: 24px;
border-radius: 6px;
border: 1px solid transparent;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--clr-tm);
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
flex-shrink: 0;
}
.toa-icon-btn:hover:not(:disabled) {
transform: scale(1.1);
}
.toa-icon-btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.toa-reload:hover:not(:disabled) {
background: var(--clr-purple-10);
color: var(--clr-purple);
border-color: rgba(122, 44, 243, 0.2);
}
.toa-edit:hover:not(:disabled) {
background: #fff7ed;
color: var(--clr-warning);
border-color: rgba(245, 158, 11, 0.2);
}
.toa-icon-btn.toa-done {
background: var(--clr-success-bg);
color: #059669;
border-color: var(--clr-success-bd);
}
.toa-icon-btn.toa-err {
background: var(--clr-error-bg);
color: var(--clr-error);
border-color: var(--clr-error-bd);
}
.toa-btn-spin {
display: inline-block;
width: 9px;
height: 9px;
border: 1.5px solid rgba(122, 44, 243, 0.25);
border-top-color: var(--clr-purple);
border-radius: 50%;
animation: toa-spin 0.6s linear infinite;
}
@keyframes toa-spin {
to {
transform: rotate(360deg);
}
}
/* Publish popup */
.ab-pub-popup-wrap {
position: relative;
display: inline-block;
}
.ab-pub-popup {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
padding: 12px 14px;
min-width: 190px;
z-index: 200;
display: flex;
flex-direction: column;
gap: 8px;
}
.ab-pub-popup-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: #94a3b8;
margin: 0;
}
.ab-pub-popup-row {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
padding: 3px 0;
}
.ab-pub-popup-row input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: var(--clr-purple);
cursor: pointer;
}
.ab-pub-popup-icon {
font-size: 16px;
display: flex;
align-items: center;
}
.ab-pub-popup-name {
font-weight: 500;
}
.ab-pub-popup-send {
margin-top: 4px;
width: 100%;
padding: 7px 0;
background: var(--grad-primary);
color: #fff;
border: none;
border-radius: 7px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.ab-pub-popup-send:hover:not(:disabled) {
opacity: 0.88;
}
.ab-pub-popup-send:disabled {
background: var(--grad-primary-disabled);
cursor: not-allowed;
}
.ab-btn-spin {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ════════════════════════════════════════════════════════════════
AGENT PREVIEW MODEL
════════════════════════════════════════════════════════════════ */
.apc2-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 400;
backdrop-filter: blur(4px);
animation: apc2-fade 0.2s ease;
}
@keyframes apc2-fade {
from {
opacity: 0
}
to {
opacity: 1
}
}
.apc2-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: min(95vw, 1200px);
max-height: 90vh;
background: #fff;
border-radius: 16px;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22), 0 4px 24px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
overflow: hidden;
animation: apc2-in 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes apc2-in {
from {
transform: translate(-50%, -47%) scale(0.93);
opacity: 0;
}
to {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.apc2-modal-header {
position: absolute;
top: 0;
right: 0;
padding: 10px;
z-index: 20;
}
.apc2-close {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #f3f4f6;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--clr-tm);
transition: background 0.15s, color 0.15s;
}
.apc2-close:hover {
background: #e5e7eb;
color: var(--clr-t1);
}
.apc2-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 24px 24px 12px;
background: #f4f0fc;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
min-height: 700px;
}
.apc2-body::-webkit-scrollbar {
width: 4px;
}
.apc2-body::-webkit-scrollbar-thumb {
background: rgba(122, 44, 243, 0.2);
border-radius: 4px;
}
.apc2-head-row,
.apc2-cards-scroll {
position: relative;
z-index: 2;
}
.apc2-head-row {
display: flex;
justify-content: center;
}
.apc2-head-card {
background: #fff;
border-radius: 14px;
padding: 16px 18px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid #eee;
max-width: 700px;
}
.apc2-head-av-col {
display: flex;
flex-direction: column;
align-items: center;
min-width: 80px;
}
.apc2-head-av1 {
width: 35px;
height: 35px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
position: relative;
}
.apc2-head-av-check {
position: absolute;
bottom: -2px;
right: -2px;
background: var(--clr-success);
color: white;
font-size: 6px;
border-radius: 50%;
padding: 2px 4px;
}
.apc2-head-agent-label {
font-size: 9px;
font-weight: 600;
color: #6b7280;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 20px;
padding: 2px 8px;
white-space: nowrap;
margin-top: 2px;
}
.apc2-head-content {
flex: 1;
}
.apc2-head-top-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.apc2-head-title {
font-size: 12px;
font-weight: 600;
color: #111;
margin-bottom: 6px;
}
.apc2-head-created {
text-align: right;
font-size: 12px;
color: #777;
}
.apc2-head-badges {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.apc2-bdg-completed {
background: var(--clr-success-bg);
color: #059669;
border: 1px solid var(--clr-success-bd);
border-radius: 20px;
padding: 2px 9px;
font-size: 8px;
font-weight: 600;
}
.apc2-bdg-high {
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
border-radius: 20px;
padding: 2px 9px;
font-size: 8px;
font-weight: 600;
}
.apc2-head-summary-text {
font-size: 10px;
color: #6b6560;
line-height: 1.6;
}
/* Agent cards row */
.apc2-cards-scroll {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 8px;
align-items: flex-start;
justify-content: space-evenly;
position: relative;
}
.apc2-cards-scroll::-webkit-scrollbar {
height: 4px;
}
.apc2-cards-scroll::-webkit-scrollbar-thumb {
background: rgba(122, 44, 243, 0.25);
border-radius: 4px;
}
.apc2-agent-card {
min-width: 200px;
max-width: 200px;
background: #fff;
border: 1px solid var(--clr-border);
border-radius: 13px;
padding: 13px;
display: flex;
flex-direction: column;
gap: 9px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
flex-shrink: 0;
max-height: 420px;
overflow-y: auto;
}
.apc2-agent-card::-webkit-scrollbar {
width: 3px;
}
.apc2-agent-card::-webkit-scrollbar-thumb {
background: rgba(122, 44, 243, 0.2);
border-radius: 3px;
}
.apc2-card-top {
display: flex;
align-items: center;
gap: 8px;
}
.apc2-card-av {
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.apc2-card-info {
flex: 1;
min-width: 0;
}
.apc2-card-name {
font-size: 11px;
font-weight: 700;
color: var(--clr-t1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.apc2-card-role {
font-size: 9px;
color: var(--clr-tm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.apc2-card-badges {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
justify-content: space-between;
border-top: 1px solid var(--clr-border2);
padding-top: 8px;
}
.apc2-badge-live {
font-size: 9px;
font-weight: 600;
color: #059669;
background: var(--clr-success-bg);
border: 1px solid var(--clr-success-bd);
border-radius: 20px;
padding: 1px 7px;
}
.apc2-badge-processing {
color: #d97706 !important;
background: var(--clr-warning-bg) !important;
border-color: var(--clr-warning-bd) !important;
}
.apc2-gen-label {
font-size: 9px;
font-weight: 700;
color: var(--clr-tm);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.apc2-waiting {
font-size: 10px;
color: #d1d5db;
font-style: italic;
padding: 12px 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
/* Output blocks */
.apc2-output-block {
display: flex;
flex-direction: column;
gap: 7px;
}
.apc2-plain-text {
font-size: 10px;
color: #6b6560;
line-height: 1.6;
white-space: pre-wrap;
}
.apc2-output-label {
font-size: 9px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.apc2-field {
display: flex;
flex-direction: column;
gap: 3px;
}
.apc2-field-lbl {
font-size: 8px;
font-weight: 700;
color: var(--clr-purple);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.apc2-field-val {
font-size: 10px;
color: #6b6560;
line-height: 1.55;
}
.apc2-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
padding: 0;
margin: 0;
}
.apc2-list li {
font-size: 10px;
color: #6b6560;
line-height: 1.5;
padding-left: 11px;
position: relative;
}
.apc2-list li::before {
content: "·";
position: absolute;
left: 0;
color: var(--clr-purple);
font-weight: 700;
}
.apc2-chips-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.apc2-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 20px;
font-size: 9px;
font-weight: 500;
background: #f3f4f6;
color: #374151;
border: 1px solid #e5e7eb;
}
.apc2-chip.apc2-chip-hash {
background: var(--clr-purple-10);
color: var(--clr-purple);
border-color: rgba(122, 44, 243, 0.2);
}
.apc2-chip-x {
cursor: pointer;
opacity: 0.5;
font-size: 8px;
}
.apc2-meta-box {
font-size: 10px;
color: var(--clr-t1);
background: #f9f8f6;
border: 1px solid var(--clr-border2);
border-radius: 7px;
padding: 6px 9px;
line-height: 1.5;
}
.apc2-check-row {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 4px;
}
.apc2-check-box {
width: 14px;
height: 14px;
border-radius: 3px;
border: 1.5px solid #d1d5db;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 700;
color: transparent;
flex-shrink: 0;
}
.apc2-check-box.apc2-check-done {
background: var(--grad-primary);
border-color: transparent;
color: #fff;
}
.apc2-check-label {
font-size: 10px;
color: #6b6560;
}
.apc2-quality-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 4px;
}
.apc2-quality-lbl {
font-size: 10px;
color: #6b7280;
font-weight: 500;
}
.apc2-quality-val {
font-size: 12px;
font-weight: 700;
color: var(--clr-purple);
background: var(--clr-purple-10);
border-radius: 6px;
padding: 1px 8px;
}
.apc2-status-badge {
font-size: 12px;
font-weight: 600;
margin-top: 2px;
}
.apc2-gen-img {
width: 100%;
border-radius: 8px;
object-fit: cover;
cursor: pointer;
max-height: 140px;
transition: transform 0.2s;
border: 1px solid var(--clr-border);
}
.apc2-gen-img:hover {
transform: scale(1.02);
}
.apc2-empty {
text-align: center;
padding: 40px;
font-size: 13px;
color: var(--clr-tm);
}
/* Publish footer */
.apc2-footer {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
padding: 12px 13px 10px;
border-top: 1px solid var(--clr-border);
background: #fff;
flex-shrink: 0;
flex-wrap: wrap;
}
.apc2-footer-left {
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
min-width: 0;
}
.apc2-footer-title1 {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 12px;
font-weight: 700;
color: var(--clr-t1);
}
.apc2-footer-sub1 {
font-size: 11px;
color: var(--clr-tm);
margin-top: 5px;
}
.apc2-platforms {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.apc2-plat-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 10px;
border: 1.5px solid var(--clr-border);
background: #f5f4f1;
font-family: "DM Sans", sans-serif;
font-size: 12px;
font-weight: 500;
color: #4b5563;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
position: relative;
}
.apc2-plat-btn:hover {
border-color: var(--clr-purple);
background: var(--clr-purple-10);
}
.apc2-plat-btn.apc2-plat-sel {
border-color: var(--clr-purple);
background: rgba(122, 44, 243, 0.08);
color: var(--clr-t1);
}
.apc2-plat-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
background-color: #e6e1e1;
color: #666464;
}
.apc2-plat-icon {
display: flex;
align-items: center;
flex-shrink: 0;
}
.apc2-plat-label {
white-space: nowrap;
font-size: 12px;
}
.apc2-plat-radio {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #d1d5db;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: auto;
transition: border-color 0.15s;
}
.apc2-plat-btn.apc2-plat-sel .apc2-plat-radio {
border-color: var(--clr-purple);
}
.apc2-plat-radio-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--clr-purple);
}
.apc2-btn-preview {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 10px;
border-radius: 10px;
font-family: "DM Sans", sans-serif;
font-size: 9px;
font-weight: 600;
cursor: pointer;
background: #fff;
color: var(--clr-purple);
border: 1.5px solid rgba(122, 44, 243, 0.3);
transition: background 0.15s, border-color 0.15s;
}
.apc2-btn-preview:hover {
background: var(--clr-purple-10);
border-color: var(--clr-purple);
}
.apc2-btn-preview1 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 10px;
border-radius: 10px;
font-family: "DM Sans", sans-serif;
background: var(--grad-primary);
color: #fff;
font-size: 9px;
font-weight: 600;
cursor: pointer;
border: none;
transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
width: 65%;
}
.apc2-btn-preview1:hover {
opacity: 0.88;
transform: translateY(-1px);
}
.apc2-btn-done {
background: var(--clr-success-bg) !important;
color: #059669 !important;
border: 1px solid var(--clr-success-bd) !important;
}
.apc2-spin {
display: inline-block;
width: 11px;
height: 11px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: apc2-spin 0.6s linear infinite;
vertical-align: middle;
}
@keyframes apc2-spin {
to {
transform: rotate(360deg);
}
}
.apc2-trigger-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px;
border-radius: 7px;
border: 1.5px solid rgba(122, 44, 243, 0.3);
background: var(--clr-purple-10);
font-family: "DM Sans", sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--clr-purple);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
white-space: nowrap;
}
.apc2-trigger-btn:hover {
background: rgba(122, 44, 243, 0.18);
border-color: var(--clr-purple);
transform: translateY(-1px);
}
/* Info popup */
.apc2-info-wrapper {
position: relative;
display: inline-block;
}
.apc2-info-icon {
cursor: pointer;
}
.apc2-info-popup {
position: absolute;
top: 130%;
left: 0;
transform: translateX(-50%);
background: #111827;
color: #fff;
padding: 10px 12px;
border-radius: 8px;
font-size: 12px;
width: max-content;
max-width: 400px;
white-space: normal;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
text-align: left;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 100;
}
.apc2-info-wrapper:hover .apc2-info-popup {
opacity: 1;
visibility: visible;
}
.task-time {
font-size: 10px !important;
text-align: end !important;
}
/* Responsive */
@media (max-width: 768px) {
.apc2-modal {
width: 98vw;
max-height: 95vh;
}
.apc2-head-card {
width: 100%;
}
.apc2-footer {
flex-direction: column;
}
}
/* Preview two-panel */
.apv-preview-fullscreen {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
.apv-preview-two-panel {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
}
.apv-preview-left {
width: 55%;
flex-shrink: 0;
background: #edededd4;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.apv-back-btn {
position: absolute;
top: 12px;
left: 12px;
z-index: 10;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 13px;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(8px);
font-family: "DM Sans", sans-serif;
font-size: 11px;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: background 0.15s;
}
.apv-back-btn:hover {
background: rgba(255, 255, 255, 0.18);
}
.apv-img-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px 24px;
}
.apv-preview-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
display: block;
}
.apv-preview-no-img {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: #6b7280;
font-family: "DM Sans", sans-serif;
font-size: 13px;
text-align: center;
}
.apv-preview-right {
width: 45%;
flex-shrink: 0;
background: #fff;
border-left: 1px solid var(--clr-border);
overflow-y: auto;
overflow-x: hidden;
}
.apv-preview-right::-webkit-scrollbar {
width: 4px;
}
.apv-preview-right::-webkit-scrollbar-thumb {
background: rgba(122, 44, 243, 0.2);
border-radius: 4px;
}
.apv-preview-right-inner {
padding: 20px 20px 28px;
display: flex;
flex-direction: column;
gap: 14px;
}
.apv-section-label {
font-size: 9px;
font-weight: 700;
color: var(--clr-tm);
text-transform: uppercase;
letter-spacing: 0.08em;
padding-bottom: 10px;
border-bottom: 1px solid var(--clr-border2);
}
.apv-text-block {
font-family: "DM Sans", sans-serif;
font-size: 12px;
color: var(--clr-t1);
line-height: 1.75;
white-space: pre-wrap;
margin: 0;
}
.apv-no-content {
font-size: 12px;
color: var(--clr-tm);
font-style: italic;
margin: 0;
}
.apv-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.apv-field-lbl {
font-size: 8px;
font-weight: 700;
color: var(--clr-purple);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.apv-field-val {
font-size: 11px;
color: #6b6560;
line-height: 1.6;
margin: 0;
}
.apv-meta-box {
font-size: 11px;
color: var(--clr-t1);
background: #f9f8f6;
border: 1px solid var(--clr-border2);
border-radius: 7px;
padding: 7px 10px;
line-height: 1.5;
}
.apv-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.apv-list li {
font-size: 11px;
color: #6b6560;
line-height: 1.5;
padding-left: 12px;
position: relative;
}
.apv-list li::before {
content: "·";
position: absolute;
left: 0;
color: var(--clr-purple);
font-weight: 700;
}
.apv-chips-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.apv-chip {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 20px;
font-size: 10px;
font-weight: 500;
background: #f3f4f6;
color: #374151;
border: 1px solid #e5e7eb;
}
.apv-chip.apv-chip-hash {
background: var(--clr-purple-10);
color: var(--clr-purple);
border-color: rgba(122, 44, 243, 0.2);
}
@media (max-width: 640px) {
.apv-preview-two-panel {
flex-direction: column;
}
.apv-preview-left {
width: 100%;
height: 260px;
flex-shrink: 0;
}
.apv-preview-right {
width: 100%;
}
}/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow {
direction: ltr;
}
.react-flow__container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.react-flow__pane {
z-index: 1;
cursor: -webkit-grab;
cursor: grab;
}
.react-flow__pane.selection {
cursor: pointer;
}
.react-flow__pane.dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.react-flow__viewport {
transform-origin: 0 0;
z-index: 2;
pointer-events: none;
}
.react-flow__renderer {
z-index: 4;
}
.react-flow__selection {
z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
outline: none;
}
.react-flow .react-flow__edges {
pointer-events: none;
overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
stroke: #b1b1b7;
stroke-width: 1;
fill: none;
}
.react-flow__edge {
pointer-events: visibleStroke;
cursor: pointer;
}
.react-flow__edge.animated path {
stroke-dasharray: 5;
-webkit-animation: dashdraw 0.5s linear infinite;
animation: dashdraw 0.5s linear infinite;
}
.react-flow__edge.animated path.react-flow__edge-interaction {
stroke-dasharray: none;
-webkit-animation: none;
animation: none;
}
.react-flow__edge.inactive {
pointer-events: none;
}
.react-flow__edge.selected,
.react-flow__edge:focus,
.react-flow__edge:focus-visible {
outline: none;
}
.react-flow__edge.selected .react-flow__edge-path,
.react-flow__edge:focus .react-flow__edge-path,
.react-flow__edge:focus-visible .react-flow__edge-path {
stroke: #555;
}
.react-flow__edge-textwrapper {
pointer-events: all;
}
.react-flow__edge-textbg {
fill: white;
}
.react-flow__edge .react-flow__edge-text {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.react-flow__connection {
pointer-events: none;
}
.react-flow__connection .animated {
stroke-dasharray: 5;
-webkit-animation: dashdraw 0.5s linear infinite;
animation: dashdraw 0.5s linear infinite;
}
.react-flow__connectionline {
z-index: 1001;
}
.react-flow__nodes {
pointer-events: none;
transform-origin: 0 0;
}
.react-flow__node {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
box-sizing: border-box;
cursor: -webkit-grab;
cursor: grab;
}
.react-flow__node.dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.react-flow__nodesselection {
z-index: 3;
transform-origin: left top;
pointer-events: none;
}
.react-flow__nodesselection-rect {
position: absolute;
pointer-events: all;
cursor: -webkit-grab;
cursor: grab;
}
.react-flow__handle {
position: absolute;
pointer-events: none;
min-width: 5px;
min-height: 5px;
width: 6px;
height: 6px;
background: #1a192b;
border: 1px solid white;
border-radius: 100%;
}
.react-flow__handle.connectionindicator {
pointer-events: all;
cursor: crosshair;
}
.react-flow__handle-bottom {
top: auto;
left: 50%;
bottom: -4px;
transform: translate(-50%, 0);
}
.react-flow__handle-top {
left: 50%;
top: -4px;
transform: translate(-50%, 0);
}
.react-flow__handle-left {
top: 50%;
left: -4px;
transform: translate(0, -50%);
}
.react-flow__handle-right {
right: -4px;
top: 50%;
transform: translate(0, -50%);
}
.react-flow__edgeupdater {
cursor: move;
pointer-events: all;
}
.react-flow__panel {
position: absolute;
z-index: 5;
margin: 15px;
}
.react-flow__panel.top {
top: 0;
}
.react-flow__panel.bottom {
bottom: 0;
}
.react-flow__panel.left {
left: 0;
}
.react-flow__panel.right {
right: 0;
}
.react-flow__panel.center {
left: 50%;
transform: translateX(-50%);
}
.react-flow__attribution {
font-size: 10px;
background: rgba(255, 255, 255, 0.5);
padding: 2px 3px;
margin: 0;
}
.react-flow__attribution a {
text-decoration: none;
color: #999;
}
@-webkit-keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
@keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
.react-flow__edgelabel-renderer {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.react-flow__edge.updating .react-flow__edge-path {
stroke: #777;
}
.react-flow__edge-text {
font-size: 10px;
}
.react-flow__node.selectable:focus,
.react-flow__node.selectable:focus-visible {
outline: none;
}
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
padding: 10px;
border-radius: 3px;
width: 150px;
font-size: 12px;
color: #222;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #1a192b;
background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__node-default.selectable.selected,
.react-flow__node-default.selectable:focus,
.react-flow__node-default.selectable:focus-visible,
.react-flow__node-input.selectable.selected,
.react-flow__node-input.selectable:focus,
.react-flow__node-input.selectable:focus-visible,
.react-flow__node-output.selectable.selected,
.react-flow__node-output.selectable:focus,
.react-flow__node-output.selectable:focus-visible,
.react-flow__node-group.selectable.selected,
.react-flow__node-group.selectable:focus,
.react-flow__node-group.selectable:focus-visible {
box-shadow: 0 0 0 0.5px #1a192b;
}
.react-flow__node-group {
background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible,
.react-flow__selection:focus,
.react-flow__selection:focus-visible {
outline: none;
}
.react-flow__controls {
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__controls-button {
border: none;
background: #fefefe;
border-bottom: 1px solid #eee;
box-sizing: content-box;
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: 5px;
}
.react-flow__controls-button:hover {
background: #f4f4f4;
}
.react-flow__controls-button svg {
width: 100%;
max-width: 12px;
max-height: 12px;
}
.react-flow__controls-button:disabled {
pointer-events: none;
}
.react-flow__controls-button:disabled svg {
fill-opacity: 0.4;
}
.react-flow__minimap {
background-color: #fff;
}
.react-flow__minimap svg {
display: block;
}
.react-flow__resize-control {
position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
width: 4px;
height: 4px;
border: 1px solid #fff;
border-radius: 1px;
background-color: #3367d9;
transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
left: 0;
top: 50%;
}
.react-flow__resize-control.handle.right {
left: 100%;
top: 50%;
}
.react-flow__resize-control.handle.top {
left: 50%;
top: 0;
}
.react-flow__resize-control.handle.bottom {
left: 50%;
top: 100%;
}
.react-flow__resize-control.handle.top.left {
left: 0;
}
.react-flow__resize-control.handle.bottom.left {
left: 0;
}
.react-flow__resize-control.handle.top.right {
left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
border-color: #3367d9;
border-width: 0;
border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
width: 1px;
transform: translate(-50%, 0);
top: 0;
height: 100%;
}
.react-flow__resize-control.line.left {
left: 0;
border-left-width: 1px;
}
.react-flow__resize-control.line.right {
left: 100%;
border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
height: 1px;
transform: translate(0, -50%);
left: 0;
width: 100%;
}
.react-flow__resize-control.line.top {
top: 0;
border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
border-bottom-width: 1px;
top: 100%;
}
/* ═══════════════════════════════════════════════
AI Personal Agent — Light Theme
Yellow gradient accent · Black text · Clean
═══════════════════════════════════════════════ */
:root {
--y1: #ffd000;
--y2: #ff9500;
--y-grad: linear-gradient(90deg, #7A2CF3 0%, #B94CE8 45%, #F58B69 100%);
--y-grad-hover: linear-gradient(90deg, #6B1FE8 0%, #A63DDF 45%, #EE7A57 100%);
--y-shadow: 0 4px 18px rgba(255, 180, 0, 0.35);
--bg: #f5f4f0;
--surface: #ffffff;
--surface2: #fafaf8;
--border: #e8e6e0;
--border2: #d8d5cc;
--text: #111110;
--text2: #3d3c38;
--text3: #7a7870;
--muted: #b0ada4;
--green: #16a34a;
--green-bg: #dcfce7;
--blue: #1d4ed8;
--blue-bg: #dbeafe;
--amber: #d97706;
--amber-bg: #fef3c7;
--red: #dc2626;
--red-bg: #fee2e2;
--purple: #7c3aed;
--purple-bg: #ede9fe;
--radius: 14px;
--radius-sm: 8px;
--radius-xs: 5px;
--shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
--font: "Outfit", sans-serif;
--mono: "JetBrains Mono", monospace;
}
/* ── Reset ── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border2);
border-radius: 4px;
}
/* ── Root Wrapper ── */
.apa-root {
background: var(--bg);
min-height: 100vh;
font-family: var(--font);
color: var(--text);
padding: 14px 20px 20px;
}
.apa-inner {
max-width: 1380px;
margin: 0 auto;
}
/* ── Grid ── */
.apa-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.apa-col {
display: flex;
flex-direction: column;
}
.apa-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.apa-stack {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (max-width: 1024px) {
.apa-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.apa-grid {
grid-template-columns: 1fr;
}
.apa-root {
padding: 10px 12px 12px;
}
}
/* ── Card ── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 18px 16px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
/* overflow: hidden; */
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--y-grad);
border-radius: var(--radius) var(--radius) 0 0;
}
/* ── Card Header ── */
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.card-title {
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 6px;
}
.card-dots {
display: flex;
gap: 3px;
cursor: pointer;
}
.card-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--muted);
transition: background 0.2s;
}
.card-dots:hover .card-dot {
background: var(--text3);
}
/* ── Yellow Buttons ── */
.btn-yellow {
background: var(--y-grad);
border: none;
color: #111110;
font-family: var(--font);
font-weight: 700;
font-size: 13px;
padding: 9px 18px;
border-radius: 99px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: var(--y-shadow);
transition: all 0.18s ease;
white-space: nowrap;
line-height: 1;
}
.btn-yellow:hover {
background: var(--y-grad-hover);
box-shadow: 0 6px 24px rgba(255, 180, 0, 0.45);
transform: translateY(-1px);
}
.btn-yellow:active {
transform: translateY(0);
}
.btn-yellow:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-ghost {
background: none;
border: 1.5px solid var(--border2);
color: var(--text2);
font-family: var(--font);
font-weight: 600;
font-size: 13px;
padding: 8px 16px;
border-radius: 99px;
cursor: pointer;
transition: all 0.18s;
}
.btn-ghost:hover {
background: var(--surface2);
border-color: var(--text3);
}
.btn-icon {
background: none;
border: 1.5px solid var(--border);
color: var(--text3);
width: 30px;
height: 30px;
border-radius: var(--radius-xs);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.btn-icon:hover {
background: var(--surface2);
color: var(--text);
}
.btn-icon:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ── Badge / Pill ── */
.badge {
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 99px;
line-height: 1.5;
}
.badge-green {
background: var(--green-bg);
color: var(--green);
}
.badge-blue {
background: var(--blue-bg);
color: var(--blue);
}
.badge-amber {
background: var(--amber-bg);
color: var(--amber);
}
.badge-red {
background: var(--red-bg);
color: var(--red);
}
.badge-purple {
background: var(--purple-bg);
color: var(--purple);
}
.badge-gray {
background: var(--border);
color: var(--text3);
}
.badge-yellow {
background: var(--y-grad);
color: #111;
}
/* ── Progress ── */
.progress-wrap {
height: 5px;
background: var(--border);
border-radius: 99px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: var(--y-grad);
border-radius: 99px;
transition: width 0.5s ease;
}
/* ── Pagination ── */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.pg-info {
font-size: 11px;
color: var(--text3);
font-weight: 600;
}
/* ── Empty state ── */
.empty-state {
font-size: 12px;
color: var(--muted);
text-align: center;
padding: 16px 0;
font-style: italic;
}
/* ── Hero ── */
.hero {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
/* margin-bottom: 20px; */
/* padding: 20px 22px; */
/* background: var(--surface); */
/* border: 1px solid var(--border); */
/* border-radius: var(--radius); */
/* box-shadow: var(--shadow); */
position: relative;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute;
right: -30px;
top: -30px;
width: 160px;
height: 160px;
/* background: radial-gradient(
circle,
rgba(255, 208, 0, 0.18) 0%,
transparent 70%
); */
border-radius: 50%;
pointer-events: none;
}
.hero-text h1 {
font-size: 22px;
font-weight: 800;
color: var(--text);
line-height: 1.2;
letter-spacing: -0.5px;
}
.hero-text p {
font-size: 13px;
color: var(--text3);
margin-top: 3px;
}
.hero-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* ── Conversation ── */
.conv-msgs {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 0;
min-height: 270px;
max-height: 270px;
}
.msg-row {
display: flex;
align-items: flex-end;
gap: 8px;
}
.msg-row-user {
justify-content: flex-end;
}
.msg-row-ai {
justify-content: flex-start;
}
.ai-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--y-grad);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
box-shadow: var(--y-shadow);
}
.user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--y-grad);
color: #000;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bubble-ai {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
padding: 9px 13px;
border-radius: 14px 14px 14px 3px;
font-size: 12.5px;
line-height: 1.55;
max-width: 78%;
}
.bubble-user {
background: var(--y-grad);
color: #000;
padding: 9px 13px;
border-radius: 14px 14px 3px 14px;
font-size: 12.5px;
line-height: 1.55;
max-width: 78%;
}
.typing-dots {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 2px;
}
.typing-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--muted);
display: inline-block;
}
.typing-dots span:nth-child(1) {
animation: td-bounce 1.2s 0s infinite;
}
.typing-dots span:nth-child(2) {
animation: td-bounce 1.2s 0.2s infinite;
}
.typing-dots span:nth-child(3) {
animation: td-bounce 1.2s 0.4s infinite;
}
.conv-input {
display: flex;
align-items: flex-end;
gap: 8px;
border-top: 1px solid var(--border);
padding-top: 12px;
}
.conv-textarea {
flex: 1;
background: var(--surface2);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 9px 12px;
font-family: var(--font);
font-size: 12.5px;
color: var(--text);
resize: none;
outline: none;
line-height: 1.4;
transition: border-color 0.15s;
}
.conv-textarea:focus {
border-color: var(--y1);
}
.conv-send {
background: var(--y-grad);
border: none;
color: #111;
width: 36px;
height: 36px;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--y-shadow);
transition: all 0.15s;
}
.conv-send:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255, 180, 0, 0.4);
}
.load-more-bar {
text-align: center;
font-size: 11px;
color: var(--muted);
padding: 4px 0;
}
/* ── Tasks ── */
.task-list {
display: flex;
flex-direction: column;
}
.task-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 4px;
border-bottom: 1px solid var(--border);
transition: background 0.12s;
}
.task-row:last-child {
border-bottom: none;
}
.task-row:hover {
background: var(--surface2);
border-radius: var(--radius-xs);
}
.task-cb {
width: 19px;
height: 19px;
border-radius: 5px;
border: 2px solid var(--border2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.18s;
background: var(--surface);
}
.task-cb.checked {
background: var(--y-grad);
border-color: transparent;
}
.task-name-wrap {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.task-name {
font-size: 12.5px;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-name.done {
text-decoration: line-through;
color: var(--muted);
}
.task-due {
font-size: 10.5px;
color: var(--text3);
margin-top: 1px;
}
.task-due.overdue {
color: var(--red);
}
.pri-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
/* ── Calendar ── */
.cal-nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.cal-month {
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.week-row {
display: flex;
gap: 4px;
}
.day-cell {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 2px;
border-radius: 10px;
cursor: pointer;
border: 1.5px solid transparent;
position: relative;
transition: all 0.15s;
color: var(--text2);
}
.day-cell:hover {
background: var(--surface2);
}
.day-cell.today {
border-color: var(--y1);
}
.day-cell.today .day-num {
color: var(--amber);
font-weight: 800;
}
.day-cell.selected {
background: var(--y-grad);
border-color: transparent;
color: #111;
}
.day-cell.selected .day-name {
color: rgba(0, 0, 0, 0.65);
}
.day-num {
font-size: 14px;
font-weight: 700;
line-height: 1;
}
.day-name {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 2px;
color: var(--text3);
}
.day-dot {
position: absolute;
bottom: 4px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--amber);
}
.meet-card {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
display: flex;
gap: 10px;
align-items: flex-start;
}
.meet-time-col {
display: flex;
flex-direction: column;
align-items: center;
min-width: 42px;
}
.meet-time {
font-size: 12px;
font-weight: 700;
color: var(--amber);
font-family: var(--mono);
}
.meet-end {
font-size: 10px;
color: var(--muted);
font-family: var(--mono);
}
.meet-info {
flex: 1;
}
.meet-tag {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--amber);
display: block;
margin-bottom: 3px;
}
.meet-title {
font-size: 12.5px;
font-weight: 600;
color: var(--text);
}
.avatar-row {
display: flex;
margin-top: 6px;
}
.avatar-sm {
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 8px;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-left: -5px;
border: 2px solid var(--surface);
}
.avatar-sm:first-child {
margin-left: 0;
}
/* ── Jobs ── */
.job-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 2px;
border-bottom: 1px solid var(--border);
}
.job-row:last-child {
border-bottom: none;
}
.job-label {
font-size: 12px;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.job-sub {
font-size: 10px;
color: var(--text3);
margin-top: 1px;
}
/* ── Notifications ── */
.notif-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 2px;
border-bottom: 1px solid var(--border);
}
.notif-row:last-child {
border-bottom: none;
}
.notif-title {
font-size: 12px;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notif-title.unread {
font-weight: 700;
}
.notif-body {
font-size: 10.5px;
color: var(--text3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 1px;
}
.notif-time {
font-size: 9.5px;
color: var(--muted);
margin-top: 2px;
}
.unread-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--amber);
flex-shrink: 0;
}
.unread-badge {
margin-left: 6px;
font-size: 10px;
padding: 1px 6px;
border-radius: 99px;
background: var(--amber-bg);
color: var(--amber);
font-weight: 700;
}
/* ── Insights ── */
.insight-block {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
margin-bottom: 8px;
}
.insight-block:last-child {
margin-bottom: 0;
}
.insight-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
color: var(--amber);
margin-bottom: 6px;
}
.insight-text {
font-size: 12px;
color: var(--text2);
line-height: 1.55;
margin: 3px 0;
}
.insight-list {
margin: 4px 0 4px 16px;
}
.insight-list li {
font-size: 12px;
color: var(--text2);
margin-bottom: 2px;
line-height: 1.4;
}
.insight-meta {
font-size: 10px;
color: var(--muted);
margin-top: 6px;
display: flex;
gap: 10px;
}
/* ── Sync Modal ── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(6px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
animation: fadeIn 0.2s ease;
}
.modal-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
width: 100%;
max-width: 460px;
box-shadow: var(--shadow-md);
animation: slideUp 0.25s ease;
overflow: hidden;
}
.modal-top-strip {
height: 4px;
background: var(--y-grad);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 14px;
border-bottom: 1px solid var(--border);
}
.modal-title {
font-size: 16px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.3px;
}
.modal-close {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text3);
width: 30px;
height: 30px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.modal-close:hover {
background: var(--border);
color: var(--text);
}
.modal-body {
padding: 20px 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
.modal-footer {
padding: 14px 22px 18px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 10px;
}
.field-label {
font-size: 11px;
font-weight: 700;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 8px;
display: block;
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chip {
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text2);
padding: 6px 13px;
border-radius: 99px;
cursor: pointer;
font-family: var(--font);
font-size: 12px;
font-weight: 600;
transition: all 0.15s;
}
.chip:hover {
border-color: var(--y1);
background: var(--amber-bg);
}
.chip.active {
background: var(--y-grad);
border-color: transparent;
color: #111;
box-shadow: var(--y-shadow);
}
.status-box {
background: var(--surface2);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
font-size: 12.5px;
color: var(--text2);
line-height: 1.5;
}
.status-box.success {
background: var(--green-bg);
border-color: #86efac;
}
.status-box.error {
background: var(--red-bg);
border-color: #fca5a5;
}
.live-pulse {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
color: var(--green);
margin-top: 6px;
}
.pulse-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
animation: pulse 1.4s infinite;
}
/* ── Pusher Toast ── */
.toast-stack {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 2000;
max-width: 310px;
pointer-events: none;
}
.toast-item {
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--y1);
border-radius: 10px;
padding: 10px 14px;
box-shadow: var(--shadow-md);
display: flex;
gap: 10px;
align-items: flex-start;
animation: slideInR 0.3s ease;
pointer-events: all;
}
.toast-icon {
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
}
.toast-title {
font-size: 11.5px;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
}
.toast-body {
font-size: 11px;
color: var(--text3);
line-height: 1.4;
}
/* ── Spinner ── */
.spinner {
width: 13px;
height: 13px;
border: 2px solid rgba(0, 0, 0, 0.2);
border-top-color: #111;
border-radius: 50%;
animation: spin 0.65s linear infinite;
flex-shrink: 0;
}
/* ── Animations ── */
@keyframes td-bounce {
0%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.85);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(16px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInR {
from {
transform: translateX(30px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Wrapper */
.apa-tabs {
display: flex;
gap: 16px;
border-bottom: 1px solid var(--border);
margin-bottom: 10px;
}
/* Base tab */
.apa-tab-btn {
padding: 8px 2px;
border: none;
background: transparent;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text3);
position: relative;
transition: color 0.2s ease;
}
.apa-tab-btn:hover {
color: var(--y2);
}
.apa-tab-btn.active {
color: var(--text);
}
.apa-tab-btn.active::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 2px;
background: var(--y2);
border-radius: 2px;
}
.apa-card {
height: 412.75px;
display: flex;
flex-direction: column;
}
.apa-scroll {
flex: 1;
overflow-y: auto;
padding-right: 4px;
}
.apa-scroll::-webkit-scrollbar {
width: 4px;
}
.conv-top {
margin-top: 47px;
}
.task-row-v2 {
padding: 12px 14px;
border-bottom: 1px solid #eee;
display: flex;
flex-direction: column;
gap: 6px;
}
.task-title {
font-weight: 600;
max-width: 260px;
}
.text-truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text-truncate-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 12px;
}
.task-date {
font-size: 10px;
color: #6b7280;
}
.badge-light {
background: #f3f4f6;
color: #374151;
font-size: 11px;
padding: 2px 6px;
border-radius: 6px;
}
.tag-badge {
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
font-weight: 500;
display: inline-flex;
align-items: center;
line-height: 1;
white-space: nowrap;
transition: all 0.2s ease;
}
.tag-badge:hover {
transform: translateY(-1px);
filter: brightness(1.05);
}
.apa-modal .modal-body {
gap: 8px;
}
.apa-modal p {
margin-bottom: 0;
}
.task-content {
cursor: pointer;
}
/* ═══════════════════════════════════════════════
AI Personal Agent — Blue Gradient Theme
Matching Calendar Modal Colors
═══════════════════════════════════════════════ */
:root {
/* Blue gradient from calendar modal */
--blue1: #7b3ff2;
--blue2: #2d8cff;
--blue-grad: linear-gradient(90deg, #7b3ff2 0%, #2d8cff 100%);
--blue-grad-hover: linear-gradient(90deg, #6B35E0 0%, #1A7AFF 100%);
--blue-shadow: 0 4px 18px rgba(123, 63, 242, 0.35);
--bg: #f5f4f0;
--surface: #ffffff;
--surface2: #fafaf8;
--border: #e8e6e0;
--border2: #d8d5cc;
--text: #111110;
--text2: #3d3c38;
--text3: #7a7870;
--muted: #b0ada4;
--green: #16a34a;
--green-bg: #dcfce7;
--blue: #1d4ed8;
--blue-bg: #dbeafe;
--amber: #d97706;
--amber-bg: #fef3c7;
--red: #dc2626;
--red-bg: #fee2e2;
--purple: #7c3aed;
--purple-bg: #ede9fe;
--radius: 14px;
--radius-sm: 8px;
--radius-xs: 5px;
--shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
--font: "Outfit", sans-serif;
--mono: "JetBrains Mono", monospace;
}
/* ── Reset ── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border2);
border-radius: 4px;
}
/* ── Root Wrapper ── */
.apa-root {
background: #f4f7fb;
min-height: 100vh;
font-family: var(--font);
color: var(--text);
padding: 14px 20px 20px;
}
.apa-inner {
max-width: 1380px;
margin: 0 auto;
}
/* ── Grid ── */
.apa-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.apa-col {
display: flex;
flex-direction: column;
}
.apa-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.apa-stack {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (max-width: 1024px) {
.apa-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.apa-grid {
grid-template-columns: 1fr;
}
.apa-root {
padding: 10px 12px 12px;
}
}
/* ── Card ── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 18px 16px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--blue-grad);
border-radius: var(--radius) var(--radius) 0 0;
}
/* ── Card Header ── */
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.card-title {
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 6px;
}
.card-dots {
display: flex;
gap: 3px;
cursor: pointer;
}
.card-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--muted);
transition: background 0.2s;
}
.card-dots:hover .card-dot {
background: var(--text3);
}
/* ── Blue Gradient Buttons ── */
.btn-yellow {
background: var(--blue-grad);
border: none;
color: #ffffff;
font-family: var(--font);
font-weight: 700;
font-size: 13px;
padding: 9px 18px;
border-radius: 99px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: var(--blue-shadow);
transition: all 0.18s ease;
white-space: nowrap;
line-height: 1;
}
.btn-yellow:hover {
background: var(--blue-grad-hover);
box-shadow: 0 6px 24px rgba(123, 63, 242, 0.45);
transform: translateY(-1px);
}
.btn-yellow:active {
transform: translateY(0);
}
.btn-yellow:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-ghost {
background: none;
border: 1.5px solid var(--border2);
color: var(--text2);
font-family: var(--font);
font-weight: 600;
font-size: 13px;
padding: 8px 16px;
border-radius: 99px;
cursor: pointer;
transition: all 0.18s;
}
.btn-ghost:hover {
background: var(--surface2);
border-color: var(--text3);
}
.btn-icon {
background: none;
border: 1.5px solid var(--border);
color: var(--text3);
width: 30px;
height: 30px;
border-radius: var(--radius-xs);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.btn-icon:hover {
background: var(--surface2);
color: var(--text);
}
.btn-icon:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ── Badge / Pill ── */
.badge {
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 99px;
line-height: 1.5;
}
.badge-green {
background: var(--green-bg);
color: var(--green);
}
.badge-blue {
background: var(--blue-bg);
color: var(--blue);
}
.badge-amber {
background: var(--amber-bg);
color: var(--amber);
}
.badge-red {
background: var(--red-bg);
color: var(--red);
}
.badge-purple {
background: var(--purple-bg);
color: var(--purple);
}
.badge-gray {
background: var(--border);
color: var(--text3);
}
.badge-yellow {
background: var(--blue-grad);
color: #ffffff;
}
/* ── Progress ── */
.progress-wrap {
height: 5px;
background: var(--border);
border-radius: 99px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: var(--blue-grad);
border-radius: 99px;
transition: width 0.5s ease;
}
/* ── Pagination ── */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.pg-info {
font-size: 11px;
color: var(--text3);
font-weight: 600;
}
/* ── Empty state ── */
.empty-state {
font-size: 12px;
color: var(--muted);
text-align: center;
padding: 16px 0;
font-style: italic;
}
/* ── Hero ── */
.hero {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
position: relative;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute;
right: -30px;
top: -30px;
width: 160px;
height: 160px;
border-radius: 50%;
pointer-events: none;
}
.hero-text h1 {
font-size: 22px;
font-weight: 800;
color: var(--text);
line-height: 1.2;
letter-spacing: -0.5px;
}
.hero-text p {
font-size: 13px;
color: var(--text3);
margin-top: 3px;
}
.hero-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* ── Conversation ── */
.conv-msgs {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 0;
min-height: 270px;
max-height: 270px;
}
.msg-row {
display: flex;
align-items: flex-end;
gap: 8px;
}
.msg-row-user {
justify-content: flex-end;
}
.msg-row-ai {
justify-content: flex-start;
}
.ai-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--blue-grad);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
box-shadow: var(--blue-shadow);
}
.user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--blue-grad);
color: #fff;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bubble-ai {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
padding: 9px 13px;
border-radius: 14px 14px 14px 3px;
font-size: 12.5px;
line-height: 1.55;
max-width: 78%;
}
.bubble-user {
background: var(--blue-grad);
color: #fff;
padding: 9px 13px;
border-radius: 14px 14px 3px 14px;
font-size: 12.5px;
line-height: 1.55;
max-width: 78%;
}
.typing-dots {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 2px;
}
.typing-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--muted);
display: inline-block;
}
.typing-dots span:nth-child(1) {
animation: td-bounce 1.2s 0s infinite;
}
.typing-dots span:nth-child(2) {
animation: td-bounce 1.2s 0.2s infinite;
}
.typing-dots span:nth-child(3) {
animation: td-bounce 1.2s 0.4s infinite;
}
.conv-input {
display: flex;
align-items: flex-end;
gap: 8px;
border-top: 1px solid var(--border);
padding-top: 12px;
}
.conv-textarea {
flex: 1;
background: var(--surface2);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 9px 12px;
font-family: var(--font);
font-size: 12.5px;
color: var(--text);
resize: none;
outline: none;
line-height: 1.4;
transition: border-color 0.15s;
}
.conv-textarea:focus {
border-color: var(--blue1);
}
.conv-send {
background: var(--blue-grad);
border: none;
color: #fff;
width: 36px;
height: 36px;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--blue-shadow);
transition: all 0.15s;
}
.conv-send:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(123, 63, 242, 0.4);
}
.load-more-bar {
text-align: center;
font-size: 11px;
color: var(--muted);
padding: 4px 0;
}
/* ── Tasks ── */
.task-list {
display: flex;
flex-direction: column;
}
.task-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 4px;
border-bottom: 1px solid var(--border);
transition: background 0.12s;
}
.task-row:last-child {
border-bottom: none;
}
.task-row:hover {
background: var(--surface2);
border-radius: var(--radius-xs);
}
.task-cb {
width: 19px;
height: 19px;
border-radius: 5px;
border: 2px solid var(--border2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.18s;
background: var(--surface);
}
.task-cb.checked {
background: var(--blue-grad);
border-color: transparent;
}
.task-name-wrap {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.task-name {
font-size: 12.5px;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-name.done {
text-decoration: line-through;
color: var(--muted);
}
.task-due {
font-size: 10.5px;
color: var(--text3);
margin-top: 1px;
}
.task-due.overdue {
color: var(--red);
}
.pri-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
/* ── Calendar ── */
.cal-nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.cal-month {
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.week-row {
display: flex;
gap: 4px;
}
.day-cell {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 2px;
border-radius: 10px;
cursor: pointer;
border: 1.5px solid transparent;
position: relative;
transition: all 0.15s;
color: var(--text2);
}
.day-cell:hover {
background: var(--surface2);
}
.day-cell.today {
border-color: var(--blue1);
}
.day-cell.today .day-num {
color: var(--blue1);
font-weight: 800;
}
.day-cell.selected {
background: var(--blue-grad);
border-color: transparent;
color: #fff;
}
.day-cell.selected .day-name {
color: rgba(255, 255, 255, 0.65);
}
.day-num {
font-size: 14px;
font-weight: 700;
line-height: 1;
}
.day-name {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 2px;
color: var(--text3);
}
.day-dot {
position: absolute;
bottom: 4px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--blue1);
}
.meet-card {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
display: flex;
gap: 10px;
align-items: flex-start;
}
.meet-time-col {
display: flex;
flex-direction: column;
align-items: center;
min-width: 42px;
}
.meet-time {
font-size: 12px;
font-weight: 700;
color: var(--blue1);
font-family: var(--mono);
}
.meet-end {
font-size: 10px;
color: var(--muted);
font-family: var(--mono);
}
.meet-info {
flex: 1;
}
.meet-tag {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--blue1);
display: block;
margin-bottom: 3px;
}
.meet-title {
font-size: 12.5px;
font-weight: 600;
color: var(--text);
}
.avatar-row {
display: flex;
margin-top: 6px;
}
.avatar-sm {
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 8px;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-left: -5px;
border: 2px solid var(--surface);
}
.avatar-sm:first-child {
margin-left: 0;
}
/* ── Jobs ── */
.job-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 2px;
border-bottom: 1px solid var(--border);
}
.job-row:last-child {
border-bottom: none;
}
.job-label {
font-size: 12px;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.job-sub {
font-size: 10px;
color: var(--text3);
margin-top: 1px;
}
/* ── Notifications ── */
.notif-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 2px;
border-bottom: 1px solid var(--border);
}
.notif-row:last-child {
border-bottom: none;
}
.notif-title {
font-size: 12px;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notif-title.unread {
font-weight: 700;
}
.notif-body {
font-size: 10.5px;
color: var(--text3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 1px;
}
.notif-time {
font-size: 9.5px;
color: var(--muted);
margin-top: 2px;
}
.unread-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--blue1);
flex-shrink: 0;
}
.unread-badge {
margin-left: 6px;
font-size: 10px;
padding: 1px 6px;
border-radius: 99px;
background: var(--blue-bg);
color: var(--blue1);
font-weight: 700;
}
/* ── Insights ── */
.insight-block {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
margin-bottom: 8px;
}
.insight-block:last-child {
margin-bottom: 0;
}
.insight-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.7px;
color: var(--blue1);
margin-bottom: 6px;
}
.insight-text {
font-size: 12px;
color: var(--text2);
line-height: 1.55;
margin: 3px 0;
}
.insight-list {
margin: 4px 0 4px 16px;
}
.insight-list li {
font-size: 12px;
color: var(--text2);
margin-bottom: 2px;
line-height: 1.4;
}
.insight-meta {
font-size: 10px;
color: var(--muted);
margin-top: 6px;
display: flex;
gap: 10px;
}
/* ── Sync Modal ── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(6px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
animation: fadeIn 0.2s ease;
}
.modal-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
width: 100%;
max-width: 460px;
box-shadow: var(--shadow-md);
animation: slideUp 0.25s ease;
overflow: hidden;
}
.modal-top-strip {
height: 4px;
background: var(--blue-grad);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 14px;
border-bottom: 1px solid var(--border);
}
.modal-title {
font-size: 16px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.3px;
}
.modal-close {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text3);
width: 30px;
height: 30px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.modal-close:hover {
background: var(--border);
color: var(--text);
}
.modal-body {
padding: 20px 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
.modal-footer {
padding: 14px 22px 18px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 10px;
}
.field-label {
font-size: 11px;
font-weight: 700;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 8px;
display: block;
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chip {
background: var(--surface2);
border: 1.5px solid var(--border);
color: var(--text2);
padding: 6px 13px;
border-radius: 99px;
cursor: pointer;
font-family: var(--font);
font-size: 12px;
font-weight: 600;
transition: all 0.15s;
}
.chip:hover {
border-color: var(--blue1);
background: var(--purple-bg);
}
.chip.active {
background: var(--blue-grad);
border-color: transparent;
color: #fff;
box-shadow: var(--blue-shadow);
}
.status-box {
background: var(--surface2);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
font-size: 12.5px;
color: var(--text2);
line-height: 1.5;
}
.status-box.success {
background: var(--green-bg);
border-color: #86efac;
}
.status-box.error {
background: var(--red-bg);
border-color: #fca5a5;
}
.live-pulse {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
color: var(--green);
margin-top: 6px;
}
.pulse-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
animation: pulse 1.4s infinite;
}
/* ── Pusher Toast ── */
.toast-stack {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 2000;
max-width: 310px;
pointer-events: none;
}
.toast-item {
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--blue1);
border-radius: 10px;
padding: 10px 14px;
box-shadow: var(--shadow-md);
display: flex;
gap: 10px;
align-items: flex-start;
animation: slideInR 0.3s ease;
pointer-events: all;
}
.toast-icon {
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
}
.toast-title {
font-size: 11.5px;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
}
.toast-body {
font-size: 11px;
color: var(--text3);
line-height: 1.4;
}
/* ── Spinner ── */
.spinner {
width: 13px;
height: 13px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
border-radius: 50%;
animation: spin 0.65s linear infinite;
flex-shrink: 0;
}
/* ── Animations ── */
@keyframes td-bounce {
0%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.85);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(16px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInR {
from {
transform: translateX(30px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Wrapper */
.apa-tabs {
display: flex;
gap: 16px;
border-bottom: 1px solid var(--border);
margin-bottom: 10px;
overflow: auto;
}
/* Base tab */
.apa-tab-btn {
padding: 8px 2px;
border: none;
background: transparent;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text3);
position: relative;
transition: color 0.2s ease;
}
.apa-tab-btn:hover {
color: var(--blue1);
}
.apa-tab-btn.active {
color: var(--text);
}
.apa-tab-btn.active::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 2px;
background: var(--blue-grad);
border-radius: 2px;
}
.apa-card {
height: 412.75px;
display: flex;
flex-direction: column;
}
.apa-scroll {
flex: 1;
overflow-y: auto;
padding-right: 4px;
}
.apa-scroll::-webkit-scrollbar {
width: 4px;
}
.conv-top {
margin-top: 47px;
}
.task-row-v2 {
padding: 12px 14px;
border-bottom: 1px solid #eee;
display: flex;
flex-direction: column;
gap: 6px;
}
.task-title {
font-weight: 600;
max-width: 260px;
}
.text-truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text-truncate-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 12px;
}
.task-date {
font-size: 10px;
color: #6b7280;
}
.badge-light {
background: #f3f4f6;
color: #374151;
font-size: 11px;
padding: 2px 6px;
border-radius: 6px;
}
.tag-badge {
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
font-weight: 500;
display: inline-flex;
align-items: center;
line-height: 1;
white-space: nowrap;
transition: all 0.2s ease;
}
.tag-badge:hover {
transform: translateY(-1px);
filter: brightness(1.05);
}
.apa-modal .modal-body {
gap: 8px;
}
.apa-modal p {
margin-bottom: 0;
}
.task-content {
cursor: pointer;
}
/* .btn-icon {
border: 1.5px solid #e5e7eb;
transition: all 0.15s;
}
.btn-icon:hover {
border-color: #7b3ff2;
color: #7b3ff2;
}
.btn-icon:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.modal-top-strip {
height: 4px;
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
} */
/* Add to your CSS */
.pagination .btn-icon {
border: 1.5px solid #e5e7eb;
transition: all 0.15s;
}
.pagination .btn-icon:hover:not(:disabled) {
border-color: #7b3ff2;
color: #7b3ff2;
background: #EDE9FE;
}
.pagination .btn-icon:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Wrapper */
.apa-tabs {
display: flex;
gap: 16px;
border-bottom: 1px solid var(--border);
margin-bottom: 10px;
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
scrollbar-width: none;
-ms-overflow-style: none;
}
.apa-tabs::-webkit-scrollbar {
display: none;
}
/* Base tab */
.apa-tab-btn {
padding: 8px 2px;
border: none;
background: transparent;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text3);
position: relative;
transition: color 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.apa-tab-btn:hover {
color: var(--blue1);
}
.apa-tab-btn.active {
color: var(--text);
}
.apa-tab-btn.active::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 2px;
background: var(--blue-grad);
border-radius: 2px;
}
@media (max-width: 480px) {
.apa-tabs {
gap: 12px;
}
.apa-tab-btn {
font-size: 12px;
}
}
.conv-top {
margin-top: 47px;
}
@media (max-width: 767.98px) {
.conv-top {
margin-top: 1rem !important;
}
}
/* email,modal */
/* ----- Overlay ----- */
.evm-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
padding: 20px;
animation: evmFadeIn 0.25s ease;
}
/* ----- Modal Container ----- */
.evm-modal {
width: min(95vw, 1100px);
max-height: 92vh;
background: #ffffff;
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
animation: evmSlideUp 0.3s ease;
}
/* ----- Top Strip ----- */
.evm-topStrip {
height: 5px;
background: linear-gradient(90deg, #7b3ff2, #5b5ce2, #3b82f6);
flex-shrink: 0;
}
.evm-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 18px 24px;
border-bottom: 1px solid #e5e7eb;
flex-wrap: wrap;
flex-shrink: 0;
background: #fafbfc;
}
.evm-headerLeft {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
min-width: 0;
}
.evm-title {
font-size: 20px;
font-weight: 700;
color: #1f2937;
word-break: break-word;
line-height: 1.3;
}
.evm-headerRight {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* ----- Badge ----- */
.evm-badge {
display: inline-block;
padding: 3px 14px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
text-transform: capitalize;
letter-spacing: 0.3px;
white-space: nowrap;
flex-shrink: 0;
}
/* Badge Variants */
.evm-badge-normal {
background: #e5e7eb;
color: #4b5563;
}
.evm-badge-important {
background: #fee2e2;
color: #dc2626;
}
.evm-badge-urgent {
background: #fef3c7;
color: #d97706;
}
.evm-badge-spam {
background: #f3e8ff;
color: #7c3aed;
}
/* ----- Dropdown Toggle ----- */
.evm-dropdownToggle {
background: none;
border: none;
padding: 6px 10px;
color: #7b3ff2;
cursor: pointer;
border-radius: 8px;
transition: background 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.evm-dropdownToggle:hover {
background: #f3f0ff;
}
/* ----- Close Button ----- */
.evm-closeBtn {
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: #f3f4f6;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.evm-closeBtn:hover {
background: #e5e7eb;
color: #1f2937;
transform: rotate(90deg);
}
.evm-body {
flex: 1;
overflow: hidden;
padding: 22px 24px;
background: #ffffff;
}
.evm-content {
display: flex;
gap: 28px;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* ----- Left Panel ----- */
.evm-leftPanel {
flex: 0 0 34%;
min-width: 260px;
padding-right: 12px;
overflow-y: visible;
}
.evm-field {
margin-bottom: 4px;
}
.evm-field b {
color: #1f2937;
font-weight: 600;
}
.evm-text {
margin-top: 6px;
line-height: 1.6;
color: #4b5563;
font-size: 0.95rem;
}
.evm-actions {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* ----- Right Panel ----- */
.evm-rightPanel {
flex: 1;
overflow-y: auto;
border-left: 1px solid #e5e7eb;
padding-left: 28px;
min-width: 0;
}
.evm-rightPanel b {
color: #1f2937;
font-weight: 600;
}
.evm-message {
padding-top: 12px;
line-height: 1.7;
color: #374151;
font-size: 0.95rem;
word-wrap: break-word;
overflow-wrap: break-word;
}
.evm-message p {
margin-bottom: 12px;
}
.evm-message p:last-child {
margin-bottom: 0;
}
.evm-message img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.evm-message table {
width: 100%;
border-collapse: collapse;
overflow-x: auto;
display: block;
}
.evm-message pre {
white-space: pre-wrap;
word-break: break-all;
background: #f3f4f6;
padding: 12px;
border-radius: 8px;
overflow-x: auto;
}
.evm-message iframe {
max-width: 100%;
}
.evm-message blockquote {
border-left: 4px solid #7b3ff2;
padding-left: 16px;
margin: 12px 0;
color: #4b5563;
}
.evm-message ul,
.evm-message ol {
padding-left: 24px;
margin: 8px 0;
}
/* ----- Scrollbars ----- */
.evm-leftPanel::-webkit-scrollbar,
.evm-rightPanel::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.evm-leftPanel::-webkit-scrollbar-track,
.evm-rightPanel::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.evm-leftPanel::-webkit-scrollbar-thumb,
.evm-rightPanel::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 10px;
}
.evm-leftPanel::-webkit-scrollbar-thumb:hover,
.evm-rightPanel::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
.evm-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
border-top: 1px solid #e5e7eb;
padding: 16px 24px;
flex-wrap: wrap;
flex-shrink: 0;
background: #fafbfc;
}
.evm-date {
color: #4b5563;
font-size: 0.95rem;
}
.evm-date b {
color: #1f2937;
}
.evm-closeFooterBtn {
border: none;
background: #7b3ff2;
color: white;
padding: 10px 28px;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.25s;
flex-shrink: 0;
}
.evm-closeFooterBtn:hover {
background: #6430ca;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(123, 63, 242, 0.35);
}
.evm-closeFooterBtn:active {
transform: translateY(0);
}
.evm-icon {
margin-right: 8px;
}
.evm-spinner {
margin-right: 8px;
}
@keyframes evmFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes evmSlideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media screen and (max-width: 992px) {
.evm-modal {
width: 98vw;
max-height: 95vh;
}
.evm-content {
flex-direction: column;
gap: 20px;
max-height: none;
}
.evm-leftPanel {
flex: 0 0 auto;
min-width: 100%;
max-height: 220px;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 16px;
padding-right: 0;
}
.evm-rightPanel {
border-left: none;
padding-left: 0;
max-height: 400px;
}
.evm-body {
padding: 18px 20px;
}
.evm-header {
padding: 14px 20px;
}
.evm-footer {
padding: 14px 20px;
}
}
@media screen and (max-width: 768px) {
.evm-overlay {
padding: 8px;
align-items: flex-end;
}
.evm-modal {
width: 100%;
max-height: 98vh;
border-radius: 16px 16px 0 0;
animation: evmSlideUpMobile 0.3s ease;
}
@keyframes evmSlideUpMobile {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.evm-header {
padding: 14px 16px;
flex-direction: column;
align-items: stretch;
}
.evm-headerLeft {
width: 100%;
}
.evm-headerRight {
align-self: flex-end;
margin-top: 4px;
}
.evm-title {
font-size: 17px;
}
.evm-body {
padding: 14px 16px;
}
.evm-content {
gap: 16px;
}
.evm-leftPanel {
max-height: 180px;
}
.evm-rightPanel {
max-height: 350px;
}
.evm-footer {
padding: 12px 16px;
flex-direction: column-reverse;
align-items: stretch;
gap: 12px;
}
.evm-date {
text-align: center;
font-size: 0.9rem;
}
.evm-closeFooterBtn {
width: 100%;
padding: 12px;
text-align: center;
justify-content: center;
}
.evm-message {
font-size: 0.9rem;
}
.evm-text {
font-size: 0.9rem;
}
.evm-badge {
font-size: 0.6rem;
padding: 2px 10px;
}
.evm-closeBtn {
width: 34px;
height: 34px;
}
}
@media screen and (max-width: 480px) {
.evm-overlay {
padding: 4px;
}
.evm-modal {
border-radius: 12px 12px 0 0;
max-height: 100vh;
}
.evm-header {
padding: 12px 14px;
}
.evm-title {
font-size: 15px;
}
.evm-body {
padding: 12px 14px;
}
.evm-leftPanel {
max-height: 150px;
gap: 2px;
}
.evm-rightPanel {
max-height: 280px;
}
.evm-field {
margin-bottom: 2px;
}
.evm-field b {
font-size: 0.85rem;
}
.evm-text {
font-size: 0.85rem;
margin-top: 4px;
}
.evm-message {
font-size: 0.85rem;
padding-top: 8px;
}
.evm-footer {
padding: 10px 14px;
}
.evm-date {
font-size: 0.8rem;
}
.evm-closeFooterBtn {
font-size: 0.85rem;
padding: 10px;
}
.evm-closeBtn {
width: 30px;
height: 30px;
}
.evm-dropdownToggle {
padding: 4px 6px;
}
.evm-badge {
font-size: 0.55rem;
padding: 1px 8px;
}
}
@media screen and (max-height: 700px) {
.evm-modal {
max-height: 96vh;
}
.evm-content {
max-height: 500px;
}
.evm-rightPanel {
max-height: 500px;
}
.evm-header {
padding: 12px 20px;
}
.evm-body {
padding: 14px 20px;
}
.evm-footer {
padding: 12px 20px;
}
}
@media screen and (max-height: 600px) {
.evm-content {
max-height: 380px;
}
.evm-leftPanel {
max-height: 150px;
}
.evm-rightPanel {
max-height: 380px;
}
.evm-title {
font-size: 16px;
}
.evm-header {
padding: 8px 16px;
}
.evm-body {
padding: 10px 16px;
}
.evm-footer {
padding: 8px 16px;
}
.evm-field b {
font-size: 0.85rem;
}
.evm-text {
font-size: 0.85rem;
}
}
@media screen and (max-height: 500px) and (orientation: landscape) {
.evm-overlay {
align-items: center;
padding: 8px;
}
.evm-modal {
border-radius: 16px;
max-height: 94vh;
}
.evm-content {
flex-direction: row;
max-height: 320px;
gap: 16px;
}
.evm-leftPanel {
flex: 0 0 40%;
min-width: 200px;
max-height: 320px;
border-bottom: none;
padding-right: 12px;
}
.evm-rightPanel {
flex: 1;
max-height: 320px;
border-left: 1px solid #e5e7eb;
padding-left: 16px;
}
.evm-header {
padding: 8px 14px;
}
.evm-body {
padding: 10px 14px;
}
.evm-footer {
padding: 8px 14px;
}
.evm-title {
font-size: 15px;
}
}
/* email modal */
/* Today (not selected) */
.day-cell.today:not(.selected) .day-num,
.day-cell.today:not(.selected) .day-name {
color: #000 !important;
}
/* Selected day */
.day-cell.selected .day-num,
.day-cell.selected .day-name {
color: #fff !important;
}
/* ── Minutes of Meeting formatting ── */
.mom-heading {
color: var(--text);
font-weight: 700;
margin: 14px 0 6px;
line-height: 1.3;
}
.mom-h1 {
font-size: 15px;
padding-bottom: 6px;
border-bottom: 2px solid var(--blue1);
}
.mom-h2 {
font-size: 13.5px;
color: var(--blue1);
}
.mom-heading:first-child {
margin-top: 0;
}
.mom-para {
font-size: 13px;
color: var(--text2);
line-height: 1.6;
margin: 4px 0;
}
.mom-list {
margin: 4px 0 8px 20px;
padding: 0;
}
.mom-list li {
font-size: 13px;
color: var(--text2);
line-height: 1.6;
margin-bottom: 3px;
}
.mom-para strong,
.mom-list strong {
color: var(--text);
font-weight: 700;
}
/* ── Minutes of Meeting formatting ── */
/* border-radius: 16px 16px 0 0; */
.apa-modal.mtd-calendar-modal .modal-content {
border-radius: 20px 20px 20px 20px;
overflow: hidden;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-ms-border-radius: 20px 20px 20px 20px;
-o-border-radius: 20px 20px 20px 20px;
}._voiceModalDialog_o9dst_1 ._modal-content_o9dst_1 {
border: none;
border-radius: 24px;
overflow: hidden;
}
._voiceModal_o9dst_1 {
padding: 14px;
position: relative;
background: #fff;
border-radius: 24px;
}
._voiceClose_o9dst_27 {
position: absolute;
right: 14px;
top: 14px;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: #f3f4f8;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
._voiceClose_o9dst_27:hover {
background: #ede9fe;
color: #7b3ff2;
}
._voiceTitle_o9dst_69 {
text-align: center;
font-weight: 700;
font-size: 20px;
margin-bottom: 12px;
color: #111110;
}
._voiceCard_o9dst_85 {
border: 1px solid #ececec;
border-radius: 16px;
padding: 14px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
margin-top: 12px;
}
._voiceListening_o9dst_103 {
color: #7b3ff2 !important;
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}
._voiceWave_o9dst_117 {
width: 100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
._waveBar_o9dst_135 {
width: 4px;
height: 12px;
border-radius: 10px;
background: linear-gradient(to top, #7b3ff2, #2d8cff);
}
._waveAnimate_o9dst_149 {
animation: _waveMove_o9dst_1 0.9s infinite ease-in-out;
}
._waveBar_o9dst_135:nth-child(odd) {
animation-duration: 0.8s;
}
._waveBar_o9dst_135:nth-child(even) {
animation-duration: 1.1s;
}
._waveBar_o9dst_135:nth-child(3n) {
animation-duration: 1.4s;
}
._waveBar_o9dst_135:nth-child(4n) {
animation-duration: 1.2s;
}
._waveBar_o9dst_135:nth-child(5n) {
animation-duration: 0.95s;
}
@keyframes _waveMove_o9dst_1 {
0% {
height: 10px;
}
20% {
height: 45px;
}
40% {
height: 20px;
}
60% {
height: 65px;
}
80% {
height: 35px;
}
100% {
height: 10px;
}
}
._voiceMic_o9dst_249 {
width: 56px;
height: 56px;
border: none;
border-radius: 50%;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
box-shadow: 0 5px 15px rgba(123, 63, 242, 0.35);
cursor: pointer;
transition: all 0.2s;
}
._voiceMic_o9dst_249:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(123, 63, 242, 0.45);
}
._voiceMic_o9dst_249:active {
transform: scale(0.95);
}
._voiceHint_o9dst_299 {
color: #777;
font-size: 12px;
margin: 0;
}
._voiceTextCard_o9dst_311 {
margin-top: 12px;
border: 1px solid #ececec;
border-radius: 14px;
padding: 12px;
}
._voiceHeader_o9dst_325 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
color: #374151;
}
._voiceTextarea_o9dst_345 {
width: 100%;
min-height: 70px;
border: 1px solid #ececec;
border-radius: 10px;
resize: none;
padding: 8px 10px;
outline: none;
font-size: 14px;
background-color: white;
transition: border-color 0.2s;
}
._voiceTextarea_o9dst_345:focus {
border-color: #7b3ff2;
box-shadow: 0 0 0 3px rgba(123, 63, 242, 0.1);
}
._voiceSaved_o9dst_381 {
margin-top: 8px;
display: flex;
align-items: center;
gap: 6px;
color: #5a5a5a;
font-size: 12px;
}
._voiceRetry_o9dst_399 {
margin: 12px auto;
display: flex;
align-items: center;
gap: 8px;
border: none;
background: transparent;
color: #7b3ff2;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
._voiceRetry_o9dst_399:hover {
color: #6b35e0;
transform: translateX(2px);
}
._voiceActions_o9dst_437 {
display: flex;
gap: 10px;
}
._editBtn_o9dst_447,
._sendBtn_o9dst_449 {
flex: 1;
height: 42px;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
transition: all 0.2s;
}
._editBtn_o9dst_447 {
background: #fff;
color: #7b3ff2;
border: 2px solid #7b3ff2;
cursor: pointer;
}
._editBtn_o9dst_447:hover {
background: #ede9fe;
transform: translateY(-1px);
}
._editBtn_o9dst_447:active {
transform: translateY(0);
}
._sendBtn_o9dst_449 {
border: none;
color: #fff;
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
cursor: pointer;
box-shadow: 0 2px 8px rgba(123, 63, 242, 0.25);
}
._sendBtn_o9dst_449:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(123, 63, 242, 0.35);
}
._sendBtn_o9dst_449:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* ── Buttons ── */
._btn_yellow_o9dst_541 {
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
border: none;
color: #fff;
font-family: var(--font);
font-weight: 500;
font-size: 13px;
padding: 9px 18px;
border-radius: 99px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.18s ease;
white-space: nowrap;
line-height: 1;
}
._btn_yellow_o9dst_541:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(123, 63, 242, 0.45);
}
._btn_yellow_o9dst_541:active {
transform: translateY(0);
}
._btn_yellow_o9dst_541:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
._apiError_o9dst_607 {
margin-top: 10px;
padding: 10px 12px;
border-radius: 8px;
background: #ede9fe;
color: #7b3ff2;
font-size: 13px;
font-weight: 500;
border: 1px solid #c4b5fd;
}
/* Label button */
._actionGroup_o9dst_631 .btn-primary {
background: #ffffff !important;
border-color: rgb(174, 221, 240);
color: #374151 !important;
border-radius: 15px;
}
._actionGroup_o9dst_631 .btn-primary:hover,
._actionGroup_o9dst_631 .btn-primary:focus {
background: linear-gradient(90deg, #7b3ff2, #2d8cff) !important;
border-color: rgb(163, 189, 241);
color: #ffffff !important;
}
/* Secondary label */
._actionGroup_o9dst_631 .btn-secondary {
background: #ffffff !important;
border-color: rgb(174, 221, 240);
color: #374151 !important;
border-radius: 15px;
}
._actionGroup_o9dst_631 .btn-secondary:hover,
._actionGroup_o9dst_631 .btn-secondary:focus {
background: linear-gradient(90deg, #7b3ff2, #2d8cff) !important;
border-color: rgb(163, 189, 241);
color: #ffffff !important;
}
/* Dismiss button */
._actionGroup_o9dst_631 .btn-danger {
color: #fff !important;
background: linear-gradient(90deg, #7b3ff2, #2d8cff) !important;
border: none !important;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
._actionGroup_o9dst_631 {
margin-right: 12px;
margin-bottom: 0px;
padding: 0px;
font-size: 8px !important;
}
._suggestedActions_o9dst_721 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
._spinIcon_o9dst_735 {
animation: _spin_o9dst_735 1s linear infinite;
}
@keyframes _spin_o9dst_735 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ── Responsive ── */
@media (max-width: 576px) {
._voiceModal_o9dst_1 {
padding: 12px;
}
._voiceActions_o9dst_437 {
flex-direction: column;
}
._voiceWave_o9dst_117 {
gap: 2px;
}
._waveBar_o9dst_135 {
width: 3px;
}
._voiceTitle_o9dst_69 {
font-size: 18px;
}
._voiceListening_o9dst_103 {
font-size: 16px;
}
}
/* ===== Send Button Fix ===== */
._voiceActions_o9dst_437 ._sendBtn_o9dst_449 {
width: 100%;
min-height: 42px;
padding: 0 16px !important;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 10px;
line-height: 1;
white-space: nowrap;
}
._voiceActions_o9dst_437 ._sendBtn_o9dst_449 svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
._voiceActions_o9dst_437 ._sendBtn_o9dst_449 span {
display: inline-flex;
align-items: center;
justify-content: center;
}
._smallSpinner_o9dst_873 {
width: 9px !important;
height: 9px !important;
border-width: 1.5px;
}
._calendarModalDialog_1wxb5_1 ._modal-content_1wxb5_1 {
border: none;
border-radius: 24px;
overflow: hidden;
}
._calendarModalDialog_1wxb5_1 ._modal-dialog_1wxb5_15 {
max-width: 1100px;
width: 95%;
}
._calendarModal_1wxb5_1 {
position: relative;
background: #fff;
border-radius: 24px;
padding: 20px 24px;
display: flex;
gap: 24px;
min-height: auto;
max-height: 85vh;
}
._calendarClose_1wxb5_49 {
position: absolute;
top: 14px;
right: 14px;
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: #f4f4f7;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .25s;
z-index: 10;
}
._calendarClose_1wxb5_49:hover {
background: #ececec;
}
._calendarLeft_1wxb5_93 {
flex: 0 0 360px;
padding-right: 10px;
border-right: 1px solid #e5e7eb;
}
._calendarRight_1wxb5_107 {
flex: 1;
padding-left: 10px;
overflow-y: auto;
max-height: calc(85vh - 40px);
}
._calendarRight_1wxb5_107::-webkit-scrollbar {
width: 4px;
}
._calendarRight_1wxb5_107::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 4px;
}
/* Manual / AI Assistant tab switch — sticky at top of scroll area */
._tabSwitchOuter_1wxb5_143 {
position: sticky;
top: 0;
z-index: 5;
background: #fff;
padding-bottom: 10px;
margin-bottom: 8px;
}
._tabSwitchWrap_1wxb5_161 {
display: flex;
gap: 6px;
background: #F3F4F6;
border-radius: 8px;
padding: 4px;
}
._tabBtn_1wxb5_177 {
flex: 1;
border: none;
border-radius: 6px;
padding: 7px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: transparent;
color: #6B7280;
transition: all 0.15s;
}
._tabBtnActive_1wxb5_203 {
background: #fff;
color: #111827;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Heading */
._calendarTitle_1wxb5_217 {
text-align: center;
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
color: #222;
}
/* Month */
._calendarMonth_1wxb5_235 {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
._calendarArrow_1wxb5_249 {
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
background: #f5f5f5;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: .2s;
}
._calendarArrow_1wxb5_249:hover {
background: #e5e7eb;
}
._calendarMonthText_1wxb5_283 {
font-size: 16px;
font-weight: 700;
}
/* Week */
._calendarWeek_1wxb5_295 {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 6px;
}
._calendarWeek_1wxb5_295 span {
text-align: center;
font-size: 12px;
color: #7b7b7b;
font-weight: 600;
}
/* Days */
._calendarDays_1wxb5_323 {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 12px;
}
._calendarDay_1wxb5_323 {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .25s;
font-weight: 600;
margin: auto;
font-size: 13px;
}
._calendarActiveDay_1wxb5_369 {
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
color: #fff;
}
/* Section Labels */
._calendarLabel_1wxb5_381 {
font-size: 13px;
font-weight: 700;
color: #222;
margin-bottom: 6px;
margin-top: 2px;
}
._slotGrid_1wxb5_399 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-bottom: 12px;
min-height: 40px;
}
._slotBtn_1wxb5_415 {
height: 34px;
border: 1px solid #e5e7eb;
background: #fff;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
transition: .2s;
cursor: pointer;
}
._slotBtn_1wxb5_415:hover {
border-color: #7b3ff2;
/* background: linear-gradient(90deg, #7b3ff2, #2d8cff); */
}
._activeSlot_1wxb5_447 {
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
color: white;
border: none;
}
/* Duration */
._optionGroup_1wxb5_461 {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
._optionBtn_1wxb5_473 {
flex: 1;
height: 34px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: white;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: .2s;
}
._optionBtn_1wxb5_473:hover {
border-color: #7b3ff2;
/* background: linear-gradient(90deg, #7b3ff2, #2d8cff); */
}
._optionActive_1wxb5_507 {
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
color: white;
border: none;
}
/* Switch */
._switchRow_1wxb5_521 {
display: flex;
justify-content: space-between;
align-items: center;
margin: 8px 0 12px 0;
padding: 2px 0;
}
._switchLabel_1wxb5_537 {
font-size: 13px;
font-weight: 600;
}
._switch_1wxb5_521 {
position: relative;
width: 44px;
height: 24px;
flex-shrink: 0;
}
._switch_1wxb5_521 input {
display: none;
}
._slider_1wxb5_569 {
position: absolute;
inset: 0;
background: #d1d5db;
border-radius: 40px;
transition: .3s;
cursor: pointer;
}
._slider_1wxb5_569:before {
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
background: white;
position: absolute;
left: 3px;
top: 3px;
transition: .3s;
}
._switch_1wxb5_521 input:checked+._slider_1wxb5_569 {
background: #22c55e;
}
._switch_1wxb5_521 input:checked+._slider_1wxb5_569:before {
transform: translateX(20px);
}
/* Footer */
._calendarFooter_1wxb5_629 {
margin-top: 8px;
}
/* Book Button */
._bookBtn_1wxb5_639 {
width: 100%;
height: 40px;
border: none;
border-radius: 12px;
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
color: white;
font-size: 14px;
font-weight: 700;
transition: .25s;
cursor: pointer;
}
._bookBtn_1wxb5_639:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(90, 76, 255, .35);
}
._calendarDay_1wxb5_323:not(._calendarPast_1wxb5_677):hover {
background: #f3f4f6;
transform: scale(1.05);
}
._calendarActiveDay_1wxb5_369:hover {
background: linear-gradient(90deg, #7b3ff2, #2d8cff) !important;
transform: scale(1.05);
}
/* Form inputs */
._calendarRight_1wxb5_107 input[type="text"],
._calendarRight_1wxb5_107 textarea {
border: 1px solid #e5e7eb;
transition: border-color 0.2s;
}
._calendarRight_1wxb5_107 input[type="text"]:focus,
._calendarRight_1wxb5_107 textarea:focus {
border-color: #7b3ff2;
outline: none;
box-shadow: 0 0 0 3px rgba(123, 63, 242, 0.1);
}
/* Participants badges */
._calendarRight_1wxb5_107 ._badge_1wxb5_727 {
background: #f3f4f6 !important;
color: #222 !important;
border: 1px solid #e5e7eb;
}
._calendarRight_1wxb5_107 ._badge_1wxb5_727 ._cursor-pointer_1wxb5_739 {
transition: color 0.2s;
}
._calendarRight_1wxb5_107 ._badge_1wxb5_727 ._cursor-pointer_1wxb5_739:hover {
color: #dc3545 !important;
}
/* Text danger */
._text-danger_1wxb5_757 {
color: #dc3545;
}
/* Required field indicator */
._text-danger_1wxb5_757 {
color: #dc3545;
margin-left: 2px;
}
/* Add button */
._calendarRight_1wxb5_107 ._btn-primary_1wxb5_779 {
background: linear-gradient(90deg, #7b3ff2, #2d8cff) !important;
border: none !important;
transition: all 0.25s;
}
._calendarRight_1wxb5_107 ._btn-primary_1wxb5_779:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(90, 76, 255, 0.3);
}
._calendarRight_1wxb5_107 ._btn-primary_1wxb5_779:active {
transform: translateY(0);
}
._calendarRight_1wxb5_107 ._d-flex_1wxb5_811._flex-wrap_1wxb5_811 {
min-height: 36px;
padding: 3px 0;
}
/* Responsive */
@media (max-width: 1024px) {
._calendarModalDialog_1wxb5_1 ._modal-dialog_1wxb5_15 {
max-width: 95%;
width: 95%;
}
._calendarLeft_1wxb5_93 {
flex: 0 0 300px;
}
}
@media (max-width: 768px) {
._calendarModalDialog_1wxb5_1 ._modal-dialog_1wxb5_15 {
max-width: 95%;
width: 95%;
margin: 10px auto;
}
._calendarModal_1wxb5_1 {
flex-direction: column;
padding: 16px;
min-height: auto;
max-height: 90vh;
gap: 16px;
}
._calendarLeft_1wxb5_93 {
flex: none;
width: 100%;
padding-right: 0;
border-right: none;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 16px;
}
._calendarRight_1wxb5_107 {
padding-left: 0;
max-height: none;
overflow-y: visible;
}
._slotGrid_1wxb5_399 {
grid-template-columns: repeat(3, 1fr);
}
._calendarDay_1wxb5_323 {
width: 32px;
height: 32px;
font-size: 13px;
}
}
._calendarToday_1wxb5_927 {
border: 2px solid #7b3ff2;
border-radius: 50%;
}
._calendarActiveDay_1wxb5_369 {
background: linear-gradient(90deg, #7b3ff2, #2d8cff);
color: white;
border-radius: 50%;
}._modalTitle_v0nph_1 {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: 600;
color: #1f2937;
}
._icon_v0nph_19 {
display: flex;
align-items: center;
justify-content: center;
color: #4f46e5;
font-size: 20px;
}
._modalBody_v0nph_35 {
padding: 24px;
}
._label_v0nph_43 {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: #374151;
}
._textarea_v0nph_59 {
min-height: 150px !important;
resize: vertical;
border-radius: 10px !important;
border: 1px solid #d1d5db !important;
font-size: 14px !important;
line-height: 1.6;
padding: 14px !important;
transition: all 0.2s ease;
height: 160px;
}
._textarea_v0nph_59:focus {
border-color: #4f46e5 !important;
box-shadow: 0 0 0 0.18rem rgba(79, 70, 229, 0.15) !important;
}
._footer_v0nph_93 {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 24px;
}
._successBody_v0nph_107 {
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
padding: 40px 24px;
text-align: center;
}
._successIcon_v0nph_129 {
font-size: 72px;
color: #22c55e;
}
._successTitle_v0nph_139 {
margin: 0;
font-size: 26px;
font-weight: 700;
color: #111827;
}
._successText_v0nph_153 {
margin: 0;
max-width: 340px;
font-size: 15px;
color: #6b7280;
line-height: 1.6;
}
._closeButton_v0nph_169 {
min-width: 100px;
}
._submitButton_v0nph_177 {
min-width: 140px;
}
._loadingContent_v0nph_185 {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
._spinner_v0nph_199 {
margin-right: 6px;
}
@media (max-width: 768px) {
._modalBody_v0nph_35 {
padding: 18px;
}
._footer_v0nph_93 {
flex-direction: column-reverse;
}
._footer_v0nph_93 button {
width: 100%;
}
._textarea_v0nph_59 {
min-height: 120px !important;
}
._successBody_v0nph_107 {
min-height: 260px;
padding: 28px 16px;
}
._successIcon_v0nph_129 {
font-size: 60px;
}
._successTitle_v0nph_139 {
font-size: 22px;
}
}
/* ── Yellow Buttons ── */
._btn_yellow_v0nph_271 {
background: var(--y-grad);
border: none;
color: #fff;
font-family: var(--font);
font-weight: 500;
font-size: 13px;
padding: 9px 18px;
border-radius: 99px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
/* box-shadow: var(--y-shadow); */
transition: all 0.18s ease;
white-space: nowrap;
line-height: 1;
}
._btn_yellow_v0nph_271:hover {
/* background: var(--y-grad-hover); */
/* box-shadow: 0 6px 24px rgba(255, 180, 0, 0.45); */
transform: translateY(-1px);
}
._btn_yellow_v0nph_271:active {
transform: translateY(0);
}
._btn_yellow_v0nph_271:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
._secclose_v0nph_341 {
background-color: #f1f1f1;
color: black !important;
border: 1px solid rgb(117, 117, 117);
}
._secclose_v0nph_341:hover {
background-color: #d1d5db;
color: black !important;
border: 1px solid rgb(117, 117, 117);
}
._refreshBtn1_v0nph_365 {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #4b5563;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
._refreshBtn1_v0nph_365:hover {
background: #f9fafb;
border-color: #d1d5db;
color: #111827;
}
._btn_ghost1_v0nph_405 {
background: none;
border: 1.5px solid rgb(65, 65, 65);
color: var(--text2);
font-weight: 600;
font-size: 13px;
padding: 4px 16px;
border-radius: 99px;
cursor: pointer;
transition: all 0.18s;
}
._btn_ghost1_v0nph_405:hover {
background: white !important;
border-color: black !important;
color: black !important;
}
._quotation_header_v0nph_441 {
display: flex;
align-items: center;
gap: 2px;
width: 100%;
flex-wrap: wrap;
}
._quotation_title_v0nph_457 {
flex-shrink: 0;
}
._quotation_tabs_v0nph_465 {
display: flex;
justify-content: center;
gap: 2px;
background: #f3f4f6;
border-radius: 8px;
padding: 3px;
}
._quotation_actions_v0nph_485 {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
@media (max-width: 1200px) {
._quotation_header_v0nph_441 {
gap: 4px;
}
._quotation_header_v0nph_441 .card-title {
font-size: 15px;
}
._quotation_tabs_v0nph_465 button {
padding: 4px 8px !important;
font-size: 12px !important;
}
._quotation_actions_v0nph_485 button {
padding: 3px 8px !important;
font-size: 12px !important;
}
}
@media (max-width: 992px) {
._quotation_header_v0nph_441 .card-title {
font-size: 14px;
}
._quotation_tabs_v0nph_465 button {
padding: 3px 6px !important;
font-size: 11px !important;
}
}
@media (max-width: 999px) {
._quotation_actions_v0nph_485 {
width: 100%;
margin-left: 0;
margin-top: 8px;
justify-content: flex-start;
}
}
@media (min-width: 1000px) and (max-width: 1200px) {
._quotation_tabs_v0nph_465 button {
padding: 3px 8px !important;
font-size: 12px !important;
}
._quotation_actions_v0nph_485 button {
padding: 2px 8px !important;
font-size: 12px !important;
}
._quotation_header_v0nph_441 ._card-title_v0nph_509 {
font-size: 15px;
}
}
._emailModalDialog_v0nph_617 {
z-index: 100000 !important;
}
._emailModalBackdrop_v0nph_625 {
z-index: 99998 !important;
}
._emailModal_v0nph_617 {
width: min(95vw, 1100px);
height: 92vh;
max-height: 92vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
._emailBody_v0nph_651 {
flex: 1;
overflow: hidden;
min-height: 0;
padding: 22px 24px;
}
._emailContent_v0nph_665 {
display: flex;
gap: 28px;
height: 100%;
min-height: 0;
}
._emailLeftPanel_v0nph_679 {
flex: 0 0 34%;
min-width: 280px;
padding-right: 16px;
/* overflow: hidden; */
}
._emailRightPanel_v0nph_693 {
flex: 1;
min-width: 0;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding-left: 24px;
/* border-left: 1px solid #e5e7eb; */
}
._emailRightPanel_v0nph_693::-webkit-scrollbar {
width: 6px;
}
._emailRightPanel_v0nph_693::-webkit-scrollbar-thumb {
/* background: #cbd5e1; */
border-radius: 10px;
}
._emailMessage_v0nph_731 {
padding-top: 10px;
line-height: 1.7;
word-break: break-word;
overflow-wrap: anywhere;
}
._emailMessage_v0nph_731 img {
max-width: 100%;
height: auto;
}
._emailHeader_v0nph_755 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 24px;
border-bottom: 1px solid #e5e7eb;
flex-shrink: 0;
}
._emailHeaderLeft_v0nph_775 {
/* flex: 1; */
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
}
._emailTitle_v0nph_793 {
flex: 1;
min-width: 0;
font-size: 18px;
font-weight: 700;
color: #1f2937;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._emailHeaderRight_v0nph_817 {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
._emailBadge_v0nph_831 {
flex-shrink: 0;
}
._calendarModal_v0nph_839 {
width: 95vw;
max-width: 1100px;
height: 90vh;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 18px;
}
._calendarModalBody_v0nph_863 {
flex: 1;
overflow-y: auto;
min-height: 0;
}
._searchFilter_v0nph_873 {
display: flex;
align-items: center;
}
._prioritySelect_v0nph_883 {
width: 110px;
height: 24px;
padding: 0 5px ;
border: 1px solid #d8dbe6;
border-radius: 8px;
background-color: #fff;
font-size: 13px;
font-weight: 500;
color: #333;
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
transition: all 0.2s ease;
}
._prioritySelect_v0nph_883:hover {
border-color: #7b3ff2;
}
._prioritySelect_v0nph_883:focus {
border-color: #7b3ff2;
box-shadow: 0 0 0 3px rgba(123, 63, 242, 0.15);
}._activityBody_aaz1j_1 {
padding: 18px;
background: #f8f9fc;
}
._topCard_aaz1j_11 {
/* background: #fff; */
border-radius: 18px;
/* border: 1px solid #ececec; */
padding: 20px;
}
._topTitle_aaz1j_25 {
text-align: center;
color: #6c3ef4;
font-size: 22px;
font-weight: 700;
margin-bottom: 24px;
}
._timelineList_aaz1j_41 {
max-height: 480px;
overflow-y: auto;
padding-right: 4px;
}
._timelineItem_aaz1j_53 {
position: relative;
display: flex;
gap: 16px;
padding-bottom: 22px;
}
._timelineItem_aaz1j_53:not(:last-child)::before {
content: "";
position: absolute;
left: 8px;
top: 18px;
width: 2px;
height: calc(100% - 4px);
background: #d9dde8;
}
._timelineDot_aaz1j_87 {
width: 16px;
height: 16px;
background: #22c55e;
border-radius: 50%;
border: 3px solid #eaf9ef;
z-index: 2;
flex-shrink: 0;
}
._timelineCard_aaz1j_107 {
flex: 1;
/* background: #ffffff;
border: 1px solid #ececec; */
border-radius: 14px;
padding: 14px 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
._cardHeader_aaz1j_125 {
display: flex;
justify-content: space-between;
align-items: center;
}
._cardTitle_aaz1j_137 {
font-size: 15px;
font-weight: 600;
color: #222;
}
._statusBadge_aaz1j_149 {
background: #fff4d4;
color: #b7791f;
font-size: 11px;
font-weight: 600;
border-radius: 20px;
padding: 3px 10px;
text-transform: uppercase;
}
._cardDescription_aaz1j_169 {
margin-top: 10px;
color: #667085;
font-size: 13px;
line-height: 1.6;
}
._cardFooter_aaz1j_183 {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 14px;
}
._cardDate_aaz1j_197 {
font-size: 12px;
color: #9ca3af;
}
._viewBtn_aaz1j_207 {
border: none;
background: transparent;
color: #4f46e5;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
._viewBtn_aaz1j_207:hover {
text-decoration: underline;
}
._emptyState_aaz1j_233 {
text-align: center;
color: #9ca3af;
padding: 40px 0;
justify-content: center !important;
align-items: center !important;
}
._modalHeader_aaz1j_247 {
border-bottom: none !important;
padding-bottom: 12px;
}
._modalFooter_aaz1j_257 {
border-top: none !important;
padding-top: 12px;
}
._btn_ghost_aaz1j_265 {
background: none;
border: 1.5px solid var(--border2);
color: var(--text2);
font-family: var(--font);
font-weight: 600;
font-size: 13px;
padding: 8px 16px;
border-radius: 99px;
cursor: pointer;
transition: all 0.18s;
}
._btn_ghost_aaz1j_265:hover {
background: var(--surface2);
border-color: var(--text3);
color: black;
}
/* Scroll only inside activity list */
._activityBody_aaz1j_1 {
max-height: 60vh;
overflow: hidden;
}
._topCard_aaz1j_11 {
height: 100%;
display: flex;
flex-direction: column;
}
._timelineList_aaz1j_41 {
flex: 1;
overflow-y: auto;
}
/* Optional scrollbar */
._timelineList_aaz1j_41::-webkit-scrollbar {
width: 6px;
}
._timelineList_aaz1j_41::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 10px;
}
._timelineList_aaz1j_41::-webkit-scrollbar-track {
background: transparent;
}
._activitylabel_aaz1j_361 {
font-size: 12px !important;
color: #667085;
font-weight: 700;
}
._sameHeightModal_aaz1j_371 .modal-content {
height: 450px;
}
._sameHeightModal_aaz1j_371 .modal-body {
height: calc(650px - 120px);
overflow-y: auto;
}
._aiAccountingDashboard_96jhr_1 {
--ai-blue: #1556ef;
--ai-ink: #132146;
--ai-muted: #65718d;
--ai-line: #e9edf5;
min-height: 100vh;
padding: 18px;
background: #f7f9fd;
color: var(--ai-ink);
font-size: 12px;
}
._aiAccountingDashboard_96jhr_1 * {
box-sizing: border-box;
}
._aiAccountingHeader_96jhr_29,
._aiAccountingHeaderActions_96jhr_31,
._aiAccountingStatGrid_96jhr_33,
._aiAccountingMainGrid_96jhr_35,
._aiAccountingCharts_96jhr_37,
._aiAccountingMiniStats_96jhr_39,
._aiAccountingDocumentsHeader_96jhr_41,
._aiAccountingTabs_96jhr_43 {
display: flex;
align-items: flex-start;
}
._aiAccountingHeader_96jhr_29 {
justify-content: space-between;
margin-bottom: 16px;
gap: 18px;
position: relative;
}
._aiAccountingHeader_96jhr_29 h1,
._aiAccountingDocumentsHeader_96jhr_41 h2 {
font-size: 18px;
margin: 0 0 4px;
font-weight: 700;
}
._aiAccountingHeader_96jhr_29 p {
margin: 0;
color: var(--ai-muted);
font-size: 11px;
}
._aiAccountingHeaderActions_96jhr_31 {
gap: 8px;
}
._aiAccountingControl_96jhr_91,
._aiAccountingSquareButton_96jhr_93,
._aiAccountingBell_96jhr_95,
._aiAccountingCreateButton_96jhr_97 {
border: 1px solid var(--ai-line);
background: #fff;
border-radius: 6px;
height: 32px;
padding: 0 12px;
font: 600 11px inherit;
color: #2c3a5d;
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
}
._aiAccountingSquareButton_96jhr_93 {
width: 32px;
padding: 0;
justify-content: center;
transition: all 0.25s ease;
}
._aiAccountingBell_96jhr_95 {
border: 0;
position: relative;
padding: 0 7px;
font-size: 17px;
}
._aiAccountingBell_96jhr_95 i {
position: absolute;
right: 1px;
top: 1px;
width: 11px;
height: 11px;
border-radius: 50%;
color: #fff;
background: #fa2d44;
font: 8px Arial;
display: grid;
place-items: center;
font-style: normal;
}
._aiAccountingCreateButton_96jhr_97 {
color: #fff;
background: var(--ai-blue);
border-color: var(--ai-blue);
font-weight: 700;
}
._aiReportsAskToggle_96jhr_187 {
height: 34px;
border: 1px solid #d7e1f3;
background: linear-gradient(135deg, #fff 0%, #f4f8ff 100%);
color: #24457e;
border-radius: 8px;
padding: 0 7px 0 11px;
display: inline-flex;
align-items: center;
gap: 8px;
font: 700 11px inherit;
letter-spacing: 0.01em;
box-shadow: 0 2px 5px rgba(32, 74, 145, 0.06);
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
._aiReportsAskToggle_96jhr_187:hover {
border-color: #a9c2ee;
box-shadow: 0 4px 10px rgba(32, 74, 145, 0.12);
transform: translateY(-1px);
}
._aiReportsToggleTrack_96jhr_235 {
width: 26px;
height: 15px;
border-radius: 999px;
background: #c3cfdf;
padding: 2px;
transition: background 0.2s ease;
}
._aiReportsToggleTrack_96jhr_235 i {
display: block;
width: 11px;
height: 11px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(29, 50, 89, 0.24);
transition: transform 0.2s ease;
}
._aiReportsAskToggleActive_96jhr_269 {
color: #164ab7;
border-color: #a6c3fb;
background: linear-gradient(135deg, #fff 0%, #eaf2ff 100%);
box-shadow: 0 3px 9px rgba(21, 86, 239, 0.15);
}
._aiReportsAskToggleActive_96jhr_269 ._aiReportsToggleTrack_96jhr_235 {
background: var(--ai-blue);
}
._aiReportsAskToggleActive_96jhr_269 ._aiReportsToggleTrack_96jhr_235 i {
transform: translateX(11px);
}
._aiReportsAskCard_96jhr_293 {
margin: 0 0 10px;
padding: 13px;
background: #fff;
border: 1px solid var(--ai-line);
border-radius: 8px;
}
._aiReportsAskCard_96jhr_293 h2 {
width: 70%;
margin: 0 auto 9px;
font-size: 12px;
}
._aiReportsAskForm_96jhr_317 {
display: flex;
align-items: center;
justify-content: center;
}
._aiReportsPromptField_96jhr_327 {
width: 70%;
flex: none;
margin: 0 auto;
min-width: 0;
min-height: 96px;
display: flex;
flex-direction: column;
padding: 14px 16px 12px;
border: 1px solid #d4d7dc;
border-radius: 18px;
background: #fff;
color: #5771a7;
box-shadow: 0 7px 18px rgba(31, 43, 67, 0.06);
}
._aiReportsPromptField_96jhr_327:focus-within {
border-color: #aeb9cd;
box-shadow: 0 7px 18px rgba(31, 43, 67, 0.1);
}
._aiReportsPromptField_96jhr_327 textarea {
min-width: 0;
flex: 1;
width: 100%;
min-height: 58px;
resize: none;
border: 0;
outline: 0;
color: var(--ai-ink);
font: 500 14px inherit;
line-height: 1.45;
}
._aiReportsPromptField_96jhr_327 textarea::placeholder {
color: #67799b;
}
._aiReportsComposerActions_96jhr_395,
._aiReportsComposerEnd_96jhr_397 {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
._aiReportsComposerEnd_96jhr_397 {
width: auto;
gap: 9px;
}
._aiReportsComposerActions_96jhr_395 {
gap: 9px;
}
._aiReportsComposerActions_96jhr_395 button {
width: 25px;
height: 25px;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: transparent;
border-radius: 6px;
color: #20375d;
font-size: 18px;
cursor: pointer;
}
._aiReportsComposerActions_96jhr_395 ._aiReportsMicButton_96jhr_449 {
width: 31px;
height: 31px;
border-radius: 50%;
color: #fff;
background: var(--ai-blue);
font-size: 16px;
}
._aiReportsComposerActions_96jhr_395 ._aiReportsSendButton_96jhr_465 {
width: 31px;
height: 31px;
border-radius: 8px;
background: var(--ai-blue);
color: #fff;
font-size: 18px;
}
._aiReportsExamples_96jhr_481 {
width: 90%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin: 9px auto 0;
}
._aiReportsExamples_96jhr_481 span {
width: 100%;
text-align: center;
color: var(--ai-muted);
font-size: 9px;
}
._aiReportsExamples_96jhr_481 button {
border: 1px solid #edf0f6;
border-radius: 4px;
background: #f9fbff;
color: #536584;
padding: 4px 9px;
font: 600 8px inherit;
cursor: pointer;
}
._aiAccountingStatGrid_96jhr_33 {
gap: 8px;
margin-bottom: 10px;
}
._aiAccountingStatCard_96jhr_537 {
min-width: 0;
flex: 1;
height: 65px;
background: #fff;
border: 1px solid var(--ai-line);
border-radius: 8px;
display: flex;
align-items: center;
padding: 10px;
gap: 9px;
}
._aiAccountingIconBox_96jhr_561 {
flex: 0 0 32px;
height: 32px;
border-radius: 6px;
display: grid;
place-items: center;
color: #fff;
font-size: 19px;
}
._aiAccountingBlue_96jhr_579 {
color: var(--ai-blue);
}
._aiAccountingIconBox_96jhr_561._aiAccountingBlue_96jhr_579 {
background: #1456ef;
color: #fff;
}
._aiAccountingOrange_96jhr_593 {
color: #f88909;
}
._aiAccountingIconBox_96jhr_561._aiAccountingOrange_96jhr_593 {
color: #fff;
background: #fb8b08;
}
._aiAccountingGreen_96jhr_607 {
color: #0bad61;
}
._aiAccountingIconBox_96jhr_561._aiAccountingGreen_96jhr_607 {
color: #fff;
background: #06a85c;
}
._aiAccountingRed_96jhr_621 {
color: #e23532;
}
._aiAccountingIconBox_96jhr_561._aiAccountingRed_96jhr_621 {
color: #fff;
background: #dd302d;
}
._aiAccountingPurple_96jhr_635 {
color: #5746d8;
}
._aiAccountingIconBox_96jhr_561._aiAccountingPurple_96jhr_635 {
color: #fff;
background: #5946d9;
}
._aiAccountingStatCard_96jhr_537 small,
._aiAccountingMiniStats_96jhr_39 small {
display: block;
color: var(--ai-muted);
font-size: 9px;
font-weight: 600;
}
._aiAccountingStatCard_96jhr_537 strong {
display: block;
margin: 3px 0;
font-size: 13px;
}
._aiAccountingStatCard_96jhr_537 em,
._aiAccountingMiniStats_96jhr_39 em {
display: block;
font-size: 8px;
font-style: normal;
color: #0bad61;
font-weight: 700;
}
._aiAccountingStatCard_96jhr_537 em b {
font-weight: 500;
color: var(--ai-muted);
}
._aiAccountingMainGrid_96jhr_35 {
align-items: stretch;
gap: 10px;
margin-top: 10px !important;
}
._aiAccountingChartColumn_96jhr_707 {
min-width: 0;
flex: 1;
}
._aiAccountingCharts_96jhr_37 {
align-items: stretch;
gap: 9px;
}
._aiAccountingTrend_96jhr_723,
._aiAccountingDistribution_96jhr_725,
._aiAccountingDetailCard_96jhr_727,
._aiAccountingDocumentsSection_96jhr_729 {
background: #fff;
border: 1px solid var(--ai-line);
border-radius: 8px;
}
._aiAccountingTrend_96jhr_723 {
flex: 1.42;
padding: 10px 4px;
height: 207px;
}
._aiAccountingDistribution_96jhr_725 {
flex: 1;
padding: 11px;
}
._aiAccountingChartHeading_96jhr_757,
._aiAccountingCardTitle_96jhr_759 {
display: flex;
align-items: center;
justify-content: space-between;
}
._aiAccountingTrend_96jhr_723 h3,
._aiAccountingDistribution_96jhr_725 h3,
._aiAccountingDetailCard_96jhr_727 h3 {
margin: 0;
font-size: 11px;
}
._aiAccountingChartHeading_96jhr_757 button {
padding: 5px 8px;
background: #fff;
border: 1px solid var(--ai-line);
border-radius: 4px;
color: #34405e;
font: 600 9px inherit;
}
._aiAccountingLegend_96jhr_797 {
display: flex;
align-items: center;
gap: 6px;
margin: 9px 0 1px;
font-size: 8px;
}
._aiAccountingLegend_96jhr_797 span:first-child {
margin-left: 0;
}
._aiAccountingBlueDot_96jhr_817,
._aiAccountingOrangeDot_96jhr_819,
._aiAccountingGreenDot_96jhr_821,
._aiAccountingRedDot_96jhr_823 {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
}
._aiAccountingBlueDot_96jhr_817 {
background: #1456ef;
}
._aiAccountingOrangeDot_96jhr_819 {
background: #fc7900;
}
._aiAccountingGreenDot_96jhr_821 {
background: #13ae63;
}
._aiAccountingRedDot_96jhr_823 {
background: #dc302d;
}
._aiAccountingTrend_96jhr_723 svg {
width: 100%;
height: 111px;
overflow: visible;
}
._aiAccountingGridLines_96jhr_869 line {
stroke: #edf0f6;
stroke-width: 1;
}
._aiAccountingTrend_96jhr_723 polyline {
fill: none;
stroke-width: 1.5;
}
._aiAccountingTotalLine_96jhr_885 {
stroke: #1456ef;
}
._aiAccountingOutstandingLine_96jhr_891 {
stroke: #fc7900;
}
._aiAccountingCollectedLine_96jhr_897 {
stroke: #13ae63;
}
._aiAccountingDates_96jhr_903 {
display: flex;
justify-content: space-between;
font-size: 8px;
color: #67738f;
}
._aiAccountingDonutContent_96jhr_915 {
height: 170px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
}
._aiAccountingDonut_96jhr_915 {
width: 106px;
height: 106px;
border-radius: 50%;
background: conic-gradient(
#1456ef 0 52.6%,
#fc7900 52.6% 78.9%,
#13ae63 78.9%
);
position: relative;
display: grid;
place-items: center;
}
._aiAccountingDonut_96jhr_915::before {
content: "";
position: absolute;
width: 58px;
height: 58px;
border-radius: 50%;
background: #fff;
}
._aiAccountingDonut_96jhr_915 strong {
position: relative;
z-index: 1;
font-size: 19px;
text-align: center;
}
._aiAccountingDonut_96jhr_915 small {
display: block;
color: var(--ai-muted);
font-size: 8px;
}
._aiAccountingDistributionLegend_96jhr_993 {
display: grid;
grid-template-columns: max-content max-content;
grid-template-rows: repeat(2, max-content);
justify-content: space-between;
gap: 12px;
flex: 1;
font-size: 8px;
color: #33415f;
}
._aiAccountingDistributionLegend_96jhr_993 span:last-child {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
._aiAccountingDistributionLegend_96jhr_993 i {
margin-right: 5px;
}
._aiAccountingDistributionLegend_96jhr_993 b {
margin-left: 12px;
color: #71809b;
font-weight: 500;
}
._aiAccountingMiniStats_96jhr_39 {
margin-top: 9px;
align-items: stretch;
background: #fff;
border: 1px solid var(--ai-line);
border-radius: 8px;
}
._aiAccountingMiniStats_96jhr_39 article {
flex: 1;
min-width: 0;
display: flex;
gap: 8px;
padding: 11px;
border-right: 1px solid var(--ai-line);
}
._aiAccountingMiniStats_96jhr_39 article:last-child {
border: 0;
}
._aiAccountingMiniStats_96jhr_39 article > svg {
font-size: 18px;
flex: 0 0 auto;
}
._aiAccountingMiniStats_96jhr_39 strong {
display: block;
margin: 2px 0;
font-size: 15px;
}
._aiAccountingSideColumn_96jhr_1093 {
width: 275px;
display: flex;
flex-direction: column;
gap: 9px;
margin-top: 10px !important;
}
._aiAccountingDetailCard_96jhr_727 {
padding: 11px;
display: flex;
flex-direction: column;
}
._aiAccountingSideColumn_96jhr_1093 {
width: 275px;
display: flex;
flex-direction: column;
gap: 9px;
margin-top: 10px !important;
}
._aiAccountingSideColumn_96jhr_1093 > :last-child {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
._aiAccountingSideColumn_96jhr_1093 > :last-child ._aiAccountingCalls_96jhr_1145 {
flex: 1;
overflow-y: auto;
min-height: 0;
cursor: pointer;
}
._aiAccountingCardTitle_96jhr_759 {
margin-bottom: 8px;
}
._aiAccountingCardTitle_96jhr_759 button {
border: 0;
background: transparent;
color: var(--ai-blue);
font: 600 9px inherit;
}
._aiAccountingAgingList_96jhr_1175 > div,
._aiAccountingReminderList_96jhr_1177 > div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 0;
border-bottom: 1px solid #f0f2f7;
font-size: 9px;
}
._aiAccountingAgingList_96jhr_1175 span {
display: flex;
align-items: center;
gap: 7px;
}
._aiAccountingAgingList_96jhr_1175 b {
font-size: 9px;
}
._aiAccountingTotal_96jhr_885 {
border: 0 !important;
font-weight: 700;
}
._aiAccountingReminderList_96jhr_1177 i {
width: 15px;
font-style: normal;
color: var(--ai-blue);
font-size: 11px;
}
._aiAccountingReminderList_96jhr_1177 span {
flex: 1;
}
._aiAccountingCalls_96jhr_1145 {
flex: 1;
overflow-y: auto;
min-height: 0;
}
._aiAccountingCalls_96jhr_1145 > div {
display: flex;
align-items: flex-start;
gap: 7px;
padding: 7px 0;
border-bottom: 1px solid #f0f2f7;
}
._aiAccountingCalls_96jhr_1145 > div:last-child {
border: 0;
}
._aiAccountingCalls_96jhr_1145 > div > svg {
background: #eaf1ff;
color: var(--ai-blue);
padding: 5px;
width: 23px;
height: 23px;
border-radius: 50%;
}
._aiAccountingCalls_96jhr_1145 span {
flex: 1;
min-width: 0;
}
._aiAccountingCalls_96jhr_1145 span b,
._aiAccountingCalls_96jhr_1145 span small,
._aiAccountingCalls_96jhr_1145 em,
._aiAccountingCalls_96jhr_1145 em i {
display: block;
}
._aiAccountingCalls_96jhr_1145 span b {
font-size: 9px;
}
._aiAccountingCalls_96jhr_1145 span small {
font-size: 8px;
color: #71809b;
margin-top: 2px;
}
._aiAccountingCalls_96jhr_1145 em {
text-align: center;
color: #71809b;
font-style: normal;
font-size: 7px;
white-space: nowrap;
}
._aiAccountingCalls_96jhr_1145 em small {
margin-top: 5px !important;
display: block;
text-align: right;
}
._aiAccountingCalls_96jhr_1145 em i {
margin-top: 3px;
padding: 2px 6px;
font-style: normal;
font-size: 7px;
border-radius: 2px;
}
._aiAccountingCalls_96jhr_1145 em i._aiAccountingNoResponse_96jhr_1355 {
color: #e23532;
background: #ffebed;
}
._aiAccountingDocumentsSection_96jhr_729 {
width: 100%;
max-width: 100%;
min-width: 0;
margin-top: 10px;
overflow: hidden;
}
._aiAccountingDocumentsHeader_96jhr_41 {
min-height: 55px;
padding: 8px 12px 0;
border-bottom: 1px solid var(--ai-line);
display: flex;
align-items: flex-start;
justify-content: space-between;
}
._aiAccountingDocumentsHeader_96jhr_41 h2 {
font-size: 11px;
flex: 1;
margin: 0;
}
._aiAccountingTabs_96jhr_43 {
gap: 0;
height: 30px;
background: #fff;
border-radius: 8px;
box-shadow: 0 6px 16px rgba(98, 72, 154, 0.1);
overflow: hidden;
}
._aiAccountingTabs_96jhr_43 button {
border: 0;
height: 100%;
background: transparent;
color: #63708c;
font: 500 10px inherit;
position: relative;
cursor: pointer;
padding: 0 20px;
}
._aiAccountingTabs_96jhr_43 button._aiAccountingActiveTab_96jhr_1439 {
color: #fff;
font-weight: 700;
background: var(--ai-blue);
}
._aiAccountingTabs_96jhr_43 button._aiAccountingActiveTab_96jhr_1439::after {
display: none;
}
._aiAccountingReusableTable_96jhr_1455 {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
}
._aiAccountingReusableTable_96jhr_1455 .MuiPaper-root {
width: 100% !important;
max-width: 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* .aiAccountingReusableTable :global(.MuiToolbar-root) {
min-height: 38px !important;
padding: 3px 10px !important;
} */
/* .aiAccountingReusableTable :global(.tableHeading) {
display: none;
} */
._aiAccountingReusableTable_96jhr_1455 .MuiTableContainer-root {
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
overflow-x: auto !important;
}
._aiAccountingReusableTable_96jhr_1455 .MuiTableCell-root {
padding: 6px 7px !important;
font-size: 10px !important;
white-space: nowrap;
}
._aiAccountingReusableTable_96jhr_1455 .MuiTableHead-root .MuiTableCell-root {
font-size: 8px !important;
color: #64718b !important;
}
._aiAccountingReusableTable_96jhr_1455 .MuiTableFooter-root .MuiTableCell-root {
padding: 3px 7px !important;
}
._aiAccountingReusableTable_96jhr_1455 .MuiTablePagination-toolbar {
min-height: 28px !important;
}
._aiAccountingReusableTable_96jhr_1455 .MuiTablePagination-selectLabel,
._aiAccountingReusableTable_96jhr_1455 .MuiTablePagination-input {
display: none !important;
}
.aiAccountingDocType,
.aiAccountingStatus,
.aiAccountingReminder {
display: inline-block;
border-radius: 3px;
padding: 2px 5px;
font-size: 10px !important;
font-weight: 700;
line-height: 1.1;
}
.aiAccountingsuccess {
color: #15803d;
background: #dcfce7;
}
.aiAccountingvalidation_failed {
color: #b91c1c;
background: #fee2e2;
}
.aiAccountingfailed {
color: #b91c1c;
background: #fee2e2;
}
.aiAccountingpending {
color: #b45309;
background: #fef3c7;
}
.aiAccountingInvoice {
background: #e9f0ff;
color: #1556ef;
}
.aiAccountingQuotation {
background: #fff0dc;
color: #f17800;
}
.aiAccountingDelivery,
.aiAccountingCompleted {
background: #dff8ea;
color: #08a75a;
}
.aiAccountingSent {
background: #e8f0ff;
color: #1556ef;
}
.aiAccountingOverdue {
background: #ffe9ed;
color: #e23532;
}
.aiAccountingDraft {
background: #edf0f5;
color: #6d778e;
}
.aiAccountingBalance {
color: #f0323d;
}
.aiAccountingDueToday {
background: #fff0dc;
color: #f17800;
}
.aiAccountingMoreButton {
border: 0;
color: #45516c;
background: transparent;
cursor: pointer;
padding: 0;
font-size: 15px;
}
._aiAccountingStatCard_96jhr_537,
._aiAccountingMiniStats_96jhr_39 article {
position: relative;
overflow: hidden;
transition:
transform 0.24s ease,
box-shadow 0.24s ease,
border-color 0.24s ease;
}
._aiAccountingStatCard_96jhr_537::after,
._aiAccountingMiniStats_96jhr_39 article::after {
content: "";
position: absolute;
inset: 0 auto 0 -65%;
width: 42%;
pointer-events: none;
background: linear-gradient(
105deg,
transparent 18%,
rgba(21, 86, 239, 0.07) 50%,
transparent 82%
);
transform: skewX(-18deg);
}
._aiAccountingStatCard_96jhr_537:hover,
._aiAccountingMiniStats_96jhr_39 article:hover {
z-index: 1;
transform: translateY(-4px);
border-color: rgba(21, 86, 239, 0.28);
box-shadow: 0 10px 22px rgba(31, 62, 125, 0.12);
}
._aiAccountingStatCard_96jhr_537:hover::after,
._aiAccountingMiniStats_96jhr_39 article:hover::after {
animation: _aiAccountingCardSweep_96jhr_1 0.65s ease-out;
}
._aiAccountingStatCard_96jhr_537:hover ._aiAccountingIconBox_96jhr_561,
._aiAccountingMiniStats_96jhr_39 article:hover > svg {
animation: _aiAccountingIconPop_96jhr_1 0.42s ease-out;
}
@keyframes _aiAccountingCardSweep_96jhr_1 {
from {
left: -65%;
}
to {
left: 130%;
}
}
@keyframes _aiAccountingIconPop_96jhr_1 {
50% {
transform: translateY(-3px) scale(1.1) rotate(-7deg);
}
100% {
transform: translateY(0) scale(1) rotate(0);
}
}
@media (max-width: 1180px) {
._aiAccountingStatGrid_96jhr_33 {
flex-wrap: wrap;
}
._aiAccountingStatCard_96jhr_537 {
flex-basis: 30%;
}
._aiAccountingSideColumn_96jhr_1093 {
width: 250px;
}
._aiAccountingMiniStats_96jhr_39 {
flex-wrap: wrap;
}
._aiAccountingMiniStats_96jhr_39 article {
flex-basis: 30%;
}
._aiAccountingCharts_96jhr_37 {
flex-wrap: wrap;
}
._aiAccountingTrend_96jhr_723,
._aiAccountingDistribution_96jhr_725 {
min-width: 300px;
}
}
@media (max-width: 900px) {
._aiAccountingHeader_96jhr_29 {
align-items: flex-start;
flex-direction: column;
}
._aiAccountingHeaderActions_96jhr_31 {
flex-wrap: wrap;
}
._aiAccountingMainGrid_96jhr_35 {
flex-direction: column;
}
._aiAccountingSideColumn_96jhr_1093 {
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
._aiAccountingSideColumn_96jhr_1093 > :last-child {
grid-column: span 2;
}
._aiAccountingTabs_96jhr_43 {
overflow-x: auto;
gap: 12px;
}
._aiAccountingReusableTable_96jhr_1455 {
overflow-x: auto;
}
}
@media (max-width: 620px) {
._aiAccountingDashboard_96jhr_1 {
padding: 12px;
}
._aiAccountingStatCard_96jhr_537 {
flex-basis: 100%;
}
._aiAccountingSideColumn_96jhr_1093 {
display: grid;
grid-template-columns: 1fr;
}
._aiAccountingSideColumn_96jhr_1093 > :last-child {
grid-column: auto;
}
._aiAccountingTrend_96jhr_723,
._aiAccountingDistribution_96jhr_725 {
min-width: 100%;
}
._aiAccountingDonutContent_96jhr_915 {
justify-content: flex-start;
}
._aiAccountingTabs_96jhr_43 {
justify-content: flex-start;
}
._aiAccountingDocumentsHeader_96jhr_41 {
align-items: stretch;
flex-direction: column;
height: auto;
padding-top: 10px;
}
._aiAccountingDocumentsHeader_96jhr_41 h2 {
flex: auto;
}
._aiAccountingTabs_96jhr_43 {
height: 30px;
}
._aiAccountingControl_96jhr_91 {
font-size: 9px;
}
._aiReportsAskCard_96jhr_293 {
padding: 10px;
}
._aiReportsAskForm_96jhr_317 {
align-items: stretch;
flex-direction: column;
gap: 7px;
}
._aiReportsPromptField_96jhr_327 {
width: 100%;
}
._aiReportsExamples_96jhr_481 {
gap: 5px;
}
}
._aiAccountingMuiLineChart_96jhr_2005 {
width: 100%;
margin-top: 2px;
}
._aiAccountingMuiLineChart_96jhr_2005 .MuiChartsGrid-line {
stroke: #edf0f6 !important;
}
._aiAccountingMuiLineChart_96jhr_2005 .MuiMarkElement-root {
stroke-width: 0 !important;
}
._aiAccountingMuiLineChart_96jhr_2005 .MuiLineElement-root {
stroke-width: 2px !important;
}
._aiAccountingMuiPieWrap_96jhr_2031 {
position: relative;
width: 148px;
height: 148px;
flex: 0 0 148px;
}
._aiAccountingMuiPieChart_96jhr_2043 {
position: absolute;
inset: 0;
}
._aiAccountingMuiPieWrap_96jhr_2031 > strong {
position: absolute;
inset: 0;
display: grid;
place-content: center;
text-align: center;
pointer-events: none;
font-size: 19px;
}
._aiAccountingMuiPieWrap_96jhr_2031 > strong small {
display: block;
color: var(--ai-muted);
font-size: 8px;
}
@media (max-width: 900px) {
._aiAccountingHeaderActions_96jhr_31 {
width: 100%;
}
}
@media (max-width: 620px) {
._aiAccountingHeader_96jhr_29 h1 {
font-size: 16px;
}
._aiAccountingHeaderActions_96jhr_31 {
gap: 6px;
}
._aiAccountingControl_96jhr_91,
._aiAccountingCreateButton_96jhr_97 {
padding: 0 9px;
}
._aiAccountingMiniStats_96jhr_39 article {
flex-basis: 50%;
}
}
._aiAccountingParentTabs_96jhr_2121 {
display: flex;
align-items: center;
gap: 2px;
height: 38px;
padding: 4px;
background: #fff;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(98, 72, 154, 0.12);
position: absolute;
left: 45%;
top: 50%;
transform: translate(-50%, -50%);
}
._aiAccountingParentTabs_96jhr_2121 button {
border: 0;
height: 100%;
background: transparent;
color: #63708c;
font: 600 10px inherit;
position: relative;
cursor: pointer;
white-space: nowrap;
padding: 0 18px;
border-radius: 999px;
}
._aiAccountingParentTabs_96jhr_2121 button._aiAccountingActiveTab_96jhr_1439 {
color: #fff;
font-weight: 700;
background: var(--ai-blue);
box-shadow: 0 3px 8px rgba(21, 86, 239, 0.28);
}
._aiAccountingParentTabs_96jhr_2121 button._aiAccountingActiveTab_96jhr_1439::after {
display: none;
}
@media (max-width: 900px) {
._aiAccountingParentTabs_96jhr_2121 {
position: static;
transform: none;
order: 3;
}
}
.aiAccountingSalesOrder {
background: #e8f0ff;
color: #1556ef;
}
.aiAccountingPurchaseOrder {
background: #fff0dc;
color: #f17800;
}
.aiAccountingApInvoice {
background: #f3e8ff;
color: #7c3aed;
}
/* ===========================================
Wrapper
=========================================== */
._accountFlowChartsWrapper_96jhr_2251 {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-top: 20px;
}
@media (max-width: 991px) {
._accountFlowChartsWrapper_96jhr_2251 {
grid-template-columns: 1fr;
}
}
/* ===========================================
Card
=========================================== */
._accountFlowChartsCard_96jhr_2285 {
background: #fff;
border: 1px solid #edf1f5;
border-radius: 14px;
padding: 18px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
overflow: hidden;
}
/* ===========================================
Header
=========================================== */
._accountFlowChartsHeader_96jhr_2311 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
._accountFlowChartsHeader_96jhr_2311 h3 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #1f2937;
}
._accountFlowChartsFilter_96jhr_2339 {
padding: 7px 14px;
border: 1px solid #e4e7ec;
background: #fff;
border-radius: 8px;
font-size: 12px;
color: #475467;
cursor: pointer;
transition: 0.25s;
}
._accountFlowChartsFilter_96jhr_2339:hover {
background: #f8fafc;
}
/* ===========================================
Legend
=========================================== */
._accountFlowChartsLegend_96jhr_2377 {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 12px;
flex-wrap: wrap;
}
._accountFlowChartsLegend_96jhr_2377 div {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: #475467;
}
._accountFlowChartsBlue_96jhr_2409,
._accountFlowChartsOrange_96jhr_2411,
._accountFlowChartsGreen_96jhr_2413 {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
._accountFlowChartsBlue_96jhr_2409 {
background: #2563eb;
}
._accountFlowChartsOrange_96jhr_2411 {
background: #f97316;
}
._accountFlowChartsGreen_96jhr_2413 {
background: #22c55e;
}
/* ===========================================
Line Chart
=========================================== */
._accountFlowChartsLine_96jhr_2459 {
width: 100%;
height: 200px;
}
/* ===========================================
Tooltip
=========================================== */
._accountFlowChartsTooltip_96jhr_2477 {
background: #fff;
border-radius: 10px;
border: 1px solid #e4e7ec;
padding: 10px 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
min-width: 150px;
}
._accountFlowChartsTooltip_96jhr_2477 h6 {
margin: 0 0 8px;
font-size: 13px;
color: #101828;
}
._accountFlowChartsTooltipRow_96jhr_2507 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 6px;
font-size: 12px;
}
._accountFlowChartsTooltipDot_96jhr_2525 {
width: 8px;
height: 8px;
border-radius: 50%;
}
/* ===========================================
Donut Section
=========================================== */
._accountFlowChartsDonutSection_96jhr_2545 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
@media (max-width: 768px) {
._accountFlowChartsDonutSection_96jhr_2545 {
flex-direction: column;
}
}
/* ===========================================
Donut
=========================================== */
._accountFlowChartsDonutWrapper_96jhr_2579 {
width: 180px;
height: 180px;
position: relative;
flex-shrink: 0;
}
._accountFlowChartsCenter_96jhr_2593 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
._accountFlowChartsCenter_96jhr_2593 h2 {
margin: 0;
font-size: 15px;
font-weight: 700;
color: #101828;
}
._accountFlowChartsCenter_96jhr_2593 span {
display: block;
margin-top: 2px;
font-size: 12px;
color: #667085;
}
/* ===========================================
Right Legend
=========================================== */
._accountFlowChartsRightLegend_96jhr_2645 {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
._accountFlowChartsLegendItem_96jhr_2659 {
display: flex;
align-items: center;
gap: 10px;
}
._accountFlowChartsLegendText_96jhr_2669 {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
min-width: 0;
}
._accountFlowChartsLegendColor_96jhr_2687 {
width: 10px;
height: 10px;
border-radius: 50%;
margin-top: 6px;
flex-shrink: 0;
}
._accountFlowChartsLegendItem_96jhr_2659 p {
margin: 0;
font-size: 13px;
color: #344054;
}
._accountFlowChartsLegendItem_96jhr_2659 b {
display: block;
margin-top: 2px;
font-size: 12px;
color: #667085;
font-weight: 500;
}
/* ===========================================
Responsive
=========================================== */
@media (max-width: 768px) {
._accountFlowChartsHeader_96jhr_2311 {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
._accountFlowChartsLegend_96jhr_2377 {
gap: 14px;
}
._accountFlowChartsDonutWrapper_96jhr_2579 {
width: 170px;
height: 170px;
}
._accountFlowChartsCenter_96jhr_2593 h2 {
font-size: 26px;
}
}
._accountFlowChartsLegendColor_96jhr_2687 {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
._accountFlowChartsLegendText_96jhr_2669 span {
font-size: 13px;
color: #344054;
white-space: nowrap;
}
._accountFlowChartsLegendText_96jhr_2669 strong {
font-size: 13px;
font-weight: 600;
color: #101828;
white-space: nowrap;
}
._accountFlowChartsCard_96jhr_2285 {
background: #fff;
border: 1px solid #edf1f5;
border-radius: 14px;
padding: 18px;
height: 100%;
display: flex;
flex-direction: column;
}
._aiAccountingSquareButton_96jhr_93:hover {
background: #1556ef;
color: #fff;
border-color: #1556ef;
transform: rotate(90deg);
box-shadow: 0 4px 12px rgba(21, 86, 239, 0.25);
}
._aiAccountingSquareButton_96jhr_93:hover svg {
transform: scale(1.15);
}
._aiAccountingSquareButton_96jhr_93 svg {
transition: transform 0.25s ease;
}
/* Keep the date-range picker aligned with the refresh control in the header. */
._aiAccountingHeaderRight_96jhr_2871 {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-left: auto;
}
._aiAccountingDateControl_96jhr_2887 {
height: 32px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 9px;
background: #fff;
border: 1px solid var(--ai-line);
border-radius: 6px;
color: #2c3a5d;
}
._aiAccountingDateControl_96jhr_2887 > svg {
flex: 0 0 auto;
font-size: 14px;
}
._aiAccountingDateControl_96jhr_2887 .react-datepicker-wrapper,
._aiAccountingDateControl_96jhr_2887 .react-datepicker__input-container {
display: block;
}
._aiAccountingDateControl_96jhr_2887 input {
width: 154px;
padding: 0;
border: 0;
outline: 0;
background: transparent;
color: #2c3a5d;
font: 600 11px inherit;
line-height: 30px;
cursor: pointer;
}
._aiAccountingSyncButton_96jhr_2953 {
height: 30px;
padding: 0 11px;
border: 1px solid var(--ai-blue);
border-radius: 5px;
background: var(--ai-blue);
color: #fff;
font: 600 10px inherit;
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
white-space: nowrap;
}
._aiAccountingSyncButton_96jhr_2953 svg {
font-size: 12px;
}
._aiAccountingSyncButton_96jhr_2953:hover {
background: #0f47ca;
border-color: #0f47ca;
}
._aiAccountingSyncButton_96jhr_2953 {
align-self: flex-end;
margin: 8px 0;
}
.aiAccountingNOT_PAID {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
min-width: 75px;
border-radius: 12px;
background: #feecec;
color: #dc2626;
font-size: 10px;
font-weight: 600;
line-height: 1;
}
.aiAccountingDRAFT {
background: #fef3c7;
color: #92400e;
}
.aiAccountingPAID {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
min-width: 55px;
border-radius: 12px;
background: #e8f8ee;
color: #16a34a;
font-size: 10px;
font-weight: 600;
line-height: 1;
}
._aiAccountingControl_96jhr_91 input {
border: none;
background: transparent;
outline: none;
font-size: 13px;
color: #334155;
cursor: pointer;
}
._aiAccountingControl_96jhr_91 span {
margin: 0 5px;
}
._aiAccountingControl_96jhr_91 {
width: 240px;
min-width: 240px;
display: flex;
align-items: center;
}
._aiAccountingControl_96jhr_91 input {
width: 95px;
height: 20px;
padding: 0;
line-height: 20px;
}
._aiAccountingControl_96jhr_91 input {
padding-left: 0;
transform: translateX(-5px);
}
._aiAccountingDelivered_96jhr_3131 {
display: inline-block;
padding: 2px 10px;
border-radius: 4px;
background: #dcfce7 !important;
color: #16a34a !important;
font-size: 11px;
font-weight: 600;
}
._aiAccountingSent_96jhr_1633 {
display: inline-block;
padding: 2px 10px;
border-radius: 4px;
background: #dbeafe !important;
color: #2563eb !important;
font-size: 11px;
font-weight: 600;
}
._aiAccountingFailed_96jhr_3171 {
display: inline-block;
padding: 2px 10px;
border-radius: 4px;
background: #fee2e2 !important;
color: #dc2626 !important;
font-size: 11px;
font-weight: 600;
}
._aiAccountingSuccess_96jhr_3191 {
display: inline-block;
padding: 2px 10px;
border-radius: 4px;
background: #f3f4f6;
color: #6b7280;
font-size: 11px;
font-weight: 600;
}
._voiceIcon_96jhr_3209 {
color: #2563eb !important;
font-size: 18px;
}
._emailIcon_96jhr_3219 {
color: #f5550b !important;
font-size: 18px;
}
._aiAccountingCallCard_96jhr_3227 {
max-height: 1500px !important;
overflow-y: auto;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
._aiAccountingCallCard_96jhr_3227::-webkit-scrollbar {
width: 0;
display: none !important;
}
._aiAccountingCalls_96jhr_1145 {
height: 500px;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
._aiAccountingCalls_96jhr_1145::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
._overdueCustomerCard_96jhr_3277 {
padding-bottom: 20px;
}
._overdueList_96jhr_3285 {
margin-top: 25px;
display: flex;
flex-direction: column;
gap: 18px;
max-height: 200px; /* show around 4 items */
overflow-y: auto;
padding-right: 6px;
}
/* scrollbar optional */
._overdueList_96jhr_3285::-webkit-scrollbar {
width: 5px;
}
._overdueList_96jhr_3285::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
._overdueItem_96jhr_3327 {
width: 100%;
}
._overdueTop_96jhr_3335 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
._customerName_96jhr_3349 {
font-size: 13px;
color: #344054;
font-weight: 500;
}
._amount_96jhr_3361 {
font-size: 13px;
color: #101828;
font-weight: 600;
}
._progressWrapper_96jhr_3373 {
width: 100%;
height: 8px;
background: #eef2f7;
border-radius: 10px;
overflow: hidden;
}
._progressBar_96jhr_3389 {
height: 100%;
background: #2563eb;
border-radius: 10px;
transition: width 0.3s ease;
}
._noOverdueData_96jhr_3403 {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
color: #98a2b3;
font-size: 14px;
}
._reminderIcon_96jhr_3421 {
font-size: 15px;
color: #2563eb;
margin-right: 8px;
flex-shrink: 0;
}
._amountsgd_96jhr_3433 {
font-weight: 400 !important;
font-size: 11px !important;
}
._actionButtons_96jhr_3441 {
display: flex;
align-items: center;
gap: 8px;
}
._actionBtn_96jhr_3453 {
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
background: #fff8db;
color: #d97706;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
._actionBtn_96jhr_3453:hover {
background: #fde68a;
color: #b45309;
transform: translateY(-1px);
}
._actionBtn1_96jhr_3491 {
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
background: #faefee;
color: #e9594d;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
._actionBtn1_96jhr_3491:hover {
background: #faefee;
color: #e9594d;
transform: translateY(-1px);
}
._actionBtn1_96jhr_3491:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(250, 194, 184, 0.2);
}
._channelIcon_96jhr_3539 {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Voice */
._voiceBg_96jhr_3561 {
background: #e8f0ff;
}
._voiceIcon_96jhr_3209 {
color: #2563eb;
font-size: 13px;
}
/* Email */
._emailBg_96jhr_3581 {
background: #fff2e8;
}
._emailIcon_96jhr_3219 {
color: #f97316;
font-size: 13px;
}
/* SMS */
._smsBg_96jhr_3601 {
background: #eef2ff;
}
._smsIcon_96jhr_3609 {
color: #4f46e5;
font-size: 13px;
}
/* WhatsApp */
._whatsappBg_96jhr_3621 {
background: #e8f8ed;
}
._whatsappIcon_96jhr_3629 {
color: #22c55e;
font-size: 13px;
}
/* Default */
._defaultBg_96jhr_3641 {
background: #f3f4f6;
}
._defaultIcon_96jhr_3649 {
color: #6b7280;
font-size: 17px;
}
._customerAvatar_96jhr_3659 {
width: 32px;
height: 32px;
border-radius: 50%;
background: #eef4ff;
color: #2563eb;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
._askaiCard_96jhr_3685 {
background: linear-gradient(
90deg,
#4925ab 0%,
#4a2db3 25%,
#3b3ec0 50%,
#2d4ccd 75%,
#205ede 100%
);
border-radius: 18px;
padding: 12px 24px;
color: #fff;
}
._askaiHeader_96jhr_3713 h2 {
margin: 0;
font-size: 15px !important;
font-weight: 700;
color: #fff !important;
}
._askaiHeader_96jhr_3713 p {
margin: 8px 0 22px;
font-size: 12px !important;
color: rgba(255, 255, 255, 0.9);
}
._askaiSearchBox_96jhr_3739 {
width: 100%;
min-height: 50px !important;
}
._askaiInputWrapper_96jhr_3749 {
background: #fff;
border-radius: 14px;
min-height: 100px;
display: flex;
align-items: flex-start; /* instead of center */
padding: 12px;
position: relative;
}
._askaiSearchIcon_96jhr_3769 {
color: #9ca3af;
font-size: 20px;
margin-right: 10px;
margin-top: 10px; /* align with textarea */
flex-shrink: 0;
}
._askaiTextarea_96jhr_3785 {
flex: 1;
border: none;
resize: none;
outline: none;
font-size: 15px;
min-height: 40px !important; /* increase as needed */
line-height: 22px;
padding: 8px 0;
color: #111827;
background: transparent;
overflow: hidden;
}
._askaiTextarea_96jhr_3785::placeholder {
color: #9ca3af;
}
._askaiSendButton_96jhr_3821 {
width: 34px;
height: 34px;
border: none;
border-radius: 10px;
background: linear-gradient(180deg, #2b49b8 0%, #1f3488 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: auto;
flex-shrink: 0;
}
._askaiSendButton_96jhr_3821:hover {
background: linear-gradient(180deg, #233ea4 0%, #192c74 100%);
}
._askaiSendButton_96jhr_3821 svg {
font-size: 20px;
}
._askaiExamples_96jhr_3867 {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
._askaiChip_96jhr_3881 {
border: none;
background: rgba(255, 255, 255, 0.16);
color: #fff;
padding: 9px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: 0.25s;
}
._askaiChip_96jhr_3881:hover {
background: rgba(255, 255, 255, 0.28);
}
._askaiActions_96jhr_3911 {
position: absolute;
right: 12px;
bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
._askaiMicButton_96jhr_3929,
._askaiSendButton_96jhr_3821 {
width: 34px;
height: 34px;
border: none;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
._askaiMicButton_96jhr_3929 {
width: 34px;
height: 34px;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: white;
color: #243d9c;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
._askaiMicButton_96jhr_3929:hover {
background: #f8fafc;
border-color: #cbd5e1;
color: #1f2937;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
._askaiMicButton_96jhr_3929:active {
transform: scale(0.95);
}
._askaiMicButton_96jhr_3929 svg {
font-size: 18px;
}
._askaiSendButton_96jhr_3821 {
background: linear-gradient(180deg, #2b49b8 0%, #1f3488 100%);
color: #fff;
}
._voice_wave_96jhr_4027 {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
width: 22px;
height: 22px;
padding-top: 12px !important;
}
._voice_wave_96jhr_4027 span {
width: 3px;
height: 6px;
border-radius: 999px;
background: linear-gradient(180deg, #4f46e5 0%, #2563eb 100%);
animation: _voiceWave_96jhr_1 0.9s ease-in-out infinite;
transform-origin: center bottom;
}
._voice_wave_96jhr_4027 span:nth-child(1) {
animation-delay: 0s;
}
._voice_wave_96jhr_4027 span:nth-child(2) {
animation-delay: 0.15s;
}
._voice_wave_96jhr_4027 span:nth-child(3) {
animation-delay: 0.3s;
}
._voice_wave_96jhr_4027 span:nth-child(4) {
animation-delay: 0.45s;
}
._voice_wave_96jhr_4027 span:nth-child(5) {
animation-delay: 0.6s;
}
@keyframes _voiceWave_96jhr_1 {
0%,
100% {
transform: scaleY(0.5);
opacity: 0.45;
}
25% {
transform: scaleY(1.8);
opacity: 0.8;
}
50% {
transform: scaleY(3.2);
opacity: 1;
}
75% {
transform: scaleY(1.6);
opacity: 0.8;
}
}
._pageLoader_96jhr_4149 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.75);
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
}
/* ==========================================================
ROOT VARIABLES
========================================================== */
:root {
--vcd-ink: #17203a;
--vcd-slate: #6b7280;
--vcd-accent: #2a5bd7;
--vcd-accent-soft: #edf4ff;
--vcd-surface: #ffffff;
--vcd-canvas: #f6f8fc;
--vcd-line: #e6eaf2;
}
/* ==========================================================
MODAL
========================================================== */
._aiVoiceModal_1ei4a_35 {
max-width: 50%;
}
._aiVoiceModal_1ei4a_35 .modal-content {
border: none;
border-radius: 18px;
overflow: hidden;
}
._aiVoiceModal_1ei4a_35 .modal-header {
background: #fff;
border-bottom: 1px solid var(--vcd-line);
padding: 18px 24px;
}
._aiVoiceModal_1ei4a_35 .modal-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--vcd-ink);
}
._aiVoiceModal_1ei4a_35 .modal-body {
background: var(--vcd-canvas);
padding: 24px;
max-height: 85vh;
overflow-y: auto;
}
/* ==========================================================
SUMMARY CARD
========================================================== */
._aiVoiceCard_1ei4a_101 {
background: #fff;
border: 1px solid var(--vcd-line);
border-radius: 16px;
padding: 20px;
margin-bottom: 22px;
box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
}
._aiVoiceItem_1ei4a_119 {
display: flex;
flex-direction: column;
height: 100%;
}
._aiVoiceItem_1ei4a_119 label {
margin: 0;
font-size: 10px !important;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgb(133, 131, 131);
}
._aiVoiceItem_1ei4a_119 strong {
margin-top: 6px;
color: var(--vcd-ink);
font-size: 0.95rem;
font-weight: 600;
word-break: break-word;
}
._aiVoiceMono_1ei4a_165 {
margin-top: 6px;
font-size: 0.78rem;
color: var(--vcd-slate);
font-family: Consolas, monospace;
word-break: break-all;
}
._aiVoiceLink_1ei4a_181 {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
color: var(--vcd-accent);
text-decoration: none;
font-weight: 600;
}
._aiVoiceLink_1ei4a_181:hover {
color: var(--vcd-accent);
text-decoration: underline;
}
/* ==========================================================
COMMON SECTION
========================================================== */
._aiVoiceSection_1ei4a_219 {
background: #fff;
border: 1px solid var(--vcd-line);
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
}
._aiVoiceSection_1ei4a_219 h5 {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
font-size: 1rem;
font-weight: 700;
color: var(--vcd-ink);
}
/* ==========================================================
INFO ROW
========================================================== */
._aiVoiceInfo_1ei4a_263 {
/* display: flex; */
align-items: center;
gap: 10px;
background: #fafbfd;
border: 1px solid var(--vcd-line);
border-radius: 10px;
padding: 12px 14px;
min-height: 58px;
}
._aiVoiceInfo_1ei4a_263 svg {
color: var(--vcd-accent);
font-size: 18px;
flex-shrink: 0;
}
._aiVoiceInfo_1ei4a_263 span {
color: var(--vcd-slate);
font-size: 0.85rem;
font-weight: 500;
}
._aiVoiceInfo_1ei4a_263 strong {
margin-left: auto;
text-align: right;
color: var(--vcd-ink);
font-size: 0.9rem;
font-weight: 600;
word-break: break-word;
}
/* ==========================================================
EMAIL MESSAGE
========================================================== */
._aiVoiceMessage_1ei4a_335 {
background: #fafbfd;
border: 1px solid var(--vcd-line);
border-radius: 12px;
padding: 18px;
max-height: 350px;
overflow-y: auto;
}
._aiVoiceMessage_1ei4a_335 pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
font-family: inherit;
font-size: 0.9rem;
color: var(--vcd-ink);
line-height: 1.7;
}
/* ==========================================================
AI SUMMARY
========================================================== */
._aiVoiceSummary_1ei4a_381 {
margin: 0;
line-height: 1.7;
font-size: 0.9rem;
color: var(--vcd-ink);
}
/* ==========================================================
TRANSCRIPT
========================================================== */
._aiVoiceTranscript_1ei4a_403 {
max-height: 320px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
._transcriptLine_1ei4a_419 {
background: #f8fafc;
border-radius: 12px;
padding: 12px 14px;
font-size: 0.88rem;
line-height: 1.6;
}
._agentLine_1ei4a_435 {
background: #edf4ff;
align-self: flex-start;
}
._customerLine_1ei4a_445 {
background: #f3f4f6;
align-self: flex-end;
text-align: right;
}
/* ==========================================================
SCRIPT
========================================================== */
._aiVoiceScript_1ei4a_465 {
max-height: 260px;
overflow-y: auto;
}
._scriptLine_1ei4a_475 {
padding: 10px 0;
border-bottom: 1px dashed var(--vcd-line);
font-size: 0.88rem;
}
._scriptLine_1ei4a_475:last-child {
border-bottom: none;
}
._scriptLine_1ei4a_475 strong {
color: var(--vcd-ink);
}
/* ==========================================================
AUDIO
========================================================== */
._aiVoiceAudio_1ei4a_511 {
width: 100%;
}
/* ==========================================================
BADGE
========================================================== */
._aiVoiceStatus_1ei4a_527 {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
/* ==========================================================
SCROLLBAR
========================================================== */
._aiVoiceModal_1ei4a_35 .modal-body::-webkit-scrollbar,
._aiVoiceTranscript_1ei4a_403::-webkit-scrollbar,
._aiVoiceScript_1ei4a_465::-webkit-scrollbar,
._aiVoiceMessage_1ei4a_335::-webkit-scrollbar {
width: 6px;
}
._aiVoiceModal_1ei4a_35 .modal-body::-webkit-scrollbar-thumb,
._aiVoiceTranscript_1ei4a_403::-webkit-scrollbar-thumb,
._aiVoiceScript_1ei4a_465::-webkit-scrollbar-thumb,
._aiVoiceMessage_1ei4a_335::-webkit-scrollbar-thumb {
background: #cfd8e6;
border-radius: 20px;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 991px) {
._aiVoiceModal_1ei4a_35 {
max-width: 95%;
}
._aiVoiceModal_1ei4a_35 .modal-body {
padding: 18px;
}
._aiVoiceCard_1ei4a_101,
._aiVoiceSection_1ei4a_219 {
padding: 18px;
}
}
@media (max-width: 767px) {
._aiVoiceModal_1ei4a_35 {
max-width: 100%;
margin: 10px;
}
._aiVoiceModal_1ei4a_35 .modal-body {
padding: 16px;
}
._aiVoiceCard_1ei4a_101,
._aiVoiceSection_1ei4a_219 {
padding: 16px;
}
._aiVoiceInfo_1ei4a_263 {
flex-wrap: wrap;
align-items: flex-start;
}
._aiVoiceInfo_1ei4a_263 strong {
width: 100%;
margin-left: 28px;
text-align: left;
}
}
@media (max-width: 576px) {
._aiVoiceModal_1ei4a_35 .modal-header {
padding: 14px 16px;
}
._aiVoiceModal_1ei4a_35 .modal-body {
padding: 14px;
}
._aiVoiceItem_1ei4a_119 label {
font-size: 0.68rem;
}
._aiVoiceItem_1ei4a_119 strong {
font-size: 0.88rem;
}
._aiVoiceSection_1ei4a_219 h5 {
font-size: 0.95rem;
}
}
._chatRow_1ei4a_717 {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 15px;
}
._agentRow_1ei4a_731 {
justify-content: flex-start;
}
._customerRow_1ei4a_739 {
justify-content: flex-end;
}
._avatar_1ei4a_747 {
width: 38px;
height: 38px;
border-radius: 50%;
background: #edf2ff;
display: flex;
align-items: center;
justify-content: center;
color: #2563eb;
flex-shrink: 0;
}
._chatBubble_1ei4a_771 {
max-width: 75%;
padding: 10px 14px;
border-radius: 12px;
line-height: 1.5;
}
._agentBubble_1ei4a_785 {
background: #e8f1ff;
}
._customerBubble_1ei4a_793 {
background: #f3f4f6;
}
._chatName_1ei4a_801 {
font-weight: 600;
font-size: 13px;
margin-bottom: 4px;
color: #2563eb;
}._createAccountPage_x7epo_1 {
--workflow-blue: #1456ef;
--workflow-ink: #14224a;
--workflow-muted: #65708a;
--workflow-line: #e6ebf4;
--workflow-soft: #f7f9fd;
--workflow-green: #0faf61;
--workflow-orange: #f28b16;
--workflow-purple: #7c4dff;
padding: 18px;
background: var(--workflow-soft);
color: var(--workflow-ink);
}
._createAccountPage_x7epo_1 * {
box-sizing: border-box;
}
._pageHeader_x7epo_37,
._headerActions_x7epo_39,
._sectionHeader_x7epo_41,
._stepCard_x7epo_43,
._stepContent_x7epo_45 > div,
._stepActions_x7epo_47,
._templateTabs_x7epo_49,
._templateTitle_x7epo_51,
._instructionItem_x7epo_53,
._inlineSetting_x7epo_55,
._settingsItem_x7epo_57,
._tipBox_x7epo_59,
._mobileDock_x7epo_61 {
display: flex;
align-items: center;
}
._pageHeader_x7epo_37 {
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
._pageHeader_x7epo_37 h1 {
margin: 0 0 4px;
font-size: 22px;
line-height: 1.2;
font-weight: 800;
color: #101b3d;
}
._pageHeader_x7epo_37 p,
._sectionHeader_x7epo_41 p,
._inlineSetting_x7epo_55 p,
._settingsItem_x7epo_57 p,
._templateCard_x7epo_107 p,
._sidebarSection_x7epo_109 p,
._instructionItem_x7epo_53 p {
margin: 0;
color: var(--workflow-muted);
}
._headerActions_x7epo_39 {
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
._primaryButton_x7epo_133,
._secondaryButton_x7epo_135,
._statusButton_x7epo_137,
._addStepButton_x7epo_139,
._fullAddButton_x7epo_141,
._generateButton_x7epo_143 {
min-height: 36px;
border-radius: 6px;
border: 1px solid var(--workflow-line);
font-weight: 800;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease;
}
._primaryButton_x7epo_133,
._generateButton_x7epo_143 {
border-color: var(--workflow-blue);
color: #fff;
background: var(--workflow-blue);
box-shadow: 0 8px 18px rgba(20, 86, 239, 0.18);
}
._secondaryButton_x7epo_135,
._statusButton_x7epo_137,
._addStepButton_x7epo_139,
._fullAddButton_x7epo_141 {
background: #fff;
color: #203058;
}
._primaryButton_x7epo_133,
._secondaryButton_x7epo_135,
._statusButton_x7epo_137 {
padding: 0 18px;
}
._secondaryButton_x7epo_135 svg,
._statusButton_x7epo_137 svg,
._addStepButton_x7epo_139 svg,
._fullAddButton_x7epo_141 svg,
._generateButton_x7epo_143 svg {
flex: 0 0 auto;
}
._primaryButton_x7epo_133:hover,
._secondaryButton_x7epo_135:hover,
._statusButton_x7epo_137:hover,
._addStepButton_x7epo_139:hover,
._fullAddButton_x7epo_141:hover,
._generateButton_x7epo_143:hover {
transform: translateY(-1px);
}
._secondaryButton_x7epo_135:hover,
._statusButton_x7epo_137:hover,
._addStepButton_x7epo_139:hover,
._fullAddButton_x7epo_141:hover {
border-color: rgba(20, 86, 239, 0.35);
box-shadow: 0 8px 20px rgba(40, 58, 100, 0.08);
}
._statusButton_x7epo_137 {
color: var(--workflow-green);
}
._statusButton_x7epo_137 span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--workflow-green);
}
._leftStack_x7epo_291 {
display: grid;
gap: 14px;
}
._panel_x7epo_301,
._sidePanel_x7epo_303 {
border: 1px solid var(--workflow-line);
border-radius: 8px;
background: #fff;
box-shadow: 0 10px 28px rgba(40, 58, 100, 0.04);
}
._panel_x7epo_301 {
padding: 16px;
}
._panel_x7epo_301 h2,
._sidebarSection_x7epo_109 h3 {
margin: 0 0 14px;
font-size: 14px;
font-weight: 800;
color: #18244a;
}
._fieldLabel_x7epo_341 {
display: block;
margin-bottom: 7px;
font-size: 11px;
font-weight: 800;
color: #304061;
}
._fieldLabel_x7epo_341 sup {
color: #ef3d4f;
font-size: 10px;
}
._formControl_x7epo_367,
._textArea_x7epo_369,
._generatorInput_x7epo_371 {
width: 100%;
border: 1px solid var(--workflow-line);
border-radius: 5px;
background: #fbfcff;
color: #263654;
font-weight: 700;
outline: none;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background 0.18s ease;
}
._formControl_x7epo_367 {
min-height: 38px;
padding: 0 12px;
}
._textArea_x7epo_369,
._generatorInput_x7epo_371 {
min-height: 100px !important;
resize: none;
padding: 10px 12px;
line-height: 1.45;
}
._formControl_x7epo_367:focus,
._textArea_x7epo_369:focus,
._generatorInput_x7epo_371:focus {
border-color: rgba(20, 86, 239, 0.55);
background: #fff;
box-shadow: 0 0 0 3px rgba(20, 86, 239, 0.1);
}
._inlineSetting_x7epo_55,
._settingsItem_x7epo_57 {
justify-content: space-between;
gap: 14px;
height: 100%;
}
._inlineSetting_x7epo_55 strong,
._settingsItem_x7epo_57 strong {
display: block;
margin-bottom: 4px;
font-size: 11px;
color: #25365b;
}
._inlineSetting_x7epo_55 p,
._settingsItem_x7epo_57 p {
font-size: 10px;
line-height: 1.35;
}
._autoToggleWrap_x7epo_483 {
display: flex;
align-items: center;
gap: 8px;
}
._autoToggleLabel_x7epo_495 {
font-size: 13px;
font-weight: 600;
color: #374151;
white-space: nowrap;
}
._switch_x7epo_509 {
position: relative;
display: inline-block;
width: 43px;
height: 22px;
flex-shrink: 0;
}
._switch_x7epo_509 input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
margin: 0;
cursor: pointer;
z-index: 2;
}
._switch_x7epo_509 span {
position: absolute;
inset: 0;
background: #d1d5db;
border-radius: 999px;
transition: 0.3s;
}
._switch_x7epo_509 span::before {
content: "";
position: absolute;
width: 17px;
height: 17px;
left: 2px;
top: 2px;
border-radius: 50%;
background: #fff;
transition: 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
._switch_x7epo_509 input:checked + span {
background: #1456ef;
}
._switch_x7epo_509 input:checked + span::before {
transform: translateX(20px);
}
._switch_x7epo_509 input:focus + span {
box-shadow: 0 0 0 3px rgba(20, 86, 239, 0.15);
}
._sectionHeader_x7epo_41 {
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
._sectionHeader_x7epo_41 h2 {
margin-bottom: 3px;
}
._sectionHeader_x7epo_41 p {
font-size: 11px;
}
._addStepButton_x7epo_139 {
min-width: 102px;
padding: 0 14px;
}
._stepsPanel_x7epo_651 {
position: relative;
}
._stepsList_x7epo_659 {
position: relative;
display: grid;
gap: 10px;
}
._stepsList_x7epo_659::before {
content: "";
position: absolute;
top: 24px;
bottom: 24px;
left: 15px;
width: 1px;
background: #d7deea;
}
._stepCard_x7epo_43 {
position: relative;
min-height: 58px;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--workflow-line);
border-radius: 7px;
background: #fff;
box-shadow: 0 5px 16px rgba(31, 49, 87, 0.035);
}
._stepCard_x7epo_43:hover {
border-color: rgba(20, 86, 239, 0.28);
}
._stepConnector_x7epo_721 {
position: absolute;
left: -3px;
top: 50%;
width: 16px;
height: 16px;
border: 2px solid #d6deec;
border-radius: 50%;
background: #fff;
transform: translate(-50%, -50%);
}
._channelIcon_x7epo_745,
._templateIcon_x7epo_747,
._instructionIcon_x7epo_749 {
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 7px;
}
._channelIcon_x7epo_745 {
width: 34px;
height: 34px;
font-size: 17px;
}
._channelIcon_x7epo_745._email_x7epo_775,
._templateIcon_x7epo_747._email_x7epo_775,
._instructionIcon_x7epo_749._email_x7epo_775 {
color: var(--workflow-blue);
background: #eaf2ff;
}
._channelIcon_x7epo_745._whatsapp_x7epo_789,
._templateIcon_x7epo_747._whatsapp_x7epo_789,
._instructionIcon_x7epo_749._whatsapp_x7epo_789 {
color: var(--workflow-green);
background: #e8f9ef;
}
._channelIcon_x7epo_745._voice_x7epo_803,
._templateIcon_x7epo_747._voice_x7epo_803,
._instructionIcon_x7epo_749._voice_x7epo_803 {
color: var(--workflow-purple);
background: #f0ebff;
}
._templateIcon_x7epo_747._strict_x7epo_817 {
color: var(--workflow-orange);
background: #fff4e5;
}
._stepNumber_x7epo_827 {
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 5px;
display: grid;
place-items: center;
color: #53627e;
background: #f3f6fb;
font-weight: 900;
}
._stepContent_x7epo_45 {
min-width: 0;
flex: 1;
}
._stepContent_x7epo_45 > div {
flex-wrap: wrap;
gap: 8px;
}
._stepContent_x7epo_45 strong,
._templateCard_x7epo_107 strong,
._instructionItem_x7epo_53 strong {
font-size: 12px;
color: #182747;
}
._stepContent_x7epo_45 p {
margin: 3px 0 0;
color: var(--workflow-muted);
font-size: 10px;
}
._channelBadge_x7epo_897 {
border-radius: 4px;
padding: 3px 7px;
font-size: 9px;
font-weight: 900;
}
._channelBadge_x7epo_897._email_x7epo_775 {
color: var(--workflow-blue);
background: #eaf2ff;
}
._channelBadge_x7epo_897._whatsapp_x7epo_789 {
color: var(--workflow-green);
background: #e7f9ee;
}
._channelBadge_x7epo_897._voice_x7epo_803 {
color: var(--workflow-purple);
background: #efeaff;
}
._stepTiming_x7epo_941 {
flex: 0 0 86px;
color: #25365b;
}
._stepTiming_x7epo_941 small {
display: block;
color: #6b7892;
font-size: 9px;
font-weight: 800;
}
._stepTiming_x7epo_941 strong {
display: block;
margin-top: 2px;
font-size: 12px;
}
._stepActions_x7epo_47 {
flex: 0 0 auto;
gap: 8px;
}
._stepActions_x7epo_47 button {
width: 30px;
height: 30px;
border: 1px solid var(--workflow-line);
border-radius: 6px;
display: grid;
place-items: center;
background: #fff;
color: #20345f;
}
._stepActions_x7epo_47 button:last-child {
color: #f04455;
}
._fullAddButton_x7epo_141 {
width: calc(100% - 48px);
/* margin: 12px 0 0 48px; */
margin-top: 10px;
color: var(--workflow-blue);
border-style: dashed;
}
._tipBox_x7epo_59 {
justify-content: center;
gap: 8px;
min-height: 44px;
border: 1px solid var(--workflow-line);
border-radius: 7px;
background: #fff;
color: #52617f;
}
._tipBox_x7epo_59 svg,
._tipBox_x7epo_59 strong {
color: var(--workflow-blue);
}
._sidePanel_x7epo_303 {
position: sticky;
top: 14px;
overflow: hidden;
}
._templateTabs_x7epo_49 {
height: 52px;
border-bottom: 1px solid var(--workflow-line);
}
._templateTabs_x7epo_49 button {
position: relative;
flex: 1;
height: 100%;
border: 0;
background: #fff;
color: #263657;
font-weight: 900;
}
._templateTabs_x7epo_49 button span {
margin-left: 6px;
border-radius: 4px;
padding: 2px 5px;
color: var(--workflow-blue);
background: #eaf2ff;
font-size: 9px;
}
._templateTabs_x7epo_49 ._activeTab_x7epo_1123 {
color: var(--workflow-blue);
}
._templateTabs_x7epo_49 ._activeTab_x7epo_1123::after {
content: "";
position: absolute;
left: 22px;
right: 22px;
bottom: 0;
height: 2px;
border-radius: 999px;
background: var(--workflow-blue);
}
._sidebarSection_x7epo_109 {
padding: 14px;
border-bottom: 1px solid var(--workflow-line);
}
._sidebarSection_x7epo_109:last-child {
border-bottom: 0;
}
._sidebarIntro_x7epo_1171 {
margin-bottom: 12px !important;
font-size: 11px;
}
._templateList_x7epo_1181 {
display: grid;
gap: 10px;
}
._templateCard_x7epo_107 {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
min-height: 86px;
padding: 13px;
border: 1px solid var(--workflow-line);
border-radius: 7px;
background: #fff;
}
._templateCard_x7epo_107._selectedTemplate_x7epo_1215 {
border-color: var(--workflow-blue);
box-shadow: 0 0 0 3px rgba(20, 86, 239, 0.08);
}
._templateIcon_x7epo_747 {
width: 32px;
height: 32px;
font-size: 16px;
}
._templateTitle_x7epo_51 {
flex-wrap: wrap;
gap: 8px;
margin-bottom: 5px;
}
._templateTitle_x7epo_51 span {
border-radius: 999px;
padding: 3px 8px;
color: var(--workflow-green);
background: #e8f9ef;
font-size: 8px;
font-weight: 900;
}
._templateCard_x7epo_107 p {
margin-bottom: 8px;
font-size: 10px;
line-height: 1.4;
}
._templateCard_x7epo_107 small {
color: #293a5d;
font-weight: 800;
}
._radioDot_x7epo_1289 {
width: 13px;
height: 13px;
margin-top: 6px;
border: 1px solid #9aa8c0;
border-radius: 50%;
}
._selectedTemplate_x7epo_1215 ._radioDot_x7epo_1289 {
border: 4px solid var(--workflow-blue);
}
._generatorBox_x7epo_1313 h3,
._sidebarSection_x7epo_109 h3 {
margin-bottom: 5px;
}
._generatorInput_x7epo_371 {
min-height: 66px;
margin: 12px 0 10px;
color: #63708b;
font-size: 10px;
font-weight: 700;
}
._generateButton_x7epo_143 {
width: 100%;
}
._instructionsList_x7epo_1347 {
display: grid;
gap: 10px;
}
._instructionItem_x7epo_53 {
gap: 10px;
}
._instructionIcon_x7epo_749 {
width: 28px;
height: 28px;
}
._instructionItem_x7epo_53 div:nth-child(2) {
flex: 1;
min-width: 0;
}
._instructionItem_x7epo_53 p {
margin-top: 2px;
font-size: 10px;
line-height: 1.35;
}
._instructionItem_x7epo_53 button {
flex: 0 0 auto;
min-width: 46px;
height: 30px;
border: 1px solid var(--workflow-line);
border-radius: 5px;
color: #314160;
background: #fff;
font-weight: 800;
}
._mobileDock_x7epo_61 {
display: none;
}
@media (max-width: 1199.98px) {
._sidePanel_x7epo_303 {
position: static;
}
._templateList_x7epo_1181 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
._pageHeader_x7epo_37 {
align-items: flex-start;
flex-direction: column;
}
._headerActions_x7epo_39 {
justify-content: flex-start;
width: 100%;
}
._stepCard_x7epo_43 {
align-items: flex-start;
flex-wrap: wrap;
}
._stepContent_x7epo_45 {
flex-basis: calc(100% - 82px);
}
._stepTiming_x7epo_941 {
margin-left: 70px;
}
._stepActions_x7epo_47 {
margin-left: auto;
}
}
@media (max-width: 767.98px) {
._createAccountPage_x7epo_1 {
padding: 14px;
}
._panel_x7epo_301,
._sidebarSection_x7epo_109 {
padding: 14px;
}
._templateList_x7epo_1181 {
grid-template-columns: 1fr;
}
._inlineSetting_x7epo_55,
._settingsItem_x7epo_57 {
min-height: 48px;
}
._stepsList_x7epo_659::before {
left: 14px;
}
._fullAddButton_x7epo_141 {
width: 100%;
margin-left: 0;
}
}
@media (max-width: 575.98px) {
._createAccountPage_x7epo_1 {
padding: 12px 12px 78px;
}
._pageHeader_x7epo_37 h1 {
font-size: 19px;
}
._headerActions_x7epo_39 {
display: none;
}
._sectionHeader_x7epo_41 {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
._addStepButton_x7epo_139 {
width: 100%;
}
._stepCard_x7epo_43 {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
gap: 10px;
}
._stepConnector_x7epo_721 {
display: none;
}
._stepContent_x7epo_45 {
grid-column: 1 / -1;
flex-basis: auto;
}
._stepTiming_x7epo_941 {
grid-column: 1 / 3;
margin-left: 0;
}
._stepActions_x7epo_47 {
grid-column: 3;
justify-self: end;
margin-left: 0;
}
._stepsList_x7epo_659::before {
display: none;
}
._templateCard_x7epo_107 {
grid-template-columns: auto minmax(0, 1fr);
}
._radioDot_x7epo_1289 {
position: absolute;
top: 13px;
right: 13px;
}
._instructionItem_x7epo_53 {
align-items: flex-start;
}
._mobileDock_x7epo_61 {
position: fixed;
z-index: 20;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 10px 12px;
border-top: 1px solid var(--workflow-line);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 -8px 22px rgba(35, 47, 82, 0.12);
}
._mobileDock_x7epo_61 ._secondaryButton_x7epo_135,
._mobileDock_x7epo_61 ._primaryButton_x7epo_133 {
width: 100%;
padding: 0 10px;
}
}
._closeButton_x7epo_1741 {
width: 32px;
height: 32px;
border: 1px solid #dee2e6;
border-radius: 15%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s ease;
}
._closeButton_x7epo_1741:hover {
background: #f8f9fa;
}
._closeButton_x7epo_1741 svg {
font-size: 20px;
color: #444;
}
._customModal_x7epo_1785 {
width: 75vw;
max-width: 1000px;
margin: 1rem auto;
}
._customModalContent_x7epo_1797 {
height: 92vh;
/* border-radius: 12px; */
overflow: hidden;
border: none;
}
._createAccountPage_x7epo_1 {
height: 100%;
overflow-y: auto;
padding: 20px;
background: #f7f9fd;
}
@media (max-width: 991px) {
._customModal_x7epo_1785 {
width: 98vw;
max-width: 98vw;
margin: 0.5rem auto;
}
._customModalContent_x7epo_1797 {
height: 95vh;
}
._createAccountPage_x7epo_1 {
padding: 16px;
}
}
@media (max-width: 767px) {
._customModal_x7epo_1785 {
width: 100vw;
max-width: 100vw;
height: 100vh;
margin: 0;
}
._customModalContent_x7epo_1797 {
height: 100vh;
border-radius: 0;
}
._createAccountPage_x7epo_1 {
padding: 15px;
}
}
@media (max-width: 767px) {
._pageHeader_x7epo_37 {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
._headerActions_x7epo_39 {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
._headerActions_x7epo_39 button {
flex: 1 1 calc(50% - 10px);
}
._closeButton_x7epo_1741 {
position: absolute;
top: 16px;
right: 16px;
flex: none !important;
}
}
@media (max-width: 767px) {
._stepCard_x7epo_43 {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
._stepContent_x7epo_45 {
width: 100%;
}
._stepTiming_x7epo_941 {
margin-left: 0;
flex: 1;
}
._stepActions_x7epo_47 {
margin-left: auto;
}
}
/* =========================
Workflow Step Modal
========================= */
._stepModalLayer_x7epo_1995 {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
}
._stepModalBackdrop_x7epo_2013 {
position: absolute;
inset: 0;
background: rgba(20, 27, 45, 0.45);
backdrop-filter: blur(2px);
}
._stepModalDialog_x7epo_2027 {
position: relative;
z-index: 100000;
width: 550px;
max-width: calc(100% - 30px);
max-height: 90vh;
background: #fff;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
._stepModalHeader_x7epo_2055 {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 18px 22px;
border-bottom: 1px solid #edf1f7;
}
._stepModalHeader_x7epo_2055 h2 {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #16254d;
}
._stepModalHeader_x7epo_2055 p {
margin: 4px 0 0;
font-size: 13px;
color: #6b7280;
}
._stepModalBody_x7epo_2097 {
padding: 20px 22px;
overflow-y: auto;
flex: 1;
}
/* ---------- Form ---------- */
._stepFormGrid_x7epo_2113 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-bottom: 18px;
}
._stepField_x7epo_2127 {
display: flex;
flex-direction: column;
}
._stepField_x7epo_2127 small {
margin-top: 5px;
color: #8a93a5;
font-size: 11px;
}
._stepControlWithIcon_x7epo_2149 {
position: relative;
}
._stepControlWithIcon_x7epo_2149 svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #6f7b8d;
pointer-events: none;
font-size: 15px;
}
._stepControlWithIcon_x7epo_2149 ._formControl_x7epo_367 {
padding-left: 38px;
}
._formControl_x7epo_367 {
width: 100%;
height: 42px;
border: 1px solid #dfe5f1;
border-radius: 6px;
background: #fff;
padding: 0 12px;
font-size: 13px;
color: #1d2b4f;
}
._formControl_x7epo_367:focus {
outline: none;
border-color: #1456ef;
box-shadow: 0 0 0 3px rgba(20, 86, 239, 0.12);
}
/* ---------- Switch Row ---------- */
._stepSwitchGrid_x7epo_2223 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 18px 0;
}
._settingsItem_x7epo_57 {
display: flex;
justify-content: space-between;
align-items: center;
}
._settingsItem_x7epo_57 strong {
display: block;
font-size: 13px;
color: #22345f;
}
._settingsItem_x7epo_57 p {
margin: 2px 0 0;
font-size: 11px;
color: #81899a;
}
/* ---------- Template ---------- */
._templatePickerRow_x7epo_2277 {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: end;
margin-bottom: 18px;
}
._stepSecondaryButton_x7epo_2293 {
height: 42px;
padding: 0 18px;
border: 1px solid #dce3f2;
background: #fff;
color: #22345f;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
}
._stepSecondaryButton_x7epo_2293:hover {
background: #f8faff;
}
/* ---------- Editor ---------- */
._messageEditorBlock_x7epo_2327 {
margin-top: 10px;
}
._messageEditorHeader_x7epo_2335 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
._messageEditorActions_x7epo_2349 {
display: flex;
gap: 15px;
}
._messageEditorActions_x7epo_2349 button {
border: none;
background: none;
color: #1456ef;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
._messageTextarea_x7epo_2383 {
min-height: 150px !important;
resize: none;
border: 1px solid #dfe5f1;
border-radius: 6px;
padding: 14px;
font-size: 13px;
line-height: 1.6;
}
._variableHint_x7epo_2403 {
margin-top: 8px;
font-size: 11px;
color: #7a8498;
}
/* ---------- AI Suggestion ---------- */
._aiSuggestionBox_x7epo_2419 {
margin-top: 18px;
border: 1px solid #d9e6ff;
background: #f8fbff;
border-radius: 8px;
padding: 16px;
display: flex;
justify-content: space-between;
gap: 20px;
align-items: flex-end;
}
._aiSuggestionTitle_x7epo_2443 {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
._aiSuggestionTitle_x7epo_2443 strong {
font-size: 13px;
}
._aiSuggestionTitle_x7epo_2443 span {
background: #e7f0ff;
color: #1456ef;
border-radius: 4px;
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
}
._aiSuggestionBox_x7epo_2419 p {
margin: 4px 0;
font-size: 12px;
color: #616b7e;
}
._aiSuggestionActions_x7epo_2495 {
display: flex;
gap: 10px;
flex-shrink: 0;
}
._stepPrimaryButton_x7epo_2507 {
height: 42px;
padding: 0 20px;
border: none;
border-radius: 6px;
background: #1456ef;
color: #fff;
font-weight: 600;
cursor: pointer;
}
._stepPrimaryButton_x7epo_2507:hover {
background: #0f49cf;
}
/* ---------- Footer ---------- */
._stepModalFooter_x7epo_2541 {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 22px;
border-top: 1px solid #edf1f7;
background: #fff;
}
/* ---------- Responsive ---------- */
/* @media (max-width: 768px) {
.stepModalDialog {
width: 100%;
max-width: 100%;
height: 100vh;
max-height: 100vh;
border-radius: 0;
}
.stepModalBody {
padding: 16px;
}
.stepFormGrid,
.stepSwitchGrid,
.templatePickerRow {
grid-template-columns: 1fr;
}
.messageEditorHeader {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.aiSuggestionBox {
flex-direction: column;
align-items: flex-start;
}
.aiSuggestionActions {
width: 100%;
}
.aiSuggestionActions button {
flex: 1;
}
.stepModalFooter {
padding: 15px;
}
.stepModalFooter button {
flex: 1;
}
} */
._stepFormGrid_x7epo_2113 {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-bottom: 16px;
}
._stepSwitchGrid_x7epo_2223 {
display: grid;
grid-template-columns: (2, 1fr);
gap: 14px;
margin: 16px 0;
}
._templatePickerRow_x7epo_2277 {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 16px;
}
._templatePickerRow_x7epo_2277 ._stepSecondaryButton_x7epo_2293 {
width: 100%;
}
/* Message */
._messageEditorHeader_x7epo_2335 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
._messageEditorActions_x7epo_2349 {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
._messageEditorActions_x7epo_2349 button {
font-size: 11px;
}
._messageTextarea_x7epo_2383 {
min-height: 80px;
}
/* AI Suggestion */
._aiSuggestionBox_x7epo_2419 {
display: flex;
flex-direction: column;
gap: 14px;
align-items: stretch;
}
._aiSuggestionActions_x7epo_2495 {
display: flex;
gap: 10px;
}
._aiSuggestionActions_x7epo_2495 button {
flex: 1;
}
/* Footer */
._stepModalFooter_x7epo_2541 {
display: flex;
justify-content: flex-end;
gap: 10px;
}
._stepModalFooter_x7epo_2541 button {
min-width: 110px;
}
._statusDropdown_x7epo_2813 {
position: relative;
}
._statusMenu_x7epo_2821 {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
z-index: 1000;
}
._statusMenu_x7epo_2821 button {
width: 100%;
border: none;
background: transparent;
padding: 10px 14px;
text-align: left;
cursor: pointer;
}
._statusMenu_x7epo_2821 button:hover {
background: #f5f5f5;
}
._activeDot_x7epo_2871,
._inactiveDot_x7epo_2873 {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
}
._activeDot_x7epo_2871 {
background: #22c55e;
}
._inactiveDot_x7epo_2873 {
background: #ef4444;
}
._channelBadge_x7epo_897 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 7px;
border-radius: 999px;
font-size: 8px;
font-weight: 800;
}
/* Email */
._email_x7epo_775 {
color: #2563eb;
background: #dbeafe;
}
/* WhatsApp */
._whatsapp_x7epo_789 {
color: #16a34a;
background: #dcfce7;
}
/* SMS */
._sms_x7epo_2949 {
color: #7c3aed;
background: #ede9fe;
}
/* AI Voice */
._voice_x7epo_803 {
color: #2563eb;
background: #dbeafe;
}
._deleteModalBody_x7epo_2969 {
position: relative;
padding: 30px;
border-radius: 12px;
}
._deleteCloseButton_x7epo_2981 {
position: absolute;
top: 18px;
right: 18px;
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: #f3f3f3;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
._deleteContent_x7epo_3011 {
display: flex;
align-items: flex-start;
gap: 16px;
}
._deleteIconBox_x7epo_3023 {
width: 48px;
height: 48px;
border-radius: 8px;
background: #fff1f0;
color: #ff4d4f;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
._deleteText_x7epo_3047 h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
._deleteText_x7epo_3047 h4 span {
color: #ff4d4f;
}
._deleteText_x7epo_3047 p {
color: #8c8c8c;
font-size: 13px;
line-height: 1.6;
}
._deleteFooter_x7epo_3079 {
display: flex;
gap: 16px;
margin-top: 20px;
}
._deleteCancelButton_x7epo_3091 {
flex: 1;
height: 40px;
border: 1px solid #222;
border-radius: 10px;
background: #fff;
cursor: pointer;
}
._deleteConfirmButton_x7epo_3109 {
flex: 1;
height: 40px;
border: none;
border-radius: 10px;
color: #fff;
cursor: pointer;
background: #1456ef;
}
._deleteOverlay_x7epo_3127 {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 1055;
}
._deleteModal_x7epo_2969 {
z-index: 1060;
}
._deleteModal_x7epo_2969 .modal-content {
border-radius: 14px;
border: none;
}
._statusActive_x7epo_3157 {
color: #16a34a !important;
}
._statusInactive_x7epo_3165 {
color: #dc2626 !important;
}
._activeDot_x7epo_2871 {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #16a34a !important;
display: inline-block;
}
._inactiveDot_x7epo_2873 {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #dc2626 !important;
display: inline-block;
}
._parentModalBlur_x7epo_3203 {
position: relative;
overflow: hidden;
filter: brightness(0.75);
transition: all 0.25s ease;
pointer-events: none;
}
._parentModalBlur_x7epo_3203::after {
content: "";
position: absolute;
inset: 0;
background: rgba(20, 27, 45, 0.45);
border-radius: inherit;
z-index: 999;
}
._variableChip_x7epo_3235 {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px;
background: #ffffff;
border: 1px solid #d8e3f8;
border-radius: 6px;
color: #3157b7;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
._variableChip_x7epo_3235:hover {
background: #f3f7ff;
border-color: #4f7df3;
}
/* ================= Variables Section ================= */
._variableBox_x7epo_3279 {
margin-top: 20px;
padding: 18px;
border: 1px solid #dbe5f4;
border-radius: 10px;
background: #fff;
}
._variableHeader_x7epo_3295 {
margin-bottom: 18px;
}
._variableHeader_x7epo_3295 h6 {
margin: 0;
font-size: 12px !important;
font-weight: 700;
color: #17203a;
}
._variableHeader_x7epo_3295 p {
margin: 5px 0 0;
color: #6b7280;
font-size: 11px !important;
}
._variableGrid_x7epo_3329 {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
._variableChip_x7epo_3235 {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 6px 12px;
background: #fff;
border: 1px solid #d7e3ff;
border-radius: 8px;
color: #2563eb;
font-size: 11px !important;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
._variableChip_x7epo_3235:hover {
background: #eef4ff;
border-color: #2563eb;
}
._variableChip_x7epo_3235 svg {
font-size: 15px;
}
._variableTip_x7epo_3389 {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #eef2f7;
color: #6b7280;
font-size: 11px !important;
line-height: 1.5;
}
._modalContent_4n9dv_1 {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
._modalHeader_4n9dv_13 {
padding: 20px 24px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ececec;
}
._modalHeader_4n9dv_13 h4 {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 22px;
}
._modalHeader_4n9dv_13 p {
margin-top: 6px;
color: #777;
font-size: 14px;
}
._modalHeader_4n9dv_13 button {
border: none;
background: transparent;
font-size: 22px;
}
._modalBody_4n9dv_67 {
padding: 24px;
}
._modalBody_4n9dv_67 label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
._modalBody_4n9dv_67 span {
color: red;
}
._modalBody_4n9dv_67 textarea {
width: 100%;
resize: none;
border-radius: 12px;
border: 1px solid #ddd;
padding: 15px;
outline: none;
min-height: 140px;
}
._textArea_4n9dv_113 {
font-size: 13px !important;
color: black;
font-weight: 500;
}
._dropdown_4n9dv_125 {
position: relative;
z-index: 1056;
}
._dropdownHeader_4n9dv_135 {
margin-top: 8px;
border: 1px solid #ddd;
border-radius: 12px;
min-height: 52px;
padding: 14px 16px;
display: flex;
justify-content: space-between;
cursor: pointer;
background: white;
}
._dropdownMenu_4n9dv_159 {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 100%;
background: #fff;
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
z-index: 9999;
max-height: 220px;
overflow-y: auto;
}
._option_4n9dv_187 {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
cursor: pointer;
}
._option_4n9dv_187:hover {
background: #f5f8ff;
}
._option_4n9dv_187 input {
width: 18px;
height: 18px;
}
._modalFooter_4n9dv_221 {
padding: 18px 24px;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
gap: 12px;
}
._cancelBtn_4n9dv_237 {
border: 1px solid #ddd;
background: white;
border-radius: 10px;
padding: 10px 18px;
}
._generateBtn_4n9dv_251 {
background: #2563eb;
color: white;
border: none;
border-radius: 10px;
padding: 10px 20px;
font-weight: 600;
}
._generateBtn_4n9dv_251:hover {
background: #1d4ed8;
}
._subTitle_4n9dv_275 {
font-size: 15px !important;
font-weight: 600;
margin-bottom: 5px !important;
}
._fieldLabel_4n9dv_285 {
font-size: 13px !important;
font-weight: 600;
margin-bottom: 5px !important;
}
.aiBackdrop {
background: rgba(15, 23, 42, 0.45) !important;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
._aiWorkflowDialog_4n9dv_305 .modal-content {
overflow: visible !important;
}
._aiWorkflowDialog_4n9dv_305 .modal-body {
overflow: visible !important;
}
._aiWorkflowDialog_4n9dv_305 .modal-dialog {
overflow: visible !important;
}
.aiBackdrop {
background: rgba(15, 23, 42, 0.45) !important;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
border-color: #ccc;
border-style: solid;
border-width: 3px 3px 0 0;
content: "";
display: block;
height: 9px;
position: absolute;
top: 6px;
width: 9px;
}
.react-datepicker__sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.react-datepicker-wrapper {
display: inline-block;
padding: 0;
border: 0;
}
.react-datepicker {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
font-size: 0.8rem;
background-color: #fff;
color: #000;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
display: inline-block;
position: relative;
line-height: initial;
}
.react-datepicker--time-only .react-datepicker__time-container {
border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
border-bottom-left-radius: 0.375em;
border-bottom-right-radius: 0.375em;
}
.react-datepicker-popper {
z-index: 1;
line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
fill: #f0f0f0;
color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
fill: #fff;
color: #fff;
}
.react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle, .react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle {
fill: #fff;
color: #fff;
}
.react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle {
fill: #f0f0f0;
color: #f0f0f0;
}
.react-datepicker__header {
text-align: center;
background-color: #f0f0f0;
border-bottom: 1px solid #aeaeae;
border-top-left-radius: 0.3rem;
padding: 8px 0;
position: relative;
}
.react-datepicker__header--time {
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select, .react-datepicker__header--middle, .react-datepicker__header--bottom) {
border-top-right-radius: 0.3rem;
}
.react-datepicker__header--middle {
border-top: 1px solid #aeaeae;
border-radius: 0;
margin-top: 4px;
}
.react-datepicker__header--bottom {
border-bottom: none;
border-top: 1px solid #aeaeae;
border-radius: 0 0 0.3rem 0.3rem;
}
.react-datepicker__header-wrapper {
position: relative;
}
.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 2px;
}
.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
display: inline-block;
margin: 0 15px;
}
.react-datepicker__month-select,
.react-datepicker__year-select,
.react-datepicker__month-year-select {
background-color: transparent;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
color: inherit;
cursor: pointer;
font-family: inherit;
font-size: inherit;
margin-top: 5px;
padding: 2px 5px;
}
.react-datepicker__month-select:focus-visible,
.react-datepicker__year-select:focus-visible,
.react-datepicker__month-year-select:focus-visible {
outline: auto 1px;
}
.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
margin-top: 0;
color: #000;
font-weight: bold;
font-size: 0.944rem;
}
h2.react-datepicker__current-month {
padding: 0;
margin: 0;
}
.react-datepicker-time__header {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.react-datepicker__navigation {
align-items: center;
background: none;
display: flex;
justify-content: center;
text-align: center;
cursor: pointer;
position: absolute;
top: 2px;
padding: 0;
border: none;
z-index: 1;
height: 32px;
width: 32px;
text-indent: -999em;
overflow: hidden;
}
.react-datepicker__navigation--previous {
left: 2px;
}
.react-datepicker__navigation--next {
right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 85px;
}
.react-datepicker__navigation--years {
position: relative;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.react-datepicker__navigation--years-previous {
top: 4px;
}
.react-datepicker__navigation--years-upcoming {
top: -4px;
}
.react-datepicker__navigation:hover *::before {
border-color: rgb(165.75, 165.75, 165.75);
}
.react-datepicker__navigation-icon {
position: relative;
top: -1px;
font-size: 20px;
width: 0;
}
.react-datepicker__navigation-icon--next {
left: -2px;
}
.react-datepicker__navigation-icon--next::before {
transform: rotate(45deg);
left: -7px;
}
.react-datepicker__navigation-icon--previous {
right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
transform: rotate(225deg);
right: -7px;
}
.react-datepicker__month-container {
float: left;
}
.react-datepicker__year {
margin: 0.5em;
text-align: center;
}
.react-datepicker__year-wrapper {
display: flex;
flex-wrap: wrap;
max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
display: inline-block;
width: 5em;
margin: 2px;
}
.react-datepicker__month {
margin: 0.5em;
text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
display: inline-block;
width: 5em;
margin: 2px;
}
.react-datepicker__input-time-container {
clear: both;
width: 100%;
float: left;
margin: 5px 0 10px 15px;
text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
display: inline-block;
margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
-moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
margin-left: 5px;
display: inline-block;
}
.react-datepicker__time-container {
float: right;
border-left: 1px solid #aeaeae;
width: 85px;
}
.react-datepicker__time-container--with-today-button {
display: inline;
border: 1px solid #aeaeae;
border-radius: 0.375em;
position: absolute;
right: -87px;
top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
position: relative;
background: white;
border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
width: 85px;
overflow-x: hidden;
margin: 0 auto;
text-align: center;
border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
list-style: none;
margin: 0;
height: calc(195px + 2.125em / 2);
overflow-y: scroll;
padding-right: 0;
padding-left: 0;
width: 100%;
box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
height: 30px;
padding: 5px 10px;
white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
cursor: pointer;
background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
background-color: #216ba5;
color: white;
font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
cursor: default;
background-color: transparent;
}
.react-datepicker__week-number {
color: #ccc;
display: inline-block;
width: 2.125em;
line-height: 2.125em;
text-align: center;
margin: 0.208em;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
border-radius: 0.3rem;
background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
border-radius: 0.3rem;
background-color: #216ba5;
color: #fff;
}
.react-datepicker__week-number--selected:hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day-names {
text-align: center;
white-space: nowrap;
margin-bottom: -8px;
}
.react-datepicker__week {
white-space: nowrap;
}
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
color: #000;
display: inline-block;
width: 2.125em;
line-height: 2.125em;
text-align: center;
margin: 0.208em;
}
.react-datepicker__day-name--disabled,
.react-datepicker__day--disabled,
.react-datepicker__time-name--disabled {
cursor: default;
color: #ccc;
}
.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
border-radius: 0.3rem;
background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
border-radius: 0.3rem;
background-color: #3dcc4a;
color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
position: relative;
border-radius: 0.3rem;
background-color: #ff6803;
color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 4px;
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
visibility: visible;
opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
border-radius: 0.3rem;
background-color: #216ba5;
color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
border-radius: 0.3rem;
background-color: rgb(186.25, 217.0833333333, 241.25);
color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
color: #fff;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
background-color: #f0f0f0;
color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
cursor: default;
color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
position: absolute;
bottom: 70%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 4px;
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__input-container {
position: relative;
display: inline-block;
width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
position: absolute;
padding: 0.625em;
box-sizing: content-box;
}
.react-datepicker__view-calendar-icon input {
padding: 6px 10px 5px 25px;
}
.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
border: 1px solid transparent;
border-radius: 0.3rem;
position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
transform: rotate(135deg);
right: -16px;
top: 0;
}
.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
background-color: #f0f0f0;
position: absolute;
width: 50%;
left: 25%;
top: 30px;
z-index: 1;
text-align: center;
border-radius: 0.3rem;
border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
height: 150px;
overflow-y: scroll;
}
.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
line-height: 20px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-bottom-left-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
position: absolute;
left: 15px;
}
.react-datepicker__close-icon {
cursor: pointer;
background-color: transparent;
border: 0;
outline: 0;
padding: 0 6px 0 0;
position: absolute;
top: 0;
right: 0;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.react-datepicker__close-icon::after {
cursor: pointer;
background-color: #216ba5;
color: #fff;
border-radius: 50%;
height: 16px;
width: 16px;
padding: 2px;
font-size: 12px;
line-height: 1;
text-align: center;
display: table-cell;
vertical-align: middle;
content: "×";
}
.react-datepicker__close-icon--disabled {
cursor: default;
}
.react-datepicker__close-icon--disabled::after {
cursor: default;
background-color: #ccc;
}
.react-datepicker__today-button {
background: #f0f0f0;
border-top: 1px solid #aeaeae;
cursor: pointer;
text-align: center;
font-weight: bold;
padding: 5px 0;
clear: left;
}
.react-datepicker__portal {
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
justify-content: center;
align-items: center;
display: flex;
z-index: 2147483647;
}
.react-datepicker__children-container {
width: 17.25em;
margin: 0.5em;
padding-right: 0.25em;
padding-left: 0.25em;
height: auto;
}
.react-datepicker__aria-live {
position: absolute;
clip-path: circle(0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 1px;
white-space: nowrap;
}
.react-datepicker__calendar-icon {
width: 1em;
height: 1em;
vertical-align: -0.125em;
}
.react-datepicker-popper-offset {
margin-top: -0.7em;
}
._timelineModal_15p2u_1 {
max-width: 980px;
}
._modalHeader_15p2u_9 {
/* border-bottom: 1px solid #e9ecef; */
padding: 16px 22px;
}
._modalTitle_15p2u_19 {
font-size: 18px;
font-weight: 600;
color: #1f2937;
}
/* .modalBody {
padding: 0;
max-height: calc(90vh - 150px);
overflow-y: auto;
padding: 0;
} */
._footer_15p2u_45 {
border-top: 1px solid #e9ecef;
padding: 14px 20px;
}
._closeBtn_15p2u_55 {
min-width: 90px;
}
/* ===========================
Timeline
=========================== */
._timelineContainer_15p2u_71 {
position: relative;
padding: 20px;
}
._timelineItem_15p2u_81 {
display: flex;
align-items: flex-start;
position: relative;
padding: 14px;
border-radius: 10px;
transition: 0.25s;
}
._timelineItem_15p2u_81:hover {
background: #f8fafc;
}
._activeItem_15p2u_107 {
background: #eef4ff;
}
._timelineLeft_15p2u_115 {
width: 38px;
display: flex;
justify-content: center;
position: relative;
flex-shrink: 0;
}
._timelineLine_15p2u_131 {
position: absolute;
top: 32px;
width: 2px;
height: calc(100% + 10px);
background: #d6dce5;
}
._iconCircle_15p2u_147 {
width: 28px;
height: 28px;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
z-index: 2;
}
._greenIcon_15p2u_171 {
background: #16a34a;
}
._blueIcon_15p2u_179 {
background: #2563eb;
}
._timelineContent_15p2u_187 {
flex: 1;
padding-left: 14px;
}
._timelineHeading_15p2u_197 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #222;
}
._timelineDate_15p2u_217 {
margin: 4px 0;
font-size: 12px;
color: #6b7280;
}
._timelineDesc_15p2u_229 {
margin: 0;
font-size: 12px;
color: #616161;
line-height: 1.5;
}
._statusBadge_15p2u_243 {
background: #dbeafe;
color: #2563eb;
padding: 3px 8px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
/* ===========================
Right Side
=========================== */
._sectionTitle_15p2u_269 {
font-size: 14px;
font-weight: 600;
color: #374151;
margin: 22px 20px 10px;
}
._detailsCard_15p2u_283 {
margin: 0 20px;
border: 1px solid #e6eaf0;
border-radius: 10px;
padding: 18px;
background: #fff;
}
._detailBlock_15p2u_299 {
margin-bottom: 18px;
}
._detailBlock_15p2u_299 label {
display: block;
margin-bottom: 5px;
font-size: 11px;
color: #8a8a8a;
}
._detailBlock_15p2u_299 span {
font-size: 13px;
color: #222;
font-weight: 500;
}
._completedBadge_15p2u_333 {
display: inline-block;
padding: 4px 10px;
background: #dcfce7;
color: #15803d;
border-radius: 20px;
font-size: 11px !important;
font-weight: 600 !important;
}
._linkBtn_15p2u_353 {
display: inline-flex;
align-items: center;
gap: 6px;
color: #2563eb;
cursor: pointer;
font-size: 13px;
font-weight: 500;
}
._linkBtn_15p2u_353:hover {
text-decoration: underline;
}
._summaryBox_15p2u_381 {
margin: 0 20px;
padding: 14px;
background: #eef5ff;
border: 1px solid #d5e5ff;
border-radius: 8px;
font-size: 13px;
color: #374151;
line-height: 1.6;
/* Fix long messages and URLs */
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
word-wrap: break-word;
/* Scroll for long content */
max-height: 260px;
overflow-y: auto;
/* Prevent horizontal overflow */
overflow-x: hidden;
}
._intentRow_15p2u_429 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin: 0 20px;
flex-wrap: wrap;
}
._promiseBadge_15p2u_447 {
background: #fff3cd;
color: #9a6700;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
._confidenceBadge_15p2u_465 {
background: #fef3c7;
color: #92400e;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
._promiseDate_15p2u_483 {
margin: 0 20px;
display: flex;
align-items: center;
gap: 8px;
color: #374151;
font-size: 14px;
}
._remarks_15p2u_501 {
margin: 0 20px 20px;
font-size: 13px;
color: #555;
line-height: 1.6;
}
/* ===========================
Responsive
=========================== */
@media (max-width: 991px) {
._timelineContainer_15p2u_71 {
border-bottom: 1px solid #e5e7eb;
margin-bottom: 15px;
}
._detailsCard_15p2u_283,
._summaryBox_15p2u_381,
._intentRow_15p2u_429,
._promiseDate_15p2u_483,
._remarks_15p2u_501,
._sectionTitle_15p2u_269 {
margin-left: 15px;
margin-right: 15px;
}
}
@media (max-width: 768px) {
._timelineItem_15p2u_81 {
padding: 12px 8px;
}
._timelineHeading_15p2u_197 {
font-size: 13px;
}
._timelineDate_15p2u_217,
._timelineDesc_15p2u_229 {
font-size: 11px;
}
._detailBlock_15p2u_299 {
margin-bottom: 15px;
}
._intentRow_15p2u_429 {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 576px) {
._modalHeader_15p2u_9 {
padding: 14px;
}
._modalTitle_15p2u_19 {
font-size: 16px;
}
._timelineContainer_15p2u_71 {
padding: 14px;
}
._detailsCard_15p2u_283 {
padding: 14px;
}
._sectionTitle_15p2u_269 {
font-size: 13px;
}
._summaryBox_15p2u_381 {
font-size: 12px;
}
._promiseDate_15p2u_483 {
font-size: 13px;
}
._remarks_15p2u_501 {
font-size: 12px;
}
}
._selectedHeader_15p2u_671 {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 22px;
border-bottom: 1px solid #e5e7eb;
background: #fff;
}
._selectedIcon_15p2u_689 {
width: 36px;
height: 36px;
border-radius: 50%;
background: #e8f1ff;
color: #2563eb;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
._selectedInfo_15p2u_715 {
flex: 1;
}
._selectedTitle_15p2u_723 {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 15px;
font-weight: 600;
color: #1f2937;
}
._selectedTime_15p2u_743 {
margin-top: 4px;
font-size: 12px;
color: #6b7280;
}
._closeButton_15p2u_753 {
width: 32px;
height: 32px;
border: 1px solid #dee2e6;
border-radius: 15%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s ease;
}
._closeButton_15p2u_753:hover {
background: #f8f9fa;
}
._closeButton_15p2u_753 svg {
font-size: 20px;
color: #444;
}
._modalHeader_15p2u_9 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 22px 14px;
/* border-bottom: 1px solid #e5e7eb; */
background: #fff;
}
._modalTitle_15p2u_19 {
margin: 0;
font-size: 24px;
font-weight: 600;
color: #1f2937;
}
._closeIconBtn_15p2u_827 {
border: none;
background: transparent;
cursor: pointer;
font-size: 22px;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
._closeIconBtn_15p2u_827:hover {
color: #111827;
}
._selectedHeader_15p2u_671 {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 22px;
border-bottom: 1px solid #e5e7eb;
background: #fff;
}
._timelineModal_15p2u_1 .modal-content {
/* max-height: 90vh; */
overflow: auto;
display: flex;
flex-direction: column;
}
/* .modalBody {
flex: 1;
overflow-y: auto;
padding: 0;
} */
._recordingBtn_15p2u_901 {
display: inline-flex;
align-items: center;
gap: 6px;
color: #2563eb;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
._recordingBtn_15p2u_901:hover {
text-decoration: underline;
}
._audioPlayer_15p2u_929 {
width: 100%;
height: 35px;
margin-top: 8px;
}
._deleteModalBody_15p2u_939 {
position: relative;
padding: 30px;
border-radius: 12px;
}
._deleteCloseButton_15p2u_951 {
position: absolute;
top: 18px;
right: 18px;
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: #f3f3f3;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
._deleteContent_15p2u_981 {
display: flex;
align-items: flex-start;
gap: 16px;
}
._deleteIconBox_15p2u_993 {
width: 48px;
height: 48px;
border-radius: 8px;
background: #fff1f0;
color: #ff4d4f;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
._deleteText_15p2u_1017 h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
._deleteText_15p2u_1017 h4 span {
color: #ff4d4f;
}
._deleteText_15p2u_1017 p {
color: #8c8c8c;
font-size: 13px;
line-height: 1.6;
}
._deleteFooter_15p2u_1049 {
display: flex;
gap: 16px;
margin-top: 20px;
}
._deleteCancelButton_15p2u_1061 {
flex: 1;
height: 40px;
border: 1px solid #222;
border-radius: 10px;
background: #fff;
cursor: pointer;
}
._deleteConfirmButton_15p2u_1079 {
flex: 1;
height: 40px;
border: none;
border-radius: 10px;
color: #f80105;
cursor: pointer;
background: #fff1f0;
border: 1px solid #ff4d4f;
}
._deleteOverlay_15p2u_1099 {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 1055;
}
._deleteModal_15p2u_939 {
z-index: 1060;
}
._deleteModal_15p2u_939 .modal-content {
border-radius: 14px;
border: none;
}
._statusActive_15p2u_1129 {
color: #16a34a !important;
}
._statusInactive_15p2u_1137 {
color: #dc2626 !important;
}
._activeDot_15p2u_1145 {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #16a34a !important;
display: inline-block;
}
._inactiveDot_15p2u_1161 {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #dc2626 !important;
display: inline-block;
}
._parentModalBlur_15p2u_1175 {
position: relative;
overflow: hidden;
filter: brightness(0.75);
transition: all 0.25s ease;
pointer-events: none;
}
._parentModalBlur_15p2u_1175::after {
content: "";
position: absolute;
inset: 0;
background: rgba(20, 27, 45, 0.45);
border-radius: inherit;
z-index: 999;
}
._variableChip_15p2u_1207 {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px;
background: #ffffff;
border: 1px solid #d8e3f8;
border-radius: 6px;
color: #3157b7;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
._variableChip_15p2u_1207:hover {
background: #f3f7ff;
border-color: #4f7df3;
}
/* ================= Variables Section ================= */
._variableBox_15p2u_1251 {
margin-top: 20px;
padding: 18px;
border: 1px solid #dbe5f4;
border-radius: 10px;
background: #fff;
}
._variableHeader_15p2u_1267 {
margin-bottom: 18px;
}
._variableHeader_15p2u_1267 h6 {
margin: 0;
font-size: 12px !important;
font-weight: 700;
color: #17203a;
}
._variableHeader_15p2u_1267 p {
margin: 5px 0 0;
color: #6b7280;
font-size: 11px !important;
}
._variableGrid_15p2u_1301 {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
._variableChip_15p2u_1207 {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 6px 12px;
background: #fff;
border: 1px solid #d7e3ff;
border-radius: 8px;
color: #2563eb;
font-size: 11px !important;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
._variableChip_15p2u_1207:hover {
background: #eef4ff;
border-color: #2563eb;
}
._variableChip_15p2u_1207 svg {
font-size: 15px;
}
._variableTip_15p2u_1361 {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #eef2f7;
color: #6b7280;
font-size: 11px !important;
line-height: 1.5;
}
._aiAccountingDashboard_2k6oz_1 {
--ai-blue: #1556ef;
--ai-ink: #132146;
--ai-muted: #65718d;
--ai-line: #e9edf5;
min-height: 100vh;
padding: 18px;
background: #f7f9fd;
color: var(--ai-ink);
font-size: 12px;
}
._aiAccountingDashboard_2k6oz_1 * {
box-sizing: border-box;
}
._aiAccountingHeader_2k6oz_29,
._aiAccountingHeaderActions_2k6oz_31,
._aiAccountingStatGrid_2k6oz_33,
._aiAccountingMainGrid_2k6oz_35,
._aiAccountingCharts_2k6oz_37,
._aiAccountingMiniStats_2k6oz_39,
._aiAccountingDocumentsHeader_2k6oz_41,
._aiAccountingTabs_2k6oz_43 {
display: flex;
align-items: center;
}
._aiAccountingHeader_2k6oz_29 {
justify-content: space-between;
margin-bottom: 16px;
gap: 18px;
}
._aiAccountingHeader_2k6oz_29 h1,
._aiAccountingDocumentsHeader_2k6oz_41 h2 {
font-size: 18px;
margin: 0 0 4px;
font-weight: 700;
}
._aiAccountingHeader_2k6oz_29 p {
margin: 0;
color: var(--ai-muted);
font-size: 11px;
}
._aiAccountingHeaderActions_2k6oz_31 {
gap: 8px;
}
._aiAccountingControl_2k6oz_89,
._aiAccountingSquareButton_2k6oz_91,
._aiAccountingBell_2k6oz_93,
._aiAccountingCreateButton_2k6oz_95 {
border: 1px solid var(--ai-line);
background: #fff;
border-radius: 6px;
height: 32px;
padding: 0 12px;
font: 600 11px inherit;
color: #2c3a5d;
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
}
._aiAccountingSquareButton_2k6oz_91 {
width: 32px;
padding: 0;
justify-content: center;
}
._aiAccountingBell_2k6oz_93 {
border: 0;
position: relative;
padding: 0 7px;
font-size: 17px;
}
._aiAccountingBell_2k6oz_93 i {
position: absolute;
right: 1px;
top: 1px;
width: 11px;
height: 11px;
border-radius: 50%;
color: #fff;
background: #fa2d44;
font: 8px Arial;
display: grid;
place-items: center;
font-style: normal;
}
._aiAccountingCreateButton_2k6oz_95 {
color: #fff;
background: var(--ai-blue);
border-color: var(--ai-blue);
font-weight: 700;
}
._aiReportsAskToggle_2k6oz_183 {
height: 32px;
border: 1px solid var(--ai-line);
background: #fff;
color: #2c3a5d;
border-radius: 6px;
padding: 0 8px 0 10px;
display: inline-flex;
align-items: center;
gap: 7px;
font: 600 11px inherit;
cursor: pointer;
}
._aiReportsToggleTrack_2k6oz_209 {
width: 24px;
height: 14px;
border-radius: 999px;
background: #c9d1e0;
padding: 2px;
transition: background 0.2s ease;
}
._aiReportsToggleTrack_2k6oz_209 i {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
transition: transform 0.2s ease;
}
._aiReportsAskToggleActive_2k6oz_241 {
color: var(--ai-blue);
border-color: #b8ccff;
}
._aiReportsAskToggleActive_2k6oz_241 ._aiReportsToggleTrack_2k6oz_209 {
background: var(--ai-blue);
}
._aiReportsAskToggleActive_2k6oz_241 ._aiReportsToggleTrack_2k6oz_209 i {
transform: translateX(10px);
}
._aiReportsAskCard_2k6oz_261 {
margin: 0 0 10px;
padding: 13px;
background: #fff;
border: 1px solid var(--ai-line);
border-radius: 8px;
}
._aiReportsAskCard_2k6oz_261 h2 {
margin: 0 0 9px;
font-size: 12px;
}
._aiReportsAskForm_2k6oz_283 {
display: flex;
align-items: center;
gap: 10px;
}
._aiReportsPromptField_2k6oz_293 {
min-width: 0;
height: 34px;
flex: 1;
display: flex;
align-items: center;
gap: 7px;
padding: 0 9px;
border: 1px solid #aec7ff;
border-radius: 5px;
color: #5771a7;
}
._aiReportsPromptField_2k6oz_293 input {
min-width: 0;
flex: 1;
border: 0;
outline: 0;
color: var(--ai-ink);
font: 500 10px inherit;
}
._aiReportsPromptField_2k6oz_293 input::placeholder {
color: #67799b;
}
._aiReportsPromptField_2k6oz_293 button {
display: grid;
place-items: center;
padding: 0;
border: 0;
background: transparent;
color: #415b93;
cursor: pointer;
}
._aiReportsGenerateButton_2k6oz_357 {
height: 34px;
min-width: 132px;
border: 1px solid var(--ai-blue);
border-radius: 5px;
background: var(--ai-blue);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font: 700 10px inherit;
cursor: pointer;
}
._aiReportsExamples_2k6oz_385 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 9px;
}
._aiReportsExamples_2k6oz_385 span {
width: 100%;
color: var(--ai-muted);
font-size: 9px;
}
._aiReportsExamples_2k6oz_385 button {
border: 1px solid #edf0f6;
border-radius: 4px;
background: #f9fbff;
color: #536584;
padding: 4px 9px;
font: 600 8px inherit;
cursor: pointer;
}
._aiAccountingStatGrid_2k6oz_33 {
gap: 8px;
margin-bottom: 10px;
}
._aiAccountingStatCard_2k6oz_435 {
min-width: 0;
flex: 1;
height: 65px;
background: #fff;
border: 1px solid var(--ai-line);
border-radius: 8px;
display: flex;
align-items: center;
padding: 10px;
gap: 9px;
}
._aiAccountingIconBox_2k6oz_459 {
flex: 0 0 32px;
height: 32px;
border-radius: 6px;
display: grid;
place-items: center;
color: #fff;
font-size: 19px;
}
._aiAccountingBlue_2k6oz_477 {
color: var(--ai-blue);
}
._aiAccountingIconBox_2k6oz_459._aiAccountingBlue_2k6oz_477 {
background: #1456ef;
color: #fff;
}
._aiAccountingOrange_2k6oz_491 {
color: #f88909;
}
._aiAccountingIconBox_2k6oz_459._aiAccountingOrange_2k6oz_491 {
color: #fff;
background: #fb8b08;
}
._aiAccountingGreen_2k6oz_505 {
color: #0bad61;
}
._aiAccountingIconBox_2k6oz_459._aiAccountingGreen_2k6oz_505 {
color: #fff;
background: #06a85c;
}
._aiAccountingRed_2k6oz_519 {
color: #e23532;
}
._aiAccountingIconBox_2k6oz_459._aiAccountingRed_2k6oz_519 {
color: #fff;
background: #dd302d;
}
._aiAccountingPurple_2k6oz_533 {
color: #5746d8;
}
._aiAccountingIconBox_2k6oz_459._aiAccountingPurple_2k6oz_533 {
color: #fff;
background: #5946d9;
}
._aiAccountingStatCard_2k6oz_435 small,
._aiAccountingMiniStats_2k6oz_39 small {
display: block;
color: var(--ai-muted);
font-size: 9px;
font-weight: 600;
}
._aiAccountingStatCard_2k6oz_435 strong {
display: block;
margin: 3px 0;
font-size: 13px;
}
._aiAccountingStatCard_2k6oz_435 em,
._aiAccountingMiniStats_2k6oz_39 em {
display: block;
font-size: 8px;
font-style: normal;
color: #0bad61;
font-weight: 700;
}
._aiAccountingStatCard_2k6oz_435 em b {
font-weight: 500;
color: var(--ai-muted);
}
._aiAccountingMainGrid_2k6oz_35 {
align-items: flex-start;
gap: 10px;
}
._aiAccountingChartColumn_2k6oz_603 {
min-width: 0;
flex: 1;
}
._aiAccountingCharts_2k6oz_37 {
align-items: stretch;
gap: 9px;
}
._aiAccountingTrend_2k6oz_619,
._aiAccountingDistribution_2k6oz_621,
._aiAccountingDetailCard_2k6oz_623,
._aiAccountingDocumentsSection_2k6oz_625 {
background: #fff;
border: 1px solid var(--ai-line);
border-radius: 8px;
}
._aiAccountingTrend_2k6oz_619 {
flex: 1.42;
padding: 10px 4px;
height: 207px;
}
._aiAccountingDistribution_2k6oz_621 {
flex: 1;
padding: 11px;
}
._aiAccountingChartHeading_2k6oz_653,
._aiAccountingCardTitle_2k6oz_655 {
display: flex;
align-items: center;
justify-content: space-between;
}
._aiAccountingTrend_2k6oz_619 h3,
._aiAccountingDistribution_2k6oz_621 h3,
._aiAccountingDetailCard_2k6oz_623 h3 {
margin: 0;
font-size: 11px;
}
._aiAccountingChartHeading_2k6oz_653 button {
padding: 5px 8px;
background: #fff;
border: 1px solid var(--ai-line);
border-radius: 4px;
color: #34405e;
font: 600 9px inherit;
}
._aiAccountingLegend_2k6oz_693 {
display: flex;
align-items: center;
gap: 6px;
margin: 9px 0 1px;
font-size: 8px;
}
._aiAccountingLegend_2k6oz_693 span:first-child {
margin-left: 0;
}
._aiAccountingBlueDot_2k6oz_713,
._aiAccountingOrangeDot_2k6oz_715,
._aiAccountingGreenDot_2k6oz_717,
._aiAccountingRedDot_2k6oz_719 {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
}
._aiAccountingBlueDot_2k6oz_713 {
background: #1456ef;
}
._aiAccountingOrangeDot_2k6oz_715 {
background: #fc7900;
}
._aiAccountingGreenDot_2k6oz_717 {
background: #13ae63;
}
._aiAccountingRedDot_2k6oz_719 {
background: #dc302d;
}
._aiAccountingTrend_2k6oz_619 svg {
width: 100%;
height: 111px;
overflow: visible;
}
._aiAccountingGridLines_2k6oz_765 line {
stroke: #edf0f6;
stroke-width: 1;
}
._aiAccountingTrend_2k6oz_619 polyline {
fill: none;
stroke-width: 1.5;
}
._aiAccountingTotalLine_2k6oz_781 {
stroke: #1456ef;
}
._aiAccountingOutstandingLine_2k6oz_787 {
stroke: #fc7900;
}
._aiAccountingCollectedLine_2k6oz_793 {
stroke: #13ae63;
}
._aiAccountingDates_2k6oz_799 {
display: flex;
justify-content: space-between;
font-size: 8px;
color: #67738f;
}
._aiAccountingDonutContent_2k6oz_811 {
height: 170px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
}
._aiAccountingDonut_2k6oz_811 {
width: 106px;
height: 106px;
border-radius: 50%;
background: conic-gradient(
#1456ef 0 52.6%,
#fc7900 52.6% 78.9%,
#13ae63 78.9%
);
position: relative;
display: grid;
place-items: center;
}
._aiAccountingDonut_2k6oz_811::before {
content: "";
position: absolute;
width: 58px;
height: 58px;
border-radius: 50%;
background: #fff;
}
._aiAccountingDonut_2k6oz_811 strong {
position: relative;
z-index: 1;
font-size: 19px;
text-align: center;
}
._aiAccountingDonut_2k6oz_811 small {
display: block;
color: var(--ai-muted);
font-size: 8px;
}
._aiAccountingDistributionLegend_2k6oz_889 {
display: grid;
grid-template-columns: max-content max-content;
grid-template-rows: repeat(2, max-content);
justify-content: space-between;
gap: 12px;
flex: 1;
font-size: 8px;
color: #33415f;
}
._aiAccountingDistributionLegend_2k6oz_889 span:last-child {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
._aiAccountingDistributionLegend_2k6oz_889 i {
margin-right: 5px;
}
._aiAccountingDistributionLegend_2k6oz_889 b {
margin-left: 12px;
color: #71809b;
font-weight: 500;
}
._aiAccountingMiniStats_2k6oz_39 {
margin-top: 9px;
align-items: stretch;
background: #fff;
border: 1px solid var(--ai-line);
border-radius: 8px;
}
._aiAccountingMiniStats_2k6oz_39 article {
flex: 1;
min-width: 0;
display: flex;
gap: 8px;
padding: 11px;
border-right: 1px solid var(--ai-line);
}
._aiAccountingMiniStats_2k6oz_39 article:last-child {
border: 0;
}
._aiAccountingMiniStats_2k6oz_39 article > svg {
font-size: 18px;
flex: 0 0 auto;
}
._aiAccountingMiniStats_2k6oz_39 strong {
display: block;
margin: 2px 0;
font-size: 15px;
}
._aiAccountingSideColumn_2k6oz_989 {
width: 275px;
display: grid;
gap: 9px;
}
._aiAccountingDetailCard_2k6oz_623 {
padding: 11px;
}
._aiAccountingCardTitle_2k6oz_655 {
margin-bottom: 8px;
}
._aiAccountingCardTitle_2k6oz_655 button {
border: 0;
background: transparent;
color: var(--ai-blue);
font: 600 9px inherit;
}
._aiAccountingAgingList_2k6oz_1023 > div,
._aiAccountingReminderList_2k6oz_1025 > div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 0;
border-bottom: 1px solid #f0f2f7;
font-size: 9px;
}
._aiAccountingAgingList_2k6oz_1023 span {
display: flex;
align-items: center;
gap: 7px;
}
._aiAccountingAgingList_2k6oz_1023 b {
font-size: 9px;
}
._aiAccountingTotal_2k6oz_781 {
border: 0 !important;
font-weight: 700;
}
._aiAccountingReminderList_2k6oz_1025 i {
width: 15px;
font-style: normal;
color: var(--ai-blue);
font-size: 11px;
}
._aiAccountingReminderList_2k6oz_1025 span {
flex: 1;
}
._aiAccountingCalls_2k6oz_1083 > div {
display: flex;
align-items: flex-start;
gap: 7px;
padding: 7px 0;
border-bottom: 1px solid #f0f2f7;
}
._aiAccountingCalls_2k6oz_1083 > div:last-child {
border: 0;
}
._aiAccountingCalls_2k6oz_1083 > div > svg {
background: #eaf1ff;
color: var(--ai-blue);
padding: 5px;
width: 23px;
height: 23px;
border-radius: 50%;
}
._aiAccountingCalls_2k6oz_1083 span {
flex: 1;
min-width: 0;
}
._aiAccountingCalls_2k6oz_1083 span b,
._aiAccountingCalls_2k6oz_1083 span small,
._aiAccountingCalls_2k6oz_1083 em,
._aiAccountingCalls_2k6oz_1083 em i {
display: block;
}
._aiAccountingCalls_2k6oz_1083 span b {
font-size: 9px;
}
._aiAccountingCalls_2k6oz_1083 span small {
font-size: 8px;
color: #71809b;
margin-top: 2px;
}
._aiAccountingCalls_2k6oz_1083 em {
text-align: right;
color: #71809b;
font-style: normal;
font-size: 7px;
white-space: nowrap;
}
._aiAccountingCalls_2k6oz_1083 em i {
color: #0bad61;
background: #e3f8eb;
margin-top: 3px;
padding: 2px 4px;
font-style: normal;
font-size: 7px;
border-radius: 2px;
}
._aiAccountingCalls_2k6oz_1083 em i._aiAccountingNoResponse_2k6oz_1187 {
color: #e23532;
background: #ffebed;
}
._aiAccountingDocumentsSection_2k6oz_625 {
width: 100%;
max-width: 100%;
min-width: 0;
margin-top: 10px;
overflow: hidden;
}
._aiAccountingDocumentsHeader_2k6oz_41 {
height: 35px;
padding: 0 12px;
border-bottom: 1px solid var(--ai-line);
}
._aiAccountingDocumentsHeader_2k6oz_41 h2 {
font-size: 11px;
flex: 1;
margin: 0;
}
._aiAccountingTabs_2k6oz_43 {
gap: 19px;
height: 100%;
}
._aiAccountingTabs_2k6oz_43 button {
border: 0;
height: 100%;
background: transparent;
color: #63708c;
font: 500 9px inherit;
position: relative;
cursor: pointer;
}
._aiAccountingTabs_2k6oz_43 button._aiAccountingActiveTab_2k6oz_1255 {
color: var(--ai-blue);
font-weight: 700;
}
._aiAccountingTabs_2k6oz_43 button._aiAccountingActiveTab_2k6oz_1255::after {
content: "";
position: absolute;
height: 2px;
background: var(--ai-blue);
bottom: 0;
left: 0;
right: 0;
}
._aiAccountingReusableTable_2k6oz_1281 {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
}
._aiAccountingReusableTable_2k6oz_1281 .MuiPaper-root {
width: 100% !important;
max-width: 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* .aiAccountingReusableTable :global(.MuiToolbar-root) {
min-height: 38px !important;
padding: 3px 10px !important;
} */
/* .aiAccountingReusableTable :global(.tableHeading) {
display: none;
} */
._aiAccountingReusableTable_2k6oz_1281 .MuiTableContainer-root {
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
overflow-x: auto !important;
}
._aiAccountingReusableTable_2k6oz_1281 .MuiTableCell-root {
padding: 6px 7px !important;
font-size: 10px !important;
white-space: nowrap;
}
._aiAccountingReusableTable_2k6oz_1281 .MuiTableHead-root .MuiTableCell-root {
font-size: 8px !important;
color: #64718b !important;
}
._aiAccountingReusableTable_2k6oz_1281 .MuiTableFooter-root .MuiTableCell-root {
padding: 3px 7px !important;
}
._aiAccountingReusableTable_2k6oz_1281 .MuiTablePagination-toolbar {
min-height: 28px !important;
}
._aiAccountingReusableTable_2k6oz_1281 .MuiTablePagination-selectLabel,
._aiAccountingReusableTable_2k6oz_1281 .MuiTablePagination-input {
display: none !important;
}
.aiAccountingDocType,
.aiAccountingStatus,
.aiAccountingReminder {
display: inline-block;
border-radius: 3px;
padding: 2px 5px;
font-size: 8px;
font-weight: 700;
line-height: 1.1;
}
.aiAccountingInvoice {
background: #e9f0ff;
color: #1556ef;
}
.aiAccountingQuotation {
background: #fff0dc;
color: #f17800;
}
.aiAccountingDelivery,
.aiAccountingCompleted {
background: #dff8ea;
color: #08a75a;
}
.aiAccountingSent {
background: #e8f0ff;
color: #1556ef;
}
.aiAccountingOverdue {
background: #ffe9ed;
color: #e23532;
}
.aiAccountingDraft {
background: #edf0f5;
color: #6d778e;
}
.aiAccountingBalance {
color: #f0323d;
}
.aiAccountingDueToday {
background: #fff0dc;
color: #f17800;
}
.aiAccountingMoreButton {
border: 0;
color: #45516c;
background: transparent;
cursor: pointer;
padding: 0;
font-size: 15px;
}
._aiAccountingStatCard_2k6oz_435,
._aiAccountingMiniStats_2k6oz_39 article {
position: relative;
overflow: hidden;
transition:
transform 0.24s ease,
box-shadow 0.24s ease,
border-color 0.24s ease;
}
._aiAccountingStatCard_2k6oz_435::after,
._aiAccountingMiniStats_2k6oz_39 article::after {
content: "";
position: absolute;
inset: 0 auto 0 -65%;
width: 42%;
pointer-events: none;
background: linear-gradient(
105deg,
transparent 18%,
rgba(21, 86, 239, 0.07) 50%,
transparent 82%
);
transform: skewX(-18deg);
}
._aiAccountingStatCard_2k6oz_435:hover,
._aiAccountingMiniStats_2k6oz_39 article:hover {
z-index: 1;
transform: translateY(-4px);
border-color: rgba(21, 86, 239, 0.28);
box-shadow: 0 10px 22px rgba(31, 62, 125, 0.12);
}
._aiAccountingStatCard_2k6oz_435:hover::after,
._aiAccountingMiniStats_2k6oz_39 article:hover::after {
animation: _aiAccountingCardSweep_2k6oz_1 0.65s ease-out;
}
._aiAccountingStatCard_2k6oz_435:hover ._aiAccountingIconBox_2k6oz_459,
._aiAccountingMiniStats_2k6oz_39 article:hover > svg {
animation: _aiAccountingIconPop_2k6oz_1 0.42s ease-out;
}
@keyframes _aiAccountingCardSweep_2k6oz_1 {
from {
left: -65%;
}
to {
left: 130%;
}
}
@keyframes _aiAccountingIconPop_2k6oz_1 {
50% {
transform: translateY(-3px) scale(1.1) rotate(-7deg);
}
100% {
transform: translateY(0) scale(1) rotate(0);
}
}
@media (max-width: 1180px) {
._aiAccountingStatGrid_2k6oz_33 {
flex-wrap: wrap;
}
._aiAccountingStatCard_2k6oz_435 {
flex-basis: 30%;
}
._aiAccountingSideColumn_2k6oz_989 {
width: 250px;
}
._aiAccountingMiniStats_2k6oz_39 {
flex-wrap: wrap;
}
._aiAccountingMiniStats_2k6oz_39 article {
flex-basis: 30%;
}
._aiAccountingCharts_2k6oz_37 {
flex-wrap: wrap;
}
._aiAccountingTrend_2k6oz_619,
._aiAccountingDistribution_2k6oz_621 {
min-width: 300px;
}
}
@media (max-width: 900px) {
._aiAccountingHeader_2k6oz_29 {
align-items: flex-start;
flex-direction: column;
}
._aiAccountingHeaderActions_2k6oz_31 {
flex-wrap: wrap;
}
._aiAccountingMainGrid_2k6oz_35 {
flex-direction: column;
}
._aiAccountingSideColumn_2k6oz_989 {
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
._aiAccountingSideColumn_2k6oz_989 > :last-child {
grid-column: span 2;
}
._aiAccountingTabs_2k6oz_43 {
overflow-x: auto;
gap: 12px;
}
._aiAccountingReusableTable_2k6oz_1281 {
overflow-x: auto;
}
}
@media (max-width: 620px) {
._aiAccountingDashboard_2k6oz_1 {
padding: 12px;
}
._aiAccountingStatCard_2k6oz_435 {
flex-basis: 100%;
}
._aiAccountingSideColumn_2k6oz_989 {
display: grid;
grid-template-columns: 1fr;
}
._aiAccountingSideColumn_2k6oz_989 > :last-child {
grid-column: auto;
}
._aiAccountingTrend_2k6oz_619,
._aiAccountingDistribution_2k6oz_621 {
min-width: 100%;
}
._aiAccountingDonutContent_2k6oz_811 {
justify-content: flex-start;
}
._aiAccountingTabs_2k6oz_43 {
justify-content: flex-start;
}
._aiAccountingDocumentsHeader_2k6oz_41 {
align-items: stretch;
flex-direction: column;
height: auto;
padding-top: 10px;
}
._aiAccountingDocumentsHeader_2k6oz_41 h2 {
flex: auto;
}
._aiAccountingTabs_2k6oz_43 {
height: 30px;
}
._aiAccountingControl_2k6oz_89 {
font-size: 9px;
}
}
._aiAccountingMuiLineChart_2k6oz_1763 {
width: 100%;
margin-top: 2px;
}
._aiAccountingMuiLineChart_2k6oz_1763 .MuiChartsGrid-line {
stroke: #edf0f6 !important;
}
._aiAccountingMuiLineChart_2k6oz_1763 .MuiMarkElement-root {
stroke-width: 0 !important;
}
._aiAccountingMuiLineChart_2k6oz_1763 .MuiLineElement-root {
stroke-width: 2px !important;
}
._aiAccountingMuiPieWrap_2k6oz_1789 {
position: relative;
width: 148px;
height: 148px;
flex: 0 0 148px;
}
._aiAccountingMuiPieChart_2k6oz_1801 {
position: absolute;
inset: 0;
}
._aiAccountingMuiPieWrap_2k6oz_1789 > strong {
position: absolute;
inset: 0;
display: grid;
place-content: center;
text-align: center;
pointer-events: none;
font-size: 19px;
}
._aiAccountingMuiPieWrap_2k6oz_1789 > strong small {
display: block;
color: var(--ai-muted);
font-size: 8px;
}
@media (max-width: 900px) {
._aiAccountingHeaderActions_2k6oz_31 {
width: 100%;
}
}
@media (max-width: 620px) {
._aiAccountingHeader_2k6oz_29 h1 {
font-size: 16px;
}
._aiAccountingHeaderActions_2k6oz_31 {
gap: 6px;
}
._aiAccountingControl_2k6oz_89,
._aiAccountingCreateButton_2k6oz_95 {
padding: 0 9px;
}
._aiAccountingMiniStats_2k6oz_39 article {
flex-basis: 50%;
}
._aiReportsAskCard_2k6oz_261 {
padding: 10px;
}
._aiReportsAskForm_2k6oz_283 {
align-items: stretch;
flex-direction: column;
gap: 7px;
}
._aiReportsPromptField_2k6oz_293,
._aiReportsGenerateButton_2k6oz_357 {
width: 100%;
}
._aiReportsExamples_2k6oz_385 {
gap: 5px;
}
}
._invoicePage_ur72a_1 {
background: #f5f7fb;
min-height: 100vh;
padding: 20px;
}
@media (max-width: 991px) {
._invoicePage_ur72a_1 {
padding: 12px;
}
}
/* Invoice header start */
._header_ur72a_27 {
margin-bottom: 18px;
}
._invoiceTitle_ur72a_35 {
font-size: 20px;
font-weight: 700;
margin: 0;
color: #1f2937;
}
._sentBadge_ur72a_49 {
background: #dcfce7;
color: #15803d;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
._subTitle_ur72a_67 {
color: #6b7280;
font-size: 13px;
margin-top: 6px;
}
._actionBtn_ur72a_79 {
border: 1px solid #e5e7eb;
background: #fff;
height: 34px;
padding: 0 12px;
border-radius: 7px;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
cursor: pointer;
}
._actionBtn_ur72a_79:hover {
background: #f8fafc;
}
._editInvoiceBtn_ur72a_113 {
border: 1px solid #1556ef;
background: #1556ef;
color: #fff;
height: 34px;
padding: 0 12px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
._editInvoiceBtn_ur72a_113:hover {
background: #0f46c8;
border-color: #0f46c8;
}
._summaryCard_ur72a_153 {
background: #fff;
border-radius: 14px;
padding: 22px;
border: 1px solid #e5e7eb;
margin-bottom: 20px;
}
._customerBox_ur72a_169 {
display: flex;
gap: 15px;
}
._contactRow_ur72a_179 {
font-size: 13px;
color: #374151;
margin-bottom: 6px;
}
._infoBox_ur72a_191 label {
display: block;
font-size: 12px;
color: #6b7280;
margin-bottom: 8px;
}
._infoBox_ur72a_191 h5 {
margin: 0;
font-size: 15px !important;
font-weight: 700;
color: #111827;
}
._redText_ur72a_219 {
color: #dc2626 !important;
font-size: 15px !important;
}
._statusWrapper_ur72a_227 {
display: flex;
flex-direction: column;
gap: 18px;
height: 100%;
}
._statusWrapper_ur72a_227 ._infoBox_ur72a_191 {
margin: 0;
}
._overdueText_ur72a_249 {
display: block;
margin-top: 8px;
color: #dc2626;
font-size: 12px;
font-weight: 600;
}
._customerSection_ur72a_263 {
display: flex;
flex-direction: column;
}
._customerHeader_ur72a_273 {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
._companyLogo_ur72a_287 {
width: 52px;
height: 52px;
border-radius: 10px;
background: #eef4ff;
color: #1456ef;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
flex-shrink: 0;
}
._companyName_ur72a_313 {
margin: 0;
font-size: 15px;
font-weight: 600;
}
._companySince_ur72a_325 {
margin: 3px 0 0;
font-size: 12px;
color: #64748b;
}
/* Contact starts from left edge */
._contactInfo_ur72a_339 {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 12px;
}
._contactItem_ur72a_353 {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #64748b;
}
._crmLink_ur72a_369 {
display: inline-flex;
align-items: center;
gap: 4px;
color: #1456ef;
font-size: 13px;
font-weight: 500;
text-decoration: none;
}
._sumaryborder_ur72a_387 {
border-right: 1px solid rgb(243, 243, 243);
}
._overdueBadge_ur72a_395 {
background: #fee2e2;
color: #dc2626;
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
display: inline-block;
}
._pendingBadge_ur72a_415 {
background: #fef3c7;
color: #d97706;
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
display: inline-block;
}
@media (max-width: 991px) {
._summaryCard_ur72a_153 ._row_ur72a_437 > div {
margin-bottom: 20px;
}
._actionBtn_ur72a_79,
._editInvoiceBtn_ur72a_113 {
width: 100%;
justify-content: center;
}
._invoiceTitle_ur72a_35 {
font-size: 22px;
}
}
/* invoice header end */
/* invoice content start */
._tabContainer_ur72a_471 {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
background: #f8f8f8 !important;
border-bottom: 1px solid #e9edf5;
}
._tabButton_ur72a_489 {
display: flex;
align-items: center;
gap: 6px;
padding: 14px 16px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: #64748b;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
}
._tabButton_ur72a_489:hover {
color: #1456ef;
}
._activeTab_ur72a_525 {
color: #1456ef !important;
border-bottom: 2px solid #1456ef;
background-color: white;
}
._activeTab_ur72a_525 svg {
color: #1456ef;
}
._card_ur72a_545 {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 20px;
height: 95%;
}
._cardTitle_ur72a_561 {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
}
._card_ur72a_545 label {
color: #6b7280;
font-size: 13px;
display: block;
margin-bottom: 4px;
}
._card_ur72a_545 p {
margin: 0;
font-weight: 500;
}
._bold_ur72a_597 {
font-weight: 700;
}
._table_ur72a_605 th {
font-size: 14px;
color: #6b7280;
}
._table_ur72a_605 td {
font-size: 14px;
vertical-align: middle;
}
._detailItem_ur72a_623 {
margin-bottom: 10px;
}
._detailItem_ur72a_623 label {
display: block;
font-size: 14px;
color: #667085;
margin-bottom: 6px;
}
._detailItem_ur72a_623 p {
margin: 0;
font-size: 12px !important;
font-weight: 700;
color: #101828;
}
._amountRow_ur72a_659 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
._amountRow_ur72a_659 span {
color: #667085;
font-size: 13px !important;
}
._amountRow_ur72a_659 strong {
font-size: 12px !important;
font-weight: 700;
color: #101828;
}
._divider_ur72a_695 {
margin: 18px 0;
border-color: #919191;
}
._infoGrid_ur72a_703 {
display: flex;
flex-direction: column;
gap: 14px;
}
._infoRow_ur72a_715 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
._infoRow_ur72a_715 span:first-child {
color: #667085;
font-size: 13px;
font-weight: 500;
}
._infoRow_ur72a_715 strong {
font-size: 13px;
font-weight: 600;
color: #1d2939;
text-align: right;
}
._successBadge_ur72a_755 {
background: #dcfce7;
color: #16a34a;
padding: 3px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
._activeBadge_ur72a_773 {
background: #dcfce7;
color: #16a34a;
padding: 3px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
._stepBadge_ur72a_791 {
background: #dbeafe;
color: #2563eb;
padding: 3px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
@media (max-width: 768px) {
._infoRow_ur72a_715 {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
._infoRow_ur72a_715 strong,
._successBadge_ur72a_755,
._activeBadge_ur72a_773,
._stepBadge_ur72a_791 {
text-align: left;
}
}
/* end */
/* payment start */
._paymentWrapper_ur72a_843 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
._chartContainer_ur72a_857 {
width: 160px;
height: 160px;
position: relative;
cursor: pointer;
}
._chartCenter_ur72a_871 {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
pointer-events: none;
}
._currency_ur72a_891 {
font-size: 13px;
color: #6b7280;
}
._chartCenter_ur72a_871 h3 {
margin: 4px 0;
font-size: 28px;
font-weight: 700;
color: #111827;
}
._chartCenter_ur72a_871 p {
margin: 0;
font-size: 13px;
color: #6b7280;
}
._chartLegend_ur72a_927 {
flex: 1;
}
._legendItem_ur72a_935 {
display: flex;
align-items: center;
margin-bottom: 18px;
}
._legendDot_ur72a_947 {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 12px;
}
._legendItem_ur72a_935 h6 {
margin: 0;
font-size: 12px !important;
font-weight: 600;
}
._legendItem_ur72a_935 p {
margin: 2px 0 0;
font-size: 13px;
color: #6b7280;
}
@media (max-width: 991px) {
._paymentWrapper_ur72a_843 {
flex-direction: column;
align-items: center;
}
._chartLegend_ur72a_927 {
width: 100%;
}
}
/* end */
/* start activity timeline */
._timelineCard_ur72a_1011 {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 20px;
height: fit-content;
}
._timelineHeader_ur72a_1027 {
margin-bottom: 20px;
}
._timelineHeader_ur72a_1027 h5 {
margin: 0;
font-size: 18px;
font-weight: 600;
}
._timelineItem_ur72a_1047 {
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
}
._timelineLeft_ur72a_1061 {
width: 38px;
min-width: 38px;
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}
._timelineIcon_ur72a_1079 {
width: 38px;
height: 38px;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
z-index: 2;
}
._timelineLine_ur72a_1103 {
width: 2px;
background: #e5e7eb;
height: 45px;
}
._timelineSticky_ur72a_1113 {
position: sticky;
top: 20px;
}
._timelineContent_ur72a_1123 {
padding-bottom: 24px;
}
._timelineContent_ur72a_1123 h6 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #111827;
}
._timelineContent_ur72a_1123 p {
margin: 6px 0 0;
font-size: 13px;
color: #6b7280;
}
._pauseWorkflowBtn_ur72a_1157 {
width: 100%;
margin-top: 10px;
height: 45px;
border: none;
border-radius: 10px;
background: #ef4444;
color: #fff;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
cursor: pointer;
transition: 0.3s;
}
._pauseWorkflowBtn_ur72a_1157:hover {
background: #dc2626;
}
@media (max-width: 991px) {
._timelineCard_ur72a_1011 {
margin-top: 20px;
}
}
/* Promise Card */
._promiseCard_ur72a_1213 {
flex: 1;
display: flex;
align-items: flex-start;
gap: 10px;
background: #fff8ef;
border: 1px solid #fde7c7;
border-radius: 8px;
padding: 12px;
margin-bottom: 20px;
width: calc(100% - 54px);
}
._promiseCard_ur72a_1213 svg {
color: #c0841a;
margin-top: 2px;
}
._promiseTitle_ur72a_1249 {
font-size: 12px;
font-weight: 600;
color: #111827;
}
._promiseDate_ur72a_1261 {
margin-top: 3px;
font-size: 11px;
color: #6b7280;
}
/* Next Reminder */
._nextReminder_ur72a_1277 {
flex: 1;
width: calc(100% - 54px);
margin-bottom: 24px;
}
._clockCircle_ur72a_1287 {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid #d1d5db;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
}
._nextTitle_ur72a_1309 {
font-size: 13px;
font-weight: 600;
color: #111827;
}
._nextType_ur72a_1321 {
margin-top: 4px;
font-size: 12px;
color: #6b7280;
}
._nextTime_ur72a_1333 {
margin-top: 2px;
font-size: 12px;
color: #6b7280;
}
/* Button */
._pauseWorkflowBtn_ur72a_1157 {
width: 100%;
height: 42px;
background: #fff;
border: 1px solid #ef4444;
border-radius: 8px;
color: #ef4444;
font-size: 13px;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
transition: 0.2s ease;
}
._pauseWorkflowBtn_ur72a_1157:hover {
background: #ef4444;
color: #fff;
}
/* Responsive */
@media (max-width: 991px) {
._timelineCard_ur72a_1011 {
margin-top: 20px;
}
._timelineTitle_ur72a_1405 {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
._timelineBadge_ur72a_1417 {
margin-left: 0;
}
}
/* Badges */
._timelineBadge_ur72a_1417 {
background: #dcfce7;
color: #16a34a;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
margin-left: 6px;
}
._timelineSub_ur72a_1449 {
display: block;
margin-top: 4px;
font-size: 11px;
color: #6b7280;
}
._completedBadge_ur72a_1461 {
background: #dbeafe;
color: #2563eb;
}
._timelineDot_ur72a_1469 {
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
border: 2px solid #d1d5db;
}
._deliveredBadge_ur72a_1485 {
background: #dcfce7;
color: #16a34a;
}
._completedBadge_ur72a_1461 {
background: #dbeafe;
color: #2563eb;
}
._timelineRow_ur72a_1503 {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
}
._timelineMarker_ur72a_1517 {
width: 38px;
min-width: 38px;
display: flex;
justify-content: center;
position: relative;
}
._timelineBody_ur72a_1531 {
position: relative;
}
._timelineVerticalLine_ur72a_1539 {
position: absolute;
left: 19px;
top: 20px;
bottom: 85px;
width: 1px;
background: #e5e7eb;
}
._invoiceStatusBadge_ur72a_1557 {
padding: 4px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
display: inline-block;
}
/* Paid */
._status_PAID_ur72a_1575 {
background: #dcfce7;
color: #15803d;
}
/* Not Paid */
._status_NOT_PAID_ur72a_1587 {
background: #fee2e2;
color: #dc2626;
}
/* Draft */
._status_DRAFT_ur72a_1599 {
background: #fef3c7;
color: #92400e;
}
/* Pending */
._status_PENDING_ur72a_1611 {
background: #fef3c7;
color: #d97706;
}
._aiAccountingControl_ur72a_1621 input {
border: none;
outline: none;
background: transparent;
width: 180px;
font-size: 14px;
}
._aiAccountingDateControl_ur72a_1635 {
height: 38px;
width: 240px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #e3e8f0;
border-radius: 6px;
padding: 0 12px;
background: #fff;
}
._aiAccountingDateControl_ur72a_1635 input {
width: 170px;
border: none;
outline: none;
font-size: 13px;
}
._aiAccountingSquareButton_ur72a_1673 {
width: 38px;
height: 38px;
border: 1px solid #e3e8f0;
background: #fff;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s;
}
._aiAccountingSquareButton_ur72a_1673:hover {
background: #f3f6ff;
transform: rotate(20deg);
}
._aiAccountingHeaderRight_ur72a_1705 {
display: flex;
align-items: center;
gap: 12px;
}
._paidCircle_ur72a_1717 {
width: 120px;
height: 120px;
border-radius: 50%;
background: #fff;
color: #16a34a;
display: flex;
align-items: center;
justify-content: center;
border: 12px solid #16a34a;
}
._statusDropdown_ur72a_1739 {
position: absolute;
right: 0;
top: 45px;
width: 180px;
background: #ffffff;
border-radius: 8px;
border: 1px solid #e5e7eb;
padding: 8px;
z-index: 1000;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
._statusOption_ur72a_1765 {
width: 100%;
border: none;
background: transparent;
padding: 8px 12px;
text-align: left;
font-size: 14px;
cursor: pointer;
border-radius: 6px;
}
._statusOption_ur72a_1765:hover {
background: #f1f5f9;
}
._backButton_ur72a_1795 {
border: none;
background: transparent;
padding: 0;
display: flex;
align-items: center;
color: #17203a;
cursor: pointer;
}
._backButton_ur72a_1795:hover {
color: #2563eb;
}
._actionSelect_ur72a_1823 {
height: 34px;
min-width: 145px;
padding: 0 32px 0 12px;
border: 1px solid #e5e7eb;
border-radius: 7px;
background: #fff;
font-size: 12px;
cursor: pointer;
outline: none;
}
._actionSelect_ur72a_1823:focus {
border-color: #2563eb;
}
._actionSelect_ur72a_1823:disabled {
cursor: not-allowed;
opacity: 0.6;
}
/* Paid */
._status_PAID_ur72a_1575 {
background: #dcfce7;
color: #15803d;
}
/* Not Paid */
._status_NOT_PAID_ur72a_1587 {
background: #fee2e2;
color: #dc2626;
}
/* Partially Paid */
._status_PARTIALLY_PAID_ur72a_1891 {
background: #fef3c7;
color: #d97706;
}
/* Return */
._status_RETURN_ur72a_1903 {
background: #dbeafe;
color: #2563eb;
}
/* Void */
._status_VOID_ur72a_1915 {
background: #f3f4f6;
color: #4b5563;
}
/* Draft */
._status_DRAFT_ur72a_1599 {
background: #ede9fe;
color: #7c3aed;
}
/* Pending */
._status_PENDING_ur72a_1611 {
background: #fef3c7;
color: #d97706;
}
._crmEditBtn_ur72a_1949 {
border: none;
background: transparent;
color: #2563eb;
font-size: 13px;
padding: 0;
cursor: pointer;
}
._panel_19344_1 {
--ink: #0d1526;
--slate: #1c2942;
--line: #26334d;
--paper: #f2f5f9;
--muted: #8fa0bd;
--signal: #38e0c8;
--signal-deep: #0f9c8c;
--amber: #f5b544;
--danger: #ff6b6b;
--sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
--mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;
max-width: 640px;
margin: 0 auto;
padding: 28px;
background: var(--ink);
color: var(--paper);
border-radius: 18px;
font-family: var(--sans);
box-shadow: 0 24px 60px rgba(4, 10, 22, 0.45);
}
._mono_19344_49 { font-family: var(--mono); font-variant-numeric: tabular-nums; }
._srOnly_19344_53 {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* ---- header ---- */
._head_19344_71 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
._eyebrow_19344_75 {
margin: 0 0 4px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
._title_19344_93 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
._status_19344_97 {
flex: none;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid var(--line);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
._status_listening_19344_119, ._status_recording_19344_119 { color: var(--signal); border-color: var(--signal-deep); }
._status_processing_19344_121 { color: var(--amber); border-color: #7a5a1c; }
._status_completed_19344_123 { color: var(--paper); border-color: var(--line); }
._status_error_19344_125 { color: var(--danger); border-color: #7a2b2b; }
/* ---- fields ---- */
._field_19344_131 { margin-top: 20px; }
._fieldLabel_19344_135 {
display: block;
margin-bottom: 7px;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--muted);
}
._input_19344_151, ._textarea_19344_151, ._confirmInput_19344_151 {
width: 100%;
padding: 11px 13px;
background: var(--slate);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--paper);
font-family: var(--mono);
font-size: 13px;
}
._input_19344_151:focus-visible, ._textarea_19344_151:focus-visible, ._confirmInput_19344_151:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 1px;
}
._textarea_19344_151 { min-height: 96px; resize: vertical; font-family: var(--sans); font-size: 14px; }
._modeRow_19344_185 { display: flex; flex-wrap: wrap; gap: 7px; }
._modeChip_19344_189 {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--line);
background: transparent;
color: var(--muted);
font-size: 12px;
cursor: pointer;
}
._modeChip_19344_189:hover { color: var(--paper); }
._modeChipOn_19344_209 { background: var(--signal); border-color: var(--signal); color: var(--ink); font-weight: 600; }
/* ---- stage ---- */
._stage_19344_215 {
margin-top: 22px;
padding: 22px;
background: linear-gradient(180deg, rgba(56, 224, 200, 0.06), transparent 65%), var(--slate);
border: 1px solid var(--line);
border-radius: 14px;
text-align: center;
}
._hint_19344_233 { margin: 0 0 16px; font-size: 14px; color: var(--paper); min-height: 20px; }
._meter_19344_237 { margin-bottom: 18px; }
._meterTrack_19344_241 {
position: relative;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
overflow: hidden;
}
._meterFill_19344_257 {
height: 100%;
background: var(--muted);
border-radius: 999px;
transition: width 60ms linear;
}
._meterFillVoiced_19344_269 { background: var(--signal); }
._meterTick_19344_273 {
position: absolute;
top: -3px;
width: 2px;
height: 14px;
background: var(--amber);
}
._meterScale_19344_289 {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
._record_19344_309 {
width: 132px;
padding: 12px 0;
border-radius: 999px;
border: 1px solid var(--signal-deep);
background: transparent;
color: var(--signal);
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
._record_19344_309:hover { background: rgba(56, 224, 200, 0.1); }
._record_19344_309:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
._recordOn_19344_339 { background: var(--signal); color: var(--ink); border-color: var(--signal); }
._recordLive_19344_341 { animation: _pulse_19344_1 1.4s ease-in-out infinite; }
@keyframes _pulse_19344_1 {
0%, 100% { box-shadow: 0 0 0 0 rgba(56, 224, 200, 0.5); }
50% { box-shadow: 0 0 0 12px rgba(56, 224, 200, 0); }
}
._presetLine_19344_355 { margin: 16px 0 0; font-size: 11px; color: var(--muted); }
/* ---- error ---- */
._errorBar_19344_361 {
display: flex;
gap: 10px;
align-items: baseline;
margin-top: 16px;
padding: 11px 14px;
border-radius: 10px;
border: 1px solid #7a2b2b;
background: rgba(255, 107, 107, 0.08);
font-size: 13px;
}
._errorBar_19344_361 strong { font-family: var(--mono); font-size: 11px; color: var(--danger); }
/* ---- confirmations ---- */
._confirmZone_19344_389 { margin-top: 20px; }
._confirmLead_19344_393 { margin: 0 0 10px; font-size: 13px; color: var(--amber); }
._confirmCard_19344_397 {
padding: 14px;
margin-bottom: 10px;
border: 1px solid #7a5a1c;
border-left: 3px solid var(--amber);
border-radius: 10px;
background: rgba(245, 181, 68, 0.06);
}
._confirmHead_19344_415 { display: flex; justify-content: space-between; font-size: 11px; }
._confirmType_19344_417 { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--amber); }
._confirmScore_19344_419 { color: var(--muted); font-family: var(--mono); }
._confirmHeard_19344_421 { margin: 8px 0; font-size: 13px; color: var(--muted); }
._confirmActions_19344_423 { display: flex; gap: 8px; margin-top: 10px; }
/* ---- transcript ---- */
._transcript_19344_429 { margin-top: 20px; }
._transcriptHead_19344_433 {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 12px;
color: var(--muted);
}
._pending_19344_449 { font-family: var(--mono); color: var(--amber); }
._readout_19344_453 {
min-height: 64px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 10px 10px 0 0;
border-bottom: none;
background: var(--slate);
font-size: 15px;
line-height: 1.6;
}
._placeholder_19344_475 { color: var(--muted); }
._entity_19344_479 {
padding: 1px 3px;
border-radius: 4px;
background: rgba(56, 224, 200, 0.16);
color: var(--signal);
border-bottom: 1px solid var(--signal-deep);
}
._entity_19344_479[data-type="phone"], ._entity_19344_479[data-type="email"], ._entity_19344_479[data-type="amount"] {
background: rgba(245, 181, 68, 0.16);
color: var(--amber);
border-bottom-color: var(--amber);
}
._textarea_19344_151 { border-radius: 0 0 10px 10px; }
._debug_19344_509 { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
._pre_19344_355 {
flex-basis: 100%;
max-height: 220px;
overflow: auto;
padding: 12px;
border-radius: 8px;
background: #08101f;
border: 1px solid var(--line);
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
}
/* ---- buttons / footer ---- */
._foot_19344_541 { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
._primaryButton_19344_545 {
padding: 10px 18px;
border: none;
border-radius: 9px;
background: var(--signal);
color: var(--ink);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
._primaryButton_19344_545:disabled { opacity: 0.4; cursor: not-allowed; }
._primaryButton_19344_545:focus-visible, ._ghostButton_19344_567:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
._ghostButton_19344_567 {
padding: 10px 16px;
border: 1px solid var(--line);
border-radius: 9px;
background: transparent;
color: var(--muted);
font-size: 13px;
cursor: pointer;
}
._ghostButton_19344_567:hover { color: var(--paper); border-color: var(--muted); }
/* ---- consent ---- */
._consent_19344_595 { padding: 8px 0; }
._consentTitle_19344_597 { margin: 0 0 10px; font-size: 20px; }
._consentBody_19344_599 { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
._consentActions_19344_601 { display: flex; gap: 10px; }
@media (max-width: 520px) {
._panel_19344_1 { padding: 20px; border-radius: 14px; }
._head_19344_71 { flex-direction: column; }
._foot_19344_541 { flex-direction: column-reverse; }
._foot_19344_541 button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
._recordLive_19344_341 { animation: none; }
._meterFill_19344_257 { transition: none; }
}
._holding_19344_629 { color: var(--amber); }
._audioPlayer_19344_631 {
width: 100%;
margin-top: 16px;
padding: 12px;
border-radius: 12px;
background: transparent;
}
._audioLabel_19344_647 {
display: block;
margin-bottom: 8px;
font-size: 13px;
color: #aab6cc;
}
._audio_19344_631 {
width: 80%;
}
/* =========================================================
OVERLAY
========================================================= */
._loaderOverlay_ci6r2_9 {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.96);
overflow: hidden;
}
/* =========================================================
CARD
========================================================= */
._loaderCard_ci6r2_45 {
width: 430px;
max-width: calc(100vw - 32px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px;
background: transparent;
position: relative;
}
/* =========================================================
ROBOT SCENE
========================================================= */
._robotScene_ci6r2_87 {
width: 270px;
height: 290px;
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
margin-bottom: 12px;
}
/* =========================================================
ROBOT
========================================================= */
._robot_ci6r2_87 {
width: 150px;
height: 220px;
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
animation: _robotFloat_ci6r2_1 2.4s ease-in-out infinite;
}
/* =========================================================
ANTENNA
========================================================= */
._antenna_ci6r2_157 {
position: absolute;
width: 4px;
height: 30px;
left: 50%;
top: -28px;
transform: translateX(-50%);
background: #64748b;
border-radius: 4px;
}
._antenna_ci6r2_157 span {
position: absolute;
width: 13px;
height: 13px;
left: 50%;
top: -7px;
transform: translateX(-50%);
border-radius: 50%;
background: #2563eb;
box-shadow:
0 0 0 6px rgba(37, 99, 235, 0.08),
0 0 18px rgba(37, 99, 235, 0.35);
animation: _antennaPulse_ci6r2_1 1.5s ease-in-out infinite;
}
/* =========================================================
ROBOT HEAD
========================================================= */
._robotHead_ci6r2_241 {
width: 112px;
height: 78px;
position: absolute;
left: 50%;
top: 5px;
transform: translateX(-50%);
border: 3px solid #64748b;
border-radius: 20px;
background: #f8fafc;
box-shadow: 0 6px 15px rgba(15, 23, 42, 0.08);
}
/* Ears */
._robotEarLeft_ci6r2_283,
._robotEarRight_ci6r2_285 {
position: absolute;
width: 10px;
height: 28px;
top: 23px;
border-radius: 8px;
background: #64748b;
}
._robotEarLeft_ci6r2_283 {
left: -10px;
}
._robotEarRight_ci6r2_285 {
right: -10px;
}
/* Eyes */
._robotEyeLeft_ci6r2_331,
._robotEyeRight_ci6r2_333 {
position: absolute;
width: 14px;
height: 14px;
top: 22px;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 0 10px rgba(37, 99, 235, 0.25);
}
._robotEyeLeft_ci6r2_331 {
left: 28px;
}
._robotEyeRight_ci6r2_333 {
right: 28px;
}
/* Mouth */
._robotMouth_ci6r2_383 {
position: absolute;
left: 50%;
bottom: 15px;
transform: translateX(-50%);
display: flex;
gap: 5px;
}
._robotMouth_ci6r2_383 span {
width: 5px;
height: 5px;
border-radius: 50%;
background: #94a3b8;
}
/* =========================================================
BODY
========================================================= */
._robotBody_ci6r2_433 {
width: 98px;
height: 78px;
position: absolute;
left: 50%;
top: 91px;
transform: translateX(-50%);
border: 3px solid #64748b;
border-radius: 18px;
background: #f8fafc;
}
/* Screen */
._robotScreen_ci6r2_471 {
position: absolute;
width: 58px;
height: 39px;
left: 50%;
top: 13px;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #172a46;
color: #60a5fa;
font-size: 20px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* Screen dots */
._robotScreenDots_ci6r2_527 {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 5px;
}
._robotScreenDots_ci6r2_527 span {
width: 7px;
height: 4px;
border-radius: 4px;
background: #94a3b8;
}
/* =========================================================
ARMS
========================================================= */
._robotArmLeft_ci6r2_579,
._robotArmRight_ci6r2_581 {
width: 17px;
height: 67px;
position: absolute;
top: 92px;
border-radius: 12px;
background: #64748b;
transform-origin: top center;
}
._robotArmLeft_ci6r2_579 {
left: 7px;
transform: rotate(10deg);
animation: _leftArm_ci6r2_1 2.4s ease-in-out infinite;
}
._robotArmRight_ci6r2_581 {
right: 7px;
transform: rotate(-10deg);
animation: _rightArm_ci6r2_1 2.4s ease-in-out infinite;
}
._robotArmLeft_ci6r2_579 span,
._robotArmRight_ci6r2_581 span {
position: absolute;
width: 19px;
height: 12px;
bottom: -5px;
border-radius: 7px;
background: #475569;
}
/* =========================================================
LEGS
========================================================= */
._robotLegLeft_ci6r2_679,
._robotLegRight_ci6r2_681 {
width: 21px;
height: 45px;
position: absolute;
top: 165px;
border-radius: 7px;
background: #475569;
}
._robotLegLeft_ci6r2_679 {
left: 43px;
}
._robotLegRight_ci6r2_681 {
right: 43px;
}
/* =========================================================
GROUND
========================================================= */
._robotGround_ci6r2_731 {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 180px;
height: 6px;
display: flex;
justify-content: space-between;
}
._robotGround_ci6r2_731 span {
width: 35px;
height: 5px;
border-radius: 5px;
background: #f59e0b;
animation: _groundPulse_ci6r2_1 1.5s ease-in-out infinite;
}
._robotGround_ci6r2_731 span:nth-child(2) {
animation-delay: 0.2s;
}
._robotGround_ci6r2_731 span:nth-child(3) {
animation-delay: 0.4s;
}
/* =========================================================
DOCUMENTS
========================================================= */
._document_ci6r2_807 {
width: 42px;
height: 52px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dbe4ef;
border-radius: 7px;
background: #ffffff;
color: #2563eb;
font-size: 21px;
box-shadow: 0 7px 18px rgba(15, 23, 42, 0.12);
z-index: 5;
}
/* Document 1 */
._documentOne_ci6r2_859 {
left: 28px;
bottom: 25px;
animation: _documentUploadOne_ci6r2_1 2.5s ease-in-out infinite;
}
/* Document 2 */
._documentTwo_ci6r2_877 {
right: 28px;
bottom: 30px;
animation: _documentUploadTwo_ci6r2_1 2.5s ease-in-out infinite;
animation-delay: 0.7s;
}
/* Document 3 */
._documentThree_ci6r2_899 {
left: 50%;
bottom: 10px;
transform: translateX(-50%);
animation: _documentUploadThree_ci6r2_1 2.5s ease-in-out infinite;
animation-delay: 1.3s;
}
/* =========================================================
UPLOAD ICON
========================================================= */
._uploadArrow_ci6r2_929 {
position: absolute;
left: 50%;
top: 34px;
transform: translateX(-50%);
color: #2563eb;
font-size: 25px;
opacity: 0;
z-index: 4;
animation: _uploadArrow_ci6r2_929 2.5s ease-in-out infinite;
}
/* =========================================================
TEXT
========================================================= */
._loaderCard_ci6r2_45 h2 {
margin: 5px 0 8px;
color: #0f356e;
font-size: 21px;
font-weight: 700;
line-height: 1.3;
}
._loaderCard_ci6r2_45 p {
max-width: 350px;
margin: 0;
color: #64748b;
font-size: 12px;
line-height: 1.6;
}
/* =========================================================
PROGRESS
========================================================= */
._progressWrapper_ci6r2_1027 {
width: 280px;
margin-top: 22px;
}
._progressTrack_ci6r2_1039 {
width: 100%;
height: 5px;
overflow: hidden;
border-radius: 10px;
background: #e8eef6;
}
._progressBar_ci6r2_1061 {
width: 35%;
height: 100%;
border-radius: inherit;
background: #2563eb;
animation: _progressMove_ci6r2_1 1.7s ease-in-out infinite;
}
/* =========================================================
STATUS
========================================================= */
._status_ci6r2_1091 {
display: flex;
align-items: center;
gap: 7px;
margin-top: 14px;
color: #64748b;
font-size: 11px;
}
._statusDot_ci6r2_1115 {
width: 7px;
height: 7px;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
animation: _statusPulse_ci6r2_1 1.2s ease-in-out infinite;
}
/* =========================================================
LOADING DOTS
========================================================= */
._loadingDots_ci6r2_1149 {
display: flex;
gap: 5px;
margin-top: 11px;
}
._loadingDots_ci6r2_1149 span {
width: 5px;
height: 5px;
border-radius: 50%;
background: #94a3b8;
animation: _loadingDot_ci6r2_1149 1.2s ease-in-out infinite;
}
._loadingDots_ci6r2_1149 span:nth-child(2) {
animation-delay: 0.15s;
}
._loadingDots_ci6r2_1149 span:nth-child(3) {
animation-delay: 0.3s;
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes _robotFloat_ci6r2_1 {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-5px);
}
}
@keyframes _antennaPulse_ci6r2_1 {
0%,
100% {
transform: translateX(-50%) scale(1);
}
50% {
transform: translateX(-50%) scale(1.2);
}
}
@keyframes _leftArm_ci6r2_1 {
0%,
100% {
transform: rotate(10deg);
}
50% {
transform: rotate(17deg);
}
}
@keyframes _rightArm_ci6r2_1 {
0%,
100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(-17deg);
}
}
@keyframes _groundPulse_ci6r2_1 {
0%,
100% {
opacity: 0.5;
transform: scaleX(0.8);
}
50% {
opacity: 1;
transform: scaleX(1);
}
}
/* =========================================================
DOCUMENT UPLOAD ANIMATIONS
========================================================= */
@keyframes _documentUploadOne_ci6r2_1 {
0% {
opacity: 0;
transform: translateY(30px) rotate(-12deg) scale(0.8);
}
15% {
opacity: 1;
}
65% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(65px, -155px) rotate(5deg) scale(0.65);
}
}
@keyframes _documentUploadTwo_ci6r2_1 {
0% {
opacity: 0;
transform: translateY(30px) rotate(12deg) scale(0.8);
}
15% {
opacity: 1;
}
65% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-65px, -155px) rotate(-5deg) scale(0.65);
}
}
@keyframes _documentUploadThree_ci6r2_1 {
0% {
opacity: 0;
transform: translate(-50%, 40px) rotate(0deg) scale(0.8);
}
15% {
opacity: 1;
}
65% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-50%, -165px) rotate(3deg) scale(0.65);
}
}
@keyframes _uploadArrow_ci6r2_929 {
0% {
opacity: 0;
transform: translate(-50%, 20px);
}
25% {
opacity: 0.8;
}
60% {
opacity: 0.8;
}
100% {
opacity: 0;
transform: translate(-50%, -30px);
}
}
/* =========================================================
PROGRESS ANIMATION
========================================================= */
@keyframes _progressMove_ci6r2_1 {
0% {
transform: translateX(-110%);
}
100% {
transform: translateX(310%);
}
}
@keyframes _statusPulse_ci6r2_1 {
0%,
100% {
opacity: 0.5;
transform: scale(0.85);
}
50% {
opacity: 1;
transform: scale(1);
}
}
@keyframes _loadingDot_ci6r2_1149 {
0%,
100% {
opacity: 0.3;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(-3px);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
._loaderCard_ci6r2_45 {
width: 100%;
padding: 20px 16px;
}
._robotScene_ci6r2_87 {
transform: scale(0.9);
margin-top: -8px;
margin-bottom: 0;
}
._loaderCard_ci6r2_45 h2 {
font-size: 18px;
}
._loaderCard_ci6r2_45 p {
font-size: 11px;
}
._progressWrapper_ci6r2_1027 {
width: 240px;
}
}
/* =========================================================
ANALYZE MODE
========================================================= */
._analyzingScene_ci6r2_1637 ._document_ci6r2_807 {
animation-duration: 2.1s;
}
._analyzingScene_ci6r2_1637 ._documentOne_ci6r2_859 {
animation-delay: 0s;
}
._analyzingScene_ci6r2_1637 ._documentTwo_ci6r2_877 {
animation-delay: 0.45s;
}
._analyzingScene_ci6r2_1637 ._documentThree_ci6r2_899 {
animation-delay: 0.9s;
}
._analyzingScene_ci6r2_1637 ._uploadArrow_ci6r2_929 {
animation-name: _analyzeArrow_ci6r2_1;
}
._analyzingProgress_ci6r2_1677 {
animation-duration: 1.25s;
}
/* =========================================================
ANALYZE ICON ANIMATION
========================================================= */
@keyframes _analyzeArrow_ci6r2_1 {
0% {
opacity: 0;
transform: translate(-50%, 18px) scale(0.8);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
transform: translate(-50%, -5px) scale(1);
}
75% {
opacity: 0.8;
}
100% {
opacity: 0;
transform: translate(-50%, -30px) scale(1.1);
}
}
._page_1it8u_1 {
min-height: 100%;
padding: 10px;
box-sizing: border-box;
background: #f8fbff;
color: #122254;
}
/* =========================================================
BREADCRUMB
========================================================= */
._breadcrumb_1it8u_37 {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 10px;
color: #6077a5;
font-size: 10px !important;
}
._breadcrumb_1it8u_37 button {
border: 0;
padding: 0;
background: transparent;
color: #6077a5;
font-size: 10px !important;
cursor: pointer;
}
._breadcrumb_1it8u_37 span {
border: 0;
padding: 0;
background: transparent;
color: #6077a5;
font-size: 10px !important;
cursor: pointer;
}
._breadcrumb_1it8u_37 button:hover {
color: #146de7;
}
._breadcrumb_1it8u_37 svg {
width: 13px;
height: 13px;
color: #7c8eae;
}
._breadcrumb_1it8u_37 span {
color: #5570a2;
}
/* =========================================================
PAGE HEADER
========================================================= */
._pageHeader_1it8u_163 {
margin-bottom: 10px;
}
._pageHeader_1it8u_163 h1 {
margin: 0;
color: #111f55;
font-size: 18px;
line-height: 1.2;
font-weight: 700;
}
._pageHeader_1it8u_163 p {
margin: 5px 0 0;
color: #6b80ad;
font-size: 11px;
}
/* =========================================================
MAIN GRID
========================================================= */
._mainGrid_1it8u_223 {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(330px, 1.03fr);
gap: 12px;
align-items: start;
}
._leftColumn_1it8u_243,
._rightColumn_1it8u_245 {
display: flex;
flex-direction: column;
gap: 12px;
}
/* =========================================================
CARD
========================================================= */
._card_1it8u_273 {
border: 1px solid #dbe7f7;
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 2px rgba(30, 64, 120, 0.02);
padding: 15px 18px;
}
._cardHeader_1it8u_297 {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 13px;
}
._cardHeaderIcon_1it8u_317 {
width: 25px;
height: 25px;
color: #0f70ee;
display: flex;
align-items: center;
justify-content: center;
}
._cardHeaderIcon_1it8u_317 svg {
width: 22px;
height: 22px;
}
._cardHeader_1it8u_297 h2 {
margin: 0;
color: #102154;
font-size: 15px;
font-weight: 700;
}
/* =========================================================
TENDER DETAILS
========================================================= */
._detailsGrid_1it8u_389 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px 24px;
}
._formGroup_1it8u_405 {
position: relative;
}
._formGroup_1it8u_405 label {
display: block;
margin-bottom: 6px;
color: #21376b;
font-size: 10px;
font-weight: 600;
}
._formGroup_1it8u_405 label span {
color: #e73535;
}
._formGroup_1it8u_405 input,
._formGroup_1it8u_405 textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #cfdcf0;
border-radius: 6px;
outline: none;
background: #fff;
color: #20366c;
font-family: inherit;
font-size: 11px;
transition: 0.15s ease;
}
._formGroup_1it8u_405 input {
height: 39px;
padding: 0 10px;
}
._formGroup_1it8u_405 textarea {
min-height: 90px;
padding: 9px 10px;
resize: vertical;
line-height: 1.5;
}
._formGroup_1it8u_405 input:focus,
._formGroup_1it8u_405 textarea:focus {
border-color: #3282ef;
box-shadow: 0 0 0 2px rgba(50, 130, 239, 0.08);
}
._inputWithIcon_1it8u_537 {
position: relative;
}
._inputWithIcon_1it8u_537 > svg {
position: absolute;
z-index: 1;
left: 10px;
top: 50%;
width: 16px;
height: 16px;
color: #3d66a1;
transform: translateY(-50%);
pointer-events: none;
}
._inputWithIcon_1it8u_537 input {
padding-left: 34px;
}
/* =========================================================
INSTRUCTIONS
========================================================= */
._characterCount_1it8u_605 {
margin-top: 4px;
text-align: right;
color: #7487aa;
font-size: 9px;
}
._suggestionRow_1it8u_625 {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 9px;
}
._suggestion_1it8u_625 {
height: 31px;
padding: 0 11px;
border: 0;
border-radius: 18px;
background: #f0f7ff;
color: #315a96;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 9px;
cursor: pointer;
}
._suggestion_1it8u_625 svg {
width: 14px;
height: 14px;
color: #096fee;
}
._suggestion_1it8u_625:hover {
background: #e5f1ff;
}
/* =========================================================
UPLOAD
========================================================= */
._hiddenInput_1it8u_729 {
display: none;
}
._dropZone_1it8u_737 {
min-height: 116px;
box-sizing: border-box;
border: 1px dashed #8bbdff;
border-radius: 7px;
background: #fafdff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.15s ease;
}
._dropZone_1it8u_737:hover {
background: #f3f9ff;
border-color: #3489f4;
}
._uploadIcon_1it8u_797 {
width: 36px;
height: 36px;
color: #1774ec;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
}
._uploadIcon_1it8u_797 svg {
width: 35px;
height: 35px;
}
._dropZone_1it8u_737 strong {
color: #1d3670;
font-size: 10px;
font-weight: 700;
}
._dropZone_1it8u_737 strong span {
color: #126fe7;
}
._dropZone_1it8u_737 small {
margin-top: 6px;
color: #7185ab;
font-size: 9px;
}
/* =========================================================
FILE LIST
========================================================= */
._fileList_1it8u_893 {
margin-top: 9px;
border: 1px solid #dce7f4;
border-radius: 7px;
overflow: hidden;
}
._fileRow_1it8u_913 {
min-height: 42px;
padding: 5px 10px;
box-sizing: border-box;
display: grid;
grid-template-columns: 34px minmax(150px, 1fr) 65px 90px 75px 25px;
align-items: center;
gap: 8px;
border-bottom: 1px solid #edf2f8;
}
._fileRow_1it8u_913:last-child {
border-bottom: 0;
}
._fileTypeIcon_1it8u_957 {
width: 28px;
height: 28px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 7px;
font-weight: 800;
}
._pdfFile_1it8u_993 {
color: #fff;
background: #e83232;
}
._imageFile_1it8u_1005 {
color: #fff;
background: #16aa70;
}
._fileName_1it8u_1017 {
min-width: 0;
}
._fileName_1it8u_1017 strong {
display: block;
overflow: hidden;
color: #19336b;
font-size: 10px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
._fileSize_1it8u_1057 {
color: #7184aa;
font-size: 9px;
}
._categoryBadge_1it8u_1069 {
justify-self: start;
min-height: 23px;
padding: 0 9px;
border-radius: 5px;
background: #eaf3ff;
color: #1c68c9;
display: inline-flex;
align-items: center;
font-size: 8px;
font-weight: 600;
}
._fileStatus_1it8u_1113 {
display: flex;
align-items: center;
gap: 4px;
color: #00a36e;
font-size: 9px;
font-weight: 600;
}
._fileStatus_1it8u_1113 svg {
width: 14px;
height: 14px;
}
._removeFile_1it8u_1153 {
width: 25px;
height: 25px;
border: 0;
border-radius: 5px;
background: transparent;
color: #172d61;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
._removeFile_1it8u_1153:hover {
background: #f1f5fa;
color: #dc3030;
}
._removeFile_1it8u_1153 svg {
width: 15px;
height: 15px;
}
/* =========================================================
QUICK START
========================================================= */
._quickHeader_1it8u_1233 {
display: flex;
align-items: flex-start;
gap: 10px;
}
._quickIcon_1it8u_1249 {
width: 27px;
height: 27px;
color: #0d70f1;
display: flex;
align-items: center;
justify-content: center;
}
._quickIcon_1it8u_1249 svg {
width: 25px;
height: 25px;
}
._quickHeader_1it8u_1233 h2 {
margin: 0;
color: #102154;
font-size: 15px;
}
._quickHeader_1it8u_1233 p {
margin: 4px 0 0;
color: #7286ae;
font-size: 10px;
}
/* =========================================================
AI TOGGLE
========================================================= */
._aiToggleRow_1it8u_1333 {
margin-top: 16px;
display: flex;
align-items: flex-start;
gap: 11px;
}
._toggle_1it8u_1353 {
position: relative;
width: 42px;
height: 24px;
flex: 0 0 42px;
padding: 0;
border: 0;
border-radius: 20px;
background: #c9d4e5;
cursor: pointer;
transition: 0.2s ease;
}
._toggle_1it8u_1353 span {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
transition: 0.2s ease;
}
._toggleActive_1it8u_1437 {
background: #1475ed;
}
._toggleActive_1it8u_1437 span {
left: 21px;
}
._aiToggleRow_1it8u_1333 strong {
color: #20366b;
font-size: 10px;
font-weight: 700;
}
._aiToggleRow_1it8u_1333 p {
margin: 5px 0 0;
color: #7386ab;
font-size: 9px;
line-height: 1.45;
}
._divider_1it8u_1489 {
height: 1px;
margin: 13px 0;
background: #e2eaf4;
}
._sectionTitle_1it8u_1505 {
margin: 0 0 10px;
color: #14275b;
font-size: 12px;
}
/* =========================================================
STEPS
========================================================= */
._steps_1it8u_1533 {
display: flex;
flex-direction: column;
}
._step_1it8u_1533 {
display: flex;
align-items: center;
gap: 10px;
}
._stepNumber_1it8u_1561 {
width: 35px;
height: 35px;
flex: 0 0 35px;
border-radius: 50%;
background: #e9f3ff;
color: #176de1;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
}
._step_1it8u_1533 > div:last-child {
display: flex;
flex-direction: column;
}
._step_1it8u_1533 strong {
color: #19316a;
font-size: 10px;
}
._step_1it8u_1533 span {
margin-top: 2px;
color: #778ab0;
font-size: 8px;
line-height: 1.4;
}
._stepLine_1it8u_1653 {
width: 1px;
height: 13px;
margin-left: 17px;
background: #bfd4f1;
}
/* =========================================================
EXPECTED OUTPUT
========================================================= */
._outputList_1it8u_1685 {
display: flex;
flex-direction: column;
gap: 10px;
}
._outputItem_1it8u_1701 {
display: flex;
align-items: center;
gap: 10px;
}
._outputIcon_1it8u_1717 {
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
._outputIcon_1it8u_1717 svg {
width: 18px;
height: 18px;
}
._outputGreen_1it8u_1761 {
color: #00a873;
background: #e5f8f0;
}
._outputBlue_1it8u_1773 {
color: #1475ed;
background: #e8f2ff;
}
._outputOrange_1it8u_1785 {
color: #e79500;
background: #fff1d6;
}
._outputPurple_1it8u_1797 {
color: #7847d8;
background: #f1eaff;
}
._outputItem_1it8u_1701 div:last-child {
display: flex;
flex-direction: column;
}
._outputItem_1it8u_1701 strong {
color: #1a3067;
font-size: 10px;
}
._outputItem_1it8u_1701 span {
margin-top: 2px;
color: #7789ad;
font-size: 8px;
line-height: 1.4;
}
/* =========================================================
CREATE BUTTON
========================================================= */
._createButton_1it8u_1865 {
width: 100%;
height: 39px;
margin-top: 15px;
border: 0;
border-radius: 6px;
background: #0d6ff0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
._createButton_1it8u_1865:hover {
background: #075dcc;
}
._createButton_1it8u_1865 svg {
width: 16px;
height: 16px;
}
._createHint_1it8u_1945 {
margin-top: 4px;
text-align: center;
color: #7e90b0;
font-size: 8px;
}
._secondaryActions_1it8u_1965 {
margin-top: 9px;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
}
._saveDraftButton_1it8u_1989 {
height: 34px;
border: 1px solid #bcd1ee;
border-radius: 6px;
background: #fff;
color: #19336c;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._saveDraftButton_1it8u_1989:hover {
background: #f4f8fd;
}
._saveDraftButton_1it8u_1989 svg {
width: 15px;
height: 15px;
}
._cancelButton_1it8u_2061 {
border: 0;
background: transparent;
color: #096fe9;
font-size: 10px;
cursor: pointer;
}
/* =========================================================
AFTER CREATION
========================================================= */
._afterCreation_1it8u_2097 {
margin-top: 8px;
padding: 8px;
border: 1px solid #dce8f6;
border-radius: 8px;
background: #fff;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
._afterIntro_1it8u_2133,
._afterCard_1it8u_2135 {
min-height: 45px;
padding: 7px 10px;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 9px;
border-radius: 6px;
}
._afterIntro_1it8u_2133 {
background: #f7fbff;
}
._afterIcon_1it8u_2175,
._afterCardIcon_1it8u_2177 {
width: 29px;
height: 29px;
flex: 0 0 29px;
border-radius: 6px;
background: #eaf3ff;
color: #1473e9;
display: flex;
align-items: center;
justify-content: center;
}
._afterIcon_1it8u_2175 svg,
._afterCardIcon_1it8u_2177 svg {
width: 16px;
height: 16px;
}
._afterIntro_1it8u_2133 div:last-child,
._afterCard_1it8u_2135 div:last-child {
min-width: 0;
display: flex;
flex-direction: column;
}
._afterIntro_1it8u_2133 strong,
._afterCard_1it8u_2135 strong {
color: #19326b;
font-size: 9px;
}
._afterIntro_1it8u_2133 span,
._afterCard_1it8u_2135 span {
margin-top: 2px;
color: #7789ad;
font-size: 7px;
line-height: 1.35;
}
/* =========================================================
UPLOAD TEMPLATE
========================================================= */
._templateDropZone_1it8u_2297 {
min-height: 100px;
box-sizing: border-box;
border: 1px dashed #8bbdff;
border-radius: 7px;
background: #fafdff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.15s ease;
}
._templateDropZone_1it8u_2297:hover {
background: #f3f9ff;
border-color: #3489f4;
}
._templateUploadIcon_1it8u_2357 {
width: 34px;
height: 34px;
color: #1774ec;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
}
._templateUploadIcon_1it8u_2357 svg {
width: 32px;
height: 32px;
}
._templateDropZone_1it8u_2297 strong {
color: #1d3670;
font-size: 10px;
font-weight: 700;
}
._templateDropZone_1it8u_2297 strong span {
color: #126fe7;
}
._templateDropZone_1it8u_2297 small {
margin-top: 6px;
color: #7185ab;
font-size: 9px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
._mainGrid_1it8u_223 {
grid-template-columns: 1fr;
}
._rightColumn_1it8u_245 {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
}
._afterCreation_1it8u_2097 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 760px) {
._page_1it8u_1 {
padding: 14px;
}
._pageHeader_1it8u_163 h1 {
font-size: 16px;
}
._detailsGrid_1it8u_389 {
grid-template-columns: 1fr;
}
._rightColumn_1it8u_245 {
display: flex;
}
._fileRow_1it8u_913 {
grid-template-columns: 32px minmax(100px, 1fr) 50px 25px;
}
._fileSize_1it8u_1057,
._categoryBadge_1it8u_1069 {
display: none;
}
._fileStatus_1it8u_1113 {
justify-content: flex-end;
}
._afterCreation_1it8u_2097 {
grid-template-columns: 1fr;
}
}
/* =========================================================
ROOT
========================================================= */
._documentsPage_1c2vj_9 {
--doc-blue: #2563eb;
--doc-blue-dark: #174ea6;
--doc-blue-soft: #eff6ff;
--doc-bg: #f5f7fb;
--doc-panel: #ffffff;
--doc-border: #dfe5ee;
--doc-text: #172033;
--doc-muted: #718096;
--doc-light: #94a3b8;
--doc-green: #16a34a;
--doc-green-bg: #dcfce7;
--doc-yellow: #d97706;
--doc-yellow-bg: #fef3c7;
--doc-red: #dc2626;
--doc-red-bg: #fee2e2;
width: 100%;
/*
* IMPORTANT:
* This component lives inside the Tender Command Center,
* so it cannot depend on height: 100% unless every parent
* has an explicit height.
*
* Give the Documents workspace a real viewport-based height.
*/
height: calc(100vh - 230px);
min-height: 920px;
max-height: calc(100vh - 230px);
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--doc-bg);
color: var(--doc-text);
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
box-sizing: border-box;
}
._documentsPage_1c2vj_9 *,
._documentsPage_1c2vj_9 *::before,
._documentsPage_1c2vj_9 *::after {
box-sizing: border-box;
}
._documentsPageFullscreen_1c2vj_139 {
position: fixed;
inset: 0;
z-index: 9999;
width: 100vw;
height: 100vh;
max-width: 100vw;
max-height: 100vh;
min-width: 0;
min-height: 0;
background: var(--doc-bg);
overflow: hidden;
}
/* =========================================================
ERROR
========================================================= */
._errorBanner_1c2vj_185 {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
margin: 12px 16px 0;
padding: 11px 14px;
border: 1px solid #fecaca;
border-radius: 8px;
background: #fff1f2;
color: var(--doc-red);
font-size: 13px;
}
._errorBanner_1c2vj_185 > svg {
flex: 0 0 auto;
}
._errorBanner_1c2vj_185 > span {
flex: 1;
min-width: 0;
}
._errorBanner_1c2vj_185 button {
width: 28px;
height: 28px;
flex: 0 0 28px;
border: 0;
background: transparent;
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* =========================================================
HEADER
========================================================= */
._reviewHeader_1c2vj_289 {
flex: 0 0 88px;
width: 100%;
height: 88px;
min-height: 88px;
max-height: 88px;
display: grid;
grid-template-columns:
minmax(250px, 1fr)
auto
auto;
align-items: center;
gap: 22px;
padding: 10px 20px;
background: var(--doc-panel);
border-bottom: 1px solid var(--doc-border);
overflow: hidden;
}
._reviewTitle_1c2vj_345 {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
}
._reviewTitleContent_1c2vj_363 {
min-width: 0;
}
._reviewIcon_1c2vj_371 {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: var(--doc-blue-soft);
color: var(--doc-blue);
font-size: 18px;
}
._reviewTitle_1c2vj_345 > div:last-child {
min-width: 0;
}
._documentHeaderTop_1c2vj_417 {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
._documentHeaderTop_1c2vj_417 h2 {
margin: 0;
min-width: 0;
color: var(--doc-text);
font-size: 16px;
line-height: 1.25;
font-weight: 650;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._reviewTitle_1c2vj_345 p {
margin: 3px 0 0;
color: var(--doc-muted);
font-size: 11px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._headerStatus_1c2vj_493 {
flex: 0 0 auto;
padding: 3px 8px;
border-radius: 999px;
font-size: 10px;
line-height: 1.2;
font-weight: 600;
text-transform: lowercase;
}
._reviewTitle_1c2vj_345 > div:last-child {
min-width: 0;
}
._documentHeaderTop_1c2vj_417 {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
._documentHeaderTop_1c2vj_417 h2 {
margin: 0;
min-width: 0;
font-size: 17px;
font-weight: 650;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._reviewTitle_1c2vj_345 p {
margin: 3px 0 0;
color: var(--doc-muted);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._headerStatus_1c2vj_493 {
flex: 0 0 auto;
padding: 4px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-transform: lowercase;
}
/* =========================================================
DOCUMENT HEADER CONTROLS
========================================================= */
._documentHeaderGroup_1c2vj_629 {
min-width: 0;
display: flex;
align-items: center;
gap: 14px;
padding-left: 14px;
border-left: 1px solid #e5eaf0;
}
._documentHeaderLabel_1c2vj_655 {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
._documentHeaderLabel_1c2vj_655 h3 {
margin: 0;
color: #334155;
font-size: 12px;
line-height: 1.2;
font-weight: 650;
}
._documentHeaderLabel_1c2vj_655 span {
color: var(--doc-muted);
font-size: 9px;
line-height: 1.2;
white-space: nowrap;
}
._documentHeaderFilters_1c2vj_711 {
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
padding: 2px;
border: 1px solid #e2e8f0;
border-radius: 7px;
background: #f8fafc;
}
._documentHeaderFilters_1c2vj_711 button {
flex: 0 0 auto;
height: 28px;
padding: 0 9px;
border: 0;
border-radius: 5px;
background: transparent;
color: #64748b;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease;
}
._documentHeaderFilters_1c2vj_711 button:hover {
color: var(--doc-blue);
background: #ffffff;
}
._documentHeaderFilters_1c2vj_711 button._filterActive_1c2vj_809 {
color: var(--doc-blue);
background: #ffffff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
/* =========================================================
HEADER ACTIONS
========================================================= */
._reviewActions_1c2vj_833 {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
}
._primaryButton_1c2vj_851,
._secondaryButton_1c2vj_853 {
height: 36px;
padding: 0 13px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
opacity 0.15s ease;
}
._primaryButton_1c2vj_851 {
border: 1px solid var(--doc-blue);
background: var(--doc-blue);
color: #ffffff;
}
._primaryButton_1c2vj_851:hover:not(:disabled) {
background: var(--doc-blue-dark);
border-color: var(--doc-blue-dark);
}
._secondaryButton_1c2vj_853 {
border: 1px solid var(--doc-border);
background: #ffffff;
color: #334155;
}
._secondaryButton_1c2vj_853:hover:not(:disabled) {
border-color: #b8c5d6;
background: #f8fafc;
}
._primaryButton_1c2vj_851:disabled,
._secondaryButton_1c2vj_853:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================
MAIN WORKSPACE
========================================================= */
._workspace_1c2vj_975 {
/*
* IMPORTANT:
* Consume only the remaining height after the header.
*
* height: 0 + flex: 1 prevents children from expanding
* the page vertically.
*/
flex: 1 1 0;
width: 100%;
height: 0;
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns:
370px
minmax(0, 1fr)
0px;
overflow: hidden;
background: var(--doc-bg);
}
/* =========================================================
DOCUMENT LIST
========================================================= */
._documentListPanel_1c2vj_1039 {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
border-right: 1px solid var(--doc-border);
}
/* =========================================================
SEARCH
========================================================= */
._searchBox_1c2vj_1081 {
flex: 0 0 auto;
position: relative;
margin: 12px 12px 10px;
}
._searchBox_1c2vj_1081 > svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 14px;
pointer-events: none;
}
._searchBox_1c2vj_1081 input {
width: 100%;
height: 38px;
padding: 0 12px 0 35px;
border: 1px solid #d8e0ea;
border-radius: 7px;
outline: none;
background: #ffffff;
color: var(--doc-text);
font-size: 12px;
}
._searchBox_1c2vj_1081 input::placeholder {
color: #9aa8b8;
}
._searchBox_1c2vj_1081 input:focus {
border-color: #8eb5ff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
/* =========================================================
DOCUMENT LIST SCROLL
========================================================= */
._documentList_1c2vj_1039 {
flex: 1 1 0;
width: 100%;
height: 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
._documentList_1c2vj_1039::-webkit-scrollbar {
width: 6px;
}
._documentList_1c2vj_1039::-webkit-scrollbar-track {
background: transparent;
}
._documentList_1c2vj_1039::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #cbd5e1;
}
._documentList_1c2vj_1039::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* =========================================================
DOCUMENT LIST ITEM
========================================================= */
._documentListItem_1c2vj_1269 {
position: relative;
width: 100%;
min-height: 68px;
padding: 10px 12px;
display: grid;
grid-template-columns:
36px
minmax(0, 1fr)
auto
18px;
align-items: center;
gap: 9px;
border: 0;
border-bottom: 1px solid #edf1f6;
background: #ffffff;
color: var(--doc-text);
text-align: left;
cursor: pointer;
transition:
background 0.15s ease,
box-shadow 0.15s ease;
}
._documentListItem_1c2vj_1269:hover {
background: #f8fbff;
}
._documentListItemActive_1c2vj_1351 {
background: #eff6ff;
box-shadow: inset 3px 0 0 var(--doc-blue);
}
._fileIcon_1c2vj_1363 {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: #eff6ff;
color: var(--doc-blue);
font-size: 15px;
}
._documentListInfo_1c2vj_1397 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._documentListInfo_1c2vj_1397 strong {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 12px;
font-weight: 600;
}
._documentListInfo_1c2vj_1397 span {
color: #7b8a9e;
font-size: 10px;
}
._documentListItem_1c2vj_1269 > svg:last-child {
color: #64748b;
font-size: 15px;
}
/* =========================================================
STATUS
========================================================= */
._statusBadge_1c2vj_1473,
._headerStatus_1c2vj_493,
._infoStatus_1c2vj_1477 {
font-weight: 600;
}
._statusBadge_1c2vj_1473 {
padding: 4px 8px;
border-radius: 999px;
font-size: 10px;
white-space: nowrap;
}
._statusApproved_1c2vj_1505 {
color: #15803d;
background: var(--doc-green-bg);
}
._statusPending_1c2vj_1515 {
color: #475569;
background: #f1f5f9;
}
._statusWarning_1c2vj_1525 {
color: #b45309;
background: var(--doc-yellow-bg);
}
._statusDefault_1c2vj_1535 {
color: #64748b;
background: #f1f5f9;
}
/* =========================================================
EMPTY STATE
========================================================= */
._emptyState_1c2vj_1553 {
min-height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px;
color: var(--doc-muted);
font-size: 12px;
}
/* =========================================================
DOCUMENT VIEWER
========================================================= */
._documentViewer_1c2vj_1597 {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: #eaf0f7;
}
/* =========================================================
VIEWER TOOLBAR
========================================================= */
._viewerToolbar_1c2vj_1635 {
flex: 0 0 54px;
width: 100%;
min-height: 54px;
max-height: 54px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 16px;
background: #ffffff;
border-bottom: 1px solid var(--doc-border);
z-index: 3;
}
._viewerToolbarLeft_1c2vj_1679,
._viewerToolbarCenter_1c2vj_1681,
._viewerToolbarRight_1c2vj_1683 {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
._viewerToolbarCenter_1c2vj_1681 {
justify-content: center;
}
._viewerToolbarRight_1c2vj_1683 {
justify-content: flex-end;
}
._viewerToolbar_1c2vj_1635 button {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: transparent;
color: #475569;
cursor: pointer;
}
._viewerToolbar_1c2vj_1635 button:hover:not(:disabled) {
background: #f1f5f9;
color: var(--doc-blue);
}
._viewerToolbar_1c2vj_1635 button:disabled {
opacity: 0.35;
cursor: not-allowed;
}
._viewerToolbarCenter_1c2vj_1681 span {
min-width: 48px;
text-align: center;
color: #334155;
font-size: 12px;
font-weight: 600;
}
._pageCounter_1c2vj_1803 {
display: flex;
align-items: center;
gap: 6px;
}
._pageCounter_1c2vj_1803 input {
width: 40px;
height: 34px;
padding: 0 5px;
border: 1px solid #d7e0ea;
border-radius: 6px;
background: #ffffff;
color: #1e293b;
text-align: center;
font-size: 13px;
outline: none;
}
._pageCounter_1c2vj_1803 input:focus {
border-color: var(--doc-blue);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}
._pageCounter_1c2vj_1803 span {
color: #64748b;
font-size: 12px;
}
/* =========================================================
VIEWER BODY
========================================================= */
._viewerBody_1c2vj_1889 {
flex: 1 1 0;
width: 100%;
height: 0;
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns:
minmax(0, 1fr)
156px;
overflow: hidden;
}
/* =========================================================
PAGE STAGE
========================================================= */
._pageStage_1c2vj_1933 {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
background: #e8eef6;
position: relative;
}
/* =========================================================
DOCX VIEWER
========================================================= */
._docxViewerRoot_1c2vj_1969 {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
background: #eef3f9;
}
._docxPageScroller_1c2vj_1987 {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 28px 20px 40px;
box-sizing: border-box;
scrollbar-width: thin;
}
/*
* Important:
* The page wrapper is centered by flexbox.
* Do NOT let it create a horizontal scrollbar.
*/
._docxScaleWrapper_1c2vj_2037 {
position: relative;
flex: 0 0 auto;
width: 794px;
min-width: 794px;
margin: 0 auto;
display: block;
transform-origin: top center;
/*
* The transform visually scales the A4 page,
* while overflow-x:hidden on the parent prevents
* the unscaled layout width from creating a scrollbar.
*/
}
/* =========================================================
A4 DOCUMENT PAGE
========================================================= */
._apiDocumentPage_1c2vj_2087 {
width: 794px;
min-width: 794px;
min-height: 1123px;
margin: 0;
background: #ffffff;
box-sizing: border-box;
padding: 52px 58px 48px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.1);
color: #334155;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
/* =========================================================
PAGE CONTENT
========================================================= */
._apiDocumentHeader_1c2vj_2155 {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding-bottom: 18px;
margin-bottom: 28px;
border-bottom: 1px solid #e2e8f0;
}
._apiDocumentTitle_1c2vj_2183 {
font-size: 18px;
line-height: 1.35;
font-weight: 700;
color: #1e293b;
}
._apiDocumentPageNumber_1c2vj_2199 {
flex-shrink: 0;
font-size: 11px;
line-height: 1.4;
color: #94a3b8;
white-space: nowrap;
}
._apiDocumentContent_1c2vj_2221 {
width: 100%;
}
._apiDocumentFooter_1c2vj_2229 {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 36px;
padding-top: 14px;
border-top: 1px solid #e2e8f0;
font-size: 10px;
color: #94a3b8;
}
._docxPageScroller_1c2vj_1987::-webkit-scrollbar {
width: 8px;
height: 8px;
}
._docxPageScroller_1c2vj_1987::-webkit-scrollbar-track {
background: transparent;
}
._docxPageScroller_1c2vj_1987::-webkit-scrollbar-thumb {
background: #b9c5d3;
border-radius: 10px;
}
._docxPageScroller_1c2vj_1987::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* =========================================================
A4 DOCUMENT PAGE
========================================================= */
._apiDocumentPage_1c2vj_2087 {
width: 794px;
min-height: 1123px;
height: 1123px;
margin: 0 auto;
padding: 58px 58px 50px;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.13);
color: #253449;
font-family: Arial, Helvetica, sans-serif;
}
._apiDocumentHeader_1c2vj_2155 {
flex: 0 0 auto;
padding-bottom: 20px;
border-bottom: 1px solid #dbe2ea;
margin-bottom: 20px;
}
._apiDocumentTitle_1c2vj_2183 {
color: #163d7a;
font-size: 23px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.3px;
}
._apiDocumentPageNumber_1c2vj_2199 {
margin-top: 6px;
color: #94a3b8;
font-size: 9px;
text-align: right;
}
._apiDocumentContent_1c2vj_2221 {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
._apiDocumentFooter_1c2vj_2229 {
position: absolute;
left: 58px;
right: 58px;
bottom: 22px;
display: flex;
justify-content: space-between;
padding-top: 8px;
border-top: 1px solid #e2e8f0;
color: #94a3b8;
font-size: 9px;
}
/* =========================================================
DOCUMENT TYPOGRAPHY
========================================================= */
._documentHeading1_1c2vj_2481 {
margin: 0 0 16px;
color: #173f7a;
font-size: 22px;
line-height: 1.25;
}
._documentHeading2_1c2vj_2499 {
margin: 15px 0 10px;
color: #244d85;
font-size: 16px;
line-height: 1.3;
}
._documentHeading3_1c2vj_2517 {
margin: 12px 0 7px;
color: #315b91;
font-size: 13px;
line-height: 1.3;
}
._documentParagraph_1c2vj_2535 {
margin: 0 0 9px;
color: #334155;
font-size: 11px;
line-height: 1.65;
white-space: normal;
overflow-wrap: anywhere;
}
._documentEmptyLine_1c2vj_2561 {
height: 8px;
line-height: 8px;
}
._documentBullet_1c2vj_2573 {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 0 7px;
color: #334155;
font-size: 11px;
line-height: 1.55;
}
._bulletMarker_1c2vj_2605 {
flex: 0 0 12px;
color: #334155;
font-weight: 700;
text-align: center;
}
/* =========================================================
DOCUMENT TABLE
========================================================= */
._documentTableRow_1c2vj_2633 {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(120px, 0.35fr);
min-height: 28px;
border-left: 1px solid #aeb9c7;
border-top: 1px solid #aeb9c7;
}
._documentTableRow_1c2vj_2633:last-child {
border-bottom: 1px solid #aeb9c7;
}
._documentTableCell_1c2vj_2667 {
padding: 5px 7px;
display: flex;
align-items: center;
border-right: 1px solid #aeb9c7;
color: #3f4d60;
font-size: 10px;
line-height: 1.35;
overflow-wrap: anywhere;
}
._documentTableRow_1c2vj_2633 + ._documentTableRow_1c2vj_2633 {
border-top: 0;
}
/* =========================================================
LOADING / ERRORS
========================================================= */
._docxLoading_1c2vj_2717,
._docxError_1c2vj_2719 {
width: 100%;
height: 100%;
min-height: 250px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--doc-muted);
font-size: 12px;
}
._docxError_1c2vj_2719 {
flex-direction: column;
color: var(--doc-red);
}
._docxError_1c2vj_2719 button {
height: 32px;
padding: 0 12px;
border: 1px solid #fecaca;
border-radius: 6px;
background: #ffffff;
color: var(--doc-red);
cursor: pointer;
}
/* =========================================================
THUMBNAIL PANEL
========================================================= */
._thumbnailPanel_1c2vj_2803 {
width: 156px;
height: 100%;
max-height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
border-left: 1px solid var(--doc-border);
}
/* =========================================================
THUMBNAIL HEADER
========================================================= */
._thumbnailHeader_1c2vj_2847 {
flex: 0 0 58px;
width: 100%;
height: 58px;
min-height: 58px;
max-height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
border-bottom: 1px solid var(--doc-border);
background: #ffffff;
color: #475569;
font-size: 12px;
position: relative;
z-index: 2;
}
._thumbnailHeader_1c2vj_2847 strong {
color: var(--doc-blue);
font-size: 13px;
}
/* =========================================================
THUMBNAIL LIST - ONLY THIS AREA SCROLLS
========================================================= */
._thumbnailList_1c2vj_2923 {
flex: 1 1 0;
width: 100%;
height: 0;
min-width: 0;
min-height: 0;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: 12px;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
._thumbnailList_1c2vj_2923::-webkit-scrollbar {
width: 6px;
}
._thumbnailList_1c2vj_2923::-webkit-scrollbar-track {
background: transparent;
}
._thumbnailList_1c2vj_2923::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
._thumbnailList_1c2vj_2923::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* =========================================================
THUMBNAIL BUTTON
========================================================= */
._thumbnailButton_1c2vj_3009 {
width: 100%;
display: block;
margin: 0 0 12px;
padding: 5px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
cursor: pointer;
text-align: center;
transition:
background 0.15s ease,
border-color 0.15s ease;
}
._thumbnailButton_1c2vj_3009:last-child {
margin-bottom: 0;
}
._thumbnailButton_1c2vj_3009:hover {
background: #f8fafc;
border-color: #dbe3ed;
}
._thumbnailButtonActive_1c2vj_3077 {
background: #eff6ff;
border-color: #7eb0ff;
}
._thumbnailPaper_1c2vj_3089 {
position: relative;
width: 100%;
aspect-ratio: 0.707;
display: block;
padding: 8px 7px;
border: 1px solid #d5dde7;
border-radius: 2px;
background: #ffffff;
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}
._thumbnailPaper_1c2vj_3089 strong {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #2563eb;
font-size: 13px;
}
._thumbnailLines_1c2vj_3155 {
display: flex;
flex-direction: column;
gap: 4px;
}
._thumbnailLines_1c2vj_3155 i {
display: block;
height: 2px;
width: 90%;
border-radius: 2px;
background: #dbe4ef;
}
._thumbnailLines_1c2vj_3155 i:nth-child(2) {
width: 75%;
}
._thumbnailLines_1c2vj_3155 i:nth-child(3) {
width: 88%;
}
._thumbnailLines_1c2vj_3155 i:nth-child(4) {
width: 66%;
}
._thumbnailLines_1c2vj_3155 i:nth-child(5) {
width: 82%;
}
._thumbnailPageLabel_1c2vj_3225 {
display: block;
margin-top: 5px;
color: #64748b;
font-size: 9px;
}
/* =========================================================
COMPACT DOCUMENT INFORMATION PANEL
========================================================= */
._documentInfoPanel_1c2vj_3253 {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
border-left: 1px solid var(--doc-border);
}
/* =========================================================
INFO HEADER
========================================================= */
._infoHeader_1c2vj_3295 {
flex: 0 0 48px;
width: 100%;
height: 48px;
min-height: 48px;
max-height: 48px;
display: flex;
align-items: center;
padding: 0 14px;
border-bottom: 1px solid var(--doc-border);
}
._infoHeader_1c2vj_3295 h3 {
margin: 0;
color: #334155;
font-size: 13px;
line-height: 1.2;
font-weight: 650;
}
/* =========================================================
INFO CONTENT
========================================================= */
._infoContent_1c2vj_3357 {
flex: 1 1 0;
width: 100%;
height: 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 14px 14px 18px;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
._infoContent_1c2vj_3357::-webkit-scrollbar {
width: 5px;
}
._infoContent_1c2vj_3357::-webkit-scrollbar-track {
background: transparent;
}
._infoContent_1c2vj_3357::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
/* =========================================================
FILE ICON + TITLE
========================================================= */
._infoFileIcon_1c2vj_3427 {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
border-radius: 8px;
background: #eff6ff;
color: var(--doc-blue);
font-size: 16px;
}
._infoTitle_1c2vj_3465 {
display: flex;
flex-direction: column;
gap: 2px;
padding-bottom: 12px;
border-bottom: 1px solid #e5eaf0;
}
._infoTitle_1c2vj_3465 strong {
min-width: 0;
color: #172033;
font-size: 13px;
line-height: 1.35;
font-weight: 650;
overflow-wrap: anywhere;
}
._infoTitle_1c2vj_3465 span {
color: var(--doc-muted);
font-size: 10px;
line-height: 1.3;
}
/* =========================================================
INFO GRID
========================================================= */
._infoGrid_1c2vj_3533 {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid #e5eaf0;
}
._infoGrid_1c2vj_3533 > div {
min-height: 48px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding: 7px 8px 7px 0;
border-bottom: 1px solid #eef2f6;
}
._infoGrid_1c2vj_3533 > div:nth-child(odd) {
border-right: 1px solid #eef2f6;
padding-right: 10px;
}
._infoGrid_1c2vj_3533 > div:nth-child(even) {
padding-left: 10px;
}
._infoGrid_1c2vj_3533 > div:nth-last-child(-n + 2) {
border-bottom: 0;
}
._infoGrid_1c2vj_3533 span {
color: #7b8798;
font-size: 9px;
line-height: 1.2;
}
._infoGrid_1c2vj_3533 strong {
min-width: 0;
color: #334155;
font-size: 11px;
line-height: 1.3;
overflow-wrap: anywhere;
}
._infoGrid_1c2vj_3533 ._infoStatus_1c2vj_1477 {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 2px 6px;
border-radius: 999px;
font-size: 9px;
line-height: 1.2;
}
/* =========================================================
RELATED REQUIREMENT
========================================================= */
._relatedRequirement_1c2vj_3679 {
margin-top: 10px;
padding: 10px;
border: 1px solid #dbe8fa;
border-radius: 7px;
background: #f8fbff;
}
._relatedRequirement_1c2vj_3679 > span {
display: block;
margin-bottom: 4px;
color: #718096;
font-size: 9px;
line-height: 1.2;
}
._relatedRequirement_1c2vj_3679 > strong {
display: block;
margin-bottom: 3px;
color: var(--doc-blue);
font-size: 12px;
line-height: 1.3;
}
._relatedRequirement_1c2vj_3679 > small {
display: block;
margin-top: 2px;
color: #64748b;
font-size: 9px;
line-height: 1.35;
overflow-wrap: anywhere;
}
/* =========================================================
PLACEHOLDERS
========================================================= */
._placeholderSection_1c2vj_3779 {
margin-top: 12px;
}
._infoSectionTitle_1c2vj_3787 {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
}
._infoSectionTitle_1c2vj_3787 span {
color: #64748b;
font-size: 10px;
}
._infoSectionTitle_1c2vj_3787 strong {
color: #334155;
font-size: 10px;
}
._placeholderList_1c2vj_3827 {
display: flex;
flex-direction: column;
gap: 4px;
}
._placeholder_1c2vj_3779 {
padding: 6px 8px;
border: 1px solid #e2e8f0;
border-radius: 5px;
background: #f8fafc;
color: #475569;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 9px;
line-height: 1.3;
overflow-wrap: anywhere;
}
/* =========================================================
REVIEW NOTES
========================================================= */
._reviewNotes_1c2vj_3885 {
margin-top: 12px;
padding: 9px 10px;
border-radius: 7px;
background: #f8fafc;
border: 1px solid #e5eaf0;
}
._reviewNotes_1c2vj_3885 > span {
display: block;
margin-bottom: 4px;
color: #64748b;
font-size: 9px;
font-weight: 600;
}
._reviewNotes_1c2vj_3885 p {
margin: 0;
color: #475569;
font-size: 10px;
line-height: 1.4;
overflow-wrap: anywhere;
}
/* =========================================================
APPROVED MESSAGE
========================================================= */
._approvedMessage_1c2vj_3963 {
margin-top: 10px;
min-height: 38px;
padding: 8px 10px;
display: flex;
align-items: center;
gap: 6px;
border-radius: 7px;
background: #ecfdf3;
color: #15803d;
font-size: 10px;
font-weight: 600;
}
._approvedMessage_1c2vj_3963 svg {
flex: 0 0 auto;
font-size: 14px;
}
/* =========================================================
EDITOR
========================================================= */
._editorRoot_1c2vj_4027 {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
background: #e8eef6;
overflow: hidden;
}
._editorPageScroller_1c2vj_4051 {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: auto;
padding: 30px;
scrollbar-width: thin;
}
._editPage_1c2vj_4079 {
width: 794px;
min-height: 1123px;
margin: 0 auto;
padding: 58px;
background: #ffffff;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.13);
}
._documentTitleInput_1c2vj_4107 {
width: 100%;
margin-bottom: 18px;
padding: 10px 0;
border: 0;
border-bottom: 1px solid #dbe3ec;
outline: none;
color: #173f7a;
font-size: 22px;
font-weight: 700;
}
._documentTitleInput_1c2vj_4107:focus {
border-bottom-color: var(--doc-blue);
}
._documentEditor_1c2vj_4151 {
width: 100%;
min-height: 850px;
resize: vertical;
padding: 15px;
border: 1px solid #dbe3ec;
border-radius: 6px;
outline: none;
color: #334155;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.6;
}
._documentEditor_1c2vj_4151:focus {
border-color: var(--doc-blue);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
/* =========================================================
PDF MODAL
========================================================= */
._pdfModalOverlay_1c2vj_4217 {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.65);
}
._pdfModal_1c2vj_4217 {
width: min(1100px, 95vw);
height: min(900px, 94vh);
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
}
._pdfModalHeader_1c2vj_4289 {
flex: 0 0 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
border-bottom: 1px solid var(--doc-border);
}
._pdfModalHeader_1c2vj_4289 h2 {
margin: 0;
font-size: 14px;
}
._pdfModalHeader_1c2vj_4289 span {
display: block;
margin-top: 3px;
color: var(--doc-muted);
font-size: 10px;
}
._pdfModalHeader_1c2vj_4289 button {
width: 34px;
height: 34px;
border: 0;
border-radius: 6px;
background: transparent;
color: #64748b;
cursor: pointer;
}
._pdfModalHeader_1c2vj_4289 button:hover {
background: #f1f5f9;
color: #1e293b;
}
/* =========================================================
PDF TOOLBAR
========================================================= */
._pdfToolbar_1c2vj_4393 {
flex: 0 0 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
border-bottom: 1px solid var(--doc-border);
background: #f8fafc;
}
._pdfToolbar_1c2vj_4393 > div {
display: flex;
align-items: center;
gap: 6px;
}
._pdfToolbar_1c2vj_4393 button {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 5px;
background: transparent;
color: #475569;
cursor: pointer;
}
._pdfToolbar_1c2vj_4393 button:hover:not(:disabled) {
background: #e2e8f0;
}
._pdfToolbar_1c2vj_4393 button:disabled {
opacity: 0.35;
cursor: not-allowed;
}
._pdfToolbar_1c2vj_4393 span {
min-width: 55px;
text-align: center;
color: #475569;
font-size: 11px;
}
/* =========================================================
PDF BODY
========================================================= */
._pdfModalBody_1c2vj_4519 {
flex: 1 1 0;
min-height: 0;
overflow: auto;
display: flex;
justify-content: center;
padding: 25px;
background: #e5eaf1;
scrollbar-width: thin;
}
._pdfModalBody_1c2vj_4519 canvas {
max-width: none !important;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.16);
}
._pdfLoading_1c2vj_4567,
._pdfError_1c2vj_4569 {
min-height: 250px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #64748b;
font-size: 12px;
}
._pdfError_1c2vj_4569 {
color: var(--doc-red);
}
/* =========================================================
SPINNER
========================================================= */
._spin_1c2vj_4613 {
animation: _tenderDocumentsSpin_1c2vj_1 0.9s linear infinite;
}
@keyframes _tenderDocumentsSpin_1c2vj_1 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1400px) {
._workspace_1c2vj_975 {
grid-template-columns:
320px
minmax(0, 1fr)
290px;
}
._viewerBody_1c2vj_1889 {
grid-template-columns:
minmax(0, 1fr)
130px;
}
._thumbnailPanel_1c2vj_2803 {
width: 130px;
}
}
@media (max-width: 1100px) {
._workspace_1c2vj_975 {
grid-template-columns:
290px
minmax(0, 1fr);
}
._documentInfoPanel_1c2vj_3253 {
display: none;
}
}
@media (max-width: 1100px) {
._reviewHeader_1c2vj_289 {
grid-template-columns:
minmax(0, 1fr)
auto;
gap: 12px;
}
._documentHeaderGroup_1c2vj_629 {
display: none;
}
}
@media (max-width: 800px) {
._workspace_1c2vj_975 {
grid-template-columns: 1fr;
}
._documentListPanel_1c2vj_1039 {
display: none;
}
._viewerBody_1c2vj_1889 {
grid-template-columns:
minmax(0, 1fr)
105px;
}
._thumbnailPanel_1c2vj_2803 {
width: 105px;
}
._reviewHeader_1c2vj_289 {
grid-template-columns:
minmax(0, 1fr)
auto;
padding: 10px 12px;
}
._reviewTitle_1c2vj_345 p {
display: none;
}
._reviewActions_1c2vj_833 ._secondaryButton_1c2vj_853:first-child {
display: none;
}
}
@media (max-width: 600px) {
._reviewHeader_1c2vj_289 {
min-height: 64px;
max-height: 64px;
padding: 8px 10px;
}
._viewerToolbar_1c2vj_1635 {
grid-template-columns:
auto
1fr
auto;
padding: 0 8px;
}
._viewerToolbarCenter_1c2vj_1681 {
justify-content: center;
}
._viewerToolbarRight_1c2vj_1683 button:last-child {
display: none;
}
._viewerBody_1c2vj_1889 {
grid-template-columns: 1fr;
}
._thumbnailPanel_1c2vj_2803 {
display: none;
}
._docxPageScroller_1c2vj_1987 {
padding: 15px;
}
._reviewActions_1c2vj_833 ._secondaryButton_1c2vj_853 {
display: none;
}
._primaryButton_1c2vj_851 {
padding: 0 10px;
}
}
._page_12dpw_1 {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* =========================================================
HEADER
========================================================= */
._pageHeader_12dpw_21 {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 20px;
}
._titleRow_12dpw_37 {
display: flex;
align-items: flex-start;
gap: 12px;
}
._pageTitleIcon_12dpw_49 {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #eef5ff;
color: #1264d8;
font-size: 21px;
}
._titleRow_12dpw_37 h1 {
margin: 0;
color: #101d4d;
font-size: 21px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.02em;
}
._titleRow_12dpw_37 p {
margin: 5px 0 0;
max-width: 680px;
color: #64748b;
font-size: 12px;
line-height: 1.55;
}
._analysisBadge_12dpw_125 {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 2px;
margin-left: 8px;
padding: 5px 10px;
border: 1px solid #b7ead2;
border-radius: 999px;
background: #ecfdf5;
color: #079455;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
._headerActions_12dpw_167 {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
}
._regenerateButton_12dpw_181 {
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 14px;
border: 1px solid #bcd6fb;
border-radius: 7px;
background: #ffffff;
color: #1264d8;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
._regenerateButton_12dpw_181:hover {
background: #f5f9ff;
}
._regenerateButton_12dpw_181:disabled {
opacity: 0.6;
cursor: not-allowed;
}
._lastAnalyzed_12dpw_243 {
color: #64748b;
font-size: 10px;
}
/* =========================================================
MAIN GRID
========================================================= */
._contentGrid_12dpw_261 {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr)
minmax(0, 0.92fr);
gap: 10px;
align-items: start;
}
._leftColumn_12dpw_287,
._middleColumn_12dpw_289,
._rightColumn_12dpw_291 {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
/* =========================================================
CARD
========================================================= */
._card_12dpw_315 {
min-width: 0;
padding: 13px 14px;
border: 1px solid #dbe7f5;
border-radius: 9px;
background: #ffffff;
box-sizing: border-box;
}
._sectionHeader_12dpw_341 {
min-height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
._sectionTitleWrap_12dpw_365 {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
._sectionTitleWrap_12dpw_365 h2 {
margin: 0;
color: #101d4d;
font-size: 14px;
line-height: 1.3;
font-weight: 700;
}
._sectionIcon_12dpw_401 {
width: 25px;
height: 25px;
flex: 0 0 25px;
display: flex;
align-items: center;
justify-content: center;
color: #1264d8;
font-size: 17px;
}
._editButton_12dpw_429 {
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 9px;
border: 1px solid #cfe0f5;
border-radius: 6px;
background: #ffffff;
color: #1264d8;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._editButton_12dpw_429:hover {
background: #f5f9ff;
}
/* =========================================================
INFO ROWS
========================================================= */
._infoList_12dpw_489 {
display: flex;
flex-direction: column;
gap: 7px;
}
._infoRow_12dpw_501 {
display: grid;
grid-template-columns: 135px minmax(0, 1fr);
gap: 10px;
align-items: start;
}
._infoLabel_12dpw_521 {
color: #526b95;
font-size: 11px;
line-height: 1.45;
}
._infoValue_12dpw_535 {
color: #172b55;
font-size: 11px;
line-height: 1.45;
font-weight: 500;
overflow-wrap: anywhere;
}
._deadlineValue_12dpw_555 {
color: #172b55;
font-size: 11px;
line-height: 1.45;
font-weight: 600;
}
/* =========================================================
DESCRIPTION
========================================================= */
._descriptionBlock_12dpw_579 {
margin-top: 10px;
}
._descriptionLabel_12dpw_587 {
display: block;
margin-bottom: 5px;
color: #526b95;
font-size: 11px;
}
._descriptionBox_12dpw_607 {
padding: 9px 10px;
border-radius: 6px;
background: #f6f9fd;
color: #344a73;
font-size: 11px;
line-height: 1.55;
}
/* =========================================================
SCOPE
========================================================= */
._bulletList_12dpw_641 {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
._bulletList_12dpw_641 li {
display: grid;
grid-template-columns: 12px minmax(0, 1fr);
gap: 5px;
color: #344a73;
font-size: 11px;
line-height: 1.45;
}
._bulletDot_12dpw_689 {
color: #243f75;
font-weight: 700;
}
._scopeDescription_12dpw_699 {
margin-top: 10px;
padding: 9px 10px;
border-radius: 6px;
background: #f6f9fd;
color: #344a73;
font-size: 11px;
line-height: 1.5;
}
._scopeMeta_12dpw_729 {
margin-top: 9px;
color: #526b95;
font-size: 10px;
}
._scopeMeta_12dpw_729 strong {
color: #243b68;
}
/* =========================================================
EVALUATION
========================================================= */
._evaluationList_12dpw_761 {
display: flex;
flex-direction: column;
}
._evaluationRow_12dpw_771 {
min-height: 34px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #edf2f8;
}
._evaluationRow_12dpw_771:last-child {
border-bottom: 0;
}
._evaluationName_12dpw_803 {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
color: #253b68;
font-size: 11px;
}
._evaluationIcon_12dpw_827 {
width: 19px;
height: 19px;
display: flex;
align-items: center;
justify-content: center;
color: #1264d8;
font-size: 13px;
}
._evaluationRow_12dpw_771 strong {
color: #253b68;
font-size: 11px;
font-weight: 600;
}
._evaluationTotal_12dpw_867 {
display: flex;
justify-content: space-between;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #dbe7f5;
color: #526b95;
font-size: 10px;
}
._evaluationTotal_12dpw_867 strong {
color: #101d4d;
}
/* =========================================================
AI SUMMARY
========================================================= */
._summaryBox_12dpw_911 {
padding: 11px;
border-radius: 7px;
background: #edf5ff;
color: #294879;
font-size: 11px;
line-height: 1.55;
}
/* =========================================================
SOURCE DOCUMENTS
========================================================= */
._fileCountBadge_12dpw_945 {
padding: 5px 8px;
border-radius: 999px;
background: #eef5ff;
color: #1264d8;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
}
._sourceList_12dpw_971 {
display: flex;
flex-direction: column;
gap: 7px;
}
._sourceDocument_12dpw_983 {
min-width: 0;
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 8px;
border: 1px solid #e5edf7;
border-radius: 7px;
background: #ffffff;
}
._fileIcon_12dpw_1021 {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #fff1f1;
color: #e53935;
font-size: 17px;
}
._fileDetails_12dpw_1053 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
._fileDetails_12dpw_1053 strong {
overflow: hidden;
color: #1a2e56;
font-size: 10px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
._fileDetails_12dpw_1053 span {
color: #71829e;
font-size: 9px;
}
._viewButton_12dpw_1105 {
height: 25px;
padding: 0 9px;
border: 0;
border-radius: 5px;
background: #edf5ff;
color: #1264d8;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._viewButton_12dpw_1105:hover {
background: #dcecff;
}
._noDocuments_12dpw_1147 {
display: flex;
align-items: center;
gap: 7px;
padding: 14px;
color: #71829e;
font-size: 10px;
}
/* =========================================================
KEY FINDINGS
========================================================= */
._findingsList_12dpw_1179 {
display: flex;
flex-direction: column;
gap: 7px;
}
._findingItem_12dpw_1193 {
display: flex;
align-items: flex-start;
gap: 7px;
color: #344a73;
font-size: 11px;
line-height: 1.35;
}
._findingCheck_12dpw_1215 {
display: flex;
flex: 0 0 auto;
margin-top: 1px;
color: #11a66a;
font-size: 14px;
}
._findingsButton_12dpw_1237 {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
width: 100%;
margin-top: 12px;
padding: 0;
border: 0;
background: transparent;
color: #1264d8;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
/* =========================================================
BOTTOM GRID
========================================================= */
._bottomGrid_12dpw_1293 {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr)
minmax(0, 1fr);
gap: 10px;
margin-top: 10px;
}
/* =========================================================
PROGRAMME
========================================================= */
._milestoneList_12dpw_1327 {
display: flex;
flex-direction: column;
gap: 8px;
}
._milestoneRow_12dpw_1339 {
display: grid;
grid-template-columns: 10px minmax(0, 1fr);
gap: 8px;
}
._milestoneDot_12dpw_1355 {
width: 7px;
height: 7px;
margin-top: 4px;
border-radius: 50%;
background: #1264d8;
}
._milestoneRow_12dpw_1339 div:last-child {
display: flex;
flex-direction: column;
gap: 2px;
}
._milestoneRow_12dpw_1339 strong {
color: #2a416e;
font-size: 10px;
line-height: 1.35;
}
._milestoneRow_12dpw_1339 span {
color: #71829e;
font-size: 9px;
}
/* =========================================================
ADDENDA
========================================================= */
._changesList_12dpw_1423 {
display: flex;
flex-direction: column;
gap: 8px;
}
._changeRow_12dpw_1435 {
display: grid;
grid-template-columns:
minmax(150px, 1fr)
minmax(120px, 1fr)
18px
minmax(120px, 1fr)
auto;
align-items: center;
gap: 8px;
padding: 9px 10px;
border: 1px solid #e3ebf5;
border-radius: 7px;
background: #fbfdff;
}
._changeField_12dpw_1479 {
color: #253b68;
font-size: 10px;
font-weight: 600;
}
._oldValue_12dpw_1493 {
color: #b54708;
font-size: 10px;
}
._newValue_12dpw_1505 {
color: #087443;
font-size: 10px;
font-weight: 600;
}
._changeArrow_12dpw_1519 {
color: #94a3b8;
}
._sourceBadge_12dpw_1527 {
padding: 4px 7px;
border-radius: 999px;
background: #eef5ff;
color: #1264d8;
font-size: 8px;
font-weight: 600;
white-space: nowrap;
}
/* =========================================================
LOADING / ERROR / EMPTY
========================================================= */
._loadingState_12dpw_1561 {
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #526b95;
font-size: 13px;
}
._spin_12dpw_1587 {
animation: _spin_12dpw_1587 0.9s linear infinite;
}
._errorState_12dpw_1595 {
min-height: 220px;
display: flex;
align-items: center;
gap: 12px;
padding: 25px;
border: 1px solid #fecaca;
border-radius: 9px;
background: #fffafa;
color: #b42318;
}
._errorState_12dpw_1595 > svg {
flex: 0 0 auto;
font-size: 22px;
}
._errorState_12dpw_1595 strong {
display: block;
margin-bottom: 4px;
font-size: 13px;
}
._errorState_12dpw_1595 p {
margin: 0;
color: #7f1d1d;
font-size: 11px;
}
._retryButton_12dpw_1671,
._primaryButton_12dpw_1673 {
height: 34px;
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto;
padding: 0 12px;
border: 1px solid #1264d8;
border-radius: 6px;
background: #1264d8;
color: #ffffff;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._emptyState_12dpw_1719 {
min-height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #64748b;
}
._emptyState_12dpw_1719 > svg {
color: #1264d8;
font-size: 28px;
}
._emptyState_12dpw_1719 h3 {
margin: 12px 0 5px;
color: #172554;
font-size: 16px;
}
._emptyState_12dpw_1719 p {
margin: 0 0 16px;
font-size: 11px;
}
._primaryButton_12dpw_1673 {
margin-left: 0;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1250px) {
._contentGrid_12dpw_261 {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
}
._rightColumn_12dpw_291 {
grid-column: 1 / -1;
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
align-items: start;
}
._bottomGrid_12dpw_1293 {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
}
}
@media (max-width: 900px) {
._pageHeader_12dpw_21 {
flex-direction: column;
}
._headerActions_12dpw_167 {
align-items: flex-start;
}
._contentGrid_12dpw_261 {
grid-template-columns: minmax(0, 1fr);
}
._rightColumn_12dpw_291 {
grid-column: auto;
display: flex;
}
._bottomGrid_12dpw_1293 {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 640px) {
._titleRow_12dpw_37 {
flex-wrap: wrap;
}
._analysisBadge_12dpw_125 {
margin-left: 0;
}
._infoRow_12dpw_501 {
grid-template-columns: 1fr;
gap: 2px;
}
._changeRow_12dpw_1435 {
grid-template-columns: 1fr;
}
._changeArrow_12dpw_1519 {
transform: rotate(90deg);
}
}
@keyframes _spin_12dpw_1587 {
to {
transform: rotate(360deg);
}
}
._requirementsPage_1gxmq_1 {
width: 100%;
min-width: 0;
color: #10245c;
}
/* =========================================================
HEADER
========================================================= */
._headerCard_1gxmq_21 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 20px 22px;
margin-bottom: 14px;
background: #ffffff;
border: 1px solid #e1e9f5;
border-radius: 10px;
}
._headerTitle_1gxmq_45 {
display: flex;
align-items: center;
gap: 14px;
}
._headerIcon_1gxmq_57 {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #eef5ff;
color: #0b6cff;
font-size: 21px;
}
._headerTitle_1gxmq_45 h2 {
margin: 0;
color: #10245c;
font-size: 12px;
font-weight: 700;
}
._headerTitle_1gxmq_45 p {
margin: 5px 0 0;
color: #6d7d9d;
font-size: 10px;
}
._bulkButton_1gxmq_107 {
height: 36px;
padding: 0 14px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid #bcd1f0;
border-radius: 7px;
background: #ffffff;
color: #153a82;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
._bulkButton_1gxmq_107:hover {
border-color: #0b6cff;
color: #0b6cff;
}
/* =========================================================
FILTER BAR
========================================================= */
._filterBar_1gxmq_155 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
._filterTabs_1gxmq_171 {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
._filterTab_1gxmq_171,
._filterTabActive_1gxmq_187,
._filterTabDanger_1gxmq_189,
._filterTabDangerActive_1gxmq_191 {
height: 35px;
padding: 0 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
}
._filterTab_1gxmq_171 {
border: 1px solid #dce6f4;
background: #ffffff;
color: #294679;
}
._filterTab_1gxmq_171:hover {
border-color: #8db7f5;
}
._filterTabActive_1gxmq_187 {
border: 1px solid #0b6cff;
background: #ffffff;
color: #0b5fd8;
font-weight: 600;
}
._filterTabDanger_1gxmq_189 {
border: 1px solid #f3c9ce;
background: #fff;
color: #e33b48;
}
._filterTabDangerActive_1gxmq_191 {
border: 1px solid #ef5350;
background: #fff5f5;
color: #dc2837;
font-weight: 600;
}
._toolbar_1gxmq_271 {
display: flex;
align-items: center;
gap: 8px;
}
._searchBox_1gxmq_283 {
width: 190px;
height: 35px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
border: 1px solid #d7e3f3;
border-radius: 6px;
background: #ffffff;
}
._searchBox_1gxmq_283 svg {
flex: 0 0 auto;
color: #7384a3;
font-size: 15px;
}
._searchBox_1gxmq_283 input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: #263e6d;
font-size: 11px;
}
._searchBox_1gxmq_283 input::placeholder {
color: #8a9ab5;
}
._filterDropdown_1gxmq_345 {
position: relative;
}
._filterButton_1gxmq_353 {
height: 35px;
padding: 0 10px;
display: flex;
align-items: center;
gap: 6px;
border: 1px solid #d7e3f3;
border-radius: 6px;
background: #ffffff;
color: #294679;
font-size: 11px;
cursor: pointer;
}
._filterButton_1gxmq_353 svg {
font-size: 13px;
}
._filterMenu_1gxmq_389 {
position: absolute;
z-index: 20;
top: calc(100% + 6px);
right: 0;
min-width: 180px;
padding: 5px;
background: #ffffff;
border: 1px solid #dbe5f2;
border-radius: 8px;
box-shadow: 0 10px 28px rgba(23, 52, 95, 0.14);
}
._filterMenu_1gxmq_389 button {
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: 5px;
background: transparent;
color: #294679;
text-align: left;
font-size: 11px;
cursor: pointer;
}
._filterMenu_1gxmq_389 button:hover {
background: #f1f6fd;
}
/* =========================================================
TABLE
========================================================= */
._tableCard_1gxmq_455 {
overflow: hidden;
background: #ffffff;
border: 1px solid #dfe8f4;
border-radius: 8px;
box-shadow: 0 2px 7px rgba(25, 53, 91, 0.03);
}
._tableWrapper_1gxmq_471 {
width: 100%;
overflow-x: auto;
}
._requirementsTable_1gxmq_481 {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
._requirementsTable_1gxmq_481 thead {
background: #f3f7fc;
}
._requirementsTable_1gxmq_481 th {
height: 40px;
padding: 0 12px;
border-bottom: 1px solid #dfe8f4;
color: #213a68;
font-size: 10px;
font-weight: 700;
text-align: left;
white-space: nowrap;
}
._requirementsTable_1gxmq_481 td {
min-height: 62px;
padding: 10px 12px;
border-bottom: 1px solid #e7edf5;
color: #314a78;
font-size: 11px;
vertical-align: middle;
}
._requirementsTable_1gxmq_481 tbody tr {
transition: background 0.15s ease;
cursor: pointer;
}
._requirementsTable_1gxmq_481 tbody tr:hover {
background: #f8fbff;
}
._requirementsTable_1gxmq_481 tbody tr:last-child td {
border-bottom: 0;
}
._checkboxColumn_1gxmq_567 {
width: 38px;
text-align: center !important;
}
._numberCell_1gxmq_577 {
width: 42px;
color: #5c6f92 !important;
font-weight: 500;
}
._requirementsTable_1gxmq_481 th:nth-child(3) {
width: 20%;
}
._requirementsTable_1gxmq_481 th:nth-child(4) {
width: 14%;
}
._requirementsTable_1gxmq_481 th:nth-child(5) {
width: 15%;
}
._requirementsTable_1gxmq_481 th:nth-child(6) {
width: 25%;
}
._requirementsTable_1gxmq_481 th:nth-child(7) {
width: 15%;
}
._requirementsTable_1gxmq_481 th:last-child {
width: 36px;
}
._requirementsTable_1gxmq_481 input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 0;
accent-color: #0b6cff;
cursor: pointer;
}
/* =========================================================
REQUIREMENT CELL
========================================================= */
._requirementName_1gxmq_661,
._typeCell_1gxmq_663,
._sourceCell_1gxmq_665 {
display: flex;
flex-direction: column;
gap: 3px;
}
._requirementName_1gxmq_661 strong {
color: #1a3971;
font-size: 11px;
font-weight: 600;
}
._requirementName_1gxmq_661 span {
color: #8291ab;
font-size: 9px;
}
._typeCell_1gxmq_663 strong {
color: #43597f;
font-size: 10px;
font-weight: 500;
}
._typeCell_1gxmq_663 span {
color: #91a0b8;
font-size: 9px;
text-transform: capitalize;
}
._sourceCell_1gxmq_665 span {
color: #5d7197;
font-size: 9px;
line-height: 1.35;
}
._sourceCell_1gxmq_665 small {
color: #8b9ab1;
font-size: 9px;
}
/* =========================================================
STATUS
========================================================= */
._statusPill_1gxmq_753 {
display: inline-flex;
align-items: center;
gap: 5px;
width: fit-content;
min-height: 23px;
padding: 3px 8px;
border-radius: 20px;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
}
._statusPill_1gxmq_753 svg {
font-size: 12px;
}
._statusSuccess_1gxmq_787 {
background: #e8f8ef;
color: #079451;
}
._statusAi_1gxmq_797 {
background: #fff1dd;
color: #e88a00;
}
._statusWarning_1gxmq_807 {
background: #fff2df;
color: #ef8b00;
}
._statusUpload_1gxmq_817 {
background: #ffe9eb;
color: #ef3948;
}
._statusDanger_1gxmq_827 {
background: #ffe9eb;
color: #e93645;
}
._statusNeutral_1gxmq_837 {
background: #eef1f6;
color: #77859c;
}
._statusDefault_1gxmq_847 {
background: #edf2f8;
color: #64738b;
}
/* =========================================================
ACTION
========================================================= */
._actionButton_1gxmq_865 {
height: 33px;
padding: 0 11px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid #0b6cff;
border-radius: 6px;
background: #ffffff;
color: #075fd4;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
._actionButton_1gxmq_865:hover {
background: #f1f7ff;
}
._actionButton_1gxmq_865 svg {
font-size: 13px;
}
._noAction_1gxmq_915 {
color: #9aa8bb;
}
._moreButton_1gxmq_923 {
width: 28px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: #47638f;
cursor: pointer;
}
._moreButton_1gxmq_923:hover {
color: #0b6cff;
}
/* =========================================================
LOADING / ERROR / EMPTY
========================================================= */
._loadingState_1gxmq_963,
._errorState_1gxmq_965,
._emptyTableState_1gxmq_967 {
min-height: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: #7183a2;
}
._loadingState_1gxmq_963 svg {
color: #0b6cff;
font-size: 25px;
}
._loadingState_1gxmq_963 strong,
._errorState_1gxmq_965 strong,
._emptyTableState_1gxmq_967 strong {
color: #263f70;
font-size: 13px;
}
._loadingState_1gxmq_963 span,
._errorState_1gxmq_965 span,
._emptyTableState_1gxmq_967 span {
color: #8291aa;
font-size: 11px;
}
._errorState_1gxmq_965 svg {
color: #ef3948;
font-size: 28px;
}
._emptyTableState_1gxmq_967 svg {
color: #7890b4;
font-size: 26px;
}
._spin_1gxmq_1045 {
animation: _spin_1gxmq_1045 1s linear infinite;
}
@keyframes _spin_1gxmq_1045 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* =========================================================
DETAIL PANEL
========================================================= */
._detailOverlay_1gxmq_1081 {
position: fixed;
z-index: 100;
inset: 0;
display: flex;
justify-content: flex-end;
background: rgba(17, 35, 65, 0.26);
}
._detailPanel_1gxmq_1099 {
width: min(520px, 90vw);
height: 100%;
display: flex;
flex-direction: column;
background: #ffffff;
box-shadow: -12px 0 40px rgba(15, 37, 70, 0.18);
}
._detailHeader_1gxmq_1117 {
min-height: 78px;
padding: 17px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e4ebf5;
}
._detailHeader_1gxmq_1117 span {
color: #8090aa;
font-size: 9px;
}
._detailHeader_1gxmq_1117 h2 {
margin: 4px 0 0;
color: #102c64;
font-size: 17px;
}
._detailHeader_1gxmq_1117 button {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dce5f1;
border-radius: 6px;
background: #ffffff;
color: #657793;
cursor: pointer;
}
._detailBody_1gxmq_1183 {
flex: 1;
overflow-y: auto;
padding: 18px 20px;
}
._detailStatusRow_1gxmq_1195 {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid #edf1f6;
}
._detailStatusRow_1gxmq_1195 > span:first-child {
color: #7183a1;
font-size: 11px;
}
._detailDescription_1gxmq_1221 {
padding: 17px 0;
border-bottom: 1px solid #edf1f6;
}
._detailDescription_1gxmq_1221 h3,
._detailSection_1gxmq_1233 h3 {
margin: 0 0 9px;
display: flex;
align-items: center;
gap: 6px;
color: #203a6d;
font-size: 12px;
}
._detailDescription_1gxmq_1221 p {
margin: 0;
color: #5d7197;
font-size: 11px;
line-height: 1.6;
}
._detailSection_1gxmq_1233 {
padding: 17px 0;
border-bottom: 1px solid #edf1f6;
}
._sourceDetailCard_1gxmq_1275 {
padding: 12px;
border: 1px solid #e1e9f4;
border-radius: 7px;
background: #f8fbff;
}
._sourceDetailCard_1gxmq_1275 strong {
display: block;
color: #294779;
font-size: 11px;
}
._sourceDetailCard_1gxmq_1275 > span {
display: block;
margin-top: 4px;
color: #8190a9;
font-size: 9px;
}
._sourceDetailCard_1gxmq_1275 p {
margin: 9px 0;
color: #627492;
font-size: 10px;
line-height: 1.5;
}
._sourceDetailCard_1gxmq_1275 button {
height: 30px;
padding: 0 9px;
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid #0b6cff;
border-radius: 5px;
background: #ffffff;
color: #0862d8;
font-size: 10px;
cursor: pointer;
}
._detailSection_1gxmq_1233 blockquote {
margin: 0;
padding: 11px 13px;
border-left: 3px solid #8bb9ff;
border-radius: 0 6px 6px 0;
background: #f5f8fc;
color: #5d7093;
font-size: 10px;
line-height: 1.6;
}
._detailInfoGrid_1gxmq_1379 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 17px 0;
border-bottom: 1px solid #edf1f6;
}
._detailInfoGrid_1gxmq_1379 > div {
padding: 11px;
border: 1px solid #e1e8f2;
border-radius: 6px;
background: #fafcff;
}
._detailInfoGrid_1gxmq_1379 span {
display: block;
color: #8a98ad;
font-size: 9px;
}
._detailInfoGrid_1gxmq_1379 strong {
display: block;
margin-top: 5px;
color: #294677;
font-size: 11px;
}
._evidenceList_1gxmq_1435 {
display: flex;
flex-direction: column;
gap: 10px;
}
._evidenceCard_1gxmq_1447 {
padding: 11px;
border: 1px solid #e0e8f3;
border-radius: 7px;
}
._evidenceCard_1gxmq_1447 > div:first-child {
display: flex;
gap: 9px;
}
._evidenceCard_1gxmq_1447 > div:first-child > svg {
margin-top: 2px;
color: #3379dc;
}
._evidenceCard_1gxmq_1447 strong {
display: block;
color: #2a4778;
font-size: 10px;
}
._evidenceCard_1gxmq_1447 span {
display: block;
margin-top: 3px;
color: #8795aa;
font-size: 9px;
}
._aiCheck_1gxmq_1505 {
margin-top: 10px;
padding: 9px;
border-radius: 6px;
background: #fff8ed;
}
._aiCheck_1gxmq_1505 strong {
color: #c77600;
}
._aiCheck_1gxmq_1505 span {
color: #6f7890;
line-height: 1.45;
}
._aiCheck_1gxmq_1505 ul {
margin: 7px 0 0;
padding-left: 16px;
}
._aiCheck_1gxmq_1505 li {
margin-bottom: 4px;
color: #b84c45;
font-size: 9px;
}
._documentDetailCard_1gxmq_1559 {
display: flex;
align-items: center;
gap: 9px;
padding: 11px;
border: 1px solid #e1e9f4;
border-radius: 7px;
}
._documentDetailCard_1gxmq_1559 > svg {
color: #3779d8;
font-size: 19px;
}
._documentDetailCard_1gxmq_1559 strong {
display: block;
color: #2a4777;
font-size: 10px;
}
._documentDetailCard_1gxmq_1559 span {
display: block;
margin-top: 3px;
color: #8a98ad;
font-size: 9px;
}
._detailFooter_1gxmq_1613 {
min-height: 65px;
padding: 12px 20px;
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid #e3eaf4;
}
._detailFooter_1gxmq_1613 button {
height: 34px;
padding: 0 14px;
border: 1px solid #d4dfed;
border-radius: 6px;
background: #ffffff;
color: #526887;
font-size: 10px;
cursor: pointer;
}
._detailFooter_1gxmq_1613 ._detailActionButton_1gxmq_1653 {
border-color: #0b6cff;
background: #0b6cff;
color: #ffffff;
font-weight: 600;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
._filterBar_1gxmq_155 {
align-items: flex-start;
flex-direction: column;
}
._toolbar_1gxmq_271 {
width: 100%;
}
._searchBox_1gxmq_283 {
flex: 1;
}
}
@media (max-width: 800px) {
._headerCard_1gxmq_21 {
align-items: flex-start;
flex-direction: column;
}
._filterTabs_1gxmq_171 {
overflow-x: auto;
width: 100%;
flex-wrap: nowrap;
padding-bottom: 4px;
}
._filterBar_1gxmq_155 {
gap: 10px;
}
._toolbar_1gxmq_271 {
width: 100%;
}
._requirementsTable_1gxmq_481 {
min-width: 1000px;
}
}
/* =========================================================
BULK ACTIONS
========================================================= */
._bulkActionsWrapper_1gxmq_1765 {
position: relative;
flex: 0 0 auto;
}
._bulkButton_1gxmq_107 {
height: 36px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid #d7e0ea;
border-radius: 7px;
background: #ffffff;
color: #334155;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
._bulkButton_1gxmq_107 svg:first-child {
color: var(--req-blue, #2563eb);
font-size: 14px;
}
._bulkButton_1gxmq_107 > svg:last-child {
font-size: 13px;
transition: transform 0.15s ease;
}
._bulkButton_1gxmq_107:hover,
._bulkButtonActive_1gxmq_1861 {
border-color: #b9cdf0;
background: #f8fbff;
color: #2563eb;
}
._chevronOpen_1gxmq_1877 {
transform: rotate(180deg);
}
/* =========================================================
BULK ACTION MENU
========================================================= */
._bulkActionsMenu_1gxmq_1893 {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 100;
width: 320px;
padding: 6px;
border: 1px solid #dfe5ee;
border-radius: 9px;
background: #ffffff;
box-shadow:
0 12px 30px rgba(15, 23, 42, 0.12),
0 3px 8px rgba(15, 23, 42, 0.06);
}
/* =========================================================
BULK ACTION ITEM
========================================================= */
._bulkActionItem_1gxmq_1945 {
width: 100%;
min-height: 66px;
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
border: 0;
border-radius: 7px;
background: transparent;
text-align: left;
cursor: pointer;
transition:
background 0.15s ease,
transform 0.15s ease;
}
._bulkActionItem_1gxmq_1945:hover {
background: #f8fafc;
}
._bulkActionItem_1gxmq_1945:active {
transform: translateY(1px);
}
._bulkActionIcon_1gxmq_2013 {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: #eff6ff;
color: #2563eb;
font-size: 15px;
}
._bulkActionContent_1gxmq_2051 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._bulkActionContent_1gxmq_2051 strong {
color: #172033;
font-size: 12px;
line-height: 1.25;
font-weight: 650;
}
._bulkActionContent_1gxmq_2051 small {
color: #718096;
font-size: 10px;
line-height: 1.35;
}
._bulkActionItem_1gxmq_1945:disabled {
opacity: 0.55;
cursor: not-allowed;
}
._bulkActionItem_1gxmq_1945:disabled:hover {
background: transparent;
}
/* =========================================================
HEADER ACTIONS
========================================================= */
._headerActions_1gxmq_2127 {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
position: relative;
}
._submitTenderButton_1gxmq_2143 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 36px;
padding: 0 15px;
border: 1px solid #2563eb;
border-radius: 7px;
background: #2563eb;
color: #ffffff;
font-size: 11px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition:
background 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease,
opacity 0.15s ease;
}
._submitTenderButton_1gxmq_2143 svg {
width: 14px;
height: 14px;
}
._submitTenderButton_1gxmq_2143:hover:not(:disabled) {
background: #1d4ed8;
border-color: #1d4ed8;
box-shadow: 0 2px 7px rgba(37, 99, 235, 0.22);
}
._submitTenderButton_1gxmq_2143:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* =========================================================
VERIFICATION CHECKS
========================================================= */
._verificationCardSection_1gxmq_2241 {
width: 100%;
margin-top: 10px;
padding: 14px 16px 16px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
._verificationSectionHeader_1gxmq_2261 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
._verificationSectionTitle_1gxmq_2277 {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
}
._verificationSectionIcon_1gxmq_2291 {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: #eff6ff;
color: #2563eb;
}
._verificationSectionIcon_1gxmq_2291 svg {
width: 15px;
height: 15px;
}
._verificationSectionTitle_1gxmq_2277 h3 {
margin: 0;
color: #1e293b;
font-size: 13px;
line-height: 1.2;
font-weight: 700;
}
._verificationSectionTitle_1gxmq_2277 p {
margin: 3px 0 0;
color: #64748b;
font-size: 10px;
line-height: 1.3;
}
._verificationSummary_1gxmq_2355 {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
._verificationSummaryItem_1gxmq_2369 {
min-width: 55px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0 8px;
border: 1px solid #e2e8f0;
border-radius: 6px;
background: #f8fafc;
color: #64748b;
font-size: 9px;
white-space: nowrap;
}
._verificationSummaryItem_1gxmq_2369 strong {
color: #334155;
font-size: 11px;
font-weight: 700;
}
._verificationSummaryDanger_1gxmq_2413 {
border-color: #fecaca;
background: #fff7f7;
color: #dc2626;
}
._verificationSummaryDanger_1gxmq_2413 strong {
color: #dc2626;
}
._verificationReadyStatus_1gxmq_2433 {
height: 28px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 9px;
border-radius: 6px;
background: #fff7ed;
color: #c2410c;
font-size: 9px;
font-weight: 650;
white-space: nowrap;
}
._verificationReadyStatus_1gxmq_2433 svg {
width: 12px;
height: 12px;
}
/* =========================================================
VERIFICATION CHECKS - HORIZONTAL SCROLL
========================================================= */
._verificationChecksGrid_1gxmq_2479 {
width: 100%;
display: flex;
align-items: stretch;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 2px 7px;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
._verificationChecksGrid_1gxmq_2479::-webkit-scrollbar {
height: 5px;
}
._verificationChecksGrid_1gxmq_2479::-webkit-scrollbar-track {
background: transparent;
}
._verificationChecksGrid_1gxmq_2479::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
._verificationChecksGrid_1gxmq_2479::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* =========================================================
COMPACT VERIFICATION CARD
========================================================= */
._verificationMiniCard_1gxmq_2551 {
flex: 0 0 auto;
min-width: 310px;
height: 42px;
display: flex;
align-items: center;
gap: 12px;
padding: 0 10px;
border: 1px solid #e2e8f0;
border-radius: 7px;
background: #ffffff;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
._verificationMiniCard_1gxmq_2551:hover {
border-color: #cbd5e1;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
._verificationMiniCardBlocker_1gxmq_2607 {
border-left: 3px solid #ef4444;
}
/* =========================================================
TITLE
========================================================= */
._verificationCheckTitle_1gxmq_2623 {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
color: #334155;
font-size: 10px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
}
/* =========================================================
REQUIREMENT CODE
========================================================= */
._verificationRequirementCode_1gxmq_2665 {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 7px;
border-radius: 5px;
background: #f8fafc;
color: #64748b;
font-size: 8px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
}
/* =========================================================
FIX NOW
========================================================= */
._verificationFixButton_1gxmq_2721 {
flex: 0 0 auto;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0 8px;
border: 1px solid #bfdbfe;
border-radius: 5px;
background: #eff6ff;
color: #2563eb;
font-size: 8px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease;
}
._verificationFixButton_1gxmq_2721:hover {
border-color: #93c5fd;
background: #dbeafe;
}
._verificationFixButton_1gxmq_2721 svg {
width: 10px;
height: 10px;
}
/* =========================================================
ACTION BUTTONS
========================================================= */
._actionButtons_1gxmq_2813 {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
._downloadActionButton_1gxmq_2827 {
width: 33px;
height: 33px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 33px;
border: 1px solid #d7e3f3;
border-radius: 6px;
background: #ffffff;
color: #526f9d;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
._downloadActionButton_1gxmq_2827:hover:not(:disabled) {
border-color: #93b8ef;
background: #f1f7ff;
color: #0b6cff;
}
._downloadActionButton_1gxmq_2827 svg {
width: 13px;
height: 13px;
}
._downloadActionButton_1gxmq_2827:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* =========================================================
SUBMISSION DOWNLOAD MENU
========================================================= */
._submissionMenuWrapper_1gxmq_2915 {
position: relative;
flex: 0 0 auto;
}
._submissionMenuButton_1gxmq_2925 {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d7e0ea;
border-radius: 7px;
background: #ffffff;
color: #526987;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
._submissionMenuButton_1gxmq_2925:hover {
border-color: #b9cdf0;
background: #f8fbff;
color: #2563eb;
}
._submissionMenuButton_1gxmq_2925 svg {
width: 17px;
height: 17px;
}
._submissionMenu_1gxmq_2915 {
position: absolute;
top: calc(100% + 7px);
right: 0;
z-index: 200;
width: 245px;
padding: 5px;
border: 1px solid #dfe5ee;
border-radius: 8px;
background: #ffffff;
box-shadow:
0 12px 30px rgba(15, 23, 42, 0.12),
0 3px 8px rgba(15, 23, 42, 0.06);
}
._submissionMenuItem_1gxmq_3035 {
width: 100%;
min-height: 40px;
display: flex;
align-items: center;
gap: 9px;
padding: 8px 9px;
border: 0;
border-radius: 6px;
background: transparent;
color: #334155;
text-align: left;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._submissionMenuItem_1gxmq_3035:hover:not(:disabled) {
background: #f8fafc;
color: #2563eb;
}
._submissionMenuItem_1gxmq_3035 svg {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: #2563eb;
}
._submissionMenuItem_1gxmq_3035:disabled {
opacity: 0.55;
cursor: not-allowed;
}
._overlay_3j4lc_1 {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.48);
backdrop-filter: blur(2px);
}
._modal_3j4lc_31 {
width: min(900px, 100%);
height: min(88vh, 820px);
max-height: 88vh;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #dce3ec;
border-radius: 12px;
background: #ffffff;
box-shadow:
0 24px 60px rgba(15, 23, 42, 0.18),
0 8px 20px rgba(15, 23, 42, 0.08);
}
/* =========================================================
HEADER
========================================================= */
._header_3j4lc_79 {
flex: 0 0 auto;
min-height: 70px;
padding: 13px 17px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid #e5eaf0;
}
._headerLeft_3j4lc_111 {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
}
._headerIcon_3j4lc_129 {
width: 36px;
height: 36px;
flex: 0 0 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #eff6ff;
color: #2563eb;
font-size: 16px;
}
._headerContent_3j4lc_165 {
min-width: 0;
}
._headerContent_3j4lc_165 h2 {
margin: 0;
color: #172033;
font-size: 15px;
line-height: 1.25;
font-weight: 700;
}
._headerContent_3j4lc_165 p {
margin: 3px 0 0;
color: #718096;
font-size: 10px;
line-height: 1.3;
}
._closeButton_3j4lc_213 {
width: 31px;
height: 31px;
flex: 0 0 31px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: transparent;
color: #64748b;
cursor: pointer;
}
._closeButton_3j4lc_213:hover {
background: #f1f5f9;
color: #334155;
}
._closeButton_3j4lc_213:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================
BODY
========================================================= */
._body_3j4lc_279 {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 14px 17px;
background: #f8fafc;
}
._groups_3j4lc_303 {
display: flex;
flex-direction: column;
gap: 11px;
}
/* =========================================================
REQUIREMENT GROUP
========================================================= */
._group_3j4lc_303 {
overflow: hidden;
border: 1px solid #e1e7ef;
border-radius: 8px;
background: #ffffff;
}
._groupHeader_3j4lc_343 {
padding: 10px 12px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #e8edf3;
background: #fbfcfe;
}
._groupHeaderMain_3j4lc_371 {
min-width: 0;
}
._requirementCode_3j4lc_379 {
margin-bottom: 3px;
color: #2563eb;
font-size: 9px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.04em;
}
._groupHeader_3j4lc_343 h3 {
margin: 0;
color: #273449;
font-size: 12px;
line-height: 1.3;
font-weight: 700;
}
._groupHeader_3j4lc_343 p {
margin: 4px 0 0;
color: #7b8798;
font-size: 9px;
line-height: 1.35;
}
._questionCount_3j4lc_445 {
flex: 0 0 auto;
padding: 4px 7px;
border-radius: 5px;
background: #eef2f7;
color: #64748b;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
}
/* =========================================================
QUESTIONS
========================================================= */
._questions_3j4lc_487 {
display: flex;
flex-direction: column;
}
._question_3j4lc_445 {
display: flex;
gap: 9px;
padding: 12px;
border-bottom: 1px solid #edf1f5;
}
._question_3j4lc_445:last-child {
border-bottom: 0;
}
._questionNumber_3j4lc_525 {
width: 22px;
height: 22px;
flex: 0 0 22px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
border-radius: 50%;
background: #f1f5f9;
color: #64748b;
font-size: 9px;
font-weight: 700;
}
._questionMain_3j4lc_567 {
min-width: 0;
flex: 1;
}
._questionLabel_3j4lc_577 {
display: block;
margin-bottom: 3px;
color: #273449;
font-size: 11px;
line-height: 1.4;
font-weight: 650;
}
._questionWhy_3j4lc_603 {
display: block;
margin-bottom: 8px;
color: #94a3b8;
font-size: 9px;
line-height: 1.35;
}
/* =========================================================
INPUT
========================================================= */
._input_3j4lc_633,
._textarea_3j4lc_635 {
width: 100%;
border: 1px solid #d9e1eb;
border-radius: 6px;
background: #ffffff;
color: #1e293b;
font-family: inherit;
font-size: 11px;
outline: none;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
._input_3j4lc_633 {
height: 34px;
padding: 0 9px;
}
._textarea_3j4lc_635 {
min-height: 76px;
padding: 8px 9px;
resize: vertical;
line-height: 1.45;
}
._input_3j4lc_633::placeholder,
._textarea_3j4lc_635::placeholder {
color: #a0aec0;
}
._input_3j4lc_633:focus,
._textarea_3j4lc_635:focus {
border-color: #93b4ed;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}
/* =========================================================
MULTI SELECT
========================================================= */
._options_3j4lc_737 {
display: flex;
flex-direction: column;
gap: 5px;
}
._option_3j4lc_737 {
min-height: 33px;
padding: 7px 9px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #e1e7ef;
border-radius: 6px;
background: #ffffff;
color: #475569;
font-size: 10px;
cursor: pointer;
transition:
border-color 0.15s ease,
background 0.15s ease;
}
._option_3j4lc_737:hover {
border-color: #cbd8ea;
background: #f8fbff;
}
._option_3j4lc_737 input {
position: absolute;
opacity: 0;
pointer-events: none;
}
._checkbox_3j4lc_827 {
width: 15px;
height: 15px;
flex: 0 0 15px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #cbd5e1;
border-radius: 4px;
color: #ffffff;
font-size: 10px;
}
._optionSelected_3j4lc_863 {
border-color: #93b4ed;
background: #f5f9ff;
color: #2563eb;
}
._optionSelected_3j4lc_863 ._checkbox_3j4lc_827 {
border-color: #2563eb;
background: #2563eb;
}
/* =========================================================
CENTER STATES
========================================================= */
._centerState_3j4lc_897 {
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
text-align: center;
color: #718096;
}
._centerState_3j4lc_897 strong {
color: #334155;
font-size: 12px;
}
._centerState_3j4lc_897 span {
max-width: 420px;
font-size: 10px;
line-height: 1.4;
}
._spinner_3j4lc_955 {
animation: _spin_3j4lc_955 0.9s linear infinite;
}
._centerState_3j4lc_897 > ._spinner_3j4lc_955 {
color: #2563eb;
font-size: 25px;
}
._errorIcon_3j4lc_975 {
color: #dc2626;
font-size: 27px;
}
._successIcon_3j4lc_987 {
color: #16a34a;
font-size: 27px;
}
._retryButton_3j4lc_999 {
height: 30px;
margin-top: 4px;
padding: 0 11px;
border: 1px solid #d7e0ea;
border-radius: 6px;
background: #ffffff;
color: #2563eb;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._retryButton_3j4lc_999:hover {
background: #f8fafc;
}
@keyframes _spin_3j4lc_955 {
to {
transform: rotate(360deg);
}
}
/* =========================================================
FOOTER
========================================================= */
._footer_3j4lc_1065 {
flex: 0 0 auto;
min-height: 57px;
padding: 9px 17px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border-top: 1px solid #e5eaf0;
background: #ffffff;
}
._summary_3j4lc_1101 {
display: flex;
align-items: center;
gap: 6px;
color: #7b8798;
font-size: 10px;
}
._summary_3j4lc_1101 svg {
color: #64748b;
font-size: 13px;
}
._summary_3j4lc_1101 strong {
color: #334155;
font-weight: 700;
}
._actions_3j4lc_1147 {
display: flex;
align-items: center;
gap: 7px;
}
._cancelButton_3j4lc_1161,
._submitButton_3j4lc_1163 {
height: 33px;
padding: 0 13px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 6px;
font-size: 10px;
font-weight: 650;
cursor: pointer;
}
._cancelButton_3j4lc_1161 {
border: 1px solid #d7e0ea;
background: #ffffff;
color: #475569;
}
._cancelButton_3j4lc_1161:hover {
background: #f8fafc;
}
._submitButton_3j4lc_1163 {
border: 1px solid #2563eb;
background: #2563eb;
color: #ffffff;
}
._submitButton_3j4lc_1163:hover {
background: #1d4ed8;
}
._cancelButton_3j4lc_1161:disabled,
._submitButton_3j4lc_1163:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 700px) {
._overlay_3j4lc_1 {
padding: 10px;
}
._modal_3j4lc_31 {
height: 94vh;
max-height: 94vh;
border-radius: 9px;
}
._header_3j4lc_79 {
padding: 11px 13px;
}
._body_3j4lc_279 {
padding: 10px;
}
._footer_3j4lc_1065 {
align-items: stretch;
flex-direction: column;
}
._summary_3j4lc_1101 {
justify-content: center;
}
._actions_3j4lc_1147 {
justify-content: flex-end;
}
}
._overlay_1c0zz_1 {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(2px);
}
._modal_1c0zz_31 {
width: min(1040px, 100%);
height: min(820px, calc(100vh - 48px));
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
border: 1px solid #e1e7ef;
border-radius: 12px;
box-shadow:
0 24px 70px rgba(15, 23, 42, 0.18),
0 8px 24px rgba(15, 23, 42, 0.08);
}
/* =========================================================
HEADER
========================================================= */
._header_1c0zz_75 {
flex: 0 0 auto;
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid #e8edf3;
}
._headerLeft_1c0zz_103 {
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
}
._headerIcon_1c0zz_121 {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #eff6ff;
color: #2563eb;
font-size: 18px;
}
._headerContent_1c0zz_155 {
min-width: 0;
}
._headerContent_1c0zz_155 h2 {
margin: 0;
color: #172033;
font-size: 16px;
line-height: 1.25;
font-weight: 700;
}
._headerContent_1c0zz_155 p {
margin: 4px 0 0;
color: #718096;
font-size: 11px;
line-height: 1.35;
}
._closeButton_1c0zz_201 {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: transparent;
color: #64748b;
font-size: 16px;
cursor: pointer;
}
._closeButton_1c0zz_201:hover {
background: #f1f5f9;
color: #334155;
}
._closeButton_1c0zz_201:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================
SUMMARY
========================================================= */
._summaryBar_1c0zz_267 {
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid #e8edf3;
background: #f8fafc;
}
._summaryItem_1c0zz_287 {
min-height: 62px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 16px;
border-right: 1px solid #e8edf3;
}
._summaryItem_1c0zz_287:last-child {
border-right: 0;
}
._summaryItem_1c0zz_287 strong {
color: #172033;
font-size: 17px;
line-height: 1;
font-weight: 700;
}
._summaryItem_1c0zz_287 span {
margin-top: 4px;
color: #718096;
font-size: 10px;
line-height: 1.2;
}
._summaryWarning_1c0zz_353 strong {
color: #d97706;
}
._summaryComplete_1c0zz_361 strong {
color: #16a34a;
}
/* =========================================================
TOOLBAR
========================================================= */
._toolbar_1c0zz_377 {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 16px;
border-bottom: 1px solid #e8edf3;
background: #ffffff;
}
._filterTabs_1c0zz_403 {
display: flex;
align-items: center;
gap: 4px;
}
._filterButton_1c0zz_417,
._filterActive_1c0zz_419 {
height: 30px;
padding: 0 11px;
border: 1px solid #e1e7ef;
border-radius: 6px;
background: #ffffff;
color: #64748b;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._filterButton_1c0zz_417:hover {
border-color: #bfd0ea;
color: #2563eb;
}
._filterActive_1c0zz_419 {
border-color: #bfdbfe;
background: #eff6ff;
color: #2563eb;
}
/* =========================================================
BODY
========================================================= */
._body_1c0zz_483 {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 12px 16px 16px;
background: #f8fafc;
}
._body_1c0zz_483::-webkit-scrollbar {
width: 7px;
}
._body_1c0zz_483::-webkit-scrollbar-track {
background: transparent;
}
._body_1c0zz_483::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 20px;
}
._list_1c0zz_535 {
display: flex;
flex-direction: column;
gap: 8px;
}
/* =========================================================
DOCUMENT CARD
========================================================= */
._documentCard_1c0zz_557 {
overflow: hidden;
border: 1px solid #e1e7ef;
border-radius: 9px;
background: #ffffff;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
._documentCard_1c0zz_557:hover {
border-color: #cbd5e1;
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}
._documentCardSuccess_1c0zz_595 {
border-color: #bbf7d0;
}
/* =========================================================
CARD HEADER
========================================================= */
._cardHeader_1c0zz_611 {
min-height: 72px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
}
._cardNumber_1c0zz_633 {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #f1f5f9;
color: #64748b;
font-size: 10px;
font-weight: 700;
}
._cardMain_1c0zz_669 {
flex: 1 1 auto;
min-width: 0;
}
._cardTitleRow_1c0zz_679 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
._cardTitleRow_1c0zz_679 > div {
min-width: 0;
}
._requirementCode_1c0zz_703 {
display: block;
margin-bottom: 2px;
color: #2563eb;
font-size: 9px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.03em;
}
._cardTitleRow_1c0zz_679 h3 {
margin: 0;
overflow: hidden;
color: #172033;
font-size: 12px;
line-height: 1.3;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
._statusPill_1c0zz_759 {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 7px;
border-radius: 5px;
font-size: 9px;
line-height: 1;
font-weight: 650;
white-space: nowrap;
}
._statusUpload_1c0zz_797 {
background: #fff7ed;
color: #c2410c;
}
._statusPending_1c0zz_807 {
background: #eff6ff;
color: #2563eb;
}
._statusAi_1c0zz_817 {
background: #f5f3ff;
color: #7c3aed;
}
._statusSuccess_1c0zz_827 {
background: #f0fdf4;
color: #15803d;
}
._statusDanger_1c0zz_837 {
background: #fef2f2;
color: #dc2626;
}
._statusDefault_1c0zz_847 {
background: #f1f5f9;
color: #64748b;
}
._reason_1c0zz_857 {
margin: 4px 0 0;
color: #64748b;
font-size: 9px;
line-height: 1.3;
}
._meta_1c0zz_875 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;
}
._meta_1c0zz_875 span {
padding: 2px 5px;
border-radius: 4px;
background: #f8fafc;
color: #718096;
font-size: 8px;
line-height: 1.2;
}
._expandButton_1c0zz_921 {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e2e8f0;
border-radius: 6px;
background: #ffffff;
color: #64748b;
cursor: pointer;
}
._expandButton_1c0zz_921:hover {
background: #f8fafc;
color: #2563eb;
}
._chevronExpanded_1c0zz_967 {
transform: rotate(180deg);
}
/* =========================================================
DETAILS
========================================================= */
._details_1c0zz_983 {
padding: 0 12px 12px 49px;
border-top: 1px solid #edf1f5;
background: #fcfdff;
}
._detailBlock_1c0zz_997 {
padding-top: 10px;
}
._detailTitle_1c0zz_1005 {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 6px;
color: #475569;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
._detailTitle_1c0zz_1005 svg {
color: #2563eb;
font-size: 12px;
}
._sourceInfo_1c0zz_1047 {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
border: 1px solid #e5eaf0;
border-radius: 6px;
background: #ffffff;
}
._sourceInfo_1c0zz_1047 strong {
color: #334155;
font-size: 10px;
}
._sourceInfo_1c0zz_1047 span {
color: #94a3b8;
font-size: 9px;
}
/* =========================================================
QUESTIONS
========================================================= */
._questionList_1c0zz_1107 {
display: flex;
flex-direction: column;
gap: 5px;
}
._questionItem_1c0zz_1121 {
display: flex;
gap: 7px;
padding: 7px 8px;
border: 1px solid #e5eaf0;
border-radius: 6px;
background: #ffffff;
}
._questionItem_1c0zz_1121 > span {
width: 18px;
height: 18px;
flex: 0 0 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
background: #eff6ff;
color: #2563eb;
font-size: 8px;
font-weight: 700;
}
._questionItem_1c0zz_1121 > div {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
._questionItem_1c0zz_1121 strong {
color: #475569;
font-size: 9px;
line-height: 1.35;
}
._questionItem_1c0zz_1121 small {
color: #94a3b8;
font-size: 8px;
line-height: 1.3;
}
/* =========================================================
UPLOAD AREA
========================================================= */
._uploadArea_1c0zz_1237 {
margin-top: 10px;
padding: 10px;
border: 1px dashed #bfdbfe;
border-radius: 7px;
background: #f8fbff;
}
._uploadTitle_1c0zz_1259 {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
._uploadTitle_1c0zz_1259 > svg {
color: #2563eb;
font-size: 17px;
}
._uploadTitle_1c0zz_1259 > div {
display: flex;
flex-direction: column;
gap: 2px;
}
._uploadTitle_1c0zz_1259 strong {
color: #334155;
font-size: 10px;
}
._uploadTitle_1c0zz_1259 span {
color: #94a3b8;
font-size: 8px;
}
/* =========================================================
FILE PICKER
========================================================= */
._filePicker_1c0zz_1333 {
min-height: 58px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px;
border: 1px dashed #cbd5e1;
border-radius: 6px;
background: #ffffff;
color: #2563eb;
cursor: pointer;
}
._filePicker_1c0zz_1333:hover {
border-color: #93c5fd;
background: #f8fbff;
}
._filePicker_1c0zz_1333 span {
font-size: 10px;
font-weight: 650;
}
._filePicker_1c0zz_1333 small {
color: #94a3b8;
font-size: 8px;
}
._filePicker_1c0zz_1333 input {
display: none;
}
/* =========================================================
SELECTED FILE
========================================================= */
._selectedFile_1c0zz_1421 {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border: 1px solid #bbf7d0;
border-radius: 6px;
background: #f0fdf4;
}
._fileIcon_1c0zz_1449 {
width: 29px;
height: 29px;
flex: 0 0 29px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: #dcfce7;
color: #16a34a;
}
._fileInfo_1c0zz_1479 {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
._fileInfo_1c0zz_1479 strong {
overflow: hidden;
color: #334155;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
._fileInfo_1c0zz_1479 span {
color: #94a3b8;
font-size: 8px;
}
._selectedFile_1c0zz_1421 > button {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 5px;
background: transparent;
color: #64748b;
cursor: pointer;
}
._selectedFile_1c0zz_1421 > button:hover {
background: #fee2e2;
color: #dc2626;
}
/* =========================================================
NOTE
========================================================= */
._noteField_1c0zz_1585 {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
}
._noteField_1c0zz_1585 label {
color: #64748b;
font-size: 9px;
font-weight: 650;
}
._noteField_1c0zz_1585 input {
width: 100%;
height: 32px;
padding: 0 9px;
border: 1px solid #dce3eb;
border-radius: 5px;
outline: none;
background: #ffffff;
color: #334155;
font-size: 9px;
}
._noteField_1c0zz_1585 input:focus {
border-color: #93c5fd;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}
/* =========================================================
LATEST DOCUMENT
========================================================= */
._latestDocument_1c0zz_1669 {
display: flex;
align-items: center;
gap: 7px;
margin-top: 10px;
padding: 8px;
border: 1px solid #dcfce7;
border-radius: 6px;
background: #f0fdf4;
}
._latestDocument_1c0zz_1669 > svg {
color: #16a34a;
}
._latestDocument_1c0zz_1669 div {
display: flex;
flex-direction: column;
gap: 2px;
}
._latestDocument_1c0zz_1669 strong {
color: #166534;
font-size: 9px;
}
._latestDocument_1c0zz_1669 span {
color: #65a30d;
font-size: 8px;
}
/* =========================================================
QUICK UPLOAD
========================================================= */
._quickUpload_1c0zz_1753 {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px 10px 49px;
}
._quickPicker_1c0zz_1771 {
min-height: 30px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 9px;
border: 1px dashed #bfdbfe;
border-radius: 5px;
background: #f8fbff;
color: #2563eb;
font-size: 9px;
font-weight: 600;
cursor: pointer;
}
._quickPicker_1c0zz_1771 input {
display: none;
}
._quickSelected_1c0zz_1823 {
min-width: 0;
flex: 1;
display: flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 0 8px;
border-radius: 5px;
background: #f0fdf4;
color: #15803d;
}
._quickSelected_1c0zz_1823 span {
min-width: 0;
overflow: hidden;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
._quickSelected_1c0zz_1823 small {
flex: 0 0 auto;
color: #65a30d;
font-size: 8px;
}
._quickSelected_1c0zz_1823 button {
width: 22px;
height: 22px;
flex: 0 0 22px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 4px;
background: transparent;
color: #64748b;
cursor: pointer;
}
._detailsButton_1c0zz_1935 {
height: 30px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 8px;
border: 1px solid #e1e7ef;
border-radius: 5px;
background: #ffffff;
color: #64748b;
font-size: 9px;
cursor: pointer;
}
._detailsButton_1c0zz_1935:hover {
color: #2563eb;
border-color: #bfdbfe;
}
/* =========================================================
CENTER STATES
========================================================= */
._centerState_1c0zz_1995 {
min-height: 360px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
color: #64748b;
text-align: center;
}
._centerState_1c0zz_1995 strong {
color: #334155;
font-size: 12px;
}
._centerState_1c0zz_1995 > span {
max-width: 380px;
color: #94a3b8;
font-size: 10px;
}
._spinner_1c0zz_2053 {
animation: _spin_1c0zz_2053 0.9s linear infinite;
}
._centerState_1c0zz_1995 ._spinner_1c0zz_2053 {
color: #2563eb;
font-size: 20px;
}
._errorIcon_1c0zz_2071,
._successIcon_1c0zz_2073 {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 17px;
}
._errorIcon_1c0zz_2071 {
background: #fef2f2;
color: #dc2626;
}
._successIcon_1c0zz_2073 {
background: #f0fdf4;
color: #16a34a;
}
._retryButton_1c0zz_2119 {
height: 30px;
padding: 0 10px;
border: 1px solid #bfdbfe;
border-radius: 5px;
background: #ffffff;
color: #2563eb;
font-size: 9px;
font-weight: 600;
cursor: pointer;
}
._retryButton_1c0zz_2119:hover {
background: #eff6ff;
}
/* =========================================================
SUBMIT ERROR
========================================================= */
._submitError_1c0zz_2169 {
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 10px;
padding: 9px 10px;
border: 1px solid #fecaca;
border-radius: 6px;
background: #fef2f2;
color: #b91c1c;
font-size: 9px;
line-height: 1.4;
}
._submitError_1c0zz_2169 svg {
flex: 0 0 auto;
margin-top: 1px;
}
/* =========================================================
FOOTER
========================================================= */
._footer_1c0zz_2229 {
flex: 0 0 auto;
min-height: 62px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 10px 16px;
border-top: 1px solid #e8edf3;
background: #ffffff;
}
._footerSummary_1c0zz_2265 {
display: flex;
align-items: center;
gap: 6px;
color: #64748b;
font-size: 10px;
}
._footerSummary_1c0zz_2265 svg {
color: #2563eb;
}
._footerSummary_1c0zz_2265 strong {
color: #334155;
}
._actions_1c0zz_2303 {
display: flex;
align-items: center;
gap: 7px;
}
._cancelButton_1c0zz_2317,
._submitButton_1c0zz_2319 {
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 12px;
border-radius: 6px;
font-size: 10px;
font-weight: 650;
cursor: pointer;
}
._cancelButton_1c0zz_2317 {
border: 1px solid #dce3eb;
background: #ffffff;
color: #64748b;
}
._cancelButton_1c0zz_2317:hover {
background: #f8fafc;
color: #334155;
}
._submitButton_1c0zz_2319 {
border: 1px solid #2563eb;
background: #2563eb;
color: #ffffff;
}
._submitButton_1c0zz_2319:hover {
background: #1d4ed8;
}
._submitButton_1c0zz_2319:disabled,
._cancelButton_1c0zz_2317:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* =========================================================
ANIMATION
========================================================= */
@keyframes _spin_1c0zz_2053 {
to {
transform: rotate(360deg);
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 760px) {
._overlay_1c0zz_1 {
padding: 10px;
}
._modal_1c0zz_31 {
height: calc(100vh - 20px);
border-radius: 9px;
}
._summaryBar_1c0zz_267 {
grid-template-columns: repeat(2, 1fr);
}
._summaryItem_1c0zz_287:nth-child(2) {
border-right: 0;
}
._summaryItem_1c0zz_287:nth-child(-n + 2) {
border-bottom: 1px solid #e8edf3;
}
._cardTitleRow_1c0zz_679 {
align-items: flex-start;
flex-direction: column;
gap: 5px;
}
._quickUpload_1c0zz_1753 {
padding-left: 12px;
}
._details_1c0zz_983 {
padding-left: 12px;
}
._footer_1c0zz_2229 {
align-items: flex-start;
flex-direction: column;
}
._actions_1c0zz_2303 {
width: 100%;
}
._cancelButton_1c0zz_2317,
._submitButton_1c0zz_2319 {
flex: 1;
}
}
._overlay_1htke_1 {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.58);
backdrop-filter: blur(4px);
}
._modal_1htke_31 {
width: min(1280px, 96vw);
height: min(900px, 94vh);
display: flex;
flex-direction: column;
overflow: hidden;
background: #f8fafc;
border: 1px solid #dbe3ef;
border-radius: 14px;
box-shadow:
0 24px 70px rgba(15, 23, 42, 0.25),
0 4px 14px rgba(15, 23, 42, 0.1);
}
/* =========================================================
HEADER
========================================================= */
._header_1htke_75 {
flex: 0 0 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
}
._headerLeft_1htke_105 {
min-width: 0;
display: flex;
align-items: center;
gap: 11px;
}
._fileIcon_1htke_121 {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
color: #2563eb;
background: #eff6ff;
border-radius: 9px;
font-size: 18px;
}
._titleBlock_1htke_157 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._titleBlock_1htke_157 h2 {
margin: 0;
color: #1e293b;
font-size: 15px;
line-height: 1.25;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._titleBlock_1htke_157 span {
color: #94a3b8;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
}
._headerActions_1htke_219 {
display: flex;
align-items: center;
gap: 7px;
}
._secondaryButton_1htke_231,
._primaryButton_1htke_233,
._closeButton_1htke_235 {
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 7px;
font-size: 11px;
font-weight: 650;
cursor: pointer;
}
._secondaryButton_1htke_231 {
padding: 0 11px;
color: #334155;
background: #ffffff;
border: 1px solid #d7e0eb;
}
._secondaryButton_1htke_231:hover {
background: #f8fafc;
border-color: #b9c7d8;
}
._primaryButton_1htke_233 {
padding: 0 13px;
color: #ffffff;
background: #2563eb;
border: 1px solid #2563eb;
}
._primaryButton_1htke_233:hover {
background: #1d4ed8;
}
._primaryButton_1htke_233:disabled,
._secondaryButton_1htke_231:disabled {
opacity: 0.55;
cursor: not-allowed;
}
._closeButton_1htke_235 {
width: 34px;
padding: 0;
color: #64748b;
background: #ffffff;
border: 1px solid #d7e0eb;
}
._closeButton_1htke_235:hover {
color: #ef4444;
background: #fef2f2;
}
/* =========================================================
ERROR
========================================================= */
._error_1htke_373 {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 14px;
color: #b91c1c;
background: #fef2f2;
border-bottom: 1px solid #fecaca;
font-size: 11px;
}
._error_1htke_373 button {
display: flex;
padding: 3px;
color: inherit;
background: transparent;
border: 0;
cursor: pointer;
}
/* =========================================================
TOOLBAR
========================================================= */
._toolbar_1htke_445 {
flex: 0 0 46px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 14px;
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
}
._toolbarLeft_1htke_471,
._toolbarRight_1htke_473 {
display: flex;
align-items: center;
gap: 7px;
}
._toolbar_1htke_445 button {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #475569;
background: #ffffff;
border: 1px solid #dbe3ed;
border-radius: 6px;
cursor: pointer;
}
._toolbar_1htke_445 button:hover {
color: #2563eb;
background: #f8fafc;
}
._toolbar_1htke_445 button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
._toolbar_1htke_445 span {
min-width: 45px;
color: #64748b;
font-size: 10px;
font-weight: 650;
text-align: center;
}
/* =========================================================
BODY
========================================================= */
._body_1htke_569 {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
background: #eef2f7;
}
._loading_1htke_587,
._empty_1htke_589 {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
color: #64748b;
font-size: 12px;
}
/* =========================================================
PDF
========================================================= */
._pdfViewer_1htke_627 {
width: 100%;
height: 100%;
overflow: auto;
display: flex;
justify-content: center;
padding: 28px;
}
._pdfViewer_1htke_627 > div {
height: max-content;
}
/* =========================================================
IMAGE
========================================================= */
._imageViewer_1htke_667 {
width: 100%;
height: 100%;
overflow: auto;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 28px;
}
._imageViewer_1htke_667 img {
display: block;
max-width: none;
height: auto;
object-fit: contain;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
background: #ffffff;
}
/* =========================================================
DOCUMENT
========================================================= */
._documentViewer_1htke_727 {
width: 100%;
height: 100%;
overflow: auto;
padding: 32px;
}
._documentPage_1htke_745 {
width: min(850px, 100%);
min-height: 1050px;
margin: 0 auto;
padding: 55px;
background: #ffffff;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
}
._documentTitle_1htke_773 {
padding-bottom: 20px;
margin-bottom: 24px;
color: #1e293b;
font-size: 22px;
font-weight: 700;
border-bottom: 1px solid #e2e8f0;
}
._documentContent_1htke_797 {
color: #334155;
font-size: 13px;
line-height: 1.8;
white-space: pre-wrap;
}
._emptyContent_1htke_815 {
color: #94a3b8;
}
/* =========================================================
EDITOR
========================================================= */
._editor_1htke_831 {
width: 100%;
height: 100%;
overflow: auto;
padding: 30px;
}
._editorPage_1htke_849 {
width: min(900px, 100%);
min-height: 100%;
margin: 0 auto;
padding: 35px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(15, 23, 42, 0.08);
}
._titleInput_1htke_883 {
width: 100%;
margin-bottom: 18px;
padding: 11px 12px;
color: #1e293b;
font-size: 18px;
font-weight: 700;
background: #ffffff;
border: 1px solid #dbe3ed;
border-radius: 7px;
outline: none;
}
._titleInput_1htke_883:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
._contentEditor_1htke_931 {
width: 100%;
min-height: 650px;
resize: vertical;
padding: 14px;
color: #334155;
font-family: Inter, Arial, sans-serif;
font-size: 13px;
line-height: 1.7;
border: 1px solid #dbe3ed;
border-radius: 7px;
outline: none;
}
._contentEditor_1htke_931:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
/* =========================================================
FOOTER
========================================================= */
._footer_1htke_991 {
flex: 0 0 48px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 14px;
background: #ffffff;
border-top: 1px solid #e2e8f0;
}
._footer_1htke_991 > div {
min-width: 0;
display: flex;
align-items: center;
gap: 9px;
}
._footer_1htke_991 strong {
color: #334155;
font-size: 10px;
}
._footer_1htke_991 span {
max-width: 450px;
color: #94a3b8;
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._closeFooterButton_1htke_1071 {
height: 30px;
padding: 0 12px;
color: #475569;
background: #ffffff;
border: 1px solid #dbe3ed;
border-radius: 6px;
font-size: 10px;
font-weight: 650;
cursor: pointer;
}
._closeFooterButton_1htke_1071:hover {
background: #f8fafc;
}
/* =========================================================
ANIMATION
========================================================= */
._spin_1htke_1121 {
animation: _spin_1htke_1121 0.9s linear infinite;
}
@keyframes _spin_1htke_1121 {
to {
transform: rotate(360deg);
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 800px) {
._overlay_1htke_1 {
padding: 8px;
}
._modal_1htke_31 {
width: 100%;
height: 96vh;
}
._header_1htke_75 {
padding: 8px 10px;
}
._headerActions_1htke_219 {
gap: 4px;
}
._secondaryButton_1htke_231,
._primaryButton_1htke_233 {
padding: 0 8px;
}
._secondaryButton_1htke_231 {
font-size: 0;
}
._secondaryButton_1htke_231 svg {
font-size: 14px;
}
._documentPage_1htke_745 {
padding: 28px;
}
._editor_1htke_831 {
padding: 12px;
}
._editorPage_1htke_849 {
padding: 20px;
}
}
/* =========================================================
FOOTER
========================================================= */
._footer_1htke_991 {
flex: 0 0 auto;
min-height: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: #ffffff;
border-top: 1px solid #e2e8f0;
}
._footerInfo_1htke_1277 {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
}
._footerInfo_1htke_1277 strong {
flex: 0 0 auto;
color: #0f172a;
font-size: 12px;
font-weight: 700;
}
._footerInfo_1htke_1277 span {
min-width: 0;
color: #64748b;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._footerActions_1htke_1335 {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
}
/* =========================================================
FOOTER BUTTONS
========================================================= */
._cancelButton_1htke_1359,
._saveFooterButton_1htke_1361,
._closeFooterButton_1htke_1071 {
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 13px;
border-radius: 6px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease,
opacity 0.15s ease;
}
/* Cancel */
._cancelButton_1htke_1359 {
color: #475569;
background: #ffffff;
border: 1px solid #cbd5e1;
}
._cancelButton_1htke_1359:hover:not(:disabled) {
background: #f8fafc;
border-color: #94a3b8;
color: #1e293b;
}
/* Save Changes */
._saveFooterButton_1htke_1361 {
color: #ffffff;
background: #2563eb;
border: 1px solid #2563eb;
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18);
}
._saveFooterButton_1htke_1361:hover:not(:disabled) {
background: #1d4ed8;
border-color: #1d4ed8;
}
._saveFooterButton_1htke_1361:active:not(:disabled) {
transform: translateY(1px);
}
/* Close */
._closeFooterButton_1htke_1071 {
color: #334155;
background: #ffffff;
border: 1px solid #cbd5e1;
}
._closeFooterButton_1htke_1071:hover:not(:disabled) {
color: #0f172a;
background: #f8fafc;
border-color: #94a3b8;
}
/* Disabled */
._cancelButton_1htke_1359:disabled,
._saveFooterButton_1htke_1361:disabled,
._closeFooterButton_1htke_1071:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* Icons */
._cancelButton_1htke_1359 svg,
._saveFooterButton_1htke_1361 svg,
._closeFooterButton_1htke_1071 svg {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 700px) {
._footer_1htke_991 {
min-height: 64px;
height: auto;
padding: 10px 12px;
align-items: flex-start;
}
._footerInfo_1htke_1277 {
max-width: 45%;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
._footerActions_1htke_1335 {
gap: 6px;
}
._cancelButton_1htke_1359,
._saveFooterButton_1htke_1361,
._closeFooterButton_1htke_1071 {
height: 32px;
padding: 0 10px;
font-size: 11px;
}
}
/* =========================================================
MARKDOWN DOCUMENT
========================================================= */
._documentContent_1htke_797 {
width: 100%;
color: #26364d;
font-size: 14px;
line-height: 1.75;
}
/* =========================================================
HEADINGS
========================================================= */
._markdownH1_1htke_1643 {
margin: 0 0 22px;
padding-bottom: 12px;
color: #1e293b;
font-size: 28px;
line-height: 1.25;
font-weight: 750;
border-bottom: 1px solid #e2e8f0;
}
._markdownH2_1htke_1669 {
margin: 30px 0 10px;
color: #1e293b;
font-size: 20px;
line-height: 1.35;
font-weight: 700;
}
._markdownH3_1htke_1689 {
margin: 22px 0 8px;
color: #334155;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
}
._markdownH4_1htke_1709 {
margin: 18px 0 7px;
color: #475569;
font-size: 14px;
line-height: 1.4;
font-weight: 700;
}
/* =========================================================
PARAGRAPHS
========================================================= */
._markdownParagraph_1htke_1737 {
margin: 0 0 14px;
color: #334155;
font-size: 14px;
line-height: 1.75;
}
/* =========================================================
STRONG / EMPHASIS
========================================================= */
._markdownStrong_1htke_1763 {
color: #1e293b;
font-weight: 700;
}
._markdownEm_1htke_1773 {
color: #475569;
}
/* =========================================================
LISTS
========================================================= */
._markdownList_1htke_1789,
._markdownOrderedList_1htke_1791 {
margin: 8px 0 18px;
padding-left: 24px;
color: #334155;
}
._markdownList_1htke_1789 {
list-style: disc;
}
._markdownOrderedList_1htke_1791 {
list-style: decimal;
}
._markdownListItem_1htke_1821 {
margin: 4px 0;
padding-left: 4px;
line-height: 1.65;
}
._markdownListItem_1htke_1821::marker {
color: #64748b;
}
/* =========================================================
TABLES - remark-gfm
========================================================= */
._markdownTableWrapper_1htke_1851 {
width: 100%;
margin: 18px 0 24px;
overflow-x: auto;
border: 1px solid #dbe3ec;
border-radius: 7px;
}
._markdownTable_1htke_1851 {
width: 100%;
min-width: 620px;
border-collapse: collapse;
background: #ffffff;
font-size: 12px;
line-height: 1.5;
}
._markdownThead_1htke_1895 {
background: #f1f5f9;
}
._markdownTh_1htke_1895 {
padding: 10px 12px;
color: #334155;
font-size: 11px;
font-weight: 700;
text-align: left;
border-right: 1px solid #dbe3ec;
border-bottom: 1px solid #cbd5e1;
}
._markdownTd_1htke_1929 {
padding: 9px 12px;
color: #475569;
vertical-align: top;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
._markdownTr_1htke_1951:last-child ._markdownTd_1htke_1929 {
border-bottom: 0;
}
._markdownTh_1htke_1895:last-child,
._markdownTd_1htke_1929:last-child {
border-right: 0;
}
._markdownTbody_1htke_1969 ._markdownTr_1htke_1951:nth-child(even) {
background: #f8fafc;
}
/* =========================================================
BLOCKQUOTE
========================================================= */
._markdownBlockquote_1htke_1985 {
margin: 18px 0;
padding: 10px 16px;
color: #475569;
background: #f8fafc;
border-left: 3px solid #3b82f6;
border-radius: 0 6px 6px 0;
}
._markdownBlockquote_1htke_1985 p {
margin: 0;
}
/* =========================================================
HORIZONTAL RULE
========================================================= */
._markdownHr_1htke_2025 {
margin: 26px 0;
border: 0;
border-top: 1px solid #e2e8f0;
}
/* =========================================================
CODE
========================================================= */
._markdownInlineCode_1htke_2047 {
padding: 2px 5px;
color: #334155;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 4px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 12px;
}
._markdownPre_1htke_2075 {
margin: 16px 0;
padding: 14px;
overflow-x: auto;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 7px;
}
._markdownCodeBlock_1htke_2099 {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 12px;
line-height: 1.6;
}
/* =========================================================
LINKS
========================================================= */
._markdownLink_1htke_2119 {
color: #2563eb;
text-decoration: none;
}
._markdownLink_1htke_2119:hover {
text-decoration: underline;
}
/* =========================================================
CHECKBOXES FROM GFM
========================================================= */
._documentContent_1htke_797 input[type="checkbox"] {
margin-right: 7px;
vertical-align: middle;
}
/* =========================================================
NESTED CONTENT
========================================================= */
._markdownList_1htke_1789 ._markdownList_1htke_1789,
._markdownOrderedList_1htke_1791 ._markdownList_1htke_1789,
._markdownList_1htke_1789 ._markdownOrderedList_1htke_1791,
._markdownOrderedList_1htke_1791 ._markdownOrderedList_1htke_1791 {
margin-top: 4px;
margin-bottom: 4px;
}
._overlay_19o2g_1 {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 16px;
}
._modal_19o2g_23 {
width: 100%;
max-width: 480px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
display: flex;
flex-direction: column;
max-height: 90vh;
overflow: hidden;
}
._header_19o2g_47 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid #e5e7eb;
}
._header_19o2g_47 h2 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #0f172a;
}
._closeButton_19o2g_77 {
border: none;
background: transparent;
color: #64748b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 6px;
}
._closeButton_19o2g_77:hover {
background: #f1f5f9;
}
._body_19o2g_109 {
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
._statusBlock_19o2g_125 {
display: flex;
align-items: center;
gap: 10px;
color: #475569;
font-size: 14px;
padding: 12px 0;
}
._spin_19o2g_143 {
animation: _spin_19o2g_143 1s linear infinite;
}
@keyframes _spin_19o2g_143 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
._banner_19o2g_169 {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 12px 14px;
border-radius: 8px;
font-size: 13px;
}
._banner_19o2g_169 strong {
display: block;
margin-bottom: 2px;
}
._banner_19o2g_169 span {
display: block;
}
._bannerError_19o2g_205 {
background: #fef2f2;
color: #991b1b;
}
._bannerWarning_19o2g_215 {
background: #fffbeb;
color: #92400e;
}
._bannerSuccess_19o2g_225 {
background: #f0fdf4;
color: #166534;
}
._checkList_19o2g_235 {
margin: 6px 0 0;
padding-left: 18px;
}
._checkList_19o2g_235 li {
margin-bottom: 2px;
}
._field_19o2g_253 {
display: flex;
flex-direction: column;
gap: 6px;
}
._field_19o2g_253 label {
font-size: 13px;
font-weight: 500;
color: #334155;
}
._field_19o2g_253 input {
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 9px 12px;
font-size: 14px;
color: #0f172a;
}
._field_19o2g_253 input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
._field_19o2g_253 input:disabled {
background: #f8fafc;
color: #94a3b8;
}
._bypassField_19o2g_315 {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: #334155;
background: #fff7ed;
border: 1px solid #fed7aa;
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
}
._bypassField_19o2g_315 input {
margin-top: 2px;
}
._footer_19o2g_349 {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 20px;
border-top: 1px solid #e5e7eb;
}
._cancelButton_19o2g_365 {
border: 1px solid #cbd5e1;
background: #ffffff;
color: #334155;
border-radius: 8px;
padding: 9px 16px;
font-size: 14px;
cursor: pointer;
}
._submitButton_19o2g_385 {
display: flex;
align-items: center;
gap: 8px;
border: none;
background: #2563eb;
color: #ffffff;
border-radius: 8px;
padding: 9px 18px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
._submitButton_19o2g_385:disabled {
background: #93c5fd;
cursor: not-allowed;
}
._successResult_19o2g_421 {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 12px 0 8px;
}
._successIcon_19o2g_437 {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #dcfce7;
color: #16a34a;
font-size: 26px;
margin-bottom: 12px;
}
._successResult_19o2g_421 h3 {
margin: 0 0 6px;
font-size: 18px;
font-weight: 600;
color: #166534;
}
._successResult_19o2g_421 p {
margin: 0;
color: #475569;
font-size: 13px;
line-height: 1.5;
}
._bypassNotice_19o2g_491 {
width: 100%;
box-sizing: border-box;
margin-top: 14px;
padding: 10px 12px;
border: 1px solid #fed7aa;
background: #fff7ed;
color: #9a3412;
border-radius: 8px;
font-size: 12px;
text-align: left;
}
._downloadActions_19o2g_517 {
width: 100%;
display: flex;
gap: 10px;
margin-top: 18px;
}
._downloadButton_19o2g_531 {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 8px;
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
border: none !important;
}
._proposalButton_19o2g_555 {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 8px;
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
/* border: none !important; */
}
._downloadButton_19o2g_531 {
background: #2563eb;
color: #ffffff;
}
._downloadButton_19o2g_531:hover {
background: #1d4ed8;
}
._proposalButton_19o2g_555 {
background: #ffffff;
color: #2563eb;
border: 1px solid #2563eb;
}
._proposalButton_19o2g_555:hover {
background: #eff6ff;
}
._packageName_19o2g_619 {
width: 100%;
box-sizing: border-box;
margin-top: 12px;
padding: 9px 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 7px;
color: #475569;
font-size: 11px;
text-align: left;
word-break: break-all;
}
._page_1w17s_1 {
width: 100%;
min-height: 100%;
padding: 10px;
background: #f7f9fc;
color: #172554;
box-sizing: border-box;
}
._topHeader_1w17s_19 {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: minmax(360px, 0.9fr) minmax(0, 2.1fr);
align-items: stretch;
margin: 0 0 10px;
padding: 0;
background: #ffffff;
border: 1px solid #dce5f1;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
}
/* LEFT */
._topHeader_1w17s_19 ._headerSection_1w17s_65 {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 7px;
padding: 12px 16px;
background: #ffffff;
border: 0;
}
/* RIGHT */
._topHeader_1w17s_19 ._metaCard_1w17s_99 {
min-width: 0;
display: grid;
grid-template-columns:
0.7fr
1.3fr
1.15fr
1.25fr
1.2fr
1fr;
margin: 0;
padding: 0;
background: #ffffff;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
}
/* META CELLS */
._topHeader_1w17s_19 ._metaItem_1w17s_151 {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 10px 11px;
border-left: 1px solid #e8edf5;
overflow: hidden;
}
/* LABEL */
._topHeader_1w17s_19 ._metaItem_1w17s_151 > span {
color: #64748b;
font-size: 9px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
/* VALUE */
._topHeader_1w17s_19 ._metaItem_1w17s_151 > strong {
min-width: 0;
display: flex;
align-items: center;
gap: 5px;
color: #243b82;
font-size: 10px;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._topHeader_1w17s_19 ._metaItem_1w17s_151 > strong svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
/* SMALL TEXT */
._topHeader_1w17s_19 ._metaItem_1w17s_151 small {
color: #64748b;
font-size: 8px;
line-height: 1.1;
}
/* TITLE */
._topHeader_1w17s_19 ._titleRow_1w17s_285 {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 10px;
}
._topHeader_1w17s_19 ._backButton_1w17s_303 {
width: 36px;
height: 36px;
flex: 0 0 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #dbe3ef;
border-radius: 7px;
background: #ffffff;
color: #475569;
}
._topHeader_1w17s_19 ._titleContent_1w17s_343 {
min-width: 0;
}
._topHeader_1w17s_19 ._titleContent_1w17s_343 h1 {
margin: 0;
color: #243b5a;
font-size: 20px;
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.25px;
}
._topHeader_1w17s_19 ._titleContent_1w17s_343 p {
margin: 5px 0 0;
color: #193b68;
font-size: 9px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* STATUS */
._topHeader_1w17s_19 ._statusPill_1w17s_409 {
width: fit-content;
display: inline-flex !important;
align-items: center;
gap: 5px;
padding: 3px 7px;
border-radius: 999px;
font-size: 9px !important;
}
/* COMPLETION */
._topHeader_1w17s_19 ._completionValue_1w17s_441 {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
._topHeader_1w17s_19 ._progressTrack_1w17s_459 {
flex: 1;
min-width: 25px;
height: 6px;
overflow: hidden;
border-radius: 999px;
background: #e2e8f0;
}
._topHeader_1w17s_19 ._progressFill_1w17s_487 {
height: 100%;
border-radius: inherit;
background: #1677e8;
}
/* =========================================================
META
========================================================= */
._metaCard_1w17s_99 {
display: grid;
grid-template-columns: 0.8fr 1.35fr 1.25fr 1.35fr 1.3fr 1.2fr;
background: #fff;
border: 1px solid #dce5f1;
border-radius: 7px;
overflow: hidden;
margin-bottom: 10px;
}
._metaItem_1w17s_151 {
min-width: 0;
padding: 10px 14px;
border-right: 1px solid #e8edf5;
display: flex;
flex-direction: column;
gap: 5px;
}
._metaItem_1w17s_151:last-child {
border-right: 0;
}
._metaItem_1w17s_151 > span {
color: #64748b;
font-size: 10px;
font-weight: 500;
}
._metaItem_1w17s_151 > strong {
min-width: 0;
display: flex;
align-items: center;
gap: 5px;
color: #243b82;
font-size: 11px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._metaItem_1w17s_151 > strong svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
._metaItem_1w17s_151 small {
color: #64748b;
font-size: 9px;
}
._statusPill_1w17s_409 {
width: fit-content;
display: inline-flex !important;
align-items: center;
gap: 5px;
padding: 4px 8px;
border-radius: 12px;
white-space: nowrap !important;
}
._statusDot_1w17s_637 {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
._statusSuccess_1w17s_651 {
color: #047857 !important;
background: #dcfce7;
}
._statusWarning_1w17s_661 {
color: #b45309 !important;
background: #fef3c7;
}
._statusDanger_1w17s_671 {
color: #dc2626 !important;
background: #fee2e2;
}
._statusPurple_1w17s_681 {
color: #7c3aed !important;
background: #ede9fe;
}
._statusDefault_1w17s_691 {
color: #475569 !important;
background: #f1f5f9;
}
/* =========================================================
COMPLETION
========================================================= */
._completionValue_1w17s_441 {
display: flex;
align-items: center;
gap: 7px;
}
._completionValue_1w17s_441 strong {
color: #1e3a8a;
font-size: 11px;
}
._progressTrack_1w17s_459 {
width: 90px;
height: 7px;
overflow: hidden;
border-radius: 8px;
background: #e2e8f0;
}
._progressFill_1w17s_487 {
height: 100%;
border-radius: inherit;
background: #1677e8;
transition: width 0.25s ease;
}
/* =========================================================
TABS
========================================================= */
._tabs_1w17s_769 {
height: 42px;
display: flex;
align-items: stretch;
gap: 4px;
padding: 0 8px;
background: #fff;
border: 1px solid #dce5f1;
border-radius: 7px;
margin-bottom: 10px;
}
._tabs_1w17s_769 button {
position: relative;
height: 100%;
padding: 0 15px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 0;
background: transparent;
font-size: 11px;
font-weight: 500;
}
._tabs_1w17s_769 button svg {
width: 14px;
height: 14px;
}
._activeTab_1w17s_829 {
color: #1264d8;
font-weight: 600 !important;
}
._activeTab_1w17s_829::after {
content: "";
position: absolute;
left: 9px;
right: 9px;
bottom: 0;
height: 2px;
border-radius: 2px 2px 0 0;
background: #1264d8;
}
._disabledTab_1w17s_861 {
color: #64748b;
cursor: default;
}
/* =========================================================
SUMMARY
========================================================= */
._summaryGrid_1w17s_879 {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin-bottom: 10px;
}
._summaryCard_1w17s_893 {
min-height: 66px;
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid #dce5f1;
border-radius: 7px;
}
._summaryIcon_1w17s_915 {
width: 34px;
height: 34px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
._summaryIcon_1w17s_915 svg {
width: 17px;
height: 17px;
}
._summaryCard_1w17s_893 > div:last-child {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
._summaryCard_1w17s_893 strong {
color: #172554;
font-size: 18px;
line-height: 1;
}
._summaryCard_1w17s_893 span {
color: #64748b;
font-size: 9px;
white-space: nowrap;
}
._blueIcon_1w17s_983 {
color: #1264d8;
background: #e7f0ff;
}
._greenIcon_1w17s_993 {
color: #059669;
background: #dcfce7;
}
._purpleIcon_1w17s_1003 {
color: #7c3aed;
background: #ede9fe;
}
._orangeIcon_1w17s_1013 {
color: #ea580c;
background: #ffedd5;
}
._yellowIcon_1w17s_1023 {
color: #ca8a04;
background: #fef9c3;
}
/* =========================================================
MAIN GRID
========================================================= */
._mainGrid_1w17s_1041 {
display: grid;
grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.95fr);
gap: 10px;
align-items: start;
}
._leftColumn_1w17s_1055,
._rightColumn_1w17s_1057 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
._card_1w17s_1071 {
background: #fff;
border: 1px solid #dce5f1;
border-radius: 7px;
overflow: hidden;
}
._sectionHeader_1w17s_1085 {
min-height: 58px;
padding: 11px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid #e8edf5;
}
._sectionHeader_1w17s_1085 h2 {
margin: 0;
color: #172554;
font-size: 14px;
font-weight: 700;
}
._sectionHeader_1w17s_1085 p {
margin: 3px 0 0;
color: #64748b;
font-size: 10px;
}
._checklistCount_1w17s_1131 {
min-width: 27px;
height: 27px;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #e8f1ff;
color: #1264d8;
font-size: 11px;
font-weight: 700;
}
/* =========================================================
EMPTY / PREPARE
========================================================= */
._prepareEmpty_1w17s_1167 {
min-height: 160px;
padding: 20px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 15px;
}
._prepareEmptyIcon_1w17s_1185 {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #eef2ff;
color: #6366f1;
}
._prepareEmptyIcon_1w17s_1185 svg {
width: 22px;
height: 22px;
}
._prepareEmpty_1w17s_1167 h3 {
margin: 0 0 5px;
color: #172554;
font-size: 14px;
}
._prepareEmpty_1w17s_1167 p {
margin: 0 0 5px;
color: #334155;
font-size: 11px;
font-weight: 600;
}
._prepareEmpty_1w17s_1167 span {
display: block;
color: #64748b;
font-size: 10px;
line-height: 1.5;
}
._prepareButton_1w17s_1259 {
min-width: 145px;
height: 36px;
padding: 0 13px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 0;
border-radius: 6px;
background: #1264d8;
color: #fff;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._prepareButton_1w17s_1259:hover {
background: #0d56be;
}
._prepareButton_1w17s_1259:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* =========================================================
TOOLBAR
========================================================= */
._toolbar_1w17s_1319 {
padding: 9px 12px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
border-bottom: 1px solid #e8edf5;
}
._searchBox_1w17s_1337 {
width: 220px;
height: 31px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 9px;
border: 1px solid #dbe3ef;
border-radius: 5px;
background: #fff;
}
._searchBox_1w17s_1337 svg {
width: 13px;
height: 13px;
color: #64748b;
flex-shrink: 0;
}
._searchBox_1w17s_1337 input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: #334155;
font-size: 10px;
}
._toolbar_1w17s_1319 select {
height: 31px;
padding: 0 8px;
border: 1px solid #dbe3ef;
border-radius: 5px;
background: #fff;
color: #475569;
font-size: 10px;
outline: 0;
}
/* =========================================================
TABLE
========================================================= */
._tableWrapper_1w17s_1425 {
width: 100%;
overflow-x: auto;
}
._tableWrapper_1w17s_1425 table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
._tableWrapper_1w17s_1425 th {
height: 35px;
padding: 0 10px;
background: #f8fafc;
color: #64748b;
border-bottom: 1px solid #e5eaf1;
text-align: left;
font-size: 9px;
font-weight: 600;
}
._tableWrapper_1w17s_1425 td {
padding: 9px 10px;
border-bottom: 1px solid #edf1f6;
color: #475569;
font-size: 10px;
vertical-align: middle;
}
._tableWrapper_1w17s_1425 tr:last-child td {
border-bottom: 0;
}
._tableWrapper_1w17s_1425 th:nth-child(1),
._tableWrapper_1w17s_1425 td:nth-child(1) {
width: 42px;
}
._tableWrapper_1w17s_1425 th:nth-child(2),
._tableWrapper_1w17s_1425 td:nth-child(2) {
width: 24%;
}
._tableWrapper_1w17s_1425 th:nth-child(3),
._tableWrapper_1w17s_1425 td:nth-child(3) {
width: 15%;
}
._tableWrapper_1w17s_1425 th:nth-child(4),
._tableWrapper_1w17s_1425 td:nth-child(4) {
width: 17%;
}
._tableWrapper_1w17s_1425 th:nth-child(5),
._tableWrapper_1w17s_1425 td:nth-child(5) {
width: 34%;
}
._documentCell_1w17s_1543,
._requirementCell_1w17s_1545,
._sourceAction_1w17s_1547 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._documentCell_1w17s_1543 strong {
color: #243b82;
font-size: 10px;
font-weight: 600;
}
._documentCell_1w17s_1543 span {
color: #94a3b8;
font-size: 9px;
}
._requirementCell_1w17s_1545 strong {
color: #475569;
font-size: 9px;
font-weight: 600;
}
._requirementCell_1w17s_1545 span {
color: #94a3b8;
font-size: 9px;
text-transform: capitalize;
}
._statusBadge_1w17s_1607 {
width: fit-content;
max-width: 100%;
padding: 4px 7px;
border-radius: 10px;
font-size: 8px;
font-weight: 600;
white-space: nowrap;
}
._sourceAction_1w17s_1547 {
align-items: flex-start;
}
._sourceAction_1w17s_1547 > span {
max-width: 100%;
color: #64748b;
font-size: 9px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._actionButton_1w17s_1653 {
min-height: 27px;
padding: 0 9px;
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid #bcd3f7;
border-radius: 5px;
background: #fff;
color: #1264d8;
font-size: 9px;
font-weight: 600;
}
._actionButton_1w17s_1653:disabled {
opacity: 1;
}
._actionButton_1w17s_1653 svg {
width: 12px;
height: 12px;
}
._noResults_1w17s_1699 {
min-height: 110px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
color: #94a3b8;
font-size: 10px;
}
._noResults_1w17s_1699 svg {
width: 14px;
height: 14px;
}
/* =========================================================
UNDERSTANDING
========================================================= */
._understandingGrid_1w17s_1737 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 25px;
padding: 5px 14px 12px;
}
._understandingColumn_1w17s_1751 {
min-width: 0;
}
._infoRow_1w17s_1759 {
min-height: 43px;
padding: 8px 0;
display: grid;
grid-template-columns: 125px minmax(0, 1fr);
gap: 10px;
border-bottom: 1px solid #edf1f6;
}
._infoRow_1w17s_1759:last-child {
border-bottom: 0;
}
._infoRow_1w17s_1759 span {
color: #64748b;
font-size: 9px;
}
._infoRow_1w17s_1759 strong {
color: #334155;
font-size: 10px;
font-weight: 500;
line-height: 1.45;
}
._executiveSummary_1w17s_1809 {
margin: 0 14px 14px;
padding: 11px;
border: 1px solid #e2e8f0;
border-radius: 6px;
background: #f8fafc;
}
._executiveSummary_1w17s_1809 strong {
display: block;
margin-bottom: 5px;
color: #243b82;
font-size: 10px;
}
._executiveSummary_1w17s_1809 p {
margin: 0;
color: #64748b;
font-size: 9px;
line-height: 1.55;
}
/* =========================================================
CATEGORIES
========================================================= */
._categoryGrid_1w17s_1861 {
padding: 12px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
}
._categoryCard_1w17s_1875 {
min-height: 58px;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #e4eaf2;
border-radius: 6px;
background: #fbfdff;
}
._categoryCard_1w17s_1875 > svg {
width: 16px;
height: 16px;
color: #1264d8;
flex-shrink: 0;
}
._categoryCard_1w17s_1875 div {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._categoryCard_1w17s_1875 strong {
color: #334155;
font-size: 9px;
font-weight: 600;
}
._categoryCard_1w17s_1875 span {
color: #94a3b8;
font-size: 8px;
}
/* =========================================================
SIDE HEADER
========================================================= */
._sideHeader_1w17s_1955 {
padding: 11px 12px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e8edf5;
}
._sideHeader_1w17s_1955 > div {
display: flex;
align-items: center;
gap: 7px;
}
._sideHeader_1w17s_1955 svg {
width: 16px;
height: 16px;
color: #1264d8;
}
._sideHeader_1w17s_1955 h2 {
margin: 0;
color: #172554;
font-size: 12px;
font-weight: 700;
}
._sideHeader_1w17s_1955 > strong {
color: #1264d8;
font-size: 10px;
}
/* =========================================================
NEXT ACTIONS
========================================================= */
._actionsList_1w17s_2027 {
padding: 5px 10px 9px;
}
._nextAction_1w17s_2035 {
min-height: 49px;
padding: 7px 0;
display: grid;
grid-template-columns: 23px minmax(0, 1fr) auto;
align-items: center;
gap: 7px;
border-bottom: 1px solid #edf1f6;
}
._nextAction_1w17s_2035:last-child {
border-bottom: 0;
}
._actionNumber_1w17s_2063 {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #edf4ff;
color: #1264d8;
font-size: 9px;
font-weight: 700;
}
._actionContent_1w17s_2089 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._actionContent_1w17s_2089 strong {
color: #334155;
font-size: 9px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._actionContent_1w17s_2089 span {
color: #94a3b8;
font-size: 8px;
}
._nextAction_1w17s_2035 button {
height: 26px;
padding: 0 8px;
border: 1px solid #9dc1f5;
border-radius: 5px;
background: #fff;
color: #1264d8;
font-size: 8px;
font-weight: 600;
}
/* =========================================================
PREPARE
========================================================= */
._prepareCard_1w17s_2161 {
padding-bottom: 12px;
}
._prepareCard_1w17s_2161 > p {
margin: 12px 12px 4px;
color: #334155;
font-size: 10px;
line-height: 1.45;
font-weight: 600;
}
._prepareCard_1w17s_2161 > span {
display: block;
margin: 0 12px 10px;
color: #64748b;
font-size: 9px;
line-height: 1.45;
}
._prepareCheck_1w17s_2201 {
margin: 0 12px 10px;
display: flex;
align-items: flex-start;
gap: 7px;
color: #475569;
font-size: 9px;
line-height: 1.4;
}
._prepareCheck_1w17s_2201 input {
margin-top: 1px;
accent-color: #1264d8;
}
._prepareAgainButton_1w17s_2231 {
width: calc(100% - 24px);
height: 34px;
margin: 0 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 0;
border-radius: 5px;
background: #1264d8;
color: #fff;
font-size: 10px;
font-weight: 600;
}
._prepareAgainButton_1w17s_2231:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* =========================================================
OPEN QUESTIONS
========================================================= */
._sideStats_1w17s_2281 {
padding: 13px 12px;
display: flex;
align-items: baseline;
gap: 7px;
}
._sideStats_1w17s_2281 strong {
color: #172554;
font-size: 21px;
}
._sideStats_1w17s_2281 span {
color: #64748b;
font-size: 9px;
}
/* =========================================================
VERIFICATION
========================================================= */
._verificationContent_1w17s_2323 {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 13px 10px;
}
._verificationContent_1w17s_2323 > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
border-right: 1px solid #e8edf5;
}
._verificationContent_1w17s_2323 > div:last-child {
border-right: 0;
}
._verificationContent_1w17s_2323 strong {
color: #172554;
font-size: 18px;
}
._verificationContent_1w17s_2323 span {
color: #64748b;
font-size: 8px;
text-align: center;
}
/* =========================================================
FILES
========================================================= */
._fileMiniList_1w17s_2389 {
padding: 3px 10px 7px;
}
._fileMiniRow_1w17s_2397 {
min-height: 42px;
padding: 6px 0;
display: grid;
grid-template-columns: 25px minmax(0, 1fr) auto;
align-items: center;
gap: 7px;
border-bottom: 1px solid #edf1f6;
}
._fileMiniRow_1w17s_2397:last-child {
border-bottom: 0;
}
._fileMiniIcon_1w17s_2425 {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: #edf4ff;
color: #1264d8;
}
._fileMiniIcon_1w17s_2425 svg {
width: 13px;
height: 13px;
}
._fileMiniRow_1w17s_2397 > div:nth-child(2) {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
._fileMiniRow_1w17s_2397 strong {
color: #334155;
font-size: 8px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._fileMiniRow_1w17s_2397 span {
color: #94a3b8;
font-size: 8px;
}
._processedIcon_1w17s_2499 {
width: 13px;
height: 13px;
color: #059669;
}
._moreFiles_1w17s_2511 {
padding: 4px 12px 10px;
color: #1264d8;
font-size: 8px;
font-weight: 600;
}
/* =========================================================
PACKAGE STATUS
========================================================= */
._packageStatus_1w17s_2533 {
padding: 11px 12px;
display: flex;
align-items: flex-start;
gap: 9px;
border: 1px solid #dbe7f7;
border-radius: 7px;
background: #f5f9ff;
}
._packageStatus_1w17s_2533 > svg {
width: 17px;
height: 17px;
color: #1264d8;
flex-shrink: 0;
}
._packageStatus_1w17s_2533 div {
display: flex;
flex-direction: column;
gap: 3px;
}
._packageStatus_1w17s_2533 strong {
color: #243b82;
font-size: 10px;
}
._packageStatus_1w17s_2533 span {
color: #64748b;
font-size: 8px;
line-height: 1.4;
}
/* =========================================================
EMPTY SIDE
========================================================= */
._emptySideState_1w17s_2609 {
min-height: 65px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #94a3b8;
font-size: 9px;
}
._emptySideState_1w17s_2609 svg {
width: 14px;
height: 14px;
}
/* =========================================================
ERROR
========================================================= */
._inlineError_1w17s_2649 {
min-height: 34px;
margin-bottom: 10px;
padding: 7px 10px;
display: flex;
align-items: center;
gap: 7px;
border: 1px solid #fecaca;
border-radius: 6px;
background: #fff7f7;
color: #b91c1c;
font-size: 9px;
}
._inlineError_1w17s_2649 > svg {
width: 14px;
height: 14px;
}
._inlineError_1w17s_2649 span {
flex: 1;
}
._inlineError_1w17s_2649 button {
border: 0;
background: transparent;
color: #b91c1c;
cursor: pointer;
}
._inlineError_1w17s_2649 button svg {
width: 13px;
height: 13px;
}
._errorCard_1w17s_2719 {
min-height: 180px;
padding: 20px;
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid #dce5f1;
border-radius: 8px;
}
._errorIcon_1w17s_2741 {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fee2e2;
color: #dc2626;
}
._errorIcon_1w17s_2741 svg {
width: 20px;
height: 20px;
}
._errorCard_1w17s_2719 > div:nth-child(2) {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
._errorCard_1w17s_2719 strong {
color: #334155;
font-size: 12px;
}
._errorCard_1w17s_2719 span {
color: #64748b;
font-size: 10px;
}
._retryButton_1w17s_2807 {
height: 31px;
padding: 0 10px;
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid #cbd5e1;
border-radius: 5px;
background: #fff;
color: #475569;
font-size: 9px;
cursor: pointer;
}
._retryButton_1w17s_2807 svg {
width: 12px;
height: 12px;
}
/* =========================================================
LOADING
========================================================= */
._loadingPage_1w17s_2853 {
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
background: #f7f9fc;
}
._loadingCard_1w17s_2871 {
min-width: 280px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
border: 1px solid #dce5f1;
border-radius: 8px;
background: #fff;
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06);
}
._loadingCard_1w17s_2871 strong {
color: #243b82;
font-size: 12px;
}
._loadingCard_1w17s_2871 span {
color: #64748b;
font-size: 9px;
}
._spinner_1w17s_2917 {
width: 23px;
height: 23px;
color: #1264d8;
animation: _spin_1w17s_2917 0.9s linear infinite;
}
._buttonSpinner_1w17s_2931 {
width: 13px;
height: 13px;
animation: _spin_1w17s_2917 0.9s linear infinite;
}
@keyframes _spin_1w17s_2917 {
to {
transform: rotate(360deg);
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1200px) {
._page_1w17s_1 {
padding: 16px;
}
._metaCard_1w17s_99 {
grid-template-columns: repeat(3, 1fr);
}
._metaItem_1w17s_151:nth-child(3) {
border-right: 0;
}
._summaryGrid_1w17s_879 {
grid-template-columns: repeat(3, 1fr);
}
._mainGrid_1w17s_1041 {
grid-template-columns: 1fr;
}
._rightColumn_1w17s_1057 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
}
@media (max-width: 760px) {
._topHeader_1w17s_19 {
flex-direction: column;
}
._headerActions_1w17s_3029 {
width: 100%;
}
._prepareTopButton_1w17s_3037 {
flex: 1;
}
._metaCard_1w17s_99 {
grid-template-columns: repeat(2, 1fr);
}
._metaItem_1w17s_151:nth-child(3) {
border-right: 1px solid #e8edf5;
}
._metaItem_1w17s_151:nth-child(even) {
border-right: 0;
}
._summaryGrid_1w17s_879 {
grid-template-columns: repeat(2, 1fr);
}
._rightColumn_1w17s_1057 {
display: flex;
}
._understandingGrid_1w17s_1737 {
grid-template-columns: 1fr;
}
._categoryGrid_1w17s_1861 {
grid-template-columns: repeat(2, 1fr);
}
._prepareEmpty_1w17s_1167 {
grid-template-columns: 1fr;
}
._prepareButton_1w17s_1259 {
width: 100%;
}
._toolbar_1w17s_1319 {
justify-content: stretch;
}
._searchBox_1w17s_1337 {
flex: 1;
width: auto;
}
}
/* =========================================================
OVERVIEW CHECKLIST
========================================================= */
._overviewChecklist_1w17s_3145 {
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
._overviewStats_1w17s_3159 {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 7px;
}
._overviewStats_1w17s_3159 > div {
min-width: 0;
padding: 9px 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
border: 1px solid #e5eaf1;
border-radius: 6px;
background: #fbfdff;
}
._overviewStats_1w17s_3159 strong {
color: #172554;
font-size: 16px;
line-height: 1;
}
._overviewStats_1w17s_3159 span {
color: #64748b;
font-size: 8px;
text-align: center;
}
/* .viewChecklistButton {
min-height: 38px;
padding: 8px 14px;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
gap: 7px;
border: 1px solid #bcd3f7;
border-radius: 6px;
background: #fff;
color: #1264d8;
font-size: 12px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.viewChecklistButton:hover {
background: #f5f9ff;
border-color: #9dc1f5;
box-shadow: 0 1px 3px rgba(18, 100, 216, 0.08);
}
.viewChecklistButton svg {
width: 14px;
height: 14px;
flex-shrink: 0;
} */
/* =========================================================
QUESTIONS
========================================================= */
._questionsList_1w17s_3311 {
display: flex;
flex-direction: column;
}
._questionGroup_1w17s_3321 {
padding: 13px 14px;
border-bottom: 1px solid #edf1f6;
}
._questionGroup_1w17s_3321:last-child {
border-bottom: 0;
}
._questionGroupHeader_1w17s_3339 {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 7px;
}
._questionGroupHeader_1w17s_3339 > div {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._questionGroupHeader_1w17s_3339 strong {
color: #243b82;
font-size: 11px;
font-weight: 700;
}
._questionGroupHeader_1w17s_3339 div span {
color: #94a3b8;
font-size: 8px;
}
._questionGroupHeader_1w17s_3339 > span {
flex-shrink: 0;
padding: 4px 7px;
border-radius: 10px;
background: #edf4ff;
color: #1264d8;
font-size: 8px;
font-weight: 600;
}
._questionGroup_1w17s_3321 > p {
margin: 0 0 9px;
color: #64748b;
font-size: 9px;
line-height: 1.5;
}
._questionPreviewList_1w17s_3425 {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 10px;
}
._questionPreview_1w17s_3425 {
padding: 8px 9px;
border: 1px solid #e5eaf1;
border-radius: 5px;
background: #f8fafc;
}
._questionPreview_1w17s_3425 strong {
display: block;
color: #334155;
font-size: 9px;
font-weight: 600;
line-height: 1.4;
}
._questionPreview_1w17s_3425 span {
display: block;
margin-top: 3px;
color: #94a3b8;
font-size: 8px;
line-height: 1.4;
}
/* =========================================================
MODALS
========================================================= */
._modalOverlay_1w17s_3493 {
position: fixed;
inset: 0;
z-index: 1000;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.48);
box-sizing: border-box;
}
._modalCard_1w17s_3517 {
width: min(560px, 100%);
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #dce5f1;
border-radius: 9px;
background: #fff;
box-shadow: 0 18px 55px rgba(15, 23, 42, 0.18);
}
._largeModal_1w17s_3541 {
width: min(700px, 100%);
}
._documentModal_1w17s_3549 {
width: min(820px, 100%);
}
._modalHeader_1w17s_3557 {
min-height: 58px;
padding: 11px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #e8edf5;
flex-shrink: 0;
}
._modalHeader_1w17s_3557 > div {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
._modalHeader_1w17s_3557 h2 {
margin: 0;
color: #172554;
font-size: 14px;
font-weight: 700;
}
._modalHeader_1w17s_3557 span {
color: #64748b;
font-size: 9px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._modalHeader_1w17s_3557 > button {
width: 29px;
height: 29px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #dbe3ef;
border-radius: 5px;
background: #fff;
color: #64748b;
cursor: pointer;
}
._modalHeader_1w17s_3557 > button:hover {
background: #f8fafc;
color: #334155;
}
._modalHeader_1w17s_3557 > button svg {
width: 14px;
height: 14px;
}
._modalBody_1w17s_3671 {
min-height: 0;
padding: 14px;
overflow-y: auto;
}
._modalRequirementInfo_1w17s_3683 {
margin-bottom: 13px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 4px;
border: 1px solid #dbe7f7;
border-radius: 6px;
background: #f5f9ff;
}
._modalRequirementInfo_1w17s_3683 strong {
color: #243b82;
font-size: 9px;
}
._modalRequirementInfo_1w17s_3683 span {
color: #64748b;
font-size: 9px;
line-height: 1.45;
}
/* =========================================================
FORM
========================================================= */
._formLabel_1w17s_3735 {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
color: #475569;
font-size: 9px;
font-weight: 600;
}
._formLabel_1w17s_3735:last-child {
margin-bottom: 0;
}
._formLabel_1w17s_3735 strong {
color: #334155;
font-size: 10px;
line-height: 1.4;
}
._formLabel_1w17s_3735 > span {
color: #94a3b8;
font-size: 8px;
font-weight: 400;
line-height: 1.4;
}
._formLabel_1w17s_3735 input[type="file"],
._formLabel_1w17s_3735 input[type="text"],
._formLabel_1w17s_3735 input[type="number"],
._formLabel_1w17s_3735 select,
._formLabel_1w17s_3735 textarea {
width: 100%;
min-width: 0;
box-sizing: border-box;
border: 1px solid #dbe3ef;
border-radius: 5px;
background: #fff;
color: #334155;
font-family: inherit;
font-size: 10px;
outline: none;
}
._formLabel_1w17s_3735 input[type="file"] {
min-height: 34px;
padding: 7px;
}
._formLabel_1w17s_3735 input[type="text"],
._formLabel_1w17s_3735 input[type="number"] {
height: 34px;
padding: 0 9px;
}
._formLabel_1w17s_3735 select {
min-height: 80px;
padding: 7px;
}
._formLabel_1w17s_3735 textarea {
padding: 8px 9px;
resize: vertical;
line-height: 1.45;
}
._formLabel_1w17s_3735 input:focus,
._formLabel_1w17s_3735 select:focus,
._formLabel_1w17s_3735 textarea:focus {
border-color: #8db5ed;
box-shadow: 0 0 0 2px rgba(18, 100, 216, 0.08);
}
._selectedFile_1w17s_3881 {
min-height: 34px;
margin: -4px 0 12px;
padding: 7px 9px;
display: flex;
align-items: center;
gap: 7px;
border: 1px solid #dbe7f7;
border-radius: 5px;
background: #f5f9ff;
color: #1264d8;
}
._selectedFile_1w17s_3881 svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
._selectedFile_1w17s_3881 span {
min-width: 0;
color: #475569;
font-size: 9px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =========================================================
REVIEW / APPROVAL
========================================================= */
._reviewStatus_1w17s_3945 {
margin-bottom: 13px;
padding: 9px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: 1px solid #e5eaf1;
border-radius: 6px;
background: #f8fafc;
}
._reviewStatus_1w17s_3945 > span {
color: #64748b;
font-size: 9px;
}
._reviewInfo_1w17s_3979 {
margin-bottom: 13px;
padding: 10px;
border: 1px solid #e5eaf1;
border-radius: 6px;
background: #fbfdff;
}
._reviewInfo_1w17s_3979 strong {
display: block;
margin-bottom: 4px;
color: #334155;
font-size: 9px;
}
._reviewInfo_1w17s_3979 p {
margin: 0 0 9px;
color: #64748b;
font-size: 9px;
line-height: 1.5;
}
._reviewInfo_1w17s_3979 p:last-child {
margin-bottom: 0;
}
/* =========================================================
MODAL FOOTER
========================================================= */
._modalFooter_1w17s_4039 {
min-height: 55px;
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
border-top: 1px solid #e8edf5;
background: #fbfdff;
flex-shrink: 0;
}
._modalFooter_1w17s_4039 > button {
min-height: 32px;
padding: 0 11px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid #cbd5e1;
border-radius: 5px;
background: #fff;
color: #475569;
font-size: 9px;
font-weight: 600;
cursor: pointer;
}
._modalFooter_1w17s_4039 > button:hover {
background: #f8fafc;
}
._modalFooter_1w17s_4039 > button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
._modalFooter_1w17s_4039 > ._prepareButton_1w17s_1259 {
min-width: 105px;
border-color: #1264d8;
background: #1264d8;
color: #fff;
}
._modalFooter_1w17s_4039 > ._prepareButton_1w17s_1259:hover {
background: #0d56be;
}
/* =========================================================
DOCUMENT VIEW
========================================================= */
._documentContent_1w17s_4143 {
min-height: 0;
padding: 14px;
overflow-y: auto;
}
._documentMeta_1w17s_4155 {
margin-bottom: 12px;
padding: 9px 10px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 5px 12px;
border: 1px solid #e5eaf1;
border-radius: 6px;
background: #f8fafc;
}
._documentMeta_1w17s_4155 span {
color: #64748b;
font-size: 9px;
}
._documentMeta_1w17s_4155 strong {
color: #334155;
font-size: 9px;
font-weight: 600;
}
._documentContent_1w17s_4143 pre {
margin: 0;
padding: 12px;
max-height: 55vh;
overflow: auto;
border: 1px solid #e5eaf1;
border-radius: 6px;
background: #f8fafc;
color: #334155;
font-family: inherit;
font-size: 9px;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
}
/* =========================================================
RESPONSIVE - MISSING COMPONENTS
========================================================= */
@media (max-width: 760px) {
._overviewStats_1w17s_3159 {
grid-template-columns: repeat(2, 1fr);
}
._overviewStats_1w17s_3159 > div:last-child {
grid-column: span 2;
}
._modalOverlay_1w17s_3493 {
padding: 10px;
}
._modalCard_1w17s_3517,
._largeModal_1w17s_3541,
._documentModal_1w17s_3549 {
max-height: calc(100vh - 20px);
}
._modalHeader_1w17s_3557 {
padding: 10px 11px;
}
._modalBody_1w17s_3671 {
padding: 11px;
}
._modalFooter_1w17s_4039 {
padding: 9px 11px;
}
._modalFooter_1w17s_4039 > button {
flex: 1;
}
._questionGroupHeader_1w17s_3339 {
flex-direction: column;
gap: 6px;
}
._questionGroupHeader_1w17s_3339 > span {
align-self: flex-start;
}
._documentMeta_1w17s_4155 {
grid-template-columns: 1fr;
gap: 3px;
}
}
@media (max-width: 480px) {
._overviewStats_1w17s_3159 {
grid-template-columns: 1fr 1fr;
}
._overviewStats_1w17s_3159 > div:last-child {
grid-column: span 2;
}
._modalFooter_1w17s_4039 {
flex-direction: column-reverse;
align-items: stretch;
}
._modalFooter_1w17s_4039 > button {
width: 100%;
}
}
/* =========================================================
OVERVIEW CHECKLIST TABLE
========================================================= */
._overviewChecklistTable_1w17s_4385 {
margin-top: 22px;
border-top: 1px solid #e2e8f0;
padding-top: 20px;
}
._overviewChecklistHeader_1w17s_4397 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
._overviewChecklistHeader_1w17s_4397 > div {
display: flex;
flex-direction: column;
gap: 4px;
}
._overviewChecklistHeader_1w17s_4397 strong {
font-size: 15px;
font-weight: 700;
color: #1e293b;
}
._overviewChecklistHeader_1w17s_4397 span {
font-size: 12px;
color: #64748b;
}
._overviewChecklistTable_1w17s_4385 ._tableWrapper_1w17s_1425 {
max-height: 560px;
overflow: auto;
border: 1px solid #e2e8f0;
border-radius: 10px;
}
._overviewChecklistTable_1w17s_4385 table {
min-width: 760px;
}
._overviewChecklistTable_1w17s_4385 thead th {
position: sticky;
top: 0;
z-index: 2;
background: #f8fafc;
}
/* Keep action column usable */
._overviewChecklistTable_1w17s_4385 ._sourceAction_1w17s_1547 {
min-width: 150px;
}
/* Mobile */
@media (max-width: 760px) {
._overviewChecklistHeader_1w17s_4397 {
align-items: flex-start;
flex-direction: column;
}
._overviewChecklistTable_1w17s_4385 ._tableWrapper_1w17s_1425 {
max-height: 500px;
}
}
._openQuestionsRow_1w17s_4517 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 0;
}
._openQuestionsRow_1w17s_4517 ._sideStats_1w17s_2281 {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0;
}
._openQuestionsRow_1w17s_4517 ._sideStats_1w17s_2281 strong {
font-size: 26px;
line-height: 1;
}
._openQuestionsRow_1w17s_4517 ._sideStats_1w17s_2281 span {
font-size: 11px;
color: #64748b;
white-space: nowrap;
}
._openQuestionsRow_1w17s_4517 ._viewChecklistButton_1w17s_3219 {
flex-shrink: 0;
min-height: 38px;
padding: 8px 14px;
}
@media (max-width: 600px) {
._openQuestionsRow_1w17s_4517 {
align-items: flex-start;
flex-direction: column;
}
}
/* =========================================================
TOP META CARD
========================================================= */
._metaCard_1w17s_99 {
min-height: 84px;
grid-template-columns:
0.72fr
1.35fr
1.25fr
1.25fr
1.25fr
1.05fr;
margin-bottom: 10px;
}
._metaItem_1w17s_151 {
justify-content: center;
padding: 10px 16px;
gap: 6px;
}
._metaItem_1w17s_151 > span {
font-size: 10px;
color: #64748b;
}
._metaItem_1w17s_151 > strong {
font-size: 11px;
color: #243b82;
}
/* =========================================================
TABS
========================================================= */
._tabs_1w17s_769 {
height: 47px;
padding: 0 8px;
margin-bottom: 10px;
}
._tabs_1w17s_769 button {
padding: 0 14px;
font-size: 11px;
}
/* =========================================================
SUMMARY CARDS
========================================================= */
._summaryGrid_1w17s_879 {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin-bottom: 10px;
}
._summaryCard_1w17s_893 {
min-height: 74px;
padding: 11px 12px;
gap: 11px;
}
._summaryIcon_1w17s_915 {
width: 37px;
height: 37px;
}
._summaryIcon_1w17s_915 svg {
width: 18px;
height: 18px;
}
._summaryCard_1w17s_893 strong {
font-size: 18px;
}
._summaryCard_1w17s_893 span {
font-size: 9px;
}
/* =========================================================
MAIN GRID
========================================================= */
._mainGrid_1w17s_1041 {
grid-template-columns:
minmax(0, 2.05fr)
minmax(330px, 1fr);
gap: 10px;
}
._leftColumn_1w17s_1055,
._rightColumn_1w17s_1057 {
gap: 10px;
}
/* =========================================================
CARD
========================================================= */
._card_1w17s_1071 {
border-radius: 7px;
border-color: #dce5f1;
}
/* =========================================================
SECTION HEADER
========================================================= */
._sectionHeader_1w17s_1085 {
min-height: 58px;
padding: 11px 16px;
}
._sectionHeader_1w17s_1085 h2 {
font-size: 14px;
}
._sectionHeader_1w17s_1085 p {
font-size: 10px;
}
/* =========================================================
OVERVIEW CHECKLIST
========================================================= */
._overviewChecklist_1w17s_3145 {
padding: 14px 16px 16px;
gap: 12px;
}
._overviewStats_1w17s_3159 {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
._overviewStats_1w17s_3159 > div {
min-height: 56px;
padding: 9px 8px;
justify-content: center;
}
._overviewStats_1w17s_3159 strong {
font-size: 16px;
}
._overviewStats_1w17s_3159 span {
font-size: 8px;
}
/* =========================================================
OVERVIEW CHECKLIST TABLE
========================================================= */
._overviewChecklistTable_1w17s_4385 {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}
._overviewChecklistHeader_1w17s_4397 {
margin-bottom: 15px;
}
._overviewChecklistHeader_1w17s_4397 strong {
font-size: 15px;
}
._overviewChecklistHeader_1w17s_4397 span {
font-size: 11px;
}
._overviewChecklistTable_1w17s_4385 ._tableWrapper_1w17s_1425 {
max-height: 560px;
overflow-x: auto;
overflow-y: auto;
border: 1px solid #e2e8f0;
border-radius: 7px;
}
._overviewChecklistTable_1w17s_4385 table {
min-width: 760px;
}
/* =========================================================
CHECKLIST TABLE
========================================================= */
._tableWrapper_1w17s_1425 th {
height: 38px;
padding: 0 12px;
font-size: 9px;
}
._tableWrapper_1w17s_1425 td {
min-height: 54px;
padding: 10px 12px;
font-size: 10px;
}
._documentCell_1w17s_1543 strong {
font-size: 10px;
}
._documentCell_1w17s_1543 span {
font-size: 9px;
}
._requirementCell_1w17s_1545 strong {
font-size: 9px;
}
._requirementCell_1w17s_1545 span {
font-size: 8px;
}
._sourceAction_1w17s_1547 {
gap: 4px;
}
._sourceAction_1w17s_1547 > span {
font-size: 9px;
}
/* =========================================================
RIGHT SIDE - NEXT ACTIONS
========================================================= */
._sideHeader_1w17s_1955 {
min-height: 43px;
padding: 10px 13px;
}
._sideHeader_1w17s_1955 h2 {
font-size: 12px;
}
._actionsList_1w17s_2027 {
padding: 4px 11px 8px;
}
._nextAction_1w17s_2035 {
min-height: 55px;
padding: 8px 0;
grid-template-columns: 25px minmax(0, 1fr) auto;
gap: 8px;
}
._actionNumber_1w17s_2063 {
width: 23px;
height: 23px;
}
._actionContent_1w17s_2089 strong {
font-size: 9px;
}
._actionContent_1w17s_2089 span {
font-size: 8px;
}
/* =========================================================
OPEN QUESTIONS
========================================================= */
._openQuestionsRow_1w17s_4517 {
min-height: 74px;
padding: 14px 13px;
}
._openQuestionsRow_1w17s_4517 ._sideStats_1w17s_2281 {
gap: 8px;
}
._openQuestionsRow_1w17s_4517 ._sideStats_1w17s_2281 strong {
font-size: 26px;
}
._openQuestionsRow_1w17s_4517 ._sideStats_1w17s_2281 span {
font-size: 10px;
}
/* =========================================================
VERIFICATION
========================================================= */
._verificationContent_1w17s_2323 {
min-height: 88px;
padding: 15px 10px;
}
._verificationContent_1w17s_2323 strong {
font-size: 18px;
}
._verificationContent_1w17s_2323 span {
font-size: 8px;
}
/* =========================================================
FILE LIST
========================================================= */
._fileMiniList_1w17s_2389 {
padding: 4px 11px 8px;
}
._fileMiniRow_1w17s_2397 {
min-height: 45px;
padding: 7px 0;
}
/* =========================================================
UNDERSTANDING
========================================================= */
._understandingGrid_1w17s_1737 {
padding: 5px 16px 14px;
gap: 0 28px;
}
._infoRow_1w17s_1759 {
grid-template-columns: 130px minmax(0, 1fr);
min-height: 44px;
}
._infoRow_1w17s_1759 span {
font-size: 9px;
}
._infoRow_1w17s_1759 strong {
font-size: 10px;
}
/* =========================================================
CATEGORY CARDS
========================================================= */
._categoryGrid_1w17s_1861 {
padding: 13px;
gap: 8px;
}
._categoryCard_1w17s_1875 {
min-height: 60px;
padding: 9px;
}
/* =========================================================
PACKAGE STATUS
========================================================= */
._packageStatus_1w17s_2533 {
margin: 0;
padding: 12px 13px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1200px) {
._page_1w17s_1 {
padding: 14px 16px 25px;
}
._metaCard_1w17s_99 {
grid-template-columns: repeat(3, 1fr);
}
._summaryGrid_1w17s_879 {
grid-template-columns: repeat(3, 1fr);
}
._mainGrid_1w17s_1041 {
grid-template-columns: 1fr;
}
._rightColumn_1w17s_1057 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
._metaCard_1w17s_99 {
grid-template-columns: repeat(2, 1fr);
}
._summaryGrid_1w17s_879 {
grid-template-columns: repeat(2, 1fr);
}
._overviewStats_1w17s_3159 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 760px) {
._page_1w17s_1 {
padding: 10px;
}
._metaCard_1w17s_99 {
grid-template-columns: repeat(2, 1fr);
}
._summaryGrid_1w17s_879 {
grid-template-columns: repeat(2, 1fr);
}
._rightColumn_1w17s_1057 {
display: flex;
}
._overviewStats_1w17s_3159 {
grid-template-columns: repeat(2, 1fr);
}
._overviewChecklist_1w17s_3145 {
padding: 12px;
}
._overviewChecklistTable_1w17s_4385 {
margin-top: 16px;
padding-top: 16px;
}
._overviewChecklistHeader_1w17s_4397 {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
._openQuestionsRow_1w17s_4517 {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 480px) {
._metaCard_1w17s_99 {
grid-template-columns: 1fr;
}
._metaItem_1w17s_151 {
border-right: 0;
border-bottom: 1px solid #e8edf5;
}
._metaItem_1w17s_151:last-child {
border-bottom: 0;
}
._summaryGrid_1w17s_879 {
grid-template-columns: 1fr;
}
._overviewStats_1w17s_3159 {
grid-template-columns: 1fr 1fr;
}
}
/* =========================================================
PDF MODAL
========================================================= */
._pdfModalOverlay_1w17s_5533 {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.62);
}
._pdfModal_1w17s_5533 {
width: min(1200px, 96vw);
height: min(900px, 94vh);
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
}
._pdfModalHeader_1w17s_5593 {
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
border-bottom: 1px solid #e2e8f0;
}
._pdfModalHeader_1w17s_5593 h2 {
margin: 0;
color: #102a56;
font-size: 16px;
font-weight: 700;
}
._pdfModalHeader_1w17s_5593 span {
display: block;
margin-top: 3px;
color: #64748b;
font-size: 11px;
}
._pdfModalHeader_1w17s_5593 button {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: transparent;
color: #475569;
cursor: pointer;
}
._pdfModalHeader_1w17s_5593 button:hover {
background: #f1f5f9;
}
._pdfToolbar_1w17s_5699 {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
._pdfToolbar_1w17s_5699 > div {
display: flex;
align-items: center;
gap: 6px;
}
._pdfToolbar_1w17s_5699 button {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dbe3ee;
border-radius: 6px;
background: #ffffff;
color: #334155;
cursor: pointer;
}
._pdfToolbar_1w17s_5699 button:hover:not(:disabled) {
background: #f1f5f9;
}
._pdfToolbar_1w17s_5699 button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
._pdfToolbar_1w17s_5699 span {
min-width: 70px;
text-align: center;
color: #475569;
font-size: 12px;
}
._pdfModalBody_1w17s_5813 {
flex: 1;
min-height: 0;
overflow: auto;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 30px;
background: #e9edf3;
}
._pdfModalBody_1w17s_5813 canvas {
display: block;
max-width: none;
box-shadow: 0 3px 15px rgba(15, 23, 42, 0.18);
}
._pdfLoading_1w17s_5861 {
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #475569;
}
._pdfError_1w17s_5885 {
margin: auto;
max-width: 500px;
padding: 20px;
border: 1px solid #fecaca;
border-radius: 8px;
background: #fff1f2;
color: #991b1b;
display: flex;
align-items: center;
gap: 10px;
}
._multiSelectOptions_1w17s_5923 {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
._multiSelectOption_1w17s_5923 {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border: 1px solid #e2e8f0;
border-radius: 6px;
background: #fff;
cursor: pointer;
transition:
border-color 0.15s ease,
background 0.15s ease;
}
._multiSelectOption_1w17s_5923:hover {
border-color: #b8c7dc;
background: #f8fafc;
}
._multiSelectOptionSelected_1w17s_5977 {
border-color: #c7d6ea;
background: #f1f5f9;
}
._multiSelectOption_1w17s_5923 input {
position: absolute;
opacity: 0;
pointer-events: none;
}
._radioVisual_1w17s_5999 {
width: 16px;
height: 16px;
min-width: 16px;
border: 1.5px solid #94a3b8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
._multiSelectOptionSelected_1w17s_5977 ._radioVisual_1w17s_5999 {
border-color: #2563eb;
}
._radioVisual_1w17s_5999 span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #2563eb;
}
._multiSelectOptionText_1w17s_6045 {
font-size: 13px;
line-height: 1.4;
color: #334155;
}
._headerSection_1w17s_65 {
display: flex;
flex-direction: column;
gap: 12px;
}
._breadcrumb_1w17s_6067 {
display: flex;
align-items: center;
gap: 7px;
min-height: 20px;
font-size: 12px;
color: #64748b;
}
._breadcrumbLink_1w17s_6089 {
padding: 0;
border: 0;
background: transparent;
color: #64748b;
font: inherit;
cursor: pointer;
transition: color 0.15s ease;
}
._breadcrumbLink_1w17s_6089:hover {
color: #2563eb;
}
._breadcrumbSeparator_1w17s_6123 {
width: 13px;
height: 13px;
color: #94a3b8;
}
._breadcrumbCurrent_1w17s_6137 {
color: #334155;
font-weight: 600;
}
._titleRow_1w17s_285 {
display: flex;
align-items: flex-start;
gap: 12px;
}
._backButton_1w17s_303 {
flex: 0 0 auto;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #ffffff;
color: #475569;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease;
}
._backButton_1w17s_303 svg {
width: 17px;
height: 17px;
}
._backButton_1w17s_303:hover {
background: #f8fafc;
border-color: #cbd5e1;
color: #2563eb;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
._backButton_1w17s_303:active {
transform: translateY(1px);
}
._titleRow_1w17s_285 h1 {
margin: 0;
}
._titleRow_1w17s_285 p {
margin: 5px 0 0;
}
/* =========================================================
AI CONSTRUCTION LOADER
Transparent Version
========================================================= */
._loadingPage_1w17s_2853 {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
/* TRANSPARENT */
background: transparent;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
._loadingCard_1w17s_2871 {
width: 390px;
padding: 30px 25px 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
/* TRANSPARENT */
background: transparent;
/* REMOVE CARD BORDER */
border: 0;
/* REMOVE CARD SHADOW */
box-shadow: none;
overflow: visible;
position: relative;
}
._loadingCard_1w17s_2871 strong {
margin-top: 12px;
color: #173f7a;
font-size: 16px;
font-weight: 700;
}
._loadingDescription_1w17s_6381 {
max-width: 310px;
margin-top: 7px;
color: #718096;
font-size: 11px;
line-height: 1.55;
}
/* =========================================================
ROBOT
========================================================= */
._aiRobotLoader_1w17s_6411 {
width: 150px;
height: 175px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
animation: _robotFloat_1w17s_1 2.2s ease-in-out infinite;
}
/* =========================================================
ANTENNA
========================================================= */
._robotAntenna_1w17s_6445 {
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 22px;
transform: translateX(-50%);
background: #475569;
border-radius: 4px;
}
._robotAntenna_1w17s_6445 span {
position: absolute;
width: 9px;
height: 9px;
top: -5px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
background: #2563eb;
box-shadow:
0 0 0 4px rgba(37, 99, 235, 0.12),
0 0 12px rgba(37, 99, 235, 0.35);
animation: _antennaPulse_1w17s_1 1.1s ease-in-out infinite;
}
/* =========================================================
ROBOT HEAD
========================================================= */
._robotHead_1w17s_6529 {
position: absolute;
top: 20px;
width: 82px;
height: 55px;
border-radius: 13px 13px 11px 11px;
background: linear-gradient(145deg, #ffffff, #e7edf4);
border: 2px solid #475569;
box-shadow: 0 5px 10px rgba(15, 23, 42, 0.12);
z-index: 3;
}
/* Robot ears */
._robotHead_1w17s_6529::before,
._robotHead_1w17s_6529::after {
content: "";
position: absolute;
top: 17px;
width: 7px;
height: 19px;
background: #64748b;
border-radius: 4px;
}
._robotHead_1w17s_6529::before {
left: -7px;
}
._robotHead_1w17s_6529::after {
right: -7px;
}
/* =========================================================
EYES
========================================================= */
._robotEyes_1w17s_6627 {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 19px;
}
._robotEyes_1w17s_6627 span {
width: 10px;
height: 10px;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
animation: _robotBlink_1w17s_1 3s infinite;
}
/* =========================================================
ROBOT MOUTH
========================================================= */
._robotMouth_1w17s_6687 {
position: absolute;
bottom: 9px;
left: 50%;
transform: translateX(-50%);
width: 34px;
height: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
}
._robotMouth_1w17s_6687 i {
width: 4px;
height: 4px;
border-radius: 50%;
background: #64748b;
animation: _mouthScan_1w17s_1 1s ease-in-out infinite;
}
._robotMouth_1w17s_6687 i:nth-child(2) {
animation-delay: 0.15s;
}
._robotMouth_1w17s_6687 i:nth-child(3) {
animation-delay: 0.3s;
}
/* =========================================================
ROBOT BODY
========================================================= */
._robotBody_1w17s_6769 {
position: absolute;
top: 76px;
width: 70px;
height: 55px;
border-radius: 10px;
background: linear-gradient(145deg, #f8fafc, #dce5ef);
border: 2px solid #475569;
z-index: 2;
box-shadow: 0 6px 12px rgba(15, 23, 42, 0.12);
}
/* =========================================================
AI SCREEN
========================================================= */
._robotScreen_1w17s_6815 {
position: absolute;
top: 10px;
left: 50%;
width: 42px;
height: 29px;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: #172033;
border: 1px solid #64748b;
overflow: hidden;
}
._robotScreen_1w17s_6815::after {
content: "";
position: absolute;
width: 100%;
height: 3px;
left: 0;
background: rgba(37, 99, 235, 0.6);
animation: _screenScan_1w17s_1 1.4s linear infinite;
}
._robotScreen_1w17s_6815 span {
position: relative;
z-index: 2;
color: #60a5fa;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
}
/* =========================================================
ROBOT TOOLS
========================================================= */
._robotTools_1w17s_6927 {
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 5px;
}
._robotTools_1w17s_6927 span {
width: 12px;
height: 4px;
border-radius: 3px;
background: #94a3b8;
}
/* =========================================================
ROBOT ARMS
========================================================= */
._robotArmLeft_1w17s_6979,
._robotArmRight_1w17s_6981 {
position: absolute;
top: 82px;
width: 13px;
height: 42px;
border-radius: 8px;
background: #64748b;
z-index: 1;
}
._robotArmLeft_1w17s_6979 {
left: 26px;
transform-origin: top center;
animation: _armLeftMove_1w17s_1 1.4s ease-in-out infinite;
}
._robotArmRight_1w17s_6981 {
right: 26px;
transform-origin: top center;
animation: _armRightMove_1w17s_1 1.4s ease-in-out infinite;
}
/* Construction hands */
._robotArmLeft_1w17s_6979::after,
._robotArmRight_1w17s_6981::after {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
width: 17px;
height: 10px;
transform: translateX(-50%);
border-radius: 4px;
background: #475569;
}
/* =========================================================
ROBOT LEGS
========================================================= */
._robotLegs_1w17s_7093 {
position: absolute;
top: 127px;
display: flex;
gap: 20px;
z-index: 1;
}
._robotLegs_1w17s_7093 span {
width: 15px;
height: 25px;
border-radius: 5px;
background: #475569;
}
/* =========================================================
CONSTRUCTION FLOOR
========================================================= */
._constructionFloor_1w17s_7143 {
position: absolute;
bottom: 8px;
width: 125px;
height: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #cbd5e1;
}
._constructionFloor_1w17s_7143 span {
width: 18px;
height: 4px;
border-radius: 3px;
background: #f59e0b;
animation: _constructionLights_1w17s_1 1.2s ease-in-out infinite;
}
._constructionFloor_1w17s_7143 span:nth-child(2) {
animation-delay: 0.2s;
}
._constructionFloor_1w17s_7143 span:nth-child(3) {
animation-delay: 0.4s;
}
._constructionFloor_1w17s_7143 span:nth-child(4) {
animation-delay: 0.6s;
}
/* =========================================================
AI STATUS
========================================================= */
._aiLoadingStatus_1w17s_7227 {
margin-top: 18px;
display: flex;
align-items: center;
gap: 7px;
padding: 6px 11px;
border-radius: 999px;
/*
Slightly transparent instead of solid white.
This keeps the status readable while blending
with the page background.
*/
background: rgba(239, 246, 255, 0.72);
color: #2563eb;
font-size: 10px;
font-weight: 600;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
._statusDot_1w17s_637 {
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
animation: _statusPulse_1w17s_1 1.2s ease-in-out infinite;
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes _robotFloat_1w17s_1 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
@keyframes _antennaPulse_1w17s_1 {
0%,
100% {
transform: translateX(-50%) scale(1);
opacity: 1;
}
50% {
transform: translateX(-50%) scale(1.35);
opacity: 0.65;
}
}
@keyframes _robotBlink_1w17s_1 {
0%,
45%,
50%,
100% {
transform: scaleY(1);
}
47% {
transform: scaleY(0.15);
}
}
@keyframes _mouthScan_1w17s_1 {
0%,
100% {
opacity: 0.3;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.3);
}
}
@keyframes _screenScan_1w17s_1 {
0% {
top: -5px;
opacity: 0;
}
20% {
opacity: 1;
}
100% {
top: 32px;
opacity: 0;
}
}
@keyframes _armLeftMove_1w17s_1 {
0%,
100% {
transform: rotate(12deg);
}
50% {
transform: rotate(-28deg);
}
}
@keyframes _armRightMove_1w17s_1 {
0%,
100% {
transform: rotate(-12deg);
}
50% {
transform: rotate(28deg);
}
}
@keyframes _constructionLights_1w17s_1 {
0%,
100% {
opacity: 0.35;
transform: scaleX(0.7);
}
50% {
opacity: 1;
transform: scaleX(1);
}
}
@keyframes _statusPulse_1w17s_1 {
0%,
100% {
opacity: 0.5;
transform: scale(0.85);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 600px) {
._loadingPage_1w17s_2853 {
padding: 20px;
}
._loadingCard_1w17s_2871 {
width: 100%;
padding: 25px 15px 20px;
}
._aiRobotLoader_1w17s_6411 {
transform: scale(0.9);
transform-origin: center;
}
._loadingCard_1w17s_2871 strong {
font-size: 15px;
}
._loadingDescription_1w17s_6381 {
font-size: 10px;
}
}
/* =========================================================
FINAL TOP HEADER
ONE CARD + PERFECT HORIZONTAL ALIGNMENT
========================================================= */
._topHeader_1w17s_19 {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: minmax(390px, 0.95fr) minmax(0, 2.05fr);
align-items: stretch;
margin: 0 0 10px;
padding: 0;
background: #ffffff;
border: 1px solid #dce5f1;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
}
/* =========================================================
LEFT TITLE SECTION
========================================================= */
._topHeader_1w17s_19 ._headerSection_1w17s_65 {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 7px;
padding: 11px 16px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* =========================================================
BREADCRUMB
========================================================= */
._topHeader_1w17s_19 ._breadcrumb_1w17s_6067 {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 10px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
}
._topHeader_1w17s_19 ._breadcrumbLink_1w17s_6089 {
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: #64748b;
font-size: 10px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
._topHeader_1w17s_19 ._breadcrumbSeparator_1w17s_6123 {
width: 11px;
height: 11px;
flex-shrink: 0;
color: #94a3b8;
}
._topHeader_1w17s_19 ._breadcrumbCurrent_1w17s_6137 {
flex-shrink: 0;
color: #1e3a8a;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
/* =========================================================
TITLE ROW
========================================================= */
._topHeader_1w17s_19 ._titleRow_1w17s_285 {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
}
._topHeader_1w17s_19 ._backButton_1w17s_303 {
width: 36px;
height: 36px;
flex: 0 0 36px;
margin-top: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #dbe3ef;
border-radius: 7px;
background: #ffffff;
color: #475569;
cursor: pointer;
}
._topHeader_1w17s_19 ._backButton_1w17s_303 svg {
width: 17px;
height: 17px;
}
._topHeader_1w17s_19 ._titleContent_1w17s_343 {
min-width: 0;
}
._topHeader_1w17s_19 ._titleContent_1w17s_343 h1 {
margin: 0;
color: #243b5a;
font-size: 14px !important;
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.25px;
}
._topHeader_1w17s_19 ._titleContent_1w17s_343 p {
margin: 5px 0 0;
color: #193b68;
font-size: 9px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =========================================================
META SECTION
IMPORTANT: NO SECOND CARD
========================================================= */
._topHeader_1w17s_19 ._metaCard_1w17s_99 {
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns:
0.72fr
1.35fr
1.25fr
1.25fr
1.25fr
1.05fr;
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
}
/* =========================================================
META ITEMS
========================================================= */
._topHeader_1w17s_19 ._metaItem_1w17s_151 {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 9px 12px;
border: 0;
border-left: 1px solid #e8edf5;
background: transparent;
overflow: hidden;
}
._topHeader_1w17s_19 ._metaItem_1w17s_151 > span {
color: #64748b;
font-size: 9px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
._topHeader_1w17s_19 ._metaItem_1w17s_151 > strong {
min-width: 0;
display: flex;
align-items: center;
gap: 5px;
color: #243b82;
font-size: 8px;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._topHeader_1w17s_19 ._metaItem_1w17s_151 > strong svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
._topHeader_1w17s_19 ._metaItem_1w17s_151 small {
color: #64748b;
font-size: 8px;
line-height: 1.1;
}
/* =========================================================
STATUS
========================================================= */
._topHeader_1w17s_19 ._statusPill_1w17s_409 {
width: fit-content;
display: inline-flex !important;
align-items: center;
gap: 5px;
padding: 3px 7px;
border-radius: 999px;
font-size: 9px !important;
white-space: nowrap !important;
}
._topHeader_1w17s_19 ._statusDot_1w17s_637 {
width: 6px;
height: 6px;
flex-shrink: 0;
border-radius: 50%;
background: currentColor;
}
/* =========================================================
COMPLETION
========================================================= */
._topHeader_1w17s_19 ._completionValue_1w17s_441 {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
._topHeader_1w17s_19 ._completionValue_1w17s_441 strong {
flex-shrink: 0;
color: #1e3a8a;
font-size: 10px;
}
._topHeader_1w17s_19 ._progressTrack_1w17s_459 {
flex: 1;
min-width: 30px;
width: auto;
height: 6px;
overflow: hidden;
border-radius: 999px;
background: #e2e8f0;
}
._topHeader_1w17s_19 ._progressFill_1w17s_487 {
height: 100%;
border-radius: inherit;
background: #1677e8;
transition: width 0.25s ease;
}
/* =========================================================
HEADER ACTIONS
If refresh / prepare buttons exist
========================================================= */
._topHeader_1w17s_19 ._headerActions_1w17s_3029 {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 8px;
background: transparent;
border: 0;
}
/* =========================================================
REFRESH BUTTON
========================================================= */
._topHeader_1w17s_19 ._refreshButton_1w17s_8385 {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
border: 1px solid #dbe3ef;
border-radius: 6px;
background: #ffffff;
color: #475569;
cursor: pointer;
}
/* =========================================================
PREPARE BUTTON
========================================================= */
._topHeader_1w17s_19 ._prepareTopButton_1w17s_3037 {
height: 34px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 0;
border-radius: 6px;
background: #1264d8;
color: #ffffff;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1200px) {
._topHeader_1w17s_19 {
grid-template-columns:
minmax(320px, 0.9fr)
minmax(0, 1.8fr);
}
._topHeader_1w17s_19 ._metaCard_1w17s_99 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
._topHeader_1w17s_19 {
grid-template-columns: 1fr;
}
._topHeader_1w17s_19 ._metaCard_1w17s_99 {
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid #e8edf5;
}
._topHeader_1w17s_19 ._metaItem_1w17s_151 {
border-left: 0;
border-right: 1px solid #e8edf5;
}
._topHeader_1w17s_19 ._metaItem_1w17s_151:nth-child(3n) {
border-right: 0;
}
._topHeader_1w17s_19 ._metaItem_1w17s_151:nth-child(n + 4) {
border-top: 1px solid #e8edf5;
}
}
@media (max-width: 760px) {
._topHeader_1w17s_19 ._metaCard_1w17s_99 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
._topHeader_1w17s_19 ._metaItem_1w17s_151:nth-child(even) {
border-right: 0;
}
._topHeader_1w17s_19 ._metaItem_1w17s_151:nth-child(n + 3) {
border-top: 1px solid #e8edf5;
}
}
@media (max-width: 480px) {
._topHeader_1w17s_19 ._metaCard_1w17s_99 {
grid-template-columns: 1fr;
}
._topHeader_1w17s_19 ._metaItem_1w17s_151 {
border-right: 0;
border-bottom: 1px solid #e8edf5;
}
._topHeader_1w17s_19 ._metaItem_1w17s_151:last-child {
border-bottom: 0;
}
}
._page_s4m1c_1 {
width: 100%;
min-width: 0;
color: #10245c;
}
/* =========================================================
HEADER
========================================================= */
._pageHeader_s4m1c_21 {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 14px;
padding: 0 4px;
}
._titleArea_s4m1c_41 {
display: flex;
align-items: center;
gap: 13px;
}
._titleIcon_s4m1c_53 {
width: 37px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: #edf6ff;
color: #0b6cff;
font-size: 21px;
}
._titleArea_s4m1c_41 h1 {
margin: 0;
color: #142966;
font-size: 20px;
font-weight: 700;
}
._titleArea_s4m1c_41 p {
margin: 4px 0 0;
color: #7183a2;
font-size: 11px;
}
._headerActions_s4m1c_103 {
position: relative;
display: flex;
align-items: center;
gap: 7px;
}
._submitTenderButton_s4m1c_117 {
height: 38px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 0;
border-radius: 6px;
background: #0b6cff;
color: #fff;
font-size: 11px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 3px 9px rgba(11, 108, 255, 0.2);
}
._submitTenderButton_s4m1c_117:hover:not(:disabled) {
background: #075fdc;
}
._submitTenderButton_s4m1c_117:disabled {
opacity: 0.55;
cursor: not-allowed;
}
._moreButton_s4m1c_169 {
width: 37px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d7e3f2;
border-radius: 6px;
background: #fff;
color: #536987;
cursor: pointer;
}
._moreButton_s4m1c_169:hover {
border-color: #0b6cff;
color: #0b6cff;
}
._moreMenu_s4m1c_205 {
position: absolute;
z-index: 20;
top: 45px;
right: 0;
min-width: 190px;
padding: 5px;
border: 1px solid #dce6f3;
border-radius: 7px;
background: #fff;
box-shadow: 0 10px 25px rgba(25, 54, 96, 0.15);
}
._moreMenu_s4m1c_205 button {
width: 100%;
height: 35px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
border: 0;
border-radius: 5px;
background: transparent;
color: #3b5279;
text-align: left;
font-size: 10px;
cursor: pointer;
}
._moreMenu_s4m1c_205 button:hover {
background: #f2f7fd;
}
/* =========================================================
SUCCESS / ERROR
========================================================= */
._successMessage_s4m1c_279,
._errorMessage_s4m1c_281 {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 14px;
margin-bottom: 12px;
border-radius: 7px;
}
._successMessage_s4m1c_279 {
border: 1px solid #bcebd5;
background: #edfff6;
color: #0b8c50;
}
._successMessage_s4m1c_279 > svg {
font-size: 21px;
}
._successMessage_s4m1c_279 strong,
._errorMessage_s4m1c_281 strong {
display: block;
font-size: 11px;
}
._successMessage_s4m1c_279 span,
._errorMessage_s4m1c_281 span {
display: block;
margin-top: 3px;
font-size: 9px;
}
._errorMessage_s4m1c_281 {
justify-content: space-between;
border: 1px solid #ffcfd3;
background: #fff4f5;
color: #d93242;
}
._errorMessage_s4m1c_281 > div {
display: flex;
flex-direction: column;
}
._errorMessage_s4m1c_281 button {
border: 0;
background: transparent;
color: #c72f3c;
cursor: pointer;
}
/* =========================================================
PROGRESS
========================================================= */
._progressCard_s4m1c_391 {
min-height: 57px;
display: flex;
align-items: center;
padding: 8px 26px;
margin-bottom: 14px;
border: 1px solid #dfe8f4;
border-radius: 7px;
background: #fff;
}
._progressStep_s4m1c_413 {
display: flex;
align-items: center;
gap: 10px;
min-width: 120px;
}
._progressCircle_s4m1c_427 {
width: 31px;
height: 31px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #09a968;
color: #fff;
font-size: 15px;
box-shadow: 0 2px 5px rgba(9, 169, 104, 0.2);
}
._progressStep_s4m1c_413 strong {
display: block;
color: #20366c;
font-size: 11px;
font-weight: 600;
}
._progressStep_s4m1c_413 span {
display: block;
margin-top: 2px;
color: #7586a4;
font-size: 9px;
}
._progressLine_s4m1c_483 {
flex: 1;
height: 2px;
margin: 0 14px;
background: #19ad72;
}
/* =========================================================
CONTENT
========================================================= */
._contentGrid_s4m1c_505 {
display: grid;
grid-template-columns: 32% 1fr;
gap: 10px;
}
._packageCard_s4m1c_517,
._contentsCard_s4m1c_519 {
min-width: 0;
border: 1px solid #dfe8f4;
border-radius: 7px;
background: #fff;
}
._cardHeader_s4m1c_533 {
min-height: 47px;
padding: 0 12px;
display: flex;
align-items: center;
border-bottom: 1px solid #e5ecf5;
}
._cardTitle_s4m1c_549 {
display: flex;
align-items: center;
gap: 8px;
}
._cardIcon_s4m1c_561 {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #0b6cff;
font-size: 17px;
}
._cardTitle_s4m1c_549 h2 {
margin: 0;
color: #172f66;
font-size: 13px;
font-weight: 700;
}
._fileCount_s4m1c_595 {
color: #243d71;
font-size: 11px;
font-weight: 500;
}
._readyBadge_s4m1c_607,
._pendingBadge_s4m1c_609 {
margin-left: 5px;
padding: 4px 9px;
border-radius: 15px;
font-size: 9px;
font-weight: 600;
}
._readyBadge_s4m1c_607 {
background: #e2f9ed;
color: #0a9a59;
}
._pendingBadge_s4m1c_609 {
background: #fff3df;
color: #d98200;
}
/* =========================================================
PACKAGE INFORMATION
========================================================= */
._packageInfo_s4m1c_653 {
padding: 13px 13px 4px;
}
._infoRow_s4m1c_661 {
display: grid;
grid-template-columns: 105px 1fr;
gap: 7px;
margin-bottom: 13px;
align-items: center;
}
._infoRow_s4m1c_661 > span:first-child {
color: #64779a;
font-size: 9px;
}
._infoRow_s4m1c_661 strong {
min-width: 0;
color: #243e75;
font-size: 10px;
font-weight: 500;
overflow-wrap: anywhere;
}
._readyStatus_s4m1c_703,
._pendingStatus_s4m1c_705 {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 8px;
border-radius: 15px;
font-size: 9px;
font-weight: 600;
}
._readyStatus_s4m1c_703 {
background: #ddf8e9;
color: #0b9a5b;
}
._pendingStatus_s4m1c_705 {
background: #fff0d8;
color: #d47c00;
}
/* =========================================================
DOWNLOAD BUTTONS
========================================================= */
._packageButtons_s4m1c_755 {
padding: 5px 13px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
._downloadPrimary_s4m1c_769,
._downloadSecondary_s4m1c_771 {
width: 100%;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 6px;
font-size: 10px;
cursor: pointer;
}
._downloadPrimary_s4m1c_769 {
border: 1px solid #0b6cff;
background: #0b6cff;
color: #fff;
}
._downloadPrimary_s4m1c_769:hover {
background: #075fdc;
}
._downloadSecondary_s4m1c_771 {
border: 1px solid #a8caf7;
background: #fff;
color: #0b6cff;
}
._downloadSecondary_s4m1c_771:hover {
background: #f3f8ff;
}
/* =========================================================
PACKAGE TABLE
========================================================= */
._tableWrapper_s4m1c_843 {
width: 100%;
overflow-x: auto;
}
._packageTable_s4m1c_853 {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
._packageTable_s4m1c_853 thead {
background: #f3f7fc;
}
._packageTable_s4m1c_853 th {
height: 34px;
padding: 0 8px;
border-bottom: 1px solid #e1e8f3;
color: #223966;
font-size: 9px;
font-weight: 700;
text-align: left;
white-space: nowrap;
}
._packageTable_s4m1c_853 td {
height: 32px;
padding: 5px 8px;
border-bottom: 1px solid #e7edf5;
color: #40567e;
font-size: 9px;
vertical-align: middle;
}
._packageTable_s4m1c_853 tbody tr:hover {
background: #f8fbff;
}
._packageTable_s4m1c_853 th:nth-child(1) {
width: 35px;
}
._packageTable_s4m1c_853 th:nth-child(2) {
width: 31%;
}
._packageTable_s4m1c_853 th:nth-child(3) {
width: 22%;
}
._packageTable_s4m1c_853 th:nth-child(4) {
width: 14%;
}
._packageTable_s4m1c_853 th:nth-child(5) {
width: 15%;
}
._packageTable_s4m1c_853 th:nth-child(6) {
width: 65px;
}
._fileName_s4m1c_969 {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
._fileName_s4m1c_969 strong {
color: #254276;
font-size: 9px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._fileIcon_s4m1c_1001 {
width: 20px;
height: 23px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
font-size: 12px;
}
._fileIconPdf_s4m1c_1023 {
background: #ffe5e5;
color: #e73842;
}
._fileIconWord_s4m1c_1033 {
background: #e7f0ff;
color: #2774df;
}
._fileIconExcel_s4m1c_1043 {
background: #e5f7e9;
color: #159752;
}
._fileIconDefault_s4m1c_1053 {
background: #e9edf3;
color: #687a96;
}
._typeText_s4m1c_1063 {
color: #5c7198;
font-size: 9px;
}
._sizeText_s4m1c_1073 {
color: #536b93;
font-size: 9px;
}
._includedStatus_s4m1c_1083 {
display: inline-flex;
align-items: center;
gap: 5px;
color: #079b59;
font-size: 9px;
font-weight: 500;
}
._includedStatus_s4m1c_1083 svg {
width: 17px;
height: 17px;
padding: 2px;
border-radius: 50%;
background: #10a968;
color: white;
}
._viewButton_s4m1c_1119 {
min-width: 53px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
border: 1px solid #cfe0f6;
border-radius: 4px;
background: #f6faff;
color: #1669d7;
font-size: 9px;
cursor: pointer;
}
._viewButton_s4m1c_1119:hover {
border-color: #0b6cff;
background: #edf5ff;
}
._emptyState_s4m1c_1159 {
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 7px;
color: #7184a4;
}
._emptyState_s4m1c_1159 svg {
font-size: 27px;
color: #7d94b5;
}
._emptyState_s4m1c_1159 strong {
color: #304873;
font-size: 11px;
}
._emptyState_s4m1c_1159 span {
font-size: 9px;
}
/* =========================================================
BOTTOM BANNER
========================================================= */
._readyBanner_s4m1c_1215,
._pendingBanner_s4m1c_1217 {
min-height: 45px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-top: 11px;
border-radius: 6px;
font-size: 10px;
}
._readyBanner_s4m1c_1215 {
border: 1px solid #bcebd5;
background: #ebfff5;
color: #138451;
}
._pendingBanner_s4m1c_1217 {
border: 1px solid #f4ddb2;
background: #fff9ed;
color: #ad710b;
}
._bannerIcon_s4m1c_1263 {
width: 21px;
height: 21px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0aa969;
color: #fff;
font-size: 13px;
}
/* =========================================================
MODAL
========================================================= */
._modalOverlay_s4m1c_1295 {
position: fixed;
z-index: 200;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(13, 31, 59, 0.35);
}
._submitModal_s4m1c_1317 {
width: min(500px, 100%);
border-radius: 10px;
background: #fff;
box-shadow: 0 18px 50px rgba(16, 39, 74, 0.25);
overflow: hidden;
}
._modalHeader_s4m1c_1333 {
padding: 17px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e5ebf3;
}
._modalHeader_s4m1c_1333 > div:first-child {
display: flex;
align-items: center;
gap: 10px;
}
._modalIcon_s4m1c_1361 {
width: 37px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: #eaf3ff;
color: #0b6cff;
}
._modalHeader_s4m1c_1333 h2 {
margin: 0;
color: #152d64;
font-size: 15px;
}
._modalHeader_s4m1c_1333 p {
margin: 4px 0 0;
color: #7a8ba8;
font-size: 9px;
}
._modalHeader_s4m1c_1333 button {
width: 29px;
height: 29px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 5px;
background: #f3f6fa;
color: #687994;
cursor: pointer;
}
._modalBody_s4m1c_1433 {
padding: 17px 18px;
}
._confirmationBox_s4m1c_1441 {
display: flex;
gap: 10px;
padding: 12px;
margin-bottom: 16px;
border: 1px solid #d9e7f8;
border-radius: 7px;
background: #f5f9ff;
}
._confirmationBox_s4m1c_1441 > svg {
flex: 0 0 auto;
margin-top: 1px;
color: #0b6cff;
font-size: 18px;
}
._confirmationBox_s4m1c_1441 strong {
display: block;
color: #294577;
font-size: 10px;
}
._confirmationBox_s4m1c_1441 span {
display: block;
margin-top: 5px;
color: #657795;
font-size: 9px;
line-height: 1.5;
}
._formLabel_s4m1c_1503 {
display: flex;
flex-direction: column;
gap: 6px;
color: #4e6387;
font-size: 10px;
font-weight: 600;
}
._formLabel_s4m1c_1503 input {
height: 36px;
padding: 0 10px;
border: 1px solid #cfdbeb;
border-radius: 6px;
outline: none;
color: #294576;
font-size: 10px;
}
._formLabel_s4m1c_1503 input:focus {
border-color: #0b6cff;
box-shadow: 0 0 0 2px rgba(11, 108, 255, 0.08);
}
._warningCheckbox_s4m1c_1551 {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 15px;
color: #5d7193;
font-size: 9px;
line-height: 1.45;
cursor: pointer;
}
._warningCheckbox_s4m1c_1551 input {
margin-top: 1px;
accent-color: #0b6cff;
}
._modalFooter_s4m1c_1583 {
padding: 12px 18px;
display: flex;
justify-content: flex-end;
gap: 7px;
border-top: 1px solid #e5ebf3;
}
._cancelButton_s4m1c_1599,
._confirmSubmitButton_s4m1c_1601 {
height: 34px;
padding: 0 13px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 5px;
font-size: 10px;
cursor: pointer;
}
._cancelButton_s4m1c_1599 {
border: 1px solid #d4dfed;
background: #fff;
color: #566b8d;
}
._confirmSubmitButton_s4m1c_1601 {
border: 1px solid #0b6cff;
background: #0b6cff;
color: #fff;
font-weight: 600;
}
._confirmSubmitButton_s4m1c_1601:hover:not(:disabled) {
background: #075fdc;
}
._confirmSubmitButton_s4m1c_1601:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================================
LOADING
========================================================= */
._loadingState_s4m1c_1677 {
min-height: 420px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 7px;
color: #7184a4;
}
._loadingIcon_s4m1c_1697 {
color: #0b6cff;
font-size: 30px;
animation: _packagePulse_s4m1c_1 1.2s ease-in-out infinite;
}
._loadingState_s4m1c_1677 strong {
color: #294576;
font-size: 12px;
}
._loadingState_s4m1c_1677 span {
font-size: 10px;
}
@keyframes _packagePulse_s4m1c_1 {
0%,
100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.08);
opacity: 1;
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1050px) {
._contentGrid_s4m1c_505 {
grid-template-columns: 1fr;
}
._packageCard_s4m1c_517 {
order: 1;
}
._contentsCard_s4m1c_519 {
order: 2;
}
._progressCard_s4m1c_391 {
overflow-x: auto;
}
._progressStep_s4m1c_413 {
min-width: 135px;
}
}
@media (max-width: 700px) {
._pageHeader_s4m1c_21 {
align-items: flex-start;
flex-direction: column;
}
._headerActions_s4m1c_103 {
width: 100%;
}
._submitTenderButton_s4m1c_117 {
flex: 1;
}
._progressCard_s4m1c_391 {
padding: 8px 14px;
}
._progressLine_s4m1c_483 {
margin: 0 8px;
}
._packageTable_s4m1c_853 {
min-width: 750px;
}
}
._successMessage_s4m1c_279 {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid #bbf7d0;
border-radius: 10px;
background: #ecfdf5;
color: #166534;
}
._successMessage_s4m1c_279 > svg {
flex: 0 0 auto;
font-size: 20px;
}
._successMessageContent_s4m1c_1899 {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
._successMessageContent_s4m1c_1899 strong {
font-size: 14px;
font-weight: 600;
}
._successMessageContent_s4m1c_1899 span {
font-size: 12px;
color: #15803d;
}
._successMessageContent_s4m1c_1899 small {
margin-top: 2px;
font-size: 11px;
color: #166534;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._successDownloadButton_s4m1c_1963 {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 36px;
padding: 0 14px;
border: 0;
border-radius: 7px;
background: #16a34a;
color: #ffffff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
opacity 0.15s ease;
}
._successDownloadButton_s4m1c_1963:hover:not(:disabled) {
background: #15803d;
}
._successDownloadButton_s4m1c_1963:disabled {
opacity: 0.65;
cursor: not-allowed;
}
._page_139g5_1 {
width: 100%;
color: #172b4d;
}
/* =========================================================
HEADER
========================================================= */
._header_139g5_19 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 20px;
}
._titleArea_139g5_35 {
display: flex;
align-items: center;
gap: 14px;
}
._titleIcon_139g5_47 {
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #eaf3ff;
color: #146ef5;
font-size: 21px;
}
._titleArea_139g5_35 h1 {
margin: 0 0 4px;
font-size: 23px;
font-weight: 700;
color: #17315f;
}
._titleArea_139g5_35 p {
margin: 0;
font-size: 13px;
color: #71819b;
}
._headerActions_139g5_97 {
display: flex;
align-items: center;
gap: 14px;
}
._lastRun_139g5_109 {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #71819b;
}
._runButton_139g5_125 {
min-height: 40px;
padding: 0 15px;
border: 0;
border-radius: 7px;
background: #1168ed;
color: #fff;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 3px 10px rgba(17, 104, 237, 0.18);
}
._runButton_139g5_125:hover:not(:disabled) {
background: #095bd7;
}
._runButton_139g5_125:disabled {
opacity: 0.65;
cursor: not-allowed;
}
._runChevron_139g5_175 {
margin-left: 3px;
font-size: 13px;
}
/* =========================================================
ERROR
========================================================= */
._errorBanner_139g5_193 {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 15px;
margin-bottom: 18px;
border: 1px solid #fecaca;
border-radius: 8px;
background: #fff5f5;
color: #991b1b;
}
._errorIcon_139g5_217 {
font-size: 20px;
}
._errorBanner_139g5_193 > div:nth-child(2) {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
._errorBanner_139g5_193 strong {
font-size: 13px;
}
._errorBanner_139g5_193 span {
font-size: 12px;
color: #b91c1c;
}
._errorBanner_139g5_193 > button {
border: 0;
background: transparent;
color: #991b1b;
cursor: pointer;
}
/* =========================================================
NOT VERIFIED
========================================================= */
._notVerified_139g5_279 {
min-height: 320px;
border: 1px solid #dbe5f2;
border-radius: 10px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px;
}
._notVerifiedIcon_139g5_305 {
width: 60px;
height: 60px;
border-radius: 50%;
background: #eef5ff;
color: #1769ee;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 15px;
}
._notVerified_139g5_279 h2 {
margin: 0 0 7px;
font-size: 18px;
color: #20385e;
}
._notVerified_139g5_279 p {
max-width: 520px;
margin: 0 0 20px;
color: #71819b;
font-size: 13px;
line-height: 1.6;
}
._primaryAction_139g5_359 {
height: 40px;
padding: 0 18px;
border: 0;
border-radius: 7px;
background: #1168ed;
color: #fff;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
}
/* =========================================================
SUMMARY
========================================================= */
._summaryGrid_139g5_397 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 15px;
}
._summaryCard_139g5_411 {
min-height: 94px;
padding: 16px;
border: 1px solid #dce5f0;
border-radius: 9px;
background: #fff;
display: flex;
align-items: center;
gap: 13px;
}
._summaryIcon_139g5_433 {
width: 40px;
height: 40px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
font-size: 21px;
flex-shrink: 0;
}
._summaryCard_139g5_411 > div:last-child {
display: flex;
flex-direction: column;
}
._summaryCard_139g5_411 strong {
font-size: 20px;
line-height: 1.1;
color: #18335f;
}
._summaryCard_139g5_411 span {
margin-top: 2px;
font-size: 12px;
font-weight: 600;
}
._summaryCard_139g5_411 small {
margin-top: 3px;
font-size: 10px;
color: #7b8aa2;
}
._passCard_139g5_501 {
background: #f8fffb;
}
._passCard_139g5_501 ._summaryIcon_139g5_433 {
background: #dff9ea;
color: #0b9b55;
}
._passCard_139g5_501 span {
color: #079452;
}
._warningCard_139g5_527 {
background: #fffdf8;
}
._warningCard_139g5_527 ._summaryIcon_139g5_433 {
background: #fff0cf;
color: #e99a00;
}
._warningCard_139g5_527 span {
color: #d48a00;
}
._blockerCard_139g5_553 {
background: #fff9f9;
}
._blockerCard_139g5_553 ._summaryIcon_139g5_433 {
background: #ffe2e2;
color: #ef3c3c;
}
._blockerCard_139g5_553 span {
color: #e62f2f;
}
._naCard_139g5_579 {
background: #f9fafc;
}
._naCard_139g5_579 ._summaryIcon_139g5_433 {
background: #e9eef5;
color: #73829a;
}
._naCard_139g5_579 span {
color: #687892;
}
/* =========================================================
SUBMISSION STATUS
========================================================= */
._readySubmission_139g5_613,
._blockedSubmission_139g5_615 {
min-height: 72px;
border-radius: 9px;
padding: 13px 16px;
margin-bottom: 17px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
._readySubmission_139g5_613 {
border: 1px solid #bde9d0;
background: #f3fff8;
}
._blockedSubmission_139g5_615 {
border: 1px solid #ffd1d1;
background: #fff8f8;
}
._readySubmission_139g5_613 > div:first-child,
._blockedSubmission_139g5_615 > div:first-child {
display: flex;
align-items: center;
gap: 11px;
}
._submissionStatusIcon_139g5_671 {
width: 37px;
height: 37px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
}
._readySubmission_139g5_613 ._submissionStatusIcon_139g5_671 {
background: #d9f8e6;
color: #0c9d55;
}
._blockedSubmission_139g5_615 ._submissionStatusIcon_139g5_671 {
background: #ffe0e0;
color: #e83434;
}
._readySubmission_139g5_613 strong,
._blockedSubmission_139g5_615 strong {
display: block;
font-size: 13px;
}
._readySubmission_139g5_613 span,
._blockedSubmission_139g5_615 span {
display: block;
margin-top: 3px;
font-size: 11px;
color: #71819b;
}
._requirementProgress_139g5_739 {
min-width: 110px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
._requirementProgress_139g5_739 strong {
font-size: 15px;
}
._requirementProgress_139g5_739 span {
font-size: 10px;
margin-top: 2px;
}
/* =========================================================
TOOLBAR
========================================================= */
._toolbar_139g5_779 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 12px;
}
._filterTabs_139g5_795 {
display: flex;
gap: 6px;
}
._filterButton_139g5_805,
._activeFilter_139g5_807 {
height: 35px;
padding: 0 12px;
border-radius: 6px;
font-size: 11px;
cursor: pointer;
white-space: nowrap;
}
._filterButton_139g5_805 {
border: 1px solid #dce5ef;
background: #fff;
color: #60718c;
}
._activeFilter_139g5_807 {
border: 1px solid #176df1;
background: #f1f7ff;
color: #1266e8;
font-weight: 600;
}
._toolbarRight_139g5_851 {
display: flex;
align-items: center;
gap: 8px;
}
._searchBox_139g5_863 {
width: 220px;
height: 35px;
border: 1px solid #d9e2ed;
border-radius: 6px;
background: #fff;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
color: #8090a8;
}
._searchBox_139g5_863 input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
font-size: 11px;
color: #243a5e;
}
._filterWrapper_139g5_907 {
position: relative;
}
._filterMenuButton_139g5_915 {
height: 35px;
padding: 0 11px;
border: 1px solid #d9e2ed;
border-radius: 6px;
background: #fff;
color: #536682;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 11px;
}
._filterMenu_139g5_915 {
position: absolute;
right: 0;
top: calc(100% + 5px);
width: 160px;
z-index: 20;
padding: 5px;
border: 1px solid #dbe3ed;
border-radius: 7px;
background: #fff;
box-shadow: 0 8px 25px rgba(35, 55, 85, 0.12);
}
._filterMenu_139g5_915 button {
width: 100%;
border: 0;
border-radius: 5px;
padding: 9px 10px;
background: transparent;
color: #536682;
text-align: left;
font-size: 11px;
cursor: pointer;
}
._filterMenu_139g5_915 button:hover {
background: #f4f7fb;
}
/* =========================================================
TABLE
========================================================= */
._tableCard_139g5_1009 {
border: 1px solid #dce5ef;
border-radius: 9px;
background: #fff;
overflow: hidden;
}
._tableWrapper_139g5_1023 {
width: 100%;
overflow-x: auto;
}
._table_139g5_1009 {
width: 100%;
border-collapse: collapse;
min-width: 1050px;
}
._table_139g5_1009 thead {
background: #f5f8fc;
}
._table_139g5_1009 th {
height: 39px;
padding: 0 10px;
border-bottom: 1px solid #dbe4ef;
color: #526682;
font-size: 10px;
font-weight: 700;
text-align: left;
white-space: nowrap;
}
._table_139g5_1009 td {
min-height: 58px;
padding: 9px 10px;
border-bottom: 1px solid #edf1f6;
color: #536682;
font-size: 11px;
vertical-align: middle;
}
._table_139g5_1009 tbody tr:hover {
background: #fbfdff;
}
._checkboxColumn_139g5_1101 {
width: 32px;
}
._table_139g5_1009 input[type="checkbox"] {
width: 14px;
height: 14px;
}
._checkName_139g5_1119 {
display: flex;
flex-direction: column;
gap: 4px;
}
._checkName_139g5_1119 strong {
color: #263f66;
font-size: 11px;
}
._checkName_139g5_1119 span {
color: #7d8da5;
font-size: 9px;
}
._resultBadge_139g5_1151 {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 70px;
padding: 5px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
._result_pass_139g5_1175 {
background: #e3f9ed;
color: #079452;
}
._result_warning_139g5_1185 {
background: #fff2d3;
color: #cf8500;
}
._result_fail_139g5_1195 {
background: #ffe4e4;
color: #e43131;
}
._result_not_applicable_139g5_1205 {
background: #e9eef5;
color: #6e7e96;
}
._detailsText_139g5_1215 {
display: block;
max-width: 330px;
line-height: 1.45;
color: #647590;
}
._sourceCell_139g5_1229 {
display: flex;
flex-direction: column;
gap: 3px;
}
._sourceCell_139g5_1229 span {
color: #526682;
}
._sourceCell_139g5_1229 small {
color: #8a98ac;
font-size: 9px;
}
._viewButton_139g5_1259,
._reviewButton_139g5_1261,
._fixButton_139g5_1263 {
height: 30px;
padding: 0 10px;
border-radius: 5px;
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
font-size: 10px;
white-space: nowrap;
}
._viewButton_139g5_1259 {
border: 1px solid #cdddf2;
background: #f8fbff;
color: #146be9;
}
._reviewButton_139g5_1261 {
border: 1px solid #a8cbff;
background: #f3f8ff;
color: #1267e8;
}
._fixButton_139g5_1263 {
border: 1px solid #ff4d4d;
background: #fff;
color: #ef3030;
}
._rowMoreButton_139g5_1323 {
border: 0;
background: transparent;
color: #5e6f89;
font-size: 15px;
cursor: pointer;
}
._emptyTable_139g5_1339 {
min-height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: #8795aa;
}
._emptyTable_139g5_1339 svg {
font-size: 24px;
}
._emptyTable_139g5_1339 strong {
color: #526682;
font-size: 13px;
}
._emptyTable_139g5_1339 span {
font-size: 11px;
}
/* =========================================================
EXCEPTIONS
========================================================= */
._exceptionsSection_139g5_1393 {
margin-top: 18px;
}
._sectionHeader_139g5_1401 {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 11px;
}
._sectionHeader_139g5_1401 h2 {
margin: 0 0 3px;
font-size: 16px;
color: #213b63;
}
._sectionHeader_139g5_1401 p {
margin: 0;
font-size: 11px;
color: #7787a0;
}
._exceptionCount_139g5_1439 {
padding: 5px 9px;
border-radius: 12px;
background: #eef4fc;
color: #59708f;
font-size: 10px;
}
._exceptionGrid_139g5_1455 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
._exceptionCardBlocker_139g5_1467,
._exceptionCardWarning_139g5_1469 {
text-align: left;
padding: 13px;
border-radius: 8px;
background: #fff;
cursor: pointer;
}
._exceptionCardBlocker_139g5_1467 {
border: 1px solid #ffcaca;
}
._exceptionCardWarning_139g5_1469 {
border: 1px solid #ffe0a1;
}
._exceptionCardTop_139g5_1501 {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
font-size: 10px;
font-weight: 600;
}
._exceptionCardBlocker_139g5_1467 ._exceptionCardTop_139g5_1501 {
color: #e43131;
}
._exceptionCardWarning_139g5_1469 ._exceptionCardTop_139g5_1501 {
color: #d48a00;
}
._exceptionCardBlocker_139g5_1467 strong,
._exceptionCardWarning_139g5_1469 strong {
display: block;
color: #30486c;
font-size: 11px;
}
._exceptionCardBlocker_139g5_1467 p,
._exceptionCardWarning_139g5_1469 p {
margin: 6px 0 8px;
color: #687995;
font-size: 10px;
line-height: 1.5;
}
._exceptionCardBlocker_139g5_1467 small,
._exceptionCardWarning_139g5_1469 small {
color: #8996a9;
font-size: 9px;
}
._noExceptions_139g5_1577 {
grid-column: 1 / -1;
min-height: 130px;
border: 1px solid #ccebd8;
border-radius: 8px;
background: #f6fff9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
color: #079452;
}
._noExceptions_139g5_1577 strong {
font-size: 13px;
}
._noExceptions_139g5_1577 span {
color: #71819b;
font-size: 10px;
}
/* =========================================================
LOADING
========================================================= */
._loadingState_139g5_1631 {
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #71819b;
font-size: 12px;
}
/* =========================================================
MODAL
========================================================= */
._modalOverlay_139g5_1659 {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(19, 37, 62, 0.38);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
._detailModal_139g5_1681 {
width: min(620px, 100%);
border-radius: 11px;
background: #fff;
box-shadow: 0 18px 60px rgba(19, 37, 62, 0.22);
overflow: hidden;
}
._modalHeader_139g5_1697 {
min-height: 70px;
padding: 15px 18px;
border-bottom: 1px solid #e6ebf2;
display: flex;
align-items: center;
justify-content: space-between;
}
._modalHeader_139g5_1697 > div:first-child {
display: flex;
align-items: center;
gap: 11px;
}
._modalIcon_139g5_1727 {
width: 38px;
height: 38px;
border-radius: 9px;
background: #eef4ff;
color: #176cf0;
display: flex;
align-items: center;
justify-content: center;
}
._modalHeader_139g5_1697 h2 {
margin: 0 0 3px;
color: #243d63;
font-size: 15px;
}
._modalHeader_139g5_1697 p {
margin: 0;
color: #8290a5;
font-size: 10px;
}
._modalHeader_139g5_1697 button {
width: 30px;
height: 30px;
border: 0;
border-radius: 5px;
background: #f1f4f8;
color: #65758d;
cursor: pointer;
}
._modalBody_139g5_1793 {
padding: 18px;
}
._detailBlocker_139g5_1801,
._detailWarning_139g5_1803 {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border-radius: 7px;
}
._detailBlocker_139g5_1801 {
border: 1px solid #ffcaca;
background: #fff6f6;
color: #df3030;
}
._detailWarning_139g5_1803 {
border: 1px solid #ffe0a0;
background: #fffaf0;
color: #d18a00;
}
._detailBlocker_139g5_1801 > div,
._detailWarning_139g5_1803 > div {
display: flex;
flex-direction: column;
gap: 5px;
}
._detailBlocker_139g5_1801 span,
._detailWarning_139g5_1803 span {
color: #667793;
font-size: 11px;
line-height: 1.5;
}
._detailRow_139g5_1871 {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 12px 0;
border-bottom: 1px solid #edf1f6;
font-size: 11px;
}
._detailRow_139g5_1871 span {
color: #7a8aa2;
}
._detailRow_139g5_1871 strong {
color: #30486c;
}
._modalFooter_139g5_1905 {
padding: 12px 18px;
border-top: 1px solid #e6ebf2;
display: flex;
justify-content: flex-end;
gap: 8px;
}
._cancelButton_139g5_1921,
._fixModalButton_139g5_1923 {
height: 35px;
padding: 0 13px;
border-radius: 6px;
cursor: pointer;
font-size: 11px;
}
._cancelButton_139g5_1921 {
border: 1px solid #d7e0eb;
background: #fff;
color: #61718a;
}
._fixModalButton_139g5_1923 {
border: 0;
background: #1168ed;
color: #fff;
}
/* =========================================================
ANIMATION
========================================================= */
._spin_139g5_1971 {
animation: _spin_139g5_1971 0.9s linear infinite;
}
@keyframes _spin_139g5_1971 {
to {
transform: rotate(360deg);
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
._summaryGrid_139g5_397 {
grid-template-columns: repeat(2, 1fr);
}
._exceptionGrid_139g5_1455 {
grid-template-columns: repeat(2, 1fr);
}
._toolbar_139g5_779 {
align-items: flex-start;
flex-direction: column;
}
._toolbarRight_139g5_851 {
width: 100%;
}
._searchBox_139g5_863 {
flex: 1;
}
}
@media (max-width: 760px) {
._header_139g5_19 {
align-items: flex-start;
flex-direction: column;
}
._headerActions_139g5_97 {
width: 100%;
justify-content: space-between;
}
._summaryGrid_139g5_397 {
grid-template-columns: 1fr;
}
._exceptionGrid_139g5_1455 {
grid-template-columns: 1fr;
}
._filterTabs_139g5_795 {
width: 100%;
overflow-x: auto;
}
._readySubmission_139g5_613,
._blockedSubmission_139g5_615 {
align-items: flex-start;
flex-direction: column;
}
._requirementProgress_139g5_739 {
align-items: flex-start;
}
}
/* =========================================================
CLIENT VIEW
FIXED FULL HEIGHT / NO BOTTOM EMPTY SPACE
========================================================= */
/* =========================================================
PAGE TOKENS
========================================================= */
._page_19eeh_19 {
--cv-primary: #1769e8;
--cv-primary-hover: #0f5fd6;
--cv-primary-active: #0b54c4;
--cv-primary-soft: #eaf3ff;
--cv-primary-soft-2: #f4f8ff;
--cv-page: #f7faff;
--cv-surface: #ffffff;
--cv-surface-soft: #f9fbfe;
--cv-text: #14213d;
--cv-text-2: #334564;
--cv-text-3: #71809a;
--cv-muted: #8b98ae;
--cv-border: #dbe5f1;
--cv-border-soft: #e9eef5;
--cv-green: #16a36a;
--cv-green-soft: #e8f9f0;
--cv-orange: #f59e0b;
--cv-orange-soft: #fff4df;
--cv-red: #ef4444;
--cv-red-soft: #fff0f1;
--cv-cyan: #0891b2;
--cv-cyan-soft: #e8f8fc;
--cv-radius-sm: 6px;
--cv-radius-md: 8px;
--cv-radius-lg: 10px;
--cv-radius-full: 999px;
--cv-shadow: 0 1px 3px rgba(15, 23, 42, 0.035);
width: 100%;
min-width: 0;
/*
* IMPORTANT FIX:
* Do not subtract 64px here.
*/
height: 100dvh;
min-height: 100dvh;
padding: 7px 8px 7px;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
background: var(--cv-page);
color: var(--cv-text);
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 12px;
}
._page_19eeh_19 *,
._page_19eeh_19 *::before,
._page_19eeh_19 *::after {
box-sizing: border-box;
}
/* =========================================================
TOP NAVIGATION
========================================================= */
._topNavigation_19eeh_181 {
width: 100%;
min-width: 0;
min-height: 39px;
flex: 0 0 39px;
margin: 0 0 6px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
/* =========================================================
BREADCRUMB
========================================================= */
._breadcrumb_19eeh_221 {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
color: var(--cv-muted);
font-size: 10px;
line-height: 15px;
font-weight: 500;
}
._breadcrumb_19eeh_221 > svg {
flex: 0 0 auto;
color: #9aa7ba;
}
._breadcrumb_19eeh_221 > span {
min-width: 0;
overflow: hidden;
color: var(--cv-text-2);
text-overflow: ellipsis;
white-space: nowrap;
}
._breadcrumbButton_19eeh_285 {
padding: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--cv-primary);
font-family: inherit;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
._breadcrumbButton_19eeh_285:hover {
color: var(--cv-primary-hover);
}
/* =========================================================
NAVIGATION BUTTONS
========================================================= */
._pageNavigation_19eeh_335 {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
}
._quickResponseButton_19eeh_353 {
width: auto !important;
min-width: 68px !important;
height: 34px !important;
min-height: 34px !important;
padding: 0 15px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid var(--cv-primary) !important;
border-radius: 8px !important;
background: var(--cv-primary) !important;
color: #ffffff !important;
font-family: inherit !important;
font-size: 10px !important;
font-weight: 600 !important;
box-shadow: none !important;
cursor: pointer;
}
._quickResponseButton_19eeh_353:hover {
background: var(--cv-primary-hover) !important;
border-color: var(--cv-primary-hover) !important;
}
/* =========================================================
CLIENT HERO
========================================================= */
._clientHero_19eeh_427 {
width: 100%;
min-width: 0;
flex: 0 0 auto;
margin: 0 0 7px;
overflow: visible;
border: 1px solid var(--cv-border);
border-radius: 10px;
background: #ffffff;
box-shadow: var(--cv-shadow);
}
/* =========================================================
HERO TOP
========================================================= */
._heroTop_19eeh_471 {
width: 100%;
min-width: 0;
min-height: 57px;
padding: 8px 11px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--cv-border-soft);
}
/* =========================================================
CLIENT IDENTITY
========================================================= */
._clientIdentity_19eeh_513 {
min-width: 0;
display: flex;
align-items: center;
gap: 9px;
}
._mainAvatar_19eeh_531 {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #cfe2ff;
border-radius: 8px;
background: var(--cv-primary-soft);
color: var(--cv-primary);
font-size: 14px;
font-weight: 700;
}
._identityContent_19eeh_573 {
min-width: 0;
}
._identityContent_19eeh_573 > p {
margin: 2px 0 0;
color: var(--cv-text-3);
font-size: 9px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._nameRow_19eeh_605 {
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
._nameRow_19eeh_605 h1 {
min-width: 0;
margin: 0;
color: var(--cv-text);
font-size: 17px;
line-height: 21px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =========================================================
STAR
========================================================= */
._starButton_19eeh_665 {
width: 24px;
height: 24px;
flex: 0 0 24px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 5px;
background: transparent;
color: #9aa6b8;
cursor: pointer;
}
._starButton_19eeh_665:hover {
background: #fff8e8;
color: var(--cv-orange);
}
._starred_19eeh_719 {
color: var(--cv-orange);
}
._starred_19eeh_719 svg {
fill: currentColor;
}
/* =========================================================
STAGE
========================================================= */
._stageWrapper_19eeh_743 {
position: relative;
display: inline-flex;
}
._stageButton_19eeh_755 {
min-height: 22px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
border: 1px solid transparent;
border-radius: 6px;
font-family: inherit;
font-size: 9px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
._stage-primary_19eeh_799,
._stage-blue_19eeh_801,
._stage-purple_19eeh_803 {
border-color: #cfe2ff;
background: var(--cv-primary-soft);
color: var(--cv-primary);
}
._stage-success_19eeh_819 {
border-color: #bcebd4;
background: var(--cv-green-soft);
color: #158458;
}
._stage-info_19eeh_835 {
border-color: #c8e9f0;
background: var(--cv-cyan-soft);
color: #087d9a;
}
._stage-danger_19eeh_851 {
border-color: #fecdd3;
background: var(--cv-red-soft);
color: #dc3545;
}
/* =========================================================
STAGE DROPDOWN
========================================================= */
._stageDropdown_19eeh_875 {
position: absolute;
top: calc(100% + 5px);
left: 0;
z-index: 1200;
width: 165px;
padding: 5px;
border: 1px solid var(--cv-border);
border-radius: 8px;
background: #ffffff;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
._stageOption_19eeh_915 {
width: 100%;
min-height: 30px;
padding: 0 8px;
display: flex;
align-items: center;
gap: 7px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--cv-text-2);
font-family: inherit;
font-size: 10px;
cursor: pointer;
}
._stageOption_19eeh_915:hover,
._stageOptionActive_19eeh_965 {
background: var(--cv-primary-soft-2);
color: var(--cv-primary);
}
._stageDot_19eeh_977 {
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 50%;
}
._dot-primary_19eeh_995,
._dot-blue_19eeh_997,
._dot-purple_19eeh_999 {
background: var(--cv-primary);
}
._dot-success_19eeh_1007 {
background: var(--cv-green);
}
._dot-info_19eeh_1015 {
background: var(--cv-cyan);
}
._dot-danger_19eeh_1023 {
background: var(--cv-red);
}
._stageCheck_19eeh_1031 {
margin-left: auto;
color: var(--cv-primary);
}
/* =========================================================
HERO META
========================================================= */
._heroMeta_19eeh_1051 {
width: 100%;
padding: 7px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
._metaDivider_19eeh_1073 {
display: none;
}
._metaItem_19eeh_1081 {
min-width: 0;
min-height: 47px;
padding: 6px 8px;
display: flex;
align-items: center;
gap: 7px;
border: 1px solid #e5ecf5;
border-radius: 7px;
background: #fbfdff;
}
._metaItem_19eeh_1081 > svg {
width: 13px;
height: 13px;
flex: 0 0 13px;
color: var(--cv-primary);
}
._metaItem_19eeh_1081 > div {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
._metaItem_19eeh_1081 span {
color: var(--cv-muted);
font-size: 9px;
line-height: 12px;
font-weight: 500;
}
._metaItem_19eeh_1081 strong {
min-width: 0;
display: flex;
align-items: center;
gap: 4px;
overflow: hidden;
color: var(--cv-text-2);
font-size: 10px;
line-height: 14px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
._smallAvatar_19eeh_1207 {
width: 18px !important;
height: 18px !important;
flex: 0 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 1px solid #cfe2ff;
border-radius: 50%;
background: var(--cv-primary-soft) !important;
color: var(--cv-primary) !important;
font-size: 7px !important;
font-weight: 700 !important;
}
/* =========================================================
HERO ACTIONS
========================================================= */
._heroActions_19eeh_1257 {
flex: 0 0 auto;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
._callButton_19eeh_1277,
._followButton_19eeh_1279,
._bookMeetingButton_19eeh_1281,
._moreButton_19eeh_1283 {
min-height: 28px !important;
padding: 0 9px !important;
border-radius: 6px !important;
font-size: 9px !important;
box-shadow: none !important;
}
._callButton_19eeh_1277 {
border-color: var(--cv-primary) !important;
background: var(--cv-primary) !important;
color: #ffffff !important;
}
._followButton_19eeh_1279 {
border: 1px solid var(--cv-primary) !important;
background: #ffffff !important;
color: var(--cv-primary) !important;
}
._bookMeetingButton_19eeh_1281,
._moreButton_19eeh_1283 {
border: 1px solid var(--cv-border) !important;
background: #ffffff !important;
color: var(--cv-text-2) !important;
}
/* =========================================================
MORE MENU
========================================================= */
._moreMenuWrapper_19eeh_1365 {
position: relative;
}
._moreMenu_19eeh_1365 {
position: absolute;
top: calc(100% + 5px);
right: 0;
z-index: 1200;
width: 190px;
padding: 5px;
border: 1px solid var(--cv-border);
border-radius: 8px;
background: #ffffff;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}
._moreMenuItem_19eeh_1413 {
width: 100%;
min-height: 31px;
padding: 0 8px;
display: flex;
align-items: center;
gap: 7px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--cv-text-2);
font-family: inherit;
font-size: 10px;
cursor: pointer;
}
._moreMenuItem_19eeh_1413:hover {
background: var(--cv-primary-soft-2);
color: var(--cv-primary);
}
._moreMenuDivider_19eeh_1471 {
height: 1px;
margin: 4px 0;
background: var(--cv-border-soft);
}
._moreMenuDanger_19eeh_1487 {
color: var(--cv-red);
}
/* =========================================================
NEXT ACTION
========================================================= */
._nextActionBanner_19eeh_1503 {
width: 100%;
min-height: 52px;
flex: 0 0 auto;
margin: 0 0 7px;
padding: 7px 9px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: 1px solid #d7e6fb;
border-radius: 9px;
background: linear-gradient(90deg, #edf5ff 0%, #f8fbff 100%);
}
._nextActionLeft_19eeh_1549 {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
._nextActionIcon_19eeh_1567 {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d6e7ff;
border-radius: 7px;
background: #ffffff;
color: var(--cv-primary);
}
._nextActionHeading_19eeh_1603 {
padding-right: 9px;
border-right: 1px solid #d5e2f3;
}
._nextActionHeading_19eeh_1603 strong {
color: var(--cv-primary);
font-size: 10px;
font-weight: 700;
}
._nextActionDescription_19eeh_1629 {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
._nextActionDescription_19eeh_1629 strong {
color: var(--cv-text);
font-size: 10px;
}
._nextActionDescription_19eeh_1629 span {
overflow: hidden;
color: var(--cv-text-3);
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
._nextActionRight_19eeh_1681 {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 5px;
}
._dismissAction_19eeh_1699 {
width: 27px;
height: 27px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--cv-text-3);
cursor: pointer;
}
/* =========================================================
MAIN CONTENT GRID
MAIN BOTTOM SPACE FIX
========================================================= */
._contentGrid_19eeh_1749 {
width: 100%;
min-width: 0;
/*
* Takes ALL remaining height after:
* topNavigation
* clientHero
* nextActionBanner
*/
flex: 1 1 0;
min-height: 0;
display: grid;
grid-template-columns:
minmax(0, 1.95fr)
minmax(330px, 1fr);
gap: 10px;
align-items: stretch;
overflow: hidden;
}
/* =========================================================
COLUMNS
========================================================= */
._leftColumn_19eeh_1809,
._rightColumn_19eeh_1811 {
width: 100%;
min-width: 0;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
/* =========================================================
MAIN CARDS
SAME HEIGHT
========================================================= */
._leftColumn_19eeh_1809 > ._card_19eeh_1851,
._rightColumn_19eeh_1811 > ._card_19eeh_1851 {
width: 100%;
flex: 1 1 0;
height: 100%;
min-height: 0;
}
/* =========================================================
COMMON CARD
========================================================= */
._card_19eeh_1851 {
width: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--cv-border);
border-radius: 10px;
background: #ffffff;
color: var(--cv-text);
box-shadow: var(--cv-shadow);
}
/* =========================================================
CARD HEADER
========================================================= */
._cardHeader_19eeh_1927,
._simpleCardHeader_19eeh_1929 {
width: 100%;
min-width: 0;
min-height: 52px;
flex: 0 0 52px;
padding: 7px 11px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
border-bottom: 1px solid var(--cv-border-soft);
background: #ffffff;
}
._cardHeadingGroup_19eeh_1969 {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
._cardHeadingGroup_19eeh_1969 > div:last-child {
min-width: 0;
}
._cardIcon_19eeh_1995 {
width: 31px;
height: 31px;
flex: 0 0 31px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d9e8ff;
border-radius: 7px;
background: var(--cv-primary-soft);
color: var(--cv-primary);
}
._cardHeader_19eeh_1927 h2,
._simpleCardHeader_19eeh_1929 h2 {
margin: 0;
color: var(--cv-text);
font-size: 12px;
line-height: 16px;
font-weight: 700;
}
._cardHeader_19eeh_1927 p {
margin: 1px 0 0;
color: var(--cv-text-3);
font-size: 8px;
line-height: 12px;
}
/* =========================================================
SIMPLE CARD HEADER
========================================================= */
._simpleCardHeader_19eeh_1929 > div {
min-width: 0;
display: flex;
align-items: center;
gap: 7px;
}
._simpleCardHeader_19eeh_1929 > div > svg {
color: var(--cv-primary);
}
/* =========================================================
CLIENT 360 BODY
========================================================= */
._client360Body_19eeh_2113 {
width: 100%;
flex: 1 1 auto;
min-height: 0;
padding: 11px 12px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #c5d0df transparent;
}
._client360Body_19eeh_2113::-webkit-scrollbar {
width: 4px;
}
._client360Body_19eeh_2113::-webkit-scrollbar-track {
background: transparent;
}
._client360Body_19eeh_2113::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #c5d0df;
}
/* =========================================================
INFO GRID
========================================================= */
._infoGrid_19eeh_2183 {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 18px;
row-gap: 10px;
}
/* =========================================================
INFO ITEM
========================================================= */
._infoItem_19eeh_2211,
._fullInfoRow_19eeh_2213 {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 8px;
}
._infoIcon_19eeh_2231 {
width: 29px;
height: 29px;
flex: 0 0 29px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #dceaff;
border-radius: 7px;
background: #f1f7ff;
color: var(--cv-primary);
}
._infoIconSuccess_19eeh_2267 {
border-color: #caeddc;
background: var(--cv-green-soft);
color: var(--cv-green);
}
._infoContent_19eeh_2283,
._fullInfoContent_19eeh_2285 {
min-width: 0;
flex: 1;
}
._infoLabel_19eeh_2297 {
display: block;
margin-bottom: 2px;
color: var(--cv-muted);
font-size: 9px;
line-height: 12px;
font-weight: 500;
}
._infoValueRow_19eeh_2321 {
min-width: 0;
display: flex;
align-items: center;
gap: 4px;
}
._infoValue_19eeh_2321 {
min-width: 0;
overflow: hidden;
color: var(--cv-text-2);
font-size: 10px;
line-height: 15px;
font-weight: 600;
text-overflow: ellipsis;
}
._inlineAction_19eeh_2367 {
width: 22px;
height: 22px;
flex: 0 0 22px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 5px;
background: transparent;
color: #8290a6;
cursor: pointer;
}
._inlineAction_19eeh_2367:hover {
background: var(--cv-primary-soft);
color: var(--cv-primary);
}
/* =========================================================
DIVIDER
========================================================= */
._divider_19eeh_2431 {
width: 100%;
height: 1px;
margin: 11px 0;
background: var(--cv-border-soft);
}
/* =========================================================
INLINE STAGE
========================================================= */
._inlineStage_19eeh_2457 {
min-height: 21px;
padding: 0 7px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 5px;
font-size: 9px;
font-weight: 600;
}
/* =========================================================
FULL INFO ROW
========================================================= */
._fullInfoRow_19eeh_2213 {
margin-top: 10px;
}
/* =========================================================
NOTES
========================================================= */
._notesRow_19eeh_2511 {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 6px;
}
._notesRow_19eeh_2511 p {
min-width: 0;
flex: 1;
margin: 0;
color: var(--cv-text-3);
font-size: 10px;
line-height: 15px;
}
/* =========================================================
ADDRESS
========================================================= */
._addAddressButton_19eeh_2563 {
padding: 0;
border: 0;
background: transparent;
color: var(--cv-primary);
font-family: inherit;
font-size: 10px;
cursor: pointer;
}
/* =========================================================
TAGS
========================================================= */
._tagsContainer_19eeh_2601 {
position: relative;
width: 100%;
margin-top: 3px;
}
._tagsRow_19eeh_2617 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
._tag_19eeh_2601 {
--client-tag-color: #1769e8;
min-height: 22px;
padding: 0 7px;
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid
color-mix(
in srgb,
var(--client-tag-color) 25%,
#e4e9f1
);
border-radius: 6px;
background: color-mix(
in srgb,
var(--client-tag-color) 7%,
white
);
color: var(--cv-text-2);
font-size: 9px;
}
._tagColorDot_19eeh_2697 {
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 50%;
background: var(--client-tag-color);
}
._tagName_19eeh_2719 {
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._removeTagButton_19eeh_2737 {
width: 15px;
height: 15px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: #8a96aa;
cursor: pointer;
}
._noTagsText_19eeh_2775 {
color: var(--cv-muted);
font-size: 9px;
}
._tagPickerWrapper_19eeh_2787 {
position: relative;
}
._addTagButton_19eeh_2795 {
min-height: 22px;
padding: 0 7px;
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px dashed #adcaf5;
border-radius: 6px;
background: #ffffff;
color: var(--cv-primary);
font-family: inherit;
font-size: 9px;
font-weight: 600;
cursor: pointer;
}
/* =========================================================
TAG DROPDOWN
========================================================= */
._tagDropdown_19eeh_2851 {
position: absolute;
top: calc(100% + 5px);
left: 0;
z-index: 1300;
width: 250px;
overflow: hidden;
border: 1px solid var(--cv-border);
border-radius: 9px;
background: #ffffff;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.13);
}
._tagSearchWrapper_19eeh_2891 {
position: relative;
padding: 7px;
border-bottom: 1px solid var(--cv-border-soft);
}
._tagSearchWrapper_19eeh_2891 input {
width: 100%;
height: 30px;
padding: 0 30px 0 29px;
border: 1px solid var(--cv-border);
border-radius: 6px;
outline: none;
color: var(--cv-text-2);
font: inherit;
font-size: 10px;
}
._tagDropdownList_19eeh_2941 {
max-height: 180px;
padding: 4px;
overflow-y: auto;
}
._tagDropdownState_19eeh_2957 {
padding: 12px;
color: var(--cv-muted);
font-size: 9px;
text-align: center;
}
._tagOption_19eeh_2977 {
width: 100%;
min-height: 31px;
padding: 0 7px;
display: flex;
align-items: center;
gap: 7px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--cv-text-2);
font-family: inherit;
font-size: 10px;
cursor: pointer;
}
._tagOption_19eeh_2977:hover {
background: var(--cv-primary-soft-2);
}
._tagOptionSelected_19eeh_3033 {
background: var(--cv-primary-soft);
color: var(--cv-primary);
}
._tagOptionColor_19eeh_3045 {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
}
._tagOptionName_19eeh_3063 {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =========================================================
CUSTOM FIELDS
========================================================= */
._customFieldsSection_19eeh_3093 {
width: 100%;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--cv-border-soft);
}
._customFieldRow_19eeh_3113 {
width: 100%;
min-height: 37px;
display: grid;
grid-template-columns:
minmax(120px, 0.8fr)
minmax(0, 1.7fr)
26px;
align-items: center;
gap: 7px;
padding: 5px 0;
border-bottom: 1px solid #f0f3f7;
}
._customFieldRow_19eeh_3113:last-child {
border-bottom: 0;
}
._customFieldContent_19eeh_3161 {
min-width: 0;
}
._customFieldLabel_19eeh_3169 {
color: var(--cv-muted);
font-size: 9px;
font-weight: 500;
}
._customFieldValueButton_19eeh_3183 {
width: 100%;
min-height: 27px;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--cv-text-2);
font-family: inherit;
font-size: 10px;
text-align: left;
cursor: pointer;
}
._customFieldValueButton_19eeh_3183:hover {
border-color: var(--cv-border);
background: var(--cv-surface-soft);
}
._customFieldHasValue_19eeh_3249 {
color: var(--cv-text-2);
}
._customFieldNoValue_19eeh_3257 {
color: #9ba6b8;
}
/* =========================================================
RECENT CONVERSATIONS
RIGHT PANEL INTERNAL SCROLL
========================================================= */
._conversationList_19eeh_3275 {
width: 100%;
flex: 1 1 auto;
min-height: 0;
padding: 7px;
display: flex;
flex-direction: column;
gap: 6px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #b8c5d7 transparent;
}
._conversationList_19eeh_3275::-webkit-scrollbar {
width: 4px;
}
._conversationList_19eeh_3275::-webkit-scrollbar-track {
background: transparent;
}
._conversationList_19eeh_3275::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #b8c5d7;
}
._conversationList_19eeh_3275::-webkit-scrollbar-thumb:hover {
background: #9eafc5;
}
/* =========================================================
EMPTY CONVERSATION
========================================================= */
._conversationList_19eeh_3275 > div:only-child:not(._conversationItem_19eeh_3363) {
width: 100%;
height: 100%;
min-height: 0;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 12px !important;
color: var(--cv-text-3);
font-size: 10px;
text-align: center !important;
}
/* =========================================================
CONVERSATION ITEM
========================================================= */
._conversationItem_19eeh_3363 {
width: 100%;
min-width: 0;
flex: 0 0 auto;
display: flex;
align-items: flex-end;
gap: 6px;
}
._conversationOutbound_19eeh_3435 {
flex-direction: row-reverse;
}
._conversationInbound_19eeh_3443 {
flex-direction: row;
}
/* =========================================================
CONVERSATION ICON
========================================================= */
._conversationIcon_19eeh_3459 {
width: 25px;
height: 25px;
flex: 0 0 25px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #dce7f6;
border-radius: 6px;
}
._conversationWhatsapp_19eeh_3487 {
border-color: #c7edd8;
background: var(--cv-green-soft);
color: var(--cv-green);
}
._conversationEmail_19eeh_3503 {
border-color: #d8e8ff;
background: var(--cv-primary-soft);
color: var(--cv-primary);
}
._conversationCall_19eeh_3519 {
border-color: #d6ebf2;
background: var(--cv-cyan-soft);
color: var(--cv-cyan);
}
._conversationDefault_19eeh_3535 {
border-color: #d8e8ff;
background: var(--cv-primary-soft);
color: var(--cv-primary);
}
/* =========================================================
CONVERSATION CONTENT
========================================================= */
._conversationContent_19eeh_3559 {
max-width: 84%;
min-width: 0;
padding: 6px 8px;
border: 1px solid #e2e8f1;
border-radius: 8px;
background: #f8fafc;
color: var(--cv-text-2);
}
._conversationInbound_19eeh_3443 ._conversationContent_19eeh_3559 {
border-bottom-left-radius: 3px;
}
._conversationOutbound_19eeh_3435 ._conversationContent_19eeh_3559 {
border-color: #d7e6fc;
border-bottom-right-radius: 3px;
background: #edf5ff;
}
._conversationContent_19eeh_3559 span {
display: block;
color: var(--cv-text-2);
font-size: 9px;
line-height: 13px;
overflow-wrap: anywhere;
}
._conversationTime_19eeh_3633 {
display: none;
}
/* =========================================================
ACTIVITY
========================================================= */
._addActivityBox_19eeh_3649 {
margin: 8px;
padding: 8px;
border: 1px solid var(--cv-border-soft);
border-radius: 8px;
background: #fafcff;
}
._addActivityTitle_19eeh_3671 {
padding: 0;
display: inline-flex;
align-items: center;
gap: 4px;
border: 0;
background: transparent;
color: var(--cv-primary);
font-family: inherit;
font-size: 9px;
font-weight: 600;
cursor: pointer;
}
._activityQuickActions_19eeh_3713 {
margin-top: 7px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 5px;
}
._activityQuickActions_19eeh_3713 button {
min-height: 28px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
border: 1px solid var(--cv-border);
border-radius: 6px;
background: #ffffff;
color: var(--cv-text-2);
font-family: inherit;
font-size: 8px;
cursor: pointer;
}
/* =========================================================
TIMELINE
========================================================= */
._timelineSection_19eeh_3787 {
padding: 0 10px 10px;
}
._timelineDay_19eeh_3795 {
display: block;
margin: 7px 0;
color: var(--cv-muted);
font-size: 9px;
font-weight: 600;
}
._timelineList_19eeh_3817 {
display: flex;
flex-direction: column;
}
._timelineItem_19eeh_3827 {
position: relative;
min-width: 0;
min-height: 58px;
display: grid;
grid-template-columns:
8px
27px
42px
minmax(0, 1fr)
24px;
align-items: flex-start;
gap: 6px;
padding: 5px 0;
}
._timelineRail_19eeh_3871 {
position: relative;
height: 100%;
}
._timelineDot_19eeh_3883 {
position: absolute;
top: 12px;
left: 2px;
width: 6px;
height: 6px;
border: 2px solid #ffffff;
border-radius: 50%;
background: var(--cv-primary);
box-shadow: 0 0 0 1px #a9cafa;
}
._timelineLine_19eeh_3917 {
position: absolute;
top: 20px;
bottom: -7px;
left: 4px;
width: 1px;
background: #dfe6f0;
}
._timelineEventIcon_19eeh_3941 {
width: 27px;
height: 27px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #dce7f6;
border-radius: 7px;
}
._timelineWhatsapp_19eeh_3965 {
border-color: #c7edd8;
background: var(--cv-green-soft);
color: var(--cv-green);
}
._timelineEmail_19eeh_3981 {
border-color: #d8e8ff;
background: var(--cv-primary-soft);
color: var(--cv-primary);
}
._timelineCall_19eeh_3997 {
border-color: #d5ebf2;
background: var(--cv-cyan-soft);
color: var(--cv-cyan);
}
._timelineDefault_19eeh_4013 {
border-color: #d8e8ff;
background: var(--cv-primary-soft);
color: var(--cv-primary);
}
._timelineTime_19eeh_4029 {
padding-top: 6px;
color: var(--cv-muted);
font-size: 8px;
white-space: nowrap;
}
._timelineContent_19eeh_4049 {
min-width: 0;
padding-top: 3px;
}
._timelineContent_19eeh_4049 strong {
display: block;
color: var(--cv-text-2);
font-size: 9px;
font-weight: 600;
}
._timelineContent_19eeh_4049 p {
margin: 2px 0 0;
color: var(--cv-text-3);
font-size: 9px;
line-height: 13px;
}
/* =========================================================
COMMON SCROLLBAR
========================================================= */
._client360Body_19eeh_2113,
._conversationList_19eeh_3275,
._tagDropdownList_19eeh_2941 {
scrollbar-width: thin;
scrollbar-color: #c2cedd transparent;
}
._client360Body_19eeh_2113::-webkit-scrollbar,
._conversationList_19eeh_3275::-webkit-scrollbar,
._tagDropdownList_19eeh_2941::-webkit-scrollbar {
width: 4px;
}
._client360Body_19eeh_2113::-webkit-scrollbar-track,
._conversationList_19eeh_3275::-webkit-scrollbar-track,
._tagDropdownList_19eeh_2941::-webkit-scrollbar-track {
background: transparent;
}
._client360Body_19eeh_2113::-webkit-scrollbar-thumb,
._conversationList_19eeh_3275::-webkit-scrollbar-thumb,
._tagDropdownList_19eeh_2941::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #c2cedd;
}
/* =========================================================
FOCUS
========================================================= */
._page_19eeh_19 button:focus-visible,
._page_19eeh_19 a:focus-visible,
._page_19eeh_19 input:focus-visible,
._page_19eeh_19 select:focus-visible,
._page_19eeh_19 textarea:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(23, 105, 232, 0.12);
}
/* =========================================================
LARGE LAPTOP
========================================================= */
@media (max-width: 1200px) {
._contentGrid_19eeh_1749 {
grid-template-columns:
minmax(0, 1.7fr)
minmax(300px, 0.9fr);
}
._heroMeta_19eeh_1051 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 992px) {
._page_19eeh_19 {
height: auto;
min-height: 100dvh;
overflow-y: auto;
overflow-x: hidden;
}
._contentGrid_19eeh_1749 {
flex: 0 0 auto;
display: grid;
grid-template-columns: 1fr;
overflow: visible;
}
._leftColumn_19eeh_1809,
._rightColumn_19eeh_1811 {
height: auto;
overflow: visible;
}
._leftColumn_19eeh_1809 > ._card_19eeh_1851,
._rightColumn_19eeh_1811 > ._card_19eeh_1851 {
height: auto;
}
._client360Body_19eeh_2113 {
overflow: visible;
}
._conversationList_19eeh_3275 {
height: 320px;
min-height: 320px;
max-height: 320px;
}
._heroTop_19eeh_471 {
flex-direction: column;
align-items: flex-start;
}
._heroActions_19eeh_1257 {
width: 100%;
}
._heroMeta_19eeh_1051 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 768px) {
._page_19eeh_19 {
padding: 6px;
}
._topNavigation_19eeh_181 {
min-height: 34px;
flex-basis: 34px;
}
._heroTop_19eeh_471 {
padding: 8px;
}
._nameRow_19eeh_605 h1 {
font-size: 15px;
}
._mainAvatar_19eeh_531 {
width: 35px;
height: 35px;
flex-basis: 35px;
}
._heroMeta_19eeh_1051 {
padding: 6px;
}
._infoGrid_19eeh_2183 {
grid-template-columns: 1fr;
row-gap: 9px;
}
._cardHeader_19eeh_1927,
._simpleCardHeader_19eeh_1929 {
min-height: 46px;
flex-basis: 46px;
}
._client360Body_19eeh_2113 {
padding: 9px;
}
._conversationList_19eeh_3275 {
height: 290px;
min-height: 290px;
max-height: 290px;
}
._activityQuickActions_19eeh_3713 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 576px) {
._page_19eeh_19 {
padding: 5px;
}
._breadcrumb_19eeh_221 {
max-width: calc(100% - 75px);
}
._heroMeta_19eeh_1051 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
._heroActions_19eeh_1257 {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
._heroActions_19eeh_1257 .btn,
._callButton_19eeh_1277,
._followButton_19eeh_1279,
._bookMeetingButton_19eeh_1281,
._moreButton_19eeh_1283 {
width: 100%;
}
._conversationContent_19eeh_3559 {
max-width: 87%;
}
._conversationList_19eeh_3275 {
height: 260px;
min-height: 260px;
max-height: 260px;
}
._customFieldRow_19eeh_3113 {
grid-template-columns:
1fr
26px;
}
._customFieldLabel_19eeh_3169 {
grid-column: 1 / -1;
}
._timelineItem_19eeh_3827 {
grid-template-columns:
8px
27px
minmax(0, 1fr)
24px;
}
._timelineTime_19eeh_4029 {
display: none;
}
._activityQuickActions_19eeh_3713 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
._heroMeta_19eeh_1051 {
grid-template-columns: 1fr;
}
._heroActions_19eeh_1257 {
grid-template-columns: 1fr;
}
._conversationList_19eeh_3275 {
height: 240px;
min-height: 240px;
max-height: 240px;
}
._conversationContent_19eeh_3559 {
max-width: 89%;
}
._timelineItem_19eeh_3827 {
grid-template-columns:
8px
25px
minmax(0, 1fr);
}
._timelineActionWrapper_19eeh_4653 {
display: none;
}
}.rdrCalendarWrapper {
box-sizing: border-box;
background: #ffffff;
display: inline-flex;
flex-direction: column;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.rdrDateDisplay{
display: flex;
justify-content: space-between;
}
.rdrDateDisplayItem{
flex: 1 1;
width: 0;
text-align: center;
color: inherit;
}
.rdrDateDisplayItem + .rdrDateDisplayItem{
margin-left: 0.833em;
}
.rdrDateDisplayItem input{
text-align: inherit
}
.rdrDateDisplayItem input:disabled{
cursor: default;
}
.rdrDateDisplayItemActive{}
.rdrMonthAndYearWrapper {
box-sizing: inherit;
display: flex;
justify-content: space-between;
}
.rdrMonthAndYearPickers{
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
}
.rdrMonthPicker{}
.rdrYearPicker{}
.rdrNextPrevButton {
box-sizing: inherit;
cursor: pointer;
outline: none;
}
.rdrPprevButton {}
.rdrNextButton {}
.rdrMonths{
display: flex;
}
.rdrMonthsVertical{
flex-direction: column;
}
.rdrMonthsHorizontal > div > div > div{
display: flex;
flex-direction: row;
}
.rdrMonth{
width: 27.667em;
}
.rdrWeekDays{
display: flex;
}
.rdrWeekDay {
flex-basis: calc(100% / 7);
box-sizing: inherit;
text-align: center;
}
.rdrDays{
display: flex;
flex-wrap: wrap;
}
.rdrDateDisplayWrapper{}
.rdrMonthName{}
.rdrInfiniteMonths{
overflow: auto;
}
.rdrDateRangeWrapper{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.rdrDateInput {
position: relative;
}
.rdrDateInput input {
outline: none;
}
.rdrDateInput .rdrWarning {
position: absolute;
font-size: 1.6em;
line-height: 1.6em;
top: 0;
right: .25em;
color: #FF0000;
}
.rdrDay {
box-sizing: inherit;
width: calc(100% / 7);
position: relative;
font: inherit;
cursor: pointer;
}
.rdrDayNumber {
display: block;
position: relative;
}
.rdrDayNumber span{
color: #1d2429;
}
.rdrDayDisabled {
cursor: not-allowed;
}
@supports (-ms-ime-align: auto) {
.rdrDay {
flex-basis: 14.285% !important;
}
}
.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
pointer-events: none;
}
.rdrInRange{}
.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
pointer-events: none;
}
.rdrDayHovered{}
.rdrDayActive{}
.rdrDateRangePickerWrapper{
display: inline-flex;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.rdrDefinedRangesWrapper{}
.rdrStaticRanges{
display: flex;
flex-direction: column;
}
.rdrStaticRange{
font-size: inherit;
}
.rdrStaticRangeLabel{}
.rdrInputRanges{}
.rdrInputRange{
display: flex;
}
.rdrInputRangeInput{}
.rdrCalendarWrapper{
color: #000000;
font-size: 12px;
}
.rdrDateDisplayWrapper{
background-color: rgb(239, 242, 247);
}
.rdrDateDisplay{
margin: 0.833em;
}
.rdrDateDisplayItem{
border-radius: 4px;
background-color: rgb(255, 255, 255);
box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
border: 1px solid transparent;
}
.rdrDateDisplayItem input{
cursor: pointer;
height: 2.5em;
line-height: 2.5em;
border: 0px;
background: transparent;
width: 100%;
color: #849095;
}
.rdrDateDisplayItemActive{
border-color: currentColor;
}
.rdrDateDisplayItemActive input{
color: #7d888d
}
.rdrMonthAndYearWrapper {
align-items: center;
height: 60px;
padding-top: 10px;
}
.rdrMonthAndYearPickers{
font-weight: 600;
}
.rdrMonthAndYearPickers select{
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 10px 30px 10px 10px;
border-radius: 4px;
outline: 0;
color: #3e484f;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-position: right 8px center;
cursor: pointer;
text-align: center
}
.rdrMonthAndYearPickers select:hover{
background-color: rgba(0,0,0,0.07);
}
.rdrMonthPicker, .rdrYearPicker{
margin: 0 5px
}
.rdrNextPrevButton {
display: block;
width: 24px;
height: 24px;
margin: 0 0.833em;
padding: 0;
border: 0;
border-radius: 5px;
background: #EFF2F7
}
.rdrNextPrevButton:hover{
background: #E1E7F0;
}
.rdrNextPrevButton i {
display: block;
width: 0;
height: 0;
padding: 0;
text-align: center;
border-style: solid;
margin: auto;
transform: translate(-3px, 0px);
}
.rdrPprevButton i {
border-width: 4px 6px 4px 4px;
border-color: transparent rgb(52, 73, 94) transparent transparent;
transform: translate(-3px, 0px);
}
.rdrNextButton i {
margin: 0 0 0 7px;
border-width: 4px 4px 4px 6px;
border-color: transparent transparent transparent rgb(52, 73, 94);
transform: translate(3px, 0px);
}
.rdrWeekDays {
padding: 0 0.833em;
}
.rdrMonth{
padding: 0 0.833em 1.666em 0.833em;
}
.rdrMonth .rdrWeekDays {
padding: 0;
}
.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
display: none;
}
.rdrWeekDay {
font-weight: 400;
line-height: 2.667em;
color: rgb(132, 144, 149);
}
.rdrDay {
background: transparent;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: 0;
padding: 0;
line-height: 3.000em;
height: 3.000em;
text-align: center;
color: #1d2429
}
.rdrDay:focus {
outline: 0;
}
.rdrDayNumber {
outline: 0;
font-weight: 300;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
top: 5px;
bottom: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.rdrDayToday .rdrDayNumber span{
font-weight: 500
}
.rdrDayToday .rdrDayNumber span:after{
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translate(-50%, 0);
width: 18px;
height: 2px;
border-radius: 2px;
background: #3d91ff;
}
.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{
background: #fff;
}
.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{
color: rgba(255, 255, 255, 0.85);
}
.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
background: currentColor;
position: absolute;
top: 5px;
left: 0;
right: 0;
bottom: 5px;
}
.rdrSelected{
left: 2px;
right: 2px;
}
.rdrInRange{}
.rdrStartEdge{
border-top-left-radius: 1.042em;
border-bottom-left-radius: 1.042em;
left: 2px;
}
.rdrEndEdge{
border-top-right-radius: 1.042em;
border-bottom-right-radius: 1.042em;
right: 2px;
}
.rdrSelected{
border-radius: 1.042em;
}
.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{
border-top-left-radius: 1.042em;
border-bottom-left-radius: 1.042em;
left: 2px;
}
.rdrDayEndOfMonth .rdrInRange, .rdrDayEndOfMonth .rdrStartEdge, .rdrDayEndOfWeek .rdrInRange, .rdrDayEndOfWeek .rdrStartEdge{
border-top-right-radius: 1.042em;
border-bottom-right-radius: 1.042em;
right: 2px;
}
.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{
border-top-left-radius: 1.333em;
border-bottom-left-radius: 1.333em;
border-left-width: 1px;
left: 0px;
}
.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{
border-top-right-radius: 1.333em;
border-bottom-right-radius: 1.333em;
border-right-width: 1px;
right: 0px;
}
.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
background: rgba(255, 255, 255, 0.09);
position: absolute;
top: 3px;
left: 0px;
right: 0px;
bottom: 3px;
pointer-events: none;
border: 0px solid currentColor;
z-index: 1;
}
.rdrDayStartPreview{
border-top-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-top-left-radius: 1.333em;
border-bottom-left-radius: 1.333em;
left: 0px;
}
.rdrDayInPreview{
border-top-width: 1px;
border-bottom-width: 1px;
}
.rdrDayEndPreview{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-right-radius: 1.333em;
border-bottom-right-radius: 1.333em;
right: 2px;
right: 0px;
}
.rdrDefinedRangesWrapper{
font-size: 12px;
width: 226px;
border-right: solid 1px #eff2f7;
background: #fff;
}
.rdrDefinedRangesWrapper .rdrStaticRangeSelected{
color: currentColor;
font-weight: 600;
}
.rdrStaticRange{
border: 0;
cursor: pointer;
display: block;
outline: 0;
border-bottom: 1px solid #eff2f7;
padding: 0;
background: #fff
}
.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{
background: #eff2f7;
}
.rdrStaticRangeLabel{
display: block;
outline: 0;
line-height: 18px;
padding: 10px 20px;
text-align: left;
}
.rdrInputRanges{
padding: 10px 0;
}
.rdrInputRange{
align-items: center;
padding: 5px 20px;
}
.rdrInputRangeInput{
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 4px;
text-align: center;
border: solid 1px rgb(222, 231, 235);
margin-right: 10px;
color: rgb(108, 118, 122)
}
.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{
border-color: rgb(180, 191, 196);
outline: 0;
color: #333;
}
.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
content: '';
border: 1px solid currentColor;
border-radius: 1.333em;
position: absolute;
top: -2px;
bottom: -2px;
left: 0px;
right: 0px;
background: transparent;
}
.rdrDayPassive{
pointer-events: none;
}
.rdrDayPassive .rdrDayNumber span{
color: #d5dce0;
}
.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{
display: none;
}
.rdrDayDisabled {
background-color: rgb(248, 248, 248);
}
.rdrDayDisabled .rdrDayNumber span{
color: #aeb9bf;
}
.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{
filter: grayscale(100%) opacity(60%);
}
.rdrMonthName{
text-align: left;
font-weight: 600;
color: #849095;
padding: 0.833em;
}
/* ════════════════════════════════════════════════════════════════
GRADIENT DESIGN SYSTEM — Sidebar / Layout
════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12.5px;
font-family: "Nunito", sans-serif;
}
:root {
/* ── Core Brand Gradients ── */
--grad-primary: linear-gradient(90deg, #7A2CF3 0%, #B94CE8 45%, #F58B69 100%);
--grad-primary-hover: linear-gradient(90deg, #6B1FE8 0%, #A63DDF 45%, #EE7A57 100%);
--grad-primary-disabled: linear-gradient(90deg, #B8A7E8 0%, #D2B7E6 45%, #E7C6B8 100%);
--grad-soft: linear-gradient(135deg, rgba(122, 44, 243, 0.10) 0%, rgba(185, 76, 232, 0.07) 50%, rgba(245, 139, 105, 0.08) 100%);
--grad-active-nav: linear-gradient(90deg, rgba(122, 44, 243, 0.16) 0%, rgba(185, 76, 232, 0.12) 45%, rgba(245, 139, 105, 0.10) 100%);
/* ── Solid Stops ── */
--clr-purple: #7A2CF3;
--clr-purple-dark: #6B1FE8;
--clr-violet: #B94CE8;
--clr-peach: #F58B69;
/* ── Tints ── */
--clr-purple-08: rgba(122, 44, 243, 0.08);
--clr-purple-12: rgba(122, 44, 243, 0.12);
--clr-purple-16: rgba(122, 44, 243, 0.16);
--clr-violet-12: rgba(185, 76, 232, 0.12);
--clr-peach-10: rgba(245, 139, 105, 0.10);
/* ── Status ── */
--color-success: #1fc16b;
--color-success-bg: #c2f7db;
--color-warning: #f59e0b;
--color-warning-bg: #fef9c3;
--color-error: #ef4444;
--color-error-bg: #ffe7e8;
/* ── Neutrals ── */
--color-home-bg: #f5f5f2;
--color-white: #ffffff;
--color-black: #000000;
--color-gray-50: #f9fafb;
--color-gray-100: #f8f8f7;
--color-gray-200: #e2e2e2;
--color-gray-300: #d1d1d1;
--color-gray-400: #b5b5b5;
--color-gray-500: #9a9a9a;
--color-gray-600: #7d7d7d;
--color-gray-700: #626262;
--color-gray-800: #4a4a4a;
--bg-body: #f9fafb;
--bg-card: #ffffff;
--border-color: #e2e2e2;
--text-primary: #00000099;
--text-secondary: #7d7d7d;
--text-muted: #9a9a9a;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}
/* ════════════════════
SIDEBAR
════════════════════ */
.sidebar {
position: fixed;
overflow-y: hidden;
height: 100%;
width: 260px;
background: var(--color-white);
transition: all 0.5s ease;
padding: 15px;
display: flex;
flex-direction: column;
}
.sidebar.active {
width: 78px;
}
.sidebar .logo-details {
height: 55px;
margin-top: 5px;
display: flex;
align-items: center;
justify-content: center;
}
/* Nav links */
.sidebar .nav-links li {
position: relative;
list-style: none;
}
.sidebar .nav-links li a {
height: 100%;
width: 100%;
padding: 10px;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
color: var(--color-black);
font-size: 20px;
font-weight: 600;
}
.sidebar .nav-links li a.active {
border-radius: 15px;
margin-bottom: 3px;
background: var(--grad-active-nav);
color: var(--color-black) !important;
border-left: 2px solid var(--clr-purple);
}
.sidebar .nav-links li a.active:hover {
background: var(--grad-primary);
color: #fff !important;
}
.activehover:hover {
color: var(--color-black) !important;
}
.sidebar .nav-links .activehover.active {
color: var(--color-black) !important;
}
.sidebar .nav-links li a.active i {
color: var(--color-gray-800) !important;
}
.sidebar .nav-links li a:hover {
background: var(--clr-purple-08);
color: var(--clr-purple) !important;
border-radius: 15px;
}
.sidebar .nav-links li i {
min-width: 47px;
font-weight: 600;
text-align: center;
font-size: 20px;
color: var(--color-gray-800);
}
.submenu {
padding: 4px 0 4px 12px !important;
margin: 0;
}
.submenu li {
list-style: none;
margin: 2px 0;
}
.submenu li a span {
color: #00000099;
}
.sidebar .nav-links li.active i {
color: var(--color-black) !important;
}
/* Home section */
.home-section {
position: relative;
background: var(--color-gray-100);
min-height: 100vh;
width: calc(100% - 260px);
left: 260px;
transition: all 0.5s ease;
overflow-x: hidden !important;
}
.home-section.expanded {
width: calc(100% - 78px);
left: 78px;
padding: 0;
}
.sidebar.active~.home-section {
width: calc(100% - 78px);
left: 60px;
padding: 0;
}
.home-section nav .sidebar-button {
display: flex;
color: var(--color-gray-800);
font-weight: 400 !important;
align-items: center;
font-size: 24px;
font-weight: 500;
}
nav .sidebar-button i {
font-size: 35px;
margin-right: 10px;
}
.sidebar ul {
padding-left: 0rem !important;
max-height: 450px;
padding-bottom: 50px;
}
.tooltip {
position: fixed !important;
}
/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: var(--color-gray-100);
border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb {
background: var(--color-gray-300);
border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
background: var(--color-gray-400);
}
/* Sidebar icon */
.sidebarIcon {
background-color: var(--color-gray-100);
padding: 8px 12px;
border-radius: 10px;
border: 1px solid var(--color-gray-300);
}
.sidebarIcon:hover {
background-color: var(--clr-purple-08);
}
/* Nav link text */
.sidebar .nav-links li a .links_name {
font-weight: 600;
white-space: nowrap;
padding: 1px 10px;
font-size: 14px;
}
.links_name.hide {
display: none !important;
}
.sidebar .nav-links li a svg {
font-size: 14px;
color: var(--color-gray-800);
}
.sidebar .nav-links li a.active svg {
color: var(--clr-purple) !important;
}
.sidebar .nav-links li a:hover svg {
color: var(--clr-purple);
}
.sidebar.active .nav-links li a {
display: flex;
}
.sidebar.active .nav-links li a span {
margin: 0 auto !important;
display: flex;
justify-content: center;
}
.sidebar.active .nav-links li a .p-2 {
margin-left: 0 !important;
}
/* Search box */
.search-box {
width: 250px;
background-color: var(--color-white);
border-radius: 15px;
}
.header-bar .breadcrumbs a {
text-decoration: none;
color: var(--color-gray-300);
font-weight: 700;
font-size: 12px;
}
.header-bar .breadcrumbs .breadcrumbsLink {
color: var(--color-gray-300);
font-size: 12px;
}
/* Sidebar scroll / profile */
.sidebar-scroll {
flex: 1;
margin-bottom: 10px;
max-height: calc(100vh - 130px);
}
.sidebar-profile-fixed {
position: sticky;
bottom: 0;
background: var(--color-white);
padding: 3px 0;
border-top: 1px solid var(--color-gray-200);
}
/* Submenu links */
.submenu-link {
display: flex;
align-items: center;
padding: 8px 16px 8px 40px;
font-size: 13.5px;
text-decoration: none;
color: var(--text-secondary);
transition: all 0.3s ease;
}
.submenu-link:hover {
background: var(--clr-purple-08);
border-radius: 8px;
color: var(--clr-purple);
}
.submenu-link.active-submenu {
background: var(--grad-active-nav) !important;
color: var(--clr-purple) !important;
border-radius: 8px;
font-weight: 600;
border-left: 2px solid var(--clr-purple);
}
.submenu-link.active-submenu:hover {
background: var(--grad-active-nav) !important;
}
.sidebar-scroll .nav-links {
max-height: calc(100vh - 100px);
overflow-y: auto;
padding-right: 4px;
overflow-x: hidden;
}
.sidebar-scroll .nav-links::-webkit-scrollbar {
width: 1px;
display: none;
}
.sidebar-scroll .nav-links::-webkit-scrollbar-thumb {
background: var(--color-gray-200);
border-radius: 10px;
}
.sidebar-scroll .nav-links::-webkit-scrollbar-track {
background: var(--color-gray-100);
}
/* Dropdown */
.no-caret .dropdown-toggle::after {
display: none !important;
}
.admin-profile-dropdown {
width: 100%;
position: relative;
}
.admin-profile-dropdown .dropdown-toggle {
width: 100%;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.admin-profile-dropdown .dropdown-menu {
left: 0 !important;
right: 0 !important;
min-width: 100%;
border-radius: 12px;
padding: 0;
border: none;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
margin-bottom: 10px;
}
/* Projects scroll */
.projects-scroll {
max-height: 180px;
overflow-y: auto;
margin-bottom: 0.75rem;
padding-right: 4px;
}
.project-item-btn {
background: transparent;
border: none;
padding: 6px 0;
text-align: left;
}
.project-item-btn:hover {
background-color: var(--clr-purple-08);
border-radius: 8px;
padding-left: 4px;
}
.project-icon {
width: 28px;
height: 28px;
border-radius: 6px;
font-size: 14px;
}
.change-default-btn {
border-radius: 10px;
font-size: 14px;
}
.create-project-btn {
border-radius: 10px;
border: 1px dashed var(--color-gray-200);
background: var(--color-gray-100);
font-size: 14px;
text-align: center;
}
.create-project-btn:hover {
background: var(--clr-purple-08);
}
.dropdown-item-full:hover {
background-color: var(--clr-purple-08);
cursor: pointer;
}
.dropdown-item-full {
color: var(--color-gray-700);
}
/* Collapsed sidebar submenu */
.sidebar.active .submenu {
padding-left: 0;
}
.sidebar.active .submenu li {
display: flex;
justify-content: center;
}
.sidebar.active .submenu-link {
justify-content: center !important;
padding: 12px 0;
}
.sidebar.active .submenu-link .links_name {
display: none;
}
.sidebar.active .submenu-link span {
margin: 0;
gap: 0 !important;
}
.sidebar.active .submenu-link svg {
font-size: 16px;
}
/* Home content spacing */
.home-content {
margin-top: 45px;
}
.home-content.with-actions {
margin-top: 65px;
}
/* Admin header */
.adminHeader {
position: fixed;
top: 0;
left: 260px;
width: calc(100% - 260px);
background: var(--color-gray-100);
z-index: 99;
transition: all 0.5s ease;
}
.adminHeader.expanded {
left: 78px;
width: calc(100% - 78px);
}
/* ════════════════════
RESPONSIVE
════════════════════ */
@media (max-width: 767px) {
.sidebar {
position: fixed;
top: 0;
left: -260px;
height: 100vh;
width: 78px !important;
background: var(--color-white);
z-index: 1050;
transition: left 0.3s ease;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.sidebar.active {
left: 0;
width: 78px !important;
}
.sidebar.active .logo-details {
padding: 0;
justify-content: center;
}
.sidebar.active .logo-details img {
width: 50px !important;
height: 50px !important;
}
.sidebar.active .links_name {
display: none !important;
}
.sidebar.active .nav-links li a {
justify-content: center;
padding: 12px 0;
}
.sidebar.active .nav-links li i,
.sidebar.active .nav-links li a svg {
margin-right: 0;
}
.sidebar.active .submenu-link {
padding-left: 20px !important;
justify-content: center;
}
.sidebar.active .submenu-link span {
justify-content: center;
}
.sidebar.active .submenu-link .links_name {
display: none;
}
.adminHeader {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 99;
transition: left 0.3s ease;
}
.home-section {
position: relative;
width: 100% !important;
left: 0 !important;
margin-top: 0;
}
.home-section.expanded {
width: 100% !important;
left: 0 !important;
}
.sidebar-overlay {
display: block !important;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1045;
cursor: pointer;
}
.sidebar.active+.sidebar-overlay {
display: block;
}
.home-content {
margin-top: 75px;
}
.home-content.with-actions {
margin-top: 105px;
}
.admin-profile-dropdown .nav-link {
padding: 0.5rem !important;
}
.profile-avatar {
width: 35px !important;
height: 35px !important;
}
.admin-profile-dropdown .dropdown-menu {
position: fixed !important;
width: auto !important;
max-width: 250px;
min-width: 250px;
}
.nav-links p {
font-size: 8px !important;
}
}
@media (max-width: 480px) {
.sidebar.active {
width: 70px !important;
}
}
@media (max-width: 767px) {
.admin-profile-dropdown {
position: static !important;
}
.admin-profile-dropdown .dropdown-menu {
position: fixed !important;
bottom: 60px !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
margin: 0 !important;
margin-left: 15px !important;
border-radius: 12px 12px 0 0 !important;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
border: none !important;
}
.sidebar.active .admin-profile-dropdown .dropdown-menu {
width: 250px !important;
left: 0 !important;
right: auto !important;
bottom: 65px !important;
border-radius: 12px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}
}/* ════════════════════════════════════════════════════════════════
GRADIENT DESIGN SYSTEM — Global / Toast / Modal
════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 12.5px;
font-family: "Nunito", sans-serif;
}
:root {
/* ── Core Brand Gradients ── */
--grad-primary: linear-gradient(90deg, #7A2CF3 0%, #B94CE8 45%, #F58B69 100%);
--grad-primary-hover: linear-gradient(90deg, #6B1FE8 0%, #A63DDF 45%, #EE7A57 100%);
--grad-primary-disabled: linear-gradient(90deg, #B8A7E8 0%, #D2B7E6 45%, #E7C6B8 100%);
--grad-soft: linear-gradient(135deg, rgba(122, 44, 243, 0.10) 0%, rgba(185, 76, 232, 0.07) 50%, rgba(245, 139, 105, 0.08) 100%);
--grad-danger: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
--grad-danger-hover: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
/* ── Solid Stops ── */
--clr-purple: #7A2CF3;
--clr-purple-dark: #6B1FE8;
--clr-violet: #B94CE8;
--clr-peach: #F58B69;
--clr-peach-dark: #EE7A57;
/* ── Tints ── */
--clr-purple-08: rgba(122, 44, 243, 0.08);
--clr-purple-12: rgba(122, 44, 243, 0.12);
/* ── Status ── */
--color-success: #1fc16b;
--color-success-bg: #c2f7db;
--color-warning: #f59e0b;
--color-warning-bg: #fef9c3;
--color-error: #ef4444;
--color-error-bg: #ffe7e8;
--color-info: #0054a6;
--color-info-bg: #d9eaff;
--discard-bg-color: rgba(245, 139, 105, 0.15);
/* ── WhatsApp ── */
--color-whatsapp: #25d366;
--color-whatsapp-darker: #17d35c;
--color-whatsapp-lighter: #dcf8c6;
/* ── Neutrals ── */
--color-home-bg: #f5f5f2;
--color-white: #ffffff;
--color-black: #000000;
--color-gray-50: #f9fafb;
--color-gray-100: #f8f8f7;
--color-gray-200: #e2e2e2;
--color-gray-300: #d1d1d1;
--color-gray-400: #b5b5b5;
--color-gray-500: #9a9a9a;
--color-gray-600: #7d7d7d;
--color-gray-700: #626262;
--color-gray-800: #4a4a4a;
--bg-body: #f9fafb;
--bg-card: #ffffff;
--border-color: #e2e2e2;
--text-primary: #333;
--text-secondary: #7d7d7d;
--text-muted: #9a9a9a;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* ── Primary (mapped to gradient stops for legacy use) ── */
--color-primary: #B94CE8;
--color-primary-lighter: rgba(185, 76, 232, 0.22);
--color-primary-lighter-50: rgba(122, 44, 243, 0.08);
--color-primary-darker: #7A2CF3;
--color-primary-hover: #A63DDF;
--color-primary-active: #6B1FE8;
--color-primary-disabled: #D2B7E6;
--color-primary-text-disabled: #8c8c8c;
/* ── Secondary ── */
--color-secondary: #c8161d;
--color-secondary-light: #e03a3f;
--color-secondary-dark: #9f1217;
--color-secondary-hover: #b8141b;
--color-secondary-active: #8f1115;
--color-secondary-disabled: #e8b4b6;
--color-secondary-text-disabled: #7a7a7a;
}
/* ════════════════════
TOAST WRAPPER
════════════════════ */
.custom-toast-wrapper {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
/* Base toast shell */
.error-toast,
.success-toast,
.warning-toast {
background: var(--color-gray-100);
padding: 10px !important;
margin: 0;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
box-shadow: 0px 3px 10px rgba(138, 137, 137, 0.2);
gap: 8px;
border: 1px solid rgba(138, 137, 137, 0.2);
}
/* ── Error Toast ── */
.error-left {
display: flex;
align-items: center;
gap: 16px !important;
margin: 0;
padding: 0;
}
.outer-wrong {
padding: 5px;
background-color: var(--color-error-bg) !important;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.error-icon {
font-size: 12px;
color: var(--color-white) !important;
padding: 1px 5px;
background-color: var(--color-error);
border-radius: 5px;
}
.error-message {
font-weight: 600;
color: black !important;
}
.error-right .error-image {
width: 20px;
height: 20px;
margin: 0;
padding: 0;
}
/* ── Success Toast ── */
.success-left {
display: flex;
align-items: center;
gap: 16px !important;
margin: 0;
padding: 0;
}
.outer-success {
padding: 5px !important;
background: var(--grad-primary) !important;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.success-icon {
font-size: 12px;
color: var(--color-success) !important;
padding: 1px 5px;
background-color: var(--color-success-bg) !important;
border-radius: 5px;
}
.success-message {
font-weight: 600;
color: var(--color-black) !important;
}
.success-right .success-image {
width: 20px;
height: 20px;
margin: 0;
padding: 0;
}
/* ── Warning Toast ── */
.warning-left {
display: flex;
align-items: center;
gap: 16px;
}
.outer-warning {
padding: 5px;
background: linear-gradient(135deg, rgba(245, 139, 105, 0.25), rgba(185, 76, 232, 0.15)) !important;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.warning-icon {
font-size: 12px;
color: var(--color-black) !important;
padding: 1px 5px;
background: var(--grad-primary);
border-radius: 5px;
}
.warning-message {
font-weight: 600;
color: var(--color-black) !important;
}
.warning-right .warning-image {
width: 20px;
height: 20px;
margin: 0;
}
/* ════════════════════
CONFIRM / ACTION MODAL
════════════════════ */
.custom-modal-content {
background: var(--color-white);
padding: 30px;
border-radius: 12px;
}
.modal-close-btn {
border: none;
background: transparent;
position: absolute;
right: 18px;
top: 18px;
cursor: pointer;
}
.emoji-box {
background: var(--color-white);
padding: 5px;
border-radius: 12px;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.modal-header-section {
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 20px;
}
.modal-title-main {
margin: 0;
font-weight: 800;
}
.modal-image {
font-size: 14px;
}
.modal-description {
margin-top: 4px;
color: var(--color-gray-500);
font-size: 14px;
padding-right: 60px;
}
.modal-actions {
display: flex;
gap: 14px;
margin-top: 20px;
}
/* Reject / Accept */
.btn-reject {
flex: 1;
background: var(--color-white);
border: 1px solid;
border-radius: 8px;
padding: 10px 0;
cursor: pointer;
}
.btn-reject:hover {
flex: 1;
background: var(--color-black);
color: var(--color-white);
border-radius: 8px;
padding: 10px 0;
cursor: pointer;
}
.btn-accept {
flex: 1;
background: var(--grad-primary);
color: var(--color-white);
border: none;
border-radius: 8px;
padding: 10px 0;
cursor: pointer;
transition: opacity 0.15s;
}
.btn-accept:hover {
opacity: 0.88;
}
/* ════════════════════
ADD MODAL
════════════════════ */
.custom-modal-md .modal-content {
border-radius: 20px !important;
padding: 10px 15px;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.modalHeader {
position: relative;
padding: 10px;
text-align: center;
}
.modalHeading {
display: flex;
justify-content: start;
align-items: center;
margin: 0;
font-weight: 700;
font-size: 20px;
}
.modalHeading1 {
align-items: center;
margin: 0;
font-weight: 700;
font-size: 20px;
}
.modalClose-btn {
position: absolute;
top: 12px;
right: 16px;
background: transparent;
border: none;
cursor: pointer;
}
.modalClose-btn img {
width: 20px;
height: 20px;
}
.modalClose-btn1 {
position: absolute;
top: 30px;
right: 16px;
background: transparent;
border: none;
cursor: pointer;
}
.modalClose-btn1 img {
width: 20px;
height: 20px;
}
.modalCloseButton {
border: none;
background-color: transparent;
padding: 5px 15px;
border-radius: 5px;
font-size: 12px;
}
.modalCloseButton:hover,
.modalCloseButton:active {
border: 1px solid var(--color-gray-100);
background-color: var(--color-gray-100);
padding: 5px 15px;
border-radius: 5px;
font-size: 12px;
}
/* ════════════════════
DELETE MODAL
════════════════════ */
.delete-text {
font-size: 1.5rem;
color: var(--color-error);
}
.modalDeleteClose {
flex: 1;
background: var(--color-white);
border: 1px solid var(--color-black);
border-radius: 8px;
padding: 10px 0;
cursor: pointer;
}
.modalDeleteClose:hover,
.modalDeleteClose:active {
background: var(--color-black);
border: 1px solid var(--color-black);
color: var(--color-white);
border-radius: 8px;
padding: 10px 0;
}
.modalDeleteSave {
flex: 1;
background: var(--grad-primary);
border: none;
border-radius: 8px;
padding: 10px 0;
cursor: pointer;
color: var(--color-white);
transition: opacity 0.15s;
}
.modalDeleteSave:hover,
.modalDeleteSave:active {
opacity: 0.88;
}
.deleteBgColor {
padding: 7px 10px;
background-color: var(--color-error-bg) !important;
border-radius: 4px;
}
.deleteBgColor svg {
color: var(--color-error) !important;
}
.saveButton {
color: var(--clr-peach) !important;
}
.change-status {
background: var(--grad-soft);
padding: 5px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
/* ════════════════════
LOGOUT MODAL
════════════════════ */
.logoutSave {
flex: 1;
background: var(--grad-primary);
border: none;
border-radius: 8px;
padding: 10px 0;
color: var(--color-white);
cursor: pointer;
transition: opacity 0.15s, transform 0.15s;
}
.logoutSave:hover,
.logoutSave:active {
opacity: 0.88;
transform: translateY(-1px);
}
.logoutClose {
flex: 1;
background: var(--color-white);
border: 1px solid var(--color-black);
border-radius: 8px;
padding: 10px 0;
color: var(--color-black);
cursor: pointer;
}
.logoutClose:hover,
.logoutClose:active {
background: var(--color-home-bg);
border: 1px solid var(--color-black);
color: var(--color-black);
border-radius: 8px;
padding: 10px 0;
transform: translateY(-1px);
}