.content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

@media (max-width: 768px) {
	.content-grid {
		grid-template-columns: 1fr;
	}

	.phone-col {
		order: -1;
	}
}

/* ---- Accordion Items ---- */
.feature-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.feature-item {
	position: relative;
	padding: 20px 0 20px 24px;
	cursor: pointer;
	/* border-bottom: 1px solid #e8eaed; */
	margin-bottom: 10px
}

/* Sidebar line track */
.feature-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: #e8eaed;
	border-radius: 2px;
}

/* Progress fill */
.feature-item .progress-line {
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 0%;
	background: #1a73e8;
	border-radius: 2px;
	transition: height 0.05s linear;
}

.feature-item.active .progress-line {
	background: #1a73e8;
}

.feature-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 16px;
	color: #5f6368;
	transition: color 0.2s;
	line-height: 1.4;
}

.feature-item.active .feature-title,
.feature-item:hover .feature-title {
	color: #202124;
}

.feature-body {
	display: none;
	margin-top: 10px;
	font-size: 1rem;
	color: #5f6368;
	line-height: 1.6;
	font-weight: 300;
}

.feature-item.active .feature-title {
	font-family: 'Jost-SemiBold', sans-serif;
	color: #202124;
}

.feature-item.active .feature-body {
	display: block;
}

/* ---- Phone mockup ---- */
.phone-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.phone-wrap {
	position: relative;
	/* width: 280px; */
}
.phone-wrap img{
	width: 100%;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
}

.phone-frame {
	background: #d2e3fc;
	border-radius: 28px;
	padding: 12px;
	box-shadow: 0 8px 40px rgba(26, 115, 232, 0.15);
}

.phone-inner {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
}

.phone-header {
	background: #fff;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid #f1f3f4;
}


.phone-inner .phone-header img {
	width: 70px;
}

.phone-header span {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 15px;
	color: #202124;
}

.inbox-label {
	padding: 6px 14px;
	font-size: 11px;
	color: #5f6368;
	font-weight: 500;
	letter-spacing: 0.5px;
}

.email-row {
	display: flex;
	align-items: flex-start;
	padding: 10px 14px;
	gap: 10px;
	border-bottom: 1px solid #f1f3f4;
	transition: background 0.2s;
}

.email-row.highlighted {
	background: #e8f0fe;
}

.avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 500;
	color: #fff;
}

.email-meta {
	flex: 1;
	min-width: 0;
}

.email-from {
	font-size: 12px;
	color: #202124;
	font-family: 'Jost-Medium';
}

.email-sub {
	font-size: 11px;
	font-weight: 500;
	color: #202124;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.email-prev {
	font-size: 11px;
	color: #5f6368;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.email-time {
	font-size: 10px;
	color: #5f6368;
	flex-shrink: 0;
}

/* warning badge */
.warning-badge {
	position: absolute;
	bottom: -10px;
	left: -20px;
	background: #fff;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	animation: floatBob 4s ease-in-out infinite;
}

.warning-badge svg {
	width: 28px;
	height: 28px;
}

/* lock icon */
.lock-icon2 {
	position: absolute;
	top: -24px;
	right: -30px;
	width: 80px;
	height: 80px;
	background: #d2e3fc;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
	animation: floatBob 4s ease-in-out infinite;
}

.lock-icon2 svg {
	width: 44px;
	height: 44px;
	fill: #4285F4;
}

.mail-messagecomposeSec .compose-btn {
	background: #0998c7;
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 12px;
	font-family: 'Jost-Medium', sans-serif;
	display: flex;
	align-items: center;
	gap: 4px;
}


/* calendar css start */


/* ---- Calendar Mockup ---- */
.calendar-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.cal-wrap {
	position: relative;
	width: 340px;
}

.cal-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* Header */
.cal-header {
	background: #fff;
	padding: 14px 16px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #f1f3f4;
}

.cal-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cal-logo {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid #e8eaed;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #1a73e8;
	font-family: 'Jost-SemiBold', sans-serif;
}

.cal-month-label {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 15px;
	color: #202124;
}

.cal-nav {
	display: flex;
	gap: 4px;
}

.cal-nav button {
	background: none;
	border: none;
	cursor: pointer;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #5f6368;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}

.cal-nav button:hover {
	background: #f1f3f4;
}

/* Day labels */
.cal-days-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding: 4px 12px 0;
}

.cal-day-label {
	text-align: center;
	font-size: 11px;
	color: #5f6368;
	font-weight: 500;
	padding: 4px 0;
	letter-spacing: 0.3px;
}

/* Grid */
.cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding: 4px 12px 12px;
	gap: 2px;
}

.cal-cell {
	position: relative;
	height: 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 4px;
	border-radius: 6px;
}

.cal-date {
	font-size: 12px;
	color: #202124;
	font-weight: 400;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.cal-cell.other-month .cal-date {
	color: #dadce0;
}

.cal-cell.today .cal-date {
	background: #1a73e8;
	color: #fff;
	font-weight: 700;
}

.cal-cell.has-event .cal-date {
	font-weight: 500;
}

/* Event dots */
.event-dots {
	display: flex;
	gap: 2px;
	margin-top: 2px;
}

.dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
}

/* Event bars (mini) */
.event-bar {
	position: absolute;
	bottom: 2px;
	left: 2px;
	right: 2px;
	height: 4px;
	border-radius: 2px;
	opacity: 0.85;
}

/* Event list panel */
.cal-events-panel {
	border-top: 1px solid #f1f3f4;
	padding: 10px 16px 14px;
}

.cal-events-date {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 13px;
	color: #5f6368;
	margin-bottom: 8px;
}

.cal-event-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 8px;
	margin-bottom: 4px;
	transition: background 0.2s;
}

.cal-event-item:hover {
	background: #f8f9fa;
}

.cal-event-color {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.cal-event-info {
	flex: 1;
}

.cal-event-name {
	font-size: 12px;
	font-weight: 500;
	color: #202124;
}

.cal-event-time {
	font-size: 11px;
	color: #5f6368;
}

/* Floating invite card */
.invite-card {
	position: absolute;
	top: -28px;
	right: -32px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	padding: 10px 14px;
	width: 160px;
	animation: float 3s ease-in-out infinite;
}

.invite-card-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 11px;
	color: #202124;
	margin-bottom: 4px;
}

.invite-card-detail {
	font-size: 10px;
	color: #5f6368;
	margin-bottom: 8px;
}

.invite-actions {
	display: flex;
	gap: 6px;
}

.invite-btn {
	font-size: 10px;
	font-family: 'Jost-Regular', sans-serif;
	padding: 3px 8px;
	border-radius: 12px;
	border: 1px solid #dadce0;
	background: #fff;
	color: #1a73e8;
	cursor: pointer;
}

.invite-btn.accept {
	background: #1a73e8;
	color: #fff;
	border-color: #1a73e8;
}

/* Meet reminder */
.meet-card {
	position: absolute;
	bottom: -22px;
	left: -32px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	padding: 10px 14px;
	width: 150px;
	display: flex;
	gap: 8px;
	align-items: center;
	animation: float2 4s ease-in-out infinite;
}

.meet-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #34A853;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.meet-icon svg {
	width: 18px;
	height: 18px;
	fill: #fff;
}

.meet-info {
	flex: 1;
}

.meet-label {
	font-size: 10px;
	font-family: 'Jost-SemiBold', sans-serif;
	color: #202124;
}

.meet-time {
	font-size: 10px;
	color: #5f6368;
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-6px);
	}
}

@keyframes float2 {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(5px);
	}
}

/* Highlighted row on active feature */
.cal-event-item.highlight-item {
	background: #e8f0fe;
}


/* calendar css start */
.mycustcal-section-wrapper {
	padding: 80px 0;
	background: var(--card-bg);
}

.mycustcal-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

@media (max-width: 768px) {
	.mycustcal-content-grid {
		grid-template-columns: 1fr;
	}

	.mycustcal-calendar-col {
		order: -1;
	}
}

/* ---- Accordion ---- */
.mycustcal-feature-list {
	display: flex;
	flex-direction: column;
}

.mycustcal-feature-item {
	position: relative;
	padding: 22px 0 22px 24px;
	cursor: pointer;
	margin-bottom: 10px;
	/* border-bottom: 1px solid #e8eaed; */
}

/* .mycustcal-feature-item:first-child { border-top: 1px solid #e8eaed; } */

.mycustcal-feature-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: #e8eaed;
	border-radius: 2px;
}

.mycustcal-feature-item .mycustcal-progress-line {
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 0%;
	background: #1a73e8;
	border-radius: 2px;
	transition: height 0.05s linear;
}

.mycustcal-feature-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 16px;
	color: #5f6368;
	transition: color 0.2s;
	line-height: 1.4;
}

.mycustcal-feature-item.mycustcal-active .mycustcal-feature-title {
	font-family: 'Jost-SemiBold', sans-serif;
	color: #202124;
}

.mycustcal-feature-item:hover:not(.mycustcal-active) .mycustcal-feature-title {
	color: #202124;
}

.mycustcal-feature-body {
	display: none;
	margin-top: 10px;
	font-size: 1rem;
	color: #5f6368;
	line-height: 1.7;
	font-weight: 300;
}

.mycustcal-feature-item.mycustcal-active .mycustcal-feature-body {
	display: block;
}

/* ---- Calendar Mockup ---- */
.mycustcal-calendar-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.mycustcal-cal-wrap {
	position: relative;
	/* width: 340px; */
}

.mycustcal-cal-wrap img{
	width: 100%;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgb(0 0 0 / 6%), 0 1px 6px rgba(0, 0, 0, 0.08);
}


.mycustcal-cal-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.mycustcal-cal-header {
	background: #fff;
	padding: 14px 16px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #f1f3f4;
}

.mycustcal-cal-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mycustcal-cal-logo {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid #e8eaed;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: #0998c7;
	font-family: 'Jost-Regular', sans-serif;
}

.mycustcal-cal-month-label {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 15px;
	color: #202124;
}

.mycustcal-cal-nav {
	display: flex;
	gap: 4px;
}

.mycustcal-cal-nav button {
	background: none;
	border: none;
	cursor: pointer;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #5f6368;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}

.mycustcal-cal-nav button:hover {
	background: #f1f3f4;
}

.mycustcal-cal-days-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding: 4px 12px 0;
}

