@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
:root { --cv-font: 'Poppins', ui-sans-serif, system-ui; }
/* Tailwind's base styles */
@tailwind base;
/* Tailwind's component styles */
@tailwind components;
/* Tailwind's utility classes */
@tailwind utilities;
.ProseMirror p.is-empty::before {
content: attr(data-placeholder);
color: #9ca3af;
float: left;
height: 0;
pointer-events: none;
font-size: 0.75rem;
}
/* Fix Tiptap black outline or background */
.ProseMirror-focused {
outline: none !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* Fix invisible bullets/number lists inside editor */
.ProseMirror ul,
.ProseMirror ol {
padding-left: 1.25rem; /* Tailwind pl-5 */
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.ProseMirror ul {
list-style-type: disc;
}
.ProseMirror ol {
list-style-type: decimal;
}
.ProseMirror li {
margin-bottom: 0.25rem;
}
.prose ul {
list-style-type: disc;
padding-left: 1.25rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.prose ol {
list-style-type: decimal;
padding-left: 1.25rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.prose li {
margin-bottom: 0.25rem;
}
/* Page margins for the PDF */
@page {
size: A4;
/* top right bottom left — left/right 0 so your 794px width fits */
margin: 40px 15px 40px 15px; /* top/bottom margins for pages 2+ */
}
@page :first {
margin: 0 15px 40px 15px; /* no top margin on page 1, keep bottom */
}
/* Optional: other print tweaks can live under @media print */
@media print {
/* Avoid section splits across pages (nice with your Education/Work blocks) */
section, .cv-section { break-inside: avoid; page-break-inside: avoid; }
}
* { box-sizing: border-box; }
html, body {
max-width: 100% !important;
margin: 0;
padding: 0;
}
body {
font-family: "Google Sans", sans-serif;
letter-spacing: -0.5px;
margin: 0;
background-color: #d8dce6;
color: #333;
font-size: 16px;
min-height: 100vh;
flex-direction: column;
display: flex;
}
main {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
footer {
background-color: transparent;
text-align: center;
color: #555;
font-size: 0.7rem;
flex-shrink: 0;
}
.container {
max-width: 1200px;
margin: 0.5rem auto;
padding: 0 1rem;
box-sizing: border-box;
flex: 1 0 auto;
width: 100%;
}
.home-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background: transparent;
padding-bottom: 1.5rem;
}
header {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
color: #fff;
padding: 0.5rem 1.5rem;
font-size: 1.2rem;
z-index: 1000;
}
header p { margin: 0; }
.header-icons {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 0.1px white;
padding: 0;
cursor: pointer;
background-color: #d8dce6;
}
.header-icons:hover {
background-color: #daf0ff;
transform: scale(1.02);
}
.speaker-icon {
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
display: inline-block;
}
h3.card-title {
background-color: #f2f0ff;
padding: 1px 5px;
border-radius: 4px;
display: inline-flex;
align-items: center;
gap: 4px;
margin-bottom: 0;
margin-top: 10px;
font-size: inherit;
font-weight: inherit;
}
h3.card-title .inline-icon {
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
.grid-intro {
display: block;
max-width: 700px;
margin: 0.5rem auto 0;
color: #555e6d;
text-align: center;
font-size: 0.875rem;
line-height: 1.4;
padding: 0.5rem;
}
.grid-intro p {
margin: 0.5rem 0;
}
.grid-intro a {
color: #4285f4;
text-decoration: none;
font-weight: 500;
}
.grid-intro a:hover {
text-decoration: underline;
}
#grid-intro-text {
display: block;
margin: 0;
text-align: center;
font-size: 0.9rem;
color: #555e6d;
opacity: 0;
padding: 0;
}
.grid-intro-text p {
margin-top: 0.2rem;
}
#view-index > .container > #grid-intro-text {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
#intro-placeholder > #grid-intro-text {
visibility: visible !important;
height: auto !important;
margin: initial;
padding: initial;
overflow: visible;
opacity: 1 !important;
pointer-events: auto !important;
transition: none !important;
}
.filter-container { text-align: center; margin: 1rem auto; margin-top: 0.3rem; }
.filter-buttons {
display: inline-flex;
border: 1px solid #dadada;
border-radius: 5px;
overflow: hidden;
}
.filter-buttons button {
border: none;
background: #fff;
color: #555e6d;
padding: 0.3rem 1rem;
cursor: pointer;
outline: none;
border-right: 1px solid #dadada;
transition: background 0.3s ease;
}
.filter-buttons button:last-child { border-right: none; }
.filter-buttons button.active {
background: #2a3a58;
color: #fff;
}
.filter-buttons button:hover {
background-color: #daf0ff;
color: #000;
}
#grid-view {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
cursor: pointer;
transition: transform 0.2s;
}
.card:hover {
background-color: #daf0ff;
transform: scale(1.02);
}
.card .card-content { padding: 1rem; }
.card .card-title { font-size: 0.8rem; margin-bottom: 0.1rem; margin-top: 0.3rem }
.card .card-description{
color: #555e6d;
font-size: 0.875rem;
margin-bottom: 0.3rem;
margin-top: 0.5rem;
}
#detail-view {
overflow: visible !important;
display: none;
flex-direction: column;
gap: 30px;
animation: fadeIn 0.5s ease;
max-width: 800px;
margin: -3rem auto;
padding: 1rem;
}
.forgot-container #detail-view {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin: 2rem auto;
padding: 1rem;
max-width: 800px;
width: 100%;
box-sizing: border-box;
}
.forgot-container #detail-view::before {
content: none !important;
content: "" !important;
display: none !important;
border: none !important;
height: 0 !important;
}
.forgot-container #detail-view .detail-card {
width: 100%;
max-width: 600px;
box-sizing: border-box;
margin-top: 0;
}
.forgot-container #detail-view .detail-card .form-group {
margin-bottom: 2rem;
}
#forgot-card-title {
font-size: 1.2rem;
margin-bottom: 0.75rem;
margin-top: 2rem;
color: var(--primary-text, #555e6d);
}
.forgot-container .home-section {
position: sticky;
top: 0;
z-index: 10;
padding: 0.5rem 1rem;
}
.forgot-container .logo-title img {
max-height: 45px;
display: block;
margin: 0 auto;
}
.forgot-container .detail-card .form-input {
max-width: 280px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 600px) {
.forgot-container #detail-view .detail-card {
margin: 0 1rem;
padding: 0.75rem;
border-radius: 0.5rem;
}
.forgot-container .form-input,
.forgot-container .start-button {
font-size: 1rem;
padding: 0.75rem;
}
}
#interview-back-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding-bottom: 0.5rem;
border-bottom: 1px solid #d6d4d4;
position: relative;
}
#interview-back-container .tips_icon {
text-align: right;
padding-right: 1rem;
cursor: pointer;
}
.back-button {
text-align: left;
margin: 1rem 0;
}
.back-button button {
font-family: "Google Sans", sans-serif;
background-color: #fff;
color: #555e6d;
border: 1px solid #7393B3;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
}
.back-button button:hover { background-color: #daf0ff; }
#detail-view {
position: relative;
display: flex;
height: auto !important;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 5rem 1rem;
background: var(--detail-bg, #f5f7fa);
}
#detail-view .detail-card {
background: var(--card-bg, #fff);
border-radius: 1rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
padding: 1rem;
max-width: 600px;
width: 100%;
margin-top: 4rem;
text-align: center;
transition: transform 0.3s ease;
}
#detail-view .detail-card:hover {
transform: translateY(-4px);
}
#detail-view .detail-card h4#card-title {
font-size: 1.2rem;
margin-bottom: 0.75rem;
margin-top: 0.1rem;
color: var(--primary-text, #555e6d);
}
#detail-view .detail-card p {
font-size: 0.9rem;
color: var(--secondary-text, #555e6d);
margin: 0.2rem;
margin-bottom: 2.5rem;
margin-top: 2.5rem;
line-height: 2;
}
#detail-view .detail-card .start-button {
background: var(--accent, #566573);
border: none;
color: #fff;
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
height: 40px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
margin-top: 0.5rem;
transition: background 0.2s ease, transform 0.2s ease;
}
#detail-view .detail-card .start-button:hover {
background: var(--accent-hover, #2D3436);
transform: translateY(-2px);
}
#detail-view .back-button {
position: absolute;
top: 1rem;
left: 2rem;
}
#header-back-button {
font-family: "Google Sans", sans-serif;
background: #fff;
border: 1px solid #7393B3;
color: #555e6d;
cursor: pointer;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: color 0.2s ease;
}
#header-back-button:hover { background-color: #daf0ff; }
#detail-view .record-button {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 10;
}
#record-button {
display: inline-flex;
align-items: center;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
line-height: 1;
}
.record-icon {
position: relative;
width: 1.5rem;
height: 1.5rem;
vertical-align: middle;
fill: var(--primary-text, #333);
transition: fill 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.record-button:hover .record-icon {
fill: var(--accent, #e53e3e);
transform: scale(1.1);
}
.record-button:hover::after {
content: "Record this session";
position: absolute;
top: 50%;
right: 100%;
transform: translateY(-50%);
background: rgba(0,0,0,0.85);
color: #fff;
padding: .25rem .5rem;
border-radius: .25rem;
font-size: .875rem;
white-space: nowrap;
pointer-events: none;
z-index: 20;
}
}
.record-button.active .record-icon {
fill: #e53e3e !important;
transform: scale(1.1) !important;
}
.record-button.active::after {
content: "Record this session";
position: absolute;
top: 50%;
right: 100%;
transform: translateY(-50%);
background: rgba(0,0,0,0.85);
color: #fff;
padding: .25rem .5rem;
border-radius: .25rem;
font-size: .875rem;
white-space: nowrap;
pointer-events: none;
z-index: 20;
}
.rec-indicator {
position: absolute;
top: 45%;
right: 3.5rem;
transform: translateY(-50%);
margin: 0;
z-index: 2;
display: inline-block;
vertical-align: middle;
padding: 0.1rem 0.4rem;
background: var(--accent, #e53e3e);
color: #fff;
font-size: 0.75rem;
font-weight: bold;
border-radius: 0.25rem;
vertical-align: middle;
}
#detail-view::before {
content: "";
position: absolute;
top: 5rem;
left: 2rem;
right: 2rem;
height: 1px;
background: var(--divider, #dfe0e2);
z-index: 5;
}
#interview-card {
display: none;
max-width: 800px;
margin: 2rem auto;
transform: translateY(-100px);
padding: 1rem;
background: #e9ecf0;
border-radius: 8px;
animation: fadeIn 0.5s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
position: relative;
z-index: 0;
}
.interview-header {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 0.5rem 1rem;
border-radius: 6px;
margin-bottom: 0.5rem;
margin-top: 2rem;
}
.interview-header .left-info {
background-color: #daf0ff;
display: inline-flex;
padding: 4px 5px;
border-radius: 5px;
font-weight: 500;
font-size: 12px;
line-height: 14px;
color: #3b3a3a;
}
.interview-header .right-info {
color: #555e6d;
font-weight: 600;
font-size: 12px;
}
.question-container {
background: #fff;
border-radius: 5px;
padding: 1rem;
position: relative;
}
.question-container .question-text {
margin: 0;
padding: 0;
font-weight: 500;
color: #555e6d;
}
.question-text .question-prompt {
display: block;
margin-bottom: 1rem;
margin-top: 0.5rem
}
.question-text .answer-line {
display: block;
margin: 0;
}
.answer-text {
font-style: normal;
margin: 0;
padding: 0;
font-weight: 300;
font-size: 14px;
color: #aca9a9;
}
.answer-container {
display: flex;
flex-direction: row; /* Ensure horizontal layout */
justify-content: flex-start; /* Align buttons to the left */
align-items: center; /* Vertically align the buttons */
padding: 1rem;
background-color: #fff;
border-radius: 5px;
width: 100%;
margin-top: 0.5rem;
gap: 0.5rem;
}
.left-group {
display: flex;
gap: 0.5rem; /* Adds a gap between the buttons */
justify-content: flex-start; /* Ensure buttons stay left-aligned */
flex-grow: 0; /* Prevent the left-group from growing too large */
}
.answer-button,
.replay-button,
.arrow-button,
#header-back-button,
.back-button button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.7rem;
font-family: "Google Sans", sans-serif;
font-size: 0.9rem;
cursor: pointer;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
}
.answer-button,
.replay-button {
background-color: #4285f4;
color: #fff;
border: 1px solid #7393B3;
border-radius: 4px;
margin-left: 0 !important;
margin-right: 0 !important;
padding-right: 0.5rem;
}
.left-group .answer-button,
.left-group .replay-button {
padding-left: 0.7rem; /* keep left padding */
padding-right: 0.7rem; /* keep right padding */
}
.left-group .answer-button {
margin-right: 0 !important;
}
.left-group {
gap: 0.6rem; /* this will now be the only gap between the two */
}
.arrow-button,
#header-back-button {
background-color: #fff;
color: #555e6d;
border: 1px solid #7393B3;
margin-left: auto;
}
.arrow-button:hover {
background-color: #daf0ff;
}
#arrow-button {
display: none;
margin-left: auto;
}
.back-button button {
float: left;
font-size: 0.9rem;
}
.answer-button svg,
.replay-button svg,
.arrow-button svg,
#header-back-button svg,
.back-button button svg,
#interview-back-button svg {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: middle;
margin-right: 0.5rem;
}
.arrow-button svg {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: middle;
margin-left: 0.25em;
}
.mic-icon {
width: 18px;
height: 19px;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: contain;
}
.audio-wave.modern-wave {
display: flex;
margin: 0 auto;
align-items: flex-end;
justify-content: center;
gap: 4px;
height: 36px;
overflow: hidden;
}
.audio-wave.modern-wave .bar {
flex: 1;
max-width: 6px;
height: 8px;
background: linear-gradient(to top, #00aaff, #88ddff);
border-radius: 3px;
transform-origin: bottom center;
animation: modern-wave 1s ease-in-out infinite;
}
.audio-wave.modern-wave .bar:nth-child(1) {
animation-delay: 0s;
background: linear-gradient(to top, #ff0000, #ff8888); /* red */
}
.audio-wave.modern-wave .bar:nth-child(2) {
animation-delay: 0.08s;
background: linear-gradient(to top, #ff7f00, #ffbb66); /* orange */
}
.audio-wave.modern-wave .bar:nth-child(3) {
animation-delay: 0.16s;
background: linear-gradient(to top, #ffff00, #ffff88); /* yellow */
}
.audio-wave.modern-wave .bar:nth-child(4) {
animation-delay: 0.24s;
background: linear-gradient(to top, #00ff00, #88ff88); /* green */
}
.audio-wave.modern-wave .bar:nth-child(5) {
animation-delay: 0.32s;
background: linear-gradient(to top, #0000ff, #8888ff); /* blue */
}
.audio-wave.modern-wave .bar:nth-child(6) {
animation-delay: 0.40s;
background: linear-gradient(to top, #4b0082, #9966cc); /* indigo */
}
.audio-wave.modern-wave .bar:nth-child(7) {
animation-delay: 0.48s;
background: linear-gradient(to top, #8f00ff, #bb88ff); /* violet */
}
.audio-wave.modern-wave .bar:nth-child(8) {
animation-delay: 0.56s;
background: linear-gradient(to top, #00ffff, #88ffff); /* cyan */
}
@keyframes modern-wave {
0%, 100% { transform: scaleY(0.3); }
50% { transform: scaleY(3); }
}
.blinking-blue {
background-color: #4285f4;
animation: blink 0.8s step-start infinite;
}
.blinking-green {
background-color: #228B22;
animation: blink 0.8s step-start infinite;
}
@keyframes blink {
30% { opacity: 0.3; }
}
@font-face {
font-family: 'Google Sans';
src: url("/static/fonts/GoogleSans-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Google Sans';
src: url("/static/fonts/GoogleSans-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
.home-section {
display: flex;
flex-direction: column;
align-items: center;
padding: auto 1rem;
text-align: center;
}
.login-start-button {
background-color: #4285f4;
border: none;
color: #fff;
padding: 1rem 1rem;
font-size: 0.9rem;
height: 40px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
margin-top: 1.5rem;
transition: background 0.2s ease, transform 0.2s ease;
}
.login-start-button:hover {
background: var(--accent-hover, #496eb2);
transform: translateY(-2px);
}
.rotating-text {
background-color: #daf0ff;
display: inline-flex;
padding: 0.5px 5px;
border-radius: 5px;
color: #6c63ff;
font-weight: 400;
font-size: 0.9rem;
text-align: center;
}
.rotating-text::after {
background-color: #daf0ff;
content: "";
bottom: -5px;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.rotating-text:hover::after {
transform: scaleX(1);
}
.text-change {
animation: fade 1.8s infinite;
}
.home-intro {
align-items: center;
font-size: 15px;
line-height: 22px;
max-width: 650px;
letter-spacing: 0.1px;
padding: 1.2rem;
margin-block-start: 2px;
color: #555e6d;
}
.logo-title {
margin-top: 35px;
margin-bottom: 20px;
}
.video-card {
width: clamp(280px, 80%, 450px);
margin: 0rem auto;
padding: 0.3rem;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
overflow: hidden;
box-sizing: border-box;
}
.video-wrapper {
position: relative;
width: 100%;
padding-top: 36.25%;
border-radius: 8px;
background-color: #fff;
overflow: hidden;
}
.preview-video {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background-color: #fff;
}
.ms-edge {
margin-right: 6px;
margin-left: 3px;
vertical-align: middle;
padding-bottom: 3px;
padding-bottom: 0px;
}
.blank-space {
position: fixed;
top: 50px;
left: 0; right: 0;
width: 100%;
height: 1.3rem;
background-color: #d8dce6;
overflow: hidden;
}
.blank-space::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 0.5rem;
background: linear-gradient(
to bottom,
rgba(216, 220, 230, 1) 0%,
rgba(216, 220, 230, 0) 100%
);
opacity: 1;
transition: opacity 0.3s ease;
}
.blank-space:hover::after {
opacity: 0;
}
.sticky-div {
position: sticky;
top: 0;
padding: 0px;
margin: 0px;
z-index: 1000;
}
.sticky-div > header {
position: relative;
top: 0;
z-index: 1000;
}
#intro-placeholder {
display: flex;
border-radius: 5px;
align-items: center;
justify-content: center;
background-color: #edf0f5;
padding: 6px 5px;
line-height: 0.3;
transition: all 0.5s ease;
width: auto;
max-width: 100%;
margin-right: 90px;
pointer-events: none;
}
#intro-placeholder .stuck {
position: relative;
top: -1.4px;
font-size: 0.875rem;
color: #555e6d;
font-weight: bold;
margin: 0;
padding: 0;
line-height: 0.3;
pointer-events: auto;
}
#intro-placeholder.hidden {
background-color: transparent;
padding: 0;
border-radius: 0;
}
#intro-placeholder.show {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #daf0ff;
padding: 6px 5px;
border-radius: 5px;
}
.home-header.style-textlinks {
display: flex;
align-items: center;
padding: 0.25rem 1rem;
height: 2.0rem;
border-bottom: 1px solid rgba(0,0,0,0.05);
box-sizing: border-box;
}
.home-header.style-textlinks .auth-buttons {
margin-left: auto;
margin-right: 1rem;
display: flex;
align-items: center;
}
.home-header.style-textlinks .btn {
font-size: 0.8rem;
color: #2D3436;
text-decoration: none;
position: relative;
padding: 0;
}
.home-header.style-textlinks .btn::after {
content: "";
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 1px;
background: #2D3436;
transition: width .2s;
}
.home-header.style-textlinks .btn:hover::after {
width: 100%;
}
.home-header.style-textlinks .separator {
margin: 0 0.5rem;
color: rgba(45,52,54,0.4);
font-size: 0.8rem;
line-height: 1;
}
#modal-backdrop,
.modal-backdrop {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(3px);
z-index: 10000 !important;
}
.modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 1001;
width: 90%;
max-width: 700px;
box-sizing: border-box;
z-index: 10000 !important;
}
.hidden {
display: none;
}
.modal-content {
background: #fff;
padding: 1.5rem;
padding-bottom: 0.1rem;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
position: relative;
}
#custom-generator,
#custom-generator * { box-sizing: border-box; }
#custom-generator .form-group {
width: 100%;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.invisible {
visibility: hidden;
}
.close-btn {
position: absolute;
top: 0.5rem; right: 0.5rem;
background: transparent;
border: none;
font-size: 1.2rem;
cursor: pointer;
}
.modal-content h2 {
margin-top: 0;
margin-bottom: 1rem;
text-align: center;
}
.modal-content label {
display: block;
margin: 0.5rem 0 0.25rem;
font-size: 0.85rem;
color: #566573;
}
.modal-content input {
width: 100%;
padding: 0.45rem 0.5rem;
font-size: 0.85rem;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.modal-btn {
width: 100%;
margin-top: 1rem;
padding: 0.6rem;
font-size: 0.9rem;
background: #566573;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.modal-btn:hover {
background: #2D3436;
}
.forgot-link {
margin-left: 1rem;
font-size: 0.8rem;
color: #566573;
text-decoration: none;
}
.forgot-link:hover {
text-decoration: underline;;
color: #6a9ceb;
}
.form-options {
display: flex;
justify-content: flex-end;
margin: 0.5rem 0 1rem;
font-size: 0.85rem;
}
.timeout-emoji {
color: initial;
}
.timeout-msg {
color: red;
margin-top: 10px
}
.view.hidden { display: none; }
.view.active { display: block; }
.home-intro p + p {
margin-top: 1rem;
}
#site-logo img {
max-height: 35px;
width: auto;
}
.hidden { display: none !important; }
.custom-header {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 1rem;
border-bottom: 1px solid #ddd;
}
*, *::before, *::after {
box-sizing: border-box;
}
.custom-cards {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: 0.8rem;
margin: 1.5rem auto;
margin-top: 0.8rem;
max-width: 800px;
}
.custom-card {
--custom-card-width: 500px;
--custom-card-height: 200px;
width: var(--custom-card-width);
height: var(--custom-card-height);
display: flex;
flex-direction: column;
padding: 1.25rem;
padding-bottom: 0;
min-height: 100px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
transition: transform 0.2s, box-shadow 0.2s;
}
.custom-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.custom-card-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.custom-card-title-text {
display: inline-block;
white-space: nowrap;
cursor: pointer;
color: #fff;
font-size: 14px;
padding-left: 0;
}
@media (max-width: 600px) {
#custom-roles-card .custom-card-title-text {
white-space: nowrap;
cursor: pointer;
color: #fff;
font-size: 15px;
}
}
#predefined-action {
--custom-card-height: auto !important;
height: auto !important;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #daf0ff;
padding-bottom: 1rem;
}
@media (max-width: 760px) {
#predefined-action {
padding-bottom: 1rem;
}
#predefined-action .custom-card-title-text {
white-space: nowrap;
cursor: pointer;
color: #fff;
font-size: 15px;
}
}
#predefined-action .custom-card-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0;
}
#predefined-action .predefined-info {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 100%;
border-right: 1.5px solid #ccc;
padding-right: 6rem;
margin-right: 1rem;
box-sizing: border-box;
}
#predefined-action .predefined-info li {
display: flex;
align-items: center;
margin-bottom: 0.25rem;
}
#predefined-action .predefined-info li .icon {
margin-right: 0.5rem;
}
#predefined-action .predefined-info li .label {
font-size: 0.85rem;
letter-spacing: 0.02em;
color: #555e6d;
transition: color 0.2s, text-shadow 0.2s;
display: inline-flex;
align-items: center;
background-color: #f2f0ff;
border-radius: 5px;
padding: 1px 5px;
}
#predefined-action #go-grid-btn {
margin: 0 !important;
}
#go-grid-btn {
background: #566573;
padding: 0.55rem 0.8rem;
cursor: pointer;
transition: background 0.2s;
color: #fff;
border-radius: 5px;
}
#go-grid-btn:hover {
background: #2D3436;
}
.custom-card.active {
background-color: #daf0ff !important;
}
.custom-card-content.hidden {
display: none !important;
}
.custom-card.active .custom-card-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.custom-card .custom-card-title {
background-color: #f2f0ff;
color: #555e6d;
}
#custom-flow-card {
width: var(--custom-card-width) !important;
max-width: 100% !important;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: visible !important;
--custom-card-height: auto !important;
height: auto !important;
background-color: #daf0ff;
position: relative;
}
#custom-flow-card .custom-card-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: auto;
display: flex;
flex-direction: column;
gap: 1rem;
overflow-x: hidden;
}
#custom-flow-card .custom-card-content > * {
max-width: 100%;
box-sizing: border-box;
}
#custom-flow-card input,
#custom-flow-card button,
#custom-flow-card select,
#custom-flow-card textarea,
#custom-flow-card hr,
#custom-flow-card ul {
max-width: 100%;
box-sizing: border-box;
}
.close-flow-btn {
position: absolute;
top: 0.9rem;
right:0.9rem;
background: #d8dce6;
border: 1px solid #ccc;
border-radius: 50%;
padding: 0.5rem;
font-size: 1rem;
line-height: 1;
cursor: pointer;
color: #555;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.close-flow-btn:hover {
background: #f2f2f2;
border-color: #999;
}
@media (max-width: 600px) {
#about-modal .close-flow-btn {
position: absolute;
top: 0.50rem;
right:0.9rem;
background: #d8dce6;
border: 1px solid #ccc;
border-radius: 50%;
padding: 0.5rem;
font-size: 1rem;
line-height: 1;
cursor: pointer;
color: #555;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 600px) {
#terms-modal .close-flow-btn {
position: absolute;
top: 0.50rem;
right:0.9rem;
background: #d8dce6;
border: 1px solid #ccc;
border-radius: 50%;
padding: 0.5rem;
font-size: 1rem;
line-height: 1;
cursor: pointer;
color: #555;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 600px) {
#progress-modal .close-flow-btn {
position: absolute;
top: 0.60rem;
right:0.9rem;
background: #d8dce6;
border: 1px solid #ccc;
border-radius: 50%;
padding: 0.5rem;
font-size: 1rem;
line-height: 1;
cursor: pointer;
color: #555;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
}
#custom-flow-card .custom-card-content {
word-wrap: break-word;
overflow-wrap: break-word;
}
.section-title {
font-size: 1rem;
margin-bottom: 1rem;
color: #555e6d;
}
.generator-form {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-error {
color: #d9534f;
font-size: 0.875rem;
margin: 0.5rem 0;
min-height: 1.2em;
}
#custom-generator #generate-error {
width: 100% !important; /* full width of generator */
margin: 0 auto !important; /* center it */
box-sizing: border-box;
text-align: center;
color: #d9534f;
font-size: 0.875rem;
line-height: 1.4;
white-space: normal;
overflow-wrap: anywhere;
overflow: hidden !important; /* allow full message */
}
.form-error-container {
width: 100%;
max-width: 100%;
text-align: center;
}
#generate-error.hidden {
visibility: hidden;
opacity: 0;
}
#generate-error.visible {
display: block;
visibility: visible;
margin-top: 0.25rem;
opacity: 1;
}
#subscribe-modal .input-label {
font-weight: 500;
color: #555e6d;
margin-bottom: 0;
}
.form-input {
width: 100%;
font-size: 0.85rem;
padding: 0.35rem 0.5rem;
border: 1px solid #ccc;
border-radius: 0.375rem;
position: relative;
left: 0;
transform: none;
line-height: 1.2;
}
#custom-generator input#custom-role.form-input {
width: 50% !important; /* shrink to half */
max-width: none !important;
align-self: center; /* center inside flex column */
display: block; /* don’t stretch like flex item */
}
.bullet-points-list {
display: grid;
gap: 0.5rem;
}
.bullet-point-item {
display: flex;
gap: 0.5rem;
}
.add-button {
margin-top: 0.9rem;
border: 1.5px solid #c7c9cd;
border-radius: 0.375rem;
padding: 0.275rem 0.75rem;
background: transparent;
color: #2563eb;
font-size: 0.875rem;
cursor: pointer;
}
.form-actions {
display: flex;
flex-direction: column;
align-items: center;
width: 100%; /* ensure it stays within form */
max-width: 100%; /* prevent flex stretching */
overflow-x: hidden; /* clip horizontal overflow */
}
#custom-generator .form-actions {
margin-bottom: 1.5rem;
}
#subscribe-modal .form-actions {
margin-top: 0;
padding-bottom: 1rem;
padding-top: 0;
}
.primary-btn {
width: 100%;
margin-top: 0;
padding: 0.6rem;
font-size: 0.9rem;
background: #566573;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s
}
.primary-btn:hover {
background: #2D3436;
}
#custom-generator .primary-btn {
padding: 0.6rem;
font-size: 0.9rem;
width: auto; /* optional: makes it shrink to fit text */
display: block;
margin-top: 1rem;
margin-left: auto;
margin-right: auto; /* keeps it centered */
background: #566573;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s
}
.form-group {
width: calc(100% + 0.3rem);
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0 1rem;
overflow: visible !important;
position: static !important;
}
#custom-generator input#custom-responsibilities {
box-sizing: border-box;
max-width: none !important;
width: calc(100% + 6rem) !important;
margin: 0 calc(-6rem / 2) !important;
}
.bullet-points-fieldset {
width: calc(100% + 24rem);
margin: 0 calc(-24rem / 2);
border: 1.5px solid #888;
padding: 1rem;
box-sizing: border-box;
display: block;
min-inline-size: auto;
position: relative;
left: 0;
transform: none;
}
.bullet-points-fieldset .desc-item {
width: 100%;
max-width: none;
font-size: 0.85rem;
box-sizing: border-box;
padding: 0.45rem 0.5rem;
margin: 0;
line-height: 1.2;
}
.bullet-points-fieldset .bullet-point-item {
gap: 0.5rem;
margin: 0;
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.bullet-points-fieldset {
width: calc(100% + 6rem);
margin: 0 -3rem;
left: 0;
transform: none;
}
}
@media (max-width: 600px) {
.bullet-points-list {
display: flex; /* stack items instead of grid */
flex-direction: column; /* vertical stacking */
gap: 0.5rem;
width: 100% !important; /* keep inside viewport */
max-width: 100% !important;
overflow-x: hidden; /* safeguard */
}
.bullet-point-item {
flex-wrap: nowrap;
align-items: center;
width: 100% !important; /* no side overflow */
max-width: 100% !important;
gap: 0.5rem;
}
}
@media (max-width: 600px) {
.bullet-point-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.bullet-point-item .desc-item {
flex: 1 1 auto; /* fill leftover space */
width: auto !important;
max-width: 100% !important; /* don’t force shrink */
}
.bullet-point-item button {
flex: 0 0 auto; /* keep button visible, don’t shrink */
}
}
@media (max-width: 600px) {
.bullet-points-fieldset {
width: 100% !important;
margin: 0 !important;
max-width: 100% !important;
}
}
/* Prevent global clamp */
.detail-card .form-input {
max-width: none !important;
}
/* Let generator children stretch horizontally */
#custom-flow-card .custom-card-content {
align-items: stretch !important;
text-align: center !important;
}
/* Job Title: 50% of the card width */
#custom-generator input#custom-role.form-input {
width: 50% !important;
max-width: 50% !important;
margin: 0 !important;
align-self: center !important; /* don’t center-shrink */
padding: 0.6rem;
}
/* Responsibilities + Job Description: always full width */
#custom-generator .bullet-points-fieldset .desc-item,
#custom-generator textarea#job-description {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
padding: 0.6rem 0.5rem;
}
/* Override fieldset layout inside custom generator */
#custom-generator .bullet-points-fieldset {
width: 100% !important; /* fit inside card */
max-width: 100% !important;
margin: 0 auto !important; /* center it */
padding: 1rem 1.25rem !important;/* add left/right padding */
border: 1.5px solid #888;
border-radius: 6px; /* optional: soften look */
box-sizing: border-box;
}
.custom-intro {
margin: 1rem;
margin-top: 0.1rem;
margin-bottom: 0;
padding: 0.1rem auto 0.3rem;
background: #eef9ff;
text-align: center;
border-radius: 6px;
overflow: hidden;
box-sizing: border-box;
}
.intro-content {
position: relative;
min-height: 3.8rem;
padding-bottom: 0;
margin-bottom: 0.3rem;
}
.intro-title {
font-size: 1rem;
color: var(--primary-color, #555e6d);
position: relative;
padding-left: 1.5rem;
margin-bottom: 0;
margin-top: 0.7rem;
padding-top: 0;
padding-bottom: 0.2rem;
text-align: center;
padding-left: 0;
font-weight: 600;
}
.intro-text {
font-size: 0.9rem;
color: var(--text-secondary, #555e6d);
}
@media (max-width: 600px) {
.custom-intro {
padding: 0.6rem 0.3rem;
max-width: 100%;
}
.intro-title {
font-size: 1rem;
margin-top: 0.5rem;
}
.intro-text {
font-size: 0.875rem;
margin-bottom: 0.1rem;
}
}
@media (max-width: 600px) {
#predefined-action .custom-card-content {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
#predefined-action .predefined-info {
border-right: none;
padding-right: 0;
margin-right: 0;
}
#predefined-action #go-grid-btn {
align-self: stretch;
margin: 0;
}
}
@media (max-width: 500px) {
.custom-cards {
flex-direction: column;
align-items: stretch;
padding: 0 1.1rem;
}
.custom-card {
flex: 1 1 100%;
max-width: 100%;
}
}
#loading-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
backdrop-filter: blur(4px);
background: rgba(0,0,0,0.4);
display: none;
z-index: 9999;
justify-content: center;
align-items: center;
}
.loading-spinner {
width: 48px;
height: 48px;
border: 5px solid #ccc;
border-top-color: #566573;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
box-shadow: 0 0 0px 1000px white inset !important;
-webkit-text-fill-color: #000 !important;
transition: background-color 5000s ease-in-out 0s;
}
input,
textarea,
select,
button {
font-family: inherit;
}
#custom-roles-card {
--custom-card-height: auto !important;
height: auto !important;
display: flex;
justify-content: center;
background-color: #daf0ff;
}
#custom-roles-card .divider {
border: none;
border-top: 1.5px solid #888;
margin: 0.7rem 0;
flex: 0 0 100%;
}
@media (max-width: 600px) {
#custom-roles-card .divider {
margin: 0.15rem 0 !important;
display: block !important;
width: 100%;
border: none;
border-top: 1.5px solid #888;
}
#custom-roles-card .custom-roles-title {
margin: 0 0 0.5rem !important;
}
}
#custom-roles-card .custom-roles-title {
text-align: center;
margin: 1.15rem 0 1.5rem;
width: 100%;
color: #555e6d;
font-size: 16px;
}
#generated-roles-list .card-title-text {
font-size: 0.8rem;
}
@media (max-width: 600px) {
#generated-roles-list .card-title-text {
font-size: 0.8rem;
padding-left: 0.2rem;
}
}
#custom-roles-card #generated-roles-list {
flex: 0 0 100%;
list-style: none;
padding: 0;
margin: 0 0 1rem 0;
}
#generated-roles-list li {
display: flex;
justify-content: flex-start;
padding: 0.5rem 0;
border-bottom: 1px solid #ddd;
}
#custom-roles-card #generated-roles-list li {
border-bottom: 1.2px solid rgba(0, 0, 0, 0.15) !important;
}
#custom-roles-card #generated-roles-list li:first-child {
border-top: 1.2px solid rgba(0, 0, 0, 0.15);
}
@media (max-width: 600px) {
#custom-roles-card #generated-roles-list {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box;
}
#custom-roles-card #generated-roles-list li {
display: flex !important;
align-items: center;
padding: 0.5rem 0 !important;
border-bottom: 1px solid #ddd;
width: 100%;
}
#custom-roles-card #generated-roles-list li .card-title {
display: inline-block !important;
flex: none !important;
width: auto !important;
margin: 0;
}
#custom-roles-card #generated-roles-list li .role-meta {
display: flex;
align-items: center;
margin-left: auto !important;
gap: 4px;
}
#custom-roles-card #generated-roles-list li .role-date,
#custom-roles-card #generated-roles-list li .role-action-btn {
margin: 0;
}
}
#generated-roles-list .date-icon {
display: inline-block;
margin-right: 0.25rem;
vertical-align: middle;
font-size: 1em;
}
.role-name {
font-weight: 500;
}
.role-date {
font-size: 0.875rem;
color: #777;
padding-right: 0.2rem;
}
.role-action-btn {
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.role-action-btn:focus {
outline: none;
box-shadow: none;
}
.role-action-btn img {
display: block;
width: 17px;
height: 17px;
background: none;
border: none;
}
.role-action-btn.delete-btn img {
width: 21px;
height: 19px;
position: relative;
top: 1px;
background: none;
border: none;
padding: 0;
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
#generated-roles-list .role-meta {
display: flex;
align-items: center;
margin-left: auto;
gap: 0.6rem;
}
#generated-roles-list .role-date,
#generated-roles-list .role-action-btn {
margin-left: 0 !important;
}
.roles-success {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #43a047;
color: #fff;
padding: 1rem 1.5rem;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 999;
font-size: 1rem;
display: none;
text-align: center;
white-space: nowrap;
width: max-content;
max-width: none;
}
.empty-state {
font-size: 0.875rem;
color: #777;
}
#open-custom-flow {
background: #566573;
padding: 0.55rem 0.8rem;
cursor: pointer;
transition: background 0.2s;
color: #fff;
border-radius: 5px;
margin-left: auto;
}
#open-custom-flow:hover {
background: #2D3436;
}
#custom-roles-card .custom-card-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0;
width: 100%;
}
#custom-roles-card .predefined-info {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 100%;
border-right: 1.5px solid #ccc;
padding-right: 6rem;
margin-right: 1rem;
box-sizing: border-box;
}
#custom-roles-card .predefined-info li {
display: flex;
align-items: center;
margin-bottom: 0.25rem;
}
#custom-roles-card .predefined-info li .icon {
margin-right: 0.5rem;
}
#custom-roles-card .predefined-info li .label {
font-size: 0.85rem;
letter-spacing: 0.02em;
color: #555e6d;
transition: color 0.2s, text-shadow 0.2s;
display: inline-flex;
align-items: center;
background-color: #f2f0ff;
border-radius: 5px;
padding: 1px 5px;
}
@media (max-width: 600px) {
#custom-roles-card .custom-card-content {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
#custom-roles-card .predefined-info {
border-right: none;
padding-right: 0;
margin-right: 0;
}
#custom-roles-card #open-custom-flow {
align-self: stretch;
margin: 0;
}
}
#custom-roles-card #open-custom-flow {
margin: 0 !important;
}
#custom-roles-card #generated-roles-list li .card-title {
margin: 0;
font-size: 1rem;
}
.tips_icon_popup {
position: absolute;
top: 100%;
right: 0;
width: 220px;
margin-top: 0.5px;
background: #fff;
border-radius: 8px;
padding: 0.75rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 20;
}
.tips-popup {
padding: 20px;
padding-right: calc(20px + env(safe-area-inset-right));
position: absolute;
width: 305px;
background: #ffffff;
overflow: visible !important;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
font-family: "Google Sans", sans-serif;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.08);
top: calc(100% + 10px);
right: 0;
z-index: 1000;
margin-top: 8px;
min-width: 300px !important;
max-width: 90vw !important;
white-space: nowrap !important;
}
.tips-popup__arrow {
display: block !important;
position: absolute;
top: -8px;
right: 14px;
width: 16px;
height: 16px;
background: #fff;
transform: rotate(45deg);
box-shadow: -2px -2px 4px rgba(0,0,0,0.05);
border-top-left-radius: 4px;
z-index: 10 !important;
}
.tips-popup__title {
color: #2d3748;
font-size: 0.95rem;
margin: 0 0 1px 0;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
gap: 8px;
}
.tip-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
}
.tip-item:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.tip-icon {
font-size: 1rem;
flex-shrink: 0;
}
.tip-text {
color: #4a5568;
font-size: 0.85rem;
line-height: 1.4;
text-align: center;
font-weight: normal !important;
}
.tips-popup--hidden {
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
pointer-events: none;
}
.tips-popup--visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.info-icon {
position: relative;
cursor: help;
font-size: 1rem;
margin-left: 0.25rem;
}
.info-icon .tooltip {
display: none;
position: absolute;
top: 1.25em; left: 50%;
transform: translateX(-50%);
background: #000; color: #fff;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
white-space: nowrap;
font-size: 0.75rem;
z-index: 10;
}
.info-icon:hover .tooltip {
display: block;
}
.summary-card {
background: #f3f4f6;
border-radius: 0.5rem;
padding: 1rem;
margin: 1rem 0;
text-align: center;
}
.internet-warning {
position: fixed;
bottom: 1rem;
right: 1rem;
max-width: 220px;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
font-size: 0.875rem;
line-height: 1.3;
text-align: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
z-index: 9999;
}
.internet-warning.show {
opacity: 1;
visibility: visible;
}
.internet-warning.hide {
opacity: 0;
visibility: hidden;
}
#progress-modal .progress-header {
display: flex;
align-items: center;
justify-content: space-between;
background: #111827
;
color: #fff;
padding: 0.5rem 0.75rem;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.progress-header h2 {
margin: 0;
font-size: 1.25rem
}
#progress-modal .progress-card {
background: #f3f4f6;
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 0.5rem;
text-align: center;
}
.progress-report-text {
font-size: 0.85rem;
color: #454545;
margin-bottom: 1rem;
margin-top: 0;
}
.next-date {
font-size: 0.85rem;
color: #454545;
margin-bottom: 0;
margin-top: 0;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.metric {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 0.75rem;
text-align: center;
}
.metric h3 {
margin: 0;
font-size: 0.9rem;
color: #333;
}
.metric p {
margin: 0.5rem 0 0;
font-size: 1.2rem;
font-weight: bold;
}
.progress-details {
overflow-y: auto;
flex: 1 1 auto;
padding: 0.5rem;
margin-top: 0.75rem;
}
#progress-modal .modal-content {
width: 100%;
display: flex;
flex-direction: column;
max-height: 87vh;
padding: 1rem;
overflow: hidden;
}
#progress-modal {
top: 7vh !important;
left: 50% !important;
max-height: 100vh;
width: 80vw !important;
max-width: 800px !important;
position: fixed !important;
transform: translateX(-50%) !important;
}
.twocol-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 1rem 0;
}
.twocol-list h4 {
margin-bottom: 0.5rem;
font-size: 1rem;
color: #333;
}
.twocol-list ul {
margin: 0;
padding-left: 1.2rem;
}
.twocol-list li {
margin-bottom: 0.25rem;
font-size: 0.95rem;
color: #444;
}
.progress-footer {
text-align: center;
margin-top: 1.5rem;
font-size: 0.8rem;
color: #555;
}
#metric-delta.positive {
color: #28cd7b;
}
#metric-delta.negative {
color: #e53e3e;
}
.charts-container {
min-height: 180px;
}
#progress-charts {
height: 180px !important;
min-height: 180px !important;
position: relative;
width: 100%;
}
#progress-charts canvas#trend-chart {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
#no-trend-data {
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform: none;
box-sizing: border-box;
max-width: 80%;
text-align: center;
padding: 0.5rem 0.5rem;
margin: 0 auto;
color: #555;
font-style: normal;
font-size: 0.85rem;
background: rgba(255, 255, 255, 0.8);
border-radius: 0.25rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
@media (min-width: 600px) {
#no-trend-data {
width: 60%;
font-size: 0.8rem;
top: 50%;
}
}
@media (max-width: 600px) {
#no-trend-data {
width: 95%;
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
}
@media (max-width: 600px) {
#progress-modal {
width: 90vw !important;
max-width: 95vw !important;
max-height: 88vh;
left: 50% !important;
transform: translateX(-50%) !important;
}
#progress-modal .modal-content {
width: 90vw !important;
max-width: 700px !important;
margin: 0 auto !important;
}
}
.progress-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 1rem 0;
}
/* Progress Modal list styling */
.progress-list h4 {
font-weight: 700; /* heavier heading */
font-size: 1rem; /* slightly larger */
margin-bottom: 0.4rem; /* space below heading */
color: #333; /* stronger color */
}
.progress-list ul {
list-style-type: disc; /* show bullets */
padding-left: 1.25rem; /* indent bullets */
margin: 0.25rem 0 1rem; /* vertical spacing */
}
.progress-list li {
margin-bottom: 0.3rem; /* space between items */
font-size: 0.9rem; /* keep items slightly smaller than h4 */
color: #555; /* softer text color */
}
/* Indigo card styling for progress list */
.progress-list {
background: #eef2ff; /* light indigo background */
border: 1px solid #c7d2fe; /* indigo border */
border-radius: 8px; /* smooth corners */
padding: 1rem 1.25rem; /* card padding */
margin-top: 1.2rem; /* spacing above */
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.progress-list h4 {
font-weight: 700;
font-size: 1rem;
margin-bottom: 0.4rem;
color: #555; /* darker indigo text */
}
.progress-list ul {
list-style-type: disc;
padding-left: 1.25rem;
margin: 0.25rem 0 1rem;
}
.progress-list li {
margin-bottom: 0.3rem;
font-size: 0.9rem;
color: #555; /* medium indigo text */
}
#recordings-modal {
position: fixed !important;
top: 10vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 80vw !important;
max-width: 800px !important;
margin: 0;
}
#recordings-modal .recordings-header {
display: flex;
align-items: center;
justify-content: space-between;
background: #192134;
color: #fff;
padding: 0.5rem 0.75rem;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.recordings-header h2 {
margin: 0;
font-size: 1.25rem
}
#recordings-modal .modal-content {
display: flex;
flex-direction: column;
width: 80vw !important;
max-width: 800px !important;
max-height: 80vh;
margin: 0 auto;
}
#recordings-modal .modal-header {
position: sticky;
top: 0;
z-index: 5;
background-color: #fff;
border-bottom: 1px solid #e5e7eb;
}
#recordings-modal .modal-content > header {
flex: 0 0 auto;
}
#recordings-modal .modal-content .recordings-card {
flex: 1 1 auto;
overflow-y: auto;
padding: 0;
}
#recordings-modal .modal-content > footer {
flex: 0 0 auto;
}
#recordings-modal .modal-body {
max-height: 65vh;
overflow-y: auto;
padding-top: 0;
}
.recordings-card {
background: #f3f4f6;
padding: 1rem;
margin: 1rem 0;
}
#recordings-modal .recording-item {
border-bottom: 1px solid #dce0e7;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
}
#recordings-modal .recording-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.recordings-list .recording-item {
display: block;
padding: 1rem;
background: #f3f4f6;
border-radius: 4px;
margin-bottom: 1rem;
}
.recording-item .question-text {
font-weight: normal;
margin-bottom: 0.5rem;
text-align: left;
}
.recording-item .controls {
display: flex;
gap: 0.75rem;
align-items: center;
justify-content: flex-start;
}
.recording-item span {
flex: 1;
font-size: 0.9rem;
color: #555;
}
.recording-item audio {
max-width: 200px;
}
.rec-action-btn {
font-size: 0.85rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
border: 1px solid #d1d5db;
background: #fff;
cursor: pointer;
text-decoration: none;
color: #333;
white-space: nowrap;
}
.rec-action-btn:hover {
background: #f3f4f6;
}
.rec-action-btn.danger {
border-color: #e53e3e;
color: #e53e3e;
}
.recordings-list .empty-state {
text-align: center;
color: #666;
font-style: normal;
margin: 2rem 0;
}
@media (max-width: 480px) {
#recordings-modal .recording-item .controls audio {
transform: scale(0.9);
transform-origin: left center;
}
}
@media (max-width: 600px) {
#recordings-modal {
width: 90vw !important;
max-width: 95vw !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
#recordings-modal .modal-content {
width: 90vw !important;
max-width: 700px !important;
margin: 0 auto !important;
}
}
#profile-modal {
position: fixed !important;
top: 2vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 70vw !important;
max-width: 700px !important;
margin: 0;
}
#edit-questions-modal {
position: fixed !important;
top: 7vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 70vw !important;
max-width: 700px !important;
margin: 0;
}
@media (max-width: 640px) {
#edit-questions-modal {
width: 95vw !important; /* almost full width */
max-width: none !important; /* drop 700px cap */
left: 50% !important;
transform: translateX(-50%) !important;
}
}
#profile-modal .modal-content {
display: flex;
flex-direction: column;
width: 70vw !important;
max-width: 700px !important;
margin: 0 auto;
}
.profile-item {
display: flex;
flex-direction: row;
background-color: #F7F8FA;
border-radius: 8px;
padding: 0.75rem 1rem;
margin-bottom: 0.75rem;
}
.profile-left {
display: flex;
flex-direction: row;
align-items: center;
width: 50%;
}
.profile-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.75rem;
color: #4285F4;
}
.icon-small {
display: block;
width: 16px;
height: 14px;
margin: 0;
}
.profile-label {
font-size: 0.9rem;
font-weight: 500;
color: #555E6D;
letter-spacing: 0.5px;
margin: 0;
padding: 0;
white-space: nowrap;
}
.profile-right {
display: flex;
align-items: center;
justify-content: flex-start;
width: 50%;
overflow: hidden;
}
.profile-value {
display: inline-block;
background-color: #add4ee;
border-radius: 4px;
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: #555E6D;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
box-sizing: border-box;
}
#profile-cta-row {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 600px) {
#profile-modal {
top: 2vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 90vw !important;
max-width: none !important;
}
#profile-modal .modal-content {
width: 90vw !important;
max-width: 700px;
padding: 1rem;
margin: 0;
z-index: 1000;
}
.profile-header {
display: flex;
flex-direction: row;
align-items: baseline;
width: 100%;
}
.profile-icon {
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}
.icon-small {
width: 18px;
height: 16px;
display: block;
margin: 0;
padding: 0;
padding-bottom: 0;
}
.profile-label {
display: inline-block;
font-size: 0.9rem;
line-height: 16px;
font-weight: 500;
color: #555E6D;
letter-spacing: 0.5px;
text-align: left;
margin-left: 0.5rem;
padding-top: 0.2rem;
margin-bottom: 0;
}
.profile-item {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0.5rem;
margin-bottom: 0.5rem;
}
.profile-left {
width: 100%;
display: flex;
align-items: center;
}
.profile-right {
width: 100%;
margin-top: 0.5rem;
margin-left: 0.5rem;
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
}
.profile-value {
display: inline-block;
background-color: #add4ee;
border-radius: 4px;
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: #555E6D;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
box-sizing: border-box;
}
#profile-cta-row .primary-btn {
width: 100%;
max-width: none;
margin-top: 0.5rem;
}
.profile-item:last-of-type {
margin-bottom: 0.5rem;
}
}
.payment-options {
display: flex;
justify-content: space-around;
margin: 1rem 0;
}
.payment-btn {
width: 4rem;
height: 3.8rem;
padding: 0;
font-size: 0.9rem;
border-radius: 6px;
border: 1px solid #ccc;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
transition: background-color 0.2s;
}
.payment-btn:hover {
background: #eee;
}
.payment-logo {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 6px;
transition: transform 0.2s, filter 0.2s;
}
.payment-btn:hover .payment-logo {
transform: scale(1.1);
filter: brightness(1.1);
}
.static-field {
width: calc(100% - 0.27rem);
padding: 0.5rem;
background-color: #e9ecef;
border: 1px solid #adb5bd;
border-radius: 4px;
font-size: 1rem;
color: #495057;
user-select: none;
}
#subscribe-modal .summary-card .payment-opt {
font-size: 0.95rem;
color: #555e6d;
font-weight: 500;
}
#subscribe-modal .summary-card .payment-desc {
font-size: 0.9rem;
background-color: #daf0ff;
display: inline-flex;
padding: 0.5rem;
border-radius: 5px;
margin: 0.2rem;
}
#subscribe-modal .input-label {
font-size: 0.9rem;
font-weight: 500;
color: #555e6d;
}
#subscribe-modal .bullet-points-fieldset {
width: 100%;
margin: 1rem;
border: 1px solid #888;
padding: 1rem;
box-sizing: border-box;
display: block;
min-inline-size: auto;
position: relative;
transform: none;
justify-self: center;
}
#subscribe-modal .subscribe-mobile {
font-size: 0.9rem;
margin-top: 1.7rem;
margin-bottom: 0;
font-weight: 500;
color: #555e6d;
}
#subscribe-modal .form-input {
width: calc(100% - 0.27rem);
padding: 0.6rem;
border: 1px solid var(--border-color);
border-radius: 4px;
left: 0;
border: 1px solid #ccc;
transform: none;
font-size: 0.9rem;
font-weight: 500;
color: #555e6d;
}
#subscribe-modal .primary-btn {
width: calc(100% - 2rem);
margin-top: 1.5rem;
padding: 0.6rem;
font-size: 0.9rem;
background: #4F46E5;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
#subscribe-modal .primary-btn:hover {
background: #4338CA;
}
.react-primary-btn {
width: calc(100% - 2rem);
margin-top: 1.5rem;
padding: 0.6rem;
font-size: 0.9rem;
background: #4F46E5;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
.react-primary-btn:hover {
background: #4338CA;
}
#subscribe-modal .summary-card {
background: #f3f4f6;
border-radius: 0.5rem;
padding: 1rem;
padding-bottom: 0;
padding-top: 0.3rem;
margin: 0;
text-align: center;
}
#subscribe-modal .modal-content {
background: #fff;
padding: 1rem;
padding-bottom: 0.1rem;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
position: relative;
display: flex;
flex-direction: column;
}
@media (max-width: 600px) {
#subscribe-modal .close-flow-btn {
position: absolute;
top: 0.50rem;
right: 0.9rem;
background: #d8dce6;
border: 1px solid #ccc;
border-radius: 50%;
padding: 0.5rem;
font-size: 1rem;
line-height: 1;
cursor: pointer;
color: #555;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
}
.payment-input {
position: relative;
display: inline-flex;
align-items: center;
}
.payment-input .form-input {
position: relative;
z-index: 1;
}
.payment-input input#subscribe-mobile.form-input {
padding-left: 40px;
}
#subscribe-mobile {
padding-left: 35px !important;
}
.payment-input::before {
content: "";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border-radius: 50%;
display: none;
z-index: 2;
}
.payment-input.zamtel::before {
display: block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;utf8, ");
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
.payment-input.mtn::before {
display: block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;utf8, ");
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
.payment-input.airtel::before {
display: block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;utf8, ");
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
#subscribe-modal.modal {
width: 80vw; /* use wider space */
max-width: 720px; /* good balance for 2 columns */
height: auto;
}
/* Header refinement */
#subscribe-modal .modal-header {
padding: 0.5rem 1rem; /* less vertical padding */
background: #1f2937; /* keep dark bar */
border-bottom: 1px solid #e5e7eb;
}
#subscribe-modal .modal-header h2 {
font-size: 1.3rem; /* smaller, professional */
font-weight: 500;
color: #fff;
margin: 0;
}
/* Flex layout for modal body */
#subscribe-modal .subscribe-body {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1rem 0.2rem;
}
#subscribe-modal .info-card {
background: linear-gradient(135deg, #eef2ff 0%, #f9fafc 100%);
border-radius: 0.75rem;
padding: 1.5rem 1.25rem;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
flex: 1 1 55%; /* grow slightly more than half */
min-width: 340px;
max-width: 480px;
display: flex;
flex-direction: column;
gap: 1rem;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#subscribe-modal .info-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}
#subscribe-modal .info-title {
font-size: 1.2rem;
font-weight: 700;
text-align: center;
background: linear-gradient(90deg, #4F46E5, #4338CA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.5rem;
}
#subscribe-modal .info-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
#subscribe-modal .info-list li {
display: flex;
align-items: center;
font-size: 0.9rem;
color: #374151;
padding: 0.4rem 0.6rem;
border-radius: 0.5rem;
transition: background 0.2s ease;
}
#subscribe-modal .info-list li::before {
content: "✔";
color: #22c55e;
font-weight: bold;
margin-right: 0.5rem;
}
#subscribe-modal .info-list li:hover {
background: rgba(79,70,229,0.05);
}
#subscribe-modal .info-footer {
font-size: 0.75rem;
color: #6b7280;
text-align: center;
background: #f3f4f6;
border-radius: 0.5rem;
padding: 0.75rem;
margin-top: auto;
line-height: 1.4;
}
/* On mobile: stack info above payment card */
@media (max-width: 640px) {
#subscribe-modal .subscribe-body {
flex-direction: column;
}
#subscribe-modal .info-card {
max-width: 100%;
}
}
.center-popup-pending {
background-color: #fff;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
font-size: 1rem;
color: #333;
max-width: 80%;
text-align: center;
}
.center-popup-success {
background-color: #22c55e;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-size: 1rem;
color: white;
max-width: 80%;
text-align: center;
opacity: 0.95;
}
.center-popup {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
color: #333;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}
.center-popup-content {
background-color: #fff;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
font-size: 1rem;
color: #333;
max-width: 80%;
text-align: center;
}
.header-controls {
display: flex;
align-items: center;
position: relative;
margin-left: auto;
}
#confirm-modal .modal-content {
max-width: 540px;
padding: 0 1rem;
text-align: center;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#confirm-modal {
display: flex;
align-items: center;
justify-content: center;
z-index: 10001 !important;
}
.role-delete-button {
background-color: #4285f4;
border: none;
color: #fff;
padding: 1rem 1rem;
margin: 1rem;
font-size: 0.9rem;
height: 30px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.role-delete-button:hover {
background: var(--accent-hover, #496eb2);
transform: translateY(-2px);
}
#confirm-modal #confirm-message {
margin-top: 2.5rem;
padding: 0.5rem;
font-size: 0.9rem;
}
#confirm-modal #confirm-message .confirm-icon {
font-size: 0.85rem;
margin-right: 0.5ch;
position: relative;
top: -1.5px;
}
#edit-questions-modal #edit-questions-list li {
position: relative;
}
#edit-questions-modal #edit-questions-list li .remove-q-btn {
position: absolute;
top: 50%;
right: 0.5rem;
transform: translateY(-50%);
width: 1.6rem;
height: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #c7c9cd !important;
border-radius: 50%;
color: #e53e3e !important;
font-size: 1rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: background 0.2s, color 0.2s;
}
#edit-questions-modal #edit-questions-list li .remove-q-btn:hover {
background: #e53e3e !important;
color: #fff !important;
}
.add-question-success {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(40, 167, 69, 0.9);
color: #fff;
padding: 0.2rem 1rem;
border-radius: 0.5rem;
font-size: 1rem;
z-index: 11000;
text-align: center;
}
#contact-modal {
position: fixed !important;
top: 7vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 60vw !important;
max-width: 500px !important;
margin: 0;
}
#contact-modal .summary-card {
background: none;
border: none;
box-shadow: none;
padding: 0 1rem;
}
#contact-modal .contact-btn {
background-color: #4285f4;
border: none;
color: #fff;
padding: 1rem 1rem;
font-size: 0.9rem;
height: 40px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
text-align: center;
transition: background 0.2s ease, transform 0.2s ease;
}
#contact-modal .contact-btn:hover {
background: var(--accent-hover, #496eb2);
transform: translateY(-2px);
}
#contact-modal .modal-content {
max-width: 500px !important;
width: 60vw !important;
}
#contact-modal #contact-greeting {
font-size: 1.5rem;
font-weight: 600;
color: #222;
margin-bottom: 0.75rem;
}
#contact-modal .summary-card > p:nth-of-type(2) {
font-size: 1rem;
color: #555;
line-height: 1.6;
}
#contact-modal .input-label {
display: block;
font-size: 0.9rem;
font-weight: 600;
color: #333;
margin-bottom: 0.25rem;
}
#contact-modal .form-input {
font-size: 1rem;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
}
#contact-modal .form-error {
font-size: 0.85rem;
color: #c00;
margin-top: 0.25rem;
}
@media (max-width: 600px) {
#contact-modal .modal-content {
position: fixed !important;
top: 2vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 90vw !important;
max-width: unset !important;
padding: 1rem !important;
box-sizing: border-box;
border-radius: 0.5rem;
max-height: 86vh;
overflow-y: auto;
}
#contact-modal #contact-greeting {
font-size: 1.25rem !important;
margin-bottom: 0.5rem !important;
}
#contact-modal .summary-card > p:nth-of-type(2) {
font-size: 0.9rem !important;
line-height: 1.4 !important;
}
#contact-modal .form-group {
margin-bottom: 0 !important;
}
#contact-modal .form-input {
width: 100% !important;
font-size: 0.95rem !important;
}
#contact-modal textarea.form-input {
min-height: 120px !important;
}
#contact-modal .contact-btn {
display: inline-flex;
padding: 0.75rem !important;
font-size: 1rem !important;
}
#contact-modal .summary-card {
padding: 0 1rem;
}
}
#terms-modal {
position: fixed !important;
top: 5vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 80vw !important;
max-width: 800px !important;
z-index: 10002 !important;
}
#terms-modal.open {
display: flex !important;
}
#terms-modal .modal-content > header {
flex: 0 0 auto;
}
#terms-modal .modal-content {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
max-height: 86vh;
overflow: hidden;
}
#terms-modal .terms-container {
padding: 1rem;
margin: 0;
flex: 1 1 auto;
overflow-y: auto;
}
#terms-modal .modal-content .summary-card {
flex: 1 1 auto;
overflow-y: auto;
}
#about-modal .close-flow-btn,
#contact-modal .close-flow-btn,
#profile-modal .close-flow-btn,
#recordings-modal .close-flow-btn,
#terms-modal .close-flow-btn {
position: absolute;
top: 0.55rem;
right: 0.9rem;
background: #d8dce6;
border: 1px solid #ccc;
border-radius: 50%;
padding: 0.5rem;
font-size: 1rem;
line-height: 1;
cursor: pointer;
color: #555;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
#subscribe-modal .close-flow-btn {
position: absolute;
top: 0.5rem;
right: 0.9rem;
background: #d8dce6;
border: 1px solid #ccc;
border-radius: 50%;
padding: 0.5rem;
font-size: 1rem;
line-height: 1;
cursor: pointer;
color: #555;
width: 1.8rem;
height: 1.8rem;
display: flex;
align-items: center;
justify-content: center;
}
#progress-modal .close-flow-btn {
position: absolute;
top: 0.40rem;
right: 0.9rem;
background: #d8dce6;
border: 1px solid #ccc;
border-radius: 50%;
padding: 0.5rem;
font-size: 1rem;
line-height: 1;
cursor: pointer;
color: #555;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
#terms-modal .close-flow-btn:hover {
background: #f2f2f2;
border-color: #999;
}
@media (max-width: 600px) {
#progress-modal,
#recordings-modal,
#contact-modal,
#profile-modal,
#about-modal,
#terms-modal,
#subscribe-modal {
top: 4vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
}
@media (min-width: 480px) {
#progress-modal,
#recordings-modal,
#contact-modal,
#profile-modal,
#about-modal,
#subscribe-modal {
top: 4vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
}
@media (max-width: 600px) {
#terms-modal {
top: 2vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 90vw !important;
max-width: 95vw !important;
margin: 0 auto !important;
height: 86vh !important;
}
#terms-modal .modal-content {
border-radius: 0.5rem;
max-height: 86vh;
padding: 1rem;
}
#terms-modal .modal-content > header {
padding: 0.5rem 0.75rem;
font-size: 1rem;
}
#terms-modal .terms-container,
#terms-modal .summary-card {
padding: 0.75rem;
}
}
#about-modal {
position: fixed !important;
top: 5vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 80vw !important;
max-width: 800px !important;
z-index: 10002 !important;
}
#about-modal .modal-content {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 6px;
max-height: 90vh;
overflow: hidden;
}
#about-modal header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #e5e7eb;
}
#about-modal header h2 {
margin: 0;
font-size: 1.25rem;
color: #fff;
}
#about-modal .modal-body {
padding: 1rem 1.5rem;
margin-top: 1rem;
overflow-y: auto;
color: #374151;
line-height: 1.5;
}
#about-modal .modal-body ul {
list-style: none;
padding-left: 0;
margin: 0.5rem 0;
}
#about-modal .modal-body ul li {
list-style: none;
margin: 0.5rem 0;
display: flex;
align-items: flex-start;
}
#about-modal .modal-body ul li::before {
margin-right: 0.5rem;
color: #00aaff;
font-weight: bold;
}
#about-modal .modal-body .features-list {
background-color: #f0f9ff;
padding: 1rem 1.5rem;
border-radius: 6px;
margin: 1rem 0;
list-style: none;
}
#about-modal .modal-body .features-list li {
margin-bottom: 0.75rem;
padding-left: 0;
text-indent: 0;
}
@media (min-width: 641px) {
#about-modal .modal-body ul li {
display: block;
text-indent: 0;
margin: 0.75rem 0;
line-height: 1.5;
padding-left: 1.2em;
text-indent: -1.2em;
}
#about-modal .modal-body ul {
padding-left: 0;
}
#about-modal .modal-body ul li strong {
white-space: nowrap;
}
#about-modal .modal-body .features-list li {
padding-left: 1.2em;
text-indent: -1.2em;
}
}
@media (max-width: 600px) {
#about-modal {
top: 2vh !important;
width: 90vw !important;
max-width: none !important;
border-radius: 4px !important;
}
#about-modal .modal-content {
max-height: 86vh;
border-radius: 4px;
padding: 1rem;
}
#about-modal header {
padding: 0.5rem 0.75rem;
}
#about-modal header h2 {
font-size: 1rem;
}
#about-modal .modal-body {
padding: 0.75rem 0.1rem;
}
}
@media (max-width: 600px) {
#about-modal .modal-body ul {
list-style: none;
padding-left: 0;
margin-left: 0;
}
#about-modal .modal-body ul li {
display: block;
padding-left: 1.25rem;
text-indent: -1.25rem;
margin: 0.5rem 0;
line-height: 1.4;
list-style: none;
}
#about-modal .modal-body ul li strong {
display: inline;
font-weight: bold;
}
#about-modal .modal-body ul li strong::after {
content: "";
display: block;
margin: 0.25rem 0;
}
#about-modal .modal-body ul {
padding-left: 0;
}
}
@keyframes glow-blue {
0%, 100% {
box-shadow: 0 0 6px rgba(0, 170, 255, 0.6);
}
50% {
box-shadow: 0 0 20px rgba(0, 170, 255, 0.8);
}
}
#about-us.btn {
position: relative;
z-index: 1;
animation: glow-blue 2s infinite ease-in-out;
transition: transform 0.2s ease;
border: 0.2rem solid transparent !important;
border-radius: 8px;
}
#about-us.btn:hover {
background-color: transparent !important;
transform: translateY(-2px);
animation-play-state: running;
}
#about-us.btn {
background-color: transparent !important;
border: non;
box-shadow: none;
border: 0.2rem solid transparent !important;
border-radius: 8px;
}
#about-us.btn {
background-color: transparent !important;
animation: glow-blue 2s infinite ease-in-out;
border: 0.2rem solid transparent !important;
border-radius: 8px;
}
#about-us.btn,
#about-us.btn:link,
#about-us.btn:visited,
#about-us.btn:hover,
#about-us.btn:active,
#about-us.btn:focus,
#about-us.btn * {
text-decoration: none !important;
border: none !important;
outline: none !important;
border: 0.15rem solid transparent !important;
padding: 0.1px 3.2px;
border-radius: 5px;
}
#about-us.btn::before,
#about-us.btn::after {
display: none !important;
content: none !important;
border: 0.15rem solid transparent !important;
padding: 0.1px 3.2px;
border-radius: 5px;
}
#contact-form {
background-color: #f0f9ff;
border: 1px solid #e5e7eb;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
padding: 1rem;
margin: 0 auto 0;
width: calc(100% - 2rem);
max-width: 600px;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
#contact-form .contact-btn {
align-self: center;
padding: 0.5rem 1rem;
}
@media (max-width: 600px) {
#contact-form {
width: 100%;
padding: 0.75rem;
margin-bottom: 1rem;
}
}
#answer-button:disabled {
opacity: 1 !important;
cursor: default !important;
pointer-events: none;
}
button, a, .header-icons {
touch-action: manipulation;
cursor: pointer;
}
@media (max-width: 480px) {
#recordings-modal .recording-item .controls audio {
transform: none !important;
width: 100% !important;
}
}
.tips-popup, #tips-popup {
white-space: nowrap;
overflow-x: auto;
}
.tips-popup .tip-item,
.tips-popup .tip-text {
white-space: nowrap !important;
}
.bullet-point-item.template {
display: none;
}
#add-personal-detail {
margin-top: 0;
display: inline-block;
width: max-content;
margin: 1rem auto 0;
border: 1.5px solid #c7c9cd;
border-radius: 0.375rem;
padding: 0.275rem 0.75rem;
background: transparent;
color: #2563eb;
font-size: 0.875rem;
cursor: pointer;
}
.bullet-points-list .bullet-point-item.template {
display: none !important;
}
.bullet-points-list .bullet-point-item:not(.template) {
display: flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.5rem;
}
.bullet-points-list .bullet-point-item:not(.template) .form-input {
flex: 1;
min-width: 0;
box-sizing: border-box;
}
.bullet-points-list .bullet-point-item:not(.template) .remove-btn {
flex: none;
width: 1.5rem;
height: 1.5rem;
padding: 0;
font-size: 1rem;
line-height: 1;
background-color: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
color: #555;
cursor: pointer;
}
#personal-details-list {
display: block;
min-width: 275px;
width: auto;
max-width: 290px;
margin: 0 auto;
margin-right: 0;
}
#personal-details-list .bullet-point-item:not(.template) .form-input {
width: 100%;
box-sizing: border-box;
}
#add-personal-detail:hover,
.add-button:hover {
color: #2563eb;
background-color: #d8dce6;
}
.header-icon-btn {
background: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
margin: 0 1.1rem;
transition: transform 0.2s ease;
right: 6rem;
display: inline-block;
vertical-align: middle;
}
.header-icon-btn:hover {
transform: scale(1.1);
}
/* Small circular spinner */
.loader {
width: 16px;
height: 16px;
border-radius: 50%;
background: conic-gradient(#2563eb 0deg 180deg, #e5e7eb 180deg 360deg);
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0);
mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0);
}
.animate-spin {
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fade-in 0.8s ease forwards;
}
.animate-fade-in.delay-200 { animation-delay: 0.2s; }
.animate-fade-in.delay-400 { animation-delay: 0.4s; }
/* Rotate chevron when details open */
details[open] summary .chevron {
transform: rotate(180deg);
}
#custom-generator .form-actions.error::before {
content: attr(data-error);
display: block;
color: #d9534f;
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
/* Fullscreen overlay */
.page-loader {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
/* Multi-ring loader */
.multi-ring {
position: relative;
width: 80px;
height: 80px;
}
.multi-ring .ring {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: #4f46e5; /* indigo */
animation: spin 1.2s linear infinite;
transform: translate(-50%, -50%);
}
/* Outer ring */
.multi-ring .ring:nth-child(1) {
width: 80px;
height: 80px;
animation-duration: 1.5s;
}
/* Middle ring */
.multi-ring .ring:nth-child(2) {
width: 55px;
height: 55px;
animation-duration: 1s;
border-top-color: #6366f1; /* lighter indigo */
}
/* Inner ring */
.multi-ring .ring:nth-child(3) {
width: 30px;
height: 30px;
animation-duration: 0.8s;
border-top-color: #818cf8; /* even lighter indigo */
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.animate-slide-up {
animation: slide-up 0.3s ease-out;
}