/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('/assets/fontawesome-webfont-G5YE5S7X.eot?v=4.7.0');
  src: url('/assets/fontawesome-webfont-G5YE5S7X.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/assets/fontawesome-webfont-B-jkhYfk.woff2?v=4.7.0') format('woff2'), url('/assets/fontawesome-webfont-CDK5bt4p.woff?v=4.7.0') format('woff'), url('/assets/fontawesome-webfont-CQDK8MU3.ttf?v=4.7.0') format('truetype'), url('/assets/fontawesome-webfont-D13rzr4g.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}
.fa-fw {
  width: 1.28571429em;
  text-align: center;
}
.fa-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}
.fa-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.85714286em;
}
.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eeeeee;
  border-radius: .1em;
}
.fa-pull-left {
  float: left;
}
.fa-pull-right {
  float: right;
}
.fa.fa-pull-left {
  margin-right: .3em;
}
.fa.fa-pull-right {
  margin-left: .3em;
}
/* Deprecated as of 4.4.0 */
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.fa.pull-left {
  margin-right: .3em;
}
.fa.pull-right {
  margin-left: .3em;
}
.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}
.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-inverse {
  color: #ffffff;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}
.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
.fa-envelope-o:before {
  content: "\f003";
}
.fa-heart:before {
  content: "\f004";
}
.fa-star:before {
  content: "\f005";
}
.fa-star-o:before {
  content: "\f006";
}
.fa-user:before {
  content: "\f007";
}
.fa-film:before {
  content: "\f008";
}
.fa-th-large:before {
  content: "\f009";
}
.fa-th:before {
  content: "\f00a";
}
.fa-th-list:before {
  content: "\f00b";
}
.fa-check:before {
  content: "\f00c";
}
.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}
.fa-search-plus:before {
  content: "\f00e";
}
.fa-search-minus:before {
  content: "\f010";
}
.fa-power-off:before {
  content: "\f011";
}
.fa-signal:before {
  content: "\f012";
}
.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}
.fa-trash-o:before {
  content: "\f014";
}
.fa-home:before {
  content: "\f015";
}
.fa-file-o:before {
  content: "\f016";
}
.fa-clock-o:before {
  content: "\f017";
}
.fa-road:before {
  content: "\f018";
}
.fa-download:before {
  content: "\f019";
}
.fa-arrow-circle-o-down:before {
  content: "\f01a";
}
.fa-arrow-circle-o-up:before {
  content: "\f01b";
}
.fa-inbox:before {
  content: "\f01c";
}
.fa-play-circle-o:before {
  content: "\f01d";
}
.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}
.fa-refresh:before {
  content: "\f021";
}
.fa-list-alt:before {
  content: "\f022";
}
.fa-lock:before {
  content: "\f023";
}
.fa-flag:before {
  content: "\f024";
}
.fa-headphones:before {
  content: "\f025";
}
.fa-volume-off:before {
  content: "\f026";
}
.fa-volume-down:before {
  content: "\f027";
}
.fa-volume-up:before {
  content: "\f028";
}
.fa-qrcode:before {
  content: "\f029";
}
.fa-barcode:before {
  content: "\f02a";
}
.fa-tag:before {
  content: "\f02b";
}
.fa-tags:before {
  content: "\f02c";
}
.fa-book:before {
  content: "\f02d";
}
.fa-bookmark:before {
  content: "\f02e";
}
.fa-print:before {
  content: "\f02f";
}
.fa-camera:before {
  content: "\f030";
}
.fa-font:before {
  content: "\f031";
}
.fa-bold:before {
  content: "\f032";
}
.fa-italic:before {
  content: "\f033";
}
.fa-text-height:before {
  content: "\f034";
}
.fa-text-width:before {
  content: "\f035";
}
.fa-align-left:before {
  content: "\f036";
}
.fa-align-center:before {
  content: "\f037";
}
.fa-align-right:before {
  content: "\f038";
}
.fa-align-justify:before {
  content: "\f039";
}
.fa-list:before {
  content: "\f03a";
}
.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}
.fa-indent:before {
  content: "\f03c";
}
.fa-video-camera:before {
  content: "\f03d";
}
.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}
.fa-pencil:before {
  content: "\f040";
}
.fa-map-marker:before {
  content: "\f041";
}
.fa-adjust:before {
  content: "\f042";
}
.fa-tint:before {
  content: "\f043";
}
.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}
.fa-share-square-o:before {
  content: "\f045";
}
.fa-check-square-o:before {
  content: "\f046";
}
.fa-arrows:before {
  content: "\f047";
}
.fa-step-backward:before {
  content: "\f048";
}
.fa-fast-backward:before {
  content: "\f049";
}
.fa-backward:before {
  content: "\f04a";
}
.fa-play:before {
  content: "\f04b";
}
.fa-pause:before {
  content: "\f04c";
}
.fa-stop:before {
  content: "\f04d";
}
.fa-forward:before {
  content: "\f04e";
}
.fa-fast-forward:before {
  content: "\f050";
}
.fa-step-forward:before {
  content: "\f051";
}
.fa-eject:before {
  content: "\f052";
}
.fa-chevron-left:before {
  content: "\f053";
}
.fa-chevron-right:before {
  content: "\f054";
}
.fa-plus-circle:before {
  content: "\f055";
}
.fa-minus-circle:before {
  content: "\f056";
}
.fa-times-circle:before {
  content: "\f057";
}
.fa-check-circle:before {
  content: "\f058";
}
.fa-question-circle:before {
  content: "\f059";
}
.fa-info-circle:before {
  content: "\f05a";
}
.fa-crosshairs:before {
  content: "\f05b";
}
.fa-times-circle-o:before {
  content: "\f05c";
}
.fa-check-circle-o:before {
  content: "\f05d";
}
.fa-ban:before {
  content: "\f05e";
}
.fa-arrow-left:before {
  content: "\f060";
}
.fa-arrow-right:before {
  content: "\f061";
}
.fa-arrow-up:before {
  content: "\f062";
}
.fa-arrow-down:before {
  content: "\f063";
}
.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}
.fa-expand:before {
  content: "\f065";
}
.fa-compress:before {
  content: "\f066";
}
.fa-plus:before {
  content: "\f067";
}
.fa-minus:before {
  content: "\f068";
}
.fa-asterisk:before {
  content: "\f069";
}
.fa-exclamation-circle:before {
  content: "\f06a";
}
.fa-gift:before {
  content: "\f06b";
}
.fa-leaf:before {
  content: "\f06c";
}
.fa-fire:before {
  content: "\f06d";
}
.fa-eye:before {
  content: "\f06e";
}
.fa-eye-slash:before {
  content: "\f070";
}
.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}
.fa-plane:before {
  content: "\f072";
}
.fa-calendar:before {
  content: "\f073";
}
.fa-random:before {
  content: "\f074";
}
.fa-comment:before {
  content: "\f075";
}
.fa-magnet:before {
  content: "\f076";
}
.fa-chevron-up:before {
  content: "\f077";
}
.fa-chevron-down:before {
  content: "\f078";
}
.fa-retweet:before {
  content: "\f079";
}
.fa-shopping-cart:before {
  content: "\f07a";
}
.fa-folder:before {
  content: "\f07b";
}
.fa-folder-open:before {
  content: "\f07c";
}
.fa-arrows-v:before {
  content: "\f07d";
}
.fa-arrows-h:before {
  content: "\f07e";
}
.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}
.fa-twitter-square:before {
  content: "\f081";
}
.fa-facebook-square:before {
  content: "\f082";
}
.fa-camera-retro:before {
  content: "\f083";
}
.fa-key:before {
  content: "\f084";
}
.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}
.fa-comments:before {
  content: "\f086";
}
.fa-thumbs-o-up:before {
  content: "\f087";
}
.fa-thumbs-o-down:before {
  content: "\f088";
}
.fa-star-half:before {
  content: "\f089";
}
.fa-heart-o:before {
  content: "\f08a";
}
.fa-sign-out:before {
  content: "\f08b";
}
.fa-linkedin-square:before {
  content: "\f08c";
}
.fa-thumb-tack:before {
  content: "\f08d";
}
.fa-external-link:before {
  content: "\f08e";
}
.fa-sign-in:before {
  content: "\f090";
}
.fa-trophy:before {
  content: "\f091";
}
.fa-github-square:before {
  content: "\f092";
}
.fa-upload:before {
  content: "\f093";
}
.fa-lemon-o:before {
  content: "\f094";
}
.fa-phone:before {
  content: "\f095";
}
.fa-square-o:before {
  content: "\f096";
}
.fa-bookmark-o:before {
  content: "\f097";
}
.fa-phone-square:before {
  content: "\f098";
}
.fa-twitter:before {
  content: "\f099";
}
.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}
.fa-github:before {
  content: "\f09b";
}
.fa-unlock:before {
  content: "\f09c";
}
.fa-credit-card:before {
  content: "\f09d";
}
.fa-feed:before,
.fa-rss:before {
  content: "\f09e";
}
.fa-hdd-o:before {
  content: "\f0a0";
}
.fa-bullhorn:before {
  content: "\f0a1";
}
.fa-bell:before {
  content: "\f0f3";
}
.fa-certificate:before {
  content: "\f0a3";
}
.fa-hand-o-right:before {
  content: "\f0a4";
}
.fa-hand-o-left:before {
  content: "\f0a5";
}
.fa-hand-o-up:before {
  content: "\f0a6";
}
.fa-hand-o-down:before {
  content: "\f0a7";
}
.fa-arrow-circle-left:before {
  content: "\f0a8";
}
.fa-arrow-circle-right:before {
  content: "\f0a9";
}
.fa-arrow-circle-up:before {
  content: "\f0aa";
}
.fa-arrow-circle-down:before {
  content: "\f0ab";
}
.fa-globe:before {
  content: "\f0ac";
}
.fa-wrench:before {
  content: "\f0ad";
}
.fa-tasks:before {
  content: "\f0ae";
}
.fa-filter:before {
  content: "\f0b0";
}
.fa-briefcase:before {
  content: "\f0b1";
}
.fa-arrows-alt:before {
  content: "\f0b2";
}
.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}
.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}
.fa-cloud:before {
  content: "\f0c2";
}
.fa-flask:before {
  content: "\f0c3";
}
.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}
.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}
.fa-paperclip:before {
  content: "\f0c6";
}
.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}
.fa-square:before {
  content: "\f0c8";
}
.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}
.fa-list-ul:before {
  content: "\f0ca";
}
.fa-list-ol:before {
  content: "\f0cb";
}
.fa-strikethrough:before {
  content: "\f0cc";
}
.fa-underline:before {
  content: "\f0cd";
}
.fa-table:before {
  content: "\f0ce";
}
.fa-magic:before {
  content: "\f0d0";
}
.fa-truck:before {
  content: "\f0d1";
}
.fa-pinterest:before {
  content: "\f0d2";
}
.fa-pinterest-square:before {
  content: "\f0d3";
}
.fa-google-plus-square:before {
  content: "\f0d4";
}
.fa-google-plus:before {
  content: "\f0d5";
}
.fa-money:before {
  content: "\f0d6";
}
.fa-caret-down:before {
  content: "\f0d7";
}
.fa-caret-up:before {
  content: "\f0d8";
}
.fa-caret-left:before {
  content: "\f0d9";
}
.fa-caret-right:before {
  content: "\f0da";
}
.fa-columns:before {
  content: "\f0db";
}
.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}
.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}
.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}
.fa-envelope:before {
  content: "\f0e0";
}
.fa-linkedin:before {
  content: "\f0e1";
}
.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}
.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}
.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}
.fa-comment-o:before {
  content: "\f0e5";
}
.fa-comments-o:before {
  content: "\f0e6";
}
.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}
.fa-sitemap:before {
  content: "\f0e8";
}
.fa-umbrella:before {
  content: "\f0e9";
}
.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}
.fa-lightbulb-o:before {
  content: "\f0eb";
}
.fa-exchange:before {
  content: "\f0ec";
}
.fa-cloud-download:before {
  content: "\f0ed";
}
.fa-cloud-upload:before {
  content: "\f0ee";
}
.fa-user-md:before {
  content: "\f0f0";
}
.fa-stethoscope:before {
  content: "\f0f1";
}
.fa-suitcase:before {
  content: "\f0f2";
}
.fa-bell-o:before {
  content: "\f0a2";
}
.fa-coffee:before {
  content: "\f0f4";
}
.fa-cutlery:before {
  content: "\f0f5";
}
.fa-file-text-o:before {
  content: "\f0f6";
}
.fa-building-o:before {
  content: "\f0f7";
}
.fa-hospital-o:before {
  content: "\f0f8";
}
.fa-ambulance:before {
  content: "\f0f9";
}
.fa-medkit:before {
  content: "\f0fa";
}
.fa-fighter-jet:before {
  content: "\f0fb";
}
.fa-beer:before {
  content: "\f0fc";
}
.fa-h-square:before {
  content: "\f0fd";
}
.fa-plus-square:before {
  content: "\f0fe";
}
.fa-angle-double-left:before {
  content: "\f100";
}
.fa-angle-double-right:before {
  content: "\f101";
}
.fa-angle-double-up:before {
  content: "\f102";
}
.fa-angle-double-down:before {
  content: "\f103";
}
.fa-angle-left:before {
  content: "\f104";
}
.fa-angle-right:before {
  content: "\f105";
}
.fa-angle-up:before {
  content: "\f106";
}
.fa-angle-down:before {
  content: "\f107";
}
.fa-desktop:before {
  content: "\f108";
}
.fa-laptop:before {
  content: "\f109";
}
.fa-tablet:before {
  content: "\f10a";
}
.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}
.fa-circle-o:before {
  content: "\f10c";
}
.fa-quote-left:before {
  content: "\f10d";
}
.fa-quote-right:before {
  content: "\f10e";
}
.fa-spinner:before {
  content: "\f110";
}
.fa-circle:before {
  content: "\f111";
}
.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}
.fa-github-alt:before {
  content: "\f113";
}
.fa-folder-o:before {
  content: "\f114";
}
.fa-folder-open-o:before {
  content: "\f115";
}
.fa-smile-o:before {
  content: "\f118";
}
.fa-frown-o:before {
  content: "\f119";
}
.fa-meh-o:before {
  content: "\f11a";
}
.fa-gamepad:before {
  content: "\f11b";
}
.fa-keyboard-o:before {
  content: "\f11c";
}
.fa-flag-o:before {
  content: "\f11d";
}
.fa-flag-checkered:before {
  content: "\f11e";
}
.fa-terminal:before {
  content: "\f120";
}
.fa-code:before {
  content: "\f121";
}
.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}
.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}
.fa-location-arrow:before {
  content: "\f124";
}
.fa-crop:before {
  content: "\f125";
}
.fa-code-fork:before {
  content: "\f126";
}
.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}
.fa-question:before {
  content: "\f128";
}
.fa-info:before {
  content: "\f129";
}
.fa-exclamation:before {
  content: "\f12a";
}
.fa-superscript:before {
  content: "\f12b";
}
.fa-subscript:before {
  content: "\f12c";
}
.fa-eraser:before {
  content: "\f12d";
}
.fa-puzzle-piece:before {
  content: "\f12e";
}
.fa-microphone:before {
  content: "\f130";
}
.fa-microphone-slash:before {
  content: "\f131";
}
.fa-shield:before {
  content: "\f132";
}
.fa-calendar-o:before {
  content: "\f133";
}
.fa-fire-extinguisher:before {
  content: "\f134";
}
.fa-rocket:before {
  content: "\f135";
}
.fa-maxcdn:before {
  content: "\f136";
}
.fa-chevron-circle-left:before {
  content: "\f137";
}
.fa-chevron-circle-right:before {
  content: "\f138";
}
.fa-chevron-circle-up:before {
  content: "\f139";
}
.fa-chevron-circle-down:before {
  content: "\f13a";
}
.fa-html5:before {
  content: "\f13b";
}
.fa-css3:before {
  content: "\f13c";
}
.fa-anchor:before {
  content: "\f13d";
}
.fa-unlock-alt:before {
  content: "\f13e";
}
.fa-bullseye:before {
  content: "\f140";
}
.fa-ellipsis-h:before {
  content: "\f141";
}
.fa-ellipsis-v:before {
  content: "\f142";
}
.fa-rss-square:before {
  content: "\f143";
}
.fa-play-circle:before {
  content: "\f144";
}
.fa-ticket:before {
  content: "\f145";
}
.fa-minus-square:before {
  content: "\f146";
}
.fa-minus-square-o:before {
  content: "\f147";
}
.fa-level-up:before {
  content: "\f148";
}
.fa-level-down:before {
  content: "\f149";
}
.fa-check-square:before {
  content: "\f14a";
}
.fa-pencil-square:before {
  content: "\f14b";
}
.fa-external-link-square:before {
  content: "\f14c";
}
.fa-share-square:before {
  content: "\f14d";
}
.fa-compass:before {
  content: "\f14e";
}
.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}
.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}
.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}
.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}
.fa-gbp:before {
  content: "\f154";
}
.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}
.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}
.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}
.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}
.fa-won:before,
.fa-krw:before {
  content: "\f159";
}
.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}
.fa-file:before {
  content: "\f15b";
}
.fa-file-text:before {
  content: "\f15c";
}
.fa-sort-alpha-asc:before {
  content: "\f15d";
}
.fa-sort-alpha-desc:before {
  content: "\f15e";
}
.fa-sort-amount-asc:before {
  content: "\f160";
}
.fa-sort-amount-desc:before {
  content: "\f161";
}
.fa-sort-numeric-asc:before {
  content: "\f162";
}
.fa-sort-numeric-desc:before {
  content: "\f163";
}
.fa-thumbs-up:before {
  content: "\f164";
}
.fa-thumbs-down:before {
  content: "\f165";
}
.fa-youtube-square:before {
  content: "\f166";
}
.fa-youtube:before {
  content: "\f167";
}
.fa-xing:before {
  content: "\f168";
}
.fa-xing-square:before {
  content: "\f169";
}
.fa-youtube-play:before {
  content: "\f16a";
}
.fa-dropbox:before {
  content: "\f16b";
}
.fa-stack-overflow:before {
  content: "\f16c";
}
.fa-instagram:before {
  content: "\f16d";
}
.fa-flickr:before {
  content: "\f16e";
}
.fa-adn:before {
  content: "\f170";
}
.fa-bitbucket:before {
  content: "\f171";
}
.fa-bitbucket-square:before {
  content: "\f172";
}
.fa-tumblr:before {
  content: "\f173";
}
.fa-tumblr-square:before {
  content: "\f174";
}
.fa-long-arrow-down:before {
  content: "\f175";
}
.fa-long-arrow-up:before {
  content: "\f176";
}
.fa-long-arrow-left:before {
  content: "\f177";
}
.fa-long-arrow-right:before {
  content: "\f178";
}
.fa-apple:before {
  content: "\f179";
}
.fa-windows:before {
  content: "\f17a";
}
.fa-android:before {
  content: "\f17b";
}
.fa-linux:before {
  content: "\f17c";
}
.fa-dribbble:before {
  content: "\f17d";
}
.fa-skype:before {
  content: "\f17e";
}
.fa-foursquare:before {
  content: "\f180";
}
.fa-trello:before {
  content: "\f181";
}
.fa-female:before {
  content: "\f182";
}
.fa-male:before {
  content: "\f183";
}
.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}
.fa-sun-o:before {
  content: "\f185";
}
.fa-moon-o:before {
  content: "\f186";
}
.fa-archive:before {
  content: "\f187";
}
.fa-bug:before {
  content: "\f188";
}
.fa-vk:before {
  content: "\f189";
}
.fa-weibo:before {
  content: "\f18a";
}
.fa-renren:before {
  content: "\f18b";
}
.fa-pagelines:before {
  content: "\f18c";
}
.fa-stack-exchange:before {
  content: "\f18d";
}
.fa-arrow-circle-o-right:before {
  content: "\f18e";
}
.fa-arrow-circle-o-left:before {
  content: "\f190";
}
.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}
.fa-dot-circle-o:before {
  content: "\f192";
}
.fa-wheelchair:before {
  content: "\f193";
}
.fa-vimeo-square:before {
  content: "\f194";
}
.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}
.fa-plus-square-o:before {
  content: "\f196";
}
.fa-space-shuttle:before {
  content: "\f197";
}
.fa-slack:before {
  content: "\f198";
}
.fa-envelope-square:before {
  content: "\f199";
}
.fa-wordpress:before {
  content: "\f19a";
}
.fa-openid:before {
  content: "\f19b";
}
.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}
.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}
.fa-yahoo:before {
  content: "\f19e";
}
.fa-google:before {
  content: "\f1a0";
}
.fa-reddit:before {
  content: "\f1a1";
}
.fa-reddit-square:before {
  content: "\f1a2";
}
.fa-stumbleupon-circle:before {
  content: "\f1a3";
}
.fa-stumbleupon:before {
  content: "\f1a4";
}
.fa-delicious:before {
  content: "\f1a5";
}
.fa-digg:before {
  content: "\f1a6";
}
.fa-pied-piper-pp:before {
  content: "\f1a7";
}
.fa-pied-piper-alt:before {
  content: "\f1a8";
}
.fa-drupal:before {
  content: "\f1a9";
}
.fa-joomla:before {
  content: "\f1aa";
}
.fa-language:before {
  content: "\f1ab";
}
.fa-fax:before {
  content: "\f1ac";
}
.fa-building:before {
  content: "\f1ad";
}
.fa-child:before {
  content: "\f1ae";
}
.fa-paw:before {
  content: "\f1b0";
}
.fa-spoon:before {
  content: "\f1b1";
}
.fa-cube:before {
  content: "\f1b2";
}
.fa-cubes:before {
  content: "\f1b3";
}
.fa-behance:before {
  content: "\f1b4";
}
.fa-behance-square:before {
  content: "\f1b5";
}
.fa-steam:before {
  content: "\f1b6";
}
.fa-steam-square:before {
  content: "\f1b7";
}
.fa-recycle:before {
  content: "\f1b8";
}
.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}
.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}
.fa-tree:before {
  content: "\f1bb";
}
.fa-spotify:before {
  content: "\f1bc";
}
.fa-deviantart:before {
  content: "\f1bd";
}
.fa-soundcloud:before {
  content: "\f1be";
}
.fa-database:before {
  content: "\f1c0";
}
.fa-file-pdf-o:before {
  content: "\f1c1";
}
.fa-file-word-o:before {
  content: "\f1c2";
}
.fa-file-excel-o:before {
  content: "\f1c3";
}
.fa-file-powerpoint-o:before {
  content: "\f1c4";
}
.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}
.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}
.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}
.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}
.fa-file-code-o:before {
  content: "\f1c9";
}
.fa-vine:before {
  content: "\f1ca";
}
.fa-codepen:before {
  content: "\f1cb";
}
.fa-jsfiddle:before {
  content: "\f1cc";
}
.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}
.fa-circle-o-notch:before {
  content: "\f1ce";
}
.fa-ra:before,
.fa-resistance:before,
.fa-rebel:before {
  content: "\f1d0";
}
.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}
.fa-git-square:before {
  content: "\f1d2";
}
.fa-git:before {
  content: "\f1d3";
}
.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: "\f1d4";
}
.fa-tencent-weibo:before {
  content: "\f1d5";
}
.fa-qq:before {
  content: "\f1d6";
}
.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}
.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}
.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}
.fa-history:before {
  content: "\f1da";
}
.fa-circle-thin:before {
  content: "\f1db";
}
.fa-header:before {
  content: "\f1dc";
}
.fa-paragraph:before {
  content: "\f1dd";
}
.fa-sliders:before {
  content: "\f1de";
}
.fa-share-alt:before {
  content: "\f1e0";
}
.fa-share-alt-square:before {
  content: "\f1e1";
}
.fa-bomb:before {
  content: "\f1e2";
}
.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}
.fa-tty:before {
  content: "\f1e4";
}
.fa-binoculars:before {
  content: "\f1e5";
}
.fa-plug:before {
  content: "\f1e6";
}
.fa-slideshare:before {
  content: "\f1e7";
}
.fa-twitch:before {
  content: "\f1e8";
}
.fa-yelp:before {
  content: "\f1e9";
}
.fa-newspaper-o:before {
  content: "\f1ea";
}
.fa-wifi:before {
  content: "\f1eb";
}
.fa-calculator:before {
  content: "\f1ec";
}
.fa-paypal:before {
  content: "\f1ed";
}
.fa-google-wallet:before {
  content: "\f1ee";
}
.fa-cc-visa:before {
  content: "\f1f0";
}
.fa-cc-mastercard:before {
  content: "\f1f1";
}
.fa-cc-discover:before {
  content: "\f1f2";
}
.fa-cc-amex:before {
  content: "\f1f3";
}
.fa-cc-paypal:before {
  content: "\f1f4";
}
.fa-cc-stripe:before {
  content: "\f1f5";
}
.fa-bell-slash:before {
  content: "\f1f6";
}
.fa-bell-slash-o:before {
  content: "\f1f7";
}
.fa-trash:before {
  content: "\f1f8";
}
.fa-copyright:before {
  content: "\f1f9";
}
.fa-at:before {
  content: "\f1fa";
}
.fa-eyedropper:before {
  content: "\f1fb";
}
.fa-paint-brush:before {
  content: "\f1fc";
}
.fa-birthday-cake:before {
  content: "\f1fd";
}
.fa-area-chart:before {
  content: "\f1fe";
}
.fa-pie-chart:before {
  content: "\f200";
}
.fa-line-chart:before {
  content: "\f201";
}
.fa-lastfm:before {
  content: "\f202";
}
.fa-lastfm-square:before {
  content: "\f203";
}
.fa-toggle-off:before {
  content: "\f204";
}
.fa-toggle-on:before {
  content: "\f205";
}
.fa-bicycle:before {
  content: "\f206";
}
.fa-bus:before {
  content: "\f207";
}
.fa-ioxhost:before {
  content: "\f208";
}
.fa-angellist:before {
  content: "\f209";
}
.fa-cc:before {
  content: "\f20a";
}
.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}
.fa-meanpath:before {
  content: "\f20c";
}
.fa-buysellads:before {
  content: "\f20d";
}
.fa-connectdevelop:before {
  content: "\f20e";
}
.fa-dashcube:before {
  content: "\f210";
}
.fa-forumbee:before {
  content: "\f211";
}
.fa-leanpub:before {
  content: "\f212";
}
.fa-sellsy:before {
  content: "\f213";
}
.fa-shirtsinbulk:before {
  content: "\f214";
}
.fa-simplybuilt:before {
  content: "\f215";
}
.fa-skyatlas:before {
  content: "\f216";
}
.fa-cart-plus:before {
  content: "\f217";
}
.fa-cart-arrow-down:before {
  content: "\f218";
}
.fa-diamond:before {
  content: "\f219";
}
.fa-ship:before {
  content: "\f21a";
}
.fa-user-secret:before {
  content: "\f21b";
}
.fa-motorcycle:before {
  content: "\f21c";
}
.fa-street-view:before {
  content: "\f21d";
}
.fa-heartbeat:before {
  content: "\f21e";
}
.fa-venus:before {
  content: "\f221";
}
.fa-mars:before {
  content: "\f222";
}
.fa-mercury:before {
  content: "\f223";
}
.fa-intersex:before,
.fa-transgender:before {
  content: "\f224";
}
.fa-transgender-alt:before {
  content: "\f225";
}
.fa-venus-double:before {
  content: "\f226";
}
.fa-mars-double:before {
  content: "\f227";
}
.fa-venus-mars:before {
  content: "\f228";
}
.fa-mars-stroke:before {
  content: "\f229";
}
.fa-mars-stroke-v:before {
  content: "\f22a";
}
.fa-mars-stroke-h:before {
  content: "\f22b";
}
.fa-neuter:before {
  content: "\f22c";
}
.fa-genderless:before {
  content: "\f22d";
}
.fa-facebook-official:before {
  content: "\f230";
}
.fa-pinterest-p:before {
  content: "\f231";
}
.fa-whatsapp:before {
  content: "\f232";
}
.fa-server:before {
  content: "\f233";
}
.fa-user-plus:before {
  content: "\f234";
}
.fa-user-times:before {
  content: "\f235";
}
.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}
.fa-viacoin:before {
  content: "\f237";
}
.fa-train:before {
  content: "\f238";
}
.fa-subway:before {
  content: "\f239";
}
.fa-medium:before {
  content: "\f23a";
}
.fa-yc:before,
.fa-y-combinator:before {
  content: "\f23b";
}
.fa-optin-monster:before {
  content: "\f23c";
}
.fa-opencart:before {
  content: "\f23d";
}
.fa-expeditedssl:before {
  content: "\f23e";
}
.fa-battery-4:before,
.fa-battery:before,
.fa-battery-full:before {
  content: "\f240";
}
.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: "\f241";
}
.fa-battery-2:before,
.fa-battery-half:before {
  content: "\f242";
}
.fa-battery-1:before,
.fa-battery-quarter:before {
  content: "\f243";
}
.fa-battery-0:before,
.fa-battery-empty:before {
  content: "\f244";
}
.fa-mouse-pointer:before {
  content: "\f245";
}
.fa-i-cursor:before {
  content: "\f246";
}
.fa-object-group:before {
  content: "\f247";
}
.fa-object-ungroup:before {
  content: "\f248";
}
.fa-sticky-note:before {
  content: "\f249";
}
.fa-sticky-note-o:before {
  content: "\f24a";
}
.fa-cc-jcb:before {
  content: "\f24b";
}
.fa-cc-diners-club:before {
  content: "\f24c";
}
.fa-clone:before {
  content: "\f24d";
}
.fa-balance-scale:before {
  content: "\f24e";
}
.fa-hourglass-o:before {
  content: "\f250";
}
.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: "\f251";
}
.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: "\f252";
}
.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: "\f253";
}
.fa-hourglass:before {
  content: "\f254";
}
.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: "\f255";
}
.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: "\f256";
}
.fa-hand-scissors-o:before {
  content: "\f257";
}
.fa-hand-lizard-o:before {
  content: "\f258";
}
.fa-hand-spock-o:before {
  content: "\f259";
}
.fa-hand-pointer-o:before {
  content: "\f25a";
}
.fa-hand-peace-o:before {
  content: "\f25b";
}
.fa-trademark:before {
  content: "\f25c";
}
.fa-registered:before {
  content: "\f25d";
}
.fa-creative-commons:before {
  content: "\f25e";
}
.fa-gg:before {
  content: "\f260";
}
.fa-gg-circle:before {
  content: "\f261";
}
.fa-tripadvisor:before {
  content: "\f262";
}
.fa-odnoklassniki:before {
  content: "\f263";
}
.fa-odnoklassniki-square:before {
  content: "\f264";
}
.fa-get-pocket:before {
  content: "\f265";
}
.fa-wikipedia-w:before {
  content: "\f266";
}
.fa-safari:before {
  content: "\f267";
}
.fa-chrome:before {
  content: "\f268";
}
.fa-firefox:before {
  content: "\f269";
}
.fa-opera:before {
  content: "\f26a";
}
.fa-internet-explorer:before {
  content: "\f26b";
}
.fa-tv:before,
.fa-television:before {
  content: "\f26c";
}
.fa-contao:before {
  content: "\f26d";
}
.fa-500px:before {
  content: "\f26e";
}
.fa-amazon:before {
  content: "\f270";
}
.fa-calendar-plus-o:before {
  content: "\f271";
}
.fa-calendar-minus-o:before {
  content: "\f272";
}
.fa-calendar-times-o:before {
  content: "\f273";
}
.fa-calendar-check-o:before {
  content: "\f274";
}
.fa-industry:before {
  content: "\f275";
}
.fa-map-pin:before {
  content: "\f276";
}
.fa-map-signs:before {
  content: "\f277";
}
.fa-map-o:before {
  content: "\f278";
}
.fa-map:before {
  content: "\f279";
}
.fa-commenting:before {
  content: "\f27a";
}
.fa-commenting-o:before {
  content: "\f27b";
}
.fa-houzz:before {
  content: "\f27c";
}
.fa-vimeo:before {
  content: "\f27d";
}
.fa-black-tie:before {
  content: "\f27e";
}
.fa-fonticons:before {
  content: "\f280";
}
.fa-reddit-alien:before {
  content: "\f281";
}
.fa-edge:before {
  content: "\f282";
}
.fa-credit-card-alt:before {
  content: "\f283";
}
.fa-codiepie:before {
  content: "\f284";
}
.fa-modx:before {
  content: "\f285";
}
.fa-fort-awesome:before {
  content: "\f286";
}
.fa-usb:before {
  content: "\f287";
}
.fa-product-hunt:before {
  content: "\f288";
}
.fa-mixcloud:before {
  content: "\f289";
}
.fa-scribd:before {
  content: "\f28a";
}
.fa-pause-circle:before {
  content: "\f28b";
}
.fa-pause-circle-o:before {
  content: "\f28c";
}
.fa-stop-circle:before {
  content: "\f28d";
}
.fa-stop-circle-o:before {
  content: "\f28e";
}
.fa-shopping-bag:before {
  content: "\f290";
}
.fa-shopping-basket:before {
  content: "\f291";
}
.fa-hashtag:before {
  content: "\f292";
}
.fa-bluetooth:before {
  content: "\f293";
}
.fa-bluetooth-b:before {
  content: "\f294";
}
.fa-percent:before {
  content: "\f295";
}
.fa-gitlab:before {
  content: "\f296";
}
.fa-wpbeginner:before {
  content: "\f297";
}
.fa-wpforms:before {
  content: "\f298";
}
.fa-envira:before {
  content: "\f299";
}
.fa-universal-access:before {
  content: "\f29a";
}
.fa-wheelchair-alt:before {
  content: "\f29b";
}
.fa-question-circle-o:before {
  content: "\f29c";
}
.fa-blind:before {
  content: "\f29d";
}
.fa-audio-description:before {
  content: "\f29e";
}
.fa-volume-control-phone:before {
  content: "\f2a0";
}
.fa-braille:before {
  content: "\f2a1";
}
.fa-assistive-listening-systems:before {
  content: "\f2a2";
}
.fa-asl-interpreting:before,
.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}
.fa-deafness:before,
.fa-hard-of-hearing:before,
.fa-deaf:before {
  content: "\f2a4";
}
.fa-glide:before {
  content: "\f2a5";
}
.fa-glide-g:before {
  content: "\f2a6";
}
.fa-signing:before,
.fa-sign-language:before {
  content: "\f2a7";
}
.fa-low-vision:before {
  content: "\f2a8";
}
.fa-viadeo:before {
  content: "\f2a9";
}
.fa-viadeo-square:before {
  content: "\f2aa";
}
.fa-snapchat:before {
  content: "\f2ab";
}
.fa-snapchat-ghost:before {
  content: "\f2ac";
}
.fa-snapchat-square:before {
  content: "\f2ad";
}
.fa-pied-piper:before {
  content: "\f2ae";
}
.fa-first-order:before {
  content: "\f2b0";
}
.fa-yoast:before {
  content: "\f2b1";
}
.fa-themeisle:before {
  content: "\f2b2";
}
.fa-google-plus-circle:before,
.fa-google-plus-official:before {
  content: "\f2b3";
}
.fa-fa:before,
.fa-font-awesome:before {
  content: "\f2b4";
}
.fa-handshake-o:before {
  content: "\f2b5";
}
.fa-envelope-open:before {
  content: "\f2b6";
}
.fa-envelope-open-o:before {
  content: "\f2b7";
}
.fa-linode:before {
  content: "\f2b8";
}
.fa-address-book:before {
  content: "\f2b9";
}
.fa-address-book-o:before {
  content: "\f2ba";
}
.fa-vcard:before,
.fa-address-card:before {
  content: "\f2bb";
}
.fa-vcard-o:before,
.fa-address-card-o:before {
  content: "\f2bc";
}
.fa-user-circle:before {
  content: "\f2bd";
}
.fa-user-circle-o:before {
  content: "\f2be";
}
.fa-user-o:before {
  content: "\f2c0";
}
.fa-id-badge:before {
  content: "\f2c1";
}
.fa-drivers-license:before,
.fa-id-card:before {
  content: "\f2c2";
}
.fa-drivers-license-o:before,
.fa-id-card-o:before {
  content: "\f2c3";
}
.fa-quora:before {
  content: "\f2c4";
}
.fa-free-code-camp:before {
  content: "\f2c5";
}
.fa-telegram:before {
  content: "\f2c6";
}
.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}
.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}
.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}
.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}
.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}
.fa-shower:before {
  content: "\f2cc";
}
.fa-bathtub:before,
.fa-s15:before,
.fa-bath:before {
  content: "\f2cd";
}
.fa-podcast:before {
  content: "\f2ce";
}
.fa-window-maximize:before {
  content: "\f2d0";
}
.fa-window-minimize:before {
  content: "\f2d1";
}
.fa-window-restore:before {
  content: "\f2d2";
}
.fa-times-rectangle:before,
.fa-window-close:before {
  content: "\f2d3";
}
.fa-times-rectangle-o:before,
.fa-window-close-o:before {
  content: "\f2d4";
}
.fa-bandcamp:before {
  content: "\f2d5";
}
.fa-grav:before {
  content: "\f2d6";
}
.fa-etsy:before {
  content: "\f2d7";
}
.fa-imdb:before {
  content: "\f2d8";
}
.fa-ravelry:before {
  content: "\f2d9";
}
.fa-eercast:before {
  content: "\f2da";
}
.fa-microchip:before {
  content: "\f2db";
}
.fa-snowflake-o:before {
  content: "\f2dc";
}
.fa-superpowers:before {
  content: "\f2dd";
}
.fa-wpexplorer:before {
  content: "\f2de";
}
.fa-meetup:before {
  content: "\f2e0";
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}
/* New-app-only additions on top of the vendored legacy stylesheet.
   Keep minimal — everything visual should come from the legacy CSS. */

