/* The upstream Gentelella design system is authoritative. This file only
   connects native components to PHP forms, Bootstrap behavior and CRM data. */
/* Contact icons keep equal dimensions instead of inheriting full button height. */
body.gentelella-app .quick-meta-card .lead-contact-actions{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
body.gentelella-app .quick-meta-card .lead-contact-action{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px;min-width:32px;max-width:32px;height:32px;min-height:32px;max-height:32px;flex:0 0 32px;padding:0;border:1px solid var(--primary);border-radius:50%!important;font-size:14px;line-height:1;text-decoration:none}
body.gentelella-app .quick-meta-card .lead-contact-action>i{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1}
body.gentelella-app .quick-meta-card .lead-contact-action>i::before{line-height:1;vertical-align:0}
body.gentelella-app .quick-meta-card .lead-contact-action.lead-contact-whatsapp{background:#25D366;border-color:#25D366;color:#FFFFFF}
body.gentelella-app .quick-meta-card .lead-contact-action.lead-contact-whatsapp:hover{background:#1DA851;border-color:#1DA851;color:#FFFFFF}
:root {
  --bs-primary: #1abb9c;
  --bs-primary-rgb: 26, 187, 156;
  --bs-primary-bg-subtle: var(--primary-lt);
  --bs-primary-text-emphasis: var(--primary-dk);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--body-bg);
  --bs-border-color: var(--border-color);
  --bs-secondary-bg: var(--bg-surface-secondary);
  --bs-tertiary-bg: var(--bg-surface-secondary);
  --bs-link-color-rgb: 22, 159, 133;
  --bs-link-hover-color-rgb: 18, 131, 110;
  --bg-main: var(--body-bg);
  --bg-card: var(--bg-surface);
  --text-main: var(--text);
  --primary-hover: var(--primary-dk);
  --primary-light: var(--primary-lt);
}
html { scrollbar-gutter: stable; }
body.gentelella-app { overflow-x: clip; }
.gentelella-app .main { min-width: 0; }
.gentelella-app .page-wrapper { max-width: 1800px; margin-inline: auto; }
.gentelella-app .page-subtitle { font-size: 12.5px; color: var(--text-muted); margin: 5px 0 0; }
.gt-redesign .card { border-radius: var(--radius-lg); }
.gt-redesign .card-title { margin: 0; }
.gt-redesign .card-header { flex-wrap: wrap; }
.gt-redesign .card-header { background: transparent; }
.gt-redesign .stat-active-primary, .gt-redesign .stat-active-danger, .gt-redesign .stat-active-success { background: var(--bg-surface) !important; color: var(--text) !important; box-shadow: var(--shadow); }
.gt-redesign .stat-link-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.gt-redesign .stat-link-card .icon-shape { background: var(--primary-lt) !important; color: var(--primary-dk) !important; border-radius: var(--radius) !important; }
.gt-redesign .stat-link-card .text-white { color: var(--text) !important; }
.gt-redesign .stat-link-card h3 { font-size: 26px; font-weight: 600; }
.gt-redesign .text-muted { color: var(--text-muted) !important; }
.gt-redesign .table-wrap { overflow-x: auto !important; }
.gt-redesign .table-wrap > .table { margin-bottom: 0; }
.gt-redesign .table > :not(caption) > * > * { box-shadow: none; }
.gt-redesign .table > tbody > tr > td { background: transparent; }
.gt-redesign .table > thead > tr > th { white-space: nowrap; }
.gt-redesign .table-hover { --bs-table-hover-bg: var(--bg-surface-secondary); }
.gt-redesign .table td { font-size: 12.5px; }
.gt-redesign .form-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.gt-redesign .form-select { padding-inline-end: 30px; }
.gt-redesign .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.gt-redesign .form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); }
.gt-redesign .form-text { color: var(--text-muted); font-size: 11.5px; }
.gt-redesign .btn.rounded-circle { border-radius: var(--radius-sm) !important; }
.gt-redesign .card-footer { background: var(--bg-surface); }
.gt-redesign .list-group { --bs-list-group-bg: var(--bg-surface); --bs-list-group-color: var(--text-secondary); --bs-list-group-border-color: var(--border-color-light); }
.gt-redesign .list-group-item { font-size: 12.5px; padding: 11px 16px; }
.gt-redesign .pagination { --bs-pagination-color: var(--text-secondary); --bs-pagination-bg: var(--bg-surface); --bs-pagination-border-color: var(--border-color); --bs-pagination-hover-color: var(--primary-dk); --bs-pagination-hover-bg: var(--primary-lt); --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary); font-size: 12px; }
.gt-redesign .badge { border-radius: 3px; font-size: 10px; font-weight: 500; padding: 3px 6px; }
.gt-redesign .gt-filter-card .card-header { min-height: 40px; }
.gt-redesign .gt-filter-card .form-group { margin-bottom: 0; }
.gt-redesign .gt-filter-card .form-label { margin-bottom: 5px; }
/* Date ranges use visible From/To labels, not the theme's inset search icon. */
:is(.gt-leads, .gt-delays) .gt-filter-card .input-group > input.form-control[type="date"] {
  padding-inline: 8px;
  min-width: 0;
  flex: 1 1 0;
  direction: ltr;
  text-align: left;
}
.gt-redesign .gt-table-card > .card-header { border-bottom-color: var(--border-color); }
.gt-native-grid.row { width: auto; max-width: none; margin-inline: 0; }
.gt-native-grid.row > * { width: auto; max-width: none; min-width: 0; padding: 0; margin-top: 0; }
.gt-native-grid.gt-grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.gt-grid-12 > * { grid-column: span 12; }
.gt-grid-12 > .gt-col { grid-column: span 3; }
.gt-grid-12 > .gt-col-auto { grid-column: auto; }
.gt-native-grid.gt-auto-grid { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); align-items: end; }
.gt-auto-grid > * { grid-column: auto !important; }
/* Legacy AJAX fragments keep their working Bootstrap grid; main views use
   the native Gentelella grid and explicit responsive spans. */
