/* _content/CMSite/Components/CrudModal.razor.rz.scp.css */
.modal-dialog.modal-fullscreen[b-zxk24kckle] {
width: 100%;
height: 100vh; /* force full viewport height */
margin: 0;
padding: 0;
}
.modal-content[b-zxk24kckle] {
display: flex;
flex-direction: column;
height: 100%; /* fill parent */
min-height: 0; /* allow flex shrinking */
}
.modal-body[b-zxk24kckle] {
flex: 1 1 auto; /* take remaining space */
min-height: 0; /* allow flex shrink for scrolling */
overflow-y: auto;
overflow-x: hidden;
}
/* Prevent horizontal overflow of inner content */
.modal-body .modal-inner-content[b-zxk24kckle] {
min-width: 0;
}
/* Optional: style scrollbar */
.modal-body[b-zxk24kckle]::-webkit-scrollbar {
width: 8px;
}
.modal-body[b-zxk24kckle]::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.3);
border-radius: 4px;
}
/* _content/CMSite/Components/GenericUpload.razor.rz.scp.css */
/* =========================================
MODERN POSTER UPLOAD UI
========================================= */
.poster-upload[b-whkjcgbuzu] {
width: 100%;
margin-bottom: 1.5rem;
}
/* Upload box */
.poster-upload-area[b-whkjcgbuzu] {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 260px; /* reduced from 360px */
background: #f4f4f4;
border-radius: 14px;
border: 2px dashed #cfcfcf;
cursor: pointer;
position: relative;
overflow: hidden;
transition: border-color .25s ease, background .25s ease;
}
/* Hover effect */
.poster-upload-area:hover[b-whkjcgbuzu] {
border-color: #999;
background: #ededed;
}
/* Placeholder (before selecting image) */
.poster-placeholder[b-whkjcgbuzu] {
text-align: center;
color: #777;
font-size: 1.1rem;
display: flex;
flex-direction: column;
align-items: center;
}
.upload-icon[b-whkjcgbuzu] {
font-size: 42px;
margin-bottom: 10px;
color: #666;
}
/* Previewed image (after upload) */
.poster-preview[b-whkjcgbuzu] {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* never crops or stretches */
display: block;
}
/* Responsive */
@media (max-width: 768px) {
.poster-upload-area[b-whkjcgbuzu] {
height: 220px;
}
}
/* _content/CMSite/Components/Heros/Hero2.razor.rz.scp.css */
/* HERO CONTAINER */
.event-hero[b-amaclo5j5h] {
position: relative;
width: 100%;
height: 380px;
overflow: hidden;
background: #000;
}
/* BLURRED BACKGROUND */
.event-hero-bg[b-amaclo5j5h] {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(3px) brightness(0.45);
transform: scale(1.1); /* Prevent edge clipping */
z-index: 1;
}
/* CLEAR IMAGE IN FRONT */
.event-hero-main-img[b-amaclo5j5h] {
position: absolute;
top: 50%;
left: 50%;
max-height: 85%;
max-width: 90%;
height: auto;
width: auto;
transform: translate(-50%, -50%);
z-index: 2;
border-radius: 12px;
border: 3px solid rgba(255, 255, 255, 0.65); /* Soft border */
box-shadow: 0 8px 25px rgba(0,0,0,0.45);
}
/* TEXT OVERLAY */
.event-hero-overlay[b-amaclo5j5h] {
position: absolute;
left: 0;
bottom: 0;
padding: 2rem;
width: 100%;
z-index: 3;
background: linear-gradient(transparent, rgba(0,0,0,0.75));
color: white;
}
.event-hero-title[b-amaclo5j5h] {
font-size: 2.2rem;
font-weight: 800;
margin: 0 0 0.3rem 0;
}
.event-hero-date[b-amaclo5j5h] {
font-size: 1.15rem;
opacity: 0.9;
}
.event-hero-title[b-amaclo5j5h] {
pointer-events: none;
}
/* _content/CMSite/Components/Heros/Hero3.razor.rz.scp.css */
.event-hero[b-amvdol60kb] {
position: relative;
width: 100%;
height: 350px; /* make bigger if you want */
background-size: cover;
background-repeat: no-repeat;
background-position: top;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
/* Dark overlay behind text */
.event-hero-overlay[b-amvdol60kb] {
background: rgba(0, 0, 0, 0.45);
padding: 40px 60px;
border-radius: 12px;
text-align: center;
}
.event-hero-title[b-amvdol60kb] {
font-size: 3rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.event-hero-date[b-amvdol60kb] {
font-size: 1.3rem;
margin-top: 0;
}
/* _content/CMSite/Components/Upload/UploadControl.razor.rz.scp.css */
.upload-control[b-xrq0ffmnhy] {
background: var(--bg);
border-radius: var(--br);
padding: 10px;
border: 1px solid var(--border);
margin-bottom: 10px;
width: 100%;
}
.upload-control .validation-message[b-xrq0ffmnhy] {
white-space: nowrap;
margin: auto;
margin-top: 10px;
}
.upload-control .button[b-xrq0ffmnhy] {
margin-left: 0;
}
.upload-control .file-preview[b-xrq0ffmnhy] {
margin-top: 10px;
}
.upload-control .file-preview .message[b-xrq0ffmnhy] {
font-size: 12px;
margin-top: 10px;
}
.upload-control .file-preview .subtitle[b-xrq0ffmnhy] {
border-bottom: none;
margin-bottom: 0;
}
.upload-control .file-preview .individual-file[b-xrq0ffmnhy] {
display: flex;
border-radius: var(--br);
font-weight: 600;
align-items: center;
}
.upload-control .file-preview .individual-file .image[b-xrq0ffmnhy] {
width: 40px;
height: 40px;
border: 1px solid var(--border);
border-radius: var(--br);
margin-right: 10px;
}
.upload-control .file-preview .individual-file .filename[b-xrq0ffmnhy] {
flex-grow: 1;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
}
.upload-control .file-preview .individual-file .button[b-xrq0ffmnhy] {
align-self: center;
}
/* _content/CMSite/Pages/Accountancy/Companies/CompaniesHouse.razor.rz.scp.css */
/* ============================
Left Section (Period Overview)
============================ */
.left-side[b-d8jdtdqcu2] {
width: 100%; /* Full width on mobile */
margin-bottom: 15px; /* Space between sections */
}
.left-side strong[b-d8jdtdqcu2] {
font-size: 1.05rem;
}
.left-side span[b-d8jdtdqcu2] {
color: #666;
font-size: 0.9rem;
}
/* ============================
Right Section (Status Details)
============================ */
.right-side[b-d8jdtdqcu2] {
width: 100%; /* Full width on mobile */
font-size: 0.95rem;
}
.right-side div[b-d8jdtdqcu2] {
padding: 3px 0;
}
/* ============================
Edit Button Area
============================ */
.edit-actions[b-d8jdtdqcu2] {
display: flex;
align-items: center;
margin-top: 10px;
justify-content: flex-start;
}
/* ============================
Styling for Alert Status Classes
============================ */
.alert-danger[b-d8jdtdqcu2] {
background-color: #f8d7da;
color: #721c24;
border-color: #f5c6cb;
}
.alert-warning[b-d8jdtdqcu2] {
background-color: #fff3cd;
color: #856404;
border-color: #ffeeba;
}
/* _content/CMSite/Pages/Accountancy/Companies/CompanyPeriodList.razor.rz.scp.css */
/* ===============================
FINANCIAL PERIOD CARD (Matches Confirmation Statement)
=============================== */
/* Base card layout */
.fp-card[b-0nw7yx5rk1] {
display: flex;
justify-content: space-between;
padding: 15px 20px;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
margin-bottom: 15px;
position: relative;
transition: box-shadow 0.2s ease, transform 0.15s ease;
}
/* Hover effect */
.fp-card:hover[b-0nw7yx5rk1] {
transform: translateY(-2px);
box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
/* ===============================
LEFT COLOUR STATUS BAR
=============================== */
.status-bar[b-0nw7yx5rk1] {
width: 8px;
border-radius: 6px;
margin-right: 14px;
}
/* Colour states */
.fp-red[b-0nw7yx5rk1] {
background-color: #dc3545;
}
.fp-yellow[b-0nw7yx5rk1] {
background-color: #ffc107;
}
.fp-green[b-0nw7yx5rk1] {
background-color: #28a745;
}
.fp-blue[b-0nw7yx5rk1] {
background-color: #0d6efd;
}
/* ===============================
LEFT SIDE CONTENT
=============================== */
.fp-left[b-0nw7yx5rk1] {
display: flex;
flex-direction: column;
gap: 4px;
}
.fp-title[b-0nw7yx5rk1] {
font-size: 17px;
font-weight: 700;
margin-bottom: 4px;
}
.label[b-0nw7yx5rk1] {
font-weight: 600;
}
/* Filed / Not filed */
.filed[b-0nw7yx5rk1] {
color: #0b6e28;
}
.not-filed[b-0nw7yx5rk1] {
color: #b30000;
}
/* ===============================
FINES SECTION (No left bar, soft red box)
=============================== */
.fine-block[b-0nw7yx5rk1] {
background: #fdecef; /* soft red background */
border: 1px solid #f5c2c7; /* soft border */
border-radius: 6px;
padding: 10px 12px;
margin-top: 10px;
font-size: 14px;
}
.fine-block strong[b-0nw7yx5rk1] {
color: #b30000;
}
.fine-hmrc[b-0nw7yx5rk1] {
}
.fine-ch[b-0nw7yx5rk1] {
}
/* Optional: slightly darker border for CH */
.fine-ch[b-0nw7yx5rk1] {
border-color: #d98a8a;
}
.fine-item[b-0nw7yx5rk1] {
color: #a80000;
padding-left: 18px;
}
/* ===============================
RIGHT SIDE
=============================== */
.fp-right[b-0nw7yx5rk1] {
display: flex;
align-items: center;
}
/* ===============================
GRID LAYOUT
=============================== */
.fp-grid[b-0nw7yx5rk1] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 20px;
margin-top: 20px;
}
/* ===============================
RESPONSIVENESS
=============================== */
@media(max-width: 768px) {
.fp-card[b-0nw7yx5rk1] {
flex-direction: column;
}
.fp-right[b-0nw7yx5rk1] {
margin-top: 12px;
}
}
/* _content/CMSite/Pages/Accountancy/Companies/ConfirmationStatementList.razor.rz.scp.css */
/* Container */
.confirmation-container[b-xrmcffv31e] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 20px;
}
/* Base Card */
.cs-card[b-xrmcffv31e] {
border-radius: 10px;
padding: 15px 20px;
display: flex;
justify-content: space-between;
transition: 0.2s ease;
border-left: 6px solid transparent;
background: #f9f9f9;
}
/* Left + Right columns */
.cs-left[b-xrmcffv31e], .cs-right[b-xrmcffv31e] {
display: flex;
flex-direction: column;
gap: 5px;
}
.cs-label[b-xrmcffv31e] {
font-weight: bold;
color: #444;
font-size: 0.9rem;
}
/* ============================== */
/* STATUS COLOUR THEMES */
/* ============================== */
/* FILED β Green */
.cs-card.filed[b-xrmcffv31e] {
background: #e8f9ee;
border-left-color: #28a745;
}
.status-filed[b-xrmcffv31e] {
color: #28a745;
font-weight: bold;
}
/* OVERDUE β Red */
.cs-card.overdue[b-xrmcffv31e] {
background: #fdecea;
border-left-color: #dc3545;
}
.status-overdue[b-xrmcffv31e] {
color: #dc3545;
font-weight: bold;
}
/* WARNING β Yellow */
.cs-card.warning[b-xrmcffv31e] {
background: #fff7e0;
border-left-color: #ffc107;
}
.status-warning[b-xrmcffv31e] {
color: #856404;
font-weight: bold;
}
/* PENDING β Blue */
.cs-card.pending[b-xrmcffv31e] {
background: #e7f1ff;
border-left-color: #0d6efd;
}
.status-pending[b-xrmcffv31e] {
color: #0d6efd;
font-weight: bold;
}
/* Responsive */
@media (max-width: 768px) {
.confirmation-container[b-xrmcffv31e] {
grid-template-columns: 1fr;
}
}
/* _content/CMSite/Pages/Accountancy/Emails/ComapanyEmails.razor.rz.scp.css */
/* π§ Email list layout */
.email-list[b-kgehtuajek] {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.5rem;
}
/* π Email card */
.email-card[b-kgehtuajek] {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 10px;
padding: 1rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
transition: transform 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
}
.email-card:hover[b-kgehtuajek] {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* Header section: sender + date */
.email-header[b-kgehtuajek] {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
/* Subject text */
.email-subject[b-kgehtuajek] {
font-size: 1rem;
font-weight: 500;
color: #222;
margin-bottom: 0.75rem;
}
/* Meta row: attachments + actions */
.email-meta[b-kgehtuajek] {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.badge[b-kgehtuajek] {
padding: 0.3rem 0.6rem;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 500;
}
.badge-attachment[b-kgehtuajek] {
background-color: #e3f2fd;
color: #0d6efd;
}
.badge-none[b-kgehtuajek] {
background-color: #f8f9fa;
color: #6c757d;
}
/* View button */
.view-btn[b-kgehtuajek] {
flex-shrink: 0;
}
/* π± Mobile tweaks */
@media (max-width: 768px) {
.email-list[b-kgehtuajek] {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.email-card[b-kgehtuajek] {
padding: 0.8rem;
}
.email-subject[b-kgehtuajek] {
font-size: 0.95rem;
}
.view-btn[b-kgehtuajek] {
width: 100%;
margin-top: 0.5rem;
}
.email-meta[b-kgehtuajek] {
flex-direction: column;
align-items: stretch;
}
}
/* _content/CMSite/Pages/Accountancy/Emails/Emails.razor.rz.scp.css */
/* π§ Email list layout */
.email-list[b-pqll86xmah] {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 1.5rem;
}
/* π Email card */
.email-card[b-pqll86xmah] {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 10px;
padding: 1rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
transition: transform 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
}
.email-card:hover[b-pqll86xmah] {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* Header section: sender + date */
.email-header[b-pqll86xmah] {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
/* Subject text */
.email-subject[b-pqll86xmah] {
font-size: 1rem;
font-weight: 500;
color: #222;
margin-bottom: 0.75rem;
}
/* Meta row: attachments + actions */
.email-meta[b-pqll86xmah] {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.badge[b-pqll86xmah] {
padding: 0.3rem 0.6rem;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 500;
}
.badge-attachment[b-pqll86xmah] {
background-color: #e3f2fd;
color: #0d6efd;
}
.badge-none[b-pqll86xmah] {
background-color: #f8f9fa;
color: #6c757d;
}
/* View button */
.view-btn[b-pqll86xmah] {
flex-shrink: 0;
}
/* π± Mobile tweaks */
@media (max-width: 768px) {
.email-list[b-pqll86xmah] {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.email-card[b-pqll86xmah] {
padding: 0.8rem;
}
.email-subject[b-pqll86xmah] {
font-size: 0.95rem;
}
.view-btn[b-pqll86xmah] {
width: 100%;
margin-top: 0.5rem;
}
.email-meta[b-pqll86xmah] {
flex-direction: column;
align-items: stretch;
}
}
/* _content/CMSite/Pages/Accountancy/Emails/InvoiceAdd.razor.rz.scp.css */
.list-group-item[b-en9ldu86ca] {
border: 1px solid #ddd;
border-radius: 6px;
}
.spinner-border[b-en9ldu86ca] {
width: 2rem;
height: 2rem;
}
.invoice-content-grid[b-en9ldu86ca] {
display: grid;
grid-template-columns: 1.2fr 1fr; /* left wider than right */
gap: 1.5rem;
align-items: start;
}
/* Left panel */
.invoice-left[b-en9ldu86ca] {
background: #fff;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
/* Right panel (attachment) */
.invoice-right[b-en9ldu86ca] {
background: #fff;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
max-height: 90vh;
overflow-y: auto;
position: sticky;
top: 1rem;
}
.attachment-preview-card[b-en9ldu86ca] {
text-align: center;
}
.attachment-preview-card img[b-en9ldu86ca],
.attachment-preview-card iframe[b-en9ldu86ca] {
width: 100%;
border-radius: 8px;
}
/* π§Ύ Form and section styling */
.invoice-section h5[b-en9ldu86ca] {
font-size: 1.2rem;
margin-bottom: 1rem;
}
.event-summary[b-en9ldu86ca] {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.emp-details[b-en9ldu86ca] {
flex-grow: 1;
min-width: 180px;
}
/* π± Mobile layout */
@media (max-width: 992px) {
.invoice-content-grid[b-en9ldu86ca] {
grid-template-columns: 1fr;
}
.invoice-right[b-en9ldu86ca] {
max-height: none;
position: static;
}
.btn-lg[b-en9ldu86ca] {
width: 100%;
}
}
.invoice-add-wrapper[b-en9ldu86ca] {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.invoice-header[b-en9ldu86ca] {
margin-bottom: 1rem;
}
.invoice-section[b-en9ldu86ca] {
background: #fff;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.event-summary[b-en9ldu86ca] {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 1rem;
margin-bottom: 1rem;
}
.invoice-info[b-en9ldu86ca] {
margin-top: 1rem;
}
.emp-details[b-en9ldu86ca] {
flex-grow: 1;
min-width: 180px;
}
.transaction-item[b-en9ldu86ca] {
margin-top: 0.5rem;
}
/* π± Responsive design */
@media (max-width: 768px) {
.invoice-section[b-en9ldu86ca] {
padding: 1rem;
}
.event-summary[b-en9ldu86ca] {
flex-direction: column;
align-items: flex-start;
}
.transaction-item[b-en9ldu86ca] {
flex-direction: column;
align-items: flex-start;
}
.text-end[b-en9ldu86ca] {
text-align: center !important;
}
.btn-lg[b-en9ldu86ca] {
width: 100%;
}
}
/* _content/CMSite/Pages/Accountancy/Invoices/CompleteRequest.razor.rz.scp.css */
/* ================================
INVOICE DETAILS LAYOUT
================================ */
.invoice-details[b-7wc4oz8x1w] {
display: grid;
grid-template-columns: 200px 1fr;
gap: 0.5rem 1rem;
margin-bottom: 2rem;
}
.detail-row[b-7wc4oz8x1w] {
display: contents;
}
.detail-row label[b-7wc4oz8x1w] {
font-weight: 600;
color: #555;
}
.detail-row p[b-7wc4oz8x1w] {
margin: 0;
color: #333;
}
/* Mobile: stack labels above values */
@media (max-width: 768px) {
.invoice-details[b-7wc4oz8x1w] {
grid-template-columns: 1fr;
}
.detail-row[b-7wc4oz8x1w] {
display: block;
margin-bottom: 0.75rem;
}
}
/* ================================
FORM SUBMIT BUTTON
================================ */
.form-submit[b-7wc4oz8x1w] {
text-align: center;
margin-top: 2rem;
}
.btn-primary[b-7wc4oz8x1w] {
padding: 0.8rem 2rem;
font-size: 1.1rem;
border-radius: 0.5rem;
background: #28a745;
border: none;
color: white;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.btn-primary:hover[b-7wc4oz8x1w] {
background: #218838;
transform: scale(1.03);
}
/* _content/CMSite/Pages/Accountancy/Invoices/Components/FindEventForAccount.razor.rz.scp.css */
.event-item[b-pd524i3el2] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
cursor: pointer;
width: auto; /* prevent forced shrinking */
white-space: normal; /* allow wrapping instead of truncating */
}
.event-details[b-pd524i3el2] {
flex: 1; /* take up remaining space */
min-width: 0; /* allow wrapping inside */
}
/* _content/CMSite/Pages/Accountancy/Invoices/Components/FindEventForCompany.razor.rz.scp.css */
.event-card[b-gro44sz525] {
margin: 1.5rem 0;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
background: white;
display: flex;
flex-direction: column;
overflow: hidden;
}
.event-card-header[b-gro44sz525] {
padding: 1rem;
border-bottom: 1px solid #ddd;
}
.event-card-header h3[b-gro44sz525] {
margin: 0 0 0.5rem 0;
font-size: 1.2rem;
}
.event-search[b-gro44sz525] {
width: 100%;
padding: 0.5rem;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 0.95rem;
}
.event-list[b-gro44sz525] {
max-height: 400px; /* About 10 items depending on padding */
overflow-y: auto;
padding: 0.5rem;
}
.event-item[b-gro44sz525] {
display: flex;
align-items: center;
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 0.5rem;
margin-bottom: 0.5rem;
transition: background 0.2s ease-in-out;
}
.event-item:hover[b-gro44sz525] {
background: #f1f1f1;
}
.event-checkbox[b-gro44sz525] {
margin-right: 1rem;
}
.event-details[b-gro44sz525] {
display: flex;
flex-direction: column;
}
.event-description[b-gro44sz525] {
font-weight: bold;
font-size: 1rem;
}
.event-date[b-gro44sz525] {
font-size: 0.9rem;
color: #666;
}
.no-events[b-gro44sz525] {
text-align: center;
color: #999;
padding: 1rem;
}
/* _content/CMSite/Pages/Accountancy/Invoices/Components/InvoiceUploadOnly.razor.rz.scp.css */
/* ================================
ACTION BUTTONS (Generate / Upload)
================================ */
.action-buttons[b-qn3z67j15g] {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.btn-choice[b-qn3z67j15g] {
flex: 1;
padding: 1rem;
font-size: 1.1rem;
text-align: center;
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: transform 0.2s, background 0.3s;
}
.btn-choice:hover[b-qn3z67j15g] {
transform: scale(1.03);
background: linear-gradient(135deg, #0056b3, #003f7f);
}
/* _content/CMSite/Pages/Accountancy/Invoices/Components/Preview.razor.rz.scp.css */
/* ================================
INVOICE PREVIEW
================================ */
.invoice-preview[b-6r850gzshk] {
display: flex;
flex-direction: column;
align-items: center; /* centers both image & button */
gap: 0.75rem;
margin: 1rem 0 2rem 0;
}
.invoice-preview img[b-6r850gzshk] {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
/* Make the download button visually connected to the image */
.invoice-preview .btn-secondary[b-6r850gzshk] {
padding: 0.6rem 1.5rem;
font-size: 1rem;
border-radius: 0.5rem;
background: #6c757d;
border: none;
color: white;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.invoice-preview .btn-secondary:hover[b-6r850gzshk] {
background: #5a6268;
transform: scale(1.03);
}
/* _content/CMSite/Pages/Accountancy/Invoices/Components/PurchaseInvoiceUpload.razor.rz.scp.css */
/* ================================
ACTION BUTTONS (Generate / Upload)
================================ */
.action-buttons[b-ymnnut8gbu] {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-choice[b-ymnnut8gbu] {
flex: 1;
padding: 1rem;
font-size: 1.1rem;
text-align: center;
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: transform 0.2s, background 0.3s;
}
.btn-choice:hover[b-ymnnut8gbu] {
transform: scale(1.03);
background: linear-gradient(135deg, #0056b3, #003f7f);
}
/* _content/CMSite/Pages/Accountancy/Invoices/Components/SalesInvoiceUpload.razor.rz.scp.css */
/* ================================
ACTION BUTTONS (Generate / Upload)
================================ */
.action-buttons[b-qsdss6gu38] {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-choice[b-qsdss6gu38] {
flex: 1;
padding: 1rem;
font-size: 1.1rem;
text-align: center;
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: transform 0.2s, background 0.3s;
}
.btn-choice:hover[b-qsdss6gu38] {
transform: scale(1.03);
background: linear-gradient(135deg, #0056b3, #003f7f);
}
/* _content/CMSite/Pages/Accountancy/Invoices/Invoices.razor.rz.scp.css */
.Invoice-list[b-zm9e2bc74n]
{
display: flex;
flex-direction: column;
gap: 1rem;
}
.Invoice-item[b-zm9e2bc74n] {
display: flex;
flex-direction: column;
padding: 1rem;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 5px;
}
.Invoice-item div[b-zm9e2bc74n] {
margin-bottom: 0.5rem;
}
.Invoice-actions[b-zm9e2bc74n] {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
}
.Invoice-totals[b-zm9e2bc74n] {
margin-top: 1.5rem;
font-weight: bold;
padding: 1rem;
background-color: lightgray;
border-top: 2px solid black;
}
@media (min-width: 768px) {
.Invoice-item[b-zm9e2bc74n] {
flex-direction: row;
justify-content: space-between;
}
.Invoice-item div[b-zm9e2bc74n] {
flex: 1;
margin-bottom: 0;
}
.Invoice-actions[b-zm9e2bc74n] {
justify-content: flex-end;
}
}
/* _content/CMSite/Pages/Accountancy/Invoices/RequestedInvoices.razor.rz.scp.css */
.Invoice-list[b-yi5guwkw3m] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.Invoice-item[b-yi5guwkw3m] {
display: flex;
flex-direction: column;
padding: 1rem;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 5px;
}
.Invoice-item div[b-yi5guwkw3m] {
margin-bottom: 0.5rem;
}
.Invoice-actions[b-yi5guwkw3m] {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
}
.Invoice-totals[b-yi5guwkw3m] {
margin-top: 1.5rem;
font-weight: bold;
padding: 1rem;
background-color: lightgray;
border-top: 2px solid black;
}
@media (min-width: 768px) {
.Invoice-item[b-yi5guwkw3m] {
flex-direction: row;
justify-content: space-between;
}
.Invoice-item div[b-yi5guwkw3m] {
flex: 1;
margin-bottom: 0;
}
.Invoice-actions[b-yi5guwkw3m] {
justify-content: flex-end;
}
}
/* _content/CMSite/Pages/Accountancy/Workbook/Jobs.razor.rz.scp.css */
.event-list[b-aufcrkkecd] {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.event-card[b-aufcrkkecd] {
border: 1px solid #ddd;
border-radius: 8px;
padding: 1rem;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
flex: 1 1 calc(33.333% - 1rem);
min-width: 300px;
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s;
}
.event-card:hover[b-aufcrkkecd] {
transform: scale(1.03);
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
}
.event-header[b-aufcrkkecd] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.status-list[b-aufcrkkecd] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}
.status-item[b-aufcrkkecd] {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.9rem;
font-weight: bold;
}
.info[b-aufcrkkecd] {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 1rem;
font-weight: bold;
margin: 0.3rem 0;
}
.event-reconciled[b-aufcrkkecd] {
background-color: lightgreen;
}
.event-query[b-aufcrkkecd] {
background-color: lightcoral;
}
@media (max-width: 768px) {
.event-card[b-aufcrkkecd] {
flex: 1 1 100%;
}
}
/* _content/CMSite/Pages/Account/Register.razor.rz.scp.css */
.register-container[b-o5ztsgdg8j] {
max-width: 600px;
margin: 0 auto;
}
.register-card[b-o5ztsgdg8j] {
background: #fff;
border-radius: 20px;
}
.scroll-box[b-o5ztsgdg8j] {
max-height: 160px;
overflow-y: auto;
}
.loading-spinner[b-o5ztsgdg8j] {
width: 40px;
height: 40px;
border: 4px solid #eaeaea;
border-top: 4px solid #007bff;
border-radius: 50%;
animation: spin-b-o5ztsgdg8j 0.8s linear infinite;
margin: 0 auto;
}
@keyframes spin-b-o5ztsgdg8j {
to {
transform: rotate(360deg);
}
}
/* _content/CMSite/Pages/Bands/Bands.razor.rz.scp.css */
/* Container styling for the bands section */
.bands-section[b-kf1lta062r] {
padding: 20px;
background-color: #f9f9f9;
width: 100%; /* Make sure the section takes full width */
}
/* Styling for each band card */
.band-card[b-kf1lta062r] {
transition: transform 0.2s ease, box-shadow 0.2s ease;
border-radius: 10px;
background-color: white;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
text-align: center;
padding: 15px;
cursor: pointer;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 250px; /* Fixed card height */
}
/* Hover effect to enlarge and give depth */
.band-card:hover[b-kf1lta062r] {
transform: scale(1.05);
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
}
/* Styling for the band thumbnail images */
.thumbnail-image[b-kf1lta062r] {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 15px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
/* Styling for the band name text */
.band-name[b-kf1lta062r] {
font-weight: 600;
font-size: 1rem;
color: #333;
margin-bottom: 0;
max-width: 100%; /* Ensure name fits inside the card */
white-space: nowrap; /* Keep text on one line */
overflow: hidden; /* Hide overflowed text */
text-overflow: ellipsis; /* Add "..." if the text is too long */
}
/* Ensures cards are well-spaced */
.col-6[b-kf1lta062r], .col-sm-4[b-kf1lta062r], .col-md-3[b-kf1lta062r], .col-lg-2[b-kf1lta062r] {
display: flex;
align-items: stretch;
}
/* Styling for the Bands heading */
.bands-heading[b-kf1lta062r] {
text-align: center;
font-size: 2rem;
font-weight: 700;
margin-bottom: 30px;
color: #333;
}
/* Font size responsiveness */
@@media (max-width: 576px) {
.band-name[b-kf1lta062r] {
font-size: 0.8rem; /* Smaller font for mobile */
}
}
/* _content/CMSite/Pages/Bands/BandView.razor.rz.scp.css */
/* --- BAND SECTION WRAPPER --- */
.band-info-section[b-ukg2a3101i] {
width: 100%;
margin-bottom: 2rem;
}
.band-card[b-ukg2a3101i] {
background: white;
border: 1px solid rgba(0,0,0,.12);
border-radius: 12px;
padding: 1.6rem;
}
/* --- BAND LOGO --- */
.band-logo[b-ukg2a3101i] {
width: 100%;
max-width: 260px;
height: auto;
object-fit: contain;
background: black;
padding: 10px;
border-radius: 12px;
}
/* --- TEXT --- */
.band-title[b-ukg2a3101i] {
font-size: 2rem;
font-weight: 800;
margin-bottom: .6rem;
}
.band-description[b-ukg2a3101i] {
font-size: 1.05rem;
color: #333;
}
/* --- SOCIAL ICONS --- */
.social-media-links .btn-social[b-ukg2a3101i] {
margin-right: 6px;
padding: 8px 12px;
font-size: 1rem;
border-radius: 8px;
display: inline-flex;
align-items: center;
}
.btn-social i[b-ukg2a3101i] {
font-size: 1.1rem;
}
.btn-wedobands[b-ukg2a3101i] {
background: #1b6ec2;
color: #fff;
}
.btn-website[b-ukg2a3101i] {
background: #17a2b8;
color: #fff;
}
/* --- FOLLOWERS BADGE --- */
.badge.bg-danger-orange[b-ukg2a3101i] {
background-color: #ff6f3d;
font-size: 1rem;
padding: 0.5em 0.75em;
}
/* Follow button */
.btn-follow[b-ukg2a3101i] {
font-size: 1rem;
display: inline-flex;
align-items: center;
}
/* --- PROMO VIDEO BUTTON --- */
.promo-btn[b-ukg2a3101i] {
margin-top: 10px;
margin-bottom: 15px;
}
/* --- FIX HUGE PROMO HEIGHT --- */
.youtube-video[b-ukg2a3101i] {
width: 100%;
height: 70vh; /* FIXES the oversize video */
max-height: 720px; /* keeps it reasonable */
}
/* Modal black theme */
.modal-content[b-ukg2a3101i] {
background: black;
color: white;
}
.modal-header[b-ukg2a3101i] {
background: black;
border-bottom: none;
}
.modal-header .btn-close[b-ukg2a3101i] {
filter: invert(100%);
}
.modal-header .btn-close:hover[b-ukg2a3101i] {
filter: invert(80%);
}
/* _content/CMSite/Pages/Booking/BookingOptionsModal.razor.rz.scp.css */
.booking-grid[b-lmjzkwwrpc] {
display: grid;
gap: 16px;
padding: 10px;
}
.booking-tile[b-lmjzkwwrpc] {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px;
border-radius: 16px;
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
color: #fff;
cursor: pointer;
transition: transform .15s ease;
}
.booking-tile:hover[b-lmjzkwwrpc] {
transform: scale(1.03);
}
.booking-tile i[b-lmjzkwwrpc] {
font-size: 1.6rem;
}
.phone[b-lmjzkwwrpc] {
background: #007bff;
}
.whatsapp[b-lmjzkwwrpc] {
background: #25D366;
}
.email[b-lmjzkwwrpc] {
background: #6c63ff;
}
.online[b-lmjzkwwrpc] {
background: #ff8800;
border: none;
width: 100%;
}
/* _content/CMSite/Pages/Booking/Testimonials.razor.rz.scp.css */
.testimonial-card[b-s7cm3l5xnp] {
background: white;
padding: 30px;
border-radius: 16px;
transition: 0.3s ease;
}
.testimonial-card:hover[b-s7cm3l5xnp] {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.quote[b-s7cm3l5xnp] {
font-style: italic;
font-size: 1.1rem;
color: #333;
}
.author[b-s7cm3l5xnp] {
margin-top: 12px;
font-weight: bold;
color: #555;
}
.logo[b-s7cm3l5xnp] {
max-height: 55px;
opacity: 0.7;
transition: 0.3s;
}
.logo:hover[b-s7cm3l5xnp] {
opacity: 1;
}
.video-card[b-s7cm3l5xnp] {
position: relative;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
}
.video-thumb[b-s7cm3l5xnp] {
width: 100%;
display: block;
}
.video-overlay[b-s7cm3l5xnp] {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
}
.play-button[b-s7cm3l5xnp] {
position: absolute;
bottom: 20px;
left: 20px;
background: white;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #333;
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
transition: 0.3s;
}
.play-button:hover[b-s7cm3l5xnp] {
transform: scale(1.1);
}
/* _content/CMSite/Pages/Calendar/CalendarListView.razor.rz.scp.css */
/* ===============================
Calendar Layout + Event Pills
=============================== */
/* ===============================
Base Pill Styling
=============================== */
.service-pill[b-zvvxcnd8ms],
.clash-pill[b-zvvxcnd8ms] {
display: flex;
align-items: center;
width: 100%;
padding: 0.5rem;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
margin-bottom: 0.25rem;
}
/* ===============================
Availability & Absence (border stripe)
=============================== */
.service-pill.availability[b-zvvxcnd8ms] {
background-color: #fff; /* neutral background */
border-left: 6px solid #28a745; /* firm green stripe */
color: #212529;
}
.service-pill.absence[b-zvvxcnd8ms] {
background-color: #fff;
border-left: 6px solid #dc3545; /* strong red stripe */
color: #212529;
}
.service-pill.booked[b-zvvxcnd8ms] {
background-color: #fff;
border-left: 6px solid #007bff; /* strong blue stripe */
color: #212529;
}
.service-pill.bankholiday[b-zvvxcnd8ms] {
background-color: #fff;
border-left: 6px solid #e83e8c; /* strong pink stripe */
color: #212529;
}
/* ===============================
Clashes (full background)
=============================== */
.clash-pill[b-zvvxcnd8ms] {
background-color: #ffc107; /* bold amber */
color: #212529; /* near-black text */
justify-content: flex-start;
}
.clash-pill i[b-zvvxcnd8ms] {
margin-right: 0.5rem;
}
/* ===============================
Icon spacing
=============================== */
.service-pill span i[b-zvvxcnd8ms],
.clash-pill i[b-zvvxcnd8ms] {
margin-right: 0.5rem;
}
/* ===============================
Responsive adjustments
=============================== */
@media (max-width: 576px) {
.service-pill[b-zvvxcnd8ms],
.clash-pill[b-zvvxcnd8ms] {
flex-direction: column;
align-items: flex-start;
}
.service-pill button[b-zvvxcnd8ms],
.clash-pill button[b-zvvxcnd8ms] {
margin-top: 0.5rem;
}
}
/* ===============================
Date Column (fixed width)
=============================== */
/* Apply width only to inner box, not the Bootstrap col */
.date-box[b-zvvxcnd8ms] {
width: 80px; /* keeps all rows aligned */
text-align: center; /* center content inside */
}
/* ===============================
CalendarDayDisplay styling
=============================== */
.event-date[b-zvvxcnd8ms] {
display: flex;
flex-direction: column;
align-items: center;
}
.event-day[b-zvvxcnd8ms] {
font-size: 1.2rem;
font-weight: bold;
}
.event-dayname[b-zvvxcnd8ms] {
font-size: 0.85rem;
}
.event-time[b-zvvxcnd8ms] {
font-size: 0.8rem;
color: #666;
}
/* Base clickable row */
.clickable-row[b-zvvxcnd8ms] {
cursor: pointer;
transition: background-color 0.2s;
}
/* Hover colors based on type */
.service-pill.availability.clickable-row:hover[b-zvvxcnd8ms] {
background-color: #d4edda; /* green-ish hover */
}
.service-pill.absence.clickable-row:hover[b-zvvxcnd8ms] {
background-color: #f8d7da; /* red-ish hover */
}
.service-pill.clash.clickable-row:hover[b-zvvxcnd8ms] {
background-color: #fff3cd; /* yellow-ish hover */
}
/* _content/CMSite/Pages/Calendar/CalendarMonthView.razor.rz.scp.css */
/* Calendar grid */
.calendar-grid[b-9jvttr2v6n] {
display: grid;
grid-template-rows: repeat(6, 1fr);
border: 1px solid #ddd;
}
/* Each row of the calendar */
.calendar-row[b-9jvttr2v6n] {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
/* Individual day cells */
.calendar-cell[b-9jvttr2v6n] {
min-height: 120px;
border: 1px solid #eee;
padding: 4px;
background: #fff;
position: relative;
}
.calendar-cell.outside[b-9jvttr2v6n] {
background: #f9f9f9;
color: #aaa;
}
/* Date number inside cell */
.date-number[b-9jvttr2v6n] {
font-weight: bold;
margin-bottom: 4px;
}
/* Mini pills for events */
.mini-pill[b-9jvttr2v6n] {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.8rem;
margin-bottom: 2px;
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* Solid colors for pills */
.mini-pill.availability[b-9jvttr2v6n] {
background-color: #28a745; /* solid green */
color: #fff; /* white text */
}
.mini-pill.absence[b-9jvttr2v6n] {
background-color: #dc3545; /* solid red */
color: #fff; /* white text */
}
.mini-pill.booked[b-9jvttr2v6n] {
background-color: #007bff; /* solid blue */
color: #fff; /* white text */
}
.mini-pill.clash[b-9jvttr2v6n] {
background-color: #ffc107; /* bright yellow */
color: #212529; /* dark text for readability */
}
.mini-pill.bankholiday[b-9jvttr2v6n] {
background-color: #e83e8c; /* solid pink */
color: #fff;
}
/* Event popout/menu */
.event-menu[b-9jvttr2v6n] {
position: absolute;
right: 0;
top: 100%;
z-index: 100;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.5rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Buttons inside event menu */
.event-menu button[b-9jvttr2v6n] {
display: block;
width: 100%; /* full width for clickable row effect */
margin-bottom: 0.25rem;
}
/* Optional: hover effect for calendar cells */
.calendar-cell:hover[b-9jvttr2v6n] {
background-color: #f1f5f9;
cursor: pointer;
}
/* Normal calendar cells */
.calendar-cell[b-9jvttr2v6n] {
min-height: 120px;
border: 1px solid #eee;
padding: 4px;
background: #fff;
position: relative;
}
.calendar-cell.outside[b-9jvttr2v6n] {
background: #f9f9f9;
color: #aaa;
}
/* Header row cells (MonβSun) */
.calendar-header-cell[b-9jvttr2v6n] {
padding: 4px;
text-align: center;
font-weight: bold;
border: 1px solid #eee;
min-height: auto; /* override the 120px */
background: transparent; /* no grey background */
}
.bank-holiday-weekend[b-9jvttr2v6n] {
background-color: #ffe6eb; /* pale pink highlight */
}
/* _content/CMSite/Pages/Calendar/CalendarViewMenu.razor.rz.scp.css */
.view-switch[b-qzw44ep73v] {
display: flex;
gap: 1rem;
cursor: pointer;
}
.view-icon[b-qzw44ep73v] {
font-size: 1.5rem;
color: #666;
transition: color 0.2s ease;
}
.view-icon:hover[b-qzw44ep73v] {
color: #007bff; /* Bootstrap primary */
}
.view-icon.active[b-qzw44ep73v] {
color: #007bff;
}
/* _content/CMSite/Pages/Content/ActionBanner.razor.rz.scp.css */
/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action[b-r3g5li6b6o] {
/* background: linear-gradient(rgba(27, 47, 69, 0.8), rgba(27, 47, 69, 0.8)), url("../img/cta-bg.jpg") center center;*/
background-size: cover;
padding: 50px 0;
}
@media (min-width: 1365px) {
.call-to-action[b-r3g5li6b6o] {
background-attachment: fixed;
}
}
.call-to-action h3[b-r3g5li6b6o] {
color: #fff;
font-size: 28px;
margin-bottom: 25px;
font-weight: 700;
}
.call-to-action p[b-r3g5li6b6o] {
color: #fff;
margin-bottom: 25px;
}
.call-to-action .cta-btn[b-r3g5li6b6o] {
font-family: var(--font-default);
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 40px;
border-radius: 50px;
transition: 0.5s;
margin: 10px;
color: #fff;
background: #2aa5df;
}
.call-to-action .cta-btn:hover[b-r3g5li6b6o] {
background: var(--color-primary);
}
/* _content/CMSite/Pages/Content/BookNow.razor.rz.scp.css */
.cta-section[b-68tgrexhu7] {
background: linear-gradient(135deg, #1e2a38, #0f1822);
color: #ffffff;
padding: 80px 20px;
text-align: center;
margin-top: 60px;
}
.cta-container[b-68tgrexhu7] {
max-width: 800px;
margin: 0 auto;
}
.cta-title[b-68tgrexhu7] {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 20px;
}
.cta-subtitle[b-68tgrexhu7] {
font-size: 1.2rem;
margin-bottom: 40px;
color: #dfe6ef;
}
.cta-buttons[b-68tgrexhu7] {
display: flex;
flex-direction: column;
gap: 15px;
}
@media (min-width: 600px) {
.cta-buttons[b-68tgrexhu7] {
flex-direction: row;
justify-content: center;
}
}
.cta-btn[b-68tgrexhu7] {
display: inline-block;
padding: 16px 28px;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.cta-btn.primary[b-68tgrexhu7] {
background: #ffcf33;
color: #1e1e1e;
}
.cta-btn.primary:hover[b-68tgrexhu7] {
background: #ffd95c;
}
.cta-btn.secondary[b-68tgrexhu7] {
background: transparent;
border: 2px solid #ffffff;
color: #ffffff;
}
.cta-btn.secondary:hover[b-68tgrexhu7] {
background: rgba(255, 255, 255, 0.15);
}
/* _content/CMSite/Pages/Content/HeroSection.razor.rz.scp.css */
.hero[b-1n5z1i2tun] {
position: relative;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 100svh;
color: white !important;
text-align: center;
overflow: hidden;
display: flex;
justify-content: center; /* center horizontally */
}
/* DARK OVERLAY BEHIND EVERYTHING */
.hero[b-1n5z1i2tun]::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
backdrop-filter: brightness(0.9);
z-index: 1;
}
/* CENTERED CONTENT WRAPPER */
.hero-overlay[b-1n5z1i2tun] {
position: relative;
z-index: 2;
max-width: 800px;
width: 100%;
padding: 0 20px;
display: flex;
justify-content: center;
}
/* SHIFT CONTENT HIGHER HERE */
.hero-content[b-1n5z1i2tun] {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 120px; /* β MOVE ALL CONTENT UP */
padding-bottom: 40px;
}
/* LOGO */
.hero-logo[b-1n5z1i2tun] {
max-width: 300px;
width: 100%;
height: auto;
margin-bottom: 20px;
}
/* PAGE TITLE */
.hero h1[b-1n5z1i2tun] {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 800;
margin-bottom: 1rem;
line-height: 1.1;
}
/* SCROLL INDICATOR */
.scroll-down[b-1n5z1i2tun] {
position: absolute;
bottom: max(20px, 6vh); /* ALWAYS ABOVE iPhone bar */
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
}
.scroll-text[b-1n5z1i2tun] {
font-size: 0.9rem;
opacity: 0.9;
margin-bottom: 6px;
}
.chevron[b-1n5z1i2tun] {
border: solid white;
border-width: 0 3px 3px 0;
padding: 8px;
transform: rotate(45deg);
animation: bounce 1.8s infinite;
}
.hero[b-1n5z1i2tun]::after {
content: none !important;
display: none !important;
}
/* _content/CMSite/Pages/Content/YouTube.razor.rz.scp.css */
.video-section[b-1llcui9f7e] {
padding: 60px 20px;
display: flex;
justify-content: center;
}
.video-wrapper[b-1llcui9f7e] {
width: 100%;
max-width: 900px; /* makes it look classy */
aspect-ratio: 16 / 9;
position: relative;
border-radius: 12px; /* optional: looks modern */
overflow: hidden; /* clean edges */
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.youtube-video[b-1llcui9f7e] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* _content/CMSite/Pages/Gigs/Availability/AvailabilityAccounts.razor.rz.scp.css */
.event-account-card.unavailable[b-fgvlve5p56] {
border: 1px solid #dc3545; /* red border */
background: #fff5f5; /* subtle red tint */
}
.grayscale[b-fgvlve5p56] {
filter: grayscale(100%);
opacity: 0.7;
}
/* _content/CMSite/Pages/Gigs/Availability/colorKey.razor.rz.scp.css */
.key-pill[b-bhbw6wll9l] {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 3px;
}
.key-pill.availability[b-bhbw6wll9l] {
background-color: #fff;
border-left: 6px solid #28a745;
}
.key-pill.absence[b-bhbw6wll9l] {
background-color: #fff;
border-left: 6px solid #dc3545;
}
.key-pill.clash[b-bhbw6wll9l] {
background-color: #ffc107;
}
/* _content/CMSite/Pages/Gigs/Availability/FilterBar2.razor.rz.scp.css */
/* --- Days container: force single row + scroll --- */
.days-checkboxes[b-xk3ullddzn] {
display: flex;
flex-wrap: nowrap; /* single row */
overflow-x: auto; /* horizontal scroll on small screens */
-webkit-overflow-scrolling: touch;
gap: 6px;
}
/* --- Day pills --- */
.day-pill[b-xk3ullddzn] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px; /* small rounding */
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
user-select: none;
transition: all 0.2s;
text-transform: uppercase;
border: 1px solid #007bff; /* blue border */
flex: 0 0 auto; /* prevent shrinking */
}
/* Off state - white background, blue text */
.day-pill.off[b-xk3ullddzn] {
background-color: #ffffff;
color: #007bff;
}
/* On state - solid blue, white text */
.day-pill.on[b-xk3ullddzn] {
background-color: #007bff;
color: #ffffff;
}
/* Hover effect */
.day-pill:hover[b-xk3ullddzn] {
filter: brightness(0.9);
}
/* _content/CMSite/Pages/Gigs/Availability/ServiceBanner.razor.rz.scp.css */
.service-banner[b-n67qfksj8f] {
border-radius: .5rem;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.service-pill[b-n67qfksj8f] {
display: flex;
align-items: center;
padding: .4rem .6rem;
border-radius: .4rem;
background: #f8f9fa;
box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
min-width: 180px;
cursor: pointer;
}
.service-pill:hover[b-n67qfksj8f] {
background: #eef2f7;
}
.service-img[b-n67qfksj8f] {
width: 32px;
height: 32px;
object-fit: cover;
border-radius: 4px;
}
.availability-indicator[b-n67qfksj8f] {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 8px;
border: 2px solid #fff;
}
.availability-indicator.missing[b-n67qfksj8f] {
background: #d9534f;
}
/* red */
.availability-indicator.ok[b-n67qfksj8f] {
background: #28a745;
}
/* green */
.gap-3 > *[b-n67qfksj8f] {
margin-right: 1rem;
margin-bottom: .5rem;
}
.availability-indicator[b-n67qfksj8f] {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
margin-left: 8px;
border: 2px solid #fff;
}
/* Missing = strong warning */
.availability-indicator.missing[b-n67qfksj8f] {
background: #e74c3c; /* brighter red */
box-shadow: 0 0 4px #e74c3c; /* glow */
}
/* AvailableUnlessStated */
.availability-indicator.available[b-n67qfksj8f] {
background: #28a745; /* green */
}
/* OnlyAvailableIfStated */
.availability-indicator.conditional[b-n67qfksj8f] {
background: #f0ad4e; /* amber */
}
/* _content/CMSite/Pages/Gigs/BandSelector.razor.rz.scp.css */
.band-search-container[b-htpzt95y8b] {
position: relative;
display: inline-block;
width: 100%;
}
.band-search-results-box[b-htpzt95y8b] {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
max-height: 300px;
overflow-y: auto;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.band-search-result[b-htpzt95y8b] {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
gap: 20px;
align-items: start;
padding: 10px;
}
.band-search-result img[b-htpzt95y8b] {
max-height: 100px;
max-width: 100px;
object-fit: cover;
}
.band-details[b-htpzt95y8b] {
display: flex;
flex-direction: column;
}
.band-actions[b-htpzt95y8b] {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.band-search-result:nth-child(odd)[b-htpzt95y8b] {
background-color: #f9f9f9;
}
.band-search-result:nth-child(even)[b-htpzt95y8b] {
background-color: #ffffff;
}
.connect-button[b-htpzt95y8b] {
margin-top: 10px;
width: fit-content;
}
.new-band-message[b-htpzt95y8b] {
padding: 10px;
text-align: center;
background-color: #f8f9fa;
border-top: 1px solid #ccc;
font-style: italic;
}
.alert-button-container[b-htpzt95y8b] {
margin-top: 10px;
}
.alert-button-container button[b-htpzt95y8b] {
width: 100%;
}
.badge.bg-orange-red[b-htpzt95y8b] {
background-color: #ff4500; /* Adjust this color as needed */
color: white; /* Ensures text is readable on the badge */
}
/* ---------- MOBILE RESPONSIVE FIXES ---------- */
@media (max-width: 768px) {
.band-search-result[b-htpzt95y8b] {
grid-template-columns: 1fr; /* stack all content */
gap: 10px;
}
.band-search-result img[b-htpzt95y8b] {
max-width: 80px;
max-height: 80px;
margin: 0 auto; /* center logo on mobile */
}
.band-details[b-htpzt95y8b] {
order: 2;
}
.band-actions[b-htpzt95y8b] {
order: 3;
flex-direction: row; /* make buttons side by side */
justify-content: flex-start;
gap: 10px;
flex-wrap: wrap;
}
.band-actions .btn[b-htpzt95y8b] {
flex: 1;
min-width: 100px;
}
.band-search-results-box[b-htpzt95y8b] {
position: static; /* let it flow instead of absolute */
width: 100%;
max-height: none;
box-shadow: none;
border: none;
}
}
/* _content/CMSite/Pages/Gigs/EventEdit/EventInvoices.razor.rz.scp.css */
.Invoice-list[b-ct7w1sceb6] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.Invoice-item[b-ct7w1sceb6] {
display: flex;
flex-direction: column;
padding: 1rem;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 5px;
}
.Invoice-item div[b-ct7w1sceb6] {
margin-bottom: 0.5rem;
}
.Invoice-actions[b-ct7w1sceb6] {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
}
.Invoice-totals[b-ct7w1sceb6] {
margin-top: 1.5rem;
font-weight: bold;
padding: 1rem;
background-color: lightgray;
border-top: 2px solid black;
}
@media (min-width: 768px) {
.Invoice-item[b-ct7w1sceb6] {
flex-direction: row;
justify-content: space-between;
}
.Invoice-item div[b-ct7w1sceb6] {
flex: 1;
margin-bottom: 0;
}
.Invoice-actions[b-ct7w1sceb6] {
justify-content: flex-end;
}
}
/* _content/CMSite/Pages/Gigs/EventEdit/InvoiceList.razor.rz.scp.css */
/* π§Ύ Invoice List Styling */
.transaction-item[b-23nyrt3ub5] {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 1rem;
margin-bottom: 0.75rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
cursor: pointer;
}
.transaction-item:hover[b-23nyrt3ub5] {
transform: translateY(-2px);
box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.15);
}
/* π° Amount Styling */
.trans-amount[b-23nyrt3ub5] {
font-weight: 600;
font-size: 1.2rem;
min-width: 100px;
text-align: left;
flex-shrink: 0;
}
.trans-credit[b-23nyrt3ub5] {
color: #28a745 !important; /* Green for positive */
}
.trans-debit[b-23nyrt3ub5] {
color: #dc3545 !important; /* Red for negative */
}
/* π Description & Details */
.trans-info[b-23nyrt3ub5] {
display: flex;
flex-direction: column;
flex-grow: 1;
text-align: left;
padding-left: 1rem;
}
.trans-description[b-23nyrt3ub5] {
font-weight: 600;
padding-bottom: 4px;
}
.trans-details[b-23nyrt3ub5] {
display: flex;
gap: 1rem;
font-size: 0.9rem;
color: #555;
}
.trans-details i[b-23nyrt3ub5] {
color: #6c757d;
margin-right: 4px;
}
/* π Delete Button */
.delete-row-btn[b-23nyrt3ub5] {
background: transparent;
border: none;
color: #dc3545;
font-size: 1.2rem;
cursor: pointer;
margin-left: auto;
transition: color 0.2s ease-in-out;
}
.delete-row-btn:hover[b-23nyrt3ub5] {
color: #a71d2a;
}
/* π± Mobile Responsive */
@media (max-width: 768px) {
.transaction-item[b-23nyrt3ub5] {
flex-direction: column;
align-items: flex-start;
padding: 0.8rem;
}
.trans-amount[b-23nyrt3ub5] {
font-size: 1.3rem;
}
.trans-info[b-23nyrt3ub5] {
flex-grow: 1;
width: 100%;
padding-left: 0;
margin-top: 0.5rem;
}
.trans-details[b-23nyrt3ub5] {
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.delete-row-btn[b-23nyrt3ub5] {
align-self: flex-end;
margin-top: 0.5rem;
}
}
/* π Totals Section */
.transaction-totals[b-23nyrt3ub5] {
margin-top: 1.5rem;
font-weight: 600;
padding: 1rem;
background-color: #f1f3f4;
border-top: 2px solid #2d3436;
border-radius: 6px;
}
.transaction-totals h4[b-23nyrt3ub5],
.transaction-totals h5[b-23nyrt3ub5] {
margin-top: 1rem;
font-size: 1.15rem;
color: #2d3436;
}
.transaction-totals div[b-23nyrt3ub5] {
padding: 0.5rem;
background: #f8f9fa;
border-radius: 5px;
margin: 5px 0;
}
/* _content/CMSite/Pages/Gigs/EventList/Gigcard.razor.rz.scp.css */
.gig-list[b-uz5oimwbpw] {
display: grid;
gap: 1rem;
margin-bottom: 10px;
border: solid 2px rgba(0,0,0,.125);
text-align: center;
padding: 10px;
border-radius: 10px;
cursor: pointer;
}
@media (min-width:768px) {
.gig-list[b-uz5oimwbpw] {
grid-template-columns: 1fr 2fr;
text-align: left;
}
}
/* When the gig is canceled */
.canceled-gig-container[b-uz5oimwbpw] {
border: 2px solid red !important;
opacity: 0.7;
}
.canceled-notice[b-uz5oimwbpw] {
color: red;
font-weight: bold;
margin-top: 10px;
}
/* Banner image section */
.gig-banner-image-container[b-uz5oimwbpw] {
display: grid;
place-items: center;
}
.gig-banner-image[b-uz5oimwbpw] {
width: auto;
height: auto;
max-width: 300px;
max-height: 250px;
}
/* Gig text styling */
.giglist-date[b-uz5oimwbpw] {
color: deeppink;
font-size: 18px;
font-weight: bold;
}
.giglist-venue-name[b-uz5oimwbpw] {
color: black;
font-size: 18px;
font-weight: bold;
}
.giglist-description[b-uz5oimwbpw] {
color: #333;
font-size: 14px;
margin-top: 5px;
}
.venue-town[b-uz5oimwbpw] {
font-size: 14px;
color: #444;
}
/* Action dropdown in top-right of gig */
.gig-list .btn-group[b-uz5oimwbpw] {
position: absolute;
top: 0;
right: 0;
}
/* Buttons inside layout (Apply, Follow, I'm Going) */
.gig-list button.btn[b-uz5oimwbpw] {
white-space: nowrap;
}
/* Follow / Going button container */
.d-flex.flex-wrap.gap-2[b-uz5oimwbpw] {
gap: 0.5rem !important;
}
/* _content/CMSite/Pages/Gigs/EventList/Gigs.razor.rz.scp.css */
.center-text[b-plbtrotnqd] {
text-align: center;
}
/* _content/CMSite/Pages/Gigs/EventList/HeroGig.razor.rz.scp.css */
.hero-gig-container[b-rmkldou3fj] {
width: 100%;
border: 1px solid rgba(0,0,0,.15);
border-radius: 12px;
background: white;
overflow: hidden;
cursor: pointer;
display: grid;
grid-template-columns: 1fr;
gap: 0;
transition: transform .2s ease, box-shadow .2s ease;
}
.hero-gig-container:hover[b-rmkldou3fj] {
transform: scale(1.01);
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.hero-image-wrap[b-rmkldou3fj] {
width: 100%;
max-height: 360px;
overflow: hidden;
}
.hero-gig-image[b-rmkldou3fj] {
width: 100%;
height: auto; /* keeps aspect ratio */
max-height: 500px;
max-width: 500px;
object-fit: contain; /* optional, prevents cropping */
}
.hero-gig-content[b-rmkldou3fj] {
padding: 20px;
text-align: center;
}
.hero-title[b-rmkldou3fj] {
font-size: 32px;
font-weight: 800;
margin: 10px 0 5px;
line-height: 1.1;
}
.hero-date[b-rmkldou3fj] {
font-size: 18px;
font-weight: 600;
color: deeppink;
margin-bottom: 8px;
}
.hero-venue[b-rmkldou3fj] {
font-size: 16px;
color: #444;
margin-bottom: 10px;
}
.hero-extra[b-rmkldou3fj] {
margin-top: 20px;
}
/* bigger layout on desktop */
@media (min-width: 900px) {
.hero-gig-container[b-rmkldou3fj] {
grid-template-columns: 1fr 1fr;
align-items: center;
}
.hero-image-wrap[b-rmkldou3fj] {
max-height: none;
}
.hero-gig-content[b-rmkldou3fj] {
text-align: left;
padding: 40px;
}
.hero-title[b-rmkldou3fj] {
font-size: 40px;
}
}
/* _content/CMSite/Pages/Gigs/EventView/EventView.razor.rz.scp.css */
/* ================================
LAYOUT GRID
================================ */
.event-content[b-mly512vrsb] {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
@media (max-width: 900px) {
.event-content[b-mly512vrsb] {
grid-template-columns: 1fr;
}
}
/* ================================
PANEL STYLING
================================ */
.event-block[b-mly512vrsb] {
background: white;
border: 1px solid rgba(0,0,0,.12);
padding: 1.4rem;
border-radius: 12px;
margin-bottom: 1.5rem;
}
.sidebar-block[b-mly512vrsb] {
position: sticky;
top: 2rem;
}
.event-info-main[b-mly512vrsb] {
font-size: 1.3rem;
font-weight: 600;
}
/* ================================
BAND SECTION
================================ */
.band-header[b-mly512vrsb] {
display: flex;
align-items: center;
gap: 1rem;
}
.band-logo[b-mly512vrsb] {
width: 90px;
height: 90px;
object-fit: contain;
border-radius: 10px;
background: #fff;
border: 1px solid rgba(0,0,0,.15);
padding: 5px;
}
.band-name[b-mly512vrsb] {
margin: 0;
font-size: 1.8rem;
font-weight: 700;
}
.band-bio[b-mly512vrsb] {
margin-top: 1rem;
line-height: 1.5;
}
/* ================================
VENUE SECTION
================================ */
.venue-image[b-mly512vrsb] {
width: 100%;
max-width: 200px;
height: auto;
margin: 0 auto 0.75rem;
display: block;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.15);
}
.venue-name[b-mly512vrsb] {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.venue-address[b-mly512vrsb] {
color: #444;
margin-bottom: 1rem;
}
/* Mini Google map sizing */
.venue-map[b-mly512vrsb] {
width: 100%;
height: 180px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.12);
overflow: hidden;
}
/* ================================
VIDEO SECTION
================================ */
.video-wrapper[b-mly512vrsb] {
width: 100%;
max-width: 360px;
aspect-ratio: 16 / 9;
margin: 1.2rem auto;
border-radius: 12px;
overflow: hidden;
background: #000;
}
.video-wrapper iframe[b-mly512vrsb] {
width: 100%;
height: 100%;
border: none;
}
/* ================================
TICKET SECTION
================================ */
.event-ticket-btn[b-mly512vrsb] {
font-size: 1.2rem;
padding: 10px 22px;
margin-bottom: 10px;
}
.ticket-note[b-mly512vrsb] {
margin: 0.3rem 0;
color: #444;
}
.ticket-status[b-mly512vrsb] {
font-weight: bold;
padding: 8px 12px;
border-radius: 6px;
display: inline-block;
}
.ticket-status.soldout[b-mly512vrsb] {
background: #f44336;
color: white;
}
.ticket-status.cancelled[b-mly512vrsb] {
background: #000;
color: white;
}
/* _content/CMSite/Pages/Gigs/EventView/MemberView.razor.rz.scp.css */
.event-title[b-p9wo6axb2s] {
font-size: 2.0rem;
}
.event-datetime[b-p9wo6axb2s] {
font-size: 1.5rem;
margin-top: 0.5rem;
color: #333;
}
/* _content/CMSite/Pages/Gigs/GigBanner.razor.rz.scp.css */
/* _content/CMSite/Pages/Gigs/GigBannerList.razor.rz.scp.css */
/* ================================
GIG BANNER COMPONENT STYLES
Scope: GigBanner.razor
================================ */
/* Layout for the container grid */
/* A single, fully responsive grid system */
.gig-layout[b-hftxousnti] {
display: grid;
gap: 1rem;
text-align: center;
/* create as many columns as fit; each column is at least 220px but can grow */
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
/* center the grid block inside its parent when there are fewer items */
justify-content: center;
/* center item content inside each grid cell */
justify-items: center;
}
/* ================================
REGULAR GIG CARDS
================================ */
article[b-hftxousnti] {
cursor: pointer;
border: 1px solid rgba(0,0,0,.15);
border-radius: 10px;
padding: 10px;
background: white;
transition: transform .2s ease, box-shadow .2s ease;
}
article:hover[b-hftxousnti] {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Canceled gigs */
.canceled-gig-container[b-hftxousnti] {
background-color: rgba(255, 0, 0, 0.15);
}
.canceled-notice[b-hftxousnti] {
font-size: 18px;
font-weight: bold;
color: red;
margin-top: 10px;
display: flex;
align-items: center;
}
.canceled-notice i[b-hftxousnti] {
margin-right: 8px;
}
/* Image inside gig cards */
.post-img[b-hftxousnti] {
display: grid;
place-items: center;
margin-bottom: 10px;
}
.gig-banner-image[b-hftxousnti] {
width: 100%;
height: auto;
max-width: 300px;
max-height: 260px;
border-radius: 8px;
object-fit: cover;
}
@media (min-width: 500px) {
.gig-banner-image[b-hftxousnti] {
max-height: 250px;
}
}
/* Text styles */
.venue-name[b-hftxousnti] {
font-size: 18px;
font-weight: bold;
color: black;
}
.venue-town[b-hftxousnti] {
font-size: 14px;
color: #444;
margin-bottom: 5px;
}
.gig-date[b-hftxousnti] {
font-size: 18px;
font-weight: bold;
color: deeppink;
margin-bottom: 5px;
}
/* Event description or band/venue name */
article > div > div[b-hftxousnti] {
margin-top: 5px;
}
/* Responsive polish */
@media (min-width: 768px) {
.gig-banner-image[b-hftxousnti] {
max-width: 350px;
max-height: 280px;
}
}
/* _content/CMSite/Pages/Gigs/GigHero.razor.rz.scp.css */
.hero-card[b-yefs682s46] {
cursor: pointer;
border: 1px solid rgba(0,0,0,.15);
border-radius: 10px;
padding: 10px;
background: white;
transition: transform .2s ease, box-shadow .2s ease;
text-align: center;
margin-bottom: 1rem;
}
.hero-card:hover[b-yefs682s46] {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.hero-card-image[b-yefs682s46] {
width: 100%;
max-width: 600px;
max-height: 350px;
object-fit: cover;
border-radius: 8px;
margin: 0 auto;
display: block;
}
.hero-card-content[b-yefs682s46] {
margin-top: 1rem;
}
.hero-card-title[b-yefs682s46] {
font-size: 2rem;
font-weight: 800;
margin-bottom: .3rem;
}
.hero-card-line[b-yefs682s46] {
font-size: 1.2rem;
font-weight: 500;
color: #444;
}
/* _content/CMSite/Pages/Gigs/GigMarket/BandAdvertPanel.razor.rz.scp.css */
/* General styles for layout and design */
body[b-0yiquvszio] {
font-family: Arial, sans-serif;
}
h3[b-0yiquvszio] {
margin-bottom: 20px;
}
/* Button for changing view */
button[b-0yiquvszio] {
padding: 10px 15px;
font-size: 14px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* Each advert card */
.advert-card[b-0yiquvszio] {
/*flex: 1 1 300px; /* Grow and shrink with a base size of 200px */
/*box-sizing: border-box; /* Ensures padding and borders don't affect width */
display: flex;
flex-direction: column;
width: 250px;
min-height: 400px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
cursor: pointer;
}
.advert-card:hover[b-0yiquvszio] {
transform: scale(1.05);
}
.advert-image[b-0yiquvszio] {
width: 100%;
height: 150px;
object-fit: cover;
}
.advert-details[b-0yiquvszio] {
padding: 15px;
}
.advert-details h4[b-0yiquvszio] {
margin: 10px 0;
font-size: 18px;
color: #333;
}
.advert-description[b-0yiquvszio] {
display: -webkit-box;
-webkit-line-clamp: 3; /* Show 3 lines before truncating */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 70px;
}
.advert-more[b-0yiquvszio] {
color: #007bff;
cursor: pointer;
}
.advert-details p[b-0yiquvszio] {
margin: 5px 0;
font-size: 14px;
color: #666;
}
.advert-card[b-0yiquvszio] {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 250px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
cursor: pointer;
}
.advert-buttons[b-0yiquvszio] {
display: flex;
justify-content: space-around;
margin: 10px 0;
}
.advert-buttons button[b-0yiquvszio] {
padding: 5px 10px;
font-size: 14px;
}
button:hover[b-0yiquvszio] {
background-color: #0056b3;
}
/* _content/CMSite/Pages/Gigs/GigMarket/BookingRequesrForm.razor.rz.scp.css */
.form-label[b-vqwopppgrs] {
font-weight: bold;
white-space: nowrap; /* Prevents wrapping of the form label */
}
.radio-container[b-vqwopppgrs] {
display: flex;
flex-direction: column; /* Stack options vertically */
gap: 10px; /* Space between options */
}
.form-check[b-vqwopppgrs] {
display: flex;
align-items: center; /* Center items vertically */
cursor: pointer; /* Change cursor on hover */
}
/* Hide the default radio button */
.form-check-input[b-vqwopppgrs] {
display: none; /* Completely hide the default radio button */
}
.radio-label[b-vqwopppgrs] {
display: inline-block;
padding: 10px; /* Add padding for clickable area */
border: 2px solid #007bff; /* Blue border */
border-radius: 6px; /* Rounded corners */
background-color: #e7f3ff; /* Light blue background */
color: #333; /* Dark text */
transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}
/* Change styles when the radio button is selected */
.form-check-input:checked + .radio-label[b-vqwopppgrs] {
background-color: #007bff; /* Dark blue background when selected */
color: white; /* White text when selected */
}
.band-header[b-vqwopppgrs] {
border-radius: 16px;
background: #fff;
}
.band-logo[b-vqwopppgrs] {
width: 120px;
height: 120px;
object-fit: cover;
}
.section-title[b-vqwopppgrs] {
font-weight: 600;
border-left: 4px solid #0d6efd;
padding-left: 10px;
}
.radio-container .form-check[b-vqwopppgrs] {
margin-bottom: 6px;
}
/* _content/CMSite/Pages/Gigs/GigMarket/BookingRequestAdd.razor.rz.scp.css */
/* _content/CMSite/Pages/Gigs/Shared/EventPoster.razor.rz.scp.css */
/* =========================================
MODERN POSTER UPLOAD UI
========================================= */
.poster-upload[b-gewdhpqakq] {
width: 100%;
margin-bottom: 1.5rem;
}
/* Upload box */
.poster-upload-area[b-gewdhpqakq] {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 260px; /* reduced from 360px */
background: #f4f4f4;
border-radius: 14px;
border: 2px dashed #cfcfcf;
cursor: pointer;
position: relative;
overflow: hidden;
transition: border-color .25s ease, background .25s ease;
}
/* Hover effect */
.poster-upload-area:hover[b-gewdhpqakq] {
border-color: #999;
background: #ededed;
}
/* Placeholder (before selecting image) */
.poster-placeholder[b-gewdhpqakq] {
text-align: center;
color: #777;
font-size: 1.1rem;
display: flex;
flex-direction: column;
align-items: center;
}
.upload-icon[b-gewdhpqakq] {
font-size: 42px;
margin-bottom: 10px;
color: #666;
}
/* Previewed image (after upload) */
.poster-preview[b-gewdhpqakq] {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* never crops or stretches */
display: block;
}
/* Responsive */
@media (max-width: 768px) {
.poster-upload-area[b-gewdhpqakq] {
height: 220px;
}
}
/* _content/CMSite/Pages/HomePage/AccountStatus.razor.rz.scp.css */
.status-box[b-k95us6kk1o] {
padding: 5px 12px;
border-radius: 20px;
font-weight: bold;
color: white;
display: inline-block;
white-space: nowrap;
font-size: 14px;
}
.event-status-green[b-k95us6kk1o] {
background-color: green;
}
.event-status-orange[b-k95us6kk1o] {
background-color: orange;
}
.event-status-blue[b-k95us6kk1o] {
background-color: blue;
}
.event-status-red[b-k95us6kk1o] {
background-color: red;
}
.event-status-purple[b-k95us6kk1o] {
background-color: purple;
}
.event-status-gray[b-k95us6kk1o] {
background-color: gray;
}
.event-status-darkblue[b-k95us6kk1o] {
background-color: darkblue;
}
.event-status-black[b-k95us6kk1o] {
background-color: black;
}
/* _content/CMSite/Pages/HomePage/ActionMenu.razor.rz.scp.css */
.action-dropdown[b-2kurvvr878] {
position: relative; /* This makes dropdown-content position relative to this container */
display: inline-block; /* Shrink-wrap the button and dropdown */
}
.dropdown-button[b-2kurvvr878] {
background-color: #007bff;
color: white;
padding: 8px 12px;
font-size: 14px;
border-radius: 4px;
border: none;
cursor: pointer;
}
.dropdown-content[b-2kurvvr878] {
display: none;
position: absolute;
top: 100%; /* Show dropdown directly below the button */
right: 0; /* Align dropdownβs right edge with buttonβs right edge */
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
left: auto; /* Clear any left positioning */
}
.action-dropdown:hover .dropdown-content[b-2kurvvr878] {
display: block;
}
.dropdown-content a[b-2kurvvr878] {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover[b-2kurvvr878] {
background-color: #f1f1f1;
}
/* _content/CMSite/Pages/HomePage/AvailabilityPopOut.razor.rz.scp.css */
.event-popout[b-dthrv8l69j] {
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
font-size: 0.875rem;
}
.popout-date[b-dthrv8l69j] {
font-weight: bold;
font-size: 0.9rem;
}
.popout-description[b-dthrv8l69j] {
font-size: 0.85rem;
color: #333;
}
/* Availability bar */
.availability-bar[b-dthrv8l69j] {
height: 28px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
}
.availability-fill[b-dthrv8l69j] {
height: 100%;
background-color: #28a745;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
}
/* Buttons spacing on small screens */
@media (max-width: 576px) {
.d-flex.flex-wrap[b-dthrv8l69j] {
flex-direction: column;
}
.d-flex.flex-wrap button[b-dthrv8l69j] {
width: 100%;
}
}
/* _content/CMSite/Pages/HomePage/CalendarDate.razor.rz.scp.css */
.event-date[b-sllou1wv37] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 80px;
background-color: #f4f4f4;
border-radius: 12px;
padding: 10px;
font-size: 16px;
font-weight: bold;
color: #555;
text-align: center;
}
.event-day[b-sllou1wv37] {
font-size: 24px;
color: #333;
}
.event-month[b-sllou1wv37] {
font-size: 20px;
color: #007bff;
}
.event-year[b-sllou1wv37] {
font-size: 14px;
color: #888;
}
/* === Desktop Styles === */
@media (min-width: 768px) {
.event-date[b-sllou1wv37] {
flex-direction: row;
width: auto;
gap: 12px;
padding: 10px 16px;
}
}
/* _content/CMSite/Pages/HomePage/CalendarDayDisplay.razor.rz.scp.css */
.event-date[b-wjvlfmw3zu] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 80px;
background-color: #f4f4f4;
border-radius: 12px;
padding: 10px;
font-size: 16px;
font-weight: bold;
color: #555;
text-align: center;
}
.event-day[b-wjvlfmw3zu] {
font-size: 24px;
color: #333;
}
.event-month[b-wjvlfmw3zu] {
font-size: 20px;
color: #007bff;
}
.event-year[b-wjvlfmw3zu] {
font-size: 14px;
color: #888;
}
/* === Desktop Styles === */
@media (min-width: 768px) {
.event-date[b-wjvlfmw3zu] {
flex-direction: row;
width: auto;
gap: 12px;
padding: 10px 16px;
}
}
/* _content/CMSite/Pages/HomePage/EventStatus.razor.rz.scp.css */
.status-box[b-lv9pjex66w] {
padding: 5px 12px;
border-radius: 20px;
font-weight: bold;
color: white;
display: inline-block;
white-space: nowrap;
font-size: 14px;
}
.event-status-green[b-lv9pjex66w] {
background-color: green;
}
.event-status-orange[b-lv9pjex66w] {
background-color: orange;
}
.event-status-blue[b-lv9pjex66w] {
background-color: blue;
}
.event-status-red[b-lv9pjex66w] {
background-color: red;
}
.event-status-purple[b-lv9pjex66w] {
background-color: purple;
}
.event-status-gray[b-lv9pjex66w] {
background-color: gray;
}
.event-status-darkblue[b-lv9pjex66w] {
background-color: darkblue;
}
.event-status-black[b-lv9pjex66w] {
background-color: black;
}
/* _content/CMSite/Pages/HomePage/EventViewItem.razor.rz.scp.css */
/* === CARD CONTAINER === */
.event-card-style[b-5k0g0a9tkj] {
background-color: #fff;
border-radius: 12px;
padding-bottom: 5px;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
/* === ROW LAYOUT === */
.event-card-row[b-5k0g0a9tkj] {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-start;
flex-wrap: nowrap;
min-width: 0;
}
/* === DATE === */
.event-date-layout[b-5k0g0a9tkj] {
display: inline-flex;
text-align: center;
}
/* === DETAILS WRAPPER === */
.event-details-layout[b-5k0g0a9tkj] {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
/* === DESCRIPTION BLOCK === */
.description-block-layout[b-5k0g0a9tkj] {
display: flex;
flex-direction: column; /* Mobile: stack vertically */
align-items: flex-start;
gap: 10px;
width: 100%;
}
/* === EVENT TITLE CONTAINER === */
.event-title-layout[b-5k0g0a9tkj] {
flex: 0 0 100%; /* Full width on mobile */
}
/* === EVENT TITLE TEXT === */
.event-title-style[b-5k0g0a9tkj] {
font-size: 14px; /* Smaller font on mobile */
font-weight: bold;
white-space: normal; /* Allow wrapping */
overflow-wrap: break-word;
word-break: break-word;
}
/* === MEMBERS / STATUS CONTAINER === */
.event-members-status-layout[b-5k0g0a9tkj] {
flex: 0 0 auto;
display: flex;
justify-content: flex-start;
gap: 10px;
flex-wrap: wrap;
flex-shrink: 0;
}
/* === ACTION DROPDOWN (COG) === */
.action-dropdown-layout[b-5k0g0a9tkj] {
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
}
/* === DESKTOP BREAKPOINT (768px+) === */
@media (min-width: 768px) {
.description-block-layout[b-5k0g0a9tkj] {
flex-direction: row;
align-items: center;
gap: 15px;
}
.event-title-layout[b-5k0g0a9tkj] {
flex: 0 0 40%; /* Fixed width on desktop */
min-width: 0;
}
.event-title-style[b-5k0g0a9tkj] {
font-size: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.event-members-status-layout[b-5k0g0a9tkj] {
flex: 0 0 40%;
}
}
.event-status-layout[b-5k0g0a9tkj] {
display: inline-flex; /* keeps them on one line */
align-items: center;
gap: 8px; /* space between each child (adjust as needed) */
}
.event-card-click-area[b-5k0g0a9tkj] {
display: contents; /* preserves layout flow without adding extra box */
}
/* _content/CMSite/Pages/HomePage/MemberInitials.razor.rz.scp.css */
.initials-wrapper[b-9cd7n9hrxv] {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 5px;
}
.initial-box[b-9cd7n9hrxv] {
display: inline-block;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
color: white;
font-weight: bold;
border-radius: 50%;
margin-right: 5px;
}
/* High-contrast, distinct colors */
.initial-color-1[b-9cd7n9hrxv] {
background-color: #f44336; /* Red */
}
.initial-color-2[b-9cd7n9hrxv] {
background-color: #2196f3; /* Blue */
}
.initial-color-3[b-9cd7n9hrxv] {
background-color: #4caf50; /* Green */
}
.initial-color-4[b-9cd7n9hrxv] {
background-color: #ff9800; /* Orange */
}
.initial-color-5[b-9cd7n9hrxv] {
background-color: #9c27b0; /* Purple */
}
.initial-color-6[b-9cd7n9hrxv] {
background-color: #00bcd4; /* Cyan */
}
.initial-color-7[b-9cd7n9hrxv] {
background-color: #8bc34a; /* Light Green */
}
.initial-color-8[b-9cd7n9hrxv] {
background-color: #ff5722; /* Deep Orange */
}
.initial-color-9[b-9cd7n9hrxv] {
background-color: #795548; /* Brown */
}
.initial-color-10[b-9cd7n9hrxv] {
background-color: #607d8b; /* Blue Grey */
}
/* _content/CMSite/Pages/HomePage/UserHome.razor.rz.scp.css */
.event-section[b-whrj5vqeih] {
border-left: 4px solid #ddd;
background: #fafafa;
}
.new-events[b-whrj5vqeih] {
border-color: #0d6efd; /* Bootstrap primary */
}
.confirmed-events[b-whrj5vqeih] {
border-color: #198754; /* Bootstrap success */
}
.section-title[b-whrj5vqeih] {
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* _content/CMSite/Pages/Index.razor.rz.scp.css */
@keyframes fadeInUp-b-obwvgv7bz5 {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dashboard-item[b-obwvgv7bz5] {
animation: fadeInUp-b-obwvgv7bz5 0.5s ease-in-out;
animation-fill-mode: both;
opacity: 0;
}
.dashboard-item:nth-child(1)[b-obwvgv7bz5] {
animation-delay: 0.1s;
}
.dashboard-item:nth-child(2)[b-obwvgv7bz5] {
animation-delay: 0.2s;
}
.dashboard-item:nth-child(3)[b-obwvgv7bz5] {
animation-delay: 0.3s;
}
.dashboard-item:nth-child(4)[b-obwvgv7bz5] {
animation-delay: 0.4s;
}
.dashboard-grid[b-obwvgv7bz5] {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.dashboard-item[b-obwvgv7bz5] {
animation: fadeInUp-b-obwvgv7bz5 0.5s ease-in-out;
animation-fill-mode: both;
opacity: 0;
flex: 1;
min-width: 200px; /* Keep this for desktop */
max-width: 280px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 12px;
background-color: white;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
cursor: pointer;
}
/* Remove min-width on mobile */
@media (max-width: 767px) {
.dashboard-item[b-obwvgv7bz5] {
min-width: unset;
width: 48%; /* Two per row */
padding: 10px;
}
.icon[b-obwvgv7bz5] {
font-size: 2.2rem;
}
.dashboard-item h2[b-obwvgv7bz5] {
font-size: 1rem;
}
.dashboard-item p[b-obwvgv7bz5] {
font-size: 0.9rem;
}
}
.icon[b-obwvgv7bz5] {
font-size: 2.2rem;
}
.dashboard-item h2[b-obwvgv7bz5] {
font-size: 1rem;
}
.dashboard-item p[b-obwvgv7bz5] {
font-size: 0.9rem;
}
}
.dashboard-item:hover[b-obwvgv7bz5] {
transform: scale(1.05);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
opacity: 0.9;
}
.dashboard-item:active[b-obwvgv7bz5] {
transform: scale(0.98);
}
/* Desktop Layout: Items side-by-side */
@media (min-width: 768px) {
.dashboard-item[b-obwvgv7bz5] {
width: 23%; /* 4 items side-by-side */
}
}
/* Mobile Layout: Items stacked vertically */
@media (max-width: 767px) {
.dashboard-item[b-obwvgv7bz5] {
width: 100%;
}
}
.icon[b-obwvgv7bz5] {
font-size: 4rem;
}
/* Smaller icons on mobile */
@media (max-width: 767px) {
.icon[b-obwvgv7bz5] {
font-size: 2.5rem;
}
}
/* _content/CMSite/Pages/MyWebsite/AdminUsers.razor.rz.scp.css */
body[b-zdim5kbdmw] {
}
/* _content/CMSite/Pages/MyWebsite/Build/MainSiteLayout.razor.rz.scp.css */
/* ============================================
GLOBAL PAGE LIGHT THEME
============================================ */
body[b-auc1lfs2f6] {
background: radial-gradient(circle at top left, #ffffff 0%, #f2f4f7 100%) !important;
font-family: 'Inter', sans-serif;
}
/* ============================================
DESIGNER SECTION WRAPPER
============================================ */
.designer-section[b-auc1lfs2f6] {
display: flex;
flex-direction: column;
gap: 25px;
padding: 10px 5px;
}
/* ============================================
PAGE HEADER SECTION
============================================ */
.section-header[b-auc1lfs2f6] {
background: rgba(255,255,255,0.75);
backdrop-filter: blur(10px);
padding: 25px 30px;
border-radius: 20px;
border: 1px solid rgba(200,200,200,0.35);
box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
.section-header h2[b-auc1lfs2f6] {
margin: 0;
font-size: 1.6rem;
font-weight: 800;
color: #222;
letter-spacing: -0.5px;
}
.section-header p[b-auc1lfs2f6] {
margin: 5px 0 0;
color: #666;
}
.icon-circle[b-auc1lfs2f6] {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent-color, #1d74d4);
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-bottom: 10px;
font-size: 1.3rem;
}
/* ============================================
CARD BLOCK (each panel)
============================================ */
.card-block[b-auc1lfs2f6] {
background: rgba(255,255,255,0.75);
backdrop-filter: blur(8px);
border: 1px solid rgba(210,210,210,0.45);
padding: 22px 25px;
border-radius: 18px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
/* --------------------------------------------
CARD TITLES
-------------------------------------------- */
.block-title[b-auc1lfs2f6] {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0.3px;
color: #222;
}
/* ============================================
INPUT ELEMENTS
============================================ */
.text-input[b-auc1lfs2f6],
.select-input[b-auc1lfs2f6],
.textarea-input[b-auc1lfs2f6] {
width: 100%;
padding: 12px 14px;
border-radius: 12px;
background: #ffffff;
border: 1px solid #ced3db;
font-size: 0.95rem;
color: #222;
transition: 0.2s border, 0.2s box-shadow;
}
.textarea-input[b-auc1lfs2f6] {
min-height: 120px;
}
/* Focus highlight */
.text-input:focus[b-auc1lfs2f6],
.select-input:focus[b-auc1lfs2f6],
.textarea-input:focus[b-auc1lfs2f6] {
border-color: var(--accent-color);
box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
outline: none;
}
/* Smaller input for Logo CSS, etc. */
.text-input.small[b-auc1lfs2f6] {
width: 250px;
}
/* ============================================
IMAGE ROWS
============================================ */
.image-row[b-auc1lfs2f6] {
display: flex;
gap: 20px;
padding: 10px 0;
}
/* ============================================
IMAGE SUB-SETTINGS (under each upload)
============================================ */
.sub-setting[b-auc1lfs2f6] {
margin-top: 10px;
color: #555;
font-size: 0.9rem;
}
.sub-setting label[b-auc1lfs2f6] {
font-weight: 600;
margin-bottom: 6px;
display: block;
}
.sub-setting input[b-auc1lfs2f6],
.sub-setting select[b-auc1lfs2f6] {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #ccd1d9;
background: #fff;
transition: 0.2s border, 0.2s box-shadow;
}
.sub-setting input:focus[b-auc1lfs2f6],
.sub-setting select:focus[b-auc1lfs2f6] {
border-color: var(--accent-color, #1d74d4);
box-shadow: 0 0 10px rgba(29, 116, 212, 0.18);
outline: none;
}
/* ============================================
THEME SWATCHES
============================================ */
.theme-swatches[b-auc1lfs2f6] {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.swatch[b-auc1lfs2f6] {
width: 38px;
height: 38px;
border-radius: 10px;
cursor: pointer;
border: 2px solid #fff;
transition: 0.2s transform, 0.2s box-shadow;
}
.swatch:hover[b-auc1lfs2f6] {
transform: scale(1.1);
box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
.swatch.selected[b-auc1lfs2f6] {
border-color: var(--accent-color, #1d74d4);
box-shadow: 0 0 12px rgba(29,116,212,0.28);
}
/* ============================================
COLOURED PANELS (Soft Tinted UI)
============================================ */
/* ============================================
ORANGERED SOFT TINT PANELS
============================================ */
:root[b-auc1lfs2f6] {
--accent-color: #ff4500;
--accent-color-light: #ff7043;
}
/* HEADER (light orange tint) */
.section-header[b-auc1lfs2f6] {
background: linear-gradient(135deg, #ffe9e0 0%, #ffffff 90%);
border: 1px solid rgba(255, 120, 70, 0.4);
box-shadow: 0 10px 24px rgba(255, 120, 70, 0.10);
width: 100% !important;
max-width: 100% !important;
display: block;
box-sizing: border-box;
}
/* CARD PANELS (soft warm tint) */
.card-block[b-auc1lfs2f6] {
background: linear-gradient(180deg, #ffffff 0%, #fff2ec 100%);
border: 1px solid rgba(255, 120, 70, 0.35);
box-shadow: 0 8px 28px rgba(255, 120, 70, 0.15);
}
/* INPUT FOCUS RING */
.text-input:focus[b-auc1lfs2f6],
.select-input:focus[b-auc1lfs2f6],
.textarea-input:focus[b-auc1lfs2f6] {
border-color: var(--accent-color);
box-shadow: 0 0 12px rgba(255, 70, 0, 0.25);
}
/* THEME SWATCH SELECTION */
.theme-swatch.selected[b-auc1lfs2f6] {
border-color: var(--accent-color);
box-shadow: 0 0 8px rgba(255, 70, 0, 0.4);
}
/* layout editing */
.layout-tile[b-auc1lfs2f6] {
width: 140px;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
cursor: pointer;
text-align: center;
transition: all 0.15s ease-in-out;
background: #fff;
}
.layout-tile:hover[b-auc1lfs2f6] {
border-color: #999;
}
.layout-tile.selected[b-auc1lfs2f6] {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}
.layout-thumb[b-auc1lfs2f6] {
width: 100%;
border-radius: 4px;
margin-bottom: 6px;
}
.layout-label[b-auc1lfs2f6] {
font-size: 14px;
color: #333;
font-weight: 600;
}
/* ... Base .layout-thumb and First Row remain the same ... */
.layout-thumb[b-auc1lfs2f6] {
width: 200px;
height: 150px;
background-size: 750px 150px; /* Scaled: 5 tiles * 150px wide = 750px */
background-repeat: no-repeat;
border-radius: 10px;
border: 1px solid #ddd;
}
/* --- ALL LAYOUTS IN ONE ROW --- */
/* Standard (Tile 0) */
.thumb-Standard[b-auc1lfs2f6] {
background-image: url('/img/thumbStandard.jpg');
}
/* FullScreen (Tile 1) - Mapped to "FfucFllonl" */
.thumb-FullScreen[b-auc1lfs2f6] {
background-image: url('/img/thumbfullscreen.jpg');
}
/* Boxed (Tile 2) */
.thumb-Boxed[b-auc1lfs2f6] {
background-image: url('/img/thumbboxed.jpg');
}
/* Wide (Tile 3) */
.thumb-Wide[b-auc1lfs2f6] {
background-image: url('/img/thumbwide.png');
}
/* Hero Banner (Tile 4) */
.thumb-HeroBanner[b-auc1lfs2f6] {
background-image: url('/img/thumbhero.jpg');
}
.layout-thumb.selected[b-auc1lfs2f6] {
outline: 3px solid #007bff;
}
/* _content/CMSite/Pages/MyWebsite/Build/MetadataCrud.razor.rz.scp.css */
/* Header */
.meta-header[b-0a92we03fw] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.meta-header h3[b-0a92we03fw] {
margin: 0;
font-size: 1.4rem;
font-weight: 600;
}
/* Add button */
.btn-add-meta[b-0a92we03fw] {
background: linear-gradient(135deg, #ff6a3d, #ff3c00);
color: white;
padding: 8px 18px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.25s;
font-weight: 600;
}
.btn-add-meta:hover[b-0a92we03fw] {
transform: translateY(-2px);
opacity: 0.9;
}
/* Empty State */
.meta-empty[b-0a92we03fw] {
text-align: center;
padding: 40px;
opacity: 0.7;
}
.meta-empty .empty-icon[b-0a92we03fw] {
font-size: 2rem;
margin-bottom: 8px;
}
/* List */
.meta-list[b-0a92we03fw] {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Card */
.meta-card[b-0a92we03fw] {
background: #fff;
padding: 18px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: 0.25s ease;
}
.meta-card:hover[b-0a92we03fw] {
transform: scale(1.01);
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
/* Field Row */
.meta-row[b-0a92we03fw] {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}
.meta-row label[b-0a92we03fw] {
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 4px;
color: #444;
}
.meta-input[b-0a92we03fw] {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
}
/* Footer row */
.meta-footer[b-0a92we03fw] {
display: flex;
justify-content: flex-end;
}
/* Delete button */
.btn-delete[b-0a92we03fw] {
background: #ff4d4d;
border: none;
color: white;
padding: 7px 14px;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
transition: 0.25s;
}
.btn-delete:hover[b-0a92we03fw] {
background: #d93636;
transform: translateY(-2px);
}
/* _content/CMSite/Pages/MyWebsite/Build/NavigationMenu.razor.rz.scp.css */
/* NAV CRUD β builder layout */
.navcrud-root[b-jihmy9qzhe] {
width: 100%;
box-sizing: border-box;
padding: 10px 0;
}
.navcrud-header[b-jihmy9qzhe] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.navcrud-header h3[b-jihmy9qzhe] {
margin: 0;
font-size: 1.15rem;
}
.navcrud-actions button[b-jihmy9qzhe] {
margin-left: 8px;
}
/* body layout */
.navcrud-body[b-jihmy9qzhe] {
display: flex;
gap: 18px;
align-items: flex-start;
width: 100%;
box-sizing: border-box;
}
/* left builder */
.nav-builder[b-jihmy9qzhe] {
flex: 1 1 60%;
min-width: 0;
}
.menu-list[b-jihmy9qzhe] {
display: flex;
flex-direction: column;
gap: 12px;
}
.menu-tile[b-jihmy9qzhe] {
background: #fff;
border-radius: 10px;
padding: 10px;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
}
.menu-tile.disabled[b-jihmy9qzhe] {
opacity: 0.5;
border: 1px dashed #ff6b6b;
}
.menu-tile-main[b-jihmy9qzhe] {
display: flex;
gap: 12px;
align-items: center;
cursor: pointer;
}
.menu-icon[b-jihmy9qzhe] {
width: 60px;
text-align: center;
font-weight: 600;
}
.menu-label[b-jihmy9qzhe] {
font-weight: 700;
flex: 1;
}
.menu-meta[b-jihmy9qzhe] {
color: #777;
font-size: 12px;
}
.menu-controls[b-jihmy9qzhe] {
margin-top: 8px;
display: flex;
gap: 6px;
justify-content: flex-end;
}
.btn-small[b-jihmy9qzhe] {
padding: 6px 8px;
border-radius: 6px;
background: #f1f1f1;
border: 1px solid #ddd;
cursor: pointer;
}
.btn-small.btn-delete[b-jihmy9qzhe] {
background: #ffebeb;
border-color: #ffbcbc;
}
/* children */
.menu-children[b-jihmy9qzhe] {
margin-top: 8px;
padding-left: 14px;
border-left: 2px dashed #f0f0f0;
display: flex;
flex-direction: column;
gap: 8px;
}
.menu-child-tile[b-jihmy9qzhe] {
background: #fafafa;
padding: 8px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* drop hint */
.drop-hint[b-jihmy9qzhe] {
margin-top: 12px;
padding: 10px;
border: 2px dashed #e8e8e8;
border-radius: 8px;
text-align: center;
color: #666;
}
/* right palette */
.nav-palette[b-jihmy9qzhe] {
flex: 0 0 320px;
min-width: 260px;
background: #fff;
padding: 12px;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.page-list[b-jihmy9qzhe] {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 360px;
overflow: auto;
}
.page-item[b-jihmy9qzhe] {
padding: 10px;
border-radius: 8px;
background: #f8f8f8;
cursor: grab;
display: flex;
flex-direction: column;
}
.qa-input[b-jihmy9qzhe] {
width: 100%;
padding: 8px;
margin: 6px 0;
border-radius: 8px;
border: 1px solid #ddd;
box-sizing: border-box;
}
.quick-add[b-jihmy9qzhe] {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.sub-title[b-jihmy9qzhe] {
font-size: 1rem;
margin: 6px 0;
font-weight: 700;
}
/* edit modal card */
.edit-card[b-jihmy9qzhe] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
width: 100%;
}
.edit-card .full[b-jihmy9qzhe] {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
/* responsiveness */
@media (max-width: 900px) {
.navcrud-body[b-jihmy9qzhe] {
flex-direction: column;
}
.nav-palette[b-jihmy9qzhe] {
width: 100%;
min-width: 0;
order: 2;
}
.nav-builder[b-jihmy9qzhe] {
order: 1;
}
.menu-tile[b-jihmy9qzhe] {
flex-direction: column;
}
}
/* _content/CMSite/Pages/MyWebsite/Build/SocialMedia.razor.rz.scp.css */
/* LIST LAYOUT */
.sm-list[b-q3exog4n6v] {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 15px;
}
/* TILE */
.sm-item[b-q3exog4n6v] {
width: 120px;
height: 120px;
background: white;
border-radius: 14px;
padding: 14px;
box-shadow: 0 4px 18px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
cursor: grab;
position: relative;
transition: transform .15s, box-shadow .15s;
}
.sm-item:active[b-q3exog4n6v] {
cursor: grabbing;
}
.sm-item:hover[b-q3exog4n6v] {
transform: translateY(-4px);
box-shadow: 0 6px 25px rgba(0,0,0,0.12);
}
/* ICON */
.sm-icon[b-q3exog4n6v] {
font-size: 38px;
}
/* NAME */
.sm-name[b-q3exog4n6v] {
font-size: 14px;
text-align: center;
margin-top: 10px;
font-weight: 600;
opacity: .85;
}
/* TICK ON THE TOP-RIGHT */
.sm-valid[b-q3exog4n6v] {
position: absolute;
top: 6px;
right: 6px;
background: #3ecf5b;
color: white;
font-size: 12px;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
/* MOBILE β full width tiles */
@media (max-width: 600px) {
.sm-item[b-q3exog4n6v] {
width: calc(50% - 10px);
height: 130px;
}
}
/* HEADER */
.sm-header[b-q3exog4n6v] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.sm-title[b-q3exog4n6v] {
font-size: 22px;
font-weight: 600;
}
/* ADD BUTTON */
.btn-add-sm[b-q3exog4n6v] {
background: #ff7133;
color: #fff;
padding: 8px 14px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: .2s;
}
.btn-add-sm:hover[b-q3exog4n6v] {
background: #ff874f;
}
/* EMPTY STATE */
.sm-empty[b-q3exog4n6v] {
text-align: center;
padding: 40px 0;
color: #777;
}
.empty-icon[b-q3exog4n6v] {
font-size: 40px;
margin-bottom: 10px;
}
/* ICON LIST */
.sm-icon-list[b-q3exog4n6v] {
display: flex;
gap: 14px;
flex-wrap: wrap;
padding: 10px 0;
}
.sm-icon-item[b-q3exog4n6v] {
cursor: pointer;
transition: transform .2s;
}
.sm-icon-item:hover[b-q3exog4n6v] {
transform: scale(1.1);
}
/* ICON BOX */
.sm-icon-circle[b-q3exog4n6v] {
width: 58px;
height: 58px;
border-radius: 50%;
background: #fff;
border: 2px solid #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
transition: all .2s;
}
.sm-icon-circle:hover[b-q3exog4n6v] {
border-color: #ff7133;
box-shadow: 0 4px 12px rgba(255, 113, 51, 0.3);
}
/* MODAL CARD */
.sm-card[b-q3exog4n6v] {
padding: 20px;
background: #fff;
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 14px;
}
.sm-row[b-q3exog4n6v] {
display: flex;
flex-direction: column;
gap: 6px;
}
.sm-input[b-q3exog4n6v] {
width: 100%;
padding: 10px;
border-radius: 8px;
border: 1px solid #ccc;
}
/* FOOTER */
.sm-footer[b-q3exog4n6v] {
margin-top: 10px;
display: flex;
justify-content: flex-end;
}
.btn-delete[b-q3exog4n6v] {
background: #ff3b3b;
color: white;
padding: 8px 14px;
border-radius: 8px;
border: none;
cursor: pointer;
}
.btn-delete:hover[b-q3exog4n6v] {
background: #ff5252;
}
/* --------------------------------------------------------- */
/* π₯ DRAG & DROP STYLING (NEW β required for reordering) */
/* --------------------------------------------------------- */
.sm-item.dragging[b-q3exog4n6v] {
opacity: 0.4;
transform: scale(0.95);
}
.sm-item.drop-target[b-q3exog4n6v] {
border: 2px dashed #ff7133;
}
/* _content/CMSite/Pages/MyWebsite/Pages/PageEdit.razor.rz.scp.css */
/* ============================================
GENERIC FORM WRAPPER
============================================ */
.form-section[b-2wyj9m56ex] {
margin-bottom: 1.5rem;
padding: 1.25rem;
background: #ffffff;
border-radius: 8px;
border: 1px solid #e5e5e5;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* section title */
.form-section-title[b-2wyj9m56ex] {
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 1rem;
}
/* tidy label spacing */
.form-label[b-2wyj9m56ex] {
font-weight: 500;
margin-bottom: 0.3rem;
}
/* ================================
GENERICUPLOAD COMPONENT STYLING
================================ */
.generic-upload-container[b-2wyj9m56ex] {
width: 100%;
max-width: 360px;
margin: 1rem 0;
}
.generic-upload-box[b-2wyj9m56ex] {
width: 100%;
aspect-ratio: 1; /* force a square */
border: 2px dashed #bbbbbb;
border-radius: 10px;
background: #f3f3f3;
position: relative;
cursor: pointer;
overflow: hidden;
transition: 0.2s ease;
}
.generic-upload-box:hover[b-2wyj9m56ex] {
border-color: #888;
background: #efefef;
}
.generic-upload-placeholder[b-2wyj9m56ex] {
position: absolute;
inset: 0;
background: #d9d9d9;
display: flex;
align-items: center;
justify-content: center;
color: #555;
font-weight: 500;
font-size: 1rem;
}
.generic-upload-box img[b-2wyj9m56ex] {
width: 100%;
height: 100%;
object-fit: contain; /* important β no distortion */
padding: 0.5rem;
}
/* upload overlay text */
.generic-upload-text[b-2wyj9m56ex] {
position: absolute;
bottom: 6px;
right: 8px;
font-size: 0.8rem;
color: #444;
background: rgba(255,255,255,0.7);
padding: 2px 6px;
border-radius: 5px;
}
/* ============================================
CONTENT BOXES
============================================ */
.content-box[b-2wyj9m56ex] {
border: 1px solid #ddd;
border-radius: 6px;
padding: 1rem;
margin-bottom: 1rem;
background: #fafafa;
}
.content-box:hover[b-2wyj9m56ex] {
border-color: #c3c3c3;
}
/* delete button */
.btn-dander[b-2wyj9m56ex],
.btn-danger[b-2wyj9m56ex] {
margin-top: 0.75rem;
}
/* input spacing */
.content-input[b-2wyj9m56ex] {
margin-bottom: 1rem;
}
/* nice textarea */
.textarea[b-2wyj9m56ex] {
min-height: 120px;
}
/* compact spacing for inner rows */
.mb-2[b-2wyj9m56ex] {
margin-bottom: .5rem !important;
}
.content-card[b-2wyj9m56ex] {
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
margin-bottom: 1.25rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.content-card-header[b-2wyj9m56ex] {
background: #f6f6f6;
padding: 0.75rem 1rem;
border-bottom: 1px solid #e2e2e2;
font-weight: 600;
font-size: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.content-card-body[b-2wyj9m56ex] {
padding: 1rem;
}
.fullscreen-editor[b-2wyj9m56ex] {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 9999 !important;
background: white !important;
padding: 1rem !important;
overflow: auto !important;
}
/* _content/CMSite/Pages/MyWebsite/Pages/PageList.razor.rz.scp.css */
/* Header */
.pages-header[b-iehxh78khh] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
}
.pages-header h3[b-iehxh78khh] {
margin: 0;
font-size: 1.4rem;
font-weight: 600;
}
/* Add Page Button */
.btn-add-page[b-iehxh78khh] {
background: linear-gradient(135deg, #4cafef, #0077cc);
color: white;
padding: 8px 16px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: 0.2s ease;
font-weight: 600;
}
.btn-add-page:hover[b-iehxh78khh] {
transform: translateY(-2px);
opacity: 0.9;
}
/* Empty state */
.empty-pages[b-iehxh78khh] {
text-align: center;
padding: 40px;
opacity: 0.7;
font-size: 1.1rem;
}
.empty-pages .empty-icon[b-iehxh78khh] {
font-size: 2.2rem;
margin-bottom: 10px;
}
/* List */
.page-list[b-iehxh78khh] {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Page row */
.page-item[b-iehxh78khh] {
background: #ffffff;
border-radius: 10px;
padding: 14px 18px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: 0.25s ease;
}
.page-item:hover[b-iehxh78khh] {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Name */
.page-name[b-iehxh78khh] {
font-size: 1.1rem;
font-weight: 500;
}
/* Edit icon */
.page-edit-icon[b-iehxh78khh] {
opacity: 0.6;
transition: 0.2s;
}
.page-item:hover .page-edit-icon[b-iehxh78khh] {
opacity: 1;
}
/* _content/CMSite/Pages/MyWebsite/WebsiteBuildArea.razor.rz.scp.css */
/* ============================================
BUILDER LAYOUT β FLEX SYSTEM
============================================ */
/* WRAPPER FOR SIDEBAR + CONTENT */
.builder-container[b-ajs9vmcrop] {
display: flex;
flex-direction: row;
width: 100%;
box-sizing: border-box;
gap: 20px;
}
/* SIDEBAR */
.builder-sidebar[b-ajs9vmcrop] {
flex: 0 0 220px; /* fixed width */
background: #1e1f27;
color: #fff;
padding: 20px 0;
display: flex;
flex-direction: column;
border-radius: 10px;
}
/* Sidebar buttons */
.builder-sidebar button[b-ajs9vmcrop] {
background: transparent;
border: none;
color: #ccc;
text-align: left;
padding: 14px 20px;
font-size: 15px;
cursor: pointer;
width: 100%;
transition: 0.2s;
}
.builder-sidebar button:hover[b-ajs9vmcrop] {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.builder-sidebar button.active[b-ajs9vmcrop] {
background: #ff7133;
color: #fff;
font-weight: 600;
}
/* ============================================
CONTENT AREA (Right Panel)
============================================ */
.builder-content[b-ajs9vmcrop] {
flex: 1 1 auto; /* take remaining space */
min-width: 0; /* prevents overflow */
box-sizing: border-box;
height: auto;
overflow: visible;
}
/* ============================================
MOBILE β STACKED LAYOUT
============================================ */
@media (max-width: 900px) {
.builder-container[b-ajs9vmcrop] {
flex-direction: column;
gap: 12px;
}
.builder-sidebar[b-ajs9vmcrop] {
width: 100%;
flex: none;
}
.builder-content[b-ajs9vmcrop] {
width: 100%;
flex: none;
}
}
/* _content/CMSite/Pages/MyWebsite/WebsiteHome.razor.rz.scp.css */
/* ============================================
BASE PAGE LAYOUT
============================================ */
.whitebox[b-53go6i3lkp] {
width: 100%;
padding: 24px;
box-sizing: border-box;
}
.two-column[b-53go6i3lkp] {
display: flex;
flex-direction: row;
gap: 24px;
align-items: flex-start;
width: 100%;
flex-wrap: nowrap;
overflow: visible !important;
box-sizing: border-box;
}
/* ============================================
LEFT PANEL β EDITOR AREA
============================================ */
#lefteditarea[b-53go6i3lkp] {
flex: 1 1 60%;
min-width: 0;
}
/* ============================================
RIGHT PANEL β PREVIEW DEVICE FRAME
============================================ */
#rightpreview[b-53go6i3lkp] {
flex: 1 1 40%;
min-width: 0;
background: #111;
padding: 28px;
border-radius: 18px;
box-shadow: 0 0 35px rgba(0,0,0,0.5), inset 0 0 25px rgba(255,255,255,0.06);
}
#rightpreview iframe[b-53go6i3lkp] {
width: 100%;
height: 800px;
border: none;
background: #fff;
border-radius: 14px;
box-shadow: 0 0 18px rgba(255,255,255,0.1), 0 4px 20px rgba(0,0,0,0.4);
transition: width .3s ease, height .3s ease;
}
/* ============================================
FORM EDITOR β CARD BLOCKS
============================================ */
.designer-section[b-53go6i3lkp] {
min-height: auto !important;
height: auto !important;
overflow: visible !important;
}
.card-block[b-53go6i3lkp] {
background: #fff;
padding: 20px 22px;
margin-bottom: 22px;
border-radius: 14px;
border: 1px solid #e9e9e9;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.block-title[b-53go6i3lkp] {
font-size: 17px;
font-weight: 600;
margin-bottom: 14px;
display: flex;
gap: 6px;
align-items: center;
}
.text-input[b-53go6i3lkp],
.textarea-input[b-53go6i3lkp],
.select-input[b-53go6i3lkp] {
width: 100%;
padding: 10px 14px;
font-size: 15px;
border-radius: 8px;
border: 1px solid #ccc;
outline: none;
box-sizing: border-box;
}
.text-input.small[b-53go6i3lkp] {
width: 250px;
}
.textarea-input[b-53go6i3lkp] {
min-height: 120px;
resize: vertical;
}
.image-row[b-53go6i3lkp] {
margin-bottom: 12px;
}
.sub-settings[b-53go6i3lkp] {
margin-top: 16px;
}
.sub-settings label[b-53go6i3lkp] {
font-weight: 600;
display: block;
margin-bottom: 6px;
}
/* ============================================
THEME SWATCHES
============================================ */
.theme-swatches[b-53go6i3lkp] {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.swatch[b-53go6i3lkp] {
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
border: 3px solid transparent;
transition: .2s;
}
.swatch.selected[b-53go6i3lkp] {
border-color: #000;
}
/* ============================================
MOBILE β HIDE PREVIEW COMPLETELY
============================================ */
@media (max-width: 900px) {
#rightpreview[b-53go6i3lkp] {
display: none;
}
.two-column[b-53go6i3lkp] {
flex-direction: column;
gap: 12px;
}
.card-block[b-53go6i3lkp] {
margin-bottom: 18px;
}
}
/* ============================================
TABLET β STACK COLUMNS
============================================ */
@media (max-width: 1200px) {
.two-column[b-53go6i3lkp] {
flex-direction: column;
}
#lefteditarea[b-53go6i3lkp],
#rightpreview[b-53go6i3lkp] {
width: 100% !important;
flex: none;
}
#rightpreview iframe[b-53go6i3lkp] {
height: 600px;
}
}
/* _content/CMSite/Pages/MyWebsite/WebsiteList.razor.rz.scp.css */
.websites-container[b-7m5rb4q4bj] {
padding: 2rem;
}
.header-row[b-7m5rb4q4bj] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.page-title[b-7m5rb4q4bj] {
font-size: 2rem;
font-weight: 700;
}
.header-actions button[b-7m5rb4q4bj] {
margin-left: .5rem;
}
/* GRID */
.website-grid[b-7m5rb4q4bj] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.5rem;
}
/* CARD */
.website-card[b-7m5rb4q4bj] {
background: #fff;
border-radius: 14px;
padding: 1.5rem;
cursor: pointer;
transition: .2s ease;
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.website-card:hover[b-7m5rb4q4bj] {
transform: scale(1.02);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
/* LOGO WRAPPER */
.logo-wrapper[b-7m5rb4q4bj] {
width: 100%;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 1rem;
}
.logo-wrapper img[b-7m5rb4q4bj] {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
/* TITLES */
.domain-title[b-7m5rb4q4bj] {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: .75rem;
}
/* TAGS */
.tag-list[b-7m5rb4q4bj] {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.tag[b-7m5rb4q4bj] {
background: #eef2ff;
color: #3949ab;
padding: .25rem .6rem;
border-radius: 6px;
font-size: .8rem;
font-weight: 500;
}
/* EMPTY STATE */
.empty-state[b-7m5rb4q4bj] {
text-align: center;
padding: 3rem 1rem;
background: #f9f9ff;
border-radius: 14px;
}
.empty-state h3[b-7m5rb4q4bj] {
font-size: 1.6rem;
margin-bottom: 1rem;
}
/* LOADING STATE */
.loading-state[b-7m5rb4q4bj] {
text-align: center;
padding: 3rem;
color: #666;
}
.loader[b-7m5rb4q4bj] {
border: 4px solid #ddd;
border-top: 4px solid #6366f1;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin-b-7m5rb4q4bj 1s linear infinite;
margin: 0 auto 1rem;
}
@keyframes spin-b-7m5rb4q4bj {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* BUTTONS */
.btn-primary[b-7m5rb4q4bj] {
background: #6366f1;
color: #fff;
padding: .6rem 1.4rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: .2s;
}
.btn-primary:hover[b-7m5rb4q4bj] {
background: #4f46e5;
}
.btn-secondary[b-7m5rb4q4bj] {
background: #e4e4e7;
color: #333;
padding: .6rem 1.4rem;
border-radius: 8px;
border: none;
}
.btn-lg[b-7m5rb4q4bj] {
padding: .8rem 1.8rem;
font-size: 1.1rem;
}
/* _content/CMSite/Pages/SetList/Commnets.razor.rz.scp.css */
/* COMMENT SECTION */
.comment-section[b-shbignjy9t] {
border-radius: 14px;
border: 1px solid rgba(0,0,0,.1);
}
/* Title */
.comment-title[b-shbignjy9t] {
font-weight: 700;
font-size: 1.4rem;
}
.comment-subtitle[b-shbignjy9t] {
color: #666;
margin-top: -4px;
}
/* COMMENT ITEM */
.comment-item[b-shbignjy9t] {
display: flex;
align-items: flex-start;
margin-bottom: 1.3rem;
}
/* Avatar */
.comment-avatar[b-shbignjy9t] {
font-size: 2.6rem;
color: #bbb;
margin-right: 0.8rem;
min-width: 42px;
text-align: center;
}
.comment-user-avatar[b-shbignjy9t] {
color: #007bff;
}
/* Bubble */
.comment-bubble[b-shbignjy9t] {
background: #f5f5f5;
padding: 0.9rem 1.1rem;
border-radius: 12px;
width: 100%;
border: 1px solid rgba(0,0,0,.08);
}
.comment-header[b-shbignjy9t] {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.comment-author[b-shbignjy9t] {
font-weight: 700;
font-size: 0.95rem;
}
.comment-date[b-shbignjy9t] {
font-size: 0.78rem;
color: #777;
}
.comment-text[b-shbignjy9t] {
white-space: pre-line;
font-size: 0.96rem;
}
/* No comments message */
.no-comments[b-shbignjy9t] {
text-align: center;
color: #777;
padding: 1rem 0;
}
/* COMMENT INPUT */
.comment-input-wrapper[b-shbignjy9t] {
width: 100%;
}
.comment-input[b-shbignjy9t] {
border-radius: 10px;
resize: vertical;
padding: 0.8rem;
}
.comment-submit[b-shbignjy9t] {
margin-top: 0.6rem;
float: right;
padding: 6px 16px;
}
/* _content/CMSite/Pages/Venues/VenuePickOrCreate.razor.rz.scp.css */
.navbar-toggler[b-ysy8m2c73n] {
background-color: rgba(255, 255, 255, 0.1);
}
.top-row[b-ysy8m2c73n] {
height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand[b-ysy8m2c73n] {
font-size: 1.1rem;
}
.oi[b-ysy8m2c73n] {
width: 2rem;
font-size: 1.1rem;
vertical-align: text-top;
top: -2px;
}
.nav-item[b-ysy8m2c73n] {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type[b-ysy8m2c73n] {
padding-top: 1rem;
}
.nav-item:last-of-type[b-ysy8m2c73n] {
padding-bottom: 1rem;
}
.nav-item[b-ysy8m2c73n] a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.nav-item[b-ysy8m2c73n] a.active {
background-color: rgba(255,255,255,0.25);
color: white;
}
.nav-item[b-ysy8m2c73n] a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
@media (min-width: 641px) {
.navbar-toggler[b-ysy8m2c73n] {
display: none;
}
.collapse[b-ysy8m2c73n] {
/* Never collapse the sidebar for wide screens */
display: block;
}
.nav-scrollable[b-ysy8m2c73n] {
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}
/* _content/CMSite/Shared/Footer.razor.rz.scp.css */
.navbar-toggler[b-r7nh98rw8w] {
background-color: rgba(255, 255, 255, 0.1);
}
.top-row[b-r7nh98rw8w] {
height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand[b-r7nh98rw8w] {
font-size: 1.1rem;
}
.oi[b-r7nh98rw8w] {
width: 2rem;
font-size: 1.1rem;
vertical-align: text-top;
top: -2px;
}
.nav-item[b-r7nh98rw8w] {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type[b-r7nh98rw8w] {
padding-top: 1rem;
}
.nav-item:last-of-type[b-r7nh98rw8w] {
padding-bottom: 1rem;
}
.nav-item[b-r7nh98rw8w] a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.nav-item[b-r7nh98rw8w] a.active {
background-color: rgba(255,255,255,0.25);
color: white;
}
.nav-item[b-r7nh98rw8w] a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
@media (min-width: 641px) {
.navbar-toggler[b-r7nh98rw8w] {
display: none;
}
.collapse[b-r7nh98rw8w] {
/* Never collapse the sidebar for wide screens */
display: block;
}
.nav-scrollable[b-r7nh98rw8w] {
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}
/* SOCIAL ICONS */
.social-icon[b-r7nh98rw8w] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
font-size: 1.2rem;
border-radius: 30px;
color: white;
margin: 6px;
text-decoration: none;
transition: transform .2s ease, opacity .2s ease;
}
.social-icon i[b-r7nh98rw8w] {
font-size: 1.4rem;
}
.social-icon span[b-r7nh98rw8w] {
font-size: 1rem;
font-weight: 600;
}
/* Hover effect */
.social-icon:hover[b-r7nh98rw8w] {
transform: scale(1.08);
opacity: 0.9;
}
/* Brand colours */
.social-facebook[b-r7nh98rw8w] {
background: #1877F2;
}
.social-instagram[b-r7nh98rw8w] {
background: #E1306C;
}
.social-youtube[b-r7nh98rw8w] {
background: #FF0000;
}
.social-soundcloud[b-r7nh98rw8w] {
background: #FF7700;
}
.social-twitter[b-r7nh98rw8w] {
background: #1DA1F2;
}
/* _content/CMSite/Shared/FooterNew.razor.rz.scp.css */
.navbar-toggler[b-1n3g2hwuoi] {
background-color: rgba(255, 255, 255, 0.1);
}
.top-row[b-1n3g2hwuoi] {
height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand[b-1n3g2hwuoi] {
font-size: 1.1rem;
}
.oi[b-1n3g2hwuoi] {
width: 2rem;
font-size: 1.1rem;
vertical-align: text-top;
top: -2px;
}
.nav-item[b-1n3g2hwuoi] {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type[b-1n3g2hwuoi] {
padding-top: 1rem;
}
.nav-item:last-of-type[b-1n3g2hwuoi] {
padding-bottom: 1rem;
}
.nav-item[b-1n3g2hwuoi] a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.nav-item[b-1n3g2hwuoi] a.active {
background-color: rgba(255,255,255,0.25);
color: white;
}
.nav-item[b-1n3g2hwuoi] a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
@media (min-width: 641px) {
.navbar-toggler[b-1n3g2hwuoi] {
display: none;
}
.collapse[b-1n3g2hwuoi] {
/* Never collapse the sidebar for wide screens */
display: block;
}
.nav-scrollable[b-1n3g2hwuoi] {
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}
/* _content/CMSite/Shared/Header.razor.rz.scp.css */
.navbar-toggler[b-9jj4g0zp9x] {
background-color: rgba(255, 255, 255, 0.1);
}
.top-row[b-9jj4g0zp9x] {
height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand[b-9jj4g0zp9x] {
font-size: 1.1rem;
}
.oi[b-9jj4g0zp9x] {
width: 2rem;
font-size: 1.1rem;
vertical-align: text-top;
top: -2px;
}
.nav-item[b-9jj4g0zp9x] {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type[b-9jj4g0zp9x] {
padding-top: 1rem;
}
.nav-item:last-of-type[b-9jj4g0zp9x] {
padding-bottom: 1rem;
}
.nav-item[b-9jj4g0zp9x] a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.nav-item[b-9jj4g0zp9x] a.active {
background-color: rgba(255,255,255,0.25);
color: white;
}
.nav-item[b-9jj4g0zp9x] a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
@media (min-width: 641px) {
.navbar-toggler[b-9jj4g0zp9x] {
display: none;
}
.collapse[b-9jj4g0zp9x] {
/* Never collapse the sidebar for wide screens */
display: block;
}
.nav-scrollable[b-9jj4g0zp9x] {
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}
/* _content/CMSite/Shared/Headers/HeaderHome.razor.rz.scp.css */
/* ===========================
GLOBAL HEADER VARIABLES
=========================== */
:root[b-q11n1y3w30] {
--logo-max-height: 100px; /* Desktop max logo height */
--logo-max-width: 300px; /* Desktop max logo width */
--header-padding-y: 10px; /* Desktop vertical padding */
}
/* Calculate header height for page offset */
:root[b-q11n1y3w30] {
--header-total-height: calc(var(--logo-max-height) + (var(--header-padding-y) * 2));
}
/* Prevent header overlapping content */
body[b-q11n1y3w30] {
padding-top: var(--header-total-height);
}
/* ===========================
HEADER BAR
=========================== */
#header[b-q11n1y3w30] {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: #000;
padding: var(--header-padding-y) 0;
display: flex;
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Inner container */
#header .container-xl[b-q11n1y3w30] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
}
/* ===========================
LOGO β TARGET ![]()
DIRECTLY
=========================== */
#header .logo img[b-q11n1y3w30] {
display: block;
cursor: pointer;
/* HARD size limits */
max-height: var(--logo-max-height) !important;
max-width: var(--logo-max-width) !important;
/* Maintain proportions */
height: auto !important;
width: auto !important;
/* Prevent distortion */
object-fit: contain !important;
}
/* ===========================
RIGHT SIDE NAV / USER AREA
=========================== */
.nav-top[b-q11n1y3w30] {
display: flex;
align-items: center;
gap: 15px;
position: relative;
}
/* User icon */
.user-icon[b-q11n1y3w30] {
color: #fff;
font-size: 26px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/* π₯ FIX: anchor dropdown to this element */
position: relative;
}
.user-icon:hover[b-q11n1y3w30] {
color: #ffd700;
}
/* ===========================
USER DROPDOWN (fixed)
=========================== */
.user-dropdown[b-q11n1y3w30] {
position: absolute;
top: 110%; /* directly below the user icon */
left: 0; /* dropdown opens beneath icon */
background: #222;
border-radius: 6px;
min-width: 160px;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: 180ms ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
z-index: 1500;
}
.user-dropdown.show[b-q11n1y3w30] {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.user-dropdown .dropdown-item[b-q11n1y3w30] {
padding: 10px 14px;
color: #eee;
white-space: nowrap;
}
.user-dropdown .dropdown-item:hover[b-q11n1y3w30] {
background: #333;
color: #fff;
}
/* ===========================
RESPONSIVE (mobile shrink)
=========================== */
@media (max-width: 768px) {
:root[b-q11n1y3w30] {
--logo-max-height: 45px;
--logo-max-width: 200px;
--header-padding-y: 8px;
}
:root[b-q11n1y3w30] {
--header-total-height: calc(var(--logo-max-height) + (var(--header-padding-y) * 2));
}
body[b-q11n1y3w30] {
padding-top: var(--header-total-height);
}
#header .container-xl[b-q11n1y3w30] {
padding-left: 12px;
padding-right: 12px;
}
}
/* NEW: wrapper that guarantees dropdown anchors correctly */
.user-wrapper[b-q11n1y3w30] {
position: relative; /* parent for absolute positioning */
display: flex;
align-items: center;
}
/* _content/CMSite/Shared/Headers/HeaderLogoOnly.razor.rz.scp.css */
/* ===========================
GLOBAL HEADER VARIABLES
=========================== */
:root[b-a8l4arjuuz] {
--logo-max-height: 100px; /* Desktop max logo height */
--logo-max-width: 300px; /* Desktop max logo width */
--header-padding-y: 10px; /* Desktop vertical padding */
}
/* Calculate header height for page offset */
:root[b-a8l4arjuuz] {
--header-total-height: calc(var(--logo-max-height) + (var(--header-padding-y) * 2));
}
/* Prevent header overlapping content */
body[b-a8l4arjuuz] {
padding-top: var(--header-total-height);
}
/* ===========================
HEADER BAR
=========================== */
#header[b-a8l4arjuuz] {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: #000;
padding: var(--header-padding-y) 0;
display: flex;
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Inner container */
#header .container-xl[b-a8l4arjuuz] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
}
/* ===========================
LOGO β TARGET ![]()
DIRECTLY
=========================== */
#header .logo img[b-a8l4arjuuz] {
display: block;
cursor: pointer;
/* HARD size limits */
max-height: var(--logo-max-height) !important;
max-width: var(--logo-max-width) !important;
/* Maintain proportions */
height: auto !important;
width: auto !important;
/* Prevent distortion */
object-fit: contain !important;
}
/* ===========================
RIGHT SIDE NAV / USER AREA
=========================== */
.nav-top[b-a8l4arjuuz] {
display: flex;
align-items: center;
gap: 15px;
position: relative;
}
/* User icon */
.user-icon[b-a8l4arjuuz] {
color: #fff;
font-size: 26px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/* π₯ FIX: anchor dropdown to this element */
position: relative;
}
.user-icon:hover[b-a8l4arjuuz] {
color: #ffd700;
}
/* ===========================
USER DROPDOWN (fixed)
=========================== */
.user-dropdown[b-a8l4arjuuz] {
position: absolute;
top: 110%; /* directly below the user icon */
left: 0; /* dropdown opens beneath icon */
background: #222;
border-radius: 6px;
min-width: 160px;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: 180ms ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
z-index: 1500;
}
.user-dropdown.show[b-a8l4arjuuz] {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.user-dropdown .dropdown-item[b-a8l4arjuuz] {
padding: 10px 14px;
color: #eee;
white-space: nowrap;
}
.user-dropdown .dropdown-item:hover[b-a8l4arjuuz] {
background: #333;
color: #fff;
}
/* ===========================
RESPONSIVE (mobile shrink)
=========================== */
@media (max-width: 768px) {
:root[b-a8l4arjuuz] {
--logo-max-height: 45px;
--logo-max-width: 200px;
--header-padding-y: 8px;
}
:root[b-a8l4arjuuz] {
--header-total-height: calc(var(--logo-max-height) + (var(--header-padding-y) * 2));
}
body[b-a8l4arjuuz] {
padding-top: var(--header-total-height);
}
#header .container-xl[b-a8l4arjuuz] {
padding-left: 12px;
padding-right: 12px;
}
}
/* NEW: wrapper that guarantees dropdown anchors correctly */
.user-wrapper[b-a8l4arjuuz] {
position: relative; /* parent for absolute positioning */
display: flex;
align-items: center;
}
/* _content/CMSite/Shared/Headers/HeaderStandard.razor.rz.scp.css */
/* ===========================
GLOBAL HEADER VARIABLES
=========================== */
:root[b-kg00r8g1dq] {
--logo-max-height: 100px; /* Desktop max logo height */
--logo-max-width: 300px; /* Desktop max logo width */
--header-padding-y: 10px; /* Desktop vertical padding */
}
/* Calculate header height for page offset */
:root[b-kg00r8g1dq] {
--header-total-height: calc(var(--logo-max-height) + (var(--header-padding-y) * 2));
}
/* Prevent header overlapping content */
body[b-kg00r8g1dq] {
padding-top: var(--header-total-height);
}
/* ===========================
HEADER BAR
=========================== */
#header[b-kg00r8g1dq] {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: #000;
padding: var(--header-padding-y) 0;
display: flex;
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Inner container */
#header .container-xl[b-kg00r8g1dq] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
}
/* ===========================
LOGO β TARGET ![]()
DIRECTLY
=========================== */
#header .logo img[b-kg00r8g1dq] {
display: block;
cursor: pointer;
/* HARD size limits */
max-height: var(--logo-max-height) !important;
max-width: var(--logo-max-width) !important;
/* Maintain proportions */
height: auto !important;
width: auto !important;
/* Prevent distortion */
object-fit: contain !important;
}
/* ===========================
RIGHT SIDE NAV / USER AREA
=========================== */
.nav-top[b-kg00r8g1dq] {
display: flex;
align-items: center;
gap: 15px;
position: relative;
}
/* User icon */
.user-icon[b-kg00r8g1dq] {
color: #fff;
font-size: 26px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/* π₯ FIX: anchor dropdown to this element */
position: relative;
}
.user-icon:hover[b-kg00r8g1dq] {
color: #ffd700;
}
/* ===========================
USER DROPDOWN (fixed)
=========================== */
.user-dropdown[b-kg00r8g1dq] {
position: absolute;
top: 110%; /* directly below the user icon */
left: 0; /* dropdown opens beneath icon */
background: #222;
border-radius: 6px;
min-width: 160px;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: 180ms ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
z-index: 1500;
}
.user-dropdown.show[b-kg00r8g1dq] {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.user-dropdown .dropdown-item[b-kg00r8g1dq] {
padding: 10px 14px;
color: #eee;
white-space: nowrap;
}
.user-dropdown .dropdown-item:hover[b-kg00r8g1dq] {
background: #333;
color: #fff;
}
/* ===========================
RESPONSIVE (mobile shrink)
=========================== */
@media (max-width: 768px) {
:root[b-kg00r8g1dq] {
--logo-max-height: 45px;
--logo-max-width: 200px;
--header-padding-y: 8px;
}
:root[b-kg00r8g1dq] {
--header-total-height: calc(var(--logo-max-height) + (var(--header-padding-y) * 2));
}
body[b-kg00r8g1dq] {
padding-top: var(--header-total-height);
}
#header .container-xl[b-kg00r8g1dq] {
padding-left: 12px;
padding-right: 12px;
}
}
/* NEW: wrapper that guarantees dropdown anchors correctly */
.user-wrapper[b-kg00r8g1dq] {
position: relative; /* parent for absolute positioning */
display: flex;
align-items: center;
}
/* _content/CMSite/Shared/Layout1.razor.rz.scp.css */
.auth-buttons[b-1ofx8xl3w5] {
position: absolute;
top: 10px;
right: 20px;
display: flex;
gap: 10px;
}
.auth-buttons .btn[b-1ofx8xl3w5] {
font-size: 16px;
padding: 8px 16px;
}
.breadcrumbs[b-1ofx8xl3w5] {
display: none !important;
border: red solid 2px;
}
/* Sidebar Styles */
.sidebar[b-1ofx8xl3w5] {
background-color: #1c3e59;
color: #fff;
position: sticky;
top: 0;
padding-top: 20px;
border-right: 1px solid #ddd;
transition: transform 0.3s ease-in-out;
height: 100vh; /* Make sidebar fill the entire viewport height */
overflow-y: auto; /* Enables scrolling when content overflows */
}
/* Desktop behavior (default) */
@media (min-width: 769px) {
.sidebar[b-1ofx8xl3w5] {
height: auto; /* No fixed height on desktop */
overflow: visible; /* No scrolling needed on desktop */
}
}
/* Mobile behavior (for screens less than 768px) */
@media (max-width: 768px) {
.sidebar[b-1ofx8xl3w5] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh; /* Sidebar takes full height on mobile */
transform: translateX(-100%); /* Sidebar hidden by default */
transition: transform 0.3s ease-in-out;
overflow-y: auto; /* Enable scrolling on mobile */
}
.sidebar.active[b-1ofx8xl3w5] {
transform: translateX(0); /* Show the sidebar when active */
}
}
/* Ensure no margin or padding on the body */
body[b-1ofx8xl3w5] {
margin: 0;
padding: 0;
}
body.noscroll[b-1ofx8xl3w5] {
overflow: hidden;
height: 100vh;
}
/* Desktop behavior (default) */
@media (min-width: 769px) {
.sidebar[b-1ofx8xl3w5] {
height: auto; /* Do not set to 100vh */
overflow: visible; /* Do not enable scrolling */
}
}
/* Mobile behavior (for screens less than 768px) */
@media (max-width: 768px) {
.sidebar[b-1ofx8xl3w5] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh; /* Sidebar takes full height on mobile */
transform: translateX(-100%); /* Sidebar hidden by default */
transition: transform 0.3s ease-in-out;
overflow-y: auto; /* Enable scrolling on mobile */
}
.sidebar.active[b-1ofx8xl3w5] {
transform: translateX(0); /* Show the sidebar when active */
}
}
.nav-item[b-1ofx8xl3w5] {
padding: 10px 20px;
}
.nav-link[b-1ofx8xl3w5] {
color: #ccc;
font-size: 18px;
transition: all 0.3s ease-in-out;
}
.nav-link:hover[b-1ofx8xl3w5] {
background-color: #495057;
color: #fff;
}
.nav-link.active[b-1ofx8xl3w5] {
background-color: #007bff;
color: #fff;
}
.nav-link i[b-1ofx8xl3w5] {
margin-right: 10px;
}
/* Hamburger Button Styles */
.menu-toggle[b-1ofx8xl3w5] {
position: absolute; /* Ensure the hamburger stays fixed at the top left */
top: 10px;
left: 10px;
background-color: transparent; /* Make the background transparent */
color: black; /* Set hamburger button to black */
border: none;
font-size: 30px; /* Increase font size for visibility */
padding: 10px;
cursor: pointer;
z-index: 1000; /* Ensure it's above other content */
}
/* Main Content Styles */
.main-content[b-1ofx8xl3w5] {
background-color: #f8f9fa;
flex: 1;
padding: 20px;
}
@media (max-width: 768px) {
.sidebar[b-1ofx8xl3w5] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
transform: translateX(-100%); /* Sidebar hidden by default */
transition: transform 0.3s ease-in-out;
z-index: 999;
@* background-color: #114496; /* Set a darker blue color for the sidebar */
*@ padding-bottom: 500px;
padding-bottom: 100px;
}
/* Show the sidebar when it is active */
.sidebar.active[b-1ofx8xl3w5] {
transform: translateX(0);
}
.main-content[b-1ofx8xl3w5] {
padding-top: 50px; /* Add space for the hamburger menu */
}
.menu-toggle[b-1ofx8xl3w5] {
display: block; /* Make hamburger visible on mobile */
}
}
@media (min-width: 769px) {
.menu-toggle[b-1ofx8xl3w5] {
display: none; /* Hide the hamburger button on larger screens */
}
}
/* _content/CMSite/Shared/MainLayout.razor.rz.scp.css */
.page[b-sr1mupj4fj] {
position: relative;
display: flex;
flex-direction: column;
}
main[b-sr1mupj4fj] {
flex: 1;
}
.sidebar[b-sr1mupj4fj] {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
.top-row[b-sr1mupj4fj] {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
justify-content: flex-end;
height: 3.5rem;
display: flex;
align-items: center;
}
.top-row[b-sr1mupj4fj] a, .top-row .btn-link[b-sr1mupj4fj] {
white-space: nowrap;
margin-left: 1.5rem;
}
.top-row a:first-child[b-sr1mupj4fj] {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640.98px) {
.top-row:not(.auth)[b-sr1mupj4fj] {
display: none;
}
.top-row.auth[b-sr1mupj4fj] {
justify-content: space-between;
}
.top-row a[b-sr1mupj4fj], .top-row .btn-link[b-sr1mupj4fj] {
margin-left: 0;
}
}
@media (min-width: 641px) {
.page[b-sr1mupj4fj] {
flex-direction: row;
}
.sidebar[b-sr1mupj4fj] {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
}
.top-row[b-sr1mupj4fj] {
position: sticky;
top: 0;
z-index: 1;
}
.top-row[b-sr1mupj4fj], article[b-sr1mupj4fj] {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
}
/* _content/CMSite/Shared/Standard.razor.rz.scp.css */
.page[b-bd62st807j] {
position: relative;
display: flex;
flex-direction: column;
}
main[b-bd62st807j] {
flex: 1;
}
.sidebar[b-bd62st807j] {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
.top-row[b-bd62st807j] {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
justify-content: flex-end;
height: 3.5rem;
display: flex;
align-items: center;
}
.top-row[b-bd62st807j] a, .top-row .btn-link[b-bd62st807j] {
white-space: nowrap;
margin-left: 1.5rem;
}
.top-row a:first-child[b-bd62st807j] {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640.98px) {
.top-row:not(.auth)[b-bd62st807j] {
display: none;
}
.top-row.auth[b-bd62st807j] {
justify-content: space-between;
}
.top-row a[b-bd62st807j], .top-row .btn-link[b-bd62st807j] {
margin-left: 0;
}
}
@media (min-width: 641px) {
.page[b-bd62st807j] {
flex-direction: row;
}
.sidebar[b-bd62st807j] {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
}
.top-row[b-bd62st807j] {
position: sticky;
top: 0;
z-index: 1;
}
.top-row[b-bd62st807j], article[b-bd62st807j] {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
}