/*
* demo.css
* Unified theme - replaces prms.css + horizontal menu overrides
* Brand color: #004883
******************************************************************************/

/* ===========================================================================
   1. HORIZONTAL MENU BAR
   =========================================================================== */

aside.menu-horizontal.bg-menu-theme,
aside.bg-menu-theme.menu-horizontal,
#layout-menu.bg-menu-theme,
#layout-menu.menu-horizontal {
  background-color: #004883 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border-bottom: none;
}
/* Menu inner - no forced bg */
.menu-horizontal .menu-inner {
  background-color: transparent !important;
}

/* User section - absolute positioned so template JS cannot move it */
#menu-user-section {
  position: absolute !important;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
#menu-user-section span {
  color: rgba(255,255,255,0.9) !important;
}
#layout-menu { border: none !important; }
.bg-menu-theme .menu-inner-shadow { background: none !important; }

/* Menu links - white text on navy bg */
.layout-horizontal .menu-inner > .menu-item > .menu-link {
  padding: 0.75rem 0.9rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8) !important;
  border-radius: 0 !important;
  margin: 0;
  transition: color 0.15s ease;
  position: relative;
  background: none !important;
  box-shadow: none !important;
}
.layout-horizontal .menu-inner > .menu-item > .menu-link i,
.layout-horizontal .menu-inner > .menu-item > .menu-link div {
  color: inherit !important;
}

/* Override ALL theme-default active backgrounds */
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle,
.bg-menu-theme.menu-horizontal .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle,
.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle,
.menu-item.active { background: none !important; box-shadow: none !important; }
.menu-item.active a { color: #fff !important; }

/* Active - white text + white bottom line on navy */
.layout-horizontal .menu-inner > .menu-item.active > .menu-link {
  color: #fff !important;
}
.layout-horizontal .menu-inner > .menu-item.active > .menu-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  right: 0.5rem;
  height: 2.5px;
  background-color: #fff;
  border-radius: 2px 2px 0 0;
}
.layout-horizontal .menu-inner > .menu-item.active > .menu-link i,
.layout-horizontal .menu-inner > .menu-item.active > .menu-link div {
  color: #fff !important;
  font-weight: 600;
}

/* Hover - bright white */
.layout-horizontal .menu-inner > .menu-item:not(.active) > .menu-link:hover,
.layout-horizontal .menu-inner > .menu-item:not(.active) > .menu-link:focus,
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover {
  color: #fff !important;
  background: none !important;
}
.layout-horizontal .menu-inner > .menu-item:not(.active) > .menu-link:hover i,
.layout-horizontal .menu-inner > .menu-item:not(.active) > .menu-link:hover div {
  color: #fff !important;
}
.menu-item:hover { background-color: transparent !important; }