.mycustcal-cal-day-label {
	text-align: center;
	font-size: 11px;
	color: #5f6368;
	font-weight: 500;
	padding: 4px 0;
	letter-spacing: 0.3px;
}

.mycustcal-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding: 4px 12px 12px;
	gap: 2px;
}

.mycustcal-cal-cell {
	position: relative;
	height: 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 4px;
	border-radius: 6px;
}

.mycustcal-cal-date {
	font-size: 12px;
	color: #202124;
	font-weight: 400;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.mycustcal-cal-cell.mycustcal-other-month .mycustcal-cal-date {
	color: #dadce0;
}

.mycustcal-cal-cell.mycustcal-today .mycustcal-cal-date {
	background: #0998c7;
	color: #fff;
	font-weight: 700;
}

.mycustcal-cal-cell.mycustcal-has-event .mycustcal-cal-date {
	font-weight: 500;
}

.mycustcal-event-dots {
	display: flex;
	gap: 2px;
	margin-top: 2px;
}

.mycustcal-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
}

.mycustcal-cal-events-panel {
	border-top: 1px solid #f1f3f4;
	padding: 10px 16px 14px;
}

.mycustcal-cal-events-date {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 13px;
	color: #5f6368;
	margin-bottom: 8px;
}

.mycustcal-cal-event-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 8px;
	margin-bottom: 4px;
	transition: background 0.2s;
}

.mycustcal-cal-event-item:hover {
	background: #f8f9fa;
}

.mycustcal-cal-event-color {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mycustcal-cal-event-info {
	flex: 1;
}

.mycustcal-cal-event-name {
	font-size: 12px;
	font-family: "Jost-Regular";
	color: #202124;
}

.mycustcal-cal-event-time {
	font-size: 11px;
	color: #5f6368;
}

/* Floating invite card */
.mycustcal-invite-card {
	position: absolute;
	top: -28px;
	right: -32px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	padding: 10px 14px;
	width: 160px;
	animation: mycustcal-float 3s ease-in-out infinite;
}

.mycustcal-invite-card-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 11px;
	color: #202124;
	margin-bottom: 4px;
}

.mycustcal-invite-card-detail {
	font-size: 10px;
	color: #5f6368;
	margin-bottom: 8px;
}

.mycustcal-invite-actions {
	display: flex;
	gap: 6px;
}

.mycustcal-invite-btn {
	font-size: 10px;
	font-family: 'Jost-Regular', sans-serif;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 12px;
	border: 1px solid #0998c7;
	background: #fff;
	color: #0998c7;
	cursor: pointer;
}

.mycustcal-invite-btn.mycustcal-accept {
	background: #0998c7;
	color: #fff;
	border-color: #0998c7;
}

/* Meet card */
.mycustcal-meet-card {
	position: absolute;
	bottom: -22px;
	left: -32px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	padding: 10px 14px;
	width: 155px;
	display: flex;
	gap: 8px;
	align-items: center;
	animation: mycustcal-float2 4s ease-in-out infinite;
}

.mycustcal-meet-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #09b4c7;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mycustcal-meet-icon svg {
	width: 18px;
	height: 18px;
	fill: #fff;
}

.mycustcal-meet-info {
	flex: 1;
}

.mycustcal-meet-label {
	font-size: 10px;
	font-family: 'Jost-Medium', sans-serif;
	color: #202124;
}

.mycustcal-meet-time {
	font-size: 10px;
	color: #5f6368;
}

@keyframes mycustcal-float {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-20px);
	}
}

@keyframes mycustcal-float2 {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-30px);
	}
}

.mycustcal-cal-event-item.mycustcal-highlight-item {
	background: #e8f0fe;
}


/* DRIVESECTION CSS START */


/* ===================== WRAPPER ===================== */

.mycustdrive-section-wrapper {
	padding: 80px 0;
	background: var(--white);
}

.mycustdrive-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

@media (max-width: 768px) {
	.mycustdrive-content-grid {
		grid-template-columns: 1fr;
	}

	.mycustdrive-mockup-col {
		order: -1;
	}
}

/* ===================== ACCORDION ===================== */
.mycustdrive-feature-list {
	display: flex;
	flex-direction: column;
}

.mycustdrive-feature-item {
	position: relative;
	padding: 22px 0 22px 24px;
	cursor: pointer;
	/* border-bottom: 1px solid #e8eaed; */
	margin-bottom: 10px;
}

.mycustdrive-feature-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: #e8eaed;
	border-radius: 2px;
}

.mycustdrive-feature-item .mycustdrive-progress-line {
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 0%;
	background: #1a73e8;
	border-radius: 2px;
	transition: height 0.05s linear;
}

.mycustdrive-feature-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 16px;
	color: #5f6368;
	line-height: 1.4;
	transition: color 0.2s;
}

.mycustdrive-feature-item.mycustdrive-active .mycustdrive-feature-title {
	font-family: 'Jost-SemiBold', sans-serif;
	color: #202124;
}

.mycustdrive-feature-item:hover:not(.mycustdrive-active) .mycustdrive-feature-title {
	color: #202124;
}

.mycustdrive-feature-body {
	display: none;
	margin-top: 10px;
	font-size: 14px;
	color: #5f6368;
	line-height: 1.7;
	font-weight: 300;
}

.mycustdrive-feature-item.mycustdrive-active .mycustdrive-feature-body {
	display: block;
}

/* ===================== MOCKUP ===================== */
.mycustdrive-mockup-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.mycustdrive-mockup-wrap {
	position: relative;
	/* width: 340px; */
}
.mycustdrive-mockup-wrap img{
	width: 100%;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
}

/* .mycustdrive-drive-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
} */

/* --- Drive Header --- */
.mycustdrive-drive-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #f1f3f4;
}

.mycustdrive-drive-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mycustdrive-drive-logo {
	width: 28px;
	height: 28px;
}

.mycustdrive-drive-logo svg {
	width: 28px;
	height: 28px;
}

.mycustdrive-drive-title {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 15px;
	color: #202124;
}

.mycustdrive-drive-search {
	display: flex;
	align-items: center;
	background: #f1f3f4;
	border-radius: 20px;
	padding: 5px 12px;
	gap: 6px;
	flex: 1;
	max-width: 160px;
}

.mycustdrive-drive-search svg {
	width: 14px;
	height: 14px;
	fill: #5f6368;
	flex-shrink: 0;
}

.mycustdrive-drive-search span {
	font-size: 12px;
	color: #5f6368;
}

/* --- Storage bar --- */
.mycustdrive-storage-bar-wrap {
	padding: 10px 16px 8px;
	border-bottom: 1px solid #f1f3f4;
}

.mycustdrive-storage-label {
	font-size: 11px;
	color: #5f6368;
	margin-bottom: 5px;
	display: flex;
	justify-content: space-between;
}

.mycustdrive-storage-track {
	height: 4px;
	background: #e8eaed;
	border-radius: 2px;
	overflow: hidden;
}

.mycustdrive-storage-fill {
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, #1a73e8 60%, #EA4335 60% 80%, #FBBC05 80%);
	width: 68%;
	transition: width 0.6s ease;
}

/* --- Tabs --- */
.mycustdrive-tabs {
	display: flex;
	gap: 0;
	padding: 0 16px;
	border-bottom: 1px solid #f1f3f4;
}

.mycustdrive-tab {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 12px;
	color: #5f6368;
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}

.mycustdrive-tab.mycustdrive-tab-active {
	color: #1a73e8;
	border-bottom-color: #1a73e8;
}

/* --- File list --- */
.mycustdrive-file-list {
	padding: 6px 0;
}

.mycustdrive-file-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px;
	transition: background 0.15s;
	border-radius: 4px;
}

.mycustdrive-file-row:hover {
	background: #f8f9fa;
}

.mycustdrive-file-row.mycustdrive-file-highlight {
	background: #e8f0fe;
}

.mycustdrive-file-icon {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mycustdrive-file-icon svg {
	width: 18px;
	height: 18px;
}

.mycustdrive-file-info {
	flex: 1;
	min-width: 0;
}

.mycustdrive-file-name {
	font-size: 13px;
	font-family: "Jost-Regular";
	color: #202124;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mycustdrive-file-meta {
	font-size: 10px;
	color: #5f6368;
}

.mycustdrive-file-size {
	font-size: 10px;
	color: #5f6368;
	flex-shrink: 0;
}

/* --- Bottom action bar --- */
.mycustdrive-action-bar {
	display: flex;
	gap: 8px;
	padding: 10px 16px;
	border-top: 1px solid #f1f3f4;
	text-align: end;
	justify-content: end;
}

.mycustdrive-action-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: 'Jost-Regular', sans-serif;
	font-size: 11px;
	padding: 5px 12px;
	border-radius: 16px;
	border: 1px solid #dadce0;
	background: #fff;
	color: #202124;
	cursor: pointer;
	transition: background 0.15s;
}

.mycustdrive-action-btn:hover {
	background: #f1f3f4;
}

.mycustdrive-action-btn.mycustdrive-btn-primary {
	background: #0998c7;
	color: #fff;
	border-color: #0998c7;
}

.mycustdrive-action-btn.mycustdrive-btn-primary:hover {
	background: #0181ab;
}

.mycustdrive-action-btn svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

/* ---- Floating share card ---- */
.mycustdrive-share-card {
	position: absolute;
	top: -30px;
	right: -36px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	padding: 10px 14px;
	width: 170px;
	animation: mycustdrive-float1 3s ease-in-out infinite;
}

.mycustdrive-share-card-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 0.7rem;
	text-align: center;
	/* font-weight: 600; */
	color: #202124;
	margin-bottom: 6px;
}

.mycustdrive-share-avatars {
	display: flex;
	gap: 4px;
	margin-bottom: 6px;
}

.mycustdrive-share-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	color: #fff;
}

.mycustdrive-share-input {
	background: #f1f3f4;
	border-radius: 8px;
	padding: 4px 8px;
	font-size: 10px;
	color: #5f6368;
	width: 100%;
}

/* ---- Floating upload card ---- */
.mycustdrive-upload-card {
	position: absolute;
	bottom: -24px;
	left: -36px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	padding: 10px 14px;
	width: 150px;
	animation: mycustdrive-float2 4s ease-in-out infinite;
}

.mycustdrive-upload-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 11px;
	color: #202124;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.mycustdrive-upload-bar-track {
	height: 4px;
	background: #e8eaed;
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 4px;
}

.mycustdrive-upload-bar-fill {
	height: 100%;
	background: #1a73e8;
	border-radius: 2px;
	width: 72%;
}

