@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: #777;
--xy-background-pattern-lines-color-default: #777;
--xy-background-pattern-cross-color-default: #777;
--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;
}
.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;
}
*,
*::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_bq05v_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_bq05v_49 { font-family: var(--mono); font-variant-numeric: tabular-nums; }
._srOnly_bq05v_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_bq05v_71 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
._eyebrow_bq05v_75 {
margin: 0 0 4px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
._title_bq05v_93 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
._status_bq05v_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_bq05v_119, ._status_recording_bq05v_119 { color: var(--signal); border-color: var(--signal-deep); }
._status_processing_bq05v_121 { color: var(--amber); border-color: #7a5a1c; }
._status_completed_bq05v_123 { color: var(--paper); border-color: var(--line); }
._status_error_bq05v_125 { color: var(--danger); border-color: #7a2b2b; }
/* ---- fields ---- */
._field_bq05v_131 { margin-top: 20px; }
._fieldLabel_bq05v_135 {
display: block;
margin-bottom: 7px;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--muted);
}
._input_bq05v_151, ._textarea_bq05v_151, ._confirmInput_bq05v_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_bq05v_151:focus-visible, ._textarea_bq05v_151:focus-visible, ._confirmInput_bq05v_151:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 1px;
}
._textarea_bq05v_151 { min-height: 96px; resize: vertical; font-family: var(--sans); font-size: 14px; }
._modeRow_bq05v_185 { display: flex; flex-wrap: wrap; gap: 7px; }
._modeChip_bq05v_189 {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--line);
background: transparent;
color: var(--muted);
font-size: 12px;
cursor: pointer;
}
._modeChip_bq05v_189:hover { color: var(--paper); }
._modeChipOn_bq05v_209 { background: var(--signal); border-color: var(--signal); color: var(--ink); font-weight: 600; }
/* ---- stage ---- */
._stage_bq05v_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_bq05v_233 { margin: 0 0 16px; font-size: 14px; color: var(--paper); min-height: 20px; }
._meter_bq05v_237 { margin-bottom: 18px; }
._meterTrack_bq05v_241 {
position: relative;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
overflow: hidden;
}
._meterFill_bq05v_257 {
height: 100%;
background: var(--muted);
border-radius: 999px;
transition: width 60ms linear;
}
._meterFillVoiced_bq05v_269 { background: var(--signal); }
._meterTick_bq05v_273 {
position: absolute;
top: -3px;
width: 2px;
height: 14px;
background: var(--amber);
}
._meterScale_bq05v_289 {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
._record_bq05v_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_bq05v_309:hover { background: rgba(56, 224, 200, 0.1); }
._record_bq05v_309:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
._recordOn_bq05v_339 { background: var(--signal); color: var(--ink); border-color: var(--signal); }
._recordLive_bq05v_341 { animation: _pulse_bq05v_1 1.4s ease-in-out infinite; }
@keyframes _pulse_bq05v_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_bq05v_355 { margin: 16px 0 0; font-size: 11px; color: var(--muted); }
/* ---- error ---- */
._errorBar_bq05v_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_bq05v_361 strong { font-family: var(--mono); font-size: 11px; color: var(--danger); }
/* ---- confirmations ---- */
._confirmZone_bq05v_389 { margin-top: 20px; }
._confirmLead_bq05v_393 { margin: 0 0 10px; font-size: 13px; color: var(--amber); }
._confirmCard_bq05v_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_bq05v_415 { display: flex; justify-content: space-between; font-size: 11px; }
._confirmType_bq05v_417 { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--amber); }
._confirmScore_bq05v_419 { color: var(--muted); font-family: var(--mono); }
._confirmHeard_bq05v_421 { margin: 8px 0; font-size: 13px; color: var(--muted); }
._confirmActions_bq05v_423 { display: flex; gap: 8px; margin-top: 10px; }
/* ---- transcript ---- */
._transcript_bq05v_429 { margin-top: 20px; }
._transcriptHead_bq05v_433 {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 12px;
color: var(--muted);
}
._pending_bq05v_449 { font-family: var(--mono); color: var(--amber); }
._readout_bq05v_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_bq05v_475 { color: var(--muted); }
._entity_bq05v_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_bq05v_479[data-type="phone"], ._entity_bq05v_479[data-type="email"], ._entity_bq05v_479[data-type="amount"] {
background: rgba(245, 181, 68, 0.16);
color: var(--amber);
border-bottom-color: var(--amber);
}
._textarea_bq05v_151 { border-radius: 0 0 10px 10px; }
._debug_bq05v_509 { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
._pre_bq05v_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_bq05v_541 { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
._primaryButton_bq05v_545 {
padding: 10px 18px;
border: none;
border-radius: 9px;
background: var(--signal);
color: var(--ink);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
._primaryButton_bq05v_545:disabled { opacity: 0.4; cursor: not-allowed; }
._primaryButton_bq05v_545:focus-visible, ._ghostButton_bq05v_567:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
._ghostButton_bq05v_567 {
padding: 10px 16px;
border: 1px solid var(--line);
border-radius: 9px;
background: transparent;
color: var(--muted);
font-size: 13px;
cursor: pointer;
}
._ghostButton_bq05v_567:hover { color: var(--paper); border-color: var(--muted); }
/* ---- consent ---- */
._consent_bq05v_595 { padding: 8px 0; }
._consentTitle_bq05v_597 { margin: 0 0 10px; font-size: 20px; }
._consentBody_bq05v_599 { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
._consentActions_bq05v_601 { display: flex; gap: 10px; }
@media (max-width: 520px) {
._panel_bq05v_1 { padding: 20px; border-radius: 14px; }
._head_bq05v_71 { flex-direction: column; }
._foot_bq05v_541 { flex-direction: column-reverse; }
._foot_bq05v_541 button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
._recordLive_bq05v_341 { animation: none; }
._meterFill_bq05v_257 { transition: none; }
}
._holding_bq05v_629 { color: var(--amber); }
.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);
}