/* Dropdown submenu - must stay white */
.menu-horizontal .menu-sub,
.bg-menu-theme .menu-sub,
.bg-menu-theme.menu-horizontal .menu-sub,
.bg-menu-theme.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing) > .menu-sub {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #e5e7eb;
  padding: 0.4rem 0;
  min-width: 210px;
  background-color: #fff !important;
  z-index: 1050 !important;
}
.menu-horizontal .menu-sub .menu-item .menu-link {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: #4a5568 !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  transition: all 0.12s ease;
}
.menu-horizontal .menu-sub .menu-item .menu-link i,
.menu-horizontal .menu-sub .menu-item .menu-link div { color: #4a5568 !important; }

/* Submenu hover */
.menu-horizontal .menu-sub .menu-item .menu-link:hover,
.menu-horizontal .menu-sub .menu-item .menu-link:focus {
  background-color: #f1f5f9 !important;
  color: #004883 !important;
}
.menu-horizontal .menu-sub .menu-item .menu-link:hover i,
.menu-horizontal .menu-sub .menu-item .menu-link:hover div { color: #004883 !important; }

/* Submenu active */
.menu-horizontal .menu-sub .menu-item.active > .menu-link,
.menu-horizontal .menu-sub .menu-item.active > .menu-link:hover {
  color: #004883 !important;
  background-color: #f0f7ff !important;
  font-weight: 600;
  border-left: 3px solid #004883;
}
.menu-horizontal .menu-sub .menu-item.active > .menu-link i,
.menu-horizontal .menu-sub .menu-item.active > .menu-link div { color: #004883 !important; }

/* Hide submenu bullets */
.bg-menu-theme .menu-inner .menu-sub .menu-item > .menu-link::before { display: none !important; }
.menu-horizontal .menu-icon { font-size: 1.1rem; }

/* Hide template dropdown arrow completely - we add arrow in menu text instead */
.layout-horizontal .menu-inner > .menu-item > .menu-link.menu-toggle::after {
  display: none !important;
}

/* Menu link colors for bg-menu-theme */
.bg-menu-theme .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next { color: rgba(255,255,255,0.8) !important; }
.bg-menu-theme .menu-text { color: rgba(255,255,255,0.8) !important; }

/* ===========================================================================
   2. LAYOUT & NAVBAR
   =========================================================================== */

/* Remove navbar since it's hidden */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page { padding-top: 0 !important; }
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page { padding-top: 0 !important; }
.layout-navbar-fixed .layout-page:before {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  height: 0 !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before { z-index: 0 !important; height: 0 !important; }
.content-wrapper .navbar { z-index: auto; }

/* Hide template customizer */
#template-customizer { display: none !important; }
#template-customizer .template-customizer-open-btn { background-color: #004883 !important; }

/* Container full width */
@media (min-width: 1400px) {
  .container-xxl { max-width: 100% !important; }
}
.layout-horizontal .container-xxl,
.layout-horizontal .container-fluid {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.container-p-y {
  padding-top: 0.5rem !important;
  padding-bottom: 0.75rem !important;
}

/* ===========================================================================
   3. PAGE HEADINGS & BREADCRUMBS
   =========================================================================== */

.bg-color-rem {
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0.4rem 0 !important;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid #004883;
}
.bg-color-rem .text-white { color: #1e293b !important; }
.bg-color { background-color: rgba(0, 72, 131, 0.05) !important; }

.main-heading_h4 {
  font-size: 1.15rem !important;
  font-weight: 700;
  line-height: 1.5;
  color: #1e293b !important;
}
.main-heading_hh4 {
  font-size: 1.05rem !important;
  font-weight: 700;
  line-height: 1.5;
  color: #1e293b !important;
}

/* Dashboard header - same style as other page headings */
.dash-header {
  background-color: transparent !important;
  color: #1e293b !important;
  padding: 0.4rem 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  border-bottom: 2px solid #004883 !important;
}
.dash-body { background: transparent !important; }

/* Breadcrumbs - modern style */
.breadcrumb { background: transparent; margin: 0; padding: 0.25rem 0; font-size: 0.8rem; }
.breadcrumb-item { display: flex; align-items: center; }
ol.breadcrumb .breadcrumb-item a,
ol.breadcrumb .breadcrumb-item a.text-white,
.bg-color-rem .breadcrumb-item a,
.bg-color-rem .breadcrumb-item a.text-white { color: #004883 !important; text-decoration: none; font-weight: 500; }
ol.breadcrumb .breadcrumb-item a:hover { color: #003a6b !important; text-decoration: underline; }
ol.breadcrumb .breadcrumb-item.active,
ol.breadcrumb .breadcrumb-item.active.text-white,
.bg-color-rem .breadcrumb-item.active,
.bg-color-rem .breadcrumb-item.active.text-white { color: #1e293b !important; font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: #94a3b8 !important; content: "\203A" !important; font-size: 1.1rem; line-height: 1; padding: 0 0.4rem; }

/* ===========================================================================
   4. BUTTONS (brand #004883)
   =========================================================================== */

.btn { border-radius: 6px; font-weight: 500; font-size: 0.85rem; padding: 0.45rem 1rem; transition: all 0.15s ease; }
.btn-primary { background-color: #004883 !important; border-color: #004883 !important; }
.btn.btn-primary:hover { background-color: #003a6b !important; border-color: #003a6b !important; }
.btn-primary-can { color: #004883 !important; border-color: #004883 !important; background-color: #e9e9e5; }
.btn-whitecol { background-color: #004883 !important; color: #fff !important; padding: 5px 14px !important; border-radius: 6px; font-size: 0.8rem; font-weight: 500; border: none !important; transition: all 0.15s ease; }
.btn-whitecol:hover { background-color: #003a6b !important; color: #fff !important; }
.btn-shape { background-color: transparent !important; box-shadow: none !important; margin-top: 2px !important; color: #004883 !important; }
.btn-shape:hover { background-color: #004883 !important; color: white !important; }
.btn-SubmitExcelFile { width: 6.6rem !important; height: 3.5rem !important; padding: 0 !important; line-height: 1.5 !important; display: flex !important; align-items: center !important; justify-content: center !important; }

/* ===========================================================================
   5. FORMS
   =========================================================================== */

.form-label { font-weight: 700 !important; color: black !important; }
.form-control:focus, .form-select:focus, input.form-control:focus, select.form-select:focus {
  border-color: #004883 !important;
  box-shadow: 0 0 0 0.15rem rgba(0, 72, 131, 0.1) !important;
}
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
  background-color: #004883 !important;
  border-color: #004883 !important;
}
input[readonly], textarea[readonly] { background-color: #f3f3f3; }

/* ===========================================================================
   6. TABLES & DATATABLES (brand color headers)
   =========================================================================== */

.table th {
  background-color: #e8eef4 !important;
  color: #1e293b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding-top: 0.48rem !important;
  padding-bottom: 0.48rem !important;
  border-bottom: 2px solid #004883 !important;
}
.table-allborder th, .table-allborder td { border: 1px solid #dee2e6; }
tbody { font-size: 13px !important; }

/* DataTables */
.dataTables_filter input { padding: 5px 10px; font-size: 12px; height: 30px; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link { font-size: 12px; height: 30px; line-height: 30px; text-align: center; padding: 0 10px; }
.dataTables_length select { font-size: 12px; height: 30px; }
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::before, table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::before, table.dataTable thead .sorting_desc_disabled::after { line-height: 0.5rem !important; }

/* Pagination */
.page-item.active .page-link, .pagination li.active>a:not(.page-link) {
  background-color: #004883 !important;
  border-color: #004883 !important;
  color: #fff;
}

/* ===========================================================================
   7. SELECT2 & DROPDOWNS
   =========================================================================== */

.select2-container--default .select2-results__option--highlighted:not([aria-selected=true]) { background-color: #e8f0f8 !important; color: #004883 !important; }
.select2-results__option[role=option][aria-selected=true] { background-color: #004883 !important; color: #fff; }
.dropdown-item:hover, .dropdown-item:focus { color: #004883 !important; background-color: #f0f7ff !important; }
.dropdown-menu { --bs-dropdown-min-width: 11rem !important; background-color: #fff !important; }
.dropdown-item { color: #6f6b7d !important; }
.dropdown-item i { color: #6f6b7d !important; }

/* User dropdown inside navy menu bar - force white bg and readable text */
#menu-user-section .dropdown-menu { background-color: #fff !important; border: 1px solid #e5e7eb; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; border-radius: 8px; }
#menu-user-section .dropdown-item { color: #4a5568 !important; }
#menu-user-section .dropdown-item i { color: #6f6b7d !important; }
#menu-user-section .dropdown-item:hover { color: #004883 !important; background-color: #f0f7ff !important; }
#menu-user-section .dropdown-item:hover i { color: #004883 !important; }
#menu-user-section .dropdown-divider { border-color: #e5e7eb; }
.daterangepicker td.active:not(.off) { background: #004883 !important; color: #fff !important; }
.daterangepicker select.yearselect { width: 55% !important; }
.light-style .select2-selection--multiple .select2-selection__choice { margin-right: 0.205rem !important; }

/* ===========================================================================
   8. CARDS
   =========================================================================== */

.card { border: 1px solid #e5e7eb !important; border-radius: 8px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; }
.card-header { border-bottom: 1px solid #f1f5f9; padding: 1rem 1.25rem; }
.card-body { padding: 1.25rem; }
.card-shadow { box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1) !important; }
.shad-card { box-shadow: 0 0.25rem 0.125rem #6da987 !important; }
.shad-card-total-p { box-shadow: 0 0.25rem 0.125rem #004883 !important; }
.shad-card-up-p { box-shadow: 0 0.25rem 0.125rem #ea5455 !important; }
.shad-card-active-p { box-shadow: 0 0.25rem 0.125rem #28c76f !important; }
.shad-card-complete-p { box-shadow: 0 0.25rem 0.125rem #ff9f43 !important; }

/* ===========================================================================
   9. NAVIGATION PILLS / TABS
   =========================================================================== */

.nav-pills .nav-link.active, .nav-pills .nav-link.active:hover, .nav-pills .nav-link.active:focus {
  background-color: #004883 !important;
  color: #fff;
}
.nav-tabs .nav-link:not(.active):hover, .nav-tabs .nav-link:not(.active):focus,
.nav-pills .nav-link:not(.active):hover, .nav-pills .nav-link:not(.active):focus { color: #004883 !important; }
.nav.nav-pills .nav-link { padding-top: 5px !important; padding-bottom: 5px !important; }

/* ===========================================================================
   10. MODAL
   =========================================================================== */

.modal-header { padding: 8px 14px !important; background-color: #e8393c !important; border-radius: 0; }
.modal-header .btn-close { filter: brightness(0) invert(1) !important; opacity: 1 !important; }
.modal-header .modal-title { color: #fff !important; font-size: 1rem; }
.modal-title { color: white !important; }

/* ===========================================================================
   11. FOOTER
   =========================================================================== */

.footer-bg { background-color: #004883 !important; }
.content-footer { font-size: 0.8rem; }
.footer-container { justify-content: center !important; }

/* ===========================================================================
   12. TYPOGRAPHY & COLORS
   =========================================================================== */

.label-bold { font-weight: 700; color: black; }
.a-text { color: #004883 !important; }
.fs-link { color: #004883 !important; }
.fs-red { color: #d80d0d !important; }
.text-color { color: #6f6b7d !important; }
.font-bold { font-weight: 400 !important; color: black !important; }
.green { background-color: #004883 !important; color: #ffffff; }
.bg-shadow { background-color: #004883 !important; box-shadow: inset -1px -1px 0.25rem 0px rgba(165, 163, 174, 0.3) !important; }
.logo-login { font-size: 20px; font-weight: bold; color: #e8393c; }

/* Login page background */
.authentication-wrapper.authentication-basic {
  background: linear-gradient(135deg, #004883 0%, #1a6fb5 50%, #7bb8e0 100%) !important;
  min-height: 100vh;
}
.authentication-wrapper.authentication-basic .authentication-inner {
  max-width: 420px;
}
.authentication-wrapper.authentication-basic .card {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}
.text-line { border-bottom: 2px solid #004883; }
.label-underline { font-weight: 500; border-bottom: 2px solid #004883; padding-bottom: 2px; font-size: medium; }
.hr-with-text { display: flex; align-items: center; text-align: center; color: #004883; font-weight: bold; }
.hr-with-text::before, .hr-with-text::after { content: ''; flex: 1; border-bottom: 2px solid #004883; margin: 0 10px; }
.alert-info { background-color: #d0e7da !important; border-color: #d0e7da !important; color: #004883 !important; }

/* ===========================================================================
   13. UTILITY SIZES
   =========================================================================== */

.pl-30 { padding-left: 30px; }
.fs-30 { font-size: 16px !important; }
.fs-14 { font-size: 14px !important; }
.fs-12 { font-size: 12px !important; }
.fs-10 { font-size: 11px !important; }
.pt-s-2 { padding-top: 2.1px; }
.over-hidden { overflow-x: hidden; }
.shagreen { background-color: #F1F2F4; font-size: 14px; font-weight: 600; border-radius: 8px; }

/* ===========================================================================
   14. COMPONENT-SPECIFIC
   =========================================================================== */

/* Document preview */
.document-preview { margin-bottom: 10px; }
.image-preview img { max-width: 100px; max-height: 100px; }
.pdf-preview img, .text-preview img { width: 32px; height: 32px; vertical-align: middle; }
.document-preview a { text-decoration: none; color: #004883; }
.document-preview a:hover { text-decoration: underline; color: #004883 !important; }
.document-name-wrap { overflow-wrap: anywhere; }
.document-list { max-height: 222px !important; overflow-y: auto !important; padding-top: 10px; padding-bottom: 10px; }
.file-section { border: 1px solid #ddd; padding: 15px; margin-top: 20px; border-radius: 5px; }
.file-section h4 { margin-top: 0; }
.file-icon { margin-right: 10px; }

/* Board / ticket view */
.board-column { max-width: 300px; }
.container-custom { display: flex; min-height: 80%; height: 92%; overflow-x: auto !important; white-space: nowrap; width: 100% !important; }
.board-column-scroll { border-radius: 0 0 8px 8px; background-color: #e1e1e1; overflow-y: auto; max-height: calc(100vh - 160px); scrollbar-width: thin; scrollbar-color: #b0b0b0 #e1e1e1; }
.col-md-31 { margin-right: 10px; flex: 0 0 auto; width: 272px; display: inline-block; vertical-align: top; min-width: 270px !important; max-width: 274px !important; }
.tag { display: inline-block; padding: 0.25em 0.4em; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; }
.tag-design { background-color: #6f42c1; }
.tag-db-design { background-color: #28a745; }
.tag-sprint { background-color: #17a2b8; padding: 0 8px; overflow: hidden; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 16px; text-align: left; word-wrap: break-word; white-space: normal; }
.tag-no-sprint { background-color: #dc3545; padding: 0 8px; overflow: hidden; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 16px; }
.tag-Project { background-color: #17a2b8; }
.card-title { overflow: hidden; text-overflow: ellipsis; white-space: wrap; }

/* User profile */
.user-profile-header-banner img { width: 100%; object-fit: cover; height: 100px; }
.user-profile-header { margin-top: 0 !important; padding-left: 20px; }
.user-profile-header .user-profile-img { width: 120px; }
.ticket-header-info-margin { margin-left: -0.5rem; }
.avatarimg { width: 20px !important; height: 20px !important; }
.avatar.avatar-online:after, .avatar.avatar-offline:after, .avatar.avatar-away:after, .avatar.avatar-busy:after { right: 1px !important; width: 5px !important; height: 5px !important; }
.header-image-width { width: 2rem !important; height: 2rem !important; }

/* Quill editor */
.ql-snow .ql-editor { min-height: 12rem !important; }
.ql-editor p { margin-bottom: 2px !important; }
.light-style .ql-snow .ql-editor { padding: 1rem !important; }
.ql-tooltip { margin-left: 80px !important; }
.ql-container { overflow: visible !important; position: relative !important; }

/* Description / comments */
.description-container { overflow: hidden; position: relative; }
.description-content { display: block; word-break: break-word; }
.read-more { font-size: 12px; color: #7E7A8A; position: absolute; bottom: 0; right: 0; font-weight: normal; padding: 0 10px; }
.description-box { height: 15rem !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #ccc !important; }
.comments-display { max-height: 500px; overflow-y: auto; padding-right: 10px; word-wrap: break-word; }
.img-description img { width: auto !important; max-width: 100% !important; }
.img-description p { margin-bottom: 0 !important; }

/* Images */
.responsive-image { max-width: 100%; max-height: 200px; height: auto; display: block; margin: 0 auto; }
table td img { max-width: 400px; max-height: 200px; }

/* Validation */
.invalid-message-popups { width: 100%; margin-top: 0.25rem; font-size: 0.8125rem; color: #ea5455; }

/* Permission table */
.permission-table th, .permission-table td { text-align: center; }

/* Misc */
.text-style { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: bold; color: #004883; }
.td-colon { padding-left: 2px !important; padding-right: 4px !important; margin-left: 0 !important; margin-right: 0 !important; width: 10px !important; }
.total-tickets-lable { float: right; color: #a7a1a1; padding-right: 23px; }
.report-chip { cursor: pointer; font-size: 0.85rem; padding: 6px 10px; }
.report-chip.active { border: 2px solid #004883 !important; }
.chart-container { height: 350px !important; }
.menu-divider-major { margin: 1rem 0; }
.menu-divider-minor { margin: 0.5rem 0; }

/* ===========================================================================
   15. SCROLLBAR
   =========================================================================== */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.2); }

/* ===========================================================================
   16. TEMPLATE DEFAULTS (keep for blade compatibility)
   =========================================================================== */

.light-style .menu .app-brand.demo { height: 64px; }
.dark-style .menu .app-brand.demo { height: 64px; }
.app-brand-logo.demo { align-items: center; justify-content: center; display: flex; width: 34px; height: 24px; }
.app-brand-logo.demo svg { width: 35px; height: 24px; }
.app-brand-text.demo { font-size: 1.375rem; }

.rtl-only { display: none !important; text-align: left !important; direction: ltr !important; }
[dir='rtl'] .rtl-only { display: block !important; }

.demo-blocks > * { display: block !important; }
.demo-inline-spacing > * { margin: 1rem 0.375rem 0 0 !important; }
.demo-vertical-spacing > * { margin-top: 1rem !important; margin-bottom: 0 !important; }
.demo-vertical-spacing.demo-only-element > :first-child { margin-top: 0 !important; }
.demo-vertical-spacing-lg > * { margin-top: 1.875rem !important; margin-bottom: 0 !important; }
.demo-vertical-spacing-lg.demo-only-element > :first-child { margin-top: 0 !important; }
.demo-vertical-spacing-xl > * { margin-top: 5rem !important; margin-bottom: 0 !important; }
.demo-vertical-spacing-xl.demo-only-element > :first-child { margin-top: 0 !important; }

@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate { width: 254px; position: relative; }
  #dropdown-variation-demo .btn-group .text-truncate::after { position: absolute; top: 45%; right: 0.65rem; }
}

.layout-demo-wrapper { display: flex; align-items: center; flex-direction: column; margin-top: 1rem; }
.layout-demo-placeholder img { width: 900px; }
.layout-demo-info { text-align: center; margin-top: 1rem; }