.mycustdrive-upload-sub {
	font-size: 10px;
	color: #5f6368;
}

.mycustdrive-drive-logo {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #0998c7;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes mycustdrive-float1 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-20px);
	}
}

@keyframes mycustdrive-float2 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(10px);
	}
}


/* for notes start */
.mycustnotes-section-wrapper {
	padding: 80px 0;
	background: var(--card-bg);
}

.mycustnotes-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

@media (max-width: 768px) {
	.mycustnotes-content-grid {
		grid-template-columns: 1fr;
	}

	.mycustnotes-mockup-col {
		order: -1;
	}
}

/* ===================== ACCORDION ===================== */
.mycustnotes-feature-list {
	display: flex;
	flex-direction: column;
}

.mycustnotes-feature-item {
	position: relative;
	padding: 22px 0 22px 24px;
	cursor: pointer;
	margin-bottom: 10px;
}


.mycustnotes-feature-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: #e8eaed;
	border-radius: 2px;
}

.mycustnotes-feature-item .mycustnotes-progress-line {
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 0%;
	background: #1a73e8;
	border-radius: 2px;
	transition: height 0.05s linear;
}

.mycustnotes-feature-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 16px;
	color: #5f6368;
	line-height: 1.4;
	transition: color 0.2s;
}

.mycustnotes-feature-item.mycustnotes-active .mycustnotes-feature-title {
	font-family: 'Jost-SemiBold', sans-serif;
	color: #202124;
}

.mycustnotes-feature-item:hover:not(.mycustnotes-active) .mycustnotes-feature-title {
	color: #202124;
}

.mycustnotes-feature-body {
	display: none;
	margin-top: 10px;
	font-size: 14px;
	color: #5f6368;
	line-height: 1.7;
	font-weight: 300;
}

.mycustnotes-feature-item.mycustnotes-active .mycustnotes-feature-body {
	display: block;
}

/* ===================== MOCKUP ===================== */
.mycustnotes-mockup-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.mycustnotes-mockup-wrap {
	position: relative;
	/* width: 340px; */
}

.mycustnotes-mockup-wrap img{
	width: 100%;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgb(0 0 0 / 6%), 0 1px 6px rgba(0, 0, 0, 0.08);
}

.mycustnotes-notes-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* --- Header --- */
.mycustnotes-notes-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #f1f3f4;
}

.mycustnotes-notes-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mycustnotes-notes-logo {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #0998c7;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mycustnotes-notes-logo svg {
	width: 18px;
	height: 18px;
	fill: #fff;
}

.mycustnotes-notes-app-title {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 15px;
	color: #202124;
}

.mycustnotes-notes-search {
	display: flex;
	align-items: center;
	background: #f1f3f4;
	border-radius: 20px;
	padding: 5px 12px;
	gap: 6px;
	max-width: 150px;
	flex: 1;
}

.mycustnotes-notes-search svg {
	width: 13px;
	height: 13px;
	fill: #5f6368;
	flex-shrink: 0;
}

.mycustnotes-notes-search span {
	font-size: 11px;
	color: #5f6368;
}

/* --- Label filters --- */
.mycustnotes-label-row {
	display: flex;
	gap: 6px;
	padding: 8px 16px;
	border-bottom: 1px solid #f1f3f4;
	overflow-x: auto;
}

.mycustnotes-label-chip {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 12px;
	border: 1px solid #dadce0;
	background: #fff;
	color: #5f6368;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.mycustnotes-label-chip.mycustnotes-chip-active {
	background: #fef7e0;
	color: #b06000;
	border-color: #fbbc04;
}

/* --- Notes grid --- */
.mycustnotes-notes-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 10px 12px 12px;
}

.mycustnotes-note-tile {
	border-radius: 10px;
	padding: 10px 12px;
	border: 1px solid #e8eaed;
	transition: box-shadow 0.2s, border-color 0.2s;
	cursor: pointer;
}

.mycustnotes-note-tile:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.mycustnotes-note-tile.mycustnotes-note-highlight {
	border-color: #0998c7;
	box-shadow: 0 0 0 2px #0997c764;
}

.mycustnotes-note-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 12px;
	color: #202124;
	margin-bottom: 4px;
}

.mycustnotes-note-body {
	font-size: 11px;
	color: #5f6368;
	line-height: 1.5;
}

.mycustnotes-note-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}

.mycustnotes-note-tag {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 8px;
	font-weight: 500;
}

.mycustnotes-note-pin {
	font-size: 12px;
	opacity: 0.5;
}

/* Checklist style */
.mycustnotes-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mycustnotes-checklist li {
	font-size: 11px;
	color: #5f6368;
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 3px;
}

.mycustnotes-check-box {
	width: 11px;
	height: 11px;
	border-radius: 3px;
	border: 1.5px solid #5f6368;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mycustnotes-check-box.mycustnotes-checked {
	background: #34A853;
	border-color: #34A853;
}

.mycustnotes-check-box.mycustnotes-checked::after {
	content: '✓';
	font-size: 8px;
	color: #fff;
}

.mycustnotes-check-done {
	text-decoration: line-through;
	opacity: 0.5;
}

/* --- Action bar --- */
.mycustnotes-action-bar {
	display: flex;
	gap: 8px;
	padding: 10px 16px;
	border-top: 1px solid #f1f3f4;
	align-items: center;
	justify-content: end;
}

.mycustnotes-fab {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'Jost-Medium', sans-serif;
	font-size: 12px;
	/* font-weight: 500; */
	padding: 6px 14px;
	border-radius: 20px;
	border: none;
	background: #0998c7;
	color: #ffffff;
	cursor: pointer;
	transition: background 0.15s;
}

.mycustnotes-fab:hover {
	background: #0781a9;
}

.mycustnotes-fab svg {
	width: 14px;
	height: 14px;
	fill: #ffffff;
}

.mycustnotes-view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #dadce0;
	background: #fff;
	cursor: pointer;
	transition: background 0.15s;
}

.mycustnotes-view-btn:hover {
	background: #f1f3f4;
}

.mycustnotes-view-btn svg {
	width: 14px;
	height: 14px;
	fill: #5f6368;
}

/* ---- Floating reminder card ---- */
.mycustnotes-reminder-card {
	position: absolute;
	top: -30px;
	right: -36px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	padding: 10px 14px;
	width: 162px;
	animation: mycustnotes-float1 3s ease-in-out infinite;
	z-index: 1;
}

.mycustnotes-reminder-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 11px;
	color: #202124;
	margin-bottom: 3px;
}

.mycustnotes-reminder-detail {
	font-size: 10px;
	color: #5f6368;
	margin-bottom: 7px;
}

.mycustnotes-reminder-btn {
	font-size: 10px;
	font-family: "Jost-Medium";
	/* font-weight: 500; */
	padding: 3px 10px;
	border-radius: 10px;
	border: none;
	background: #0998c7;
	color: #ffffff;
	cursor: pointer;
}

/* ---- Floating collab card ---- */
.mycustnotes-collab-card {
	position: absolute;
	bottom: -24px;
	left: -36px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	padding: 10px 14px;
	width: 185px;
	animation: mycustnotes-float2 4s ease-in-out infinite;
}

.mycustnotes-collab-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 11px;
	color: #202124;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.mycustnotes-collab-avatars {
	display: flex;
	gap: 4px;
}

.mycustnotes-collab-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	color: #fff;
}

.mycustnotes-collab-status {
	font-size: 10px;
	color: #737573;
	margin-top: 4px;
	font-weight: 500;
}

@keyframes mycustnotes-float1 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

@keyframes mycustnotes-float2 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(5px);
	}
}


/* tasks css start */
.mycusttasks-section-wrapper {
	padding: 80px 0px;
	background: var(--white);
}

.mycusttasks-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.mycusttasks-mockup-wrap img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
	.mycusttasks-content-grid {
		grid-template-columns: 1fr;
	}

	.mycusttasks-mockup-col {
		order: -1;
	}
}

/* ===================== ACCORDION ===================== */
.mycusttasks-feature-list {
	display: flex;
	flex-direction: column;
}

.mycusttasks-feature-item {
	position: relative;
	padding: 22px 0 22px 24px;
	cursor: pointer;
	margin-bottom: 10px;
}

/* .mycusttasks-feature-item:first-child { border-top: 1px solid #e8eaed; } */

.mycusttasks-feature-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: #e8eaed;
	border-radius: 2px;
}

.mycusttasks-feature-item .mycusttasks-progress-line {
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 0%;
	background: #1a73e8;
	border-radius: 2px;
	transition: height 0.05s linear;
}

.mycusttasks-feature-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 16px;
	color: #5f6368;
	line-height: 1.4;
	transition: color 0.2s;
}

.mycusttasks-feature-item.mycusttasks-active .mycusttasks-feature-title {
	font-family: 'Jost-SemiBold', sans-serif;
	;
	color: #202124;
}

.mycusttasks-feature-item:hover:not(.mycusttasks-active) .mycusttasks-feature-title {
	color: #202124;
}

.mycusttasks-feature-body {
	display: none;
	margin-top: 10px;
	font-size: 14px;
	color: #5f6368;
	line-height: 1.7;
	font-weight: 300;
}

.mycusttasks-feature-item.mycusttasks-active .mycusttasks-feature-body {
	display: block;
}

/* ===================== MOCKUP ===================== */
.mycusttasks-mockup-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.mycusttasks-mockup-wrap {
	position: relative;
	/* width: 340px; */
}

.mycusttasks-tasks-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* --- Header --- */
.mycusttasks-tasks-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #f1f3f4;
}

.mycusttasks-tasks-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mycusttasks-tasks-logo {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #0998c7;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mycusttasks-tasks-logo svg {
	width: 17px;
	height: 17px;
	fill: #fff;
}

.mycusttasks-tasks-app-title {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 15px;
	color: #202124;
}

.mycusttasks-tasks-header-right {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mycusttasks-header-icon-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s;
}

.mycusttasks-header-icon-btn:hover {
	background: #f1f3f4;
}

.mycusttasks-header-icon-btn svg {
	width: 16px;
	height: 16px;
	fill: #5f6368;
}

/* --- Progress summary bar --- */
.mycusttasks-progress-summary {
	padding: 10px 16px 8px;
	border-bottom: 1px solid #f1f3f4;
}

.mycusttasks-progress-labels {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
}

