/* Scoped Bootstrap‑style grid under .bootstrap‑wrap */
.bootstrap-wrap {
  box-sizing: border-box;
}
.bootstrap-wrap *,
.bootstrap-wrap *::before,
.bootstrap-wrap *::after {
  box-sizing: inherit;
}

/* Rows */
.bootstrap-wrap .row {
  margin-right: -15px;
  margin-left: -15px;
}
.bootstrap-wrap .row::before,
.bootstrap-wrap .row::after {
  content: " ";
  display: table;
}
.bootstrap-wrap .row::after {
  clear: both;
}

/* Columns and widths */
/* 12‑column grid, xs through lg responsive */
@media (min-width: 0) {
  .bootstrap-wrap [class*="col-xs-"] {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
  }
  .bootstrap-wrap .col-xs-1  { width: 8.3333%; }
  .bootstrap-wrap .col-xs-2  { width: 16.6667%; }
  .bootstrap-wrap .col-xs-3  { width: 25%; }
  .bootstrap-wrap .col-xs-4  { width: 33.3333%; }
  .bootstrap-wrap .col-xs-5  { width: 41.6667%; }
  .bootstrap-wrap .col-xs-6  { width: 50%; }
  .bootstrap-wrap .col-xs-7  { width: 58.3333%; }
  .bootstrap-wrap .col-xs-8  { width: 66.6667%; }
  .bootstrap-wrap .col-xs-9  { width: 75%; }
  .bootstrap-wrap .col-xs-10 { width: 83.3333%; }
  .bootstrap-wrap .col-xs-11 { width: 91.6667%; }
  .bootstrap-wrap .col-xs-12 { width: 100%; }
}

/* sm: ≥768px */
@media (min-width: 768px) {
  .bootstrap-wrap [class*="col-sm-"] {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
  }
  .bootstrap-wrap .col-sm-1  { width: 8.3333%; }
  .bootstrap-wrap .col-sm-2  { width: 16.6667%; }
  .bootstrap-wrap .col-sm-3  { width: 25%; }
  .bootstrap-wrap .col-sm-4  { width: 33.3333%; }
  .bootstrap-wrap .col-sm-5  { width: 41.6667%; }
  .bootstrap-wrap .col-sm-6  { width: 50%; }
  .bootstrap-wrap .col-sm-7  { width: 58.3333%; }
  .bootstrap-wrap .col-sm-8  { width: 66.6667%; }
  .bootstrap-wrap .col-sm-9  { width: 75%; }
  .bootstrap-wrap .col-sm-10 { width: 83.3333%; }
  .bootstrap-wrap .col-sm-11 { width: 91.6667%; }
  .bootstrap-wrap .col-sm-12 { width: 100%; }
}

/* md: ≥992px */
@media (min-width: 992px) {
  .bootstrap-wrap [class*="col-md-"] {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
  }
  .bootstrap-wrap .col-md-1  { width: 8.3333%; }
  .bootstrap-wrap .col-md-2  { width: 16.6667%; }
  .bootstrap-wrap .col-md-3  { width: 25%; }
  .bootstrap-wrap .col-md-4  { width: 33.3333%; }
  .bootstrap-wrap .col-md-5  { width: 41.6667%; }
  .bootstrap-wrap .col-md-6  { width: 50%; }
  .bootstrap-wrap .col-md-7  { width: 58.3333%; }
  .bootstrap-wrap .col-md-8  { width: 66.6667%; }
  .bootstrap-wrap .col-md-9  { width: 75%; }
  .bootstrap-wrap .col-md-10 { width: 83.3333%; }
  .bootstrap-wrap .col-md-11 { width: 91.6667%; }
  .bootstrap-wrap .col-md-12 { width: 100%; }
}

/* lg: ≥1200px */
@media (min-width: 1200px) {
  .bootstrap-wrap [class*="col-lg-"] {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
  }
  .bootstrap-wrap .col-lg-1  { width: 8.3333%; }
  .bootstrap-wrap .col-lg-2  { width: 16.6667%; }
  .bootstrap-wrap .col-lg-3  { width: 25%; }
  .bootstrap-wrap .col-lg-4  { width: 33.3333%; }
  .bootstrap-wrap .col-lg-5  { width: 41.6667%; }
  .bootstrap-wrap .col-lg-6  { width: 50%; }
  .bootstrap-wrap .col-lg-7  { width: 58.3333%; }
  .bootstrap-wrap .col-lg-8  { width: 66.6667%; }
  .bootstrap-wrap .col-lg-9  { width: 75%; }
  .bootstrap-wrap .col-lg-10 { width: 83.3333%; }
  .bootstrap-wrap .col-lg-11 { width: 91.6667%; }
  .bootstrap-wrap .col-lg-12 { width: 100%; }
}

/* Tabs Navigation */
.bootstrap-wrap .nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  border-bottom: 1px solid #ddd;
}
.bootstrap-wrap .nav-tabs {
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.bootstrap-wrap .nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.bootstrap-wrap .nav-tabs > li > a,
.bootstrap-wrap .nav-tabs .nav-link {
  display: block;
  padding: 10px 15px;
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
  background-color: #f9f9f9;
  color: #333;
  text-decoration: none;
}
.bootstrap-wrap .nav-tabs > li > a:hover,
.bootstrap-wrap .nav-tabs .nav-link:hover {
  background-color: #eee;
  border-color: #ddd #ddd transparent;
}
.bootstrap-wrap .nav-tabs > li.active > a,
.bootstrap-wrap .nav-tabs .nav-link.active {
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  color: #000;
}

/* Tab Content */
.bootstrap-wrap .tab-content {
  border: 1px solid #ddd;
  border-top: none;
  padding: 15px;
  background-color: #fff;
  border-radius: 0 0 4px 4px;
}
.bootstrap-wrap .tab-pane {
  display: none;
}
.bootstrap-wrap .tab-pane.active {
  display: block;
}


/* Panels, tabs, collapse, divider, code, glyphicons etc. */
/* (Use the earlier provided scoped CSS for these...) */