@keyframes fs-skeleton {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.fs-skeleton {
  animation: fs-skeleton 1.4s ease-in-out infinite;
  background-color: var(--color-surface-muted);
}

/* "N new transfers" pill (no legacy equivalent — new realtime UX) */
.transfers-new-pill-container {
  position: sticky;
  top: 8px;
  z-index: 10;
  display: flex;
  justify-content: center;
  height: 0;
}

.transfers-new-pill {
  margin-top: 8px;
  border: none;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  padding: 6px 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.transfers-filter-container {
  position: relative;
}

/* Keep-alive shell: the header used to sit inside the scrolling .content and
   inherited `.content .container-fluid { padding: 0 2rem }` (styles.scss).
   It now lives beside the panes — keep its container padding identical. */

/* HARD 320px minimum (round 17): below a 320px viewport the page stops
   reflowing — the browser scrolls an intact 320 layout. Nothing ever
   renders narrower than 320. */
body {
  min-width: 320px;
}

/* Filter-bar controls: clean markup, PRODUCTION styling. Every value below
   is EXTRACTED from the live production DOM via getComputedStyle
   (parity/controls/prod-computed-styles.json + controls-reference.md) —
   do not restyle from memory. */
:is(.fs-filterbar, .fs-scope) .fs-control {
  display: inline-block;
  height: 34px;
  padding: 2px 16px 0 16px;
  font-size: 14px;
  font-weight: 300;
  line-height: 17.5px;
  color: var(--color-text);
  background-color: var(--color-surface-muted);
  border: none;
  border-radius: 0;
  vertical-align: middle;
  outline: none;
}
:is(.fs-filterbar, .fs-scope) .fs-select {
  appearance: none;
  padding: 2px 30px 0 16px;
  /* production chevron: bootstrap4 double-triangle SVG, 8x10px */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) 50%;
  background-size: 8px 10px;
}
/* production widths (legacy Site.scss); inline bar from the master
   768 breakpoint up (round 18 re-homing: the stacked bar exists ONLY
   below 768, together with burger + mobile margin) */
@media (min-width: 927px) {
  .fs-filterbar-form .fs-combobox .fs-combobox-value {
    max-width: calc(100vw - 79px);
  }

  /* ONE width on every page (stability doctrine): the transfers bar's
     one-line budget dictates 176px, films follows so switching tabs
     moves nothing (production had 220 on both; D-009/round 3). */
  .fs-filterbar .fs-select.films-distributors,
  .fs-filterbar .fs-select.transfers-distributors {
    width: 176px;
  }
  .fs-filterbar .fs-select.transfers-filter-type,
  .fs-filterbar .fs-select.transfers-filter-date {
    width: 120px;
  }
  /* wide enough for the full "All Statuses" (120px truncated it) */
  .fs-filterbar .fs-select.transfers-filter-status {
    width: 128px;
  }
}
/* checkbox: 34px #F5F5F5 box + FontAwesome check — BLUE when checked,
   ghost #D9D9D9 when unchecked (production always renders the glyph) */
:is(.fs-filterbar, .fs-scope) .fs-toggle {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  user-select: none;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle input {
  appearance: none;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0.4rem 0.7rem;
  background-color: var(--color-surface-soft);
  cursor: pointer;
  position: relative;
  display: inline-block;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle input::after {
  /* the exact FA 4.7 fa-check outline (see faGlyphs.ts) — the old
     content:'\f00c' rendered tofu after the legacy font purge */
  content: '';
  position: absolute;
  inset: 0;
  background: center / 16px 16px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' fill='%231183CF' d='M1671 970q0 -40 -28 -68l-724 -724l-136 -136q-28 -28 -68 -28t-68 28l-136 136l-362 362q-28 28 -28 68t28 68l136 136q28 28 68 28t68 -28l294 -295l656 657q28 28 68 28t68 -28l136 -136q28 -28 28 -68z'/%3E%3C/svg%3E");
  opacity: 0;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle input:checked::after {
  opacity: 1;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle span {
  /* on the uniform 34px line (round 4; production padded to 37.5px) */
  padding: 0 0 0 16px;
  line-height: 34px;
}
/* typeahead (production select2 impression) */
.fs-combobox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  /* the growth cap lives HERE: 100% of the BAR (the value box's own
     max-width would be circular against this shrink-to-fit wrapper) */
  max-width: 100%;
}
/* Multi-select box: fixed 160px wide (the bar's one-line budget), grows
   in HEIGHT when chips wrap. Chips vertically centered with even gaps —
   Tom's spec; production select2 used margin-top 4 in a 34px box and
   grew horizontally (select2-ref.json). */
.fs-combobox .fs-control {
  /* DESIGN PASS (unsealed): width first, wrap only at full width —
     production select2 grows horizontally with its chips up to 100%
     of the bar (pushing neighbors per normal bar wrap); chips wrap to
     a second line INSIDE the field only once it spans the full row.
     The old 420px cap wrapped chips while the field was narrow. */
  width: auto;
  min-width: 160px;
  max-width: 100%;
  height: 34px;
}
/* Production growth (round 5, supersedes the fixed 34px): the box is as
   long as its content and wraps chips into further lines when needed.
   User-provoked growth — the stability doctrine targets unprovoked
   shifts. */
.fs-combobox .fs-combobox-value {
  display: flex;
  flex-wrap: wrap;
  /* explicit max-content: the field is exactly its one-line chip row,
     capped at the bar width — auto left the flex base under-resolved
     and chips wrapped while the field was still narrow. The cap must
     be VIEWPORT-derived (100vw - 64 margins - 15 scrollbar): every
     ancestor up to the bar is shrink-to-fit, so percentage max-widths
     are circular and drop to none. Stacked view forces width:100%
     and needs no cap. */
  width: max-content;
  align-items: center;
  gap: 4px 5px;
  height: auto;
  min-height: 34px;
  padding: 3px 8px 3px 8px;
  cursor: text;
}
.fs-combobox .fs-combobox-value.has-chips {
  padding-right: 24px;
}
.fs-combobox-input {
  flex: 1 1 24px;
  min-width: 24px;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text);
  padding: 0 0 0 8px;
}
.fs-combobox-value.has-chips .fs-combobox-input {
  padding-left: 0;
}
/* chip: production select2 choice (extracted) — grey box, white 14/300
   text, 4px radius, 3px self-colored border, bold ×. NEVER wraps
   (round 3): long titles ellipsize; the title attr shows the full name.
   Only the dropdown panel entries wrap. */
.fs-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* full-length like production (401px chips measured); only a chip
     longer than the box maximum ellipsizes */
  max-width: 100%;
  background-color: var(--color-text);
  border: 3px solid var(--color-text);
  border-radius: 4px;
  padding: 0 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  white-space: nowrap;
}
.fs-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-chip-x {
  border: none;
  background: none;
  padding: 0;
  /* production select2: 2px between the x and the label */
  margin-right: 2px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  cursor: pointer;
}
.fs-combobox-clear {
  /* production clear-all (extracted): FontAwesome fa-times, 16px/400,
     accent #1183cf, at the field's right edge — not a text glyph */
  position: absolute;
  top: 9px;
  right: 8px;
  border: none;
  background: none;
  padding: 0;
  color: var(--color-accent);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.fs-combobox-clear:hover {
  color: #0d65a0;
}
/* Panel: taller and wider than the trigger so long titles read — Tom's
   spec (production keeps the panel at trigger width and wraps,
   max-height 300px). Entries wrap like production. */
.fs-combobox-dropdown {
  z-index: 1100;
  width: max-content;
  min-width: 160px;
  max-width: 420px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--color-surface-muted);
  box-shadow: var(--shadow-dropdown);
}
.fs-combobox-option {
  display: block;
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 7px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  color: var(--color-text);
  cursor: pointer;
}
.fs-combobox-option.is-selected {
  background: var(--color-surface-soft);
  font-weight: 500;
}
.fs-combobox-option:hover,
.fs-combobox-option.is-active {
  color: #fff;
  background: var(--color-accent);
}
.fs-combobox-empty {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--color-text);
}
:is(.fs-filterbar, .fs-scope) .fs-group {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  vertical-align: middle;
}
/* Single line in its resting state; chip growth may wrap it —
   user-provoked, like production select2 (round 5). Controls stay
   top-aligned against a grown box. */
.fs-filterbar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* wrapped bar lines breathe like production (extracted 17px between
     legacyref's wrapped rows) — no effect while single-line */
  row-gap: 17px;
}
/* films/screeners bars wrap with the same production row gap */
.fs-filterbar .fs-form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 17px;
}
/* ONE gap token between every bar element (round 5) — matches the
   16px between groups, asserted by the sweep's equal-gap check */