.mycusttasks-progress-label-text {
	font-size: 11px;
	color: #5f6368;
}

.mycusttasks-progress-label-count {
	font-size: 11px;
	font-weight: 600;
	color: #1a73e8;
}

.mycusttasks-progress-track {
	height: 5px;
	background: #e8eaed;
	border-radius: 3px;
	overflow: hidden;
}

.mycusttasks-progress-fill {
	height: 100%;
	background: #0998c7;
	border-radius: 3px;
	width: 0%;
	transition: width 0.8s ease;
}

/* --- List tabs --- */
.mycusttasks-list-tabs {
	display: flex;
	gap: 0;
	padding: 0 16px;
	border-bottom: 1px solid #f1f3f4;
	overflow-x: auto;
}

.mycusttasks-list-tab {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 12px;
	color: #5f6368;
	padding: 8px 11px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color 0.2s, border-color 0.2s;
}

.mycusttasks-list-tab.mycusttasks-tab-active {
	color: #0998c7;
	border-bottom-color: #0998c7;
}

/* --- Task list --- */
.mycusttasks-task-list {
	padding: 6px 0;
	max-height: 240px;
	overflow-y: auto;
}

.mycusttasks-task-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 16px;
	border-radius: 4px;
	transition: background 0.15s;
	cursor: pointer;
}

.mycusttasks-task-row:hover {
	background: #f8f9fa;
}

.mycusttasks-task-row.mycusttasks-task-highlight {
	background: #e8f0fe;
}

.mycusttasks-task-checkbox {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #5f6368;
	flex-shrink: 0;
	margin-top: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s, background 0.2s;
}

.mycusttasks-task-checkbox.mycusttasks-checkbox-done {
	background: #0998c7;
	border-color: #0998c7;
}

.mycusttasks-task-checkbox.mycusttasks-checkbox-done::after {
	content: '';
	width: 5px;
	height: 9px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg) translateY(-1px);
	display: block;
}

.mycusttasks-task-info {
	flex: 1;
	min-width: 0;
}

.mycusttasks-task-name {
	font-size: 13px;
	font-weight: 500;
	color: #202124;
	line-height: 1.4;
}

.mycusttasks-task-name.mycusttasks-task-done-text {
	color: #9aa0a6;
	font-weight: 400;
}

.mycusttasks-task-sub {
	font-size: 11px;
	color: #5f6368;
	margin-top: 1px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.mycusttasks-task-sub svg {
	width: 10px;
	height: 10px;
	fill: #5f6368;
	flex-shrink: 0;
}

.mycusttasks-task-badge {
	font-size: 9px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 8px;
	flex-shrink: 0;
	align-self: center;
}

/* Subtask indent */
.mycusttasks-subtask-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 16px 5px 44px;
	transition: background 0.15s;
	cursor: pointer;
}

.mycusttasks-subtask-row:hover {
	background: #f8f9fa;
}

.mycusttasks-subtask-checkbox {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1.5px solid #9aa0a6;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mycusttasks-subtask-checkbox.mycusttasks-sub-done {
	background: #34A853;
	border-color: #34A853;
}

.mycusttasks-subtask-checkbox.mycusttasks-sub-done::after {
	content: '';
	width: 4px;
	height: 7px;
	border: 1.5px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg) translateY(-1px);
	display: block;
}

.mycusttasks-subtask-name {
	font-size: 11px;
	color: #5f6368;
}

.mycusttasks-subtask-name.mycusttasks-sub-done-text {
	text-decoration: line-through;
	color: #9aa0a6;
}

/* Section divider */
.mycusttasks-section-divider {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px 4px;
}

.mycusttasks-divider-label {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 11px;
	color: #9aa0a6;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.mycusttasks-divider-line {
	flex: 1;
	height: 1px;
	background: #f1f3f4;
}

/* --- Action bar --- */
.mycusttasks-action-bar {
	display: flex;
	gap: 8px;
	padding: 10px 16px;
	border-top: 1px solid #f1f3f4;
	align-items: center;
}

.mycusttasks-add-task-input {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f1f3f4;
	border-radius: 20px;
	padding: 6px 14px;
	cursor: text;
}

.mycusttasks-add-task-input svg {
	width: 14px;
	height: 14px;
	fill: #5f6368;
	flex-shrink: 0;
}

.mycusttasks-add-task-input span {
	font-size: 12px;
	color: #9aa0a6;
}

.mycusttasks-add-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: #0998c7;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s;
}

.mycusttasks-add-btn:hover {
	background: #027298;
}

.mycusttasks-add-btn svg {
	width: 16px;
	height: 16px;
	fill: #fff;
}

/* ---- Floating due-date card ---- */
.mycusttasks-due-card {
	position: absolute;
	top: -30px;
	right: -36px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	padding: 10px 14px;
	width: 162px;
	animation: mycusttasks-float1 3s ease-in-out infinite;
	z-index: 1;
}

.mycusttasks-due-card-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 11px;
	color: #202124;
	margin-bottom: 3px;
}

.mycusttasks-due-card-detail {
	font-size: 10px;
	color: #5f6368;
	margin-bottom: 7px;
}

.mycusttasks-due-card-actions {
	display: flex;
	gap: 5px;
}

.mycusttasks-due-btn {
	font-size: 10px;
	font-family: 'Jost-Medium', sans-serif;
	padding: 3px 8px;
	border-radius: 10px;
	border: 1px solid #0998c7;
	background: #fff;
	color: #0998c7;
	cursor: pointer;
}

.mycusttasks-due-btn.mycusttasks-due-btn-primary {
	background: #0998c7;
	color: #fff;
	border-color: #0998c7;
}

/* ---- Floating streak card ---- */
.mycusttasks-streak-card {
	position: absolute;
	bottom: -24px;
	left: -66px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	padding: 10px 14px;
	width: 158px;
	animation: mycusttasks-float2 4s ease-in-out infinite;
}

.mycusttasks-streak-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 11px;
	color: #202124;
	margin-bottom: 4px;
}

.mycusttasks-streak-dots {
	display: flex;
	gap: 4px;
	margin-bottom: 4px;
}

.mycusttasks-streak-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.mycusttasks-streak-sub {
	font-size: 10px;
	color: #5f6368;
}

@keyframes mycusttasks-float1 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

@keyframes mycusttasks-float2 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(5px);
	}
}

/* scrollbar */
.mycusttasks-task-list::-webkit-scrollbar {
	width: 4px;
}

.mycusttasks-task-list::-webkit-scrollbar-thumb {
	background: #e8eaed;
	border-radius: 2px;
}


/* addressbook css start */
.mycustaddressbook-section-wrapper {
	padding: 80px 0px;
	background: var(--card-bg);
}

.mycustaddressbook-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

@media (max-width: 768px) {
	.mycustaddressbook-content-grid {
		grid-template-columns: 1fr;
	}

	.mycustaddressbook-mockup-col {
		order: -1;
	}
}

/* ===================== ACCORDION ===================== */
.mycustaddressbook-feature-list {
	display: flex;
	flex-direction: column;
}

.mycustaddressbook-feature-item {
	position: relative;
	padding: 22px 0 22px 24px;
	cursor: pointer;
	margin-bottom: 10px;
}

.mycustaddressbook-feature-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: #e8eaed;
	border-radius: 2px;
}

.mycustaddressbook-feature-item .mycustaddressbook-progress-line {
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 0%;
	background: #1a73e8;
	border-radius: 2px;
	transition: height 0.05s linear;
}

.mycustaddressbook-feature-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #5f6368;
	line-height: 1.4;
	transition: color 0.2s;
}

.mycustaddressbook-feature-item.mycustaddressbook-active .mycustaddressbook-feature-title {
	font-family: 'Jost-SemiBold', sans-serif;
	color: #202124;
}

.mycustaddressbook-feature-item:hover:not(.mycustaddressbook-active) .mycustaddressbook-feature-title {
	color: #202124;
}

.mycustaddressbook-feature-body {
	display: none;
	margin-top: 10px;
	font-size: 14px;
	color: #5f6368;
	line-height: 1.7;
	font-weight: 300;
}

.mycustaddressbook-feature-item.mycustaddressbook-active .mycustaddressbook-feature-body {
	display: block;
}

/* ===================== MOCKUP ===================== */
.mycustaddressbook-mockup-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.mycustaddressbook-mockup-wrap {
	position: relative;
	/* width: 340px; */
}

.mycustaddressbook-mockup-wrap img{
	width: 100%;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
}

/* .mycustaddressbook-contacts-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
} */

/* --- Header --- */
.mycustaddressbook-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #f1f3f4;
}

.mycustaddressbook-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mycustaddressbook-app-logo {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #0998c7;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mycustaddressbook-app-logo svg {
	width: 17px;
	height: 17px;
	fill: #fff;
}

.mycustaddressbook-app-title {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 15px;
	color: #202124;
}

.mycustaddressbook-search-bar {
	display: flex;
	align-items: center;
	background: #f1f3f4;
	border-radius: 20px;
	padding: 5px 12px;
	gap: 6px;
	max-width: 150px;
	flex: 1;
}

.mycustaddressbook-search-bar svg {
	width: 13px;
	height: 13px;
	fill: #5f6368;
	flex-shrink: 0;
}

.mycustaddressbook-search-bar span {
	font-size: 11px;
	color: #5f6368;
}

/* --- Filter tabs --- */
.mycustaddressbook-filter-tabs {
	display: flex;
	padding: 0 16px;
	border-bottom: 1px solid #f1f3f4;
	overflow-x: auto;
}

.mycustaddressbook-filter-tab {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 12px;
	color: #5f6368;
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color 0.2s, border-color 0.2s;
}

.mycustaddressbook-filter-tab.mycustaddressbook-tab-active {
	color: #0998c7;
	border-bottom-color: #0998c7;
}

/* --- Contact list --- */
.mycustaddressbook-contact-list {
	padding: 4px 0;
	max-height: 260px;
	overflow-y: auto;
}

.mycustaddressbook-contact-list::-webkit-scrollbar {
	width: 4px;
}

.mycustaddressbook-contact-list::-webkit-scrollbar-thumb {
	background: #e8eaed;
	border-radius: 2px;
}

/* Alpha divider */
.mycustaddressbook-alpha-divider {
	padding: 4px 16px 2px;
	font-family: 'Jost-Medium', sans-serif;
	font-size: 11px;
	color: #34A853;
	letter-spacing: 0.5px;
}

