/* ================================================================= */ /* == CONDENSED & HYPER-CONDENSED BOOTSTRAP 5.3 ADD-ON == */ /* ================================================================= */ /* * INSTRUCTIONS: * 1. Include this file *after* your main Bootstrap CSS file. * 2. Add the class `layout-condensed` or `layout-hyper-condensed` * to your tag or a main wrapper element to activate. * * This file provides two levels of condensed spacing: * - .layout-condensed: Tighter spacing, good for admin panels. * - .layout-hyper-condensed: Extremely tight spacing for * data-dense "cockpit" style UIs. * * It works by overriding Bootstrap's CSS variables and * utility classes. */ /* ================================================================= */ /* == SPACER VARIABLE DEFINITIONS == */ /* ================================================================= */ /* * We define our new spacer "systems" here. These variables * are then used by the utility classes below. */ :root { /* Default BS spacers (for reference) 1: 0.25rem 2: 0.5rem 3: 1rem 4: 1.5rem 5: 3rem */ /* --- Condensed Spacer System --- */ --bs-spacer-1-condensed: 0.15rem; --bs-spacer-2-condensed: 0.25rem; --bs-spacer-3-condensed: 0.5rem; --bs-spacer-4-condensed: 0.75rem; --bs-spacer-5-condensed: 1.25rem; /* --- Hyper-Condensed Spacer System --- */ --bs-spacer-1-hyper: 0.1rem; --bs-spacer-2-hyper: 0.15rem; --bs-spacer-3-hyper: 0.25rem; --bs-spacer-4-hyper: 0.5rem; --bs-spacer-5-hyper: 1rem; } /* ================================================================= */ /* == CONDENSED LAYOUT STYLES == */ /* ================================================================= */ .layout-condensed { /* --- Base & Gutters --- */ /* --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.5rem; */ /* Removing the global gutter variables. These will be applied to .g-* classes directly to avoid breaking column padding. */ /* --- Cards --- */ --bs-card-spacer-y: 0.5rem; --bs-card-spacer-x: 0.75rem; --bs-card-cap-padding-y: 0.5rem; --bs-card-cap-padding-x: 0.75rem; --bs-card-margin-bottom: 0.5rem; /* Custom variable for card bottom margin */ /* --- Forms --- */ --bs-form-label-font-size: 0.8rem; --bs-form-label-margin-bottom: 0.1rem; --bs-form-check-min-height: 1.2rem; --bs-form-check-padding-start: 1.2em; /* --- Form Controls (From your new CSS) --- */ --bs-form-control-padding-y: 0.15rem; --bs-form-control-padding-x: 0.5rem; --bs-form-control-font-size: 0.85rem; --bs-form-select-padding-y: 0.15rem; --bs-form-select-padding-x: 0.5rem; /* Will be overridden by .form-select rule */ --bs-form-select-font-size: 0.85rem; /* --- Buttons --- */ --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.9rem; --bs-btn-padding-y-sm: 0.15rem; --bs-btn-padding-x-sm: 0.3rem; --bs-btn-font-size-sm: 0.8rem; --bs-btn-padding-y-lg: 0.3rem; --bs-btn-padding-x-lg: 0.75rem; --bs-btn-font-size-lg: 1rem; /* --- Modals --- */ --bs-modal-padding: 0.75rem; --bs-modal-header-padding-y: 0.75rem; --bs-modal-header-padding-x: 1rem; --bs-modal-footer-gap: 0.25rem; /* --- Alerts --- */ --bs-alert-padding-y: 0.5rem; --bs-alert-padding-x: 0.75rem; /* --- List Groups --- */ --bs-list-group-item-padding-y: 0.3rem; --bs-list-group-item-padding-x: 0.75rem; /* --- Navs & Dropdowns --- */ --bs-nav-link-padding-y: 0.25rem; --bs-nav-link-padding-x: 0.75rem; --bs-dropdown-item-padding-y: 0.15rem; --bs-dropdown-item-padding-x: 0.75rem; /* --- Pagination --- */ --bs-pagination-padding-y: 0.25rem; --bs-pagination-padding-x: 0.5rem; } /* --- Typography --- */ .layout-condensed h4 { font-size: 1.1rem; margin-bottom: 0.25rem; } .layout-condensed h5 { font-size: 1rem; margin-bottom: 0; } .layout-condensed h6 { font-size: 1rem; /* Was 0.9rem, updated to match original */ margin-bottom: 0; } .layout-condensed .form-check-label { font-size: 0.9rem; } .layout-condensed .form-label { font-size: var(--bs-form-label-font-size, 0.8rem); margin-bottom: var(--bs-form-label-margin-bottom, 0.1rem); } .layout-condensed .card { margin-bottom: var(--bs-card-margin-bottom, 0.5rem); } .layout-condensed .card-body, .layout-condensed .card-header { padding: var(--bs-card-cap-padding-y, 0.5rem) var(--bs-card-cap-padding-x, 0.75rem); } /* --- Form Sizing Overrides (From your new CSS) --- */ .layout-condensed .form-control { font-size: var(--bs-form-control-font-size, 0.85rem); padding: var(--bs-form-control-padding-y, 0.15rem) var(--bs-form-control-padding-x, 0.5rem); height: auto; /* Auto-height is key */ } .layout-condensed .form-select { font-size: var(--bs-form-select-font-size, 0.85rem); /* Selects need different X padding to account for the arrow */ padding: var(--bs-form-select-padding-y, 0.15rem) 2.25rem var(--bs-form-select-padding-y, 0.15rem) var(--bs-form-select-padding-x, 0.5rem); height: auto; } .layout-condensed .col-form-label-sm, .layout-condensed .col-form-label { /* Override base col-form-label too */ padding-top: 0.2rem; padding-bottom: 0.2rem; font-size: 0.85rem; /* Match the form-label-custom */ } .layout-condensed .form-text { /* Overriding .form-text-custom */ font-size: 0.8rem; margin-top: 0; padding-left: 0.25rem; } .layout-condensed .invalid-feedback { margin-top: 0.1rem; font-size: 0.8rem; } .layout-condensed .input-group-text { padding: var(--bs-form-control-padding-y, 0.15rem) var(--bs-form-control-padding-x, 0.5rem); font-size: var(--bs-form-control-font-size, 0.85rem); } /* --- Gutter Utility Overrides (Condensed) --- */ /* * We override the .g-* utility classes directly, * as the user's original file did. This prevents * breaking column padding which can happen with a * global gutter override. */ .layout-condensed .g-1, .layout-condensed .gx-1 { --bs-gutter-x: var(--bs-spacer-1-condensed); } .layout-condensed .g-1, .layout-condensed .gy-1 { --bs-gutter-y: var(--bs-spacer-1-condensed); } .layout-condensed .g-2, .layout-condensed .gx-2 { --bs-gutter-x: var(--bs-spacer-2-condensed); } .layout-condensed .g-2, .layout-condensed .gy-2 { --bs-gutter-y: var(--bs-spacer-2-condensed); } /* User's original .g-3 override */ .layout-condensed .g-3 { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.5rem; } .layout-condensed .gx-3 { --bs-gutter-x: 0.75rem; } .layout-condensed .gy-3 { --bs-gutter-y: 0.5rem; } .layout-condensed .g-4, .layout-condensed .gx-4 { --bs-gutter-x: var(--bs-spacer-4-condensed); } .layout-condensed .g-4, .layout-condensed .gy-4 { --bs-gutter-y: var(--bs-spacer-4-condensed); } .layout-condensed .g-5, .layout-condensed .gx-5 { --bs-gutter-x: var(--bs-spacer-5-condensed); } .layout-condensed .g-5, .layout-condensed .gy-5 { --bs-gutter-y: var(--bs-spacer-5-condensed); } /* --- Spacer Utility Overrides (Condensed) --- */ /* This is verbose, but necessary to override Bootstrap's utilities */ /* Level 1 */ .layout-condensed .m-1 { margin: var(--bs-spacer-1-condensed) !important; } .layout-condensed .mt-1 { margin-top: var(--bs-spacer-1-condensed) !important; } .layout-condensed .me-1 { margin-right: var(--bs-spacer-1-condensed) !important; } .layout-condensed .mb-1 { margin-bottom: var(--bs-spacer-1-condensed) !important; } .layout-condensed .ms-1 { margin-left: var(--bs-spacer-1-condensed) !important; } .layout-condensed .mx-1 { margin-right: var(--bs-spacer-1-condensed) !important; margin-left: var(--bs-spacer-1-condensed) !important; } .layout-condensed .my-1 { margin-top: var(--bs-spacer-1-condensed) !important; margin-bottom: var(--bs-spacer-1-condensed) !important; } .layout-condensed .p-1 { padding: var(--bs-spacer-1-condensed) !important; } .layout-condensed .pt-1 { padding-top: var(--bs-spacer-1-condensed) !important; } .layout-condensed .pe-1 { padding-right: var(--bs-spacer-1-condensed) !important; } .layout-condensed .pb-1 { padding-bottom: var(--bs-spacer-1-condensed) !important; } .layout-condensed .ps-1 { padding-left: var(--bs-spacer-1-condensed) !important; } .layout-condensed .px-1 { padding-right: var(--bs-spacer-1-condensed) !important; padding-left: var(--bs-spacer-1-condensed) !important; } .layout-condensed .py-1 { padding-top: var(--bs-spacer-1-condensed) !important; padding-bottom: var(--bs-spacer-1-condensed) !important; } /* REMOVED .g-1, .gx-1, .gy-1 from here to fix column breaks */ /* Level 2 */ .layout-condensed .m-2 { margin: var(--bs-spacer-2-condensed) !important; } .layout-condensed .mt-2 { margin-top: var(--bs-spacer-2-condensed) !important; } .layout-condensed .me-2 { margin-right: var(--bs-spacer-2-condensed) !important; } .layout-condensed .mb-2 { margin-bottom: var(--bs-spacer-2-condensed) !important; } .layout-condensed .ms-2 { margin-left: var(--bs-spacer-2-condensed) !important; } .layout-condensed .mx-2 { margin-right: var(--bs-spacer-2-condensed) !important; margin-left: var(--bs-spacer-2-condensed) !important; } .layout-condensed .my-2 { margin-top: var(--bs-spacer-2-condensed) !important; margin-bottom: var(--bs-spacer-2-condensed) !important; } .layout-condensed .p-2 { padding: var(--bs-spacer-2-condensed) !important; } .layout-condensed .pt-2 { padding-top: var(--bs-spacer-2-condensed) !important; } .layout-condensed .pe-2 { padding-right: var(--bs-spacer-2-condensed) !important; } .layout-condensed .pb-2 { padding-bottom: var(--bs-spacer-2-condensed) !important; } .layout-condensed .ps-2 { padding-left: var(--bs-spacer-2-condensed) !important; } .layout-condensed .px-2 { padding-right: var(--bs-spacer-2-condensed) !important; padding-left: var(--bs-spacer-2-condensed) !important; } .layout-condensed .py-2 { padding-top: var(--bs-spacer-2-condensed) !important; padding-bottom: var(--bs-spacer-2-condensed) !important; } /* REMOVED .g-2, .gx-2, .gy-2 from here to fix column breaks */ /* Level 3 */ .layout-condensed .m-3 { margin: var(--bs-spacer-3-condensed) !important; } .layout-condensed .mt-3 { margin-top: var(--bs-spacer-3-condensed) !important; } .layout-condensed .me-3 { margin-right: var(--bs-spacer-3-condensed) !important; } .layout-condensed .mb-3 { margin-bottom: var(--bs-spacer-3-condensed) !important; } .layout-condensed .ms-3 { margin-left: var(--bs-spacer-3-condensed) !important; } .layout-condensed .mx-3 { margin-right: var(--bs-spacer-3-condensed) !important; margin-left: var(--bs-spacer-3-condensed) !important; } .layout-condensed .my-3 { margin-top: var(--bs-spacer-3-condensed) !important; margin-bottom: var(--bs-spacer-3-condensed) !important; } .layout-condensed .p-3 { padding: var(--bs-spacer-3-condensed) !important; } .layout-condensed .pt-3 { padding-top: var(--bs-spacer-3-condensed) !important; } .layout-condensed .pe-3 { padding-right: var(--bs-spacer-3-condensed) !important; } .layout-condensed .pb-3 { padding-bottom: var(--bs-spacer-3-condensed) !important; } .layout-condensed .ps-3 { padding-left: var(--bs-spacer-3-condensed) !important; } .layout-condensed .px-3 { padding-right: var(--bs-spacer-3-condensed) !important; padding-left: var(--bs-spacer-3-condensed) !important; } .layout-condensed .py-3 { padding-top: var(--bs-spacer-3-condensed) !important; padding-bottom: var(--bs-spacer-3-condensed) !important; } /* REMOVED .g-3, .gx-3, .gy-3 from here to fix column breaks */ /* Level 4 */ .layout-condensed .m-4 { margin: var(--bs-spacer-4-condensed) !important; } .layout-condensed .mt-4 { margin-top: var(--bs-spacer-4-condensed) !important; } .layout-condensed .me-4 { margin-right: var(--bs-spacer-4-condensed) !important; } .layout-condensed .mb-4 { margin-bottom: var(--bs-spacer-4-condensed) !important; } .layout-condensed .ms-4 { margin-left: var(--bs-spacer-4-condensed) !important; } .layout-condensed .mx-4 { margin-right: var(--bs-spacer-4-condensed) !important; margin-left: var(--bs-spacer-4-condensed) !important; } .layout-condensed .my-4 { margin-top: var(--bs-spacer-4-condensed) !important; margin-bottom: var(--bs-spacer-4-condensed) !important; } .layout-condensed .p-4 { padding: var(--bs-spacer-4-condensed) !important; } .layout-condensed .pt-4 { padding-top: var(--bs-spacer-4-condensed) !important; } .layout-condensed .pe-4 { padding-right: var(--bs-spacer-4-condensed) !important; } .layout-condensed .pb-4 { padding-bottom: var(--bs-spacer-4-condensed) !important; } .layout-condensed .ps-4 { padding-left: var(--bs-spacer-4-condensed) !important; } .layout-condensed .px-4 { padding-right: var(--bs-spacer-4-condensed) !important; padding-left: var(--bs-spacer-4-condensed) !important; } .layout-condensed .py-4 { padding-top: var(--bs-spacer-4-condensed) !important; padding-bottom: var(--bs-spacer-4-condensed) !important; } /* REMOVED .g-4, .gx-4, .gy-4 from here to fix column breaks */ /* Level 5 */ .layout-condensed .m-5 { margin: var(--bs-spacer-5-condensed) !important; } .layout-condensed .mt-5 { margin-top: var(--bs-spacer-5-condensed) !important; } .layout-condensed .me-5 { margin-right: var(--bs-spacer-5-condensed) !important; } .layout-condensed .mb-5 { margin-bottom: var(--bs-spacer-5-condensed) !important; } .layout-condensed .ms-5 { margin-left: var(--bs-spacer-5-condensed) !important; } .layout-condensed .mx-5 { margin-right: var(--bs-spacer-5-condensed) !important; margin-left: var(--bs-spacer-5-condensed) !important; } .layout-condensed .my-5 { margin-top: var(--bs-spacer-5-condensed) !important; margin-bottom: var(--bs-spacer-5-condensed) !important; } .layout-condensed .p-5 { padding: var(--bs-spacer-5-condensed) !important; } .layout-condensed .pt-5 { padding-top: var(--bs-spacer-5-condensed) !important; } .layout-condensed .pe-5 { padding-right: var(--bs-spacer-5-condensed) !important; } .layout-condensed .pb-5 { padding-bottom: var(--bs-spacer-5-condensed) !important; } .layout-condensed .ps-5 { padding-left: var(--bs-spacer-5-condensed) !important; } .layout-condensed .px-5 { padding-right: var(--bs-spacer-5-condensed) !important; padding-left: var(--bs-spacer-5-condensed) !important; } .layout-condensed .py-5 { padding-top: var(--bs-spacer-5-condensed) !important; padding-bottom: var(--bs-spacer-5-condensed) !important; } /* REMOVED .g-5, .gx-5, .gy-5 from here to fix column breaks */ /* ================================================================= */ /* == HYPER-CONDENSED LAYOUT STYLES == */ /* ================================================================= */ .layout-hyper-condensed { /* --- Base & Gutters --- */ /* --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.25rem; */ /* Removing the global gutter variables. */ /* --- Cards --- */ --bs-card-spacer-y: 0.25rem; --bs-card-spacer-x: 0.5rem; --bs-card-cap-padding-y: 0.25rem; --bs-card-cap-padding-x: 0.5rem; --bs-card-margin-bottom: 0.25rem; /* Custom variable for card bottom margin */ /* --- Forms --- */ --bs-form-label-font-size: 0.75rem; --bs-form-label-margin-bottom: 0; --bs-form-check-min-height: 1.1rem; --bs-form-check-padding-start: 1.1em; --bs-form-check-label-font-size: 0.8rem; /* --- Form Controls (Hyper-condensed) --- */ --bs-form-control-padding-y: 0.1rem; --bs-form-control-padding-x: 0.3rem; --bs-form-control-font-size: 0.8rem; --bs-form-select-padding-y: 0.1rem; --bs-form-select-padding-x: 0.3rem; --bs-form-select-font-size: 0.8rem; /* --- Buttons --- */ --bs-btn-padding-y: 0.1rem; --bs-btn-padding-x: 0.3rem; --bs-btn-font-size: 0.8rem; --bs-btn-padding-y-sm: 0.05rem; --bs-btn-padding-x-sm: 0.2rem; --bs-btn-font-size-sm: 0.75rem; --bs-btn-padding-y-lg: 0.2rem; --bs-btn-padding-x-lg: 0.5rem; --bs-btn-font-size-lg: 0.9rem; /* --- Modals --- */ --bs-modal-padding: 0.5rem; --bs-modal-header-padding-y: 0.5rem; --bs-modal-header-padding-x: 0.75rem; --bs-modal-footer-gap: 0.1rem; /* --- Alerts --- */ --bs-alert-padding-y: 0.25rem; --bs-alert-padding-x: 0.5rem; /* --- List Groups --- */ --bs-list-group-item-padding-y: 0.15rem; --bs-list-group-item-padding-x: 0.5rem; /* --- Navs & Dropdowns --- */ --bs-nav-link-padding-y: 0.15rem; --bs-nav-link-padding-x: 0.5rem; --bs-dropdown-item-padding-y: 0.1rem; --bs-dropdown-item-padding-x: 0.5rem; /* --- Pagination --- */ --bs-pagination-padding-y: 0.15rem; --bs-pagination-padding-x: 0.3rem; } /* --- Typography --- */ .layout-hyper-condensed h4 { font-size: 1rem; margin-bottom: 0.1rem; } .layout-hyper-condensed h5 { font-size: 0.9rem; margin-bottom: 0; } .layout-hyper-condensed h6 { font-size: 0.8rem; margin-bottom: 0; } .layout-hyper-condensed .form-check-label { font-size: var(--bs-form-check-label-font-size, 0.8rem); } .layout-hyper-condensed .form-label { font-size: var(--bs-form-label-font-size, 0.75rem); margin-bottom: var(--bs-form-label-margin-bottom, 0); } .layout-hyper-condensed .card { margin-bottom: var(--bs-card-margin-bottom, 0.25rem); } .layout-hyper-condensed .card-body, .layout-hyper-condensed .card-header { padding: var(--bs-card-cap-padding-y, 0.25rem) var(--bs-card-cap-padding-x, 0.5rem); } /* --- Form Sizing Overrides (Hyper-Condensed) --- */ .layout-hyper-condensed .form-control { font-size: var(--bs-form-control-font-size, 0.8rem); padding: var(--bs-form-control-padding-y, 0.1rem) var(--bs-form-control-padding-x, 0.3rem); height: auto; } .layout-hyper-condensed .form-select { font-size: var(--bs-form-select-font-size, 0.8rem); padding: var(--bs-form-select-padding-y, 0.1rem) 2rem var(--bs-form-select-padding-y, 0.1rem) var(--bs-form-select-padding-x, 0.3rem); height: auto; } .layout-hyper-condensed .col-form-label-sm, .layout-hyper-condensed .col-form-label { padding-top: 0.1rem; padding-bottom: 0.1rem; font-size: var(--bs-form-control-font-size, 0.8rem); /* Match the form-control, not form-label */ } .layout-hyper-condensed .form-text { font-size: 0.75rem; margin-top: 0; padding-left: 0.1rem; } .layout-hyper-condensed .invalid-feedback { margin-top: 0.05rem; font-size: 0.75rem; } .layout-hyper-condensed .input-group-text { padding: var(--bs-form-control-padding-y, 0.1rem) var(--bs-form-control-padding-x, 0.3rem); font-size: var(--bs-form-control-font-size, 0.8rem); } /* --- Gutter Utility Overrides (Hyper-Condensed) --- */ .layout-hyper-condensed .g-1, .layout-hyper-condensed .gx-1 { --bs-gutter-x: var(--bs-spacer-1-hyper); } .layout-hyper-condensed .g-1, .layout-hyper-condensed .gy-1 { --bs-gutter-y: var(--bs-spacer-1-hyper); } .layout-hyper-condensed .g-2, .layout-hyper-condensed .gx-2 { --bs-gutter-x: var(--bs-spacer-2-hyper); } .layout-hyper-condensed .g-2, .layout-hyper-condensed .gy-2 { --bs-gutter-y: var(--bs-spacer-2-hyper); } /* User's original .g-3 override */ .layout-hyper-condensed .g-3 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.25rem; } .layout-hyper-condensed .gx-3 { --bs-gutter-x: 0.5rem; } .layout-hyper-condensed .gy-3 { --bs-gutter-y: 0.25rem; } .layout-hyper-condensed .g-4, .layout-hyper-condensed .gx-4 { --bs-gutter-x: var(--bs-spacer-4-hyper); } .layout-hyper-condensed .g-4, .layout-hyper-condensed .gy-4 { --bs-gutter-y: var(--bs-spacer-4-hyper); } .layout-hyper-condensed .g-5, .layout-hyper-condensed .gx-5 { --bs-gutter-x: var(--bs-spacer-5-hyper); } .layout-hyper-condensed .g-5, .layout-hyper-condensed .gy-5 { --bs-gutter-y: var(--bs-spacer-5-hyper); } /* --- Spacer Utility Overrides (Hyper-Condensed) --- */ /* Level 1 */ .layout-hyper-condensed .m-1 { margin: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .mt-1 { margin-top: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .me-1 { margin-right: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .mb-1 { margin-bottom: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .ms-1 { margin-left: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .mx-1 { margin-right: var(--bs-spacer-1-hyper) !important; margin-left: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .my-1 { margin-top: var(--bs-spacer-1-hyper) !important; margin-bottom: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .p-1 { padding: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .pt-1 { padding-top: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .pe-1 { padding-right: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .pb-1 { padding-bottom: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .ps-1 { padding-left: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .px-1 { padding-right: var(--bs-spacer-1-hyper) !important; padding-left: var(--bs-spacer-1-hyper) !important; } .layout-hyper-condensed .py-1 { padding-top: var(--bs-spacer-1-hyper) !important; padding-bottom: var(--bs-spacer-1-hyper) !important; } /* REMOVED .g-1, .gx-1, .gy-1 from here to fix column breaks */ /* Level 2 */ .layout-hyper-condensed .m-2 { margin: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .mt-2 { margin-top: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .me-2 { margin-right: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .mb-2 { margin-bottom: var(--bs-spacer-3-hyper) !important; } /* User original was 0.25rem, this var is 0.25rem */ .layout-hyper-condensed .ms-2 { margin-left: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .mx-2 { margin-right: var(--bs-spacer-2-hyper) !important; margin-left: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .my-2 { margin-top: var(--bs-spacer-2-hyper) !important; margin-bottom: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .p-2 { padding: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .pt-2 { padding-top: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .pe-2 { padding-right: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .pb-2 { padding-bottom: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .ps-2 { padding-left: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .px-2 { padding-right: var(--bs-spacer-2-hyper) !important; padding-left: var(--bs-spacer-2-hyper) !important; } .layout-hyper-condensed .py-2 { padding-top: var(--bs-spacer-2-hyper) !important; padding-bottom: var(--bs-spacer-2-hyper) !important; } /* REMOVED .g-2, .gx-2, .gy-2 from here to fix column breaks */ /* Level 3 */ .layout-hyper-condensed .m-3 { margin: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .mt-3 { margin-top: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .me-3 { margin-right: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .mb-3 { margin-bottom: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .ms-3 { margin-left: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .mx-3 { margin-right: var(--bs-spacer-3-hyper) !important; margin-left: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .my-3 { margin-top: var(--bs-spacer-3-hyper) !important; margin-bottom: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .p-3 { padding: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .pt-3 { padding-top: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .pe-3 { padding-right: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .pb-3 { padding-bottom: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .ps-3 { padding-left: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .px-3 { padding-right: var(--bs-spacer-3-hyper) !important; padding-left: var(--bs-spacer-3-hyper) !important; } .layout-hyper-condensed .py-3 { padding-top: var(--bs-spacer-3-hyper) !important; padding-bottom: var(--bs-spacer-3-hyper) !important; } /* REMOVED .g-3, .gx-3, .gy-3 from here to fix column breaks */ /* Level 4 */ .layout-hyper-condensed .m-4 { margin: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .mt-4 { margin-top: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .me-4 { margin-right: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .mb-4 { margin-bottom: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .ms-4 { margin-left: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .mx-4 { margin-right: var(--bs-spacer-4-hyper) !important; margin-left: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .my-4 { margin-top: var(--bs-spacer-4-hyper) !important; margin-bottom: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .p-4 { padding: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .pt-4 { padding-top: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .pe-4 { padding-right: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .pb-4 { padding-bottom: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .ps-4 { padding-left: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .px-4 { padding-right: var(--bs-spacer-4-hyper) !important; padding-left: var(--bs-spacer-4-hyper) !important; } .layout-hyper-condensed .py-4 { padding-top: var(--bs-spacer-4-hyper) !important; padding-bottom: var(--bs-spacer-4-hyper) !important; } /* REMOVED .g-4, .gx-4, .gy-4 from here to fix column breaks */ /* Level 5 */ .layout-hyper-condensed .m-5 { margin: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .mt-5 { margin-top: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .me-5 { margin-right: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .mb-5 { margin-bottom: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .ms-5 { margin-left: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .mx-5 { margin-right: var(--bs-spacer-5-hyper) !important; margin-left: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .my-5 { margin-top: var(--bs-spacer-5-hyper) !important; margin-bottom: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .p-5 { padding: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .pt-5 { padding-top: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .pe-5 { padding-right: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .pb-5 { padding-bottom: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .ps-5 { padding-left: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .px-5 { padding-right: var(--bs-spacer-5-hyper) !important; padding-left: var(--bs-spacer-5-hyper) !important; } .layout-hyper-condensed .py-5 { padding-top: var(--bs-spacer-5-hyper) !important; padding-bottom: var(--bs-spacer-5-hyper) !important; } /* REMOVED .g-5, .gx-5, .gy-5 from here to fix column breaks */