:is(.fs-filterbar, .fs-scope) .fs-group > * + * {
  margin-left: 16px;
}
/* the trailing group margin would push the line 0.1px past the form edge */
.fs-filterbar-form .fs-group:last-child {
  margin-right: 0;
}
/* EVERY pane reserves its scrollbar gutter permanently (stability
   doctrine): a scrollbar (dis)appearing must never reflow content, and
   all panes must share the same content width so switching tabs moves
   nothing. */
.app-pane {
  scrollbar-gutter: stable;
}
/* Reset = production's OWN bar reset (round 23, D-028 — supersedes the
   nav-tab derivation): legacyref a.btn.btn-primary in the filter bar
   computes 11.5px/500 uppercase, line-height 14.375, WHITE text,
   0-width solid border tracking the background, hover #0d65a0
   (border #0c5f96), box 71x34.375. NOTE: production's standard
   .btn-primary elsewhere (login, profile save) stays 14px — the bar
   reset is production's one SMALL primary, so this rule is scoped,
   not global; .fs-btn--primary is untouched. The 34.375 height is
   production's own 0.375 offset above the bar's 34px control line. */
:is(.fs-filterbar, .fs-scope) .fs-reset {
  border: 0 solid #1183cf;
  border-radius: 0;
  background: var(--color-accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 14.375px;
  height: 34.375px;
  padding: 10px 16px;
  cursor: pointer;
  text-transform: uppercase;
}
:is(.fs-filterbar, .fs-scope) .fs-reset:hover {
  background: #0d65a0;
  border-color: #0c5f96;
}

/* production custom-checkbox-compact/-light: 29px white box */
:is(.fs-filterbar, .fs-scope) .fs-toggle--compact input {
  width: 29px;
  height: 29px;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle--compact input::after {
  line-height: 29px;
  font-size: 15px;
}
:is(.fs-filterbar, .fs-scope) .fs-toggle--light input {
  background-color: var(--color-surface);
}

/* Mobile burger dropdown (D-005: production's open menu overlays content
   SEMI-transparently — a glitch; ours is opaque). */

/* production gap between the Trailer/Features toggles is 16px
   (legacy .custom-control+.custom-control margin-left 1rem) */
:is(.fs-filterbar, .fs-scope) .fs-group--toggles > * + * {
  margin-left: 16px;
}
/* films Sort by: plain inline label, select flush after it (production:
   label [869..928], select at 928 — no padded chip, no extra gap) */
.films-sort-label {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 300;
  margin-right: 8px;
}
/* the Sort-by pair: the label's own 8px right margin governs inline —
   no group rhythm between label and select */
.fs-filterbar .fs-group--sort > * + * {
  margin-left: 0;
}
/* round 22 (D-027): in the INLINE bar the Sort-by pair rides the bar's
   RIGHT edge like production (legacyref 1600: select right = 1568 =
   viewport - 32 margin; label on the text baseline, 8px text->select
   gap — ours via the label's margin-right, production's via label
   padding; visually identical). Stacked view keeps label-above. */
@media (min-width: 927px) {
  .fs-filterbar-form .fs-group--sort {
    display: flex;
    align-items: baseline;
  }
}
/* Sort-by right-aligns ONLY while it shares the row (round-22 rule,
   scoped in D-032): the films bar fits one row from 1117 up —
   controls 176 + 218 toggles + 176 + 159 combobox + 245 sort = 974,
   + 4x16 gaps + 64 margins + 15 scrollbar = 1117 (derived per bar:
   only Films HAS a sort group). Below 1117 the group wraps and sits
   flush at the shared LEFT edge like a stacked control — the old
   unconditional margin-left:auto right-aligned it after wrapping. */
@media (min-width: 1117px) {
  .fs-filterbar-form .fs-group--sort {
    margin-left: auto;
  }
}

/* production: EVERY profile-page panel is the muted #737373 (film/user
   admin forms keep the darker --color-text-strong) — color audit R3-3g */
form.profile .fs-panel {
  color: var(--color-text);
}


/* Bar items never SHRINK — they WRAP (design pass 2): a growing chip
   field pushes Site/Reset to the next row via normal flex wrap; every
   item's base is capped at the row width, so nothing can overflow.
   Without this, flex-shrink crushed Site to a sliver beside a wide
   Film field instead of wrapping it. */
.fs-filterbar-form > * {
  flex-shrink: 0;
}

/* STACKED transfers bar below the master 768 breakpoint (round 18):
   every control shares ONE full width like production's mobile stack
   (extracted: all controls 350px at 380, incl. the select2s) with
   production's 18px control-to-control gap. Placed after the legacy
   543px mobile-bar media so its margins (16px) are neutralized for
   the transfers bar; the Trailer/Features pair keeps its line. */
@media (max-width: 926px) {
  .fs-filterbar-form {
    row-gap: 18px;
  }
  .fs-filterbar-form .fs-group {
    display: flex;
    flex-wrap: wrap;
    row-gap: 18px;
    width: 100%;
    margin: 0;
  }
  /* Trailer/Features SIDE BY SIDE in every view (round 18 reversal of
     the round-16 own-row rule — production's mobile behavior is now
     the spec; the pair fits the 320 floor) */
  .fs-filterbar-form .fs-group--toggles {
    width: auto;
  }
  .fs-filterbar-form select.fs-control,
  .fs-filterbar-form .fs-combobox,
  .fs-filterbar-form .fs-combobox .fs-control {
    width: 100%;
    max-width: none;
  }
  .fs-filterbar-form .fs-combobox {
    display: block;
    margin: 0;
  }
  /* Sort by: label on its own line above its select, 6px apart
     (extracted from production's stacked films bar) */
  .fs-filterbar-form .fs-group--sort {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .fs-filterbar-form .fs-group--sort .films-sort-label {
    width: 100%;
    margin-right: 0;
  }
}

/* legacy App.jsx floating scroll-to-top (all pages, all viewports):
   48px #f2f2f2 square fixed bottom-right, shown by ScrollToTop.tsx once
   the active pane scrolls past 100px (reference computed 2026-07-16) */
.scrollToTop {
  display: none;
  position: fixed;
  z-index: 10;
  right: 16px;
  bottom: 13.44px;
  padding: 12.8px 16px;
  text-align: center;
  background: rgb(242, 242, 242);
  color: rgb(77, 77, 77);
  transition: 0.3s;
}
.scrollToTop:hover {
  background: rgb(217, 217, 217);
  color: rgb(77, 77, 77);
}

/* deliver CPL select: the reference's custom-select filterbar-select-light
   (the 34px filterbar select on a WHITE surface) */
:is(.fs-filterbar, .fs-scope) .fs-select.fs-select--white {
  background-color: var(--color-surface);
}

/* FORM (panel) chip fields (design pass): production's select2 renders
   the chips INSIDE a white input box spanning the field width, like
   every neighboring input. Bar fields are untouched — this is the
   block variant only (the bar's shrink-to-fit growth + viewport cap
   stay scoped to .fs-filterbar-form). */
.fs-combobox--block {
  display: block;
  width: 100%;
  max-width: none;
}
.fs-combobox--block .fs-combobox-value {
  width: 100%;
  max-width: none;
  background-color: #fff;
}
/* App-owned structural kit — the replacement for the vendored legacy CSS.
   Every value here was extracted from the deployed pre-migration build
   (parity/foundation-styles.json.txt) which is itself the extracted
   production impression (parity/design-tokens.md, controls-reference.md).
   Shared patterns live here; one-off styling belongs in components as
   Tailwind token utilities. */

/* --- brand font (files in public/static/fonts, weights 300/400/500/700) */
@font-face {
  font-family: 'Gotham';
  src: url('/static/fonts/Gotham-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham';
  src: url('/static/fonts/Gotham-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham';
  src: url('/static/fonts/Gotham-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham';
  src: url('/static/fonts/Gotham-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* --- document base (ex bootstrap reboot subset we actually rely on) */
html,
body,
#app {
  height: 100%;
}
#app {
  /* the app covers the full document: min-width matches the hard 320
     floor; 100vh includes the strip a horizontal scrollbar occupies —
     without it the dark body canvas showed as a band below the page
     (round 18) */
  min-width: 320px;
  min-height: 100vh;
}
body {
  margin: 0;
  background-color: #333;
  /* the exact production stack (per-element audit compares the string) */
  font-family: Gotham, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}
/* form controls inherit the document font like the legacy reboot did —
   without this they fall back to Arial/monospace (audit finding 2026-07-13) */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
b,
strong {
  /* production computes 500, not the browser's bolder→700 */
  font-weight: 500;
}
small {
  font-size: 80%;
  font-weight: 400;
}
* ,
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: var(--color-accent);
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: middle;
}
h1, h2, h3, h4, h5, p, ul, figure {
  margin: 0 0 8px;
}
/* weight only on headings — on ul it broke the inherited 500 of the
   mobile value-box cells (reference bolds those values). line-height 1.1
   is the bootstrap-reboot heading value the reference computes. */
h1, h2, h3, h4, h5 {
  font-weight: 300;
  line-height: 1.1;
}
h1 { font-size: 40px; line-height: 44px; }
h2 { font-size: 32px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
button {
  font-family: inherit;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
table {
  border-collapse: collapse;
}
label {
  margin-bottom: 8px;
  display: inline-block;
}

/* --- centered container (production bootstrap-alpha ladder) */
.fs-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}
/* round 20: the ladder rides the unified breakpoint — mobile keeps
   production's 576 cap, the desktop tiers (940/1140) start at X1;
   the old 720 tier sat between the retired 768 and 992 steps and is
   unreachable under the unified model */
@media (min-width: 544px) { .fs-container { max-width: 576px; } }
@media (min-width: 927px) { .fs-container { max-width: 940px; } }
@media (min-width: 1200px) { .fs-container { max-width: 1140px; } }
/* full-width variant with the page gutter (ex container-fluid).
   ROUND 16 (supersedes round 15's single edge), re-homed to the
   unified X1 in rounds 19/20: above it the desktop 32px edge, below
   it the legacyref-extracted 15px mobile edge; no further margin
   steps at any width on either side. */
.fs-container-fluid {
  width: 100%;
  padding-right: 32px;
  padding-left: 32px;
}
@media (max-width: 926px) {
  .fs-container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* --- the scrolling pane (ex .content): keep-alive scroller under the
       fixed header; the transparent variant lets the dark body back the
       film-detail hero AND macOS elastic overscroll */
.app-pane {
  position: relative;
  z-index: 2;
  flex: 1;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 136px 0 0;
  margin-bottom: -24px;
  background-color: var(--color-surface);
}
.app-pane--transparent {
  background: none;
}

/* --- buttons (production .btn: 10px 16px, uppercase, w500, radius 0) */
.fs-btn {
  display: inline-block;
  padding: 10px 16px;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: var(--color-text);
  /* legacy .btn carried an 8px bottom margin everywhere */
  margin-bottom: 8px;
}
.fs-btn--primary {
  background-color: var(--color-accent);
  color: #fff;
}
.fs-btn--primary:hover {
  background-color: #0e6cab;
  color: #fff;
}
.fs-btn--success {
  background-color: var(--color-action-success);
  color: #fff;
}
.fs-btn--success:hover {
  background-color: #4cae4c;
  color: #fff;
}
.fs-btn--danger {
  background-color: var(--color-danger);
  color: #fff;
}
.fs-btn--danger:hover {
  background-color: #b00217;
  color: #fff;
}
.fs-btn--sm {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 15px;
}
.fs-btn--link {
  /* legacy .btn-link keeps the .btn 14/500/uppercase; only surface and
     paddings reset (reference: deliver BACK / SHOW ITEMS, 17.5px tall) */
  background: transparent;
  color: var(--color-accent);
  padding: 0;
  margin-bottom: 0;
}
.fs-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* --- data table (production .table impression: uppercase bold headers,
       14px/300 cells, hairline row separators drawn by row borders) */
.fs-table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
  /* production: the table inherits the 16px document font; only th/td set
     14px — content outside cells (group headings) renders at 16px */
  font-size: 16px;
  line-height: 24px;
}
.fs-table th {
  padding: 12px 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  color: var(--color-text);
}
.fs-table td {
  /* bootstrap base 0.75rem narrowed by the stack rule; the transfers
     table overrides to 0.35rem 0.5rem in kit-tables */
  padding: 12px 8px;
  vertical-align: top;
  font-size: 14px;
  line-height: 21px;
  font-weight: 300;
}

/* --- panel (ex .jumbotron: the gray form/system surface) */
.fs-panel {
  background-color: var(--color-surface-muted);
  padding: 32px;
  margin-bottom: 32px;
  color: var(--color-text-strong);
}

/* --- text input (production .form-control impression on white) */
.fs-input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  color: var(--color-text-strong);
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 0;
  outline: none;
}
.fs-input:focus {
  border-color: rgb(102, 175, 233);
}
/* dark variant (header search: gray field, light text) */
.fs-input--dark {
  min-height: 48px;
  padding: 14px 16px;
  border: none;
  background-color: var(--color-text);
  color: #f2f2f2;
  font-weight: 400;
  line-height: 16px;
}
/* bootstrap-alpha's .form-control::placeholder — the reference computes
   the input's own color at 0.54 (modern Chrome's UA default is opaque
   #757575, so this must be explicit) */
.fs-input--dark::placeholder {
  color: inherit;
  opacity: 0.54;
}

/* --- icon metrics: all icons are exact FA 4.7 outlines (faGlyphs.ts);
   fs-icon--fa is the operative sizing (height-true 1em like the font
   glyph, baseline at -0.143em = the font's 256/1792 descent) --- */
.fs-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.245em;
  flex-shrink: 0;
}
/* exact-FA-outline icons (faGlyphs.ts): height-true to 1em like the font
   glyph they replicate; the font's descent puts the baseline at -0.143em */
.fs-icon--fa {
  width: 1em;
  height: 1em;
  vertical-align: -0.143em;
}
.fs-icon--fw {
  width: 1.28em;
}
.fs-icon--lg {
  /* legacy body .icon-lg: font-size 20px in a 25px line (rows sized to
     36.19px in the admin tables) */
  width: 20px;
  height: 20px;
  vertical-align: -0.25em;
  margin-top: -2px;
  margin-bottom: -2px;
}

/* --- app header (extracted: two dark bars, fixed, z 20) --- */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  /* fixed positioning tracks the VIEWPORT, so body's min-width cannot
     hold it — the round-17 gap (round 18): clamp the header itself */
  min-width: 320px;
}
/* ROUND 14 (Tom's spec, replaces production-matching for the header):
   ONE header styling at every width — same type, same icons, same
   paddings, one meta height and one nav height, no breakpoint jumps.
   The only responsive rule the header owns is the email cutoff. */
.app-navbar-meta {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  height: 57.5px;
  padding: 0 32px;
  background-color: var(--color-ink);
}
.app-navbar-main {
  /* no right padding: the search field runs flush to the window edge */
  padding-left: 32px;
  padding-right: 0;
}

.app-navbar-main {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 48px;
  background-color: rgba(77, 77, 77, 0.9);
}
.app-customer {
  display: inline-block;
  flex-shrink: 0;
  padding: 20px 16px 20px 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 17.5px;
  text-transform: uppercase;
  white-space: nowrap;
  /* the divider next to the customer name: production puts a subtle
     1px #4d4d4d border-right here (audit 2026-07-13), not a #737373
     border-left on the brand */
  border-right: 1px solid rgb(77, 77, 77);
}
.app-brand {
  display: inline-block;
  /* round 16: renders whole or not at all (the runtime collapse hides
     it) — round 12's ellipsizing removed */
  white-space: nowrap;
  flex-shrink: 0;
  padding: 20px 16px;
  color: #f2f2f2;
  font-size: 14px;
  font-weight: 300;
  line-height: 17.5px;
  text-transform: uppercase;
}
.app-nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 16px;
  color: #f2f2f2;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-transform: uppercase;
}
.app-nav-link:hover {
  /* production: the blue lands already on hover (extracted: bg
     rgb(17,131,207), text stays #f2f2f2, no transition) — round 11 */
  background-color: var(--color-accent);
  color: #f2f2f2;
}
.app-nav-link--active {
  background-color: var(--color-accent);
  color: #f2f2f2;
}
.app-toggler {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* flush at the shared 32px edge (round 15) — the nav bar's own
     padding provides the offset; the box is 52.6px wide */
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.app-toggler-box {
  display: inline-flex;
  align-items: center;
  padding: 16px;
}
.app-toggler--open .app-toggler-box {
  background-color: var(--color-accent);
}
/* mobile burger dropdown (opaque per D-005) */
.app-nav {
  display: flex;
  flex: 1;
  align-items: stretch;
}
/* Mobile burger STRUCTURE only (justified survivor: which nav variant
   renders — tabs vs burger — is structure, not styling; closed heights
   are identical). Open-menu structure extracted from production at a
   burger width: solid opaque OVERLAY (content does not move), items
   48px tall with ZERO gaps and equal widths (the active highlight
   spans exactly the item width), first item 16px below the bar. The
   burger-view search constant lives here too (round 15: the search
   width may change only at this breakpoint). */
@media (max-width: 926px) {
  /* the master breakpoint switches margins with the layout (round 16) */
  .app-navbar-meta {
    padding: 0 15px;
  }
  .app-navbar-main {
    position: relative;
    height: 48px;
    padding-left: 15px;
  }
  .app-toggler { order: 1; }
  .app-navbar-main .app-search { order: 2; flex: 0 0 252px; }
  .app-nav { display: none; }
  .app-nav--open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background-color: rgb(77, 77, 77);
    padding: 16px 15px;
  }
  .app-nav--open .app-nav-link {
    width: 100%;
    height: 48px;
    padding: 16px;
  }
}

/* --- header dropdown menus (extracted .dropdown-menu impression) --- */
.app-menu-toggle {
  display: inline-flex;
  align-items: center;
  /* height comes from padding + line-height like production (57.5px
     desktop, 55px mobile via the smaller type) — a fixed 57.5px here
     was the round-13 overflow cause at the mobile bar */
  padding: 20px 16px;
  border: none;
  background-color: transparent;
  color: rgb(245, 245, 245);
  font-size: 14px;
  font-weight: 300;
  line-height: 17.5px;
  cursor: pointer;
}
/* :last-of-type doubles beat the ported global
   `.fs-icon:last-of-type { margin-right: 0 }` (kit-film.css). Production's
   fa-fw box (18px incl. its 8px padding) already contains the gap — no
   extra margin, or the toggles run 8px wider than production. */
.app-menu-toggle .fs-icon,
.app-menu-toggle .fs-icon:last-of-type {
  margin-right: 0;
}
/* bootstrap-style solid dropdown caret (production: ~4.2px triangle, not a
   14px chevron glyph) */
.app-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.3em;
  vertical-align: middle;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}
.app-menu-toggle[aria-expanded='true'] {
  background-color: rgb(77, 77, 77);
}
/* Dropdown anchor (round 19, seam fix): the wrapper stretches to the
   FULL meta-bar height (the toggle stays centered inside), so the
   panel's top: 100% is exactly the bar's bottom edge. Anchoring the
   panel to the toggle's own box let the nav bar bleed through in a
   1.8px strip whenever the collapsed (icon-only) toggle was shorter
   than the bar and got flex-centered. */
.app-menu-wrap {
  position: relative;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}
.app-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 2000;
  min-width: 160px;
  padding: 5px 0;
  background-color: rgb(77, 77, 77);
  text-align: left;
}
.app-menu-item {
  display: block;
  width: 100%;
  padding: 8px 32px 8px 16px;
  color: #f2f2f2;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
}
.app-menu-item:hover {
  color: #fff;
  background-color: var(--color-ink);
}
.app-menu-divider {
  height: 1px;
  margin: 8px 0;
  background-color: rgb(229, 229, 229);
  opacity: 0.25;
}