/* Contact row */
.mycustaddressbook-contact-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	cursor: pointer;
	transition: background 0.15s;
}

.mycustaddressbook-contact-row:hover {
	background: #f8f9fa;
}

.mycustaddressbook-contact-row.mycustaddressbook-contact-highlight {
	background: #e6f4ea;
}

.mycustaddressbook-contact-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Jost-Medium', sans-serif;
	font-size: 14px;
	color: #fff;
	flex-shrink: 0;
}

.mycustaddressbook-contact-info {
	flex: 1;
	min-width: 0;
}

.mycustaddressbook-contact-name {
	font-size: 13px;
	font-family: "Jost-Regular";
	color: #202124;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mycustaddressbook-contact-detail {
	font-size: 11px;
	color: #5f6368;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mycustaddressbook-contact-actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

.mycustaddressbook-contact-icon-btn {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s;
}

.mycustaddressbook-contact-icon-btn:hover {
	background: #e8eaed;
}

.mycustaddressbook-contact-icon-btn svg {
	width: 14px;
	height: 14px;
	fill: #5f6368;
}

/* Star favourite */
.mycustaddressbook-star {
	fill: #FBBC05 !important;
}

/* --- Contact detail panel --- */
.mycustaddressbook-detail-panel {
	border-top: 1px solid #f1f3f4;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 72px;
	transition: background 0.3s;
}

.mycustaddressbook-detail-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Jost-Medium', sans-serif;
	font-size: 18px;
	color: #fff;
	flex-shrink: 0;
}

.mycustaddressbook-detail-info {
	flex: 1;
	min-width: 0;
}

.mycustaddressbook-detail-name {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 14px;
	color: #202124;
}

.mycustaddressbook-detail-sub {
	font-size: 11px;
	color: #5f6368;
	margin-top: 1px;
}

.mycustaddressbook-detail-chips {
	display: flex;
	gap: 5px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.mycustaddressbook-detail-chip {
	font-size: 10px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 8px;
	border: 1px solid #dadce0;
	color: #5f6368;
	background: #fff;
}

.mycustaddressbook-detail-btns {
	display: flex;
	gap: 5px;
	flex-shrink: 0;
}

.mycustaddressbook-detail-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: 'Jost-Regular', sans-serif;
	font-size: 11px;
	padding: 5px 10px;
	border-radius: 14px;
	border: 1px solid #dadce0;
	background: #fff;
	color: #202124;
	cursor: pointer;
	transition: background 0.15s;
}

.mycustaddressbook-detail-btn:hover {
	background: #f1f3f4;
}

.mycustaddressbook-detail-btn svg {
	width: 12px;
	height: 12px;
	fill: #34A853;
}

/* --- Action bar --- */
.mycustaddressbook-action-bar {
	display: flex;
	gap: 8px;
	padding: 10px 16px;
	border-top: 1px solid #f1f3f4;
	align-items: center;
	justify-content: end;
}

.mycustaddressbook-add-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'Jost-Regular', sans-serif;
	font-size: 12px;
	padding: 6px 16px;
	border-radius: 20px;
	border: none;
	background: #0998c7;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;
}

.mycustaddressbook-add-btn:hover {
	background: #2d9144;
}

.mycustaddressbook-add-btn svg {
	width: 14px;
	height: 14px;
	fill: #fff;
}

.mycustaddressbook-import-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: 'Jost-Regular', sans-serif;
	font-size: 12px;
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid #dadce0;
	background: #fff;
	color: #202124;
	cursor: pointer;
	transition: background 0.15s;
}

.mycustaddressbook-import-btn:hover {
	background: #f1f3f4;
}

.mycustaddressbook-import-btn svg {
	width: 13px;
	height: 13px;
	fill: #5f6368;
}

/* ---- Floating sync card ---- */
.mycustaddressbook-sync-card {
	position: absolute;
	top: -30px;
	right: -36px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	padding: 10px 14px;
	width: 162px;
	animation: mycustaddressbook-float1 3s ease-in-out infinite;
	z-index: 1;
}

.mycustaddressbook-sync-title {
	font-family: 'Jost-Medium', sans-serif;
	font-size: 11px;
	color: #202124;
	margin-bottom: 3px;
}

.mycustaddressbook-sync-detail {
	font-size: 10px;
	color: #5f6368;
	margin-bottom: 6px;
}

.mycustaddressbook-sync-progress-track {
	height: 4px;
	background: #e8eaed;
	border-radius: 2px;
	overflow: hidden;
}

.mycustaddressbook-sync-progress-fill {
	height: 100%;
	background: #0998c7;
	border-radius: 2px;
	width: 0%;
	transition: width 0.4s ease;
}

/* ---- Floating merge card ---- */
.mycustaddressbook-merge-card {
	position: absolute;
	bottom: -24px;
	left: -36px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	padding: 10px 14px;
	width: 160px;
	animation: mycustaddressbook-float2 4s ease-in-out infinite;
}

.mycustaddressbook-merge-title {
	font-family: 'Jost-medium', sans-serif;
	font-size: 11px;
	color: #202124;
	margin-bottom: 5px;
}

.mycustaddressbook-merge-row {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 5px;
}

.mycustaddressbook-merge-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	color: #fff;
}

.mycustaddressbook-merge-arrow {
	font-size: 12px;
	color: #34A853;
}

.mycustaddressbook-merge-label {
	font-size: 10px;
	color: #5f6368;
}

.mycustaddressbook-merge-btn {
	font-size: 10px;
	font-family: 'Jost-Regular', sans-serif;
	padding: 3px 10px;
	border-radius: 10px;
	border: none;
	background: #0998c7;
	color: #fff;
	cursor: pointer;
	width: 100%;
}

@keyframes mycustaddressbook-float1 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

@keyframes mycustaddressbook-float2 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(5px);
	}
}


/* ai assistant */
.mycustaiassistant-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.mycustaiassistant-mockup-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}


.mycustaiassistant-mockup-wrap {
	position: relative;
	width: 340px;
}

.mycustaiassistant-contacts-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* --- Header --- */
.mycustaiassistant-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #f1f3f4;
}

.mycustaiassistant-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mycustaiassistant-app-logo {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #0998c7;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mycustaiassistant-app-logo svg {
	width: 17px;
	height: 17px;
	fill: #fff;
}

.mycustaiassistant-app-title {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 15px;
	color: #202124;
}

.mycustaiassistant-action-bar {
	display: flex;
	gap: 8px;
	padding: 10px 16px;
	border-top: 1px solid #f1f3f4;
	align-items: center;
	justify-content: end;
}

.mycustaiassistant-add-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'Jost-Regular', sans-serif;
	font-size: 12px;
	border-radius: 20px;
	border: none;
	background: #0998c7;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;
	height: 31px;
	width: 31px;
	display: flex;
}

.mycustaiassistant-add-btn i {
	width: 14px;
	height: 14px;
	fill: #fff;
	margin: auto;
}

.mycustaiassistant-import-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: 'Jost-Regular', sans-serif;
	font-size: 12px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid #dadce0;
	background: #fff;
	color: #202124;
	cursor: pointer;
	transition: background 0.15s;
	transition: 0.2s ease;
}

.mycustaiassistant-merge-card {
	text-align: center;
	position: absolute;
	bottom: 66px;
	left: -76px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	padding: 10px 14px;
	width: 153px;
	animation: mycustaiassistant-float2 4s ease-in-out infinite;
}

.mycustaiassistant-merge-title {
	font-family: 'Jost-medium', sans-serif;
	font-size: 12px;
	color: #202124;
	margin-bottom: 5px;
}

.mycustaiassistant-merge-row {
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
}

.mycustaiassistant-merge-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	color: #fff;
}

.mycustaiassistant-imput-bar {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid #d5d5d5;
	border-radius: 20px;
	padding: 5px 12px;
	gap: 6px;
	flex: 1;
	width: 100%;
	height: 31px;
	position: relative;
}

.mycustaiassistant-imput-bar span.demotxts {
	font-size: 12px;
	color: #424344;
}

.mycustaiassistant-imput-bar span.voiceIcns {
	height: 25px;
	width: 25px;
	display: flex;
	position: absolute;
	right: 2px;
	background: #f3f3f3;
	border-radius: 50px;
}

.mycustaiassistant-imput-bar span.voiceIcns i {
	margin: auto;
	color: #5e5c5c;
	font-size: 0.9rem;
}

.mycustaiassistant-message-list {
	padding: 10px;
	height: 260px;
	font-family: "Jost-Regular";
	/* max-height: 260px; */
	overflow-y: auto;
	background: linear-gradient(to top, #ffffffeb, #ffffffeb), url(../images/aicatbg.jpg);
	background-position: center;
	background-size: cover;
}

.mycustaiassistant-message-list .messageTextBox {

	text-align: right;
	width: 90%;
	font-size: 11px;
	color: #5f6368;
}


.mycustaiassistant-message-list .messageTextBox.rightMsg {
	margin-left: auto;
	background-color: #ddf4ff;
	color: #242424;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 28px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 7px 13px;
	font-family: 'Jost-Regular';
}

.mycustaiassistant-message-list .messageTextBox.leftMsg {
	margin-right: auto;
	background-color: #f5f5f5;
	color: #333;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 18px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 7px 13px;
	font-family: 'Jost-Regular';
	text-align: left;
	margin-top: 10px;
}

.mycustaiassistant-infos {
	font-family: 'Jost-Regular';
	font-size: 11px;
	color: #5c5c5c;
}

/* Cursor */
.cursordr {
	display: inline-block;
	width: 2px;
	background: #555;
	/* margin-left: 3px; */
	animation: blink 0.8s infinite;
	height: 12px;
	vertical-align: bottom;
}

@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes mycustaiassistant-float1 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

@keyframes mycustaiassistant-float2 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(15px);
	}
}

@media (max-width: 768px) {
	.mycustaiassistant-content-grid {
		grid-template-columns: 1fr;
	}

	.mycustaiassistant-mockup-col {
		order: -1;
	}
}


/* Advanced Search CSS Start */
.advancedsearchSec {
	padding: 80px 0;
	background: var(--card-bg);
}

/* ai assistant */
.myadvancedsearch-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.myadvancedsearch-mockup-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}


.myadvancedsearch-mockup-wrap {
	position: relative;
	width: 340px;
}

.myadvancedsearch-contacts-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* --- Header --- */
.myadvancedsearch-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #f1f3f4;
}