.gentelella-app .row:not(.gt-native-grid) { display: flex; flex-wrap: wrap; gap: 0; margin-inline: calc(-.5 * var(--bs-gutter-x, 1.5rem)); margin-top: calc(-1 * var(--bs-gutter-y, 0)); margin-bottom: 0; }
.gt-metric-link { display: block; color: inherit; text-decoration: none; }
.gt-metric-link:hover { text-decoration: none; }
.gt-metric-card .stat { min-height: 106px; }
.gt-metric-card .stat-icon i { font-size: 21px; }
.gt-metric-card .stat-value { font-size: 26px; }
.gt-chart { height: 300px; width: 100%; min-width: 0; }
.gt-chart.gt-chart-short { height: 260px; }
.gt-analytics-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; margin-bottom: 16px; }
.gt-analytics-grid > * { min-width: 0; }
.gt-dashboard-lower { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; margin-bottom: 16px; }
.gt-dashboard-lower > * { min-width: 0; }
.gt-stack { display: grid; gap: 16px; align-content: start; }
.gt-pipeline-share { display: flex; align-items: center; gap: 10px; }
.gt-pipeline-share .progress { height: 5px; flex: 1; max-width: 240px; background: var(--bg-surface-secondary); }
.gt-pipeline-share .progress-bar { background: var(--primary); }
.gt-pipeline-share > span { font-size: 11px; color: var(--text-muted); min-width: 32px; }
.gt-chart-placeholder { height: 300px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; }
.gt-toolbar { display: flex; flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.gt-toolbar .form-group { margin: 0; }
.gt-toolbar .form-label { margin-bottom: 4px; }
.gt-toolbar input[type="date"] { width: 145px; }
.gt-toolbar .gt-toolbar-spacer { margin-inline-start: auto; }
.gt-toolbar .btn-group .btn.active { color: var(--primary-dk); background: var(--primary-lt); }
.gt-toolbar.card { padding: 12px 16px; }
.gt-section-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }
.gt-section-tabs a { font-size: 12.5px; padding: 8px 0 10px; color: var(--text-secondary); }
.gt-section-tabs a.active { color: var(--primary-dk); border-bottom: 2px solid var(--primary); font-weight: 500; }
.gt-section-tabs a:hover { text-decoration: none; color: var(--primary-dk); }
.gt-profile-summary .card-body { text-align: center; padding: 24px 16px; }
.gt-profile-summary .profile-image-container { margin-inline: auto; }
.gt-group-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gt-group-header > div { margin: 0 !important; gap: 10px !important; }
.gt-group-header h5 { font-size: 13px; font-weight: 600; }
.gt-workspace-tabs { margin-top: 12px; }
.gt-workspace-tabs .tab { text-decoration: none; }
.gt-entry-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 16px; }
.gt-entry-form > .gt-entry-wide { grid-column: 1 / -1; }
.gt-entry-form > .gt-entry-field { min-width: 0; }
.gt-entry-form > .gt-entry-field > .form-label { display: block; }
.gt-help-list > div { display: flex; gap: 10px; margin-bottom: 20px; }
.gt-help-list > div:last-child { margin-bottom: 0; }
.gt-help-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--primary-lt); color: var(--primary-dk); border-radius: var(--radius-sm); flex-shrink: 0; }
.gt-help-list strong { font-size: 12px; font-weight: 500; color: var(--text); }
.gt-help-list p { font-size: 11.5px; line-height: 1.6; color: var(--text-muted); margin: 4px 0 0; }
.gt-profile-name { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.gt-change-photo { display: flex; margin: 12px auto 0; }
.gt-profile-completion { border-top: 1px solid var(--border-color-light); padding: 16px; text-align: center; }
#profile-details, #profile-security { scroll-margin-top: 76px; }
.icon-shape { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--radius-sm); }
.icon-shape-sm { width: 28px; height: 28px; }
.icon-shape-md { width: 32px; height: 32px; }
.icon-shape-lg { width: 40px; height: 40px; font-size: 20px; }
.gentelella-app .sidebar { z-index: 1200; }
.gentelella-app .topbar { z-index: 1100; }
.sidebar-brand-link { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.sidebar-brand-link:hover { color: #fff; text-decoration: none; }
.sidebar-brand-link.logo-brand-link { flex: 1; justify-content: center; gap: 0; height: 52px; overflow: hidden; max-width: none; }
.crm-brand-logo { display: block; width: 184px; height: auto; max-width: 100%; flex-shrink: 0; }
.crm-brand-on-surface { filter: brightness(0); }
[data-theme="dark"] .crm-brand-on-surface { filter: none; }
.gentelella-app.sidebar-rail .logo-brand-link { width: 32px; max-width: 32px; flex: 0 0 32px; justify-content: flex-start; }
.gentelella-app.sidebar-rail .logo-brand-link .crm-brand-logo { width: 184px; max-width: none; transform: translateX(-32px); }
.brand-caption { display: block; color: var(--sidebar-text); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; margin-top: 2px; }
.gentelella-app .sidebar .nav-link .nav-text { color: inherit !important; font-weight: inherit !important; }
.gentelella-app .sidebar-nav { padding: 8px; }
.gentelella-app .sidebar .nav-label { color: var(--sidebar-text) !important; opacity: .65; }
.sidebar-link > .bi { width: 18px; font-size: 16px; flex-shrink: 0; opacity: .65; }
.sidebar-link.active > .bi { color: var(--primary); opacity: 1; }
.gentelella-app .sidebar-user { text-decoration: none; }
.sidebar-user .bi-chevron-right { font-size: 10px; color: var(--sidebar-text); }
.sidebar-close { border: 0; width: 28px; height: 28px; border-radius: var(--radius-sm); background: transparent; color: var(--sidebar-text-hover); margin-inline-start: auto; }
.gentelella-app .topbar .tb-btn { border: 0; background: transparent; }
.gentelella-app .topbar .tb-btn:hover { background: var(--bg-surface-secondary); }
.gentelella-app .topbar .crm-user-avatar { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; }
.gentelella-app .topbar .crm-avatar-initial { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-lt); color: var(--primary-dk); font-size: 11px; font-weight: 600; }
.gentelella-app .topbar h5 { font-size: 12px; font-weight: 500 !important; margin: 0; }
.gentelella-app .topbar .breadcrumb { font-size: 10px !important; margin-top: 2px; }
.gentelella-app .dropdown-menu { --bs-dropdown-bg: var(--bg-surface); --bs-dropdown-color: var(--text); --bs-dropdown-link-color: var(--text-secondary); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-link-hover-bg: var(--bg-surface-secondary); border: 1px solid var(--border-color) !important; border-radius: var(--radius) !important; font-size: 12px; padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; z-index: 1300; }
.gentelella-app .dropdown-item { border-radius: var(--radius-sm); }
.gentelella-app .swal2-container { z-index: 1800; }
.gentelella-app .swal2-popup { font-family: var(--font); color: var(--text); background: var(--bg-surface); border-radius: var(--radius-lg); }
.gentelella-app .swal2-styled.swal2-confirm { background: var(--primary); border-radius: var(--radius-sm); font-size: 12.5px; }
/* Restore Bootstrap's modal structure while using Gentelella surfaces. */
.gentelella-app .modal { z-index: 1400; }
.gentelella-app .modal-backdrop { display: block; z-index: 1390; padding: 0; background: #000; backdrop-filter: none; }
.gentelella-app .modal-backdrop.show { opacity: var(--bs-backdrop-opacity, .5); }
.gentelella-app .modal .modal-dialog { opacity: 1; width: auto; background: transparent; border: 0; box-shadow: none; display: block; max-height: none; }
@media (min-width:576px) { .gentelella-app .modal .modal-dialog { max-width: var(--bs-modal-width); } }
.gentelella-app .modal .modal-dialog-centered { display: flex; }
.gentelella-app .modal .modal-content { background: var(--bg-surface); color: var(--text); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.gentelella-app .modal .modal-header, .gentelella-app .modal .modal-footer { border-color: var(--border-color-light); }
.gentelella-app .modal .modal-title { font-size: 15px; font-weight: 600; }
.gentelella-app .modal .modal-dialog-scrollable { height: calc(100% - 2 * var(--bs-modal-margin)); }
.gentelella-app .modal .modal-dialog-scrollable .modal-content { max-height: 100%; }
.gentelella-app .footer { margin-top: 20px; }
.gentelella-app.sidebar-rail .brand-name, .gentelella-app.sidebar-rail .sidebar-link span { display: none; }
.gentelella-app.sidebar-rail .sidebar-link { justify-content: center; }
.gentelella-app.sidebar-rail .sidebar-user .bi-chevron-right { display: none; }
[data-theme="dark"] .gt-redesign .bg-white, [data-theme="dark"] .gt-redesign .bg-light { background-color: var(--bg-surface-secondary) !important; }
[data-theme="dark"] .gt-redesign .text-dark { color: var(--text) !important; }
[data-theme="dark"] .gt-redesign .table { --bs-table-color: var(--text-secondary); --bs-table-bg: transparent; --bs-table-border-color: var(--border-color-light); }
[data-theme="dark"] .gt-redesign .table-secondary { --bs-table-bg: var(--bg-surface-secondary); }
@media (min-width:769px) { .sidebar-close { display: none; } }
@media (max-width:1100px) { .gt-analytics-grid, .gt-dashboard-lower { grid-template-columns: minmax(0,1fr); } }
@media (max-width:768px) {
  .gentelella-app .sidebar .sidebar-brand { position: relative; }
  .gentelella-app .sidebar .logo-brand-link { flex-basis: 100%; }
  .gentelella-app .sidebar .logo-brand-link .crm-brand-logo { width: 176px; }
  .gentelella-app .sidebar .sidebar-brand .sidebar-close { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); }
  .gt-redesign { padding-inline: 14px; }
  .gt-grid-12 > .gt-col { grid-column: span 12; }
  .gt-redesign .card-header { gap: 8px; }
  .gt-redesign .gt-filter-card form > .d-flex { flex-wrap: wrap; }
  .gt-redesign .card-body.d-flex, .gt-redesign form.d-flex, .gt-redesign .alert { flex-wrap: wrap; }
  .gt-toolbar.card { align-items: end; }
  .gt-toolbar input[type="date"] { width: 135px; }
  .gt-toolbar .gt-toolbar-spacer { margin-inline-start: 0; }
  .gt-entry-form { grid-template-columns: minmax(0,1fr); }
  .gt-section-tabs { gap: 12px; overflow-x: auto; white-space: nowrap; }
  .sidebar-close { display: flex; align-items: center; justify-content: center; }
  .gentelella-app .sidebar-backdrop:not([hidden]) { display: block; z-index: 1190; }
  .gentelella-app .sidebar-backdrop[hidden] { display: none !important; }
}
/* Authentication is a native centered Gentelella card. */
body.gentelella-login { display: grid; place-items: center; padding: 32px 16px; min-height: 100dvh; }
.gentelella-login .auth-wrap { width: 100%; max-width: 400px; }
.gentelella-login .auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; font-weight: 600; margin-bottom: 26px; }
.gentelella-login .auth-brand .brand-icon { width: 34px; height: 34px; }
.gentelella-login .auth-brand.logo-brand { height: 64px; overflow: hidden; }
.gentelella-login .auth-brand.logo-brand .crm-brand-logo { width: 260px; max-width: 85%; }
.gentelella-login .auth-card { width: 100%; padding: 28px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.gentelella-login .auth-card h1 { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.gentelella-login .auth-description { font-size: 12.5px; color: var(--text-muted); margin-bottom: 24px; }
.gentelella-login .auth-card .form-label { margin-bottom: 6px; }
.gentelella-login .password-field { position: relative; }
.gentelella-login .password-field input { padding-inline-end: 40px; }
.gentelella-login .password-toggle { position: absolute; inset-inline-end: 0; top: 0; width: 36px; height: 36px; padding: 0; background: none; border: 0; color: var(--text-muted); }
.gentelella-login .auth-submit { width: 100%; justify-content: center; height: 36px; margin-top: 20px; }
.gentelella-login .auth-note { color: var(--text-muted); font-size: 11px; margin-top: 24px; text-align: center; }
@media (prefers-reduced-motion:reduce) { .gentelella-app *, .gentelella-app *::before, .gentelella-app *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Native grid spans for existing responsive content relationships. */
.gt-grid-12 > .gt-col-1 { grid-column: span 1; }
.gt-grid-12 > .gt-col-2 { grid-column: span 2; }
.gt-grid-12 > .gt-col-3 { grid-column: span 3; }
.gt-grid-12 > .gt-col-4 { grid-column: span 4; }
.gt-grid-12 > .gt-col-5 { grid-column: span 5; }
.gt-grid-12 > .gt-col-6 { grid-column: span 6; }
.gt-grid-12 > .gt-col-7 { grid-column: span 7; }
.gt-grid-12 > .gt-col-8 { grid-column: span 8; }
.gt-grid-12 > .gt-col-9 { grid-column: span 9; }
.gt-grid-12 > .gt-col-10 { grid-column: span 10; }
.gt-grid-12 > .gt-col-11 { grid-column: span 11; }
.gt-grid-12 > .gt-col-12 { grid-column: span 12; }

@media (min-width:576px) {
.gt-grid-12 > .gt-col-sm-1 { grid-column: span 1; }
.gt-grid-12 > .gt-col-sm-2 { grid-column: span 2; }
.gt-grid-12 > .gt-col-sm-3 { grid-column: span 3; }
.gt-grid-12 > .gt-col-sm-4 { grid-column: span 4; }
.gt-grid-12 > .gt-col-sm-5 { grid-column: span 5; }
.gt-grid-12 > .gt-col-sm-6 { grid-column: span 6; }
.gt-grid-12 > .gt-col-sm-7 { grid-column: span 7; }
.gt-grid-12 > .gt-col-sm-8 { grid-column: span 8; }
.gt-grid-12 > .gt-col-sm-9 { grid-column: span 9; }
.gt-grid-12 > .gt-col-sm-10 { grid-column: span 10; }
.gt-grid-12 > .gt-col-sm-11 { grid-column: span 11; }
.gt-grid-12 > .gt-col-sm-12 { grid-column: span 12; }
}

@media (min-width:768px) {
.gt-grid-12 > .gt-col-md-1 { grid-column: span 1; }
.gt-grid-12 > .gt-col-md-2 { grid-column: span 2; }
.gt-grid-12 > .gt-col-md-3 { grid-column: span 3; }
.gt-grid-12 > .gt-col-md-4 { grid-column: span 4; }
.gt-grid-12 > .gt-col-md-5 { grid-column: span 5; }
.gt-grid-12 > .gt-col-md-6 { grid-column: span 6; }
.gt-grid-12 > .gt-col-md-7 { grid-column: span 7; }
.gt-grid-12 > .gt-col-md-8 { grid-column: span 8; }
.gt-grid-12 > .gt-col-md-9 { grid-column: span 9; }
.gt-grid-12 > .gt-col-md-10 { grid-column: span 10; }
.gt-grid-12 > .gt-col-md-11 { grid-column: span 11; }
.gt-grid-12 > .gt-col-md-12 { grid-column: span 12; }
}

@media (min-width:992px) {
.gt-grid-12 > .gt-col-lg-1 { grid-column: span 1; }
.gt-grid-12 > .gt-col-lg-2 { grid-column: span 2; }
.gt-grid-12 > .gt-col-lg-3 { grid-column: span 3; }
.gt-grid-12 > .gt-col-lg-4 { grid-column: span 4; }
.gt-grid-12 > .gt-col-lg-5 { grid-column: span 5; }
.gt-grid-12 > .gt-col-lg-6 { grid-column: span 6; }
.gt-grid-12 > .gt-col-lg-7 { grid-column: span 7; }
.gt-grid-12 > .gt-col-lg-8 { grid-column: span 8; }
.gt-grid-12 > .gt-col-lg-9 { grid-column: span 9; }
.gt-grid-12 > .gt-col-lg-10 { grid-column: span 10; }
.gt-grid-12 > .gt-col-lg-11 { grid-column: span 11; }
.gt-grid-12 > .gt-col-lg-12 { grid-column: span 12; }
}

@media (min-width:1200px) {
.gt-grid-12 > .gt-col-xl-1 { grid-column: span 1; }
.gt-grid-12 > .gt-col-xl-2 { grid-column: span 2; }
.gt-grid-12 > .gt-col-xl-3 { grid-column: span 3; }
.gt-grid-12 > .gt-col-xl-4 { grid-column: span 4; }
.gt-grid-12 > .gt-col-xl-5 { grid-column: span 5; }
.gt-grid-12 > .gt-col-xl-6 { grid-column: span 6; }
.gt-grid-12 > .gt-col-xl-7 { grid-column: span 7; }
.gt-grid-12 > .gt-col-xl-8 { grid-column: span 8; }
.gt-grid-12 > .gt-col-xl-9 { grid-column: span 9; }
.gt-grid-12 > .gt-col-xl-10 { grid-column: span 10; }
.gt-grid-12 > .gt-col-xl-11 { grid-column: span 11; }
.gt-grid-12 > .gt-col-xl-12 { grid-column: span 12; }
}

@media (min-width:1400px) {
.gt-grid-12 > .gt-col-xxl-1 { grid-column: span 1; }
.gt-grid-12 > .gt-col-xxl-2 { grid-column: span 2; }
.gt-grid-12 > .gt-col-xxl-3 { grid-column: span 3; }
.gt-grid-12 > .gt-col-xxl-4 { grid-column: span 4; }
.gt-grid-12 > .gt-col-xxl-5 { grid-column: span 5; }
.gt-grid-12 > .gt-col-xxl-6 { grid-column: span 6; }
.gt-grid-12 > .gt-col-xxl-7 { grid-column: span 7; }
.gt-grid-12 > .gt-col-xxl-8 { grid-column: span 8; }
.gt-grid-12 > .gt-col-xxl-9 { grid-column: span 9; }
.gt-grid-12 > .gt-col-xxl-10 { grid-column: span 10; }
.gt-grid-12 > .gt-col-xxl-11 { grid-column: span 11; }
.gt-grid-12 > .gt-col-xxl-12 { grid-column: span 12; }
}