/* --- header search (dark field + magnifier addon + results) --- */
.app-search {
  position: relative;
  display: flex;
  /* TWO constants, never fluid (rounds 15/16): 479px in the desktop
     layout; 252px in the mobile layout (fits the 320px floor:
     320 - 15 mobile edge - 52.6 toggler — see D-020). The width
     changes ONLY at the master breakpoint. */
  flex: 0 0 479px;
  margin-left: auto;
}
.app-search-addon {
  display: flex;
  align-items: center;
  /* production input-group-addon: 16px left, 8px right (42px with the
     18px fa-fw glyph box); z-index lifts it above the results backdrop —
     without it the dim overlay darkened just the addon cell */
  padding: 0 8px 0 16px;
  position: relative;
  z-index: 10;
  background-color: var(--color-text);
  color: #f2f2f2;
  font-size: 14px;
}
.app-search-addon .fs-icon,
.app-search-addon .fs-icon:last-of-type {
  margin-right: 0;
}
/* production ul.typeahead__list: #f2f2f2, 1px #ccc border, 5px vertical
   padding, 2px below the bar, NO shadow; rows 16px on a normal line
   (31px rows), hover #d9d9d9 */
.app-search-results {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 5px 0;
  background: rgb(242, 242, 242);
  border: 1px solid rgb(204, 204, 204);
}
.app-search-result {
  display: block;
  padding: 6px 12px;
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
}
.app-search-result:hover,
.app-search-result--active {
  background-color: rgb(217, 217, 217);
  color: rgb(60, 60, 60);
}
.app-search-result-sub {
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: rgb(128, 128, 128);
}

/* --- film grid (ex .movielist-*, ported from _movielist.scss) --- */
.film-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 8px;
  margin: 0 -15px;
  /* content-visibility on tiles + containment: memory/resize (PART C) */
  contain: layout style;
}
/* round 22 (D-027): the films content sits the SAME extracted 51.5px
   off the bar as the transfers table. The full 51.5 is set here: it
   COLLAPSES with the grid's own 18px internal margin (max wins). */