.myadvancedsearch-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.myadvancedsearch-app-logo {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #0998c7;
	display: flex;
	align-items: center;
	justify-content: center;
}

.myadvancedsearch-app-logo svg {
	width: 17px;
	height: 17px;
	fill: #fff;
}

.myadvancedsearch-app-title {
	font-family: 'Jost-Regular', sans-serif;
	font-size: 15px;
	color: #202124;
}

.myadvancedsearch-action-bar {
	display: flex;
	gap: 8px;
	padding: 10px 16px;
	border-top: 1px solid #f1f3f4;
	align-items: center;
	justify-content: end;
}

.myadvancedsearch-add-btn {
	padding: 10px 15px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'Jost-Regular', sans-serif;
	font-size: 12px;
	border-radius: 20px;
	border: none;
	background: #0998c7;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;
	height: 30px;
	display: flex;
}

.myadvancedsearch-add-btn i {
	width: 14px;
	height: 14px;
	fill: #fff;
	margin: auto;
}

.myadvancedsearch-import-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: 'Jost-Regular', sans-serif;
	font-size: 12px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid #dadce0;
	background: #fff;
	color: #202124;
	cursor: pointer;
	transition: background 0.15s;
	transition: 0.2s ease;
}

.myadvancedsearch-merge-card {
	text-align: center;
	position: absolute;
	bottom: -4px;
	left: -76px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	padding: 10px 14px;
	width: 153px;
	animation: myadvancedsearch-float2 4s ease-in-out infinite;
}

.myadvancedsearch-merge-title {
	font-family: 'Jost-medium', sans-serif;
	font-size: 12px;
	color: #202124;
	margin-bottom: 5px;
}

.myadvancedsearch-merge-row {
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
}

.myadvancedsearch-merge-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	color: #fff;
}


.advancedsearchSec .myadvancedsearch-contacts-card .myadvancedsearchBody {
	padding: 10px;
}

.advancedsearchSec .myadvancedsearch-contacts-card .myadvancedsearchBody .myadvancedsearchFlexed {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 8px;
}

.advancedsearchSec .myadvancedsearch-contacts-card .myadvancedsearchBody .myadvancedsearchFlexed2 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}


.advancedsearchSec .myadvancedsearch-contacts-card .myadvancedsearchBody .advSearchField {
	margin-bottom: 10px;
	font-family: 'Jost-Regular';
	font-size: 12px;
	border-bottom: 1px solid #d9d9d9;
	color: #858585;
	padding-bottom: 3px;
}

.advancedsearchSec .myadvancedsearch-contacts-card .myadvancedsearchBody .advSearchField2 {
	margin-bottom: 10px;
	font-family: 'Jost-Regular';
	font-size: 12px;
	color: #1a1a1a;
	padding-bottom: 3px;
}

.advancedsearchSec .myadvancedsearch-features-col ul li i {
	color: #0068b4;
}

.advancedsearchSec .myadvancedsearch-features-col ul li span,
.ai-assistantSec .mycustaiassistant-features-col ul li span {
	font-family: "Jost-Medium";
}

.advancedsearchSec .myadvancedsearch-features-col ul li,
.ai-assistantSec ul li {
	margin-bottom: 7px;
}

.myadvancedsearch-infos {
	font-family: 'Jost-Regular';
	font-size: 11px;
	color: #5c5c5c;
}

/* Cursor */
.cursordr {
	display: inline-block;
	width: 2px;
	background: #555;
	/* margin-left: 3px; */
	animation: blink 0.8s infinite;
	height: 12px;
	vertical-align: bottom;
}

@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes myadvancedsearch-float1 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

@keyframes myadvancedsearch-float2 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(15px);
	}
}

@media (max-width: 768px) {
	.myadvancedsearch-content-grid {
		grid-template-columns: 1fr;
	}

	.myadvancedsearch-mockup-col {
		order: -1;
	}
}


/* Advanced Search CSS End */


/* Sync Search CSS Start */
.custsyncSec {
	padding: 80px 0;
	background: var(--white);
}

.custsyncSec ul li {
	margin-bottom: 7px;
}

.mycustsync-features-col ul li span {
	font-family: "Jost-Medium";
}

.custsyncSec ul li i {
	color: #0068b4;
}

/* ai assistant */
.mycustsync-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

@media (max-width: 768px) {
	.mycustsync-content-grid {
		grid-template-columns: 1fr;
	}

	.mycustsync-mockup-col {
		order: -1;
	}
}

.mycustsync-mockup-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}


.mycustsync-mockup-wrap {
	position: relative;
	/* width: 340px; */
}

.mycustsync-contacts-card {
	background: #fff;
	padding: 20px;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;
}

/* --- Header --- */
.mycustsync-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #f1f3f4;
}

.mycustsync-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.custsyncSec .myadvancedsearch-contacts-card .myadvancedsearchBody {
	padding: 10px;
}

.custsyncSec .myadvancedsearch-contacts-card .myadvancedsearchBody .myadvancedsearchFlexed {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 8px;
}

.custsyncSec .myadvancedsearch-contacts-card .myadvancedsearchBody .myadvancedsearchFlexed2 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}


.custsyncSec .myadvancedsearch-contacts-card .myadvancedsearchBody .advSearchField {
	margin-bottom: 10px;
	font-family: 'Jost-Regular';
	font-size: 12px;
	border-bottom: 1px solid #d9d9d9;
	color: #858585;
	padding-bottom: 3px;
}

.custsyncSec .myadvancedsearch-contacts-card .myadvancedsearchBody .advSearchField2 {
	margin-bottom: 10px;
	font-family: 'Jost-Regular';
	font-size: 12px;
	color: #1a1a1a;
	padding-bottom: 3px;
}

.custsyncSec .myadvancedsearch-features-col ul li i {
	color: #0068b4;
}

.custsyncSec .myadvancedsearch-features-col ul li span,
.ai-assistantSec .mycustaiassistant-features-col ul li span {
	font-family: "Jost-Medium";
}

.custsyncSec .myadvancedsearch-features-col ul li,
.ai-assistantSec ul li {
	margin-bottom: 7px;
}

.myadvancedsearch-infos {
	font-family: 'Jost-Regular';
	font-size: 11px;
	color: #5c5c5c;
}


.sz-visual {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	padding: 20px;
	overflow: hidden;
}

.sz-visual-title {
	font-size: 12px;
	font-family: 'Jost-Medium', sans-serif;
	color: #0068b4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 20px;
	text-align: center;
}

.sz-hub {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.sz-orbit-node {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	padding: 12px 8px;
	text-align: center;
	font-size: 12px;
	color: #8892a8;
	font-weight: 500;
	transition: border-color 0.2s, color 0.2s;
}

.sz-devices {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.sz-device-badge {
	flex: 1;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 10px 6px;
	text-align: center;
	font-size: 11px;
	color: #6b7589;
}

.sz-device-badge {
	flex: 1;
	background: rgb(247 249 255);
	border: 1px solid rgb(208 243 255);
	border-radius: 8px;
	padding: 10px 6px;
	text-align: center;
	font-size: 11px;
	color: #363636;
	width: 55px;
}

.sz-center-node {
	background: linear-gradient(to left, #0076bf, #0998c7);
	border-radius: 8px;
	padding: 7px 17px;
	font-size: 15px;
	font-family: 'Jost-Medium', sans-serif;
	color: #fff;
	text-align: center;
	position: relative;
	z-index: 2;
	box-shadow: 0 0 30px rgba(64, 120, 255, 0.25);
}

.sz-center-label {
	font-size: 11px;
	opacity: 0.8;
	display: block;
	margin-top: 2px;
}

.sz-connectors {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 0;
	position: relative;
}

.sz-conn-line {
	flex: 1;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(64, 120, 255, 0.4), transparent);
	position: relative;
	overflow: hidden;
}

.sz-conn-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, #0068b4, transparent);
	animation: flow 2s ease-in-out infinite;
}

.sz-status-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	color: #0068b4;
	margin-top: 20px;
	background: rgb(247 253 255);
	border: 1px solid rgb(159 230 255);
	border-radius: 8px;
	padding: 8px 14px;
}

.sz-orbit-node {
	background: rgb(247 249 255);
	border: 1px solid rgb(208 243 255);
	border-radius: 10px;
	padding: 12px 8px;
	text-align: center;
	font-size: 12px;
	color: #363636;
	transition: border-color 0.2s, color 0.2s;
}

.sz-orbit-node .on-icon {
	font-size: 18px;
	display: block;
	margin-bottom: 4px;
}

.sz-device-badge svg {
	display: block;
	margin: 0 auto 5px;
	opacity: 0.6;
}

.sz-sync-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #0068b4;
	margin-right: 5px;
	animation: pulsre 1.5s ease-in-out infinite;
}

@keyframes pulsre {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.5;
		transform: scale(0.7);
	}
}

@keyframes flow {
	0% {
		left: -60%;
	}

	100% {
		left: 160%;
	}
}


/* migration css start */
.mailmigrations {
	padding: 80px 0;
	background: var(--card-bg);
}

.mailmigrations-content-grid {
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: 64px;
	align-items: center;
}

.mailmigrations ul li {
	margin-bottom: 7px;
}

.mailmigrations ul li span {
	font-family: 'Jost-Medium', sans-serif;
}

.mailmigrations-content-grid .mailmigrations-mockup-col {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.mailmigrations-mockup-wrap {
	position: relative;
}
.mailmigrations-mockup-wrap img{
	width: 100%;;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
	.mailmigrations-content-grid {
		grid-template-columns: 1fr;
	}

	.mailmigrations-mockup-col {
		order: -1;
	}
}

.mailmigrations-content-grid .mailmigrations-mockup-col .mailmigrations-mockup-wrap .mailmigrations-contacts-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.mailmigrations-mockup-col ul li span {
	font-family: "Jost-Medium";
}

.mailmigrations ul li i {
	color: #0068b4;
}


.mailmigrations-mockup-wrap img{
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
}

/* --- Migration wizard visual --- */

.mig-wiz-header {
	background: #f0f2f8;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.mig-wiz-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.mig-wiz-title {
	font-size: 13px;
	color: #464a53;
	margin-left: 4px;
}

.mig-wiz-body {
	padding: 20px;
}

.mig-steps {
	display: flex;
	align-items: center;
	gap: 0;
	margin-top: 24px;
	margin-bottom: 10px;
}

.mig-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
}

.mig-step-circle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	color: #fff;
}

