/* Primary color : #101FA1 */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Source Sans 3", sans-serif;
/* background: linear-gradient(135deg, #dbeafe, #e0f2fe); */
background-color: #f9f9f9;
color: #1e3a8a;
padding-top: 70px;
overflow-y: scroll;
}
body::-webkit-scrollbar {
display: none;
}
/* Enable vertical scrolling for left sidebar */
.sidebar {
overflow-y: auto; /* Allows vertical scroll */
scrollbar-width: thin; /* Firefox */
scrollbar-color: #94a3b8 transparent; /* Firefox */
}
/* Scrollbar styling for WebKit browsers (Chrome, Edge, Safari) */
.sidebar::-webkit-scrollbar {
width: 8px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
background-color: #94a3b8;
border-radius: 8px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
background-color: #64748b;
}
.container {
margin-left: 220px;
margin-right: 300px !important; /* updated from 220px to 350px */
width: auto; /* changed from fixed 76% to auto */
height: 100vh;
transition: margin-left 0.3s ease;
overflow-y: auto;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: #101FA1 transparent;
}
.container::-webkit-scrollbar {
width: 8px;
}
.container::-webkit-scrollbar-track {
background: transparent;
}
.container::-webkit-scrollbar-thumb {
background-color: #94a3b8;
border-radius: 8px;
border: 4px solid transparent;
background-clip: padding-box;
}
.container::-webkit-scrollbar-thumb:hover {
background-color: #64748b;
}
@media screen and (max-width: 1024px) {
.container {
margin-right: 0 !important;
}
}
@media (max-width: 768px) {
.combocontainer {
display: none !important;
}
}
/* ========================= toast Starts ======================== */
#toast-container {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.toast {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 320px;
max-width: 90vw;
padding: 14px 20px;
background-color: white;
color: #333;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
font-size: 14px;
font-weight: 500;
position: relative;
animation: fadeSlide 0.4s ease-out;
border-left: 6px solid transparent;
border-bottom: 4px solid transparent;
}
.toast i {
margin-right: 10px;
font-size: 18px;
}
.toast .toast-message {
flex-grow: 1;
display: flex;
align-items: center;
}
.toast .toast-close {
background: transparent;
border: none;
font-size: 16px;
color: #888;
cursor: pointer;
margin-left: 15px;
}
.toast.success {
border: 1px solid #22c55e;
border-bottom: 5px solid #22c55e;
}
.toast.error {
border: 1px solid #ef4444;
border-bottom:5px solid #ef4444;
}
.toast.warning {
border: 1px solid #facc15;
border-bottom: 5px solid #facc15;
}
.toast.info {
border: 1px solid #101FA1;
border-bottom: 5px solid #101FA1;
}
@keyframes fadeSlide {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================= toast Ends ============================= */
/* ============================ SideBar Starts ============================*/
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 15vw;
min-width: 60px;
max-width: 220px;
height: 100vh;
background-color: #101fa1;
padding: 20px 10px 10px 5px;
transition: width 0.3s ease;
z-index: 1000;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sidebar-main {
flex-grow: 1;
}
.sidebar-main ul,
.sidebar-bottom ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-bottom {
margin-top: auto;
padding-top: 10px;
border-top: 2px solid #ffffff22;
}
.sidebar.collapsed {
width: 60px;
padding: 10px 10px 10px 5px;
}
.sidebar.collapsed ~ .container {
margin-left: 60px;
}
.sidebar .toggle-btn {
border: none;
padding: 7px 9px;
margin: 0 10px 0 5px;
border-radius: 6px;
cursor: pointer;
background: none;
}
.sidebar .toggle-btn i {
color: #fff;
font-size: 16px;
}
.sidebar .toggle-btn i:hover {
color: #fff;
}
.sidebar .top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.sidebar .logo {
color: #fff;
font-weight: bold;
font-size: 18px;
white-space: nowrap;
}
.sidebar.collapsed .logo {
opacity: 0;
width: 0;
overflow: hidden;
}
.sidebar ul {
list-style: none;
padding: 10px 0 0;
margin: 0;
}
.sidebar ul li {
position: relative;
margin-bottom: 8px;
transition: background 0.2s ease;
}
.sidebar ul li a {
display: flex;
align-items: center;
padding: 10px 12px;
border-radius: 8px;
color: #fff;
text-decoration: none;
font-size: 16px;
}
.sidebar ul li a:hover {
background-color: #f0f4ff;
color: #101FA1;
}
.sidebar ul li.active a {
background-color: #ffffff;
color: #101FA1;
}
.sidebar ul li i {
width: 20px;
font-size: 14px;
text-align: center !important;
}
.sidebar ul li a span {
margin-left: 12px;
white-space: nowrap;
transition: opacity 0.3s ease;
font-size: 14px;
color: inherit;
}
.sidebar.collapsed ul li a span {
opacity: 0;
width: 0;
overflow: hidden;
}
.sidebar.collapsed ul li::after {
content: attr(data-tooltip);
position: absolute;
left: 70px;
top: 50%;
transform: translateY(-50%);
background: #333;
color: #fff;
font-size: 12px;
padding: 6px 10px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 999;
}
.sidebar.collapsed ul li:hover::after {
opacity: 1;
}
/* Make sidebar collapsible and responsive */
@media screen and (max-width: 768px) {
.sidebar {
width: 60px;
min-width: 60px;
}
.sidebar.collapsed ~ .container {
margin-left: 60px;
}
.sidebar:not(.collapsed) {
width: 220px;
}
.sidebar:not(.collapsed) .logo {
opacity: 1;
width: auto;
}
.sidebar.collapsed .logo {
opacity: 0;
width: 0;
}
.sidebar ul li a span {
display: none;
}
.sidebar:not(.collapsed) ul li a span {
display: inline-block;
}
.sidebar .toggle-btn {
margin: 0 0 0px 0;
}
}
/* ============================ SideBar Ends ============================*/
/* ============================ SideBar User Starts ============================*/
.sidebar.collapsed .team-circle-wrapper {
display: none;
}
.sidebar .team-circle-wrapper {
display: flex;
align-items: center;
padding: 5px 10px 10px 10px;
flex-wrap: wrap;
gap: 8px;
}
.sidebar .team-circle-wrapper i {
font-size: 12px;
color: white;
}
.sidebar .team-circle-group {
display: flex;
gap: 0;
position: relative;
flex-wrap: wrap;
}
.sidebar .team-circle {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: white;
color: #101FA1;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
margin-left: -10px;
border: 2px solid #fff;
z-index: 1;
font-size: 13px;
transition: transform 0.2s;
cursor: pointer;
}
.sidebar .team-circle:first-child {
margin-left: 0;
}
.sidebar .team-circle:hover {
transform: scale(1.2);
z-index: 2;
}
.sidebar .team-circle-more {
background-color: #101FA1;
color: #fff;
font-weight: 600;
font-size: 13px;
}
/* ============================ SideBar User Ends ============================*/
/* ============================ SideBar User popup Starts ============================*/
.user-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
z-index: 9999;
justify-content: center;
align-items: center;
}
.user-popup-content {
border: 1px solid gray;
background: #ffffff;
border-radius: 16px;
padding: 24px 28px;
width: 360px;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
position: relative;
}
.user-popup-content h3 {
margin: 0 0 20px;
text-align: center;
font-size: 20px;
color: #101FA1;
font-weight: 700;
}
.close-btn {
position: absolute;
top: 14px;
right: 18px;
font-size: 20px;
background: none;
border: none;
cursor: pointer;
color: #444;
}
.user-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.user-list-item {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 12px;
border-radius: 8px;
transition: background-color 0.2s ease;
}
.user-list-item:hover {
background-color: #f1f4ff;
}
.user-circle {
width: 40px;
height: 40px;
background-color: #101FA1;
color: white;
font-weight: 600;
font-size: 15px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.user-list-item span {
font-size: 15px;
color: #101FA1;
font-weight: 600;
display: block;
line-height: 1.2;
}
.user-list-item small {
display: block;
font-size: 12px;
color: #777;
margin-top: 2px;
font-style: italic;
}
/* ============================ SideBar User popup Ends ============================*/
/* ============================ Sidebar Profile Starts ============================ */
.profile-dropdown {
display: none;
position: fixed;
top: 100px;
left: 150px;
width: 400px;
min-width: 280px;
max-width: 90vw;
min-height: 200px;
background-color: #fff;
padding: 25px;
border-radius: 6px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
color: #333;
box-sizing: border-box;
}
.profile-form {
width: 100%;
box-sizing: border-box;
}
.profile-card {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
box-sizing: border-box;
}
.profile-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.profile-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
margin-right: 15px;
}
.profile-header div {
flex-grow: 1;
}
.profile-header h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #101fa1;
}
.profile-header p {
margin: 2px 0 0;
font-size: 13px;
color: #555;
}
.close-btn {
background: none;
border: none;
font-size: 16px;
cursor: pointer;
color: #888;
}
.profile-details {
margin-top: 20px;
width: 100%;
}
.profile-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #eee;
font-size: 14px;
color: #333;
gap: 10px;
}
.profile-row span {
word-break: break-word;
overflow-wrap: break-word;
}
.profile-row span:first-child {
flex: 1;
font-weight: 500;
}
.profile-row span:last-child {
flex: 1;
text-align: right;
color: #555;
}
/* ===== Mobile view for Profile Dropdown ===== */
@media (max-width: 768px) {
.profile-dropdown {
top: 60px; /* closer to navbar */
left: 50% !important; /* center horizontally */
transform: translateX(-50%);
width: 90% !important; /* full width with some margin */
max-width: 95%; /* limit so it doesn't touch edges */
padding: 15px; /* tighter padding */
border-radius: 10px;
}
.profile-card {
gap: 8px;
}
.profile-header {
flex-direction: column; /* stack avatar + info */
align-items: center;
text-align: center;
}
.profile-avatar {
width: 60px;
height: 60px;
margin: 0 0 10px 0;
}
.profile-header h4 {
font-size: 14px;
}
.profile-header p {
font-size: 12px;
}
.profile-details {
margin-top: 12px;
}
.profile-row {
flex-direction: column;
align-items: flex-start;
font-size: 13px;
}
.profile-row span:last-child {
text-align: left;
margin-top: 4px;
}
}
/* ============================ Sidebar Profile Ends ============================ */
/* ============================ Sidebar Calender Starts ============================*/
.calendar-modal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
z-index: 9999;
}
.calendar-overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.calendar-popup-content {
position: relative;
margin: 4% auto;
padding: 20px;
width: 90%;
max-width: 1200px;
background: white;
border-radius: 8px;
overflow-y: auto;
max-height: 85vh;
z-index: 10000;
}
.calendar-close-btn {
position: absolute;
top: 10px;
right: 20px;
font-size: 24px;
cursor: pointer;
color: #333;
}
.popup.hidden {
display: none;
}
.popup {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.3);
z-index: 10000;
}
.popup-content {
background: white;
padding: 20px;
max-width: 400px;
margin: 10% auto;
border-radius: 8px;
}
.close-btn {
float: right;
font-size: 24px;
cursor: pointer;
}
.calendar-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
}
.calendar-overlay {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
.calendar-popup-content {
background-color: #fff;
border-radius: 10px;
padding: 20px;
max-width: 900px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
z-index: 10000;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.calendar-close-btn {
position: absolute;
top: 12px;
right: 20px;
font-size: 24px;
color: #101FA1;
font-weight: bold;
cursor: pointer;
}
/* =========================================
Combined Calendar β Mobile-first styling
========================================= */
/* Wrap your calendar in a container:
*/
#full-calendar-container {
max-height: 70vh; /* prevent super tall calendar */
overflow: auto; /* scroll inside card */
border: 1px solid #e6e9f2;
border-radius: 12px;
background: #fff;
padding: 10px;
}
/* Account actions area (chips/card) under the toolbar buttons */
.calendar-accounts-display {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 12px;
}
.calendar-accounts-display .account-item {
background: #f1f4ff;
color: #101FA1;
font-size: 13px;
padding: 6px 10px;
border-radius: 20px;
white-space: nowrap;
border: 1px solid #d8e0ff;
}
/* Optional: turn account list into a soft card (email + trash icon look) */
.calendar-accounts-card {
border: 1px solid #dfe3f5;
background: #ffffff;
border-radius: 12px;
padding: 10px 12px;
}
/* Sync buttons row */
.calendar-sync-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.calendar-sync-row .btn-sync {
border: 1px solid #101FA1;
background: #101FA1;
color: #fff;
border-radius: 10px;
padding: 8px 12px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.calendar-sync-row .btn-sync:disabled {
opacity: 0.6;
cursor: default;
}
/* ---- FullCalendar theming (brand: #101FA1) ---- */
.fc { --brand: #101FA1; }
.fc .fc-toolbar {
align-items: center;
gap: 8px;
}
.fc .fc-toolbar-title {
font-weight: 800;
color: var(--brand);
letter-spacing: .3px;
/* Responsive size */
font-size: clamp(16px, 4.8vw, 28px);
}
/* Prev/Next/Today buttons */
.fc .fc-button {
border-radius: 10px;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
box-shadow: none;
}
.fc .fc-button-primary {
background: var(--brand);
border: 1px solid var(--brand);
}
.fc .fc-button-primary:hover {
filter: brightness(0.9);
}
.fc .fc-today-button.fc-button-primary:disabled {
background: #e5e7eb;
border-color: #e5e7eb;
color: #111827;
}
/* Grid + day numbers */
.fc .fc-scrollgrid,
.fc .fc-daygrid,
.fc .fc-timegrid {
border-radius: 10px;
overflow: hidden;
border: 1px solid #e6e9f2;
}
.fc .fc-col-header-cell-cushion {
padding: 6px 0;
font-size: 12px;
color: #0f172a;
font-weight: 700;
}
.fc .fc-daygrid-day-number {
font-size: 12px;
font-weight: 700;
color: #334155;
padding: 4px 6px;
}
/* Events */
.fc .fc-event,
.fc .fc-daygrid-event {
border: none;
border-radius: 10px;
padding: 4px 6px;
font-size: 12px;
line-height: 1.1;
background: #2563eb; /* readable on white */
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
}
/* Selected/hovered day */
.fc .fc-daygrid-day.fc-day-today {
background: #fff9e6;
}
/* Timegrid (week/day) row height tighter on mobile */
.fc .fc-timegrid-slot {
height: 36px;
}
/* --- Popup container itself (mobile tweaks) --- */
@media (max-width: 768px) {
.calendar-popup-content {
width: 95% !important;
max-width: 95% !important;
margin: 16% auto !important;
padding: 12px !important;
border-radius: 12px !important;
max-height: 82vh !important;
overflow: auto !important;
}
/* Stack account chips vertically and make tappable width */
.calendar-accounts-display {
flex-direction: column;
gap: 8px;
}
.calendar-accounts-display .account-item {
font-size: 14px;
padding: 10px 12px;
text-align: center;
}
/* Compact toolbar buttons */
.fc .fc-button {
padding: 6px 8px;
font-size: 12px;
border-radius: 8px;
}
/* Slightly smaller header again for very narrow devices */
.fc .fc-toolbar-title {
font-size: clamp(16px, 5.5vw, 22px);
}
/* Make calendar body more thumb-friendly */
.fc .fc-daygrid-day-number { font-size: 12px; }
.fc .fc-col-header-cell-cushion { font-size: 11px; }
}
/* Ultra-narrow safety */
@media (max-width: 380px) {
.fc .fc-toolbar { gap: 6px; }
.fc .fc-button { padding: 5px 6px; font-size: 11px; }
}
/* ============================ Sidebar Calender Ends ============================*/
/* ============================= NavBar Starts =============================*/
.navbar {
position: fixed;
top: 0;
left: 220px;
right: 0;
height: 60px;
z-index: 1000;
background: linear-gradient(90deg, #101fa1 0%, #000851 100%);
padding: 20px 30px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
transition: left 0.3s ease;
}
.sidebar.collapsed ~ .container .navbar {
left: 60px; /* sidebar collapsed width */
}
.navbar-user {
position: absolute;
right: 30px;
display: flex;
align-items: center;
gap: 12px;
color: #fff;
}
.navbar-info {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
#navbar-greeting {
font-size: 16px;
font-weight: 600;
line-height: 1.2;
color: #ffffff;
}
#navbar-role-team {
font-size: 12px;
font-style: italic;
color: #e0e0e0;
margin-top: 2px;
}
.navbar-avatar {
width: 36px;
height: 36px;
background-color: #ffffff;
color: #101FA1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
.combocontainer {
position: absolute;
left: 30px;
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
color: #fff;
}
.date,.time,.timezone {
font-size: 14px;
font-weight: 500;
color: #fff;
}
.timezone {
font-size: 12px;
font-weight: 400;
}
/* ============================= NavBar Ends =============================*/
/* =================== Display Card Starts =================== */
.card-wrapper {
display: flex;
gap: 30px;
flex-wrap: wrap;
margin: 20px 40px 10px 40px !important;
}
.stat-card {
position: relative;
width: 250px;
height: 100px;
padding: 20px;
border-radius: 12px;
background: linear-gradient(135deg, #101FA1, #3340e1);
color: white;
overflow: hidden;
box-shadow: 0 8px 25px rgba(16, 31, 161, 0.25);
transition: transform 0.3s ease;
cursor: pointer;
}
.stat-card:hover {
transform: scale(1.03);
}
.content {
position: relative;
z-index: 2;
}
.value {
font-size: 18px;
opacity: 0.9;
margin-bottom: 6px;
font-weight: 600;
letter-spacing: 0.5px;
}
.icon-bg {
position: absolute;
bottom: -10px;
right: -10px;
font-size: 60px;
color: rgba(255, 255, 255, 0.12);
z-index: 1;
transition: all 0.3s ease-in-out;
}
.stat-card:hover .icon-bg {
bottom: 10px;
right: 10px;
font-size: 70px;
color: rgba(255, 255, 255, 0.25);
}
.stat-link {
text-decoration: none;
}
/* =========================== Display Card Ends ============================= */
/* =========================== Major Card Starts ============================= */
.major-card {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #eef4fd, #f6fbff);
padding: 24px;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
margin: 30px 40px 0 40px;
max-width: 600px;
transition: transform 0.3s ease;
border: 1px solid #ccc;
}
.major-card:hover {
transform: scale(1.02);
}
.major-card a{
text-decoration: none;
}
.major-text {
flex: 1;
}
.major-text h2 {
font-size: 20px;
color: #101FA1;
margin-bottom: 10px;
}
.major-text p {
color: #333;
font-size: 14px;
margin-bottom: 10px;
}
.major-btn {
background-color: #101FA1;
color: white;
border: none;
padding: 10px 28px;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
.major-btn:hover {
transform: scale(1.05);
}
.major-image img {
width: 120px;
height: auto;
}
/* =========================== Major Card Ends ============================= */
/* =========================== Message Notification Card Starts ============================= */
.notification-card {
display: flex;
align-items: center;
background-color: #fb923c; /* Orange */
color: white;
padding: 15px 20px;
border-radius: 12px;
margin: 20px 40px 0 40px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
position: relative;
gap: 15px;
max-width: 530px;
}
.notif-count {
background: rgba(255,255,255,0.15);
border-radius: 8px;
font-weight: bold;
padding: 10px 16px;
font-size: 22px;
min-width: 50px;
text-align: center;
}
.notif-details h4 {
font-size: 16px;
font-weight: 600;
margin: 0;
}
.notif-details p {
font-size: 12px;
margin: 2px 0 0;
opacity: 0.8;
}
.notif-toggle {
margin-left: auto;
font-size: 20px;
opacity: 0.6;
}
/* =========================== Message Notification Card Ends ============================= */
/* =========================== Kanbon Starts ============================= */
.overallkanban{
margin: 20px 40px 10px 40px !important;
border-radius: 15px;
background-color: #f9f9f9;
padding: 20px;
max-width: 100%;
margin: 20px auto;
border: 1px solid gray;
border-top: 8px solid #101fa1;
}
.overallkanban h3{
flex: 1;
font-size: 20px;
font-weight: 600;
color: #3A59D1;
text-align: center;
margin: 0;
}
.kanban-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.kanban-divider {
border: none;
height: 1px;
background-color: #e0e0e0;
margin: 10px 0 20px 0;
}
.kanban-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.kanban-container span{
font-size: 18px;
font-weight: 600;
color: #3A59D1;
padding-bottom: 15px;
margin-bottom: 15px;
text-align: center;
}
.kanban-column {
flex: 1;
min-width: 220px;
background-color: #F7F8F9;
border: 1px solid #cbd5e1;
border-radius: 10px;
padding: 10px;
}
.kanban-meta span{
color:#000;
font-size: 12px;
}
.kanban-meta i{
color: #101FA1;
}
.kanban-box {
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 8px;
}
.kanban-title {
font-weight: bold;
font-size: 12px;
color: #101FA1;
margin: 0;
}
.kanban-task {
background-color: #f4f6fa;
margin-bottom: 12px;
padding: 5px 10px;
border: 1px solid #d0d7de;
border-left: 6px solid #101FA1;
border-radius: 8px;
cursor: grab;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kanban-task:hover {
transform: scale(1.01);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.kanban-task.dragging {
opacity: 0.8;
background-color: #e8f0fe;
border: 1px solid #101FA1;
transform: rotate(1deg) scale(1.02);
box-shadow: 0 6px 12px rgba(16, 31, 161, 0.2);
cursor: grabbing;
}
.add-task-btn {
background-color: #101FA1;
color: white;
border: none;
padding: 3px 6px;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: -30px;
}
.add-task-btn:hover {
transform: scale(1.05);
}
.kanban-priority {
display: inline-block;
padding: 1px 8px;
font-size: 11px;
font-weight: bold;
border-radius: 12px;
margin-bottom: 5px;
color: white;
}
.kanban-priority.high { background-color: #bb0000; }
.kanban-priority.medium { background-color: #E67324; }
.kanban-priority.low { background-color: #10b981;}
.avatar-circle {
display: inline-block;
width: 28px;
height: 28px;
line-height: 28px;
border-radius: 50%;
background-color: #101FA1;
color: white !important;
text-align: center;
font-size: 13px;
font-weight: bold;
padding: 0px 5px 5px 5px !important;
margin: 0px 5px 5px 5px !important;
vertical-align: middle;
}
.kanban-tasks {
min-height: 100px;
border: 2px dashed transparent;
transition: border 0.2s ease;
max-height: none;
overflow-y: visible;
padding-bottom: 0;
}
.kanban-tasks.drag-over {
border-color: #101FA1;
background-color: #eef2ff;
}
.view-btn {
margin-left: 10px;
background-color: #e8f0fe;
border: 1px solid #c3d3f4;
padding: 3px 6px;
font-size: 12px;
cursor: pointer;
border-radius: 4px;
}
.kanban-tasks {
flex: 1;
overflow-y: auto;
}
.kanban-attach i{
color: #000 !important;
}
.edit-kanban-btn i{
padding-left: 5px;
color: #000 !important;
cursor: pointer;
}
#desc-warning,#task-warning{
padding: 0%;
color: red; font-size: 13px; display: none;
}
/* #project-filter {
font-size: 14px;
width: 150px;
padding: 8px 14px;
border: 1px solid #ccc;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
color: #1e3a8a;
font-weight: 500;
margin-left: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
cursor: pointer;
appearance: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 36px;
}
#project-filter:hover {
border-color: #1e3a8a;
}
#project-filter:focus {
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
} */
/* ===========================
NAVBAR PROJECT FILTER
=========================== */
.navbar-project-wrapper{
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
/* border: 1px solid rgba(255,255,255,0.18); */
border-radius: 14px;
/* background: rgba(255,255,255,0.06); */
backdrop-filter: blur(8px);
}
.navbar-project-label{
font-size: 13px;
font-weight: 700;
color: #ffffff;
white-space: nowrap;
letter-spacing: 0.2px;
}
#project-filter,
.navbar .navbar-project-filter{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
min-width: 170px;
height: 42px;
padding: 0 42px 0 14px;
border: 1px solid rgba(255,255,255,0.28);
border-radius: 12px;
background: rgba(255,255,255,0.12);
color: #ffffff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
outline: none;
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
transition: all 0.25s ease;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
}
#project-filter:hover,
.navbar .navbar-project-filter:hover{
background-color: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.45);
transform: translateY(-1px);
}
#project-filter:focus,
.navbar .navbar-project-filter:focus{
border-color: #93c5fd;
box-shadow: 0 0 0 3px rgba(147,197,253,0.28);
}
#project-filter option,
.navbar .navbar-project-filter option{
background: #ffffff;
color: #0f172a;
font-weight: 600;
}
#project-filter option:checked,
.navbar .navbar-project-filter option:checked{
background: #2563eb;
color: #ffffff;
}
@media (max-width: 768px){
.navbar-project-wrapper{
gap: 8px;
padding: 6px 10px;
}
.navbar-project-label{
font-size: 12px;
}
#project-filter,
.navbar .navbar-project-filter{
min-width: 135px;
height: 38px;
font-size: 13px;
padding: 0 38px 0 12px;
}
}
.kanban-project{
font-size: 12px;
font-weight: 800;
color: #101FA1;
}
.kanban-column.drag-over {
border: 1px dashed #101FA1;
background-color: #eef2ff;
}
@media (max-width: 768px) {
.overallkanban {
margin: 12px 10px !important;
padding: 12px;
border-radius: 12px;
}
}
/* =========================== Kanbon Ends ============================= */
/* =========================== Kanban Popup Starts ============================= */
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(16, 31, 161, 0.1);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(4px);
overflow: auto;
}
.hidden {
display: none;
}
.popup-content {
background: #ffffff;
padding: 35px 40px;
border-radius: 12px;
width: 100%;
max-width: 420px;
max-height: 90vh;
overflow-y: auto; /* π₯ Makes popup content scrollable */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
position: relative;
animation: fadeIn 0.3s ease-in-out;
border: 1px solid gray;
border-top: 8px solid #101fa1;
}
/* Optional Scrollbar Styling */
.popup-content::-webkit-scrollbar {
width: 6px;
}
.popup-content::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 4px;
}
.popup-content::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
.popup .close-btn {
position: absolute;
top: 14px;
right: 18px;
font-size: 20px;
color: #999;
cursor: pointer;
transition: color 0.2s ease;
}
.popup .close-btn:hover {
color: #101fa1;
}
.popup-content h2 {
font-size: 22px;
color: #101fa1;
margin-bottom: 25px;
font-weight: 600;
text-align: center;
}
.popup-content label {
display: block;
font-size: 13px;
color: #101FA1;
margin-bottom: 4px;
margin-top: 14px;
}
.popup-content input,
.popup-content textarea {
width: 100%;
padding: 11px 14px;
font-size: 14px;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
transition: all 0.2s ease;
}
.popup-content input:focus,
.popup-content textarea:focus {
border-color: #101FA1;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
outline: none;
}
.popup-content select {
width: 100%;
padding: 11px 14px;
font-size: 14px;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 20 20' fill='%23101FA1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M10 12a1 1 0 01-.707-.293l-4-4a1 1 0 111.414-1.414L10 9.586l3.293-3.293a1 1 0 111.414 1.414l-4 4A1 1 0 0110 12z' clip-rule='evenodd' /%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
transition: all 0.2s ease;
}
.popup-content select:focus {
border-color: #101FA1;
box-shadow: 0 0 0 3px rgba(16, 31, 161, 0.1);
outline: none;
background-color: #ffffff;
color: #101FA1;
}
.popup-content div {
margin-top: 25px;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.popup-content button {
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.popup-content button:first-of-type {
background-color: #101FA1;
color: white;
}
.popup-content button:first-of-type:hover {
transform: scale(1.05);
}
.popup-content button:last-of-type {
background-color: #bb0000;
color: #fff;
}
.popup-content button:last-of-type:hover {
transform: scale(1.05);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#existing-attachments {
display: inline;
}
#existing-attachments ul {
margin-top: 10px !important;
}
#existing-attachments ul li {
list-style: none;
display: inline;
}
#existing-attachments ul li a {
text-decoration: none !important;
color: #000;
}
/* =========================== Kanban Popup Ends ============================= */
/* =========================== containermiddle Starts ============================= */
.containermiddle {
margin: 20px 40px 10px 40px !important;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
align-items: flex-start;
}
/* Reduce width of containermiddle */
.containermiddle, .overallkanban, #overallgantt-container, .todo-container, .imp-link {
max-width: 900px; /* adjust this value as needed */
margin: 20px auto; /* center it in the container */
}
.todo-chat-wrapper,.chat-container {
flex: 0 0 49%;
max-width: 49%;
margin: 0;
}
.chat-container {
padding: 20px;
border: 1px solid gray;
border-top: 8px solid #101fa1;
border-radius: 15px;
background-color: #ffffff;
}
#team-selector-wrapper{
border-radius: 15px;
background-color: #ffffff;
padding: 20px;
margin: 0px auto;
text-align: center;
display: none;
width: 100%;
border: 1px solid gray;
border-top: 8px solid #101fa1;
}
.label-team-selector{
font-size: 20px;
font-weight: 600;
color: #3A59D1;
text-align: center;
}
#team-selector {
font-size: 14px;
width: 180px;
padding: 8px 14px;
border: 1px solid #ccc;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
color: #1e3a8a;
font-weight: 500;
margin-left: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
cursor: pointer;
appearance: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 36px;
}
#team-selector:hover {
border-color: #1e3a8a;
}
#team-selector:focus {
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
#typing-indicator{
color: gray; font-size: 12px; margin-top: 5px;
}
#reply-preview{
display: none;
margin-bottom: 10px;
background-color: #dbeafe;
padding: 10px;
border-left: 4px solid #101FA1;
border-radius: 8px;
font-size: 13px;
/* width: 200px; */
/* height: 90px; */
color: #101FA1;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}
.reply-btn{
margin-top:5px;
font-size: 10px;
background: none;
border: none;
color: #101FA1;
cursor: pointer;
}
#cancel-reply{
float: right;
background: none;
border: none;
color: red;
font-size: 16px;
cursor: pointer;
}
.delete-msg-btn
{
margin-left: 10px;
font-size: 11px;
background: none;
border: none;
color: #bb0000;
cursor: pointer;
}
.duered{
color: rgb(255, 255, 255) !important;
padding: 1px 5px 2px 5px;
background-color: #bb0000;
border-radius: 20px;
font-size: 12px;
}
.duetoday{
color: rgb(255, 255, 255);
padding: 1px 5px 2px 5px;
background-color: #E67324;
border-radius: 20px;
font-size: 12px;
}
.dueblue{
color: rgb(255, 255, 255);
padding: 1px 5px 2px 5px;
background-color: #101FA1;
border-radius: 20px;
font-size: 12px;
}
.pronametask{
color: #101FA1;
}
.chat-file-preview{
display:none; color:green; font-size: 13px;
}
#chat-input-wrapper{
position: relative;
width: 100%;
}
/* ================================ To-do List ================================ */
.todo-chat-container {
overflow-y: auto;
background-color: #fefefe;
padding: 20px;
border: 1px solid gray;
border-top: 8px solid #101fa1;
border-radius: 15px;
}
#todo-list{
height: 230px;
margin: 0px;
}
.task-wrapper {
background: #98989817;
border: 1px solid #464e463b;
border-radius: 12px;
padding: 10px 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: 0.3s;
}
.task-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
font-size: 14px;
font-weight: 500;
color: #000000;
text-align: left;
}
.todo-chat-container h3 {
flex: 1;
font-size: 20px;
font-weight: 600;
color: #3A59D1;
text-align: center;
margin: 0;
padding-bottom: 5px;
}
.todo-chat-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.todo-divider {
border: none;
height: 1px;
background-color: #e0e0e0;
margin: 10px 0 20px 0;
}
.task-header button {
font-size: 14px;
padding: 6px 12px;
background-color: #e0e7ff;
color: #3730a3;
border-radius: 8px;
border: none;
cursor: pointer;
}
.task-header button:hover {
background-color: #c7d2fe;
}
/* ================================ Team Chat ================================ */
.chat-container h3 {
flex: 1;
font-size: 20px;
font-weight: 600;
color: #3A59D1;
text-align: center;
margin: 0;
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-divider {
border: none;
height: 1px;
background-color: #e0e0e0;
margin: 5px 0 20px 0;
}
.chat-box {
height: 180px;
overflow-y: auto;
background: #f9fafb;
border-radius: 8px;
padding: 0px;
display: flex;
flex-direction: column;
gap: 10px;
border: 1px solid #e5e7eb;
margin-bottom: 12px;
scroll-behavior: smooth;
max-height: 300px;
overflow-y: auto;
padding-right: 8px;
}
.chat-box::-webkit-scrollbar {
width: 6px;
}
.chat-box::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
.chat-box::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.chat-message {
max-width: 75%;
padding: 10px 16px;
border: 1px solid #0000000c;
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.247);
word-break: break-word;
}
.mention-dropdown {
position: absolute;
background: white;
border: 1px solid #ccc;
z-index: 9999;
display: none;
max-height: 150px;
overflow-y: auto;
width: 200px;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.mention-dropdown div {
padding: 6px 10px;
cursor: pointer;
}
.mention-dropdown div:hover {
background-color: #f0f0f0;
}
.chat-input-wrapper {
width: 100% !important;
position: relative !important;
display: flex !important;
align-items: center !important;
}
.chat-input-wrapper input[type="text"] {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}
#mention-suggestions::before,
#mention-suggestions::after,
#mention-suggestions div::before,
#mention-suggestions div::after {
content: none !important;
}
.user {
align-self: flex-end;
background-color: #dcfce7;
color: #065f46;
}
.other {
align-self: flex-start;
background-color: #f3f4f6;
color: #1f2937;
}
#chat-message {
flex-grow: 1;
padding: 10px 14px;
font-size: 14px;
border-radius: 8px;
border: 1px solid #cbd5e1;
transition: border-color 0.3s ease;
}
#chat-message:focus {
outline: none;
border-color: #101FA1;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.mention {
color: #1e40af;
font-weight: bold;
background-color: #dbeafe;
padding: 2px 4px;
border-radius: 4px;
}
.chat-image-preview {
max-width: 250px;
border-radius: 8px;
margin-top: 5px;
}
.chat-input {
display: flex;
align-items: center;
gap: 6px;
background-color: #f8f9fa;
/* border-top: 1px solid #ddd; */
}
.chat-input input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
}
.chat-action-btn {
background-color: #101FA1;
color: white;
border: none;
border-radius: 8px;
padding: 10px 16px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s ease;
}
.chat-action-btn:hover {
background-color: #1742a0;
}
#send-message {
background-color: #101FA1;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.3s ease;
}
#send-message:hover {
background-color: #101FA1;
}
.reply-block {
background-color: #e0f2fe;
padding: 6px 10px;
border-left: 4px solid #3b82f6;
border-radius: 6px;
margin-bottom: 5px;
font-size: 13px;
}
.reply-header {
font-weight: bold;
color: #1e3a8a;
}
.reply-text {
font-style: italic;
color: #475569;
}
.new-message-flash {
background-color: #fff8e1;
transition: background-color 1.5s ease;
}
.chat-message small span {
color: green;
margin-left: 4px;
font-weight: bold;
}
.chat-message.grouped-message {
margin-top: -6px;
border-top: none;
box-shadow: none;
border-radius: 6px 6px 6px 6px;
background-color: #f4f4f5 !important;
}
.chat-message.grouped-message.user {
background-color: #def7e7 !important;
}
.grouped-message {
margin-top: 2px;
padding-top: 2px;
}
.grouped-message strong {
display: none;
}
.edit-msg-btn {
background: none;
border: none;
color: #E67324;
cursor: pointer;
font-size: 12px;
margin-left: 5px;
}
.edit-msg-btn i {
font-size: 13px;
}
.update-msg-btn,
.cancel-edit-btn {
padding: 3px 8px;
font-size: 12px;
border-radius: 4px;
font-weight: 500;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.update-msg-btn {
background-color: #101FA1;
color: white;
margin-left: 6px;
}
.update-msg-btn:hover {
background-color: #0d20cd;
}
.cancel-edit-btn {
background-color: #bb0000;
color: white;
margin-left: 6px;
}
.cancel-edit-btn:hover {
background-color: #be123c;
}
@media screen and (max-width: 1024px) {
.containermiddle {
flex-direction: column;
align-items: stretch;
padding: 24px;
gap: 20px;
}
.todo-chat-wrapper,
.chat-container {
flex: 1 1 100%;
max-width: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.chat-container{
margin-bottom: 90px !important;
}
.todo-chat-container,
.chat-container {
padding: 16px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.chat-title {
font-size: 18px;
text-align: center;
margin-bottom: 10px;
}
#chat-message {
font-size: 13px;
}
#send-message {
font-size: 13px;
padding: 8px 12px;
}
#todo-list {
max-height: 300px !important;
overflow-y: auto;
}
}
@media screen and (max-width: 768px) {
.containermiddle {
flex-direction: column;
padding: 20px;
gap: 16px;
}
.todo-chat-wrapper,
.chat-container {
flex: 1 1 100%;
max-width: 100%;
width: 100%;
}
.chat-title {
font-size: 17px;
margin-bottom: 8px;
text-align: center;
}
#chat-message {
font-size: 12.5px;
}
#send-message {
font-size: 12.5px;
padding: 6px 10px;
}
}
@media screen and (max-width: 480px) {
.containermiddle {
margin: 0px !important;
flex-direction: column;
padding: 12px;
gap: 14px;
}
.todo-chat-wrapper,
.chat-container {
width: 100%;
padding: 0;
margin: 0;
}
.todo-chat-container,
.chat-container {
padding: 10px;
border-radius: 8px;
}
.chat-title {
font-size: 16px;
margin-bottom: 6px;
text-align: center;
}
#chat-message {
font-size: 12px;
padding: 8px;
}
#send-message {
font-size: 12px;
padding: 6px 10px;
}
#todo-list {
max-height: 180px;
overflow-y: auto;
}
}
/* =========================== containermiddle Ends ============================= */
/* =========================== Project Timeline Starts ============================= */
.overallgantt-container{
margin: 20px 40px 10px 40px !important;
border-radius: 15px;
background-color: #ffffff;
padding: 20px;
max-width: 100%;
margin: 20px auto;
}
.gantt-container{
border: 1px solid gray;
border-top: 8px solid #101fa1;
}
.gantt-container h3{
flex: 1;
font-size: 20px;
font-weight: 600;
color: #3A59D1;
text-align: center;
margin: 0;
}
.gantt-header-toggle {
display: flex;
justify-content: space-between;
align-items: center;
}
.gantt-divider {
border: none;
height: 1px;
background-color: #e0e0e0;
margin: 10px 0 20px 0;
}
#gantt-filter-buttons {
text-align: center;
margin-bottom: 15px;
}
#gantt-filter-buttons button {
background-color: #101FA1;
color: white;
border: none;
padding: 6px 6px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.3s ease;
}
#gantt-filter-buttons button:hover {
transform: scale(1.05);
}
#gantt-chart {
overflow-y: auto !important;
overflow-x: auto !important;
position: relative;
}
.vis-time-axis .vis-text {
font-size: 14px !important;
font-weight: bold;
color: #000000d6 !important;
}
.vis-item {
min-height: 30px !important;
font-size: 12px !important;
background-color: #DBDBDB !important;
border: 1px solid #0000005d !important;
color: #000000 !important;
}
.vis-item div {
overflow: visible !important;
white-space: normal !important;
}
.vis-label {
background-color:#EDEDED;
font-size: 14px !important;
font-weight: 600 !important;
color: #000000d6 !important;
}
.vis-panel.vis-top {
position: sticky;
top: 0;
z-index: 10;
background-color: #EDEDED;
}
.vis-background
{
width: 10px !important;
}
.vis-current-time {
background-color: #000000 !important;
width: 0.5px !important;
z-index: 999;
}
.vis-item.gantt-task-bar {
font-size: 11px;
background-color: #EDEDED !important;
color: #292929 !important;
border: 1px solid #93c5fd;
padding: 2px;
white-space: normal !important;
}
.vis-panel.vis-left {
max-width: 240px;
overflow-x: hidden;
}
.vis-group {
padding-top: 6px;
padding-bottom: 6px;
}
.vis-item .gantt-task-bar {
background-color: #101FA1 !important;
border-radius: 6px;
color: white;
padding: 4px 6px;
font-size: 12px;
}
.timeline-left-header {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 30px;
background: #f1f5f9;
border-right: 1px solid #d1d5db;
display: flex;
align-items: center;
padding-left: 10px;
font-size: 13px;
color: #1e3a8a;
z-index: 10;
}
.gantt-header-row {
display: flex;
width: 100%;
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
}
.gantt-left-label {
width: 240px;
background-color: #f1f5f9;
border-right: 1px solid #d1d5db;
padding: 6px 10px;
color: #1e3a8a;
}
.gantt-timeline-label {
flex: 1;
padding: 6px 10px;
background-color: #f1f5f9;
color: #3b3b3b;
}
.vis-item.compact-task-line {
width: 2px !important;
background-color: #EF4444 !important;
top: 0 !important;
height: 100%;
}
#gantt-tooltip {
position: absolute;
padding: 10px;
background: #ffffff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
z-index: 1000;
display: none;
max-width: 250px;
font-size: 12px;
}
.vis-item.compact-task-dot .vis-item-content span {
font-size: 12px;
color: #000;
}
.gantt-dot {
display: block;
margin: auto;
}
.vis-item.compact-task-dot:hover .vis-item-content div {
transform: scale(1.1);
transition: all 0.2s ease-in-out;
}
.vis-item.compact-task-dot {
background: transparent !important;
border: none !important;
padding: 0 !important;
overflow: visible !important;
min-height: 40px !important;
display: flex !important;
align-items: center;
justify-content: center;
}
.vis-item.compact-task-dot .vis-item-content {
overflow: visible !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
display: block !important;
}
.vis-item-content {
display: block !important;
overflow: visible !important;
white-space: normal !important;
}
.vis-item.compact-task-dot {
background: transparent !important;
border: none !important;
overflow: visible !important;
min-height: 50px !important;
display: flex !important;
align-items: center;
justify-content: center;
}
.vis-item.compact-task-dot .vis-item-content {
padding: 0 !important;
background: transparent !important;
text-align: center;
}
.vis-item.custom-gantt-task {
background-color: #3A59D1 !important;
color: white !important;
border-radius: 6px;
border: none;
}
.compact-task-dot {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.bubble-blue {
display: inline-block;
padding: 8px 10px;
background-color: #3A59D1;
color: white;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.gantt-overdue {
background-color: #bb0000 !important;
border: 2px solid #bb0000 !important;
color: white !important;
}
.gantt-due-today {
background-color: #E67324 !important;
border: 2px solid #E67324 !important;
color: white !important;
}
.gantt-completed {
background-color: #10b981 !important;
border: 2px solid #10b981 !important;
color: white !important;
}
.gantt-task-bar {
background-color: #e0e0e0 !important;
border: 1px solid #bdbdbd !important;
color: #000 !important;
}
#timeline-filter-wrapper{
margin: 10px 0; display: none;
}
.timeline-user-filter{
font-size: 20px;
font-weight: 600;
color: #3A59D1;
text-align: center;
}
#timeline-user-filter {
font-size: 14px;
width: 180px;
padding: 8px 14px;
border: 1px solid #ccc;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
color: #1e3a8a;
font-weight: 500;
margin-left: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
cursor: pointer;
appearance: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 36px;
}
#timeline-user-filter:hover {
border-color: #1e3a8a;
}
#timeline-user-filter:focus {
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
@media screen and (max-width: 768px) {
.gantt-container h3 {
font-size: 16px;
}
.vis-item {
font-size: 11px !important;
}
.vis-label {
font-size: 13px !important;
max-width: 180px;
}
.vis-panel.vis-left {
max-width: 180px;
min-width: 100px;
}
.gantt-left-label {
width: 180px;
font-size: 13px;
}
.gantt-timeline-label {
font-size: 13px;
}
#gantt-filter-buttons button {
font-size: 13px;
padding: 8px 12px;
}
}
@media screen and (max-width: 480px) {
.overallgantt-container {
padding: 20px 10px;
margin: 10px !important;
}
.gantt-container h3 {
font-size: 15px;
}
.vis-label {
font-size: 12px !important;
max-width: 140px;
}
.vis-panel.vis-left {
max-width: 140px;
min-width: 100px;
}
.vis-item {
font-size: 10px !important;
}
.vis-item .gantt-task-bar {
font-size: 10px;
padding: 3px 5px;
}
.gantt-left-label {
width: 140px;
font-size: 12px;
}
.gantt-timeline-label {
font-size: 12px;
}
#gantt-filter-buttons button {
font-size: 12px;
padding: 6px 10px;
}
}
/* =========================== Project Timeline Ends ============================= */
/* =========================== Task Starts ============================= */
.todo-container {
margin: 20px 40px 20px 40px;
background-color: white;
padding: 20px;
border: 1px solid gray;
border-top: 8px solid #101fa1;
border-radius: 15px;
}
.todo-container h3 {
font-size: 20px;
font-weight: 600;
color: #3A59D1;
margin: 0 auto;
text-align: center;
flex: 1;
padding-bottom: 15px;
}
.datepicker
{
text-align: center;
padding-bottom: 20px;
}
input[type="date"] {
float: center !important;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
font-size: 16px;
width: 200px;
}
input[type="date"]:focus {
border-color: #3182ce;
outline: none;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}
.input-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 25px;
align-items: stretch;
}
.input-group input,
.input-group select,
.input-group button {
padding: 12px 14px;
font-size: 15px;
border-radius: 6px;
border: 1px solid #cbd5e1;
height: 44px;
transition: 0.2s ease-in-out;
}
#new-task-input {
flex: 2;
}
#start-time,
#end-time,
#timezone {
flex: 1;
min-width: 110px;
}
#add-task-btn {
flex: 1;
background: #101FA1;
color: white;
border: none;
cursor: pointer;
font-weight: 500;
transition: background 0.3s ease;
}
#add-task-btn:hover {
background-color: #1d4ed8;
}
#task-list .edit-btn, #task-list .edit-subtask-btn {
background-color: #f59e0b;
color: white;
border: none;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.3s ease;
}
#task-list .edit-btn:hover,#task-list .edit-subtask-btn:hover {
background-color: #d97706;
}
#task-list .delete-btn,#task-list .delete-subtask-btn {
background-color: #ef4444;
color: white;
border: none;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.3s ease;
}
#task-list .delete-btn:hover, #task-list .delete-subtask-btn {
background-color: #dc2626;
}
#task-list .edit-btn i,
#task-list .delete-btn i {
margin-right: 6px;
}
.filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin: 25px 0;
}
.filter-btn {
padding: 8px 18px;
border: none;
border-radius: 5px;
background-color: #e5e7eb;
cursor: pointer;
font-weight: 500;
font-size: 14px;
transition: background 0.3s ease;
}
.filter-btn:hover {
background-color: #93c5fd;
}
.filter-btn.active {
background-color: #101FA1;
color: white;
}
#task-list {
list-style: none;
padding: 0;
margin-bottom: 20px;
max-height: none;
}
.task-item {
display: flex;
align-items: center;
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 12px 16px;
margin-bottom: 12px;
gap: 10px;
}
.task-item input[type="checkbox"] {
transform: scale(1.2);
accent-color: #101FA1;
}
.task-item span {
flex: 1;
font-size: 16px;
line-height: 1.5;
color: #1e293b;
}
.task-item.completed span {
text-decoration: line-through;
color: #888;
}
.task-item button {
background-color: #101FA1;
color: white;
border: none;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s ease;
}
.task-item button:hover {
background-color: #101FA1;
}
.task-item span i{
color: #101FA1;
}
#task-list input[type="date"]:not(:focus):invalid,
.input-group input[type="date"]:not(:focus):invalid {
color: #999;
}
#task-list input[type="date"]::before,
.input-group input[type="date"]::before {
content: attr(data-placeholder);
color: #999;
margin-right: 5px;
}
#task-list input[type="date"]:focus::before,
#task-list input[type="date"]:valid::before,
.input-group input[type="date"]:focus::before,
.input-group input[type="date"]:valid::before {
content: "";
}
button:disabled {
background-color: #cbd5e1;
color: #666;
cursor: not-allowed;
opacity: 0.7;
}
.text-info {
font-size: 13px;
font-style: italic;
color: #64748b;
margin-top: -10px;
margin-bottom: 15px;
text-align: center;
}
select {
color: #111827;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 140 140' width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 50 L70 110 L130 50' stroke='%233b82f6' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px;
cursor: pointer;
transition: 0.3s ease;
}
select:focus {
outline: none;
border-color: #101FA1;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.todo-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.todo-divider {
border: none;
height: 1px;
background-color: #e0e0e0;
margin: 0 0 20px 0;
}
@media screen and (max-width: 768px) {
.input-group {
flex-direction: column;
}
#new-task-input,
#start-time,
#end-time,
#timezone,
#add-task-btn {
width: 100%;
flex: unset;
}
.filters {
justify-content: flex-start;
}
.task-item {
flex-direction: column;
align-items: flex-start;
}
.task-item button {
align-self: flex-end;
margin-top: 8px;
}
}
@media screen and (max-width: 480px) {
.container,
.todo-container {
margin: 0 10px 20px 10px;
}
.todo-container {
padding: 20px 15px;}
h2{
font-size: 10px;
}
.datepicker input[type="date"] {
width: 100%;
font-size: 14px;
}
.input-group input,
.input-group select,
.input-group button {
font-size: 14px;
padding: 10px 12px;
height: auto;
}
.filters {
flex-direction: column;
align-items: stretch;
}
.filter-btn {
width: 100%;
text-align: center;
}
.task-item {
padding: 10px 12px;
}
.task-item span {
font-size: 14px;
}
.task-item button {
font-size: 13px;
padding: 6px 10px;
}
#logout-btn {
width: 100%;
font-size: 14px;
}
}
/* Member Filter Container */
#member-filter-container {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
justify-content: center;
flex-wrap: wrap;
padding: 10px;
background-color: #f1f5f9;
border-radius: 8px;
border: 1px solid #cbd5e1;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
display: none;
margin-bottom: 10px;
}
#member-filter-container label {
font-size: 16px;
color: #1e3a8a;
font-weight: 500;
}
#member-filter {
padding: 10px 14px;
font-size: 15px;
border: 1px solid #cbd5e1;
border-radius: 6px;
background-color: #ffffff;
width: 200px;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 140 140' width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 50 L70 110 L130 50' stroke='%233b82f6' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px;
cursor: pointer;
transition: 0.3s ease;
}
#member-filter:focus {
outline: none;
border-color: #101FA1;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
@media screen and (max-width: 768px) {
#member-filter-container {
flex-direction: column;
align-items: stretch;
text-align: left;
}
#member-filter {
width: 100%;
}
#member-filter-container label {
width: 100%;
margin-bottom: 5px;
font-size: 15px;
}
}
/* subtask */
.subtask-list {
margin-top: 12px;
padding-left: 0;
list-style-type: none;
}
.subtask-item {
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.subtask-item span {
font-size: 12px !important;
color: #000000;
}
.subtask-item small {
color: #6b7280;
font-size: 12px;
display: block;
margin-top: 2px;
}
.subtask-item button {
background: none;
border: none;
color: #ef4444;
font-size: 14px;
cursor: pointer;
margin-left: 8px;
}
.toggle-subtasks {
background: #101FA1 !important;
border: none;
font-size: 18px;
color: #fff !important;
cursor: pointer;
transition: 0.2s;
}
.subtask-container {
margin-left: 40px;
padding-left: 10px;
border-left: 3px solid #101FA1;
margin-top: 15px;
}
.subtask-input-wrapper {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.subtask-input {
flex: 1;
padding: 12px 16px;
border-radius: 6px;
border: 1px solid #cbd5e1;
font-size: 15px;
transition: border-color 0.2s ease;
}
.subtask-input:focus {
outline: none;
border-color: #101FA1;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.add-subtask-btn {
padding: 6px 12px;
border: none;
background-color: #101FA1;
color: white;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
font-size: 14px;
transition: background-color 0.3s ease;
}
.add-subtask-btn:hover {
background-color: #101FA1;
}
.subtask-list {
list-style: none;
padding: 0;
margin-top: 12px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.subtask-item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 10px 10px;
margin-bottom: 12px;
margin-left: 30px;
gap: 5px;
animation: fadeInUp 0.3s ease-in-out;
}
.subtask-item span {
flex: 1;
font-size: 16px;
color: #1e293b;
word-break: break-word;
}
.subtask-item .edit-subtask-btn,
.subtask-item .delete-subtask-btn {
background-color: #101FA1;
color: white;
border: none;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: background-color 0.2s ease-in-out;
}
.subtask-item .edit-subtask-btn:hover,
.subtask-item .delete-subtask-btn:hover {
background-color: #101FA1;
}
.inline-subtask-edit {
padding: 8px 10px;
border-radius: 6px;
border: 1px solid #cbd5e1;
width: 220px;
font-size: 14px;
}
.inline-subtask-edit:focus {
border-color: #101FA1;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
outline: none;
}
/* =========================== Task Ends ============================= */
/* ============================ Footer ============================ */
.imp-link {
margin: 40px 40px 20px 40px;
background-color: #fff !important;
border: 1px solid gray;
border-top: 8px solid #101fa1;
border-radius: 15px;
padding: 20px;
position: relative;
}
.imp-link-title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.imp-link-title {
flex: 1;
font-size: 20px;
font-weight: 600;
color: #3A59D1;
text-align: center;
margin: 0;
}
.imp-link-divider {
border: none;
height: 1px;
background-color: #e0e0e0;
margin: 0 0 20px 0;
}
#add-implink {
display: inline-block;
background: #101FA1;
padding: 10px 20px;
color: white;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.3s ease;
border-radius: 5px;
}
#add-implink:hover {
background-color: #1d4ed8;
padding: 10px 30px;
}
.important-links-list {
margin-top: 15px;
}
.important-link-card {
background-color: #F1F1F2;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease;
}
.important-link-all {
font-weight: bold;
font-size: 14px;
color: #1e3a8a;
display: flex;
align-items: center;
gap: 8px;
}
.important-link-all i {
color: #101FA1;
cursor: pointer;
}
.important-link-title {
color: #000;
}
.imp-content a {
color: #303030;
}
.imp-link-columns {
display: flex;
justify-content: space-between;
gap: 30px;
}
.links-column, .files-column {
flex: 1;
background: #f9fafb;
padding: 15px;
border-radius: 8px;
border: 1px solid #ccc;
min-height: 150px;
}
.links-column h4, .files-column h4 {
color: #101FA1;
font-size: 16px;
margin-bottom: 10px;
}
.important-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
background-color: white;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
}
.important-item a {
color: #1e3a8a;
text-decoration: none;
word-break: break-word;
flex-grow: 1;
}
.important-item button {
background: transparent;
border: none;
color: red;
margin-left: 10px;
cursor: pointer;
}
#link-upload-modal .checkbox-container {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #1e3a8a !important;
white-space: nowrap !important;
}
#link-upload-modal .checkbox-container input[type="checkbox"] {
transform: scale(1.2) !important;
cursor: pointer !important;
}
@media (max-width: 768px) {
.imp-link {
margin: 12px 10px !important;
padding: 12px;
border-radius: 12px;
}
.imp-link-columns {
flex-direction: column; /* stack items vertically */
gap: 15px; /* smaller spacing */
}
}
/* ============================ Footer Ends ============================ */
/* ============================ Floating chat Starts ============================*/
.right-sidebar {
position: fixed;
top: 0;
right: 0;
width: 20% !important;
height: 100vh;
background-color: #040D61;
padding: 13px;
padding-top: 70px;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
overflow-y: auto;
scrollbar-width: thin;
-ms-overflow-style: auto;
z-index: 998;
}
.right-sidebar::-webkit-scrollbar {
width: 6px;
}
.right-sidebar::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 4px;
}
.right-sidebar h3 {
margin-top: 0;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}
#chatbot-wrapper {
position: relative;
z-index: auto;
cursor: default;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
width: 100%;
max-width: 100%;
}
#floating-chatbot {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100%;
}
.mascot-wrapper {
width: 100%;
overflow: hidden;
position: relative;
text-align: center;
}
#floating-chatbot .mascot {
width: 50%;
height: auto;
display: block;
margin: 0 auto;
object-fit: contain;
}
@keyframes walkLeftRightAlternate {
0% { transform: translateX(0); }
25% { transform: translateX(100%); }
50% { transform: translateX(0); }
75% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
.mascot-walk-both {
animation: walkLeftRightAlternate 10s linear infinite;
}
.paused {
animation-play-state: paused !important;
}
#chat-toggle-body {
padding: 10px 8px;
background: #f8f8f8 !important;
border-radius: 12px;
font-size: 14px;
}
#mascot-text h4 {
font-size: 12px;
margin-bottom: 8px;
color: #fff;
background-color: #101FA1;
border-radius: 5px;
padding: 2px;
width: 50%;
}
#mascot-text strong {
color: #1e3a8a;
}
#mascot-text h3, #mascot-text strong {
color: #101FA1;
margin-top: 12px;
}
.mascot-card {
background: #fff;
padding: 12px 16px;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
font-size: 14px;
line-height: 1.5;
max-height: 700px;
overflow-y: auto;
}
.mascot-card h3 {
color: #007acc;
margin-bottom: 8px;
font-size: 16px;
}
#mascot-message {
overflow-y: auto;
padding: 8px;
border: 1px solid #ccc;
border-radius: 12px;
background-color: #fff;
scrollbar-width: thin;
}
#mascot-message::-webkit-scrollbar {
width: 6px;
}
#mascot-message::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 4px;
}
.mascot-card ul {
padding-left: 20px;
margin-bottom: 12px;
}
.mascot-card h4 {
margin-top: 10px;
margin-bottom: 4px;
color: #101fa1;
font-size: 16px;
}
.mascot-card li {
margin-bottom: 6px;
}
.mascot-section {
margin-bottom: 12px;
}
.mascot-followup .hidden {
display: none;
}
#mascot-followup {
margin-top: 12px;
padding: 8px 5px;
border-top: 1px solid #ccc;
display: flex;
align-items: center;
gap: 8px;
border-radius: 0 0 10px 10px;
}
#followup-input {
flex: 1;
padding: 10px 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease;
width: 20%;
}
#followup-btn {
padding: 10px 18px;
background-color: #101FA1;
color: white;
border: none;
border-radius: 6px;
font-weight: bold;
font-size: 14px;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
#followup-btn:hover {
background: #0033cc;
transform: translateY(-1px);
}
#mascot-text ul {
list-style: none;
padding-left: 0;
margin-bottom: 16px;
}
/* new */
#mascot-text li,#mascot-text .summary-card {
background: #f3f6ff;
margin-left: 0px !important;
margin-bottom: 10px;
padding: 5px 5px;
border: 1px solid #ccc;
border-left: 4px solid #101FA1;
font-size: 12px;
font-weight: 500;
color: #334155;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
#mascot-text .summary-card a, #mascot-text ul li a, #mascot-text p a{
color: #101FA1;
font-weight: 800;
font-size: 12px;
}
/* new */
#mascot-text p {
margin: 10px 0;
font-size: 12px;
line-height: 1.5;
color: #334155;
background: #f3f6ff;
padding: 5px 5px;
border: 1px solid #ccc;
border-left: 4px solid #101FA1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* ============================ Floating chat Ends ============================ */
/* ============================ Common Starts ============================*/
.toggle-btn {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
color: #7d50c7;
margin-left: 10px;
}
.toggle-btn i{
color: #101FA1;
font-size: 28px;
border: none;
}
.toggle-btn i :hover{
border: none;
}
/* ============================ Common Ends ============================*/
.dashboard-section {
display: none;
}
.todo-chat-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.todo-chat-container,
.chat-container {
flex: 1;
/* min-width: 400px; */
}
/* Make container stretch to full screen height minus navbar */
.containermiddle {
height: calc(100vh - 90px); /* Adjust if navbar height is different */
align-items: stretch;
}
/* Make each panel fill vertically */
.todo-chat-container,
.chat-container {
height: 100%;
display: flex;
flex-direction: column;
}
/* Allow content inside to scroll if needed */
#todo-list,
#chat-box {
flex-grow: 1;
overflow-y: auto;
}
/* bar inside the task*/
.vis-item.gantt-overdue {
background-color: #dc2626; /* red */
border-radius: 4px;
}
.vis-item.gantt-completed {
background-color: #16a34a; /* green */
border-radius: 4px;
}
.vis-item.gantt-task-bar {
background-color: #1d4ed8; /* default blue */
border-radius: 4px;
}
.gantt-completed {
background-color: #22c55e !important; /* β
Green color */
color: white !important;
border-radius: 4px;
padding: 3px 6px;
font-weight: bold;
}
/* gantt chart*/
#gantt-chart-wrapper {
overflow-x: auto;
max-width: 100%;
position: relative;
}
/* Sticky header fix for Vis Timeline */
.vis-panel.vis-top {
position: sticky !important;
top: 0;
z-index: 100;
background-color: #f3f7fd; /* Match your UI */
border-bottom: 1px solid #ccc;
}
/* Prevent horizontal scroll affecting header */
.vis-timeline {
overflow: visible !important;
}
.vis-panel.vis-top {
font-weight: 600;
text-align: center;
background-color: #f8fbff;
color: #1e3a8a;
}
/*time line*/
.gantt-timeline-label {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-weight: bold;
font-size: 13px;
color: #101FA1;
text-align: center;
}
#gantt-filter-buttons button {
background-color: transparent;
color: #101FA1;
border: 1px solid #ccc;
padding: 6px 14px;
margin-right: 6px;
cursor: pointer;
font-weight: 500;
}
#gantt-filter-buttons button.active {
background-color: #101FA1;
color: #fff;
border-color: #101FA1;
}
.task-label {
text-align: center;
margin-top: 6px;
margin-bottom: 6px;
font-size: 15px;
font-weight: 600;
color: #101FA1;
}
/* new */
/* Right Chatbot Sidebar */
.right-sidebar {
overflow-y: auto;
scrollbar-width: thin;
-ms-overflow-style: auto;
z-index: 998;
}
#chatbot-sidebar {
position: fixed;
top: 60px;
right: 0;
width: 300px;
height: calc(100% - 60px);
background-color: #040D61;
padding: 13px;
z-index: 999;
overflow-y: auto;
scrollbar-width: thin;
-ms-overflow-style: auto;
transition: width 0.2s ease;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}
/* Resizer bar between container and chatbot */
#chatbot-resizer {
position: fixed;
top: 60px;
height: calc(100% - 60px);
width: 8px;
background-color: #040d61e4;
cursor: ew-resize;
right: 300px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
#chatbot-resizer i {
pointer-events: none;
font-size: 10px;
transform: rotate(90deg);
color: #fff;
}
.container {
margin-right: 300px !important;
}
/* gdrive */
.imp-link-actions {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.or-label {
font-weight: bold;
color: #444;
font-size: 14px;
}
#add-implink {
background-color: #101FA1;
color: white;
padding: 8px 14px;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease;
}
#add-implink:hover {
background-color: #1e3a8a;
}
#gdrive-login-btn,
#onedrive-login-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
font-size: 16px;
border-radius: 20%;
text-decoration: none;
color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Google Drive */
#gdrive-login-btn {
background-color: #0F9D58;
}
#gdrive-login-btn:hover {
background-color: #0c7b43;
transform: scale(1.05);
}
/* OneDrive */
#onedrive-login-btn {
background-color: #0078D4;
}
#onedrive-login-btn:hover {
background-color: #005a9e;
transform: scale(1.05);
}
/* //sai calendar */
/* calendar style*/
.fc .fc-daygrid-event {
white-space: normal;
font-size: 13px;
padding: 2px 4px;
line-height: 1.2;
}
.fc-event-title {
font-size: 8px;
white-space: normal !important;
}
/* Style for all calendar event boxes */
.fc-event {
border: none !important;
border-radius: 6px !important;
padding: 5px 8px !important;
color: white !important;
font-weight: 500;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
}
/* Google Calendar Events - Orange */
.fc-event[title="Google Event"] {
background-color: #f39c12 !important;
}
/* Microsoft Calendar Events - Purple */
.fc-event[title="MS Event"] {
background-color: #673ab7 !important;
}
/* Task Events - Blue */
.fc-event[title="Task"] {
background-color: #007bff !important;
}
/* Kanban Events - Green */
.fc-event[title="Kanban Task"] {
background-color: #28a745 !important;
}
/* //calendar sync button sandhiya */
.calendar-sync-buttons {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 16px;
}
.sync-btn {
font-family: 'Segoe UI', sans-serif;
font-size: 14px;
font-weight: 500;
padding: 10px 16px;
border: none;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: background-color 0.2s ease, transform 0.1s ease;
}
.sync-btn i {
font-size: 16px;
}
.sync-btn:hover {
transform: translateY(-1px);
}
.sync-btn.google {
background-color: #101FA1;
color: #fff;
}
.sync-btn.google:hover {
background-color: #fff;
border: 1px solid #101FA1;
color: #101FA1;
}
.sync-btn.microsoft {
background-color: #101FA1;
color: #fff;
}
.sync-btn.microsoft:hover {
background-color: #fff;
border: 1px solid #101FA1;
color: #101FA1;
}
#signed-in-emails{
border: 1px solid #101FA1;
/* background-color: #101FA1; */
color: #101FA1 !important;
border-radius: 15px;
padding: 10px 20px 10px 20px;
margin: 0px 0px 10px 0px;
}
#signed-in-emails .labelemail{
font-size: 18px !important;
text-align: left;
}
#signed-in-emails .mailvisible{
font-size: 16px !important;
}
#signed-in-emails .mailvisible button{
border: 1px solid #101FA1 !important;
/* background-color: white !important; */
padding: 2px 5px 2px 5px;
border-radius: 5px;
}
#signed-in-emails .mailvisible i{
font-size: 15px !important;
color: #bb0000 !important;
}
/* new */
/* ===================== Calendar Accounts Display Styling ===================== */
/* ========== Styled Calendar Account Info ========== */
.calendar-accounts-display {
margin: 10px 0px 10px 0px;
padding: 2px 10px 5px 10px;
background-color: #3A59D1;
border: 1px solid #ffffff;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
color: #fff;
font-size: 13px;
font-weight: 500;
max-width: 200px;
}
.calendar-accounts-display .account-row {
display: flex;
align-items: center;
/* gap: 10px; */
margin-bottom: 8px;
}
.calendar-accounts-display .account-row:last-child {
margin-bottom: 0;
}
.calendar-accounts-display .account-icon {
font-size: 14px;
color: #101FA1;
}
.calendar-accounts-display .account-label {
font-weight: 700;
font-size: 14px;
}
.calendar-accounts-display .labelemail{
font-size: 14px !important;
}
.calendar-accounts-display .labelemail i{
font-size: 14px !important;
}
.calendar-accounts-display .mailvisible{
font-size: 14px !important;
}
.calendar-accounts-display .mailvisible button{
background-color: white !important;
/* padding: 1px; */
border-radius: 5px;
}
.calendar-accounts-display .mailvisible button i{
font-size: 10px !important;
color: #bb0000 !important;
}
/* team chat text field */
#chat-message {
width: 100%;
min-height: 36px;
max-height: 250px;
resize: none;
overflow-y: hidden; /* β
Enables vertical scrollbar */
padding: 8px 10px;
border-radius: 8px;
font-size: 14px;
line-height: 1.4;
border: 1px solid #ccc;
outline: none;
transition: all 0.2s ease-in-out;
}
/* === Floating circle trigger === */
.chatbot-fab{
position: fixed;
top: 80px; /* <- new: sits under the navbar (navbar is 60px tall) */
right: 18px;
bottom: auto; /* <- remove the bottom anchor */
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
background: #101FA1;
color: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.18);
display: grid;
place-items: center;
font-size: 20px;
cursor: pointer;
z-index: 1100;
}
/* === Use your existing #chatbot-sidebar; keep it off-canvas by default === */
#chatbot-sidebar{
position: fixed; top: 0; right: 0; height: 100vh;
width: 320px; max-width: 92vw; background-color: #040D61;
box-shadow: -8px 0 24px rgba(0,0,0,.08);
transform: translateX(100%); /* hidden */
transition: transform .28s ease;
z-index: 1090; /* below the FAB */
display: flex; flex-direction: column; /* keeps your inner layout */
border-left: 1px solid #e5e7eb;
}
/* Slide it in only when body has .chatbot-open */
.chatbot-open #chatbot-sidebar{ transform: translateX(0); }
/* Your layout currently reserves right space always; override so it only happens when open */
body:not(.chatbot-open) .container{ margin-right: 0 !important; }
.chatbot-open .container{ margin-right: 320px !important; } /* match #chatbot-sidebar width */
/* Optional: on very small phones, make the drawer narrower */
@media (max-width: 420px){
#chatbot-sidebar{ width: 92vw;}
.chatbot-open .container{ margin-right: 0 !important; } /* overlay style on tiny screens */
}
/* Hide the chatbot resize handle on small screens */
@media (max-width: 768px) {
#chatbot-resizer {
display: none !important;
}
}
#todo-col-today
{
font-size: 18px;
}
/* ===== Floating only on mobile + tablet ===== */
/* Hide the FAB by default (desktop) */
.chatbot-fab {
display: none;
}
.chatbot-close {
position: absolute;
top: 10px;
left: 10px; /* β¬
new */
right: auto; /* β¬
stop pulling it to right */
border: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: #eef2ff;
color: #101FA1;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
z-index: 3; /* keep above mascot (you already set this later in the file) :contentReference[oaicite:2]{index=2} */
}
.chatbot-close:hover { background: #e0e7ff; }
/* Small screens: show FAB, use off-canvas sidebar, no right gutter */
@media (max-width: 1024px) {
.chatbot-fab { display: grid; } /* show round button */
#chatbot-sidebar { transform: translateX(100%); padding-top: 80px; width: 80%;} /* hidden off-canvas */
.chatbot-open #chatbot-sidebar { transform: translateX(0); } /* slide in */
/* content should be full-width; overlay the drawer */
.container { margin-right: 0 !important; }
.chatbot-open .container { margin-right: 0 !important; }
/* no resizer on touch screens */
#chatbot-resizer { display: none !important; }
}
/* Desktop: pin the sidebar, no FAB, keep your original right gutter */
@media (min-width: 1025px) {
#chatbot-sidebar { transform: none !important;padding-top: 80px; } /* always visible */
.chatbot-fab { display: none !important; }
.container { margin-right: 300px !important; } /* matches your CSS */
}
/* Keep chatbot UI below the navbar (navbar z-index = 1000) */
:root {
--z-navbar: 1000; /* reference only */
--z-chatbot-fab: 995; /* below navbar */
--z-chatbot-resizer: 994;
--z-chatbot-panel: 993;
}
/* Override previous higher z-index values */
.chatbot-fab { z-index: var(--z-chatbot-fab) !important; }
#chatbot-resizer { z-index: var(--z-chatbot-resizer) !important; }
#chatbot-sidebar { z-index: var(--z-chatbot-panel) !important; }
/* keep mic button style the same while recording */
#voice-btn.is-recording {
background: #1d3557 !important; /* your normal button color */
color: #fff !important;
outline: none !important;
box-shadow: none !important;
}
/* Mic button turns RED while recording */
#voice-btn.is-recording,
#voice-btn.is-recording:hover,
#voice-btn.is-recording:focus{
background:#dc2626 !important; /* red */
border-color:#b91c1c !important;
color:#fff !important;
}
/* ensure the icon stays visible on red */
#voice-btn.is-recording i{ color:#fff !important; }
/* if your buttons share a base class, this raises specificity */
.action-btn#voice-btn.is-recording{ background:#dc2626 !important; }
/* vioce note size*/
/* === Chat Reactions ======================================= */
.chat-reaction-bar {
display: flex; gap: 6px; align-items: center;
margin-top: 6px; user-select: none;
font-size: 13px; line-height: 1;
}
.chat-reaction-chip {
display: inline-flex; align-items: center; gap: 4px;
border: 1px solid #e5e7eb; border-radius: 999px;
padding: 4px 8px; cursor: pointer; background: #fff;
}
.chat-reaction-chip:hover { background: #f3f4f6; }
.chat-reaction-chip.active { border-color: #101FA1; background: #eef2ff; }
.chat-reaction-trigger {
display: none; margin-left: 6px; font-size: 14px; cursor: pointer; opacity: .7;
}
.chat-msg:hover .chat-reaction-trigger { display: inline-block; }
/* floating palette */
.reaction-palette {
position: absolute; z-index: 9999;
display: flex; gap: 8px; background: #fff; padding: 8px 10px;
border: 1px solid #e5e7eb; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.reaction-palette button {
font-size: 18px; line-height: 1; background: transparent; border: none; cursor: pointer;
}
.reaction-palette button:active { transform: scale(.95); }
/* touch helper highlight */
.chat-msg._highlight { outline: 2px dashed #94a3b8; outline-offset: 2px; }
/* ===== Pinned Messages ===== */
.pinned-bar{
background:#fff;
border:1px solid #e5e7eb;
border-left:4px solid #101FA1;
border-radius:8px;
margin-bottom:10px;
padding:8px 10px;
}
.pinned-bar-head{
display:flex; align-items:center; justify-content:space-between;
font-size:13px; color:#1e3a8a; margin-bottom:6px;
}
.pinned-controls button{
background:none; border:none; font-size:12px; cursor:pointer; color:#101FA1;
margin-left:6px;
}
.pinned-list{
display:flex; flex-direction:column; gap:6px; max-height:120px; overflow:auto;
}
.pinned-chip{
background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px;
padding:8px 10px; font-size:13px; display:flex; justify-content:space-between; gap:8px;
}
.pinned-chip .left{ display:flex; gap:8px; align-items:center; }
.pinned-chip .meta{ color:#64748b; font-size:12px; }
.pinned-chip .actions button{
background:none; border:none; color:#bb0000; cursor:pointer; font-size:12px;
}
/* tiny helper for a small pin icon near actions in bubbles */
.pin-msg-btn{ background:none; border:none; cursor:pointer; color:#101FA1; font-size:12px; margin-left:6px; }
.unpin-msg-btn{ color:#bb0000; }
/*pin chat*/
/* ---- Hover Pin (WhatsApp-style) ---- */
/* ---- Pin quick action (show on hover like emoji) ---- */
.chat-message .msg-actions { position: relative; }
/* hidden by default */
.chat-message .pin-msg-btn{
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 4px;
width: 28px;
height: 28px;
border-radius: 999px;
background: #eef2ff;
border: 1px solid #c7d2fe;
color: #101FA1;
font-size: 12px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-6px);
transition: opacity .15s ease, transform .15s ease;
}
/* reveal on hover/focus (desktop + keyboard) */
.chat-message:hover .pin-msg-btn,
.chat-message:focus-within .pin-msg-btn{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* icon sizing */
.chat-message .pin-msg-btn i { font-size: 12px; line-height: 1; }
/* --- Pin quick chip (next to emoji reactions) --- */
.pin-mini {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
font-size: 12px;
line-height: 1;
border-radius: 999px;
border: 1px solid #cbd5e1;
background: #eef2ff;
color: #101FA1;
cursor: pointer;
user-select: none;
transition: background .15s, border-color .15s, opacity .15s;
}
.pin-mini i { font-size: 12px; color: #101FA1; }
.pin-mini:hover { background:#e0e7ff; border-color:#94a3b8; }
/* show the chip only when the user βgoes toβ (hovers) the message */
.chat-message .pin-mini { opacity: 0; pointer-events: none; }
.chat-message:hover .pin-mini { opacity: 1; pointer-events: auto; }
/* fallback look if we must place it in the actions row */
.msg-actions .pin-mini { margin-left: 6px; }
/* Inline pin next to emoji reactions */
.pin-inline { display:inline-flex; align-items:center; margin-left:6px; opacity:.6; transition:opacity .12s; }
.chat-message:hover .pin-inline { opacity:1; }
.pin-inline-btn { all:unset; cursor:pointer; padding:2px 4px; border-radius:6px; line-height:1; }
.pin-inline-btn i { font-size:14px; }
.pin-inline-btn:hover { background:#eef2ff; }
/* Online status dot */
.team-circle {
position: relative;
}
.online-dot {
position: absolute;
bottom: -2px;
right: -2px;
width: 10px;
height: 10px;
background: grey; /* default offline */
border: 2px solid white;
border-radius: 50%;
}
.online-dot.online {
background: #22c55e; /* green for online */
}
/* presence dot inside the Tech Team Members popup */
.user-list .user-circle,
.user-list-item .user-circle {
position: relative; /* ensure dot anchors to the avatar */
}
.user-circle .presence-dot {
position: absolute;
right: -2px;
bottom: -2px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #fff;
background: #9ca3af; /* grey = offline */
}
.user-circle .presence-dot.online {
background: #22c55e; /* green = online */
}
/* popup: dot + highlight for online rows */
.user-list-item .user-circle { position: relative; }
.user-circle .presence-dot {
position: absolute; right: -2px; bottom: -2px;
width: 10px; height: 10px; border-radius: 50%;
border: 2px solid #fff; background: #9ca3af; /* grey = offline */
}
.user-circle .presence-dot.online { background: #22c55e; } /* green = online */
.user-list-item.is-online span { color: #1e3a8a; } /* keep your brand color */
.user-list-item.is-online small::before { /* optional tiny green bullet before role */
content: "β’"; color: #22c55e; margin-right: 6px; font-weight: 700;
}
/* sidebar: tiny status dot on mini avatars */
#tech-team-avatars .team-circle { position: relative; }
#tech-team-avatars .online-dot {
position: absolute; right: -2px; bottom: -2px;
width: 10px; height: 10px; border-radius: 50%;
border: 2px solid #fff; background: #9ca3af;
}
#tech-team-avatars .online-dot.online { background: #22c55e; }
/* ---------- online pill + popover ---------- */
.chat-header { position: relative; } /* anchor popover */
.online-pill{
margin-left: 10px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid #dbe3ff;
background: #f6f8ff;
font-size: 12px;
color: #101FA1;
cursor: pointer;
}
.online-popover{
position: absolute;
top: 36px; /* below header */
right: 8px;
width: 220px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 10px 24px rgba(0,0,0,.12);
display: none;
z-index: 20;
overflow: hidden;
}
.online-popover.open{ display: block; }
.online-popover-head{
padding: 8px 10px;
background: #f8fafc;
font-weight: 600;
color: #1e3a8a;
font-size: 12px;
border-bottom: 1px solid #eef2f7;
}
.online-popover-list{ max-height: 260px; overflow: auto; }
.online-row{
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; font-size: 13px; color: #1f2937;
}
.online-row:hover{ background: #f8fafc; }
.online-row .dot{
width: 10px; height: 10px; border-radius: 50%;
background: #22c55e; /* green = online */
border: 2px solid #fff; box-shadow: 0 0 0 1px #22c55e;
}
.online-row .name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.online-empty{ padding: 10px; color: #6b7280; font-size: 12px; }
/* banner inside the members popup when filtering */
.online-filter-banner{
padding: 8px 12px;
background: #f8fafc;
border-bottom: 1px solid #eef2f7;
font-size: 12px; color: #0f172a;
}
.online-filter-banner a{ color:#1e3a8a; font-weight:600; text-decoration:none; }
.online-filter-banner a:hover{ text-decoration:underline; }
/* --- Online pill next to Team Chat --- */
.online-pill{
display:inline-flex; align-items:center; gap:6px;
padding:6px 10px; border-radius:999px; border:1px solid #cbd5e1;
background:#fff; font-size:12px; font-weight:600; color:#101FA1;
cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.06);
margin-left:10px; vertical-align:middle;
}
.online-pill .dot{
width:8px; height:8px; border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 2px #eaffea inset;
}
/* --- Drawer --- */
.online-drawer{
position:fixed; inset:0; display:block;
background:rgba(0,0,0,.25); backdrop-filter: blur(2px);
opacity:0; pointer-events:none; transition:opacity .2s ease;
z-index:10000;
}
.online-drawer.open{ opacity:1; pointer-events:auto; }
.online-drawer .drawer-panel{
position:absolute; top:0; right:0; height:100%; width:320px;
background:#fff; box-shadow:-8px 0 20px rgba(0,0,0,.12);
transform:translateX(100%); transition:transform .25s ease;
display:flex; flex-direction:column;
}
.online-drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-header{
display:flex; align-items:center; justify-content:space-between;
padding:14px 16px; border-bottom:1px solid #e5e7eb; font-weight:700; color:#101FA1;
}
.drawer-close{ background:none; border:none; font-size:22px; cursor:pointer; color:#374151; }
.online-list{ padding:10px 12px; overflow:auto; }
.online-list .empty{ padding:12px; color:#6b7280; font-size:13px; }
.online-list-item{
display:flex; align-items:center; gap:10px;
padding:10px 8px; border-radius:10px;
transition:background .15s ease;
}
.online-list-item:hover{ background:#f5f7ff; }
.online-list-item .avatar{
position:relative;
width:36px; height:36px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:#101FA1; color:#fff; font-weight:700; font-size:13px;
}
.online-list-item .avatar .dot{
position:absolute; right:-2px; bottom:-2px;
width:10px; height:10px; border-radius:50%;
background:#22c55e; border:2px solid #fff;
}
.online-list-item .meta strong{ display:block; color:#101FA1; font-size:14px; }
.online-list-item .meta small{ display:block; color:#6b7280; font-size:12px; }
/* Default offline style */
/* / */
/* Online style */
.user-list-item.is-online .user-circle {
border: 4px solid #22c55e;
color: #fff !important;
}
.online-list .online-list-item .avatar {
border: 4px solid #22c55e;
}
/* Style voice note inside chat messages */
.chat-message audio {
display: block;
width: 100%;
max-width: 280px;
/* margin: 6px 0; */
border-radius: 12px;
background-color: #f9f9f9;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
/* padding: 4px; */
}
/* β
Mobile layout fix */
@media (max-width: 768px) {
.containermiddle {
flex-direction: column;
gap: 15px;
}
.todo-chat-wrapper,
.chat-container {
flex: 0 0 100% !important;
max-width: 100% !important;
}
#todo-list {
height: auto; /* allow list to grow naturally */
max-height: 250px; /* optional: scroll if too long */
overflow-y: auto;
}
}
/* Mobile chat input fix */
@media (max-width: 768px) {
.chat-input-container {
display: flex;
flex-direction: column;
gap: 6px; /* space between rows */
}
.chat-input-container input[type="text"] {
width: 100%;
padding: 12px;
font-size: 16px;
border-radius: 8px;
}
.chat-input-container .actions {
display: flex;
justify-content: space-between;
}
.chat-input-container .actions button {
flex: 1;
max-width: 48px; /* keeps icons small */
}
}
/* Buttons row inside Flatpickr popup */
.fp-action-row{
display:flex; gap:8px; justify-content:flex-end;
padding:8px 10px; border-top:1px solid #e5e7eb; margin-top:6px;
}
.fp-action-row button{
border:1px solid #d1d5db; background:#fff; padding:6px 10px;
border-radius:8px; font-weight:600; cursor:pointer;
}
.fp-action-row button:hover{ filter:brightness(0.96); }
/* chatbot close */
.chatbot-close { z-index: 3; }
/* Sandhiya for AI bot */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ai-greeting {
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ai-capabilities {
animation: fadeIn 0.8s ease-out 0.3s both;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Day separators (WhatsApp style) */
.day-separator {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 12px 0;
color: #334155;
font-size: 12px;
font-weight: 600;
}
.day-separator::before,
.day-separator::after {
content: "";
flex: 1;
height: 1px;
background: #e5e7eb;
}
/* Desktop: hide & disable the chatbot close button */
@media (min-width: 769px) {
#chatbot-close {
opacity: 0; /* make it invisible */
pointer-events: none; /* can't be clicked */
cursor: default; /* no hover hand */
}
}
@media (min-width: 769px) {
#chatbot-close {
display: none;
}
}
/* =========================
Standard Report (Calendar Modal)
========================= */
/* =========================
Standard Report
========================= */
/* ---------- Calendar modal version ONLY ---------- */
/* =========================================================
Standard Report
========================================================= */
/* ---------- Calendar modal version ONLY ---------- */
#calendar-modal .standard-report-strip{
margin: 12px auto 8px auto;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 12px;
background: rgba(255,255,255,0.08);
max-width: 520px;
text-align: center;
}
#calendar-modal .standard-report-btn{
background: #ffffff;
color: #101FA1;
border: none;
padding: 9px 14px;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
#calendar-modal .standard-report-btn:hover{
transform: translateY(-1px);
}
#calendar-modal .standard-report-subtext{
margin-top: 6px;
font-size: 12px;
color: rgba(255,255,255,0.85);
}
/* ---------- Sidebar version (EXACT MATCH with To-Do / Team Chat) ---------- */
/* IMPORTANT:
Your HTML uses: ...