html, body {
background: #f7f7f8 !important;
}
*:focus,
*:focus-visible,
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
outline: none !important;
box-shadow: none !important;
}
.font-inter {
font-family: 'Inter', sans-serif !important;
}
.nopad {
padding: 0px !important;
margin: 0px !important;
}
.left-area {
min-height: 94vh;
background: #f7f7f8 !important;
}
.logo-area {
background: #222a35;
padding: 10px;
text-align: left;
}
.sidebar {
padding: 0px;
margin: 0px;
}
.admin-bar {
background-color: #f7f7f8;
color: #fff;
z-index: 999;
padding: 0px 12px 0px 0px;
position: relative;
}
.logo-area img {
height: 39px;
}
.adm-navi-area ul {
padding: 0;
margin: 0;
}
.adm-navi-area ul li {
list-style: none;
float: left;
}
.content-area {
background: #f7f7f8 !important;
}
.cnt {
background: #f7f7f8;
padding: 40px 20px 80px;
min-height: 94vh;
position: relative;
top: 0;
width: 100%;
max-width: 1200px !important;
margin: 0 auto !important;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav ul li {
padding: 0px;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 15px 28px;
display: block;
}
nav ul li:hover, nav ul li.active, nav ul li:focus {
text-decoration: none;
}
nav ul li:hover a, nav ul li.active a, nav ul li:focus a {
text-decoration: none;
}
nav ul li a .fa {
margin-right: 9px;
}
/* Hidden legacy icons */
nav ul li a:before {
display: none !important;
}
nav ul li ul.submenu {
padding: 0;
margin: 0;
background: rgba(45, 45, 45, 0.58);
transition: all 0.3s ease-in-out;
display: none;
}
nav ul li.active ul.submenu {
display: block !important;
transition: all 0.3s ease-in-out;
}
nav ul li ul.submenu li a {
padding: 12px 28px !important;
}
.breadcrumb ol {
padding: 0px;
margin: 0px;
}
.breadcrumb ol li {
list-style: none;
padding: 5px 5px;
float: left;
color: #444343;
}
.breadcrumb ol li a {
text-decoration: none;
color: #000
}
.panel-default > .panel-heading {
background: #222a35;
color: #fff;
border-radius: 0px;
border: 0px;
padding: 14px 19px;
cursor: pointer;
}
.panel-collapse {
padding: 15px 21px;
box-shadow: none;
border: 0px !important;
border-radius: 0px !important;
overflow: hidden;
}
.panel-group {
margin-bottom: 20px !important;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 0;
box-shadow: none;
border: 0px;
}
.adm-log-bar .dropdown {
margin-left: 9px;
}
/* Navbar Auth Buttons */
.nav-login-link {
color: #1A1925;
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.nav-login-link:hover {
text-decoration: none;
}
.btn-signup-premium {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
color: #fff !important;
text-decoration: none !important;
cursor: pointer;
transition: all 0.2s ease;
}
.variant-primary {
background: linear-gradient(180deg, #ededed14, #55555514), #1f62ff;
box-shadow: inset 0 .25px .25px #ffffff1f, inset 0 .75px .75px #ffffff14, inset 0 1px 3px #ffffff14, inset 0 -8px 20px #1a192514, 0 .25px .25px #1a19253d, 0 .75px .75px #1a19251f, 0 1px 1.5px -.5px #1a19251f, 0 2px 4px -1px #1a19251f, 0 4px 8px -4px #1a19251f, 0 8px 12px -4px #1a19250f;
}
/* BEGIN: High-Fidelity Dashboard Styles */
.dashboard-section-header {
display: flex;
align-items: center; /* Ensures vertical centering */
gap: 16px; /* Slightly increased gap for better breathing room */
margin: 32px 0 20px 0;
color: #0f172a;
width: 100%;
}
.dashboard-section-header .material-symbols-outlined {
font-size: 34px; /* Matches the visual weight of 32px bold text */
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
line-height: 1; /* Prevents hidden padding from affecting alignment */
}
.dashboard-section-header h2 {
font-family: 'Google Sans Flex', 'Inter', sans-serif !important;
font-size: clamp(22px, 5vw, 32px) !important;
font-weight: 600 !important;
color: #1A1925 !important;
text-align: left !important;
margin: 0 !important;
line-height: 1.2 !important; /* Controlled height for better alignment */
}
.info-card.large-content {
padding: 24px;
min-height: auto;
width: 100%;
position: relative;
}
.info-card.large-content #area-affiliate {
height: 300px;
margin-top: 10px;
position: relative;
}
.chart-date-badge {
position: absolute;
top: 20px;
right: 24px;
font-size: 13px;
font-weight: 600;
color: #71717a;
line-height: 1;
z-index: 2;
pointer-events: none;
}
.notes-container {
padding: 4px;
color: #475569;
font-size: 15px;
line-height: 1.6;
}
.notes-container table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 12px !important;
border: none !important;
}
.notes-container table td {
border: none !important;
padding: 12px !important;
}
.note-item {
background: #f8fafc;
border-radius: 12px;
border: 1px solid #f1f5f9;
margin-bottom: 16px;
overflow: hidden;
}
.note-header {
background: #f1f5f9;
padding: 10px 16px;
display: flex;
justify-content: space-between;
font-weight: 600;
font-size: 13px;
color: #64748b;
}
.note-body {
padding: 16px;
}
.note-subject {
font-weight: 700;
font-size: 16px;
color: #1e293b;
margin-bottom: 8px;
display: block;
}
.note-content {
font-size: 14px;
color: #475569;
line-height: 1.6;
}
/* ── Attachment card (design: Attachment Card.html) ── */
.attach-section {
margin-bottom: 4px;
}
.attach-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: #7a8597;
font-weight: 600;
margin-bottom: 10px;
}
.attach-card {
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
gap: 14px;
padding: 10px 12px 10px 10px;
border: 1px solid #eaeef4;
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
box-shadow: 0 1px 0 rgba(15,23,42,0.02);
text-decoration: none;
}
.attach-card:hover {
border-color: #d8dde6;
background: #fcfcfd;
box-shadow: 0 6px 20px -12px rgba(15,23,42,0.18);
transform: translateY(-1px);
}
.attach-thumb {
width: 56px;
height: 40px;
border-radius: 7px;
overflow: hidden;
background: #f3f5f9;
border: 1px solid #eaeef4;
flex-shrink: 0;
}
.attach-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 0 !important;
}
.attach-meta {
min-width: 0;
}
.attach-name {
font-size: 14px;
font-weight: 600;
color: #0b1220;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: -0.005em;
}
.attach-sub {
font-size: 12.5px;
color: #5b6577;
margin-top: 2px;
display: flex;
align-items: center;
gap: 8px;
font-variant-numeric: tabular-nums;
}
.attach-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: #aab3c2;
flex-shrink: 0;
}
.attach-sub .preview-cta {
color: #2563eb;
font-weight: 500;
}
.attach-actions {
display: flex;
gap: 2px;
align-items: center;
flex-shrink: 0;
}
.icon-btn {
width: 30px;
height: 30px;
border-radius: 7px;
background: transparent;
border: 1px solid transparent;
color: #5b6577;
cursor: pointer;
display: grid;
place-items: center;
transition: background .15s ease, color .15s ease, border-color .15s ease;
padding: 0;
}
.icon-btn:hover {
background: #f3f5f9;
color: #0b1220;
border-color: #eaeef4;
}
.control-label {
font-weight: 600;
color: #374151;
margin-bottom: 8px;
text-align: left !important;
}
.dashboard-grid {
display: grid;
gap: 20px; /* Reference gap */
grid-template-columns: repeat(4, 1fr);
margin-bottom: 24px;
width: 100%;
}
@media (max-width: 1024px) {
.dashboard-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}
}
@media (max-width: 640px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
}
.dashboard-grid.secondary {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.dashboard-grid.secondary .span-full {
grid-column: 1 / -1;
}
@media (max-width: 991px) {
.dashboard-grid.secondary {
grid-template-columns: 1fr;
}
.dashboard-grid.secondary .span-full {
grid-column: auto;
}
}
/* Subtle hover lift effect */
.hover-lift {
border: 1px solid #f1f5f9;
border-radius: 20px;
}
/* Primary Stat Cards - Fast.site Style */
.premium-stat-card {
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 24px; /* Matches fast.site */
padding: 32px; /* Matches fast.site */
display: flex;
flex-direction: column; /* Icon on top */
align-items: flex-start;
gap: 24px;
height: 210px; /* Matches fast.site specifications */
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
position: relative;
overflow: hidden;
}
.premium-stat-card .icon-container {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
/* Themed Icon Colors from fast.site */
.icon-container.blue { background: rgb(239, 246, 255); color: rgb(37, 99, 235); }
.icon-container.red { background: rgb(254, 242, 242); color: rgb(220, 38, 38); }
.icon-container.green { background: rgb(240, 253, 244); color: rgb(22, 163, 74); }
.icon-container.purple { background: rgb(250, 245, 255); color: rgb(147, 51, 234); }
.premium-stat-card .material-symbols-outlined {
font-size: 28px;
color: inherit; /* Use theme color */
}
.premium-stat-card .content-box {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start; /* Fix: Force left alignment */
}
.premium-stat-card .value {
font-size: 20px; /* Matches fast.site title size */
font-weight: 700;
color: rgb(26, 25, 37);
line-height: 1.2;
text-align: left; /* Fix: Explicit alignment */
}
.premium-stat-card .label {
font-size: 16px; /* Matches fast.site description size */
font-weight: 400;
color: rgb(81, 81, 94);
text-transform: none; /* Removed uppercase for clean look */
letter-spacing: normal;
text-align: left; /* Fix: Explicit alignment */
padding: 0 !important; /* Fix: Override Bootstrap .label padding */
}
/* Sales Ratio Badge */
.sales-ratio-badge {
position: absolute;
top: 12px;
right: 16px;
text-align: right;
}
.sales-ratio-badge .ratio-val {
font-size: 10px;
font-weight: 700;
color: #0f172a;
display: block;
}
.sales-ratio-badge .ratio-label {
font-size: 8px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: -0.01em;
}
/* Secondary Info Cards */
.info-card {
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.info-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.info-card-header .header-left {
display: flex;
align-items: center;
gap: 12px;
}
.info-card-header .icon-box {
background: #f1f5f9;
padding: 8px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.info-card-header .icon-box .material-symbols-outlined {
font-size: 20px;
color: #0f172a;
}
.info-card-header h2 {
font-size: 14px;
font-weight: 600;
color: #1e293b;
margin: 0;
letter-spacing: -0.01em;
}
.info-card .percentage-label {
font-size: 12px;
font-weight: 500;
color: #94a3b8;
}
/* Progress Bar */
.progress-bar-bg {
background-color: #f1f5f9;
height: 8px;
border-radius: 4px;
overflow: hidden;
margin-bottom: 16px;
}
.progress-bar-fill {
background-color: #2563eb;
height: 100%;
transition: width 0.3s ease;
}
.card-description {
font-size: 14px;
color: #64748b;
font-weight: 500;
margin: 0;
}
.card-description strong {
color: #0f172a;
font-weight: 700;
}
/* Link Copy Section */
.link-copy-container {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 12px;
align-items: flex-start;
}
.link-copy-container textarea,
.link-copy-container input {
width: 100%;
}
@media (min-width: 992px) {
.link-copy-container textarea,
.link-copy-container input {
flex: none;
width: 100%;
}
}
.link-copy-container input {
flex-grow: 1;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
font-family: monospace;
color: #475569;
}
.link-copy-container input:focus {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.btn-copy {
background: #0f172a;
color: #ffffff;
font-size: 12px;
font-weight: 600;
padding: 10px 16px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background 0.2s ease;
white-space: nowrap;
}
.btn-copy:hover {
background: #1e293b;
}
.btn-copy.success {
background: #16a34a !important;
}
.card-footer-note {
margin-top: 12px;
font-size: 11px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Commission Details */
.details-row {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f8fafc;
padding-bottom: 12px;
}
.details-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.detail-label {
font-size: 12px;
font-weight: 500;
color: #64748b;
}
.detail-value {
font-size: 12px;
font-weight: 700;
color: #0f172a;
}
.badge-blue {
background: #eff6ff;
color: #1d4ed8;
padding: 4px 8px;
border-radius: 4px;
}
.space-y-4 > * + * {
margin-top: 16px;
}
/* END: High-Fidelity Dashboard Styles */
.sidebar-toggle-btn {
display: none;
color: #000000;
font-size: 24px;
cursor: pointer;
padding: 15px 15px;
align-items: center;
justify-content: center;
}
.sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 99999999;
}
.admin-bar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
}
/* Cap navbar logo to avoid blowing up at mid-range widths like 1024px */
.navbar-logo img {
max-height: 38px !important;
width: auto !important;
object-fit: contain;
}
.navbar-left-group, .navbar-right-group {
display: flex;
align-items: center;
}
.navbar-right-group {
margin-left: auto;
}
.navbar-right-group .nav > li > a {
display: flex;
align-items: center;
padding: 15px 10px;
color: #fff;
}
.page-heading-sec h1 {
padding: 13px;
margin: 0px;
font-size: 23px;
}
.page-heading-sec .label-danger {
font-size: 14px;
font-weight: normal;
}
.portlet-title h4 {
color: #fff;
padding: 14px 19px;
cursor: pointer;
}
.portlet.portlet-basic {
margin-top: 0 !important;
}
/* overridden below in the Commission DataTable section */
div#area-affiliate svg {
width: 100% !important;
overflow: hidden;
}
.footer {
clear: both;
width: 100%;
z-index: 9999;
background: #f7f7f8;
position: relative;
bottom: 0;
text-align: center;
padding: 32px 14px;
color: #64748b;
border-top: 1px solid #e2e8f0;
}
nav ul li ul.submenu li a.active {
background: rgba(23, 23, 23, 0.65);
}
.portlet-footer {
background: #fff;
padding: 16px 22px;
}
.dataTables_processing {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(2px);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
color: #3b82f6 !important;
font-weight: 600;
font-size: 14px;
padding: 10px 24px !important;
border-radius: 8px;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
margin: 0 !important;
}
.portlet .portlet-body img {
max-width: 100%;
height: auto;
}
@media only screen and (max-width: 991px) {
.logo-area img {
width: auto !important;
}
.logo-area {
height: auto !important;
}
.adm-navi-area {
width: 100%;
border-bottom: 1px solid #556273;
}
.adm-navi-area ul {
display: table;
margin: 0 auto;
}
.adm-log-bar {
float: none;
margin: 0 auto;
display: table;
}
.dataTable-scroll {
overflow-x: scroll;
}
.dataTable-scroll .dataTable {
min-width: 900px !important;
}
input[type=file] {
width: 100%;
}
}
@media only screen and (max-width: 767px) {
.form-group input.btn.btn-sm.btn-primary {
margin-top: 10px;
}
.dataTable-scroll {
overflow-x: scroll;
}
.dataTable-scroll .dataTable {
min-width: 900px !important;
}
.portlet-footer .btn {
width: 100%;
margin-bottom: 5px;
}
.page-header.title {
margin-left: 0;
margin-right: 0;
}
.content-area .panel-group.col-md-12 { /*padding:0px;*/
}
.well span.pull-right {
float: none !important;
}
span.pull-right.md-full {
float: right !important;
}
}
@media only screen and (max-width: 321px) {
.logo-area img {
width: 74% !important;
}
}
@media only screen and (max-width: 598px) {
.adm-navi-area, .adm-log-bar {
width: 100%;
}
.adm-navi-area ul {
margin: 0 auto;
display: table;
}
.logo-area img {
width: 68%;
}
.adm-navi-area ul li a {
font-size: 12px;
padding: 15px 9px;
transition: all 0.2s ease;
}
.col-md-3.hl-data {
width: 100%;
padding: 0px;
}
.social-media {
width: 100%;
border-top: 1px solid #222a35;
margin-top: 10px;
padding-top: 10px;
}
.social-media ul {
display: table;
margin: 0 auto;
}
.dropdown.pull-right.mb-left {
float: left !important;
}
.page-heading-sec:after {
content: '';
clear: both;
display: block;
}
.page-heading-sec .pull-right {
float: left !important;
}
.table-scroll .table {
width: 200% !important;
}
.table-scroll {
overflow: auto;
}
.keywords-google {
word-wrap: break-word;
width: 100%;
}
.list-group-item {
word-wrap: break-word;
}
.dataTable-scroll {
overflow-x: scroll;
}
.dataTable-scroll .dataTable {
min-width: 900px !important;
}
span.pull-right.mb-sects {
clear: both;
float: left;
width: 100%;
}
.pull-left.md-full {
width: 100%;
clear: both !important;
display: block;
}
.login-page-logo img {
width: 100%;
}
.text-center.footer-logo img {
width: 80%;
padding-top: 20px;
}
.login-block .input-group {
width: 100%;
}
.dropdown.pull-right.mb-left > .dropdown-menu {
left: 0;
right: inherit;
}
.dataTables_wrapper {
overflow-x: scroll !important;
}
.dataTables_wrapper .table.table-bordered {
width: 150% !important;
max-width: 150% !important;
}
.idevads-container_1 {
width: 100% !important;
margin: 0 !important;
}
}
.dataTables_length select {
width: 70px;
padding: 6px 12px;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #0f172a;
font-size: 13px;
outline: none;
transition: all 0.2s;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px;
padding-right: 28px;
display: inline-block;
}
.dataTables_length select:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
/* Bootstrap 4 custom-select override — modern look for DataTables length dropdown */
.dataTables_length select.custom-select,
.dataTables_length select.form-control {
width: auto !important;
min-width: 62px !important;
height: auto !important;
padding: 6px 30px 6px 10px !important;
border-radius: 8px !important;
border: 1.5px solid #e2e8f0 !important;
background-color: #fff !important;
color: #1e40af !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 8px center !important;
background-size: 13px !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
box-shadow: 0 1px 3px rgba(59, 130, 246, 0.08) !important;
outline: none !important;
vertical-align: middle !important;
display: inline-block !important;
}
.dataTables_length select.custom-select:focus,
.dataTables_length select.form-control:focus {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
outline: none !important;
background-color: #fff !important;
}
.dataTables_paginate.paging_bootstrap {
text-align: right;
margin-top: 16px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.dataTables_paginate.paging_bootstrap ul.pagination {
margin: 0;
display: flex;
gap: 4px;
padding-left: 0;
list-style: none;
}
.dataTables_paginate.paging_bootstrap ul.pagination li {
display: inline-block;
}
.dataTables_paginate.paging_bootstrap ul.pagination li a {
position: relative;
padding: 6px 12px;
line-height: 1.5;
color: #64748b;
background-color: #fff;
border: 1px solid #e2e8f0;
border-radius: 6px !important;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
text-decoration: none;
cursor: pointer;
}
.dataTables_paginate.paging_bootstrap ul.pagination li a:hover {
background-color: #f8fafc;
color: #0f172a;
border-color: #cbd5e1;
}
.dataTables_paginate.paging_bootstrap ul.pagination li.active a {
z-index: 2;
color: #fff;
background-color: #3b82f6;
border-color: #3b82f6;
}
.dataTables_paginate.paging_bootstrap ul.pagination li.disabled a {
color: #cbd5e1;
pointer-events: none;
background-color: #f8fafc;
border-color: #e2e8f0;
}
/*--------- Additional Style 5-18-2018 ---------*/
#dyntable_Pending_Debits_filter .form-control {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-color: #fff;
background-position: 0px 5px !important;
padding-left: 22px;
}
/*--------- Additional Style 7-4-2018 ---------*/
/* Remove broken FontAwesome/pseudo icon - use SVG background on input instead */
.dataTables_filter label:before {
display: none;
}
div.dataTables_wrapper div.dataTables_filter label {
width: auto;
position: relative;
display: inline-flex;
align-items: center;
gap: 0;
margin: 0;
font-weight: 500;
font-size: 13px;
color: #475569;
}
div.dataTables_wrapper div.dataTables_filter label > span {
/* hide the "Search:" text if present */
white-space: nowrap;
margin-right: 8px;
}
.dataTables_filter span.input-group-addon {
display: none;
}
.dataTables_filter input.form-control.form-control-sm {
float: none;
}
.dataTables_filter .input-group {
display: block;
}
.dataTables_filter input,
.dataTables_filter input.form-control {
padding: 8px 14px 8px 38px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E") no-repeat 12px center !important;
color: #0f172a !important;
font-size: 13px !important;
height: 38px !important;
width: 220px !important;
transition: all 0.2s !important;
outline: none !important;
box-shadow: none !important;
}
.dataTables_filter input:focus,
.dataTables_filter input.form-control:focus {
border-color: #3b82f6 !important;
background-color: #fff !important;
box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}
/* --- DataTables top row: Length left, Filter right --- */
div.dataTables_wrapper div.dataTables_length {
float: left;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: #475569;
}
div.dataTables_wrapper div.dataTables_filter {
float: right;
}
/* Bootstrap col overrides inside DT wrapper top/bottom rows */
div.dataTables_wrapper .row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin: 0;
}
div.dataTables_wrapper .row:first-child {
margin-bottom: 14px;
}
div.dataTables_wrapper .row:last-child {
margin-top: 14px;
}
div.dataTables_wrapper .col-sm-12 {
padding: 0;
}
@media (max-width: 600px) {
div.dataTables_wrapper .row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px;
}
.dataTables_filter input,
.dataTables_filter input.form-control {
width: 100% !important;
}
}
@media screen And (max-width:375px){
.page-header > h1 > span {float:none !important;}
}
/* ================================================================
Commission DataTable – skeleton loader & table styling
================================================================ */
/* Outer wrapper: relative so skeleton can overlay the DataTables wrapper */
.commission-dt-wrap {
position: relative;
min-height: 280px;
width: 100%;
}
.card-body-pvm {
width: 100% !important;
margin: 0 !important;
padding: 0 24px 24px 24px !important;
}
.info-card {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
display: block !important;
}
.content-area {
width: 100% !important;
padding: 0 !important;
}
.cnt {
width: 100% !important;
}
/* ---- Skeleton loader ---- */
@keyframes commission-shimmer {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
.skeleton-block {
display: inline-block;
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
background-size: 600px 100%;
animation: commission-shimmer 1.4s ease-in-out infinite;
border-radius: 4px;
}
/* Skeleton sits on top of the DataTables wrapper until first draw */
.commission-skeleton {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
}
.commission-skeleton-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px 14px;
border-bottom: 1px solid #f1f5f9;
}
.commission-skeleton-table {
padding: 0;
flex: 1;
overflow: hidden;
}
.commission-skeleton-thead {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.commission-skeleton-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #f8fafc;
}
.commission-skeleton-row:last-child {
border-bottom: none;
}
.commission-skeleton-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-top: 1px solid #f1f5f9;
}
/* ---- DataTables wrapper for commission table ---- */
div#dyntable_commission_list_wrapper {
background: #fff;
padding: 0;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
position: relative;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
/* Override ALL Bootstrap row/col classes for this wrapper */
#dyntable_commission_list_wrapper .row {
display: flex !important;
flex-wrap: nowrap !important;
margin: 0 !important;
width: 100% !important;
}
#dyntable_commission_list_wrapper .row::before,
#dyntable_commission_list_wrapper .row::after {
content: none !important;
display: none !important;
}
/* Top/bottom bar — left col: shrink to content */
#dyntable_commission_list_wrapper > .row:first-child > [class*="col-"]:first-child,
#dyntable_commission_list_wrapper > .row:last-child > [class*="col-"]:first-child {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
}
/* Top/bottom bar — right col: grow to fill remaining space, right-align content */
#dyntable_commission_list_wrapper > .row:first-child > [class*="col-"]:last-child,
#dyntable_commission_list_wrapper > .row:last-child > [class*="col-"]:last-child {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
}
/* Table row: col must be full width */
#dyntable_commission_list_wrapper > .row:not(:first-child):not(:last-child) > [class*="col-"] {
padding: 0 !important;
flex: 1 1 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Top bar: length left, filter right */
#dyntable_commission_list_wrapper > .row:first-child {
padding: 16px 20px;
border-bottom: 1px solid #f1f5f9;
background: #fafbfc;
align-items: center;
justify-content: flex-start;
gap: 20px;
}
/* Remove float from length/filter */
#dyntable_commission_list_wrapper .dataTables_length {
float: none !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
}
#dyntable_commission_list_wrapper .dataTables_filter {
float: none !important;
margin: 0 !important;
}
/* Bottom bar: info left, paginate right */
#dyntable_commission_list_wrapper > .row:last-child {
padding: 12px 20px;
border-top: 1px solid #f1f5f9;
background: #fafbfc;
align-items: center;
justify-content: flex-start;
gap: 20px;
}
/* Table container row */
#dyntable_commission_list_wrapper > .row:not(:first-child):not(:last-child) {
padding: 0;
flex: 1;
}
/* Table headers */
#dyntable_commission_list thead tr {
background: #f8fafc;
text-align: left;
}
.commission-th {
padding: 12px 16px !important;
border-bottom: 1px solid #e2e8f0 !important;
border-top: none !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #64748b !important;
text-transform: uppercase !important;
letter-spacing: 0.06em;
white-space: nowrap;
vertical-align: middle !important;
background: #f8fafc;
text-align: left !important;
}
.commission-th-right {
text-align: right !important;
}
/* ── DataTables sort arrows: "Label ↑↓" inline pair ── */
/* Trim Bootstrap4 DT's extra 30px right padding; set cursor */
#dyntable_commission_list thead th.sorting,
#dyntable_commission_list thead th.sorting_asc,
#dyntable_commission_list thead th.sorting_desc,
#dyntable_payment_history thead th.sorting,
#dyntable_payment_history thead th.sorting_asc,
#dyntable_payment_history thead th.sorting_desc,
#dyntable_payment_Traffic thead th.sorting,
#dyntable_payment_Traffic thead th.sorting_asc,
#dyntable_payment_Traffic thead th.sorting_desc,
#dyntable_leads thead th.sorting,
#dyntable_leads thead th.sorting_asc,
#dyntable_leads thead th.sorting_desc {
padding-right: 16px !important;
cursor: pointer;
}
/* ::before renders BEFORE the text — hide it completely for all states */
#dyntable_commission_list thead th.sorting::before,
#dyntable_commission_list thead th.sorting_asc::before,
#dyntable_commission_list thead th.sorting_desc::before,
#dyntable_payment_history thead th.sorting::before,
#dyntable_payment_history thead th.sorting_asc::before,
#dyntable_payment_history thead th.sorting_desc::before,
#dyntable_payment_Traffic thead th.sorting::before,
#dyntable_payment_Traffic thead th.sorting_asc::before,
#dyntable_payment_Traffic thead th.sorting_desc::before,
#dyntable_leads thead th.sorting::before,
#dyntable_leads thead th.sorting_asc::before,
#dyntable_leads thead th.sorting_desc::before {
display: none !important;
}
/* Non-sortable columns — no arrows at all */
#dyntable_commission_list thead th.sorting_disabled::before,
#dyntable_commission_list thead th.sorting_disabled::after,
#dyntable_payment_history thead th.sorting_disabled::before,
#dyntable_payment_history thead th.sorting_disabled::after,
#dyntable_payment_Traffic thead th.sorting_disabled::before,
#dyntable_payment_Traffic thead th.sorting_disabled::after,
#dyntable_leads thead th.sorting_disabled::before,
#dyntable_leads thead th.sorting_disabled::after {
display: none !important;
}
/* Hide arrows on all non-date (non-first) sortable columns */
#dyntable_commission_list thead th.sorting:not(:first-child)::after,
#dyntable_commission_list thead th.sorting_asc:not(:first-child)::after,
#dyntable_commission_list thead th.sorting_desc:not(:first-child)::after,
#dyntable_payment_history thead th.sorting:not(:first-child)::after,
#dyntable_payment_history thead th.sorting_asc:not(:first-child)::after,
#dyntable_payment_history thead th.sorting_desc:not(:first-child)::after,
#dyntable_payment_Traffic thead th.sorting:not(:first-child)::after,
#dyntable_payment_Traffic thead th.sorting_asc:not(:first-child)::after,
#dyntable_payment_Traffic thead th.sorting_desc:not(:first-child)::after,
#dyntable_leads thead th.sorting:not(:first-child)::after,
#dyntable_leads thead th.sorting_asc:not(:first-child)::after,
#dyntable_leads thead th.sorting_desc:not(:first-child)::after {
display: none !important;
}
/* Date column (first th) only — arrow inline after label */
#dyntable_commission_list thead th:first-child.sorting::after,
#dyntable_commission_list thead th:first-child.sorting_asc::after,
#dyntable_commission_list thead th:first-child.sorting_desc::after,
#dyntable_payment_history thead th:first-child.sorting::after,
#dyntable_payment_history thead th:first-child.sorting_asc::after,
#dyntable_payment_history thead th:first-child.sorting_desc::after,
#dyntable_payment_Traffic thead th:first-child.sorting::after,
#dyntable_payment_Traffic thead th:first-child.sorting_asc::after,
#dyntable_payment_Traffic thead th:first-child.sorting_desc::after,
#dyntable_leads thead th:first-child.sorting::after,
#dyntable_leads thead th:first-child.sorting_asc::after,
#dyntable_leads thead th:first-child.sorting_desc::after {
position: static !important;
display: inline-block !important;
bottom: auto !important;
right: auto !important;
margin-left: 5px !important;
vertical-align: middle !important;
font-size: 11px !important;
line-height: 1 !important;
opacity: 1 !important;
}
/* Date unsorted → "DATE ↑↓" grey */
#dyntable_commission_list thead th:first-child.sorting::after,
#dyntable_payment_history thead th:first-child.sorting::after,
#dyntable_payment_Traffic thead th:first-child.sorting::after,
#dyntable_leads thead th:first-child.sorting::after {
content: '\2191\2193' !important;
color: #94a3b8 !important;
}
/* Date ascending → "DATE ↑↓" blue */
#dyntable_commission_list thead th:first-child.sorting_asc::after,
#dyntable_payment_history thead th:first-child.sorting_asc::after,
#dyntable_payment_Traffic thead th:first-child.sorting_asc::after,
#dyntable_leads thead th:first-child.sorting_asc::after {
content: '\2191\2193' !important;
color: #3b82f6 !important;
}
/* Date descending → "DATE ↓↑" blue */
#dyntable_commission_list thead th:first-child.sorting_desc::after,
#dyntable_payment_history thead th:first-child.sorting_desc::after,
#dyntable_payment_Traffic thead th:first-child.sorting_desc::after,
#dyntable_leads thead th:first-child.sorting_desc::after {
content: '\2193\2191' !important;
color: #3b82f6 !important;
}
/* Table rows */
#dyntable_commission_list.commission-dt tbody tr td {
padding: 14px 16px;
vertical-align: middle;
border-top: none;
border-bottom: 1px solid #f1f5f9;
font-size: 13px;
color: #334155;
text-align: left !important;
}
/* Last column (Details/actions) matches right-aligned header — exclude empty-state row */
#dyntable_commission_list.commission-dt tbody tr td:last-child:not(.dataTables_empty) {
text-align: right !important;
}
#dyntable_commission_list.commission-dt tbody tr:last-child td {
border-bottom: none;
}
#dyntable_commission_list.commission-dt tbody tr:hover td {
background: #f8fafc;
transition: background 0.15s;
}
/* Suppress DataTables' own "Processing..." popup — skeleton handles loading UX */
#dyntable_commission_list_wrapper .dataTables_processing {
display: none !important;
}
/* Info text ("Showing X to Y of Z entries") */
#dyntable_commission_list_wrapper .dataTables_info {
font-size: 12px;
color: #64748b;
padding: 0 !important;
margin: 0 !important;
line-height: 1;
order: -1;
}
/* Pagination */
#dyntable_commission_list_wrapper .dataTables_paginate {
float: none !important;
display: flex !important;
gap: 8px !important;
margin: 0 !important;
}
#dyntable_commission_list_wrapper .paginate_button {
float: none !important;
padding: 6px 10px !important;
}
/* Length selector label */
#dyntable_commission_list_wrapper .dataTables_length label {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 13px;
color: #475569;
font-weight: 500;
}
/* Filter label */
#dyntable_commission_list_wrapper .dataTables_filter label {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* Remove duplicate border from table-responsive wrapper if present */
.commission-dt-wrap .table-responsive {
border: none !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* Ensure table fills wrapper cleanly */
#dyntable_commission_list_wrapper table.commission-dt {
margin: 0 !important;
border: none !important;
}
/* Fix Bootstrap col padding inside DT wrapper rows */
#dyntable_commission_list_wrapper .row > [class*="col-"] {
padding-left: 0;
padding-right: 0;
}
/* Main Navigation Area Styles (Desktop Only) */
@media only screen and (min-width: 1201px) {
.adm-navi-area-container {
padding: 0;
}
.admin-bar-wrapper {
width: 100vw !important;
max-width: 100vw !important;
padding: 0 !important;
margin: 0 !important;
background: #f7f7f8 !important;
position: relative;
z-index: 1000;
left: 0;
top: 0;
}
.admin-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 40px !important;
min-height: 80px;
background: transparent !important;
box-shadow: none !important;
}
.navbar-left-group {
display: flex;
align-items: center;
}
.navbar-logo {
margin-right: 40px;
}
.navbar-logo img {
height: 32px !important;
width: auto;
}
.adm-navi-area {
float: none !important;
background-color: transparent !important;
}
.adm-navi-area ul {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
gap: 8px;
}
.adm-navi-area ul li {
float: none !important;
margin: 0 !important;
}
}
.adm-navi-area ul li a {
color: #1a1925 !important; /* Exact reference color */
font-weight: 500;
padding: 4px 12px !important; /* Exact reference padding */
font-size: 13px !important; /* Exact reference size */
transition: all 0.2s ease;
text-decoration: none !important;
border-radius: 50px; /* Pill shape */
}
.adm-navi-area ul li a:hover {
background-color: #ffffff !important; /* subtle hover background */
}
.navbar-right-group {
display: flex;
align-items: center;
gap: 12px;
}
.adm-log-bar {
float: none !important;
display: flex !important;
align-items: center !important;
padding: 0 !important;
gap: 10px !important;
}
.adm-log-bar .dropdown {
margin-left: 0 !important;
}
.adm-log-bar .btn-primary.dropdown-toggle {
background: transparent !important;
color: #1a1925 !important;
border: none !important;
border-radius: 50px !important; /* Pill shape */
padding: 8px 12px !important;
font-size: 13px !important;
font-weight: 500;
font-family: 'Google Sans Flex', 'Inter', sans-serif !important;
transition: all 0.3s ease;
}
.adm-log-bar .btn-primary.dropdown-toggle:hover {
background: #ffffff !important;
}
.adm-log-bar .dd-down {
background: transparent !important;
position: static !important;
padding: 0 !important;
margin-left: 5px;
color: #777;
}
/* Ensure the language dropdown menu is aligned to the right */
.dropdown-menu-right {
right: 0 !important;
left: auto !important;
}
#fs-lang-switcher .dropdown-menu li a {
padding: 10px 20px !important;
display: block !important;
}
#fs-lang-switcher .dropdown-menu li a:hover {
background-color: #d0d0d8 !important;
color: #1a1925 !important;
}
/* Hide legacy areas */
.logo-area {
display: none !important;
}
/* --- CUSTOM SIDEBAR v13: CSS CASCADE RECOVERY --- */
/* Ensure the main sidebar container never collapses away on mobile */
.sidebar .sidebar-collapse.collapse {
display: block !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 1. SHARED CORE STYLES (Colors, Fonts, Transitions) */
.left-area.sidenav {
display: block !important;
min-height: 100vh;
background: #f7f7f8 !important;
z-index: 1000;
border-right: 1px solid #e2e8f0;
font-family: 'Inter', sans-serif;
padding: 16px 0;
overflow-x: hidden !important;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar nav ul { list-style: none; padding: 0; margin: 0 !important; width: 100% !important; display: block !important; }
.sidebar nav ul li { width: 100% !important; display: block !important; margin: 0 !important; }
.sidebar nav ul li.panel { background: transparent !important; border: none !important; }
.nav-section-title {
display: block;
padding: 8px 20px 4px;
font-size: 11px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sidebar nav ul li a {
display: flex !important;
align-items: center;
width: 100% !important;
padding: 8px 16px;
color: #475569 !important;
font-size: 13px;
font-weight: 500;
text-decoration: none !important;
white-space: nowrap !important;
transition: all 0.2s ease;
box-sizing: border-box !important;
}
.sidebar nav ul li a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; }
.sidebar nav ul li a i.fa { width: 18px; margin-right: 10px; font-size: 14px; color: #111827 !important; flex-shrink: 0; }
.sidebar nav ul li.active > a, .sidebar nav ul li a.active {
background: #ffffff !important;
color: #0f172a !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
border-left: 5px solid #111827 !important;
font-weight: 600;
}
/* Dropdown Animation */
.sidebar nav ul li.panel ul.collapse {
display: block !important;
height: auto !important;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
opacity: 0;
}
.sidebar nav ul li.panel ul.collapse.in { max-height: 1200px; opacity: 1; }
.sidebar nav ul li.panel .accordion-toggle::after {
content: '\f107';
font-family: 'FontAwesome';
margin-left: auto;
font-size: 12px;
color: #94a3b8;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.sidebar nav ul li.open .accordion-toggle::after { transform: rotate(-180deg); }
.sidebar nav ul li.panel ul.collapse li a { padding: 6px 16px 6px 40px; font-size: 12px !important; color: #64748b !important; }
/* ===== SIDEBAR VISIBILITY OVERRIDE =====
The global rule 'nav ul li a { color: #fff }' bleeds into the sidebar.
These rules use higher specificity to force correct colors on all sidebar content. */
.left-area.sidenav .sidebar nav ul li a,
.left-area.sidenav .sidebar nav ul li a:link,
.left-area.sidenav .sidebar nav ul li a:visited {
color: #475569 !important;
}
.left-area.sidenav .sidebar nav ul li a i,
.left-area.sidenav .sidebar nav ul li a i.fa {
color: #111827 !important;
}
.left-area.sidenav .sidebar nav ul li.active > a,
.left-area.sidenav .sidebar nav ul li a.active {
color: #0f172a !important;
}
.left-area.sidenav .sidebar nav ul li.panel ul.collapse li a {
color: #64748b !important;
}
.left-area.sidenav .nav-section-title {
color: #94a3b8 !important;
}
/* ===== NUCLEAR SIDEBAR COLOR OVERRIDE =====
Targets #side (the actual menu ul ID) to beat Bootstrap .nav and any theme color bleeding.
Visible text must be dark on the light #f7f7f8 background. */
#side.side-nav li a,
#side.side-nav li a:link,
#side.side-nav li a:visited,
#side.side-nav li a:hover {
color: #475569 !important;
background: transparent !important;
}
#side.side-nav li a i,
#side.side-nav li a i.fa {
color: #111827 !important;
}
#side.side-nav li.active > a,
#side.side-nav li a.active,
#side.side-nav li.panel ul li.active > a,
#side.side-nav li.panel ul li a.active {
background: #ffffff !important;
color: #0f172a !important;
}
#side.side-nav li.panel ul li a {
color: #64748b !important;
background: transparent !important;
}
#side.side-nav .nav-section-title,
.side-nav .nav-section-title {
color: #94a3b8 !important;
}
/* Override any other element that carries old teal/colored branding on sidebar */
.left-area #side * .nav-section-title,
.left-area .sidebar nav .nav-section-title {
color: #94a3b8 !important;
}
/* 2. DESKTOP-ONLY LAYOUT (Min-width: 992px) */
@media only screen and (min-width: 992px) {
.left-area.sidenav {
position: relative !important; /* flows with page — no sticky/fixed */
top: auto;
width: 240px !important;
float: left !important;
height: auto !important; /* let content determine height */
min-height: 100vh !important; /* at least full viewport tall */
overflow-y: visible !important;
}
.sidebar .sidebar-collapse.collapse {
max-height: none !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
.left-area.sidenav ~ .content-area {
width: calc(100% - 240px) !important;
float: left !important;
padding: 0 !important;
margin: 0 !important;
background: #f7f7f8 !important;
}
#sidebar-mobile-toggle { display: none !important; }
}
/* Modern Login Component (Mirrored from fast.site) */
.auth-title {
font-size: 30px !important;
font-weight: 600 !important;
color: #1A1925 !important;
margin-bottom: 24px !important;
text-align: left !important;
font-family: 'Google Sans Flex', 'Inter', sans-serif !important;
}
.auth-label {
display: block !important;
font-size: 14px !important;
color: #1A1925 !important;
font-weight: 500 !important;
margin-bottom: 6px !important;
text-align: left !important;
font-family: 'Google Sans Flex', 'Inter', sans-serif !important;
}
.auth-input {
height: 40px !important;
background: #FFFFFF !important;
border: none !important;
box-shadow: rgba(26, 25, 37, 0.08) 0px 0px 0px 1px inset !important;
border-radius: 8px !important;
padding: 0 14px !important;
font-size: 13px !important;
color: #1A1925 !important;
transition: all 0.2s ease !important;
width: 100% !important;
}
.auth-input:focus {
box-shadow: rgba(26, 25, 37, 0.08) 0px 0px 0px 1px inset,
rgba(66, 133, 244, 0.25) 0px 0px 0px 2px !important;
outline: none !important;
}
.auth-actions {
margin-top: 24px !important;
}
.btn-auth-primary {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 100% !important;
padding: 10px 16px !important;
background: #4285F4 !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
}
.btn-auth-primary:hover {
background: #3367D6 !important;
color: #FFFFFF !important;
}
.auth-footer {
margin-top: 16px !important;
text-align: center !important;
}
.btn-auth-secondary {
display: inline-block !important;
font-size: 14px !important;
color: #4285F4 !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.btn-auth-secondary:hover {
color: #3367D6 !important;
text-decoration: underline !important;
}
/* Welcome Text Card (Balanced with Auth Card) */
.welcome-text-card {
background: transparent !important;
padding: 20px 0 !important; /* Adjusted padding for transparent state */
width: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
.auth-card {
background: #FFFFFF !important;
padding: 40px 32px !important;
border: 0.8px solid rgba(26, 25, 37, 0.08) !important;
border-radius: 16px !important;
box-shadow: rgba(7, 1, 19, 0.03) 0px 1px 2px 0px,
rgba(7, 1, 19, 0.03) 0px 2px 4px -1px,
rgba(7, 1, 19, 0.03) 0px 4px 8px -2px !important;
margin-bottom: 0 !important; /* Remove bottom margin for flex stretch */
width: 100% !important;
height: 100% !important;
}
.welcome-text-card h4 {
color: #1A1925 !important;
font-weight: 600 !important;
margin-bottom: 16px !important;
font-family: 'Google Sans Flex', 'Inter', sans-serif !important;
}
.welcome-text-card p {
color: #4b5563 !important;
line-height: 1.6 !important;
margin-bottom: 20px !important;
font-size: 15px !important;
}
body {
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden;
width: 100% !important;
font-family: 'Google Sans Flex', 'Inter', sans-serif !important;
background-color: #f7f7f8 !important;
}
/* Program Details Section (Redesigned as Three Boxes) */
.program-details-container {
margin-top: 60px !important;
margin-bottom: 60px !important;
padding: 0 !important; /* Align with content edge */
text-align: left !important;
width: 100% !important;
}
.details-heading {
font-family: 'Google Sans Flex', 'Inter', sans-serif !important;
font-size: 32px !important; /* Balanced heading size */
font-weight: 600 !important;
color: #1A1925 !important;
margin-bottom: 48px !important;
letter-spacing: -0.5px !important;
text-align: left !important;
}
.details-grid {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 20px !important;
width: 100% !important;
margin-bottom: 40px !important;
}
.detail-card {
background: #FFFFFF !important;
border-radius: 20px !important;
box-shadow: rgba(7, 1, 19, 0.03) 0px 1px 2px 0px,
rgba(7, 1, 19, 0.03) 0px 2px 4px -1px,
rgba(7, 1, 19, 0.03) 0px 4px 8px -2px !important;
padding: 32px !important;
flex: 1 1 300px !important;
max-width: 380px !important;
min-height: 240px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
transition: all 0.3s ease !important;
border: 0.8px solid rgba(26, 25, 37, 0.08) !important;
}
.detail-card:hover {
transform: translateY(-4px) !important;
box-shadow: rgba(7, 1, 19, 0.06) 0px 4px 8px 0px,
rgba(7, 1, 19, 0.06) 0px 8px 16px -2px !important;
}
/* BEGIN: Modern Login Page Mirror (fast.site/login) */
:root {
--fast-primary: #4285F4;
--fast-primary-hover: #3367D6;
--fast-accent-yellow: #FBBC04;
--fast-accent-red: #EA4335;
--fast-bg-light: #f7f7f8;
--fast-text-main: #1a1925;
--fast-text-muted: #73737f;
--fast-border: #1a192514;
--fast-input-bg: #f9f9f9;
--fast-font: 'Google Sans Flex', sans-serif;
}
/* ===== LOGIN PAGE: MOBILE HEADER (logo + back, mobile only) ===== */
.login-mobile-header {
display: none; /* Hidden on desktop — logo is in the left column */
}
@media (max-width: 1023px) {
.login-mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 56px;
background: #fff;
position: sticky;
top: 0;
z-index: 50;
box-sizing: border-box;
width: 100%;
}
.login-mobile-logo img {
height: 28px;
width: auto;
display: block;
}
.login-mobile-logo-text {
font-family: 'Google Sans Flex', 'Bricolage Grotesque', sans-serif;
font-size: 18px;
font-weight: 700;
color: #1a1925;
text-decoration: none;
}
.login-mobile-back {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
color: #1a1925;
font-size: 13px;
font-weight: 500;
text-decoration: none !important;
}
}
/* Desktop back button: visible only on desktop */
.login-desktop-back { display: block; }
@media (max-width: 1023px) {
.login-desktop-back { display: none; }
}
.login-body {
margin: 0 !important;
padding: 0 !important;
font-family: var(--fast-font) !important;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
/* Desktop: plain white */
}
.login-page-wrapper {
display: flex;
flex-direction: row;
width: 100%;
max-width: 100vw;
min-height: 100vh;
box-sizing: border-box;
overflow-x: hidden;
padding: 5px 10px;
}
/* ===== LEFT COLUMN ===== */
.login-left-column {
flex: 1;
background: var(--fast-bg-light);
background-image: radial-gradient(#d1d5db 1px, transparent 1px);
background-size: 28px 28px;
padding: 80px 80px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.login-left-logo {
position: absolute;
top: 0;
left: calc(4vw + 4px);
height: 80px;
display: flex;
align-items: center;
}
.login-left-logo img {
height: 32px;
width: auto;
}
.login-welcome-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 18px;
background: #fff;
color: #1a1925;
border-radius: 9999px;
font-size: 14px;
font-weight: 500;
margin-bottom: 28px;
width: fit-content;
border: 1px solid rgba(230, 230, 235, 0.8);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.login-welcome-badge::before {
content: '' !important;
display: inline-block !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
animation: badgePulse 2.5s ease-in-out infinite !important;
}
@keyframes badgePulse {
0%, 100% { background: #bfdbfe; }
50% { background: #1d4ed8; }
}
.login-main-heading {
font-size: 42px;
font-weight: 600;
line-height: 1.25;
color: var(--fast-text-main);
margin: 0 0 16px 0;
max-width: 560px;
}
.login-main-heading span.accent-yellow { color: var(--fast-accent-yellow); font-style: italic; }
.login-main-heading span.accent-red { color: var(--fast-accent-red); font-style: italic; }
.login-sub-heading {
font-size: 16px;
color: #51515e;
line-height: 1.625;
margin: 0 0 32px 0;
max-width: 480px;
}
.login-stats-grid {
display: flex;
gap: 32px;
margin-bottom: 48px;
}
.login-stat-item {
display: flex;
flex-direction: column;
}
.login-stat-item .stat-value {
font-size: 30px;
font-weight: 600;
color: var(--fast-text-main);
line-height: 1;
margin-bottom: 4px;
}
.login-stat-item .stat-label {
font-size: 14px;
color: #73737f;
font-weight: 400;
margin-top: 4px;
}
.login-testimonial-card {
background: #fff;
border: 1px solid var(--fast-border);
padding: 20px;
border-radius: 16px;
box-shadow: 0 1px 2px 0 rgba(7, 1, 19, 0.03);
max-width: 500px;
}
.testimonial-text {
font-size: 14px;
line-height: 1.625;
color: #51515e;
margin: 0 0 12px 0;
font-weight: 400;
}
/* ===== RIGHT COLUMN ===== */
.login-right-column {
flex: 1;
display: flex;
flex-direction: column;
background: #fff;
position: relative;
overflow-y: auto;
overflow-x: hidden;
min-height: 100vh;
}
.login-form-container {
/* Auto margin perfectly centers but allows scroll on short screens */
margin: auto;
width: 100%;
max-width: 480px;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.back-btn-wrapper {
align-self: flex-start;
margin-bottom: 24px;
}
.btn-fast-back {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
color: var(--fast-text-main);
font-size: 14px;
font-weight: 500;
text-decoration: none !important;
transition: all 0.2s;
gap: 6px;
}
.btn-fast-back:hover {
background: #f9f9f9;
border-color: #d4d4d4;
color: var(--fast-text-main);
text-decoration: none !important;
}
.btn-fast-back .fa {
font-size: 14px;
}
/* ===== FORM CARD ===== */
.login-form-card {
background: #fff;
border: 1px solid var(--fast-border);
border-radius: 16px;
padding: 40px 32px;
box-shadow: 0px 1px 2px 0px rgba(7,1,19,0.03), 0px 2px 4px -1px rgba(7,1,19,0.03), 0px 4px 8px -2px rgba(7,1,19,0.03);
width: 100%;
/* CRITICAL: prevent children from overflowing the card */
box-sizing: border-box;
overflow: hidden;
}
.form-header-main h1 {
font-size: 30px;
font-weight: 600;
color: var(--fast-text-main);
margin: 0 0 8px 0;
}
.form-header-main p {
color: #73737f;
font-size: 14px;
margin: 0 0 24px 0;
}
/* ===== FORM ELEMENTS ===== */
.fast-form-group {
margin-bottom: 16px;
}
.fast-label {
font-size: 14px;
font-weight: 500;
color: var(--fast-text-main);
display: block;
margin-bottom: 6px;
}
.fast-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.fast-forgot-link {
font-family: var(--fast-font);
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #020617;
text-decoration: none !important;
}
.fast-forgot-link:hover {
text-decoration: underline !important;
}
.fast-input {
width: 100%;
height: 40px;
padding: 0 14px;
background: #fff;
border: none;
border-radius: 8px;
font-size: 13px;
color: var(--fast-text-main);
transition: all 0.2s;
outline: none;
font-family: var(--fast-font);
/* CRITICAL: ensures input doesn't burst out of card */
box-sizing: border-box;
max-width: 100%;
box-shadow: 0 .5px .5px #07011308,0 1px 1px -.5px #07011308,0 2px 2px -1px #07011308,0 3px 3px -1.5px #07011308,0 0 0 1px #1a192514;
}
.fast-input::placeholder {
color: #73737f;
font-size: 13px;
}
.fast-input:focus {
box-shadow: 0 .5px .5px #07011308,0 1px 1px -.5px #07011308,0 2px 2px -1px #07011308,0 3px 3px -1.5px #07011308,0 0 0 2px #4285f440;
}
/* ===== LOGIN BUTTON ===== */
.btn-fast-login {
width: 100%;
height: 44px;
background: var(--fast-primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
margin-top: 4px;
font-family: var(--fast-font);
}
.btn-fast-login:hover {
background: var(--fast-primary-hover);
}
/* ===== DIVIDER ===== */
.login-divider {
display: flex;
align-items: center;
margin: 24px 0;
gap: 16px;
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: #e5e5e5;
}
.login-divider span {
font-size: 12px;
font-weight: 500;
color: #a1a1aa;
letter-spacing: 0.05em;
white-space: nowrap;
}
/* ===== SOCIAL LOGIN BUTTONS ===== */
.social-login-buttons {
display: flex;
flex-direction: column;
gap: 12px;
}
.btn-social-login {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 44px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: var(--fast-text-main);
cursor: pointer;
transition: all 0.2s;
font-family: 'Inter', sans-serif;
}
.btn-social-login:hover {
background: #f9f9f9;
border-color: #d4d4d4;
}
.btn-social-login svg {
flex-shrink: 0;
}
/* ===== FORM FOOTER ===== */
.form-footer-fast {
margin-top: 28px;
text-align: center;
font-size: 14px;
color: var(--fast-text-muted);
}
.form-footer-fast a {
color: var(--fast-text-main);
font-weight: 500;
text-decoration: underline !important;
}
.form-footer-fast a:hover {
color: #000;
}
/* ===== LEGAL TEXT ===== */
.legal-text-fast {
margin-top: 32px;
font-size: 13px;
color: #a1a1aa;
text-align: center;
line-height: 1.5;
}
.legal-text-fast a {
color: #71717a;
text-decoration: underline;
}
/* ===== FAST ALERT STYLES ===== */
.fast-alert {
padding: 14px 18px;
margin-bottom: 24px;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
font-family: 'Google Sans Flex', 'Inter', sans-serif !important;
font-weight: 500;
}
.fast-alert-danger {
background-color: #fef2f2 !important;
border: 1px solid #fecaca !important;
color: #b91c1c !important;
}
.fast-alert-danger b,
.fast-alert-danger strong {
color: #991b1b !important;
font-weight: 700 !important;
}
.fast-alert-info {
background-color: #eff6ff !important;
border: 1px solid #bfdbfe !important;
color: #1d4ed8 !important;
}
.fast-alert-success {
background-color: #f0fdf4 !important;
border: 1px solid #bbf7d0 !important;
color: #15803d !important;
}
.fast-alert-warning {
background-color: #fffbeb !important;
border: 1px solid #fde68a !important;
color: #b45309 !important;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1400px) {
.login-left-column {
padding: 56px;
}
.login-main-heading {
font-size: 36px;
}
.login-stat-item .stat-value {
font-size: 24px;
}
}
@media (max-width: 1200px) {
.login-left-column {
padding: 40px;
}
.login-main-heading {
font-size: 30px;
}
}
/* (login-topbar is no longer used — replaced by login-mobile-header) */
@media (max-width: 1023px) {
/* ===== Mobile: dotted grey body + centered white card ===== */
.login-body {
background: var(--fast-bg-light) !important;
background-image: radial-gradient(#d1d5db 1px, transparent 1px) !important;
background-size: 28px 28px !important;
overflow-y: auto;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 16px;
box-sizing: border-box;
min-height: 100vh;
}
/* Wrapper is transparent flex column, centering everything */
.login-page-wrapper {
flex-direction: column;
max-width: 540px;
width: 100%;
min-height: auto;
margin: 0 auto;
background: transparent;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
/* Mobile header: transparent, with padding-top so logo has breathing room */
.login-mobile-header {
display: flex;
position: static !important;
padding: 16px 0 16px 0; /* top padding so logo isn't flush, 16px gap below */
height: auto;
background: transparent;
width: 100%;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
}
.login-left-column {
display: none;
}
.login-right-column {
flex: 1;
width: 100%;
max-width: 100%;
overflow-x: hidden;
min-height: auto;
background: transparent; /* only the card itself is white */
}
.login-form-container {
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.login-form-card {
width: 100%;
max-width: 100%;
box-sizing: border-box;
border: 1px solid rgba(26,25,37,0.08); /* light border for definition */
box-shadow: 0 4px 32px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.04);
border-radius: 16px;
background: #fff;
padding: 32px 24px;
}
/* Legal text sits transparently below the card */
.legal-text-fast {
padding-top: 24px;
padding-bottom: 24px;
}
}
@media (max-width: 480px) {
.login-form-card {
padding: 32px 20px;
border-radius: 16px;
}
.form-header-main h1 {
font-size: 26px;
}
.fast-input {
font-size: 16px; /* Prevents auto-zoom on iOS */
}
.btn-fast-login, .btn-social-login {
height: 50px;
font-size: 16px;
}
.login-form-container {
max-width: 100%;
margin-top: 0;
}
}
/* END: Modern Login Page Mirror */
/* ===== FAST SITE PRIMARY BUTTON ===== */
.btn-fast-primary {
width: auto;
padding: 8px 14px;
background: linear-gradient(180deg, #ededed14, #55555514), #1f62ff;
box-shadow:
inset 0 0.25px 0.25px #ffffff1f,
inset 0 0.75px 0.75px #ffffff14,
inset 0 1px 3px #ffffff14,
inset 0 -8px 20px #1a192514,
0 0.25px 0.25px #1a19253d,
0 0.75px 0.75px #1a19251f,
0 1px 1.5px -0.5px #1a19251f,
0 2px 4px -1px #1a19251f,
0 4px 8px -4px #1a19251f,
0 8px 12px -4px #1a19250f;
color: #fff;
font-weight: 500;
font-family: 'Google Sans Flex', sans-serif;
font-size: 14px;
letter-spacing: -0.084px;
transition: all 0.3s ease;
outline: none;
border-radius: 8px;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
white-space: nowrap;
user-select: none;
}
.btn-fast-primary:hover {
background: linear-gradient(180deg, #ededed14, #55555514), #1a55e8;
color: #fff;
text-decoration: none;
}
.btn-fast-primary:focus,
.btn-fast-primary:active {
color: #fff;
text-decoration: none;
outline: none;
}
.btn-fast-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ===== DASHBOARD CONTENT 1 STYLES ===== */
.summary-container-pvm {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
gap: 20px !important;
margin-bottom: 32px !important;
width: 100% !important;
}
.summary-section-pvm {
background: #ffffff !important;
border: 1px solid #E5E7EB !important;
border-radius: 12px !important;
padding: 24px !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.summary-section-pvm,
.summary-section-pvm * {
cursor: default !important;
}
.summary-header-pvm {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 8px !important;
}
.summary-label-pvm {
font-size: clamp(12px, 2vw, 13px) !important;
font-weight: 500 !important;
color: #94a3b8 !important;
text-transform: capitalize !important;
}
.summary-icon-pvm {
color: #94a3b8 !important;
font-size: clamp(18px, 3vw, 20px) !important;
}
.summary-value-pvm {
font-size: clamp(20px, 4vw, 26px) !important;
font-weight: 700 !important;
color: #1e293b !important;
margin-bottom: 16px !important;
}
.summary-footer-pvm {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: clamp(11px, 1.5vw, 12px) !important;
font-weight: 500 !important;
}
.summary-trend-up {
color: #10b981 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
.summary-trend-down {
color: #ef4444 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
.summary-period-pvm {
color: #94a3b8 !important;
font-weight: 400 !important;
}
@media (max-width: 991px) {
.summary-container-pvm {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
gap: 16px !important;
}
}
@media (max-width: 575px) {
.summary-container-pvm {
grid-template-columns: 1fr !important;
}
}
/* ===== UNIFORM CARD STYLES ===== */
.info-card {
background: #ffffff !important;
border: 1px solid #E5E7EB !important;
border-radius: 12px !important;
margin-bottom: 24px !important;
overflow: hidden !important;
transition: none !important; /* Remove any potential transitions */
}
/* Remove hover effects from all dashboard cards */
.info-card:hover,
.detail-card:hover,
.default-content-card:hover {
transform: none !important;
box-shadow: none !important;
border-color: #E5E7EB !important;
}
/* Navbar Active State */
.adm-navi-area ul li a.active {
background-color: #ffffff !important;
text-decoration: none !important;
}
/* ===== INDEX HERO SECTION ===== */
.index-hero-container {
padding: 100px 0 !important;
margin-bottom: 20px !important;
position: relative !important;
width: 100% !important;
overflow: hidden !important;
}
.index-hero-content {
max-width: 1000px !important; /* Slightly narrower for focus */
margin: 0 auto !important;
position: relative !important;
z-index: 1 !important;
text-align: center; /* Center content in hero */
}
.index-hero-badge {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 18px !important;
background: #ffffff !important;
color: #1a1925 !important;
border-radius: 9999px !important;
font-size: 14px !important;
font-weight: 500 !important;
margin-bottom: 20px !important;
border: 1px solid rgba(230, 230, 235, 0.8) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
width: fit-content !important;
}
.index-hero-badge::before {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
background: none !important;
}
.index-hero-heading {
font-size: 42px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: var(--fast-text-main) !important;
margin: 0 auto 16px auto !important;
font-family: var(--fast-font) !important;
max-width: 800px;
text-align: center !important; /* Explicit centering */
}
.index-hero-heading span.accent-yellow { color: var(--fast-accent-yellow) !important; font-style: italic !important; }
.index-hero-heading span.accent-red { color: var(--fast-accent-red) !important; font-style: italic !important; }
.index-hero-subheading {
font-size: 18px !important;
color: #51515e !important;
line-height: 1.6 !important;
margin: 0 auto 32px auto !important;
max-width: 600px !important;
font-family: var(--fast-font) !important;
text-align: center !important; /* Explicit centering */
}
.btn-navbar-dashboard {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 18px;
background: linear-gradient(180deg, #ededed14, #55555514), #e02020;
box-shadow:
inset 0 0.25px 0.25px #ffffff1f,
inset 0 0.75px 0.75px #ffffff14,
inset 0 1px 3px #ffffff14,
inset 0 -8px 20px #1a192514,
0 0.25px 0.25px #1a19253d,
0 1px 1.5px -0.5px #1a19251f,
0 4px 8px -4px #e0202040;
color: #fff !important;
font-family: 'Google Sans Flex', 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.05px;
border-radius: 8px;
text-decoration: none !important;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
height: 36px;
}
.btn-navbar-dashboard:hover {
background: linear-gradient(180deg, #ededed14, #55555514), #c41a1a;
color: #fff !important;
text-decoration: none !important;
}
.hero-dashboard-btn-wrap {
display: flex;
justify-content: center;
margin-bottom: 36px;
}
.btn-hero-dashboard {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
background: linear-gradient(180deg, #ededed14, #55555514), #1f62ff;
box-shadow:
inset 0 0.25px 0.25px #ffffff1f,
inset 0 0.75px 0.75px #ffffff14,
inset 0 1px 3px #ffffff14,
inset 0 -8px 20px #1a192514,
0 0.25px 0.25px #1a19253d,
0 1px 1.5px -0.5px #1a19251f,
0 4px 8px -2px #1a192530,
0 8px 20px -4px #1a192520;
color: #fff !important;
font-family: 'Google Sans Flex', 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.1px;
border-radius: 10px;
border: none;
text-decoration: none !important;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn-hero-dashboard:hover {
background: linear-gradient(180deg, #ededed14, #55555514), #1a55e8;
color: #fff !important;
text-decoration: none !important;
transform: translateY(-1px);
box-shadow:
inset 0 0.25px 0.25px #ffffff1f,
inset 0 0.75px 0.75px #ffffff14,
inset 0 1px 3px #ffffff14,
0 1px 1.5px -0.5px #1a19251f,
0 6px 16px -2px #1a192540,
0 12px 28px -4px #1a192530;
}
.index-stats-row {
display: flex !important;
gap: 48px !important;
margin-bottom: 32px !important;
flex-wrap: wrap !important;
justify-content: center; /* Center stats */
}
.index-stat-box {
display: flex !important;
flex-direction: column !important;
align-items: center; /* Center stat text */
}
.index-stat-box .stat-value {
font-size: 36px !important;
font-weight: 600 !important;
color: var(--fast-text-main) !important;
line-height: 1 !important;
margin-bottom: 8px !important;
}
.index-stat-box .stat-label {
font-size: 14px !important;
color: #73737f !important;
font-weight: 400 !important;
}
/* Main stat box is already defined in hero section cleanup below */
.index-testimonial-wrapper {
background: #ffffff !important;
border: 1px solid var(--fast-border) !important;
padding: 32px !important;
border-radius: 20px !important;
max-width: 600px !important;
box-shadow: 0 1px 3px 0 rgba(7, 1, 19, 0.05) !important;
margin: 0 auto !important; /* Centering the hero testimonial if still used */
}
/* ===== SHARED CARD STYLES ===== */
.detail-card, .default-content-card {
background: #ffffff !important;
border: 1px solid var(--fast-border) !important;
border-radius: 20px !important;
padding: 32px !important;
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 1px 2px 0 rgba(7, 1, 19, 0.03) !important;
}
.detail-card:hover, .default-content-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(7, 1, 19, 0.08) !important;
}
.detail-icon-box {
width: 48px;
height: 48px;
background: var(--fast-bg-light);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: var(--fast-primary);
font-size: 20px;
}
.detail-title {
font-size: 18px !important;
font-weight: 500 !important;
font-family: 'Bricolage Grotesque', sans-serif !important;
color: var(--fast-text-main) !important;
margin-bottom: 12px !important;
}
.detail-description {
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--fast-text-muted) !important;
}
/* ===== DETAIL CARD CTA ===== */
.detail-card-cta {
display: inline-flex;
align-items: center;
margin-top: auto;
padding-top: 20px;
font-size: 13px;
font-weight: 600;
font-family: 'Bricolage Grotesque', sans-serif;
color: var(--fast-primary) !important;
text-decoration: none !important;
letter-spacing: 0.01em;
transition: gap 0.2s ease;
gap: 4px;
}
.detail-card-cta:hover {
gap: 8px;
text-decoration: none !important;
color: var(--fast-primary-hover) !important;
}
/* ===== PARTNERS SECTION ===== */
.partners-section {
padding: 60px 0;
}
.partners-heading {
justify-content: center !important;
margin-bottom: 48px !important;
}
.partners-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
width: 100%;
}
.partner-card {
background: #ffffff;
border: 1px solid var(--fast-border);
border-radius: 20px;
padding: 2rem 1.5rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 2px 0 rgba(7, 1, 19, 0.03);
transition: transform 0.2s ease, box-shadow 0.2s ease;
min-height: 7rem;
}
.partner-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(7, 1, 19, 0.08);
}
.partner-logo {
max-width: 100%;
max-height: 3.5rem;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(30%);
opacity: 0.85;
transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.partner-logo-zoom {
transform: scale(1.6);
}
body .partner-logo {
width: 150px !important;
height: 56px !important;
max-width: 150px !important;
max-height: 56px !important;
object-fit: contain !important;
}
.partner-card:hover .partner-logo {
filter: grayscale(0%);
opacity: 1;
}
@media (max-width: 768px) {
.partners-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.partners-section {
padding: 40px 0;
}
}
@media (max-width: 375px) {
.partners-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.partner-card {
padding: 1.25rem 1rem;
min-height: 5rem;
}
.partner-logo {
max-height: 2.5rem;
}
}
/* ===== PREMIUM SECTION CARDS ===== */
.premium-section-title {
font-size: 28px !important;
font-weight: 600 !important;
color: var(--fast-text-main) !important;
margin: 0 0 32px 0 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
font-family: var(--fast-font) !important;
padding-top: 80px;
}
.premium-section-title i {
color: var(--fast-primary) !important;
font-size: 20px !important;
}
.premium-section-subtitle {
text-align: center;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--fast-text-muted) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
margin: -20px 0 40px 0 !important;
font-family: var(--fast-font) !important;
}
/* ===== SECTION HEADER BLOCK (badge → heading → desc) ===== */
.section-header-block {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 48px;
padding-top: 72px;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid rgba(230, 230, 235, 0.8);
border-radius: 50px;
padding: 6px 18px;
font-size: 14px;
font-weight: 500;
color: #1a1925;
font-family: var(--fast-font);
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.section-main-heading {
font-size: clamp(26px, 4vw, 36px) !important;
font-weight: 700 !important;
color: var(--fast-text-main) !important;
font-family: 'Google Sans Flex', sans-serif !important;
letter-spacing: -0.02em !important;
line-height: 1.15 !important;
margin: 0 0 14px 0 !important;
}
.section-description {
font-size: 15px !important;
color: var(--fast-text-muted) !important;
line-height: 1.6 !important;
max-width: 500px !important;
margin: 0 auto !important;
font-family: var(--fast-font) !important;
}
.premium-table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
.premium-table thead th {
background: var(--fast-bg-light) !important;
color: var(--fast-text-muted) !important;
font-weight: 500 !important;
font-size: 13px !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
padding: 12px 16px !important;
border: none !important;
}
.premium-table tbody td {
padding: 16px !important;
border-bottom: 1px solid var(--fast-border) !important;
color: var(--fast-text-main) !important;
font-size: 14px !important;
font-family: var(--fast-font) !important;
background: #ffffff !important;
}
.premium-table tbody tr:last-child td {
border-bottom: none !important;
}
/* ===== INTEGRATED DEFAULT CONTENT ===== */
.default-content-section {
padding: 40px 0 !important;
}
/* Shared pyramid grid — used by both default-content and detail sections */
.cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
justify-items: stretch;
}
/* When 3 items: last child spans full row and is self-centred */
.cards-grid > :last-child:nth-child(3n - 0):nth-child(3n) {
grid-column: 1 / -1; /* span all columns */
max-width: 50%; /* cap width at half so it doesn't stretch full row */
justify-self: center; /* centre it horizontally */
width: 100%;
}
/* Force the col wrappers to play nice (Bootstrap compat) */
.default-content-section .row {
display: flex;
flex-wrap: wrap;
}
.default-content-section .row::before,
.default-content-section .row::after {
display: none !important;
}
.default-content-section .col-md-4 {
display: flex;
flex-direction: column;
}
.default-content-card {
background: #ffffff !important;
border: 1px solid var(--fast-border) !important;
border-radius: 16px !important;
padding: 32px !important;
margin-bottom: 0;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.default-content-card h4 {
font-size: 20px !important;
font-weight: 600 !important;
color: var(--fast-text-main) !important;
margin-bottom: 12px;
}
.default-content-card p {
font-size: 15px !important;
line-height: 1.7 !important;
color: #51515e !important;
}
/* ==========================================================================
DEFINITIVE RESPONSIVE OVERRIDES (MOBILE & TABLET)
========================================================================== */
@media only screen and (max-width: 991px) {
/* Adjust cards and padding for mobile — zero horizontal padding so both
sections share the same Bootstrap .container gutters */
.premium-section-card {
padding: 24px 0 !important;
border-radius: 12px !important;
margin: 16px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.default-content-section {
padding: 24px 0 !important;
}
.default-content-card {
padding: 24px !important;
margin-bottom: 20px !important;
}
/* Stack cards to single column on mobile */
.cards-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
/* Also stack details-grid to single column on mobile for consistent widths */
.details-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
/* Remove max-width cap so card fills the full grid column */
.detail-card {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Cancel the pyramid trick so last card goes full width like the rest */
.cards-grid > :last-child:nth-child(3n):nth-child(3n) {
grid-column: auto !important;
max-width: 100% !important;
justify-self: stretch !important;
}
.admin-bar-wrapper {
z-index: 1000 !important;
}
.admin-bar {
padding: 0 12px !important;
min-height: 60px !important;
justify-content: space-between !important;
display: flex !important;
flex-wrap: nowrap !important;
overflow: visible !important;
border: none !important;
box-shadow: none !important;
}
.navbar-logo img {
max-height: 28px !important;
}
/* Collapse nav links on mobile — only show on desktop */
.adm-navi-area {
display: none !important;
}
/* Make auth buttons smaller + prevent wrapping */
.navbar-auth-buttons {
gap: 8px !important;
margin-left: 8px !important;
flex-shrink: 0;
}
.nav-login-link {
font-size: 13px !important;
white-space: nowrap;
}
.btn-signup-premium {
white-space: nowrap;
font-size: 12px !important;
padding: 8px 14px !important;
}
/* Language dropdown: keep compact */
.adm-log-bar .btn-primary.dropdown-toggle {
padding: 6px 10px !important;
font-size: 12px !important;
}
.sidebar-toggle-btn {
display: flex !important;
padding: 10px !important;
z-index: 1001 !important;
color: #334155 !important;
}
.navbar-left-group {
gap: 0 !important;
}
.navbar-logo {
margin-right: 15px !important;
}
.navbar-logo img {
max-height: 28px !important;
width: auto !important;
}
/* Sidebar Off-Canvas */
.sidenav {
height: 100vh !important;
width: 280px !important;
position: fixed !important;
z-index: 2147483647 !important; /* Absolute top */
top: 0 !important;
left: -280px !important;
background-color: #f8fafc !important;
overflow-y: auto !important;
padding-top: 20px !important;
transition: 0.3s ease !important;
box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
border-right: 1px solid #e2e8f0 !important;
display: block !important;
}
.sidenav.show-mobile {
left: 0 !important;
}
/* Overlay Shadow */
.sidebar-overlay {
display: none;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.5) !important;
z-index: 2147483646 !important; /* Just below sidebar */
}
.sidebar-overlay.active {
display: block !important;
}
body.sidebar-open {
overflow: hidden !important;
}
.content-area {
width: 100% !important;
padding-left: 0 !important;
}
/* Navbar Right Group Spacing */
.navbar-right-group .nav > li > a {
padding: 10px 4px !important;
font-size: 12px !important;
}
.navbar-right-group .nav > li > a i {
font-size: 13px !important;
}
}
/* ===== AFFILIATE STEPS DIAGRAM ===== */
.affiliate-steps-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 16px;
margin-bottom: 32px;
}
.affiliate-step-card {
background: #ffffff;
border-radius: 12px;
padding: 24px 10px 16px;
width: 110px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
border: 1px solid #f8fafc;
position: relative;
z-index: 2;
}
.step-badge {
position: absolute;
top: -12px;
left: -12px;
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
color: #fff;
font-family: 'Google Sans Flex', sans-serif;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 2;
}
.step-blue { background: #4285F4; }
.step-yellow { background: #FBBC04; color: #fff; }
.step-red { background: #EA4335; }
.step-green { background: #34A853; }
.step-icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.step-icon .material-symbols-outlined {
font-size: 24px;
}
.step-icon-blue { background: rgba(66, 133, 244, 0.1); color: #4285F4; }
.step-icon-yellow { background: rgba(251, 188, 4, 0.1); color: #FBBC04; }
.step-icon-red { background: rgba(234, 67, 53, 0.1); color: #EA4335; }
.step-icon-green { background: rgba(52, 168, 83, 0.1); color: #34A853; }
.step-title {
font-family: 'Google Sans Flex', sans-serif;
font-size: 14px;
font-weight: 700;
color: #1a1925;
margin: 0 0 4px 0;
}
.step-desc {
font-size: 11px;
color: #73737f;
margin: 0;
line-height: 1.4;
}
.step-arrow-line {
flex: 1;
border-top: 2px dashed #cbd5e1;
position: relative;
margin: 0 10px;
top: -10px;
}
.step-arrow-line::after {
content: '';
position: absolute;
right: -2px;
top: -5px;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 6px solid #cbd5e1;
}
/* Banners Page Styling */
.banner-display-container {
margin: 24px 0;
padding: 16px;
background: #f8fafc;
border-radius: 8px;
display: flex;
justify-content: center;
border: 1px dashed #cbd5e1;
overflow-x: auto;
}
@media (max-width: 768px) {
.affiliate-steps-container {
flex-direction: column;
gap: 32px;
align-items: center;
}
.step-arrow-line {
transform: rotate(90deg);
height: 40px;
flex: none;
width: 2px;
border-top: none;
border-left: 2px dashed #cbd5e1;
top: 0;
margin: 10px 0;
}
.step-arrow-line::after {
right: -5px;
top: auto;
bottom: -2px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #cbd5e1;
border-bottom: none;
}
.affiliate-step-card {
width: 100%;
max-width: 280px;
}
/* Banners Mobile Fixes */
.info-card {
padding: 16px !important;
}
.details-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px;
padding-bottom: 16px !important;
}
.detail-label {
font-size: 11px !important;
}
.detail-value {
font-size: 13px !important;
word-break: break-all;
}
.banner-display-container {
margin: 16px 0 !important;
padding: 12px !important;
}
/* Keyword Links Mobile Fixes */
.keyword-info-alert {
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
padding: 16px !important;
}
.custom-keyword-table tr {
display: flex !important;
flex-direction: column !important;
padding: 8px 16px !important;
}
.custom-keyword-table td {
width: 100% !important;
padding: 4px 0 !important;
border: none !important;
}
.keyword-example-alert {
padding: 12px !important;
}
.keyword-table-header {
white-space: normal !important;
font-size: 10px !important;
line-height: 1.4 !important;
}
}
/* Remove Bootstrap glow from readonly textareas on signup page */
textarea.form-control[readonly]:focus,
input.form-control[readonly]:focus {
outline: none !important;
box-shadow: none !important;
border-color: #e5e7eb !important;
}
/* ── Global form-control override — white-card input style (fast.site/en/support) ── */
.form-control {
background-color: #f7f7f8 !important;
border: 1px solid #eeeef0 !important;
border-radius: 10px !important;
padding: 10px 14px !important;
font-size: 14px !important;
color: #1a1925 !important;
font-family: 'Google Sans Flex', 'Inter', sans-serif !important;
box-shadow: none !important;
transition: all 0.2s ease !important;
height: auto !important;
outline: none !important;
}
.form-control::placeholder {
color: #9ca3af !important;
}
.form-control:focus {
background-color: #fff !important;
border-color: #1f62ff !important;
box-shadow: 0 0 0 3px #1f62ff1a !important;
outline: none !important;
}
select.form-control {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2373737f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"),
none !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 18px !important;
padding-right: 36px !important;
cursor: pointer;
}
/* ============================================================
PREMIUM REDESIGN OVERRIDES (CASCADE WINNERS)
============================================================ */
body .index-hero-container {
padding: 120px 0 !important;
background: radial-gradient(circle at 10% 20%, rgba(66, 133, 244, 0.05) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(234, 67, 53, 0.05) 0%, transparent 40%) !important;
}
body .index-hero-badge {
background: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(12px) !important;
border: 1px solid rgba(230, 230, 235, 0.8) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}
body .index-hero-heading {
font-size: clamp(36px, 6vw, 64px) !important;
letter-spacing: -0.03em !important;
}
body .detail-card, body .default-content-card {
border: 1px solid rgba(230, 230, 235, 0.8) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
padding: 36px !important;
}
body .detail-icon-box {
background: transparent !important;
box-shadow: none !important;
color: #1a1925 !important;
width: 40px !important;
height: 40px !important;
font-size: 22px !important;
margin-bottom: 16px !important;
}
body .detail-payout-value {
color: var(--fast-primary) !important;
font-size: 22px !important;
display: block;
margin-top: 8px;
font-weight: 700;
}
body .partners-grid {
display: flex !important;
justify-content: center !important;
align-items: stretch !important;
flex-wrap: wrap !important;
gap: 24px !important;
width: 100% !important;
padding: 0 20px !important;
}
body .partner-card {
flex: 0 1 320px !important; /* Fixed basis for centering */
min-height: 120px !important;
background: #ffffff !important;
border: 1px solid rgba(26, 25, 37, 0.06) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
}
body .footer {
padding: 60px 20px !important;
background: #ffffff !important;
border-top: 1px solid rgba(26, 25, 37, 0.05) !important;
}
/* ============================================================
OVERRIDE LAYER 2: USER REFINEMENTS
============================================================ */
body .index-hero-container {
background: transparent !important; /* Remove bg as requested */
}
body .premium-section-title.justify-content-center {
justify-content: center !important;
}
body .details-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
gap: 32px !important;
align-items: stretch !important; /* Ensure equal height */
}
body .detail-payout-value {
display: inline-flex !important;
align-items: center !important;
background: rgba(66, 133, 244, 0.08) !important;
border: 1px solid rgba(66, 133, 244, 0.18) !important;
border-radius: 14px !important;
padding: 10px 20px !important;
font-size: 28px !important;
font-weight: 700 !important;
color: var(--fast-primary) !important;
margin-top: 20px !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
}
/* Ensure the detail-card grows to fill the grid cell */
body .detail-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* ============================================================
SIGNUP WIZARD PAGE
============================================================ */
.signup-body {
margin: 0 !important;
padding: 0 !important;
font-family: var(--fast-font) !important;
background: var(--fast-bg-light) !important;
background-image: radial-gradient(#d1d5db 1px, transparent 1px) !important;
background-size: 28px 28px !important;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.signup-body .admin-bar-wrapper {
width: 100%;
flex-shrink: 0;
align-self: stretch;
}
.signup-page-wrapper {
width: 100%;
max-width: 640px;
padding: 28px 16px;
display: flex;
flex-direction: column;
align-items: stretch;
box-sizing: border-box;
}
/* Logo bar */
.signup-logo-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.signup-logo-bar img {
height: 32px;
width: auto;
}
.signup-logo-text {
font-size: 18px;
font-weight: 700;
color: var(--fast-text-main);
text-decoration: none !important;
font-family: var(--fast-font);
}
.signup-back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: var(--fast-text-main);
text-decoration: none !important;
padding: 8px 14px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
transition: all 0.2s;
font-family: var(--fast-font);
}
.signup-back-link:hover {
background: #f9f9f9;
border-color: #d4d4d4;
color: var(--fast-text-main);
text-decoration: none !important;
}
/* Main card — same shadow/radius as login-form-card */
.signup-card {
background: #fff;
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05), 0 0 10px 0 rgba(0, 0, 0, 0.01);
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
/* ===== CRITICAL: hide Bootstrap modals that render inline without Bootstrap CSS ===== */
.signup-card .modal,
.signup-card .modal.fade,
.signup-body .modal,
.signup-body .modal.fade {
display: none !important;
}
/* ===== STEP PROGRESS BAR ===== */
.signup-progress-container {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--fast-border);
}
.signup-progress-steps {
display: flex;
align-items: flex-start;
}
.signup-step-indicator {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
min-width: 44px;
}
.signup-step-connector {
flex: 1;
height: 2px;
background: #e5e5e5;
margin-top: 13px;
min-width: 6px;
transition: background 0.4s;
}
.signup-step-connector.completed {
background: var(--fast-primary);
}
.signup-step-circle {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
background: #f4f4f5;
color: #71717a;
border: 2px solid #e5e5e5;
position: relative;
z-index: 1;
transition: all 0.3s;
font-family: var(--fast-font);
box-sizing: border-box;
}
.signup-step-indicator.active .signup-step-circle {
background: var(--fast-primary);
color: #fff;
border-color: var(--fast-primary);
box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
}
.signup-step-indicator.completed .signup-step-circle {
background: var(--fast-primary);
color: #fff;
border-color: var(--fast-primary);
}
.signup-step-label {
font-size: 10px;
font-weight: 500;
color: #a1a1aa;
margin-top: 5px;
max-width: 66px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
transition: color 0.3s;
font-family: var(--fast-font);
}
.signup-step-indicator.active .signup-step-label {
color: var(--fast-primary);
font-weight: 600;
}
.signup-step-indicator.completed .signup-step-label {
color: #71717a;
}
/* ===== STEP PANELS ===== */
.signup-step-panel {
display: none;
}
.signup-step-panel.active {
display: block;
}
/* ===== STEP HEADER ===== */
.signup-step-header {
margin-bottom: 18px;
}
.signup-step-header h2 {
font-size: 20px;
font-weight: 600;
color: var(--fast-text-main);
margin: 0 0 4px 0;
font-family: var(--fast-font);
}
.signup-step-header p {
font-size: 13px;
color: #73737f;
margin: 0;
font-family: var(--fast-font);
}
/* ===== STEP NAV ===== */
.signup-step-nav {
display: flex;
gap: 12px;
margin-top: 20px;
align-items: center;
}
.btn-signup-next {
flex: 1;
height: 44px;
background: var(--fast-primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
font-family: var(--fast-font);
}
.btn-signup-next:hover {
background: var(--fast-primary-hover);
}
.btn-signup-prev {
height: 44px;
padding: 0 20px;
background: #fff;
color: var(--fast-text-main);
border: 1px solid #e5e5e5;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
font-family: var(--fast-font);
white-space: nowrap;
}
.btn-signup-prev:hover {
background: #f9f9f9;
border-color: #d4d4d4;
}
/* ===== STEP INLINE ERROR ===== */
.signup-step-error {
display: none;
padding: 10px 12px 10px 14px;
background: #fef2f2;
border: 1px solid #fecaca;
border-left: 3px solid #ef4444;
border-radius: 8px;
color: #b91c1c;
font-size: 13px;
font-weight: 500;
margin-bottom: 16px;
margin-top: 0;
font-family: var(--fast-font);
}
.signup-step-error.visible {
display: flex;
align-items: center;
gap: 8px;
}
/* ===== MODERN SERVER-ERROR BANNER ===== */
.signup-error-banner {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: #fef2f2;
border: 1px solid #fecaca;
border-left: 4px solid #ef4444;
border-radius: 10px;
margin-bottom: 20px;
font-size: 13px;
font-family: var(--fast-font);
color: #b91c1c;
line-height: 1.55;
box-sizing: border-box;
}
.signup-error-banner-icon {
flex-shrink: 0;
font-size: 18px;
margin-top: 2px;
color: #ef4444;
}
.signup-error-banner strong,
.signup-error-banner b {
color: #991b1b;
font-weight: 700;
display: block;
margin-bottom: 4px;
}
/* hide emoji/image checkmarks FastAffiliate injects into error_list */
.signup-error-banner img {
display: none !important;
}
/* ===== CARD FOOTER ===== */
.signup-footer-row {
margin-top: 24px;
text-align: center;
font-size: 14px;
color: var(--fast-text-muted);
font-family: var(--fast-font);
}
.signup-footer-row a {
color: var(--fast-text-main);
font-weight: 500;
text-decoration: underline !important;
}
.signup-legal-text {
margin-top: 24px;
font-size: 13px;
color: #a1a1aa;
text-align: center;
line-height: 1.5;
font-family: var(--fast-font);
}
.signup-legal-text a {
color: #71717a;
text-decoration: underline;
}
/* ===== BOOTSTRAP OVERRIDES INSIDE SIGNUP CARD ===== */
/* Flatten horizontal form layout → vertical (label above input) */
.signup-card .form-group.row,
.signup-card .form-group {
margin: 0 0 12px 0 !important;
display: block !important;
}
/* Allow payment method rows to be hidden by JS */
.signup-card .form-group.payment_method.pm-hidden {
display: none !important;
}
/* Stripe connect link → styled as our blue button */
.pm-stripe-connect-wrap a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 22px;
background: var(--fast-primary, #2563eb);
color: #fff !important;
font-family: var(--fast-font);
font-size: 15px;
font-weight: 600;
border-radius: 10px;
text-decoration: none !important;
box-sizing: border-box;
transition: background 0.2s;
cursor: pointer;
}
.pm-stripe-connect-wrap a:hover {
background: #1d4ed8;
color: #fff !important;
}
.signup-card .form-group.row::after {
content: '';
display: table;
clear: both;
}
.signup-card .form-group.row > label.control-label,
.signup-card .form-group > label.control-label {
float: none !important;
width: 100% !important;
text-align: left !important;
padding: 0 0 6px 0 !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--fast-text-main) !important;
font-family: var(--fast-font) !important;
}
.signup-card .col-md-7,
.signup-card .col-md-3,
.signup-card .col-md-12,
.signup-card .col-md-10,
.signup-card .col-md-9 {
float: none !important;
width: 100% !important;
padding: 0 !important;
}
/* Reset Bootstrap row negative margins */
.signup-card .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Style all form-control elements like fast-input */
.signup-card .form-control,
.signup-card input.form-control,
.signup-card select.form-control,
.signup-card textarea.form-control {
width: 100% !important;
min-height: 40px !important;
padding: 8px 14px !important;
background: #fff !important;
border: none !important;
border-radius: 8px !important;
font-size: 13px !important;
color: var(--fast-text-main) !important;
transition: box-shadow 0.2s !important;
outline: none !important;
font-family: var(--fast-font) !important;
box-sizing: border-box !important;
box-shadow: 0 .5px .5px #07011308, 0 1px 1px -.5px #07011308, 0 2px 2px -1px #07011308, 0 3px 3px -1.5px #07011308, 0 0 0 1px #1a192514 !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.signup-card .form-control:focus,
.signup-card input.form-control:focus,
.signup-card select.form-control:focus,
.signup-card textarea.form-control:focus {
border: none !important;
outline: none !important;
box-shadow: 0 .5px .5px #07011308, 0 1px 1px -.5px #07011308, 0 2px 2px -1px #07011308, 0 3px 3px -1.5px #07011308, 0 0 0 2px #4285f440 !important;
}
.signup-card .form-control.field-error {
box-shadow: 0 0 0 2px #ef444440 !important;
}
/* Flatten input-group — hide legacy help (?) buttons */
.signup-card .input-group {
display: block !important;
}
.signup-card .input-group-btn {
display: none !important;
}
/* Checkboxes / radio — restore native appearance */
.signup-card input[type="checkbox"],
.signup-card input[type="radio"] {
width: auto !important;
min-height: auto !important;
height: auto !important;
padding: 0 !important;
box-shadow: none !important;
-webkit-appearance: auto !important;
appearance: auto !important;
border-radius: 0 !important;
}
/* Portlets */
.signup-card .portlet {
border-radius: 12px !important;
border: 1px solid var(--fast-border) !important;
margin-bottom: 0;
}
.signup-card .portlet-heading {
border-radius: 12px 12px 0 0 !important;
padding: 12px 16px !important;
}
.signup-card .portlet-title h4 {
font-size: 16px !important;
font-weight: 600 !important;
margin: 0 !important;
font-family: var(--fast-font) !important;
}
.signup-card .portlet-body {
padding: 20px !important;
}
/* Bootstrap alerts */
.signup-card .alert-danger {
background: #fef2f2 !important;
border: 1px solid #fecaca !important;
color: #b91c1c !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-family: var(--fast-font) !important;
}
.signup-card .alert-success {
background: #f0fdf4 !important;
border: 1px solid #bbf7d0 !important;
color: #15803d !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-family: var(--fast-font) !important;
}
.signup-card .btn.btn-success {
background: #16a34a !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 10px 20px !important;
font-size: 14px !important;
font-weight: 500 !important;
font-family: var(--fast-font) !important;
text-decoration: none !important;
display: inline-block;
margin-top: 12px;
transition: background 0.2s;
cursor: pointer;
}
.signup-card .btn.btn-success:hover {
background: #15803d !important;
}
/* Dashboard section headers used inside include tpls */
.signup-card .dashboard-section-header {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 20px 0 12px 0 !important;
padding-bottom: 10px !important;
border-bottom: 1px solid var(--fast-border) !important;
}
.signup-card .dashboard-section-header:first-child,
.signup-step-panel .dashboard-section-header {
margin-top: 0 !important;
}
.signup-card .dashboard-section-header h2 {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--fast-text-main) !important;
margin: 0 !important;
font-family: var(--fast-font) !important;
}
.signup-card .dashboard-section-header .material-symbols-outlined {
font-size: 20px !important;
color: var(--fast-primary) !important;
}
/* Info cards */
.signup-card .info-card {
background: #f9fafb !important;
border: 1px solid var(--fast-border) !important;
border-radius: 12px !important;
padding: 20px !important;
margin-bottom: 20px !important;
}
.signup-card .info-card .form-body {
padding: 0 !important;
}
.signup-card .notes-container {
padding: 0 !important;
}
.signup-card .notes-container p {
font-size: 14px;
color: #51515e;
margin: 0;
font-family: var(--fast-font);
line-height: 1.6;
}
/* Remove old spacing utilities */
.signup-card .space-30 {
display: none !important;
}
/* Bootstrap help-block (payment description text) */
.signup-card .help-block {
display: block;
font-size: 12px;
color: #73737f;
margin-top: 5px;
margin-bottom: 0;
line-height: 1.4;
font-family: var(--fast-font);
}
/* Terms textarea — compact scrollable box instead of large block */
.signup-card textarea.form-control[name="terms"] {
rows: 5 !important;
max-height: 110px !important;
min-height: 80px !important;
overflow-y: auto !important;
resize: none !important;
font-size: 12px !important;
line-height: 1.5 !important;
padding: 10px 12px !important;
}
/* Remove extra bottom margin on last info-card inside a step */
.signup-step-panel .info-card:last-of-type {
margin-bottom: 0 !important;
}
/* Info-card form-body: ensure inline padding is overridden */
.signup-card .info-card,
.signup-card article.info-card {
padding: 16px !important;
margin-bottom: 14px !important;
}
.signup-card .info-card .form-body,
.signup-card article.info-card .form-body {
padding: 0 !important;
}
/* Header in signup page */
.signup-body .navbar-auth-buttons {
display: none !important;
}
/* Desktop (>1024px): show header, hide logo bar */
.signup-body .signup-logo-bar {
display: none !important;
}
/* Mobile (<=1024px): hide header, show logo bar above card */
@media (max-width: 1024px) {
.signup-body .admin-bar-wrapper {
display: none !important;
}
.signup-body .signup-logo-bar {
display: flex !important;
}
}
/* ===== RESPONSIVE ===== */
@media (max-width: 680px) {
.signup-page-wrapper {
padding: 20px 12px !important;
}
.signup-card {
padding: 24px 18px;
}
.signup-step-label {
display: none;
}
.signup-step-indicator {
min-width: 32px;
}
}
@media (max-width: 480px) {
.signup-page-wrapper {
padding: 12px 10px !important;
}
.signup-card {
padding: 20px 14px;
border-radius: 12px;
}
.signup-step-header h2 {
font-size: 18px;
}
.signup-card .form-control,
.signup-card input.form-control {
font-size: 16px !important;
}
.btn-signup-next,
.btn-signup-prev {
height: 46px;
font-size: 14px;
}
}
/* ===================================================
CONTACT PAGE
=================================================== */
.contact-page-wrapper {
background: #f7f7f8;
min-height: 100vh;
}
/* Hero */
.contact-hero {
position: relative;
overflow: hidden;
padding: 80px 0 56px;
text-align: center;
}
.contact-hero-blob {
display: none;
}
.contact-hero-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid rgba(230, 230, 235, 0.8);
border-radius: 50px;
padding: 6px 18px;
font-size: 14px;
font-weight: 500;
color: #1a1925;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.contact-hero-heading {
font-family: 'Google Sans Flex', sans-serif;
font-size: clamp(26px, 4vw, 36px);
font-weight: 700;
color: #1a1925;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 14px;
}
.contact-hero-sub {
font-size: 15px;
color: #51515e;
max-width: 520px;
margin: 0 auto;
line-height: 1.6;
}
/* Feature Cards */
.contact-cards-section {
padding-bottom: 0;
margin-bottom: 56px;
}
.contact-cards-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
.contact-feature-card {
flex: 1;
min-width: 280px;
max-width: 380px;
background: rgba(255, 255, 255, 0.93);
border: 1px solid rgba(230, 230, 235, 0.8);
border-radius: 20px;
padding: 36px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
text-decoration: none;
color: inherit;
display: block;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-card-icon {
width: 56px;
height: 56px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.contact-card-icon svg {
width: 36px !important;
height: 36px !important;
}
.contact-card-title {
font-size: 18px;
font-weight: 500;
color: #1a1925;
margin: 0 0 10px;
font-family: 'Google Sans Flex', sans-serif;
}
.contact-card-text {
font-size: 14px;
color: #51515e;
line-height: 1.5;
margin: 0;
}
/* Form Section */
.contact-form-section {
max-width: 720px;
padding-top: 0;
padding-bottom: 80px;
}
.contact-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 0;
}
.contact-form-group {
margin-bottom: 24px;
}
.contact-form-group label {
display: block;
font-size: 14px;
font-weight: 500;
color: #1a1925;
margin-bottom: 8px;
}
.contact-input {
width: 100%;
background: #fff;
border: none;
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
color: #1a1925;
font-family: 'Google Sans Flex', 'Inter', sans-serif;
box-shadow:
0 0 0 1px #1a192514,
0 3px 3px -1.5px #07011308,
0 2px 2px -1px #07011308,
0 1px 1px -0.5px #07011308,
0 0.5px 0.5px #07011308;
transition: box-shadow 0.15s ease;
display: block;
}
.contact-input:focus {
outline: none;
box-shadow: 0 0 0 2px #1f62ff, 0 3px 3px -1.5px #07011308;
}
textarea.contact-input {
resize: vertical;
min-height: 120px;
}
.contact-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2373737f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
padding-right: 40px;
}
.contact-checkbox-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.contact-checkbox-row input[type="checkbox"] {
width: 16px;
height: 16px;
flex-shrink: 0;
cursor: pointer;
accent-color: #1f62ff;
}
.contact-checkbox-row label {
font-size: 14px;
color: #51515e;
margin: 0;
cursor: pointer;
}
.contact-divider {
border: none;
border-top: 1px solid #e6e6eb;
margin: 0 0 24px;
}
.contact-form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.contact-disclaimer {
font-size: 13px;
color: #51515e;
}
.contact-disclaimer a {
color: #1f62ff;
text-decoration: underline;
}
.contact-submit-btn {
align-items: center;
border: none;
border-radius: 8px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-size: 14px;
font-weight: 500;
font-family: 'Google Sans Flex', sans-serif;
height: 37px;
justify-content: center;
letter-spacing: -0.084px;
line-height: 21px;
padding: 8px 14px;
text-decoration: none;
transition: all 0.3s ease;
user-select: none;
white-space: nowrap;
background: linear-gradient(180deg, #ededed14, #55555514), #1f62ff;
box-shadow:
inset 0 0.25px 0.25px #ffffff1f,
inset 0 0.75px 0.75px #ffffff14,
inset 0 1px 3px #ffffff14,
inset 0 -8px 20px #1a192514,
0 0.25px 0.25px #1a19253d,
0 0.75px 0.75px #1a19251f,
0 1px 1.5px -0.5px #1a19251f,
0 2px 4px -1px #1a19251f,
0 4px 8px -4px #1a19251f,
0 8px 12px -4px #1a19250f;
}
.contact-submit-btn:hover {
background: linear-gradient(180deg, #ededed14, #55555514), #1a55e8;
color: #fff;
text-decoration: none;
}
@media (max-width: 768px) {
.contact-hero {
padding: 56px 0 40px;
}
.contact-hero-heading {
font-size: 2rem;
}
.contact-hero-blob {
width: 250px;
height: 250px;
top: -60px;
right: -80px;
}
.contact-cards-grid {
flex-direction: column;
align-items: stretch;
}
.contact-feature-card {
max-width: 100%;
}
.contact-form-grid {
grid-template-columns: 1fr;
}
.contact-form-footer {
flex-direction: column;
align-items: flex-start;
}
}
/* --- Global Form Control & Select Styling --- */
.info-card .form-control,
.content-white-area .form-control,
select.form-control,
select.fast-input,
.signup-card .form-control {
width: 100% !important;
min-height: 40px !important;
padding: 8px 14px !important;
background: #fff !important;
border: none !important;
border-radius: 8px !important;
font-size: 13px !important;
color: #1a1925 !important;
transition: box-shadow 0.2s !important;
outline: none !important;
box-shadow: 0 .5px .5px #07011308, 0 1px 1px -.5px #07011308, 0 2px 2px -1px #07011308, 0 3px 3px -1.5px #07011308, 0 0 0 1px #1a192514 !important;
}
select.form-control,
select.fast-input {
padding-right: 30px !important;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1925' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.762L10.825 4z'/%3E%3C/svg%3E") no-repeat right 12px center !important;
background-size: 12px !important;
-webkit-appearance: none !important;
appearance: none !important;
cursor: pointer;
}
.info-card .form-control:focus,
.content-white-area .form-control:focus,
select.form-control:focus,
select.fast-input:focus,
.signup-card .form-control:focus {
box-shadow: 0 .5px .5px #07011308, 0 1px 1px -.5px #07011308, 0 2px 2px -1px #07011308, 0 3px 3px -1.5px #07011308, 0 0 0 2px #4285f440 !important;
}
/* --- Fix intl-tel-input Phone Input --- */
.intl-tel-input {
width: 100%;
}
.intl-tel-input input,
.intl-tel-input input.form-control,
.intl-tel-input input.fast-input,
.signup-card .intl-tel-input input.form-control {
padding-left: 52px !important; /* Ensure space for flag */
}
/* Improve intl-tel-input Dropdown Flag List */
.intl-tel-input .country-list {
border: none !important;
border-radius: 8px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
margin-top: 4px !important;
overflow-x: hidden !important;
z-index: 100000 !important;
}
.intl-tel-input .country-list .country {
padding: 8px 10px !important;
}
.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight {
background-color: #f1f5f9 !important;
}
/* --- DataTables Pagination & Info Alignment --- */
.dataTables_info {
padding-top: 8px;
color: #64748b;
font-size: 13px;
font-weight: 500;
}
.dataTables_wrapper > .row:first-of-type {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 16px;
}
.dataTables_wrapper > .row:last-of-type {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
flex-wrap: wrap;
gap: 16px;
}
@media (max-width: 768px) {
.dataTables_wrapper > .row:first-of-type,
.dataTables_wrapper > .row:last-of-type {
flex-direction: column;
align-items: flex-start;
}
.dataTables_filter input.form-control {
width: 100% !important;
}
}
/* ================================================================
Payment History & Traffic Log DataTable — wrapper, skeleton, grid
Mirrors #dyntable_commission_list_wrapper pattern exactly.
================================================================ */
.payment-dt-wrap,
.traffic-dt-wrap {
position: relative;
min-height: 280px;
width: 100%;
}
/* Shared wrapper styling for both tables */
div#dyntable_payment_history_wrapper,
div#dyntable_payment_Traffic_wrapper {
background: #fff;
padding: 0;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
position: relative;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
/* Override Bootstrap row inside both wrappers */
#dyntable_payment_history_wrapper .row,
#dyntable_payment_Traffic_wrapper .row {
display: flex !important;
flex-wrap: nowrap !important;
margin: 0 !important;
width: 100% !important;
}
/* Kill Bootstrap 3 clearfix pseudo-elements — they become ghost flex items and break space-between */
#dyntable_payment_history_wrapper .row::before,
#dyntable_payment_history_wrapper .row::after,
#dyntable_payment_Traffic_wrapper .row::before,
#dyntable_payment_Traffic_wrapper .row::after {
content: none !important;
display: none !important;
}
/* Top/bottom bar — left col shrinks to content */
#dyntable_payment_history_wrapper > .row:first-child > [class*="col-"]:first-child,
#dyntable_payment_history_wrapper > .row:last-child > [class*="col-"]:first-child,
#dyntable_payment_Traffic_wrapper > .row:first-child > [class*="col-"]:first-child,
#dyntable_payment_Traffic_wrapper > .row:last-child > [class*="col-"]:first-child {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
}
/* Top bar — right col (search): shrink to content, sit beside left col */
#dyntable_payment_history_wrapper > .row:first-child > [class*="col-"]:last-child,
#dyntable_payment_Traffic_wrapper > .row:first-child > [class*="col-"]:last-child {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
}
/* Bottom bar — right col (pagination): shrink to content; space-between pushes it right */
#dyntable_payment_history_wrapper > .row:last-child > [class*="col-"]:last-child,
#dyntable_payment_Traffic_wrapper > .row:last-child > [class*="col-"]:last-child {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
}
/* Table row col must be full width */
#dyntable_payment_history_wrapper > .row:not(:first-child):not(:last-child) > [class*="col-"],
#dyntable_payment_Traffic_wrapper > .row:not(:first-child):not(:last-child) > [class*="col-"] {
padding: 0 !important;
flex: 1 1 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Top bar */
#dyntable_payment_history_wrapper > .row:first-child,
#dyntable_payment_Traffic_wrapper > .row:first-child {
padding: 16px 20px;
border-bottom: 1px solid #f1f5f9;
background: #fafbfc;
align-items: center;
justify-content: space-between !important;
}
/* Bottom bar */
#dyntable_payment_history_wrapper > .row:last-child,
#dyntable_payment_Traffic_wrapper > .row:last-child {
padding: 12px 20px;
border-top: 1px solid #f1f5f9;
background: #fafbfc;
align-items: center;
justify-content: space-between !important;
}
/* Table container row */
#dyntable_payment_history_wrapper > .row:not(:first-child):not(:last-child),
#dyntable_payment_Traffic_wrapper > .row:not(:first-child):not(:last-child) {
padding: 0;
flex: 1;
}
/* Remove floats from length/filter controls */
#dyntable_payment_history_wrapper .dataTables_length,
#dyntable_payment_Traffic_wrapper .dataTables_length {
float: none !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
}
/* Per-table length select — width auto, let the new custom-select rule handle padding */
#dyntable_payment_history_wrapper .dataTables_length select,
#dyntable_payment_Traffic_wrapper .dataTables_length select,
#dyntable_commission_list_wrapper .dataTables_length select {
width: auto !important;
}
#dyntable_payment_history_wrapper .dataTables_filter,
#dyntable_payment_Traffic_wrapper .dataTables_filter {
float: none !important;
margin: 0 !important;
}
/* Match td padding to commission-th header padding (12px 16px) so columns align */
#dyntable_payment_history tbody tr td {
padding: 12px 16px !important;
vertical-align: middle;
border-top: none;
border-bottom: 1px solid #f1f5f9;
font-size: 13px;
color: #334155;
}
/* Right-align payment AMOUNT column tds — exclude empty-state row */
#dyntable_payment_history tbody td:last-child:not(.dataTables_empty) {
text-align: right !important;
}
/* Center the "No data available" empty row across all DataTables */
#dyntable_payment_history tbody tr td.dataTables_empty,
#dyntable_payment_Traffic tbody tr td.dataTables_empty,
#dyntable_commission_list tbody tr td.dataTables_empty,
#dyntable_commission_list_subs tbody tr td.dataTables_empty,
#dyntable_leads tbody tr td.dataTables_empty {
text-align: center !important;
color: #94a3b8;
padding: 40px 0 !important;
font-size: 14px;
}
/* Notes empty state */
.notes-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
color: #94a3b8;
gap: 12px;
}
.notes-empty-state .material-symbols-outlined {
font-size: 48px;
color: #cbd5e1;
}
.notes-empty-state p {
margin: 0;
font-size: 15px;
font-weight: 500;
}
/* Facebook login button */
.btn-fast-facebook {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 12px 20px;
background: #1877f2;
color: #fff;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background 0.2s;
margin-bottom: 8px;
}
.btn-fast-facebook:hover {
background: #1462c8;
color: #fff;
text-decoration: none;
}
/* Login form divider (or) */
.fast-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0;
color: #94a3b8;
font-size: 13px;
font-weight: 500;
}
.fast-divider::before,
.fast-divider::after {
content: '';
flex: 1;
height: 1px;
background: #e2e8f0;
}
/* Leads table wrapper */
.leads-dt-wrap {
position: relative;
min-height: 280px;
width: 100%;
}
div#dyntable_leads_wrapper {
display: flex !important;
flex-direction: column !important;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
background: #fff;
}
div#dyntable_leads_wrapper .row {
display: flex !important;
flex-wrap: nowrap !important;
margin: 0 !important;
width: 100% !important;
align-items: center !important;
}
div#dyntable_leads_wrapper .row::before,
div#dyntable_leads_wrapper .row::after {
content: none !important;
display: none !important;
}
div#dyntable_leads_wrapper .row:first-child,
div#dyntable_leads_wrapper .row:last-child {
padding: 12px 16px;
justify-content: space-between !important;
}
div#dyntable_leads_wrapper .row:first-child {
border-bottom: 1px solid #f1f5f9;
background: #fafafa;
}
div#dyntable_leads_wrapper .row:last-child {
border-top: 1px solid #f1f5f9;
background: #fafafa;
}
div#dyntable_leads_wrapper .row:first-child > [class*="col-"]:first-child,
div#dyntable_leads_wrapper .row:last-child > [class*="col-"]:first-child {
flex: 0 0 auto !important;
width: auto !important;
padding: 0 !important;
}
div#dyntable_leads_wrapper .row:first-child > [class*="col-"]:last-child,
div#dyntable_leads_wrapper .row:last-child > [class*="col-"]:last-child {
flex: 0 0 auto !important;
width: auto !important;
padding: 0 !important;
display: flex !important;
justify-content: flex-end !important;
}
div#dyntable_leads_wrapper .row:not(:first-child):not(:last-child) > [class*="col-"] {
flex: 1 1 100% !important;
width: 100% !important;
padding: 0 !important;
}
div#dyntable_leads_wrapper .dataTables_length select {
width: auto !important;
min-width: 0;
padding: 4px 8px;
display: inline-block;
}
div#dyntable_leads_wrapper .dataTables_filter input {
width: 180px !important;
}
/* ================================================================
Design-system tokens (scoped to table-page overrides)
Source: Traffic Log design file
================================================================ */
:root {
--t-ink-900: #0b1220;
--t-ink-700: #2b3445;
--t-ink-500: #5b6577;
--t-ink-400: #7a8597;
--t-ink-300: #aab3c2;
--t-ink-200: #d8dde6;
--t-ink-100: #eaeef4;
--t-ink-50: #f3f5f9;
--t-brand: #2563eb;
--t-brand-50:#eef4ff;
--t-warn-700:#b45309;
--t-warn-50: #fef6e7;
--t-warn-100:#f6e2bd;
--t-ok-700: #15803d;
--t-ok-600: #16a34a;
--t-toolbar: #fbfcfd;
}
/* ================================================================
All 5 table pages — flat table model (no row-cards gap)
border-collapse: separate so thead border-bottom doesn't double.
================================================================ */
#dyntable_payment_Traffic,
#dyntable_payment_history,
#dyntable_commission_list,
#dyntable_commission_list_subs {
border-collapse: separate !important;
border-spacing: 0 !important;
background: transparent !important;
}
/* ================================================================
.info-card--table — outer panel + all child overrides
================================================================ */
/* Panel: refined border colour, larger radius, subtle shadow */
.info-card.info-card--table {
border: 1px solid var(--t-ink-100) !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 1px 0 rgba(15,23,42,.02) !important;
padding: 0 !important;
}
/* Panel head */
.info-card.info-card--table .info-card-header {
padding: 14px 20px !important;
margin-bottom: 0 !important;
border-bottom: 1px solid var(--t-ink-100) !important;
align-items: center !important;
}
/* Icon tile — brand blue */
.info-card.info-card--table .icon-box {
background: var(--t-brand-50) !important;
color: var(--t-brand) !important;
border-radius: 8px !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border: none !important;
flex: 0 0 32px !important;
}
.info-card.info-card--table .icon-box .material-symbols-outlined {
color: var(--t-brand) !important;
font-size: 17px !important;
}
/* Panel title */
.info-card.info-card--table .info-card-header h2 {
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -.005em !important;
color: var(--t-ink-900) !important;
margin: 0 !important;
}
/* Entry-count chip */
.table-entry-count {
display: inline-flex !important;
align-items: center !important;
padding: 3px 10px !important;
background: var(--t-ink-50) !important;
color: var(--t-ink-500) !important;
border: 1px solid var(--t-ink-100) !important;
border-radius: 999px !important;
font-size: 11.5px !important;
font-weight: 500 !important;
white-space: nowrap !important;
font-variant-numeric: tabular-nums;
}
.table-entry-count:empty { display: none !important; }
/* Live indicator — glow-pulse shadow instead of scale */
.live-indicator {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--t-ok-700) !important;
}
.live-indicator::before {
content: '' !important;
display: inline-block !important;
width: 7px !important;
height: 7px !important;
background: var(--t-ok-600) !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
box-shadow: 0 0 0 4px rgba(22,163,74,.12);
animation: live-glow 2s ease-in-out infinite !important;
}
@keyframes live-glow {
0%,100% { box-shadow: 0 0 0 4px rgba(22,163,74,.12); }
50% { box-shadow: 0 0 0 7px rgba(22,163,74,.06); }
}
/* Card body: no padding, no forced height — shrinks to fit content */
.info-card.info-card--table .card-body-pvm {
padding: 0 !important;
background: transparent !important;
height: auto !important;
}
/* DT wrapper: transparent, no nested box */
.info-card--table div[id$="_wrapper"] {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* Toolbar row (length + filter) */
.info-card--table div[id$="_wrapper"] > .row:first-child {
background: var(--t-toolbar) !important;
border-bottom: 1px solid var(--t-ink-100) !important;
border-top: none !important;
padding: 12px 20px !important;
gap: 12px !important;
}
/* Table content row */
.info-card--table div[id$="_wrapper"] > .row:not(:first-child):not(:last-child) {
background: #fff !important;
padding: 0 !important;
}
/* Footer row (info + paginate) */
.info-card--table div[id$="_wrapper"] > .row:last-child {
background: var(--t-toolbar) !important;
border-top: 1px solid var(--t-ink-100) !important;
border-bottom: none !important;
padding: 12px 20px !important;
gap: 12px !important;
}
/* Column headers */
.info-card--table table thead th,
.info-card--table table thead th.commission-th {
font-size: 11px !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: var(--t-ink-400) !important;
font-weight: 600 !important;
padding: 12px 20px !important;
background: var(--t-toolbar) !important;
border-bottom: 1px solid var(--t-ink-100) !important;
border-top: none !important;
white-space: nowrap;
}
/* Body cells */
.info-card--table table tbody tr td {
padding: 14px 20px !important;
border-bottom: 1px solid var(--t-ink-100) !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
color: var(--t-ink-700) !important;
font-size: 13px !important;
vertical-align: middle;
background: #fff !important;
transition: background .12s ease;
}
/* Last row — no bottom border */
.info-card--table table tbody tr:last-child td {
border-bottom: none !important;
}
/* Row hover */
.info-card--table table tbody tr:hover td {
background: #fafbfd !important;
}
/* Empty-state */
.info-card--table table tbody tr td.dataTables_empty {
text-align: center !important;
color: var(--t-ink-400) !important;
padding: 36px 20px !important;
border-bottom: none !important;
background: #fff !important;
}
/* ---- Length select ---- */
.info-card--table .dataTables_length select,
.info-card--table .dataTables_length select.custom-select,
.info-card--table .dataTables_length select.form-control {
height: 30px !important;
padding: 0 26px 0 10px !important;
border-radius: 8px !important;
border: 1px solid var(--t-ink-200) !important;
background: #fff !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: var(--t-ink-900) !important;
min-width: 0 !important;
width: auto !important;
box-shadow: none !important;
}
.info-card--table .dataTables_length label {
font-size: 12.5px !important;
color: var(--t-ink-500) !important;
gap: 8px !important;
font-weight: 400 !important;
}
/* ---- Search input ---- */
.info-card--table .dataTables_filter input,
.info-card--table .dataTables_filter input.form-control {
height: 32px !important;
padding: 0 32px 0 10px !important;
border: 1px solid var(--t-ink-200) !important;
border-radius: 8px !important;
background: #fff !important;
font-size: 13px !important;
color: var(--t-ink-900) !important;
box-shadow: none !important;
width: 220px !important;
}
.info-card--table .dataTables_filter input:focus,
.info-card--table .dataTables_filter input.form-control:focus {
border-color: var(--t-brand) !important;
box-shadow: 0 0 0 4px rgba(37,99,235,.14) !important;
}
.info-card--table .dataTables_filter label {
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
/* ---- Info text ---- */
.info-card--table .dataTables_info {
font-size: 12.5px !important;
color: var(--t-ink-500) !important;
padding: 0 !important;
margin: 0 !important;
}
/* ---- Pagination ---- */
.info-card--table .dataTables_paginate {
float: none !important;
margin: 0 !important;
}
.info-card--table .dataTables_paginate .pagination {
display: flex !important;
gap: 4px !important;
margin: 0 !important;
}
.info-card--table .dataTables_paginate .pagination li {
display: inline-block !important;
margin: 0 !important;
}
.info-card--table .dataTables_paginate .pagination li a,
.info-card--table .dataTables_paginate .pagination li span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
min-width: 32px !important;
height: 32px !important;
padding: 0 10px !important;
border-radius: 8px !important;
background: #fff !important;
border: 1px solid var(--t-ink-200) !important;
color: var(--t-ink-700) !important;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 1 !important;
text-decoration: none !important;
transition: all .12s ease !important;
box-shadow: none !important;
}
.info-card--table .dataTables_paginate .pagination li:not(.active):not(.disabled) a:hover {
background: var(--t-ink-50) !important;
border-color: var(--t-ink-300) !important;
color: var(--t-ink-900) !important;
}
.info-card--table .dataTables_paginate .pagination li.active a,
.info-card--table .dataTables_paginate .pagination li.active span {
background: var(--t-ink-900) !important;
border-color: var(--t-ink-900) !important;
color: #fff !important;
}
.info-card--table .dataTables_paginate .pagination li.disabled a,
.info-card--table .dataTables_paginate .pagination li.disabled span {
color: var(--t-ink-300) !important;
cursor: not-allowed !important;
}
/* ---- Subs .table-responsive ---- */
.info-card--table .table-responsive {
border: none !important;
border-radius: 0 !important;
overflow: visible !important;
padding: 0 !important;
}
/* Right-align last column for tables that need it */
.info-card--table #dyntable_payment_history tbody tr td:last-child:not(.dataTables_empty),
.info-card--table #dyntable_commission_list tbody tr td:last-child:not(.dataTables_empty),
.info-card--table #dyntable_commission_list_subs tbody tr td:last-child:not(.dataTables_empty) {
text-align: right !important;
}
/* ================================================================
Cell-type components (populated by JS enhancement)
================================================================ */
/* Date cell */
.date-cell { display: flex; flex-direction: column; gap: 2px; }
.dt-main {
font-weight: 500;
color: var(--t-ink-900);
font-size: 12.5px;
letter-spacing: .01em;
}
.dt-rel { font-size: 11px; color: var(--t-ink-400); }
/* Time cell */
.time-cell { font-size: 12.5px; color: var(--t-ink-900); font-weight: 500; }
.tc-ampm { color: var(--t-ink-400); font-weight: 400; margin-left: 2px; }
/* IP cell */
.ip-cell { display: inline-flex; align-items: center; gap: 8px; }
.ip-ico {
width: 26px; height: 26px; border-radius: 7px;
background: var(--t-ink-50);
color: var(--t-ink-500);
border: 1px solid var(--t-ink-100);
display: grid; place-items: center;
flex: 0 0 26px;
}
.ip-addr { font-size: 12.5px; color: var(--t-ink-900); font-weight: 500; }
/* Referrer cell */
.ref-cell { display: inline-flex; align-items: center; gap: 10px; }
.ref-badge {
display: inline-flex; align-items: center; gap: 6px;
height: 22px; padding: 0 9px;
background: var(--t-warn-50);
color: var(--t-warn-700);
border: 1px solid var(--t-warn-100);
border-radius: 999px;
font-size: 11.5px; font-weight: 600;
letter-spacing: .02em;
white-space: nowrap;
}
.ref-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .9; flex-shrink: 0; }
.ref-text { font-size: 12.5px; color: var(--t-ink-500); }