.step-done {
	background: #08b2c6;
	color: #fff;
}

.step-active {
	background: #4d88ff;
	color: #fff;
	box-shadow: 0 0 0 3px rgba(77, 136, 255, 0.2);
	animation: pulsre 1.5s ease-in-out infinite;
}

.step-pending {
	background: rgb(234 239 255);
	color: #5b5e64;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.mig-step-label {
	font-size: 10px;
	color: #6b7589;
	text-align: center;
	font-weight: 500;
}

/* .mig-step-label.active-lbl { color: #4d88ff; } */

.mig-step-line {
	flex: 1;
	height: 2px;
	background: rgb(221 221 221 / 96%);
	margin-bottom: 18px;
	position: relative;
	overflow: hidden;
}

.mig-step-line.filled {
	background: rgba(0, 200, 150, 0.4);
}

.mig-step-line.active-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgb(0 62 187), transparent);
	animation: lineanim 2s ease-in-out infinite;
}

@keyframes lineanim {
	0% {
		left: -60%
	}

	100% {
		left: 160%
	}
}

/* source cards */
.mig-sources {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 16px;
}

.mig-src {
	background: rgb(241 244 255);
	border: 1px solid rgb(212 226 255);
	border-radius: 10px;
	padding: 12px 8px;
	text-align: center;
	font-size: 11px;
	color: #171718;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.18s;
	position: relative;
}


.mig-src:hover,
.mig-src.selected {
	border-color: rgb(76 191 231);
	background: rgb(240 255 255);
	color: #006ba2;
}

.mig-src .src-icon {
	font-size: 20px;
	display: block;
	margin-bottom: 5px;
}

.mig-src .src-icon img {
	width: 25px;
	height: 25px;
	object-fit: contain;
}

.mig-src .chk {
	position: absolute;
	top: 5px;
	right: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #00c896;
	color: #fff;
	font-size: 9px;
	display: none;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.mig-src.selected .chk {
	display: flex;
}

/* progress bar */
.mig-progress-wrap {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 10px 0 0 0;
}

.mig-prog-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	font-size: 12px;
	color: #8892a8;
}

.mig-prog-label {
	color: #414141;
}

.mig-prog-pct {
	color: #0486c3;
	font-family: 'Jost-SemiBold';
}

.mig-bar-track {
	background: rgb(236 236 236);
	border-radius: 4px;
	height: 6px;
	overflow: hidden;
	margin-bottom: 8px;
}

.mig-bar-fill {
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(to right, #0076bf, #0998c7);
	animation: barfill 3s ease-in-out infinite alternate;
}

@keyframes barfill {
	0% {
		width: 42%
	}

	100% {
		width: 78%
	}
}

.mig-sub-rows {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 10px;
}

.mig-sub-row {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #47484a;
}

.mig-sub-row span:last-child {
	color: #5b5f64;
}

.mig-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 18px;
}

.mig-tag {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.09);
	color: #8892a8;
	font-size: 11px;
	font-weight: 500;
	padding: 4px 11px;
	border-radius: 6px;
}

/* body text */
.mig-body {
	font-size: 15px;
	color: #8892a8;
	line-height: 1.75;
	margin: 0 0 8px;
	border-left: 2px solid rgba(0, 200, 150, 0.3);
	padding-left: 16px;
}

/* features */
.mig-feats {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
}

.mig-feat {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	padding: 15px 18px;
	transition: border-color 0.2s, background 0.2s;
	cursor: default;
}

.mig-feat:hover {
	border-color: rgba(0, 200, 150, 0.3);
	background: rgba(0, 200, 150, 0.04);
}

.mig-feat-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

.fi-green {
	background: rgba(0, 200, 150, 0.12);
}

.fi-red {
	background: rgba(255, 80, 80, 0.1);
}

.fi-blue {
	background: rgba(64, 120, 255, 0.12);
}

.fi-amber {
	background: rgba(255, 170, 50, 0.1);
}

.fi-teal {
	background: rgba(0, 180, 200, 0.1);
}

.fi-purple {
	background: rgba(140, 80, 220, 0.1);
}

.fi-cyan {
	background: rgba(0, 210, 240, 0.1);
}

.mig-feat-text h4 {
	margin: 0 0 3px;
	font-size: 13px;
	font-weight: 600;
	color: #d0d8ea;
}

.mig-feat-text p {
	margin: 0;
	font-size: 12px;
	color: #6b7589;
	line-height: 1.5;
}

.mig-zero-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(0, 200, 150, 0.07);
	border: 1px solid rgba(0, 200, 150, 0.2);
	border-radius: 10px;
	padding: 12px 16px;
	margin-top: 20px;
	font-size: 13px;
	color: #00c896;
	font-weight: 600;
}

.mig-zero-banner span {
	color: #6b9;
	font-weight: 400;
	font-size: 12px;
}

.mig-sub-row i.bi {
	color: #047095;
}


/* SSO */


/* ---- IDP Flow Visual ---- */
.sso-flow-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	width: 360px;
}

.sso-flow-header {
	background: #f0f2f8;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.sfh-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.sfh-title {
	font-size: 13px;
	color: #464a53;
	margin-left: 4px;
}

.sso-flow-body {
	padding: 20px;
}

/* IDP Selector tabs */
.sso-idp-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.sso-idp-tab {
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 500;
	color: #8892a8;
	cursor: pointer;
	transition: all 0.18s;
}

.sso-idp-tab:hover {
	border-color: rgba(140, 80, 220, 0.35);
	color: #c0a8e8;
}

.sso-idp-tab.active {
	border-color: rgba(140, 80, 220, 0.5);
	background: rgba(140, 80, 220, 0.1);
	color: #d0b8ff;
}

.sso-idp-tab .tidp-icon {
	font-size: 15px;
}

/* Auth flow diagram */
.sso-flow-diagram {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-bottom: 20px;
}

.sso-flow-node {
	background: rgb(233 249 255);
	border: 1px solid rgb(135 223 255);
	border-radius: 10px;
	padding: 12px 10px;
	text-align: center;
	flex: 1;
	font-size: 11px;
	color: #0c7295;
	font-weight: 500;
	transition: border-color 0.3s;
}

.sso-flow-node .fn-icon {
	font-size: 20px;
	display: block;
	margin-bottom: 4px;
}

.sso-flow-node.active-node {
	border-color: rgba(140, 80, 220, 0.5);
	background: rgba(140, 80, 220, 0.08);
	color: #461b8e;
}

.sso-flow-node.center-node {
	border-color: rgba(77, 136, 255, 0.4);
	background: rgba(77, 136, 255, 0.08);
	color: #1d448c;
}

.sso-flow-arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	flex-shrink: 0;
}

.sso-arrow-line {
	width: 32px;
	height: 2px;
	background: linear-gradient(90deg, rgba(140, 80, 220, 0.4), rgba(77, 136, 255, 0.4));
	position: relative;
	overflow: hidden;
}

.sso-arrow-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgb(17 71 164 / 90%), transparent);
	animation: sarrow 1.8s ease-in-out infinite;
}

@keyframes sarrow {
	0% {
		left: -60%
	}

	100% {
		left: 160%
	}
}

.sso-arrow-cap {
	font-size: 10px;
	color: #6b5080;
}

/* Token display */
.sso-token-box {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(140, 80, 220, 0.2);
	border-radius: 8px;
	padding: 10px 14px;
	font-family: 'Courier New', monospace;
	font-size: 11px;
	color: #a07acc;
	line-height: 1.6;
	margin-bottom: 16px;
}

.sso-token-label {
	font-size: 10px;
	color: #5a4570;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: 4px;
}

/* Session status */
.sso-session-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgb(241 244 255);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 8px;
	font-size: 12px;
}

.sso-session-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sso-session-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-family: 'Jost-SemiBold';
}

.sso-session-name {
	color: #0483c2;
	font-family: 'Jost-SemiBold';
	font-size: 12px;
}

.sso-session-email {
	color: #5a6478;
	font-size: 11px;
}

.sso-session-badge {
	font-size: 10px;
	padding: 3px 9px;
	border-radius: 5px;
	font-family: 'Jost-Medium';
}

.sb-active {
	background: rgba(0, 200, 150, 0.12);
	color: #00c896;
}

.sb-mfa {
	background: rgba(255, 170, 50, 0.1);
	color: #ffa830;
}

/* Audit log mini */
.sso-audit-mini {
	background: rgb(241 246 255);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 12px 14px;
	margin-top: 12px;
}

.sso-audit-title {
	font-size: 10px;
	color: #43464c;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: 8px;
}

.sso-audit-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	padding: 4px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sso-audit-row:last-child {
	border-bottom: none;
}

.sso-audit-evt {
	color: #505257;
}

.sso-audit-time {
	color: #4a5060;
}

.sso-audit-ok {
	color: #00c896;
	font-family: "Jost-Medium"
}

.sso-audit-warn {
	color: #ffa830;
	font-family: "Jost-Medium"
}

/* body text */
.sso-body {
	font-size: 15px;
	color: #8892a8;
	line-height: 1.75;
	margin: 0 0 16px;
	border-left: 2px solid rgba(140, 80, 220, 0.3);
	padding-left: 16px;
}

.sso-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 18px;
}

.sso-tag {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.09);
	color: #8892a8;
	font-size: 11px;
	font-weight: 500;
	padding: 4px 11px;
	border-radius: 6px;
}

/* features */
.sso-feats {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.sso-feat {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	padding: 14px 16px;
	transition: border-color 0.2s, background 0.2s;
	cursor: default;
}

.sso-feat:hover {
	border-color: rgba(140, 80, 220, 0.3);
	background: rgba(140, 80, 220, 0.04);
}

.sso-feat-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

.fi-purple {
	background: rgba(140, 80, 220, 0.13);
}

.fi-blue {
	background: rgba(64, 120, 255, 0.12);
}

.fi-azure {
	background: rgba(0, 120, 212, 0.12);
}

.fi-goog {
	background: rgba(234, 67, 53, 0.1);
}

.fi-okta {
	background: rgba(0, 120, 180, 0.1);
}

.fi-scim {
	background: rgba(0, 180, 120, 0.1);
}

.fi-mfa {
	background: rgba(255, 170, 50, 0.1);
}

.fi-audit {
	background: rgba(100, 180, 255, 0.1);
}

.sso-feat-text h4 {
	margin: 0 0 3px;
	font-size: 13px;
	font-weight: 600;
	color: #d0d8ea;
}

.sso-feat-text p {
	margin: 0;
	font-size: 12px;
	color: #6b7589;
	line-height: 1.5;
}

.sso-trust-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(140, 80, 220, 0.07);
	border: 1px solid rgba(140, 80, 220, 0.2);
	border-radius: 10px;
	padding: 14px 16px;
	margin-top: 18px;
	font-size: 13px;
	color: #c0a0ff;
	font-weight: 600;
}

