/* Minimal Bootstrap primitives the Framing Studio DOM relies on. Scoped under
   .framing-studio-page so nothing leaks to the rest of the (Tailwind/layui) site.
   frame_plus.css supplies the studio-specific look; this only fills the layout
   primitives (block nav links, buttons, grid) bootstrap.css would otherwise give. */
/* Fit the fixed preview panel between the site header and the viewport bottom.
   The original studio is a standalone full-height page, so frame_plus.css uses
   height:95% with no top; embedded under our marketing header (~150px) that
   overflowed the viewport and pushed the bottom-anchored .action-box
   (Favorite/Add to List/Preview/Download) off-screen. Pinning top+bottom (auto
   height) keeps those buttons visible at any viewport height. */
.framing-studio-page .main-frame { top: 150px; bottom: 14px; height: auto; }

.framing-studio-page .nav { list-style: none; padding-left: 0; margin-bottom: 0; }
.framing-studio-page .nav > li { position: relative; display: block; }
.framing-studio-page .nav > li > a { position: relative; display: block; text-decoration: none; }
.framing-studio-page .nav-tabs > li { float: left; }
.framing-studio-page .nav-tabs::after { content: ""; display: table; clear: both; }

.framing-studio-page .row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.framing-studio-page .col-sm-6 { width: 50%; padding: 0 8px; box-sizing: border-box; }
.framing-studio-page .col-sm-12 { width: 100%; padding: 0 8px; box-sizing: border-box; }

.framing-studio-page .btn {
  display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px;
  line-height: 1.4; text-align: center; white-space: nowrap; vertical-align: middle;
  cursor: pointer; border: 1px solid transparent; border-radius: 4px; background: #fff;
}
.framing-studio-page .btn-block { display: block; width: 100%; }
.framing-studio-page .btn-default { color: #333; background: #fff; border-color: #ccc; }
.framing-studio-page .btn-warning { color: #fff; background: #f0ad4e; border-color: #eea236; }

/* The selected state, re-asserted at this scope.
 *
 * frame_plus.css declares `.btn-active` — one class, specificity (0,1,0) — but
 * the `.btn-default` rule above is (0,2,0) because of the page-scope prefix
 * this file adds. So every button that carried `btn-active` still rendered
 * white on grey: cm, rect and shadow all looked unselected while their class
 * was correctly applied. The shim broke the original's active state by being
 * more specific than it, so the fix belongs here rather than in the mirrored
 * stylesheet, which is not ours to diverge. */
.framing-studio-page .btn-default.btn-active,
.framing-studio-page .btn-active {
  background: linear-gradient(to bottom, #353535, #646464);
  border-color: #353535;
  color: #fff;
}
.framing-studio-page .btn-default.btn-active:hover,
.framing-studio-page .btn-active:hover { color: #fff; }

.framing-studio-page .form-control {
  display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px;
  line-height: 1.4; color: #555; background: #fff; border: 1px solid #ccc; border-radius: 4px;
  box-sizing: border-box;
}
.framing-studio-page .input-group { display: flex; align-items: stretch; }
.framing-studio-page .input-group .form-control { flex: 1; }

.framing-studio-page .hidden { display: none !important; }
.framing-studio-page .glyphicon { display: none; }