#content-films .fs-filterbar-section + .fs-container-fluid {
  margin-top: 51.5px;
}
.film-grid-title {
  flex: 0 0 100%;
  margin: 24px 0 16px;
}
.film-grid-title-heading {
  font-size: 20px;
  padding: 16px 0 8px;
  border-top: 2px solid var(--color-line-strong);
  margin: 0;
}
.film-tile {
  width: 50%;
  padding: 0 8px;
  content-visibility: auto;
  contain-intrinsic-height: auto 420px;
}
@media (min-width: 600px) { .film-tile { width: 33.3333%; } }
@media (min-width: 800px) { .film-tile { width: 25%; } }
@media (min-width: 960px) { .film-tile { width: 20%; } }
@media (min-width: 1200px) { .film-tile { width: 16.6667%; } }
@media (min-width: 1500px) { .film-tile { width: 14.2857%; } }
@media (min-width: 1900px) { .film-tile { width: 12.5%; } }
@media (min-width: 2200px) { .film-tile { width: 11.1111%; } }
@media (min-width: 2500px) { .film-tile { width: 10%; } }
@media (min-width: 2800px) { .film-tile { width: 9.0909%; } }
@media (min-width: 3100px) { .film-tile { width: 8.3333%; } }
.film-card {
  position: relative;
  display: block;
  margin-bottom: 16px;
}
.film-card-poster {
  position: relative;
  background-color: var(--color-text);
  border: 2px solid var(--color-surface);
}
.film-card-poster img {
  width: 100%;
  border: 2px solid var(--color-line-strong);
}
.film-card:hover .film-card-poster,
.film-card:hover .film-card-poster img {
  border-color: var(--color-accent);
}
.film-card-poster .film-card-image {
  position: absolute;
  top: 0;
  left: 0;
}
.film-card-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  text-align: center;
}
.film-card-overlay-title {
  position: absolute;
  width: 100%;
  padding: 32px 8px;
  color: var(--color-surface);
}
.film-card-overlay-logo {
  position: absolute;
  left: 20%;
  bottom: 32px;
  width: 60%;
  max-height: 64px;
  margin: 0 auto;
  opacity: 0.8;
}
.film-card-overlay-logo img {
  max-height: 64px;
  border: none;
  width: auto;
  max-width: 100%;
}
/* two-column text row under the poster (title left, count right) */
.film-card-text {
  float: left;
  margin-top: 8px;
  width: calc(100% - 30px);
  color: var(--color-text-heading);
  font-size: 14px;
  line-height: 21px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.film-card-text--wide-count {
  width: calc(100% - 60px);
}
.film-card-count {
  float: left;
  width: 30px;
  margin-top: 8px;
  text-align: right;
  color: var(--color-text-heading);
  font-size: 14px;
  line-height: 21px;
  white-space: nowrap;
  overflow: hidden;
}
.film-card-count--wide {
  width: 60px;
}
.film-card-updated {
  float: left;
  width: 100%;
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

/* bootstrap-style row/column shims for the ported page grids */
.fs-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.fs-col {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.fs-btn--light {
  background-color: var(--color-surface-muted);
  color: var(--color-text-heading);
}
.fs-btn--light:hover {
  background-color: #e5e5e5;
}
/* bare button (legacy <a class="btn btn-light"> resolved to the base .btn:
   transparent, link-blue text — the film-row PLAY/SCREENER look) */
.fs-btn--bare {
  background-color: transparent;
  color: var(--color-accent);
}
.fs-btn--bare:hover {
  color: #0e6cab;
}

/* type helpers used on dark surfaces (ex display-5 / lead) */
.fs-display {
  font-size: 40px;
  font-weight: 300;
  line-height: 44px;
}
.fs-lead {
  font-size: 20px;
  font-weight: 300;
}
.fs-table thead {
  border-bottom: 4px solid var(--color-surface-muted);
}
.fs-table th {
  font-size: 0.875rem;
  text-transform: uppercase;
}
.fs-table td {
  font-size: 0.875rem;
}
.fs-table td .fs-icon {
  margin-right: 0.5rem;
}
.fs-table td .fs-icon:last-child {
  margin-right: 0;
}

.fs-table .fs-table {
  margin-bottom: 0;
}
.fs-table .ft-cell--collapse {
  width: 2.5rem;
  min-width: 2.5rem;
  /* production computes 0 0 1.4px 12px on this cell */
  padding-left: 0.75rem;
  padding-bottom: 1.4px;
}
.fs-table .ft-cell--icon {
  /* reference: 40px icon column, glyph flush left (computed text-align
     left, zero padding — the legacy text-align:right loses in the
     reference cascade) */
  width: 2.5rem;
  min-width: 2.5rem;
  padding-left: 0;
  padding-right: 0;
}
.fs-table .ft-cell--icon-column {
  padding-left: 0;
}
.fs-table .ft-cell--icon-column .fs-icon {
  margin: 0 !important;
}
.fs-table .ft-cell--actions {
  text-align: right;
  padding-top: 0.3rem;
}
@media (max-width: 991px) {
  .fs-table .ft-cell--collapse {
    width: 2rem;
    min-width: 2rem;
  }
}

.ft-stack {
  width: 100%;
}
/* over-p95 CPLs (round 24, D-029): when the CPL column pushes the
   table past the container, the STACK scrolls horizontally — shared
   columns keep their positions, CPL renders in full. Desktop only:
   below X1 the cells are blocks. */
@media (min-width: 927px) {
  #content-transfers .ft-stack {
    overflow-x: auto;
  }
}
/* set-off between the filter bar and the content (round 22, D-027):
   ONE extracted constant on Films AND Transfers — legacyref shows
   51.5 on films (bar bottom -> first cover) and 42.4 on transfers
   (their export row -> table); per Tom the LARGER value applies to
   both. The margins differ per view because the internal lead-ins
   differ (inline 8px, stacked 16px) — the 51.5 VISUAL gap is what the
   sweep asserts. Supersedes round 5's 41px transfers extraction. */
#content-transfers .ft-stack {
  margin-top: 43.5px;
}
@media (max-width: 926px) {
  #content-transfers .ft-stack {
    margin-top: 35.5px;
  }
}
.fs-table .ft-body--asset-details td {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
/* recipient rows: icon + date + name in one cell (see RecipientsTbody).
   The cell starts at the icon gutter (205, padding 0); the date sits a
   fixed 12px off the icon ink — D-007's approved tighter run. */
.fs-table .ft-body--asset-details .ft-cell--asset-detail {
  padding-left: 0;
}
.ft-detail-icon {
  /* the delivery DATE stays flush with the flags line above: this box
     mirrors the icon COLUMN (see td.film-playlist-transfer-icon) + the
     8px column lead. DESIGN PASS 2 (unsealed): 40 -> 24px — the user's
     aesthetic call overriding production's 40px column; the whole
     content column (flags, CPL, dates) shifts left as one edge, the
     icon-ink -> text gap lands ~14px. */
  display: inline-block;
  width: 24px;
  margin-right: 8px;
}
/* the version block's icon column, same 40 -> 24 (one constant).
   Scoped by the film page's .fd-assets wrapper: the column contains
   icon cells WITHOUT the transfer-icon class too, and any of them at
   2.5rem would pin the auto-layout column back at 40. */
.fd-assets .fs-table .ft-cell--icon {
  width: 24px;
  min-width: 24px;
}
.fs-table .ft-row--asset-title td {
  word-break: break-all;
}
/* production row rhythm on the film-detail asset table (per-element audit
   2026-07-14): version rows close with 1.4px; the filename row hugs the
   version row (1.6px top) and carries the 8px gap to the next entry */
.fs-table .ft-row--asset td {
  padding-bottom: 1.4px;
}
.fs-table .ft-row--asset-title td {
  padding-top: 1.6px;
  padding-bottom: 8px;
}
@media (max-width: 991px) {
  .fs-table .ft-row--asset-title td {
    font-size: 0.8rem;
  }
}
.fs-table .ft-cell--asset-info {
  padding-bottom: 0;
  padding-right: 0;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .fs-table .ft-cell--asset-info {
    display: none;
  }
}
.fs-table .ft-cell--asset-info--xs {
  display: none;
}
@media (max-width: 991px) {
  .fs-table .ft-cell--asset-info--xs {
    display: table-cell;
    font-weight: 500;
    padding-bottom: 0;
  }
}
.fs-table .ft-body--asset-details {
  display: table-row-group !important;
}
.fs-table .ft-body--asset-details .ft-row--asset-detail:last-child td {
  padding-bottom: 0.75rem;
}
.fs-table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-date {
  display: inline-block;
  width: 8rem;
  border-right: 1px solid var(--color-line-strong);
  padding-right: 0.5rem;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .fs-table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-date {
    border-right: 0;
  }
}
.fs-table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-name {
  display: inline;
  width: auto;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
@media (max-width: 991px) {
  .fs-table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-name {
    padding-left: 0;
    padding-right: 0;
    display: inline-block;
  }
}

td.ft-cell--actions {
  padding-bottom: 0;
}
td.ft-cell--actions .fs-btn {
  margin-bottom: 0;
}
td.ft-cell--actions .fs-btn:last-child {
  margin-bottom: 0;
}
@media (max-width: 543px) {
  td.ft-cell--actions .fs-icon {
    padding: 0;
    margin: 0;
  }
}
@media (max-width: 543px) {
  td.ft-cell--actions span {
    display: none;
  }
}

.ft-cell--collapse .fs-icon {
  transform: rotate(90deg);
  transition: all 0.5s;
}
.ft-cell--collapse .collapsed .fs-icon {
  transform: rotate(0deg);
  transition: all 0.5s;
}

.ft-body--assetgroup {
  background-color: var(--color-surface-muted);
}
.ft-body--assetgroup .ft-row--asset-title:not(:last-child) td {
  padding-bottom: 0;
}
.ft-body--assetgroup + .ft-body--asset.ft-body--assetgroup {
  border-top: 4px solid var(--color-surface);
}

.ft-body--asset-heading td {
  border-bottom: 4px solid var(--color-surface-muted);
  /* 1.4px bottom = production's asset-row rhythm on the heading row
     too (collapsed group pitch 64, extracted film 2660) */
  padding: 2rem 0 1.4px 0;
}
.ft-body--asset-heading td:last-child {
  padding-right: 0.5rem;
}
.ft-body--asset-heading:first-child td {
  padding-top: 0;
}

.fs-table--transfer td {
  /* round 6: PRODUCTION GENEROSITY — the reference's extracted 5.6px on
     all sides (round 5's 2px bottom is rolled back; cramped reads
     petty, production reads calm) */
  padding: 0.35rem 0.5rem;
  /* reference: all cells top-aligned */
  vertical-align: top;
  /* HARD RULE (round 9): no cell ever wraps — a second text line inside
     any cell is impossible by construction, in every layout. Overlong
     content ellipsizes (per-cell overflow rules). */
  white-space: nowrap;
}
/* reference rows are 36.2px tall (extracted; 5.6 + 25px icon line box
   + 5.6). Our icon line collapsed shorter, so the status cell pins the
   row's minimum height directly (round 6, production generosity). */
.ft-cell--transfer-status {
  height: 36.2px;
}
/* Layout stabilization: fixed table layout with explicit column widths on
   the header cells, so no data change (progress ticking, live prepends,
   cursor pages) can move a column edge. Desktop only — below 768px the
   cells switch to display:block (see kit-port.css) and fixed layout would
   fight that. Content-measured widths (parity/elements/transfers-*.json):
   Round 2 (Tom): Progress reserves exactly "100% 226 Mbit/s" = 118px,
   dates exactly "23.12.2026 14:34" = 119px, User/Site their real data
   maxima (widest email 270px, widest site 244px over the full clone
   dataset), all + 16px cell padding; a live value beyond the reserve
   ellipsizes rather than moving the column. */
@media (min-width: 927px) {
  .fs-table--transfer {
    /* round 25 FLUID model (D-030, REVERSES D-029's no-spread — that
       spec originated in review, not from the user): the table ALWAYS
       spans 100% of the content width, columns compressed to their
       content minima under pressure, surplus distributed natively by
       the fixed-layout algorithm (proportional to the specified
       minima — production's auto-layout character, kept on FIXED
       layout so virtualized rows can't move edges and the User/Site
       ellipsis reservations hold). Shared minima sum = 874. */
    table-layout: fixed;
    width: 100%;
  }
  /* DESIGN PASS 2 (unsealed): FIXED experience-based minima from the
     user — 58/120/4x80/200/150 (+CPL 620), sum 848; switches static:
     table->stacked 927 (848+79), CPL column 1547 (848+620+79).
     Surplus becomes an EQUAL EXTRA GAP between all columns: each
     column except the last carries + (100vw - switch)/gaps on its
     trailing edge (contents stay at minima, left-aligned), so the
     page relaxes uniformly; the sum stays exactly 100%. */
  /* DESIGN PASS 3 (unsealed): WEIGHTED surplus — status 0 (never
     grows, nor its trailing gap), progress/dates 1 each ("nur ein
     bisschen luftiger"), user/site 5 each, cpl 6. Tail total /15,
     CPL layout /21. Exact fractions inside calc keep the sum at
     100%. */
  .ft-heading--transfer-status {
    width: 58px;
  }
  .ft-heading--transfer-progress {
    /* round 19: 4px lead-in + the widest possible "NNN% NNN Mbit/s"
       shape ("100% 800 Mbit/s" = 117px, brute-forced over all 3-digit
       speeds at the cell font) + 2px right (round 25 near-zero gap);
       rare wider mid-tick values ellipsize (stability rule intact). */
    width: calc(120px + (100vw - 927px) * 1 / 15);
  }
  .ft-heading--transfer-progress--compact {
    width: 6rem;
  }
  .ft-heading--transfer-date {
    /* round 18 squeeze: the requested "12.12. 12:23" measures 69px,
       but real same-shaped values reach 84px ("20.10. 20:00", on
       screen in the December fixtures — zeros render wide); shipping
       81px would wrap/clip them, so the honest minimum is 84 + 2x6px
       gaps = 96; round 25 shrinks the sides to 2px ("NULL Abstand"
       target; 4px keeps adjacent dates legible): 88. */
    width: calc(80px + (100vw - 927px) * 1 / 15);
  }
  .ft-heading--transfer-user {
    width: calc(200px + (100vw - 927px) * 5 / 15);
  }
  /* round 24 (D-029): Site is FIXED like every other column — the
     table hugs its content (width = column sum, NOT 100%), so free
     space stays on the right and nothing spreads at any width. */
  .ft-heading--transfer-site {
    width: calc(150px + (100vw - 927px) * 5 / 15);
  }
}
/* CPL column <-> tail row is RUNTIME-MEASURED (round 25, D-030 —
   supersedes the static 1646 constant): TransfersPage compares the
   available content width against 874 + widest LOADED CPL + 4 (D-020
   header-collapse pattern) and sets .ft-stack--cpl-column. The CPL
   minimum is the widest actually-loaded CPL (NOT p95); --cpl-col
   carries it as the column's specified width, so the fluid table
   compresses to it and distributes any surplus natively. CPL never
   truncates: below the fit the tail row takes over. */
@media (min-width: 927px) and (max-width: 1546px) {
  .ft-heading--transfer-cpl--lg,
  .ft-cell--transfer-cpl--lg {
    display: none;
  }
  /* .fs-table--transfer prefix: must beat the LATER base
     .ft-row--transfer--sm { display: none } at any rule order */
  .fs-table--transfer .ft-row--transfer--sm {
    display: table-row;
  }
  .ft-cell--transfer-cpl--sm {
    display: table-cell !important;
    padding-top: 0 !important;
  }
}
@media (min-width: 1547px) {
  /* weighted /21 once CPL is a column (0,1,1,1,1,1,5,5,6) */
  .ft-heading--transfer-status { width: 58px; }
  .ft-heading--transfer-progress { width: calc(120px + (100vw - 1547px) * 1 / 21); }
  .ft-heading--transfer-date { width: calc(80px + (100vw - 1547px) * 1 / 21); }
  .ft-heading--transfer-user { width: calc(200px + (100vw - 1547px) * 5 / 21); }
  .ft-heading--transfer-site { width: calc(150px + (100vw - 1547px) * 5 / 21); }
  .ft-heading--transfer-cpl--lg { width: calc(620px + (100vw - 1547px) * 6 / 21); }
  .fs-table--transfer .ft-row--transfer--sm { display: none; }
}

/* round 25 (D-030): NEAR-ZERO separation — 2px sides = 4px between
   adjacent contents at full compression ("NULL Abstand"; literal 0
   merges adjacent dates, 4px ~ one space glyph keeps them distinct).
   Surplus width flows back into the columns via the fluid table. */
.fs-table--transfer td.ft-cell--transfer-ordered,
.fs-table--transfer td.ft-cell--transfer-started,
.fs-table--transfer td.ft-cell--transfer-completion,
.fs-table--transfer td.ft-cell--transfer-duedate,
.fs-table--transfer th.ft-heading--transfer-date {
  padding-left: 2px;
  padding-right: 2px;
}
/* the new 6px sides are TABLE-layout only — the stacked view keeps its
   flush left edge (round 12) */
@media (min-width: 927px) {
  .fs-table--transfer td.ft-cell--transfer-user,
  .fs-table--transfer td.ft-cell--transfer-user-info,
  .fs-table--transfer td.ft-cell--transfer-cpl,
  .fs-table--transfer th {
    padding-left: 2px;
    padding-right: 2px;
  }
}
/* in the column layout the CPL never wraps mid-column */
.ft-cell--transfer-cpl--lg {
  /* DESIGN PASS 2: CPLs wider than the current column keep the
     horizontal-scroll escape — the text overflows the last column and
     the stack scrolls; no truncation. */
  white-space: nowrap;
  overflow: visible;
}
.ft-cell--transfer-cpl--lg a {
  white-space: nowrap;
}
/* Reference status-cell anatomy: both icon anchors are fa-fw slots
   (1.28571em at 20px = 25.71px), glyphs centered — that spacing is the
   visual gap between the status and type icons. */
.ft-cell--transfer-status .transfer-icon,
.ft-cell--transfer-status .transfer-type-icon {
  display: inline-block;
  width: 25.71px;
  text-align: center;
}
.ft-cell--transfer-status .transfer-icon .fs-icon,
.ft-cell--transfer-status .transfer-type-icon .fs-icon {
  margin-right: 0;
}
.ft-row--transfer {
  border-top: 2px solid var(--color-surface-muted);
}
.ft-row--transfer:first-child {
  border-top: none;
}
.ft-row--transfer--sm {
  border-top: none;
  /* hidden as a ROW by default: its empty first td used to render a
     phantom ~8px strip between the data row and the divider whenever
     the stacked layout was off — the actual source of the too-large
     CPL bottom gap (round 5). The stacked-layout media queries below
     and in kit-port.css re-enable it. */
  display: none;
}
.ft-row--transfer + .ft-row--transfer-group {
  border-top: none;
}
.ft-row--transfer-group + .ft-row--transfer-group {
  border-top: 4px solid var(--color-surface) !important;
}
.ft-row--transfer-group + .ft-row--transfer-group.ft-row--transfer--sm {
  border-top: none !important;
}
.ft-row--transfer-group td {
  background-color: var(--color-surface-muted);
}
.ft-cell--transfer-status {
  /* round 15: the column gives back the old 8px left pad (68 -> 60) so
     the icons->percentage gap keeps its round-2 12.6px */
  width: 60px;
  max-width: 60px;
  white-space: nowrap;
}
/* the list's leftmost content sits ON the shared 32px edge (round 15);
   the base td padding rule would win at equal class specificity */
.fs-table--transfer td.ft-cell--transfer-status {
  padding-left: 0;
}
/* progress cell width comes from .ft-heading--transfer-progress* (fixed
   table layout sizes columns at the header) */
.ft-cell--transfer-progress span {
  white-space: nowrap;
}
/* a live value wider than the reserved column must not move it */
.ft-cell--transfer-progress {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2px;
}
/* 4px lead-in instead of the 8px rhythm: % text 12.6px off the icon
   ink (reference: 28.6) — round-2 "tighter still" */
.fs-table--transfer td.ft-cell--transfer-progress {
  padding-left: 4px;
}

.ft-cell--transfer-ordered {
  max-width: auto;
  width: auto;
  white-space: nowrap;
}
.ft-cell--transfer-started {
  max-width: auto;
  width: auto;
  white-space: nowrap;
}
.ft-cell--transfer-duedate {
  max-width: auto;
  width: auto;
  white-space: nowrap;
}
.ft-cell--transfer-completion {
  max-width: auto;
  width: auto;
  white-space: nowrap;
}
.ft-cell--transfer-user {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* round 9: the site cell no longer wraps (hard rule) — ellipsizes */
.ft-cell--transfer-user-info {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ft-cell--transfer-cpl {
  word-wrap: break-word;
  word-break: break-all;
}
.ft-cell--transfer-cpl--sm {
  display: none;
}
@media (max-width: 926px) {
  .ft-cell--transfer-cpl--sm {
    display: none !important;
  }
}

/* MOBILE stacked view for the TRANSFERS table: below the 1219px
   mid-breakpoint (round 11, D-016) — the intermediate table layout
   truncated Site; the table renders only where every column fits
   (round 20, D-025: minimum columns 934px + 79px chrome = 927 —
   the SAME width switches the page chrome; the unified lower
   breakpoint X1). */
@media (max-width: 926px) {
  .ft-row--transfer {
    border-top: 4px solid var(--color-surface-muted);
  }
  .ft-row--transfer.ft-row--head {
    display: none;
  }
  [class*=ft-cell--transfer] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
  [class*=ft-cell--transfer]:last-child {
    padding-bottom: 0.75rem !important;
  }
  /* Round 12 (gutter REVERSED, production ground truth): the icons sit
     on their own line at the SAME left edge as every other line —
     percentage, dates, email, CPL all stack at one x. */
  .fs-table--transfer td.ft-cell--transfer-status {
    height: auto;
  }
  /* every mobile line sits ON the shared 32px edge (round 15) */
  .fs-table--transfer td,
  .fs-table--transfer td.ft-cell--transfer-progress,
  .fs-table--transfer td.ft-cell--transfer-ordered,
  .fs-table--transfer td.ft-cell--transfer-started,
  .fs-table--transfer td.ft-cell--transfer-completion,
  .fs-table--transfer td.ft-cell--transfer-duedate {
    padding-left: 0;
  }
  /* Missing data reserves its line (Tom; legacyref collapses empties to
     5.6px — recorded deviation): every field renders at the normal
     26.6px line (5.6 padding + 21 line-height), so entries keep a
     constant structure and nothing jumps when data streams in. */
  .fs-table--transfer td {
    min-height: 26.6px;
  }
  /* MOBILE EXCEPTION to the no-wrap doctrine (D-016): the CPL renders
     fully and wraps when needed — including its LINK, which carries
     nowrap in the table layouts. */
  .fs-table--transfer td.ft-cell--transfer-cpl,
  .fs-table--transfer td.ft-cell--transfer-cpl a {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 926px) {
  .ft-row--users {
    border-top: 4px solid var(--color-surface-muted);
  }
  .ft-row--users.ft-row--head {
    display: none;
  }
  [class*=ft-cell--users] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
  [class*=ft-cell--users]:last-child {
    padding-bottom: 0.75rem !important;
  }
  [class*=ft-cell--organization] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
  [class*=ft-cell--organization]:last-child {
    padding-bottom: 0.75rem !important;
  }
  [class*=ft-cell--search] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
  [class*=ft-cell--search]:last-child {
    padding-bottom: 0.75rem !important;
  }
}

.ft-row--users {
  border-top: 2px solid var(--color-surface-muted);
}
.ft-row--users:first-child {
  border-top: none;
}
.ft-cell--search-date {
  width: 10rem;
  min-width: 10rem;
}
.ft-cell--search-name {
  width: 12rem;
  min-width: 12rem;
}
.ft-cell--search-ip {
  width: 8rem;
  min-width: 8rem;
}
.ft-cell--users-role {
  width: 10rem;
  min-width: 10rem;
}
.ft-cell--users-region {
  width: 5rem;
  min-width: 5rem;
}
.ft-cell--users-active {
  width: 2rem;
  min-width: 2rem;
}
.ft-cell--users-transfers {
  width: 5rem;
  max-width: 5rem;
}
.ft-cell--organization-logo {
  width: 8rem;
  min-width: 8rem;
}
.ft-cell--organization-logo .logo {
  background-color: var(--color-line-strong);
  padding: 1rem;
  text-align: center;
  height: 8rem;
  width: 8rem;
  max-height: none;
  max-width: none;
  margin-right: 0;
}
.ft-cell--organization-logo .logo img {
  max-height: 6rem;
  max-width: 6rem;
}
.ft-cell--organization-screen {
  width: 5rem;
  min-width: 5rem;
}
.ft-cell--organization-transfers {
  width: 5rem;
  min-width: 5rem;
}
.ft-cell--organization-actions {
  width: 10rem;
  max-width: 10rem;
}

.value-box {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  width: 100%;
}
.vb-item {
  width: 50%;
}
@media (min-width: 927px) {
  .vb-item {
    width: 25%;
  }
}
.value-box-item--language {
  order: 1;
  width: 33.3333333333%;
}
@media (min-width: 927px) {
  .value-box-item--language {
    width: 20%;
  }
}
.value-box-item--subtitles {
  order: 1;
  width: 66.6666666667%;
}
@media (min-width: 927px) {
  .value-box-item--subtitles {
    width: 20%;
  }
}
.value-box-item--time {
  display: none;
  order: 3;
}
@media (min-width: 927px) {
  .value-box-item--time {
    display: block;
    width: 30%;
  }
}
.value-box-item--date {
  order: 3;
  width: 66.6666666667%;
}
@media (min-width: 927px) {
  .value-box-item--date {
    width: 30%;
  }
}
.value-box-item--resolution {
  display: none;
  order: 1;
}
@media (min-width: 927px) {
  .value-box-item--resolution {
    display: block;
    width: 15%;
  }
}
.value-box-item--format {
  order: 1;
  width: 33.3333333333%;
}
@media (min-width: 927px) {
  .value-box-item--format {
    display: block;
    width: 15%;
  }
}
.value-box-item--frames {
  display: none;
  order: 3;
}
@media (min-width: 927px) {
  .value-box-item--frames {
    display: block;
    width: 20%;
  }
}
.value-box-item--audio {
  order: 2;
  width: 33.3333333333%;
}
@media (min-width: 927px) {
  .value-box-item--audio {
    order: 2;
    width: 20%;
  }
}
.value-box-item--aspect {
  order: 1;
  width: 66.6666666667%;
}
@media (min-width: 927px) {
  .value-box-item--aspect {
    width: 30%;
  }
}

/* action buttons sit side by side at the row end (legacy column sizing) */
.ft-cell--actions {
  white-space: nowrap;
}
/* Film-detail page system (hero, quickinfo, facts, tabs, excerpt, player
   box, status/type icons): mechanically extracted from the flattened
   legacy cascade, colors -> tokens, classes renamed (see git history for
   the map). Values are the production impression. */
.fs-feedback {
  margin-top: 0.25rem;
}
.fs-has-danger .fs-feedback,
.fs-has-danger .checkbox,
.fs-has-danger.checkbox label {
  color: var(--color-danger);
}
.fs-has-danger .fs-field {
  border-color: var(--color-danger);
}
.fs-has-danger .fs-feedback {
  color: var(--color-danger);
}
.fd-tabpanes > .fd-tabpane {
  display: none;
}
.fd-tabpanes > .active {
  display: block;
}
.fd-facts {
  padding-left: 0;
  margin-bottom: 0;
}
.fd-fact {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0px;
  background-color: #fff;
  border: 0px solid #ddd;
}
.fd-fact:last-child {
  margin-bottom: 0;
}
.fd-fact.disabled, .fd-fact.disabled:focus, .fd-fact.disabled:hover {
  color: var(--color-text);
  cursor: not-allowed;
  background-color: var(--color-line-strong);
}
.fd-fact.disabled .fd-fact-heading, .fd-fact.disabled:focus .fd-fact-heading, .fd-fact.disabled:hover .fd-fact-heading {
  color: inherit;
}
.fd-fact.disabled .fd-fact-text, .fd-fact.disabled:focus .fd-fact-text, .fd-fact.disabled:hover .fd-fact-text {
  color: var(--color-text);
}
.fd-fact.active, .fd-fact.active:focus, .fd-fact.active:hover {
  z-index: 2;
  color: #fff;
  text-decoration: none;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.fd-fact.active .fd-fact-heading,
.fd-fact.active .fd-fact-heading > small,
.fd-fact.active:focus .fd-fact-heading,
.fd-fact.active:focus .fd-fact-heading > small,
.fd-fact.active:hover .fd-fact-heading,
.fd-fact.active:hover .fd-fact-heading > small {
  color: inherit;
}
.fd-fact.active .fd-fact-text, .fd-fact.active:focus .fd-fact-text, .fd-fact.active:hover .fd-fact-text {
  color: rgb(179.2232142857, 220.9553571429, 248.7767857143);
}
.fd-fact-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.fd-fact-text {
  margin-bottom: 0;
  line-height: 1.3;
}
/* reference .readmore: a block-level link on the body 16px/1.5 line */
.fd-more,
.fd-less {
  display: block;
  line-height: 1.5;
}
.table td .fs-icon {
  margin-right: 0.5rem;
}
.table td .fs-icon:last-child {
  margin-right: 0;
}
@media (min-width: 1600px) {
  .fs-container--wide {
    max-width: 1540px;
  }
}
.fs-icon {
  margin-right: 0.5rem;
}
.fs-icon--lg {
  font-size: 1.25rem;
}
.fs-icon:last-of-type {
  margin-right: 0;
}
.icon--empty {
  color: transparent !important;
}
.fs-btn .fs-icon {
  /* legacy set padding-right: .5rem for the <i> glyph gap; on an SVG that
     padding EATS the drawing area (border-box) and shrank button icons to
     ~6px (per-element audit). The centered svg drawing carries the gap. */
  padding-right: 0;
}
.fd-facts {
  text-align: right;
}
.fd-fact {
  background: none;
  padding: 0 0 2rem 0;
}
.fd-fact-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
}
.fd {
  margin-top: -6.5rem;
  width: 100%;
}
.fd-container {
  position: relative;
  z-index: 9;
  background-color: var(--color-surface);
  padding-bottom: 1rem;
}
.fd-tabs {
  margin-bottom: 2.5rem;
  /* reference: the tab row is a full-width #f2f2f2 band behind the tabs */
  background-color: var(--color-surface-muted);
}
.fd-header {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.fd-title {
  position: relative;
  padding: 7rem 0;
  z-index: 2;
  min-height: 30rem;
}
@media (min-width: 927px) {
  .fd-title {
    min-height: 21rem;
  }
}
.fd-title .logo {
  max-width: 100%;
}
@media (max-width: 926px) {
  .fd-title .logo {
    max-width: 10rem;
  }
}
.fd-title .logo img {
  max-width: 100%;
}
@media (max-width: 926px) {
  .fd-title .logo img {
    max-width: 10rem;
  }
}
.fd-content {
  width: 100%;
  z-index: 2;
  color: var(--color-surface-soft);
}
.fd-heading {
  font-weight: 300;
  /* production assets-heading: 16px on a 17.6px (1.1) line */
  line-height: 1.1;
}
.fd-description {
  position: relative;
  z-index: 2;
  padding: 1.5rem 0;
  color: var(--color-surface-soft);
  background-color: rgba(51, 51, 51, 0.5);
  min-height: 22rem;
}
.fd-description .fd-desc-col {
  margin-bottom: 1.5rem;
}
.fd-description .fd-desc-col a {
  font-weight: bolder;
  color: var(--color-surface);
}
.fd-description .fd-desc-col a:hover {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: bolder;
}
.fd-poster {
  margin-top: -4.5rem;
}
@media (max-width: 926px) {
  .fd-poster {
    margin-bottom: 2rem;
  }
}
.fd-poster--empty {
  width: 100%;
  background-color: var(--color-text);
}
@media (max-width: 926px) {
  .fd-poster--empty {
    display: none;
  }
}
.fd-assets {
  margin-bottom: 2.5rem;
}
@media (max-width: 926px) {
  .fd-info-col .fd-facts {
    text-align: left;
  }
}
.fd-info-col a {
  font-weight: bolder;
  color: var(--color-surface);
}
.fd-edit {
  font-size: 1.25rem;
  color: var(--color-surface);
}
@media (max-width: 926px) {
  .fd-quickinfo {
    margin-bottom: 1rem;
  }
}
@media (max-width: 926px) {
  .fd-quickinfo-item {
    margin-top: 1rem;
  }
}
.fd-subheading {
  /* reference .section-moviedetail-subheading: 16px below the subtitle */
  margin-bottom: 1rem;
}
.ft-arrow.empty,
.ft-arrow-targets.empty {
  /* reference .transfers-arrow.empty: non-expandable rows show a passive
     light-gray chevron */
  cursor: default;
  color: #dcdcdc;
}
.fd-quickinfo {
  /* extracted (design pass, films 2660+4850): production's fact row
     starts EXACTLY at the title block's bottom (gap-above 0) — the
     title's own margin is the entire spacing; our extra 8px sat the
     GENRE/COUNTRY/YEAR row visibly lower than production */
  margin-top: 0;
}
/* extracted (design pass): production sets the version table off 59px
   below the Trailer/Features row (tableTop 951 - checkboxes 892); ours
   had only the 8px utility margin */
.fd-versions-filter {
  margin-bottom: 59px;
}
.logo-md {
  max-width: 15rem;
  max-height: 7rem;
}
@media (max-width: 926px) {
  .logo-md {
    max-width: 10rem;
    max-height: 4rem;
  }
}
.logo-md img {
  max-width: 15rem;
  max-height: 7rem;
}
@media (max-width: 926px) {
  .logo-md img {
    max-width: 10rem;
    max-height: 4rem;
  }
}
.fd-hero {
  min-height: 400px;
  background: transparent;
}
.fd-excerpt {
  width: 100%;
  display: block;
  /* reference: the More/Less link sits flush under the clamped text */
  margin-bottom: 0;
}
.fd-excerpt p {
  margin-bottom: 1.5rem;
}
.film-updated {
  float: right;
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: bold;
}
/* (FA's default-white icon base dropped: token utilities color the svgs) */
.transfer-icon svg.grey-i, .transfer-icon svg.grey {
  color: #b2b3b9;
}
.transfer-icon svg.red {
  color: #e00054;
}
.transfer-icon svg.green-i {
  color: #76c100;
}
.transfer-icon svg.yellow-i {
  color: #f7cb00;
}
a.grey {
  color: var(--color-text);
}
a.soft-gray {
  color: #dcdcdc;
}
.player-box {
  background: black none repeat scroll 0 0;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}
.fd-hero:after {
  position: absolute;
  content: "";
  background-color: rgba(51, 51, 51, 0.5);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.fd-header {
  background: linear-gradient(to bottom, #aaa 0%, #333 100%);
}
.content--transparent .fd-header {
  background: transparent;
}
.fd-description {
  min-height: 400px;
}
.loading .fd-desc-col {
  max-height: 280px;
  overflow: hidden;
}
body .fs-icon--lg {
  font-size: 20px;
}
.fd-excerpt {
  max-height: 260px;
  overflow: hidden;
}
a:not([href]):not([tabindex]).soft-gray {
  color: #dcdcdc;
}
.fd-excerpt p {
  margin-bottom: 1rem;
}
a.transfer-type-icon {
  color: inherit;
}
.film-spoken-language {
  width: 48px;
}
.film-subtitle-languages {
  width: 96px;
}
.film-dimension {
  width: 48px;
}
.film-resolution {
  width: 48px;
}
.film-aspect-ratio {
  width: 48px;
}
.film-audio-type {
  width: 48px;
}
.film-fps {
  width: 48px;
}
.film-duration {
  width: 128px;
}
.film-end-credit {
  width: 128px;
}
.film-distributor-logo {
  float: right;
}
.vb-item {
  min-width: 16px;
}
@media (min-width: 927px) {
  .film-info {
    min-height: 108px;
  }
  .logo-md {
    height: 4rem;
  }
}
.film-playlist-transfer-icon {
  width: 40px;
}
.fs-feedback {
  white-space: pre-wrap;
}
.fs-error-fatal {
  margin-bottom: 16px;
}
.film-info {
  min-height: 38px;
}
/* light tab bar under the hero (THEATRICAL/FOYER/HOMEVIDEO — the header
   nav-link look on a light surface) */
.fd-tabrow {
  display: flex;
  min-height: 48px;
}
.fd-tab {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 16px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-transform: uppercase;
}
.fd-tab--active {
  background-color: var(--color-accent);
  color: #f2f2f2;
}

/* reference: a non-public theatrical ORDER button renders struck through */
.playlist-order-button-not-public,
.playlist-order-button-not-public:hover {
  text-decoration: line-through;
}

/* webfoyer value-box arrangement (legacy .value-box--foyer, Old.scss) */
.value-box--foyer .value-box-item--language,
.value-box--foyer .value-box-item--subtitles {
  width: 50%;
}
.value-box--foyer .value-box-item--aspect {
  width: 50%;
  order: 3;
}
.value-box--foyer .value-box-item--audio {
  width: 50%;
  order: 4;
}
.value-box--foyer .value-box-item--date {
  width: 100%;
  order: 5;
}
@media (min-width: 927px) {
  .value-box--foyer .value-box-item--language,
  .value-box--foyer .value-box-item--subtitles,
  .value-box--foyer .value-box-item--audio,
  .value-box--foyer .value-box-item--frames {
    width: 20%;
  }
  .value-box--foyer .value-box-item--aspect {
    width: 60%;
    order: 1;
  }
  .value-box--foyer .value-box-item--audio {
    order: 2;
  }
  .value-box--foyer .value-box-item--date {
    width: 60%;
    order: 2;
  }
}

/* HOMEVIDEO conversion checklist (design pass, extracted legacyref film
   4910): 40px rows, production 29px checkbox (fs-toggle--compact via
   the fd-assets fs-scope), 300 14px/21px #737373 names on the version
   block's shared left edge (collapse 40 + icon 24 + 8 = 72 — the D-034
   tightened column); existing conversions inline (Video link + date). */
.fd-conversion-row td {
  height: 40px;
  vertical-align: middle;
  padding-top: 4px;
  padding-bottom: 4px;
}
.fd-conversion-check {
  display: inline-flex;
  align-items: center;
  width: 72px;
  vertical-align: middle;
}
.fd-conversion-name {
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  color: var(--color-text);
  vertical-align: middle;
}
.fd-conversion-existing {
  margin-left: 16px;
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text);
}
/* buttons at the tab bottom: left-aligned under the table, 16px pair
   gap (production register) */
.fd-convert-actions {
  /* production renders the buttons in the table's last row: left edge
     = version-block edge + that cell's 8px padding (extracted 53 vs
     block 45 on legacyref) */
  margin: 16px 0 32px 8px;
  display: flex;
  gap: 16px;
}
.fd-convert-actions .fs-btn {
  margin-bottom: 0;
}
/* Forms system (ex bootstrap forms + legacy custom controls), extracted
   from the flattened legacy cascade; fs-field/fs-check/fs-panel naming,
   colors -> tokens. Shared by every admin form via components/forms. */
.fs-field {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.25;
  color: #474747;
  background-color: #fff;
  background-image: none;
  background-clip: padding-box;
  border: 0px solid rgba(0, 0, 0, 0.15);
}
.fs-field::-ms-expand {
  background-color: transparent;
  border: 0;
}
.fs-field:focus {
  color: #474747;
  background-color: #fff;
  border-color: #66afe9;
  outline: none;
}
.fs-field::placeholder {
  color: #999;
  opacity: 1;
}
.fs-field:disabled, .fs-field[readonly] {
  background-color: var(--color-line-strong);
  opacity: 1;
}
.fs-field:disabled {
  cursor: not-allowed;
}
select.fs-field:not([size]):not([multiple]) {
  height: 2.5rem;
}
select.fs-field:focus::-ms-value {
  color: #474747;
  background-color: #fff;
}
.fs-field--static {
  min-height: 2.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}
.fs-form-group {
  margin-bottom: 1rem;
}
.fs-feedback {
  margin-top: 0.25rem;
}
.fs-field--danger {
  padding-right: 2.25rem;
  background-repeat: no-repeat;
  background-position: center right 0.625rem;
  background-size: 1.25rem 1.25rem;
}
.fs-has-danger .fs-feedback,
.fs-has-danger .fs-field-label,
.fs-has-danger .checkbox,
.fs-has-danger.checkbox label,
.fs-has-danger .fs-check {
  color: var(--color-danger);
}
.fs-has-danger .fs-field {
  border-color: var(--color-danger);
}
.fs-has-danger .fs-feedback {
  color: var(--color-danger);
}
.fs-has-danger .fs-field--danger {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9274f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9274f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
}
@media (min-width: 544px) {
  .fs-form-inline .fs-form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .fs-form-inline .fs-field {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .fs-form-inline .fs-field--static {
    display: inline-block;
  }
  .fs-form-inline .fs-input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .fs-form-inline .fs-input-group .fs-input-group-btn,
  .fs-form-inline .fs-input-group .fs-field {
    width: auto;
  }
  .fs-form-inline .fs-input-group > .fs-field {
    width: 100%;
  }
  .fs-form-inline .fs-field-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
}
.fs-input-group {
  position: relative;
  width: 100%;
  display: flex;
}
.fs-input-group .fs-field {
  position: relative;
  z-index: 2;
}
.fs-input-group .fs-field:focus, .fs-input-group .fs-field:active, .fs-input-group .fs-field:hover {
  z-index: 3;
}
.fs-input-group .fs-field {
  flex: 1;
  margin-bottom: 0;
}
.fs-input-group-btn {
  white-space: nowrap;
  vertical-align: middle;
}
.fs-input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}
.fs-input-group-btn > .fs-btn {
  position: relative;
}
.fs-input-group-btn > .fs-btn + .fs-btn {
  margin-left: 0px;
}
.fs-input-group-btn > .fs-btn:focus, .fs-input-group-btn > .fs-btn:active, .fs-input-group-btn > .fs-btn:hover {
  z-index: 3;
}
.fs-input-group-btn:not(:last-child) > .fs-btn {
  margin-right: 0px;
}
.fs-input-group-btn:not(:first-child) > .fs-btn {
  z-index: 2;
  margin-left: 0px;
}
.fs-input-group-btn:not(:first-child) > .fs-btn:focus, .fs-input-group-btn:not(:first-child) > .fs-btn:active, .fs-input-group-btn:not(:first-child) > .fs-btn:hover {
  z-index: 3;
}
.fs-check {
  position: relative;
  display: inline;
  padding-left: 1.5rem;
  cursor: pointer;
}
.fs-check + .fs-check {
  margin-left: 1rem;
}
.fs-check-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.fs-check-input:checked ~ .fs-check-box {
  color: #fff;
  background-color: #0074d9;
}
.fs-check-input:focus ~ .fs-check-box {
  box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.2rem #0074d9;
}
.fs-check-input:active ~ .fs-check-box {
  color: #fff;
  background-color: #84c6ff;
}
.fs-check-input:disabled ~ .fs-check-box {
  cursor: not-allowed;
  background-color: #eee;
}
.fs-check-input:disabled ~ .fs-check-label {
  color: #767676;
  cursor: not-allowed;
}
.fs-check-box {
  position: absolute;
  top: 0.0625rem;
  left: 0;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  user-select: none;
  background-color: #ddd;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}
.fs-check--checkbox .fs-check-input:checked ~ .fs-check-box {
  background-image: none;
}
.fs-check--checkbox .fs-check-input:indeterminate ~ .fs-check-box {
  background-color: var(--color-surface-soft);
  background-image: none;
}
.fs-panel {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: var(--color-line-strong);
}
@media (min-width: 544px) {
  .fs-panel {
    padding: 4rem 2rem;
  }
}
.fs-check {
  position: relative;
  display: inline;
  padding-left: 1.5rem;
  cursor: pointer;
}
.fs-check + .fs-check {
  margin-left: 1rem;
}
.fs-check-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.fs-check-input:checked ~ .fs-check-box {
  color: #fff;
  background-color: #0074d9;
}
.fs-check-input:focus ~ .fs-check-box {
  box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.2rem #0074d9;
}
.fs-check-input:active ~ .fs-check-box {
  color: #fff;
  background-color: #84c6ff;
}
.fs-check-input:disabled ~ .fs-check-box {
  cursor: not-allowed;
  background-color: #eee;
}
.fs-check-input:disabled ~ .fs-check-label {
  color: #767676;
  cursor: not-allowed;
}
.fs-check-box {
  position: absolute;
  top: 0.0625rem;
  left: 0;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  user-select: none;
  background-color: #ddd;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}
.fs-check--checkbox .fs-check-input:checked ~ .fs-check-box {
  background-image: none;
}
.fs-check--checkbox .fs-check-input:indeterminate ~ .fs-check-box {
  background-color: var(--color-surface-soft);
  background-image: none;
}
.fs-check--checkbox {
  font-size: 0.875rem;
}
.fs-check--checkbox {
  margin: 0;
  padding-left: 0;
  display: inline-block;
}
.fs-check--checkbox .fs-check-box {
  position: relative;
  width: 2.3rem;
  height: 2.3rem;
  background-color: var(--color-surface-soft);
  padding: 0.4rem 0.7rem;
  color: var(--color-line-strong);
  font-size: 1rem;
  float: left;
}
.fs-check--compact {
  margin-bottom: 0;
  margin-top: -0.5rem;
}
.fs-check--compact .fs-check-box {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0.5rem;
  padding: 0.2rem 0.3rem;
  margin-top: 0.2rem;
}
.fs-check--light .fs-check-box {
  background-color: var(--color-surface) !important;
}
.fs-check--light .fs-check-input:disabled ~ .fs-check-box {
  background-color: var(--color-surface-soft) !important;
}
.fs-check--checkbox .fs-check-label {
  float: left;
  padding: 0.625rem 0 0.625rem 1rem;
  line-height: 1.25;
}
.fs-check--checkbox .fs-check-input:checked ~ .fs-check-box {
  background-color: var(--color-surface-soft);
  color: var(--color-accent);
}
.fs-section-title {
  margin-bottom: 2.5rem;
}
.fs-panel--page {
  margin-top: -5.5rem;
  color: var(--color-text-strong);
}
.fs-panel--page hr {
  border-top: 4px solid var(--color-line-strong);
}
.fs-field {
  border: 4px solid var(--color-surface-muted);
}
.fs-field--light {
  border: none;
}
.fs-field--text {
  background: transparent;
  padding-left: 0;
  margin-bottom: 0;
}
.fs-label-mini {
  padding-top: 0.6rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 500;
}
.fs-panel {
  background-color: var(--color-surface-muted);
  padding: 2rem 2rem;
}
.fs-check--checkbox .fs-check-box .fs-icon {
  opacity: 0;
}
.fs-check--checkbox .fs-check-input:checked ~ .fs-check-box .fs-icon {
  opacity: 1;
}
.fs-check-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.fs-check--compact {
  margin-top: -8px;
  margin-bottom: 0px;
}
.fs-has-danger .fs-field--danger {
  border-color: var(--color-danger);
  border-style: solid;
}
.fs-check + .fs-check {
  margin-left: 1rem;
}
.fs-feedback {
  white-space: pre-wrap;
}
.fs-checkboxes {
  max-height: 256px;
  overflow: auto;
}
.fs-checkboxes-label {
  display: block;
  margin: 0;
  line-height: 1.25em;
}
.fs-error-fatal {
  margin-bottom: 16px;
}
.storage-table__cpl--group .fs-check-box {
  background-color: white !important;
}
/* admin-form select (production `custom-select filterbar-select-light`):
   white, borderless, 14px/300, bootstrap double-triangle chevron. The
   filterbar `.fs-select` rules are scoped to .fs-filterbar/.fs-scope and
   never reached the admin forms — their selects rendered browser-default
   (all-pages inventory, 2026-07-13). */
select.fs-select--light {
  display: inline-block;
  max-width: 100%;
  appearance: none;
  padding: 10px 32px 10px 16px;
  font-size: 14px;
  font-weight: 300;
  line-height: 17.5px;
  color: var(--color-text);
  border: 0;
  border-radius: 0;
  background: #fff
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
    no-repeat calc(100% - 12px) 50% / 8px 10px;
}

/* dropdown panel (legacy .dropdown-menu; used by the playlist-form DCP
   search results) */
.fs-menu {
  position: absolute;
  z-index: 1000;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
/* Sign-in pages: full port of new_design/_login.scss (mask over the photo
   slider, black logo plate, partner-logo flickity strip), colors -> tokens. */
.app-pane--login {
  position: absolute;
  overflow: hidden;
  display: table;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.login {
  display: table;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.login-slider {
  background: rgba(51, 51, 51, 0.5);
  padding: 4rem 0;
  width: 100%;
  overflow-x: hidden;
}
.login-slider .fs-container-fluid {
  padding: 0 !important;
}
.login-logo {
  color: var(--color-surface);
  padding: 1rem;
  background: black;
  margin: 4rem 0;
  display: inline-block;
}
.login-logo .fs-lead {
  margin: 0;
}
@media (max-width: 991px) {
  .login-logo .fs-display {
    font-size: 2rem;
  }
  .login-logo .fs-lead {
    font-size: 1rem;
  }
}
.login-form {
  padding: 4rem;
  background: rgba(51, 51, 51, 0.8);
}
.login-form .fs-label-mini {
  color: var(--color-surface);
}
.login-form .fs-check-label {
  color: var(--color-surface);
}
@media (max-width: 991px) {
  .login-form {
    padding: 2rem;
  }
}
@media (max-width: 926px) {
  .login-form {
    padding: 1rem;
  }
}
.login-info {
  background: rgba(51, 51, 51, 0.8);
  padding: 2rem 0;
  color: var(--color-surface);
}
.login-infobox {
  padding: 1rem;
  width: 100%;
}
.login-infobox a {
  color: var(--color-surface);
  text-decoration: underline;
}
.login-infobox a:hover {
  text-decoration: none;
}
.login .fs-form-text a {
  color: var(--color-surface);
}

.carousel-cell {
  width: 50%;
  height: 5rem;
  padding: 0 2rem;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.carousel-cell img {
  max-width: 100%;
  max-height: 5rem;
  margin: 0 auto;
}
@media (min-width: 544px) {
  .carousel-cell {
    width: 33.3333333333%;
  }
}
@media (min-width: 927px) {
  .carousel-cell {
    width: 25%;
  }
}
@media (min-width: 992px) {
  .carousel-cell {
    width: 16.6666666667%;
  }
}
@media (min-width: 1200px) {
  .carousel-cell {
    width: 12.5%;
  }
}
.carousel-cell {
  width: 10%;
}

/*! Flickity v2.0.2
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}
/* Misc shared sections/controls extracted from the legacy cascade
   (page sections, modal close button, filter-bar strips, contact cards). */
.fs-card {
  position: relative;
  display: block;
  margin-bottom: 2.5rem;
  background-color: #fff;
  border: 0px solid rgba(0, 0, 0, 0.125);
}
.fs-card-block::after {
  content: "";
  display: table;
  clear: both;
}
.fs-card-block {
  padding: 0px;
}
.fs-card--inverse .fs-card-title {
  color: #fff;
}
.fs-alert--dismissible .fs-close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
.fs-close {
  float: right;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
}
.fs-close:focus, .fs-close:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
}
button.fs-close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}
.fs-filterbar {
  margin-bottom: 1rem;
}
@media (min-width: 544px) {
  .fs-filterbar {
    margin-bottom: 0.5rem;
  }
}
.fs-filterbar .fs-form-inline {
  margin-bottom: 1rem;
}
@media (min-width: 544px) {
  .fs-filterbar .fs-form-inline {
    float: left;
  }
  .fs-filterbar .fs-form-inline:first-child {
    margin-right: 1rem;
  }
}
@media (max-width: 926px) {
  .fs-filterbar .fs-form-inline:first-child {
    margin-top: 0;
  }
}
.fs-filterbar .fs-form-group {
  display: inline-block;
  margin: 0 1rem 1rem 0;
  height: 2.25rem;
}
.fs-filterbar .fs-form-group:last-child {
  margin-right: 0;
}
.fs-card-block {
  padding: 0 2px;
}
.fs-card--inverse {
  padding: 2rem;
  color: var(--color-surface);
  background-color: var(--color-ink);
}
.fs-card a {
  color: var(--color-surface) !important;
}
.fs-card ul {
  margin-bottom: 0;
}
.fs-section-title {
  margin-bottom: 2.5rem;
}
.fs-section-subtitle {
  margin-bottom: 1rem;
}
.fs-filterbar-section {
  overflow: auto;
}
.fs-filterbar .fs-form-group {
  display: inline-block;
  height: 2.25rem;
}
.fs-attach-file {
  margin: 6px;
  margin-left: 0px;
}
/* organizations map (ex maps.scss): the canvas fills the pane below the
   header; keep Google's controls clear of the right edge */
#map {
  width: 100%;
  position: absolute !important;
  left: 0;
  bottom: 0;
  top: 110px;
}

/* Feature-page rules ported from the legacy cascade (users/organizations/
   storage/suisa/targets/profile/transfers/screeners hooks, film info
   badges, contact cards, alerts, legacy selects) — BEM __ normalized to
   single-dash, colors -> tokens. */
.fs-fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.fs-fade.in {
  opacity: 1;
}
.fs-dropdown {
  position: relative;
}
.fs-select-native {
  display: inline-block;
  max-width: 100%;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  padding-right: 0.75rem \9 ;
  color: #474747;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-image: none \9 ;
  background-size: 8px 10px;
  border: 0px solid rgba(0, 0, 0, 0.15);
  -moz-appearance: none;
  -webkit-appearance: none;
}
.fs-select-native:focus {
  border-color: #51a7e8;
  outline: none;
}
.fs-select-native:focus::-ms-value {
  color: #474747;
  background-color: #fff;
}
.fs-select-native:disabled {
  color: var(--color-text);
  cursor: not-allowed;
  background-color: var(--color-line-strong);
}
.fs-select-native::-ms-expand {
  opacity: 0;
}
.fs-select--sm {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 75%;
}
.fs-card {
  position: relative;
  display: block;
  margin-bottom: 2.5rem;
  background-color: #fff;
  border: 0px solid rgba(0, 0, 0, 0.125);
}
.fs-card-title {
  margin-bottom: 2.5rem;
}
.fs-card--inverse .fs-card-title {
  color: #fff;
}
.fs-alert {
  padding: 15px;
  margin-bottom: 1rem;
  border: 0px solid transparent;
}
.fs-alert--success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}
.fs-alert--danger {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}
.fs-alert--warning {
  background-color: #fcf8e3;
  border-color: rgb(249.5322580645, 242.2419354839, 203.9677419355);
  color: #8a6d3b;
}
.fs-alert--warning hr {
  border-top-color: rgb(247.064516129, 236.4838709677, 180.935483871);
}
.fs-select-native {
  display: inline-block;
  max-width: 100%;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  padding-right: 0.75rem \9 ;
  color: #474747;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-image: none \9 ;
  background-size: 8px 10px;
  border: 0px solid rgba(0, 0, 0, 0.15);
  -moz-appearance: none;
  -webkit-appearance: none;
}
.fs-select-native:focus {
  border-color: #51a7e8;
  outline: none;
}
.fs-select-native:focus::-ms-value {
  color: #474747;
  background-color: #fff;
}
.fs-select-native:disabled {
  color: var(--color-text);
  cursor: not-allowed;
  background-color: var(--color-line-strong);
}
.fs-select-native::-ms-expand {
  opacity: 0;
}
.fs-select--sm {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 75%;
}
.fs-select-classic {
  display: inline-block;
  padding: 0.625rem 2rem 0.625rem 1rem;
  line-height: 1.25;
  border: none;
  border-radius: 0;
  background-color: var(--color-surface-muted);
  font-size: 0.875rem;
  color: var(--color-text);
}
@media (max-width: 543px) {
  .fs-select-classic {
    width: 100%;
  }
}
.fs-select-classic.fs-select--light {
  background-color: var(--color-surface);
}
.app-pane--login {
  position: absolute;
  overflow: hidden;
  display: table;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.login-info {
  background: rgba(51, 51, 51, 0.8);
  padding: 2rem 0;
  color: var(--color-surface);
}
.carousel-cell {
  width: 50%;
  height: 5rem;
  padding: 0 2rem;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.carousel-cell img {
  max-width: 100%;
  max-height: 5rem;
  margin: 0 auto;
}
@media (min-width: 544px) {
  .carousel-cell {
    width: 33.3333333333%;
  }
}
@media (min-width: 927px) {
  .carousel-cell {
    width: 25%;
  }
}
@media (min-width: 992px) {
  .carousel-cell {
    width: 16.6666666667%;
  }
}
@media (min-width: 1200px) {
  .carousel-cell {
    width: 12.5%;
  }
}
@media (min-width: 1600px) {
  .carousel-cell {
    width: 10%;
  }
}
/*! Flickity v2.0.2
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus {
  outline: none;
}
.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}
.table .ft-body--asset-details td {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.table .ft-body--asset-details {
  display: table-row-group !important;
}
.table .ft-body--asset-details.in {
  display: table-row-group !important;
}
.table .ft-body--asset-details .ft-row--asset-detail:last-child td {
  padding-bottom: 0.75rem;
}
.table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-date {
  display: inline-block;
  width: 8rem;
  border-right: 1px solid var(--color-line-strong);
  padding-right: 0.5rem;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-date {
    border-right: 0;
  }
}
.table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-name {
  display: inline;
  width: auto;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
@media (max-width: 991px) {
  .table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-name {
    padding-left: 0;
    padding-right: 0;
    display: inline-block;
  }
}
/* (round 25: CPL toggle moved to the runtime .ft-stack--cpl-column model in kit-tables) */
.app-pane--full {
  padding: 0;
}
.fs-card a {
  color: var(--color-surface) !important;
}
.fs-card ul {
  margin-bottom: 0;
}
.ft-heading {
  margin: 0 0 0.5rem 0;
  display: inline-block;
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-text);
  min-width: 6rem;
}
.ft-status-item {
  display: inline-block;
  width: 40%;
  font-size: 1rem;
}
.ft-status-item .ft-status-collapse {
  font-size: 0.875rem;
  transform: rotate(90deg);
  transition: all 0.5s;
}
.ft-status-item.collapsed .ft-status-collapse {
  transform: rotate(0deg);
  transition: all 0.5s;
}
.film-edit .playlist a {
  word-wrap: break-word;
  text-overflow: ellipsis;
}
.screener-recipients {
  position: relative;
  height: 38px;
}
.screener-recipients-control {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 4px 8px;
  background: var(--color-surface);
  border: 4px solid var(--color-surface-muted);
  cursor: text;
}
.screener-recipients-choice {
  display: inline-flex;
  align-items: center;
  background: var(--color-text);
  border: 3px solid var(--color-text);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.875rem;
  color: var(--color-surface);
  white-space: nowrap;
  margin-top: 2px;
}
.screener-recipients-choice-remove {
  background: none;
  border: none;
  padding: 0 4px 0 0;
  margin: 0;
  cursor: pointer;
  color: var(--color-surface);
  font-size: 14px;
  line-height: 1;
}
.screener-recipients-choice-remove:hover {
  color: var(--color-line-strong);
}
.screener-recipients-search {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  padding: 2px 0;
  background: transparent;
  font-size: inherit;
  line-height: 1.5;
}
.screener-recipients-search::placeholder {
  color: var(--color-text);
  opacity: 1;
}
.screener-recipients-dropdown {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 100%;
  background: var(--color-surface-muted);
  border: 4px solid var(--color-surface-muted);
  border-top: none;
  z-index: 9999;
  max-height: 300px;
  overflow-y: auto;
}
.screener-recipients-option {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--color-ink);
  cursor: pointer;
}
.screener-recipients-option:hover {
  background: var(--color-accent);
  color: var(--color-surface);
}
.app-pane--login small a:not(.fs-btn) {
  text-decoration: none;
}
.app-pane--login small a:not(.fs-btn):hover {
  text-decoration: underline;
}
body.light.body--login, .content.app-pane--login {
  background: black;
  overflow: auto;
}
/* (round 9) the completion cell obeys the global no-wrap hard rule */
.transfers-clear-filter {
  position: absolute;
  right: 12px;
  top: 20px;
}
@media (max-width: 926px) {
  .ft-cell--transfer {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
}
/* reference cell bottom padding is the plain 5.6px — the ported legacy
   0.75rem override left too much air under the CPL text (round 2) */
.table .ft-body--asset-details.in.hidden {
  display: none !important;
}
.ft-cell--transfer-cpl--sm {
  /* flush left edge with the progress percentage above (round 7,
     legacyref: both at one x) — same 4px lead-in as the progress cell */
  padding-left: 4px !important;
}
.ft-cell--transfer-playlists {
  /* the reference's exact paint (round 6 rollback of rounds 2-5): text
     pulled up toward the main row, box kept — tail row 27.6px, text-to-
     divider 17.6px, both extracted from legacyref */
  position: relative;
  top: -8px;
}
/* (round 25: CPL toggle moved to the runtime .ft-stack--cpl-column model in kit-tables) */
/* (round 25: CPL toggle moved to the runtime .ft-stack--cpl-column model in kit-tables) */
/* (round 25: CPL toggle moved to the runtime .ft-stack--cpl-column model in kit-tables) */
@media (max-width: 926px) {
  .transfers--admin--list .ft-cell--transfer-cpl--sm {
    display: none !important;
  }
}
/* (round 25: CPL toggle moved to the runtime .ft-stack--cpl-column model in kit-tables) */
@media (max-width: 926px) {
  .transfers--admin--list .ft-row--transfer--sm {
    display: none;
  }
}
@media (max-width: 926px) {
  .transfers--admin--list [class^=table-cell--transfer] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
  }
  .transfers--admin--list [class^=table-cell--transfer]:last-child {
    padding-bottom: 0.75rem !important;
  }
}
.tablesaw-stack tbody tr {
  border-bottom: 1px solid #dfdfdf;
}
.fs-select-classic.fs-select--light:disabled {
  background: #ddd;
}
a.fs-link-muted {
  color: inherit;
}
.transfers-search-form {
  padding-top: 4px;
}
.films-search {
  padding-top: 4px !important;
  margin-bottom: 18px;
}
.playlist-delivery-organization-chevron,
.playlist-delivery-organization-name,
.playlist-delivery-organization-transfer-status,
.playlist-delivery-screen-name {
  position: relative;
  top: 8px;
}
.table .ft-body--asset-details .ft-cell--asset-detail {
  padding-top: 4px !important;
}
.table .table.playlist-delivery-organizations {
  margin-bottom: 12px;
}
.transfers-clear-filter {
  margin-top: -12px;
}
.screeners-filter {
  /* aligns the screeners bar's controls with /films and /transfers
     (their wrappers contribute 4px this bar's plain form lacks) —
     asserted by the sweep's three-page parity gate. Padding, not
     margin: the section box must start at the same y as the others. */
  padding-top: 4px;
}
a.transfers-type-icon {
  color: inherit;
}
.film-spoken-language {
  width: 48px;
}
.film-subtitle-languages {
  width: 96px;
}
.film-dimension {
  width: 48px;
}
.film-resolution {
  width: 48px;
}
.film-aspect-ratio {
  width: 48px;
}
.film-audio-type {
  width: 48px;
}
.film-fps {
  width: 48px;
}
.film-duration {
  width: 128px;
}
.film-end-credit {
  width: 128px;
}
@media (min-width: 543px) {
  .films-distributors, .transfers-distributors {
    width: 220px;
  }
}
.film-distributor-logo {
  float: right;
}
@media (max-width: 991px) {
  .table .ft-body--asset-details .ft-cell--asset-detail .ft-detail-name {
    padding-left: 8px;
  }
}
.films-search {
  overflow: hidden;
}
@media (min-width: 543px) {
  .transfers-filter-status,
  .transfers-filter-type,
  .transfers-filter-date {
    width: 120px;
  }
}
@media (min-width: 927px) {
  .film-info {
    min-height: 108px;
  }
}
@media (max-width: 926px) {
  .transfers--admin--list .ft-cell--transfer-cpl {
    display: block;
  }
}
.transfers-search-form {
  overflow: hidden;
}
@media (min-width: 927px) {
  .ft-cell--asset-detail {
    white-space: nowrap;
  }
}
.ft-heading {
  padding-left: 4px;
}
.table .table.playlist-delivery-organizations {
  margin-top: -8px;
  margin-bottom: 8px;
}
.film-playlist-transfer-icon {
  width: 40px;
}
.films-image {
  position: absolute;
  top: 0px;
}
.fs-select-native {
  max-width: 100%;
}
.form-file-container {
  padding: 0;
  margin: 0;
}
.storage-table-cpls {
  white-space: nowrap;
}
.storage-table-cpls p {
  height: 23px;
}
.storage-modal-footer {
  height: 45px;
}
.storage-modal-btn:disabled {
  opacity: 0.5;
}
.organizations-item {
  border-top: 4px solid var(--color-surface-muted);
}
.organizations-logo-container {
  background-color: var(--color-line-strong);
  padding: 1rem;
  text-align: center;
  height: 8rem;
  width: 8rem;
  max-height: none;
  max-width: none;
  margin-right: 0;
}
.organizations-logo-image {
  max-height: 6rem;
  max-width: 6rem;
}
.films-ingest-dcps {
  width: 927px;
}
.table .ft-body--asset-details .ft-cell--asset-detail {
  padding: 0px;
  padding-top: 8px;
}
.film-info {
  min-height: 38px;
}
/* film-edit version grid — production parity (design pass, extracted
   legacyref /films/4910/edit @1600): full content width, fs-table
   header register (700 14px uppercase #737373), production column
   widths (preload 126, DE/FR/IT 71, Hide 78, public 104, invoice 120;
   title takes the rest), 12px cell padding with the 29px production
   checkbox (row pitch 56.5), light row separators. NOTE: D-031's
   fixed-minima+weighted-surplus doctrine is Transfers-specific — this
   grid simply matches production. */
table.film-edit {
  width: 100%;
}
.film-edit th {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 12px;
  text-align: left;
}
.film-edit td {
  padding: 12px;
  vertical-align: top;
  /* production row typography: 300 14px/21px (ours inherited the 16px
     document font — the round-23 property diff) */
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  color: var(--color-text);
}
.film-edit tbody tr + tr td,
.film-edit tbody + tbody tr:first-child td {
  /* production separator: #d9d9d9 hairline (its computed border reads
     0px yet the row pitch carries 0.5px — a subpixel border) */
  border-top: 0.5px solid #d9d9d9;
}
/* production's checkbox control box is 29x32 — the 32 drives the
   56.5px row pitch (12 + 32 + 12 + hairline) */
.film-edit .fs-check {
  min-height: 32px;
  align-items: center;
  display: inline-flex;
  margin: 0;
}
.film-edit th.fe-col--preload { width: 126px; }
.film-edit th.fe-col--lang { width: 71px; }
.film-edit th.fe-col--hide { width: 78px; }
.film-edit th.fe-col--public { width: 104px; }
.film-edit th.fe-col--invoice { width: 120px; }
.film-edit .fs-check-box {
  width: 29px;
  height: 29px;
}
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}

@layer theme {
  :root, :host {
    --spacing: .25rem;
    --breakpoint-md: 927px;
    --breakpoint-lg: 1586px;
    --container-3xl: 48rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --leading-tight: 1.25;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --color-text: #737373;
    --color-text-strong: #4d4d4d;
    --color-text-heading: #4a4a4a;
    --color-ink: #333;
    --color-surface: #fff;
    --color-surface-muted: #f2f2f2;
    --color-surface-soft: #f5f5f5;
    --color-line: #f2f2f2;
    --color-line-strong: #d9d9d9;
    --color-accent: #1183cf;
    --color-success: #7ed321;
    --color-danger: #d0021b;
    --color-action-success: #5cb85c;
    --color-kdm-valid: #76c100;
    --color-kdm-future: #f7cb00;
    --color-kdm-expired: #e00054;
    --color-status-muted: #b2b3b9;
    --color-status-waiting: #d9d9d9;
    --font-sans: Gotham, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
    --text-xs: 12px;
    --text-xs--line-height: 15px;
    --text-sm: 14px;
    --text-sm--line-height: 21px;
    --text-base: 16px;
    --text-base--line-height: 24px;
    --text-display: 40px;
    --text-display--line-height: 44px;
    --spacing-control: 34px;
    --shadow-dropdown: 0 2px 8px #0003;
  }
}

.collapse {
  visibility: collapse;
}

.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.static {
  position: static;
}

.top-0 {
  top: 0;
}

.top-2026 {
  top: calc(var(--spacing) * 2026);
}

.-left-0\.5 {
  left: calc(var(--spacing) * -.5);
}

.left-0 {
  left: 0;
}

.isolate {
  isolation: isolate;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.container {
  width: 100%;
}

@media (min-width: 927px) {
  .container {
    max-width: 927px;
  }
}

@media (min-width: 1586px) {
  .container {
    max-width: 1586px;
  }
}

@media (min-width: 40rem) {
  .container {
    max-width: 40rem;
  }
}

@media (min-width: 80rem) {
  .container {
    max-width: 80rem;
  }
}

@media (min-width: 96rem) {
  .container {
    max-width: 96rem;
  }
}

.m-0 {
  margin: 0;
}

.mx-8 {
  margin-inline: calc(var(--spacing) * 8);
}

.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}

.mt-5 {
  margin-top: calc(var(--spacing) * 5);
}

.mt-6 {
  margin-top: calc(var(--spacing) * 6);
}

.mr-2 {
  margin-right: calc(var(--spacing) * 2);
}

.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}

.mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}

.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}

.mb-6 {
  margin-bottom: calc(var(--spacing) * 6);
}

.mb-8 {
  margin-bottom: calc(var(--spacing) * 8);
}

.mb-10 {
  margin-bottom: calc(var(--spacing) * 10);
}

.mb-11 {
  margin-bottom: calc(var(--spacing) * 11);
}

.ml-2 {
  margin-left: calc(var(--spacing) * 2);
}

.ml-auto {
  margin-left: auto;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

.list-item {
  display: list-item;
}

.table {
  display: table;
}

.table-cell {
  display: table-cell;
}

.table-row {
  display: table-row;
}

.size-\[29px\] {
  width: 29px;
  height: 29px;
}

.h-\[37px\] {
  height: 37px;
}

.h-control {
  height: var(--spacing-control);
}

.w-1\/2 {
  width: 50%;
}

.w-10 {
  width: calc(var(--spacing) * 10);
}

.w-20 {
  width: calc(var(--spacing) * 20);
}

.w-40 {
  width: calc(var(--spacing) * 40);
}

.w-60 {
  width: calc(var(--spacing) * 60);
}

.w-\[673px\] {
  width: 673px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.max-w-3xl {
  max-width: var(--container-3xl);
}

.max-w-full {
  max-width: 100%;
}

.min-w-0 {
  min-width: 0;
}

.flex-1 {
  flex: 1;
}

.flex-shrink, .shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.table-fixed {
  table-layout: fixed;
}

.border-collapse {
  border-collapse: collapse;
}

.rotate-90 {
  rotate: 90deg;
}

.transform {
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  appearance: none;
}

.grid-cols-\[10rem_1fr\] {
  grid-template-columns: 10rem 1fr;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap-4 {
  gap: calc(var(--spacing) * 4);
}

.gap-6 {
  gap: calc(var(--spacing) * 6);
}

:where(.space-y-1 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
  margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
}

.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}

.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}

.border-none {
  --tw-border-style: none;
  border-style: none;
}

.border-line {
  border-color: var(--color-line);
}

.bg-accent {
  background-color: var(--color-accent);
}

.bg-ink {
  background-color: var(--color-ink);
}

.bg-surface {
  background-color: var(--color-surface);
}

.bg-surface-muted {
  background-color: var(--color-surface-muted);
}

.bg-surface-soft {
  background-color: var(--color-surface-soft);
}

.bg-transparent {
  background-color: #0000;
}

.p-0 {
  padding: 0;
}

.p-3 {
  padding: calc(var(--spacing) * 3);
}

.p-4 {
  padding: calc(var(--spacing) * 4);
}

.p-6 {
  padding: calc(var(--spacing) * 6);
}

.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}

.px-8 {
  padding-inline: calc(var(--spacing) * 8);
}

.py-1 {
  padding-block: var(--spacing);
}

.py-1\.5 {
  padding-block: calc(var(--spacing) * 1.5);
}

.py-2 {
  padding-block: calc(var(--spacing) * 2);
}

.py-2\.5 {
  padding-block: calc(var(--spacing) * 2.5);
}

.py-3 {
  padding-block: calc(var(--spacing) * 3);
}

.py-16 {
  padding-block: calc(var(--spacing) * 16);
}

.pt-1 {
  padding-top: var(--spacing);
}

.pt-2 {
  padding-top: calc(var(--spacing) * 2);
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.pl-2 {
  padding-left: calc(var(--spacing) * 2);
}

.pl-3 {
  padding-left: calc(var(--spacing) * 3);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.align-middle {
  vertical-align: middle;
}

.font-sans {
  font-family: var(--font-sans);
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}

.text-display {
  font-size: var(--text-display);
  line-height: var(--tw-leading, var(--text-display--line-height));
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}

.leading-tight {
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
}

.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

.font-light {
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
}

.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.font-normal {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}

.whitespace-nowrap {
  white-space: nowrap;
}

.text-accent {
  color: var(--color-accent);
}

.text-danger {
  color: var(--color-danger);
}

.text-kdm-expired {
  color: var(--color-kdm-expired);
}

.text-kdm-future {
  color: var(--color-kdm-future);
}

.text-kdm-valid {
  color: var(--color-kdm-valid);
}

.text-line-strong {
  color: var(--color-line-strong);
}

.text-status-muted {
  color: var(--color-status-muted);
}

.text-status-waiting {
  color: var(--color-status-waiting);
}

.text-success {
  color: var(--color-success);
}

.text-surface {
  color: var(--color-surface);
}

.text-surface-muted {
  color: var(--color-surface-muted);
}

.text-text {
  color: var(--color-text);
}

.text-text-heading {
  color: var(--color-text-heading);
}

.text-text-strong {
  color: var(--color-text-strong);
}

.text-transparent {
  color: #0000;
}

.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
}

.opacity-40 {
  opacity: .4;
}

.opacity-60 {
  opacity: .6;
}

.opacity-65 {
  opacity: .65;
}

.shadow-dropdown {
  --tw-shadow: 0 2px 8px var(--tw-shadow-color, #0003);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.filter {
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.ease-in-out {
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}

.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}

.after\:absolute:after {
  content: var(--tw-content);
  position: absolute;
}

.after\:inset-0:after {
  content: var(--tw-content);
  inset: 0;
}

.after\:clear-both:after {
  content: var(--tw-content);
  clear: both;
}

.after\:block:after {
  content: var(--tw-content);
  display: block;
}

.after\:text-center:after {
  content: var(--tw-content);
  text-align: center;
}

.after\:text-\[17px\]:after {
  content: var(--tw-content);
  font-size: 17px;
}

.after\:leading-\[29px\]:after {
  content: var(--tw-content);
  --tw-leading: 29px;
  line-height: 29px;
}

.after\:font-bold:after {
  content: var(--tw-content);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

.after\:text-accent:after {
  content: var(--tw-content);
  color: var(--color-accent);
}

.after\:content-\[\'\'\]:after {
  --tw-content: "";
  content: var(--tw-content);
}

.checked\:after\:content-\[\'\\2713\'\]:checked:after {
  --tw-content: "✓";
  content: var(--tw-content);
}

.indeterminate\:after\:content-\[\'\\2013\'\]:indeterminate:after {
  --tw-content: "–";
  content: var(--tw-content);
}

@media (hover: hover) {
  .hover\:bg-\[\#0e6cab\]:hover {
    background-color: #0e6cab;
  }
}

@media (min-width: 927px) {
  .md\:hidden {
    display: none;
  }

  .md\:inline-block {
    display: inline-block;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-1\/3 {
    width: 33.3333%;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-1\/6 {
    width: 16.6667%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-7\/12 {
    width: 58.3333%;
  }

  .md\:w-full {
    width: 100%;
  }
}

@media (min-width: 1586px) {
  .lg\:w-1\/4 {
    width: 25%;
  }
}

@media (min-width: 40rem) {
  .sm\:ml-\[33\.3333\%\] {
    margin-left: 33.3333%;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-1\/3 {
    width: 33.3333%;
  }

  .sm\:w-2\/3 {
    width: 66.6667%;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}