.sso-trust-banner span {
	color: #9070b8;
	font-weight: 400;
	font-size: 12px;
	display: block;
	margin-top: 3px;
}

.sso-flow-node .fn-icon img {
	width: 30px;
}




/* editor mockup */


/* app switcher tabs */

.collaborateSec{
    padding: 80px 0;
    background: var(--card-bg);
}
.collaborateSec .collaborate-content-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
@media (max-width: 768px) {
	.collaborateSec .collaborate-content-grid {
		grid-template-columns: 1fr;
	}

	.collaborateSec-mockup-col {
		order: -1;
	}
}


.collaborateSec ul li {
    margin-bottom: 7px;
}
.collaborateSec ul li span {
    font-family: "Jost-Medium";
}
.collaborateSec ul li i {
    color: #0068b4;
}

.collaborateSec .collaborate-content-grid .collaborate-mockup-col{
	display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.collaborateSec .collaborate-content-grid .collaborate-mockup-col img{
	width: 100%;
}

.col-app-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 15px;
	flex-wrap: wrap;
	justify-content: center;
}

.col-app-tab {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 13px;
    border: 1px solid rgb(199 199 199);
    background: rgb(252 252 252 / 0%);
    color: #353536;
    cursor: pointer;
    transition: all 0.18s;
}

.col-app-tab:hover {
	border-color: rgba(255, 255, 255, 0.18);
	color: #1e96c3;
}

.col-app-tab.active-docs {
	border-color: rgba(64, 120, 255, 0.5);
	background: rgba(64, 120, 255, 0.1);
	color: #266ee9;
}

.col-app-tab.active-sheet {
    border-color: rgb(101 194 227);
    background: rgb(235 250 255);
    color: #0894c6;
}

.col-app-tab.active-slide {
	border-color: rgba(255, 140, 50, 0.5);
	background: rgba(255, 140, 50, 0.1);
	color: #ff9d4d;
}

.col-app-tab.active-pdf {
	border-color: rgba(220, 60, 60, 0.5);
	background: rgba(220, 60, 60, 0.1);
	color: #ff6b6b;
}

.col-app-tab .tab-icon {
	font-size: 12px;
}

/* main layout */
.col-layout {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 32px;
	align-items: start;
}




.col-editor {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
	width: 360px;
}

.col-editor-bar {
	background: #f0f2f8;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding: 7px 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ceb-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.ceb-title {
	font-size: 13px;
	color: #464a53;
	margin-left: 4px;
	flex: 1;
}

.ceb-collaborators {
	display: flex;
	gap: -4px;
}

.ceb-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-family: 'Jost-SemiBold';
	margin-left: -6px;
}

.ceb-live {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: #078fc5;
    background: rgba(0, 200, 150, 0.08);
    border: 1px solid rgb(151 221 247);
	border-radius: 6px;
	padding: 3px 9px;
}

.ceb-live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #0893c6;
	animation:cpulse 1.5s ease-in-out infinite
}
@keyframes cpulse{
	0%,100%{
		opacity:1;
		transform:scale(1)
	}
	50%{opacity:0.4;
		transform:scale(0.6)
	}
}
/* toolbar */
.col-toolbar {
	background: rgb(226 233 255);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 8px 16px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.col-tb-btn {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 11px;
	color: #525355;
	cursor: pointer;
	transition: all 0.15s;
}

.col-tb-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #c0c8d8;
}

.col-tb-btn.active {
	background: rgba(64, 120, 255, 0.15);
	border-color: rgba(64, 120, 255, 0.3);
	color: #1c4da0;
}

.col-tb-sep {
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, 0.08);
}

/* doc body panels */
.col-doc-body {
	padding: 20px;
	min-height: 220px;
}

/* Word doc */


.doc-line {
	height: 10px;
	border-radius: 3px;
	background: rgb(77 77 77 / 7%);;
	margin-bottom: 9px;
	
}

.doc-line.title {
	height: 16px;
	background: rgba(64, 120, 255, 0.2);
	width: 55%;
	margin-bottom: 16px;
}

.doc-line.short {
	width: 40%;
}

.doc-line.med {
	width: 70%;
}

.doc-line.full {
	width: 100%;
}

.doc-comment {
	background: rgba(255, 220, 80, 0.08);
	border-left: 2px solid #ffd84d;
	border-radius: 0 6px 6px 0;
	padding: 7px 10px;
	margin: 10px 0;
	font-size: 11px;
	color: #c8a840;
}

.doc-cursor {
	display: inline-block;
	width: 2px;
	height: 12px;
	background: #7aabff;
	animation: blink 1s step-end infinite;
	vertical-align: middle;
}

@keyframes blink {

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: 0
	}
}

/* Sheet */
.sheet-panel {
	overflow-x: auto;
}

.sheet-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 11px;
}

.sheet-table th {
    background: rgb(233 250 255);
    color: #0894c6;
    padding: 6px 8px;
    text-align: left;
    /* font-weight: 600; */
    border-bottom: 1px solid rgb(212 244 255);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.sheet-table td {
	padding: 6px 8px;
	color: #8892a8;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.sheet-table tr:hover td {
	background: rgba(255, 255, 255, 0.03);
}

.sheet-table .cell-active {
	background: rgb(233 250 255) !important;
    color: #0894c6;
	font-weight: 600;
}

.sheet-table .cell-formula {
	color: #7aabff;
}

.sheet-bar {
	background: rgb(225 225 225 / 20%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 6px 14px;
	font-size: 11px;
	color: #0895c6;
	font-family: 'Courier New', monospace;
}

.sheet-bar span {
	color: #4ddca0;
}

/* Slides */
.slide-panel {}

.slide-canvas {
	background: linear-gradient(135deg, rgb(241 244 255), rgb(241 244 255));
    border: 1px solid rgb(222 228 248);
	border-radius: 10px;
	padding: 20px;
	min-height: 140px;
	position: relative;
	margin-bottom: 10px;
}

.slide-title-txt {
	font-size: 16px;
    /* font-weight: 700; */
    color: #0791c5;
    margin-bottom: 6px;
}

.slide-body-txt {
	font-size: 11px;
	color: #68686a;
	line-height: 1.6;
}

.slide-shape {
	position: absolute;
	right: 16px;
	top: 16px;
	width: 60px;
	height: 60px;
	border-radius: 8px;
    background: rgb(231 236 255);
    border: 1px solid rgb(205 216 255);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.slide-thumbs {
	display: flex;
	gap: 6px;
}

.slide-thumb {
	flex: 1;
	height: 36px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: #5a6478;
	cursor: pointer;
	transition: border-color 0.15s;
}

.slide-thumb.active-slide-thumb {
	border-color: rgba(255, 140, 50, 0.4);
	color: #ff9d4d;
}

.slide-thumb:hover {
	border-color: rgba(255, 255, 255, 0.2);
}

/* PDF */
.pdf-panel {}

.pdf-page {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgb(206 216 255);
	border-radius: 8px;
	padding: 14px;
}

.pdf-pg-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.pdf-pg-num {
	font-size: 10px;
	color: #5a6478;
}

.pdf-pg-badge {
	font-size: 10px;
    background: rgb(243 252 255);
    border: 1px solid rgb(206 216 255);
    color: #0895c6;
	border-radius: 4px;
	padding: 2px 7px;
}

.pdf-line {
	height: 8px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.06);
	margin-bottom: 6px;
}

.pdf-line.w80 {
	width: 80%
}

.pdf-line.w60 {
	width: 60%
}

.pdf-line.w90 {
	width: 90%
}

.pdf-line.w50 {
	width: 50%
}

.pdf-annotation {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: rgb(243 252 255);
    border: 1px solid rgb(206 216 255);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 10px;
    color: #0895c6;
    margin-top: 8px;
}

/* features right */
.col-feats {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.col-feat {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	padding: 14px 16px;
	transition: border-color 0.2s, background 0.2s;
	cursor: default;
}

.col-feat:hover {
	border-color: rgba(255, 140, 50, 0.3);
	background: rgba(255, 140, 50, 0.04);
}

.col-feat-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 17px;
}

.fi-word {
	background: rgba(64, 120, 255, 0.14);
}

.fi-xl {
	background: rgba(0, 180, 100, 0.12);
}

.fi-ppt {
	background: rgba(255, 140, 50, 0.13);
}

.fi-pdf {
	background: rgba(220, 60, 60, 0.11);
}

.fi-share {
	background: rgba(140, 80, 220, 0.12);
}

.fi-hist {
	background: rgba(0, 180, 200, 0.11);
}

.fi-com {
	background: rgba(255, 200, 50, 0.11);
}

.fi-off {
	background: rgba(100, 180, 255, 0.11);
}

.col-feat-text h4 {
	margin: 0 0 3px;
	font-size: 13px;
	font-weight: 600;
	color: #d0d8ea;
}

.col-feat-text p {
	margin: 0;
	font-size: 12px;
	color: #6b7589;
	line-height: 1.5;
}

.col-body {
	font-size: 15px;
	color: #8892a8;
	line-height: 1.75;
	margin: 0 0 16px;
	border-left: 2px solid rgba(255, 140, 50, 0.3);
	padding-left: 16px;
}

.col-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 16px;
}

.col-tag {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.09);
	color: #8892a8;
	font-size: 11px;
	font-weight: 500;
	padding: 4px 11px;
	border-radius: 6px;
}

.col-trust-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(255, 140, 50, 0.07);
	border: 1px solid rgba(255, 140, 50, 0.2);
	border-radius: 10px;
	padding: 14px 16px;
	margin-top: 18px;
	font-size: 13px;
	color: #ff9d4d;
	font-weight: 600;
}

.col-trust-banner span {
	color: #a06030;
	font-weight: 400;
	font-size: 12px;
	display: block;
	margin-top: 3px;
}

.hidden {
	display: none;
}

@media (max-width: 768px) {
	.col-editor {
		width: 340px;
	}
	.lock-icon2 {
    	right: 0px;
	}
	.warning-badge{
		left: 0px;
	}
}