/* Public Dynamic CSS v1.0.2 */
/* Global styles */
/*
Dark Blue: #00437a
Blue:      #005c9b
Purple:    #7d0082
*/

html { width: 100%; height: 100%; }
body.login-page {
	width: 100%;
	height: 100%;
	font-family: "Lato Regular", "Segoe UI","Helvetica Neue",Arial,sans-serif;
	color: #ffffff;
	background: #1d1d1d url('https://www.learnershq.com/themes/default/images/login-background-standard.jpg') no-repeat center center;
    background-size: cover !important;
	background-attachment: fixed !important;
}
body.login-page a, body.login-page a:link { color: #ffffff; text-decoration: none; }
body.login-page a:visited { color: #ffffff }
body.login-page a:focus { color: #ffffff; }
body.login-page a:hover { color: #2dc26b; }
body.login-page a:active { color: #ffffff; }
body.login-page img, body.login-page iframe { max-width: 100% }
body.login-page.fa { min-width: 16px; }
body.login-page .col-add { display: none; }
body.login-page .container {
	width: 100%;
    height: 100%;
	max-width: 5120px;
    padding-right: 0;
    padding-left: 0;
}

body.login-page .navbar {
	background-color: #3b82f6 !important;
}
body.login-page .landing-container {
	height: 100%;
	height: calc(100% - 35px);
	padding-top: 15px;
}
body.login-page .landing-row{
	height: 100%;
}
body.login-page .col-logo {
	text-align: center;
}
body.login-page .logo, .login-wrapper {
	visibility: hidden;
}
body.login-page .login-wrapper {
	padding: 16px 16px 0;
    background: #ffffff;
    background: rgba(255, 255, 255, 0);
    border: 1px solid #3b82f6;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4);
    -webkit-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4);
    box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4);
}
body.login-page .login-wrapper h1 {
	color: #ffffff;
	font-size: 2.1rem;
}
body.login-page .login-wrapper p {
	color: #fff;
}
body.login-page .login-wrapper .input-group-addon {
	min-width: 42px;
	color: #fff;
	background-color: #3b82f6;
	border: 0px solid rgba(0,0,0,.15);
	text-align: center;
    align-items: center;
    justify-content: center;
}
body.login-page .login-wrapper .form-control {
	border: 1px solid #3b82f6;
}
body.login-page .login-wrapper .form-control:hover,
body.login-page .login-wrapper .form-control:focus {
	border: 1px solid #80bdff;
}
body.login-page .login-wrapper .btn {
	cursor: pointer;
    background: #3b82f6;
}
body.login-page .login-wrapper .btn:hover {
    background: #3b82f6;
    border: 1px solid #3b82f6;
    opacity: 0.85;
}
body.login-page .form-msg {
	min-height: 28px;
    margin-top: .5rem;
    font-weight: bold;
    color: #cc0000;
}
body.login-page .form-msg #js-msg {
	display: none;
}
body.login-page .loader {
    display: none;
    border: 10px solid #fff;
    border-radius: 50%;
    border-top: 10px solid #3b82f6;
    width: 48px;
    height: 48px;
    -webkit-animation: loader-spin 1.25s linear infinite;
    animation: loader-spin 1.25s linear infinite;
}
body.login-page .loader-login {
    width: 36px;
    height: 36px;
    border: 8px solid #fff;
    border-top: 8px solid #3b82f6;
    margin: 0 8px;
}
@-webkit-keyframes loader-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.login-page .footer {
	width: 100%;
	margin-right: auto;
    margin-left: auto;
    padding: 8px 15px;
	font-size: 0.8rem;
	color: #ffffff;
	background-color: #3b82f6 !important;
}
body.login-page .footer a, body.login-page .footer a:link { color: #ffffff; }
body.login-page .footer a:hover { color: #005c9b; }

body.login-page .tooltip.in {
	opacity: 1;
}
body.login-page .login-contact,
body.login-page #dialog-slider-warning {
	display: none;
}
.login-page .grecaptcha-badge {
	z-index: 1031;
}
body.login-page .row-public,
body.login-page .student-menu-flyout {
    display: none!important;
}

/* Google Sign In Button */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: #131314;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #e3e3e3;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
  border-color: #8e918f;
  width: 100%;
  margin: 15px 0;
}
.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 10px;
  min-width: 20px;
  width: 20px;
}
.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}
.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 0;
  flex-grow: 0;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.gsi-material-button:disabled {
  cursor: default;
  background-color: #13131461;
  border-color: #8e918f1f;
}
.gsi-material-button:disabled .gsi-material-button-state {
  background-color: #e3e3e31f;
}
.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}
.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}
.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: white;
  opacity: 12%;
}
.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}
.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: white;
  opacity: 8%;
}
.google_login_or {
  margin-bottom: 15px;
  display: block;
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
}

/* Scroll bars */
::-webkit-scrollbar {
    width: 10px;
	background: #fff;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 14px #d0d0d0;
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 10px #006fbb;
    background: #fff;
	border-radius: 3px;
}

/* Media Queries */

/* Bootstrap Standard Breakpoints */
@media (min-width: 576px) {
	body.login-page { background: #1d1d1d url('https://www.learnershq.com/themes/default/images/login-background-small.jpg') no-repeat center center; }
}
@media (min-width: 768px) {
	body.login-page { background: #1d1d1d url('https://www.learnershq.com/themes/default/images/login-background-small.jpg') no-repeat center center; }
}
@media (min-width: 992px) {
	body.login-page { background: #1d1d1d url('https://www.learnershq.com/themes/default/images/login-background-small.jpg') no-repeat center center; }
}
@media (min-width: 1200px) {
	body.login-page { background: #1d1d1d url('https://www.learnershq.com/themes/default/images/login-background-standard.jpg') no-repeat center center; }
}

/* Custom Breakpoints */
@media (orientation: landscape) {
	body.login-page .col-last { height: 70px; }
}
@media (min-width: 1921px) {
	body.login-page { background: #1d1d1d url('https://www.learnershq.com/themes/default/images/login-background-large.jpg') no-repeat center center; }
}
@media (min-width: 319px) and (orientation: portrait) {
	body.login-page { background: #1d1d1d url('https://www.learnershq.com/themes/default/images/login-background-portrait-standard.jpg') no-repeat center center; }
}
@media (min-width: 1024px) and (orientation: portrait) {
	body.login-page { background: #1d1d1d url('https://www.learnershq.com/themes/default/images/login-background-portrait-large.jpg') no-repeat center center; }
}
@media (max-width: 991px) {
	body.login-page .col-md-2, body.login-page .col-md-4, body.login-page .col-md-6 {
		    width: 100%;
			max-width: 100%;
			-ms-flex: 0 0 100%;
			flex: 0 0 100%;
	}
	body.login-page .col-logo img { max-width: 30%; }
	body.login-page .col-spacer { display: none; }
	body.login-page .col-add { display: block; }
	body.login-page .align-self-center {
		-ms-flex-item-align: auto !important;
		align-self: auto !important;
	}
	body.login-page .footer, body.login-page .footer .text-right {
		text-align: center !IMPORTANT;
	}
	body.login-page .login-wrapper h1 { font-size: 1.35rem; }
	body.login-page .col-last { height: 90px; }
}
@media (max-width: 575px) {
	body.login-page .login-wrapper h1 { font-size: 1.25rem; }
}
/* Main CSS Styles */
img, iframe { max-width: 100% }
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 100;
}
h1 {
  font-size: 30px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 16px;
}
h4 {
  font-size: 14px;
}
h5 {
  font-size: 12px;
}
h6 {
  font-size: 10px;
}
h3,
h4,
h5 {
  margin-top: 5px;
  font-weight: 600;
}
.form-group {
	margin-bottom: 5px;
}
.nav > li > a {
  color: #a7b1c2;
  font-weight: normal;
  padding: 14px 20px 14px 25px;
}
.nav.navbar-right > li > a {
  color: #999c9e;
}
.nav > li.active > a {
  color: #ffffff;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
  background-color: #293846;
  color: white;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background: #fff;
}
.nav.navbar-top-links > li > a:hover,
.nav.navbar-top-links > li > a:focus {
  background-color: transparent;
}
.nav > li > a i {
  margin-right: 6px;
}
.nav > li > a svg {
    margin-right: 6px;
    width: 18px;
    height: 14px;
    color: #fff;
    fill: #fff;
}
.nav > li > a svg g {
    fill: #fff;
}
.navbar {
  border: 0;
}
.navbar-default {
  background-color: #000000;
  border-color: #2f4050;
}
.navbar-top-links li {
  display: inline-block;
}
.navbar-top-links li:last-child {
  margin-right: 40px;
}
.body-small .navbar-top-links li:last-child {
  margin-right: 0;
}
.navbar-top-links li a {
  padding: 20px 10px;
  min-height: 50px;
}
.dropdown-menu {
  border: medium none;
  border-radius: 3px;
  box-shadow: 0 0 3px rgba(86, 96, 117, 0.7);
  display: none;
  float: left;
  font-size: 12px;
  left: 0;
  list-style: none outside none;
  padding: 0;
  position: absolute;
  text-shadow: none;
  top: 100%;
  z-index: 1000;
}
.dropdown-menu > li > a {
  border-radius: 3px;
  color: inherit;
  line-height: 25px;
  margin: 4px;
  text-align: left;
  font-weight: normal;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #2dc26b;
  outline: 0;
}
.dropdown-menu > li > a.font-bold {
  font-weight: 400;
}
.navbar-top-links .dropdown-menu li {
  display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
  margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
  padding: 3px 20px;
  min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
  white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
  width: 310px;
  min-width: 0;
}
.navbar-top-links .dropdown-messages {
  margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
  margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
  margin-left: -123px;
}
.navbar-top-links .dropdown-user {
  right: 0;
  left: auto;
}
.dropdown-messages,
.navbar-top-links .dropdown-tasks,
.dropdown-alerts {
  padding: 10px 10px 10px 10px;
}
.dropdown-messages li a,
.dropdown-tasks li a,
.dropdown-alerts li a {
  font-size: 12px;
}
.dropdown-messages li em,
.dropdown-tasks li em,
.dropdown-alerts li em {
  font-size: 10px;
}
.nav.navbar-top-links .dropdown-alerts a {
  font-size: 12px;
}
.nav-header {
  padding: 33px 25px;
  background-color: #2f4050;
  background-image: url("patterns/header-profile.png");
}
.pace-done .nav-header {
  transition: all 0.4s;
}
ul.nav-second-level {
  background: #293846;
}
.nav > li.active {
  border-left: 4px solid #19aa8d;
  background: #293846;
}
.nav.nav-second-level > li.active {
  border: none;
}
.nav.nav-second-level.collapse[style] {
  height: auto !important;
}
.nav-header a {
  color: #DFE4ED;
}
.nav-header .text-muted {
  color: #8095a8;
}
.minimalize-styl-2 {
  padding: 4px 12px;
  margin: 14px 5px 5px 20px;
  font-size: 14px;
  float: left;
}
.navbar-form-custom {
  float: left;
  height: 50px;
  padding: 0;
  width: 200px;
  display: block;
}
.navbar-form-custom .form-group {
  margin-bottom: 0;
}
.nav.navbar-top-links a {
  font-size: 14px;
}
.navbar-form-custom .form-control {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: medium none;
  font-size: 14px;
  height: 60px;
  margin: 0;
  z-index: 2000;
}
.count-info .label {
  line-height: 12px;
  padding: 2px 5px;
  position: absolute;
  right: 6px;
  top: 12px;
}
.arrow {
  float: right;
}
.fa.arrow:before {
  content: "\f104";
}
.active > a > .fa.arrow:before {
  content: "\f107";
}
.nav-second-level li,
.nav-third-level li {
  border-bottom: none !important;
}
.nav-second-level li a {
  padding: 7px 10px 7px 10px;
  padding-left: 52px;
}
.nav-third-level li a {
  padding-left: 62px;
}
.nav-second-level li:last-child {
  margin-bottom: 10px;
}
body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar .nav li:hover > .nav-second-level,
.mini-navbar .nav li:focus > .nav-second-level {
  display: block;
  border-radius: 0 2px 2px 0;
  min-width: 140px;
  height: auto;
}
body.mini-navbar .navbar-default .nav > li > .nav-second-level li a {
  font-size: 12px;
  border-radius: 3px;
}
.fixed-nav .slimScrollDiv #side-menu {
  padding-bottom: 60px;
}
.mini-navbar .nav-second-level li a {
  padding: 10px 10px 10px 15px;
}
.mini-navbar .nav .nav-second-level {
  position: absolute;
  left: 70px;
  top: 0;
  background-color: #2f4050;
  padding: 10px 10px 10px 10px;
  font-size: 12px;
}
.canvas-menu.mini-navbar .nav-second-level {
  background: #293846;
}
.mini-navbar li.active .nav-second-level {
  left: 65px;
}
.navbar-default .special_link a {
  background: #2dc26b;
  color: white;
}
.navbar-default .special_link a:hover {
  background: #17987e !important;
  color: white;
}
.navbar-default .special_link a span.label {
  background: #fff;
  color: #2dc26b;
}
.navbar-default .landing_link a {
  background: #1cc09f;
  color: white;
}
.navbar-default .landing_link a:hover {
  background: #2dc26b !important;
  color: white;
}
.navbar-default .landing_link a span.label {
  background: #fff;
  color: #1cc09f;
}
.logo-element {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: white;
  display: none;
  padding: 18px 0;
}
.pace-done .navbar-static-side,
.pace-done .nav-header,
.pace-done li.active,
.pace-done #page-wrapper,
.pace-done .footer {
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.navbar-fixed-top {
  background: #fff;
  transition-duration: 0.4s;
  border-bottom: 1px solid #e7eaec !important;
  z-index: 2030;
}
.navbar-fixed-top,
.navbar-static-top {
  background: #000;
}
.fixed-nav #wrapper {
  margin-top: 0;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none;
  border-color: #dddddd #dddddd rgba(0, 0, 0, 0);
  border-bottom: #f3f3f4;
  border-image: none;
  border-style: solid;
  border-width: 1px;
  color: #555555;
  cursor: default;
}
.nav.nav-tabs li {
  background: none;
  border: none;
}
body.fixed-nav #wrapper .navbar-static-side,
body.fixed-nav #wrapper #page-wrapper {
  margin-top: 60px;
}
body.top-navigation.fixed-nav #wrapper #page-wrapper {
  margin-top: 0;
}
body.fixed-nav.fixed-nav-basic .navbar-fixed-top {
  left: 220px;
}
body.fixed-nav.fixed-nav-basic.mini-navbar .navbar-fixed-top {
  left: 70px;
}
body.fixed-nav.fixed-nav-basic.fixed-sidebar.mini-navbar .navbar-fixed-top {
  left: 0;
}
body.fixed-nav.fixed-nav-basic #wrapper .navbar-static-side {
  margin-top: 0;
}
body.fixed-nav.fixed-nav-basic.body-small .navbar-fixed-top {
  left: 0;
}
body.fixed-nav.fixed-nav-basic.fixed-sidebar.mini-navbar.body-small .navbar-fixed-top {
  left: 220px;
}
.fixed-nav .minimalize-styl-2 {
  margin: 14px 5px 5px 15px;
}
.body-small .navbar-fixed-top {
  margin-left: 0;
}
body.mini-navbar .navbar-static-side {
  width: 70px;
}
body.mini-navbar .profile-element,
body.mini-navbar .nav-label,
body.mini-navbar .navbar-default .nav li a span {
  display: none;
}
body.canvas-menu .profile-element {
  display: block;
}
body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar .nav-second-level {
  display: none;
}
body.mini-navbar .navbar-default .nav > li > a {
  font-size: 16px;
}
body.mini-navbar .logo-element {
  display: block;
}
body.canvas-menu .logo-element {
  display: none;
}
body.mini-navbar .nav-header {
  padding: 0;
  background-color: #2dc26b;
}
body.canvas-menu .nav-header {
  padding: 33px 25px;
}
body.mini-navbar #page-wrapper {
  margin: 0 0 0 70px;
}
body.fixed-sidebar.mini-navbar .footer,
body.canvas-menu.mini-navbar .footer {
  margin: 0 0 0 0 !important;
}
body.canvas-menu.mini-navbar #page-wrapper,
body.canvas-menu.mini-navbar .footer {
  margin: 0 0 0 0;
}
body.fixed-sidebar .navbar-static-side,
body.canvas-menu .navbar-static-side {
  position: fixed;
  width: 220px;
  z-index: 2001;
  height: 100%;
}
body.fixed-sidebar.mini-navbar .navbar-static-side {
  width: 0;
}
body.fixed-sidebar.mini-navbar #page-wrapper {
  margin: 0 0 0 0;
}
body.body-small.fixed-sidebar.mini-navbar #page-wrapper {
  margin: 0 0 0 220px;
}
body.body-small.fixed-sidebar.mini-navbar .navbar-static-side {
  width: 220px;
}
.fixed-sidebar.mini-navbar .nav li:focus > .nav-second-level,
.canvas-menu.mini-navbar .nav li:focus > .nav-second-level {
  display: block;
  height: auto;
}
body.fixed-sidebar.mini-navbar .navbar-default .nav > li > .nav-second-level li a {
  font-size: 12px;
  border-radius: 3px;
}
body.canvas-menu.mini-navbar .navbar-default .nav > li > .nav-second-level li a {
  font-size: 13px;
  border-radius: 3px;
}
.fixed-sidebar.mini-navbar .nav-second-level li a,
.canvas-menu.mini-navbar .nav-second-level li a {
  padding: 10px 10px 10px 15px;
}
.fixed-sidebar.mini-navbar .nav-second-level,
.canvas-menu.mini-navbar .nav-second-level {
  position: relative;
  padding: 0;
  font-size: 13px;
}
.fixed-sidebar.mini-navbar li.active .nav-second-level,
.canvas-menu.mini-navbar li.active .nav-second-level {
  left: 0;
}
body.fixed-sidebar.mini-navbar .navbar-default .nav > li > a,
body.canvas-menu.mini-navbar .navbar-default .nav > li > a {
  font-size: 13px;
}
body.fixed-sidebar.mini-navbar .nav-label,
body.fixed-sidebar.mini-navbar .navbar-default .nav li a span,
body.canvas-menu.mini-navbar .nav-label,
body.canvas-menu.mini-navbar .navbar-default .nav li a span {
  display: inline;
}
body.canvas-menu.mini-navbar .navbar-default .nav li .profile-element a span {
  display: block;
}
.canvas-menu.mini-navbar .nav-second-level li a,
.fixed-sidebar.mini-navbar .nav-second-level li a {
  padding: 7px 10px 7px 52px;
}
.fixed-sidebar.mini-navbar .nav-second-level,
.canvas-menu.mini-navbar .nav-second-level {
  left: 0;
}
body.canvas-menu nav.navbar-static-side {
  z-index: 2001;
  background: #2f4050;
  height: 100%;
  position: fixed;
  display: none;
}
body.canvas-menu.mini-navbar nav.navbar-static-side {
  display: block;
  width: 220px;
}
.top-navigation #page-wrapper {
  margin-left: 0;
}
.top-navigation .navbar-nav .dropdown-menu > .active > a {
  background: white;
  color: #2dc26b;
  font-weight: bold;
}
.white-bg .navbar-fixed-top,
.white-bg .navbar-static-top {
  background: #fff;
}
.top-navigation .navbar {
  margin-bottom: 0;
}
.top-navigation .nav > li > a {
  padding: 15px 20px;
  color: #676a6c;
}
.top-navigation .nav > li a:hover,
.top-navigation .nav > li a:focus {
  background: #fff;
  color: #2dc26b;
}
.top-navigation .nav > li.active {
  background: #fff;
  border: none;
}
.top-navigation .nav > li.active > a {
  color: #2dc26b;
}
.top-navigation .navbar-right {
  margin-right: 10px;
}
.top-navigation .navbar-nav .dropdown-menu {
  box-shadow: none;
  border: 1px solid #e7eaec;
}
.top-navigation .dropdown-menu > li > a {
  margin: 0;
  padding: 7px 20px;
}
.navbar .dropdown-menu {
  margin-top: 0;
}
.top-navigation .navbar-brand {
  background: #2dc26b;
  color: #fff;
  padding: 15px 25px;
}
.top-navigation .navbar-top-links li:last-child {
  margin-right: 0;
}
.top-navigation.mini-navbar #page-wrapper,
.top-navigation.body-small.fixed-sidebar.mini-navbar #page-wrapper,
.mini-navbar .top-navigation #page-wrapper,
.body-small.fixed-sidebar.mini-navbar .top-navigation #page-wrapper,
.canvas-menu #page-wrapper {
  margin: 0;
}
.top-navigation.fixed-nav #wrapper,
.fixed-nav #wrapper.top-navigation {
  margin-top: 50px;
}
.top-navigation .footer.fixed {
  margin-left: 0 !important;
}
.top-navigation .wrapper.wrapper-content {
  padding: 40px;
}
.top-navigation.body-small .wrapper.wrapper-content,
.body-small .top-navigation .wrapper.wrapper-content {
  padding: 40px 0 40px 0;
}
.navbar-toggle {
  background-color: #2dc26b;
  color: #fff;
  padding: 6px 12px;
  font-size: 14px;
}
.top-navigation .navbar-nav .open .dropdown-menu > li > a,
.top-navigation .navbar-nav .open .dropdown-menu .dropdown-header {
  padding: 10px 15px 10px 20px;
}
@media (max-width: 768px) {
  .top-navigation .navbar-header {
    display: block;
    float: none;
  }
}
.menu-visible-lg,
.menu-visible-md {
  display: none !important;
}
@media (min-width: 1200px) {
  .menu-visible-lg {
    display: block !important;
  }
}
@media (min-width: 992px) {
  .menu-visible-md {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .menu-visible-md {
    display: block !important;
  }
  .menu-visible-lg {
    display: block !important;
  }
}
.btn {
  border-radius: 3px;
}
.float-e-margins .btn {
  margin-bottom: 5px;
}
.btn-w-m {
  min-width: 120px;
}
.btn-primary.btn-outline {
  color: #2dc26b;
}
.btn-success.btn-outline {
  color: #1c84c6;
}
.btn-info.btn-outline {
  color: #23c6c8;
}
.btn-warning.btn-outline {
  color: #f8ac59;
}
.btn-danger.btn-outline {
  color: #ed5565;
}
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
  color: #fff;
}
.btn-primary {
  background-color: #2dc26b;
  border-color: #2dc26b;
  color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary.active:focus {
  background-color: #3ad47a;
  border-color: #3ad47a;
  color: #FFFFFF;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled.active,
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:active,
.btn-primary.active[disabled],
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary.active {
  background-color: #1dc5a3;
  border-color: #1dc5a3;
}
.btn-success {
  background-color: #1c84c6;
  border-color: #1c84c6;
  color: #FFFFFF;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success,
.btn-success:active:focus,
.btn-success:active:hover,
.btn-success.active:hover,
.btn-success.active:focus {
  background-color: #1a7bb9;
  border-color: #1a7bb9;
  color: #FFFFFF;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled,
.btn-success.disabled:hover,
.btn-success.disabled:focus,
.btn-success.disabled:active,
.btn-success.disabled.active,
.btn-success[disabled],
.btn-success[disabled]:hover,
.btn-success[disabled]:focus,
.btn-success[disabled]:active,
.btn-success.active[disabled],
fieldset[disabled] .btn-success,
fieldset[disabled] .btn-success:hover,
fieldset[disabled] .btn-success:focus,
fieldset[disabled] .btn-success:active,
fieldset[disabled] .btn-success.active {
  background-color: #1f90d8;
  border-color: #1f90d8;
}
.btn-info {
  background-color: #23c6c8;
  border-color: #23c6c8;
  color: #FFFFFF;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info,
.btn-info:active:focus,
.btn-info:active:hover,
.btn-info.active:hover,
.btn-info.active:focus {
  background-color: #21b9bb;
  border-color: #21b9bb;
  color: #FFFFFF;
}
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled,
.btn-info.disabled:hover,
.btn-info.disabled:focus,
.btn-info.disabled:active,
.btn-info.disabled.active,
.btn-info[disabled],
.btn-info[disabled]:hover,
.btn-info[disabled]:focus,
.btn-info[disabled]:active,
.btn-info.active[disabled],
fieldset[disabled] .btn-info,
fieldset[disabled] .btn-info:hover,
fieldset[disabled] .btn-info:focus,
fieldset[disabled] .btn-info:active,
fieldset[disabled] .btn-info.active {
  background-color: #26d7d9;
  border-color: #26d7d9;
}
.btn-default {
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default,
.btn-default:active:focus,
.btn-default:active:hover,
.btn-default.active:hover,
.btn-default.active:focus {
  color: inherit;
  border: 1px solid #d2d2d2;
}
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
}
.btn-default.disabled,
.btn-default.disabled:hover,
.btn-default.disabled:focus,
.btn-default.disabled:active,
.btn-default.disabled.active,
.btn-default[disabled],
.btn-default[disabled]:hover,
.btn-default[disabled]:focus,
.btn-default[disabled]:active,
.btn-default.active[disabled],
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default.active {
  color: #cacaca;
}
.btn-warning {
  background-color: #f8ac59;
  border-color: #f8ac59;
  color: #FFFFFF;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning,
.btn-warning:active:focus,
.btn-warning:active:hover,
.btn-warning.active:hover,
.btn-warning.active:focus {
  background-color: #f7a54a;
  border-color: #f7a54a;
  color: #FFFFFF;
}
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  background-image: none;
}
.btn-warning.disabled,
.btn-warning.disabled:hover,
.btn-warning.disabled:focus,
.btn-warning.disabled:active,
.btn-warning.disabled.active,
.btn-warning[disabled],
.btn-warning[disabled]:hover,
.btn-warning[disabled]:focus,
.btn-warning[disabled]:active,
.btn-warning.active[disabled],
fieldset[disabled] .btn-warning,
fieldset[disabled] .btn-warning:hover,
fieldset[disabled] .btn-warning:focus,
fieldset[disabled] .btn-warning:active,
fieldset[disabled] .btn-warning.active {
  background-color: #f9b66d;
  border-color: #f9b66d;
}
.btn-danger {
  background-color: #ed5565;
  border-color: #ed5565;
  color: #FFFFFF;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger,
.btn-danger:active:focus,
.btn-danger:active:hover,
.btn-danger.active:hover,
.btn-danger.active:focus {
  background-color: #ec4758;
  border-color: #ec4758;
  color: #FFFFFF;
}
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  background-image: none;
}
.btn-danger.disabled,
.btn-danger.disabled:hover,
.btn-danger.disabled:focus,
.btn-danger.disabled:active,
.btn-danger.disabled.active,
.btn-danger[disabled],
.btn-danger[disabled]:hover,
.btn-danger[disabled]:focus,
.btn-danger[disabled]:active,
.btn-danger.active[disabled],
fieldset[disabled] .btn-danger,
fieldset[disabled] .btn-danger:hover,
fieldset[disabled] .btn-danger:focus,
fieldset[disabled] .btn-danger:active,
fieldset[disabled] .btn-danger.active {
  background-color: #ef6776;
  border-color: #ef6776;
}
.btn-link {
  color: inherit;
}
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active,
.open .dropdown-toggle.btn-link {
  color: #2dc26b;
  text-decoration: none;
}
.btn-link:active,
.btn-link.active,
.open .dropdown-toggle.btn-link {
  background-image: none;
}
.btn-link.disabled,
.btn-link.disabled:hover,
.btn-link.disabled:focus,
.btn-link.disabled:active,
.btn-link.disabled.active,
.btn-link[disabled],
.btn-link[disabled]:hover,
.btn-link[disabled]:focus,
.btn-link[disabled]:active,
.btn-link.active[disabled],
fieldset[disabled] .btn-link,
fieldset[disabled] .btn-link:hover,
fieldset[disabled] .btn-link:focus,
fieldset[disabled] .btn-link:active,
fieldset[disabled] .btn-link.active {
  color: #cacaca;
}
.btn-white {
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
}
.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white.active,
.open .dropdown-toggle.btn-white,
.btn-white:active:focus,
.btn-white:active:hover,
.btn-white.active:hover,
.btn-white.active:focus {
  color: inherit;
  border: 1px solid #d2d2d2;
}
.btn-white:active,
.btn-white.active {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
}
.btn-white:active,
.btn-white.active,
.open .dropdown-toggle.btn-white {
  background-image: none;
}
.btn-white.disabled,
.btn-white.disabled:hover,
.btn-white.disabled:focus,
.btn-white.disabled:active,
.btn-white.disabled.active,
.btn-white[disabled],
.btn-white[disabled]:hover,
.btn-white[disabled]:focus,
.btn-white[disabled]:active,
.btn-white.active[disabled],
fieldset[disabled] .btn-white,
fieldset[disabled] .btn-white:hover,
fieldset[disabled] .btn-white:focus,
fieldset[disabled] .btn-white:active,
fieldset[disabled] .btn-white.active {
  color: #cacaca;
}
.form-control,
.form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus,
.has-warning .form-control:focus,
.navbar-collapse,
.navbar-form,
.navbar-form-custom .form-control:focus,
.navbar-form-custom .form-control:hover,
.open .btn.dropdown-toggle,
.panel,
.popover,
.progress,
.progress-bar {
  box-shadow: none;
}
.btn-outline {
  color: inherit;
  background-color: transparent;
  transition: all .5s;
}
.btn-rounded {
  border-radius: 50px;
}
.btn-large-dim {
  width: 90px;
  height: 90px;
  font-size: 42px;
}
button.dim {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  padding-top: 6px;
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  font-weight: 600;
  margin-bottom: 20px !important;
}
button.dim:active {
  top: 3px;
}
button.btn-primary.dim {
  box-shadow: inset 0 0 0 #16987e, 0 5px 0 0 #16987e, 0 10px 5px #999999;
}
button.btn-primary.dim:active {
  box-shadow: inset 0 0 0 #16987e, 0 2px 0 0 #16987e, 0 5px 3px #999999;
}
button.btn-default.dim {
  box-shadow: inset 0 0 0 #b3b3b3, 0 5px 0 0 #b3b3b3, 0 10px 5px #999999;
}
button.btn-default.dim:active {
  box-shadow: inset 0 0 0 #b3b3b3, 0 2px 0 0 #b3b3b3, 0 5px 3px #999999;
}
button.btn-warning.dim {
  box-shadow: inset 0 0 0 #f79d3c, 0 5px 0 0 #f79d3c, 0 10px 5px #999999;
}
button.btn-warning.dim:active {
  box-shadow: inset 0 0 0 #f79d3c, 0 2px 0 0 #f79d3c, 0 5px 3px #999999;
}
button.btn-info.dim {
  box-shadow: inset 0 0 0 #1eacae, 0 5px 0 0 #1eacae, 0 10px 5px #999999;
}
button.btn-info.dim:active {
  box-shadow: inset 0 0 0 #1eacae, 0 2px 0 0 #1eacae, 0 5px 3px #999999;
}
button.btn-success.dim {
  box-shadow: inset 0 0 0 #1872ab, 0 5px 0 0 #1872ab, 0 10px 5px #999999;
}
button.btn-success.dim:active {
  box-shadow: inset 0 0 0 #1872ab, 0 2px 0 0 #1872ab, 0 5px 3px #999999;
}
button.btn-danger.dim {
  box-shadow: inset 0 0 0 #ea394c, 0 5px 0 0 #ea394c, 0 10px 5px #999999;
}
button.btn-danger.dim:active {
  box-shadow: inset 0 0 0 #ea394c, 0 2px 0 0 #ea394c, 0 5px 3px #999999;
}
button.dim:before {
  font-size: 50px;
  line-height: 1em;
  font-weight: normal;
  color: #fff;
  display: block;
  padding-top: 10px;
}
button.dim:active:before {
  top: 7px;
  font-size: 50px;
}
.btn:focus {
  outline: none !important;
}
.label {
  background-color: #d1dade;
  color: #5e5e5e;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  text-shadow: none;
}
.badge {
  background-color: #d1dade;
  color: #5e5e5e;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding-bottom: 4px;
  padding-left: 6px;
  padding-right: 6px;
  text-shadow: none;
}
.label-primary,
.badge-primary {
  background-color: #2dc26b;
  color: #FFFFFF;
}
.label-success,
.badge-success {
  background-color: #1c84c6;
  color: #FFFFFF;
}
.label-warning,
.badge-warning {
  background-color: #f8ac59;
  color: #FFFFFF;
}
.label-warning-light,
.badge-warning-light {
  background-color: #f8ac59;
  color: #ffffff;
}
.label-danger,
.badge-danger {
  background-color: #ed5565;
  color: #FFFFFF;
}
.label-info,
.badge-info {
  background-color: #23c6c8;
  color: #FFFFFF;
}
.label-inverse,
.badge-inverse {
  background-color: #262626;
  color: #FFFFFF;
}
.label-white,
.badge-white {
  background-color: #FFFFFF;
  color: #5E5E5E;
}
.label-white,
.badge-disable {
  background-color: #2A2E36;
  color: #8B91A0;
}
/* TOOGLE SWICH */
.onoffswitch {
  position: relative;
  width: 64px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.onoffswitch-checkbox {
  display: none;
}
.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #2dc26b;
  border-radius: 2px;
}
.onoffswitch-inner {
  width: 200%;
  margin-left: -100%;
  -moz-transition: margin 0.3s ease-in 0s;
  -webkit-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
  float: left;
  width: 50%;
  height: 20px;
  padding: 0;
  line-height: 20px;
  font-size: 12px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.onoffswitch-inner:before {
  content: "ON";
  padding-left: 10px;
  background-color: #2dc26b;
  color: #FFFFFF;
}
.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #FFFFFF;
  color: #999999;
  text-align: right;
}
.onoffswitch-switch {
  width: 20px;
  margin: 0;
  background: #FFFFFF;
  border: 2px solid #2dc26b;
  border-radius: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 44px;
  -moz-transition: all 0.3s ease-in 0s;
  -webkit-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0;
}
.onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-inner:before {
  background-color: #919191;
}
.onoffswitch-checkbox:disabled + .onoffswitch-label,
.onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-switch {
  border-color: #919191;
}
/* CHOSEN PLUGIN */
.chosen-container-single .chosen-single {
  background: #ffffff;
  box-shadow: none;
  -moz-box-sizing: border-box;
  border-radius: 2px;
  cursor: text;
  height: auto !important;
  margin: 0;
  min-height: 30px;
  overflow: hidden;
  padding: 4px 12px;
  position: relative;
  width: 100%;
}
.chosen-container-multi .chosen-choices li.search-choice {
  background: #f1f1f1;
  border: 1px solid #e5e6e7;
  border-radius: 2px;
  box-shadow: none;
  color: #333333;
  cursor: default;
  line-height: 13px;
  margin: 3px 0 3px 5px;
  padding: 3px 20px 3px 5px;
  position: relative;
}
/* Tags Input Plugin */
.bootstrap-tagsinput {
  border: 1px solid #e5e6e7;
  box-shadow: none;
}
/* PAGINATIN */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #f4f4f4;
  border-color: #DDDDDD;
  color: inherit;
  cursor: default;
  z-index: 2;
}
.pagination > li > a,
.pagination > li > span {
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  color: inherit;
  float: left;
  line-height: 1.42857;
  margin-left: -1px;
  padding: 4px 10px;
  position: relative;
  text-decoration: none;
}
/* TOOLTIPS */
.tooltip-inner {
  background-color: #2F4050;
}
.tooltip.top .tooltip-arrow {
  border-top-color: #2F4050;
}
.tooltip.right .tooltip-arrow {
  border-right-color: #2F4050;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #2F4050;
}
.tooltip.left .tooltip-arrow {
  border-left-color: #2F4050;
}
/* EASY PIE CHART*/
.easypiechart {
  position: relative;
  text-align: center;
}
.easypiechart .h2 {
  margin-left: 10px;
  margin-top: 10px;
  display: inline-block;
}
.easypiechart canvas {
  top: 0;
  left: 0;
}
.easypiechart .easypie-text {
  line-height: 1;
  position: absolute;
  top: 33px;
  width: 100%;
  z-index: 1;
}
.easypiechart img {
  margin-top: -4px;
}
.jqstooltip {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
/* Chat */
.chat-activity-list .chat-element {
  border-bottom: 1px solid #e7eaec;
}
.chat-element:first-child {
  margin-top: 0;
}
.chat-element {
  padding-bottom: 15px;
}
.chat-element,
.chat-element .media {
  margin-top: 15px;
}
.chat-element,
.media-body {
  overflow: hidden;
}
.chat-element .media-body {
  display: block;
  width: auto;
}
.chat-element > .pull-left {
  margin-right: 10px;
}
.chat-element img.img-circle,
.dropdown-messages-box img.img-circle {
  width: 38px;
  height: 38px;
}
.chat-element .well {
  border: 1px solid #e7eaec;
  box-shadow: none;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 10px 20px;
  font-size: 11px;
  line-height: 16px;
}
.chat-element .actions {
  margin-top: 10px;
}
.chat-element .photos {
  margin: 10px 0;
}
.right.chat-element > .pull-right {
  margin-left: 10px;
}
.chat-photo {
  max-height: 180px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 10px;
  margin-bottom: 10px;
}
.chat {
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat li {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #B3A9A9;
}
.chat li.left .chat-body {
  margin-left: 60px;
}
.chat li.right .chat-body {
  margin-right: 60px;
}
.chat li .chat-body p {
  margin: 0;
  color: #777777;
}
.panel .slidedown .glyphicon,
.chat .glyphicon {
  margin-right: 5px;
}
.chat-panel .panel-body {
  height: 350px;
  overflow-y: scroll;
}
/* LIST GROUP */
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
  background-color: #2dc26b;
  border-color: #2dc26b;
  color: #FFFFFF;
  z-index: 2;
}
.list-group-item-heading {
  margin-top: 10px;
}
.list-group-item-text {
  margin: 0 0 10px;
  color: inherit;
  font-size: 12px;
  line-height: inherit;
}
.no-padding .list-group-item {
  border-left: none;
  border-right: none;
  border-bottom: none;
}
.no-padding .list-group-item:first-child {
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: none;
}
.no-padding .list-group {
  margin-bottom: 0;
}
.list-group-item {
  background-color: inherit;
  border: 1px solid #e7eaec;
  display: block;
  margin-bottom: -1px;
  padding: 10px 15px;
  position: relative;
}
.elements-list .list-group-item {
  border-left: none;
  border-right: none;
  padding: 15px 25px;
}
.elements-list .list-group-item:first-child {
  border-left: none;
  border-right: none;
  border-top: none !important;
}
.elements-list .list-group {
  margin-bottom: 0;
}
.elements-list a {
  color: inherit;
}
.elements-list .list-group-item.active,
.elements-list .list-group-item:hover {
  background: #f3f3f4;
  color: inherit;
  border-color: #e7eaec;
  border-radius: 0;
}
.elements-list li.active {
  transition: none;
}
.element-detail-box {
  padding: 25px;
}
/* FLOT CHART  */
.flot-chart {
  display: block;
  height: 200px;
}
.widget .flot-chart.dashboard-chart {
  display: block;
  height: 120px;
  margin-top: 40px;
}
.flot-chart.dashboard-chart {
  display: block;
  height: 180px;
  margin-top: 40px;
}
.flot-chart-content {
  width: 100%;
  height: 100%;
}
.flot-chart-pie-content {
  width: 200px;
  height: 200px;
  margin: auto;
}
.jqstooltip {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  visibility: hidden;
  background: #2b303a;
  background-color: rgba(43, 48, 58, 0.8);
  color: white;
  text-align: left;
  white-space: nowrap;
  z-index: 10000;
  padding: 5px 5px 5px 5px;
  min-height: 22px;
  border-radius: 3px;
}
.jqsfield {
  color: white;
  text-align: left;
}
.fh-150 {
  height: 150px;
}
.fh-200 {
  height: 200px;
}
.h-150 {
  min-height: 150px;
}
.h-200 {
  min-height: 200px;
}
.h-300 {
  min-height: 300px;
}
.w-150 {
  min-width: 150px;
}
.w-200 {
  min-width: 200px;
}
.w-300 {
  min-width: 300px;
}
.legendLabel {
  padding-left: 5px;
}
.stat-list li:first-child {
  margin-top: 0;
}
.stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stat-percent {
  float: right;
}
.stat-list li {
  margin-top: 15px;
  position: relative;
}
/* DATATABLES */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background: transparent;
}
.dataTables_wrapper {
  padding-bottom: 30px;
}
.dataTables_length {
  float: left;
}
.dataTables_filter label {
  margin-right: 5px;
}
.html5buttons {
  float: right;
}
.html5buttons a {
  border: 1px solid #e7eaec;
  background: #fff;
  color: #676a6c;
  box-shadow: none;
  padding: 6px 8px;
  font-size: 12px;
}
.html5buttons a:hover,
.html5buttons a:focus:active {
  background-color: #eee;
  color: inherit;
  border-color: #d2d2d2;
}
div.dt-button-info {
  z-index: 100;
}
@media (max-width: 768px) {
  .html5buttons {
    float: none;
    margin-top: 10px;
  }
  .dataTables_length {
    float: none;
  }
}
/* CIRCLE */
.img-circle {
  border-radius: 50%;
}
.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.428571429;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  border-radius: 25px;
  font-size: 18px;
  line-height: 1.33;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 24px;
  line-height: 1.33;
}
.show-grid [class^="col-"] {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #ddd;
  background-color: #eee !important;
}
.show-grid {
  margin: 15px 0;
}
/* ANIMATION */
.css-animation-box h1 {
  font-size: 44px;
}
.animation-efect-links a {
  padding: 4px 6px;
  font-size: 12px;
}
#animation_box {
  background-color: #f9f8f8;
  border-radius: 16px;
  width: 80%;
  margin: 0 auto;
  padding-top: 80px;
}
.animation-text-box {
  position: absolute;
  margin-top: 40px;
  left: 50%;
  margin-left: -100px;
  width: 200px;
}
.animation-text-info {
  position: absolute;
  margin-top: -60px;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  font-size: 10px;
}
.animation-text-box h2 {
  font-size: 54px;
  font-weight: 600;
  margin-bottom: 5px;
}
.animation-text-box p {
  font-size: 12px;
  text-transform: uppercase;
}
/* PACE */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  background: #2dc26b;
  position: fixed;
  z-index: 2040;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
.pace-inactive {
  display: none;
}
/* WIDGETS */
.widget {
  border-radius: 5px;
  padding: 15px 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.widget.style1 h2 {
  font-size: 30px;
}
.widget h2,
.widget h3 {
  margin-top: 5px;
  margin-bottom: 0;
}
.widget-text-box {
  padding: 20px;
  border: 1px solid #e7eaec;
  background: #ffffff;
}
.widget-head-color-box {
  border-radius: 5px 5px 0 0;
  margin-top: 10px;
}
.widget .flot-chart {
  height: 100px;
}
.vertical-align div {
  display: inline-block;
  vertical-align: middle;
}
.vertical-align h2,
.vertical-align h3 {
  margin: 0;
}
.todo-list {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.todo-list.small-list {
  font-size: 12px;
}
.todo-list.small-list > li {
  background: #f3f3f4;
  border-left: none;
  border-right: none;
  border-radius: 4px;
  color: inherit;
  margin-bottom: 2px;
  padding: 6px 6px 6px 12px;
}
.todo-list.small-list .btn-xs,
.todo-list.small-list .btn-group-xs > .btn {
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.5;
  padding: 1px 2px 1px 5px;
}
.todo-list > li {
  background: #f3f3f4;
  border-left: 6px solid #e7eaec;
  border-right: 6px solid #e7eaec;
  border-radius: 4px;
  color: inherit;
  margin-bottom: 2px;
  padding: 10px;
}
.todo-list .handle {
  cursor: move;
  display: inline-block;
  font-size: 16px;
  margin: 0 5px;
}
.todo-list > li .label {
  font-size: 9px;
  margin-left: 10px;
}
.check-link {
  font-size: 16px;
}
.todo-completed {
  text-decoration: line-through;
}
.geo-statistic h1 {
  font-size: 36px;
  margin-bottom: 0;
}
.glyphicon.fa {
  font-family: "FontAwesome";
}
/* INPUTS */
.inline {
  display: inline-block !important;
}
.input-s-sm {
  width: 120px;
}
.input-s {
  width: 200px;
}
.input-s-lg {
  width: 250px;
}
.i-checks {
  padding-left: 0;
}
.form-control,
.single-line {
  background-color: #FFFFFF;
  background-image: none;
  border: 1px solid #e5e6e7;
  border-radius: 1px;
  color: inherit;
  display: block;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  font-size: 14px;
}
.form-control:focus,
.single-line:focus {
  border-color: #2dc26b;
}
.has-success .form-control,
.has-success .form-control:focus {
  border-color: #2dc26b;
}
.has-warning .form-control,
.has-warning .form-control:focus {
  border-color: #f8ac59;
}
.has-error .form-control,
.has-error .form-control:focus {
  border-color: #ed5565;
}
.has-success .control-label {
  color: #2dc26b;
}
.has-warning .control-label {
  color: #f8ac59;
}
.has-error .control-label {
  color: #ed5565;
}
.input-group-addon {
  background-color: #fff;
  border: 1px solid #E5E6E7;
  border-radius: 1px;
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  padding: 6px 12px;
  text-align: center;
}
.spinner-buttons.input-group-btn .btn-xs {
  line-height: 1.13;
}
.spinner-buttons.input-group-btn {
  width: 20%;
}
.noUi-connect {
  background: none repeat scroll 0 0 #2dc26b;
  box-shadow: none;
}
.slider_red .noUi-connect {
  background: none repeat scroll 0 0 #ed5565;
  box-shadow: none;
}
/* UI Sortable */
.ui-sortable .ibox-title {
  cursor: move;
}
.ui-sortable-placeholder {
  border: 1px dashed #cecece !important;
  visibility: visible !important;
  background: #e7eaec;
}
.ibox.ui-sortable-placeholder {
  margin: 0 0 23px !important;
}
/* SWITCHES */
.onoffswitch {
  position: relative;
  width: 54px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.onoffswitch-checkbox {
  display: none;
}
.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #2dc26b;
  border-radius: 3px;
}
.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  -moz-transition: margin 0.3s ease-in 0s;
  -webkit-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 16px;
  padding: 0;
  line-height: 16px;
  font-size: 10px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.onoffswitch-inner:before {
  content: "ON";
  padding-left: 7px;
  background-color: #2dc26b;
  color: #FFFFFF;
}
.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 7px;
  background-color: #FFFFFF;
  color: #919191;
  text-align: right;
}
.onoffswitch-switch {
  display: block;
  width: 18px;
  margin: 0;
  background: #FFFFFF;
  border: 2px solid #2dc26b;
  border-radius: 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 36px;
  -moz-transition: all 0.3s ease-in 0s;
  -webkit-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0;
}
/* jqGrid */
.ui-jqgrid {
  -moz-box-sizing: content-box;
}
.ui-jqgrid-btable {
  border-collapse: separate;
}
.ui-jqgrid-htable {
  border-collapse: separate;
}
.ui-jqgrid-titlebar {
  height: 40px;
  line-height: 15px;
  color: #676a6c;
  background-color: #F9F9F9;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ui-jqgrid .ui-jqgrid-title {
  float: left;
  margin: 1.1em 1em 0.2em;
}
.ui-jqgrid .ui-jqgrid-titlebar {
  position: relative;
  border-left: 0 solid;
  border-right: 0 solid;
  border-top: 0 solid;
}
.ui-widget-header {
  background: none;
  background-image: none;
  background-color: #f5f5f6;
  text-transform: uppercase;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.ui-jqgrid tr.ui-row-ltr td {
  border-right-color: inherit;
  border-right-style: solid;
  border-right-width: 1px;
  text-align: left;
  border-color: #DDDDDD;
  background-color: inherit;
}
.ui-search-toolbar input[type="text"] {
  font-size: 12px;
  height: 15px;
  border: 1px solid #CCCCCC;
  border-radius: 0;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: #F9F9F9;
  border: 1px solid #DDDDDD;
  line-height: 15px;
  font-weight: bold;
  color: #676a6c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ui-widget-content {
  box-sizing: content-box;
}
.ui-icon-triangle-1-n {
  background-position: 1px -16px;
}
.ui-jqgrid tr.ui-search-toolbar th {
  border-top-width: 0 !important;
  border-top-color: inherit !important;
  border-top-style: ridge !important;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background: #f5f5f5;
  border-collapse: separate;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  background: #f2fbff;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  border: 1px solid #dddddd;
  background: #ffffff;
  font-weight: normal;
  color: #212121;
}
.ui-jqgrid .ui-pg-input {
  font-size: inherit;
  width: 50px;
  border: 1px solid #CCCCCC;
  height: 15px;
}
.ui-jqgrid .ui-pg-selbox {
  display: block;
  font-size: 1em;
  height: 25px;
  line-height: 18px;
  margin: 0;
  width: auto;
}
.ui-jqgrid .ui-pager-control {
  position: relative;
}
.ui-jqgrid .ui-jqgrid-pager {
  height: 32px;
  position: relative;
}
.ui-pg-table .navtable .ui-corner-all {
  border-radius: 0;
}
.ui-jqgrid .ui-pg-button:hover {
  padding: 1px;
  border: 0;
}
.ui-jqgrid .loading {
  position: absolute;
  top: 45%;
  left: 45%;
  width: auto;
  height: auto;
  z-index: 101;
  padding: 6px;
  margin: 5px;
  text-align: center;
  font-weight: bold;
  display: none;
  border-width: 2px !important;
  font-size: 11px;
}
.ui-jqgrid .form-control {
  height: 10px;
  width: auto;
  display: inline;
  padding: 10px 12px;
}
.ui-jqgrid-pager {
  height: 32px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 0;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 0;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 0;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 0;
}
.ui-widget-content {
  border: 1px solid #ddd;
}
.ui-jqgrid .ui-jqgrid-titlebar {
  padding: 0;
}
.ui-jqgrid .ui-jqgrid-titlebar {
  border-bottom: 1px solid #ddd;
}
.ui-jqgrid tr.jqgrow td {
  padding: 6px;
}
.ui-jqdialog .ui-jqdialog-titlebar {
  padding: 10px 10px;
}
.ui-jqdialog .ui-jqdialog-title {
  float: none !important;
}
.ui-jqdialog > .ui-resizable-se {
  position: absolute;
}
/* Nestable list */
.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
}
.dd-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dd-list .dd-list {
  padding-left: 30px;
}
.dd-collapsed .dd-list {
  display: none;
}
.dd-item,
.dd-empty,
.dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 20px;
  font-size: 13px;
  line-height: 20px;
}
.dd-handle {
  display: block;
  margin: 5px 0;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
  border: 1px solid #e7eaec;
  background: #f5f5f5;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.dd-handle span {
  font-weight: bold;
}
.dd-handle:hover {
  background: #f0f0f0;
  cursor: pointer;
  font-weight: bold;
}
.dd-item > button {
  display: block;
  position: relative;
  cursor: pointer;
  float: left;
  width: 25px;
  height: 20px;
  margin: 5px 0;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  font-weight: bold;
}
.dd-item > button:before {
  content: '+';
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  text-indent: 0;
}
.dd-item > button[data-action="collapse"]:before {
  content: '-';
}
#nestable2 .dd-item > button {
  font-family: FontAwesome;
  height: 34px;
  width: 33px;
  color: #c1c1c1;
}
#nestable2 .dd-item > button:before {
  content: "\f067";
}
#nestable2 .dd-item > button[data-action="collapse"]:before {
  content: "\f068";
}
.dd-placeholder,
.dd-empty {
  margin: 5px 0;
  padding: 0;
  min-height: 30px;
  background: #f2fbff;
  border: 1px dashed #b6bcbf;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.dd-empty {
  border: 1px dashed #bbb;
  min-height: 100px;
  background-color: #e5e5e5;
  background-image: -webkit-linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff), -webkit-linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff);
  background-image: -moz-linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff), -moz-linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff);
  background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff), linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}
.dd-dragel {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
}
.dd-dragel > .dd-item .dd-handle {
  margin-top: 0;
}
.dd-dragel .dd-handle {
  -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
}
/**
* Nestable Extras
*/
.nestable-lists {
  display: block;
  clear: both;
  padding: 30px 0;
  width: 100%;
  border: 0;
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
}
#nestable-menu {
  padding: 0;
  margin: 10px 0 20px 0;
}
#nestable-output,
#nestable2-output {
  width: 100%;
  font-size: 0.75em;
  line-height: 1.333333em;
  font-family: open sans, lucida grande, lucida sans unicode, helvetica, arial, sans-serif;
  padding: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
#nestable2 .dd-handle {
  color: inherit;
  border: 1px dashed #e7eaec;
  background: #f3f3f4;
  padding: 10px;
}
#nestable2 span.label {
  margin-right: 10px;
}
#nestable-output,
#nestable2-output {
  font-size: 12px;
  padding: 25px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
/* CodeMirror */
.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}
/* Google Maps */
.google-map {
  height: 300px;
}
/* Validation */
label.error {
  color: #cc5965;
  display: inline-block;
  margin-left: 5px;
}
.form-control.error {
  border: 1px dotted #cc5965;
}
/* ngGrid */
.gridStyle {
  border: 1px solid #d4d4d4;
  width: 100%;
  height: 400px;
}
.gridStyle2 {
  border: 1px solid #d4d4d4;
  width: 500px;
  height: 300px;
}
.ngH eaderCell {
  border-right: none;
  border-bottom: 1px solid #e7eaec;
}
.ngCell {
  border-right: none;
}
.ngTopPanel {
  background: #F5F5F6;
}
.ngRow.even {
  background: #f9f9f9;
}
.ngRow.selected {
  background: #EBF2F1;
}
.ngRow {
  border-bottom: 1px solid #e7eaec;
}
.ngCell {
  background-color: transparent;
}
.ngHeaderCell {
  border-right: none;
}
/* Toastr custom style */
#toast-container > .toast {
  background-image: none !important;
}
#toast-container > .toast:before {
  position: fixed;
  font-family: FontAwesome;
  font-size: 24px;
  line-height: 24px;
  float: left;
  color: #FFF;
  padding-right: 0.5em;
  margin: auto 0.5em auto -1.5em;
}
#toast-container > .toast-warning:before {
  content: "\f0e7";
}
#toast-container > .toast-error:before {
  content: "\f071";
}
#toast-container > .toast-info:before {
  content: "\f005";
}
#toast-container > .toast-success:before {
  content: "\f00C";
}
#toast-container > div {
  -moz-box-shadow: 0 0 3px #999;
  -webkit-box-shadow: 0 0 3px #999;
  box-shadow: 0 0 3px #999;
  opacity: .99;
  -ms-filter: alpha(opacity=90);
  filter: alpha(opacity=90);
}
#toast-container > :hover {
  -moz-box-shadow: 0 0 4px #999;
  -webkit-box-shadow: 0 0 4px #999;
  box-shadow: 0 0 4px #999;
  opacity: 1;
  -ms-filter: alpha(opacity=100);
  filter: alpha(opacity=100);
  cursor: pointer;
}
.toast {
  background-color: #2dc26b;
}
.toast-success {
  background-color: #2dc26b;
}
.toast-error {
  background-color: #ed5565;
}
.toast-info {
  background-color: #23c6c8;
}
.toast-warning {
  background-color: #f8ac59;
}
.toast-top-full-width {
  margin-top: 20px;
}
.toast-bottom-full-width {
  margin-bottom: 20px;
}
/* Notifie */
.cg-notify-message.inspinia-notify {
  background: #fff;
  padding: 0;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
  border: none;
  margin-top: 30px;
  color: inherit;
}
.inspinia-notify.alert-warning {
  border-left: 6px solid #f8ac59;
}
.inspinia-notify.alert-success {
  border-left: 6px solid #1c84c6;
}
.inspinia-notify.alert-danger {
  border-left: 6px solid #ed5565;
}
.inspinia-notify.alert-info {
  border-left: 6px solid #2dc26b;
}
/* Image cropper style */
.img-container,
.img-preview {
  overflow: hidden;
  text-align: center;
  width: 100%;
}
.img-preview-sm {
  height: 130px;
  width: 200px;
}
/* Forum styles  */
.forum-post-container .media {
  margin: 10px 10px 10px 10px;
  padding: 20px 10px 20px 10px;
  border-bottom: 1px solid #f1f1f1;
}
.forum-avatar {
  float: left;
  margin-right: 20px;
  text-align: center;
  width: 110px;
}
.forum-avatar .img-circle {
  height: 48px;
  width: 48px;
}
.author-info {
  color: #676a6c;
  font-size: 11px;
  margin-top: 5px;
  text-align: center;
}
.forum-post-info {
  padding: 9px 12px 6px 12px;
  background: #f9f9f9;
  border: 1px solid #f1f1f1;
}
.media-body > .media {
  background: #f9f9f9;
  border-radius: 3px;
  border: 1px solid #f1f1f1;
}
.forum-post-container .media-body .photos {
  margin: 10px 0;
}
.forum-photo {
  max-width: 140px;
  border-radius: 3px;
}
.media-body > .media .forum-avatar {
  width: 70px;
  margin-right: 10px;
}
.media-body > .media .forum-avatar .img-circle {
  height: 38px;
  width: 38px;
}
.mid-icon {
  font-size: 66px;
}
.forum-item {
  margin: 10px 0;
  padding: 10px 0 20px;
  border-bottom: 1px solid #f1f1f1;
}
.views-number {
  font-size: 24px;
  line-height: 18px;
  font-weight: 400;
}
.forum-container,
.forum-post-container {
  padding: 30px !important;
}
.forum-item small {
  color: #999;
}
.forum-item .forum-sub-title {
  color: #999;
  margin-left: 50px;
}
.forum-title {
  margin: 15px 0 15px 0;
}
.forum-info {
  text-align: center;
}
.forum-desc {
  color: #999;
}
.forum-icon {
  float: left;
  width: 30px;
  margin-right: 20px;
  text-align: center;
}
a.forum-item-title {
  color: inherit;
  display: block;
  font-size: 18px;
  font-weight: 600;
}
a.forum-item-title:hover {
  color: inherit;
}
.forum-icon .fa {
  font-size: 30px;
  margin-top: 8px;
  color: #9b9b9b;
}
.forum-item.active .fa {
  color: #2dc26b;
}
.forum-item.active a.forum-item-title {
  color: #2dc26b;
}
@media (max-width: 992px) {
  .forum-info {
    margin: 15px 0 10px 0;
    /* Comment this is you want to show forum info in small devices */
    display: none;
  }
  .forum-desc {
    float: none !important;
  }
}
/* New Timeline style */
.vertical-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}
.vertical-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}
#vertical-timeline {
  position: relative;
  padding: 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#vertical-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #f1f1f1;
}
.vertical-timeline-content .btn {
  float: right;
}
#vertical-timeline.light-timeline:before {
  background: #e7eaec;
}
.dark-timeline .vertical-timeline-content:before {
  border-color: transparent #f5f5f5 transparent transparent;
}
.dark-timeline.center-orientation .vertical-timeline-content:before {
  border-color: transparent transparent transparent #f5f5f5;
}
.dark-timeline .vertical-timeline-block:nth-child(2n) .vertical-timeline-content:before,
.dark-timeline.center-orientation .vertical-timeline-block:nth-child(2n) .vertical-timeline-content:before {
  border-color: transparent #f5f5f5 transparent transparent;
}
.dark-timeline .vertical-timeline-content,
.dark-timeline.center-orientation .vertical-timeline-content {
  background: #f5f5f5;
}
@media only screen and (min-width: 1170px) {
  #vertical-timeline.center-orientation {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #vertical-timeline.center-orientation:before {
    left: 50%;
    margin-left: -2px;
  }
}
@media only screen and (max-width: 1170px) {
  .center-orientation.dark-timeline .vertical-timeline-content:before {
    border-color: transparent #f5f5f5 transparent transparent;
  }
}
.vertical-timeline-block {
  position: relative;
  margin: 2em 0;
}
.vertical-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.vertical-timeline-block:first-child {
  margin-top: 0;
}
.vertical-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .center-orientation .vertical-timeline-block {
    margin: 4em 0;
  }
  .center-orientation .vertical-timeline-block:first-child {
    margin-top: 0;
  }
  .center-orientation .vertical-timeline-block:last-child {
    margin-bottom: 0;
  }
}
.vertical-timeline-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 16px;
  border: 3px solid #f1f1f1;
  text-align: center;
}
.vertical-timeline-icon i {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -9px;
}
@media only screen and (min-width: 1170px) {
  .center-orientation .vertical-timeline-icon {
    width: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    font-size: 19px;
  }
  .center-orientation .vertical-timeline-icon i {
    margin-left: -12px;
    margin-top: -10px;
  }
  .center-orientation .cssanimations .vertical-timeline-icon.is-hidden {
    visibility: hidden;
  }
}
.vertical-timeline-content {
  position: relative;
  margin-left: 60px;
  background: white;
  border-radius: 0.25em;
  padding: 1em;
}
.vertical-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}
.vertical-timeline-content h2 {
  font-weight: 400;
  margin-top: 4px;
}
.vertical-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}
.vertical-timeline-content .vertical-date {
  float: left;
  font-weight: 500;
}
.vertical-date small {
  color: #2dc26b;
  font-weight: 400;
}
.vertical-timeline-content::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
  .vertical-timeline-content h2 {
    font-size: 18px;
  }
  .vertical-timeline-content p {
    font-size: 13px;
  }
}
@media only screen and (min-width: 1170px) {
  .center-orientation .vertical-timeline-content {
    margin-left: 0;
    padding: 1.6em;
    width: 45%;
  }
  .center-orientation .vertical-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: white;
  }
  .center-orientation .vertical-timeline-content .btn {
    float: left;
  }
  .center-orientation .vertical-timeline-content .vertical-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 2px;
    font-size: 14px;
  }
  .center-orientation .vertical-timeline-block:nth-child(even) .vertical-timeline-content {
    float: right;
  }
  .center-orientation .vertical-timeline-block:nth-child(even) .vertical-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: white;
  }
  .center-orientation .vertical-timeline-block:nth-child(even) .vertical-timeline-content .btn {
    float: right;
  }
  .center-orientation .vertical-timeline-block:nth-child(even) .vertical-timeline-content .vertical-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
  .center-orientation .cssanimations .vertical-timeline-content.is-hidden {
    visibility: hidden;
  }
}
/* Tabs */
.tabs-container .panel-body {
  background: #fff;
  border: 1px solid #e7eaec;
  border-radius: 2px;
  padding: 20px;
  position: relative;
}
.tabs-container .nav-tabs > li.active > a,
.tabs-container .nav-tabs > li.active > a:hover,
.tabs-container .nav-tabs > li.active > a:focus {
  border: 1px solid #e7eaec;
  border-bottom-color: transparent;
  background-color: #fff;
}
.tabs-container .nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.tabs-container .tab-pane .panel-body {
  border-top: none;
}
.tabs-container .nav-tabs > li.active > a,
.tabs-container .nav-tabs > li.active > a:hover,
.tabs-container .nav-tabs > li.active > a:focus {
  border: 1px solid #e7eaec;
  border-bottom-color: transparent;
}
.tabs-container .nav-tabs {
  border-bottom: 1px solid #e7eaec;
}
.tabs-container .tab-pane .panel-body {
  border-top: none;
}
.tabs-container .tabs-left .tab-pane .panel-body,
.tabs-container .tabs-right .tab-pane .panel-body {
  border-top: 1px solid #e7eaec;
}
.tabs-container .nav-tabs > li a:hover {
  background: transparent;
  border-color: transparent;
}
.tabs-container .tabs-below > .nav-tabs,
.tabs-container .tabs-right > .nav-tabs,
.tabs-container .tabs-left > .nav-tabs {
  border-bottom: 0;
}
.tabs-container .tabs-left .panel-body {
  position: static;
}
.tabs-container .tabs-left > .nav-tabs,
.tabs-container .tabs-right > .nav-tabs {
  width: 20%;
}
.tabs-container .tabs-left .panel-body {
  width: 80%;
  margin-left: 20%;
}
.tabs-container .tabs-right .panel-body {
  width: 80%;
  margin-right: 20%;
}
.tabs-container .tab-content > .tab-pane,
.tabs-container .pill-content > .pill-pane {
  display: none;
}
.tabs-container .tab-content > .active,
.tabs-container .pill-content > .active {
  display: block;
}
.tabs-container .tabs-below > .nav-tabs {
  border-top: 1px solid #e7eaec;
}
.tabs-container .tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}
.tabs-container .tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}
.tabs-container .tabs-below > .nav-tabs > li > a:hover,
.tabs-container .tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #e7eaec;
  border-bottom-color: transparent;
}
.tabs-container .tabs-left > .nav-tabs > li,
.tabs-container .tabs-right > .nav-tabs > li {
  float: none;
}
.tabs-container .tabs-left > .nav-tabs > li > a,
.tabs-container .tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}
.tabs-container .tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
}
.tabs-container .tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}
.tabs-container .tabs-left > .nav-tabs .active > a,
.tabs-container .tabs-left > .nav-tabs .active > a:hover,
.tabs-container .tabs-left > .nav-tabs .active > a:focus {
  border-color: #e7eaec transparent #e7eaec #e7eaec;
}
.tabs-container .tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
}
.tabs-container .tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}
.tabs-container .tabs-right > .nav-tabs .active > a,
.tabs-container .tabs-right > .nav-tabs .active > a:hover,
.tabs-container .tabs-right > .nav-tabs .active > a:focus {
  border-color: #e7eaec #e7eaec #e7eaec transparent;
  z-index: 1;
}
@media (max-width: 767px) {
  .tabs-container .nav-tabs > li {
    float: none !important;
  }
  .tabs-container .nav-tabs > li.active > a {
    border-bottom: 1px solid #e7eaec !important;
    margin: 0;
  }
}
/* jsvectormap */
.jvectormap-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.jvectormap-tip {
  position: absolute;
  display: none;
  border: solid 1px #CDCDCD;
  border-radius: 3px;
  background: #292929;
  color: white;
  font-family: sans-serif, Verdana;
  font-size: smaller;
  padding: 5px;
}
.jvectormap-zoomin,
.jvectormap-zoomout,
.jvectormap-goback {
  position: absolute;
  left: 10px;
  border-radius: 3px;
  background: #2dc26b;
  padding: 3px;
  color: white;
  cursor: pointer;
  line-height: 10px;
  text-align: center;
  box-sizing: content-box;
}
.jvectormap-zoomin,
.jvectormap-zoomout {
  width: 10px;
  height: 10px;
}
.jvectormap-zoomin {
  top: 10px;
}
.jvectormap-zoomout {
  top: 30px;
}
.jvectormap-goback {
  bottom: 10px;
  z-index: 1000;
  padding: 6px;
}
.jvectormap-spinner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: center no-repeat url(data:image/gif;base64,R0lGODlhIAAgAPMAAP///wAAAMbGxoSEhLa2tpqamjY2NlZWVtjY2OTk5Ly8vB4eHgQEBAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==);
}
.jvectormap-legend-title {
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}
.jvectormap-legend-cnt {
  position: absolute;
}
.jvectormap-legend-cnt-h {
  bottom: 0;
  right: 0;
}
.jvectormap-legend-cnt-v {
  top: 0;
  right: 0;
}
.jvectormap-legend {
  background: black;
  color: white;
  border-radius: 3px;
}
.jvectormap-legend-cnt-h .jvectormap-legend {
  float: left;
  margin: 0 10px 10px 0;
  padding: 3px 3px 1px 3px;
}
.jvectormap-legend-cnt-h .jvectormap-legend .jvectormap-legend-tick {
  float: left;
}
.jvectormap-legend-cnt-v .jvectormap-legend {
  margin: 10px 10px 0 0;
  padding: 3px;
}
.jvectormap-legend-cnt-h .jvectormap-legend-tick {
  width: 40px;
}
.jvectormap-legend-cnt-h .jvectormap-legend-tick-sample {
  height: 15px;
}
.jvectormap-legend-cnt-v .jvectormap-legend-tick-sample {
  height: 20px;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
}
.jvectormap-legend-tick-text {
  font-size: 12px;
}
.jvectormap-legend-cnt-h .jvectormap-legend-tick-text {
  text-align: center;
}
.jvectormap-legend-cnt-v .jvectormap-legend-tick-text {
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
  padding-left: 3px;
}
/*Slick Carousel */
.slick-prev:before,
.slick-next:before {
  color: #2dc26b !important;
}
/* Payments */
.payment-card {
  background: #ffffff;
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid #e7eaec;
}
.payment-icon-big {
  font-size: 60px;
  color: #d1dade;
}
.payments-method.panel-group .panel + .panel {
  margin-top: -1px;
}
.payments-method .panel-heading {
  padding: 15px;
}
.payments-method .panel {
  border-radius: 0;
}
.payments-method .panel-heading h5 {
  margin-bottom: 5px;
}
.payments-method .panel-heading i {
  font-size: 26px;
}
/* Select2 custom styles */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: #e7eaec;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #2dc26b;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #2dc26b;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: #e7eaec;
}
.select2-dropdown {
  border-color: #e7eaec;
}
.select2-dropdown input:focus {
  outline: none;
}
.select2-selection {
  outline: none;
}
.ui-select-container.ui-select-bootstrap .ui-select-choices-row.active > a {
  background-color: #2dc26b;
}
/* Tour */
.tour-tour .btn.btn-default {
  background-color: #ffffff;
  border: 1px solid #d2d2d2;
  color: inherit;
}
.tour-step-backdrop {
  z-index: 2101;
}
.tour-backdrop {
  z-index: 2100;
  opacity: .7;
}
.popover[class*=tour-] {
  z-index: 2100;
}
body.tour-open .animated {
  animation-fill-mode: initial;
}
/* Resizable */
.resizable-panels .ibox {
  clear: none;
  margin: 10px;
  float: left;
  overflow: hidden;
  min-height: 150px;
  min-width: 150px;
}
.resizable-panels .ibox .ibox-content {
  height: calc(100% - 49px);
}
.ui-resizable-helper {
  background: rgba(211, 211, 211, 0.4);
}
/* Wizard step fix */
.wizard > .content > .body {
  position: relative;
}
/* PDF js style */
.pdf-toolbar {
  max-width: 600px;
  margin: 0 auto;
}
/* Dropzone */
.dropzone {
  min-height: 140px;
  border: 1px dashed #2dc26b;
  background: white;
  padding: 20px 20px;
}
.dropzone .dz-message {
  font-size: 16px;
}
/* Activity stream */
.stream {
  position: relative;
  padding: 10px 0;
}
.stream:first-child .stream-badge:before {
  top: 10px;
}
.stream:last-child .stream-badge:before {
  height: 30px;
}
.stream .stream-badge {
  width: 50px;
}
.stream .stream-badge i {
  border: 1px solid #e7eaec;
  border-radius: 50%;
  padding: 6px;
  color: #808486;
  position: absolute;
  background-color: #ffffff;
  left: 8px;
}
.stream .stream-badge i.fa-circle {
  color: #ced0d1;
}
.stream .stream-badge i.bg-success {
  color: #ffffff;
  background-color: #1c84c6;
  border-color: #1c84c6;
}
.stream .stream-badge i.bg-primary {
  color: #ffffff;
  background-color: #2dc26b;
  border-color: #2dc26b;
}
.stream .stream-badge i.bg-warning {
  color: #ffffff;
  background-color: #f8ac59;
  border-color: #f8ac59;
}
.stream .stream-badge i.bg-info {
  color: #ffffff;
  background-color: #23c6c8;
  border-color: #23c6c8;
}
.stream .stream-badge i.bg-danger {
  color: #ffffff;
  background-color: #ed5565;
  border-color: #ed5565;
}
.stream .stream-badge:before {
  content: '';
  width: 1px;
  background-color: #e7eaec;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
}
.stream .stream-info {
  font-size: 12px;
  margin-bottom: 5px;
}
.stream .stream-info img {
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  margin-top: -4px;
}
.stream .stream-info .date {
  color: #9a9d9f;
  font-size: 80%;
}
.stream .stream-panel {
  margin-left: 55px;
}
.stream-small {
  margin: 10px 0;
}
.stream-small .label {
  padding: 2px 6px;
  margin-right: 2px;
}
.sidebar-panel {
  width: 220px;
  background: #ebebed;
  padding: 10px 20px;
  position: absolute;
  right: 0;
}
.sidebar-panel .feed-element img.img-circle {
  width: 32px;
  height: 32px;
}
.sidebar-panel .feed-element,
.media-body,
.sidebar-panel p {
  font-size: 12px;
}
.sidebar-panel .feed-element {
  margin-top: 20px;
  padding-bottom: 0;
}
.sidebar-panel .list-group {
  margin-bottom: 10px;
}
.sidebar-panel .list-group .list-group-item {
  padding: 5px 0;
  font-size: 12px;
  border: 0;
}
.sidebar-content .wrapper,
.wrapper.sidebar-content {
  padding-right: 230px !important;
}
.body-small .sidebar-content .wrapper,
.body-small .wrapper.sidebar-content {
  padding-right: 20px !important;
}
#right-sidebar {
  background-color: #fff;
  border-left: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  overflow: hidden;
  position: fixed;
  top: 60px;
  width: 260px !important;
  z-index: 1009;
  bottom: 0;
  right: -260px;
}
#right-sidebar.sidebar-open {
  right: 0;
}
#right-sidebar.sidebar-open.sidebar-top {
  top: 0;
  border-top: none;
}
.sidebar-container ul.nav-tabs {
  border: none;
}
.sidebar-container ul.nav-tabs.navs-4 li {
  width: 25%;
}
.sidebar-container ul.nav-tabs.navs-3 li {
  width: 33.3333%;
}
.sidebar-container ul.nav-tabs.navs-2 li {
  width: 50%;
}
.sidebar-container ul.nav-tabs li {
  border: none;
}
.sidebar-container ul.nav-tabs li a {
  border: none;
  padding: 12px 10px;
  margin: 0;
  border-radius: 0;
  background: #2f4050;
  color: #fff;
  text-align: center;
  border-right: 1px solid #334556;
}
.sidebar-container ul.nav-tabs li.active a {
  border: none;
  background: #f9f9f9;
  color: #676a6c;
  font-weight: bold;
}
.sidebar-container .nav-tabs > li.active > a:hover,
.sidebar-container .nav-tabs > li.active > a:focus {
  border: none;
}
.sidebar-container ul.sidebar-list {
  margin: 0;
  padding: 0;
}
.sidebar-container ul.sidebar-list li {
  border-bottom: 1px solid #e7eaec;
  padding: 15px 20px;
  list-style: none;
  font-size: 12px;
}
.sidebar-container .sidebar-message:nth-child(2n+2) {
  background: #f9f9f9;
}
.sidebar-container ul.sidebar-list li a {
  text-decoration: none;
  color: inherit;
}
.sidebar-container .sidebar-content {
  padding: 15px 20px;
  font-size: 12px;
}
.sidebar-container .sidebar-title {
  background: #f9f9f9;
  padding: 20px;
  border-bottom: 1px solid #e7eaec;
}
.sidebar-container .sidebar-title h3 {
  margin-bottom: 3px;
  padding-left: 2px;
}
.sidebar-container .tab-content h4 {
  margin-bottom: 5px;
}
.sidebar-container .sidebar-message > a > .pull-left {
  margin-right: 10px;
}
.sidebar-container .sidebar-message > a {
  text-decoration: none;
  color: inherit;
}
.sidebar-container .sidebar-message {
  padding: 15px 20px;
}
.sidebar-container .sidebar-message .message-avatar {
  height: 38px;
  width: 38px;
  border-radius: 50%;
}
.sidebar-container .setings-item {
  padding: 15px 20px;
  border-bottom: 1px solid #e7eaec;
}
body {
  font-family: "Lato Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #2f4050;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
}
html,
body {
  height: 100%;
}
body.full-height-layout #wrapper,
body.full-height-layout #page-wrapper {
  height: 100%;
}
#page-wrapper {
  min-height: auto;
}
body.boxed-layout {
  background: url('patterns/shattered.png');
}
body.boxed-layout #wrapper {
  background-color: #2f4050;
  max-width: 1200px;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
}
.top-navigation.boxed-layout #wrapper,
.boxed-layout #wrapper.top-navigation {
  max-width: 1300px !important;
}
.block {
  display: block;
}
.clear {
  display: block;
  overflow: hidden;
}
a {
  cursor: pointer;
}
a:hover,
a:focus {
  text-decoration: none;
}
.border-bottom {
  border-bottom: 1px solid #e7eaec !important;
}
.font-bold {
  font-weight: 400;
}
.font-normal {
  font-weight: 400;
}
.text-uppercase {
  text-transform: uppercase;
}
.font-italic {
  font-style: italic;
}
.b-r {
  border-right: 1px solid #e7eaec;
}
.hr-line-dashed {
  border-top: 1px dashed #e7eaec;
  color: #ffffff;
  background-color: #ffffff;
  height: 1px;
  margin: 20px 0;
}
.hr-line-solid {
  border-bottom: 1px solid #e7eaec;
  background-color: rgba(0, 0, 0, 0);
  border-style: solid !important;
  margin-top: 15px;
  margin-bottom: 15px;
}
video {
  width: 100%;
  height: auto;
}

/* MODAL */
.modal-content {
  background-clip: padding-box;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  outline: 0 none;
  position: relative;
}
.modal-dialog {
  z-index: 2200;
}
.modal-body {
  padding: 20px 30px 30px 30px;
}
.inmodal .modal-body {
  background: #f8fafb;
}
.inmodal .modal-header {
  padding: 30px 15px;
  text-align: center;
}
.animated.modal.fade .modal-dialog {
  -webkit-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}
.inmodal .modal-title {
  font-size: 26px;
}
.inmodal .modal-icon {
  font-size: 84px;
  color: #e2e3e3;
}
.modal-footer {
  margin-top: 0;
}
/* WRAPPERS */
#wrapper {
  width: 100%;
  overflow-x: hidden;
}
.wrapper {
  padding: 0 20px;
}
.wrapper-content {
  padding: 20px 10px 40px;
}
#page-wrapper {
  padding: 0 15px;
  min-height: 568px;
  position: relative !important;
}
@media (min-width: 768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 240px;
    min-height: 2002px;
  }
}
.title-action {
  text-align: right;
  padding-top: 30px;
}
.ibox-content h1,
.ibox-content h2,
.ibox-content h3,
.ibox-content h4,
.ibox-content h5,
.ibox-title h1,
.ibox-title h2,
.ibox-title h3,
.ibox-title h4,
.ibox-title h5 {
  margin-top: 5px;
}
ul.unstyled,
ol.unstyled {
  list-style: none outside none;
  margin-left: 0;
}
.big-icon {
  font-size: 160px !important;
  color: #e5e6e7;
}
/* FOOTER */
.footer {
  background: none repeat scroll 0 0 white;
  border-top: 1px solid #e7eaec;
  bottom: 0;
  left: 0;
  padding: 10px 20px;
  position: absolute;
  right: 0;
}
.footer.fixed_full {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 10px 20px;
  background: white;
  border-top: 1px solid #e7eaec;
}
.footer.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 10px 20px;
  background: white;
  border-top: 1px solid #e7eaec;
  margin-left: 220px;
}
body.mini-navbar .footer.fixed,
body.body-small.mini-navbar .footer.fixed {
  margin: 0 0 0 70px;
}
body.mini-navbar.canvas-menu .footer.fixed,
body.canvas-menu .footer.fixed {
  margin: 0 !important;
}
body.fixed-sidebar.body-small.mini-navbar .footer.fixed {
  margin: 0 0 0 220px;
}
body.body-small .footer.fixed {
  margin-left: 0;
}
/* PANELS */
.page-heading {
  border-top: 0;
  padding: 0 10px 20px 10px;
}
.panel-heading h1,
.panel-heading h2 {
  margin-bottom: 5px;
}
/* TABLES */
.table-bordered {
  border: 1px solid #EBEBEB;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  background-color: #F5F5F6;
  border-bottom-width: 1px;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #e7e7e7;
}
.table > thead > tr > th {
  border-bottom: 1px solid #DDDDDD;
  vertical-align: bottom;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-top: 1px solid #e7eaec;
  line-height: 1.42857;
  padding: 8px;
  vertical-align: top;
}
/* PANELS */
.panel.blank-panel {
  background: none;
  margin: 0;
}
.blank-panel .panel-heading {
  padding-bottom: 0;
}
.nav-tabs > li > a {
  color: #A7B1C2;
  font-weight: 600;
  padding: 10px 20px 10px 25px;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background-color: #e6e6e6;
  color: #676a6c;
}
.ui-tab .tab-content {
  padding: 20px 0;
}
/* GLOBAL  */
.no-padding {
  padding: 0 !important;
}
.no-borders {
  border: none !important;
}
.no-margins {
  margin: 0 !important;
}
.no-top-border {
  border-top: 0 !important;
}
.ibox-content.text-box {
  padding-bottom: 0;
  padding-top: 15px;
}
.border-left-right {
  border-left: 1px solid #e7eaec;
  border-right: 1px solid #e7eaec;
}
.border-top-bottom {
  border-top: 1px solid #e7eaec;
  border-bottom: 1px solid #e7eaec;
}
.border-left {
  border-left: 1px solid #e7eaec;
}
.border-right {
  border-right: 1px solid #e7eaec;
}
.border-top {
  border-top: 1px solid #e7eaec;
}
.border-bottom {
  border-bottom: 1px solid #e7eaec;
}
.border-size-sm {
  border-width: 3px;
}
.border-size-md {
  border-width: 6px;
}
.border-size-lg {
  border-width: 9px;
}
.border-size-xl {
  border-width: 12px;
}
.full-width {
  width: 100% !important;
}
.link-block {
  font-size: 12px;
  padding: 10px;
}
.nav.navbar-top-links .link-block a {
  font-size: 12px;
}
.link-block a {
  font-size: 10px;
  color: inherit;
}
body.mini-navbar .branding {
  display: none;
}
img.circle-border {
  border: 6px solid #FFFFFF;
  border-radius: 50%;
}
.branding {
  float: left;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
  padding: 17px 20px;
  text-align: center;
  background-color: #2dc26b;
}
.login-panel {
  margin-top: 25%;
}
.icons-box h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.icons-box .infont a i {
  font-size: 25px;
  display: block;
  color: #676a6c;
}
.icons-box .infont a {
  color: #a6a8a9;
}
.icons-box .infont a {
  padding: 10px;
  margin: 1px;
  display: block;
}
.ui-draggable .ibox-title {
  cursor: move;
}
.breadcrumb {
  background-color: #ffffff;
  padding: 0;
  margin-bottom: 0;
}
.breadcrumb > li a {
  color: inherit;
}
.breadcrumb > .active {
  color: inherit;
}
code {
  background-color: #F9F2F4;
  border-radius: 4px;
  color: #ca4440;
  font-size: 90%;
  padding: 2px 4px;
  white-space: nowrap;
}
.ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox.collapsed .ibox-content {
  display: none;
}
.ibox.collapsed .fa.fa-chevron-up:before {
  content: "\f078";
}
.ibox.collapsed .fa.fa-chevron-down:before {
  content: "\f077";
}
.ibox:after,
.ibox:before {
  display: table;
}
.ibox-title {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  padding: 15px 15px 7px;
  min-height: 48px;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.ibox-footer {
  color: inherit;
  border-top: 1px solid #e7eaec;
  font-size: 90%;
  background: #ffffff;
  padding: 10px 15px;
}
table.table-mail tr td {
  padding: 12px;
}
.table-mail .check-mail {
  padding-left: 20px;
}
.table-mail .mail-date {
  padding-right: 20px;
}
.star-mail,
.check-mail {
  width: 40px;
}
.unread td a,
.unread td {
  font-weight: 600;
  color: inherit;
}
.read td a,
.read td {
  font-weight: normal;
  color: inherit;
}
.unread td {
  background-color: #f9f8f8;
}
.ibox-content {
  clear: both;
}
.ibox-heading {
  background-color: #f3f6fb;
  border-bottom: none;
}
.ibox-heading h3 {
  font-weight: 200;
  font-size: 24px;
}
.ibox-title h5 {
  display: inline-block;
  font-size: 14px;
  margin: 0 0 7px;
  padding: 0;
  text-overflow: ellipsis;
  float: left;
}
.ibox-title .label {
  float: left;
  margin-left: 4px;
}
.ibox-tools {
  display: block;
  float: none;
  margin-top: 0;
  position: relative;
  padding: 0;
  text-align: right;
}
.ibox-tools a {
  cursor: pointer;
  margin-left: 5px;
  color: #c4c4c4;
}
.ibox-tools a.btn-primary {
  color: #fff;
}
.ibox-tools .dropdown-menu > li > a {
  padding: 4px 10px;
  font-size: 12px;
}
.ibox .ibox-tools.open > .dropdown-menu {
  left: auto;
  right: 0;
}
/* BACKGROUNDS */
.gray-bg,
.bg-muted {
  background-color: #f3f3f4;
}
.white-bg {
  background-color: #ffffff;
}
.blue-bg,
.bg-success {
  background-color: #1c84c6;
  color: #ffffff;
}
.navy-bg,
.bg-primary {
  background-color: #2dc26b;
  color: #ffffff;
}
.lazur-bg,
.bg-info {
  background-color: #23c6c8;
  color: #ffffff;
}
.yellow-bg,
.bg-warning {
  background-color: #f8ac59;
  color: #ffffff;
}
.red-bg,
.bg-danger {
  background-color: #ed5565;
  color: #ffffff;
}
.black-bg {
  background-color: #262626;
}
.panel-primary {
  border-color: #2dc26b;
}
.panel-primary > .panel-heading {
  background-color: #2dc26b;
  border-color: #2dc26b;
}
.panel-success {
  border-color: #1c84c6;
}
.panel-success > .panel-heading {
  background-color: #1c84c6;
  border-color: #1c84c6;
  color: #ffffff;
}
.panel-info {
  border-color: #23c6c8;
}
.panel-info > .panel-heading {
  background-color: #23c6c8;
  border-color: #23c6c8;
  color: #ffffff;
}
.panel-warning {
  border-color: #f8ac59;
}
.panel-warning > .panel-heading {
  background-color: #f8ac59;
  border-color: #f8ac59;
  color: #ffffff;
}
.panel-danger {
  border-color: #ed5565;
}
.panel-danger > .panel-heading {
  background-color: #ed5565;
  border-color: #ed5565;
  color: #ffffff;
}
.progress-bar {
  background-color: #2dc26b;
}
.progress-small,
.progress-small .progress-bar {
  height: 10px;
}
.progress-small,
.progress-mini {
  margin-top: 5px;
}
.progress-mini,
.progress-mini .progress-bar {
  height: 5px;
  margin-bottom: 0;
}
.progress-bar-navy-light {
  background-color: #3dc7ab;
}
.progress-bar-success {
  background-color: #1c84c6;
}
.progress-bar-info {
  background-color: #23c6c8;
}
.progress-bar-warning {
  background-color: #f8ac59;
}
.progress-bar-danger {
  background-color: #ed5565;
}
.panel-title {
  font-size: inherit;
}
.jumbotron {
  border-radius: 6px;
  padding: 40px;
}
.jumbotron h1 {
  margin-top: 0;
}
/* COLORS */
.text-navy {
  color: #2dc26b;
}
.text-primary {
  color: inherit;
}
.text-success {
  color: #1c84c6;
}
.text-info {
  color: #23c6c8;
}
.text-warning {
  color: #f8ac59;
}
.text-danger {
  color: #ed5565;
}
.text-muted {
  color: #888888;
}
.text-white {
  color: #ffffff;
}
.simple_tag {
  background-color: #f3f3f4;
  border: 1px solid #e7eaec;
  border-radius: 2px;
  color: inherit;
  font-size: 10px;
  margin-right: 5px;
  margin-top: 5px;
  padding: 5px 12px;
  display: inline-block;
}
.img-shadow {
  -webkit-box-shadow: 0 0 3px 0 #919191;
  -moz-box-shadow: 0 0 3px 0 #919191;
  box-shadow: 0 0 3px 0 #919191;
}
/* For handle diferent bg color in AngularJS version */
.dashboards\.dashboard_2 nav.navbar,
.dashboards\.dashboard_3 nav.navbar,
.mailbox\.inbox nav.navbar,
.mailbox\.email_view nav.navbar,
.mailbox\.email_compose nav.navbar,
.dashboards\.dashboard_4_1 nav.navbar,
.metrics nav.navbar,
.metrics\.index nav.navbar,
.dashboards\.dashboard_5 nav.navbar {
  background: #fff;
}
/* For handle diferent bg color in MVC version */
.Dashboard_2 .navbar.navbar-static-top,
.Dashboard_3 .navbar.navbar-static-top,
.Dashboard_4_1 .navbar.navbar-static-top,
.ComposeEmail .navbar.navbar-static-top,
.EmailView .navbar.navbar-static-top,
.Inbox .navbar.navbar-static-top,
.Metrics .navbar.navbar-static-top,
.Dashboard_5 .navbar.navbar-static-top {
  background: #fff;
}
a.close-canvas-menu {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 1011;
  color: #a7b1c2;
}
a.close-canvas-menu:hover {
  color: #fff;
}
.close-canvas-menu {
  display: none;
}
.canvas-menu .close-canvas-menu {
  display: block;
}
.light-navbar .navbar.navbar-static-top {
  background-color: #ffffff;
}
/* FULL HEIGHT */
.full-height {
  height: 100%;
}
.fh-breadcrumb {
  height: calc(100% - 196px);
  margin: 0 -15px;
  position: relative;
}
.fh-no-breadcrumb {
  height: calc(100% - 99px);
  margin: 0 -15px;
  position: relative;
}
.fh-column {
  background: #fff;
  height: 100%;
  width: 240px;
  float: left;
}
.modal-backdrop {
  z-index: 2040 !important;
}
.modal {
  z-index: 2050 !important;
}
.spiner-example {
  height: 200px;
  padding-top: 70px;
}
/* MARGINS & PADDINGS */
.p-xxs {
  padding: 5px;
}
.p-xs {
  padding: 10px;
}
.p-sm {
  padding: 15px;
}
.p-m {
  padding: 20px;
}
.p-md {
  padding: 25px;
}
.p-lg {
  padding: 30px;
}
.p-xl {
  padding: 40px;
}
.p-w-xs {
  padding: 0 10px;
}
.p-w-sm {
  padding: 0 15px;
}
.p-w-m {
  padding: 0 20px;
}
.p-w-md {
  padding: 0 25px;
}
.p-w-lg {
  padding: 0 30px;
}
.p-w-xl {
  padding: 0 40px;
}
.p-h-xs {
  padding: 10px 0;
}
.p-h-sm {
  padding: 15px 0;
}
.p-h-m {
  padding: 20px 0;
}
.p-h-md {
  padding: 25px 0;
}
.p-h-lg {
  padding: 30px 0;
}
.p-h-xl {
  padding: 40px 0;
}
.m-xxs {
  margin: 2px 4px;
}
.m {
  margin: 15px;
}
.m-xs {
  margin: 5px;
}
.m-sm {
  margin: 10px;
}
.m-md {
  margin: 20px;
}
.m-lg {
  margin: 30px;
}
.m-xl {
  margin: 50px;
}
.m-n {
  margin: 0 !important;
}
.m-l-none {
  margin-left: 0;
}
.m-l-xs {
  margin-left: 5px;
}
.m-l-sm {
  margin-left: 10px;
}
.m-l {
  margin-left: 15px;
}
.m-l-md {
  margin-left: 20px;
}
.m-l-lg {
  margin-left: 30px;
}
.m-l-xl {
  margin-left: 40px;
}
.m-l-n-xxs {
  margin-left: -1px;
}
.m-l-n-xs {
  margin-left: -5px;
}
.m-l-n-sm {
  margin-left: -10px;
}
.m-l-n {
  margin-left: -15px;
}
.m-l-n-md {
  margin-left: -20px;
}
.m-l-n-lg {
  margin-left: -30px;
}
.m-l-n-xl {
  margin-left: -40px;
}
.m-t-none {
  margin-top: 0;
}
.m-t-xxs {
  margin-top: 1px;
}
.m-t-xs {
  margin-top: 5px;
}
.m-t-sm {
  margin-top: 10px;
}
.m-t {
  margin-top: 15px;
}
.m-t-md {
  margin-top: 20px;
}
.m-t-lg {
  margin-top: 30px;
}
.m-t-xl {
  margin-top: 40px;
}
.m-t-n-xxs {
  margin-top: -1px;
}
.m-t-n-xs {
  margin-top: -5px;
}
.m-t-n-sm {
  margin-top: -10px;
}
.m-t-n {
  margin-top: -15px;
}
.m-t-n-md {
  margin-top: -20px;
}
.m-t-n-lg {
  margin-top: -30px;
}
.m-t-n-xl {
  margin-top: -40px;
}
.m-r-none {
  margin-right: 0;
}
.m-r-xxs {
  margin-right: 1px;
}
.m-r-xs {
  margin-right: 5px;
}
.m-r-sm {
  margin-right: 10px;
}
.m-r {
  margin-right: 15px;
}
.m-r-md {
  margin-right: 20px;
}
.m-r-lg {
  margin-right: 30px;
}
.m-r-xl {
  margin-right: 40px;
}
.m-r-n-xxs {
  margin-right: -1px;
}
.m-r-n-xs {
  margin-right: -5px;
}
.m-r-n-sm {
  margin-right: -10px;
}
.m-r-n {
  margin-right: -15px;
}
.m-r-n-md {
  margin-right: -20px;
}
.m-r-n-lg {
  margin-right: -30px;
}
.m-r-n-xl {
  margin-right: -40px;
}
.m-b-none {
  margin-bottom: 0;
}
.m-b-xxs {
  margin-bottom: 1px;
}
.m-b-xs {
  margin-bottom: 5px;
}
.m-b-sm {
  margin-bottom: 10px;
}
.m-b {
  margin-bottom: 15px;
}
.m-b-md {
  margin-bottom: 20px;
}
.m-b-lg {
  margin-bottom: 30px;
}
.m-b-xl {
  margin-bottom: 40px;
}
.m-b-n-xxs {
  margin-bottom: -1px;
}
.m-b-n-xs {
  margin-bottom: -5px;
}
.m-b-n-sm {
  margin-bottom: -10px;
}
.m-b-n {
  margin-bottom: -15px;
}
.m-b-n-md {
  margin-bottom: -20px;
}
.m-b-n-lg {
  margin-bottom: -30px;
}
.m-b-n-xl {
  margin-bottom: -40px;
}
.space-15 {
  margin: 15px 0;
}
.space-20 {
  margin: 20px 0;
}
.space-25 {
  margin: 25px 0;
}
.space-30 {
  margin: 30px 0;
}
.img-sm {
  width: 32px;
  height: 32px;
}
.img-md {
  width: 64px;
  height: 64px;
}
.img-lg {
  width: 96px;
  height: 96px;
}
.b-r-xs {
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.b-r-sm {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.b-r-md {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.b-r-lg {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}
.b-r-xl {
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
}
.fullscreen-ibox-mode .animated {
  animation: none;
}
body.fullscreen-ibox-mode {
  overflow-y: hidden;
}
.ibox.fullscreen {
  z-index: 2030;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  margin-bottom: 0;
}
.ibox.fullscreen .collapse-link {
  display: none;
}
.ibox.fullscreen .ibox-content {
  min-height: calc(100% - 48px);
}
body.modal-open {
  padding-right: inherit !important;
}
body.modal-open .wrapper-content.animated {
  -webkit-animation: none;
  -ms-animation-nam: none;
  animation: none;
}
body.modal-open .animated {
  animation-fill-mode: initial;
  z-index: inherit;
}
/* Show profile dropdown on fixed sidebar */
body.mini-navbar.fixed-sidebar .profile-element,
.block {
  display: block !important;
}
body.mini-navbar.fixed-sidebar .nav-header {
  padding: 33px 25px;
}
body.mini-navbar.fixed-sidebar .logo-element {
  display: none;
}
.fullscreen-video .animated {
  animation: none;
}
/* SEARCH PAGE */
.search-form {
  margin-top: 10px;
}
.search-result h3 {
  margin-bottom: 0;
  color: #1E0FBE;
}
.search-result .search-link {
  color: #006621;
}
.search-result p {
  font-size: 12px;
  margin-top: 5px;
}
/* CONTACTS */
.contact-box {
  background-color: #ffffff;
  border: 1px solid #e7eaec;
  padding: 20px;
  margin-bottom: 20px;
}
.contact-box > a {
  color: inherit;
}
.contact-box.center-version {
  border: 1px solid #e7eaec;
  padding: 0;
}
.contact-box.center-version > a {
  display: block;
  background-color: #ffffff;
  padding: 20px;
  text-align: center;
}
.contact-box.center-version > a img {
  width: 80px;
  height: 80px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.contact-box.center-version address {
  margin-bottom: 0;
}
.contact-box .contact-box-footer {
  text-align: center;
  background-color: #ffffff;
  border-top: 1px solid #e7eaec;
  padding: 15px 20px;
}
/* INVOICE */
.invoice-table tbody > tr > td:last-child,
.invoice-table tbody > tr > td:nth-child(4),
.invoice-table tbody > tr > td:nth-child(3),
.invoice-table tbody > tr > td:nth-child(2) {
  text-align: right;
}
.invoice-table thead > tr > th:last-child,
.invoice-table thead > tr > th:nth-child(4),
.invoice-table thead > tr > th:nth-child(3),
.invoice-table thead > tr > th:nth-child(2) {
  text-align: right;
}
.invoice-total > tbody > tr > td:first-child {
  text-align: right;
}
.invoice-total > tbody > tr > td {
  border: 0 none;
}
.invoice-total > tbody > tr > td:last-child {
  border-bottom: 1px solid #DDDDDD;
  text-align: right;
  width: 15%;
}
/* ERROR & LOGIN & LOCKSCREEN*/
.middle-box {
  max-width: 400px;
  z-index: 100;
  margin: 0 auto;
  padding-top: 40px;
}
.lockscreen.middle-box {
  width: 200px;
  padding-top: 110px;
}
.loginscreen.middle-box {
  width: 300px;
}
.loginColumns {
  max-width: 800px;
  margin: 0 auto;
  padding: 100px 20px 20px 20px;
}
.passwordBox {
  max-width: 460px;
  margin: 0 auto;
  padding: 100px 20px 20px 20px;
}
.logo-name {
  color: #e6e6e6;
  font-size: 180px;
  font-weight: 800;
  letter-spacing: -10px;
  margin-bottom: 0;
}
.middle-box h1 {
  font-size: 170px;
}
.wrapper .middle-box {
  margin-top: 140px;
}
.lock-word {
  z-index: 10;
  position: absolute;
  top: 110px;
  left: 50%;
  margin-left: -470px;
}
.lock-word span {
  font-size: 100px;
  font-weight: 600;
  color: #e9e9e9;
  display: inline-block;
}
.lock-word .first-word {
  margin-right: 160px;
}
/* DASBOARD */
.dashboard-header {
  border-top: 0;
  padding: 20px 20px 20px 20px;
}
.dashboard-header h2 {
  margin-top: 10px;
  font-size: 26px;
}
.fist-item {
  border-top: none !important;
}
.statistic-box {
  margin-top: 40px;
}
.dashboard-header .list-group-item span.label {
  margin-right: 10px;
}
.list-group.clear-list .list-group-item {
  border-top: 1px solid #e7eaec;
  border-bottom: 0;
  border-right: 0;
  border-left: 0;
  padding: 10px 0;
}
ul.clear-list:first-child {
  border-top: none !important;
}
/* Intimeline */
.timeline-item .date i {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  width: 30px;
  text-align: center;
  border-top: 1px solid #e7eaec;
  border-bottom: 1px solid #e7eaec;
  border-left: 1px solid #e7eaec;
  background: #f8f8f8;
}
.timeline-item .date {
  text-align: right;
  width: 110px;
  position: relative;
  padding-top: 30px;
}
.timeline-item .content {
  border-left: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  padding-top: 10px;
  min-height: 100px;
}
.timeline-item .content:hover {
  background: #f6f6f6;
}
/* PIN BOARD */
ul.notes li,
ul.tag-list li {
  list-style: none;
}
ul.notes li h4 {
  margin-top: 20px;
  font-size: 16px;
}
ul.notes li div {
  text-decoration: none;
  color: #000;
  background: #ffc;
  display: block;
  height: 140px;
  width: 140px;
  padding: 1em;
  position: relative;
}
ul.notes li div small {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
}
ul.notes li div a {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: inherit;
}
ul.notes li {
  margin: 10px 40px 50px 0;
  float: left;
}
ul.notes li div p {
  font-size: 12px;
}
ul.notes li div {
  text-decoration: none;
  color: #000;
  background: #ffc;
  display: block;
  height: 140px;
  width: 140px;
  padding: 1em;
  /* Firefox */
  -moz-box-shadow: 5px 5px 2px #212121;
  /* Safari+Chrome */
  -webkit-box-shadow: 5px 5px 2px rgba(33, 33, 33, 0.7);
  /* Opera */
  box-shadow: 5px 5px 2px rgba(33, 33, 33, 0.7);
}
ul.notes li div {
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
}
ul.notes li:nth-child(even) div {
  -o-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  position: relative;
  top: 5px;
}
ul.notes li:nth-child(3n) div {
  -o-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  position: relative;
  top: -5px;
}
ul.notes li:nth-child(5n) div {
  -o-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  position: relative;
  top: -10px;
}
ul.notes li div:hover,
ul.notes li div:focus {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  position: relative;
  z-index: 5;
}
ul.notes li div {
  text-decoration: none;
  color: #000;
  background: #ffc;
  display: block;
  height: 210px;
  width: 210px;
  padding: 1em;
  -moz-box-shadow: 5px 5px 7px #212121;
  -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
  box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
  -moz-transition: -moz-transform 0.15s linear;
  -o-transition: -o-transform 0.15s linear;
  -webkit-transition: -webkit-transform 0.15s linear;
}
/* FILE MANAGER */
.file-box {
  float: left;
  width: 220px;
}
.file-manager h5 {
  text-transform: uppercase;
}
.file-manager {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.folder-list li a {
  color: #666666;
  display: block;
  padding: 5px 0;
}
.folder-list li {
  border-bottom: 1px solid #e7eaec;
  display: block;
}
.folder-list li i {
  margin-right: 8px;
  color: #3d4d5d;
}
.category-list li a {
  color: #666666;
  display: block;
  padding: 5px 0;
}
.category-list li {
  display: block;
}
.category-list li i {
  margin-right: 8px;
  color: #3d4d5d;
}
.category-list li a .text-navy {
  color: #2dc26b;
}
.category-list li a .text-primary {
  color: #1c84c6;
}
.category-list li a .text-info {
  color: #23c6c8;
}
.category-list li a .text-danger {
  color: #EF5352;
}
.category-list li a .text-warning {
  color: #F8AC59;
}
.file-manager h5.tag-title {
  margin-top: 20px;
}
.tag-list li {
  float: left;
}
.tag-list li a {
  font-size: 10px;
  background-color: #f3f3f4;
  padding: 5px 12px;
  color: inherit;
  border-radius: 2px;
  border: 1px solid #e7eaec;
  margin-right: 5px;
  margin-top: 5px;
  display: block;
}
.file {
  border: 1px solid #e7eaec;
  padding: 0;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 20px;
  margin-right: 20px;
}
.file-manager .hr-line-dashed {
  margin: 15px 0;
}
.file .icon,
.file .image {
  height: 100px;
  overflow: hidden;
}
.file .icon {
  padding: 15px 10px;
  text-align: center;
}
.file-control {
  color: inherit;
  font-size: 11px;
  margin-right: 10px;
}
.file-control.active {
  text-decoration: underline;
}
.file .icon i {
  font-size: 70px;
  color: #dadada;
}
.file .file-name {
  padding: 10px;
  background-color: #f8f8f8;
  border-top: 1px solid #e7eaec;
}
.file-name small {
  color: #676a6c;
}
.corner {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  line-height: 0;
  border: 0.6em solid transparent;
  border-right: 0.6em solid #f1f1f1;
  border-bottom: 0.6em solid #f1f1f1;
  right: 0em;
  bottom: 0em;
}
a.compose-mail {
  padding: 8px 10px;
}
.mail-search {
  max-width: 300px;
}
/* PROFILE */
.profile-content {
  border-top: none !important;
}
.profile-stats {
  margin-right: 10px;
}
.profile-image {
  width: 120px;
  float: left;
}
.profile-image img {
  width: 96px;
  height: 96px;
}
.profile-info {
  margin-left: 120px;
}
.feed-activity-list .feed-element {
  border-bottom: 1px solid #e7eaec;
}
.feed-element:first-child {
  margin-top: 0;
}
.feed-element {
  padding-bottom: 15px;
}
.feed-element,
.feed-element .media {
  margin-top: 15px;
}
.feed-element,
.media-body {
  overflow: hidden;
}
.feed-element > .pull-left {
  margin-right: 10px;
}
.feed-element img.img-circle,
.dropdown-messages-box img.img-circle {
  width: 38px;
  height: 38px;
}
.feed-element .well {
  border: 1px solid #e7eaec;
  box-shadow: none;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 10px 20px;
  font-size: 11px;
  line-height: 16px;
}
.feed-element .actions {
  margin-top: 10px;
}
.feed-element .photos {
  margin: 10px 0;
}
.feed-photo {
  max-height: 180px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 10px;
  margin-bottom: 10px;
}
.file-list li {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 2px;
  border: 1px solid #e7eaec;
  margin-bottom: 5px;
}
.file-list li a {
  color: inherit;
}
.file-list li a:hover {
  color: #2dc26b;
}
.user-friends img {
  width: 42px;
  height: 42px;
  margin-bottom: 5px;
  margin-right: 5px;
}
/* MAILBOX */
.mail-box {
  background-color: #ffffff;
  border: 1px solid #e7eaec;
  border-top: 0;
  padding: 0;
  margin-bottom: 20px;
}
.mail-box-header {
  background-color: #ffffff;
  border: 1px solid #e7eaec;
  border-bottom: 0;
  padding: 30px 20px 20px 20px;
}
.mail-box-header h2 {
  margin-top: 0;
}
.mailbox-content .tag-list li a {
  background: #ffffff;
}
.mail-body {
  border-top: 1px solid #e7eaec;
  padding: 20px;
}
.mail-text {
  border-top: 1px solid #e7eaec;
}
.mail-text .note-toolbar {
  padding: 10px 15px;
}
.mail-body .form-group {
  margin-bottom: 5px;
}
.mail-text .note-editor .note-toolbar {
  background-color: #F9F8F8;
}
.mail-attachment {
  border-top: 1px solid #e7eaec;
  padding: 20px;
  font-size: 12px;
}
.mailbox-content {
  background: none;
  border: none;
  padding: 10px;
}
.mail-ontact {
  width: 23%;
}
/* PROJECTS */
.project-people,
.project-actions {
  text-align: right;
  vertical-align: middle;
}
dd.project-people {
  text-align: left;
  margin-top: 5px;
}
.project-people img {
  width: 32px;
  height: 32px;
}
.project-title a {
  font-size: 14px;
  color: #676a6c;
  font-weight: 600;
}
.project-list table tr td {
  border-top: none;
  border-bottom: 1px solid #e7eaec;
  padding: 15px 10px;
  vertical-align: middle;
}
.project-manager .tag-list li a {
  font-size: 10px;
  background-color: white;
  padding: 5px 12px;
  color: inherit;
  border-radius: 2px;
  border: 1px solid #e7eaec;
  margin-right: 5px;
  margin-top: 5px;
  display: block;
}
.project-files li a {
  font-size: 11px;
  color: #676a6c;
  margin-left: 10px;
  line-height: 22px;
}
/* FAQ */
.faq-item {
  padding: 20px;
  margin-bottom: 2px;
  background: #fff;
}
.faq-question {
  font-size: 18px;
  font-weight: 600;
  color: #2dc26b;
  display: block;
}
.faq-question:hover {
  color: #179d82;
}
.faq-answer {
  margin-top: 10px;
  background: #f3f3f4;
  border: 1px solid #e7eaec;
  border-radius: 3px;
  padding: 15px;
}
.faq-item .tag-item {
  background: #f3f3f4;
  padding: 2px 6px;
  font-size: 10px;
  text-transform: uppercase;
}
/* Chat view */
.message-input {
  height: 90px !important;
}
.chat-avatar {
  width: 36px;
  height: 36px;
  float: left;
  margin-right: 10px;
}
.chat-user-name {
  padding: 10px;
}
.chat-user {
  padding: 8px 10px;
  border-bottom: 1px solid #e7eaec;
}
.chat-user a {
  color: inherit;
}
.chat-view {
  z-index: 20012;
}
.chat-users,
.chat-statistic {
  margin-left: -30px;
}
@media (max-width: 992px) {
  .chat-users,
  .chat-statistic {
    margin-left: 0;
  }
}
.chat-view .ibox-content {
  padding: 0;
}
.chat-message {
  padding: 10px 20px;
}
.message-avatar {
  height: 48px;
  width: 48px;
  border: 1px solid #e7eaec;
  border-radius: 4px;
  margin-top: 1px;
}
.chat-discussion .chat-message.left .message-avatar {
  float: left;
  margin-right: 10px;
}
.chat-discussion .chat-message.right .message-avatar {
  float: right;
  margin-left: 10px;
}
.message {
  background-color: #fff;
  border: 1px solid #e7eaec;
  text-align: left;
  display: block;
  padding: 10px 20px;
  position: relative;
  border-radius: 4px;
}
.chat-discussion .chat-message.left .message-date {
  float: right;
}
.chat-discussion .chat-message.right .message-date {
  float: left;
}
.chat-discussion .chat-message.left .message {
  text-align: left;
  margin-left: 55px;
}
.chat-discussion .chat-message.right .message {
  text-align: right;
  margin-right: 55px;
}
.message-date {
  font-size: 10px;
  color: #888888;
}
.message-content {
  display: block;
}
.chat-discussion {
  background: #eee;
  padding: 15px;
  height: 400px;
  overflow-y: auto;
}
.chat-users {
  overflow-y: auto;
  height: 400px;
}
.chat-message-form .form-group {
  margin-bottom: 0;
}
/* jsTree */
.jstree-open > .jstree-anchor > .fa-folder:before {
  content: "\f07c";
}
.jstree-default .jstree-icon.none {
  width: 0;
}
/* CLIENTS */
.clients-list {
  margin-top: 20px;
}
.clients-list .tab-pane {
  position: relative;
  height: 600px;
}
.client-detail {
  position: relative;
  height: 620px;
}
.clients-list table tr td {
  height: 46px;
  vertical-align: middle;
  border: none;
}
.client-link {
  font-weight: 600;
  color: inherit;
}
.client-link:hover {
  color: inherit;
}
.client-avatar {
  width: 42px;
}
.client-avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.contact-type {
  width: 20px;
  color: #c1c3c4;
}
.client-status {
  text-align: left;
}
.client-detail .vertical-timeline-content p {
  margin: 0;
}
.client-detail .vertical-timeline-icon.gray-bg {
  color: #a7aaab;
}
.clients-list .nav-tabs > li.active > a,
.clients-list .nav-tabs > li.active > a:hover,
.clients-list .nav-tabs > li.active > a:focus {
  border-bottom: 1px solid #fff;
}
/* BLOG ARTICLE */
.blog h2 {
  font-weight: 700;
}
.blog h5 {
  margin: 0 0 5px 0;
}
.blog .btn {
  margin: 0 0 5px 0;
}
.article h1 {
  font-size: 48px;
  font-weight: 700;
  color: #2F4050;
}
.article p {
  font-size: 15px;
  line-height: 26px;
}
.article-title {
  text-align: center;
  margin: 40px 0 100px 0;
}
.article .ibox-content {
  padding: 40px;
}
/* ISSUE TRACKER */
.issue-tracker .btn-link {
  color: #2dc26b;
}
table.issue-tracker tbody tr td {
  vertical-align: middle;
  height: 50px;
}
.issue-info {
  width: 50%;
}
.issue-info a {
  font-weight: 600;
  color: #676a6c;
}
.issue-info small {
  display: block;
}
/* TEAMS */
.team-members {
  margin: 10px 0;
}
.team-members img.img-circle {
  width: 42px;
  height: 42px;
  margin-bottom: 5px;
}
/* AGILE BOARD */
.sortable-list {
  padding: 10px 0;
}
.agile-list {
  list-style: none;
  margin: 0;
}
.agile-list li {
  background: #FAFAFB;
  border: 1px solid #e7eaec;
  margin: 0 0 10px 0;
  padding: 10px;
  border-radius: 2px;
}
.agile-list li:hover {
  cursor: pointer;
  background: #fff;
}
.agile-list li.warning-element {
  border-left: 3px solid #f8ac59;
}
.agile-list li.danger-element {
  border-left: 3px solid #ed5565;
}
.agile-list li.info-element {
  border-left: 3px solid #1c84c6;
}
.agile-list li.success-element {
  border-left: 3px solid #2dc26b;
}
.agile-detail {
  margin-top: 5px;
  font-size: 12px;
}
/* DIFF */
ins {
  background-color: #c6ffc6;
  text-decoration: none;
}
del {
  background-color: #ffc6c6;
}
/* E-commerce */
.product-box {
  padding: 0;
  border: 1px solid #e7eaec;
}
.product-box:hover,
.product-box.active {
  border: 1px solid transparent;
  -webkit-box-shadow: 0 3px 7px 0 #a8a8a8;
  -moz-box-shadow: 0 3px 7px 0 #a8a8a8;
  box-shadow: 0 3px 7px 0 #a8a8a8;
}
.product-imitation {
  text-align: center;
  padding: 90px 0;
  background-color: #f8f8f9;
  color: #bebec3;
  font-weight: 600;
}
.cart-product-imitation {
  text-align: center;
  padding-top: 30px;
  height: 80px;
  width: 80px;
  background-color: #f8f8f9;
}
.product-imitation.xl {
  padding: 120px 0;
}
.product-desc {
  padding: 20px;
  position: relative;
}
.ecommerce .tag-list {
  padding: 0;
}
.ecommerce .fa-star {
  color: #d1dade;
}
.ecommerce .fa-star.active {
  color: #f8ac59;
}
.ecommerce .note-editor {
  border: 1px solid #e7eaec;
}
table.shoping-cart-table {
  margin-bottom: 0;
}
table.shoping-cart-table tr td {
  border: none;
  text-align: right;
}
table.shoping-cart-table tr td.desc,
table.shoping-cart-table tr td:first-child {
  text-align: left;
}
table.shoping-cart-table tr td:last-child {
  width: 80px;
}
.product-name {
  font-size: 16px;
  font-weight: 600;
  color: #676a6c;
  display: block;
  margin: 2px 0 5px 0;
}
.product-name:hover,
.product-name:focus {
  color: #2dc26b;
}
.product-price {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background-color: #2dc26b;
  padding: 6px 12px;
  position: absolute;
  top: -32px;
  right: 0;
}
.product-detail .ibox-content {
  padding: 30px 30px 50px 30px;
}
.image-imitation {
  background-color: #f8f8f9;
  text-align: center;
  padding: 200px 0;
}
.product-main-price small {
  font-size: 10px;
}
.product-images {
  margin: 0 20px;
}
/* Social feed */
.social-feed-separated .social-feed-box {
  margin-left: 62px;
}
.social-feed-separated .social-avatar {
  float: left;
  padding: 0;
}
.social-feed-separated .social-avatar img {
  width: 52px;
  height: 52px;
  border: 1px solid #e7eaec;
}
.social-feed-separated .social-feed-box .social-avatar {
  padding: 15px 15px 0 15px;
  float: none;
}
.social-feed-box {
  /*padding: 15px;*/
  border: 1px solid #e7eaec;
  background: #fff;
  margin-bottom: 15px;
}
.article .social-feed-box {
  margin-bottom: 0;
  border-bottom: none;
}
.article .social-feed-box:last-child {
  margin-bottom: 0;
  border-bottom: 1px solid #e7eaec;
}
.article .social-feed-box p {
  font-size: 13px;
  line-height: 18px;
}
.social-action {
  margin: 15px;
}
.social-avatar {
  padding: 15px 15px 0 15px;
}
.social-comment .social-comment {
  margin-left: 45px;
}
.social-avatar img {
  height: 40px;
  width: 40px;
  margin-right: 10px;
}
.social-avatar .media-body a {
  font-size: 14px;
  display: block;
}
.social-body {
  padding: 15px;
}
.social-body img {
  margin-bottom: 10px;
}
.social-footer {
  border-top: 1px solid #e7eaec;
  padding: 10px 15px;
  background: #f9f9f9;
}
.social-footer .social-comment img {
  width: 32px;
  margin-right: 10px;
}
.social-comment:first-child {
  margin-top: 0;
}
.social-comment {
  margin-top: 15px;
}
.social-comment textarea {
  font-size: 12px;
}
/* Vote list */
.vote-item {
  padding: 20px 25px;
  background: #ffffff;
  border-top: 1px solid #e7eaec;
}
.vote-item:last-child {
  border-bottom: 1px solid #e7eaec;
}
.vote-item:hover {
  background: #fbfbfb;
}
.vote-actions {
  float: left;
  width: 30px;
  margin-right: 15px;
  text-align: center;
}
.vote-actions a {
  color: #2dc26b;
  font-weight: 600;
}
.vote-actions {
  font-weight: 600;
}
.vote-title {
  display: block;
  color: inherit;
  font-size: 18px;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 2px;
}
.vote-title:hover,
.vote-title:focus {
  color: inherit;
}
.vote-info,
.vote-title {
  margin-left: 45px;
}
.vote-info,
.vote-info a {
  color: #b4b6b8;
  font-size: 12px;
}
.vote-info a {
  margin-right: 10px;
}
.vote-info a:hover {
  color: #2dc26b;
}
.vote-icon {
  text-align: right;
  font-size: 38px;
  display: block;
  color: #e8e9ea;
}
.vote-icon.active {
  color: #2dc26b;
}
body.body-small .vote-icon {
  display: none;
}
.lightBoxGallery {
  text-align: center;
}
.lightBoxGallery img {
  margin: 5px;
}
#small-chat {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}
#small-chat .badge {
  position: absolute;
  top: -3px;
  right: -4px;
}
.open-small-chat {
  height: 38px;
  width: 38px;
  display: block;
  background: #2dc26b;
  padding: 9px 8px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
}
.open-small-chat:hover {
  color: white;
  background: #2dc26b;
}
.small-chat-box {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 75px;
  background: #fff;
  border: 1px solid #e7eaec;
  width: 230px;
  height: 320px;
  border-radius: 4px;
}
.small-chat-box.ng-small-chat {
  display: block;
}
.body-small .small-chat-box {
  bottom: 70px;
  right: 20px;
}
.small-chat-box.active {
  display: block;
}
.small-chat-box .heading {
  background: #2f4050;
  padding: 8px 15px;
  font-weight: bold;
  color: #fff;
}
.small-chat-box .chat-date {
  opacity: 0.6;
  font-size: 10px;
  font-weight: normal;
}
.small-chat-box .content {
  padding: 15px 15px;
}
.small-chat-box .content .author-name {
  font-weight: bold;
  margin-bottom: 3px;
  font-size: 11px;
}
.small-chat-box .content > div {
  padding-bottom: 20px;
}
.small-chat-box .content .chat-message {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 14px;
  max-width: 80%;
  background: #f3f3f4;
  margin-bottom: 10px;
}
.small-chat-box .content .chat-message.active {
  background: #2dc26b;
  color: #fff;
}
.small-chat-box .content .left {
  text-align: left;
  clear: both;
}
.small-chat-box .content .left .chat-message {
  float: left;
}
.small-chat-box .content .right {
  text-align: right;
  clear: both;
}
.small-chat-box .content .right .chat-message {
  float: right;
}
.small-chat-box .form-chat {
  padding: 10px 10px;
}
/*
 * metismenu - v2.0.2
 * A jQuery menu plugin
 * https://github.com/onokumus/metisMenu
 *
 * Made by Osman Nuri Okumus
 * Under MIT License
 */
.metismenu .plus-minus,
.metismenu .plus-times {
  float: right;
}
.metismenu .arrow {
  float: right;
  line-height: 1.42857;
}
.metismenu .glyphicon.arrow:before {
  content: "\e079";
}
.metismenu .active > a > .glyphicon.arrow:before {
  content: "\e114";
}
.metismenu .fa.arrow:before {
  content: "\f104";
}
.metismenu .active > a > .fa.arrow:before {
  content: "\f107";
}
.metismenu .ion.arrow:before {
  content: "\f3d2";
}
.metismenu .active > a > .ion.arrow:before {
  content: "\f3d0";
}
.metismenu .fa.plus-minus:before,
.metismenu .fa.plus-times:before {
  content: "\f067";
}
.metismenu .active > a > .fa.plus-times {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.metismenu .active > a > .fa.plus-minus:before {
  content: "\f068";
}
.metismenu .collapse {
  display: none;
}
.metismenu .collapse.in {
  display: block;
}
.metismenu .collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: .35s;
  transition-duration: .35s;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
}
.mini-navbar .metismenu .collapse {
  opacity: 0;
}
.mini-navbar .metismenu .collapse.in {
  opacity: 1;
}
.mini-navbar .metismenu .collapse a {
  display: none;
}
.mini-navbar .metismenu .collapse.in a {
  display: block;
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-rotating-plane"></div>
 *
 */
.sk-spinner-rotating-plane.sk-spinner {
  width: 30px;
  height: 30px;
  background-color: #2dc26b;
  margin: 0 auto;
  -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
  animation: sk-rotatePlane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
@keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-double-bounce">
 *      <div class="sk-double-bounce1"></div>
 *      <div class="sk-double-bounce2"></div>
 *    </div>
 *
 */
.sk-spinner-double-bounce.sk-spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 0 auto;
}
.sk-spinner-double-bounce .sk-double-bounce1,
.sk-spinner-double-bounce .sk-double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #2dc26b;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
  animation: sk-doubleBounce 2s infinite ease-in-out;
}
.sk-spinner-double-bounce .sk-double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
@-webkit-keyframes sk-doubleBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-doubleBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wave">
 *      <div class="sk-rect1"></div>
 *      <div class="sk-rect2"></div>
 *      <div class="sk-rect3"></div>
 *      <div class="sk-rect4"></div>
 *      <div class="sk-rect5"></div>
 *    </div>
 *
 */
.sk-spinner-wave.sk-spinner {
  margin: 0 auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}
.sk-spinner-wave div {
  background-color: #2dc26b;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
  animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-spinner-wave .sk-rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-spinner-wave .sk-rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-spinner-wave .sk-rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-spinner-wave .sk-rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes sk-waveStretchDelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes sk-waveStretchDelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wandering-cubes">
 *      <div class="sk-cube1"></div>
 *      <div class="sk-cube2"></div>
 *    </div>
 *
 */
.sk-spinner-wandering-cubes.sk-spinner {
  margin: 0 auto;
  width: 32px;
  height: 32px;
  position: relative;
}
.sk-spinner-wandering-cubes .sk-cube1,
.sk-spinner-wandering-cubes .sk-cube2 {
  background-color: #2dc26b;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-wanderingCubeMove 1.8s infinite ease-in-out;
  animation: sk-wanderingCubeMove 1.8s infinite ease-in-out;
}
.sk-spinner-wandering-cubes .sk-cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
@-webkit-keyframes sk-wanderingCubeMove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    /* Hack to make FF rotate in the right direction */
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes sk-wanderingCubeMove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    /* Hack to make FF rotate in the right direction */
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-pulse"></div>
 *
 */
.sk-spinner-pulse.sk-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background-color: #2dc26b;
  border-radius: 100%;
  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
  animation: sk-pulseScaleOut 1s infinite ease-in-out;
}
@-webkit-keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-chasing-dots">
 *      <div class="sk-dot1"></div>
 *      <div class="sk-dot2"></div>
 *    </div>
 *
 */
.sk-spinner-chasing-dots.sk-spinner {
  margin: 0 auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -webkit-animation: sk-chasingDotsRotate 2s infinite linear;
  animation: sk-chasingDotsRotate 2s infinite linear;
}
.sk-spinner-chasing-dots .sk-dot1,
.sk-spinner-chasing-dots .sk-dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #2dc26b;
  border-radius: 100%;
  -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
  animation: sk-chasingDotsBounce 2s infinite ease-in-out;
}
.sk-spinner-chasing-dots .sk-dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
@-webkit-keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes sk-chasingDotsBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-chasingDotsBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-three-bounce">
 *      <div class="sk-bounce1"></div>
 *      <div class="sk-bounce2"></div>
 *      <div class="sk-bounce3"></div>
 *    </div>
 *
 */
.sk-spinner-three-bounce.sk-spinner {
  margin: 0 auto;
  width: 70px;
  text-align: center;
}
.sk-spinner-three-bounce div {
  width: 18px;
  height: 18px;
  background-color: #2dc26b;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
  animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.sk-spinner-three-bounce .sk-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.sk-spinner-three-bounce .sk-bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-threeBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-threeBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-circle">
 *      <div class="sk-circle1 sk-circle"></div>
 *      <div class="sk-circle2 sk-circle"></div>
 *      <div class="sk-circle3 sk-circle"></div>
 *      <div class="sk-circle4 sk-circle"></div>
 *      <div class="sk-circle5 sk-circle"></div>
 *      <div class="sk-circle6 sk-circle"></div>
 *      <div class="sk-circle7 sk-circle"></div>
 *      <div class="sk-circle8 sk-circle"></div>
 *      <div class="sk-circle9 sk-circle"></div>
 *      <div class="sk-circle10 sk-circle"></div>
 *      <div class="sk-circle11 sk-circle"></div>
 *      <div class="sk-circle12 sk-circle"></div>
 *    </div>
 *
 */
.sk-spinner-circle.sk-spinner {
  margin: 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}
.sk-spinner-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-spinner-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 20%;
  height: 20%;
  background-color: #2dc26b;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.sk-spinner-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-spinner-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-spinner-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sk-spinner-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-spinner-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-spinner-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-spinner-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-spinner-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-spinner-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-spinner-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-spinner-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-spinner-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-spinner-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-spinner-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-spinner-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-spinner-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-spinner-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-spinner-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-spinner-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-spinner-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-spinner-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-spinner-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-cube-grid">
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *    </div>
 *
 */
.sk-spinner-cube-grid {
  /*
   * Spinner positions
   * 1 2 3
   * 4 5 6
   * 7 8 9
   */
}
.sk-spinner-cube-grid.sk-spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto;
}
.sk-spinner-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #2dc26b;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-spinner-cube-grid .sk-cube:nth-child(1) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(4) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(5) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(6) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(7) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(8) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(9) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@-webkit-keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
@keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wordpress">
 *      <span class="sk-inner-circle"></span>
 *    </div>
 *
 */
.sk-spinner-wordpress.sk-spinner {
  background-color: #2dc26b;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: relative;
  margin: 0 auto;
  -webkit-animation: sk-innerCircle 1s linear infinite;
  animation: sk-innerCircle 1s linear infinite;
}
.sk-spinner-wordpress .sk-inner-circle {
  display: block;
  background-color: #fff;
  width: 8px;
  height: 8px;
  position: absolute;
  border-radius: 8px;
  top: 5px;
  left: 5px;
}
@-webkit-keyframes sk-innerCircle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes sk-innerCircle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-fading-circle">
 *      <div class="sk-circle1 sk-circle"></div>
 *      <div class="sk-circle2 sk-circle"></div>
 *      <div class="sk-circle3 sk-circle"></div>
 *      <div class="sk-circle4 sk-circle"></div>
 *      <div class="sk-circle5 sk-circle"></div>
 *      <div class="sk-circle6 sk-circle"></div>
 *      <div class="sk-circle7 sk-circle"></div>
 *      <div class="sk-circle8 sk-circle"></div>
 *      <div class="sk-circle9 sk-circle"></div>
 *      <div class="sk-circle10 sk-circle"></div>
 *      <div class="sk-circle11 sk-circle"></div>
 *      <div class="sk-circle12 sk-circle"></div>
 *    </div>
 *
 */
.sk-spinner-fading-circle.sk-spinner {
  margin: 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}
.sk-spinner-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-spinner-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 18%;
  height: 18%;
  background-color: #2dc26b;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.sk-spinner-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-spinner-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-spinner-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sk-spinner-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-spinner-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-spinner-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-spinner-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-spinner-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-spinner-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-spinner-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-spinner-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-spinner-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-spinner-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-spinner-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-spinner-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-spinner-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-spinner-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-spinner-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-spinner-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-spinner-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-spinner-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-spinner-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
.ibox-content > .sk-spinner {
  display: none;
}
.ibox-content.sk-loading {
  position: relative;
}
.ibox-content.sk-loading:after {
  content: '';
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.ibox-content.sk-loading > .sk-spinner {
  display: block;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  z-index: 2000;
}
/*
 *
 *   INSPINIA Landing Page - Responsive Admin Theme
 *   Copyright 2014 Webapplayers.com
 *
*/
/* GLOBAL STYLES
-------------------------------------------------- */
/* PACE PLUGIN
-------------------------------------------------- */
.landing-page.pace .pace-progress {
  background: #fff;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}
.pace-inactive {
  display: none;
}
.landing-page {
  /* CUSTOMIZE THE NAVBAR
  -------------------------------------------------- */
  /* Flip around the padding for proper display in narrow viewports */
  /* BACKGROUNDS SLIDER
  -------------------------------------------------- */
  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
  /* Carousel base class */
  /* Since positioning the image, we need to help out the caption */
  /* Declare heights because of positioning of img element */
  /* Sections
  ------------------------- */
  /* Buttons - only primary custom button
  ------------------------- */
  /* RESPONSIVE CSS
  -------------------------------------------------- */
}
.landing-page .container {
  overflow: hidden;
}
.landing-page span.navy {
  color: #2dc26b;
}
.landing-page p.text-color {
  color: #676a6c;
}
.landing-page a.navy-link {
  color: #2dc26b;
  text-decoration: none;
}
.landing-page a.navy-link:hover {
  color: #179d82;
}
.landing-page section p {
  color: #aeaeae;
  font-size: 13px;
}
.landing-page address {
  font-size: 13px;
}
.landing-page h1 {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 200;
}
.landing-page .navy-line {
  width: 60px;
  height: 1px;
  margin: 60px auto 0;
  border-bottom: 2px solid #2dc26b;
}
.landing-page .navbar-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 200;
}
.landing-page .navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.landing-page .navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.landing-page .navbar-default.navbar-scroll {
  background-color: #fff;
  border-color: #fff;
  padding: 15px 0;
}
.landing-page .navbar-default {
  background-color: transparent;
  border-color: transparent;
  transition: all 0.3s ease-in-out 0s;
}
.landing-page .navbar-default .nav li a {
  color: #fff;
  font-family: 'Open Sans', helvetica, arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 14px;
}
.landing-page .navbar-nav > li > a {
  padding-top: 25px;
  border-top: 6px solid transparent;
}
.landing-page .navbar-default .navbar-nav > .active > a,
.landing-page .navbar-default .navbar-nav > .active > a:hover {
  background: transparent;
  color: #fff;
  border-top: 6px solid #2dc26b;
}
.landing-page .navbar-default .navbar-nav > li > a:hover,
.landing-page .navbar-default .navbar-nav > li > a:focus {
  color: #2dc26b;
  background: inherit;
}
.landing-page .navbar-default .navbar-nav > .active > a:focus {
  background: transparent;
  color: #fff;
}
.landing-page .navbar-default .navbar-nav > .active > a:focus {
  background: transparent;
  color: #ffffff;
}
.landing-page .navbar-default.navbar-scroll .navbar-nav > .active > a:focus {
  background: transparent;
  color: inherit;
}
.landing-page .navbar-default .navbar-brand:hover,
.landing-page .navbar-default .navbar-brand:focus {
  background: #179d82;
  color: #fff;
}
.landing-page .navbar-default .navbar-brand {
  color: #fff;
  height: auto;
  display: block;
  font-size: 14px;
  background: #2dc26b;
  padding: 15px 20px 15px 20px;
  border-radius: 0 0 5px 5px;
  font-weight: 700;
  transition: all 0.3s ease-in-out 0s;
}
.landing-page .navbar-scroll.navbar-default .nav li a {
  color: #676a6c;
}
.landing-page .navbar-scroll.navbar-default .nav li a:hover {
  color: #2dc26b;
}
.landing-page .navbar-wrapper .navbar.navbar-scroll {
  padding-top: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #e7eaec;
  border-radius: 0;
}
.landing-page .nav > li.active {
  border: none;
  background: inherit;
}
.landing-page .nav > li > a {
  padding: 25px 10px 15px 10px;
}
.landing-page .navbar-scroll .navbar-nav > li > a {
  padding: 20px 10px;
}
.landing-page .navbar-default .navbar-nav > .active > a,
.landing-page .navbar-default .navbar-nav > .active > a:hover {
  border-top: 6px solid #2dc26b;
}
.landing-page .navbar-fixed-top {
  border: none !important;
}
.landing-page .navbar-fixed-top.navbar-scroll {
  border-bottom: 1px solid #e7eaec !important;
}
.landing-page .navbar.navbar-scroll .navbar-brand {
  margin-top: 15px;
  border-radius: 5px;
  font-size: 12px;
  padding: 10px;
  height: auto;
}
.landing-page .header-back {
  height: 470px;
  width: 100%;
}
.landing-page .header-back.one {
  background: url('../img/landing/header_one.jpg') 50% 0 no-repeat;
}
.landing-page .header-back.two {
  background: url('../img/landing/header_two.jpg') 50% 0 no-repeat;
}
.landing-page .carousel {
  height: 470px;
}
.landing-page .carousel-caption {
  z-index: 10;
}
.landing-page .carousel .item {
  height: 470px;
  background-color: #777;
}
.landing-page .carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 470px;
}
.landing-page .carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.landing-page .carousel-fade .carousel-inner .active {
  opacity: 1;
}
.landing-page .carousel-fade .carousel-inner .active.left,
.landing-page .carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.landing-page .carousel-fade .carousel-inner .next.left,
.landing-page .carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.landing-page .carousel-fade .carousel-control {
  z-index: 2;
}
.landing-page .carousel-control.left,
.landing-page .carousel-control.right {
  background: none;
}
.landing-page .carousel-control {
  width: 6%;
}
.landing-page .carousel-inner .container {
  position: relative;
  overflow: visible;
}
.landing-page .carousel-inner {
  overflow: visible;
}
.landing-page .carousel-caption {
  position: absolute;
  top: 100px;
  left: 0;
  bottom: auto;
  right: auto;
  text-align: left;
}
.landing-page .carousel-caption {
  position: absolute;
  top: 100px;
  left: 0;
  bottom: auto;
  right: auto;
  text-align: left;
}
.landing-page .carousel-caption.blank {
  top: 140px;
}
.landing-page .carousel-image {
  position: absolute;
  right: 10px;
  top: 150px;
}
.landing-page .carousel-indicators {
  padding-right: 60px;
}
.landing-page .carousel-caption h1 {
  font-weight: 700;
  font-size: 38px;
  text-transform: uppercase;
  text-shadow: none;
  letter-spacing: -1.5px;
}
.landing-page .carousel-caption p {
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: none;
}
.landing-page .caption-link {
  color: #fff;
  margin-left: 10px;
  text-transform: capitalize;
  font-weight: 400;
}
.landing-page .caption-link:hover {
  text-decoration: none;
  color: inherit;
}
.landing-page .services {
  padding-top: 60px;
}
.landing-page .services h2 {
  font-size: 20px;
  letter-spacing: -1px;
  font-weight: 600;
  text-transform: uppercase;
}
.landing-page .features-block {
  margin-top: 40px;
}
.landing-page .features-text {
  margin-top: 40px;
}
.landing-page .features small {
  color: #2dc26b;
}
.landing-page .features h2 {
  font-size: 18px;
  margin-top: 5px;
}
.landing-page .features-text-alone {
  margin: 40px 0;
}
.landing-page .features-text-alone h1 {
  font-weight: 200;
}
.landing-page .features-icon {
  color: #2dc26b;
  font-size: 40px;
}
.landing-page .navy-section {
  margin-top: 60px;
  background: #2dc26b;
  color: #fff;
  padding: 20px 0;
}
.landing-page .gray-section {
  background: #f4f4f4;
  margin-top: 60px;
}
.landing-page .team-member {
  text-align: center;
}
.landing-page .team-member img {
  margin: auto;
}
.landing-page .social-icon a {
  background: #2dc26b;
  color: #fff;
  padding: 4px 8px;
  height: 28px;
  width: 28px;
  display: block;
  border-radius: 50px;
}
.landing-page .social-icon a:hover {
  background: #179d82;
}
.landing-page .img-small {
  height: 88px;
  width: 88px;
}
.landing-page .pricing-plan {
  margin: 20px 30px 0 30px;
  border-radius: 4px;
}
.landing-page .pricing-plan.selected {
  transform: scale(1.1);
  background: #f4f4f4;
}
.landing-page .pricing-plan li {
  padding: 10px 16px;
  border-top: 1px solid #e7eaec;
  text-align: center;
  color: #aeaeae;
}
.landing-page .pricing-plan .pricing-price span {
  font-weight: 700;
  color: #2dc26b;
}
.landing-page li.pricing-desc {
  font-size: 13px;
  border-top: none;
  padding: 20px 16px;
}
.landing-page li.pricing-title {
  background: #2dc26b;
  color: #fff;
  padding: 10px;
  border-radius: 4px 4px 0 0;
  font-size: 22px;
  font-weight: 600;
}
.landing-page .testimonials {
  padding-top: 80px;
  padding-bottom: 90px;
  background-color: #2dc26b;
  background-image: url('../img/landing/avatar_all.png');
}
.landing-page .big-icon {
  font-size: 56px !important;
}
.landing-page .features .big-icon {
  color: #2dc26b !important;
}
.landing-page .contact {
  background-image: url('../img/landing/word_map.png');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin-top: 60px;
}
.landing-page section.timeline {
  padding-bottom: 30px;
}
.landing-page section.comments {
  padding-bottom: 80px;
}
.landing-page .comments-avatar {
  margin-top: 25px;
  margin-left: 22px;
  margin-bottom: 25px;
}
.landing-page .comments-avatar .commens-name {
  font-weight: 600;
  font-size: 14px;
}
.landing-page .comments-avatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-right: 10px;
}
.landing-page .bubble {
  position: relative;
  height: 120px;
  padding: 20px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  font-style: italic;
  font-size: 14px;
}
.landing-page .bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 14px 0;
  border-color: #FFFFFF transparent;
  display: block;
  width: 0;
  z-index: 1;
  bottom: -15px;
  left: 30px;
}
.landing-page .btn-primary.btn-outline:hover,
.landing-page .btn-success.btn-outline:hover,
.landing-page .btn-info.btn-outline:hover,
.landing-page .btn-warning.btn-outline:hover,
.landing-page .btn-danger.btn-outline:hover {
  color: #fff;
}
.landing-page .btn-primary {
  background-color: #2dc26b;
  border-color: #2dc26b;
  color: #FFFFFF;
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 600;
}
.landing-page .btn-primary:hover,
.landing-page .btn-primary:focus,
.landing-page .btn-primary:active,
.landing-page .btn-primary.active,
.landing-page .open .dropdown-toggle.btn-primary {
  background-color: #179d82;
  border-color: #179d82;
  color: #FFFFFF;
}
.landing-page .btn-primary:active,
.landing-page .btn-primary.active,
.landing-page .open .dropdown-toggle.btn-primary {
  background-image: none;
}
.landing-page .btn-primary.disabled,
.landing-page .btn-primary.disabled:hover,
.landing-page .btn-primary.disabled:focus,
.landing-page .btn-primary.disabled:active,
.landing-page .btn-primary.disabled.active,
.landing-page .btn-primary[disabled],
.landing-page .btn-primary[disabled]:hover,
.landing-page .btn-primary[disabled]:focus,
.landing-page .btn-primary[disabled]:active,
.landing-page .btn-primary.active[disabled],
.landing-page fieldset[disabled] .btn-primary,
.landing-page fieldset[disabled] .btn-primary:hover,
.landing-page fieldset[disabled] .btn-primary:focus,
.landing-page fieldset[disabled] .btn-primary:active,
.landing-page fieldset[disabled] .btn-primary.active {
  background-color: #1dc5a3;
  border-color: #1dc5a3;
}
@media (min-width: 768px) {
  .landing-page {
    /* Navbar positioning foo */
    /* The navbar becomes detached from the top, so we round the corners */
    /* Bump up size of carousel content */
  }
  .landing-page .navbar-wrapper {
    margin-top: 20px;
  }
  .landing-page .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .landing-page .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }
  .landing-page .navbar-wrapper .navbar {
    border-radius: 4px;
  }
  .landing-page .carousel-caption p {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.4;
  }
  .landing-page .featurette-heading {
    font-size: 50px;
  }
}
@media (max-width: 992px) {
  .landing-page .carousel-image {
    display: none;
  }
}
@media (max-width: 768px) {
  .landing-page .carousel-caption,
  .landing-page .carousel-caption.blank {
    left: 5%;
    top: 80px;
  }
  .landing-page .carousel-caption h1 {
    font-size: 28px;
  }
  .landing-page .navbar.navbar-scroll .navbar-brand {
    margin-top: 6px;
  }
  .landing-page .navbar-default {
    background-color: #fff;
    border-color: #fff;
    padding: 15px 0;
  }
  .landing-page .navbar-default .navbar-nav > .active > a:focus {
    background: transparent;
    color: inherit;
  }
  .landing-page .navbar-default .nav li a {
    color: #676a6c;
  }
  .landing-page .navbar-default .nav li a:hover {
    color: #2dc26b;
  }
  .landing-page .navbar-wrapper .navbar {
    padding-top: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #e7eaec;
    border-radius: 0;
  }
  .landing-page .nav > li > a {
    padding: 25px 10px 15px 10px;
  }
  .landing-page .navbar-nav > li > a {
    padding: 20px 10px;
  }
  .landing-page .navbar .navbar-brand {
    margin-top: 6px;
    border-radius: 5px;
    font-size: 12px;
    padding: 10px;
    height: auto;
  }
  .landing-page .navbar-wrapper .navbar {
    padding-left: 15px;
    padding-right: 5px;
  }
  .landing-page .navbar-default .navbar-nav > .active > a,
  .landing-page .navbar-default .navbar-nav > .active > a:hover {
    color: inherit;
  }
  .landing-page .carousel-control {
    display: none;
  }
}
@media (min-width: 992px) {
  .landing-page .featurette-heading {
    margin-top: 120px;
  }
}
@media (max-width: 768px) {
  .landing-page .navbar .navbar-header {
    display: block;
    float: none;
  }
  .landing-page .navbar .navbar-header .navbar-toggle {
    background-color: #ffffff;
    padding: 9px 10px;
    border: none;
  }
}
body.rtls {
  /* Theme config */
}
body.rtls #page-wrapper {
  margin: 0 220px 0 0;
}
body.rtls .nav-second-level li a {
  padding: 7px 35px 7px 10px;
}
body.rtls .ibox-title h5 {
  float: right;
}
body.rtls .pull-right {
  float: left !important;
}
body.rtls .pull-left {
  float: right !important;
}
body.rtls .ibox-tools {
  float: left;
}
body.rtls .stat-percent {
  float: left;
}
body.rtls .navbar-right {
  float: left !important;
}
body.rtls .navbar-top-links li:last-child {
  margin-left: 40px;
  margin-right: 0;
}
body.rtls .minimalize-styl-2 {
  float: right;
  margin: 14px 20px 5px 5px;
}
body.rtls .feed-element > .pull-left {
  margin-left: 10px;
  margin-right: 0;
}
body.rtls .timeline-item .date {
  text-align: left;
}
body.rtls .timeline-item .date i {
  left: 0;
  right: auto;
}
body.rtls .timeline-item .content {
  border-right: 1px solid #e7eaec;
  border-left: none;
}
body.rtls .theme-config {
  left: 0;
  right: auto;
}
body.rtls .spin-icon {
  border-radius: 0 20px 20px 0;
}
body.rtls .toast-close-button {
  float: left;
}
body.rtls #toast-container > .toast:before {
  margin: auto -1.5em auto 0.5em;
}
body.rtls #toast-container > div {
  padding: 15px 50px 15px 15px;
}
body.rtls .center-orientation .vertical-timeline-icon i {
  margin-left: 0;
  margin-right: -12px;
}
body.rtls .vertical-timeline-icon i {
  right: 50%;
  left: auto;
  margin-left: auto;
  margin-right: -12px;
}
body.rtls .file-box {
  float: right;
}
body.rtls ul.notes li {
  float: right;
}
body.rtls .chat-users,
body.rtls .chat-statistic {
  margin-right: -30px;
  margin-left: auto;
}
body.rtls .dropdown-menu > li > a {
  text-align: right;
}
body.rtls .b-r {
  border-left: 1px solid #e7eaec;
  border-right: none;
}
body.rtls .dd-list .dd-list {
  padding-right: 30px;
  padding-left: 0;
}
body.rtls .dd-item > button {
  float: right;
}
body.rtls .theme-config-box {
  margin-left: -220px;
  margin-right: 0;
}
body.rtls .theme-config-box.show {
  margin-left: 0;
  margin-right: 0;
}
body.rtls .spin-icon {
  right: 0;
  left: auto;
}
body.rtls .skin-settings {
  margin-right: 40px;
  margin-left: 0;
}
body.rtls .skin-settings {
  direction: ltr;
}
body.rtls .footer.fixed {
  margin-right: 220px;
  margin-left: 0;
}
@media (max-width: 992px) {
  body.rtls .chat-users,
  body.rtls .chat-statistic {
    margin-right: 0;
  }
}
body.rtls.mini-navbar .footer.fixed,
body.body-small.mini-navbar .footer.fixed {
  margin: 0 70px 0 0;
}
body.rtls.mini-navbar.fixed-sidebar .footer.fixed,
body.body-small.mini-navbar .footer.fixed {
  margin: 0 0 0 0;
}
body.rtls.top-navigation .navbar-toggle {
  float: right;
  margin-left: 15px;
  margin-right: 15px;
}
.body-small.rtls.top-navigation .navbar-header {
  float: none;
}
body.rtls.top-navigation #page-wrapper {
  margin: 0;
}
body.rtls.mini-navbar #page-wrapper {
  margin: 0 70px 0 0;
}
body.rtls.mini-navbar.fixed-sidebar #page-wrapper {
  margin: 0 0 0 0;
}
body.rtls.body-small.fixed-sidebar.mini-navbar #page-wrapper {
  margin: 0 220px 0 0;
}
body.rtls.body-small.fixed-sidebar.mini-navbar .navbar-static-side {
  width: 220px;
}
.body-small.rtls .navbar-fixed-top {
  margin-right: 0;
}
.body-small.rtls .navbar-header {
  float: right;
}
body.rtls .navbar-top-links li:last-child {
  margin-left: 20px;
}
body.rtls .top-navigation #page-wrapper,
body.rtls.mini-navbar .top-navigation #page-wrapper,
body.rtls.mini-navbar.top-navigation #page-wrapper {
  margin: 0;
}
body.rtls .top-navigation .footer.fixed,
body.rtls.top-navigation .footer.fixed {
  margin: 0;
}
@media (max-width: 768px) {
  body.rtls .navbar-top-links li:last-child {
    margin-left: 20px;
  }
  .body-small.rtls #page-wrapper {
    position: inherit;
    margin: 0 0 0 0;
    min-height: 1000px;
  }
  .body-small.rtls .navbar-static-side {
    display: none;
    z-index: 2001;
    position: absolute;
    width: 70px;
  }
  .body-small.rtls.mini-navbar .navbar-static-side {
    display: block;
  }
  .rtls.fixed-sidebar.body-small .navbar-static-side {
    display: none;
    z-index: 2001;
    position: fixed;
    width: 220px;
  }
  .rtls.fixed-sidebar.body-small.mini-navbar .navbar-static-side {
    display: block;
  }
}
.rtls .ltr-support {
  direction: ltr;
}
.rtls.mini-navbar .nav-second-level,
.rtls.mini-navbar li.active .nav-second-level {
  left: auto;
  right: 70px;
}
.rtls #right-sidebar {
  left: -260px;
  right: auto;
}
.rtls #right-sidebar.sidebar-open {
  left: 0;
}
/*
 *
 *   This is style for skin config
 *   Use only in demo theme
 *
*/
.theme-config {
  position: absolute;
  top: 90px;
  right: 0;
  overflow: hidden;
}
.theme-config-box {
  margin-right: -220px;
  position: relative;
  z-index: 2000;
  transition-duration: 0.8s;
}
.theme-config-box.show {
  margin-right: 0;
}
.spin-icon {
  background: #2dc26b;
  position: absolute;
  padding: 7px 10px 7px 13px;
  border-radius: 20px 0 0 20px;
  font-size: 16px;
  top: 0;
  left: 0;
  width: 40px;
  color: #fff;
  cursor: pointer;
}
.skin-settings {
  width: 220px;
  margin-left: 40px;
  background: #f3f3f4;
}
.skin-settings .title {
  background: #efefef;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  padding: 10px 15px;
  font-size: 12px;
}
.setings-item {
  padding: 10px 30px;
}
.setings-item.skin {
  text-align: center;
}
.setings-item .switch {
  float: right;
}
.skin-name a {
  text-transform: uppercase;
}
.setings-item a {
  color: #fff;
}
.default-skin,
.blue-skin,
.ultra-skin,
.yellow-skin {
  text-align: center;
}
.default-skin {
  font-weight: 600;
  background: #283A49;
}
.default-skin:hover {
  background: #1e2e3d;
}
.blue-skin {
  font-weight: 600;
  background: url("patterns/header-profile-skin-1.png") repeat scroll 0 0;
}
.blue-skin:hover {
  background: #0d8ddb;
}
.yellow-skin {
  font-weight: 600;
  background: url("patterns/header-profile-skin-3.png") repeat scroll 0 100%;
}
.yellow-skin:hover {
  background: #ce8735;
}
.ultra-skin {
  padding: 20px 10px;
  font-weight: 600;
  background: url("patterns/3.png") repeat scroll 0 0;
}
.ultra-skin:hover {
  background: url("patterns/4.png") repeat scroll 0 0;
}
/*
 *
 *   SKIN 1 - INSPINIA - Responsive Admin Theme
 *   NAME - Blue light
 *
*/
.skin-1 .minimalize-styl-2 {
  margin: 14px 5px 5px 30px;
}
.skin-1 .navbar-top-links li:last-child {
  margin-right: 30px;
}
.skin-1.fixed-nav .minimalize-styl-2 {
  margin: 14px 5px 5px 15px;
}
.skin-1 .spin-icon {
  background: #0e9aef !important;
}
.skin-1 .nav-header {
  background-color: #0e9aef;
  background-image: url('patterns/header-profile-skin-1.png');
}
.skin-1.mini-navbar .nav-second-level {
  background: #3e495f;
}
.skin-1 .breadcrumb {
  background: transparent;
}
.skin-1 .page-heading {
  border: none;
}
.skin-1 .nav > li.active {
  background: #3a4459;
}
.skin-1 .nav > li > a {
  color: #9ea6b9;
}
.skin-1 ul.nav-second-level {
  background-color: inherit;
}
.skin-1 .nav > li.active > a {
  color: #fff;
}
.skin-1 .navbar-minimalize {
  background: #0e9aef;
  border-color: #0e9aef;
}
body.skin-1 {
  background: #3e495f;
}
.skin-1 .navbar-static-top {
  background: #ffffff;
}
.skin-1 .dashboard-header {
  background: transparent;
  border-bottom: none !important;
  border-top: none;
  padding: 20px 30px 10px 30px;
}
.fixed-nav.skin-1 .navbar-fixed-top {
  background: #fff;
}
.skin-1 .wrapper-content {
  padding: 30px 15px;
}
.skin-1 #page-wrapper {
  background: #f4f6fa;
}
.skin-1 .ibox-title,
.skin-1 .ibox-content {
  border-width: 1px;
}
.skin-1 .ibox-content:last-child {
  border-style: solid solid solid solid;
}
.skin-1 .nav > li.active {
  border: none;
}
.skin-1 .nav-header {
  padding: 35px 25px 25px 25px;
}
.skin-1 .nav-header a.dropdown-toggle {
  color: #fff;
  margin-top: 10px;
}
.skin-1 .nav-header a.dropdown-toggle .text-muted {
  color: #fff;
  opacity: 0.8;
}
.skin-1 .profile-element {
  text-align: center;
}
.skin-1 .img-circle {
  border-radius: 5px;
}
.skin-1 .navbar-default .nav > li > a:hover,
.skin-1 .navbar-default .nav > li > a:focus {
  background: #3a4459;
  color: #fff;
}
.skin-1 .nav.nav-tabs > li.active > a {
  color: #555;
}
.skin-1 .nav.nav-tabs > li.active {
  background: transparent;
}
/*
 *
 *   SKIN 2 - INSPINIA - Responsive Admin Theme
 *   NAME - Inspinia Ultra
 *
*/
body.skin-2 {
  color: #565758 !important;
}
.skin-2 .minimalize-styl-2 {
  margin: 14px 5px 5px 25px;
}
.skin-2 .navbar-top-links li:last-child {
  margin-right: 25px;
}
.skin-2 .spin-icon {
  background: #23c6c8 !important;
}
.skin-2 .nav-header {
  background-color: #23c6c8;
  background-image: url('patterns/header-profile-skin-2.png');
}
.skin-2.mini-navbar .nav-second-level {
  background: #ededed;
}
.skin-2 .breadcrumb {
  background: transparent;
}
.skin-2.fixed-nav .minimalize-styl-2 {
  margin: 14px 5px 5px 15px;
}
.skin-2 .page-heading {
  border: none;
  background: rgba(255, 255, 255, 0.7);
}
.skin-2 ul.nav-second-level {
  background-color: inherit;
}
.skin-2 .nav > li.active {
  background: #e0e0e0;
}
.skin-2 .logo-element {
  padding: 17px 0;
}
.skin-2 .nav > li > a,
.skin-2 .welcome-message {
  color: #edf6ff;
}
.skin-2 #top-search::-moz-placeholder {
  color: #edf6ff;
  opacity: 0.5;
}
.skin-2 #side-menu > li > a,
.skin-2 .nav.nav-second-level > li > a {
  color: #586b7d;
}
.skin-2 .nav > li.active > a {
  color: #213a53;
}
.skin-2.mini-navbar .nav-header {
  background: #213a53;
}
.skin-2 .navbar-minimalize {
  background: #23c6c8;
  border-color: #23c6c8;
}
.skin-2 .border-bottom {
  border-bottom: none !important;
}
.skin-2 #top-search {
  color: #fff;
}
body.skin-2 #wrapper {
  background-color: #ededed;
}
.skin-2 .navbar-static-top {
  background: #213a53;
}
.fixed-nav.skin-2 .navbar-fixed-top {
  background: #213a53;
  border-bottom: none !important;
}
.skin-2 .nav-header {
  padding: 30px 25px 30px 25px;
}
.skin-2 .dashboard-header {
  background: rgba(255, 255, 255, 0.4);
  border-bottom: none !important;
  border-top: none;
  padding: 20px 30px 20px 30px;
}
.skin-2 .wrapper-content {
  padding: 30px 15px;
}
.skin-2 .dashoard-1 .wrapper-content {
  padding: 0 30px 25px 30px;
}
.skin-2 .ibox-title {
  background: rgba(255, 255, 255, 0.7);
  border: none;
  margin-bottom: 1px;
}
.skin-2 .ibox-content {
  background: rgba(255, 255, 255, 0.4);
  border: none !important;
}
.skin-2 #page-wrapper {
  background: #f6f6f6;
  background: -webkit-radial-gradient(center, ellipse cover, #f6f6f6 20%, #d5d5d5 100%);
  background: -o-radial-gradient(center, ellipse cover, #f6f6f6 20%, #d5d5d5 100%);
  background: -ms-radial-gradient(center, ellipse cover, #f6f6f6 20%, #d5d5d5 100%);
  background: radial-gradient(ellipse at center, #f6f6f6 20%, #d5d5d5 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f6f6f6, endColorstr=#d5d5d5)";
}
.skin-2 .ibox-title,
.skin-2 .ibox-content {
  border-width: 1px;
}
.skin-2 .ibox-content:last-child {
  border-style: solid solid solid solid;
}
.skin-2 .nav > li.active {
  border: none;
}
.skin-2 .nav-header a.dropdown-toggle {
  color: #edf6ff;
  margin-top: 10px;
}
.skin-2 .nav-header a.dropdown-toggle .text-muted {
  color: #edf6ff;
  opacity: 0.8;
}
.skin-2 .img-circle {
  border-radius: 10px;
}
.skin-2 .nav.navbar-top-links > li > a:hover,
.skin-2 .nav.navbar-top-links > li > a:focus {
  background: #1a2d41;
}
.skin-2 .navbar-default .nav > li > a:hover,
.skin-2 .navbar-default .nav > li > a:focus {
  background: #e0e0e0;
  color: #213a53;
}
.skin-2 .nav.nav-tabs > li.active > a {
  color: #555;
}
.skin-2 .nav.nav-tabs > li.active {
  background: transparent;
}
/*
 *
 *   SKIN 3 - INSPINIA - Responsive Admin Theme
 *   NAME - Yellow/purple
 *
*/
.skin-3 .minimalize-styl-2 {
  margin: 14px 5px 5px 30px;
}
.skin-3 .navbar-top-links li:last-child {
  margin-right: 30px;
}
.skin-3.fixed-nav .minimalize-styl-2 {
  margin: 14px 5px 5px 15px;
}
.skin-3 .spin-icon {
  background: #ecba52 !important;
}
body.boxed-layout.skin-3 #wrapper {
  background: #3e2c42;
}
.skin-3 .nav-header {
  background-color: #ecba52;
  background-image: url('patterns/header-profile-skin-3.png');
}
.skin-3.mini-navbar .nav-second-level {
  background: #3e2c42;
}
.skin-3 .breadcrumb {
  background: transparent;
}
.skin-3 .page-heading {
  border: none;
}
.skin-3 ul.nav-second-level {
  background-color: inherit;
}
.skin-3 .nav > li.active {
  background: #38283c;
}
.fixed-nav.skin-3 .navbar-fixed-top {
  background: #fff;
}
.skin-3 .nav > li > a {
  color: #948b96;
}
.skin-3 .nav > li.active > a {
  color: #fff;
}
.skin-3 .navbar-minimalize {
  background: #ecba52;
  border-color: #ecba52;
}
body.skin-3 {
  background: #3e2c42;
}
.skin-3 .navbar-static-top {
  background: #ffffff;
}
.skin-3 .dashboard-header {
  background: transparent;
  border-bottom: none !important;
  border-top: none;
  padding: 20px 30px 10px 30px;
}
.skin-3 .wrapper-content {
  padding: 30px 15px;
}
.skin-3 #page-wrapper {
  background: #f4f6fa;
}
.skin-3 .ibox-title,
.skin-3 .ibox-content {
  border-width: 1px;
}
.skin-3 .ibox-content:last-child {
  border-style: solid solid solid solid;
}
.skin-3 .nav > li.active {
  border: none;
}
.skin-3 .nav-header {
  padding: 35px 25px 25px 25px;
}
.skin-3 .nav-header a.dropdown-toggle {
  color: #fff;
  margin-top: 10px;
}
.skin-3 .nav-header a.dropdown-toggle .text-muted {
  color: #fff;
  opacity: 0.8;
}
.skin-3 .profile-element {
  text-align: center;
}
.skin-3 .img-circle {
  border-radius: 5px;
}
.skin-3 .navbar-default .nav > li > a:hover,
.skin-3 .navbar-default .nav > li > a:focus {
  background: #38283c;
  color: #fff;
}
.skin-3 .nav.nav-tabs > li.active > a {
  color: #555;
}
.skin-3 .nav.nav-tabs > li.active {
  background: transparent;
}
body.md-skin {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #ffffff;
}
.md-skin .nav-header {
  background: url("patterns/4.png") no-repeat;
}
.md-skin .label,
.md-skin .badge {
  font-family: 'Roboto';
}
.md-skin ul.nav-second-level {
  background-color: inherit;
}
.md-skin .font-bold {
  font-weight: 400;
}
.md-skin .wrapper-content {
  padding: 30px 20px 40px;
}
@media (max-width: 768px) {
  .md-skin .wrapper-content {
    padding: 30px 0 40px;
  }
}
.md-skin .page-heading {
  border-bottom: none !important;
  border-top: 0;
  padding: 0 10px 20px 10px;
  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.34), 0 0 6px 0 rgba(0, 0, 0, 0.14);
}
.md-skin .full-height-layout .page-heading {
  border-bottom: 1px solid #e7eaec !important;
}
.md-skin .ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin .ibox.border-bottom {
  border-bottom: none !important;
}
.md-skin .ibox-title,
.md-skin .ibox-content {
  border-style: none;
}
.md-skin .ibox-title h5 {
  font-size: 16px;
  font-weight: 400;
}
.md-skin a.close-canvas-menu {
  color: #ffffff;
}
.md-skin .welcome-message {
  color: #ffffff;
  font-weight: 300;
}
.md-skin #top-search::-moz-placeholder {
  color: #ffffff;
}
.md-skin #top-search::-webkit-input-placeholder {
  color: #ffffff;
}
.md-skin #nestable-output,
.md-skin #nestable2-output {
  font-family: 'Roboto', lucida grande, lucida sans unicode, helvetica, arial, sans-serif;
}
.md-skin .landing-page {
  font-family: 'Roboto', helvetica, arial, sans-serif;
}
.md-skin .landing-page.navbar-default.navbar-scroll {
  background-color: #fff !important;
}
.md-skin .landing-page.navbar-default {
  background-color: transparent !important;
  box-shadow: none;
}
.md-skin .landing-page.navbar-default .nav li a {
  font-family: 'Roboto', helvetica, arial, sans-serif;
}
.md-skin .nav > li > a {
  color: #676a6c;
  padding: 14px 20px 14px 25px;
}
.md-skin .nav.navbar-right > li > a {
  color: #ffffff;
}
.md-skin .nav > li.active > a {
  color: #5b5d5f;
  font-weight: 700;
}
.md-skin .navbar-default .nav > li > a:hover,
.md-skin .navbar-default .nav > li > a:focus {
  font-weight: 700;
  color: #5b5d5f;
}
.md-skin .nav .open > a,
.md-skin .nav .open > a:hover,
.md-skin .nav .open > a:focus {
  background: #2dc26b;
}
.md-skin .navbar-top-links li {
  display: inline-table;
}
.md-skin .navbar-top-links .dropdown-menu li {
  display: block;
}
.md-skin .pace-done .nav-header {
  transition: all 0.4s;
}
.md-skin .nav > li.active {
  background: #f8f8f9;
}
.md-skin .nav-second-level li a {
  padding: 7px 10px 7px 52px;
}
.md-skin .nav-third-level li a {
  padding-left: 62px;
}
.md-skin .navbar-top-links li a {
  padding: 20px 10px;
  min-height: 50px;
}
.md-skin .nav > li > a {
  font-weight: 400;
}
.md-skin .navbar-static-side .nav > li > a:focus,
.md-skin .navbar-static-side .nav > li > a:hover {
  background-color: inherit;
}
.md-skin .navbar-top-links .dropdown-menu li a {
  padding: 3px 20px;
  min-height: inherit;
}
.md-skin .nav-header .navbar-fixed-top a {
  color: #ffffff;
}
.md-skin .nav-header .text-muted {
  color: #ffffff;
}
.md-skin .navbar-form-custom .form-control {
  font-weight: 300;
}
.md-skin .mini-navbar .nav-second-level {
  background-color: inherit;
}
.md-skin .mini-navbar li.active .nav-second-level {
  left: 65px;
}
.md-skin .canvas-menu.mini-navbar .nav-second-level {
  background: inherit;
}
.md-skin .pace-done .navbar-static-side,
.md-skin .pace-done .nav-header,
.md-skin .pace-done li.active,
.md-skin .pace-done #page-wrapper,
.md-skin .pace-done .footer {
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.md-skin .navbar-fixed-top {
  background: #fff;
  transition-duration: 0.4s;
  z-index: 2030;
  border-bottom: none !important;
}
.md-skin .navbar-fixed-top,
.md-skin .navbar-static-top {
  background-color: #2dc26b !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin .navbar-static-side {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin #right-sidebar {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border: none;
  z-index: 900;
}
.md-skin .white-bg .navbar-fixed-top,
.md-skin .white-bg .navbar-static-top {
  background: #fff !important;
}
.md-skin .contact-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border: none;
}
.md-skin .dashboard-header {
  border-bottom: none !important;
  border-top: 0;
  padding: 20px 20px 20px 20px;
  margin: 30px 20px 0 20px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
@media (max-width: 768px) {
  .md-skin .dashboard-header {
    margin: 20px 0 0 0;
  }
}
.md-skin ul.notes li div {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin .file {
  border: none;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin .mail-box {
  background-color: #ffffff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 0;
  margin-bottom: 20px;
  border: none;
}
.md-skin .mail-box-header {
  border: none;
  background-color: #ffffff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 30px 20px 20px 20px;
}
.md-skin .mailbox-content {
  border: none;
  padding: 20px;
  background: #ffffff;
}
.md-skin .social-feed-box {
  border: none;
  background: #fff;
  margin-bottom: 15px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin.landing-page .navbar-default {
  background-color: transparent !important;
  border-color: transparent;
  transition: all 0.3s ease-in-out 0s;
  box-shadow: none;
}
.md-skin.landing-page .navbar-default.navbar-scroll,
.md-skin.landing-page.body-small .navbar-default {
  background-color: #ffffff !important;
}
.md-skin.landing-page .nav > li.active {
  background: inherit;
}
.md-skin.landing-page .navbar-scroll .navbar-nav > li > a {
  padding: 20px 10px;
}
.md-skin.landing-page .navbar-default .nav li a {
  font-family: 'Roboto', helvetica, arial, sans-serif;
}
.md-skin.landing-page .nav > li > a {
  padding: 25px 10px 15px 10px;
}
.md-skin.landing-page .navbar-default .navbar-nav > li > a:hover,
.md-skin.landing-page .navbar-default .navbar-nav > li > a:focus {
  background: inherit;
  color: #2dc26b;
}
.md-skin.landing-page.body-small .nav.navbar-right > li > a {
  color: #676a6c;
}
.md-skin .landing_link a,
.md-skin .special_link a {
  color: #ffffff !important;
}
.md-skin.canvas-menu.mini-navbar .nav-second-level {
  background: #f8f8f9;
}
.md-skin.mini-navbar .nav-second-level {
  background-color: #ffffff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin.mini-navbar .nav-second-level li a {
  padding-left: 0;
}
.md-skin.mini-navbar.fixed-sidebar .nav-second-level li a {
  padding-left: 52px;
}
.md-skin.top-navigation .nav.navbar-right > li > a {
  padding: 15px 20px;
  color: #676a6c;
}
.md-skin.top-navigation .nav > li a:hover,
.md-skin .top-navigation .nav > li a:focus,
.md-skin.top-navigation .nav .open > a,
.md-skin.top-navigation .nav .open > a:hover,
.md-skin.top-navigation .nav .open > a:focus {
  color: #2dc26b;
  background: #ffffff;
}
.md-skin.top-navigation .nav > li.active a {
  color: #2dc26b;
  background: #ffffff;
}
.md-skin.fixed-nav #wrapper.top-navigation #page-wrapper {
  margin-top: 0;
}
.md-skin.fixed-sidebar.mini-navbar .navbar-static-side {
  width: 0;
}
.md-skin.fixed-sidebar.mini-navbar #page-wrapper {
  margin: 0 0 0 0;
}
.md-skin.body-small.fixed-sidebar.mini-navbar #page-wrapper {
  margin: 0 0 0 0;
}
.md-skin.body-small.fixed-sidebar.mini-navbar .navbar-static-side {
  width: 220px;
  background-color: #ffffff;
}
.md-skin.boxed-layout #wrapper {
  background-color: #ffffff;
}
.md-skin.canvas-menu nav.navbar-static-side {
  z-index: 2001;
  background: #ffffff;
  height: 100%;
  position: fixed;
  display: none;
}
@media (min-width: 768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 220px;
    min-height: 1200px;
  }
  .navbar-static-side {
    z-index: 2001;
    position: absolute;
    width: 220px;
  }
  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
    margin-left: auto;
  }
}
@media (max-width: 768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 0;
    min-height: 1000px;
  }
  .body-small .navbar-static-side {
    display: none;
    z-index: 2001;
    position: absolute;
    width: 70px;
  }
  .body-small.mini-navbar .navbar-static-side {
    display: block;
  }
  .lock-word {
    display: none;
  }
  .navbar-form-custom {
    display: none;
  }
  .navbar-header {
    display: inline;
    float: left;
  }
  .sidebar-panel {
    z-index: 2;
    position: relative;
    width: auto;
    min-height: 100% !important;
  }
  .sidebar-content .wrapper {
    padding-right: 0;
    z-index: 1;
  }
  .fixed-sidebar.body-small .navbar-static-side {
    display: none;
    z-index: 2001;
    position: fixed;
    width: 220px;
  }
  .fixed-sidebar.body-small.mini-navbar .navbar-static-side {
    display: block;
  }
  .ibox-tools {
    float: none;
    text-align: right;
    display: block;
  }
  .navbar-static-side {
    display: none;
  }
  body:not(.mini-navbar) {
    -webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -o-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
  }
}
@media (max-width: 350px) {
  .timeline-item .date {
    text-align: left;
    width: 110px;
    position: relative;
    padding-top: 30px;
  }
  .timeline-item .date i {
    position: absolute;
    top: 0;
    left: 15px;
    padding: 5px;
    width: 30px;
    text-align: center;
    border: 1px solid #e7eaec;
    background: #f8f8f8;
  }
  .timeline-item .content {
    border-left: none;
    border-top: 1px solid #e7eaec;
    padding-top: 10px;
    min-height: 100px;
  }
  .nav.navbar-top-links li.dropdown {
    display: none;
  }
  .ibox-tools {
    float: none;
    text-align: left;
    display: inline-block;
  }
}
@media print {
  nav.navbar-static-side {
    display: none;
  }
  body {
    overflow: visible !important;
  }
  #page-wrapper {
    margin: 0;
  }
}

/* ===========================================================================
   Dialogs — a content slider that behaves as a modal
   ===========================================================================

   The platform has one overlay: .content-slider, a full-height shelf that flies
   in from the right. That is the right shape for a builder or a long record, and
   the wrong shape for a form that asks four questions -- which arrives as a 560px
   form in an 1840px panel with a Close button at each end and the rest of the
   screen empty.

   Rather than build a second overlay, the same slider is restyled as a centred
   dialog. The caller parks it at right:0 first so the shared slide animation is a
   no-op, adds .app-modal, and these rules do the rest. One set of ajax, form
   binding and close plumbing serves both shapes.

   This lives in the theme, not in a module, because it was written twice
   otherwise -- landing pages first, the profile form second -- and the second
   copy is where the two drift apart. Modules supply only what is theirs: a
   variant class for their own form, and --app-modal-w if the default is wrong.

   THE SCRIM IS A SEPARATE ELEMENT. backdrop-filter blurs what is behind the
   element carrying it, and the dialog is a small box in the middle of the
   screen, so it cannot blur the page for itself.
   =========================================================================== */
.app-scrim {
    position: fixed;
    inset: 0;
    z-index: 2001;
    background: rgba(6, 10, 14, 0.55);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
            backdrop-filter: blur(6px) saturate(120%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.app-scrim.on {
    opacity: 1;
}

.content-slider.app-modal {
    --app-modal-w: 560px;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    height: auto;
    max-height: calc(100vh - 64px);
    overflow: auto;
    overscroll-behavior: contain;
    background: #1a1e23;
    border: 1px solid #31363d;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    animation: app-modal-in 0.2s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
@keyframes app-modal-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* The width has to out-argue three theme rules, not one. .content-slider is sized
   by `body.mini-navbar .content-slider` (more specific than a plain
   .content-slider.app-modal), by a .body-small variant, and by
   `body.student .content-slider`, which uses !important. So it is stated once more
   at a specificity that beats all three -- and with !important only because one of
   them already has it.

   The value comes from a custom property so a module can change the width without
   restating this fight. Custom properties are not part of that cascade: setting
   --app-modal-w anywhere on the element is enough. */
body .content-slider.app-modal,
body.mini-navbar .content-slider.app-modal,
body.body-small .content-slider.app-modal,
body.student .content-slider.app-modal {
    width: min(var(--app-modal-w, 560px), calc(100vw - 32px)) !important;
    height: auto;
    max-height: calc(100vh - 64px);
}

/* One way out, top right, where a dialog's close lives. The bottom bar is a shelf
   convention and has nothing to do in a box this size. */
.content-slider.app-modal #content-slider-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    left: auto;
    width: auto;
    padding: 0;
    z-index: 3;
}
.content-slider.app-modal #content-slider-btn-bottom {
    display: none !important;
}
.content-slider.app-modal #content-slider-btn .btn {
    background: transparent;
    border: 1px solid #31363d;
    color: #98a1ad;
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 12px;
}
.content-slider.app-modal #content-slider-btn .btn:hover {
    color: #e9edf2;
    border-color: #464d57;
    background: rgba(255, 255, 255, 0.05);
}
.content-slider.app-modal #content-slider-body {
    padding: 22px 22px 20px;
}
.content-slider.app-modal .row,
.content-slider.app-modal .row > [class*="col-"] {
    margin: 0;
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    .content-slider.app-modal { animation: none; }
    .app-scrim { transition: none; }
}

/* ===========================================================================
   select2, dressed for a dark app
   ===========================================================================
   select2 4.0.6 ships with a light default theme, written when this app was
   light. It is used on five screens across four modules -- reassign a user, a
   team owner, a course subscription, and twice in Online Presentation -- and
   every one of them is now a white box on a dark form. Theming it here fixes
   all of them rather than one.

   Only colour is touched. Sizing, positioning and the dropdown mechanics are
   select2's and are left alone.
   =========================================================================== */
/* select2 gives its container z-index 1051, which is under the scrim (2001) and
   under the dialog (2002, dashboard.css) -- so a list opened from inside a dialog
   renders behind the blur. Lifted only while open, which is the only time it can
   overlap anything: a closed container is just the field sitting in the form.

   This, rather than dropdownParent. Parenting the list into the dialog looks like
   the tidier fix and breaks it: .content-slider is fixed, translated to centre
   itself, and scrolls -- and a transform makes it the containing block for its
   absolute children, so select2 positions the list against the wrong origin. */
.select2-container--open {
    z-index: 2100;
}

.select2-container--default .select2-selection--single {
    height: 34px;
    background: #15181c;
    border: 1px solid #31363d;
    border-radius: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    color: #e9edf2;
    font-size: 13px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #5c6672;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #7f8b98 transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #7f8b98 transparent;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #3d5a86;
}

/* The multi-select variant, for the two Online Presentation screens. */
.select2-container--default .select2-selection--multiple {
    background: #15181c;
    border: 1px solid #31363d;
    border-radius: 8px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #25292e;
    border: 1px solid #3a4048;
    color: #e9edf2;
}

/* The dropdown. It renders wherever dropdownParent says, so it has to stand on
   its own rather than inherit a surface. */
.select2-container--default .select2-dropdown {
    background: #1a1e23;
    border: 1px solid #3a4048;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: #15181c;
    border: 1px solid #31363d;
    border-radius: 7px;
    color: #e9edf2;
    padding: 6px 8px;
}
.select2-container--default .select2-results__option {
    color: #b9c2ce;
    font-size: 12.5px;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background: #25292e;
    color: #ffffff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(37, 99, 235, 0.30);
    color: #ffffff;
}
.select2-container--default .select2-results__message {
    color: #6c7480;
    font-size: 11.5px;
}
/* Dashboard CSS */
body {
	background-color: #1c1c1c;
	font-size: 14px;
    color: #ffffff;
    margin-top: 61px!important;
}
.wrapper-slider-content {
    width: 100%;
}

/* ---------------------------------------------------------------------------
   The loaders moved to chrome.css.

   .loader is used well beyond the top bar -- the in-panel ajax loader in ajax.js,
   and the subscription loaders in Courses and DigitalMarketplace -- so it belongs
   in the file that loads on every logged-in page rather than in one four modules
   register. Same argument as the chrome itself.

   .app-loader went with it, and is now only the INLINE loader ajax.js builds inside
   a container. The top bar's copy of it is gone: the logo is the busy signal there.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   The top bar and the side menu used to be here, and have moved to chrome.css.

   They moved because of WHERE THIS FILE LOADS. Only four modules register
   dashboard.css -- Dashboard, Landing, Pages and PageBuilder -- so chrome drawn by
   any other module got none of those rules, and the menu looked like a different
   menu depending on which screen you were on. chrome.css is appended to every
   logged-in page by styles/css/dynamic.php instead.

   The top search bar, the profile icon, the footer and the responsive rules for all
   of them went with it, for the same reason: they are drawn by top_bar.tpl and
   footer.tpl, which every module renders.

   What stayed: everything below, which is genuinely this file's -- the dashboard
   background, the panels, tiles and sliders. The loaders above stayed too; they
   are used well beyond the top bar.
   --------------------------------------------------------------------------- */


/* Dashboard Styles */
.dashboard-bg {
    background: #1c1c1c;
    /*background: linear-gradient(180deg,#02405e 0%, #2c869b 100%);*/
	background-size: cover;
	background-attachment: fixed;
}
.dashboard-header {
	margin-right: -25px;
    margin-left: -25px;
    margin-top: -20px;
	background: #3d3d3d;
	background: rgba(255, 255, 255, 0.1);
}
.dashboard-header .ibox {
	margin-bottom: 0;
	-moz-box-shadow: 0px 3px 5px -3px rgba(0,0,0,0.44);
    -webkit-box-shadow: 0px 3px 5px -3px rgba(0,0,0,0.44);
	box-shadow: 0px 3px 5px -3px rgba(0,0,0,0.44);
}
.dashboard-header .ibox .cyfg-ibox-content .list-group {
	margin-bottom: 0;
}
.dashboard-header .ibox .cyfg-ibox-content .list-group .label {
	font-size: 14px;
}
.dashboard-header .ibox .cyfg-ibox-chart {
	padding-top: 2px;
}
.count-info .label {
    line-height: 12px;
    padding: 1px 4px;
    position: absolute;
    right: 15px;
    top: 13px;
}
.navbar-top-links .label-primary {
    background: #3078db;
}
.ibox .ibox-title {
	background-color: #3d3d3d;
    border: 1px solid #1a1a1a;
}
.ibox .ibox-title.ibox-title-border {
	border-right: 1px solid #1a1a1a;
    border-left: 1px solid #1a1a1a;
}
.ibox .ibox-content {
	position: relative;
	width: 100%;
    background: #3d3d3d;
    border: 1px solid #1a1a1a;
}
.ibox .ibox-content.ibox-content-border {
	border-right: 1px solid #1a1a1a;
    border-left: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
}
/* ---- the message panels, in the new language ---------------------------

   These two are every "something stopped you" screen on the platform:
   Denied Access, Page Not Found, and the notices One2One, Teams and
   Training put up. They were a solid red or amber slab over a near-white
   body, dropped onto a page whose own background is #1c1c1c -- so the one
   moment the platform has to explain itself, it did it in a panel that
   looked like it came from a different product.

   DARK, LIKE EVERYTHING ELSE, AND THE COLOUR IS A SIGNAL NOT A FILL. One
   strong colour per screenful, and on these screens it belongs to the icon
   and the rail, not to a hundred pixels of header. The same restraint the
   storefront and the checkout use.

   EVERY COLOUR IS STATED, INCLUDING THE TEXT. The old panel relied on the
   platform's h3 being #333, which was legible on the near-white body and
   is invisible the moment the body goes dark. Anything that sets a colour
   here sets the colour of the words on it too -- this is the third place
   that has bitten today. */

.ibox.ibox-alert,
.ibox.ibox-warn {
	border-radius: 12px;
	overflow: hidden;
}
.ibox.ibox-alert .ibox-title,
.ibox.ibox-warn .ibox-title {
	background-color: #242424;
	border: 1px solid rgba(255,255,255,.09);
	border-bottom: 0;
	border-left-width: 3px;
	color: #e9edf2;
}
.ibox.ibox-alert .ibox-title.ibox-title-border { border-left-color: #ed5565; }
.ibox.ibox-warn  .ibox-title.ibox-title-border { border-left-color: #e0a33a; }

.ibox.ibox-alert .ibox-title h5 i,
.ibox.ibox-warn .ibox-title h5 i { margin-right: 7px; }
.ibox.ibox-alert .ibox-title h5 i { color: #ed5565; }
.ibox.ibox-warn  .ibox-title h5 i { color: #e0a33a; }

.ibox.ibox-alert .ibox-content.ibox-content-border,
.ibox.ibox-warn .ibox-content.ibox-content-border {
	background: #2a2a2a;
	border: 1px solid rgba(255,255,255,.09);
	border-top: 0;
	border-left-width: 3px;
	color: #98a1ad;
}
.ibox.ibox-alert .ibox-content.ibox-content-border.ibox-content-border { border-left-color: #ed5565; }
.ibox.ibox-warn  .ibox-content.ibox-content-border.ibox-content-border { border-left-color: #e0a33a; }

/* The sentence that says what happened, and the ones that say what to do
   about it. The first is the loud one and was an h3 at the platform's
   default grey; the rest are quieter on purpose. */
.ibox.ibox-alert .ibox-content h3,
.ibox.ibox-warn .ibox-content h3 {
	color: #e9edf2;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
}
.ibox.ibox-alert .ibox-content p,
.ibox.ibox-warn .ibox-content p { color: #98a1ad; margin: 0 0 10px; }
.ibox.ibox-alert .ibox-content p:last-child,
.ibox.ibox-warn .ibox-content p:last-child { margin-bottom: 0; }

/* GOING BACK IS NOT A DANGEROUS ACT. It was a red button, which is the
   colour a platform uses to say "this deletes something" -- on a screen
   whose only offer is to return you where you came from. */
.ibox.ibox-alert .ibox-content .btn-danger,
.ibox.ibox-alert .ibox-content .btn-warning,
.ibox.ibox-warn .ibox-content .btn-danger,
.ibox.ibox-warn .ibox-content .btn-warning {
	background: transparent;
	border: 1px solid rgba(255,255,255,.14);
	color: #e9edf2;
	border-radius: 9px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ibox.ibox-alert .ibox-content .btn-danger:hover,
.ibox.ibox-alert .ibox-content .btn-warning:hover,
.ibox.ibox-warn .ibox-content .btn-danger:hover,
.ibox.ibox-warn .ibox-content .btn-warning:hover {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.26);
	color: #fff;
}
@media (max-width: 768px) {
	.dashboard-header .ibox {
		margin-bottom: 20px;
	}
	.cyfg-ibox-chart .col-lg-6 {
		padding: 0 20%;
	}
	.cyfg-ibox-chart .col-lg-6:first-child {
		margin-bottom: 20px;
	}
}
.feed-activity-list .feed-element:last-child {
	border-bottom: 0px solid #e7eaec;
}
.cyfg-messages-heading {
    margin: -20px -20px 20px;
    padding: 10px;
}
.feed-element:hover,
.timeline-item .content:hover {
    background: #f0f5ff;
	color: #0d0d0d;
}
@media (max-width: 350px) {
	.timeline-item .col-xs-7.content {
		width: 100%;
	}
}

/* Dashboard Page Heading/Breadcrumbs */
.row.wrapper.page-heading {
	margin: -20px -25px 30px;
	background: #F2F9FF;
    background: rgba(167, 213, 255, 0.15);
}
.row.wrapper.page-heading h2 {
	color: #3b82f6;
	font-weight: 400;
}
.row.wrapper.page-heading .breadcrumb {
	background-color: transparent;
}
.row.wrapper.page-heading li.active strong {
	font-weight: 500;
}

/* Dashboard Intros */
.section-intro {
	margin-bottom: 30px;
	padding: 15px;
}
.section-intro .section-col {
	padding: 15px 30px;
    background: rgba(167, 213, 255, 0.15);
	-moz-box-shadow: 2px 2px 4px -1px rgba(0,0,0,0.33);
	-webkit-box-shadow: 2px 2px 4px -1px rgba(0,0,0,0.33);
    box-shadow: 2px 2px 4px -1px rgba(0,0,0,0.33);
}

/* Dashboard Menu Tiles */
.row.row-menu {
	text-align: center;
	font-size: 22px;
	color: #2dc26b;
}
.dashboard-menu-item {}
.dashboard-menu-item .dashboard-menu-wrap {
	background: #fff;
	border: 2px solid #2dc26b;
	margin-bottom: 20px;
	padding: 40px 20px;
	border-radius: 3px;
	cursor: pointer;
	-moz-box-shadow: 3px 3px 5px -3px rgba(0,0,0,0.44);
    -webkit-box-shadow: 3px 3px 5px -3px rgba(0,0,0,0.44);
	box-shadow: 3px 3px 5px -3px rgba(0,0,0,0.44);
}
.dashboard-menu-item .dashboard-menu-wrap a,
.dashboard-menu-item .dashboard-menu-wrap a:link {
	color: #2dc26b;
	text-decoration: none;
}
.dashboard-menu-item .dashboard-menu-wrap:hover {
	border: 2px solid #3b82f6;
}
.dashboard-menu-item .dashboard-menu-wrap a:hover {
	color: #3b82f6;
	-moz-box-shadow: 3px 3px 5px -4px rgba(0,0,0,0.44);
    -webkit-box-shadow: 3px 3px 5px -4px rgba(0,0,0,0.44);
	box-shadow: 3px 3px 5px -4px rgba(0,0,0,0.44);
}
.dashboard-menu-item .dashboard-menu-wrap a .dashboard-menu-icon {
	margin-bottom: 20px;
}
.dashboard-menu-item .dashboard-menu-wrap a .dashboard-menu-icon i {
	font-size: 56px;
}
@media (max-width: 1400px) {
	.row.row-menu {
		font-size: 18px;
	}
	.dashboard-menu-item .dashboard-menu-wrap a .dashboard-menu-icon i {
		font-size: 48px;
	}
}
@media (max-width: 1244px) {
	.row.row-menu {
		font-size: 16px;
	}
	.dashboard-menu-item .dashboard-menu-wrap {
		padding: 30px 10px;
	}
}
@media (max-width: 1024px) {
	.row.row-menu {
		font-size: 18px;
	}
	.dashboard-menu-item {
		width: 50%;
		float: left;
	}
	.dashboard-menu-item .dashboard-menu-wrap {
		padding: 40px 20px;
	}
}
@media (max-width: 768px) {
	.dashboard-menu-item {
		width: 100%;
		float: none;
	}
}

/* Landing Page Styles */
.router-counter-row {
	margin: 5% 0;
	padding: 0 0 5%;
}
.router-counter-row.one-2-one-counter-row {
	margin: 3% 0;
	padding: 0 0 3%;
}
.router-counter-row .btn-router-counter span {
	display: inline-block;
	width: 28px;
	font-weight: bold;
}
.landing-menu-tiles-row {
	text-align: center;
	font-size: 24px;
	color: #2dc26b;
}
.landing-menu-tiles-row .menu-tile {
	background: #fff;
	border: 2px solid #2dc26b;
	margin-bottom: 20px;
	padding: 40px 20px;
	border-radius: 3px;
	cursor: pointer;
	-moz-box-shadow: 3px 3px 5px -3px rgba(0,0,0,0.44);
    -webkit-box-shadow: 3px 3px 5px -3px rgba(0,0,0,0.44);
	box-shadow: 3px 3px 5px -3px rgba(0,0,0,0.44);
}
.landing-menu-tiles-row a,
.landing-menu-tiles-row a:link {
	color: #2dc26b;
}
.landing-menu-tiles-row .menu-tile:hover {
	color: #008000;
	border: 2px solid #008000;
	-moz-box-shadow: 3px 3px 5px -4px rgba(0,0,0,0.44);
    -webkit-box-shadow: 3px 3px 5px -4px rgba(0,0,0,0.44);
	box-shadow: 3px 3px 5px -4px rgba(0,0,0,0.44);
}
.landing-menu-tiles-row .menu-tile i {
	font-size: 64px;
	margin-bottom: 10px;
}
@media (max-width: 667px) {
	.router-counter-row {
		margin: 1% 0 1%;
		padding: 0 0 1%;
	}
	.landing-menu-tiles-row {
		font-size: 26px;
	}
}
@media (max-width: 480px) {
	.landing-menu-tiles-row {
		font-size: 22px;
	}
	.landing-menu-tiles-row .menu-tile {
		margin-bottom: 10px;
		padding: 20px 10px;
	}
}

/* Content Slider */
.content-slider {
	position: fixed;
    top: 0;
    right: -2600px;
	width: calc(100% - 220px);
    height: 100%;
    z-index: 2002;
    background: #3d3d3d;
    overflow: auto;
}
body.mini-navbar .content-slider {
	width: 100%;
}
body.body-small .content-slider {
	width: 100%;
}
body.body-small.mini-navbar .content-slider {
	width: calc(100% - 70px);
}
body.student .content-slider {
	width: 100%!important;
}
.content-slider #content-slider-btn {
	padding: 10px 15px;
}
.content-slider #content-slider-btn .content-slider-close i,
.content-slider #content-slider-btn-bottom .content-slider-close i  {
	margin-right: 4px;
}
.content-slider #content-slider-btn-bottom  {
	margin-bottom: 60px;
}
.content-slider #content-slider-back  {
	float: right;
	display: none;
}

#content-slider-body .profile-img {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 15px auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 3px solid #3b82f6;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: border-box;
    -webkit-background-clip: border-box;
    background-clip: border-box;
	-webkit-transition: border 0.35s ease-in-out;
    -moz-transition: border 0.35s ease-in-out;
    -ms-transition: border 0.35s ease-in-out;
    -o-transition: border 0.35s ease-in-out;
    transition: border 0.35s ease-in-out;
}
#content-slider-body .profile-icon i {
	position: absolute;
    top: 16px;
    left: 33px;
    font-size: 96px;
	color: #3b82f6;
}
#content-slider-body .profile-img-wrapper {
	margin-top: -10px;
	margin-bottom: 10px;
	padding: 10px;
	text-align: center;
	border: 3px dashed #fff;
	-webkit-transition: border 0.35s ease-in-out;
    -moz-transition: border 0.35s ease-in-out;
    -ms-transition: border 0.35s ease-in-out;
    -o-transition: border 0.35s ease-in-out;
    transition: border 0.35s ease-in-out;
}
#content-slider-body .profile-img-wrapper.hover {
	border: 3px dashed #008000;
	-webkit-transition: border 0.15s ease-in-out;
    -moz-transition: border 0.15s ease-in-out;
    -ms-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out;
}
#content-slider-body .profile-img-wrapper.hover .profile-img {
	border: 3px solid #008000;
	-webkit-transition: border 0.15s ease-in-out;
    -moz-transition: border 0.15s ease-in-out;
    -ms-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out;
}
#content-slider-body .profile-img-wrapper #progress {
	width: 60%;
    margin-left: 20%;
    background-color: #3d3d3d;
}
#content-slider-body .selector-buttons {
	margin-bottom: 30px;
	text-align: center;
}
#content-slider-body .selector-buttons button {
	margin: 0 3px;
}
#content-slider-body .slider-header {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
    background: #3b82f6;
	color: #ffffff;
    padding: 5px;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.content-slider-notes {
	width: 100%;
    margin-bottom: 20px;
    padding: 8px;
    border: 1px solid #3b82f6;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.content-slider-notes .content-slider-notes-title {
	border-bottom: 1px solid #3b82f6;
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-weight: bold;
}
.content-slider-notes .content-slider-notes-title span {
	font-weight: normal;
	font-size: 90%;
}


/* Globals */
.wrapper-content-last {
	margin-top: -60px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "open_sanssemibold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.cyfg-cen, .cen { text-align: center; }
.cyfg-left, .left { text-align: left; }
.cyfg-right, .right { text-align: right; }
.cyfg-bold, .b, strong { font-family: "open_sansbold", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
.cyfg-dark-blue, .dbl { color: #002543; }
.cyfg-midnight-blue, .mbl { color: #3b82f6; }
.cyfg-blue, .bl { color: #0076d6; }
.cyfg-purple, .p { color: #2dc26b; }
.cyfg-green, .g { color: #2dc26b; }
.cyfg-red, .r { color: #cc0000; }
.cyfg-white, .wt { color: #fff; }
.cyfg-orange, .o { color: #ff5722; }
.cyfg-dark-blue-bg { background-color: #002543; }
.cyfg-midnight-blue-bg { background-color: #3b82f6; }
.cyfg-blue-bg { background-color: #0076d6; }
.cyfg-purple-bg { background-color: #2dc26b; }
.cyfg-green-bg { background-color: #008000; }
.cyfg-red-bg { background-color: #cc0000; }
.cyfg-white-bg { background-color: #fff; }
.cyfg-white-bg { background-color:#ff5722; }

/* Override bold for font awesome */
.fa.cyfg-bold, .fa.b { font: normal normal normal 14px/1 FontAwesome; font-weight: 700; }

/* Borders */
.border-bottom {
  border-bottom: 1px solid #1a1a1a!important;
}

/* Horizontal Rules */
hr {
    border-top: 1px solid #8d8d8d;
}

/* Tables */
.table { margin: 10px 0 20px }
.table thead tr th {
	color: #fff;
	background-color: #3b82f6;
	font-family: "open_sanssemibold", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700;
}
.table > thead > tr > th {
    vertical-align: middle;
    border-bottom: 1px solid #3b82f6;
}
.table-striped > tbody > tr {
	background-color: #3d3d3d;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #1c1c1c;
}
.table.table-striped > tbody > tr > td, 
.table.table-striped > tbody > tr > th, 
.table.table-striped > tfoot > tr >td, 
.table.table-striped > tfoot> tr> th, 
.table.table-striped > thead > tr > td, 
.table.table-striped > thead > tr > th {
    vertical-align: middle;
}
.table > tbody > tr > td, 
.table > tbody > tr > th, 
.table > tfoot > tr >td, 
.table > tfoot> tr> th, 
.table > thead > tr > td, 
.table > thead > tr > th {
    vertical-align: middle;
	padding: 8px 3px;
}
.table input {
	padding: 2px 0 2px 4px;
	border: 1px dashed #3b82f6;
    color: #2d2d2d;
}
.table input:hover {
	background: #5e5e5e;
    color: #ffffff;
}
.table button,
.table a.btn {
	font-size: 12px;
	padding: 3px 6px;
	margin-right: 1px;
}
.table .btn-caution-box {
	display: inline-block;
	margin-left: 4px;
    padding: 2px 1px 2px 2px;
	border: solid 1px #cc0000;
	border-radius: 3px;
}
.table tfoot tr td {
	color: #fff;
	background-color: #3b82f6;
}
.table tfoot.tfoot-empty tr td {
	padding: 0;
	font-size: 0;
	line-height: 20px;
}
.table-hover > tbody > tr:hover {
    background-color: #5e5e5e;
}
.table-hover > tbody > tr:hover input {
    border: 1px solid #f8b133;
}
.user-list-image {
	width: 40px;
    height: 40px;
    margin: 0 auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 2px solid #3b82f6;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: border-box;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.user-list-icon {
	width: 40px;
    height: 40px;
    margin: 0 auto;
	overflow: hidden;
	color: #3b82f6;
	font-size: 40px;
	padding: 2px 0 0 1px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 2px solid #3b82f6;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: border-box;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.table_colours {
	cursor:pointer;
	margin:auto;
	width:30px;
	height:30px;
	-webkit-box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.33);
    -moz-box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.33);
    box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.33);
}
.inline-input {
	width: 100%;
}
.order-field {
	width: 40px;
}

/* Forms */
/* Fieldset browser fixes */
fieldset { min-width: 0; }
@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}
textarea { 
	resize: vertical; 
	min-height: 50px;
}
.form-control, .single-line {
    border: 1px solid #ccc;
    color: #1a1a1a;
    background-color: #efefef;
}
.form-control:focus, .single-line:focus {
    border-color: #ccc !IMPORTANT;
}
.input-group-addon {
	border: 1px solid #ccc;
	background: #3b82f6;
	color: #fff;
}
.input-group-addon-help {
	background: #28a72c;
	cursor: pointer;
}
.app-form .input-group-inline {
    display: inline-block;
    width: 1px;
    width: calc(100% - 43px);
    padding: 6px 0 0 6px;
    height: 34px;
    border: 1px solid #ccc;
}
.app-form .help-inline {
    float: right;
    display: inline-block;
}
.help-inline .input-group-addon-help {
	width: 43px;
    height: 34px;
	text-align: center;
}
.form-msg {
	min-height: 22px;
	color: #cc0000;
	font-weight: bold;
}
input[type="text"], input[type="password"], 
input[type="email"], input[type="tel"], textarea, select {
    color: #2d2d2d;
}

/* Button Overrides */
.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, 
.btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary.active[disabled], 
fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, 
fieldset[disabled] .btn-primary.active {
    background-color: #d2d3d4;
    border-color: #d2d3d4;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, 
.open .dropdown-toggle.btn-primary, .btn-primary:active:focus, .btn-primary:active:hover, 
.btn-primary.active:hover, .btn-primary.active:focus {
    background-color: rgb(97, 97, 97);
    border: 1px solid transparent;
    color: #FFFFFF;
    opacity: 0.85;
}
.btn-primary {
    background-color: #2dc26b;
    border-color: #2dc26b;
    color: #FFFFFF;
}
.btn-warning {
	color: #1d1d1d;
}
.btn-warning:hover, .btn-warning:focus {
	color: #1d1d1d;
}

/* New Buttons */
/* THE V2 GREEN (3 Oct 2026, Martin: the legacy green "#00b700" was still on
   buttons like "Visit the store"). The canon's primary: #2dc26b with dark
   text, #3ad47a on hover -- see docs/UI-CANON.md. */
.btn-upgrade, .btn-green {
	background-color: #2dc26b;
    border-color: #2dc26b;
    color: #1c1c1c;
}
.btn-upgrade:hover, .btn-upgrade:focus {
    background-color: #00437a;
    border-color: #00437a;
    color: #FFFFFF;
}
.btn-green:hover, .btn-green:focus {
    background-color: #3ad47a;
    border-color: #3ad47a;
    color: #1c1c1c;
}
.view-type-btns {
	display: inline-block;
    margin-left: 15px;
}
.btn-prospect-list, 
.btn-prospect-tile {
	padding: 2px 6px;
}
.btn-prospect-list {
	margin-right: 3px;
}
.btn-cyan {
	background-color: #2dc4f9;
    border-color: #2dc4f9;
    color: #1d1d1d;
}
.btn-cyan:hover, .btn-cyan:focus {
    background-color: #00b1ef;
    border-color: #00b1ef;
    color: #1d1d1d;
}
.btn-orange {
	background-color: #ff7b3c;
    border-color: #ff7b3c;
    color: #fff;
}
.btn-orange:hover, .btn-orange:focus {
    background-color: #ff5c0d;
    border-color: #ff5c0d;
    color: #fff;
}

/* Dropdowns */
.dropdown-offset-1 { left: 0; }
.dropdown-offset-2 { left: 0; }
.dropdown-offset-3 { left: 0; }
@media (max-width: 767px) { 
	.dropdown-offset-1 { left: -155px; }
	.dropdown-offset-2 { left: -75px; }
	.dropdown-offset-3 { left: -185px; }
	.mini-navbar .dropdown-offset-1 { left: -200px; }
	.mini-navbar .dropdown-offset-2 { left: -115px; }
	.mini-navbar .dropdown-offset-3 { left: -220px; }
	
	/* Non-admins have one less badge in the bar around 72px width */
	.dropdown-offset-1.dropdown-non-admin { left: -93px; }
	.dropdown-offset-2.dropdown-non-admin { left: -3px; }
	.dropdown-offset-3.dropdown-non-admin { left: -113px; }
	.mini-navbar .dropdown-offset-1.dropdown-non-admin { left: -125px; }
	.mini-navbar .dropdown-offset-2.dropdown-non-admin { left: -40px; }
	.mini-navbar .dropdown-offset-3.dropdown-non-admin { left: -148px; }
}

/* File Upload Form */
.fileinput-button,
.fileinput-button-2 {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.fileinput-button input,
.fileinput-button-2 input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px !important;
    direction: ltr;
    cursor: pointer;
}
.dropspace,
.dropspace-2 {
	width: 100%;
    margin: 15px 0;
    border: 3px dashed #3b82f6;
    background-color: #525252;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: All 0.35s ease;
    -moz-transition: All 0.35s ease;
    -ms-transition: All 0.35s ease;
    -o-transition: All 0.35s ease;
    transition: All 0.35s ease;
}
.dropspace:hover,
.dropspace:hover span,
.dropspace:hover span i,
.dropspace-2:hover,
.dropspace-2:hover span,
.dropspace-2:hover span i {
	 color: #1d1d1b !IMPORTANT;
}
.dropspace.hover,
.dropspace-2.hover {
    color: #fff !IMPORTANT;
	border: 3px dashed #008000;
    background-color: #008000;
	-webkit-transition: All 0.35s ease;
    -moz-transition: All 0.35s ease;
    -ms-transition: All 0.35s ease;
    -o-transition: All 0.35s ease;
    transition: All 0.35s ease;
}
.dropspace span,
.dropspace-2 span {
	display: block;
    text-align: center;
    padding: 75px 0;
    font-size: 110%;
}
.dropspace:hover span,
.dropspace-2:hover span {
	color: #fff;
}
div.files {
	width: 100%;
}
div.files .file-name {
	display: inline-block;
	width: 78%;
	height: 100%;
}
div.files .file-remove {
	display: inline-block;
	width: 20%;
	height: 100%;
}
div.files .file-upload {
	margin-bottom: 4px;
	padding: 4px;
	border: 1px solid #3b82f6;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
div.files .file-upload i {
	margin-right: 2px;
	float: right;
	font-size: 22px;
}

/* Datepicker */
#ui-datepicker-div {
	z-index: 2003 !IMPORTANT;
}
.ui-datepicker-month, .ui-datepicker-year {
	color: #fff;
}
select.ui-datepicker-month, select.ui-datepicker-year {
	color: #000;
}
.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_ffffff_256x240.png);
}
.ui-datepicker-prev:hover > .ui-icon,
.ui-datepicker-next:hover > .ui-icon {
	background-image: url(images/ui-icons_222222_256x240.png);
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #fff085;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #008000;
	background: #e2ffe2;
	color: #000;
}

/* Select2 Overrides */
.form-horizontal .form-group.select2-group {
	width: 100%;
	margin-left: 0;
}
.select2-container {
	z-index: 99998;
	display: table-cell;
	width: 100% !IMPORTANT;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 0;
}
.select2-container--default.select2-container--focus .select2-selection--single, 
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #ccc;
}
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    border-color: #ccc;
}
.select2-container--default.select2-container--focus .select2-selection--single:focus, 
.select2-container--default.select2-container--focus .select2-selection--multiple:focus {
    border-color: #2dc26b !IMPORTANT;
}
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 34px;
    user-select: none;
    -webkit-user-select: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: #000;
    font-size: 16px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
}
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--multiple .select2-selection__rendered {
    padding-left: 12px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3b82f6;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3b82f6;
}
.select2-dropdown {
    background-color: #fff;
    border: 1px solid #3b82f6;
    color: #000;
    z-index: 99999;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: #3d3d3d;
	border: 1px solid #3b82f6;
	color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
	background-color: #fbfdff;
	color: #2d2d2d;
}
.select2-container--default .select2-search--inline .select2-search__field {
    color: #2d2d2d;
    min-width: 105px;
}

/* Tooltips */
.tooltip {
	min-width: 200px;
	z-index: 2002;
}
.tooltip-inner {
	background-color: #3b82f6;
}
.tooltip.left .tooltip-arrow {
	border-left-color: #3b82f6;
}
.tooltip.right .tooltip-arrow {
	border-right-color: #3b82f6;
}
.tooltip.top .tooltip-arrow {
	border-top-color: #3b82f6;
}
.tooltip.bottom .tooltip-arrow {
	border-bottom-color: #3b82f6;
}

/* Popovers */
.popover {
    z-index: 2002;
	font-family: "Lato Regular", "Helvetica Neue", Helvetica, Arial, sans-serif !IMPORTANT;
}
.popover-title {
    background-color: #3b82f6;
    color: #fff;
	font-weight: 500;
}
.popover-content {
    color: #000;
}

/* Overide right style class for text applied to a popover */
.right .popover-title,
.right .popover-content {
	text-align: left !IMPORTANT;
}

/* Summernote */
.note-editor {
    margin-bottom: 0;
    border-radius: 0;
    color: #ffffff;
}
.note-editable {
    min-height: 160px;
    background: #3a3a3a;
    color: #ffffff;
}
.note-editor .tooltip {
    display: none!important;
}
.note-dropdown-menu {
    background: #f5f5f5!important;
}
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset, 
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select, 
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset, 
.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select {
    margin: 3px 0;
}
.modal-dialog {
    color: #2d2d2d;
}
.modal-backdrop {
    display: none!important;
}
.emoji-btn {
    margin-left: 0!important;
    padding: 7px 10px 5px;
}
.emoji-btn-icon {
    font-size: 15px;
}
.emoji-dialog {
    top: 85px;
    left: 5px;
    margin: 0;
    padding: 5px;
    animation-duration: 0.25s;
}
.emoji-dialog h2 {
    margin-top: 0;
    color: #2d2d2d;
}
.closeEmoji {
    cursor: pointer;
    color: #2d2d2d;
    opacity: 0.2;
    font-size: 18px;
}
.closeEmoji:hover {
    opacity: 0.5;
}
.emoji-list {
    max-height: 200px;
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 10px; 
    padding-right: 5px;
}
.selectEmoji {
    opacity: 1;
}
.selectEmoji:hover {
    opacity: 0.8;
}
.selectEmoji span {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    
}


/* Dialogs */
.ui-widget-overlay {
	z-index: 2001 !IMPORTANT;
}
.ui-dialog {
	z-index: 2002 !IMPORTANT;
}
.ui-widget-header {
    border: 1px solid #3b82f6;
    background: #3b82f6;
    color: #fff;
    font-weight: bold;
}
.ui-dialog-buttonset button {
    padding: 6px 16px;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    background-color: #3b82f6;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3b82f6), to(#3b82f6));
    background-image: -webkit-linear-gradient(top, #3b82f6, #3b82f6);
    background-image: -moz-linear-gradient(top, #3b82f6, #3b82f6);
    background-image: -ms-linear-gradient(top, #3b82f6, #3b82f6);
    background-image: -o-linear-gradient(top, #3b82f6, #3b82f6);
    background-image: linear-gradient(top, #3b82f6, #3b82f6);
    background-repeat: repeat-x;
    border: 1px solid #3b82f6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	-webkit-transition: All 0.15s ease;
    -moz-transition: All 0.15s ease;
    -ms-transition: All 0.15s ease;
    -o-transition: All 0.15s ease;
    transition: All 0.15s ease;
}
.ui-dialog-buttonset button:focus {
	outline: none;
}
.ui-dialog-buttonset button:hover {
	color: #1d1d1b;
	background-position: 0 0;
	background-color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    background-image: -webkit-linear-gradient(top, #fff, #fff);
    background-image: -moz-linear-gradient(top, #fff, #fff);
    background-image: -ms-linear-gradient(top, #fff, #fff);
    background-image: -o-linear-gradient(top, #fff, #fff);
    background-image: linear-gradient(top, #fff, #fff);
	-webkit-transition: All 0.35s ease;
    -moz-transition: All 0.35s ease;
    -ms-transition: All 0.35s ease;
    -o-transition: All 0.35s ease;
    transition: All 0.35s ease;
}
.no-close .ui-dialog-titlebar-close {
  display: none;
}
.delete-confirm.ui-widget.ui-widget-content {
    border: 1px solid #cc0000;
}
.delete-confirm .ui-widget-content {
    border-top: 1px solid #cc0000;
}
.delete-confirm .ui-widget-header {
    border: 1px solid #cc0000;
    background: #cc0000;
    color: #fff;
    font-weight: bold;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.delete-confirm .ui-dialog-buttonset button {
    padding: 6px 16px;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    background-color: #cc0000;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#cc0000), to(#cc0000));
    background-image: -webkit-linear-gradient(top, #cc0000, #cc0000);
    background-image: -moz-linear-gradient(top, #cc0000, #cc0000);
    background-image: -ms-linear-gradient(top, #cc0000, #cc0000);
    background-image: -o-linear-gradient(top, #cc0000, #cc0000);
    background-image: linear-gradient(top, #cc0000, #cc0000);
    background-repeat: repeat-x;
    border: 1px solid #cc0000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	-webkit-transition: All 0.15s ease;
    -moz-transition: All 0.15s ease;
    -ms-transition: All 0.15s ease;
    -o-transition: All 0.15s ease;
    transition: All 0.15s ease;
}
.delete-confirm .ui-dialog-buttonset button:last-child {
    background-color: #008000;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#008000), to(#008000));
    background-image: -webkit-linear-gradient(top, #008000, #008000);
    background-image: -moz-linear-gradient(top, #008000, #008000);
    background-image: -ms-linear-gradient(top, #008000, #008000);
    background-image: -o-linear-gradient(top, #008000, #008000);
    background-image: linear-gradient(top, #008000, #008000);
    border: 1px solid #008000;
}
.delete-confirm .ui-dialog-buttonset button:hover {
	color: #1d1d1b;
	background-position: 0 0;
	background-color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    background-image: -webkit-linear-gradient(top, #fff, #fff);
    background-image: -moz-linear-gradient(top, #fff, #fff);
    background-image: -ms-linear-gradient(top, #fff, #fff);
    background-image: -o-linear-gradient(top, #fff, #fff);
    background-image: linear-gradient(top, #fff, #fff);
	-webkit-transition: All 0.35s ease;
    -moz-transition: All 0.35s ease;
    -ms-transition: All 0.35s ease;
    -o-transition: All 0.35s ease;
    transition: All 0.35s ease;
}


.upgrade-confirm .ui-widget-header {
    border: 1px solid #2ec369;
    background: #2ec369;
    color: #fff;
    font-weight: bold;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.upgrade-confirm .ui-dialog-buttonset button {
    padding: 6px 16px;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    background-color: #2ec369;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2ec369), to(#2ec369));
    background-image: -webkit-linear-gradient(top, #2ec369, #2ec369);
    background-image: -moz-linear-gradient(top, #2ec369, #2ec369);
    background-image: -ms-linear-gradient(top, #2ec369, #2ec369);
    background-image: -o-linear-gradient(top, #2ec369, #2ec369);
    background-image: linear-gradient(top, #2ec369, #2ec369);
    background-repeat: repeat-x;
    border: 1px solid #2ec369;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	-webkit-transition: All 0.15s ease;
    -moz-transition: All 0.15s ease;
    -ms-transition: All 0.15s ease;
    -o-transition: All 0.15s ease;
    transition: All 0.15s ease;
}
.upgrade-confirm .ui-dialog-buttonset button:last-child {
    background-color: #cc0000;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#cc0000), to(#cc0000));
    background-image: -webkit-linear-gradient(top, #cc0000, #cc0000);
    background-image: -moz-linear-gradient(top, #cc0000, #cc0000);
    background-image: -ms-linear-gradient(top, #cc0000, #cc0000);
    background-image: -o-linear-gradient(top, #cc0000, #cc0000);
    background-image: linear-gradient(top, #cc0000, #cc0000);
    border: 1px solid #cc0000;
}
.upgrade-confirm .ui-dialog-buttonset button:hover {
	color: #1d1d1b;
	background-position: 0 0;
	background-color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    background-image: -webkit-linear-gradient(top, #fff, #fff);
    background-image: -moz-linear-gradient(top, #fff, #fff);
    background-image: -ms-linear-gradient(top, #fff, #fff);
    background-image: -o-linear-gradient(top, #fff, #fff);
    background-image: linear-gradient(top, #fff, #fff);
	-webkit-transition: All 0.35s ease;
    -moz-transition: All 0.35s ease;
    -ms-transition: All 0.35s ease;
    -o-transition: All 0.35s ease;
    transition: All 0.35s ease;
}


#dialog-vip,
#dialog-confirm,
#dialog-block,
#dialog-suspend,
#dialog-terminate,
#dialog-reset,
#dialog-confirm-active,
#dialog-upgrade {
	display: none;
}
.dialog-error {
	display: none;
	min-height: 22px;
}

/* Paginator */
.paginator {
	display: inline-block;
	margin-bottom: 10px;
}
.paginator a {
	display: inline-block;
    padding: 1px 6px;
	border: 2px solid #3b82f6;
    background: #3b82f6;
    color: #fff;
	margin-right: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.paginator a:hover {
	background: #fff;
	border: 2px solid #ffffff;
    color: #ffffff;
}
.paginator strong {
	display: inline-block;
    padding: 1px 6px;
    background: #fff;
	border: 2px solid #3b82f6;
    color: #3b82f6;
	margin-right: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/* Number of Rows Wrapper */
.number-records {
	float: right;
    display: inline-block;
    background: #3b82f6;
    padding: 3px 8px;
    color: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.number-records span {
	color: #f8b133;
}

/* AJAX Fetch Loader */
#ajax-loader-wrapper {
	position: absolute;
    z-index: 999;
    width: 97.5%;
    height: 95%;
    margin: 0;
    background: rgba(1,1,1,0.33);
    text-align: center;
}
#ajax-loader-wrapper #ajax-loader {
	opacity: 1 !IMPORTANT;
}
#ajax-loader-wrapper .loader {
	width: 48px;
    height: 48px;
    border: 8px solid #111111;
    border-top: 8px solid #3b82f6;
    position: absolute;
    left: 45.5%;
    left: calc(50% - 48px);
    margin-top: 50px;
}
#ajax-loader-wrapper .loader-2 {
	position: absolute;
    bottom: 0;
	margin-top: 0;
}

/* Coming Soon Notice */
.coming-soon-wrapper {
	padding: 15px;
    background: #b5edab;
	background: rgba(31, 199, 0, 0.33);
	border: 1px solid #51d43a;
    border: 1px solid rgba(31, 199, 0, 0.66);
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 2px 2px 4px -1px rgba(0,0,0,0.2);
	-webkit-box-shadow: 2px 2px 4px -1px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 4px -1px rgba(0,0,0,0.2);
}
.coming-soon-wrapper h2 {
	margin-top: 0;
    margin-bottom: 15px;
	padding-bottom: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(31, 199, 0, 0.85);
    color: #383838;
}
.coming-soon-wrapper i { }
.coming-soon-wrapper p {
	margin: 0;
    color: #000;
}

#dialog-slider-warning {
	display: none;
}

/* Why We Care */
.why-we-care-overlay {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9997;
}
.why-we-care-modal {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    height: 100%;
    max-height: 100%;
    overflow-x: auto;
    z-index: 9998;
}
.why-we-care-overlay-close {
    display: none;
    opacity: 0;
    position: fixed;
    top: 10px;
    right: 15px;
    padding: 0 13px;
    font-size: 32px;
    font-weight: bold;
    color: red;
    background: #000;
    border-radius: 9px;
    cursor: pointer;
    z-index: 9999;
}

/* Google Sign In Button */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: #131314;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #e3e3e3;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
  border-color: #8e918f;
  width: 100%;
  margin: 15px 0;
}
.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 10px;
  min-width: 20px;
  width: 20px;
}
.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}
.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 0;
  flex-grow: 0;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.gsi-material-button:disabled {
  cursor: default;
  background-color: #13131461;
  border-color: #8e918f1f;
}
.gsi-material-button:disabled .gsi-material-button-state {
  background-color: #e3e3e31f;
}
.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}
.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}
.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: white;
  opacity: 12%;
}
.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}
.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: white;
  opacity: 8%;
}
.google_login_or {
  margin-bottom: 15px;
  display: block;
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
}

/*  
	Presentation Fancybox needed here as 
	slider flashes on page load when 
	presentation CSS unloaded
*/
.fancybox-container {
	z-index: 999992;
}
#presentation-slide-area .fancybox-container {
	position: absolute !IMPORTANT;
}

/* To top feature */
#toTop {
    color: #3078db;
    right: auto!important;
    left: calc(50% - 30px)!important;
    margin-left: auto!important;
    margin-right: auto!important;
    padding: 16px 13px 14px;
}
#toTop:hover {
    color: #3078db;
    opacity: 0.75;
}

/* Home Page Border Box Animation */
.lhq-border-box {}
.lhq-border-box .col-md-3 img,
.lhq-border-box .col-md-4 img {
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(var(--angle), #00c0ff 0%, #cf1f3d 100%) 1;
    animation: 30s rotate linear infinite;
}
@keyframes rotate {
  to {
    --angle: -270deg;
  }
}
@property --angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: false;
}

/* Scroll bars */
::-webkit-scrollbar {
    width: 10px;
	background: #fff;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 14px #d0d0d0;
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 5px #000000;
    background: #fff;
	border-radius: 3px;
}
/* ---------------------------------------------------------------------------

   `rail-overlay` IS THE CLASS THESE RULES KEY ON, alongside `student`.

   A learner always overlays -- they have no pinned column in the design. A creator
   overlays on a phone and nowhere else: measured at 390, the pinned rail took 70px
   and left 256 for content, a fifth of the screen spent on a strip of icons while
   the learner beside them had the full width. chrome.js sets the class for both
   cases, so nothing here has to know which reason applied.

   The pair is spelled out on every rule rather than collapsed to `rail-overlay`
   alone. `student` is on the body from the server; `rail-overlay` arrives when
   chrome.js runs. Dropping the first would leave a learner with a pinned 220px rail
   for the length of one script, which is a visible jump on a slow phone.
   Chrome: the top bar, the side menu, the search box and profile icon in that bar,
   the footer, and the logo block that sits between them. Everything drawn by
   sidebar.tpl, top_bar.tpl and footer.tpl -- which every module renders.

   WHY THIS FILE EXISTS, AND WHY IT IS NOT dashboard.css.

   All of this was in dashboard.css. That file is registered by exactly four
   places -- Dashboard, Landing, Pages and PageBuilder -- so the rail, the bar and
   the hamburger were only styled on the screens those four happen to draw. Every
   other module rendered the same sidebar.tpl and top_bar.tpl markup and got the
   INSPINIA defaults underneath instead, which is why the menu looked like two
   different menus depending on where you were standing.

   It is worst for a learner. Their landing page is Courses/my (STUDENT_LOGIN_ROUTE),
   which registers neither dashboard.css nor dashboard.js -- and because the app is
   an ajax shell, that unstyled first load is the shell they keep for the rest of
   the session.

   So the chrome moves to a file that styles/css/dynamic.php appends on EVERY
   logged-in page, the same way logo.css was handled. Nothing here is new: it is
   dashboard.css's own rules in dashboard.css's own order.

   SCOPE: logged-in pages only. public_dynamic.php does NOT append this file. The
   public storefront has its own bar in top_bar_public.tpl and its own rules in
   public.css, and pulling this in behind them would restyle every seller's shop
   front as a side effect of fixing the app menu. The two public routes that
   genuinely used this chrome -- the course pages in Pages.class.php and
   PageBuilderManagement.class.php -- register this file explicitly alongside
   dashboard.css, so they keep exactly what they had.

   ORDER: after the module stylesheets, before logo.css. Both of those matter and
   the reasons are at the foot of this file.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   Loaders, and the bar that says a page is on its way.

   These came from dashboard.css. .loader is used well beyond the top bar -- the
   in-panel loader ajax.js builds, and the subscription loaders in Courses and
   DigitalMarketplace -- so it cannot live in a file four modules opt into.

   .app-loader is now ONLY that inline loader. The top bar's copy is gone: the logo
   is the busy signal there, driven by appMain.busy() and animated by logo.css. A
   spinner still earns its place inside a panel, where it says WHICH panel is
   working -- something a mark up in the bar cannot say.
   --------------------------------------------------------------------------- */
.loader {
  display: inline-block;
  opacity: 0;
  margin-left: 8px;
  border: 10px solid #fff;
  border-radius: 50%;
  border-top: 10px solid #3b82f6;
  width: 48px;
  height: 48px;
  -webkit-animation: loader-spin 1.25s linear infinite;
  animation: loader-spin 1.25s linear infinite;
}
.loader-sml {
	width: 36px;
    height: 36px;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3b82f6;
}
.loader-lrg {
	width: 64px;
    height: 64px;
    border: 12px solid #f3f3f3;
    border-top: 12px solid #3b82f6;
}
@-webkit-keyframes loader-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* The inline loader ajax.js prepends to a container. `.app-loader .app-loader-text`
   came across with these and was dropped: nothing nests that class inside an
   .app-loader any more. The two places that still render .app-loader-text -- the
   subscription loaders in Courses and DigitalMarketplace -- put it inside
   .subscription-loader, which those modules style themselves. */
.app-loader {
	opacity: 0;
	display: inline-block;
    margin: 23px 5px 0 0;
}
.app-loader .loader {
	display: inline-block;
	opacity: 1;
	width: 18px;
	height: 18px;
	border: 4px solid #e2e2e2;
	border-top: 4px solid #3b82f6;
}

/* PACE, the 2px bar across the very top. It stays, and it is the reason the logo
   can afford to be subtle: PACE is automatic and catches a FULL page load, which
   happens before any of our own script is running and so before appMain.busy()
   exists to be called. The logo covers everything after that.

   Cobalt rather than the #3078db it carried, so the one piece of chrome that
   appears over the top bar is the same blue as the rail's accent. It was #1ab394,
   INSPINIA's teal, before that. */
.pace .pace-progress {
    background: #2563eb;
}
/* Top bar */
.welcome-message.cyfg-midnight-blue {
    color: #fff;
}

/* Sidebar */
.img-logo-a {
	display: inline-block;
	width: 160px;
    overflow: hidden;
	border-radius: 0;
	padding: 0;
	margin: 10px 40px 10px 10px;
	text-align: center;
	-moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.img-logo {
	width: 160px;
    border-radius: 0;
    margin-top: 12px;
}
body.dashboard .img-logo {
    margin-top: 10px;
}
/* A learner's logo was 170px wide against everyone else's 160, and nudged down 16px
   against .img-logo's 12 and body.dashboard's 10 -- three sizes and three nudges for
   one mark. They are gone with the rest of the learner exceptions: same bar, same
   logo. The `width: 170px` was also beating logo.css's `width: auto` on specificity,
   so a learner's anchor never got the sizing that file exists to provide. */
.mini-navbar .img-logo-a {}
.logo-element {
    padding: 14px 0;
}
.img-logo-mini {
	width: 160px;
	border-radius: 0;
	margin: 0;
}
.profile-element img.img-circle {
	width: 48px;
	height: auto;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.66);
    -webkit-box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.66);
    box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.66);
}
.navbar-static-side {
    z-index: 2001;
    top: 60px;
}
.navbar-static-side .nav > li {
    background-color: #003142;
	border-left: 5px solid #5a5a5a;
}
.navbar-static-side .nav > li > a {
    color: #c0c8d6;
	padding: 9px;
	font-size: 14px;
}
.navbar-static-side .nav > li > a:focus, 
.navbar-static-side .nav > li > a:hover,
.navbar-default .nav > li > a:hover, 
.navbar-default .nav > li > a:focus {
    background-color: #3b82f6;
}
.navbar-static-side .nav > li:focus, 
.navbar-static-side .nav > li:hover {
	border-left: 5px solid #3b82f6;
}
/* Left as it was. `.nav > li.active` is Bootstrap's, not this rail's -- it also
   matches tab strips and pill groups elsewhere in the app, and repainting those
   from here would be changing components nobody asked about. The sidebar takes its
   own treatment at the foot of this file instead. */
.nav > li.active {
    border-left: 5px solid #2dc26b;
    background: #5a5a5a;
}
.nav.navbar-static-side > li.active a:hover,
.nav.navbar-static-side > li.active a:focus,
.navbar-default .nav > li.active > a:hover, 
.navbar-default .nav > li.active > a:focus {
    background: #5a5a5a;
}
.navbar-static-side .nav > li.active:focus, 
.navbar-static-side .nav > li.active:hover {
	border-left: 5px solid #2dc26b;
}
.navbar-static-side .nav > li.nav-header {
    border-left: 0px solid #2dc26b;
	padding: 15px;
	background-image: url(https://www.learnershq.com/themes/default/images/header-profile.png);
}
.mini-navbar .nav .nav-second-level {
    left: 65px;
}
body.mini-navbar .navbar-static-side .nav > li.nav-header {
    padding: 0;
}
body.mini-navbar .navbar-static-side .nav > li > a {
    text-align: center;
}
/* Transparent: the open li above already carries the recess, and painting the
   list as well drew a second, slightly different panel inside the first. */
ul.nav-second-level {
    background: transparent;
}
.nav-second-level li:last-child {
    margin-bottom: 0;
}
body.mini-navbar .profile-element, 
body.mini-navbar .nav-label, 
body.mini-navbar .navbar-default .nav li a span,
body.mini-navbar .logo-element {
    display: none;
}
body.mini-navbar.body-small .nav > li > a i {
   display: none;
}
body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar .nav li:hover > .nav-second-level, 
.mini-navbar .nav li:focus > .nav-second-level {
    min-width: 200px;
    background: none;
    padding: 0;
}
.mini-navbar li.active .nav-second-level {
    left: 65px;
}
body.mini-navbar .navbar-default .nav > li > a {
    font-size: 15px;
}
body.mini-navbar .navbar-default .nav li .nav-second-level li a {
	text-align: left;
}
body.mini-navbar .navbar-default .nav > li > .nav-second-level li a {
  border-radius: 0;
}
body.mini-navbar .profile-element, body.mini-navbar .nav-label, body.mini-navbar .navbar-default .nav li a span {
    display: none!important;
}
body.mini-navbar .navbar-default .nav li .nav-second-level li a span {
    display: inline-block!important;
}
/* "Become a Creator" was #008000 flood fill plus a 5px #008000 bar. Both are gone;
   it is restyled at the foot of this file with the same grammar the rail uses for
   every other row it wants to single out. The rules were here rather than there
   because they predate the rail having a grammar -- and being `li.upgrade`, they
   out-specified the border-left:0 reset, so that row also sat 5px right of every
   other icon. */
.navbar-static-side .nav > li > a {
    color: #ffffff;
}
.navbar-static-side .nav > li.locked > a {
	color: #868282;
}
.navbar-static-side .nav > li.locked > a > i.fa-ban {
	color: #cc0000;
}
.nav-header a {
    color: #fff;
}
.nav-header .text-muted {
    color: #bdbdbd;
}
.navbar-static-top {
    position: fixed!important;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
}
.navbar-static-top, .footer {
	background-color: #003142;
}
.navbar-static-top .navbar-header .label {
	display: inline-block;
	margin-top: 19px;
	padding: 5px 8px;
}
.navbar-top-links {
    margin-left: auto;
}
.nav.navbar-top-links a {
    padding: 20px 3px;
    color: #fff;
    transition: colour 0.25s;
}
.navbar-top-links a:hover {
    color: #3078db!important;
    opacity: 1;
    transition: colour 0.35s;
}
body.body-small .navbar-top-links .text-muted {
    display: none;
}
.navbar-top-links li a:hover {
	color: #0076d6;
}
body.mini-navbar.body-small .navbar-header {
    margin-left:0;
}
body.mini-navbar.body-small .profile-element {
    padding-left: 5px;
}
body.mini-navbar.body-small .logo-element {
    padding: 0;
}
body:not(.body-small).mini-navbar .navbar-static-side {
    display: block;
}
@media (min-width: 768px) {
    .navbar-right {
        margin-right: 0;
    }
    #page-wrapper {
        margin: 0 0 0 220px;
    }
}
@media (max-width: 768px) {
	.body-small .navbar-static-side {
		z-index: 2000;
	}
	.mini-navbar .dropdown-offset-2 {
		left: -135px;
	}
	.navbar-top-links {
		float: right;
		z-index: 2001;
	}
	.navbar-top-links .top-logout span {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   The learner's menu: the same rail, overlaid rather than pinned.

   A learner used to get a different menu object entirely: .student-menu-flyout in
   top_bar.tpl, a black slab with its own colours, its own toggle and its own
   handful of JavaScript, holding the SAME items this rail holds. Two copies kept by
   hand, and they drifted. The flyout never got metisMenu, so its second-level rows
   sat behind `display: none` with nothing to open them -- a learner could not reach
   half of their own menu, and had not been able to for as long as that was true.
   That is what the second copy cost, and nobody chose to pay it.

   So the flyout is gone and this rail is theirs. Of the three things that could
   differ between a creator and a learner, only one actually does:

     WHICH LINKS   different, and decided in PHP, not here. Menu::getMenuItems()
                   filters on user_group -- no Dashboard, no Earnings, no Landing
                   Pages, and a "Become a Creator" row a creator never sees. Role
                   belongs in the query that builds the list, not in a stylesheet
                   that repaints it.
     HOW IT LOOKS  the same. There was never a reason for it not to be, and every
                   reason for a change to the menu to land on both at once.
     HOW IT SITS   different, and it is the whole of what is below. A creator's rail
                   is PINNED: it holds a column and the page starts to the right of
                   it. A learner's OVERLAYS a full-width page, because a learner is
                   usually reading a course, and the width is the thing they came
                   for. A creator is working ON the product and navigates constantly;
                   a learner is inside one thing and navigates rarely.

   NOTHING DIMS THE PAGE BEHIND IT. An overlay usually earns a scrim -- it says the
   page is inert and gives you somewhere to click to leave. This one does not get
   one: what is behind is the course the learner is in the middle of, and dimming it
   to show a menu they opened by accident is a worse trade than the small ambiguity
   of leaving it lit. Clicking anywhere outside still closes it; that is in
   chrome.js, and it does not need a layer to be clickable.

   WHY NOT body.canvas-menu, the theme's own off-canvas mode and the obvious thing to
   reach for: under it `mini-navbar` is the class that SHOWS the rail, and for a
   creator `mini-navbar` means collapsed. One class would mean opposite things in one
   stylesheet, and the JavaScript branches on it. A state class of its own costs a
   line and cannot be misread.

   `rail-overlay` IS THE CLASS THESE RULES KEY ON, alongside `student`.

   A learner always overlays -- they have no pinned column in the design. A creator
   overlays on a phone and nowhere else: measured at 390, the pinned rail took 70px
   and left 256 for content, a fifth of the screen spent on a strip of icons while
   the learner beside them had the full width. chrome.js sets the class for both
   cases, so nothing here has to know which reason applied.

   The pair is spelled out on every rule rather than collapsed to `rail-overlay`
   alone. `student` is on the body from the server; `rail-overlay` arrives when
   chrome.js runs. Dropping the first would leave a learner with a pinned 220px rail
   for the length of one script, which is a visible jump on a slow phone.
   --------------------------------------------------------------------------- */
body.student .navbar-static-top,
body.rail-overlay .navbar-static-top {
    margin-left: 0;
}
/* Full width. Nothing is reserved for a menu that is not always there -- which is
   also why the rail has to be taken off-canvas below rather than merely emptied:
   the content runs underneath it. */
body.student #page-wrapper,
body.rail-overlay #page-wrapper {
    margin: 0;
}
/* The rail carries Logout, so the bar does not need to carry it as well. */
body.student .top-logout {
    display: none;
}
body.student.body-small .navbar-top-links li a {
    padding: 20px 5px;
}

/* Off-canvas until it is asked for.

   transform rather than `left`: it composites instead of re-laying-out the rail on
   every frame, and the rail carries backdrop-filter, which is expensive to
   re-rasterise.

   The specificity is load-bearing. This file states `transition: width` on every
   .navbar-static-side further down; at equal specificity that rule is later and
   would win, dropping transform from the transition list and making the panel snap
   into place instead of sliding. */
body.student .navbar-static-side,
body.rail-overlay .navbar-static-side {
    /* DISPLAY AND POSITION, both of them overriding INSPINIA at phone width, and
       both load-bearing rather than tidy-up.

       main.css carries, inside @media (max-width: 768px):

           .body-small .navbar-static-side          { display: none; position: absolute; width: 70px }
           .body-small.mini-navbar .navbar-static-side { display: block }

       which is the inversion this file warns about elsewhere: below 768 the rail
       is hidden and `mini-navbar` is what SHOWS it. A creator got a rail on a
       phone only because mini-navbar happened to be on; take it off for the
       overlay and the panel vanishes.

       It also means the learner overlay never worked on a phone. Measured before
       this line: display:none at 386px whether rail-open was set or not, so the
       toggle did nothing at all. Both cases are fixed by the same declaration --
       (0,2,1) here against (0,2,0) there.

       fixed, not the absolute that rule also sets, or the panel scrolls up the
       page with the content it is supposed to be floating over. */
    display: block;
    position: fixed;
    width: 220px;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.75, 0.25, 1);
    /* One number at every width. `.body-small .navbar-static-side` drops the rail to
       2000 under 768px, which is survivable for a PINNED rail -- nothing it could
       lose to is ever beside it -- but this one is lifted over arbitrary page content,
       and a panel that changes stacking at one breakpoint is a bug waiting for the
       right page to land under it. Nothing is known to overlap it today; this is here
       so nothing has to be re-checked at phone width later. */
    z-index: 2001;
}
body.student.rail-open .navbar-static-side,
body.rail-overlay.rail-open .navbar-static-side {
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    body.student .navbar-static-side,
    body.rail-overlay .navbar-static-side {
        transition: none;
    }
}

/* The toggle says the same thing it says for a creator -- outline while the menu is
   away, filled while it is here -- but the state driving it is inverted, because a
   creator's default is open and a learner's default is closed. */
body.student .navbar-static-top .navbar-minimalize.btn.btn-primary,
body.rail-overlay .navbar-static-top .navbar-minimalize.btn.btn-primary {
    background-color: transparent;
    border-color: rgba(91, 147, 255, 0.55);
    color: #5b93ff;
}
body.student .navbar-static-top .navbar-minimalize.btn.btn-primary:hover,
body.student .navbar-static-top .navbar-minimalize.btn.btn-primary:focus,
body.rail-overlay .navbar-static-top .navbar-minimalize.btn.btn-primary:hover,
body.rail-overlay .navbar-static-top .navbar-minimalize.btn.btn-primary:focus {
    background-color: rgba(37, 99, 235, 0.20) !important;
    border-color: rgba(91, 147, 255, 0.85);
    color: #ffffff;
}
body.student.rail-open .navbar-static-top .navbar-minimalize.btn.btn-primary,
body.rail-overlay.rail-open .navbar-static-top .navbar-minimalize.btn.btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
body.student.rail-open .navbar-static-top .navbar-minimalize.btn.btn-primary:hover,
body.student.rail-open .navbar-static-top .navbar-minimalize.btn.btn-primary:focus,
body.rail-overlay.rail-open .navbar-static-top .navbar-minimalize.btn.btn-primary:hover,
body.rail-overlay.rail-open .navbar-static-top .navbar-minimalize.btn.btn-primary:focus {
    background-color: #1d4fd7 !important;
    border-color: #1d4fd7;
    color: #ffffff;
}

/* WHAT WENT, and why it is not listed above.

   body.student #side-menu / .navbar-header  display:none. The menu and its toggle
       were hidden so the flyout could stand in for them. Both are wanted now.
   body.student .img-logo-a  margin:0; padding:0. This is why the logo sat flush
       against the hamburger with no gap: it overrode the `0 40px 0 10px` every
       other header gets.
   body.student .img-logo-a / .img-logo  a 170px anchor against everyone else's 160,
       a 160px!important that restated the default, and a 16px nudge against
       .img-logo's 12 and body.dashboard's 10 -- three sizes and three nudges for one
       mark. The 170px was also beating logo.css's `width: auto` on specificity, so a
       learner's logo never got the sizing that file exists to provide.
   body.student.mini-navbar ...  two rules for a state a learner cannot be in; the
       collapse is a pinned-rail idea and this rail is never pinned.
   .top-student-menu / .student-nav / .student-menu-flyout  the flyout itself, its
       button and its eighteen rules of black-slab styling. The markup went from
       top_bar.tpl in the same change.
   .navbar-minimalize.btn.btn-primary:hover  a legacy cyan hover. Dead before this
       change and dead after it: .navbar-minimalize only ever appears inside
       .navbar-static-top, so the redesigned states always matched too, at higher
       specificity. */

/* THE TOP SEARCH BAR IS GONE. It searched the marketplace, which is being held
   back for now, and the markup went from top_bar.tpl -- see that file for the
   reasoning. What stood here was the whole set: .mobile-search-btn's hidden
   default, .courses-search-top-bar's black pill, and the three widths inside it
   (.category-top 30%, .search-top 65%, #btn-search-top 5%) that the five media
   blocks below kept re-dividing as the bar narrowed. All of it is removed, in
   this file and in public.css, along with the drawer rules at 500 and 767.
   The blocks those rules shared with other selectors are still here, minus
   their search lines. */
.top-bar-profile-icon {
    width: 30px;
    height: 30px;
    min-height: 30px!important;
    padding: 0!important;
    margin-bottom: -5px;
    border-radius: 50%;
    background-size: cover;
    background-position: center center;
    border: 1px solid #3078db;
}
.top-bar-profile-icon i {
    font-size: 26px;
    margin-left: -3px;
    margin-top: 1px;
}
/* The 1279 and 1179 blocks that stood here held nothing but the search box's width
   as the bar narrowed -- 50%, then 40% with its three children re-divided. Neither
   block has anything left in it, so both are gone. The note one of them carried
   about `.app-loader .app-loader-text`, hidden once to stop "Please wait..."
   crowding the search box, survives as this sentence: both are out of the bar now. */
@media (max-width: 979px) {
    .welcome-message {
        display: none;
    }
    .img-logo-a {
        width: 160px;
    }
}
@media (max-width: 679px) {
    /* .img-logo-a's width:150px and margin-top:10px!important stood here, and
       a matching width:100px / margin-top:17px!important in the 379 block
       below. Both were nudging an IN-FLOW logo down the bar by hand. It is
       absolutely positioned and centred now (logo.css), so the margin was
       pushing it 10px below the centre it had just been given -- measured, the
       bar centre is 32.5 and the logo sat at 37.5 -- and the widths fought the
       height-only sizing that stops it being clipped.

       The category select, the search input and its button were the rest of this
       block -- hidden and re-divided for a narrow bar. Gone with the search. */
}
@media (max-width: 579px) {
    /* The .img-logo-a display:none!important that stood here is gone. It hid the
       logo to give its width to the search box, and a rule at 500 put the logo
       back -- so between 501 and 579 it was simply missing (measured: gone at
       520, 540 and 575). Neither is needed now that a phone gets the 30px mark
       instead of the lockup, which leaves room for both. See logo.css. */
    .top-logout,
    .profile-top-bar {
        display: none!important;
    }
}
/* A 429 block followed, holding two more search widths and nothing else. Gone. */

/* Footer */
.footer {
	font-size: 11px;
    color: #fff;
}
.footer div {
	display: inline-block;
}
.footer-links {
    margin: 0 0 0 30px;
    padding: 0;
    list-style-type: none;
}
.footer-links li {
    display: inline-block;
    padding: 0 15px;
}
.footer-links li a {
    color: #fff;
    font-size: 14px;
}
.footer-links li a:hover {
    opacity: 0.85;
}

@media (max-width: 500px) {
    body.mini-navbar.body-small .nav > li > a i {
       display: inline-block;
    }
    /* The .img-logo-a display:inline-block!important that stood here is gone
       with its counterpart at 579 above. logo.css decides the logo now.

       So are the two rules that switched the search on below 500 -- the magnifier
       turning inline-block, and the drawer taking its absolute position under the
       bar. The 767 block further down did the same job at every phone width and
       outranked this one anyway; both are gone with the search. */
}

/* ---------------------------------------------------------------------------
   Side menu: pinned, full height, and glass.

   GLOBAL. This is the menu on every screen in the platform, not one module's,
   so it is changed here rather than in a module stylesheet -- chrome that looks
   different depending on which page you are on is worse than chrome you dislike.

   WHY IT WAS CUT OFF. The nav computed to position:absolute with no height, so
   it was exactly as tall as its own list -- 788px against a 5191px page -- and
   its background simply stopped there. It also scrolled away with the document,
   because absolute positions against the page and not the viewport.

   WHY FIXED IS SAFE HERE. #page-wrapper reserves the menu's column with
   margin-left, not by flowing beside it (measured: margin-left 70px in
   mini-navbar, and the nav was already out of flow at absolute). So going
   absolute -> fixed changes when it scrolls and nothing about where anything
   sits. top:60px is the theme's own figure, kept; bottom:0 is what gives it the
   full height it was missing.

   The inner div takes the scrolling, so a menu longer than the viewport can
   still be reached rather than being clipped by the pinning that just fixed it.
   --------------------------------------------------------------------------- */
.navbar-static-side {
    position: fixed;
    /* 65, not the 60 this file carried before. The top bar measures 65px on the
       live page -- .navbar-static-top, top 0 to bottom 65 -- so at 60 the rail
       started 5px too high and, sitting at z-index 2001, painted over the bottom
       edge of the bar. Both numbers are hardcoded to the same thing; this one is
       the height the bar actually is. If the logo block ever changes height, this
       is the line that has to follow it. */
    top: 65px;
    left: 0;
    bottom: 0;
    overflow: hidden;
    /* The BLUE lives here, on the rail, not on the list items -- see the note on
       .nav > li below. Values are the composite the items used to produce over the
       old darker rail, so the top of the menu looks the way it did and the bottom
       now matches it instead of falling back to the gradient underneath. */
    background: linear-gradient(180deg, rgba(0, 35, 48, 0.85), rgba(0, 26, 38, 0.92));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 4px 0 22px rgba(0, 0, 0, 0.30);
}
.navbar-static-side .sidebar-collapse {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.navbar-static-side .sidebar-collapse::-webkit-scrollbar {
    width: 6px;
}
.navbar-static-side .sidebar-collapse::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 3px;
}

/* The items were solid #003142. Two problems with carrying the colour: it sat on
   top of the glass and hid it, and it stopped where the LIST stopped -- so on a
   full-height rail the menu was blue down to the last item and then darker for the
   rest of the way, with a visible line across the column at whatever height the
   list happened to end.

   So the items carry no background of their own now and the rail carries the
   colour, which is why it reaches the bottom. Hover and active still paint,
   because those are the only times an item should be distinguishable from the rail
   it sits in.

   The 5px grey rule down the left of every item softens to a hairline too: at 70px
   wide it was claiming a fourteenth of the rail to say nothing. */
.navbar-static-side .nav > li {
    background-color: transparent;
    border-left: 5px solid rgba(255, 255, 255, 0.06);
}
.navbar-static-side .nav > li:focus,
.navbar-static-side .nav > li:hover {
    background-color: rgba(0, 76, 102, 0.55);
}

/* ---------------------------------------------------------------------------
   The logo, centred once instead of nudged three times.

   It was never centred. It was pushed down with margin-top, and the value differed
   by section: .img-logo 12px, body.dashboard 10px, body.student 16px. So the mark
   sat 7px, 5px and 11px below the middle of the bar respectively, and MOVED when
   you navigated between sections -- which is the wandering, not the file.

   The file is innocent. Measured: 314x68, artwork filling the canvas edge to edge
   with no transparent padding, rendered at 160x35. It is a clean 2x asset.

   The bar is already display:flex and its 65px height is held by .navbar-header and
   .navbar-top-links, both 65, so the logo's own margins were never load-bearing --
   dropping them cannot collapse the bar. align-self does the centring that three
   hand-tuned numbers were approximating.
   --------------------------------------------------------------------------- */
/* The bar's 65px was EMERGENT: it came from the logo's 10px margins plus its 45px
   block, so dropping those margins shrank the whole header to 60 and opened a 5px
   gap under the side menu, which is pinned to 65. Stating the height here makes it
   a fact rather than a consequence of a logo margin -- and the same 65 as the rail,
   which is the pair that has to agree. */
.navbar.navbar-static-top {
    min-height: 65px;
}
.img-logo-a {
    display: flex;
    align-items: center;
    align-self: center;
    height: auto;
    margin: 0 40px 0 10px;
}
.img-logo,
body.dashboard .img-logo,
body.student .img-logo {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Top bar: the hamburger on the same centre line as everything else.

   Measured on the live bar: the logo and the right-hand icons both sit at 32.5,
   the centre of the 65px bar. The hamburger sat at 29 -- 3.5px high -- because
   .navbar-minimalize carries margin: 14px 5px 5px 20px, which is top-heavy by
   9px and was tuned for a bar of a different height.

   Centring it properly rather than picking a new top margin, so it follows the
   bar if the bar ever changes again.
   --------------------------------------------------------------------------- */
.navbar-static-top .navbar-header {
    display: flex;
    align-items: center;
}
.navbar-static-top .navbar-minimalize {
    float: none;
    margin: 0 5px 0 20px;
}

/* ---------------------------------------------------------------------------
   Collapsed side menu: say which icons hide a submenu.

   Eight of the twenty menu items open a second level, and while the rail is
   collapsed there was nothing to distinguish them from the twelve that navigate
   straight somewhere. Clicking one appeared to do nothing, because metisMenu did
   open the submenu -- it was just behind the CSS that hides second levels at 70px
   wide.

   A corner mark is the cheapest honest signal: it says "there is more in here"
   without needing room for a label. The click behaviour that goes with it is in
   dashboard.js -- this only makes the affordance visible.
   --------------------------------------------------------------------------- */
body.mini-navbar .navbar-static-side #side-menu > li:has(> .nav-second-level) > a {
    position: relative;
}
body.mini-navbar .navbar-static-side #side-menu > li:has(> .nav-second-level) > a::after {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 6px 6px;
    border-color: transparent transparent rgba(255, 255, 255, 0.42) transparent;
    transition: border-color 0.16s;
}
body.mini-navbar .navbar-static-side #side-menu > li:has(> .nav-second-level) > a:hover::after {
    border-bottom-color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------------------
   Top bar, right side: put the icons on the bar's centre line.

   Measured against a 65px bar whose centre is 32.5:

     bell, envelope, logout   centre 30    -- 2.5px high
     profile icon             centre 26    -- 6.5px high
     welcome text             centre 29.5  -- 3px high

   Two causes. The anchors are padding:20px + a 20px line box = 60px tall, five
   short of the bar, and they sat at its top. And the list items are inline-block,
   so items of different heights -- a 60px anchor next to a 30px profile icon --
   were aligned on a shared BASELINE rather than a shared centre, which is why the
   profile sat higher than everything beside it.

   Flex on the row fixes both at once: each item is centred on the bar whatever its
   own height, so nothing needs a per-item number and nothing drifts if an icon is
   swapped for a taller one later.
   --------------------------------------------------------------------------- */
.navbar-static-top .navbar-top-links {
    display: flex;
    align-items: center;
}
.navbar-static-top .navbar-top-links > li {
    display: flex;
    align-items: center;
}

/* The gap the whitespace used to provide. As inline-blocks these items were spaced
   by the newlines between them in the markup -- roughly 4px of accidental air. Flex
   items have no such thing, so it is stated: one value, on purpose. */
.navbar-static-top .navbar-top-links {
    gap: 6px;
}

/* The profile icon is the only one with no badge and its own size, and it sat 2.5px
   low inside its anchor on the icon font's line box rather than on the anchor's
   centre. Flexing this one anchor centres the glyph itself. The others are left
   alone deliberately: their anchors hold a positioned badge, and making them flex
   would turn that badge into a sibling sitting NEXT to the icon rather than over it. */
.navbar-static-top .navbar-top-links > li.profile-top-bar > a {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* The profile item was nudged in three places at once, which is why centring the
   row did not settle it: the li carries height:25px, its anchor height:30px AND
   margin-bottom:-5px, and the icon a 1px top margin. align-items centres a MARGIN
   box, so an anchor pulled 5px negative at the bottom centres 2.5px low by
   construction -- the flex was working, it was centring a lie.

   Heights and nudges removed; the glyph is now the only thing being measured, and
   the row's own 6px gap replaces the icon's -3px/+6px horizontal fiddling. */
.navbar-static-top .navbar-top-links > li.profile-top-bar,
.navbar-static-top .navbar-top-links > li.profile-top-bar > a {
    height: auto;
    margin: 0;
}
.navbar-static-top .navbar-top-links > li.profile-top-bar > a > i {
    display: block;
    margin: 0;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   The menu toggle: an outline while the menu is icons, filled while it is open.

   It was solid green, because .btn-primary paints itself with
   THEME_LINK_HOVER_COLOUR and that resolves to the green -- so the loudest colour
   on the platform sat immediately beside the logo and outshouted it. Its hover was
   still hardcoded rgb(0,191,255), the electric blue we retired today, with an
   !important that has to be answered in kind.

   Now it states what it IS rather than shouting: an outline while the menu is down
   to icons, filled cobalt while the menu is open. The weight of the button matches
   the weight of the thing it controls -- a minimal rail gets a minimal button, and
   the control fills only when the menu it belongs to is filling the screen. Filled
   agrees with what you are looking at rather than describing the other state.

   The resting outline is a LIGHTER cobalt than the fill, and that is a requirement
   rather than a preference. The bar is #003142: true cobalt #2563eb against it is
   2.67:1, BELOW the 3.0 a UI element needs, so an outline drawn in the real brand
   colour would be a compliance failure as well as a squint. #5b93ff reaches 4.66:1
   and still reads as the same family. The filled state can use the real cobalt,
   because there the contrast that matters is white on cobalt, which is 5.7:1.
   --------------------------------------------------------------------------- */
/* DEFAULT is the open menu: filled. The collapsed state overrides it below with a
   positive selector rather than :not(), which is both simpler to reason about and
   avoided an inversion that would not take however it was written. */
.navbar-static-top .navbar-minimalize.btn.btn-primary {
    background-color: #2563eb;
    border: 1px solid #2563eb;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: none;
    transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.navbar-static-top .navbar-minimalize.btn.btn-primary:hover,
.navbar-static-top .navbar-minimalize.btn.btn-primary:focus {
    background-color: #1d4fd7 !important;
    border-color: #1d4fd7;
    color: #ffffff;
}

/* Down to icons: the button goes quiet with the menu. */
body.mini-navbar .navbar-static-top .navbar-minimalize.btn.btn-primary {
    background-color: transparent;
    border-color: rgba(91, 147, 255, 0.55);
    color: #5b93ff;
}
body.mini-navbar .navbar-static-top .navbar-minimalize.btn.btn-primary:hover,
body.mini-navbar .navbar-static-top .navbar-minimalize.btn.btn-primary:focus {
    background-color: rgba(37, 99, 235, 0.20) !important;
    border-color: rgba(91, 147, 255, 0.85);
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Opening and closing the rail: make it MOVE instead of jumping.

   Measured, expanded vs collapsed, with transitions disabled so the numbers are
   at rest:

     every icon jumped 116px VERTICALLY   the profile block is 123px tall open and
                                          0px collapsed, so everything under it
                                          leapt up and back down
     every icon jumped 10px HORIZONTALLY  the anchor is text-align:start when open
                                          and text-align:center at 70px
     labels vanished instantly            display:none cannot be transitioned
     the whole menu flashed               smoothlyMenu() hid #side-menu and faded it
                                          back over 400ms, on top of all the above

   Four separate jumps reading as one jarring movement. Each is dealt with below,
   and the width transition -- which was always there and always smooth -- is
   finally the only thing you see.

   1. THE PROFILE BLOCK GOES. It is the 116px, and it was the least defensible
      123px on the screen: its only two links, Profile and Log out, are both in the
      top bar already, and it sat above the navigation rather than below it. Its
      hidden mini-logo goes with it, which was never visible anyway -- .img-logo-mini
      is 160px wide in a 70px rail. One line to bring back if that is wrong.
   --------------------------------------------------------------------------- */
.navbar-static-side #side-menu > li.nav-header {
    display: none;
}

/* 2. The icon keeps its own column, so it occupies the same x in both states and
      has nothing to jump across. 28px centred inside a 9px-padded anchor puts the
      glyph at the same place whether the rail is 70px or 220px. */
.navbar-static-side #side-menu > li > a > i:first-child {
    display: inline-block;
    width: 28px;
    text-align: center;
    margin-right: 6px;
}
body.mini-navbar .navbar-static-side #side-menu > li > a {
    text-align: left;
}

/* 3. Labels stay IN FLOW and fade, clipped by the anchor. display:none is a jump by
      definition -- there is no midpoint between shown and not shown -- so the rail's
      own width becomes the thing that reveals and hides them. */
.navbar-static-side #side-menu > li > a {
    white-space: nowrap;
    overflow: hidden;
}
.navbar-static-side #side-menu .nav-label {
    opacity: 1;
    transition: opacity 0.14s ease;
}
body.mini-navbar .navbar-static-side #side-menu .nav-label {
    display: inline !important;
    opacity: 0;
}
/* The submenu chevron is not wanted at 70px -- the corner mark says that now. */
body.mini-navbar .navbar-static-side #side-menu .fa.arrow {
    opacity: 0;
}

/* 4. One stated transition on the thing that actually changes, rather than
      inheriting `all 0.4s` from .pace-done and animating properties nobody asked
      about. */
.navbar-static-side {
    transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 5. The last 7px. The anchor is font-size:14px open and 15px collapsed, which
      moves its line box from 20px to 21.43px -- 1.4px per item, and the item you
      are looking at is five down the list. Pinned to one size in both states, with
      the icon given its own explicit size so it stops depending on inheriting the
      thing that was changing. */
.navbar-static-side #side-menu > li > a,
body.mini-navbar .navbar-static-side #side-menu > li > a {
    font-size: 14px;
}
.navbar-static-side #side-menu > li > a > i:first-child {
    font-size: 15px;
    line-height: 1;
    vertical-align: -1px;
}

/* ---------------------------------------------------------------------------
   Two things the expansion still got wrong.

   THE COLOURED STRIP ON HOVER. .navbar-static-side .nav > li:hover paints a 5px
   border-left in THEME_MAIN_COLOUR, so running the cursor down a rail of icons
   dragged a bright bar along the very edge of the screen. The background change
   is enough to say "this one" -- the bar was a second answer to a question already
   answered, at the loudest possible volume. The 5px stays as geometry so nothing
   shifts; only its colour stops changing.

   THE CHEVRON DROPPING UNDER THE WORD. .arrow is float:right (main.css:241). A
   float needs room on the line, and during the 260ms the rail spends between 70px
   and 220px there is not enough -- so it wrapped to the next line, pushed the label
   down with it, and snapped back once the rail finished. Taking it out of flow
   entirely means it has no line to wrap onto: it is pinned to the right edge of the
   anchor and fades in with the labels, so the expansion has nothing left to reflow.
   --------------------------------------------------------------------------- */
.navbar-static-side .nav > li:focus,
.navbar-static-side .nav > li:hover {
    border-left-color: rgba(255, 255, 255, 0.06);
}

.navbar-static-side #side-menu > li > a {
    position: relative;
    padding-right: 24px;
}
.navbar-static-side #side-menu .fa.arrow {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    margin: 0;
    opacity: 1;
    transition: opacity 0.14s ease;
}

/* ---------------------------------------------------------------------------
   The left edge, and what it was doing to the icons.

   Every menu item carries border-left: 5px. It was a bright THEME_MAIN_COLOUR bar
   on hover until an hour ago; softening it to rgba(255,255,255,.06) took the colour
   out but left a 5px strip running the full height of the rail in a slightly
   different shade -- which reads exactly as reported: the background not quite
   reaching the edge of the screen.

   It goes, in every state including .active, so the rail is one colour edge to
   edge. Active is still marked by its own background, and removing the border in
   ALL states rather than some is what stops the geometry shifting as you move
   between items.

   That border was also why the icons sat left of centre: it pushed the anchor 5px
   in, so a 28px icon column at 9px of padding centred on 28 rather than the rail's
   own 35. With the border gone and the padding set to 21, the column centres on 35
   in BOTH states -- so the icons are centred at 70px and have still not moved when
   the rail reaches 220px.
   --------------------------------------------------------------------------- */
.navbar-static-side .nav > li,
.navbar-static-side .nav > li:hover,
.navbar-static-side .nav > li:focus,
.navbar-static-side .nav > li.active,
.navbar-static-side .nav > li.active:hover,
.navbar-static-side .nav > li.active:focus {
    border-left: 0;
}
.navbar-static-side #side-menu > li > a {
    padding-left: 21px;
}

/* A short transition on the icon's own colour so the spotlight in dashboard.js
   reads as a fade rather than a series of steps, and so leaving the rail eases out
   instead of snapping. 110ms is short enough that the glow still tracks the cursor
   rather than trailing it. */
.navbar-static-side #side-menu > li > a > i:first-child {
    transition: color 0.11s linear, filter 0.11s linear;
}

/* ---------------------------------------------------------------------------
   The glow is the hover state now, so the flood fills go.

   Two things were painting the whole item on hover: the theme's own
   .navbar-static-side .nav > li > a:hover, which fills the anchor with
   THEME_MAIN_COLOUR edge to edge, and the rgba(0,76,102,.55) wash added here when
   the rail became glass. Both were saying "you are on this one" in the loudest
   available way, and the spotlight now says it better and more precisely -- it
   marks where the cursor IS, not merely which row it landed in.

   Colour transitions move to the anchor, because the glow now sets colour there so
   the label inherits it along with the icon. The filter stays on the icon.
   --------------------------------------------------------------------------- */
.navbar-static-side .nav > li:hover,
.navbar-static-side .nav > li:focus,
.navbar-static-side .nav > li > a:hover,
.navbar-static-side .nav > li > a:focus,
.navbar-default.navbar-static-side .nav > li > a:hover,
.navbar-default.navbar-static-side .nav > li > a:focus {
    background-color: transparent;
}
.navbar-static-side #side-menu > li > a {
    transition: color 0.11s linear;
}
.navbar-static-side #side-menu > li > a > i:first-child {
    transition: filter 0.11s linear;
}

/* The tag naming the icon under the cursor while the rail is collapsed. Built and
   positioned in dashboard.js; this is only its appearance.

   position:fixed and parented to <body> on purpose -- the menu anchors carry
   overflow:hidden, which is what clips the labels during the width change, so a
   tag drawn inside one would be cut off at the rail's edge. z-index sits above the
   rail's 2001 and the content slider's 2002. pointer-events:none so it can never
   sit between the cursor and the icon it is describing. */
.lhq-rail-tip {
    position: fixed;
    z-index: 2005;
    transform: translateY(-50%);
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(0, 26, 38, 0.94);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
    color: #e8edf3;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.lhq-rail-tip.on {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .lhq-rail-tip { transition: none; }
}

/* ---------------------------------------------------------------------------
   The chevron waits for the shelf, and submenu rows get their hover back.

   THE CHEVRON. It is absolutely positioned at the right edge of its anchor, so at
   70px it sits a few pixels from the icon and at 220px it sits at the far edge --
   and it was fading in the moment the class flipped, well before the rail had got
   there. You saw it appear in the wrong place and then travel. Delaying the fade
   until the width transition has essentially finished means it arrives where it
   belongs and never crosses the rail in view.

   Asymmetric on purpose: 200ms of delay OPENING, none CLOSING. Going the other way
   there is nothing to wait for -- the chevron should leave before the shelf does,
   not linger over a rail that is already narrowing under it.

   THE SUBMENU ROWS. Removing the flood fill took these with it: .nav > li > a also
   matches second-level anchors, and the spotlight only lights top-level icons, so
   an open submenu had no hover feedback at all. They get their own, quieter than
   the fill that was there before -- these are text rows, not icons, and they only
   need to say which line the cursor is on.
   --------------------------------------------------------------------------- */
.navbar-static-side #side-menu .fa.arrow {
    transition: opacity 0.14s ease 0.2s;
}
body.mini-navbar .navbar-static-side #side-menu .fa.arrow {
    transition: opacity 0.1s ease 0s;
}

.navbar-static-side .nav-second-level > li.active > a {
    color: #ffffff;
}

/* The chevron, second attempt. A 200ms delay left it appearing while the rail still
   had 60ms of travel to go, and on the way back it was still visible for its first
   100ms -- long enough to be seen darting left as the anchor narrowed under it.
   That is the jump: not the fade, the journey.

   Opening now waits the full 260ms of the width transition, so it appears only once
   the rail has stopped. Closing is instant -- no duration, no delay -- so it is gone
   before it can travel anywhere. A chevron that vanishes is not noticed; one that
   slides across the rail is. */
.navbar-static-side #side-menu .fa.arrow {
    transition: opacity 0.13s ease 0.26s;
}
body.mini-navbar .navbar-static-side #side-menu .fa.arrow {
    transition: none;
}

/* Submenu rows fill cobalt under the cursor. #5b93ff rather than #2563eb for the
   same reason the toggle's outline uses it: true cobalt on this rail measures
   2.67:1, under the 3.0 a UI element needs, and text has to be read rather than
   merely noticed. This is the same cobalt the hamburger outline already uses, so
   the rail has one bright blue rather than two. */
.navbar-static-side .nav-second-level > li > a:hover,
.navbar-static-side .nav-second-level > li > a:focus {
    background-color: rgba(37, 99, 235, 0.14);
    color: #5b93ff;
}

/* ---------------------------------------------------------------------------
   Where you are.

   The rail had no way of saying it. Nothing carries .active on a normal page load
   -- metisMenu only sets it while a submenu is open -- so collapsing the rail or
   closing the section left twenty identical icons and no answer to "which of these
   am I in". dashboard.js works it out from the hrefs already in the menu and marks
   two things: .lhq-here on the exact item, .lhq-here-top on its top-level ancestor.

   The ICON is what carries it, because that is the only part still on screen at
   70px. Cobalt rather than the hover gradient on purpose: hover says "you are
   pointing here" and this says "you ARE here", and if both spoke in the same
   colours neither would mean anything. #5b93ff for the same contrast reason as
   everywhere else on this rail.

   The tint sits on the anchor rather than the li so it stops at the row and does
   not run behind an open submenu.
   --------------------------------------------------------------------------- */
#side-menu > li.lhq-here-top > a,
#side-menu > li.lhq-here-top > a > i {
    color: #5b93ff;
}
#side-menu > li.lhq-here-top > a {
    background-color: rgba(37, 99, 235, 0.16);
    box-shadow: inset 2px 0 0 #5b93ff;
}

/* The exact row inside an open submenu, so a section with eight children still
   says which of the eight you are on. */
#side-menu .nav-second-level > li.lhq-here > a {
    color: #5b93ff;
    background-color: rgba(37, 99, 235, 0.12);
}

/* ---------------------------------------------------------------------------
   "Become a Creator": the one row that is an offer rather than a destination.

   It was #008000 -- not a brand colour, just the HTML keyword green -- filling the
   whole row edge to edge, with a 5px bar of the same. On the old black flyout that
   merely looked dated. On a glass rail it is the loudest thing on the screen, and it
   is shouting at the one person who has not yet agreed to anything.

   The rail already has a way of marking a row it wants to single out, four rules
   above: a faint tint on the ANCHOR, a 2px inset bar, and the text and icon taking
   the accent colour. This borrows that exactly and changes only the hue, so the row
   reads as deliberate rather than as a banner someone stuck on afterwards.

   #2dc26b is the brand green, and it is chosen over the old one for a second reason
   as well as taste. The hover glow interpolates every icon between cobalt at the top
   of the rail and #2dc26b at the BOTTOM -- and Menu::getMenuItems() appends this row
   last, after Logout. So the glow's target colour here already is this colour: the
   spotlight passes over it and changes nothing, where a #008000 row would have been
   dragged green-to-green through a hue it does not own. The colour agreeing with the
   code that animates it is not a coincidence worth losing.

   CONTRAST IS NOT THE ARGUMENT, and it is worth saying so rather than implying it.
   Measured: white on #008000 was 5.14:1, which passes perfectly well. #2dc26b on this
   tinted row is 5.68:1 -- marginally better, and in the same band as the rail's own
   cobalt accent at 4.72:1, which is the number that matters for consistency. The old
   treatment was not inaccessible. It was just loud.

   No hover rule. The glow is this rail's hover state and it treats this row like any
   other; adding a fill back would reintroduce, for one row, exactly the flood the
   redesign removed from all of them.
   --------------------------------------------------------------------------- */
#side-menu > li.upgrade > a,
#side-menu > li.upgrade > a > i {
    color: #2dc26b;
}
#side-menu > li.upgrade > a {
    background-color: rgba(45, 194, 107, 0.12);
    box-shadow: inset 2px 0 0 #2dc26b;
}

/* ---------------------------------------------------------------------------
   An open section, and the white box around the row you clicked.

   TWO THINGS WERE WRONG AND ONLY ONE WAS DELIBERATE.

   The grey was legacy. #5a5a5a sat on li.active AND on ul.nav-second-level, from
   when this rail was a light theme, so opening a section dropped a mid-grey slab
   into a near-black sidebar and drew it twice -- once for the row, once for the
   list -- which is why the edges did not line up.

   The white box was the browser. Clicking a menu anchor focuses it, and Chrome
   draws its default ring, which reads white on a dark rail. It stayed for as long
   as the section did, because the focus did.

   WHY OPEN IS NOT COBALT, since that is the obvious thing to reach for. Cobalt is
   already spoken for twice on this rail: hover fills rgba(37,99,235,.14) and "you
   are here" fills .16 with a solid #5b93ff bar. A third cobalt state would leave
   three things saying the same thing in the same colour, and the one that matters
   -- where you actually are -- would stop standing out. The note above
   .lhq-here-top makes exactly this argument about hover; it applies here too.

   So an open section recedes instead of advancing. It is a container holding rows
   you are about to choose between, not a row you have chosen: a black recess
   rather than a grey slab, with a dimmed cobalt edge that says which family it
   belongs to without competing with the solid one. Hover and current-section then
   read clearly ON TOP of it, which they could not do against #5a5a5a.
   --------------------------------------------------------------------------- */

/* Sidebar only. Specificity beats both the legacy `.nav > li.active` grey above
   and the transparent rule the glass rail sets, without touching tab strips. */
.navbar-static-side .nav > li.active {
    border-left: 5px solid rgba(91, 147, 255, 0.45);
    background: rgba(0, 0, 0, 0.28);
}
.navbar-static-side .nav > li.active > a:hover,
.navbar-static-side .nav > li.active > a:focus,
.navbar-default.navbar-static-side .nav > li.active > a:hover,
.navbar-default.navbar-static-side .nav > li.active > a:focus {
    background: transparent;
}

/* The ring goes, but only for the pointer. :focus-visible still draws it for
   anyone arriving by keyboard, who has nothing else to tell them where they are
   -- removing it outright would be trading one persons annoyance for anothers
   inability to use the menu at all. Cobalt rather than the browser white, and
   inset so it cannot be clipped by the anchors overflow:hidden. */
.navbar-static-side #side-menu a:focus,
.navbar-static-side #side-menu a:focus-within {
    outline: none;
}
.navbar-static-side #side-menu a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #5b93ff;
    border-radius: 3px;
}

/* Rows inside an open section sit on the recess, so they need no fill of their
   own -- only their text lifted enough to read against it. */
.navbar-static-side .nav-second-level > li > a {
    background-color: transparent;
    color: #c3ccd8;
}


/* ---------------------------------------------------------------------------
   The logo treatment lives in logo.css, not here.

   logo.css is appended by styles/css/dynamic.php and styles/css/public_dynamic.php
   AFTER this file, which is the order the cascade needs: the .img-logo-a rule near
   the top of this file sets width: 160px and logo.css sets width: auto at the same
   specificity, so the later one has to be logo.css. Do not move it earlier in
   either bundle.

   The layout rules here -- the 160px sidebar width, the flex centring, the student
   and responsive variants -- are this file's business and stay.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   TAP TARGETS ON A PHONE.

   Measured at 386px: the hamburger was 38x30 and the bell and envelope 30 wide.
   Every control in the bar was under the 44x44 that both Apple's and Google's
   guidance put as the floor, and the hamburger -- the one control that opens
   navigation, on the screens where navigation is hidden behind it -- was the
   smallest of them.

   min-width and min-height rather than width and height, so nothing that is
   already bigger gets squeezed, and so the icons stay whatever size they are:
   this grows the box you can hit, not the glyph.

   THE ANCHORS ARE LEFT AS display:block ON PURPOSE. Each of the bell and
   envelope holds an absolutely positioned .label badge, and the note further up
   this file explains what flexing them does to it -- the badge stops being a
   layer over the icon and becomes a sibling beside it. Padding and min-width
   widen the anchor without touching how its children lay out; text-align keeps
   the glyph in the middle of the wider box.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .navbar-static-top .navbar-minimalize.btn {
        min-width: 44px;
        min-height: 44px;
        margin: 0 4px 0 10px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .navbar-static-top .navbar-top-links > li > a {
        min-width: 44px;
        min-height: 44px;
        padding: 12px 6px;
        text-align: center;
    }

    /* The profile avatar is the exception: it is a 30px circle with its own
       min-height:30px!important and padding:0!important, so the rule above
       cannot reach it and padding cannot grow it. It becomes a 44px circle
       instead -- the picture gets bigger rather than gaining an invisible
       margin, which on a phone is the normal size for an avatar anyway.
       !important only because the declaration it has to beat carries one. */
    .navbar-static-top .top-bar-profile-icon {
        width: 44px;
        height: 44px;
        min-height: 44px!important;
        margin-bottom: 0;
    }
    /* The fallback glyph for an account with no picture, kept in proportion. */
    .navbar-static-top .top-bar-profile-icon i {
        font-size: 38px;
        margin-left: 0;
        margin-top: 0;
    }
}

/* ---------------------------------------------------------------------------
   ONE SET OF ICONS, AT EVERY PHONE WIDTH.

   What was there changed three times between 340 and 767, and each change made
   it worse rather than adapting:

     below 350   search only -- main.css hides li.dropdown, so notifications AND
                 messages disappear, the only two things in the bar carrying a
                 live count
     386 to 500  search, notifications, messages
     600 to 767  notifications, messages, profile, logout -- search gone, and
                 the two extra items arrive exactly where space is tightest

   Profile and Logout are rows in the side menu at every width -- checked, both
   present -- so in the bar they are duplicates, and they are the two that
   turned up when there was least room for them. They go; the menu keeps them.

   That left search, notifications and messages: three things that carry
   something the menu does not, at 44px each, constant from 320 up.

   SEARCH IS NOW OUT TOO -- not because of space, but because what it searched
   is being held back (see top_bar.tpl). So it is two icons at every phone
   width, and the point of this block is unchanged: nothing appears or vanishes
   as a phone rotates or a window is dragged narrower.

   The selectors are heavier than they look because they are outranking
   main.css's own (max-width: 350px) rule at (0,3,1) and two !important
   declarations at 579.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Notifications and messages, always. */
    .navbar-static-top .nav.navbar-top-links > li.dropdown {
        display: flex;
    }
    /* Profile and logout, never -- they are menu rows. !important because the
       579 block's own rule carries one and this has to beat it in both
       directions: hiding below 579 where it already did, and hiding between
       580 and 767 where it did not. */
    .navbar-static-top .navbar-top-links > li.profile-top-bar,
    .navbar-static-top .navbar-top-links > li.top-logout {
        display: none!important;
    }
}

/* The search drawer stood here: full width under the bar, its own gutter,
   #003142, z-index 999, opened by the magnifier and closed again by it.
   display:none was the closed state and the only thing the JavaScript touched.
   Button, drawer and JavaScript are all gone together. */

/* ---------------------------------------------------------------------------
   NOTIFICATIONS AND MESSAGES MOVE INTO THE MENU ON A PHONE.

   They were two of the three things in the bar, and both are dropdown panels
   rather than links -- a panel hanging off a 44px icon is awkward on a
   touchscreen, and they were the two items whose whole job is "there is
   something for you", which is a job the hamburger can do for both at once.

   So the menu gains two rows going to the full pages. The hamburger carries the
   combined count and pulses while it is above zero, which is the part that
   replaces two badges with one. (This block used to end "the bar keeps search";
   search has since gone, so on a phone the bar keeps the hamburger and these
   two, and the panels still hang off them above 767.)

   THE COUNT IS AS AT PAGE LOAD. The numbers are rendered by the server into
   the bar's own spans and nothing polls for more, so this reports what was
   waiting when the page was drawn. That is what the two badges did as well --
   this moves the number, it does not make it any less live than it was.
   --------------------------------------------------------------------------- */

/* Rail rows: phones only. They are in menu.tpl for everyone, because the
   template is not width-aware, so the desktop hides them again.

   Matched through #side-menu rather than on the class alone. Bootstrap states
   `.nav > li { display: block }` at (0,1,1), which beats a bare
   .nav-mobile-only at (0,1,0) -- measured, the rows showed on a 1100px desktop
   with the hide in place and losing. */
#side-menu > li.nav-mobile-only {
    display: none;
}
@media (max-width: 767px) {
    #side-menu > li.nav-mobile-only {
        display: block;
    }
    /* The two dropdown panels leave the bar. Heavier than .dropdown alone so it
       beats the display:flex given to every top-link li further up. */
    .navbar-static-top .nav.navbar-top-links > li.alerts-dropdown,
    .navbar-static-top .nav.navbar-top-links > li.msg-dropdown {
        display: none;
    }
}

/* The count on the hamburger, and its pulse.

   The badge is positioned against the button, so .navbar-minimalize needs to
   be a containing block -- it is inline-flex at this width from the tap-target
   rule above, which does not make it one on its own.

   The pulse is on a ::after ring rather than on the button, so nothing that
   can be tapped changes size: a control that breathes under the finger is
   harder to hit, which would undo the 44px work. The ring scales and fades
   from the button's own centre and never takes pointer events. */
@media (max-width: 767px) {
    .navbar-static-top .navbar-minimalize.btn {
        position: relative;
    }
    .rail-alert-badge {
        position: absolute;
        top: -2px;
        right: -4px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #2dc26b;
        color: #06240f;
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        pointer-events: none;
    }
    body.has-unread .navbar-static-top .navbar-minimalize.btn::after {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: 8px;
        border: 2px solid #2dc26b;
        opacity: 0;
        pointer-events: none;
        animation: lhq-unread-pulse 2.4s ease-out infinite;
    }
}
@keyframes lhq-unread-pulse {
    0%   { transform: scale(0.94); opacity: 0.65; }
    70%  { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}
/* A ring that never stops is exactly the kind of motion this setting exists to
   turn off. The badge stays -- it is the information; the animation is not. */
@media (prefers-reduced-motion: reduce) {
    body.has-unread .navbar-static-top .navbar-minimalize.btn::after {
        animation: none;
    }
}

/* The bar is what the logo centres against. .img-logo-a is absolute at every
   width now (see logo.css), so the bar has to be its containing block --
   otherwise it would centre on whichever ancestor happens to be positioned,
   or on the page.

   The search drawer, also absolute inside this bar, is unaffected: it is
   top:65 left:0 width:100%, and the bar starts at the top of the page and
   spans it, so it resolves to the same place either way. */
.navbar-static-top {
    position: relative;
}

/* ---------------------------------------------------------------------------
   THE FOOTER STOPS SITTING ON TOP OF THE LAST THING ON THE PAGE.

   main.css pins it with `position: absolute; bottom: 0`, so it takes no space
   in the flow and simply overlays whatever the container ends with. That is
   survivable on a desktop, where it is one line of about 40px and
   .wrapper-content reserves 40px of bottom padding for it.

   On a phone the links wrap and it measures 117px against that same 40px of
   padding. Measured on dev at 386: the second offer card ran to 639 and the
   footer started at 579, so its progress bar and its button were behind the
   footer -- and the course screen had the same overlap, content ending at
   1906 with the footer starting at 1829. Platform-wide, both screens, any
   page whose content reaches the bottom.

   Static rather than a bigger padding number. The footer is last in the
   markup, so in the flow it lands after the content by definition, and there
   is no height to keep two files agreeing about -- which is exactly how the
   40px came to be wrong in the first place.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Stacked and centred, because the desktop arrangement is a row: the
       copyright inline-block on the left and the links inline-block beside
       it, each li with 15px of side padding. At 386 that wraps into a ragged
       left-aligned column with the items at odd offsets, which is the clunky
       part -- it is a row that ran out of room rather than a layout.

       column-REVERSE so the links lead and the copyright settles underneath,
       without touching the markup: the copyright div is written first, and
       it is the small print, not the headline. */
    .footer {
        position: static;
        margin-top: 30px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 12px;
        padding: 22px 16px 26px;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }
    /* The two halves are inline-block for the desktop row; here they are rows
       of their own. */
    .footer > div {
        display: block;
        width: 100%;
    }

    /* The links become a centred wrapping row. The 30px left margin the
       desktop rule gives this list is what pushed the whole block off centre
       on a phone. */
    .footer-links {
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 2px 6px;
    }
    .footer-links li {
        padding: 0;
    }
    /* Padding on the anchor rather than the li, so the thing you can tap is
       the link itself. 40px tall against the 17px line box these had -- not
       the full 44 the header controls get, because a footer link is not
       something anyone hits in a hurry, but no longer a hairline. */
    .footer-links li a {
        display: block;
        padding: 11px 10px;
        font-size: 12px;
        letter-spacing: .03em;
        color: rgba(255, 255, 255, 0.72);
    }
    .footer-links li a:hover,
    .footer-links li a:focus {
        color: #ffffff;
        opacity: 1;
    }

    /* BECOME A CREATOR, on its own line and as a button.

       It is the only invitation to sign up anywhere on a phone -- the top
       bar's copy of it is hidden below 767 -- and in the row above it read as
       the fifth of five identical legal links, which is the one thing it is
       not.

       flex-basis 100% is what puts it on its own line rather than wherever
       the wrap happens to land it; matched on what the item CONTAINS, not on
       :last-child, so adding another link after it does not quietly move it. */
    .footer-links li:has(> a.upgrade) {
        flex: 0 0 100%;
        margin-top: 8px;
    }
    .footer-links li a.upgrade {
        display: inline-block;
        padding: 11px 22px;
        border-radius: 999px;
        background: var(--lhq-brand, #3b82f6);
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .05em;
    }
    .footer-links li a.upgrade:hover,
    .footer-links li a.upgrade:focus {
        background: var(--lhq-link-hover, #1d4fd7);
        color: #ffffff;
    }

    /* The small print, and looking like it. */
    .footer-login > div:first-child {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.45);
    }
}

/* ---------------------------------------------------------------------------
   THE BACK-TO-TOP BUTTON GETS OUT OF THE FOOTER'S WAY.

   #toTop is position:fixed at the bottom of the viewport and, unusually,
   CENTRED -- main.css puts it at left:52% and dashboard.css pins it harder
   with left: calc(50% - 30px)!important. Fine while it floats over a page,
   but scroll to the end and the bottom of the viewport is the footer, so it
   lands squarely on the centred copyright line.

   Bottom-right instead, which is where a back-to-top lives anyway, and which
   on this footer means it sits beside the centred text rather than on it.
   The footer also gains enough bottom padding to hold it, so the button has
   its own space in the band rather than overlapping the last line of type.

   !important because the declarations it has to beat carry it.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    #toTop {
        left: auto!important;
        right: 12px!important;
        bottom: 12px;
        margin-left: 0!important;
        margin-right: 0!important;
    }
    /* Room for it under the copyright. 56 is the button's own 52-ish plus the
       12 it sits off the edge, rounded to something that stays clear if the
       icon is ever swapped for a larger one. */
    .footer {
        padding-bottom: 56px;
    }
}
/* AND ABOVE AN EDITOR'S SAVE BAR (29 Sep 2026). On a phone the editors pin
   their Save / Publish row to the bottom of the screen (.rail-actions, and
   the blog writer's .wp-btns); the button goes up above it rather than
   sitting on the buttons. Taller when the bar has a Draft / Live switch,
   which takes a line of its own. */
@media (max-width: 560px) {
    body:has(.v2-screen .rail-actions) #toTop,
    body:has(.v2-screen .wp-btns) #toTop,
    body:has(.v2-screen .ac-save) #toTop { bottom: 76px !important; }
    body:has(.v2-screen .rail-actions .statusflip) #toTop { bottom: 126px !important; }
}

/* ---------------------------------------------------------------------------
   THE PAGE TITLE STOPS BEING A SLAB.

   page_header.tpl draws .page-heading on every screen in the app, and the
   theme fills it: rgba(167,213,255,.15) over the dark ground, which is what
   reads as a grey block, 77px of it, with a near-black hairline under.

   It is the only filled band on pages that are otherwise dark ground with
   panels floating on it, so it reads as a leftover rather than as chrome.
   The title does not need a container to be a title -- space above and a
   hairline below say the same thing and take nothing.

   Platform-wide on purpose: this file reaches every logged-in page, and a
   page title that looked different depending on which module drew it is the
   thing chrome.css exists to stop.
   --------------------------------------------------------------------------- */
/* Matched at .row.wrapper.page-heading because that is what the theme uses
   for the fill -- (0,3,0) against a bare .page-heading's (0,1,0), so the
   plain selector lost. */
.row.wrapper.page-heading {
    background: transparent;
    /* .border-bottom is its own class on this element and sets rgb(26,26,26),
       a near-black line that was invisible on the fill and is invisible on the
       ground too. Overridden here rather than there: .border-bottom is used
       platform-wide. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* The -20px top was pulling the band up under the bar to make the fill
       meet it. With no fill there is nothing to meet. */
    margin: 0 -25px 26px;
    padding: 0 10px 16px;
}
/* The class that sets the near-black line, beaten on its own ground. */
/* .border-bottom sets rgb(26,26,26) with !important, so this needs one too --
   the only way to beat an !important is another. */
.page-heading.border-bottom {
    border-bottom-color: rgba(255, 255, 255, 0.08)!important;
}
.row.wrapper.page-heading h2 {
    margin: 22px 0 4px;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
/* The breadcrumb under it is small print, and at the theme's default it was
   competing with the title for the same weight. */
.row.wrapper.page-heading .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 12px;
}
.row.wrapper.page-heading .breadcrumb > li.active > strong {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
}

/* Logout is an account action, not a destination like the rows above it, and in
   the rail it sits directly against Become a Creator -- the one call to action in
   the list. A hairline separates the two kinds of row.

   The same rule exists in public.css for .student-menu-flyout, which is the
   storefront's copy of this menu. Two files because they are two different menu
   objects on two different surfaces: the front page prints a flyout, the app
   prints this rail, and only this one is in the logged-in bundle. */
.navbar-static-side #side-menu > li.standard-menu-item.Logout {
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.09);
}

/* ---------------------------------------------------------------------------
   LOGOUT LOOKS LIKE LOGOUT.

   Every link in the top bar hovers to the same blue, Logout included, so the one
   control up there you can be sorry you clicked looked exactly like the ones you
   cannot. It takes the theme's danger red instead -- #ed5565, which is main.css's
   own danger colour, not a red invented here. The .r error red (#cc0000) was the
   other candidate and is too dark to read against this bar.

   The rail's Logout is handled in chrome.js rather than here, because the rail's
   hover IS the spotlight in that file: it writes an inline colour on the anchor,
   which beats any rule in this sheet. Same red, set as that row's target instead
   of its slice of the cobalt-to-green gradient.

   `transition: colour` on .nav.navbar-top-links a is a typo for `color`, so no
   top-bar hover has ever faded -- they all snapped. Corrected here so this one
   eases in, which is most of what makes it read as a warning rather than a
   flicker. */
.nav.navbar-top-links a {
    transition: color 0.25s;
}
.navbar-top-links > li.top-logout > a:hover,
.navbar-top-links > li.top-logout > a:focus,
.navbar-top-links > li.top-logout > a:hover > i,
.navbar-top-links > li.top-logout > a:focus > i {
    color: #ed5565 !important;
}

/* The same tag, under the bar instead of beside the rail.

   .lhq-rail-tip centres itself vertically on the icon it names, because in the
   rail it sits to the right of one. Here it hangs below a row of icons at the top
   of the screen, so it centres horizontally instead. Everything else -- the glass,
   the border, the fade -- is shared, because these are the same object answering
   the same question in two places. */
.lhq-rail-tip.lhq-tip-below {
    transform: translateX(-50%);
}

/* ---------------------------------------------------------------------------
   THE TABLE EVERY CREATOR SCREEN IS MADE OF.

   themes/default/table.tpl is shared by 45 screens -- Manage Offers, Digital
   Products, Customers, Reviews, Earnings, Content Management, all of them --
   and nothing in this file had ever touched it. So it took Bootstrap's defaults,
   which are drawn for a white page:

     .table > tbody > tr > td   border-top: 1px solid #e7eaec

   That is a near-white rule between every row of a table sitting on #1c1c1c.
   Measured, not guessed: rgb(231,234,236) on rgb(28,28,28). It reads as a grid
   of bright lines with the data faint between them, which is the opposite of
   the emphasis a table wants.

   The padding was the other half: 8px 3px. Three pixels each side, on a table
   of eleven columns, so every column touched its neighbours.

   The blue header stays. It is --lhq-brand, it is the one place the account's
   colour appears on these screens, and changing it is a design decision rather
   than a correction -- so it gets typography instead: uppercase, tracked, and
   the weight to carry a 1598px bar without shouting.
   --------------------------------------------------------------------------- */

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top-color: rgba(255, 255, 255, .07);
    padding: 11px 12px;
    vertical-align: middle;
}
.table > thead > tr > th {
    border-bottom-color: rgba(255, 255, 255, .12);
    padding: 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
}
/* The first row has a line above it that it does not need: the header already
   closes the top of the table. */
.table > tbody > tr:first-child > td {
    border-top: 0;
}

/* Striping and hover. Bootstrap's own are #f9f9f9 and #f5f5f5 -- both drawn to
   be a shade off white, and both very nearly white here. The point of a stripe
   is to help the eye hold a row across eleven columns, which needs a difference
   of a few percent, not a different colour. */
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: transparent;
}
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, .022);
}
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:nth-of-type(even):hover {
    background-color: rgba(255, 255, 255, .055);
}

/* The horizontal scroller these tables sit in. It is doing its job -- eleven
   columns do not fit a phone and should scroll rather than crush -- but it gave
   no sign that there was anything to the right of the edge. */
.table-responsive {
    border: 0;
}
@media (max-width: 767px) {
    .table-responsive {
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 10px;
    }
    .table > thead > tr > th,
    .table > tbody > tr > td {
        white-space: nowrap;
    }
}

/* A panel holding a table, on a phone.

   .ibox-content pads 20px each side, which is right for text and wrong for a
   table that already cannot fit. Measured at 375: the page gutter takes 25, the
   panel another 20, and the scroller was left 271px of a 363px screen -- a
   sixth of the width spent on margin either side of something that scrolls.

   Narrowed only where the panel actually holds a scroller, so every other panel
   keeps the padding that suits its contents. */
@media (max-width: 767px) {
    .ibox-content:has(.table-responsive) {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ---------------------------------------------------------------------------
   THE PANEL THE CREATOR SCREENS ARE BUILT FROM.

   dashboard.css gives .ibox a #3d3d3d fill with a 1px #1a1a1a border and square
   corners. The customer-facing screens settled on something different while they
   were being rebuilt -- #2a2a2a, a hairline of white at 9%, and a 12px radius --
   and there is no reason for a creator's panel to be a different object from a
   customer's. Same app, one panel.

   #1a1a1a against #3d3d3d is also a hard line drawn darker than the page behind
   it, which is what gives these screens their boxed-in look: every panel outlined
   in something closer to black than to its own surface. A hairline lighter than
   the fill describes the same edge without drawing a frame around it.

   A title and its content are two elements stacked, so the pair is rounded as one:
   the top corners on the title, the bottom on the content. Either one standing
   alone -- a welcome message with nothing under it, a panel with no header -- gets
   all four.
   --------------------------------------------------------------------------- */
.ibox .ibox-title,
.ibox .ibox-content {
    background-color: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, .09);
}
.ibox .ibox-title {
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}
.ibox .ibox-content {
    border-radius: 0 0 12px 12px;
}
/* Standing alone, so rounded on all four and closed at the bottom. */
.ibox > .ibox-title:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
}
.ibox > .ibox-content:first-child {
    border-radius: 12px;
}
/* The -border variants add side and bottom edges that the rules above already
   draw; left here only so they stop fighting the radius. */
.ibox .ibox-title.ibox-title-border,
.ibox .ibox-content.ibox-content-border {
    border-right-color: rgba(255, 255, 255, .09);
    border-left-color: rgba(255, 255, 255, .09);
    border-bottom-color: rgba(255, 255, 255, .09);
}

/* THE PICTURE'S MENU (2 Oct 2026, Martin: "your usual suspects"), from
   Output::profileMenu(). On both bars: a creator's and a customer's v2 bar,
   and the admins' older one, which is why it is here and not in v2.css (that
   sheet only adds the v2 drop and the edge it hangs from). Who is signed in
   at the top; Log out in the danger colour at the bottom. The fallbacks are
   for the admin pages, which do not carry the v2 tokens. */
.dropdown-menu.sh-me { left: auto; right: 0; min-width: 250px; padding: 6px 0; }
.dropdown-menu.sh-me > li.sh-me-who { display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px; }
.sh-me .sh-me-face { flex: none; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background-color: rgba(255,255,255,.08); background-size: cover; background-position: center;
    box-shadow: 0 0 0 1px rgba(255,255,255,.14); color: var(--muted, #9aa3ad); font-size: 20px; }
.sh-me .sh-me-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.sh-me .sh-me-id b { color: var(--text, #e8eaed); font-size: 14px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-me .sh-me-id span { color: var(--dim, #8a939e); font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-menu.sh-me > li > a { padding: 8px 16px; font-size: 13.5px; }
.dropdown-menu.sh-me .divider { margin: 5px 0; }
.dropdown-menu.sh-me > li > a.sh-me-out,
.dropdown-menu.sh-me > li > a.sh-me-out:hover { color: var(--danger, #e5534b); }
/* Bootstrap paints an open dropdown's toggle (.nav .open > a) a light grey,
   which turned the picture into a white disc while its menu was open. */
.nav .open > a.top-bar-profile-icon,
.nav .open > a.top-bar-profile-icon:hover,
.nav .open > a.top-bar-profile-icon:focus { background-color: transparent; }
/* Courses Styles v1.0.0 */

#courses-content,
.splide-categories,
.splide-parent-categories {
    margin: 0 -30px;
}
.footer-login {
   margin-top: 30px; 
}
.splide-courses:last-child {
    margin-bottom: 60px;
}
.add-video-fetch-group {
	width: 50%;
}
.preview-wrappers iframe,
.preview-wrappers img,
iframe {
	max-width: 100%;
    width: 100%;
}
/* #fetch-msg and #fetch-youtube-msg were styled here and exist in no template, no
   component and no script in this module -- the last of the Vimeo and YouTube
   scaffolding, removed with the rest of it. See item 24 in docs/for-seth.md.
   ContentManagement has the real feature and its own styles for it. */
#courses-table .inline-field,
#course-groups-table .inline-field {
	width: 40px;
}
#courses-table img,
#course-groups-table img {
	width: 40px;
}
.dropspace span,
.dropspace-2 span {
	padding: 50px 0;
}
#description {
    min-height: 180px;
}
.course-buttons {
    margin-bottom: 15px;
}
#content-slider-videos,
#content-slider-general {
    margin-right: 5px;
}
.fa-crosshairs {
    cursor: pointer;
}
@media (min-width: 767px) {
    .doc-input, 
    .video-input {
        min-width: 400px; 
    }
}
/* Splide carousel */
.splide__arrow {
    border-radius: 3px;
}
.splide__arrow svg {
    fill: #fff;
}
.splide-categories li a {
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
}
.category-slider-item {
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    margin: 0 10px;
    height: 120px;
    text-align: center;
    background: #3d3d3d;
    border-radius: 19px;
    border: 3px solid #3078db;
    background-size: cover!important;
    background-position: center center!important;
}
.splide-categories {
    display: none;
}
.splide-categories-top {
    display: none!important;
}
.splide-parent-categories {
    display: none;
    margin-bottom: 10px;
    height: 50px;
    background: #3d3d3d;
}
.splide-parent-categories .splide__track {
    background: #3d3d3d;
}
.splide-parent-categories .category-slider-item {
    height: 50px;
    border: none;
    border-radius: 0;
    color: #fff;
}

.course-home-title-row {
    margin: 30px -15px 60px;
    font-size: 18px;
}
.course-home-title-row.single-course-home-title-row {
    margin: 30px -15px 15px;
}
.course-home-title-row strong {
    display: block;
    background: #3d3d3d;
    padding: 5px 15px;
}
.course-home-title-row strong a {
    font-weight: normal;
}
.course-home-item {
    margin: 0 10px 15px;
    padding: 5px;
    background: rgba(255,255,255,0.033);
    -webkit-box-shadow: 0px 10px 9px -5px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 10px 9px -5px rgba(0,0,0,0.33);
    box-shadow: 0px 10px 9px -5px rgba(0,0,0,0.33);
}
.course-home-item-title {
    font-size: 16px;
    height: 42px;
    overflow: hidden;
}
/* "12:34 of 1:16:20", or just the length before they have started. Quiet, because
   it is reference rather than a call to action -- but present, because a percentage
   of an unknown quantity tells a learner nothing and these run to eighty minutes.
   Empty when no one has played the video yet and its length is therefore unknown,
   so it collapses rather than reserving a blank line. */
.course-home-item-time {
    font-size: 12px;
    color: #98a1ad;
}
.course-home-item-time:empty {
    display: none;
}
/* "Continue: <title>" above the grid. Given room of its own rather than tucked in
   beside the Videos heading, because on a course of eight eighty-minute recordings
   it is the only control most returning learners want. */
.course-continue {
    margin: 0 0 18px;
    max-width: 100%;
    white-space: normal;
    text-align: left;
}
.course-home-item-title a {
    color: #ffffff;
}
.course-home-item-title a:hover {
    opacity: 0.5;
}
.course-row {}
.course-col {
    margin-bottom: 30px;
    padding: 15px;
    background: #3a3a3a;
}
.course-home-item-media {
    position: relative;
    height: 125px;
    overflow: hidden;
    margin-bottom: 10px;
}
.course-home-item-price {
    color: #18bf18;
}
/* ---------------------------------------------------------------------------
   THE HERO ON A SINGLE-ITEM PAGE: a picture that is also the play button.

   The video used to be drawn inline here with the browser's own controls, in
   a half-width column. This is the same preview, opened in the shared player
   at full width when the picture is pressed.

   The descendant selector is not decoration: .video-play-icon below places
   every trigger absolutely at the bottom of a card thumbnail, and this has to
   beat it. Two classes against one does that.
   --------------------------------------------------------------------------- */
.media-play {
    position: relative;
    display: block;
    cursor: pointer;
}
.media-play > img {
    display: block;
    width: 100%;
    height: auto;
}
/* The base rule parks the icon at the bottom of a card thumbnail, 46x36 and
   blue. A hero is not a thumbnail: dead centre, bigger, and on a disc so it
   reads against a bright photograph as well as a dark one. */
.media-play .video-play-icon {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    /* The glyph carries its own ring, so the disc behind it is only there to
       hold contrast -- hence no border of its own. */
    color: #ffffff;
    background: rgba(6, 10, 14, 0.5);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    border-radius: 50%;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    transition: background-color 0.16s, transform 0.16s;
}
.media-play:hover .video-play-icon {
    background: #2563eb;
    transform: translate(-50%, -50%) scale(1.06);
}

/* THE ICON TRIGGER. It was i.video-play, element-scoped so that the Rewatch
   and Continue row buttons -- which also carry class="video-play", because
   that is what the JavaScript binds to -- were not dragged into position over
   a thumbnail they do not have.

   The triggers are <button>s now, so the element selector no longer tells the
   two apart and a class does: only the icon ones get video-play-icon. Which
   also means undoing a button's own chrome, below. */
.video-play-icon {
    display: inline-block;
    position: absolute;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1;
    width: 46px;
    height: 36px;
    bottom: 5px;
    left: calc(50% - 23px);
    cursor: pointer;
    color: #3078db;
    font-size: 36px;
    text-shadow: 1px 1px 2px black;
}
.course-row:nth-child(even) .course-col {
    background: #1d1d1d;
}
.course-col .course-title {
    color: #3078db;
    font-size: 20px;
    margin-bottom: 5px;
}
.course-col .course-title span {
    color: #18bf18;
    margin-left: 15px;
}
.course-col .course-date {
    margin-bottom: 15px;
    font-size: 13px;
}
.course-col .course-description {
    margin-bottom: 15px;
}
.course-col .course-button {}
.course-col .label {
    position: absolute;
    top: -20px;
    right: -5px;
    padding: 3px 5px;
    background: #3078db;
}
.course-details {
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;
}
.course-details.course-subscriptions {
    margin-bottom: 30px;
}
.course-details span {
    display: inline-block;
    min-width: 120px;
    color: #3078db;
    font-weight: 700;
}
.btn-subscribe {
    padding: 8px 12px 6px;
    font-size: 16px;
    font-weight: bold;
}
.btn-subscribe.btn-subscribe-final {
    margin: 60px 0 30px;
}
.course-description {}
.single-course-header {
    margin: 20px 0;
    padding-bottom: 5px;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 2px solid #3078db;
}
#subscription_modal {
    width: 100%;
    transition: height 0.35s;
}
.subscription-wrapper {
    width: 100%;
    padding: 15px 0;
    margin-bottom: 15px;
    border-top: 1px solid #ddd;
}
.subscription-wrapper:first-child {
    border-top: none;
}
.subscription-wrapper::after {
    content: "";
    display: block;
    clear: both;
}
.subscription-title {
    width: 100%;
    font-weight: bold;
    font-size: 120%;
    margin-bottom: 5px;
}
.subscription-title span {
    float: right;
}
.subscription-description {
    width: 100%;
}
.subscription-button {
    display: inline-block;
    float: right;
    margin: 5px 0 0;
}
.subscription-modal {
    border-radius: 9px;
}
.subscription-modal-title {
    background: #fff;
    border: none;
    border-bottom: 1px solid #ddd;
}
.subscription-modal-title .ui-dialog-title {
    font-family: "Playfair Display Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #2d2d2d;
    font-size: 19px;
    text-decoration: underline;
}
.subscription-modal-title button {
    border: none !important;
    outline: none !important;
    background: none !important;
    color: #cc0000 !important;
    font-size: 22px !important;
    margin: -18px 0 0 0 !important;
}
.subscription-modal-title button:hover {
    opacity: 0.75;
}
.subscription-modal-title button:before {
    content: "\f00d";
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.subscription-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.66);
    text-align: center;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}
.subscription-loader .loader {
    opacity: 1;
}
.subscription-loader .app-loader-text {
    font-size: 20px;
    margin-top: 15px;
    font-weight: bold;
}
.purchase-details h3 {
    color: #fff!important;
}
#subscription-cancel {
    background: #ff0000;
    border: 1px solid #ff0000;
}
#subscription-cancel:hover {
    background: #ff0000;
    border: 1px solid #ff0000;
    opacity: 0.85;
}
.ui-widget-overlay {
    background: #000;
    opacity: .5;
}
.packages-wrapper {
    display: flex;
}
.packages-col-1 {
    width: fit-content;
    max-width: 75%;
}
.packages-col-2 {
    width: fit-content;
    text-align: right;
    align-self: end;
    margin-left: auto;
}
.packages-title {
    margin-bottom: 15px;
    font-family: "Lato Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
}
.packages-title span {
    display: inline-block;
    border: 3px solid #17addc;
    padding: 5px 10px;
    border-radius: 25px;
}
.packages-description {
    margin-bottom: 15px;
    font-family: "Lato Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.packages-price {
    display: flex;
    font-family: "League Spartan Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.packages-btn {
    width: 100%;
    margin-top: 15px;
}
.packages-btn button,
.packages-btn button:focus {
    width: 100%;
    background-color: #2dc26b;
    border: 2px solid #2d2d2d;
    color: #1c1c1c;
    border-radius: 25px;
    transition: all .35s;
}
.packages-btn button:hover {
    background-color: #3ad47a;
    border: 2px solid #17addc;
    color: #1c1c1c;
    border-radius: 25px;
    transition: all .25s;
}
ul.related-products {
    padding: 15px;
}
ul.related-products li {
    padding-bottom: 10px;
    color: #17addc;
}
ul.related-products li span {
    color: #2d2d2d;
}
.btn-see-more {
    font-family: "Lato Bold", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
}
.btn-see-more:hover {
    opacity: 0.75;
}
.course-col .label-progress {
    background: #efb300;
    color: #2d2d2d;
    font-size: 14px;
    padding: 5px 8px;
    top: -26px;
}
.course-col .label-progress.label-progress-user {
    top: -10px;
    right: 0px;
    z-index: 2;
}
.course-home-item-rating {
    color: #efb300;
    background: #1a1a1a;
    display: inline-block;
    padding: 1px 3px 0;
    position: absolute;
    top: 4px;
    left: 20px;
    font-size: 11px;
    z-index: 1;
}
.course-home-item-rating i {
    color: #efb300;
}
.course-home-item-rating.course-search {
    top: -8px;
    left: 8px;
}
.label-subscribed {
    display: inline-block;
    position: absolute!important;
    top: 9px!important;
    right: 19px!important;
    background-color: #00970c!important;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.22);
    z-index: 1;
}
.label-subscribed.course-search {
    top: auto!important;
    right: 25px!important;
    bottom: 40px;
}
.label-free {
    display: inline-block;
    position: absolute!important;
    top: 9px!important;
    left: 19px!important;
    right: auto ! IMPORTANT;
    background-color: #00970c!important;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.33);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.22);
    z-index: 1;
}
.course-reviews-wrapper {
    width: 100%;
}
.course-review {
    width: 100%;
    position: relative;
    background: #242424;
    padding: 15px;
    margin-bottom: 15px;
}
.course-review-header {
    padding-bottom: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #3a3a3a;
}
.course-review-header h4 {
    display: inline-block;
    margin: 0;
    color: #3078db;
    font-size: 16px;
}
.course-review-rating {
    display: inline-block;
    float: right;
    color: #efb300;
}
.course-review-rating i {
    color: #efb300;
}
.course-review-content {
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.course-review-date {
    text-align: right;
}
.course-overall-review-rating {
    display: inline-block;
    color: #efb300;
}
.course-overall-review-rating i {
    color: #efb300;
}
.course-review-count {
    display: inline-block;
    font-size: 12px;
}
.course-review-form-toggle {
    display: inline-block;
    margin-bottom: 15px;
    color: #2f9f2f;
    font-weight: bold;
    cursor: pointer;
}
.course-review-form-toggle:hover {
    opacity: 0.85;
}
.course-review-form-toggle i {
    color: #2f9f2f;
    font-weight: bold;
}
#save-course-review {
    margin: 0 0 15px;
    max-width: 600px;
}
#save-course-review select {
    width: 100%;
}
#save-course-review textarea {
    width: 100%;
    min-height: 140px;
}
.paypal-form {
    display: inline-block;
    position: relative;
}
.paypal-btn {
    background-color: #2dc26b;
    border: none;
    color: #1c1c1c;
    padding: 6px 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height: 1.5;
    border-radius: 3px;
}
.paypal-btn:hover {
    background: #3ad47a;
    border: none;
}
/* THE PAGE BEHIND DOES NOT MOVE WHILE A PLAYER IS OPEN.

   The overlay covered the viewport but never stopped the scroll: measured on a
   phone, a 1181px document in a 736px viewport, and dragging on the scrim
   scrolled the course screen along behind the video.

   position:fixed rather than overflow:hidden, because overflow:hidden on the body
   is the tidier trick and the one iOS Safari has never honoured -- touch scrolling
   carries on regardless. Taking the body out of flow stops it there and everywhere
   else too.

   The top offset is written inline by lockPageScroll() in myCourse.js, not here:
   it is however far the reader had already scrolled, negated, so the page does not
   jump to the top as it is pinned. That function also hands the scroll back when
   the player closes. */
body.video-scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

.video-play-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    /* Belt and braces with the body lock above: stops a scroll gesture that
       starts on the scrim from chaining to anything behind it. */
    overscroll-behavior: contain;
}
.video-play-wrapper {
    position: fixed;
    top: 3%;
    left: 15%;
    z-index: 9999;
    width: 70%;
    height: auto;
    padding: 30px;
    /* OPAQUE, NOT 0.9. The page shows through ten per cent of this, which was
       invisible while the only thing under the video was a thin strip, and is
       not now: measured on a 375px phone the control block is 134px tall and
       the video list behind it was legible through the buttons -- a course
       title and a Continue button ghosting across the player chrome.
       The scrim behind is what dims the page; this should not be doing it too. */
    background: #000000;
    transition: top 0.25s;
}
/* INSIDE THE PICTURE, NOT HANGING OFF THE BOX. The old rule put a 36px red
   cross at right:-22px, top:-15px -- in the gap between the player and the
   scrim, belonging to neither, and on a phone above the player entirely.

   It sits over the top-right corner of the video now, on its own disc so it
   reads against a bright frame as well as a dark one, at the same 40px every
   other control here is. Red is kept for the hover: a permanently red control
   in the corner of a black player reads as a warning rather than a way out,
   and this one is neither destructive nor the only way (Escape still works).

   The offsets are the wrapper's padding plus 10px, so it lands just inside
   the picture rather than on the frame around it. */
.video-play-close {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    color: #ffffff;
    background: rgba(6, 10, 14, 0.62);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}
.video-play-close:hover,
.video-play-close:focus {
    background: #ed5565;
    border-color: #ed5565;
    color: #ffffff;
}
/* THE PLAYER HAS TO FIT THE SCREEN, and it did not.

   The wrapper is 70% of the viewport WIDTH with height:auto, so the video's height
   follows from its aspect ratio and the box can end up taller than the window. That
   was survivable while the only thing under the video was nothing. It stopped being
   survivable the moment a control row went there: measured on a 1920x897 viewport,
   the row sat at y=908 -- eleven pixels below the fold, in a position:fixed overlay
   that does not scroll. The skip buttons existed and could not be reached.

   So the wrapper is a column that never exceeds the viewport, and the video takes
   what is left after the padding and the controls rather than the other way round.
   object-fit keeps the picture undistorted when that cap is what binds. */
.video-play-wrapper {
    display: flex;
    flex-direction: column;
    max-height: 94vh;
}
.video-play-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    /* 60px of wrapper padding and a little air, for a player with no control
       bar of its own -- courseViews.js and marketplaceViews.js build one out
       of these same class names and leave the browser's controls on. */
    max-height: calc(94vh - 80px);
}
/* AND THE REST OF THE ROOM ONLY WHERE THERE IS A BAR TO PUT IN IT. The block
   is two rows, seek above the buttons. Asking :has() rather than tagging the
   wrapper with a class keeps the two players from having to know about each
   other. */
.video-play-wrapper:has(.video-controls) video {
    max-height: calc(94vh - 170px);
}

/* ---------------------------------------------------------------------------
   Playback speed.

   Drawn rather than left to the browser because the browsers that offer it put it
   in the context menu -- and every video here carries oncontextmenu="return false".
   So for most people the control did not exist.

   Sits under the video rather than over it: this is a plain <video> with native
   controls, and anything floated on top would land on whatever the browser happens
   to draw at the bottom of its own bar, which differs per platform. Under it is the
   one place that is the same everywhere.
   --------------------------------------------------------------------------- */
/* The control row: skip buttons on the left, speed on the right.

   The skip buttons are here because the keyboard shortcuts reach a laptop and
   nothing else. A phone has no arrow keys, and these videos run to seventy and
   eighty minutes, where going back ten seconds is the most-used control there is.
   They are sized for a thumb rather than a cursor -- 40px, which is the smallest
   a touch target should be. */
/* TWO ROWS, BECAUSE THE SEEK BAR NEEDS THE WHOLE WIDTH. Sharing a line with
   the buttons left it about 120px long on a phone -- an eighty minute video at
   two pixels a minute, where nobody can land on anything.

   Transport on the left, decisions on the right. Play, skip and volume are
   what a hand reaches for mid-video and they keep their positions at every
   width; speed, notes, picture-in-picture and fullscreen are set once and are
   the things allowed to wrap away underneath. */
.video-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 2px 0;
}
.video-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
}
.video-transport,
.video-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.video-scrub {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* tabular-nums so the clock does not shuffle its own width every second, and
   a min-width so 9:59 becoming 10:00 does not move the bar either. */
.video-time {
    flex: 0 0 auto;
    min-width: 54px;
    color: #98a1ad;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
/* A BUTTON, so it needs its button-ness taken off again. font-family does not
   inherit into a control; font-size does not either, and .video-time's 12px is
   the same specificity as this rule, so it is restated rather than relied on. */
.video-time-end {
    -webkit-appearance: none;
            appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: #98a1ad;
    text-align: right;
    cursor: pointer;
}
.video-time-end:hover,
.video-time-end:focus {
    color: #e9edf2;
}

/* ---------------------------------------------------------------------------
   THE STAGE: the picture, and the four things drawn over it.

   A box of its own rather than hanging these off the wrapper, because the
   wrapper also holds the control bar -- so its centre sits about 43px below
   the centre of the picture. Near enough for the resume card, which only has
   to be somewhere sensible. Not near enough for a spinner or a play button,
   which are read as either dead centre or wrong.

   min-height:0 is what lets it shrink. A flex item's floor is its content by
   default, and without this a tall video stops the column obeying its own
   max-height and pushes the control bar off the bottom of the screen -- which
   is the exact bug the 94vh rules above were written to fix.
   --------------------------------------------------------------------------- */
/* Focused programmatically when the player opens, so that the keyboard
   shortcuts work -- a ring around the whole player would be noise, and the
   controls inside keep their own. */
.video-play-wrapper:focus {
    outline: none;
}

.video-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
}

/* THE BUFFERING INDICATOR the browser used to draw for us. Without one, a
   stall on a slow line looks exactly like a player that has crashed. */
.video-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}
.video-spinner[hidden] {
    display: none;
}
.video-spinner span {
    display: block;
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: video-spin 0.8s linear infinite;
}
@keyframes video-spin {
    to { transform: rotate(360deg); }
}
/* A loading indicator still has to indicate under reduced motion, so it
   breathes instead of spinning rather than stopping altogether. */
@media (prefers-reduced-motion: reduce) {
    .video-spinner span {
        animation: video-breathe 1.4s ease-in-out infinite;
        border-top-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.28);
    }
}
@keyframes video-breathe {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* THE PLAY BUTTON ON THE PICTURE, also lost when the controls attribute
   went: a paused video with a poster had no play affordance in the picture
   itself, only the small one down in the bar. */
.video-big-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    /* The triangle is off-centre in its own glyph; 5px puts it on the axis. */
    padding-left: 5px;
    font-size: 26px;
    color: #ffffff;
    background: rgba(6, 10, 14, 0.62);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.16s, border-color 0.16s, transform 0.16s;
}
.video-big-play:hover {
    background: #2563eb;
    border-color: #2563eb;
    transform: translate(-50%, -50%) scale(1.06);
}
.video-big-play[hidden] {
    display: none;
}
/* A resume or next-up card owns the middle while it is asking its question.
   :has() lets CSS settle that on its own, rather than the card code and the
   player code having to keep each other informed. */
.video-play-wrapper:has(.video-card) .video-big-play {
    display: none;
}

/* WHAT A DOUBLE TAP DID. Without this the video simply jumps and it reads as a
   glitch rather than as something you caused. */
.video-tap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 15px;
    color: #ffffff;
    background: rgba(6, 10, 14, 0.7);
    border-radius: 999px;
    pointer-events: none;
}
.video-tap[hidden] {
    display: none;
}
.video-tap-back { left: 8%; }
.video-tap-fwd  { right: 8%; }

/* THE TIME UNDER THE CURSOR. The half of a scrub preview that needs no sprite
   sheet and no change to how anything is uploaded. */
.video-peek {
    position: absolute;
    bottom: calc(100% - 4px);
    transform: translateX(-50%);
    z-index: 3;
    padding: 3px 7px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #e9edf2;
    background: rgba(6, 10, 14, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
}
.video-peek[hidden] {
    display: none;
}

/* THE SHORTCUTS, WRITTEN DOWN. Six keys worked and nothing said so. */
.video-keys {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 10, 14, 0.82);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.video-keys[hidden] {
    display: none;
}
.video-keys-in {
    max-width: 420px;
    width: 100%;
}
.video-keys h4 {
    margin: 0 0 14px;
    font-size: 15px;
    color: #ffffff;
}
.video-keys dl {
    display: grid;
    /* The keys column takes what it needs and the descriptions share the rest,
       so the two columns line up down the list instead of per row. */
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin: 0;
}
.video-keys dt,
.video-keys dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}
.video-keys dd {
    color: #98a1ad;
}
.video-keys kbd {
    display: inline-block;
    min-width: 22px;
    padding: 2px 6px;
    font: inherit;
    font-size: 12px;
    text-align: center;
    color: #e9edf2;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 5px;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   The two sliders.

   REAL <input type="range"> ELEMENTS, painted rather than rebuilt. A seek bar
   made of divs has to reimplement arrow keys, Home and End, the drag, the
   focus ring and the screen-reader announcement, and usually gets two of them
   wrong. The played and buffered portions come in as --played and --buffered,
   set from JS, and the track is a gradient reading those.

   Firefox draws the played part itself with ::-moz-range-progress, so it only
   misses the buffered shading. The webkit and moz pseudo-elements are in
   SEPARATE rules on purpose: one unknown pseudo-element in a selector list
   invalidates the whole rule, so combining them would style neither.
   --------------------------------------------------------------------------- */
.video-range {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    /* A 4px line with a 28px strip of tolerance around it, because the line is
       what you see and the strip is what a thumb actually hits. */
    height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.video-range:disabled {
    cursor: default;
    opacity: 0.45;
}
/* .video-controls IN FRONT OF BOTH, WHICH IS NOT DECORATION. main.php carries
   input[type="range"] { width: 100% } -- an element plus an attribute, which
   outranks a single class. Measured: the one-class version of these rules lost
   and the volume slider rendered 177px wide instead of 92px.

   The scrub bar takes width:auto for the same reason. It was coming out the
   right size, but by having width:100% shrunk back down by flex rather than by
   the rule meant to size it. */
.video-controls .video-scrub-range {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.video-controls .video-volume-range {
    flex: 0 0 auto;
    width: 92px;
}
.video-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 3px;
    background:
        linear-gradient(#2563eb, #2563eb) 0 0 / var(--played, 0%) 100% no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) 0 0 / var(--buffered, 0%) 100% no-repeat,
        rgba(255, 255, 255, 0.16);
}
.video-range::-moz-range-track {
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.16);
}
.video-range::-moz-range-progress {
    height: 4px;
    border-radius: 3px;
    background: #2563eb;
}
.video-range::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 14px;
    height: 14px;
    /* Half the thumb minus half the track, or it rides above the line. */
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.video-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.video-range:focus {
    outline: none;
}
.video-range:focus-visible {
    outline: 2px solid #5b93ff;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   The icon buttons: play, mute, speed and fullscreen.

   40px minimum, which is the smallest a touch target should be, and the same
   40px the skip buttons already use. Play is the one filled control in the bar
   because it is the one thing being looked for.
   --------------------------------------------------------------------------- */
.video-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: #e9edf2;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}
.video-icon-btn:hover,
.video-icon-btn:focus {
    background: rgba(37, 99, 235, 0.22);
    border-color: rgba(91, 147, 255, 0.85);
    color: #ffffff;
}
.video-play-btn {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
.video-play-btn:hover,
.video-play-btn:focus {
    background: #1d4fd7;
    border-color: #1d4fd7;
    color: #ffffff;
}
.video-volume {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------------------------------------------------------------------------
   Captions.

   The button is drawn for every video and removed by JS when the video turns
   out to have no track -- controlBarHtml runs before there is a video element
   to ask. is-absent covers the gap between those two moments, so the button
   never flashes into the bar and back out of it.

   Two classes on purpose: .video-icon-btn sets display:inline-flex with one
   class, and one class does not beat one class.
   --------------------------------------------------------------------------- */
.video-cc-btn.is-absent {
    display: none;
}
.video-cc-btn.is-current {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* THE CUES THEMSELVES. The browser's default is white on a hard black box at
   a size it picks from the video's height, which on a 200px phone player comes
   out either illegible or enormous. This is the same dark panel the rest of
   the player uses, at a size that holds.

   ::cue takes very few properties -- colour, background, font, opacity and a
   couple more -- and silently ignores the rest, so there is no point reaching
   for padding or border here. */
.video-play-wrapper video::cue {
    background: rgba(6, 10, 14, 0.78);
    color: #ffffff;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.4;
}
.video-seek {
    display: flex;
    align-items: center;
    gap: 8px;
}
.video-seek-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: #e9edf2;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}
.video-seek-btn:hover,
.video-seek-btn:focus {
    background: rgba(37, 99, 235, 0.22);
    border-color: rgba(91, 147, 255, 0.85);
    color: #ffffff;
}
.video-seek-btn i {
    font-size: 14px;
}
/* SIX BUTTONS BECOME ONE. The rates sat in the bar permanently and took more
   width than play, both skips and volume together, for a control most people
   set once if ever. The button shows the rate that is on -- which is the only
   speed information worth standing there -- and holds the rest until asked.

   The menu opens UPWARD because the bar is at the bottom of the player, and it
   is anchored right so it cannot push the player's own width. */
.video-speed {
    position: relative;
    display: flex;
    align-items: center;
}
.video-speed-toggle {
    min-width: 54px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.video-speed-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 88px;
    padding: 6px;
    background: rgba(6, 10, 14, 0.95);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
/* Two classes, so it beats the display:flex above. The one-class version of
   this rule loses the cascade and the menu is permanently open. */
.video-speed-menu[hidden] {
    display: none;
}
/* Picture in picture. Same 40px target as the skip buttons, and disabled until the
   video has metadata -- it genuinely cannot be popped out before then, so the
   button says so rather than throwing when pressed. */
.video-pip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: #e9edf2;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.16s, border-color 0.16s, color 0.16s, opacity 0.16s;
}
.video-pip-btn:hover:not(:disabled),
.video-pip-btn:focus:not(:disabled) {
    background: rgba(37, 99, 235, 0.22);
    border-color: rgba(91, 147, 255, 0.85);
    color: #ffffff;
}
.video-pip-btn.is-current {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
.video-pip-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.video-speed-btn {
    width: 100%;
    min-height: 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #e9edf2;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 12px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}
.video-speed-btn:hover,
.video-speed-btn:focus {
    background: rgba(37, 99, 235, 0.22);
    border-color: rgba(91, 147, 255, 0.85);
    color: #ffffff;
}
.video-speed-btn.is-current {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}


/* ---------------------------------------------------------------------------
   THE STAND-IN FULLSCREEN, for when the real one is not granted.

   Measured on dev: requestFullscreen() returns a promise that never settles --
   still pending five seconds later, document.fullscreenElement null, and
   document.fullscreenEnabled reporting true throughout. Some embedders leave
   the request hanging rather than refusing it, and a player whose fullscreen
   button does nothing at all is worse than one that only fills the window.

   Two classes, so it beats both the base rule and the phone rule -- the latter
   sets a translateY that would otherwise hold this half off the screen, and a
   media query adds no specificity to argue with.

   The close cross STAYS here, unlike in real fullscreen: there is no browser
   chrome hiding, so nothing has been taken away that needs giving back, and
   the way out should be where it always is.
   --------------------------------------------------------------------------- */
.video-play-wrapper.is-faux-full {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0 16px 8px;
    transform: none;
    background: #000000;
    justify-content: center;
}
.video-play-wrapper.is-faux-full video {
    max-height: calc(100vh - 170px);
}

/* ---------------------------------------------------------------------------
   Fullscreen.

   THE WRAPPER GOES FULLSCREEN, NOT THE VIDEO, since the controls are ours and
   sit beside the video rather than inside it -- see toggleFullscreen in
   myCourse.js. So the wrapper has to stop being a 70%-wide fixed box for the
   duration, including the phone rule's translateY, which would otherwise hold
   the whole thing half off the screen.

   :fullscreen and :-webkit-full-screen are separate rules deliberately. One
   unrecognised pseudo-class invalidates an entire selector list, so a browser
   that knows only one of the two would apply neither.

   These beat the phone rules on specificity rather than on order -- a media
   query adds none, so being later in the file would not have been enough.
   --------------------------------------------------------------------------- */
.video-play-wrapper:fullscreen {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0 16px 8px;
    transform: none;
    background: #000000;
    justify-content: center;
}
.video-play-wrapper:-webkit-full-screen {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0 16px 8px;
    transform: none;
    background: #000000;
    justify-content: center;
}
.video-play-wrapper:fullscreen video {
    max-height: calc(100vh - 120px);
}
.video-play-wrapper:-webkit-full-screen video {
    max-height: calc(100vh - 120px);
}
/* The way out of fullscreen is the fullscreen button and Escape, both of which
   are still there; a close cross that dropped the player entirely from a full
   screen is a bigger step than anybody means at that moment. */
.video-play-wrapper:fullscreen .video-play-close {
    display: none;
}
.video-play-wrapper:-webkit-full-screen .video-play-close {
    display: none;
}

/* ---------------------------------------------------------------------------
   The two cards that appear over the video, sharing one look.

   Both are the same thing at different moments: the player is not playing, and
   there are exactly two sensible things to do next, so it asks rather than guessing.

   RESUME, at the start. The video is loaded and paused part-way through: carry on,
   or start again.
   NEXT UP, at the end. The video has finished: play the next one, or stop there.

   Neither auto-advances. These are seventy and eighty minute recordings, and
   something that starts itself at either end of one is a surprise at the exact
   moment a learner has decided what they want. Both remove themselves on either
   answer and neither comes back for that view.
   --------------------------------------------------------------------------- */
.video-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: calc(100% - 40px);
    padding: 14px 18px;
    background: rgba(6, 10, 14, 0.82);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.video-card-text {
    color: #e9edf2;
    font-size: 14px;
}
.video-resume-go,
.video-resume-restart,
.video-next-go,
.video-next-stay {
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}
.video-resume-go,
.video-next-go {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
.video-resume-go:hover,
.video-resume-go:focus,
.video-next-go:hover,
.video-next-go:focus {
    background: #1d4fd7;
    border-color: #1d4fd7;
}
.video-resume-restart,
.video-next-stay {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: #c3ccd8;
}
.video-resume-restart:hover,
.video-resume-restart:focus,
.video-next-stay:hover,
.video-next-stay:focus {
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   The player on a phone.

   This wrapper had no responsive rules at all: left 15%, width 70%, padding 30px,
   at every size. On a 390px screen that is about 213px of actual video, and the
   only thing hiding it was iOS, which refused to play inline and took the video
   fullscreen in its own player instead.

   The videos now carry `playsinline`, so that rescue is gone and this is no longer
   optional -- adding the attribute without these rules would trade a fullscreen
   video for a postage stamp. Near-edge-to-edge instead, with the padding down to
   something that is a border rather than a margin, and the close cross brought
   inside the box because at -22px it was hanging off the side of the screen.

   Anyone who still wants true fullscreen has the control in the player: `controls`
   includes it, on every platform.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* The transport row gets the width and the tools wrap underneath it, rather
       than the two fighting over one line. Play, skip and volume are the reason
       this bar exists on a phone -- speed and the rest can queue.

       justify-content rather than a width on .video-seek: the skip buttons share
       their row with play and volume now, so stretching them to 100% would push
       those onto a line of their own. */
    .video-row {
        justify-content: flex-start;
    }
    .video-transport {
        width: 100%;
        justify-content: space-between;
    }
    .video-tools {
        width: 100%;
    }
    .video-seek-btn {
        justify-content: center;
    }
    /* The hardware buttons do this on a phone, and on iOS the slider is removed
       outright, so the 92px is better spent on the row.

       Scoped like the desktop rule: a media query adds no specificity of its
       own, so the bare class would have lost to main.php here too. */
    .video-controls .video-volume-range {
        width: 64px;
    }
    .video-time {
        min-width: 46px;
    }
    /* The picture is around 200px tall here, so a 74px button is most of it. */
    .video-big-play {
        width: 58px;
        height: 58px;
        font-size: 20px;
    }
    .video-tap {
        padding: 8px 12px;
        font-size: 13px;
    }
    .video-tap-back { left: 5%; }
    .video-tap-fwd  { right: 5%; }
    .video-play-wrapper {
        top: 50%;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
        padding: 8px;
    }
    /* Less padding here, and the tools row wraps under the transport row, so the
       space the video must leave for the controls is different from the desktop
       figure. Conditional for the same reason as the desktop rule. */
    .video-play-wrapper video {
        max-height: calc(94vh - 30px);
    }
    .video-play-wrapper:has(.video-controls) video {
        max-height: calc(94vh - 196px);
    }
    /* 8px of wrapper padding plus the same 10px inset as the desktop rule. */
    .video-play-close {
        top: 18px;
        right: 18px;
    }
}
.course-row-margin {
    margin-right: 15px;
    margin-left: 15px;
}

/* Schools */
h3.school-title {
    color: #3078db;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #3078db;
    font-size: 24px;
}
p.school-description {}
.school-switcher-wrapper {
    margin: 20px 0;
    text-align: center;
}
.school-switcher-wrapper button {
    margin-top: 5px;
    padding: 8px 24px !important;
    background-color: #34c858 !important;
}
.school-switcher-wrapper button.btn-show-courses {
    margin-right: 15px;
}
.school-switcher-wrapper button.active {
    background-color: rgb(97, 97, 97) !important;
    border: 1px solid transparent;
}


.add-button-wrapper {
    position: relative;
}
.add-button-wrapper img {
    display: none;
    width: 160px;
    position: absolute;
    left: 160px;
    top: -24px;
	transform: scale(1);
	animation: arrow-pulse 0.66s infinite;
}
@keyframes arrow-pulse {
	0% {
		transform: scale(0.95);
	}
	70% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(0.95);
	}
}
.add-button-wrapper,
.inline-help-wrapper {
    display: flex;
}
.add-course,
.add-course-group,
.add-subscription,
.btn-assets-upload {
    background-color: #00bfff;
    border-color: #00bfff;
}
.add-course:hover,
.add-course-group:hover,
.add-subscription:hover,
.btn-assets-upload:hover {
    background-color: #00bfff;
    border-color: #00bfff;
    opacity: 0.85;
}
.inline-help {
    display: inline-block;
    background: #28a72c;
    cursor: pointer;
    padding: 8px;
    margin-left: 3px;
    border-radius: 5px;
    height: 34px;
}
.inline-help-mini {
    font-size: 10px;
    padding: 3px 2px;
    margin-left: 5px;
    height: 18px;
    color: #fff;
}
.copy-link {
    cursor: copy;
}
.fa-copy {
    color: #e79b4c;
}
#inline-slider-close {
    background-color: #3d3d3d;
    border-color: #00b800;
    color: #FFFFFF;
}
#inline-slider-close:hover {
    background-color: #00b800;
}
#dialog-close {
    display: none;
}
.update-payment-details-wrapper {
    text-align: right;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: end;
}
.update-payment-details-wrapper p {
    color: #ffde00;
}
.update-payment-details-wrapper button {
    
}
.update-payment-details-wrapper button:hover {
    
}
#card-wrapper {
    display: none;
    position: fixed;
    width: 94%;
    max-height: 80%;
    top: 5%;
    left: 3%;
    z-index: 99999;
    padding: 15px;
    overflow-y: auto;
    background: #000000;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.66);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.66);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.66);
    border: 2px solid #e65555;
}
.btn-card {
    margin-top: 30px;
}
.powered-by-stripe svg {
    max-width: 160px;
    margin-top: 0;
}
@media screen and (min-width: 415px) {
	#card-wrapper {
        width: 50%;
        top: 10%;
        left: 25%;
    }
}
@media screen and (min-width: 1024px) {
	#card-wrapper {
        width: 33%;
        top: 40%;
        left: 33%;
        padding: 30px;
    }
}

@media (max-width: 479px) {
    .splide-categories li a {
        font-size: 14px;
    }
    .school-switcher-wrapper button.btn-show-courses {
        margin-right: 0;
    }
}
/* ---------------------------------------------------------------------------
   Video engagement: where people stop.

   Ten blocks, one per tenth of the video, each as tall as its share of the
   BIGGEST block rather than of the total. The question a creator is asking is
   which tenth loses the most people, and against the total a video watched evenly
   by forty people would draw ten blocks too short to compare with each other.
   The absolute count sits under every block for anyone who wants the real number.

   No JavaScript. The figures are rendered by PHP and the only interaction is the
   title attribute, which is the same choice the dashboard chart made -- a reading
   surface does not need a runtime.
   --------------------------------------------------------------------------- */
.engagement-intro {
    color: #c3ccd8;
    margin-bottom: 22px;
    max-width: 70ch;
}
.engagement-video {
    padding: 16px 0 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.engagement-video:first-of-type {
    border-top: 0;
}
.engagement-video-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 18px;
    margin-bottom: 12px;
}
.engagement-video-title {
    font-size: 15px;
    color: #e9edf2;
}
.engagement-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.engagement-figure {
    font-size: 13px;
    color: #98a1ad;
}
.engagement-figure strong {
    color: #5b93ff;
    font-size: 15px;
}
.engagement-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 96px;
}
.engagement-block {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px 4px 0 0;
}
.engagement-block-fill {
    background: #2563eb;
    border-radius: 4px 4px 0 0;
    /* A bucket with people in it is never invisible: a single learner out of two
       hundred still rounds to a block you can see and hover. */
    min-height: 3px;
}
.engagement-block.is-empty .engagement-block-fill {
    min-height: 0;
}
.engagement-block-count {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    text-align: center;
    font-size: 11px;
    color: #98a1ad;
}
.engagement-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6f7885;
}
.engagement-empty {
    color: #6f7885;
    font-size: 13px;
}

@media (max-width: 767px) {
    .engagement-chart {
        height: 72px;
    }
    .engagement-block-count {
        font-size: 10px;
    }
}

/* ---------------------------------------------------------------------------
   Timestamped notes.

   The panel is a .video-card like resume and next-up, but a column rather than a
   row and wide enough to write in, so it overrides the shared layout rather than
   fighting it. Capped in height and scrollable: a learner with thirty notes on an
   eighty-minute recording should not push the panel off the screen.
   --------------------------------------------------------------------------- */
.video-notes-btn {
    min-height: 40px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: #e9edf2;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}
.video-notes-btn:hover,
.video-notes-btn:focus {
    background: rgba(37, 99, 235, 0.22);
    border-color: rgba(91, 147, 255, 0.85);
    color: #ffffff;
}
.video-card.video-notes {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    width: min(520px, calc(100% - 40px));
    max-height: calc(100% - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
}
.video-notes-head {
    color: #98a1ad;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.video-note-input {
    width: 100%;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #e9edf2;
    font-size: 14px;
    resize: vertical;
}
.video-note-input:focus {
    outline: none;
    border-color: rgba(91, 147, 255, 0.85);
}
.video-note-save {
    align-self: flex-start;
    background: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 8px;
    padding: 6px 14px;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
}
.video-note-save:hover,
.video-note-save:focus {
    background: #1d4fd7;
    border-color: #1d4fd7;
}
.video-note-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.video-note {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.video-note-jump {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 0;
    color: #5b93ff;
    font-size: 13px;
    cursor: pointer;
}
.video-note-jump:hover {
    text-decoration: underline;
}
.video-note-text {
    flex: 1 1 auto;
    color: #e9edf2;
    font-size: 13px;
    /* A note is the learner's own prose and may be long or unbroken. */
    word-break: break-word;
}
.video-note-del {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 0 2px;
    color: #6f7885;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.video-note-del:hover {
    color: #ff6b6b;
}
.video-note-none,
.video-notes-hint {
    color: #6f7885;
    font-size: 12px;
    padding: 8px 0 0;
}


/* =========================================================================
   THE LEARNER'S COURSE SCREEN  (.mc-*)
   Added 2026-09-15 alongside the rebuild of returnMyCourseById().
   Dark, and two columns below the header -- see the two notes below.

   BRAND COLOURS THROUGH var(), ALWAYS WITH A FALLBACK. This file is linked
   by AjaxStylesJS::returnStyles() as a plain <link href>, so the browser
   fetches it off disk and no [$TOKEN] substitution ever runs over it -- which
   is why the rest of the file is full of hardcoded #2563eb. brand.css exists
   to bridge exactly that, and the fallback is not politeness: an account with
   no settings record emits `--lhq-brand: ;`, an empty-but-valid custom
   property, and a bare var() on one of those invalidates the whole
   declaration at computed-value time. The colour would not fall back, it
   would vanish.
   ========================================================================= */

/* Both my-offers screens share one palette. The listing leads straight to the
   course screen, and they were two different greys one click apart -- 58,58,58
   against 42,42,42 -- because each had grown its own. One declaration, two
   roots, and they cannot drift again. */
.mc,
.mc-index {
    /* THE PALETTE, from Planning/steps/myCourseScreenProposed.html.

       Scoped to .mc rather than :root on purpose. These are this screen's
       surface colours, not the account's -- the only account colour here is
       --lhq-brand, which brand.css publishes globally and which this must not
       shadow. Putting them on :root would make every other Courses screen
       inherit a palette none of them has been designed against. */
    --mc-panel: #2a2a2a;
    --mc-panel-2: #323232;
    --mc-line: rgba(255,255,255,.09);
    --mc-text: #e9edf2;
    --mc-muted: #98a1ad;
    --mc-dim: #6f7885;
    --mc-done: #2dc26b;

    /* 1560px of CONTENT inside a 30px gutter each side.

       The gutter is not decoration, it is putting the page back where it
       belongs. #courses-content carries `margin: 0 -30px` -- a deliberate
       full-bleed so the splide carousels on the other Courses screens can run
       edge to edge -- and the old markup here cancelled it by accident, being
       wrapped in Bootstrap's .row/.col-md-12 and their padding. Measured
       without this, .mc sat at x = -5 on a 1920 viewport: the section headings
       and the left edge of every row were five pixels off the screen. */
    max-width: 1680px;
    /* CENTRED, which is the other half of the width problem. Measured on a
       1920 viewport before this: .mc ran from x = -5 to x = 1585 and left 335
       pixels of nothing down the right-hand side. It was not that the page was
       too narrow -- it was 1620 wide -- it was that every spare pixel piled up
       on one edge, which reads as an unfinished layout rather than a margin.
       Auto margins split the slack and it reads as deliberate. */
    margin-left: auto;
    margin-right: auto;
    /* The bottom clears the footer. .footer is position:absolute with bottom:0,
       pinned to #page-wrapper, and .wrapper-content's 40px of bottom padding is
       consumed by the footer's own 41px height -- so it reserves the footer rather
       than leaving a gap under the content. Measured on a course: the reviews box
       ended at 913 and the footer began at 912. Every one of these screens ended
       flush; it only became obvious once the thing at the bottom had a visible
       dashed edge instead of being a line of plain text. */
    padding: 0 30px 40px;
    box-sizing: border-box;
    color: var(--mc-text);
}

/* --- the strip above the card ------------------------------------------ */

/* The strip the Back button used to live in. syncBackButton() in myCourse.js
   lifts the button out of here into the heading band, which leaves this
   element empty -- so it collapses, rather than holding open a row of
   nothing above the course card. It keeps its margin for the moment before
   the JS runs, when the button is still inside it. */
.mc-top {
    margin: 0 0 18px;
}
/* Nothing removes this in CSS: the PHP joins its output with newlines, so
   once the button has gone the element still holds two whitespace text nodes
   and :empty does not match it. syncBackButton() removes the element. */
/* Back, sitting on the title's own line just after the product name.

   Inside the <h2> rather than floated to the far edge of the band: at 1920
   the right edge is most of a metre from the words it belongs to, and the
   button reads as part of the top bar rather than as part of this heading.
   vertical-align middle rather than baseline, so a 20px button lines up with
   a 24px heading instead of hanging off its underside. */
.page-heading h2 .mc-band-back {
    margin-left: 16px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}
/* A BREADCRUMB WHOSE ONLY ITEM IS THE PAGE YOU ARE ON.

   page_header.tpl always draws <ol class="breadcrumb"> with a {$breadcrumb}
   of parent links followed by a fixed <li class="active"> holding
   {$breadcrumb_active}. Every action in this module passes the SAME string
   for page_title and breadcrumb_active -- checked, all nine of them -- so
   that active item never says anything the <h2> above it has not just said.

   For a creator the row still earns its place: $breadcrumb is a Dashboard
   link, so it reads "Dashboard > My Offers". For a learner, user_group > 3
   means $breadcrumb is empty and the whole row collapses to the heading
   printed twice.

   So the row is hidden only when it has nothing in it but the active item.
   Scoped to courses.css, which is linked on Courses screens alone -- the
   same pairing may not hold in other modules, and this does not claim it
   does. :has() is what lets a parent be hidden by what is inside it; where
   it is unsupported the rule simply does not apply and the duplicate stays,
   which is today's behaviour rather than a broken one. */
.page-heading .breadcrumb:has(> li.active:only-child) {
    display: none;
}

/* --- the course header card -------------------------------------------- */

.mc-course {
    display: flex;
    gap: 26px;
    background: var(--mc-panel);
    border: 1px solid var(--mc-line);
    border-radius: 14px;
    padding: 22px;
    margin: 0 0 30px;
}

/* A fixed-ratio panel rather than an <img>, so a course image of any shape
   fills it without letterboxing and without distorting. 16:9 because that is
   what a video still is, and the image usually IS one. */
.mc-art {
    flex: 0 0 340px;
    align-self: flex-start;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    border-radius: 10px;
    background-color: #1f1f1f;
    background-size: cover;
    background-position: center;
    position: relative;
}
.mc-art-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 54px;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.55);
    cursor: pointer;
    opacity: .9;
}
.mc-art-play:hover {
    opacity: 1;
}

.mc-course-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* THE PRODUCT TITLE IS THE PAGE HEADING NOW, not an <h1> in this card.

   The band at the top said "My Offers" on a screen showing one specific
   product a customer had bought -- the name of the list they came from, in
   seller's language. It now carries the product's own name, written there by
   syncPageHeading() in myCourse.js, which is why this card no longer has a
   title of its own: it would be the same string twice, forty pixels apart.

   So the meta line leads the card, and loses the top margin the heading used
   to give it. */
.mc-course-body > .mc-meta:first-child {
    margin-top: 4px;
}
/* Dot-separated, and the dots are drawn between items rather than after each,
   so a course with no category or no store does not trail a stray separator. */
.mc-meta {
    font-size: 13px;
    color: var(--mc-muted);
    margin: 0 0 14px;
}
.mc-meta > span + span::before {
    content: "\00b7";
    margin: 0 8px;
    color: var(--mc-dim);
}
.mc-rating {
    display: inline-block;
}
.mc-rating .course-overall-review-rating {
    display: inline-block;
}
.mc-done-flag {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 11px;
    background: rgba(45,194,107,.14);
    color: var(--mc-done);
    font-size: 11px;
    font-weight: 600;
}
.mc-meta > span + span.mc-done-flag::before {
    /* Beats .mc-meta > span + span::before, which is a 0,2,2 selector: this one
       is 0,2,3. The pill carries its own separation and does not want a dot. */
    content: none;
}

/* --- the description, clipped ------------------------------------------ */

.mc-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #c3ccd8;
    margin: 0 0 4px;
    /* THE MEASURE. The card is now up to 1560px wide and this is the one
       thing in it that must NOT use all of that: a line of prose 1200px long
       is genuinely hard to read, because the eye loses the return sweep.
       Capped in ch, so it tracks the font rather than a guess in pixels. */
    max-width: 78ch;
}
/* -webkit-line-clamp is unprefixed nowhere, but every engine that matters
   supports the -webkit- form, and the failure mode if one does not is the
   full description showing -- which is the content, not a broken layout. */
.mc-desc.is-clipped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mc-desc p:last-child {
    margin-bottom: 0;
}
.mc-more {
    background: none;
    border: 0;
    padding: 4px 0 0;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lhq-brand, #3b82f6);
    cursor: pointer;
}
.mc-more:hover {
    text-decoration: underline;
}

/* --- progress and the continue button ---------------------------------- */

.mc-progress-row {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}
.mc-bar {
    flex: 1 1 240px;
    min-width: 0;
    max-width: 640px;
}
.mc-bar .course-progress {
    font-size: 12px;
    color: var(--mc-muted);
    margin: 0 0 6px;
}
.mc-bar .course-progress span {
    color: var(--mc-dim);
}

/* One track and fill pair, used by the course bar in the header and by every
   row in the list below. The fill is the creator's colour: this is their
   course and the learner's progress through it, which is as good a place for
   a brand colour as the platform has. */
.mc-track {
    height: 7px;
    border-radius: 99px;
    background: rgba(255,255,255,.09);
    overflow: hidden;
}
.mc-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--lhq-brand, #3b82f6);
    transition: width .3s ease;
}

.mc-continue {
    flex: 0 0 auto;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 9px;
    color: #fff;
    background: var(--lhq-brand, #3b82f6);
    border-color: var(--lhq-brand, #3b82f6);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- the two columns ----------------------------------------------------

   WHY THIS EXISTS. On a 1920 screen the single-column version left about six
   hundred pixels empty down the right, and the only way one column can fill
   that width is to stretch every row until the title and its button are a
   metre apart. So the page splits: the videos are the work and take the wide
   column, assets and reviews are reference and take a rail beside it.

   It also fixes something that was wrong regardless of width. Assets and
   reviews were stacked UNDER the video list, so on a course with ten videos
   a learner never saw either without scrolling past all of them.

   minmax(0, ...) on the wide column because a grid track's default minimum is
   min-content, and a long unbroken video title would otherwise push the
   column wider than its share and squash the rail. */

.mc-cols {
    display: grid;
    /* The rail is a CAP, not a fraction.

       A fraction would keep growing with the monitor, which is not what a
       column of file names wants -- past a point it is just a long line with
       a download icon a foot away from it. A cap stops it where it stops
       being useful and gives the rest to the videos.

       520 rather than the 380 I first guessed. An asset title is the longest
       text on this screen -- "Mese 1 - Giugno 25 - Diario di Litha -
       Solstizio D'estate" -- and at 380 those wrapped to two and three lines
       while the video rows beside them, whose titles are short, had 1210px to
       spread a single line across. The width was going to the column that
       needed it least. At 520 the videos still get around 1010, which is more
       than a title, a bar and a button have any use for.

       minmax(0, 1fr) on the videos because a grid track's default minimum is
       min-content: without it a long unbroken video title would push that
       column past its share and squeeze the rail. */
    grid-template-columns: minmax(0, 1fr) minmax(300px, 520px);
    gap: 30px;
    align-items: start;
}
.mc-main {
    min-width: 0;
}
.mc-side {
    min-width: 0;
    /* Follows the learner down a long list of videos. The offset clears the
       fixed top bar. */
    position: sticky;
    top: 20px;
}

@media (max-width: 1199px) {
    /* Below this the rail is narrower than the things in it, so the two
       columns become one. */
    .mc-cols {
        display: block;
    }
    .mc-side {
        position: static;
        margin-top: 30px;
    }
}

/* --- section headings --------------------------------------------------- */

.mc-section {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mc-muted);
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--mc-line);
}
.mc-section-count {
    color: var(--mc-dim);
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 4px;
}

/* --- the video list ----------------------------------------------------- */

.mc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Separate panels rather than rows in one bordered box: at this width a
   single tall box reads as a table, and these are things you pick from. */
.mc-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 16px;
    margin: 0 0 8px;
    border: 1px solid var(--mc-line);
    border-radius: 10px;
    background: var(--mc-panel);
}
.mc-item:hover {
    background: var(--mc-panel-2);
}

.mc-num {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--mc-line);
    background: rgba(255,255,255,.03);
    color: var(--mc-muted);
    font-size: 13px;
    line-height: 26px;
    text-align: center;
}
.mc-item.is-done .mc-num {
    color: var(--mc-done);
    border-color: rgba(45,194,107,.45);
}
.mc-item.is-current .mc-num {
    color: #fff;
    background: var(--lhq-brand, #3b82f6);
    border-color: var(--lhq-brand, #3b82f6);
}

.mc-item-main {
    flex: 1 1 auto;
    min-width: 0;
}
.mc-item-title {
    font-size: 14.5px;
    color: var(--mc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-item-sub {
    font-size: 12px;
    color: var(--mc-dim);
    margin-top: 3px;
    /* Empty until somebody has played the video and a length is known. Held
       open so a row does not change height the first time one appears. */
    min-height: 16px;
}

.mc-item-progress {
    flex: 0 0 130px;
}
/* The per-video percentage. Still carries .label-progress and
   .label-progress-<id>, because myCourse.js finds it by the latter and writes
   "N%" into it -- but NOT Bootstrap's .label any more, so these few
   declarations are what it looks like now. The old badge was a blue pill
   floated over the thumbnail at top:-20px and clipped by the card edge. */
.mc-item-pct {
    font-size: 12px;
    color: var(--mc-muted);
    text-align: right;
    margin-top: 6px;
}
.mc-item.is-done .mc-item-pct {
    color: var(--mc-done);
}
.mc-item.is-done .mc-fill {
    background: var(--mc-done);
}

.mc-action {
    flex: 0 0 auto;
    min-width: 96px;
    padding: 8px 13px;
    font-size: 13px;
    border-radius: 9px;
    border: 1px solid var(--mc-line);
    background: transparent;
    color: var(--mc-text);
    white-space: nowrap;
    cursor: pointer;
}
.mc-action:hover {
    border-color: var(--lhq-brand, #3b82f6);
    color: #fff;
}
.mc-item.is-current .mc-action {
    background: var(--lhq-brand, #3b82f6);
    border-color: var(--lhq-brand, #3b82f6);
    color: #fff;
}

/* --- assets and reviews, in the rail ------------------------------------ */

/* The downloads. A list, not a table -- see the note in
   MyCoursesComponents::returnMyCourseById for why the five columns had to
   go. The shape is the same as a video row: a marker, a stack of text that
   takes the remaining width, and one action pinned to the right. */
.mc-assets {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}
.mc-asset {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 0 0 6px;
    border: 1px solid var(--mc-line);
    border-radius: 10px;
    background: var(--mc-panel);
}
.mc-asset:hover {
    background: var(--mc-panel-2);
}

/* Fixed width so the titles beside them line up, monospace digits not being
   the issue -- "PDF" and "MP3" are three characters but "JPEG" is four. */
.mc-asset-type {
    flex: 0 0 40px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-align: center;
    padding: 3px 0;
    border-radius: 4px;
    background: rgba(255,255,255,.06);
    color: var(--mc-muted);
}

.mc-asset-main {
    flex: 1 1 auto;
    min-width: 0;
}
/* Wraps, unlike a video title. A file called "Mese 1 - Giugno 25 - Diario di
   Litha - Solstizio D'estate" truncated to one line in a 380px rail would be
   indistinguishable from the next three files. */
.mc-asset-title {
    font-size: 13px;
    line-height: 1.35;
    color: var(--mc-text);
}
.mc-asset-sub {
    font-size: 11px;
    color: var(--mc-dim);
    margin-top: 2px;
}

.mc-asset-dl {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    border: 1px solid var(--mc-line);
    border-radius: 8px;
    color: var(--mc-muted);
}
.mc-asset-dl:hover,
.mc-asset-dl:focus {
    border-color: var(--lhq-brand, #3b82f6);
    color: #fff;
    text-decoration: none;
}

/* --- your notes ---------------------------------------------------------
   Every note on this product, by video. Same panel and line as the files
   below it, so the rail reads as one column. The time is the loud part: it
   is the button, and the thing somebody scans for. */
.mc-notes {
    margin: 0 0 30px;
}
.mc-notes-none {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mc-dim);
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--mc-line);
    border-radius: 10px;
}
.mc-note-group {
    margin: 0 0 12px;
    border: 1px solid var(--mc-line);
    border-radius: 10px;
    background: var(--mc-panel);
    overflow: hidden;
}
.mc-note-video {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--mc-line);
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mc-text);
}
.mc-note-video:hover,
.mc-note-video:focus-visible {
    background: var(--mc-panel-2);
}
.mc-note-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.mc-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 12px;
}
.mc-note-at {
    flex: 0 0 auto;
    min-width: 46px;
    padding: 2px 6px;
    border: 1px solid var(--mc-line);
    border-radius: 6px;
    background: rgba(255,255,255,.04);
    color: var(--lhq-brand, #3b82f6);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mc-note-at:hover,
.mc-note-at:focus-visible {
    border-color: var(--lhq-brand, #3b82f6);
    color: #fff;
}
/* Wraps: a note is a sentence somebody wrote, and cutting it off would hide
   the part they wanted to find. */
.mc-note-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mc-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.mc-note-del {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: var(--mc-dim);
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 5px;
}
.mc-note-del:hover,
.mc-note-del:focus-visible {
    color: #f08d98;
    background: rgba(237,85,101,.12);
}
.mc-note-err {
    color: #f08d98;
    font-style: normal;
    font-size: 11.5px;
}

.mc-reviews {
    margin: 0;
}
.mc-review-add {
    margin: 0 0 16px;
}
.mc-reviews .course-review-form-toggle {
    display: inline-block;
    border: 1px dashed var(--mc-line);
    border-radius: 9px;
    color: var(--mc-muted);
    padding: 9px 13px;
    font-size: 13px;
    cursor: pointer;
}
.mc-reviews .course-review-form-toggle:hover {
    border-color: var(--lhq-brand, #3b82f6);
    color: var(--mc-text);
}
.mc-reviews .course-review {
    border: 1px solid var(--mc-line);
    border-radius: 10px;
    background: var(--mc-panel);
    padding: 14px 16px;
    margin: 0 0 8px;
}
.mc-reviews .course-review-header h4 {
    color: var(--mc-text);
    font-size: 14px;
    margin: 0 0 4px;
}
.mc-reviews .course-review-content {
    color: #c3ccd8;
    font-size: 13px;
}
.mc-reviews .course-review-date {
    color: var(--mc-dim);
    font-size: 12px;
    margin-top: 6px;
}

/* The review form's fields.

   Bootstrap's .form-control is built for a white page: white background,
   #555 text, a #ccc border and a blue focus glow. Dropped into a dark rail
   that is two bright rectangles. Overridden rather than unclassed, because
   the form markup is shared with the rest of the platform and the class is
   doing real work elsewhere (sizing, focus behaviour, validation states).

   Scoped under .mc-reviews so nothing outside this screen is touched. */

.mc-reviews .form-control {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--mc-line);
    border-radius: 9px;
    color: var(--mc-text);
    box-shadow: none;
    font-size: 13px;
}
.mc-reviews .form-control:focus {
    background: rgba(255,255,255,.06);
    border-color: var(--lhq-brand, #3b82f6);
    box-shadow: none;
    color: var(--mc-text);
}
/* Chrome renders <option> from the OS list, not the control, so an unstyled
   option is black-on-white inside a dark select. */
.mc-reviews select.form-control option {
    background: var(--mc-panel);
    color: var(--mc-text);
}
.mc-reviews .form-control::placeholder {
    color: var(--mc-dim);
}
.mc-reviews textarea.form-control {
    min-height: 90px;
    resize: vertical;
}

/* --- narrow -------------------------------------------------------------

   The card stacks where a 340px image and a column of text stop fitting side
   by side, and the list rows drop their own progress column: the bar is the
   least useful thing on a phone row, and the percentage survives in the
   sub-line beneath the title. */

@media (max-width: 767px) {
    .mc {
        /* The 30px gutter is a desktop measurement, and on a phone the same 30
           resolves differently -- see below.

           30, for a gutter of 25, which is where the rest of the app sits.
           #courses-content carries margin: 0 -30px and the wrapper pads by 10, so
           this box starts at x=-5 on a 373px phone and 30px of padding lands its
           content on 25 -- the same line as the page heading above it, whose col
           is a standard Bootstrap 15 inside .page-heading's 10. Measured at 15 the
           cards were wider but sat visibly left of their own title.

           The bottom clears the footer -- see the shared .mc, .mc-index rule. */
        padding: 0 30px 32px;
    }
    .mc-course {
        display: block;
        padding: 16px;
    }
    .mc-art {
        width: 100%;
        flex-basis: auto;
        margin-bottom: 16px;
    }
    /* Let the video title wrap here.

       It truncates on desktop, where the row is 1010px wide and the ellipsis
       never actually fires. At 360 it fires on the third video of course 52:
       "Mese 2 - Pratica di Lughnasad" became "Mese 2 - Pratica di Lugh...",
       cutting the word that distinguishes it. The asset titles beside it have
       always wrapped; this makes the two agree at the width where it matters.

       overflow/text-overflow can stay -- they do nothing once the text is
       allowed to wrap. */
    .mc-item-title {
        white-space: normal;
    }
    .mc-item-progress {
        display: none;
    }
    .mc-continue {
        width: 100%;
    }
}

/* =========================================================================
   MY OFFERS, THE LISTING  (.mc-index)

   Cards in a grid rather than one full-width row each. Measured before:
   1860 x 423 per course, holding a 590 x 393 picture beside 256px of text,
   so 152px of every card was empty -- and structurally so, because the row
   was as tall as the image whatever the text did. The art has a fixed ratio
   now and stops deciding how tall anything else is allowed to be.

   auto-fill rather than a fixed column count: this account has two offers
   and another may have twenty, and a three-column rule would leave one of
   them looking broken. The track minimum is the narrowest a card reads
   well at; above that they stretch, and 1fr keeps the row full.
   ========================================================================= */

.mc-index {
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 30px 40px; /* see the shared rule above */
    box-sizing: border-box;
    color: var(--mc-text);
}

.mc-index-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    /* Capped and centred on the same 820 as .mc-cards below. Without it this row
       is the full width of .mc-index -- 1620 against the grid's 820 on a 1920
       screen -- so the count sat 400px to the left of the first card it counts.
       The same mistake as the resume strip further down, and the same fix.

       `margin: 0 auto 18px`, not `0 0 18px`: the shorthand writes the horizontal
       margins too, and a zero there throws away the centring on the line above. */
    max-width: 820px;
    margin: 0 auto 18px;
}
.mc-index-count {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mc-muted);
}
/* The pager is the framework's own markup; it only needs to stop being a
   block with thirty pixels of margin hanging off it. */
.mc-index-pager,
.mc-index-pager > div {
    margin: 0;
}
.mc-index-pager-foot {
    margin-top: 26px;
}

.mc-cards {
    display: grid;
    /* auto-FIT, not auto-fill, and a ceiling on the track.

       auto-fill keeps the tracks that have nothing in them: at 1680 it made
       five, and this account's two offers each took a fifth and huddled at the
       left -- which is the empty-right-hand-side this rebuild exists to stop.
       auto-fit collapses the empty ones so the cards take the room.

       The 400px ceiling is why they do not then become two enormous panels:
       past that a card is mostly background. Centred, so two cards read as a
       pair rather than as a row that ran out, and twelve still fill the width. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
    justify-content: center;
    /* Two across at most, and the resume strip above is capped to the same
       number so the two line up exactly. Four 400px cards across a 1620px
       page is a lot of scanning for a library most people measure in single
       figures; two columns of 400 is the shape this content actually has. */
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
}

/* --- the card ----------------------------------------------------------- */

.mc-card {
    display: flex;
    flex-direction: column;
    background: var(--mc-panel);
    border: 1px solid var(--mc-line);
    border-radius: 12px;
    overflow: hidden;
}
.mc-card:hover {
    border-color: rgba(255,255,255,.18);
}

.mc-card-art {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #1f1f1f;
    background-size: cover;
    background-position: center;
}
.mc-card-free {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 9px;
    border-radius: 11px;
    background: rgba(45,194,107,.16);
    color: var(--mc-done);
    font-size: 11px;
    font-weight: 600;
}
.mc-card-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 46px;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.55);
    cursor: pointer;
    opacity: .9;
}
.mc-card-play:hover {
    opacity: 1;
}

/* Grows to fill, so every card in a row ends at the same height and the
   progress bar and button line up across them however long the text is. */
.mc-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px;
    min-width: 0;
}

.mc-card-title {
    margin: 0 0 6px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--mc-text);
}
.mc-card-meta {
    font-size: 12px;
    color: var(--mc-muted);
    margin: 0 0 10px;
}
.mc-card-meta > span + span::before {
    content: "\00b7";
    margin: 0 7px;
    color: var(--mc-dim);
}

/* Clamped in CSS, not cut in PHP. The old code took 630 BYTES with substr()
   after nl2br had already put tags in the string, so a cut could land inside
   an accented character or inside a <br />. Three lines here, the whole text
   still in the page, and nothing to miscount. */
.mc-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.55;
    color: #c3ccd8;
    margin: 0 0 16px;
}

/* Pushed to the bottom of whatever height the row settles on. */
.mc-card-foot {
    margin-top: auto;
}
.mc-card-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}
.mc-card-pct {
    font-size: 12px;
    color: var(--mc-muted);
}
.mc-card-go {
    flex: 0 0 auto;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    color: #fff;
    background: var(--lhq-brand, #3b82f6);
    border-color: var(--lhq-brand, #3b82f6);
}

@media (max-width: 767px) {
    .mc-index {
        padding: 0 30px 32px; /* 30 for a 25px gutter -- see .mc */
    }
    .mc-cards {
        /* One per row rather than a 330px minimum that would overflow a 360px
           phone once the page gutter is taken off. */
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   MY SUBSCRIPTIONS, THE CUSTOMER'S VIEW  (.mc-subs)

   The same table was serving an administrator looking at everyone's
   subscriptions and a customer looking at their own, so a customer's page
   opened on an ID column and a Course Count -- the platform's business, not
   theirs -- with the price fifth along. The admin keeps the table; this is
   what the customer gets.
   ========================================================================= */

.mc-subs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 460px));
    justify-content: center;
    gap: 16px;
}
.mc-sub {
    background: var(--mc-panel);
    border: 1px solid var(--mc-line);
    border-radius: 12px;
    padding: 18px;
}
.mc-sub-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}
.mc-sub-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mc-text);
    min-width: 0;
}

/* The state pill takes its colour from the span INSIDE it, because that span
   is what stripeSubscription.js rewrites on a successful cancellation -- it
   puts <span class="r">No</span> there and knows nothing about this pill.
   Keying the pill off .g / .r means it turns from green to grey on its own,
   with no second place for the JavaScript to have to update. */
.mc-sub-state {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(255,255,255,.06);
    color: var(--mc-muted);
}
.mc-sub-state:has(.g) {
    background: rgba(45,194,107,.14);
    color: var(--mc-done);
}
.mc-sub-state:has(.r) {
    background: rgba(255,255,255,.06);
    color: var(--mc-dim);
}
/* The inner span carries the platform's own red/green text colours; inside a
   pill that already says the same thing with its background, they fight. */
.mc-sub-state .g,
.mc-sub-state .r {
    color: inherit;
}

/* The figure the page is opened to check, so it leads. */
.mc-sub-price {
    font-size: 22px;
    font-weight: 600;
    color: var(--mc-text);
    margin: 0 0 10px;
}
.mc-sub-cycle {
    font-size: 13px;
    font-weight: 400;
    color: var(--mc-muted);
    margin-left: 4px;
}

.mc-sub-facts {
    font-size: 12px;
    color: var(--mc-muted);
    line-height: 1.7;
}
.mc-sub-facts > span {
    display: block;
}

/* Cancelling is destructive and rare, so it is a quiet outlined control that
   turns red on approach rather than a red button sitting on the card waiting
   to be hit. The confirm dialog is still the real guard; this is about which
   of the two things on the card looks like the one you came to do. */
.mc-sub-actions {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--mc-line);
}
.mc-sub-cancel {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--mc-line);
    border-radius: 8px;
    background: transparent;
    color: var(--mc-muted);
    font-size: 12.5px;
    cursor: pointer;
}
.mc-sub-cancel:hover,
.mc-sub-cancel:focus {
    border-color: rgba(255, 107, 107, 0.55);
    color: #ff6b6b;
    text-decoration: none;
}

@media (max-width: 767px) {
    .mc-subs {
        grid-template-columns: 1fr;
    }
}

/* --- the chrome around the subscription cards ---------------------------

   The search bar above the cards is search_bar_subscriptions.tpl, shared
   markup, so everything here hangs off #subscriptions-search rather than any
   class of its own.

   panel_icon.tpl used to wrap all of this and no longer does -- the heading
   and the box both went, so the rules that were undoing that box have gone
   with them rather than being left to match nothing.

   Measured before: the search field rgb(239,239,239) with dark text, both
   buttons the theme's green rgb(45,194,107), and the card-update note in
   rgb(255,222,0).
   ------------------------------------------------------------------------ */
/* The search field, dark like every other field on these screens. */
#subscriptions-search .form-control {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #e9edf2;
    box-shadow: none;
}
#subscriptions-search .form-control:focus {
    border-color: var(--lhq-brand, #3b82f6);
    box-shadow: none;
}
#subscriptions-search .form-control::placeholder {
    color: #6f7885;
}
#subscriptions-search .input-group-addon {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #98a1ad;
}

/* Search and Reset are secondary here: a customer with two subscriptions is
   not searching them. Quiet outlines, so the one button on this bar that
   matters can be the one that looks like a button. */
#subscriptions-search .btn-primary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #c3ccd8;
}
#subscriptions-search .btn-primary:hover,
#subscriptions-search .btn-primary:focus {
    border-color: var(--lhq-brand, #3b82f6);
    background: transparent;
    color: #ffffff;
}

/* --- changing the card on file -----------------------------------------

   Its own block since the split, so it has its own selectors rather than
   hanging off #subscriptions-search -- which a customer no longer gets at
   all, and which never had anything to do with paying.

   It is the reason a customer opens this page when they are not cancelling,
   so it takes the brand colour and everything else on the page stays quiet.
   ------------------------------------------------------------------------ */
.mc-card-update {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 22px;
}
/* rgb(255,222,0) for a sentence explaining that a card change applies to all
   your subscriptions. Useful to know, not an alarm, and the yellow was loud
   enough to read as one. */
.mc-card-update-note,
.mc-card-update-note strong {
    margin: 0;
    font-size: 12px;
    color: #98a1ad;
}
.mc-card-update-note strong {
    color: #c3ccd8;
}
.mc-card-update-btn,
.btn.btn-primary.mc-card-update-btn {
    padding: 8px 18px;
    border-radius: 8px;
    background: var(--lhq-brand, #3b82f6);
    border-color: var(--lhq-brand, #3b82f6);
    color: #ffffff;
    font-weight: 600;
}
.mc-card-update-btn:hover,
.mc-card-update-btn:focus {
    background: var(--lhq-link-hover, #1d4fd7);
    border-color: var(--lhq-link-hover, #1d4fd7);
    color: #ffffff;
}
/* A disabled button here means the account has no Stripe customer id, which
   mySubscriptions.js checks. It should look unavailable rather than inviting. */
.mc-card-update-btn[disabled] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.09);
    color: #6f7885;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .mc-card-update {
        display: block;
        text-align: center;
        margin-bottom: 26px;
    }
    .mc-card-update-note {
        margin-bottom: 10px;
    }
    .mc-card-update-btn {
        width: 100%;
    }
}

/* .mc-index carries its own 30px gutter because on the offers listing it is
   the outermost thing on the page. Here it is nested inside a .col-md-12,
   which pads too -- measured at 386 when a panel was wrapping
   this as well, 15 + 20 + 15 a side turned a 356px column into a 256px card.
   The panel has gone since, and this gutter is still the redundant one. */
.subscriptions-row .mc-index {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

@media (max-width: 767px) {
    /* 15, the Bootstrap default, not the 10 that was here. The col sits at x=10
       on a 373px phone, so 10 put this screen's content on 20 while the page
       heading above it sat on 25 and My Offers, My Purchases and a course sat on
       10 -- three insets across four sibling screens. 15 lands this on 25 with
       the heading, and the other three have been moved to 25 as well. */
    .subscriptions-row > .col-md-12 {
        padding-left: 15px;
        padding-right: 15px;
    }
    /* Search and Reset share a row of their own rather than trailing the
       field on a line by themselves. */
    #subscriptions-search .col-md-2 {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
    }
    #subscriptions-search .col-md-2 .btn {
        flex: 1 1 0;
    }
}

/* Air between the card-update block and the count below it. On a phone the
   search bar stacks into three rows and ends on a full-width Update Card
   Details, which then sat straight on top of "1 SUBSCRIPTION" -- two
   unrelated things touching. The desktop row does not need it: they are side
   by side there, not stacked. */
@media (max-width: 767px) {
    .subscriptions-row #subscriptions-search {
        margin-bottom: 26px;
    }
}

/* --- pick up where you left off ------------------------------------------

   One strip above the cards, naming the VIDEO rather than the offer, because
   someone coming back knows what they were watching and not necessarily
   which of their offers it was in.

   The whole strip is the anchor. No button inside it: a button within a link
   is two targets where a reader sees one, and on a phone the wrong one is
   easy to hit.
   ------------------------------------------------------------------------ */
.mc-resume {
    /* The same width as the card grid below, by both being capped to it.

       Making this a full-row item of that grid looked exact and was not:
       auto-fit only collapses tracks that hold nothing, and a spanning item
       holds them all, so the strip kept three tracks open against the cards'
       two -- 1240 against 820. Capping both is the version that is actually
       the same number.

       820, not 840: two 400px tracks and one 20px gap. The gap falls BETWEEN
       the cards, so the row they occupy is 820 and a strip at 840 overhangs
       it by exactly one gap. */
    max-width: 820px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label go"
        "video go"
        "course go"
        "bar bar";
    align-items: center;
    gap: 2px 16px;
    /* auto on the sides, not 0. This shorthand sat AFTER the margin-left and
       margin-right that were centring it and quietly put them back to zero --
       the strip measured the same 820 as the cards and sat 400px to their
       left. Shorthand after longhand wins, whatever the longhand was for. */
    margin: 0 auto 22px;
    padding: 16px 18px;
    border: 1px solid var(--mc-line);
    border-radius: 12px;
    background: var(--mc-panel);
    text-decoration: none;
}
.mc-resume:hover,
.mc-resume:focus {
    background: var(--mc-panel-2);
    border-color: var(--lhq-brand, #3b82f6);
    text-decoration: none;
}
.mc-resume-label {
    grid-area: label;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mc-dim);
}
.mc-resume-video {
    grid-area: video;
    font-size: 16px;
    font-weight: 600;
    color: var(--mc-text);
}
.mc-resume-course {
    grid-area: course;
    font-size: 12px;
    color: var(--mc-muted);
}
.mc-resume-go {
    grid-area: go;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    background: var(--lhq-brand, #3b82f6);
    color: #fff;
    font-size: 15px;
}
.mc-resume-bar {
    grid-area: bar;
    display: block;
    height: 5px;
    margin-top: 12px;
    border-radius: 99px;
    background: rgba(255,255,255,.09);
    overflow: hidden;
}
.mc-resume-fill {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--lhq-brand, #3b82f6);
}

/* A card footer with only an action in it -- My Purchases, where a product is
   files and there is nothing to be part-way through, so there is no bar and no
   percentage for the button to sit beside. Pushed right on its own rather than
   stretched across a row built for two things. */
.mc-card-foot-solo {
    justify-content: flex-end;
    margin-top: 0;
}

/* =========================================================================
   AN EMPTY LIST IS NOT AN ERROR  (.mc-none)

   What stood here was this, and it is the same line on roughly ninety screens:

       <i class="fa fa-close r b"></i> Sorry, there are no results to show.

   A red cross, 14px of white text, flush against the left edge of a 1900px
   page. The marker is not badly drawn -- it is the platform's error marker, and
   of the 232 places that use it about seventy are real failures ("Sorry,
   something went wrong", "The ID appears to have been corrupted or tampered
   with"), where a red cross is exactly right. The mistake is that the same
   marker was also doing duty for "you have not bought anything yet", which is
   not a failure, has not gone wrong, and is the ordinary first thing a new
   customer sees. Apologising to someone for the consequence of their not having
   spent any money yet is the wrong tone and the wrong colour.

   So the error marker is left alone for errors, and a list with nothing in it
   gets this instead: what the screen is for, said plainly.

   NAMED .mc-none, NOT .mc-empty. .mc-empty was taken: it was 13px of muted text
   further up this file, the "There are no reviews added for this offer." note
   inside a course. This block was first written as .mc-empty and sat later at the
   same specificity, so for one commit it turned that one-line note into a 520px
   dashed panel. Two different things with one name, and the one that loads last
   wins. Both are .mc-none now -- the note uses the .mc-none-sm variant at the
   bottom of this file -- and .mc-empty is gone rather than left lying around.

   It renders inside .mc-index because that is where the --mc-* palette is
   declared and where the phone gutter is set; on its own every var below would
   resolve to its fallback. */

.mc-none {
    max-width: 520px;
    margin: 8px auto 0;
    padding: 44px 34px;
    text-align: center;
    background: var(--mc-panel, #2a2a2a);
    border: 1px dashed var(--mc-line, rgba(255,255,255,.14));
    border-radius: 14px;
    box-sizing: border-box;
}
.mc-none-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 0 18px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    color: var(--mc-dim, #6f7885);
    font-size: 23px;
}
.mc-none-title {
    margin: 0 0 11px;
    font-size: 19px;
    font-weight: 700;
    color: var(--mc-text, #e9edf2);
}
.mc-none-text {
    /* No bottom margin. The 24px that used to be here was the gap to a button,
       and once the button went it became 71px of dead space under the last line
       against 47 above the icon -- visibly bottom-heavy. The card's own padding
       closes the box now, so the two ends match.

       No max-width either. The content box is 452, and clamping it to 400 was
       what broke "download." onto a line of its own -- that sentence is 424 wide
       and fits.

       The sentences measure 424, 434 and 543, so two sit on one line and the
       subscriptions one runs to two: it names both the price and the renewal date,
       which is the point of that screen and worth the extra line. `balance` splits
       it evenly rather than leaving a word stranded, so the card reads as a
       deliberate two-liner instead of an overflow. Browsers without `balance` wrap
       normally, exactly as they did before. */
    margin: 0 auto;
    text-wrap: balance;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mc-muted, #98a1ad);
}
.mc-none-go {
    display: inline-block;
    margin-top: 24px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    color: #fff;
    background: var(--lhq-brand, #3b82f6);
    border-color: var(--lhq-brand, #3b82f6);
}
.mc-none-go:hover,
.mc-none-go:focus {
    color: #fff;
    opacity: .9;
}

@media (max-width: 767px) {
    .mc-none {
        padding: 36px 22px;
    }
}

/* The compact variant, for a panel rather than a page.

   The reviews list on a course sits in the right-hand rail, under a heading that
   already reads "Reviews 0" with an "Add Review" pill directly beneath it. A
   full .mc-none card there would state the count a third time and shout over the
   one thing worth clicking, so this drops the title and the weight and keeps the
   family: same dashed edge, same muted badge, same voice.

   10px radius rather than 14, matching .mc-reviews .course-review -- it stands
   where those panels would be, so it is their size and shape.

   This replaces the old .mc-empty rule, which was 13px of dim text with 4px of
   padding and read as a stray line someone forgot to style. Its name is gone
   rather than kept as an alias: .mc-empty being quietly present is what let a
   later block claim it and turn this note into a 520px panel for a commit. */
.mc-none-sm {
    max-width: none;
    margin: 0;
    padding: 24px 18px;
    border-radius: 10px;
}
.mc-none-sm .mc-none-icon {
    width: 42px;
    height: 42px;
    margin: 0 0 12px;
    font-size: 16px;
}
.mc-none-sm .mc-none-text {
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .mc-none-sm {
        padding: 22px 16px;
    }
}

/* ---------------------------------------------------------------------------
   The frame under the cursor on the seek bar.

   The read-out was the time alone; with a sprite from stills.cron.php it is
   the picture with the time on it. .has-frame is added by JS only when there
   is a sprite AND the video has reported its own dimensions, so the plain
   version is still what shows on anything not yet processed.
   --------------------------------------------------------------------------- */
.video-peek.has-frame {
    padding: 0;
    background-color: #000000;
    background-repeat: no-repeat;
    border-color: rgba(255, 255, 255, 0.28);
    overflow: hidden;
}
.video-peek .video-peek-time {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 0 3px;
    text-align: center;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    background: rgba(6, 10, 14, 0.72);
}

/* ---------------------------------------------------------------------------
   The transcript.

   A column down the right of the player rather than a thing that pushes the
   video around: opening it should not resize what you are watching. On a phone
   there is no room for a column, so it takes the whole player -- you are
   reading or you are watching, not both on a 375px screen.
   --------------------------------------------------------------------------- */
.video-transcript {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    width: 340px;
    max-width: 100%;
    background: rgba(6, 10, 14, 0.96);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.video-transcript[hidden] {
    display: none;
}
.video-transcript-head {
    flex: 0 0 auto;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.video-transcript-head h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: #ffffff;
}
.video-transcript-q {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    color: #e9edf2;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
}
.video-transcript-q:focus {
    outline: none;
    border-color: rgba(91, 147, 255, 0.85);
}
/* min-height:0 so the list scrolls instead of stretching the column past the
   bottom of the player -- the same flex floor the stage needed. */
.video-transcript-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px 14px;
}
.video-tr-line {
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #c4ccd6;
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}
.video-tr-line:hover,
.video-tr-line:focus {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}
/* Two classes, so this beats the hover rule above it rather than losing to
   whichever came last. */
.video-transcript .video-tr-line.is-current {
    background: rgba(37, 99, 235, 0.22);
    color: #ffffff;
}
.video-tr-at {
    flex: 0 0 auto;
    min-width: 46px;
    color: #7f8895;
    font-variant-numeric: tabular-nums;
}
.video-tr-line.is-current .video-tr-at {
    color: #9dc0ff;
}

@media (max-width: 640px) {
    .video-transcript {
        width: 100%;
        border-left: 0;
    }
}

/* The notes panel's own way out. Escape closed it and the Notes button
   toggled it, and neither of those is visible -- reported from the desktop,
   where there is no reason to have to guess.

   .video-card is already position:absolute and centred, so it is the
   positioned ancestor this resolves against -- giving .video-notes a
   position of its own would have overridden that at equal specificity and
   knocked the panel out of the middle of the player. Smaller than the player's 40px close: it shuts a panel rather
   than the whole player, and it should not compete with it. */
.video-notes-close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 13px;
    color: #98a1ad;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.16s, color 0.16s;
}
.video-notes-close:hover,
.video-notes-close:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

/* =========================================================================
   A STORE'S SOCIAL LINKS -- the list on the settings form.

   WHY IT HAS ITS OWN BLOCK INSTEAD OF BOOTSTRAP'S. Everything else on that
   form is the 2016 markup: .input-group, a grey .input-group-addon with a
   fa-fw glyph in it, a question-mark popover on the end. That shape suits a
   single field and suits nothing about a list somebody adds to, reorders and
   deletes from. Four fixed boxes could live in it; twenty-seven networks in
   an ordered list cannot.

   EVERY SELECTOR IS SCOPED UNDER .sl-list, AND NOT FOR TIDINESS. The
   platform bundle carries

       input[type="text"], input[type="password"], ... , select
         { color: #2d2d2d }

   which is 0,1,1 and beats a bare `.sl-url` at 0,1,0. Measured on the live
   slider before this: the address fields held their text and rendered it
   45,45,45 on a near-black ground -- invisible, and indistinguishable from
   a field that had not saved. The descendant form is 0,2,0 and wins.

   EVERY PROPERTY IS DECLARED for the same family of reason. main.css owns
   .social-* and a dozen other generic names, and a scoped sheet still loses
   on every property it does not set -- so each element here states its own
   font, colour, background, border, padding and line-height rather than
   assuming the block above it lost.

   THE SURFACE IS #3d3d3d. That is .content-slider in dashboard.css, which is
   what this form opens in; the panel and line values are v2.css's, so a
   creator moving between this and the rest of the v2 screens sees one set of
   greys rather than two.
   ========================================================================= */
.sl-list {
    display: block;
    margin: 26px 0 18px;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #e9edf2;
}

.sl-list .sl-head {
    display: block;
    margin: 0 0 14px;
}

.sl-list .sl-title {
    margin: 0 0 4px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #98a1ad;
}

.sl-list .sl-sub {
    margin: 0;
    padding: 0;
    max-width: 52em;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #98a1ad;
}

.sl-list .sl-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
}

/* THE COLUMNS ARE FIXED EXCEPT THE FIELDS, which take everything left over.
   A grid rather than floats so the grips, the marks and the crosses line up
   down the list however long a network's name is -- "SoundCloud" and "X" sit
   in the same track. */
.sl-list .sl-row {
    display: grid;
    grid-template-columns: 16px 26px 150px 1fr 30px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 12px;
    background: #353535;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease;
}

.sl-list .sl-row:hover {
    background: #3a3a3a;
    border-color: rgba(255, 255, 255, 0.14);
}

/* The whole row lights rather than the one input, because the row is the
   thing being edited and the inputs inside it have no borders of their own
   to light. */
.sl-list .sl-row:focus-within {
    background: #3a3a3a;
    border-color: #2563eb;
}

.sl-list .sl-row.is-dragging {
    opacity: .45;
    border-style: dashed;
}

.sl-list .sl-grip {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    color: #5b636e;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.sl-list .sl-grip:active {
    cursor: grabbing;
}

.sl-list .sl-row:hover .sl-grip {
    color: #98a1ad;
}

.sl-list .sl-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #98a1ad;
}

.sl-list .sl-mark svg {
    display: block;
    width: 20px;
    height: 20px;
}

.sl-list .sl-row:hover .sl-mark,
.sl-list .sl-row:focus-within .sl-mark {
    color: #e9edf2;
}

/* THE PICKER IS A NATIVE SELECT WEARING ITS OWN CARET. Native because a
   built one would need a listbox, keyboard handling and a scroll container
   for twenty-seven rows, and the browser has all three; the appearance is
   stripped so it does not arrive as a grey 2016 control in the middle of
   this row. */
.sl-list .sl-pick {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}

.sl-list .sl-net {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 2px 18px 2px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #e9edf2;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.sl-list .sl-net:focus {
    outline: 0;
}

/* The open list is the operating system's and takes none of the above, so
   it is told the two colours it will honour. Without this it opens white on
   white in some builds and black on black in others. */
.sl-list .sl-net option {
    background: #2a2a2a;
    color: #e9edf2;
}

.sl-list .sl-caret {
    position: absolute;
    top: 50%;
    right: 2px;
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #6f7885;
    pointer-events: none;
}

.sl-list .sl-row:hover .sl-caret {
    border-top-color: #98a1ad;
}

/* ONE CELL HOLDING BOTH BOXES, rather than the name box taking a column of
   its own. Other is the only network that has a name, so a sixth column
   would be empty down every other row; and putting the name in the address
   column without this wrapper pushed the delete button onto a second line.
   A flex column here costs nothing and the row grows only for the row that
   needs it. */
.sl-list .sl-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.sl-list .sl-url,
.sl-list .sl-name {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5px 9px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #e9edf2;
    box-sizing: border-box;
}

.sl-list .sl-url:focus,
.sl-list .sl-name:focus {
    outline: 0;
    background: rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.18);
}

.sl-list .sl-url::placeholder,
.sl-list .sl-name::placeholder {
    color: #6f7885;
    opacity: 1;
}

.sl-list .sl-del {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #6f7885;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.sl-list .sl-del svg {
    display: block;
    width: 15px;
    height: 15px;
}

.sl-list .sl-del:hover,
.sl-list .sl-del:focus {
    outline: 0;
    color: #ed5565;
    background: rgba(237, 85, 101, 0.14);
}

.sl-list .sl-empty {
    margin: 0 0 10px;
    padding: 14px 12px;
    background: rgba(0, 0, 0, 0.12);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: #6f7885;
}

.sl-list .sl-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 8px 16px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #98a1ad;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.sl-list .sl-add:hover,
.sl-list .sl-add:focus {
    outline: 0;
    color: #e9edf2;
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.12);
}

.sl-list .sl-add[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.sl-list .sl-add[disabled]:hover {
    color: #98a1ad;
    border-color: rgba(255, 255, 255, 0.18);
    background: transparent;
}

.sl-list .sl-plus {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

/* Narrow: the picker and the address stop sharing a line, because 150px of
   name against what is left of a phone leaves the address four characters
   wide. The grip goes with it -- there is no HTML5 drag on a touch screen
   anyway, so it was a handle that did nothing. */
@media (max-width: 680px) {
    .sl-list .sl-row {
        grid-template-columns: 26px 1fr 30px;
        row-gap: 8px;
    }

    .sl-list .sl-grip {
        display: none;
    }

    .sl-list .sl-fields {
        grid-column: 2 / span 1;
    }
}

/* =========================================================================
   THE STORE FORMS, IN THE SKIN THE REST OF THE SCREEN IS IN.

   WHAT THIS IS FOR. Store settings and Create store are the 2016 form:
   .input-group with a blue slab down the left holding a pencil, a green slab
   down the right holding a question mark, white .form-control boxes, a white
   Summernote panel, and Bootstrap's grid spreading it across a slider that is
   1500px wide. On the v2 Stores screen -- dark, Lato, one accent -- it lands
   as a different application.

   IT IS A SKIN, NOT A REBUILD. Rebuilding these as v2 screens is real work
   and a different job: there is a v2 Create store screen already and it
   cannot edit, so the fragment is what both flows actually reach. Every rule
   below is presentation; no markup moved, no field changed, no handler
   touched. `.v2-form` on the outer row is the whole hook.

   SPECIFICITY IS THE REASON FOR THE PREFIX, not tidiness. The platform
   bundle sets input[type="text"], select, textarea { color:#2d2d2d } at
   0,1,1, and bootstrap.css sets .form-control's background, border and
   shadow. `.v2-form .form-control` is 0,2,0 and beats both. Anything here
   that still loses says so at the rule.

   THE PALETTE IS v2.css's, on .content-slider's #3d3d3d, so this reads as
   the same product as the grid behind it.
   ========================================================================= */
.v2-form {
    margin: 0 auto;
    padding: 0 30px 40px;
    max-width: 1500px;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #e9edf2;
    box-sizing: border-box;
}

.v2-form [class^="col-md-"],
.v2-form [class*=" col-md-"] {
    padding-left: 0;
    padding-right: 0;
}

/* The left column carries the form and the right one the previews, with a
   real gutter instead of Bootstrap's empty col-md-1. At 1180 and below they
   stack, because a preview beside a form is a nicety and a form squeezed to
   400px is not. */
.v2-form > .col-md-7 {
    width: 62%;
    float: left;
}

.v2-form > .col-md-1 {
    display: none;
}

.v2-form > .col-md-4 {
    width: 34%;
    margin-left: 4%;
    float: left;
}

@media (max-width: 1180px) {
    .v2-form > .col-md-7,
    .v2-form > .col-md-4 {
        width: 100%;
        margin-left: 0;
        float: none;
    }
}

/* ---- headings and copy ---------------------------------------------- */

.v2-form h2 {
    margin: 0 0 6px;
    padding: 0;
    font-family: inherit;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #ffffff;
}

.v2-form h3 {
    margin: 0 0 6px;
    padding: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #e9edf2;
}

.v2-form h4 {
    margin: 0 0 4px;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #98a1ad;
}

.v2-form p {
    margin: 0 0 14px;
    padding: 0;
    max-width: 58em;
    font-size: 14px;
    line-height: 1.55;
    color: #98a1ad;
}

.v2-form p.sml {
    font-size: 13px;
}

/* The intro and the pro-tip are ONE paragraph with <br><br> between them,
   and two more loose breaks after it. The loose ones go; of each pair inside
   the paragraph the second goes and the first stays, which leaves the
   pro-tip on its own line instead of a blank line's worth of gap -- or, if
   both are hidden, running into the end of the sentence before it. */
.v2-form > .col-md-7 > br {
    display: none;
}

.v2-form > .col-md-7 > p > br + br {
    display: none;
}

.v2-form > .col-md-7 > p > img {
    width: 18px;
    height: auto;
    margin: 0 6px 0 0;
    vertical-align: -3px;
}

.v2-form > .col-md-7 > p > strong {
    color: #e9edf2;
    font-weight: 700;
}

.v2-form hr {
    height: 0;
    margin: 26px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* ---- fields ---------------------------------------------------------- */

.v2-form label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #98a1ad;
}

/* The "* Required" marker is an inline style in the markup -- #ffde59, 80%
   -- and an inline style cannot be overridden from a sheet. So it is left
   alone and simply spaced; it reads as an amber hint, which is what it is. */
.v2-form label span {
    margin-left: 6px;
    letter-spacing: 0;
    text-transform: none;
}

.v2-form .form-group {
    display: block;
    margin: 0 0 18px;
    padding: 0;
}

/* THE INPUT GROUP STOPS BEING ONE. .input-group is a table in bootstrap.css
   -- display:table with table-cell children -- which is what makes the
   addons full-height slabs against the field. Turned back into a plain block
   so the field is a field and the help sits on it rather than beside it. */
.v2-form .input-group {
    display: block;
    position: relative;
    width: 100%;
    border-collapse: separate;
}

/* The left addon is a pencil on every single field and says nothing that the
   label above it does not. It goes. */
.v2-form .input-group-addon {
    display: none;
}

/* The right one is the help popover and does carry something, so it stays --
   as a quiet circle on the field rather than a green slab beside it. */
.v2-form .input-group-addon-help {
    display: flex;
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: rgba(255, 255, 255, 0.07);
    border: 0;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    color: #98a1ad;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.v2-form .input-group-addon-help:hover {
    color: #e9edf2;
    background: rgba(255, 255, 255, 0.14);
}

.v2-form .form-control,
.v2-form input.input,
.v2-form textarea.input {
    display: block;
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 38px 10px 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #e9edf2;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease;
}

.v2-form .form-control:focus,
.v2-form input.input:focus,
.v2-form textarea.input:focus {
    outline: 0;
    background: rgba(0, 0, 0, 0.32);
    border-color: #2563eb;
    box-shadow: none;
}

.v2-form .form-control::placeholder {
    color: #6f7885;
    opacity: 1;
}

.v2-form .form-control.field-required.error,
.v2-form .form-control.error {
    border-color: #ed5565;
}

.v2-form #wordcount {
    margin: -10px 0 18px;
    padding: 0;
    font-size: 12px;
    color: #6f7885;
}

/* ---- the description editor ------------------------------------------ */

/* Summernote ships its own panel, toolbar and white canvas. Four selectors
   is all it takes to bring it onto the same surface; the buttons keep their
   own icons and their own behaviour. */
.v2-form .note-editor.note-frame {
    margin: 0;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    box-shadow: none;
    overflow: hidden;
}

.v2-form .note-editor .note-toolbar {
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #98a1ad;
}

.v2-form .note-editor .note-btn,
.v2-form .note-editor .note-btn:focus {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: none;
    color: #98a1ad;
}

.v2-form .note-editor .note-btn:hover,
.v2-form .note-editor .note-btn.active {
    background: rgba(255, 255, 255, 0.10);
    border-color: transparent;
    color: #e9edf2;
}

.v2-form .note-editor .note-editable {
    min-height: 180px;
    padding: 12px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: #e9edf2;
}

.v2-form .note-editor .note-statusbar {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* The dropdowns Summernote opens are its own panels on the page, not inside
   .note-editor's box, so they are reached through the editor's ancestor. */
.v2-form .note-editor .note-dropdown-menu {
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    color: #e9edf2;
}

.v2-form .note-editor .note-dropdown-item:hover,
.v2-form .note-editor .note-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* ---- uploads --------------------------------------------------------- */

.v2-form .video-upload-wrapper,
.v2-form .image-upload-wrapper {
    display: block;
    margin: 0;
    padding: 0;
}

.v2-form .inline-help-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

.v2-form .inline-help {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    font-size: 11px;
    color: #98a1ad;
    cursor: pointer;
}

.v2-form .inline-help:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #e9edf2;
}

/* The drop zone reads as a drop zone, which the flat grey strip did not. */
.v2-form .dropspace,
.v2-form .dropspace-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 12px;
    padding: 26px 16px;
    background: rgba(0, 0, 0, 0.14);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: #6f7885;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.v2-form .dropspace:hover,
.v2-form .dropspace-2:hover,
.v2-form .dropspace.hover,
.v2-form .dropspace-2.hover {
    background: rgba(37, 99, 235, 0.10);
    border-color: #2563eb;
    color: #e9edf2;
}

/* THE TRACK IS INVISIBLE UNTIL THERE IS A BAR IN IT. Nothing hides this
   element between uploads -- the widget only sets the bar's width -- so a
   filled track drew as a grey strip under both drop zones on a form where
   nothing was uploading. Transparent, and the green bar is the only thing
   that ever appears. */
.v2-form .progress {
    height: 6px;
    margin: 0 0 12px;
    background: transparent;
    border-radius: 999px;
    box-shadow: none;
    overflow: hidden;
}

.v2-form .progress-bar-success {
    background: #2dc26b;
    box-shadow: none;
}

.v2-form .files {
    margin: 0 0 4px;
    font-size: 13px;
    color: #98a1ad;
}

/* ---- buttons --------------------------------------------------------- */

.v2-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: none;
    color: #e9edf2;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.v2-form .btn:hover,
.v2-form .btn:focus {
    outline: 0;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* Green is Save, here and on every v2 screen. The upload buttons are
   .btn-primary in the markup and are NOT the primary action on this form --
   they keep the outline treatment above, which is the honest hierarchy. */
.v2-form .btn-green,
.v2-form input.btn-green {
    background: #2dc26b;
    border-color: #2dc26b;
    color: #05230f;
}

.v2-form .btn-green:hover,
.v2-form input.btn-green:hover {
    background: #3ad47a;
    border-color: #3ad47a;
    color: #05230f;
}

.v2-form .fileinput-button,
.v2-form .fileinput-button-2 {
    position: relative;
    overflow: hidden;
}

.v2-form .actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* The buttons carry .pull-left in the markup, which floats them out of the
   flex row and back into 2016. Flex already orders them. */
.v2-form .actions .pull-left {
    float: none;
}

.v2-form .actions .clearfix {
    display: none;
}

/* ---- previews -------------------------------------------------------- */

.v2-form .preview-wrappers {
    margin: 0 0 22px;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

.v2-form .preview-wrappers:empty {
    min-height: 90px;
    background: rgba(0, 0, 0, 0.14);
    border: 1px dashed rgba(255, 255, 255, 0.12);
}

.v2-form .preview-wrappers img,
.v2-form .preview-wrappers video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* The two preview headings carry an inline margin-top in the markup, so the
   spacing is set on the column instead of fought for on the heading. */
.v2-form > .col-md-4 {
    padding-top: 4px;
}

.v2-form .content-msg {
    margin: 0 0 12px;
}

.v2-form .form-msg {
    font-size: 13px;
    color: #98a1ad;
}

/* ---------------------------------------------------------------------------
   CHAPTERS AND DRIP RELEASE IN THE PLAYER (27 September 2026).

   Chapters: the creator's own sections, as a heading wherever the section
   changes (MyCoursesComponents). Locked: a lesson or file whose drip date has
   not come for this buyer -- dimmed, a padlock where the number was, and its
   date written diagonally across the row, as in the drawing at
   Planning/steps/contentHierarchyReference.jpg. No play button; the file
   gate refuses the address too.
   --------------------------------------------------------------------------- */
.mc-chapter {
    list-style: none;
    margin: 18px 2px 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mc-muted);
}
.mc-chapter:first-child { margin-top: 2px; }

.mc-item.is-locked {
    position: relative;
    overflow: hidden;
    cursor: default;
}
.mc-item.is-locked:hover { background: var(--mc-panel); }
.mc-item.is-locked .mc-num,
.mc-item.is-locked .mc-item-main { opacity: .45; }
.mc-lock-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .04em;
    color: rgba(255,255,255,.10);
    white-space: nowrap;
    pointer-events: none;
}
.mc-action-locked {
    flex: none;
    padding: 7px 14px;
    border: 1px solid var(--mc-line);
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mc-dim);
    background: transparent;
}
.mc-asset.is-locked { opacity: .55; }
.mc-asset.is-locked .mc-asset-type { color: var(--mc-dim); }

/* ===========================================================================
   QUIZZES IN THE PLAYER (27 Sep 2026) -- the row in the list, and the panel
   quiz.js opens over the page. Tokens with their canon values behind them,
   so the panel reads the same whether or not the v2 sheet is on the page.
   =========================================================================== */
.mc-item.mc-quiz .mc-num { color: #c9aefc; }
.mc-item.mc-quiz { border-left: 3px solid rgba(181, 139, 255, .45); }
.mc-item.mc-quiz.is-done { border-left-color: var(--green, #2dc26b); }
.mc-quiz-go { cursor: pointer; }

.qzp-back { position: fixed; inset: 0; z-index: 99990; background: rgba(0, 0, 0, .6);
    display: flex; align-items: center; justify-content: center; padding: 16px; }
.qzp { width: min(640px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
    background: var(--panel, #2a2a2a); color: var(--text, #e9edf2); border: 1px solid var(--line, rgba(255,255,255,.09));
    border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); font-family: var(--font, Lato, Helvetica, Arial, sans-serif); }
.qzp-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line, rgba(255,255,255,.09)); }
.qzp-title { flex: 1; font-size: 16px; font-weight: 700; }
.qzp-x { background: transparent; border: 0; color: var(--dim, #6f7885); font-size: 16px; cursor: pointer; padding: 4px 6px; }
.qzp-x:hover { color: var(--text, #e9edf2); }
.qzp-body { padding: 20px 22px; overflow: auto; }
.qzp-facts { margin: 0 0 10px; font-size: 13px; color: var(--muted, #98a1ad); font-variant-numeric: tabular-nums; }
.qzp-note { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--muted, #98a1ad); }
.qzp-note b { color: var(--text, #e9edf2); }
.qzp-note.bad { color: #f08d98; }
.qzp-dots { display: flex; gap: 5px; margin: 0 0 16px; }
.qzp-dots i { width: 26px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.qzp-dots i.done { background: var(--green, #2dc26b); }
.qzp-dots i.here { background: var(--text, #e9edf2); }
.qzp-q { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.qzp-kind { margin: 0 0 14px; font-size: 12px; color: var(--dim, #6f7885); }
.qzp-a { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; margin: 0 0 8px; padding: 12px 14px;
    background: var(--panel-2, #323232); color: var(--text, #e9edf2); border: 1px solid var(--line, rgba(255,255,255,.09));
    border-radius: 10px; font: inherit; font-size: 14.5px; cursor: pointer; }
.qzp-a:hover { border-color: rgba(255, 255, 255, .22); }
.qzp-box { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); }
.qzp-a.multi .qzp-box { border-radius: 5px; }
.qzp-a.on { border-color: var(--brand, #2563eb); background: rgba(37, 99, 235, .12); }
.qzp-a.on .qzp-box { border-color: var(--brand, #2563eb); background: var(--brand, #2563eb); box-shadow: inset 0 0 0 3px #1f2f55; }
.qzp-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.qzp-foot .btn { border-radius: 9px; padding: 9px 16px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.qzp-foot .btn-go { background: var(--green, #2dc26b); border: 1px solid var(--green, #2dc26b); color: #fff; }
.qzp-foot .btn-go:disabled { opacity: .5; cursor: default; }
.qzp-foot .btn-ghost { background: transparent; border: 1px solid var(--line, rgba(255,255,255,.18)); color: var(--text, #e9edf2); }
.qzp-kicker { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #98a1ad); }
.qzp-score { margin: 2px 0 6px; font-size: 44px; font-weight: 900; font-variant-numeric: tabular-nums; }
.qzp-score.pass { color: var(--green, #2dc26b); }
.qzp-score.fail { color: #f08d98; }
.qzp-review { margin-top: 12px; border-top: 1px solid var(--line, rgba(255,255,255,.09)); padding-top: 8px; }
.qzp-rq { margin: 12px 0 6px; font-size: 14px; }
.qzp-r { margin: 0 0 6px; padding: 8px 12px; border-radius: 8px; font-size: 13.5px;
    background: rgba(255, 255, 255, .03); border: 1px solid var(--line, rgba(255,255,255,.09)); }
.qzp-r.qzp-ok { border-color: rgba(45, 194, 107, .55); background: rgba(45, 194, 107, .10); }
.qzp-r.qzp-no { border-color: rgba(237, 85, 101, .55); background: rgba(237, 85, 101, .08); }
.qzp-mine { font-size: 11.5px; color: var(--muted, #98a1ad); margin-left: 6px; }
.qzp-why { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--muted, #98a1ad); background: rgba(255, 255, 255, .04); }

/* ===========================================================================
   ASSIGNMENTS IN THE PLAYER (27 Sep 2026) -- the row, in the teal the mock-up
   gave them, and task.js's panel, which reuses the quiz panel's frame.
   =========================================================================== */
.mc-item.mc-task { border-left-color: rgba(79, 184, 160, .5); }
.mc-item.mc-task .mc-num { color: #7fd6c1; }
.mc-item.mc-task.is-done { border-left-color: var(--green, #2dc26b); }
.mc-item.mc-task.is-waiting .mc-item-sub { color: #f0b35a; }
.mc-item.mc-task.is-redo .mc-item-sub { color: #f08d98; }
.mc-task-go { cursor: pointer; }

.tkp-brief { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .04);
  font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.tkp-status { display: inline-block; margin: 0 0 12px; padding: 4px 9px; border-radius: 6px; font-size: 11.5px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tkp-status.none { background: rgba(255, 255, 255, .07); color: var(--muted, #98a1ad); }
.tkp-status.waiting { background: rgba(224, 163, 58, .14); color: #f0b35a; }
.tkp-status.approved { background: rgba(45, 194, 107, .14); color: #6bdf9f; }
.tkp-status.redo { background: rgba(237, 85, 101, .12); color: #f08d98; }
.tkp-label { display: block; margin: 12px 0 5px; font-size: 12.5px; font-weight: 700; }
.tkp-text { width: 100%; min-height: 110px; resize: vertical; box-sizing: border-box; background: #232323;
  color: var(--text, #e9edf2); border: 1px solid rgba(255, 255, 255, .2); border-radius: 9px; padding: 9px 11px;
  font: inherit; font-size: 14px; }
.tkp-text:focus { outline: 0; border-color: var(--brand, #2563eb); }
.tkp-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; padding: 10px 12px;
  border: 1px dashed rgba(255, 255, 255, .22); border-radius: 9px; font-size: 13px; color: var(--muted, #98a1ad); }
.tkp-file b { color: var(--text, #e9edf2); }
.tkp-file input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tkp-file .btn { border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: transparent; border: 1px solid var(--line, rgba(255,255,255,.18)); color: var(--text, #e9edf2); }
.tkp-past { margin: 0 0 10px; padding: 10px 12px; border-radius: 9px; background: rgba(255, 255, 255, .04); font-size: 13.5px; line-height: 1.5; }
.tkp-past small { display: block; margin: 0 0 4px; font-size: 11.5px; color: var(--dim, #6f7885); }
.tkp-past a { color: #8ab4ff; }
.tkp-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 6px; border-left: 3px solid #ed5565;
  background: rgba(237, 85, 101, .06); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.tkp-note.good { border-left-color: var(--green, #2dc26b); background: rgba(45, 194, 107, .06); }
.tkp-note small { display: block; margin: 0 0 3px; font-size: 11.5px; color: var(--dim, #6f7885); white-space: normal; }

/* ===========================================================================
   "MESSAGE THE CREATOR" INSIDE A PURCHASE (27 Sep 2026) -- one quiet line under
   the progress bar; its window is ask.js, in the quiz panel's frame.
   =========================================================================== */
.mc-ask { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px;
  font-size: 13px; color: var(--muted, #98a1ad); }
.mc-ask-go { display: inline-flex; align-items: center; gap: 4px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line, rgba(255,255,255,.18)); background: transparent; color: var(--text, #e9edf2);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mc-ask-go:hover { border-color: var(--green, #2dc26b); background: rgba(45, 194, 107, .10); }
.qzp-foot a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* THE STORE ADDRESS BOX (27 Sep 2026): the address it makes, printed in
   front of the name as one field -- "learnershq.com/stores/" then the box.
   Its own class, because .v2-form hides .input-group-addon (the pencil). */
.v2-form .store-handle-row {
    display: flex;
    align-items: stretch;
    margin-bottom: 18px;
}
.v2-form .store-handle-pre {
    display: flex;
    align-items: center;
    flex: none;
    max-width: 60%;
    padding: 0 4px 0 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
    color: #98a1ad;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2-form .store-handle-row #store-handle {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding-right: 12px;
    border-radius: 0 8px 8px 0;
}
/* Courses Public CSS File v1.0.0 */
body {
    background: url(https://alpha.learnershq.com/themes/default/images/admin-background.png) center center / cover no-repeat fixed rgb(0, 0, 0);
    color: #fff;
    font-size: 18px;
}
p, td, li, label {
    font-size: 14px;
    line-height: 20px;
}
a, a:hover {
    text-decoration: none!important;
}
.row.wrapper.page-heading {
    margin: 0 -25px 30px;
}
.btn.btn-primary,
.btn.btn-primary:active {
    color: #ffffff;
    background-color: #ff0000;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 3px;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: rgb(97,97,97);
    border: 1px solid transparent;
}
.btn.btn-success {
    background-color: #1c84c6!important;
    border-color: #1c84c6!important;
    color: #FFFFFF!important;
}
.toast-message {
    line-height: 1.42857143;
}
.btn-group-xs>.btn, .btn-xs {
    padding: 1px 5px!important;
    font-size: 12px!important;
    line-height: 1.5!important;
    color: #fff!important;
}
.table-striped > tbody > tr {
    background-color: #3d3d3d!important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #242424!important;
}
.table-hover > tbody > tr:hover {
    background-color: #5e5e5e!important;
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr >td, .table > tfoot> tr> th, .table > thead > tr > td, .table > thead > tr > th {
    vertical-align: middle!important;
    padding: 8px 3px!important;
}
.btn-back {
    color: #fff;
}
#courses-content {
    color: #fff!important;
}
.course-home-title-row strong {
    color: #fff!important;
}
.course-home-item-title a {
    color: #fff!important;
}
.course-home-item-title a:hover {
    color: #fff!important;
    opacity: 0.5!important;
}
.btn-subscribe, .btn-join-login {
    padding: 8px 12px 6px!important;
    font-size: 16px!important;
    font-weight: bold!important;
}
.btn-course-last {
    margin-top: 15px;
}
.splide {
    padding: 0 5px;
}
.splide-courses:last-child {
    margin-bottom: 30px;
}

/* ---- the credit, on an undesigned storefront -----------------------------
   The page lost our navbar and our copyright block when the chrome came
   off a creator's shop, which is right. This is the one line that has to
   stay: who built it, and the terms and privacy policy a public page
   selling things must link to.

   A designed store has its own foot inside .v2-front, dressed by
   storefront.css. This is the same three things for the page that has
   neither. */
.store-credit {
    margin-top: 34px;
    padding: 16px 0 20px;
    border-top: 1px solid rgba(128,128,128,.22);
}
.store-credit-in {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #8a9099;
}
.store-credit a { color: inherit; text-decoration: none; }
.store-credit .sc-by { display: inline-flex; align-items: center; gap: 7px; }
/* THE LOCKUP. LEARNERS follows the line it sits on -- a presentation
   attribute loses to a CSS property, so this one rule frees the letters
   from the white the file hard-codes for the dark top bar. The green
   mark and the cobalt HQ carry fill attributes of their own, which an
   inherited value cannot reach, so they keep their brand colours. */
.store-credit .sc-lockup { height: 15px; width: auto; flex: none; }
.store-credit .sc-lockup .lhq-word { fill: currentColor; }
.store-credit a:hover { color: #2dc26b; }
/* The links travel together in a box that takes the gap once -- one of
   them appears only for somebody signed in, so "the first one" is not a
   fixed target and two of them claiming the space would split it. */
.store-credit .sc-right { margin-left: auto; display: inline-flex;
    align-items: center; gap: 16px; flex-wrap: wrap; }

/* THE FALLING BALL, on the undesigned storefront's credit as well (3 Oct
   2026). logo.css carries all of it -- rules, keyframes and guards -- and
   lists .sc-by among the surfaces it drives, generated with the lockup by
   Planning/steps/lhq-logo-build.js, so nothing is restated here. */
/* ===========================================================================
   storefront.css -- GENERATED by Planning/steps/buildV2Front.js.
   Do not edit. Edit storeFront.html in the harness and rebuild.

   The public store page, drawn from its section stack by
   V2StorefrontComponents. Scoped to .v2-front, which is that renderer's
   root -- so a store that has not been designed loads this sheet and
   matches nothing in it.
   =========================================================================== */
/* ---- the four moods ---------------------------------------------------
     Redefining tokens only. Nothing below this point knows a mood exists --
     it reads --ground and --text like it always did, which is the whole
     reason the page can be relit from one class. */
  .v2-front.mood-deep {
    --ground:#0c0d10; --band:#131519; --panel:#181b20; --panel-2:#1f232a;
    --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.05);
    --text:#eef1f6; --muted:#98a1ad; --dim:#6b7380; }

  .v2-front.mood-light {
    --ground:#f4f6f8; --band:#e9edf2; --panel:#ffffff; --panel-2:#f7f9fb;
    --line:rgba(16,24,32,.12); --line-2:rgba(16,24,32,.07);
    --text:#14181d; --muted:#525a64; --dim:#767f8a; }

  .v2-front.mood-paper {
    --ground:#f6f2ea; --band:#efe8dc; --panel:#fffdf9; --panel-2:#f9f5ee;
    --line:rgba(40,32,20,.14); --line-2:rgba(40,32,20,.08);
    --text:#201c16; --muted:#5c5348; --dim:#837a6d; }

  /* THE PAGE'S OWN TEXT, KEPT ASIDE. Three greys, whichever mood won
     above, so that something inside a section that has changed --text
     can get back to them -- a card on a dark band, today.

     It works because a custom property is substituted where it is
     DECLARED. These resolve against the --text that wins ON THIS
     ELEMENT, which is the mood's, and inherit down as that value. A band
     redefining --text below cannot reach back up and change them, which
     is exactly the property that makes them useful and is also the
     reason this reads like it should not work. */
  .v2-front { --page-text:var(--text); --page-muted:var(--muted);
    --page-dim:var(--dim); }

  /* ---- the guide's tokens, unchanged ------------------------------------ */
  .v2-front {
    --ground:#1c1c1c; --panel:#2a2a2a; --panel-2:#323232; --chrome:#003142;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.055);
    --text:#e9edf2; --muted:#98a1ad; --dim:#6f7885;
    --green:#2dc26b; --green-lit:#3ad47a; --brand:#3b82f6; --danger:#ed5565;
    --violet:#b58bff; --amber:#e0a33a; --heart:#ff6b81;
    --font:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;

    /* THE ONLY NEW ONES, and each is a shop rather than a tool.
       --band is a surface that is not a card: it separates a section from
       the one above it without drawing a box round it, which is the
       difference between a page of content and a page of panels.
       --cut is the app's angle, at this page's scale. */
    --band:#212121;

    /* THE MOOD IS ONE CHOICE, NOT SIX PICKERS.

       A creator wanting a lighter shop should not have to choose a page
       colour, a band colour, a panel colour and three text colours and hope
       they add up -- that is how a storefront ends up grey on grey. Each
       mood below moves the whole family together, and every one of them is
       legible because it was written that way rather than assembled.

       Dark is the default and is exactly what this page has always been, so
       a store that never touches this is untouched. */
    --cut:22px;
    --page:1120px;
    /* WHAT IS ALREADY PINNED ABOVE THIS PAGE, which is now nothing.

       This was 65px: the platform put a fixed navbar at the top of every
       public route and every sticky thing here had to start below it.
       That bar is no longer on a storefront -- see Output::setBareChrome()
       -- so the offset it existed for is an offset to nothing, and the
       jump bar was sticking 65px down the page with the store's own
       content sliding underneath the gap.

       The old comment said "if that bar ever changes height, this is the
       one number to move", which is exactly what happened; it changed to
       no height at all and I moved everything except this. */
    --top:0px;
    --gut:25px;
    color-scheme: dark;
  }
  .v2-front, .v2-front * { box-sizing:border-box; }
  .v2-front {
    margin:0; background:var(--ground); color:var(--text);
    font-family:var(--font); font-size:16px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  .v2-front img { max-width:100%; display:block; }
  /* a:link, NOT JUST a. The platform's own sheet sets link colour on
     `a, a:link, a:visited`, which is specificity (0,1,1) -- the same as a
     class plus an element, and it loads after this one. So a bare `a` here
     loses the tie and every product title on the storefront came out the
     theme's blue. Matching the pseudo-classes takes it to (0,2,1). */
  .v2-front a, .v2-front a:link, .v2-front a:visited { color:inherit; text-decoration:none; }

  .v2-front .in { max-width:var(--page); margin:0 auto; padding:0 var(--gut); }

  /* ---- the masthead -------------------------------------------------------
     WHOSE SHOP THIS IS, and it is not a section. It carries the angled cut
     off the app's top bar, which is the one place the two surfaces touch:
     the creator sees that shape above every screen they built this on.

     The mark is the store's picture, or its initials on a colour derived
     from its name -- the same fallback the stores grid draws, so a store
     without a photograph looks deliberate in both places rather than
     broken in one. */
  /* The base look. The block further down relights this from the store's
     own colour -- see "THE MASTHEAD IS THE STORE'S, NOT THE PLATFORM'S" --
     so these two rules are what a page falls back to, not what it shows. */
  .v2-front .mast { background:linear-gradient(97deg,#0f3d4a 0%,#0c3340 46%,#0a2733 100%);
    position:relative; overflow:hidden; }
  .v2-front .mast::after { content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(97deg,rgba(45,194,107,.16),rgba(45,194,107,0) 42%); }
  .v2-front .mast-in { max-width:var(--page); margin:0 auto; padding:26px var(--gut);
    display:flex; align-items:center; gap:18px; position:relative; z-index:1; }
  /* THE LOGO'S FRAME IS A CHOICE -- AND THE ANGLE IS THE FRAME.

     .mast-pic is clipped into a parallelogram below, the app's own angle at
     this page's scale. That clip is the outer silhouette, so a border-radius
     set under it rounds corners the clip then slices off: picking Circle
     drew a circle inside a slanted box, which is a frame within a frame and
     is precisely what it was.

     So each choice governs the silhouette, not the thing behind it.

     CIRCLE IS THE DEFAULT (28 Sep 2026, Martin: "all stores start out with
     that angled profile, which should probably be circle"). The slant is
     the platform's shape, not the creator's; a profile picture is a face or
     a logo, and both read as theirs in a circle. Angled stays as a choice
     (frame-angled), and a store that saved "circle" gets the same thing.
     The shape rules sit at the end of this sheet, after the layouts and the
     corner ladder that also size .mast-pic -- see "THE LOGO'S SHAPE, LAST". */
  .v2-front .mast-pic { width:66px; height:66px; border-radius:50%; flex:none;
    background:#14424f center/cover no-repeat; display:flex; align-items:center;
    justify-content:center; font-weight:900; font-size:23px; letter-spacing:.02em;
    color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.35); }
  .v2-front .mast h1 { margin:0; font-size:27px; font-weight:900; letter-spacing:-.01em;
    line-height:1.2; text-wrap:balance; }
  .v2-front .mast .meta { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
    margin-top:5px; color:rgba(255,255,255,.72); font-size:13px; }
  .v2-front .mast .meta .dot { width:3px; height:3px; border-radius:50%;
    background:currentColor; opacity:.6; }
  .v2-front .mast .stars { color:var(--amber); letter-spacing:.06em; }
  .v2-front .mast .share { margin-left:auto; }
  /* WHERE ELSE TO FIND THIS CREATOR, from the store's own settings rather
     than from a Links band somebody remembered to add.

     SMALLER AND QUIETER THAN THE BAND'S. Those are 44px circles because they
     are the content of a section a creator chose to place; these sit under a
     shop name as an aside, and a row of big buttons beside the title would
     read as the point of the masthead rather than a footnote to it. Same
     icons, deliberately different weight. */
  .v2-front .mast-social { display:flex; align-items:center; gap:6px; margin-top:9px; }
  .v2-front .mast-social a { width:30px; height:30px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.66); border:1px solid var(--line);
    transition:color .15s, border-color .15s; }
  .v2-front .mast-social a:hover { color:var(--text); border-color:rgba(255,255,255,.26); }
  .v2-front .mast-social svg { width:15px; height:15px; }
  @media (max-width:640px) {
    .v2-front .mast-in { flex-wrap:wrap; }
    .v2-front .mast .share { margin-left:0; width:100%; }
  }

  /* ---- the preview bar ----------------------------------------------------

     ONLY THE OWNER EVER SEES THIS, and it does two jobs. The obvious one
     is the way out: the designer opens this page in a new tab, and a new
     tab is a door with no handle on the inside.

     The other one matters more. A storefront preview is pixel for pixel
     the real page -- that is the point of it -- so there is nothing on it
     to tell a creator that what they are looking at is NOT what a customer
     gets. Somebody could reasonably close the tab believing they had
     published. The bar says so, in the one place they are already looking.

     Sticky, and it pushes the jump bar down by its own height through
     --peek rather than either of them guessing at the other. */
  .v2-front.is-preview { --peek:46px; }
  /* NOTHING IS PINNED ON A PHONE, the preview bar included. Sticky, it
     sat over the store name -- measured: bar 126 to 221, masthead
     starting at 156. Same reasoning as the jump bar below, and stated
     the same way round so there is no override to lose: pinning is what
     a wide screen gets, not what a narrow one has taken away. Scrolling
     up to leave a preview is a fair price for seeing whose shop it is. */
  .v2-front .v2-peek { position:static; z-index:30; background:#e0a33a; color:#20180a; }
  @media (min-width:641px) {
    .v2-front .v2-peek { position:sticky; top:var(--top); }
  }
  /* --peek IS THE HEIGHT, not a guess at it. It was a min-height with
     padding on top, so the bar came out 53px while the jump bar below was
     told to clear 46 -- and sat seven pixels inside it. One number, and
     the box is made to be that number rather than asked to be about it. */
  .v2-front .v2-peek-in { max-width:var(--page); margin:0 auto; padding:0 var(--gut);
    min-height:var(--peek); display:flex; align-items:center; gap:14px;
    flex-wrap:wrap; font-size:13.5px; font-weight:700; }
  .v2-front .v2-peek b { font-weight:900; }
  .v2-front .v2-peek .go { margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; }
  .v2-front .v2-peek a { display:inline-flex; align-items:center; min-height:34px;
    padding:6px 15px; border-radius:9px; font-size:13px; font-weight:700;
    border:1px solid rgba(32,24,10,.35); color:#20180a; }
  .v2-front .v2-peek a:hover { background:rgba(32,24,10,.1); }
  .v2-front .v2-peek a.solid { background:#20180a; color:#f6e7c8; border-color:#20180a; }
  .v2-front .v2-peek a.solid:hover { background:#000; }

  /* ---- the jump bar -------------------------------------------------------
     Sticky, because its whole job is to be reachable once you are eight
     bands down. It is the only sticky thing on the page. */
  /* STATIC BY DEFAULT AND STICKY WHEN THERE IS ROOM, rather than sticky
     with a phone exception. The exception version was written twice and
     lost both times -- a media query adds no specificity, so a later
     plain rule beat it and the bar stayed pinned over the store's name
     on a 375px screen. Stated this way round there is nothing to
     override and nothing to lose to.

     It is also the better rule on its own terms: a sticky strip of links
     eats scarce vertical space on the device with the least of it, to
     save a scroll on a page that is already shorter there. */
  .v2-front .jump { position:static; z-index:20; background:rgba(28,28,28,.92);
    backdrop-filter:blur(9px); border-bottom:1px solid var(--line); }
  @media (min-width:641px) {
    .v2-front .jump { position:sticky; top:var(--top); }
    .v2-front.is-preview .jump { top:calc(var(--top) + var(--peek)); }
  }
  .v2-front .jump-in { max-width:var(--page); margin:0 auto; padding:0 var(--gut);
    display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
  .v2-front .jump-in::-webkit-scrollbar { display:none; }
  /* THE BAR SCROLLS, SO IT HAS TO LOOK LIKE IT SCROLLS. Eight sections
     with written labels overflow a 1349px window, and with the scrollbar
     hidden the eighth was simply chopped mid-word -- "BEFORE YOU BU",
     which reads as a broken page rather than as more to the right.

     A mask rather than a gradient overlay, and left on permanently. The
     element paints no background of its own, so where the links do not
     reach the edge there is nothing for it to fade and it costs nothing;
     where they do, the last one softens out. The alternative -- a class
     toggled from scroll position -- needs script on a page that has none
     and would still be wrong for the first frame. */
  .v2-front .jump-in { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent); }
  .v2-front .jump a { padding:13px 12px; font-size:12px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
    white-space:nowrap; border-bottom:2px solid transparent; }
  .v2-front .jump a:hover { color:var(--text); }
  .v2-front .jump a.on { color:var(--text); border-bottom-color:var(--green); }
  /* MENU ARROWS (1 Oct 2026, Martin): on a mouse, a menu longer than its bar
     gets an arrow at each end with more behind it (bundleCards.js, which
     adds .js-steps only when the row overflows). The fade moves with them --
     on the end that hides something, nowhere else -- so it replaces the
     always-on fade above, and the inline layout's run-on into the margin. */
  .v2-front .jump.js-steps .jump-in, .v2-front.m-inline .jump.js-steps .jump-in {
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%); }
  .v2-front.m-inline .jump.js-steps .jump-in { margin-right:0; padding-right:0; }
  .v2-front .jump.can-l { --fl:52px; }
  .v2-front .jump.can-r { --fr:52px; }
  .v2-front .jump-step { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:30px; height:30px;
    border-radius:50%; border:1px solid var(--line); background:rgba(20,22,26,.92); color:var(--text);
    font:inherit; font-size:20px; line-height:1; padding:0 0 3px; cursor:pointer; display:flex;
    align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.35); }
  .v2-front .jump-step:hover { background:#000; border-color:var(--store, var(--green)); }
  .v2-front .jump-step[hidden] { display:none; }

  /* ---- five menus, and a different five on a phone -------------------------

     ONE MARKUP, TEN LAYOUTS. Everything below is a class on .v2-front and
     none of it changes what the renderer writes. That is not tidiness, it
     is what makes the choice instant in the designer: the preview's rule
     is that if the renderer would write different HTML it has to ask the
     renderer, and if it would only write a different class it must not.
     A menu style that needed its own markup would cost a round trip every
     time somebody tried the next one -- which is precisely when they are
     flicking through all five to see which they like.

     So three things are in the markup permanently, in order to be free:

       .top / .top-in        two wrappers that are display:contents, and so
                             have no box at all until one layout wants a row
       .jump-tick/.jump-tap  a checkbox and its label, hidden everywhere
                             except the phone's tap-to-open sheet

     WHY A CHECKBOX AND NOT <details>. <details> is the semantic answer and
     it is not a usable one here, because the desktop styles would have to
     undo it: a closed <details> hides its content through the UA
     stylesheet, and current browsers do not let CSS reliably force that
     open again -- Chrome moved it to ::details-content and content-
     visibility, which Firefox and Safari do not have yet. The markup has
     to mean "open" in nine of these ten layouts, so the thing that closes
     it has to be a state CSS owns. A checkbox is that. It keeps its own
     focus, it is operable from the keyboard, and it carries an aria-label
     because a bare tick box has no name.

     WHY display:contents MAKES THE WRAPPERS FREE. Both divs dissolve for
     layout, so the masthead and the jump bar stay exactly what they were
     -- direct participants in .v2-front's box. That matters twice: the
     phone order flexes them by name, and a sticky element cannot escape
     its parent's box, so a jump bar inside a real wrapper would unstick
     itself the moment the masthead above it scrolled away. */

  .v2-front .top, .v2-front .top-in { display:contents; }
  .v2-front .jump-tick, .v2-front .jump-tap { display:none; }

  /* ---- in line: name and links on one row --------------------------------
     The compact one, and the only layout that asks the wrappers for a real
     box. The whole header pins rather than just the links: at 64px it can
     afford to, and a name that scrolls away from its own menu reads as two
     headers rather than one.

     IT STOPS AT 761px and hands back to the stacked layout below that. A
     row carrying a shop's mark, its name and seven links has nowhere to go
     on a phone, and the phone has its own five choices further down. */
  @media (min-width:761px) {
    .v2-front.m-inline .top { display:block; position:sticky; top:var(--top);
      z-index:25; border-bottom:1px solid var(--line);
      background:linear-gradient(97deg,#0f3d4a 0%,#0c3340 46%,#0a2733 100%); }
    .v2-front.is-preview.m-inline .top { top:calc(var(--top) + var(--peek)); }
    .v2-front.m-inline .top-in { display:flex; align-items:center; gap:26px;
      max-width:var(--page); margin:0 auto; padding:0 var(--gut); }
    .v2-front.m-inline .mast { background:none; }
    .v2-front.m-inline .mast::after { display:none; }
    .v2-front.m-inline .mast-in { max-width:none; margin:0; padding:0;
      gap:12px; min-height:64px; }
    .v2-front.m-inline .mast-pic { width:38px; height:38px; border-radius:9px;
      font-size:15px; box-shadow:none; }
    .v2-front.m-inline .mast h1 { font-size:19px; }
    /* The rating and the count go. They are the masthead's furniture and
       this layout is not a masthead any more -- and neither fact is lost:
       the reviews band says both at length, further down the same page. */
    .v2-front.m-inline .mast .meta, .v2-front.m-inline .mast .share { display:none; }
    .v2-front.m-inline .jump { position:static; background:none;
      border-bottom:0; margin-left:auto; min-width:0; }
    .v2-front.m-inline .jump-in { max-width:none; margin:0; padding:0; }
    .v2-front.m-inline .jump a { padding:22px 9px; }
    /* THE FADE ON EMPTY SPACE, NOT ON A LINK (1 Oct 2026, Martin: "why does it
       look like this text starts fading at the end"). Here the links are
       pushed to the right edge, so the last one always sat under the mask
       above, overflowing or not. The row runs on into the page's side margin
       by that margin's width, and the fade covers only that run-on: links
       that fit end before it, links that do not still scroll under it. */
    .v2-front.m-inline .jump-in { padding-right:var(--gut); margin-right:calc(-1 * var(--gut));
      -webkit-mask-image:linear-gradient(to right, #000 calc(100% - var(--gut)), transparent);
      mask-image:linear-gradient(to right, #000 calc(100% - var(--gut)), transparent); }
    /* THE NAME, ITS LINKS AND FOLLOW ON ONE LINE (1 Oct 2026, Martin). Stacked,
       Follow sat under the social icons and hung over the bottom edge of a
       64px bar; beside the name it has the bar's height to sit in. */
    .v2-front.m-inline .mast-in > div:last-child { display:flex; align-items:center; gap:12px; min-width:0; }
    /* THE NAME KEEPS ITS ROOM (1 Oct 2026, Martin). With a long menu the mast
       shrank and its own overflow cut the social icons off under the links;
       now the name, icons and Follow stay whole and the menu takes what is
       left -- scrolling, with arrows on a desktop (MENU ARROWS below). */
    .v2-front.m-inline .mast { flex:none; max-width:55%; }
    .v2-front.m-inline .mast h1 { white-space:nowrap; }
    .v2-front.m-inline .mast-social, .v2-front.m-inline .mast-acts { margin-top:0; flex-wrap:nowrap; }
    .v2-front.m-inline .mast-acts .lhq-follow { padding:5px 12px; font-size:12.5px; }
  }

  /* ---- centred: the editorial one ----------------------------------------
     Mark, name and links stacked on the middle line.

     THE LINKS WRAP HERE RATHER THAN SCROLL, and that is not a preference.
     A centred flex row that overflows is centred on its own scroll width,
     so the first link starts off the left edge and cannot be reached by
     scrolling right -- the bar looks broken before it is touched. Wrapping
     cannot do that, and a store that chooses a centred menu has few enough
     sections for it to fit. */
  .v2-front.m-centre .mast-in { flex-direction:column; text-align:center;
    gap:13px; }
  .v2-front.m-centre .mast .meta { justify-content:center; }
  .v2-front.m-centre .mast .share { margin-left:0; }
  .v2-front.m-centre .jump-in { justify-content:center; flex-wrap:wrap;
    overflow:visible; -webkit-mask-image:none; mask-image:none; }

  /* ---- pills: the soft one ------------------------------------------------
     Chips rather than an underlined row. The current one takes the store's
     colour with the computed contrast on it -- the same pair as the buy
     button, because this is the other place on the page where a colour a
     creator picked ends up behind words. */
  .v2-front.m-pills .jump-in { padding-block:9px; gap:7px; }
  .v2-front.m-pills .jump a { padding:9px 15px; border-radius:999px;
    border-bottom:0; background:rgba(255,255,255,.055); letter-spacing:.06em; }
  .v2-front.m-pills .jump a:hover { background:rgba(255,255,255,.1); }
  .v2-front.m-pills .jump a.on { background:var(--store);
    color:var(--on-store,#fff); }

  /* ---- tabs: the filed one ------------------------------------------------
     Boxed, with the current tab joined to the page below it. The join is a
     one-pixel lie: the tab hangs a pixel over the bar's own bottom border
     and paints that pixel in the page's ground, so the box opens downward
     into the band instead of closing above it. */
  .v2-front.m-tabs .jump-in { gap:5px; align-items:flex-end; padding-top:10px; }
  .v2-front.m-tabs .jump a { padding:11px 17px; border:1px solid var(--line);
    border-bottom:0; border-radius:10px 10px 0 0;
    background:rgba(255,255,255,.03); margin-bottom:-1px; }
  .v2-front.m-tabs .jump a:hover { background:rgba(255,255,255,.07); }
  .v2-front.m-tabs .jump a.on { background:var(--ground); color:var(--text);
    border-bottom-color:transparent; }





  /* ---- a band -------------------------------------------------------------
     Alternating surfaces rather than cards. A store page is mostly its own
     content; boxing each part of it makes a dashboard. */
  .v2-front .band { padding:56px 0; }
  /* EVERY SECOND BAND, COUNTED BY THE STYLESHEET. This was a class the
     renderer wrote onto alternate bands, which made reordering a page
     rewrite nearly all of its own markup -- move the second band to the
     end and every band after it changes class. The bands are the only
     <section> elements inside .v2-front (the masthead, the jump bar, the
     preview strip and the footer are divs and a footer), so counting
     them by type is exact, costs nothing, and survives a move. */
  /* EVERY SECOND ONE, STILL, AND ONLY WHEN NOBODY HAS SAID OTHERWISE.
     nth-of-type keeps doing the alternating by itself -- move a section and
     the stripes re-flow with no class to rewrite, which is why it was done
     this way. A creator who sets a tone on a section is overriding that for
     that one section, and the override has to outrank it: this selector is
     one class and one pseudo-class, so the tones below carry two classes and
     the scope to be sure of it. */
  .v2-front .band:nth-of-type(even) { background:var(--band); }

  /* Plain, banded, wearing the store's colour, or the masthead's own
     sweep. --store-wash is set in tint() alongside the masthead stops,
     from the same hex.

     TINTED AND FEATURED ARE THE SAME THING. It was Featured here and
     Tinted on the foot, for one colour, because the two settings were
     written a week apart -- and the comment on the foot claimed they
     shared their words. The panel says Tinted in both places now, and
     the renderer keeps answering to the old word so nothing saved under
     it is lost.

     Deep is dark whatever the mood, like the masthead and the foot it
     borrows from, so it carries light text for the same reason they do. */
  .v2-front .band.tone-plain { background:transparent; }
  .v2-front .band.tone-band { background:var(--band); }
  .v2-front .band.tone-feature { background:var(--store-wash,var(--band)); }
  .v2-front .band.tone-deep { background:var(--head-wash);
    border-top-color:transparent;
    --text:#f4f7fa; --muted:rgba(255,255,255,.80); --dim:rgba(255,255,255,.64);
    color:var(--text); }

  /* AND THE TEXT, when the background it is on is not the page's.

     Three answers, not a colour well. Automatic is the default and is
     nothing at all -- the tone already decided it, and every tone but
     Deep leaves the section on the page's own ground. The other two are
     for a section whose background came from somewhere this stylesheet
     cannot see, which today is Deep on an unusually pale store colour
     and tomorrow is a banner image.

     A free text colour here would be the one setting on this page that
     can make a section unreadable in a way nothing computes its way out
     of, which is the argument the section tones were written with and it
     has not changed. */
  .v2-front .band.text-light { --text:#f4f7fa;
    --muted:rgba(255,255,255,.80); --dim:rgba(255,255,255,.64);
    color:var(--text); }
  .v2-front .band.text-dark { --text:#14181d; --muted:#525a64; --dim:#767f8a;
    color:var(--text); }

  /* A PANEL KEEPS THE PAGE'S TEXT WHATEVER THE BAND AROUND IT IS DOING.

     A card's background is --panel and --panel comes from the mood, not
     from the band, so a light-text section would otherwise put white
     product names on white cards. --page-* is declared once on the root,
     below the moods; a custom property is substituted where it is
     DECLARED, so a band redefining --text underneath cannot reach back up
     and change what --page-text resolved to. That is the whole mechanism,
     and it is why this is one unconditional rule rather than one per
     tone. */
  .v2-front .card, .v2-front .bundle {
    --text:var(--page-text); --muted:var(--page-muted); --dim:var(--page-dim);
    color:var(--page-text); }

  /* AND WHAT A CARD IS FILLED WITH -- bundles included, because to a
     customer they are the same object and setting the two apart is not
     a choice worth offering.

     Filled is the default and is --panel, the surface the mood hands
     out. Plain drops the fill and keeps the border, which on a light
     page is a much airier grid than a wall of white boxes. Tinted is
     the store's colour at the alpha a section's Tinted uses, so the two
     agree. Deep is the masthead's wash -- and because it reads
     --head-wash rather than restating the gradient, a solid header
     gives solid cards without this rule knowing that setting exists.

     DEEP HAS TO UNDO THE RESET DIRECTLY ABOVE. That rule sends a card
     back to the page's text, which is what stops a light-text band
     putting white product names on white cards. A card that is ITSELF
     dark wants the opposite, so this outranks it by a class. The border
     goes light with it: --line is drawn for the page's ground, and on a
     near-black card it disappears. */
  .v2-front.cards-plain .card, .v2-front.cards-plain .bundle {
    background:transparent; }
  .v2-front.cards-tint .card, .v2-front.cards-tint .bundle {
    background:var(--store-wash,var(--panel)); }
  .v2-front.cards-deep .card, .v2-front.cards-deep .bundle {
    background:var(--head-wash); border-color:rgba(255,255,255,.14);
    --text:#f4f7fa; --muted:rgba(255,255,255,.80); --dim:rgba(255,255,255,.64);
    color:var(--text); }

  /* A REVIEW OR A QUESTION CAN BE A BOX TOO.

     Neither is one now, and that was deliberate: a review is a quote and
     reads better against the page than inside a panel, and the questions
     are an accordion where a hairline is the whole separation. But a shop
     whose products are tinted cards and whose reviews are bare quotes was
     this stylesheet's decision, not the creator's.

     PER SECTION RATHER THAN WITH THE PAGE'S CARDS, because these are the
     only two sections it can apply to and neither default is "no fill" --
     one is a rule down the side and the other a rule underneath. Those
     are different things, and both are worth keeping as the first choice
     rather than collapsing into the products' Filled.

     --item-on carries the text because Deep is dark in every mood and the
     page's own would vanish on it. The same problem a Deep card has, and
     the same answer. */
  .v2-front .band.fill-boxed { --item-bg:var(--panel); --item-on:var(--page-text); }
  .v2-front .band.fill-tint { --item-bg:var(--store-wash,var(--panel));
    --item-on:var(--page-text); }
  .v2-front .band.fill-deep { --item-bg:var(--head-wash); --item-on:#f4f7fa; }

  .v2-front .band:is(.fill-boxed,.fill-tint,.fill-deep) .rev, .v2-front .band:is(.fill-boxed,.fill-tint,.fill-deep) .q, .v2-front .band:is(.fill-boxed,.fill-tint,.fill-deep) .q-flat, .v2-front .band:is(.fill-boxed,.fill-tint,.fill-deep) .about {
    background:var(--item-bg); color:var(--item-on);
    border:1px solid var(--line); border-radius:var(--r-panel); }
  .v2-front .band:is(.fill-boxed,.fill-tint,.fill-deep) .rev { padding:17px 19px; }
  .v2-front .band:is(.fill-boxed,.fill-tint,.fill-deep) .q { padding:0 19px; }
  .v2-front .band:is(.fill-boxed,.fill-tint,.fill-deep) .q-flat { padding:15px 19px; }
  /* THE ABOUT BAND TAKES THE BOX ROUND ALL OF IT, picture included --
     boxing the words and leaving the photograph floating beside them
     reads as a mistake rather than a layout. More padding than the
     others because it is one panel rather than one of a row of them,
     and it holds a picture at 300px. */
  .v2-front .band:is(.fill-boxed,.fill-tint,.fill-deep) .about {
    padding:26px 28px; }
  /* AND A LINK IS A CIRCLE, SO IT KEEPS ITS OWN SHAPE. Only the fill and
     the mark inside it change; the 50% radius, the size and the border
     are what make it a link rather than a chip.

     NOTHING SETS THIS YET. The storefront does not draw a links band at
     all -- section() returns an empty string for links and for signup --
     so the designer offers no Fill for it and this rule waits with the
     .links block above, which was written just as far ahead. */
  .v2-front .band:is(.fill-boxed,.fill-tint,.fill-deep) .links a {
    background:var(--item-bg); color:var(--item-on); }
  /* The hairline WAS the separation. Boxes need air instead, and the
     questions were a plain column with neither. */
  .v2-front .band:is(.fill-boxed,.fill-tint,.fill-deep) .qs {
    display:flex; flex-direction:column; gap:10px; }
  /* On Deep the two greys go with the text -- the attribution under a
     quote and the answer under a question are both --muted, and --muted
     is drawn for the page's ground. */
  .v2-front .band.fill-deep .rev, .v2-front .band.fill-deep .q, .v2-front .band.fill-deep .q-flat, .v2-front .band.fill-deep .about {
    --muted:rgba(255,255,255,.80); --dim:rgba(255,255,255,.64); }
  .v2-front .band + .band { border-top:1px solid var(--line-2); }

  /* THE FOOT GETS THE SAME QUESTION, and three of the four answers are the
     same three words, so the two settings are not learned twice. Dark is
     the default and is the near-black strip the foot has always been.

     Deep is the fourth and is why this exists: it is the masthead's own
     sweep, so the page ends on what it opened with, and it is the one
     place the second colour reaches outside the hero. Its text is written
     light for the reason the head's is -- that sweep is dark in every
     mood and --dim is not. */
  .v2-front.foot-plain .foot { background:transparent; }
  .v2-front.foot-band .foot { background:var(--band); }
  .v2-front.foot-tint .foot { background:var(--store-wash,var(--band)); }
  .v2-front.foot-deep .foot { background:var(--head-wash);
    border-top-color:transparent; }
  .v2-front.foot-deep .foot-in { color:rgba(255,255,255,.66); }
  .v2-front.foot-deep .foot .foot-by { color:rgba(255,255,255,.88); }
  /* LIGHT (4 Oct 2026, Martin: "make sure they can also do a light
     version"). A pale strip with dark words, whatever the page's mood --
     the lockup's LEARNERS follows the words (currentColor), its mark and
     HQ keep their own colours, and the currency box goes light with it. */
  .v2-front.foot-light .foot { background:#f3f3f1; border-top-color:rgba(0,0,0,.08); }
  .v2-front.foot-light .foot-in { color:#5b6370; }
  .v2-front.foot-light .foot .foot-by { color:#3d444d; }
  .v2-front.foot-light .foot .foot-by:hover, .v2-front.foot-light .foot .foot-t:hover { color:#111; }
  .v2-front.foot-light .foot .lhq-foot-cur { color:#5b6370; }
  .v2-front.foot-light .foot .lhq-foot-cur select { background:#fff; color:#161616;
    border-color:rgba(0,0,0,.16); color-scheme:light; }

  /* The eyebrow, and the stairs. Three ascending strokes: the logo's climb
     at punctuation size. */
  .v2-front .eye { display:flex; align-items:flex-end; gap:11px; margin:0 0 6px; }
  .v2-front .eye span { font-size:11.5px; font-weight:700; letter-spacing:.11em;
    text-transform:uppercase; color:var(--green); }
  .v2-front .band h2 { margin:0 0 4px; font-size:24px; font-weight:900;
    letter-spacing:-.01em; text-wrap:balance; }
  .v2-front .band .lede { margin:0 6px 26px 0; color:var(--muted); max-width:62ch; }
  /* A HEADING NEEDS AIR UNDER IT, and it had four pixels. The h2 carries
     a small bottom margin because the lede sits tight beneath it -- and
     most bands have no lede, so the cards were landing four pixels below
     the word Products. The gap belongs to whatever follows rather than
     to the heading, so the two cases can differ: close for a lede it is
     introducing, open for the content it is labelling. */
  .v2-front .band > .in > h2 + * { margin-top:24px; }
  /* PAST A HIDDEN FIELD (1 Oct 2026, Martin). The bundle band puts the
     checkout token straight after its heading, so the field took the 24px
     and the cards sat close under "Bundles" while the products band gave
     its finder the full gap. */
  .v2-front .band > .in > h2 + input[type="hidden"] + * { margin-top:24px; }
  .v2-front .band > .in > h2 + input[type="hidden"] + .lede { margin-top:7px; }
  .v2-front .band > .in > h2 + .lede { margin-top:7px; }
  .v2-front .band .lede:last-child { margin-bottom:0; }
  .v2-front .count { color:var(--dim); font-weight:400; font-size:.62em;
    font-variant-numeric:tabular-nums; }

  /* ---- buttons ------------------------------------------------------------
     The guide's 9px radius. One green per screenful: the buy. */
  .v2-front .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font); font-size:14px; font-weight:700; padding:11px 20px;
    border-radius:9px; border:1px solid transparent; cursor:pointer;
    min-height:44px; transition:background .15s,border-color .15s,color .15s; }
  .v2-front .btn-go { background:var(--green); color:#fff; }
  .v2-front .btn-go:hover { background:var(--green-lit); }
  .v2-front .btn-ghost { background:transparent; border-color:var(--line); color:var(--text); }
  .v2-front .btn-ghost:hover { border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.04); }
  .v2-front .btn-lg { font-size:16px; padding:14px 28px; }
  .v2-front .btn:focus-visible { outline:2px solid var(--green-lit); outline-offset:3px; }

  /* ---- the hero -----------------------------------------------------------
     THE ONLY PLACE A PICTURE GOES FULL WIDTH. Three heights, because a
     store with a photograph wants room for it and a store with a sentence
     does not. The angled cut runs down the left, the same 16 degrees. */
  .v2-front .hero { position:relative; overflow:hidden; border-radius:14px;
    background:#16333d center/cover no-repeat;
    display:flex; align-items:center; }
  .v2-front .hero.is-short { min-height:190px; }
  .v2-front .hero.is-medium { min-height:310px; }
  .v2-front .hero.is-tall { min-height:440px; }
  .v2-front .hero::before { content:""; position:absolute; inset:0;
    background:linear-gradient(100deg,rgba(10,26,32,.93) 0%,rgba(10,26,32,.72) 48%,rgba(10,26,32,.35) 100%); }
  /* 640px AND NOT 56ch, and the unit is the whole of the bug.

     `ch` is measured against the element's own font size, and this element
     is 16px -- so 56ch was about 450px of room for a headline set at up to
     46px. Nineteen characters. "Record the outdoors" did not fit on one
     line at any window width, which is why the hero always came out three
     lines deep and why letting a creator choose the break did nothing: the
     break they wanted was already being forced on them one word earlier.

     A measure is a promise about how many words are on a line, so it has
     to be stated in the units of the text it is measuring. The headline
     gets room in pixels; the paragraph keeps a proper reading measure of
     its own below, in ch of ITS size, where ch means something. */
  .v2-front .hero-in { position:relative; padding:44px 46px; max-width:min(640px, 72%); }
  /* BALANCED LIKE EVERY OTHER HEADING ON THE PAGE, which this one was not.
     The store name, the band headings and the product titles all balance;
     the hero -- the biggest type here and the one sentence anybody reads
     before deciding whether to stay -- wrapped wherever the measure ran
     out, which is how "Record the outdoors without the hiss" ended up with
     "without the hiss" alone on a third line. Nobody chose that. */
  .v2-front .hero h2 { font-size:clamp(28px,4.4vw,46px); line-height:1.1; margin:0;
    font-weight:900; letter-spacing:-.02em; text-wrap:balance; }
  /* AND A BREAK THE CREATOR TYPED IS A DESKTOP BREAK. It was chosen against
     a wide hero; at 375px three words already fill the line, so honouring
     it there would be honouring a decision made about a different screen.
     The break is dropped and the words re-wrap, which is what balance is
     for. */
  @media (max-width:620px) {
    .v2-front .hero h2 br.wide { display:none; }
  }
  /* The sentence under it keeps a reading measure, in ch of its own size,
     where ch is the right unit -- it is running text rather than a title.
     Without this it would inherit the headline's 640px and run to eighty
     characters a line. */
  .v2-front .hero p { margin:14px 0 0; font-size:17px; color:rgba(233,237,242,.86);
    max-width:48ch; }
  .v2-front .hero .btn { margin-top:24px; }
  @media (max-width:620px) { .v2-front .hero-in { padding:30px 24px; } }
  /* PHONE NOTE: the measure cap comes off down there as well, but it has
     to be lifted after the centred rule further down or it loses to it --
     a media query carries no extra specificity. See the end of the hero
     rules below. */

  /* ---- the blog (29 Sep 2026) ---------------------------------------------
     /stores/Store-Name/blog/ and one post, drawn by V2BlogComponents inside
     this same wrapper -- so every rule here reads the store's own colours,
     type and corners, and changing the store's design changes its blog.

     THE POST IS A READING COLUMN, not the page's full width: about 70
     characters a line is what a paragraph wants, whatever the screen. */
  .v2-front .post-card .post-link { display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
  .v2-front .post-card .post-link:hover h3 { text-decoration:underline; text-underline-offset:3px; }
  .v2-front .post-art { background-size:cover; background-position:center; }
  .v2-front .post-art.is-plain { display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--store) 22%, var(--panel)); }
  .v2-front .post-art.is-plain span { font-size:42px; font-weight:900; color:var(--store); opacity:.75; }
  .v2-front .post-meta { margin:0 0 6px; font-size:12.5px; color:var(--dim); }
  .v2-front .blog-front .blog-head { margin-bottom:22px; }
  .v2-front .blog-head h1 { margin:0; font-family:var(--font-head); font-size:clamp(28px, 4vw, 40px); line-height:1.1; }
  .v2-front .blog-head p { margin:6px 0 0; color:var(--muted); }
  .v2-front .blog-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
  .v2-front .blog-tags a { padding:6px 13px; border-radius:999px; border:1px solid var(--line); color:var(--muted);
    font-size:13px; font-weight:700; text-decoration:none; }
  .v2-front .blog-tags a:hover { color:var(--text); border-color:var(--muted); }
  .v2-front .blog-tags a.on { background:var(--store); border-color:var(--store); color:var(--on-store); }
  .v2-front .blog-none { color:var(--muted); padding:30px 0; }
  /* The lead: one post, large, the argument for reading one thing. */
  .v2-front .blog-lead { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px; align-items:center;
    margin-bottom:34px; color:inherit; text-decoration:none; }
  .v2-front .blog-lead-art { aspect-ratio:16/10; border-radius:var(--r-art); background:#1f2a2e center/cover no-repeat; }
  .v2-front .blog-lead h2 { margin:8px 0 10px; font-family:var(--font-head); font-size:clamp(24px, 3vw, 34px); line-height:1.15; }
  .v2-front .blog-lead:hover h2 { text-decoration:underline; text-underline-offset:4px; }
  .v2-front .blog-lead p { color:var(--muted); margin:0 0 10px; }
  .v2-front .blog-pin { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--store); }
  .v2-front .blog-lead:not(:has(.blog-lead-art)) { grid-template-columns:minmax(0,1fr); }
  @media (max-width:760px) { .v2-front .blog-lead { grid-template-columns:minmax(0,1fr); gap:14px; } }

  /* One post. */
  .v2-front .blog-progress { position:sticky; top:var(--top); z-index:25; height:3px; background:transparent; }
  .v2-front .blog-progress i { display:block; height:100%; width:0; background:var(--store); transition:width .1s linear; }
  .v2-front .blog-post .in { max-width:760px; }
  .v2-front .blog-crumb { margin:0 0 18px; font-size:13.5px; }
  .v2-front .blog-crumb a { color:var(--muted); text-decoration:none; }
  .v2-front .blog-crumb a:hover { color:var(--text); }
  .v2-front .blog-post-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
  .v2-front .blog-post-tags a { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--store);
    text-decoration:none; }
  .v2-front .blog-post-head h1 { margin:0 0 12px; font-family:var(--font-head); font-size:clamp(30px, 4.6vw, 46px); line-height:1.1;
    letter-spacing:-.01em; }
  .v2-front .blog-standfirst { font-size:clamp(17px, 2vw, 20px); line-height:1.5; color:var(--muted); margin:0 0 14px; }
  .v2-front .blog-cover { margin:24px 0 28px; }
  .v2-front .blog-cover img { display:block; width:100%; height:auto; border-radius:var(--r-art); }
  .v2-front .blog-toc { margin:0 0 28px; padding:14px 18px; border:1px solid var(--line); border-radius:var(--r-panel); }
  .v2-front .blog-toc summary { cursor:pointer; font-weight:800; }
  .v2-front .blog-toc ol { margin:10px 0 0; padding-left:1.3em; }
  .v2-front .blog-toc li { margin:5px 0; }
  .v2-front .blog-toc a { color:var(--muted); text-decoration:none; }
  .v2-front .blog-toc a:hover { color:var(--text); text-decoration:underline; }
  /* TWO CLASSES, because the About rules below use the same element as
     .about-words and come later: at equal weight they won, and the post
     wrapped at 64 characters in 14px type. */
  .v2-front .about-words.blog-body { font-size:17.5px; line-height:1.7; }
  .v2-front .about-words.blog-body p, .v2-front .about-words.blog-body ul, .v2-front .about-words.blog-body ol, .v2-front .about-words.blog-body blockquote { max-width:none; font-size:inherit; }
  .v2-front .about-words.blog-body p { margin:0 0 1.1em; }
  .v2-front .about-words.blog-body h2 { margin:1.6em 0 .5em; }
  /* A LINKED SECTION STOPS BELOW THE STICKY MENU, not under it (29 Sep 2026,
     Martin: "the section links jump to the top"). They did land on the
     section -- with its heading hidden behind the 49px store menu, which
     reads as a link that went nowhere. Nothing reserved that space, so the
     storefront's own menu links (#sec-products and the rest) did the same.
     The menu's height plus room to breathe; it is taller only on a phone
     with the menu open, when nobody is following a link. */
  .v2-front .band[id], .v2-front .about-words [id] { scroll-margin-top:calc(var(--top) + 76px); }
  .v2-front .about-words.blog-body blockquote { font-size:1.12em; font-style:italic; border-left-color:var(--store); }
  .v2-front .about-words.blog-body table { font-size:.9em; }
  .v2-front .blog-products { margin:40px 0 10px; padding-top:28px; border-top:1px solid var(--line); }
  .v2-front .blog-products h2 { margin:0 0 16px; font-family:var(--font-head); font-size:22px; }
  .v2-front .blog-share { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:34px 0 0; padding-top:20px;
    border-top:1px solid var(--line); }
  .v2-front .blog-share span { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
    margin-right:4px; }
  .v2-front .blog-share a, .v2-front .blog-share button { padding:7px 13px; border-radius:var(--r-btn); border:1px solid var(--line);
    background:none; color:var(--text); font:inherit; font-size:13px; font-weight:700; text-decoration:none; cursor:pointer; }
  .v2-front .blog-share a:hover, .v2-front .blog-share button:hover { border-color:var(--muted); }
  .v2-front .blog-more h2 { margin:0 0 18px; font-family:var(--font-head); font-size:24px; }
  /* The store section's way on to the rest. */
  .v2-front .blog-all { margin:18px 0 0; }
  .v2-front .blog-all a { font-weight:800; color:var(--store); text-decoration:none; }
  .v2-front .blog-all a:hover { text-decoration:underline; text-underline-offset:3px; }

  /* THE CARD, A LITTLE MORE (3 Oct 2026, Martin: "figure out what those cards
     look like ... improve them"). Topic first, then the title, the summary,
     and the date, read time and talk at the foot -- what it is about before
     what it is called. A post not everyone may read carries a lock on its
     picture, so nobody opens it expecting all of it. */
  .v2-front .post-art { position:relative; }
  .v2-front .post-card .card-body { display:flex; flex-direction:column; flex:1; }
  .v2-front .post-topic { margin:0 0 6px; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--store); }
  .v2-front .post-card h3 { margin:0 0 8px; }
  .v2-front .post-card .post-excerpt { margin:0 0 12px; color:var(--muted); }
  .v2-front .post-card .post-meta { margin:auto 0 0; padding-top:4px; }
  .v2-front .post-access { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.04em;
    padding:4px 9px; border-radius:999px; background:rgba(0,0,0,.66); color:#fff; }
  .v2-front .post-art .post-access { position:absolute; left:10px; top:10px; }
  .v2-front .blog-lead .post-access { margin-left:8px; background:var(--store); color:var(--on-store); vertical-align:2px; }

  /* WHERE A POST STOPS (3 Oct 2026, Martin: "you can't get access to blog
     posts unless you paid"). The opening fades out rather than ending on a
     line, and the way in sits right under it, in the store's colours. The
     rest of the post is never sent, so nothing here hides anything. */
  .v2-front .about-words.blog-body.is-teaser { -webkit-mask-image:linear-gradient(#000 55%, transparent);
    mask-image:linear-gradient(#000 55%, transparent); }
  .v2-front .blog-gate { margin:6px 0 26px; padding:28px 26px; border:1px solid var(--line); border-radius:var(--r-panel);
    background:color-mix(in srgb, var(--store) 10%, var(--panel)); text-align:center; }
  .v2-front .blog-gate > svg { color:var(--store); }
  .v2-front .blog-gate h2 { margin:8px 0 8px; font-family:var(--font-head); font-size:clamp(21px, 2.6vw, 26px); line-height:1.2; }
  .v2-front .blog-gate p { margin:0 auto; max-width:46ch; color:var(--muted); }
  .v2-front .blog-gate-go { margin-top:16px; display:flex; justify-content:center; }
  /* The Follow button in the box: the store's own colour, as big as the
     reason the box is there. */
  .v2-front .blog-gate .lhq-follow { display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:var(--r-btn);
    border:1px solid var(--store); background:var(--store); color:var(--on-store); font:inherit; font-size:15px;
    font-weight:800; text-decoration:none; cursor:pointer; }
  .v2-front .blog-gate .lhq-follow.is-on { background:transparent; color:var(--text); border-color:var(--line); }
  .v2-front .blog-gate .lhq-follow.is-sample { cursor:default; opacity:.85; }
  .v2-front .blog-gate-in { margin-top:14px !important; font-size:14px; }
  .v2-front .blog-gate-in a { color:var(--store); font-weight:800; text-decoration:none; }
  .v2-front .blog-gate-in a:hover { text-decoration:underline; }
  .v2-front .blog-gate-cards { margin:0 0 24px; }
  .v2-front .blog-gate-links { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 26px; }
  .v2-front .blog-gate-link { padding:9px 15px; border-radius:var(--r-btn); background:var(--store); color:var(--on-store);
    font-weight:800; text-decoration:none; }
  .v2-front .blog-gate-link:hover { filter:brightness(1.08); }
  /* FOR THE WRITER (3 Oct 2026, Martin: as the creator the page was "a
     little bit confusing"): who it is for, a switch to see it as a visitor
     does, and -- in their own view -- a line in the post where a visitor's
     reading stops. */
  .v2-front .blog-access-note { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0 0 22px; padding:11px 14px;
    border-radius:var(--r-panel); border:1px solid color-mix(in srgb, var(--store) 45%, var(--line));
    background:color-mix(in srgb, var(--store) 8%, transparent); font-size:13.5px; color:var(--muted); }
  .v2-front .blog-access-note span { flex:1 1 260px; }
  .v2-front .blog-access-note b { color:var(--text); }
  .v2-front .blog-access-note a { flex:none; padding:6px 12px; border-radius:var(--r-btn); background:var(--store); color:var(--on-store);
    font-weight:800; text-decoration:none; }
  .v2-front .blog-cut { position:relative; margin:1.6em 0; text-align:center; font-size:12.5px; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; color:var(--store); }
  .v2-front .blog-cut::before { content:''; position:absolute; left:0; right:0; top:50%; border-top:2px dashed var(--store); }
  .v2-front .blog-cut span { position:relative; padding:0 12px; background:var(--ground); }

  /* COMMENTS (3 Oct 2026, Martin: "comments on posts ... needs to be built
     regardless"). Under the share row, in the reading column. The creator
     writes as the store, with a badge in the store's colour. */
  .v2-front .blog-comments { margin:40px 0 0; padding-top:26px; border-top:1px solid var(--line); }
  .v2-front .blog-comments h2 { margin:0 0 16px; font-family:var(--font-head); font-size:22px; }
  .v2-front .blog-comments .pc-n { color:var(--dim); font-weight:700; font-size:.8em; }
  .v2-front .blog-comments .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .v2-front .pc-form { margin:0 0 20px; }
  .v2-front .pc-form textarea { width:100%; box-sizing:border-box; padding:11px 13px; border-radius:var(--r-panel); border:1px solid var(--line);
    background:var(--panel); color:var(--text); font:inherit; font-size:15px; resize:vertical; min-height:52px; }
  .v2-front .pc-form textarea:focus { outline:none; border-color:var(--store); }
  .v2-front .pc-form-foot { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:8px; }
  .v2-front .pc-as { margin-right:auto; font-size:12.5px; color:var(--dim); }
  .v2-front .pc-send { padding:8px 16px; border-radius:var(--r-btn); border:0; background:var(--store); color:var(--on-store);
    font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
  .v2-front .pc-send:disabled { opacity:.5; cursor:default; }
  .v2-front .pc-note, .v2-front .pc-none { color:var(--muted); font-size:14.5px; }
  .v2-front .pc-note a { color:var(--store); font-weight:800; text-decoration:none; }
  .v2-front .pc-say { margin:-10px 0 14px; font-size:13.5px; color:var(--store); font-weight:700; }
  .v2-front .pc-list, .v2-front .pc-replies { list-style:none; margin:0; padding:0; }
  .v2-front .pc-list > .pc { padding:16px 0; border-top:1px solid var(--line); }
  .v2-front .pc-list > .pc:first-child { border-top:0; }
  .v2-front .pc-list > .pc.is-pinned { padding:16px; margin-bottom:6px; border:1px solid var(--line); border-radius:var(--r-panel);
    background:color-mix(in srgb, var(--store) 7%, transparent); }
  .v2-front .pc-replies { margin:12px 0 0 18px; padding-left:16px; border-left:2px solid var(--line); }
  .v2-front .pc-replies > .pc + .pc { margin-top:14px; }
  .v2-front .pc-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; }
  .v2-front .pc-who { font-weight:800; }
  .v2-front .pc-head time { color:var(--dim); font-size:12.5px; }
  .v2-front .pc-badge { font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px;
    border-radius:999px; background:var(--store); color:var(--on-store); }
  .v2-front .pc-pin { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--store); }
  .v2-front .pc-flag { font-size:11.5px; font-weight:800; color:#ed5565; }
  .v2-front .pc-text { margin:6px 0 8px; line-height:1.6; overflow-wrap:anywhere; }
  .v2-front .pc-gone { margin:0; color:var(--dim); font-style:italic; font-size:14px; }
  .v2-front .pc-acts, .v2-front .pc-why { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
  .v2-front .pc-why { margin:6px 0 0; font-size:13px; color:var(--muted); }
  .v2-front .pc-why span { margin-right:4px; }
  .v2-front .pc-act { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:7px; border:0; background:none;
    color:var(--muted); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
  .v2-front .pc-act:hover:not(:disabled) { color:var(--text); background:color-mix(in srgb, var(--text) 8%, transparent); }
  .v2-front .pc-act:disabled { cursor:default; }
  .v2-front .pc-act.pc-like.on { color:#ed5565; }
  .v2-front .pc-act em { font-style:normal; }
  .v2-front .pc-act .sr, .v2-front .pc-like em { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .v2-front .pc-reply-form { margin:10px 0 0; }
  /* A POST READ OVER THE STORE (28 Sep 2026, Martin): almost the whole
     screen, the store dimmed round the edge, the way out in the top right
     corner. Inside the store's wrapper, so it wears the store's colours
     and type like the post page does. Whole screen on a phone, where an
     edge of dimmed store is only lost reading width. The z-index clears
     the app's rail and top bar for a signed-in reader. */
  .v2-front .post-modal { position:fixed; inset:0; z-index:100000; display:flex; padding:18px;
    background:rgba(0,0,0,.62); }
  .v2-front .post-modal[hidden] { display:none; }
  .v2-front .post-modal-box { position:relative; flex:1; min-width:0; display:flex; flex-direction:column;
    background:var(--ground); color:var(--text); border-radius:var(--r-panel); overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.45); }
  .v2-front .post-modal-body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:38px 0 30px; outline:none; }
  .v2-front .post-modal-body .band { padding-top:0; }
  .v2-front .post-modal-x { position:absolute; top:14px; right:16px; z-index:2; width:42px; height:42px;
    display:flex; align-items:center; justify-content:center; border-radius:999px;
    border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; }
  .v2-front .post-modal-x:hover { border-color:var(--muted); }
  .v2-front .post-modal-wait { text-align:center; color:var(--muted); padding:60px 0; }
  @media (max-width:620px) {
    .v2-front .post-modal { padding:0; }
    .v2-front .post-modal-box { border-radius:0; }
    .v2-front .post-modal-body { padding-top:62px; }
  }

  /* ---- about --------------------------------------------------------------
     Two columns and a reading measure. The picture is a portrait because
     this band is the person, not the product. */
  /* THE WORDS WRAP THE PICTURE (28 Sep 2026, Neil). This was two grid
     columns, so a long About left the picture's column empty for as far
     down as the words went -- a tall blank strip beside the text. The
     picture floats in its corner now and the words run beside it and then
     under it at full width. Short words look exactly as they did; long
     ones leave no gap. Nothing measures the text to decide. */
  .v2-front .about { display:flow-root; }
  .v2-front .about-pic { float:left; width:300px; margin:0 34px 16px 0; }
  .v2-front .about.flip .about-pic { float:right; margin:0 0 16px 34px; }
  .v2-front .about-pic img { border-radius:12px; display:block; width:100%; }
  /* A list or a quote beside the picture moves over as a whole block;
     wrapped, its bullets or its rule would be drawn under the photograph. */
  .v2-front .about-words ul, .v2-front .about-words ol, .v2-front .about-words blockquote { display:flow-root; }
  /* THE READING WIDTH IS THE BAND'S, not each paragraph's. A paragraph's
     64ch is measured from its own left edge, which is behind the picture,
     so beside the picture only a sliver was left. The band is the picture,
     the gap and a reading measure; the words fill it. */
  .v2-front .about:not(.wide) { max-width:calc(334px + 64ch); }
  .v2-front .about:not(.wide) .about-words :is(p, ul, ol, blockquote) { max-width:none; }
  .v2-front .about-words p { margin:0 0 14px; max-width:64ch; }
  .v2-front .about-words p:last-child { margin-bottom:0; }
  /* What the rich text editor can make (28 Sep 2026), here and in answers. */
  .v2-front .about-words h2 { margin:24px 0 10px; font-size:1.4em; font-weight:800; }
  .v2-front .about-words h3, .v2-front .q-a h3 { margin:20px 0 8px; font-size:1.15em; font-weight:800; }
  /* Full mode's pictures, dividers and videos (28 Sep 2026). A picture or a
     video beside the About photograph moves over as a block, like a list. */
  .v2-front .about-words img { display:block; max-width:100%; height:auto; margin:4px 0 16px; border-radius:10px; }
  .v2-front .about-words hr { border:0; border-top:1px solid var(--line); margin:22px 0; clear:both; }
  .v2-front .about-words .rt-video { display:flow-root; margin:4px 0 16px; }
  /* 29 Sep 2026: alignment, the two highlight tones and tables. The
     highlight is a tint of the store's own colour behind the text, so it
     reads on every mood; the quieter tone is the page's own muted grey. */
  .v2-front .about-words .rt-center, .v2-front .q-a .rt-center { text-align:center; }
  .v2-front .about-words .rt-right, .v2-front .q-a .rt-right { text-align:right; }
  .v2-front .about-words mark.rt-hl { background:color-mix(in srgb, var(--store) 30%, transparent);
    color:inherit; padding:0 .15em; border-radius:3px; }
  .v2-front .about-words mark.rt-muted { background:none; color:var(--muted); }
  .v2-front .about-words table { display:table; width:100%; border-collapse:collapse; margin:4px 0 16px; }
  .v2-front .about-words th, .v2-front .about-words td { border:1px solid var(--line); padding:8px 10px;
    text-align:left; vertical-align:top; }
  .v2-front .about-words th { font-weight:800; background:var(--line-2); }
  /* A wide table scrolls inside itself on a phone rather than widening the page. */
  @media (max-width:760px) {
    .v2-front .about-words table { display:block; overflow-x:auto; }
  }
  .v2-front .about-words .rt-video iframe { display:block; width:100%; aspect-ratio:16/9; height:auto;
    border:0; border-radius:10px; background:#000; }
  .v2-front .about-words h4, .v2-front .q-a h4 { margin:16px 0 6px; font-size:1.02em; font-weight:800; }
  .v2-front .about-words > :first-child, .v2-front .q-a > :first-child { margin-top:0; }
  .v2-front .about-words ul, .v2-front .about-words ol, .v2-front .q-a ul, .v2-front .q-a ol { margin:0 0 14px; padding-left:1.4em; max-width:64ch; }
  .v2-front .about-words li, .v2-front .q-a li { margin:4px 0; }
  .v2-front .about-words a, .v2-front .q-a a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
  .v2-front .about-words blockquote, .v2-front .q-a blockquote { margin:0 0 14px; padding-left:14px;
    border-left:3px solid var(--line); max-width:64ch; }
  /* On a phone the picture sits above the words, as it always did. */
  @media (max-width:760px) {
    .v2-front .about-pic, .v2-front .about.flip .about-pic { float:none; width:auto; max-width:300px;
      margin:0 0 18px; }
  }

  /* ---- finding one thing in a catalogue -----------------------------------

     The products band offers "search and filter above it" and for a while
     that checkbox did nothing at all: the designer wrote `tools` and the
     renderer had no code that read the word. A control that does nothing
     is worse than a missing one, because the creator ticks it and then
     trusts it.

     WHAT IT IS: one text box over the titles, and one row of kind
     buttons. Not a facet panel -- a store is not a supermarket, and the
     three kinds this platform has are the only axis a buyer actually
     thinks in ("I want to watch something" / "I want the files").

     THE KIND ROW DISAPPEARS WHEN THERE IS ONE KIND, the same all-or-
     nothing rule the eyebrow learned: a filter with a single option
     filters nothing and asks a question with one answer.

     IT IS HIDDEN UNTIL SCRIPT ARRIVES. The whole band works without
     JavaScript -- every card is in the markup and visible -- so the
     controls stay `hidden` until the behaviour that makes them true has
     run. Nothing here is ever a dead input. */
  .v2-front .finder { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
    margin:0 0 22px; }
  .v2-front .finder[hidden] { display:none; }
  .v2-front .finder-find { position:relative; flex:0 1 320px; display:flex; }
  .v2-front .finder-find svg { position:absolute; left:12px; top:50%; width:15px; height:15px;
    margin-top:-7.5px; color:var(--dim); pointer-events:none; }
  .v2-front .finder-find input { width:100%; min-height:42px; padding:10px 14px 10px 35px;
    border:1px solid var(--line); background:#232323; color:var(--text);
    font:inherit; font-size:15px; }
  .v2-front .finder-find input::placeholder { color:var(--dim); }
  .v2-front .finder-find input:focus { outline:none; }
  /* The native one sits too far in and only exists in two browsers. */
  .v2-front .finder-find input::-webkit-search-cancel-button { display:none; }
  .v2-front .finder-kinds { display:flex; flex-wrap:wrap; gap:6px; }
  .v2-front .finder-kinds button { min-height:34px; padding:6px 13px; cursor:pointer;
    border:1px solid var(--line); background:transparent; color:var(--muted);
    font:inherit; font-size:13px; font-weight:700; letter-spacing:.01em; }
  .v2-front .finder-kinds button i { font-style:normal; color:var(--dim);
    font-variant-numeric:tabular-nums; margin-left:5px; }
  .v2-front .finder-kinds button:hover { color:var(--text); border-color:rgba(255,255,255,.28); }
  /* THE COUNT NEVER MOVES THE BUTTON. A tabular figure and a fixed
     min-width would still reflow the row when 11 becomes 6, so the row
     is laid out once and the number inside each button only ever
     changes what it says, not how wide it is -- the digits are the same
     width and the words never change. */
  .v2-front .finder-say { flex:1 1 100%; margin:0; color:var(--dim); font-size:13px; }
  .v2-front .finder-say:empty { display:none; }
  /* A CARD HAS A DISPLAY OF ITS OWN, so [hidden] loses. The browser's
     own sheet says [hidden]{display:none} at the weakest specificity
     there is, and .card sets display:flex a moment later -- so the
     filter set the attribute on every card it wanted gone and the grid
     did not move. Every layout the band can be in is listed, because
     the one that is missing is the one a creator will pick. */
  .v2-front .card[hidden], .v2-front .cards > [hidden], .v2-front .rail > [hidden], .v2-front .list > [hidden] { display:none; }
  /* Said to a screen reader and to nobody else. The page had no such
     class because until now it had no control whose purpose was carried
     by an icon. */
  .v2-front .sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
    border:0; }

  /* ---- the product card ---------------------------------------------------
     THE ONE COMPONENT THIS PAGE LIVES OR DIES BY. Everything a buyer needs
     in the order they need it: what it looks like, what kind of thing it
     is, what it is called, what it costs.

     16:9, because that is the thumbnail standard and because every product
     here is video, audio or a file -- three of which have no natural
     picture, so the art has to be reliable rather than lucky.

     The type chip is not decoration. "Video" and "Download" are different
     purchases and the buyer is allowed to know which before they click. */
  .v2-front .cards { display:grid; gap:18px;
    grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }
  .v2-front .cards.two { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }

  .v2-front .card { background:var(--panel); border:1px solid var(--line);
    border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
    position:relative;
    transition:transform .16s, border-color .16s, box-shadow .16s; }
  /* THE WHOLE CARD IS STILL ONE CLICK, and the link is on the title.
     The card was an <a> round everything until the rating inside it
     needed to be clickable too, and a link inside a link is not valid.
     Stretching the title's own ::after over the card keeps the big target
     and gives the link the only text on the card worth announcing. */
  .v2-front .card-go { position:static; }
  .v2-front .card-go::after { content:""; position:absolute; inset:0; z-index:1; }
  .v2-front .card-go:focus-visible { outline:none; }
  .v2-front .card:focus-within { border-color:rgba(255,255,255,.28);
    box-shadow:0 0 0 2px var(--store-lit); }
  /* THE LIFT, ON A COMPUTER ONLY (4 Oct 2026, Martin: "we should not have
     this happening on mobile as you can't hover"). Hover alone is not
     enough to ask: a phone-width preview on a computer still has a mouse,
     and some phones report a hover. So it needs a fine pointer and more
     than a phone's width too. AND BUNDLES LIFT AS PRODUCTS DO: they were
     the one card that stayed put. */
  @media (hover:hover) and (pointer:fine) and (min-width:621px) {
    .v2-front .card:hover, .v2-front .bundle:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.2);
      box-shadow:0 14px 30px rgba(0,0,0,.4); }
  }
  .v2-front .bundle { transition:transform .16s, border-color .16s, box-shadow .16s; }
  .v2-front .card-art { aspect-ratio:16/9; background:#1f2a2e center/cover no-repeat;
    position:relative; }
  .v2-front .card-art .play { position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; }
  .v2-front .card-art .play i { width:44px; height:44px; border-radius:50%;
    background:rgba(12,20,24,.62); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; }
  .v2-front .card-art .play svg { width:16px; height:16px; margin-left:2px; }
  .v2-front .card-body { padding:14px 15px 16px; display:flex; flex-direction:column;
    gap:8px; flex:1; }
  .v2-front .card h3 { margin:0; font-size:16px; font-weight:700; line-height:1.35;
    text-wrap:balance; }
  .v2-front .card .row { display:flex; align-items:center; gap:9px; margin-top:auto;
    padding-top:4px; }
  .v2-front .price { font-weight:900; font-size:17px; color:var(--green);
    font-variant-numeric:tabular-nums; }
  .v2-front .price .was { color:var(--dim); font-weight:400; font-size:13px;
    text-decoration:line-through; margin-left:7px; }
  .v2-front .price.free { color:var(--green-lit); }
  /* "In a bundle" is a sentence where the others are a figure, so it is
     quieter -- and it lives here rather than inline on the element, where
     it used to sit beating every size rule in the sheet. */
  .v2-front .price.words { font-size:14px; }
  /* A PERIOD IS PART OF THE PRICE AND IS NOT THE PRICE. £12 a month and
     £48 once are the same sentence read at two speeds, so the words sit
     quietly beside the figure rather than competing with it -- the
     bundle card has done this since it was drawn and the product card
     needed it the moment a course could carry a monthly price. */
  .v2-front .card .per, .v2-front .card .from { color:var(--dim); font-size:12.5px; }
  .v2-front .card .from { margin-right:-4px; }
  .v2-front .size-sm .card .per, .v2-front .size-sm .card .from { font-size:11px; }
  .v2-front .size-lg .card .per, .v2-front .size-lg .card .from { font-size:13.5px; }
  /* AND THE PRICE IT IS NOT ANY MORE. Struck, dim, and smaller than the
     figure beside it, because only one of the two numbers on a card is
     the one being asked for. It is only ever printed when the sale price
     is genuinely lower -- the resolver refuses a "sale" that is not. */
  .v2-front .card .was { color:var(--dim); font-size:12.5px; text-decoration:line-through;
    font-weight:600; margin-right:2px; }
  .v2-front .size-sm .card .was { font-size:11px; }
  .v2-front .size-lg .card .was { font-size:13.5px; }
  /* ---- the product card, stacked as a bundle's (1 Oct 2026) -------------

     Martin and Neil chose C in Planning/steps/productCardDrafts.html: the
     picture -- a deck where there are more -- carries the type, Sale and a
     Quick look button; the title sits in a box three lines tall, centred
     both ways, so one line sits in the middle and three fill it; then the
     stars, the price at the bundle card's size and a small line under it;
     and the description in a section of its own below a divider.

     ONE HEIGHT ACROSS A ROW. The grid and the carousel stretch every card to
     the tallest, and the room left over opens up between the parts rather
     than pooling at the bottom. A bundle is longer by nature and sits in
     rows of its own.

     THE LIST LAYOUT keeps its words left-aligned: a centred title beside a
     picture on the left reads as a mistake. */
  .v2-front .pcard .card-body { padding:16px 18px 18px; gap:0; justify-content:space-between; }
  .v2-front .pc-tags { position:absolute; left:10px; top:10px; z-index:2; display:flex; gap:6px;
    flex-wrap:wrap; max-width:calc(100% - 80px); }
  .v2-front .pc-tags .chip { background:rgba(15,17,20,.78); }
  /* THE MARKETPLACE CARD'S BADGES (7 Oct 2026, Martin: the store's cards say
     what the marketplace's say) -- Sold out, spots left, the sale and when
     it ends, a bundle's saving, New; two at most, stacked, in the
     marketplace's colours. They replace the Sale ribbon. */
  .v2-front .pc-tags:has(.deal) { flex-direction:column; align-items:flex-start; }
  .v2-front .pc-tags .chip.deal { border:0; text-transform:none; letter-spacing:.01em; font-size:11px; white-space:nowrap;
    font-weight:900; padding:3px 8px; border-radius:6px; }
  .v2-front .pc-tags .chip.deal.out { background:rgba(10,10,10,.82); color:var(--dim); }
  .v2-front .pc-tags .chip.deal.sale { background:var(--danger); color:#fff; }
  .v2-front .pc-tags .chip.deal.left { background:var(--amber); color:#1a1205; }
  .v2-front .pc-tags .chip.deal.new { background:var(--brand); color:#fff; }
  .v2-front .pc-tags .chip.deal.saving { background:var(--green); color:#04210f; }
  .v2-front .bc-art .pc-tags { z-index:3; }
  /* ONE BADGE ON A NARROW PICTURE (8 Oct 2026, Martin), as the marketplace
     card does: the second waits for a hover. The picture is the container,
     so a Small band, a rail and a narrow screen all ask the same question. */
  .v2-front .card-art, .v2-front .bc-art { container-type:inline-size; }
  @container (max-width:240px) {
    .v2-front .pc-tags .chip.deal + .chip.deal { display:none; }
    .v2-front .pcard:hover .pc-tags .chip.deal + .chip.deal, .v2-front .pcard:focus-within .pc-tags .chip.deal + .chip.deal, .v2-front .bc:hover .pc-tags .chip.deal + .chip.deal, .v2-front .bc:focus-within .pc-tags .chip.deal + .chip.deal { display:inline-flex; }
    /* ...and takes the first one's place rather than stacking under it. */
    .v2-front .pcard:hover .pc-tags .chip.deal:has(+ .chip.deal), .v2-front .pcard:focus-within .pc-tags .chip.deal:has(+ .chip.deal), .v2-front .bc:hover .pc-tags .chip.deal:has(+ .chip.deal), .v2-front .bc:focus-within .pc-tags .chip.deal:has(+ .chip.deal) { display:none; }
  }
  /* THE HEART (7 Oct 2026), the marketplace card's: top right of the picture,
     on hover, and for good once saved -- always on a phone, which has no
     hover. Above the title's stretched link, which covers the card. */
  .v2-front .pc-save { position:absolute; right:10px; top:10px; z-index:5; width:32px; height:32px;
    border-radius:50%; border:0; cursor:pointer; padding:0; display:flex; align-items:center;
    justify-content:center; background:rgba(10,10,10,.6); color:#fff; backdrop-filter:blur(4px);
    opacity:0; transition:opacity .14s, background .14s; }
  .v2-front .pc-save svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round; }
  .v2-front .pcard:hover .pc-save, .v2-front .pcard:focus-within .pc-save, .v2-front .bc:hover .pc-save, .v2-front .bc:focus-within .pc-save { opacity:1; }
  .v2-front .pc-save:hover { background:rgba(10,10,10,.85); }
  .v2-front .pc-save:focus-visible { outline:2px solid var(--store-lit); outline-offset:2px; }
  .v2-front .pc-save.is-on { opacity:1; color:var(--heart); }
  .v2-front .pc-save.is-on svg { fill:currentColor; }
  .v2-front .pc-save[aria-busy="true"] { opacity:.6; }
  @media (hover:none), (pointer:coarse) { .v2-front .pc-save { opacity:1; } }
  .v2-front .size-sm .pc-save { width:28px; height:28px; top:8px; right:8px; }
  .v2-front .size-sm .pc-save svg { width:15px; height:15px; }
  /* A WAY WITH SOMETHING TO SAY -- a trial, an intro price, a sale -- wears
     a dot on its switch (7 Oct 2026), so the deal is found before it is
     picked. */
  .v2-front .pcard .seg button.has-deal::after { content:""; display:inline-block; width:6px; height:6px;
    border-radius:50%; background:var(--danger); margin-left:4px; vertical-align:2px; }
  .v2-front .pc-lasts s.was { color:var(--dim); }
  .v2-front .pc-price .price.free { white-space:nowrap; }
  /* The bundle card's: a trial or intro under its way, the one-way line,
     and what it saves against its products one by one. */
  .v2-front .bc-way .bc-wd { display:block; font-style:normal; font-size:11.5px; font-weight:700; color:var(--green-lit); }
  .v2-front .bc-deal { margin:4px 0 0; font-size:12px; font-weight:700; color:var(--green-lit); }
  .v2-front .bc-deal s, .v2-front .bc-sep s { color:var(--dim); font-weight:400; }
  .v2-front .bc-sep { margin:4px 0 0; font-size:12px; color:var(--muted); }
  /* PLAY A PREVIEW (1 Oct 2026, Martin: as the marketplace card has it). A
     round button in the corner the creator picked, at their size; shown on
     hover like Quick look, always on a touch screen, and while playing.
     The video plays over the picture, under the buttons. */
  .v2-front .pc-play { position:absolute; z-index:5; right:10px; bottom:10px; width:38px; height:38px; padding:0;
    border:0; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
    background:rgba(10,10,10,.68); color:#fff; backdrop-filter:blur(4px);
    opacity:0; transition:opacity .14s, background .14s; }
  .v2-front .pcard:hover .pc-play, .v2-front .pcard:focus-within .pc-play, .v2-front .pcard.is-playing .pc-play, .v2-front .bc:hover .pc-play, .v2-front .bc:focus-within .pc-play, .v2-front .bc.is-playing .pc-play { opacity:1; }
  @media (hover:none), (pointer:coarse) { .v2-front .pc-play { opacity:1; } }
  .v2-front .pc-play:hover { background:rgba(10,10,10,.9); }
  .v2-front .pc-play:focus-visible { outline:2px solid var(--store-lit); outline-offset:2px; }
  .v2-front .pc-play svg { width:44%; height:44%; }
  .v2-front .pc-play .i-pause, .v2-front .pcard.is-playing .pc-play .i-play, .v2-front .bc.is-playing .pc-play .i-play { display:none; }
  .v2-front .pcard.is-playing .pc-play .i-pause, .v2-front .bc.is-playing .pc-play .i-pause { display:block; }
  .v2-front .pcard.is-playing .pc-play, .v2-front .bc.is-playing .pc-play { background:var(--store, var(--green)); color:var(--on-store, #fff); }
  .v2-front .pc-play[data-at="tl"] { left:10px; top:10px; right:auto; bottom:auto; }
  .v2-front .pc-play[data-at="tr"] { right:10px; top:10px; bottom:auto; }
  .v2-front .pc-play[data-at="bl"] { left:10px; bottom:10px; right:auto; }
  .v2-front .pc-play[data-at="c"] { left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); }
  .v2-front .pc-play[data-size="s"] { width:28px; height:28px; }
  .v2-front .pc-play[data-size="l"] { width:52px; height:52px; }
  /* Quick look moves to the right when the button is in its corner. */
  .v2-front .pcard:has(.pc-play[data-at="bl"]) .pc-look { left:auto; right:10px; }
  .v2-front .pc-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; background:#000; }
  /* AND IN THE QUICK LOOK: a button over the pictures; the video takes their
     place with its own controls, an audio trailer plays under them. */
  .v2-front .bf-media { position:relative; }
  .v2-front .bf-play { position:absolute; right:10px; bottom:10px; z-index:3; display:inline-flex; align-items:center; gap:7px;
    border:0; border-radius:999px; cursor:pointer; padding:8px 14px 8px 11px; font:inherit; font-size:13px;
    font-weight:800; background:rgba(10,10,10,.75); color:#fff; backdrop-filter:blur(4px); }
  .v2-front .bf-play:hover { background:#000; }
  .v2-front .bf-play svg { width:15px; height:15px; }
  .v2-front .bf-vid { display:block; width:100%; aspect-ratio:16/9; border-radius:10px; background:#000; }
  .v2-front .bf-aud { display:block; width:100%; margin-top:8px; }

  /* SALE, A RIBBON ACROSS THE CORNER (1 Oct 2026, Martin: "wraps around the
     corner"). The band crosses the picture's top right corner at 45 degrees
     and is cut off exactly at the card's top and right edges, so it reads as
     running round them. It first ran 5px past both edges with folds tucked
     behind, and on a dark page the folds vanished and the ends only looked
     unaligned ("the edges of the ribbon dont sit flush", Martin) -- so the
     box is the card's own corner now, and the card's clip cuts nothing.
     SMALL AND TIGHT TO THE CORNER (Martin, same day): it took a big bite out
     of the picture at 92px. */
  .v2-front .pc-sale { position:absolute; right:0; top:0; z-index:4; width:70px; height:70px;
    overflow:hidden; pointer-events:none; }
  .v2-front .pc-sale b { position:absolute; display:block; width:100px; left:-3px; top:12px; transform:rotate(45deg);
    padding:3px 0; text-align:center; font-size:10px; font-weight:900; letter-spacing:.1em;
    text-transform:uppercase; color:#241600;
    background:linear-gradient(color-mix(in srgb, var(--amber) 80%, #fff), var(--amber));
    box-shadow:0 3px 8px rgba(0,0,0,.45); }
  .v2-front .size-sm .pc-sale { width:58px; height:58px; }
  .v2-front .size-sm .pc-sale b { width:84px; left:-3px; top:9px; font-size:9px; padding:2px 0; }
  .v2-front .pc-look { position:absolute; left:10px; bottom:10px; z-index:2; border:0; cursor:pointer;
    font:inherit; font-size:11.5px; font-weight:800; padding:6px 11px; border-radius:999px;
    background:rgba(15,17,20,.78); color:#fff; opacity:0; transition:opacity .14s; }
  /* ON HOVER, AS ON THE MARKETPLACE (1 Oct 2026, Martin) -- and always there
     on a touch screen, which has no hover to show it. */
  .v2-front .pcard:hover .pc-look, .v2-front .pcard:focus-within .pc-look { opacity:1; }
  @media (hover:none), (pointer:coarse) { .v2-front .pc-look { opacity:1; } }
  /* AND ON A BUNDLE CARD'S PICTURE (1 Oct 2026, Martin), opening its flyout. */
  .v2-front .bc-look { position:absolute; left:10px; bottom:10px; z-index:3; border:0; cursor:pointer;
    font:inherit; font-size:11.5px; font-weight:800; padding:6px 11px; border-radius:999px;
    background:rgba(15,17,20,.78); color:#fff; opacity:0; transition:opacity .14s; }
  .v2-front .bc-look:hover { background:#000; }
  .v2-front .bc-look:focus-visible { outline:2px solid var(--store-lit); outline-offset:2px; }
  .v2-front .bc:hover .bc-look, .v2-front .bc:focus-within .bc-look { opacity:1; }
  @media (hover:none), (pointer:coarse) { .v2-front .bc-look { opacity:1; } }
  .v2-front .pc-look:hover { background:#000; }
  .v2-front .pc-look:focus-visible { outline:2px solid var(--store-lit); outline-offset:2px; }
  .v2-front .pc-title { --t:18px; font-size:var(--t); height:calc(3 * 1.25 * var(--t)); display:flex;
    align-items:center; justify-content:center; text-align:center; }
  .v2-front .pcard .pc-title h3 { font-size:inherit; font-weight:900; line-height:1.25; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
  .v2-front .pc-mid { display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:8px; }
  .v2-front .pcard .pc-mid .rate { margin-left:0; }
  .v2-front .pcard .pc-price { margin:4px 0 1px; padding-top:0; justify-content:center; flex-wrap:wrap;
    align-items:baseline; gap:3px 7px; }
  .v2-front .pcard .pc-price .price { font-size:24px; }
  .v2-front .pcard .pc-price .per, .v2-front .pcard .pc-price .from { font-size:13px; }
  .v2-front .pcard .pc-price .was { font-size:15px; }
  .v2-front .pc-alt { margin:0; font-size:12.5px; color:var(--dim); }
  .v2-front .pc-sec { margin-top:14px; padding-top:12px; border-top:1px solid var(--line-2); }
  .v2-front .pc-sec .card-say { -webkit-line-clamp:3; }
  .v2-front .size-sm .pc-title { --t:15px; }
  .v2-front .size-sm .pcard .card-body { padding:12px 13px 14px; }
  .v2-front .size-sm .pcard .pc-price .price { font-size:19px; }
  .v2-front .size-sm .pc-look { font-size:10.5px; padding:5px 9px; }
  .v2-front .size-lg .pc-title { --t:20px; }
  .v2-front .size-lg .pcard .pc-price .price { font-size:26px; }
  .v2-front .list .pc-title { height:auto; display:block; text-align:left; }
  .v2-front .list .pc-mid { align-items:flex-start; text-align:left; }
  .v2-front .list .pcard .pc-price { justify-content:flex-start; }
  .v2-front .list .pcard .card-body { justify-content:flex-start; }
  /* ---- E: WHAT'S INSIDE AND A BUY STRIP (1 Oct 2026, Martin) ------------

     C looked "inferior to the bundle cards as far as functionality", so the
     card sells in place: What's inside, first three, always three lines
     tall; then one strip every card has -- the ways as a segmented row, the
     price, a line for how long a sale lasts, the button straight to payment
     (the bundle card's), and "Also in N bundles".

     LINED UP ACROSS THE ROW. In the grid each card is a subgrid of five of
     the band's rows -- picture, title, stars, what's inside, strip -- and its
     body steps out of the way (display:contents), so every card's title box,
     list and button start on the same line whatever the others hold. A
     browser without subgrid, the carousel and the list get cards of one
     height with the parts spread, as before. */
  /* ONE COLUMN, AND NO WIDER THAN THE CARD (1 Oct 2026). Left to itself the
     card's column grew to its longest unbroken line -- a file name such as
     "How to set up your for working out" -- and everything ran past the
     card's edge and was cut off: the list, the Sale tag, the button. */
  .v2-front .cards > .pcard { display:grid; grid-row:span 5; grid-template-rows:subgrid;
    grid-template-columns:minmax(0, 1fr); row-gap:0; min-width:0; }
  /* HIDDEN STAYS HIDDEN. The finder hides cards with [hidden], and the display
     above beat it: every card stayed when a kind was picked (1 Oct 2026). */
  .v2-front .pcard[hidden], .v2-front .cards > .pcard[hidden] { display:none; }
  .v2-front .cards > .pcard > .card-body { display:contents; }
  .v2-front .cards > .pcard > .card-body > * { padding-left:16px; padding-right:16px; }
  @supports not (grid-template-rows:subgrid) {
    .v2-front .cards > .pcard { display:flex; grid-row:auto; }
    .v2-front .cards > .pcard > .card-body { display:flex; }
    .v2-front .cards > .pcard > .card-body > * { padding-left:0; padding-right:0; }
  }
  .v2-front .pc-title { box-sizing:content-box; padding-top:14px; }
  .v2-front .pcard .card-body > .pc-title:first-child { padding-top:14px; }
  .v2-front .pc-mid { padding-top:0; }
  .v2-front .pc-alt { font-size:12px; }
  /* COUNT LINE (1 Oct 2026, Martin): each kind a number, an icon and its
     running time, one unit that never breaks; the line wraps between kinds,
     three lines at most, centred both ways in its row like the title. */
  .v2-front .cards > .pcard .pc-mid { justify-content:center; }
  .v2-front .pc-count { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 12px;
    line-height:1.5; max-height:calc(3 * 1.5em); overflow:hidden; color:var(--muted); }
  .v2-front .pc-count .u { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
  /* EACH KIND ITS OWN POP-UP (8 Oct 2026, Martin, as the marketplace card):
     hover or tap "3 [video]" for "3 videos · MP4 · 1:56 in all". The pop-ups
     sit beside the line in .pc-cw, because the line clips at three rows, and
     open by their kind: data-k on the unit, data-for on the pop-up. */
  .v2-front .pc-cw { position:relative; }
  /* Above the title's stretched link, so a tap opens the pop-up, not the page. */
  .v2-front .pc-count .u { cursor:help; border-radius:4px; position:relative; z-index:3; }
  .v2-front .pc-count .u:focus-visible { outline:2px solid var(--store-lit); outline-offset:2px; }
  .v2-front .pc-cw .u-pop { position:absolute; left:50%; bottom:calc(100% + 7px); z-index:12;
    width:max-content; max-width:230px; padding:7px 10px; border-radius:9px;
    background:#10161c; color:#e9edf2; border:1px solid rgba(255,255,255,.1);
    box-shadow:0 10px 26px rgba(0,0,0,.5); font-size:12px; line-height:1.45;
    text-align:center; white-space:normal; pointer-events:none;
    opacity:0; visibility:hidden; transform:translate(-50%,3px);
    transition:opacity .13s, transform .13s; }
  .v2-front .pc-cw:has(.u[data-k="video"]:hover) .u-pop[data-for="video"], .v2-front .pc-cw:has(.u[data-k="video"]:focus-visible) .u-pop[data-for="video"], .v2-front .pc-cw:has(.u[data-k="video"][aria-expanded="true"]) .u-pop[data-for="video"], .v2-front .pc-cw:has(.u[data-k="audio"]:hover) .u-pop[data-for="audio"], .v2-front .pc-cw:has(.u[data-k="audio"]:focus-visible) .u-pop[data-for="audio"], .v2-front .pc-cw:has(.u[data-k="audio"][aria-expanded="true"]) .u-pop[data-for="audio"], .v2-front .pc-cw:has(.u[data-k="file"]:hover) .u-pop[data-for="file"], .v2-front .pc-cw:has(.u[data-k="file"]:focus-visible) .u-pop[data-for="file"], .v2-front .pc-cw:has(.u[data-k="file"][aria-expanded="true"]) .u-pop[data-for="file"] {
    opacity:1; visibility:visible; transform:translate(-50%,0); }
  @media (hover:none) {
    .v2-front .pc-cw:has(.u[data-k="video"]:hover) .u-pop[data-for="video"], .v2-front .pc-cw:has(.u[data-k="audio"]:hover) .u-pop[data-for="audio"], .v2-front .pc-cw:has(.u[data-k="file"]:hover) .u-pop[data-for="file"] {
      opacity:0; visibility:hidden; }
    .v2-front .pc-cw:has(.u[data-k="video"][aria-expanded="true"]) .u-pop[data-for="video"], .v2-front .pc-cw:has(.u[data-k="audio"][aria-expanded="true"]) .u-pop[data-for="audio"], .v2-front .pc-cw:has(.u[data-k="file"][aria-expanded="true"]) .u-pop[data-for="file"] {
      opacity:1; visibility:visible; transform:translate(-50%,0); }
  }
  .v2-front .pc-count b { font-weight:800; color:var(--text); }
  .v2-front .pc-count svg { flex:none; color:var(--dim); }
  .v2-front .pc-count i { font-style:normal; color:var(--dim); font-variant-numeric:tabular-nums; }
  .v2-front .list .pc-count { justify-content:flex-start; }
  /* AND STILL LINED UP WHERE THERE IS NO SUBGRID. A centred band and a carousel
     lay cards in a flex row, so the rows are not shared and a count that wraps
     pushed one card's What's inside below its neighbours'. The cards are one
     height already and every other part is a fixed height, so the count row
     takes whatever is spare: each card's count sits centred in the same band
     and every What's inside starts on one line. */
  .v2-front.mid :where(.band:not(.al-left)) .cards > .pcard, .v2-front .al-mid .cards > .pcard, .v2-front .cards.rail > .pcard { grid-template-rows:auto auto 1fr auto auto; }
  .v2-front .pc-inside { padding-top:12px; }
  .v2-front .pc-inside .box { border-top:1px solid var(--line-2); padding-top:10px; }
  .v2-front .pc-inside b { display:flex; justify-content:space-between; align-items:baseline; gap:8px;
    font-size:12px; font-weight:900; margin-bottom:6px; }
  .v2-front .pc-all { position:relative; z-index:2; border:0; background:none; color:var(--store,var(--green));
    font:inherit; font-size:12px; font-weight:800; cursor:pointer; padding:0; white-space:nowrap; }
  .v2-front .pc-all:hover { text-decoration:underline; }
  .v2-front .pc-files { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;
    min-height:calc(3 * 22px + 2 * 6px); }
  .v2-front .pc-files li { display:flex; align-items:center; gap:9px; height:22px; font-size:13px; min-width:0; }
  .v2-front .pc-files .x { flex:none; min-width:44px; text-align:center; font-size:9.5px; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase; padding:3px 6px; border-radius:5px;
    background:var(--panel-2); color:var(--muted); }
  .v2-front .pc-files .n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); flex:1; min-width:0; }
  /* HOW LONG OR HOW BIG (1 Oct 2026), at the end of the line, quieter. */
  .v2-front .pc-files .m, .v2-front .bf-files .m { flex:none; margin-left:auto; padding-left:8px; font-size:11.5px; color:var(--dim);
    font-variant-numeric:tabular-nums; white-space:nowrap; }
  .v2-front .bf-files .n { flex:1; min-width:0; }
  .v2-front .pc-strip { padding-top:12px; padding-bottom:14px; align-self:end; }
  .v2-front .pcard .seg { position:relative; z-index:2; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    gap:3px; padding:3px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--line-2); }
  .v2-front .pcard .seg button { border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px;
    font-weight:800; padding:6px 2px; border-radius:7px; cursor:pointer; white-space:nowrap; }
  .v2-front .pcard .seg button.on { background:var(--panel-2); color:var(--text);
    box-shadow:inset 0 0 0 1px var(--store,var(--green)); }
  .v2-front .pcard .seg button[tabindex="-1"] { cursor:default; }
  /* One way to pay is not a choice (2 Oct 2026): no switch; the line under
     the price says what the price does not. */
  .v2-front .pcard .seg.is-one { display:none; }
  .v2-front .pcard .seg.is-one + .pc-price { margin-top:0; }
  .v2-front .pcard .pc-strip .pc-price { margin:10px 0 0; min-height:30px; flex-wrap:nowrap; }
  .v2-front .pc-lasts { margin:0; min-height:17px; text-align:center; font-size:11.5px; color:var(--dim); }
  .v2-front .pc-buy { position:relative; z-index:2; margin-top:10px; width:100%; border:0; cursor:pointer;
    background:var(--store, var(--amber)); color:var(--on-store,#0f1114); font:inherit; font-size:15px;
    font-weight:800; padding:11px 16px; border-radius:999px; }
  .v2-front .pc-buy:hover { filter:brightness(1.08); }
  .v2-front .pc-buy:focus-visible { outline:2px solid var(--text); outline-offset:2px; }
  .v2-front .pc-buy.is-have { background:transparent; color:var(--green-lit); border:1px solid rgba(45,194,107,.35); cursor:default; }
  .v2-front .pc-buy.is-gone { background:transparent; color:var(--dim); border:1px solid var(--line); cursor:default; }
  .v2-front .pc-also { position:relative; z-index:2; display:block; width:100%; min-height:30px; margin-top:6px; border:0;
    background:none; color:var(--muted); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; text-align:center; }
  .v2-front button.pc-also:hover { color:var(--text); text-decoration:underline; }
  .v2-front .size-sm .pcard .seg button { font-size:10.5px; padding:5px 1px; }
  .v2-front .size-sm .pc-buy { font-size:13.5px; padding:9px 12px; }
  .v2-front .size-sm .pc-files li { font-size:12px; }
  .v2-front .list .pc-inside, .v2-front .list .pc-strip { max-width:420px; }
  .v2-front .list .pc-lasts { text-align:left; }

  /* THE BUNDLE CARD'S TITLE, CENTRED AS THE PRODUCT CARD'S (1 Oct 2026,
     Martin): a box three lines tall with the title in the middle of it both
     ways, then the count under it, centred -- and a bundle sold one way
     centres its price too. The ways stay full width, as rows. */
  .v2-front .bc-title { --t:18px; font-size:var(--t); height:calc(3 * 1.25 * var(--t)); display:flex;
    align-items:center; justify-content:center; text-align:center; }
  .v2-front .bundle .bc-title h3 { font-size:inherit; line-height:1.25; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
  .v2-front .bc-title + .bc-count { margin:4px 0 0; text-align:center; }
  .v2-front .bc-count ~ .bc-price { justify-content:center; }
  .v2-front .bc-count ~ .bc-alt { text-align:center; }

  /* WHAT'S INSIDE AND THE BUNDLES, in the product's Quick look. */
  .v2-front .bf-files { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
  .v2-front .bf-files li { display:flex; align-items:center; gap:9px; font-size:13px; min-width:0; }
  .v2-front .bf-files li.cut { display:none; }
  .v2-front .bf-files.open li.cut { display:flex; }
  .v2-front .bf-files .x { flex:none; min-width:44px; text-align:center; font-size:9.5px; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase; padding:3px 6px; border-radius:5px;
    background:var(--panel-2); color:var(--muted); }
  .v2-front .bf-files .n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* ALSO IN N BUNDLES, in the product's Quick look: opens the Bundles window to
     compare them (1 Oct 2026). */
  .v2-front .bf-also { display:block; width:100%; border:1px solid var(--line); background:transparent; color:var(--text);
    font:inherit; font-size:13.5px; font-weight:800; padding:10px 14px; border-radius:999px; cursor:pointer; }
  .v2-front .bf-also:hover { border-color:var(--store, var(--green)); }
  .v2-front .bf-deck { position:relative; aspect-ratio:16/9; border-radius:10px; }

  /* ---- the rating --------------------------------------------------------

     ONE STAR AND THE FIGURE. Five glyphs said what the number says, less
     precisely, in four times the room -- and on a Small card that was six
     characters of amber in a space that had a price to fit as well.

     THE COUNT ARRIVES ON HOVER, because 4.7 from two people and 4.7 from
     ninety are different claims but the difference is the second question,
     not the one somebody scans a grid for. A width transition rather than
     display, so it grows out of the number rather than appearing beside
     it; and it sits above the card's stretched link, because it is a link
     of its own. */
  .v2-front .rate { position:relative; z-index:2; margin-left:auto; display:inline-flex;
    align-items:center; gap:4px; white-space:nowrap; padding:3px 7px;
    border-radius:999px; line-height:1;
    transition:background .16s; }
  .v2-front .rate i { color:var(--amber); font-size:13px; font-style:normal; }
  .v2-front .rate b { color:var(--muted); font-weight:800; font-size:13px;
    font-variant-numeric:tabular-nums; }
  .v2-front .rate-n { max-width:0; overflow:hidden; color:var(--dim); font-size:12px;
    transition:max-width .22s ease, margin .22s ease; }
  @media (hover:hover) {
    .v2-front .rate:hover { background:rgba(255,255,255,.07); }
    .v2-front .rate:hover .rate-n { max-width:90px; margin-left:2px; }
  }
  .v2-front .rate:focus-visible { outline:2px solid var(--store-lit); outline-offset:1px; }
  .v2-front .rate:focus-visible .rate-n { max-width:90px; margin-left:2px; }
  /* A LINK IS NOT A BUTTON UNTIL SCRIPT SAYS SO. Without it this goes to
     the product page, where the reviews have always been listed. */
  .v2-front .rate.is-live { cursor:pointer; }

  /* ---- the reading panel --------------------------------------------------

     A <dialog>, so the browser does the top layer, the backdrop, Escape,
     the focus trap and giving the focus back -- five things hand-rolled
     modals get wrong, for free, and a browser too old for it just follows
     the link to the product page instead.

     IT IS A PANEL AND NOT A PAGE because the question is asked in the
     middle of looking at a grid: "4.7 from how many, saying what?" Answer
     it by navigating away and the buyer has to find their place again. */
  .v2-front .revbox { width:min(560px, calc(100vw - 32px)); max-height:min(80vh, 720px);
    padding:0; border:1px solid var(--line); border-radius:var(--r-panel, 14px);
    background:var(--panel); color:var(--text); overflow:hidden; }
  .v2-front .revbox::backdrop { background:rgba(8,10,12,.72); backdrop-filter:blur(3px); }
  .v2-front .revbox-in { display:flex; flex-direction:column; max-height:inherit;
    max-height:min(80vh, 720px); }
  .v2-front .revbox-head { display:flex; align-items:flex-start; gap:14px;
    padding:20px 20px 0; }
  .v2-front .revbox-head h2 { margin:0; font-size:19px; font-weight:800; line-height:1.3;
    flex:1 1 auto; }
  .v2-front .revbox-x { flex:none; width:36px; height:36px; margin:-6px -6px 0 0;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    border:0; border-radius:50%; background:transparent; color:var(--dim); }
  .v2-front .revbox-x svg { width:17px; height:17px; }
  .v2-front .revbox-x:hover { background:rgba(255,255,255,.08); color:var(--text); }
  .v2-front .revbox-avg { margin:10px 20px 0; color:var(--dim); font-size:13px;
    display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .v2-front .revbox-avg i { color:var(--amber); font-style:normal; letter-spacing:.08em;
    font-size:14px; }
  .v2-front .revbox-avg b { color:var(--text); font-size:17px; font-weight:900;
    font-variant-numeric:tabular-nums; }
  .v2-front .revbox-list { margin-top:16px; padding:0 20px 20px; overflow-y:auto;
    display:flex; flex-direction:column; gap:18px; }
  .v2-front .revbox-one { border-left:2px solid var(--line); padding-left:15px; }
  .v2-front .revbox-s { color:var(--amber); font-size:12px; letter-spacing:.08em; }
  .v2-front .revbox-one p { margin:7px 0 0; font-size:15px; line-height:1.55; }
  .v2-front .revbox-who { color:var(--dim); font-size:12.5px; }
  .v2-front .revbox-who b { color:var(--muted); font-weight:700; }
  /* The creator's one reply (29 Sep 2026), set in under the review. */
  .v2-front .revbox-reply { margin:8px 0 0; padding:8px 11px; border-left:3px solid var(--store);
    background:var(--line-2); border-radius:0 8px 8px 0; font-size:13px; color:var(--text); }
  .v2-front .revbox-reply b { color:var(--muted); font-weight:800; margin-right:4px; }
  .v2-front .revbox-wait { margin:0; color:var(--dim); font-size:14px; }
  @media (max-width:620px) {
    /* A sheet from the bottom, which is what a phone expects of a panel
       this size and stops it floating in the middle of a dark screen. */
    .v2-front .revbox { width:100vw; max-width:100vw; max-height:86vh; margin:auto auto 0;
      border-radius:16px 16px 0 0; border-bottom:0; }
  }

  /* ---- the ones the card was drawn for and never given --------------------

     A rule for a rating and a rule for a description in the list layout
     have been in this stylesheet since the day it was written, and the
     renderer emitted neither: a card showed a picture, a word, a title
     and a price, which is five of the fourteen things the create screen
     asks a creator for. Two of them had somewhere to go already. The
     third, how much is inside, was being worked out to decide the word on
     the chip and then thrown away.

     THE CHIP AND THE COUNT SHARE A LINE whether or not there is a count,
     so a band where only some products have one does not end up with two
     card shapes in it. */
  /* 13 AND NOT 8. A pill carries its own padding, so the gap between it
     and a word beside it reads as much tighter than the same gap between
     two words -- measured at 8px they were touching to the eye. */
  .v2-front .card-tags { display:flex; align-items:center; gap:13px; flex-wrap:wrap;
    min-height:21px; }
  .v2-front .ins { color:var(--dim); font-size:12px; font-weight:700;
    letter-spacing:.02em; font-variant-numeric:tabular-nums; }

  /* CLAMPED RATHER THAN CUT, so a wider card says more instead of showing
     the same truncated sentence in a bigger box. Two lines in the grid,
     three in the list -- which is the layout that exists for having
     something to say. */
  .v2-front .card-say { margin:0; color:var(--muted); font-size:13.5px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; }
  .v2-front .list .card-say { -webkit-line-clamp:3; font-size:14px; }

  /* ---- three sizes of card ------------------------------------------------

     A BAND OF FORTY AND A BAND OF THREE ARE NOT THE SAME PROBLEM. Forty
     products at the standard width is a page you scroll past; three of
     them is a row with a hole in it. So the band says how big its cards
     are, in three designed states rather than a width -- nobody should be
     asked for a pixel value, and the three cover what the choice is
     actually between: more per row, the default, or fewer and louder.

     NOT CALLED COMPACT. The page's Rhythm setting is already Roomy or
     Compact and means the padding around a band; the same word meaning
     something else about the things inside it would be two settings
     arguing on one screen.

     SIZE IS NOT LAYOUT, so it applies to all three containers. Small
     cards in a carousel are a perfectly reasonable thing to want, and a
     creator who asked for more per row asked for it whichever container
     they picked.

     The art stays 16:9 at every size. It is the thumbnail standard, it is
     what creators upload, and a card that changes shape as well as size
     stops being the same component. */
  .v2-front .cards.size-sm { gap:14px;
    grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); }
  .v2-front .cards.size-lg { gap:24px;
    grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); }
  .v2-front .rail.size-sm > * { flex:0 0 196px; }
  .v2-front .rail.size-lg > * { flex:0 0 340px; }
  .v2-front .list.size-sm .card-art { flex:0 0 132px; }
  .v2-front .list.size-lg .card-art { flex:0 0 260px; }

  /* What changes inside, written once for all three containers. Type comes
     down with the box rather than staying put, because a 14px title in a
     168px card is the same relationship as a 16px one in 232px -- holding
     the type still is what makes a small card look like a squashed card. */
  .v2-front .size-sm .card-body { padding:11px 12px 13px; gap:6px; }
  .v2-front .size-sm .card h3 { font-size:14px; line-height:1.3; }
  .v2-front .size-sm .card-say { font-size:12.5px; -webkit-line-clamp:2; }
  .v2-front .size-sm .price { font-size:15px; }
  .v2-front .size-sm .price.words { font-size:12.5px; }
  .v2-front .size-sm .chip { font-size:9.5px; padding:2px 8px; }
  .v2-front .size-sm .ins { font-size:11px; }
  .v2-front .size-sm .rate { padding:2px 6px; }
  .v2-front .size-sm .rate i { font-size:11.5px; }
  .v2-front .size-sm .rate b { font-size:11.5px; }
  .v2-front .size-sm .rate-n { font-size:11px; }
  .v2-front .size-sm .card-tags { gap:10px; }
  .v2-front .size-sm .card-art .play i { width:34px; height:34px; }
  .v2-front .size-sm .card-art .play svg { width:13px; height:13px; }
  .v2-front .size-sm .card-tags { min-height:18px; }

  .v2-front .size-lg .card-body { padding:18px 20px 20px; gap:10px; }
  .v2-front .size-lg .card h3 { font-size:19px; }
  .v2-front .size-lg .card-say { font-size:14.5px; -webkit-line-clamp:3; }
  .v2-front .size-lg .price { font-size:19px; }
  .v2-front .size-lg .price.words { font-size:15.5px; }
  .v2-front .size-lg .card-art .play i { width:52px; height:52px; }
  .v2-front .size-lg .card-art .play svg { width:19px; height:19px; }

  /* A PHONE IS ONE COLUMN WHATEVER THE SETTING SAYS -- except for Small,
     which is the one size that genuinely fits two across 343px, and is
     the reason a creator with a long catalogue picks it. */
  @media (max-width:620px) {
    .v2-front .cards.size-lg { grid-template-columns:minmax(0,1fr); }
  }

  /* The chips. 999px, per the guide, and the same three colours the creator
     sees on the products grid -- so what a buyer calls a video and what the
     creator calls a video are marked the same way. */
  .v2-front .chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
    border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; border:1px solid var(--line); color:var(--dim);
    white-space:nowrap; }
  .v2-front .chip[data-t="video"] { color:#8ab4ff; border-color:rgba(59,130,246,.42);
    background:rgba(59,130,246,.12); }
  .v2-front .chip[data-t="audio"] { color:var(--violet); border-color:rgba(181,139,255,.4);
    background:rgba(181,139,255,.1); }
  .v2-front .chip[data-t="download"] { color:#6bdf9f; border-color:rgba(45,194,107,.4);
    background:rgba(45,194,107,.1); }
  /* COMING SOON (29 Sep 2026): dashed, because it is not here yet, and in
     the page's own ink so it sits on every mood. ON A CARD'S PICTURE IT IS
     SOLID (15 Oct 2026, Neil: "missed it completely"), as Sale and New are:
     dashed ink at 90% vanished into a busy picture. */
  .v2-front .chip.soon { color:var(--text); border:1px dashed currentColor; background:transparent; opacity:.9; }
  .v2-front .pc-tags .chip.soon { background:var(--brand); color:#fff; border:0; opacity:1; font-size:11.5px; font-weight:800;
    padding:5px 11px; box-shadow:0 2px 10px rgba(0,0,0,.35); }
  /* Its button: Notify me, opening the page -- a link on a bundle card. */
  .v2-front a.bundle-buy.is-soon { display:block; text-align:center; text-decoration:none; }
  .v2-front .chip[data-t="bundle"] { color:var(--amber); border-color:rgba(224,163,58,.42);
    background:rgba(224,163,58,.12); }

  /* ---- carousel -----------------------------------------------------------
     A LAYOUT, NOT A COMPONENT. Same card, laid in a scroller with snap
     points -- so the three layouts are three containers and one card,
     which is what keeps a store from looking like three websites. */
  .v2-front .rail { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:6px; margin:0 calc(var(--gut) * -1); padding-inline:var(--gut);
    scrollbar-width:none; }
  .v2-front .rail::-webkit-scrollbar { display:none; }
  .v2-front .rail > * { flex:0 0 262px; scroll-snap-align:start; }

  /* ---- list ---------------------------------------------------------------
     For a store with four things and a lot to say about each. The art is
     small, the words get the room. */
  .v2-front .list { display:flex; flex-direction:column; gap:12px; }
  .v2-front .list .card { flex-direction:row; align-items:stretch; }
  .v2-front .list .card-art { flex:0 0 190px; aspect-ratio:16/10; }
  .v2-front .list .card-body { padding:16px 18px; }
  .v2-front .list .card p { margin:0; color:var(--muted); font-size:14px; max-width:62ch; }
  @media (max-width:620px) {
    .v2-front .list .card { flex-direction:column; }
    .v2-front .list .card-art { flex:auto; aspect-ratio:16/9; }
    /* The box takes the width and the kinds take the line under it.
       Three buttons and a 320px box do not share 343px.

       The buttons keep their own widths rather than growing to fill the
       row: four of them wrap three-and-one at this size, and a lone
       stretched "Download" across the full width reads as a different
       kind of control from the three above it. */
    .v2-front .finder-find { flex:1 1 100%; }
    .v2-front .finder-kinds { width:100%; }
  }

  /* ---- the bundle ---------------------------------------------------------
     REDRAWN 30 SEP 2026 from the bundle editor's preview card, Martin: the
     design and its reasoning are Planning/steps/bundleCardStore.html.

     NOT THE PRODUCT CARD WITH A DIFFERENT WORD ON IT, still. It is bought
     for what is in it, so what is in it is most of the card -- but it has
     its own picture now, the one the creator previews it with, and the
     price and button sit under the title where they did in the editor
     rather than a screen further down under a long list.

     TWO LISTS, TWO JOBS. The creator's pitch, ticked: what the bundle gets
     you. Then the products, each with a small picture and what kind of
     thing it is: what is in it. Each cut to three past four lines
     (bundleCards.js opens them).

     NO overflow:hidden ON THE CARD. It would make the card the scroll
     container of the sticky rail below, which then never sticks -- so the
     picture rounds its own top corners. */
  .v2-front .bundle { background:var(--panel); border:1px solid var(--line);
    border-radius:12px; display:flex; flex-direction:column; position:relative; }
  .v2-front .bc-art { aspect-ratio:16/9; position:relative; background:#1f2a2e center/cover no-repeat;
    border-radius:calc(var(--r-panel,12px) - 1px) calc(var(--r-panel,12px) - 1px) 0 0; }
  .v2-front .bc-art .chip { position:absolute; left:10px; top:10px;
    background:rgba(15,17,20,.78); }
  .v2-front .bc-body { padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
  .v2-front .bc-count { margin:0 0 3px; font-size:11px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--dim); }
  .v2-front .bundle h3 { margin:0; font-size:18px; font-weight:900; line-height:1.25; }
  .v2-front .bundle h3 a { color:inherit; text-decoration:none; }
  .v2-front .bundle h3 a:hover { text-decoration:underline; text-underline-offset:3px; }
  .v2-front .bc-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 7px;
    margin:11px 0 1px; }
  .v2-front .bc-price .price { font-size:24px; }
  .v2-front .bc-price .rep { color:var(--store,var(--green)); font-weight:700; font-size:15px; }
  .v2-front .bc-price .from { color:var(--dim); font-size:13px; }
  .v2-front .bc-price .was { color:var(--dim); font-size:15px; }
  .v2-front .bundle .per { color:var(--muted); font-size:13px; }
  .v2-front .bc-alt { margin:0; font-size:12.5px; color:var(--dim); font-variant-numeric:tabular-nums; }
  /* NEARLY GONE. Under the price, because it qualifies what is on offer
     and not how to get it -- and it only appears at five or fewer, so it
     is never the decoration a permanent "488 left" would be. */
  .v2-front .bundle-left { margin:2px 0 0; color:var(--amber); font-size:12.5px; font-weight:700; }

  /* THE BUY BUTTON, the width of the card under the price. */
  .v2-front .bundle-buy { margin-top:14px; width:100%; border:0; cursor:pointer;
    background:var(--store, var(--amber)); color:var(--on-store,#0f1114);
    font:inherit; font-size:15px; font-weight:800;
    padding:11px 16px; border-radius:999px; }
  .v2-front .bundle-buy:hover, .v2-front .bc-stick button:hover { filter:brightness(1.08); }
  .v2-front .bundle-buy:focus-visible, .v2-front .bc-stick button:focus-visible { outline:2px solid var(--text); outline-offset:2px; }
  /* Already bought. A disabled button that says Get this bundle is a worse
     answer than a sentence. */
  .v2-front .bundle-have { margin-top:14px; text-align:center; color:var(--green-lit);
    font-size:13.5px; font-weight:700; padding:10px;
    border:1px solid rgba(45,194,107,.35); border-radius:999px; }
  /* AND NO PLACES LEFT, where the button would have been and not one.
     --dim rather than a red: a fact about availability, not an error. */
  .v2-front .bundle-gone { margin-top:14px; text-align:center; color:var(--dim);
    font-size:13.5px; font-weight:800; letter-spacing:.02em; padding:10px;
    border:1px solid var(--line); border-radius:999px; }

  /* THE BUTTON THAT FOLLOWS. A rail of no height, sticky, right after the
     real button, so the bar is exactly the card's width and stops at the
     card's end by itself; the bar hangs off it and takes no room. The
     script sets its opacity: on once the real button is off the top, down
     to nothing over the card's last 90px. */
  .v2-front .bc-rail { position:sticky; top:12px; height:0; z-index:5; }
  .v2-front .bc-stick { position:absolute; left:-10px; right:-10px; top:0;
    display:flex; align-items:center; gap:12px; padding:8px 8px 8px 16px;
    background:var(--panel-2,var(--panel)); color:var(--text);
    border:1px solid var(--line); border-radius:999px;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    opacity:0; transform:translateY(-6px); pointer-events:none;
    transition:transform .18s ease; }
  .v2-front .bc-stick.on { transform:none; pointer-events:auto; }
  .v2-front .bc-stick .t { flex:1; min-width:0; }
  .v2-front .bc-stick .t b { display:block; font-size:13px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .v2-front .bc-stick .t span { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .v2-front .bc-stick button { flex:none; border:0; cursor:pointer; font:inherit;
    font-size:13.5px; font-weight:800; padding:8px 16px; border-radius:999px;
    background:var(--store, var(--amber)); color:var(--on-store,#0f1114); }

  /* THE TWO LISTS. */
  .v2-front .bc-sec { margin-top:18px; padding-top:14px; border-top:1px solid var(--line-2); }
  .v2-front .bundle-head { margin:0 0 9px; font-size:14px; font-weight:800; color:var(--text); }
  .v2-front .bundle-head .n { color:var(--dim); font-weight:700; }
  .v2-front .bundle ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
  .v2-front .bundle-says { gap:7px; }
  .v2-front .bundle-says li { display:flex; gap:9px; align-items:flex-start; font-size:13.5px;
    color:var(--muted); }
  .v2-front .bundle li svg { width:14px; height:14px; flex:none; margin-top:3px; color:var(--green); }
  .v2-front .bc-items { gap:2px; }
  /* THE WHOLE ROW OPENS THE PRODUCT IN THE FLYOUT (30 Sep 2026), so it
     looks pressable end to end, not only at the name. */
  .v2-front .bc-items li { display:flex; gap:10px; align-items:center; padding:5px 6px; margin:0 -6px;
    border-radius:8px; cursor:pointer; }
  .v2-front .bc-items li:hover { background:var(--panel-2,rgba(255,255,255,.06)); }
  .v2-front .bc-items .th { width:48px; aspect-ratio:16/9; border-radius:4px; flex:none;
    background:#1f2a2e center/cover no-repeat; }
  .v2-front .bc-items .nm { flex:1; min-width:0; font-size:13.5px; color:var(--text); line-height:1.3; }
  .v2-front .bc-items .nm a { color:inherit; text-decoration:none; }
  .v2-front .bc-items .nm a:hover { text-decoration:underline; text-underline-offset:3px; }
  .v2-front .bc-items .nm small { display:block; font-size:11.5px; color:var(--dim); }
  .v2-front .bundle li.more { display:none; }
  .v2-front .bundle ul.open li.more { display:flex; }
  .v2-front .bc-more { margin-top:8px; align-self:flex-start; background:none; border:0; padding:2px 0;
    font:inherit; color:var(--muted); font-size:12.5px; font-weight:700; cursor:pointer;
    display:inline-flex; gap:6px; align-items:center; }
  .v2-front .bc-more:hover { color:var(--text); }
  .v2-front .bc-more svg { width:12px; height:12px; margin:0; transition:transform .18s; }
  .v2-front .bc-more[aria-expanded="true"] svg { transform:rotate(180deg); }
  @media (prefers-reduced-motion:reduce) { .v2-front .bc-stick, .v2-front .bc-more svg { transition:none; } }
  /* THE CARDS DO NOT STRETCH TO THEIR ROW. One opened is taller than its
     neighbours, and stretching them would draw empty panel under a short
     one (Martin, 30 Sep: uneven rows are the price of cards that open). */
  .v2-front .cards.two:has(.bc) { align-items:start; }

  /* THE PICTURE AS A DECK (30 Sep 2026, Martin): the cover, then each
     product's picture -- swiped, or moved with the arrows that appear on
     hover, with dots saying where you are. bundleCards.js moves it. */
  .v2-front .bc-art.is-deck { overflow:hidden; }
  .v2-front .bc-art .chip { z-index:2; }
  .v2-front .bc-deck { position:absolute; inset:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; border-radius:inherit; }
  .v2-front .bc-deck::-webkit-scrollbar { display:none; }
  .v2-front .bc-slide { flex:0 0 100%; scroll-snap-align:start; background:#1f2a2e center/cover no-repeat; }
  .v2-front .bc-step { position:absolute; top:50%; z-index:2; width:32px; height:32px; margin-top:-16px;
    border:0; border-radius:50%; background:rgba(15,17,20,.62); color:#fff; font:inherit;
    font-size:18px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s; }
  .v2-front .bc-step.prev { left:8px; }
  .v2-front .bc-step.next { right:8px; }
  .v2-front .bc-art:hover .bc-step, .v2-front .bc-step:focus-visible { opacity:1; }
  .v2-front .bc-step:disabled { display:none; }
  @media (hover:none) { .v2-front .bc-step { display:none; } }
  .v2-front .bc-dots { position:absolute; left:0; right:0; bottom:8px; z-index:2; display:flex;
    justify-content:center; gap:5px; pointer-events:none; }
  .v2-front .bc-dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); }
  .v2-front .bc-dots i.on { background:#fff; }

  /* HOW TO PAY, AS A CHOICE (30 Sep 2026, Martin chose layout F in
     bundleCardLayouts.html). Each way with its figure; the picked one in
     the store's colour, and the button under them says which it is. */
  .v2-front .bc-ways { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
  .v2-front .bc-way { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px;
    border:1px solid var(--line); border-radius:10px; background:none; cursor:pointer;
    text-align:left; font:inherit; color:var(--text); }
  .v2-front .bc-way:hover { border-color:color-mix(in srgb, var(--store,var(--green)) 45%, transparent); }
  .v2-front .bc-way .dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--dim); flex:none; }
  .v2-front .bc-way .w { flex:1; font-size:13.5px; font-weight:700; }
  .v2-front .bc-way .a { font-weight:900; font-variant-numeric:tabular-nums; }
  .v2-front .bc-way .a s { color:var(--dim); font-weight:400; font-size:12px; margin-right:6px; }
  .v2-front .bc-way.on { border-color:color-mix(in srgb, var(--store,var(--green)) 65%, transparent);
    background:color-mix(in srgb, var(--store,var(--green)) 9%, transparent); }
  .v2-front .bc-way.on .dot { border:4px solid var(--store,var(--green)); }
  .v2-front .bc-way:focus-visible { outline:2px solid var(--text); outline-offset:2px; }

  /* VIEW ALL PRODUCTS: the way into the flyout, under the three shown. */
  .v2-front .bc-all { margin-top:10px; width:100%; display:flex; align-items:center; justify-content:center;
    gap:7px; padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:none;
    font:inherit; font-size:13.5px; font-weight:700; color:var(--text); cursor:pointer; }
  .v2-front .bc-all:hover { border-color:var(--store,var(--green)); }
  .v2-front .bc-all i { font-style:normal; color:var(--dim); font-weight:700; }
  .v2-front .bc-all::after { content:"\203A"; font-size:17px; line-height:1; color:var(--muted); }

  /* ---- the flyout: every product in the bundle, without leaving the store.
     Inside .v2-front so the store's mood reaches it; fixed to the window. */
  .v2-front .bf-wrap[hidden] { display:none; }
  /* ABOVE THE PRODUCT PAGE'S BUNDLES WINDOW (5000), BELOW THE CHECKOUT. */
  .v2-front .bf-veil { position:fixed; inset:0; z-index:6000; background:rgba(8,10,12,.6); }
  .v2-front .bf { position:fixed; top:0; right:0; bottom:0; z-index:6001; width:min(440px,100%);
    display:flex; flex-direction:column; background:var(--panel); color:var(--text);
    border-left:1px solid var(--line); box-shadow:-20px 0 40px rgba(0,0,0,.35); }
  .v2-front .bf-head { display:flex; align-items:center; gap:6px; padding:10px 12px; min-height:52px;
    border-bottom:1px solid var(--line-2); }
  .v2-front .bf-crumb { flex:1; min-width:0; font-size:12.5px; color:var(--muted); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .v2-front .bf-back { background:none; border:0; color:var(--muted); font:inherit; font-weight:700;
    cursor:pointer; padding:5px 8px; border-radius:7px; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .v2-front .bf-back:hover { color:var(--text); background:var(--panel-2,rgba(255,255,255,.06)); }
  .v2-front .bf-nav, .v2-front .bf-x { flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
    background:none; color:var(--muted); cursor:pointer; font:inherit; font-size:15px; line-height:1; }
  .v2-front .bf-nav:hover:not(:disabled), .v2-front .bf-x:hover { color:var(--text); }
  .v2-front .bf-nav:disabled { opacity:.35; cursor:default; }
  .v2-front .bf-nav[hidden] { display:none; }
  .v2-front .bf-scroll { flex:1; min-height:0; overflow-y:auto; padding:16px 20px 20px; }
  .v2-front .bf-art { aspect-ratio:16/9; border-radius:10px; background:#1f2a2e center/cover no-repeat; }
  .v2-front .bf-scroll h3 { margin:14px 0 2px; font-size:19px; font-weight:900; line-height:1.25; }
  .v2-front .bf-sub { margin:0; font-size:12.5px; color:var(--muted); }
  .v2-front .bf-sec { margin-top:16px; padding-top:13px; border-top:1px solid var(--line-2); }
  .v2-front .bf-sec > b { display:block; font-size:14px; font-weight:800; margin-bottom:8px; }
  .v2-front .bf-sec > b i { font-style:normal; color:var(--dim); font-weight:700; margin-left:4px; }
  .v2-front .bf-sec ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
  .v2-front .bf-says { gap:6px; }
  .v2-front .bf-says li { display:flex; gap:8px; font-size:13.5px; color:var(--muted); }
  .v2-front .bf-says li::before { content:"\2713"; color:var(--store,var(--green)); font-weight:800; flex:none; }
  .v2-front .bf-says li.cut { display:none; }
  .v2-front .bf-says.open li.cut { display:flex; }
  .v2-front .bf-more { margin-top:7px; background:none; border:0; padding:2px 0; font:inherit;
    font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; }
  .v2-front .bf-more:hover { color:var(--text); }
  .v2-front .bf-row { display:flex; gap:10px; align-items:center; padding:6px 8px; margin:0 -8px;
    width:calc(100% + 16px); border-radius:8px; background:none; border:0; font:inherit;
    color:var(--text); text-align:left; cursor:pointer; }
  .v2-front .bf-row:hover { background:var(--panel-2,rgba(255,255,255,.06)); }
  .v2-front .bf-row .th { width:56px; aspect-ratio:16/9; border-radius:4px; flex:none; background:#1f2a2e center/cover no-repeat; }
  .v2-front .bf-row .nm { flex:1; min-width:0; font-size:13.5px; line-height:1.3; }
  .v2-front .bf-row .nm small { display:block; font-size:11.5px; color:var(--dim); }
  .v2-front .bf-row .go { color:var(--dim); font-size:18px; }
  .v2-front .bf-desc { margin:14px 0 0; font-size:13.5px; color:var(--muted); line-height:1.55; white-space:pre-line; }
  .v2-front .bf-ctx { margin:14px 0 0; font-size:12.5px; color:var(--muted); padding:9px 11px; border-radius:8px;
    background:var(--panel-2,rgba(255,255,255,.05)); }
  .v2-front .bf-ctx b { color:var(--text); }
  .v2-front .bf-link { display:inline-block; margin-top:14px; font-size:13px; font-weight:700;
    color:var(--store,var(--green)); text-decoration:none; }
  .v2-front .bf-link:hover { text-decoration:underline; }
  .v2-front .bf-foot { border-top:1px solid var(--line); padding:12px 20px 14px; background:var(--panel); }
  .v2-front .bf-ways { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .v2-front .bf-way { border:1px solid var(--line); background:none; color:var(--muted); font:inherit;
    font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px; cursor:pointer; }
  .v2-front .bf-way:hover { color:var(--text); }
  .v2-front .bf-way.on { color:var(--text); border-color:color-mix(in srgb, var(--store,var(--green)) 65%, transparent);
    background:color-mix(in srgb, var(--store,var(--green)) 12%, transparent); }
  .v2-front .bf-line { display:flex; align-items:center; gap:12px; }
  .v2-front .bf-cost { flex:1; min-width:0; font-size:16px; font-weight:900; font-variant-numeric:tabular-nums; }
  .v2-front .bf-go { flex:none; border:0; border-radius:999px; cursor:pointer; font:inherit; font-size:14.5px;
    font-weight:800; padding:10px 18px; background:var(--store,var(--green)); color:var(--on-store,#0f1114); }
  .v2-front .bf-go:hover { filter:brightness(1.08); }
  .v2-front .bf-have { font-size:13.5px; font-weight:800; color:var(--green-lit); }
  /* EACH PRODUCT'S OWN STARS AND LATEST REVIEW (30 Sep 2026, Martin and
     Neil). Amber, as the store's reviews band draws stars. The bundle
     itself gets none: nobody reviewed the package. */
  .v2-front .bc-items .rt, .v2-front .bf-row .rt { margin-left:6px; color:var(--amber); font-weight:700; white-space:nowrap; }
  .v2-front .bc-items .rt i, .v2-front .bf-row .rt i { font-style:normal; font-weight:400; color:var(--dim); }
  .v2-front .bf-rate { margin:10px 0 0; font-size:13px; color:var(--muted); }
  .v2-front .bf-rate .st { color:var(--amber); letter-spacing:1px; margin-right:7px; }
  .v2-front .bf-rate b { color:var(--text); margin-right:3px; }
  .v2-front .bf-rate.none { color:var(--dim); }
  .v2-front .bf-quote { margin:14px 0 0; padding:10px 13px; border-left:3px solid var(--amber);
    background:var(--panel-2,rgba(255,255,255,.05)); border-radius:0 8px 8px 0; }
  .v2-front .bf-quote p { margin:0; font-size:13.5px; line-height:1.5; color:var(--text); }
  .v2-front .bf-quote footer { margin-top:6px; font-size:12px; color:var(--muted); }
  .v2-front .bf-quote .st { color:var(--amber); letter-spacing:1px; }

  /* ---- reviews ------------------------------------------------------------
     A quote, then who said it and what about. Not a card grid: three
     testimonials in boxes is a pattern people have learnt to skip. */
  .v2-front .revs { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
  /* THE OTHER TWO LAYOUTS, which the band offered and could not draw.
     A review is not a product card, so it does not borrow the card
     grid's tracks: the component keeps its widths and the layout is a
     modifier on it. A rule down the left is the whole shape of the
     thing, so all three are the same component with different
     directions -- which is what stops a store looking like three
     websites. */
  .v2-front .revs.rail { display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; padding-bottom:4px; }
  .v2-front .revs.rail::-webkit-scrollbar { display:none; }
  .v2-front .revs.rail > .rev { flex:0 0 min(330px,78vw); scroll-snap-align:start; }
  /* A LIST OF QUOTES IS A COLUMN, and a narrow one: full-width
     testimonials on a desktop run to 130 characters a line and stop
     being readable at exactly the moment they are asking to be
     believed. */
  .v2-front .revs.list { display:flex; flex-direction:column; gap:20px; }
  .v2-front .revs.list > .rev { max-width:68ch; }
  .v2-front .rev { border-left:2px solid var(--line); padding-left:18px; }
  .v2-front .rev .stars { color:var(--amber); font-size:13px; letter-spacing:.08em; }
  .v2-front .rev blockquote { margin:9px 0 10px; font-size:16px; line-height:1.55; }
  .v2-front .rev .who { color:var(--dim); font-size:13px; }
  .v2-front .rev .who b { color:var(--muted); font-weight:700; }
  .v2-front .rev-avg { display:flex; align-items:baseline; gap:10px; margin-bottom:24px; }
  .v2-front .rev-avg .n { font-size:38px; font-weight:900; line-height:1;
    font-variant-numeric:tabular-nums; }
  .v2-front .rev-avg .of { color:var(--dim); font-size:14px; }

  /* ---- questions ----------------------------------------------------------
     An accordion, because a wall of answers is the thing nobody reads and a
     wall of questions is a list of doubts. Open the first one so the
     pattern is obvious without a click. */
  .v2-front .qs { max-width:74ch; }
  .v2-front .q { border-bottom:1px solid var(--line-2); }
  .v2-front .q summary { cursor:pointer; list-style:none; padding:16px 34px 16px 0;
    font-size:16px; font-weight:700; position:relative; }
  .v2-front .q summary::-webkit-details-marker { display:none; }
  .v2-front .q summary::after { content:""; position:absolute; right:6px; top:24px;
    width:8px; height:8px; border-right:2px solid var(--dim);
    border-bottom:2px solid var(--dim); transform:rotate(45deg);
    transition:transform .18s; }
  .v2-front .q[open] summary::after { transform:rotate(-135deg); }
  .v2-front .q p { margin:0 0 18px; color:var(--muted); max-width:66ch; }
  .v2-front .q-a { color:var(--muted); padding-bottom:4px; }
  .v2-front .q-a p { margin:0 0 12px; }
  /* AND THE SAME BAND WITH NOTHING TO OPEN. The editor stores questions
     and no answers, so until it has a second field this is what the
     section can honestly be: the things people ask, which is a trust
     signal on its own -- a shop that knows its own objections. Same rule,
     same rhythm, no caret promising a disclosure that is not there. */
  .v2-front .q-flat { border-bottom:1px solid var(--line-2); padding:16px 0;
    font-size:16px; font-weight:700; }

  /* ---- sign-up ------------------------------------------------------------ */
  .v2-front .signup { display:flex; gap:12px; flex-wrap:wrap; align-items:center;
    max-width:560px; }
  .v2-front .signup input { flex:1 1 240px; min-height:44px; padding:11px 14px;
    border-radius:9px; border:1px solid var(--line); background:#232323;
    color:var(--text); font:inherit; font-size:15px; }
  .v2-front .signup input::placeholder { color:var(--dim); }
  .v2-front .signup input:focus { outline:none; border-color:rgba(45,194,107,.6); }
  /* THE HONEYPOT. Taken out of the layout rather than hidden with
     display:none, because some bots fill only what is "visible" by that
     test -- and taken out of the accessibility tree too, by the
     aria-hidden and tabindex the renderer puts on it, so a visitor
     tabbing through the form never lands in a box they must not fill. */
  .v2-front .signup .sr-trap { position:absolute; left:-9999px; width:1px; height:1px;
    opacity:0; pointer-events:none; }
  /* WHAT HAPPENED, on its own line under the form. It takes the whole
     width so that the answer never sits squeezed beside the button, and
     it is empty until there is something to say -- an empty status line
     reserving space above the fold is a gap nobody can explain. */
  .v2-front .signup .signup-said { flex:1 0 100%; margin:0; font-size:13.5px;
    color:var(--muted); }
  .v2-front .signup .signup-said:empty { display:none; }
  .v2-front .signup .signup-said.ok { color:var(--store,var(--green)); font-weight:700; }
  .v2-front .signup .signup-said.bad { color:#f08d98; }

  /* ---- links --------------------------------------------------------------
     At the foot, where they belong: they are where to find this person
     after the page has done its job, not a reason to leave it. */
  .v2-front .links { display:flex; gap:10px; flex-wrap:wrap; }
  .v2-front .links a { width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--muted);
    transition:color .15s,border-color .15s; }
  .v2-front .links a:hover { color:var(--text); border-color:rgba(255,255,255,.26); }
  .v2-front .links svg { width:17px; height:17px; flex:none; }

  /* OR THEY SAY WHERE THEY GO. An icon row is right when the marks are
     recognised and wrong the moment one of them is a globe -- "Website"
     and "Email" have no logo anybody knows, so a store whose links are
     its own site and an address is a row of two shrugs.

     Same height as the circles, so switching between the two does not
     move the band. */
  .v2-front .links.as-buttons a { width:auto; height:44px; border-radius:var(--r-btn,9px);
    gap:9px; padding:0 17px; font-size:14px; font-weight:700; }

  /* ---- an empty band ------------------------------------------------------
     Only ever seen when its owner has turned "hide while empty" off. Muted
     icon and a sentence, per the guide -- red is for failure, and an empty
     shelf has not failed. */
  .v2-front .none { border:1px dashed var(--line); border-radius:14px; padding:30px;
    text-align:center; color:var(--dim); }

  /* ---- the foot ------------------------------------------------------------
     A CREDIT, NOT A BANNER. It was the store's own URL on the left and
     "Sold through LearnersHQ" on the right, in a 34px band. This is the
     creator's shop; the customer did not come here for us. So the URL --
     our domain, spelling out the address they are already at -- is gone,
     the band is half the height, and what is left is who built it and
     the terms the sale happens under. */
  .v2-front .foot { background:#181818; border-top:1px solid var(--line); padding:18px 0 22px;
    margin-top:0; }
  .v2-front .foot-in { max-width:var(--page); margin:0 auto; padding:0 var(--gut);
    display:flex; gap:18px; align-items:center; flex-wrap:wrap;
    color:var(--dim); font-size:12.5px; }
  .v2-front .foot a { color:inherit; text-decoration:none; }
  .v2-front .foot-by { display:inline-flex; align-items:center; gap:7px; }
  /* THE LOCKUP, at the cap height of the line beside it -- its viewBox is
     the ink rather than the cap band, so 15px of box is about 13px of
     letter and sits level with "Built using".

     LEARNERS FOLLOWS THE FOOT; THE MARK AND HQ DO NOT. The file hard
     codes white letters because it is normally shown through an <img>,
     which inherits nothing -- and white is right on the foot's own
     #181818, but not when the Footer setting is Plain or Banded on a
     light page. A presentation attribute loses to a CSS property, so
     this one line is enough to make the letters adapt. The green mark
     and the cobalt HQ carry fill attributes of their own, which an
     inherited value cannot reach, so they keep their brand colours on
     every ground. */
  .v2-front .foot-lockup { height:15px; width:auto; flex:none; }
  .v2-front .foot-lockup .lhq-word { fill:currentColor; }

  /* AND THE FALLING BALL RUNS HERE TOO, on hover (3 Oct 2026). Its rules,
     keyframes and guards are all in logo.css, which lists .foot-by among
     the surfaces it drives -- generated with the lockup by
     lhq-logo-build.js, so the credit's ball cannot drift from the bar's.
     Nothing is restated here. */

  .v2-front .foot-by { color:var(--muted); }
  .v2-front .foot-by:hover, .v2-front .foot-t:hover { color:var(--text); }
  .v2-front .foot-by:focus-visible, .v2-front .foot-t:focus-visible { outline:2px solid var(--store);
    outline-offset:3px; border-radius:3px; }
  /* The first of the links on the right takes the gap; a second sits
     beside it. "My purchases" only exists for somebody signed in, so
     the rule has to work with one link and with two. */
  .v2-front .foot-t { margin-left:auto; }
  .v2-front .foot-t ~ .foot-t { margin-left:0; }

  /* THE STORE'S OWN FOOTER (4 Oct 2026, Martin), a row above the credit
     inside the same strip, so the Footer background reaches both. Its
     words cannot be the page's --text: the strip is near-black in every
     mood by default, so each strip colour names its own three inks. */
  .v2-front .foot { --fo-text:#eef1f6; --fo-dim:rgba(255,255,255,.62); --fo-line:rgba(255,255,255,.12); }
  .v2-front:is(.foot-plain,.foot-band,.foot-tint) .foot { --fo-text:var(--text); --fo-dim:var(--muted); --fo-line:var(--line); }
  .v2-front.foot-light .foot { --fo-text:#161616; --fo-dim:#5b6370; --fo-line:rgba(0,0,0,.10); }
  .v2-front.foot-deep .foot { --fo-text:#fff; --fo-dim:rgba(255,255,255,.74); --fo-line:rgba(255,255,255,.20); }
  .v2-front .foot-own { max-width:var(--page); margin:0 auto 16px; padding:6px var(--gut) 20px;
    border-bottom:1px solid var(--fo-line); }
  .v2-front .fo-in { display:flex; align-items:center; justify-content:space-between; gap:18px 28px; flex-wrap:wrap; }
  .v2-front .fo-who { display:flex; flex-direction:column; gap:8px; min-width:0; max-width:520px; }
  .v2-front .fo-brand { display:inline-flex; align-items:center; gap:11px; color:var(--fo-text); }
  .v2-front .fo-brand b { font-family:var(--font-head,inherit); font-size:17px; font-weight:800; line-height:1.2; }
  .v2-front .fo-pic { flex:none; width:38px; height:38px; border-radius:50%; background-size:cover;
    background-position:center; display:grid; place-items:center; color:#fff;
    font-size:13px; font-weight:800; }
  .v2-front.frame-rounded .fo-pic { border-radius:10px; }
  .v2-front.frame-square .fo-pic { border-radius:0; }
  .v2-front.frame-angled .fo-pic { border-radius:0;
    clip-path:polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
  .v2-front .fo-line { margin:0; color:var(--fo-dim); font-size:14px; line-height:1.5; }
  .v2-front .fo-acts { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
  .v2-front .fo-social { display:flex; align-items:center; gap:6px; }
  .v2-front .fo-social a { width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
    color:var(--fo-dim); border:1px solid var(--fo-line); }
  .v2-front .fo-social a:hover { color:var(--fo-text); border-color:var(--fo-dim); }
  .v2-front .fo-social svg { width:15px; height:15px; }
  /* The whole button, not only its colour: the designer's preview does not
     load v2-follow.css, and draws this one itself. */
  .v2-front .foot .fo-acts .lhq-follow { display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
    border-radius:999px; border:1px solid var(--store,var(--green)); background:var(--store,var(--green));
    color:var(--on-store,#fff); font:inherit; font-size:13px; font-weight:700; line-height:1.2;
    white-space:nowrap; }
  .v2-front .foot .fo-acts .lhq-follow.is-on { background:transparent; border-color:var(--fo-line); color:var(--fo-text); }
  .v2-front .fo-ask { display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
    border:1px solid var(--fo-line); background:transparent; color:var(--fo-text);
    font:inherit; font-size:13px; font-weight:700; line-height:1.2; cursor:pointer; }
  .v2-front .fo-ask:hover { border-color:var(--fo-dim); }
  .v2-front .fo-inert { cursor:default; }
  .v2-front.sq .fo-ask, .v2-front.sq .foot .fo-acts .lhq-follow { border-radius:4px; }
  /* Centred: the row becomes a column, centred like the rest of the page. */
  .v2-front.mid .fo-in { flex-direction:column; text-align:center; }
  .v2-front.mid .fo-who { align-items:center; }
  .v2-front.mid .fo-acts { justify-content:center; }
  @media (max-width:620px) {
    .v2-front .fo-in { flex-direction:column; align-items:flex-start; }
    .v2-front.mid .fo-in { align-items:center; }
  }
  /* UNDER A PRODUCT, BUNDLE OR LANDING PAGE (4 Oct 2026): the row alone,
     with a footer of ours under it in place of the credit, so no rule and
     no gap. The class sits on the .v2-front itself, hence no space. */
  .v2-front.foot-alone .foot { padding:24px 0; }
  .v2-front.foot-alone .foot-own { margin-bottom:0; padding-bottom:0; border-bottom:0; }
  /* The name and Contact us are links there, and `.v2-front a:link` is
     colour:inherit at (0,2,1) -- which would put the page's text colour on
     a Light strip. */
  .v2-front a.fo-brand:is(:link,:visited) { color:var(--fo-text); }
  .v2-front a.fo-ask:is(:link,:visited) { color:var(--fo-text); }

  /* ==== THE THEME =========================================================

     A STORE'S LOOK IS SET IN THE DESIGNER AND INHERITED FROM NOWHERE. That
     is the rule this block exists to keep. The platform hands every public
     page a --theme-colour-main off the account's settings, and it was
     reaching in here: product titles came out #3b82f6 because a link
     colour three stylesheets away won a specificity tie. Patching that one
     symptom was not the answer. Every colour, radius and face this page
     uses is declared below, on .v2-front, and nothing reads a token it
     does not own.

     FOUR KNOBS AND A RULE FOR WHICH ONES ARE ALLOWED. A setting earns its
     place when it has two or three values, every value looks right, it is
     a preference honest stores genuinely differ on, and it cannot combine
     with another into a mess. Colours you type, padding you nudge and
     column counts you pick fail that test -- which is why they are not
     here and are not coming.

     WHAT IS DELIBERATELY MORE THAN ETSY. Etsy gives a banner, an icon, a
     name, a bio and ordered listing sections, and no control of colour,
     type or layout whatsoever. This gives the store's colour on its own
     buttons, three typographic characters, its corners, its alignment and
     its rhythm -- while every value remains one we drew. Limited builder,
     not a canvas, and not a straitjacket either.
     ======================================================================= */

  /* ---- the store's colour -------------------------------------------------

     ONE COLOUR, AND IT IS THE BUTTON'S TOO. The earlier draft kept the buy
     button green on the argument that green means go across the whole
     marketplace. Overruled, and the mitigation is that the button's shape,
     size and position are identical in every store -- recognition rides
     more on placement than on hue -- and that the colour cannot be typed,
     only chosen, so it is never unreadable.

     --on-store is the text ON the colour, and it is part of the choice
     rather than a calculation: amber wants near-black on it and violet
     wants white, and sampling that once here beats getting it wrong at
     runtime in a browser that has no idea what the button is for. */
  /* ANY COLOUR, and it arrives as three custom properties on the root
     rather than as a class. Six named ones was the earlier design and the
     brief moved: nowhere near Merlin, but further than a cookie-cutter
     template goes. A class list cannot carry an arbitrary value, so the
     renderer writes a style attribute -- the one place on this page where
     a value a browser sent reaches CSS, which is why it is validated as
     six hex digits or dropped entirely.

     --on-store IS COMPUTED, NOT CHOSEN. The text on the button is derived
     from the colour's own luminance, so a pale yellow gets near-black and
     a navy gets white. A creator can now make a storefront that is not to
     my taste; they cannot make one with an invisible buy button, which is
     the only version of this that costs them money. */
  .v2-front {
    --store:#2dc26b; --store-lit:#3ad47a; --on-store:#ffffff;
  }

  /* Everywhere it lands, listed in one place so a new component cannot
     quietly reintroduce the hard-coded green. */
  /* THE PSEUDO-CLASSES AGAIN, and this time it was the colour the
     renderer computes that lost. `.v2-front a:link` is (0,2,1) and
     `.v2-front .btn-go` is (0,2,0), so `color:inherit` beat
     `color:var(--on-store)` and a pale yellow button got near-white
     text -- the one outcome the whole computed-contrast idea exists to
     prevent. Third time this shape has cost something on this page. The
     rule is: any declaration that has to beat the link reset needs a
     pseudo-class of its own in the selector. */
  /* THE BUTTON CAN HAVE ITS OWN COLOUR. --btn is not set unless a creator
     picked one, so the fallback is the store's colour and a store that
     never opens the setting is untouched. Three variables, decided once in
     tint(): the fill, the hover, and the text that is readable on it. */
  .v2-front .btn-go, .v2-front a.btn-go:link, .v2-front a.btn-go:visited { background:var(--btn,var(--store));
    color:var(--on-btn,var(--on-store)); }
  .v2-front .btn-go:hover, .v2-front a.btn-go:hover { background:var(--btn-lit,var(--store-lit));
    color:var(--on-btn,var(--on-store)); }
  .v2-front .btn:focus-visible { outline-color:var(--btn-lit,var(--store-lit)); }

  /* AND ITS STYLE. Solid is the default and is what every store has.

     The other two do not fill, so --on-btn is no use to them: the text
     sits on the page, not on the button. It is the button's colour pushed
     most of the way towards whatever the mood's own text colour is, which
     darkens it on Paper and lightens it on Dark with neither written out.
     A fixed light colour here would have been the masthead's bug again,
     one mood later.

     The selectors carry a class more than the ones above and keep the
     pseudo-class, because those above carry :link and this page has paid
     for that three times. */
  .v2-front.btn-outline .btn-go, .v2-front.btn-outline a.btn-go:link, .v2-front.btn-outline a.btn-go:visited { background:transparent;
    border-color:var(--btn,var(--store));
    color:color-mix(in srgb, var(--btn,var(--store)) 78%, var(--text)); }
  .v2-front.btn-outline .btn-go:hover, .v2-front.btn-outline a.btn-go:hover {
    background:color-mix(in srgb, var(--btn,var(--store)) 14%, transparent);
    border-color:var(--btn-lit,var(--store-lit)); }
  .v2-front.btn-soft .btn-go, .v2-front.btn-soft a.btn-go:link, .v2-front.btn-soft a.btn-go:visited { border-color:transparent;
    background:color-mix(in srgb, var(--btn,var(--store)) 18%, transparent);
    color:color-mix(in srgb, var(--btn,var(--store)) 78%, var(--text)); }
  .v2-front.btn-soft .btn-go:hover, .v2-front.btn-soft a.btn-go:hover {
    background:color-mix(in srgb, var(--btn,var(--store)) 28%, transparent); }

  /* AND THE CARDS' OWN BUY BUTTONS (4 Oct 2026, Martin: "I don't see button
     style or button colour working on product cards and bundle cards"). They
     are not .btn-go, so neither setting reached them: a product's and a
     bundle's buy, and the copy that follows a long bundle card down. "You
     have this" and "Sold out" keep their own quiet look. */
  .v2-front .pc-buy:not(.is-have):not(.is-gone), .v2-front .bundle-buy, .v2-front .bc-stick button {
    background:var(--btn,var(--store,var(--amber))); color:var(--on-btn,var(--on-store,#0f1114)); }
  .v2-front.btn-outline .pc-buy:not(.is-have):not(.is-gone), .v2-front.btn-outline .bundle-buy, .v2-front.btn-outline .bc-stick button {
    background:transparent; box-shadow:inset 0 0 0 1.5px var(--btn,var(--store));
    color:color-mix(in srgb, var(--btn,var(--store)) 78%, var(--text)); }
  .v2-front.btn-outline .pc-buy:not(.is-have):not(.is-gone):hover, .v2-front.btn-outline .bundle-buy:hover {
    background:color-mix(in srgb, var(--btn,var(--store)) 14%, transparent); filter:none; }
  .v2-front.btn-soft .pc-buy:not(.is-have):not(.is-gone), .v2-front.btn-soft .bundle-buy, .v2-front.btn-soft .bc-stick button {
    background:color-mix(in srgb, var(--btn,var(--store)) 18%, transparent);
    color:color-mix(in srgb, var(--btn,var(--store)) 78%, var(--text)); }
  .v2-front.btn-soft .pc-buy:not(.is-have):not(.is-gone):hover, .v2-front.btn-soft .bundle-buy:hover {
    background:color-mix(in srgb, var(--btn,var(--store)) 28%, transparent); filter:none; }

  /* ---- CARD LAYOUT (4 Oct 2026, Martin) ---------------------------------

     FOUR WAYS TO LAY OUT THE SAME CARD. Classic is the default and is the
     card as it was drawn; Poster, Gallery and Compact rearrange it. Every
     one is the same markup with the same parts -- the sale ribbon, the ways
     to pay, the buy strip, a bundle's contents -- so nothing a buyer needs
     can go missing, and the fill, button style, colour and type settings
     all still apply on top. A products section's own Grid / Carousel / List
     choice stays its own: Poster lays the title on the picture only in a
     grid, and a list or carousel shows it as Classic.

     Measured on martindev before it was written here (a 232px column):
     Classic 616px tall, Poster 603, Gallery 550, Compact 463. */

  /* CARD COLOUR (4 Oct 2026, Martin): a card in any colour, its words
     light or dark from it -- the server sends --card-bg and --on-card only
     when one is chosen, so a store without one matches nothing here. Not
     in Gallery, which has no panel: dark words on no panel on a dark page
     would be unreadable, and the designer hides the setting there. The
     price, the sale ribbon and the button keep their own colours. */
  .v2-front[style*="--card-bg"]:not(.cl-gallery) .card, .v2-front[style*="--card-bg"]:not(.cl-gallery) .bundle {
    background:var(--card-bg);
    --text:var(--on-card);
    --muted:color-mix(in srgb, var(--on-card) 78%, transparent);
    --dim:color-mix(in srgb, var(--on-card) 58%, transparent);
    --line:color-mix(in srgb, var(--on-card) 16%, transparent);
    --line-2:color-mix(in srgb, var(--on-card) 10%, transparent);
    --panel-2:color-mix(in srgb, var(--on-card) 8%, var(--card-bg));
    color:var(--text); border-color:color-mix(in srgb, var(--on-card) 16%, transparent); }

  /* POSTER: the title on the picture, over a fade; the rest left-aligned. */
  .v2-front.cl-poster .cards:not(.rail):not(.list) > .pcard > .card-body > .pc-title, .v2-front.cl-poster .bundle > .bc-body > .bc-title {
    grid-row:1; grid-column:1; align-self:end; z-index:2; height:auto; min-height:0;
    padding:56px 16px 14px; justify-content:flex-start; text-align:left;
    background:linear-gradient(to bottom, transparent, rgba(0,0,0,.82));
    color:#fff; pointer-events:none; }
  .v2-front.cl-poster .cards:not(.rail):not(.list) > .pcard > .card-body > .pc-title h3, .v2-front.cl-poster .bundle > .bc-body > .bc-title h3 { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5); }
  .v2-front.cl-poster .cards:not(.rail):not(.list) > .pcard > .card-body > .pc-title a, .v2-front.cl-poster .bundle > .bc-body > .bc-title a { color:#fff; pointer-events:auto; }
  .v2-front.cl-poster .cards:not(.rail):not(.list) > .pcard > .card-art, .v2-front.cl-poster .bundle > .bc-art { grid-row:1; grid-column:1; aspect-ratio:4/3; }
  /* A bundle has no subgrid, so it becomes a grid of its own for the same trick. */
  .v2-front.cl-poster .bundle { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; }
  .v2-front.cl-poster .bundle > .bc-body { display:contents; }
  .v2-front.cl-poster .bundle > .bc-body > * { margin-left:16px; margin-right:16px; width:auto;
    justify-self:stretch; box-sizing:border-box; }
  .v2-front.cl-poster .bundle > .bc-body > .bc-title { margin:0; }
  .v2-front.cl-poster .bundle > .bc-body > .bc-count { margin-top:12px; }
  .v2-front.cl-poster .bundle > .bc-body > :last-child { margin-bottom:16px; }
  .v2-front.cl-poster .bc-title + .bc-count, .v2-front.cl-poster .cards:not(.rail):not(.list) > .pcard .pc-mid, .v2-front.cl-poster .cards:not(.rail):not(.list) > .pcard .pc-count {
    justify-content:flex-start; align-items:flex-start; text-align:left; }
  .v2-front.cl-poster .cards:not(.rail):not(.list) > .pcard .pc-mid { padding-top:12px; }
  .v2-front.cl-poster .cards:not(.rail):not(.list) > .pcard .pc-price, .v2-front.cl-poster .bundle .bc-price { justify-content:flex-start; text-align:left; }

  /* GALLERY: the picture leads, square and lifted; no panel, the words
     small and left; the files box and a bundle's pitch and contents go. */
  .v2-front.cl-gallery .card, .v2-front.cl-gallery .bundle {
    background:transparent; border-color:transparent; box-shadow:none; overflow:visible; }
  @media (hover:hover) and (pointer:fine) and (min-width:621px) {
    .v2-front.cl-gallery .card:hover, .v2-front.cl-gallery .bundle:hover { transform:none; box-shadow:none; border-color:transparent; }
    .v2-front.cl-gallery .card:hover .card-art, .v2-front.cl-gallery .bundle:hover .bc-art {
      transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.4); }
  }
  .v2-front.cl-gallery .card-art, .v2-front.cl-gallery .bc-art {
    aspect-ratio:1/1; border-radius:12px; overflow:hidden; transition:transform .16s, box-shadow .16s; }
  .v2-front.cl-gallery .pc-title, .v2-front.cl-gallery .bc-title {
    --t:15px; height:auto; min-height:0; justify-content:flex-start; text-align:left; }
  .v2-front.cl-gallery .pcard .pc-title h3, .v2-front.cl-gallery .bundle .bc-title h3 {
    font-weight:700; -webkit-line-clamp:2; }
  .v2-front.cl-gallery .cards > .pcard > .card-body > *, .v2-front.cl-gallery .pcard .card-body, .v2-front.cl-gallery .bc-body { padding-left:2px; padding-right:2px; }
  .v2-front.cl-gallery .pc-mid, .v2-front.cl-gallery .pc-count, .v2-front.cl-gallery .bc-title + .bc-count { justify-content:flex-start; align-items:flex-start; text-align:left; }
  .v2-front.cl-gallery .pcard .pc-price, .v2-front.cl-gallery .bc-price { justify-content:flex-start; text-align:left; }
  .v2-front.cl-gallery .pcard .pc-price .price { font-size:18px; }
  .v2-front.cl-gallery .pc-inside, .v2-front.cl-gallery .bundle .bc-sec { display:none; }

  /* COMPACT: picture, title, price and button -- for a long catalogue. */
  .v2-front.cl-compact .pc-inside, .v2-front.cl-compact .bundle .bc-sec { display:none; }
  .v2-front.cl-compact .pc-title, .v2-front.cl-compact .bc-title {
    --t:15px; height:calc(2 * 1.25 * var(--t)); }
  .v2-front.cl-compact .pcard .pc-title h3, .v2-front.cl-compact .bundle .bc-title h3 { -webkit-line-clamp:2; }
  .v2-front.cl-compact .pcard .pc-price .price { font-size:20px; }
  .v2-front.cl-compact .cards > .pcard .pc-mid { padding-top:2px; }

  .v2-front .price { color:var(--store); }
  .v2-front .price.free { color:var(--store-lit); }
  .v2-front .eye span { color:var(--store); }
  .v2-front .jump a.on { border-bottom-color:var(--store); }
  .v2-front .bundle li svg { color:var(--store); }
  /* THE CHOSEN FILTER IS THE STORE'S COLOUR, and the word on it is the
     computed contrast rather than a guess -- same pair as the buy
     button, because this is the other control on the page that a
     creator's colour can make unreadable. */
  .v2-front .finder-kinds button.on { background:var(--store);
    border-color:var(--store); color:var(--on-store); }
  .v2-front .finder-kinds button.on i { color:var(--on-store); opacity:.72; }
  .v2-front .finder-kinds button.on:hover { background:var(--store-lit);
    border-color:var(--store-lit); color:var(--on-store); }
  .v2-front .finder-find input:focus { border-color:var(--store); }
  .v2-front .finder-kinds button:focus-visible { outline:2px solid var(--store-lit);
    outline-offset:2px; }

  /* THE MASTHEAD IS THE STORE'S, NOT THE PLATFORM'S. It was the app's
     chrome teal with the app's green sheen over it, which is exactly the
     inheritance this block is for removing: a violet store read as a
     LearnersHQ store until the first band. LearnersHQ's identity lives in
     the bar above this page and the line in its footer, which is where
     Etsy puts it too. */
  /* A SECOND COLOUR TAKES THE FAR END, AND THE MIDDLE WITH IT. Neither
     variable is set without one, so the two fallbacks below are the
     gradient a one-colour store has always had and it is untouched.

     The middle has to move as well as the end. On its own it is 14% of the
     FIRST colour and darker than either end, which is a vignette on a
     one-colour head and a trough on a two-tone one -- the two colours
     would meet through a dark band instead of blending. Given two, tint()
     sends the average of them.

     Both are worked out in tint() rather than color-mix'd here, because
     they have to be darkened by the same amounts the ends already are and
     that arithmetic lives in PHP next to the readable-text rule. */
  /* NAMED, BECAUSE THE FOOT CAN WEAR IT TOO. A store that ends the page on
     the same sweep it opened on is bookended, and it is the one footer
     option that puts the second colour anywhere but the hero. Written once
     so the two cannot drift. */
  .v2-front { --head-wash:linear-gradient(97deg,
      color-mix(in srgb, var(--store) 26%, #101314) 0%,
      var(--store-mid, color-mix(in srgb, var(--store) 14%, #0d1011)) 52%,
      var(--store-far, #0b0e0f) 100%); }
  .v2-front .mast { background:var(--head-wash); }

  /* OR IT IS ONE FLAT COLOUR, IF THAT IS WHAT THEY WANT.

     A gradient is a taste, and this page had it as a fact. Solid is one
     mix of the store's colour, at 22% -- a little under the gradient's
     near end, because the near end is the part anybody judges the head by
     (it is where the logo and the title sit) and a solid at the
     gradient's AVERAGE would read as a duller shop than the one they
     picked. Mixed against the same near-black, so white stays readable
     however pale a colour goes in.

     Redefining the variable rather than the rule is the whole reason it
     is a variable: the foot's Deep and a section's Deep read --head-wash
     too, so both follow without knowing this setting exists.

     AND THE SHEEN GOES, because it is itself a gradient -- 30% of the
     colour fading out at 44% -- and a solid with a gradient over it is
     not a solid. */
  .v2-front.head-solid {
    --head-wash:color-mix(in srgb, var(--store) 22%, #101314);
  }
  .v2-front.head-solid .mast::after { display:none; }

  /* THE HEAD IS DARK IN EVERY MOOD, SO ITS TEXT IS LIGHT IN EVERY MOOD.

     This gradient is the store's colour over a near-black whatever the
     page is doing, but the title took --text and the moods redefine that:
     on Paper it came out rgb(32,28,22) on a hero of about rgb(49,42,73),
     which is black on dark purple and cannot be read at all. I shipped
     that with the moods -- I measured the page ground and the page text
     and never looked at the one element whose ground does not follow
     them.

     So the head carries its own. Nothing here reads --text now: the meta
     line and the stars were already explicit, and this is the title
     catching up with them. */
  .v2-front .mast h1 { color:#f4f7fa; }
  .v2-front .mast::after {
    background:linear-gradient(97deg,
      color-mix(in srgb, var(--store) 30%, transparent), transparent 44%);
  }

  /* ---- corners ------------------------------------------------------------
     The guide's ladder says radius carries meaning -- the bigger the thing,
     the rounder it is -- so the setting moves the whole ladder rather than
     letting a creator set one corner and not another. Square is not zero
     everywhere: a 2px softening is the difference between deliberate and
     accidental. */
  .v2-front { --r-panel:12px; --r-btn:9px; --r-art:14px; }
  .v2-front.sq { --r-panel:2px; --r-btn:2px; --r-art:3px; }
  .v2-front .card, .v2-front .bundle { border-radius:var(--r-panel); }
  .v2-front .btn { border-radius:var(--r-btn); }
  /* THE CARDS' BUY BUTTONS ARE PILLS, and stayed pills on a Square store
     (4 Oct 2026): Square squares them too, as it does every other button. */
  .v2-front.sq .pc-buy, .v2-front.sq .bundle-buy, .v2-front.sq .bc-stick button { border-radius:var(--r-btn); }
  .v2-front .hero, .v2-front .about-pic img { border-radius:var(--r-art); }
  /* .mast-pic is not on the ladder: its shape is the Logo setting's. */
  .v2-front .signup input { border-radius:var(--r-btn); }
  .v2-front .finder-find input, .v2-front .finder-kinds button { border-radius:var(--r-btn); }
  .v2-front .none { border-radius:var(--r-art); }

  /* ---- type ---------------------------------------------------------------
     THREE CHARACTERS, NO DOWNLOADS. A font picker is the one option where
     every value is emphatically not right, and three extra webfont families
     on a page a customer is waiting to buy from is a real cost for a
     decorative win. So the choices are built from what is already loaded --
     Lato -- and from a serif every machine already has.

     Clean      Lato throughout. What the platform is.
     Editorial  a serif for display, Lato for reading. The biggest change
                of character available for nothing.
     Bold       Lato at 900, tighter, headings in caps. Loud, and some
                stores are loud. */
  /* FIVE CHARACTERS, AND THREE OF THEM ARE REAL FACES NOW. The earlier
     set was built from what was already loaded, on the argument that
     three webfont families on a page somebody is waiting to buy from is a
     cost for a decorative win. That argument survives; the answer changed.
     The renderer prints ONE font link, for the one family the store
     chose, and nothing at all for the two that need no download. A store
     that leaves it alone pays nothing.

     Each one is a different job rather than a different taste. Editorial
     is a bookshop, Warm is something handmade, Strong is a poster, Bold
     is Lato shouting and costs no bytes. */
  .v2-front {
    --font-head:var(--font);
    --head-weight:900; --head-track:-.01em; --head-case:none;
  }
  .v2-front.t-editorial {
    --font-head:"Playfair Display",Georgia,serif;
    --head-weight:800; --head-track:-.01em; --head-case:none;
  }
  .v2-front.t-warm {
    --font-head:Fraunces,Georgia,serif;
    --head-weight:800; --head-track:-.005em; --head-case:none;
  }
  .v2-front.t-strong {
    --font-head:"Archivo Black",var(--font);
    --head-weight:400; --head-track:-.02em; --head-case:none;
  }
  .v2-front.t-bold {
    --head-weight:900; --head-track:.02em; --head-case:uppercase;
  }

  /* THE BODY FACE, SEPARATELY FROM THE HEADINGS.

     The character setting only ever moved --font-head. Everything anybody
     actually reads on this page has been Lato throughout, whichever of
     the five was picked, which made "Editorial" a heading and nothing
     else. Splitting them is the same move the buy button's colour was:
     two things that were one setting because they happened to agree, and
     a bookshop heading over a plain body is a pairing somebody should be
     allowed to make.

     NO WEBFONT IN THIS LIST, and that is the whole difference from the
     headings. A display face is a handful of glyphs at one weight; a
     reading face is every weight and every italic, on a page somebody is
     waiting to buy from. These two are already on the machine and cost
     nothing, and the fontLink() that prints one <link> stays as it is
     because there is nothing here to fetch.

     Clean leaves --font alone, so a heading set to Clean follows the body
     rather than reverting to Lato behind its back. */
  .v2-front.b-serif { --font:Georgia,"Times New Roman",Times,serif; }
  .v2-front.b-system {
    --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  .v2-front .band h2, .v2-front .hero h2, .v2-front .mast h1, .v2-front .card h3, .v2-front .bundle h3 {
    font-family:var(--font-head); font-weight:var(--head-weight);
    letter-spacing:var(--head-track);
  }
  .v2-front .band h2, .v2-front .hero h2 { text-transform:var(--head-case); }
  /* A card title is a product's name and is never shouted, whatever the
     page's character -- it is content, not furniture. */
  .v2-front .card h3 { text-transform:none; letter-spacing:0; }

  /* ---- alignment ----------------------------------------------------------

     WHY IT IS A PAGE SETTING AND NOT A SECTION ONE. Centred and left are
     both good. Five bands each choosing separately is not: that is the
     same failure as per-section padding wearing a nicer hat, and it is how
     a page stops looking designed. One switch for the page, one exception
     for the hero -- a hero is a poster, and a poster is allowed to be
     centred over a page that is not. */
  .v2-front.mid :where(.band:not(.al-left)) .eye, .v2-front .al-mid .eye { justify-content:center; }
  /* THE BAND'S OWN HEADING, and not every h2 inside a band. The hero
     lives in one too, so `.band h2` centred its headline while its
     paragraph and its button stayed left -- a hero half-centred, which
     looks like a mistake rather than a choice. A direct child of .in is
     the band's heading; the hero's is two levels further down and is the
     hero's own business. */
  .v2-front.mid .band:where(:not(.al-left)) > .in > h2, .v2-front .band.al-mid > .in > h2, .v2-front.mid :where(.band:not(.al-left)) .rev-avg, .v2-front .al-mid .rev-avg { text-align:center; justify-content:center; }
  .v2-front.mid .band:where(:not(.al-left)) > .in > .lede, .v2-front .band.al-mid > .in > .lede { margin-left:auto; margin-right:auto;
    text-align:center; }
  /* THE CARDS MOVE TOO, and that is most of what this setting is for.

     justify-items:center was the first attempt and it does nothing you
     would want: it centres each card INSIDE its own grid cell, and the
     cells are 1fr so they are already the card's width. Measured with one
     product: a 1070px grid, four 254px tracks, and the single card hard
     against the left with 800px of nothing beside it -- under a heading
     that was obediently centred. The two halves of the page disagreeing
     is worse than either alignment on its own.

     Flex rather than grid for this variant, because a grid track always
     fills its share of the row: with auto-fill and 1fr there is nothing
     left over to centre. A flex row of fixed-width cards has a real
     width of its own, so the group centres -- and so does a part-full
     last row, which is where this is most visible.

     WHAT DOES NOT CENTRE IS THE INSIDE OF A CARD. A title, a chip and a
     price centred within their own box reads as weak rather than as
     deliberate, and the price stops lining up with the price beside it.
     The band is centred; the card is still a card. */
  .v2-front.mid :where(.band:not(.al-left)) .cards, .v2-front .al-mid .cards { display:flex; flex-wrap:wrap; justify-content:center; }
  .v2-front.mid :where(.band:not(.al-left)) .cards > *, .v2-front .al-mid .cards > * { flex:0 1 254px; }
  .v2-front.mid :where(.band:not(.al-left)) .cards.two > *, .v2-front .al-mid .cards.two > * { flex:0 1 340px; }
  /* NOT THE RAIL AND NOT THE LIST, now that reviews have all three.
     `.v2-front.mid .revs` is three classes deep and `.revs.rail` is two,
     so without the exclusion the centred page quietly turned a carousel
     back into a wrapping grid -- and the rail and the list are centred
     two rules further down by the selectors they share with the cards. */
  .v2-front.mid :where(.band:not(.al-left)) .revs:not(.rail):not(.list), .v2-front .al-mid .revs:not(.rail):not(.list) { display:flex; flex-wrap:wrap;
    justify-content:center; }
  .v2-front.mid :where(.band:not(.al-left)) .revs:not(.rail):not(.list) > *, .v2-front .al-mid .revs:not(.rail):not(.list) > * { flex:0 1 300px; }
  /* A rail is already its own scroller and centres only when it does not
     overflow, which is exactly the right behaviour and needs no rule. */
  .v2-front.mid :where(.band:not(.al-left)) .rail, .v2-front .al-mid .rail { justify-content:center; }
  .v2-front.mid :where(.band:not(.al-left)) .list, .v2-front .al-mid .list { align-items:center; }

  /* BODY COPY NEVER CENTRES, whatever the page says. About, Text and the
     questions keep their left measure: a centred paragraph past a line and
     a half is a typographic mistake rather than a taste, and the whole
     point of a closed option set is that every value in it is right. */
  .v2-front.mid :where(.band:not(.al-left)) .about-words, .v2-front .al-mid .about-words, .v2-front.mid :where(.band:not(.al-left)) .qs, .v2-front .al-mid .qs, .v2-front.mid :where(.band:not(.al-left)) .q, .v2-front .al-mid .q, .v2-front.mid :where(.band:not(.al-left)) .q-flat, .v2-front .al-mid .q-flat { text-align:left; }
  .v2-front.mid :where(.band:not(.al-left)) .about, .v2-front .al-mid .about { justify-items:center; }
  /* BUT THE COLUMN ITSELF MOVES, which is the cards mistake again in a
     quieter place. Measured: a heading centred across 1070px above a
     question list that started at the same x as a left-aligned page and
     stopped 400px short of the middle -- the two halves of the band set
     by different people. Left text inside a centred measure is the
     version that works: the questions line up with each other, and the
     block lines up with the heading above it. */
  .v2-front.mid :where(.band:not(.al-left)) .qs, .v2-front .al-mid .qs { margin-left:auto; margin-right:auto; }
  /* And the About band, now that it has a width of its own. */
  .v2-front.mid :where(.band:not(.al-left)) .about, .v2-front .al-mid .about { margin-left:auto; margin-right:auto; }

  /* CENTRED MEANS THE QUESTIONS AND THE SEARCH TOO (4 Oct 2026, Martin:
     "the accordion at the bottom, its answers are still left", and the
     store's search box sat at the left under a centred heading). The rule
     above kept question text left inside a centred column; on a centred
     page that read as a mistake rather than as typography. A question is a
     line and an answer is a few, so they centre within the column's
     readable width -- the chevron gets the same room on both sides so the
     words are truly in the middle. Paragraphs in About and Text still read
     left: those run long. */
  .v2-front.mid :where(.band:not(.al-left)) .q summary, .v2-front .al-mid .q summary {
    text-align:center; padding-left:34px; }
  .v2-front.mid :where(.band:not(.al-left)) .q-a, .v2-front .al-mid .q-a, .v2-front.mid :where(.band:not(.al-left)) .q p, .v2-front .al-mid .q p, .v2-front.mid :where(.band:not(.al-left)) .q-flat, .v2-front .al-mid .q-flat { text-align:center; }
  .v2-front.mid :where(.band:not(.al-left)) .q p, .v2-front .al-mid .q p { margin-left:auto; margin-right:auto; }
  .v2-front.mid :where(.band:not(.al-left)) .finder, .v2-front .al-mid .finder { justify-content:center; }
  /* And the blog's "See all posts", left alone under centred cards. The menu
     is NOT here on purpose: it has its own Centred, in Top of the page. */
  .v2-front.mid :where(.band:not(.al-left)) .blog-all, .v2-front .al-mid .blog-all { text-align:center; }

  /* ---- rhythm -------------------------------------------------------------
     The legitimate version of the padding control. Two designed states, not
     a number: a store with three products wants compact, a store with forty
     wants air, and neither of them wants to be asked for a pixel value. */
  .v2-front.compact .band:where(:not(.sp-roomy)), .v2-front .band.sp-compact { padding:34px 0; }
  .v2-front.compact :where(.band:not(.sp-roomy)) .cards, .v2-front .sp-compact .cards { gap:14px; }
  .v2-front.compact :where(.band:not(.sp-roomy)) .hero.is-medium, .v2-front .sp-compact .hero.is-medium { min-height:240px; }
  .v2-front.compact :where(.band:not(.sp-roomy)) .hero-in, .v2-front .sp-compact .hero-in { padding:32px 36px; }

  /* ---- the phone gets its own edit ---------------------------------------

     A STOREFRONT ON A PHONE IS NOT THE SAME SHOP SMALLER. Everything here
     already reflows -- the grid becomes one column, the about stacks, the
     rail scrolls -- and that is enough for most stores. It is not enough
     for a store whose page is eight bands deep, because a visitor on a
     phone will not scroll past four of them to reach the thing they came
     to buy.

     SO THE CHOICE IS WHICH BANDS SURVIVE, and nothing else. Not a second
     layout, not a second order, not a second set of words -- one flag per
     section, visible only once the creator has said they want a phone
     edit at all. Two pages that can disagree about their content is a
     maintenance burden handed to somebody who did not ask for it; two
     pages that can disagree about their LENGTH is just editing.

     IT IS A MEDIA QUERY AND NOT A DEVICE TEST. The server cannot know the
     width and must not guess from a user agent -- the same page has to be
     right in a narrow window on a desktop. So both versions are in the
     markup and CSS decides, which also means the phone edit costs nothing
     to cache. */
  /* The Read more of a band shortened on phones: drawn only by the phone
     rule below, so a desktop never sees it. It takes the band's own ink,
     which is right on all four tones without knowing which one it is on. */
  .v2-front .ph-more { display:none; justify-content:center; align-items:center; gap:6px;
    width:fit-content; margin:14px auto 0; padding:10px 20px; background:transparent; color:inherit;
    border:1px solid currentColor; border-radius:999px; font:inherit; font-size:14px;
    font-weight:700; cursor:pointer; opacity:.9; }
  .v2-front .ph-more:hover { opacity:1; }
  @media (max-width:760px) {
    /* THE PHONE ORDER. Flex on the root and a number on each band, so
       one document serves two arrangements. The masthead, the jump bar
       and the footer are pinned to the ends with orders of their own --
       they are the page rather than the stack, and a band must not be
       able to land above the name of the shop. */
    .v2-front.phone-set { display:flex; flex-direction:column; }
    .v2-front.phone-set > .v2-peek { order:-3; }
    /* DESCENDANTS, NOT CHILDREN. Both of these now sit inside .top and
       .top-in, which are display:contents and therefore still flex items
       of this box for layout -- but they are no longer children of it in
       the DOM, and a combinator reads the DOM. There is one masthead and
       one jump bar on a page, so naming them is exact. */
    .v2-front.phone-set .mast { order:-2; }
    .v2-front.phone-set .jump { order:-1; }
    .v2-front.phone-set > .band { order:var(--po, 0); }
    .v2-front.phone-set > .foot { order:999; }
    .v2-front.phone-set .band.no-phone { display:none; }
    /* A band hidden on a phone takes its jump link with it, or the bar
       offers a destination that is not there. */
    .v2-front.phone-set .jump a.no-phone { display:none; }
    /* AND THE MENU FOLLOWS THE PHONE ORDER (29 Sep 2026): each band's link
       carries the band's own --po. The blog and landing-page links carry
       none and default high, so they stay at the end where they belong. */
    .v2-front.phone-set .jump a { order:var(--po, 900); }
    /* SHORTENED ON PHONES (29 Sep 2026, Martin: "read more on certain
       text"). The band keeps its heading and its first lines, fades out,
       and a Read more opens it where it is. A mask rather than an overlay
       gradient, because an overlay has to know the band's background and
       a band can be any of four tones and two inks. The button sits
       outside .in so the mask does not fade it too. */
    .v2-front.phone-set .band.ph-short:not(.ph-open) > .in { max-height:22rem; overflow:hidden;
      -webkit-mask-image:linear-gradient(#000 62%, transparent); mask-image:linear-gradient(#000 62%, transparent); }
    .v2-front.phone-set .band.ph-short:not(.ph-open) > .ph-more { display:flex; }

    /* ---- the phone's own five ---------------------------------------------

       A DIFFERENT FIVE, BECAUSE THE QUESTION IS DIFFERENT. On a desktop it
       is what the menu should look like. On a phone it is whether a strip
       of links is worth the vertical space it costs on the device with the
       least of it -- and two of these five answer that with "no", in two
       different ways.

       Nothing on this page is pinned at this width by default; see the
       jump bar's own note for why. So "pinned to the bottom" is the one
       that opts back in, and it opts in at the bottom because that is
       where a thumb already is. */

    /* Wrapped: nothing hidden, paid for with a second line. */
    .v2-front.mp-wrap .jump-in { flex-wrap:wrap; overflow:visible;
      -webkit-mask-image:none; mask-image:none; padding-block:5px; }
    .v2-front.mp-wrap .jump a { padding:9px 10px; }

    /* Off: for a store three bands long, where a menu is a row of links to
       things that are already on the screen. */
    .v2-front.mp-none .jump { display:none; }

    /* Bottom: pinned where the thumb is. The footer buys the room back, or
       the last thing on the page sits under the bar for good. */
    .v2-front.mp-bottom .jump { position:fixed; left:0; right:0; bottom:0;
      top:auto; z-index:40; border-top:1px solid var(--line);
      border-bottom:0; padding-bottom:env(safe-area-inset-bottom,0px); }
    .v2-front.mp-bottom .foot { padding-bottom:88px; }

    /* Tap to open: the label, the checkbox, and a sibling selector doing
       the work a script would otherwise do. The tick box stays in the
       layout rather than going display:none, because a control that
       cannot be focused cannot be operated from a keyboard. */
    .v2-front.mp-sheet .jump-tick { display:block; position:absolute;
      width:1px; height:1px; opacity:0; pointer-events:none; }
    .v2-front.mp-sheet .jump-tap { display:flex; align-items:center; gap:9px;
      min-height:48px; padding:0 var(--gut); font-size:12px; font-weight:700;
      letter-spacing:.08em; text-transform:uppercase; color:var(--text);
      cursor:pointer; }
    .v2-front.mp-sheet .jump-tap::after { content:""; width:7px; height:7px;
      border-right:2px solid currentColor; border-bottom:2px solid currentColor;
      transform:translateY(-2px) rotate(45deg); transition:transform .18s; }
    .v2-front.mp-sheet .jump-tick:checked ~ .jump-tap::after {
      transform:translateY(2px) rotate(-135deg); }
    .v2-front.mp-sheet .jump-tick:focus-visible ~ .jump-tap {
      outline:2px solid var(--green-lit); outline-offset:-2px; }
    .v2-front.mp-sheet .jump-in { display:none; }
    .v2-front.mp-sheet .jump-tick:checked ~ .jump-in { display:flex;
      flex-direction:column; overflow:visible;
      -webkit-mask-image:none; mask-image:none; padding-bottom:8px; }
    .v2-front.mp-sheet .jump-tick:checked ~ .jump-in a { padding:14px 0;
      border-bottom:1px solid var(--line-2); }
    .v2-front.mp-sheet .jump-tick:checked ~ .jump-in a.on {
      border-bottom-color:var(--store); }
  }

  /* ---- the hero, which is two heroes ---------------------------------------

     OURS, OR THEIRS. A creator who has a designer, or a canva habit, wants
     to upload a finished banner and be left alone; a creator who has a
     photograph and a sentence wants us to set the type. Etsy is the same
     shape -- shop icon and name from the platform, banner from the seller
     -- and the reason it works there is the reason it works here: the
     masthead above carries the name, the rating and the count, so nothing
     load-bearing is trapped inside a picture.

     WHICH IS WHY THE BANNER DOES NOT REPLACE THE MASTHEAD. Text baked into
     an image does not reflow, cannot be read aloud, is not searched, and
     goes to a sliver on a phone. As decoration above a real masthead it
     costs nothing; as the only place the store is named it would cost
     everything.

     The upload is the same endpoint the store picture already uses --
     Courses/saveGroupImage, which validates, resizes to 1920x1080 and
     hands back a filename without writing a row. The filename goes in the
     hero's own settings, so a hero image needs no column of its own.

     A BANNER IS CENTRE-CROPPED, not letterboxed. 4:1 at desktop and a
     floor on a phone, so a wide strip becomes a shorter wide strip rather
     than a sliver or a stretched mess. */
  .v2-front .hero.is-banner { overflow:hidden; background-position:center;
    background-size:cover; min-height:0; aspect-ratio:4/1; display:block; }
  .v2-front .hero.is-banner::before { content:none; }
  @media (max-width:760px) {
    .v2-front .hero.is-banner { aspect-ratio:auto; min-height:150px; }
  }

  /* THE WASH IS THE PAGE'S OWN GROUND AT THREE STRENGTHS, and nothing
     else. An earlier draft had the store's colour tinting it as well,
     which is what made this set confusing to read: a legibility control
     and a personality control fighting over one surface. They are separate
     ideas and they get separate mechanisms now -- the colour is on the
     masthead and the ornament, and this does one job.

     It is a setting because a photograph is not predictable. A dark image
     needs less of it and a bright one needs more, and there is no reading
     of the file that answers that reliably -- which is exactly when a
     creator should be asked. It is also the only setting here where a
     wrong value makes words unreadable, so the middle is the default and
     the ends are gentle. */
  .v2-front .hero::before {
    background:linear-gradient(100deg,
      color-mix(in srgb, var(--ground) 92%, transparent) 0%,
      color-mix(in srgb, var(--ground) 72%, transparent) 48%,
      color-mix(in srgb, var(--ground) 35%, transparent) 100%); }
  .v2-front .hero.wash-light::before {
    background:linear-gradient(100deg,
      color-mix(in srgb, var(--ground) 72%, transparent) 0%,
      color-mix(in srgb, var(--ground) 42%, transparent) 48%,
      color-mix(in srgb, var(--ground) 12%, transparent) 100%); }
  .v2-front .hero.wash-heavy::before {
    background:linear-gradient(100deg,
      color-mix(in srgb, var(--ground) 99%, transparent) 0%,
      color-mix(in srgb, var(--ground) 90%, transparent) 48%,
      color-mix(in srgb, var(--ground) 64%, transparent) 100%); }

  /* A centred hero, which is the exception the page setting allows. */
  .v2-front .hero.mid { justify-content:center; text-align:center; }
  /* Centred, the same measure in the same units as the left-aligned one --
     see the note on .hero-in. A little wider, because a centred block with
     a short line above a long one shows the raggedness more. */
  .v2-front .hero.mid .hero-in { max-width:min(720px, 80%); }

  /* AND ON A PHONE THE CAP COMES OFF ENTIRELY. A hero at 390px is already
     as narrow as it is going to get; the 72% that keeps a headline clear
     of the far edge of a 1200px banner does the opposite job here. It was
     leaving "Record the outdoors without the hiss" 186px to sit in and
     turning four words into three lines with half the banner empty beside
     them. The padding is the margin at this width.
     This sits after the centred rule on purpose -- both resolve to the
     same specificity once the porter scopes them, so the later one wins,
     and up in the phone block above it would have lost. */
  @media (max-width:620px) {
    .v2-front .hero-in, .v2-front .hero.mid .hero-in { max-width:none; }
  }

  /* ---- THE MASTHEAD, PROFILE-SHAPED (28 Sep 2026, Martin) -----------------
     "B": a cover band, the picture overlapping its bottom edge, the name
     under it -- the shape every profile page has taught people to read, and
     "predominantly meant for mobile", so the phone is the base here and the
     desktop is the variation below it.

     THE WHOLE HEAD STAYS ON THE WASH. The name and the meta line are light
     in every mood because the head is dark in every mood (see "THE HEAD IS
     DARK IN EVERY MOOD"), so the cover is a brighter strip of the same
     colour at the top of it rather than a band with the name on the page
     ground underneath -- which on Light or Paper would have been white
     text on white. The cover is drawn from --store and the far colour, so
     a two-colour store shows both, and Solid makes it one flat colour.

     The ring round the picture is the wash's middle colour, so the picture
     looks cut out of the head rather than stuck on it. */
  /* ONE HEAD, NOT TWO (28 Sep 2026, Martin: "it feels like it's split up
     in two ... a gradient that kind of slices the picture halfway"). A
     coloured cover band over the wash is two backgrounds with a seam
     through the picture. So without a photo there is no band: the head is
     the one wash, and the picture sits in it with room above. */
  .v2-front .mast-cover { height:108px; }
  .v2-front .mast .mast-cover:not(.has-photo) { display:none; }
  .v2-front .mast .mast-cover:not(.has-photo) + .mast-in { padding-top:28px; }
  .v2-front .mast .mast-cover:not(.has-photo) + .mast-in .mast-pic { margin-top:0; }
  /* OR THE CREATOR'S OWN PHOTO (the designer's "Cover photo"). The
     address is inline on the element, which outranks the colour above;
     this only frames it. AND IT HAS NO BOTTOM EDGE: the photo fades out
     into the wash under it rather than stopping on a line, so a photo is
     still one head and not a strip laid on top of one. */
  .v2-front .mast .mast-cover.has-photo { background-position:center; background-size:cover;
    background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(180deg, #000 45%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 45%, transparent 100%); }
  /* HOW THE COVER SHOWS (1 Oct 2026, Martin: "the option to be full ...
     mixed with a gradient or masked out"). The fade above is the default.
     A SHARP EDGE keeps the strip and drops the fade. BEHIND EVERYTHING puts
     the photo under the whole head -- name, picture, buttons -- with a
     shade over it so the words stay readable: darkened, or washed in the
     store's own colour. Only with a photo; without one the head is the
     wash, whatever was chosen. */
  .v2-front.cv-edge .mast .mast-cover.has-photo { -webkit-mask-image:none; mask-image:none; }
  /* AS UPLOADED: the picture itself, the full width -- no fade, no shade.
     The <img> inside the cover is only shown here. Since 2 Oct 2026 every
     new cover is framed to 3:1 before it goes up; one uploaded earlier at
     another shape (a tall phone photo took the whole screen) is shown in
     the same 3:1 frame, its middle. */
  .v2-front .mast-cover-img { display:none; }
  .v2-front.cv-plain .mast .mast-cover.has-photo { height:auto; background-image:none !important;
    -webkit-mask-image:none; mask-image:none; }
  .v2-front.cv-plain .mast .mast-cover.has-photo .mast-cover-img { display:block; width:100%; height:auto;
    aspect-ratio:3/1; object-fit:cover; }
  .v2-front.cv-full .mast:has(.mast-cover.has-photo), .v2-front.cv-tint .mast:has(.mast-cover.has-photo) { position:relative; isolation:isolate; }
  .v2-front.cv-full .mast .mast-cover.has-photo, .v2-front.cv-tint .mast .mast-cover.has-photo { position:absolute; inset:0; height:auto; z-index:-1;
    -webkit-mask-image:none; mask-image:none; }
  .v2-front.cv-full .mast .mast-cover.has-photo::after, .v2-front.cv-tint .mast .mast-cover.has-photo::after { content:""; position:absolute; inset:0; }
  .v2-front.cv-full .mast .mast-cover.has-photo::after {
    background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.82) 100%); }
  .v2-front.cv-tint .mast .mast-cover.has-photo::after {
    background:linear-gradient(180deg, color-mix(in srgb, var(--store, #2dc26b) 30%, rgba(0,0,0,.25)) 0%,
      color-mix(in srgb, var(--store, #2dc26b) 28%, rgba(0,0,0,.86)) 100%); }
  /* Behind everything, as uploaded (2 Oct 2026): the same, unshaded. */
  .v2-front.cv-full.cv-photo .mast .mast-cover.has-photo::after { background:none; }
  .v2-front.cv-full .mast .mast-cover.has-photo + .mast-in, .v2-front.cv-tint .mast .mast-cover.has-photo + .mast-in { padding-top:64px; }
  .v2-front.cv-full .mast .mast-cover.has-photo + .mast-in .mast-pic, .v2-front.cv-tint .mast .mast-cover.has-photo + .mast-in .mast-pic { margin-top:0; }
  @media (min-width:761px) {
    .v2-front.cv-full .mast .mast-cover.has-photo + .mast-in, .v2-front.cv-tint .mast .mast-cover.has-photo + .mast-in { padding-top:96px; padding-bottom:30px; }
    .v2-front.cv-full .mast .mast-cover.has-photo + .mast-in .mast-pic, .v2-front.cv-tint .mast .mast-cover.has-photo + .mast-in .mast-pic { margin-top:0; }
  }
  .v2-front .mast-in { flex-direction:column; align-items:center; text-align:center;
    gap:10px; padding:0 var(--gut) 22px; }
  .v2-front .mast .mast-pic { width:104px; height:104px; margin-top:-52px; font-size:34px;
    box-shadow:0 0 0 4px var(--store-mid, color-mix(in srgb, var(--store, #2dc26b) 14%, #0d1011)),
      0 12px 28px rgba(0,0,0,.4); }
  .v2-front .mast h1 { font-size:24px; }
  .v2-front .mast .meta, .v2-front .mast-social, .v2-front .mast-acts { justify-content:center; }
  .v2-front .mast .share { margin-left:0; }
  /* THE HERO'S WORDS, UNDER THE NAME (28 Sep 2026). The hero was a second
     banner under this one; its headline, its line and its button are the
     header's bio and button now. The headline is the loudest thing after
     the name and quieter than it -- the name is whose shop, this is what
     they sell -- and the button is the store's colour, first in the row
     before Follow and Message. Light on the dark head, like the rest. */
  .v2-front .mast-words { margin:12px auto 0; max-width:560px; }
  .v2-front .mast .mast-head { margin:0; font-family:var(--font-head, inherit); font-size:18px;
    font-weight:800; line-height:1.3; color:#f4f7fa; text-wrap:balance; }
  .v2-front .mast .mast-sub { margin:5px 0 0; font-size:14.5px; line-height:1.5;
    color:rgba(255,255,255,.76); }
  .v2-front .mast-acts .mast-cta { margin:0; }
  @media (min-width:761px) {
    .v2-front .mast .mast-head { font-size:20px; }
    .v2-front .mast-words { margin-left:0; }
    .v2-front.m-centre .mast-words { margin-left:auto; }
    /* In line is one compact row: the words and the button have no room
       in it, and the page below still says what the shop sells. */
    .v2-front.m-inline .mast-words, .v2-front.m-inline .mast-cta { display:none; }
    .v2-front.m-inline .mast-in > div:not(.mast-pic) { padding-top:0; }
  }
  @media (min-width:761px) {
    /* THE DESKTOP: the picture at the left edge of the page, the name
       beside it and level with its lower half, like a profile page on a
       wide screen. Centred (the menu layout) keeps the phone's column. */
    .v2-front .mast-cover { height:150px; }
    /* TOP-ALIGNED, not bottom: with the hero's words under the name the
       text can be taller than the picture, and a bottom-aligned row pushed
       the picture down off the cover's edge. The name starts just under
       the cover, beside the picture's lower half. */
    .v2-front .mast-in { flex-direction:row; align-items:flex-start; text-align:left;
      gap:22px; padding-bottom:24px; }
    .v2-front .mast-in > div:not(.mast-pic) { padding-top:14px; }
    .v2-front .mast .mast-pic { width:128px; height:128px; margin-top:-64px; font-size:40px; }
    /* No photo, nothing to overlap: the name sits level with the picture. */
    .v2-front .mast .mast-cover:not(.has-photo) + .mast-in { align-items:center; padding-top:30px; }
    .v2-front .mast h1 { font-size:28px; }
    .v2-front .mast .meta, .v2-front .mast-social, .v2-front .mast-acts { justify-content:flex-start; }
    .v2-front.m-centre .mast-in { flex-direction:column; align-items:center; text-align:center; }
    .v2-front.m-centre .mast .meta, .v2-front.m-centre .mast-social, .v2-front.m-centre .mast-acts { justify-content:center; }
    /* In line is the compact header, a row in the sticky bar: no cover,
       and the picture back to a small mark sitting on the line. */
    .v2-front.m-inline .mast-cover { display:none; }
    .v2-front.m-inline .mast .mast-pic { width:38px; height:38px; margin-top:0; font-size:15px; box-shadow:none; }
    .v2-front.m-inline .mast-in { flex-direction:row; align-items:center; text-align:left; }
    .v2-front.m-inline .mast .mast-cover:not(.has-photo) + .mast-in, .v2-front.m-inline .mast .mast-cover.has-photo + .mast-in { padding:0; }
  }

  /* ---- WHERE THE PICTURE AND NAME SIT (2 Oct 2026, Martin) ----------------
     "The text goes out from the middle of the profile picture" and the
     group "centred in the middle of the banner ... not more towards the
     bottom than the top". Three rules under every placement below:
       - the name and its details line up with the MIDDLE of the picture
         beside them;
       - with the photo behind everything, the whole group sits in the
         middle of the header, the same room above as below;
       - words over a photo carry a shadow, so a light photo cannot swallow
         them.
     Placement is the creator's: on computers left, centred, right or
     stacked in the middle; on phones stacked or beside the picture. The
     menu's In line header is its own compact row and is left alone. */
  .v2-front .mast:has(.mast-cover.has-photo) .mast-in > div:not(.mast-pic) { text-shadow:0 1px 3px rgba(0,0,0,.5); }
  .v2-front:is(.cv-full,.cv-tint) .mast .mast-cover.has-photo + .mast-in { margin-top:0; min-height:240px;
    padding-top:36px; padding-bottom:36px; }
  .v2-front:is(.cv-full,.cv-tint) .mast .mast-cover.has-photo + .mast-in .mast-pic { margin-top:0; }
  @media (min-width:761px) {
    /* THE ROW. Over a strip cover the row rides up by half the picture, so
       the picture straddles the cover's edge and the name's middle is level
       with the picture's. */
    .v2-front:not(.m-inline):not(.m-centre):not(.nm-stack) .mast-in { align-items:center; }
    .v2-front:not(.m-inline):not(.m-centre):not(.nm-stack) .mast-in > div:not(.mast-pic) { padding-top:0; }
    .v2-front:not(.m-inline):not(.m-centre):not(.nm-stack):not(.cv-full):not(.cv-tint) .mast .mast-cover.has-photo + .mast-in { margin-top:-64px; }
    .v2-front:not(.m-inline):not(.m-centre):not(.nm-stack):not(.cv-full):not(.cv-tint) .mast .mast-cover.has-photo + .mast-in .mast-pic { margin-top:0; }
    .v2-front.nm-centre:not(.m-inline) .mast-in { justify-content:center; }
    .v2-front.nm-right:not(.m-inline) .mast-in { flex-direction:row-reverse; text-align:right; }
    .v2-front.nm-right:not(.m-inline) .mast .meta, .v2-front.nm-right:not(.m-inline) .mast-social, .v2-front.nm-right:not(.m-inline) .mast-acts { justify-content:flex-end; }
    /* STACKED IN THE MIDDLE: the picture over the name, the phone's column. */
    .v2-front.nm-stack:not(.m-inline) .mast-in { flex-direction:column; align-items:center; text-align:center; }
    .v2-front.nm-stack:not(.m-inline) .mast .meta, .v2-front.nm-stack:not(.m-inline) .mast-social, .v2-front.nm-stack:not(.m-inline) .mast-acts { justify-content:center; }
    .v2-front:is(.cv-full,.cv-tint) .mast .mast-cover.has-photo + .mast-in { min-height:300px;
      padding-top:44px; padding-bottom:44px; }
    /* Up and down is justify-content only in a column; in the row it is
       side to side, and it pulled Left into the middle (2 Oct 2026). */
    .v2-front.nm-stack:is(.cv-full,.cv-tint):not(.m-inline) .mast .mast-cover.has-photo + .mast-in { justify-content:center; }
  }
  @media (max-width:760px) {
    /* BESIDE THE PICTURE, on a phone: a smaller picture with the name level
       with its middle, the way a profile reads in a narrow column. */
    .v2-front.np-row:not(.m-inline) .mast-in { flex-direction:row; align-items:center; text-align:left; gap:14px; }
    /* One line: the phone sheet lets the header wrap below 640px, which put
       the name under the picture instead of beside it (2 Oct 2026). */
    .v2-front.np-row:not(.m-inline) .mast-in { flex-wrap:nowrap; }
    .v2-front.np-row:not(.m-inline) .mast-in > div:not(.mast-pic) { flex:1 1 0; min-width:0; }
    .v2-front.np-row:not(.m-inline) .mast .mast-pic { width:76px; height:76px; margin-top:0; font-size:26px; flex:none; }
    .v2-front.np-row:not(.m-inline):not(.cv-full):not(.cv-tint) .mast .mast-cover.has-photo + .mast-in { margin-top:-38px; }
    .v2-front.np-row:not(.m-inline) .mast .meta, .v2-front.np-row:not(.m-inline) .mast-social, .v2-front.np-row:not(.m-inline) .mast-acts { justify-content:flex-start; }
    .v2-front:is(.cv-full,.cv-tint):not(.np-row):not(.m-inline) .mast .mast-cover.has-photo + .mast-in { justify-content:center; }
  }

  /* ---- THE STRIPS ABOVE THE HEADER (28 Sep 2026, Martin) ------------------
     One line each, the full width of the page, and only when there is
     something to say: a sale that is running, or the latest broadcast the
     creator has chosen to show. The sale one is in the store's colour --
     it is the loudest thing that is true today; the news one is quieter,
     on the band ground, and a visitor can close it. On a phone the edit
     order puts them with the header rather than below it. */
  .v2-front .v2-strips { position:relative; z-index:2; }
  .v2-front .strip { font-size:13.5px; line-height:1.4; }
  .v2-front .strip-in { max-width:var(--page); margin:0 auto; padding:9px var(--gut);
    display:flex; align-items:center; justify-content:center; gap:6px 14px;
    flex-wrap:wrap; text-align:center; }
  .v2-front .strip-say { min-width:0; }
  .v2-front .strip-go { font-weight:800; text-decoration:underline; text-underline-offset:3px;
    white-space:nowrap; }
  .v2-front .strip-sale { background:var(--store); color:var(--on-store,#fff); font-weight:700; }
  .v2-front .strip-sale .strip-go { color:var(--on-store,#fff); }
  .v2-front .strip-news { background:var(--band); color:var(--text); border-bottom:1px solid var(--line); }
  .v2-front .strip-news .strip-say span { color:var(--muted); }
  .v2-front .strip-news .strip-go { color:var(--text); }
  .v2-front .strip-x { margin-left:4px; width:26px; height:26px; border:0; border-radius:50%;
    background:none; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; }
  .v2-front .strip-x:hover { color:var(--text); background:var(--line); }
  .v2-front.phone-set > .v2-strips { order:-2; }
  .v2-front .sale-ends { margin-top:-6px; font-weight:700; color:var(--store-lit, var(--store)); }
  /* A PAGE CARD WITH NO PICTURE (28 Sep 2026) takes the store's own wash
     rather than an empty box -- a page shared without a picture is common,
     and ours is not the one to put there. */
  .v2-front .card.page-card .card-art:not([style]) { background:var(--head-wash); }

  /* THE LOGO'S SHAPE, LAST, so the layouts above (In line sizes it) and the
     corner ladder cannot round or square it behind the setting's back. */
  .v2-front .mast .mast-pic { border-radius:50%; clip-path:none; }
  .v2-front.frame-rounded .mast .mast-pic { border-radius:var(--r-art); }
  .v2-front.frame-square .mast .mast-pic { border-radius:0; }
  .v2-front.frame-angled .mast .mast-pic { border-radius:0;
    clip-path:polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
/* The checkout. Built from Planning/steps/checkout.html by
 * buildV2Checkout.js -- do not edit here, edit the harness.
 */


  /* ---- the storefront's tokens, because this is the storefront ----------
     Not a copy for its own sake: the buyer was on that page one click ago
     and this is the same shop, so it should not change colour underneath
     them at the moment they are asked for money.

     THEY ARE DECLARED HERE RATHER THAN INHERITED, and that is a limitation
     worth naming. The frame is appended to the body, and by the time it
     opens the storefront is no longer on the page anyway -- the product
     view is fetched over the top of it -- so there is no .v2-front to take
     --store from. A creator's own colour therefore does NOT reach the
     checkout yet; it gets the platform green.

     What that would take is the store's colour travelling with the offer,
     in the same data-ways attribute the prices already ride on. Small, but
     it is a change to what the components send rather than a change to
     this sheet, so it is not smuggled in here. */
  .v2-pay-back {
    --ground:#1c1c1c; --panel:#2a2a2a; --panel-2:#323232;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.055);
    --text:#e9edf2; --muted:#98a1ad; --dim:#6f7885;
    --green:#2dc26b; --green-lit:#3ad47a; --danger:#ed5565; --amber:#e0a33a;
    --font:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    --store:#2dc26b; --store-lit:#3ad47a; --on-store:#ffffff;
    color-scheme: dark;
  }
  .v2-pay-back, .v2-pay-back * { box-sizing:border-box; }
  .v2-pay-back a,

  .v2-pay-back a:link,

  .v2-pay-back a:visited { color:inherit; text-decoration:none; }

  /* ---- the overlay --------------------------------------------------------
     IT DIMS AND IT CLOSES, both of which the old one did neither of. The
     old #checkout was position:fixed with nothing behind it, so the page
     underneath stayed live: scrollable, clickable, tabbable. A payment
     form you can tab out of without noticing is not a modal, it is a box.

     z-index 100000 clears the platform's own navbar at 1000 and its login
     overlay at 99999. This is the one thing on the page that must be in
     front of everything, because it is the one thing that takes money. */
  .v2-pay-back { position:fixed; inset:0; z-index:100000;
    background:rgba(8,10,12,.74); backdrop-filter:blur(3px);
    display:flex; align-items:flex-start; justify-content:center;
    padding:40px 18px; overflow-y:auto; }
  .v2-pay-back[hidden] { display:none; }

  /* ---- the frame ----------------------------------------------------------
     One box for all three steps. It does not resize between them by
     accident: the steps are close enough in height that the frame is not
     jumping, and the summary line that appears at the payment step is the
     same height as the step counter it replaces. */
  /* THE FRAME STATES ITS OWN TYPE, and that is not belt and braces. In the
     harness the page did it -- body carried the colour, the family, the size
     and the line height -- and the porter drops body, because the platform
     has one and it is not ours. So on the platform this box inherited the
     page's type instead of the design's, and the page's base weight is 300.
     Everything in here came out a shade thinner than it was drawn. */
  .v2-pay-back .v2-pay { width:100%; max-width:520px; background:var(--ground);
    border:1px solid var(--line); border-radius:16px; overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.55); position:relative;
    color:var(--text); font-family:var(--font); font-size:16px;
    font-weight:400; line-height:1.65; }

  /* AND THE PAGE UNDERNEATH HAS OPINIONS ABOUT HEADINGS. The platform sets
     h3 to #333, which on this panel is dark grey on dark grey: in the first
     live render the product's own name was simply not there, while every
     line around it read perfectly -- because every line around it happened
     to name a colour of its own and the h3 did not.

     One class and one element, which is the least specificity that still
     beats a bare h3, so every deliberate rule below -- each of which names
     a class -- goes on winning. font-weight:inherit rather than a number,
     because the weight a heading wants is set further down per heading and
     this only has to stop 300 arriving from outside.

     label is deliberately NOT in this list. The field labels want --muted,
     and ".v2-pay label" would outrank ".fld label" and quietly repaint
     them -- which is this same bug, made by the fix for it. */
  .v2-pay-back .v2-pay h1,

  .v2-pay-back .v2-pay h2,

  .v2-pay-back .v2-pay h3,

  .v2-pay-back .v2-pay h4 {
    color:var(--text); font-weight:inherit; }
  /* The same again for the elements the platform gives a weight of 300 to
     directly, where setting 400 on the frame does not reach them because a
     rule beats inheritance. Weight only -- no colour, or this would repaint
     the muted lines it is standing next to. */
  .v2-pay-back .v2-pay p,

  .v2-pay-back .v2-pay ul,

  .v2-pay-back .v2-pay li,

  .v2-pay-back .v2-pay span,

  .v2-pay-back .v2-pay button,

  .v2-pay-back .v2-pay label { font-weight:inherit; }

  .v2-pay-back .v2-pay-top { display:flex; align-items:center; gap:14px;
    padding:18px 20px 16px; border-bottom:1px solid var(--line-2); }
  .v2-pay-back .v2-pay-top h2 { margin:0; font-size:17px; font-weight:900;
    letter-spacing:-.01em; }
  /* THE CLOSE IS NOT A DANGER COLOUR. Leaving a checkout is an ordinary
     thing to do and the old flow painted it red and called it Cancel,
     which is the word a bank uses when something has gone wrong. */
  .v2-pay-back .v2-pay-x { margin-left:auto; flex:none; width:36px; height:36px;
    border-radius:9px; border:1px solid var(--line); background:transparent;
    color:var(--muted); cursor:pointer; font-size:17px; line-height:1;
    display:flex; align-items:center; justify-content:center; }
  .v2-pay-back .v2-pay-x:hover { color:var(--text); background:rgba(255,255,255,.05); }

  /* The step counter. Drawn only when there is more than one step left to
     take -- a signed-in buyer of a single-price product is not walked
     through a numbered process to press one button. */
  .v2-pay-back .v2-pay-steps { display:flex; gap:7px; align-items:center;
    font-size:12.5px; font-weight:700; color:var(--muted); }
  .v2-pay-back .v2-pay-steps i { width:18px; height:3px; border-radius:2px;
    background:var(--line); display:block; }
  .v2-pay-back .v2-pay-steps i.on { background:var(--store); }

  .v2-pay-back .v2-pay-body { padding:20px; }

  /* PAY STAYS IN VIEW (9 Oct 2026, Martin: you had to scroll past Stripe's
     "save my information" box before you could pay). The window is never
     taller than the screen; its body scrolls inside it, and the Pay button
     sticks to the bottom of that while there is more below it. */
  .v2-pay-back .v2-pay { display:flex; flex-direction:column; max-height:calc(100vh - 80px); }
  @supports (height:100dvh) { .v2-pay-back .v2-pay { max-height:calc(100dvh - 80px); } }
  .v2-pay-back .v2-pay-top { flex:none; }
  .v2-pay-back .v2-pay-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  .v2-pay-back #v2-pay-go { position:sticky; bottom:0; z-index:2; box-shadow:0 0 0 10px var(--ground); }

  /* ---- the choice ---------------------------------------------------------
     A radio list that does not look like a radio list, because these are
     products and not settings. The whole row is the control -- 44px of
     target at the very least, and in practice about seventy. */
  .v2-pay-back .v2-pay-lede { margin:0 0 14px; color:var(--muted); font-size:14.5px; }

  .v2-pay-back .buy { display:block; position:relative; border:1px solid var(--line);
    border-radius:12px; padding:14px 16px; margin:0 0 10px; cursor:pointer;
    background:var(--panel); transition:border-color .14s, background .14s; }
  .v2-pay-back .buy:hover { border-color:rgba(255,255,255,.2); }
  .v2-pay-back .buy input { position:absolute; opacity:0; width:1px; height:1px;
    pointer-events:none; }
  /* CHECKED IS A BORDER AND A TICK, NOT A FILL. A filled row competes with
     the pay button for the one strong colour on the screen, and the pay
     button has to win that -- it is the thing they came to press. */
  .v2-pay-back .buy.is-on { border-color:var(--store); background:var(--panel-2); }
  .v2-pay-back .buy input:focus-visible + .buy-in { outline:2px solid var(--store-lit);
    outline-offset:6px; border-radius:8px; }

  /* THE ORDER BUMP (4 Oct 2026, Martin and Neil): one extra, under the
     options, before the card. A dashed edge marks it as an add-on rather than
     another way to buy; ticked, it takes the store colour like a chosen way.
     Never ticked to begin with. */
  .v2-pay-back .v2-pay-bump { display:block; margin:14px 0 4px; border:1.5px dashed var(--line);
    border-radius:12px; padding:13px 14px; cursor:pointer; }
  .v2-pay-back .v2-pay-bump.is-on { border-color:var(--store); border-style:solid; background:var(--panel-2); }
  .v2-pay-back .v2-pay-bump-in { display:flex; align-items:flex-start; gap:12px; }
  .v2-pay-back .v2-pay-bump input { flex:none; width:19px; height:19px; margin:2px 0 0;
    accent-color:var(--store); cursor:pointer; }
  .v2-pay-back .v2-pay-bump-w { flex:1; min-width:0; }
  .v2-pay-back .v2-pay-bump-w b { display:block; font-size:14.5px; font-weight:800; }
  .v2-pay-back .v2-pay-bump-k { display:block; margin-bottom:2px; font-size:10.5px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
  .v2-pay-back .v2-pay-bump-w p { margin:3px 0 0; font-size:12.5px; color:var(--muted); line-height:1.45; }
  .v2-pay-back .v2-pay-bump-c { flex:none; font-weight:900; font-variant-numeric:tabular-nums; text-align:right; }
  /* Its own price struck through, and that this one exists only here. */
  .v2-pay-back .v2-pay-bump-c s { display:block; font-weight:400; font-size:12.5px; color:var(--dim); }
  .v2-pay-back .v2-pay-bump-c small { display:block; font-weight:700; font-size:11px; color:var(--store-lit); }
  /* The real deadline, when there is one. */
  .v2-pay-back .v2-pay-bump-t { display:block; margin-top:6px; font-size:12px; font-weight:700; color:var(--amber);
    font-variant-numeric:tabular-nums; }
  .v2-pay-back .v2-pay-peek { margin-top:7px; padding:0; border:0; background:none; color:var(--store-lit);
    font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
  .v2-pay-back .v2-pay-peek:hover { text-decoration:underline; }
  .v2-pay-back .v2-pay-peek-v { display:block; width:100%; max-height:220px; margin-top:9px;
    border-radius:8px; background:var(--ground); }

  .v2-pay-back .buy-in { display:flex; align-items:flex-start; gap:13px; }
  .v2-pay-back .buy-tick { flex:none; width:20px; height:20px; border-radius:50%;
    border:2px solid var(--line); margin-top:2px; position:relative; }
  .v2-pay-back .buy.is-on .buy-tick { border-color:var(--store); }
  .v2-pay-back .buy.is-on .buy-tick::after { content:""; position:absolute; inset:3px;
    border-radius:50%; background:var(--store); }
  .v2-pay-back .buy-words { flex:1; min-width:0; }
  .v2-pay-back .buy-words h3 { margin:0; font-size:15.5px; font-weight:700;
    line-height:1.35; }
  /* What it is, in the buyer's words. "Course", "Download" -- the label
     the storefront card already uses, so the thing they clicked is still
     recognisably the thing they are buying. */
  .v2-pay-back .buy-kind { display:inline-block; font-size:10.5px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; color:var(--dim);
    margin:0 0 3px; }
  .v2-pay-back .buy-say { margin:4px 0 0; font-size:13.5px; color:var(--muted); }
  .v2-pay-back .buy-cost { flex:none; text-align:right; padding-left:10px; }
  .v2-pay-back .buy-cost b { display:block; font-size:17px; font-weight:900;
    color:var(--text); font-variant-numeric:tabular-nums; }
  /* THE TERMS SIT UNDER THE NUMBER AND ARE NOT OPTIONAL. "£4.78" and
     "£4.78 a month" are different offers and the old modal wrote the
     difference as a prefix -- "Monthly: £4.78" -- next to a help icon
     explaining what monthly meant. If it needs a footnote it is in the
     wrong place. */
  .v2-pay-back .buy-cost span { display:block; font-size:12px; color:var(--dim);
    margin-top:1px; }
  /* A FREE TRIAL, under the terms (5 Oct 2026): said in the store's colour
     because it is the thing that changes what today costs. */
  .v2-pay-back .buy-cost .buy-free { color:var(--store); font-weight:700; }

  /* A bundle says what it adds, because that is the only reason to pay
     more than the product costs on its own. */
  .v2-pay-back .buy-has { margin:9px 0 0; padding:0; list-style:none; font-size:13px;
    color:var(--muted); }
  .v2-pay-back .buy-has li { display:flex; gap:8px; align-items:flex-start;
    padding:2px 0; }
  .v2-pay-back .buy-has li::before { content:""; flex:none; width:5px; height:5px;
    border-radius:50%; background:var(--dim); margin-top:8px; }
  .v2-pay-back .buy-has li.own { color:var(--dim); }
  .v2-pay-back .buy-has li.own em { font-style:normal; color:var(--store); }

  .v2-pay-back .v2-pay-or { display:flex; align-items:center; gap:12px; margin:18px 0 12px;
    font-size:11.5px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--dim); }
  .v2-pay-back .v2-pay-or::before,

  .v2-pay-back .v2-pay-or::after { content:""; height:1px; flex:1;
    background:var(--line-2); }

  /* ---- the summary, at the payment step ----------------------------------
     WHAT THEY CHOSE STAYS ON THE SCREEN. The old flow closed the packages
     dialog before opening the payment box, so the last thing a buyer saw
     was a card form with no mention of what it was for. */
  .v2-pay-back .v2-pay-sum { display:flex; align-items:flex-start; gap:12px;
    padding:13px 15px; border:1px solid var(--line); border-radius:12px;
    background:var(--panel); margin:0 0 18px; }
  .v2-pay-back .v2-pay-sum .w { flex:1; min-width:0; }
  .v2-pay-back .v2-pay-sum h3 { margin:0; font-size:14.5px; font-weight:700; }
  .v2-pay-back .v2-pay-sum p { margin:2px 0 0; font-size:12.5px; color:var(--dim); }
  .v2-pay-back .v2-pay-sum b { font-size:15px; font-weight:900;
    font-variant-numeric:tabular-nums; }
  .v2-pay-back .v2-pay-swap { background:none; border:0; padding:0; cursor:pointer;
    color:var(--store); font:inherit; font-size:12.5px; font-weight:700;
    text-decoration:underline; text-underline-offset:2px; }


  /* ---- the discount code --------------------------------------------------

     ON THE CHOOSING STEP AND NOT THE PAYING ONE, which is the whole point of
     where it sits. Stripe is handed an amount when the payment step opens,
     and an amount cannot be changed once a Payment Element is drawing
     against it -- so a code box beside the card field would have to tear the
     card field down and build another. Ahead of it, the code is just part of
     deciding what you are buying.

     SHUT BY DEFAULT, because most buyers do not have one and a visible empty
     box asking for a code is a page telling somebody they are paying too
     much. One quiet line opens it.

     AND IT IS NOT DRAWN AT ALL unless the offer says codes exist -- see
     `coupons` on the offer. A box that can only ever refuse is worse than no
     box. */
  .v2-pay-back .v2-pay-code { margin:14px 0 0; }
  .v2-pay-back .v2-pay-code .ask { background:none; border:0; padding:0; cursor:pointer;
    color:var(--dim); font:inherit; font-size:12.5px; font-weight:700;
    text-decoration:underline; text-underline-offset:2px; }
  .v2-pay-back .v2-pay-code .ask:hover { color:var(--text); }
  .v2-pay-back .v2-pay-code .row { display:flex; gap:8px; margin-top:9px; }
  /* AND display BEATS [hidden]. The row is hidden once a code is on, and a
     bare `display:flex` above wins against the browser's own
     `[hidden]{display:none}` every time -- so the box stayed on screen
     under the words saying it had been applied. Same reason .step[hidden]
     is restated further up this sheet. */
  .v2-pay-back .v2-pay-code .row[hidden] { display:none; }
  .v2-pay-back .v2-pay-code input { flex:1; min-width:0; min-height:44px; padding:10px 13px;
    border-radius:9px; border:1px solid var(--line); background:var(--panel);
    color:var(--text); font:inherit; font-size:15px;
    text-transform:uppercase; letter-spacing:.04em; }
  .v2-pay-back .v2-pay-code input:focus { outline:none; border-color:var(--store);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--store) 22%, transparent); }
  /* .b-ghost is full width and carries a top margin for the stacked case;
     in this row it is neither, and that is a width rather than a restyle. */
  .v2-pay-back .v2-pay-code .b-ghost { width:auto; flex:none; min-height:44px;
    margin-top:0; padding:10px 18px; font-size:14px; }
  .v2-pay-back .v2-pay-code .say { margin:8px 0 0; font-size:12.5px; color:var(--dim); }
  .v2-pay-back .v2-pay-code .say.bad { color:#ffb3b3; }
  /* On the payment step it sits between the summary and the card box. */
  .v2-pay-back #v2-pay-pay .v2-pay-code { margin:0 0 14px; }
  .v2-pay-back .v2-pay-code .say.on { color:var(--green-lit, #6bdf9f); font-weight:700; }

  /* The old figure, wherever a code or a sale moved it. Struck and quiet:
     only one of the two numbers on this screen is the one being charged. */
  .v2-pay-back .was { text-decoration:line-through; color:var(--dim); font-weight:600;
    margin-right:5px; font-size:.84em; }
  /* ---- fields -------------------------------------------------------------
     The sign-in step, and the shape Stripe's own element is told to match
     through its appearance API. Stated here once so the two cannot drift:
     a hand-styled email box above a Stripe-styled card box that disagree
     about their radius is the detail that makes a payment page feel
     assembled rather than built. */
  .v2-pay-back .fld { margin:0 0 13px; }
  .v2-pay-back .fld label { display:block; font-size:12.5px; font-weight:700;
    color:var(--muted); margin:0 0 5px; }
  .v2-pay-back .fld input { width:100%; min-height:46px; padding:11px 13px;
    border-radius:9px; border:1px solid var(--line); background:var(--panel);
    color:var(--text); font:inherit; font-size:15px; }
  .v2-pay-back .fld input:focus { outline:none; border-color:var(--store);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--store) 22%, transparent); }

  /* A box to tick, the size of the words beside it (3 Oct 2026). */
  .v2-pay-back .v2-pay-check { display:flex; gap:9px; align-items:flex-start; margin:0 0 14px;
    font-size:13.5px; color:var(--muted); line-height:1.45; cursor:pointer; }
  .v2-pay-back .v2-pay-check input { width:17px; height:17px; margin:1px 0 0; flex:none;
    accent-color:var(--store); }
  .v2-pay-back .v2-pay-check a { color:var(--text); text-decoration:underline; text-underline-offset:2px; }
  /* OR SIGN IN WITH (15 Oct 2026, Martin and Neil): Google, LinkedIn, Discord,
     Twitch -- whichever have their keys set (/Login/socialList/) -- under the
     email form, two to a row. */
  .v2-pay-back .v2-pay-or { display:flex; align-items:center; gap:10px; margin:16px 0 10px;
    font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; }
  .v2-pay-back .v2-pay-or::before,

  .v2-pay-back .v2-pay-or::after { content:""; flex:1; height:1px; background:var(--line); }
  .v2-pay-back .v2-pay-soc-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .v2-pay-back .v2-pay-soc-row .soc { display:flex; align-items:center; justify-content:center; gap:8px;
    height:40px; padding:0 10px; border-radius:9px; border:1px solid var(--line);
    background:rgba(255,255,255,.04); color:var(--text); font:inherit; font-size:13.5px;
    font-weight:700; cursor:pointer; white-space:nowrap; }
  .v2-pay-back .v2-pay-soc-row .soc:hover { background:rgba(255,255,255,.08); }
  .v2-pay-back .v2-pay-soc-row .soc:focus-visible { outline:2px solid var(--focus, #2563eb); outline-offset:2px; }
  .v2-pay-back .v2-pay-soc-row .soc svg { width:18px; height:18px; flex:none; }
  .v2-pay-back .v2-pay-soc-row .soc:only-child { grid-column:1 / -1; }
  /* display BEATS [hidden] -- .v2-pay-check sets one, and so might anything
     added later; the sign-in step's parts are shown and hidden by it. */
  .v2-pay-back #v2-pay-in [hidden] { display:none; }

  .v2-pay-back #v2-pay-card { min-height:120px; border:1px solid var(--line);
    border-radius:12px; background:var(--panel); padding:14px; }

  /* ---- buttons ------------------------------------------------------------
     One strong colour per screenful, and here it is the pay button. */
  .v2-pay-back .b { display:inline-flex; align-items:center; justify-content:center;
    gap:9px; width:100%; min-height:48px; padding:12px 20px;
    border-radius:9px; border:1px solid transparent; cursor:pointer;
    font:inherit; font-size:15.5px; font-weight:700;
    transition:background .15s, border-color .15s, opacity .15s; }
  .v2-pay-back .b-go { background:var(--store); color:var(--on-store); }
  .v2-pay-back .b-go:hover { background:var(--store-lit); }
  .v2-pay-back .b-ghost { background:transparent; border-color:var(--line);
    color:var(--text); margin-top:9px; }
  .v2-pay-back .b-ghost:hover { border-color:rgba(255,255,255,.26);
    background:rgba(255,255,255,.04); }
  .v2-pay-back .b:focus-visible { outline:2px solid var(--store-lit); outline-offset:3px; }
  /* IN FLIGHT IT IS NOT PRESSABLE, and it says which of the two things is
     happening. A disabled button with the same words on it reads as a
     broken button; a disabled button that says "Taking payment" reads as a
     payment being taken. This is the double-charge guard and the
     reassurance in the same control. */
  .v2-pay-back .b[disabled] { opacity:.62; cursor:default; }
  .v2-pay-back .b .spin { width:15px; height:15px; border-radius:50%;
    border:2px solid currentColor; border-right-color:transparent;
    animation:sp .7s linear infinite; }
  @keyframes sp { .v2-pay-back to { transform:rotate(360deg); } }
  @media (prefers-reduced-motion:reduce) { .v2-pay-back .b .spin { animation:none; } }

  /* ---- the small print ----------------------------------------------------
     Under the button, where it is read, and saying the thing that actually
     matters for a subscription: when the next one comes out and how to
     stop it. */
  .v2-pay-back .v2-pay-fine { margin:12px 0 0; font-size:12px; color:var(--dim);
    text-align:center; line-height:1.55; }
  .v2-pay-back .v2-pay-fine a { color:var(--muted); text-decoration:underline;
    text-underline-offset:2px; }
  .v2-pay-back .v2-pay-stripe { display:flex; align-items:center; justify-content:center;
    gap:7px; margin-top:12px; font-size:11px; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase; color:var(--dim); }

  /* ---- errors -------------------------------------------------------------
     Inline, above the button, and never a bare code. The old one printed
     whatever Stripe returned into a div with no styling at all. */
  .v2-pay-back .v2-pay-bad { display:flex; gap:10px; align-items:flex-start;
    padding:11px 13px; border-radius:10px; margin:0 0 14px;
    border:1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    background:color-mix(in srgb, var(--danger) 13%, transparent);
    font-size:13.5px; color:#ffd9dc; }
  .v2-pay-back .v2-pay-bad[hidden] { display:none; }

  /* ---- free, and already owned -------------------------------------------
     TWO STATES THAT MUST NOT REACH STRIPE. A zero-cost product going
     through a card form asks somebody for a card so it can charge them
     nothing, and a product already owned should open rather than sell. */
  .v2-pay-back .v2-pay-note { text-align:center; padding:6px 0 2px; }
  .v2-pay-back .v2-pay-note .big { font-size:34px; line-height:1; margin-bottom:10px; }
  .v2-pay-back .v2-pay-note h3 { margin:0 0 6px; font-size:17px; font-weight:900; }
  .v2-pay-back .v2-pay-note p { margin:0 0 18px; color:var(--muted); font-size:14.5px; }

  /* ---- paid -----------------------------------------------------------------
     THE END OF THE PURCHASE, IN THE WINDOW IT WAS MADE IN (5 Oct 2026, Martin).
     The buyer used to be sent to Purchases with a ten-second line at the top,
     which did not feel like anything had finished. Now: a tick, what they
     bought, what was taken and on which card, the receipt, and two ways on --
     straight into it, or to everything they have. Nothing moves until they
     choose. */
  .v2-pay-back .v2-pay-done { text-align:center; padding:4px 0 2px; }
  .v2-pay-back .v2-pay-done .tick { width:54px; height:54px; margin:0 auto 12px; border-radius:50%;
    display:grid; place-items:center; font-size:26px; font-weight:900; color:var(--on-store);
    background:var(--store); }
  .v2-pay-back .v2-pay-done .tick.wait { background:transparent; border:3px solid var(--line);
    border-top-color:var(--store); animation:sp .8s linear infinite; }
  @media (prefers-reduced-motion:reduce) { .v2-pay-back .v2-pay-done .tick.wait { animation:none; } }
  .v2-pay-back .v2-pay-done h3 { margin:0 0 4px; font-size:19px; font-weight:900; }
  .v2-pay-back .v2-pay-done .sub { margin:0 0 16px; color:var(--muted); font-size:14px; }
  .v2-pay-back .v2-pay-done-items { list-style:none; margin:0 0 14px; padding:0; display:flex;
    flex-direction:column; gap:8px; text-align:left; }
  .v2-pay-back .v2-pay-done-items li { display:flex; align-items:center; gap:12px; padding:9px 11px;
    border:1px solid var(--line); border-radius:11px; background:var(--panel); }
  .v2-pay-back .v2-pay-done-items img { width:64px; height:36px; flex:0 0 64px;
    border-radius:6px; object-fit:cover; background:var(--line); }
  .v2-pay-back .v2-pay-done-items b { font-size:14.5px; font-weight:900; line-height:1.3; }
  .v2-pay-back .v2-pay-done-facts { margin:0 0 14px; display:grid; grid-template-columns:auto 1fr;
    gap:6px 14px; text-align:left; font-size:13.5px; }
  .v2-pay-back .v2-pay-done-facts dt { color:var(--muted); }
  .v2-pay-back .v2-pay-done-facts dd { margin:0; text-align:right; font-weight:700;
    font-variant-numeric:tabular-nums; }
  .v2-pay-back .v2-pay-done .mail { margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.5; }
  .v2-pay-back .v2-pay-done .mail a { color:var(--text); text-decoration:underline; text-underline-offset:2px; }
  .v2-pay-back .v2-pay-done .b + .b { margin-top:8px; }
  /* .b sets display, which beats the hidden attribute. */
  .v2-pay-back .v2-pay-done .b[hidden],

  .v2-pay-back .v2-pay-done [hidden] { display:none; }

  .v2-pay-back .step[hidden] { display:none; }

  /* ---- the phone ----------------------------------------------------------
     A payment sheet on a phone comes up from the bottom and fills what it
     needs, rather than floating in the middle with the page showing round
     the edges. The keyboard takes half the screen the moment a field is
     focused, so the frame is pinned to the bottom where the fields stay
     above it. */
  @media (max-width:620px) {
    .v2-pay-back { padding:0; align-items:flex-end; }
    .v2-pay-back .v2-pay { max-width:none; border-radius:16px 16px 0 0;
      border-bottom:0; max-height:94vh; display:flex; flex-direction:column; }
    .v2-pay-back .v2-pay-body { overflow-y:auto; }
    /* 44px, like every other target on a touch screen. The close is the
       one control on this sheet somebody presses in a hurry -- to get out
       of a payment -- and it was the only one under the minimum, at 36.
       The icon stays its own size; the box around it grows. */
    .v2-pay-back .v2-pay-x { width:44px; height:44px; }
  }
/* Presentation Onload Styles v1.0.0 */
video {
	width: auto;
    height: auto;
	max-width: 100%;
	max-height: 100%;
}
.logo {
	position: relative;
	padding-top: 15px;
	z-index: 99998;
}
.presentation-wrapper {
	text-align: center;
	color: #000;
	-webkit-transition: height 0.25s;
    transition: height 0.25s;
}
.presentation-error {
	padding: 15px;
	border: 2px solid #cc0000;
	background: #ffffff;
    background: rgba(255, 255, 255, 0.85);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4);
    -webkit-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4);
    box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4);
}
.presentation-error h2 {
	margin-bottom: 20px;
	color: #cc0000;
}
.presentation-info {
	padding: 15px;
	border: 1px solid #2d2d2d;
	background: #ffffff;
    background: rgba(255, 255, 255, 0.85);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4);
    -webkit-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4);
    box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4);
}
.presentation-info h2 {
	margin-bottom: 20px;
	color: #2d2d2d;
}
#presentation-enter-area h2 {
	color: #008000;
}
/* ONLY ON A PRESENTATION PAGE (3 Oct 2026, Martin: "a few places that the
   old green from the legacy appears"). This file is added to the PUBLIC
   bundle by OnlinePresentation::onload(), so it loads on every public page,
   and these four were bare: every <button> on the site turned dark legacy
   green on hover (the "Sign up with Google" button among them) and every
   .btn-primary turned red. Now they need the presentation on the page. */
body:has(#presentation-enter-area, #main-video) .btn-success {
	margin-right: 5px;
}
body:has(#presentation-enter-area, #main-video) .btn-primary {
	background-color: #e65555;
	border-color: #e65555;
	color: #fff;
}
body:has(#presentation-enter-area, #main-video) button {
	cursor: pointer;
	background-color: #008000;
    border-color: #008000;
    color: #FFFFFF;
}
body:has(#presentation-enter-area, #main-video) button:hover,
body:has(#presentation-enter-area, #main-video) button:focus {
	background-color: #007300;
    border-color: #007300;
    color: #FFFFFF;
}
#main-video, 
#my-video, 
#stop-start-btns,
#start-video-btn,
#view-status,
#no-media,
#can-be-seen,
#cannot-be-seen,
#reload-page {
	display: none;
}
#view-status span {
	font-weight :bold;
}
#view-status i {
	color: #808080;
}
#knock-btn {
	padding: .25rem .35rem;
    font-size: .775rem;
    line-height: 1.25;
	margin-left: 10px;
}
#presentation-no-support {
	display: none;
}
#presentation-no-support h2 {
	color: #cc0000;
}
.video-box {
	position: relative;
	display: inline-block;
	padding: 0;
	margin: 0 0 10px;
	z-index: 99999;
}
.video-box-bar {
	background: #2d2d2d;
	padding: 5px;
	color: #fff;
	text-align: left;
}
.video-box-bar i.fa-desktop,
.video-box-bar i.fa-refresh {
	margin-top: 5px;
}
#main-video .video-box-bar {
	cursor: pointer;
}
#video-loading {
	font-weight: bold;
	line-height: 32px;
}
#video-loading i {
	vertical-align: middle;
}
.presentation-wrapper .fancybox-container {
	position: absolute !IMPORTANT;
}
.presentation-wrapper .fancybox-bg {
	display: none;
}
.presentation-wrapper .fancybox-infobar {
	border-radius: 5px;
    color: #000;
    font-size: 15px;
    background: #ccc;
}
.presentation-wrapper .fancybox-content {
	-moz-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.5);
    -webkit-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.5);
    box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.5);
}
.sidebar .sidebar-feature {
	margin: 30px 0 60px;
	padding: 10px;
	background: #2d2d2d;
	text-align: left;
	color: #fff;
	-moz-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.33);
    -webkit-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.33);
    box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.33);
}
.sidebar .sidebar-feature button {
	padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
}
.sidebar .sidebar-feature hr {
	border-top: 1px solid rgba(255, 255, 255, .25);
}
.sidebar .sidebar-feature .sidebar-btn-bar {
	text-align: right;
}
.attendee-msgs p {
	font-size: 12px;
	margin-bottom: 2px;
}
.sidebar .sidebar-feature .attendee-msgs-title {
	margin-bottom: 20px;
	cursor: pointer;
}
.sidebar .sidebar-feature .attendee-msgs-wrapper {
	display: none;
}
.sidebar .sidebar-feature .attendee-msgs-area {
	min-height: 80px;
	max-height: 150px;
	margin-bottom: 10px;
	background: #fff;
	color: #000;
	font-size: 12px;
	padding: 8px;
	overflow: hidden;
    overflow-y: auto;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.sidebar .sidebar-feature textarea {
	width: 100%;
	min-height: 80px;
	background: #fff;
	color: #000;
	font-size: 12px;
	padding: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.sidebar .sidebar-feature .individual-sent, 
.sidebar .sidebar-feature .individual-fail {
	display: none;
	font-size: 14px;
}
.sidebar .sidebar-feature .msg {
	margin: 5px;
}
.sidebar .sidebar-feature .msg span {
	display: block;
	width: 84.999999%;
    padding: 5px;
    background: #ebf6ff;
	border: 1px solid #d3ebff;
    -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.sidebar .sidebar-feature .msg.msg-right span {
	margin-left: 14.999999%;
	background: #feebff;
	border: 1px solid #fccbff;
}
.cyfg-red {
	color: #cc0000 !IMPORTANT;
}
.cyfg-green {
	color: #008000 !IMPORTANT;
}
.cyfg-purple {
	color: #e65555 !IMPORTANT;
}
.sidebar .connect-error {
	margin: -45px 0 60px;
	margin-top: -45px;
	padding: 10px;
	background: #f1f1f1;
	border: 2px solid #cc0000;
	-moz-box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.33);
	-webkit-box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.33);
	box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.33);
}
.sidebar .connect-error button {
	cursor: pointer;
}

@media (max-width: 991px) { 
	.logo {
		margin-top: -20px;
		text-align: left;
		padding-top: 30px
	}
	.presentation-wrapper {
		margin-top: -30px;
	}
	#main-video {
		margin: 0;
	}
	#my-video {
		display: inline;
		width: 100%;
		vertical-align: middle;
	}
	#my-video, #my-video video {
		margin-top: -10px;
		max-height: 80px;
	}
	#start-video-btn {
		margin-bottom: 20px;
	}
}
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}@font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\002a"}.glyphicon-plus:before{content:"\002b"}.glyphicon-eur:before,.glyphicon-euro:before{content:"\20ac"}.glyphicon-minus:before{content:"\2212"}.glyphicon-cloud:before{content:"\2601"}.glyphicon-envelope:before{content:"\2709"}.glyphicon-pencil:before{content:"\270f"}.glyphicon-glass:before{content:"\e001"}.glyphicon-music:before{content:"\e002"}.glyphicon-search:before{content:"\e003"}.glyphicon-heart:before{content:"\e005"}.glyphicon-star:before{content:"\e006"}.glyphicon-star-empty:before{content:"\e007"}.glyphicon-user:before{content:"\e008"}.glyphicon-film:before{content:"\e009"}.glyphicon-th-large:before{content:"\e010"}.glyphicon-th:before{content:"\e011"}.glyphicon-th-list:before{content:"\e012"}.glyphicon-ok:before{content:"\e013"}.glyphicon-remove:before{content:"\e014"}.glyphicon-zoom-in:before{content:"\e015"}.glyphicon-zoom-out:before{content:"\e016"}.glyphicon-off:before{content:"\e017"}.glyphicon-signal:before{content:"\e018"}.glyphicon-cog:before{content:"\e019"}.glyphicon-trash:before{content:"\e020"}.glyphicon-home:before{content:"\e021"}.glyphicon-file:before{content:"\e022"}.glyphicon-time:before{content:"\e023"}.glyphicon-road:before{content:"\e024"}.glyphicon-download-alt:before{content:"\e025"}.glyphicon-download:before{content:"\e026"}.glyphicon-upload:before{content:"\e027"}.glyphicon-inbox:before{content:"\e028"}.glyphicon-play-circle:before{content:"\e029"}.glyphicon-repeat:before{content:"\e030"}.glyphicon-refresh:before{content:"\e031"}.glyphicon-list-alt:before{content:"\e032"}.glyphicon-lock:before{content:"\e033"}.glyphicon-flag:before{content:"\e034"}.glyphicon-headphones:before{content:"\e035"}.glyphicon-volume-off:before{content:"\e036"}.glyphicon-volume-down:before{content:"\e037"}.glyphicon-volume-up:before{content:"\e038"}.glyphicon-qrcode:before{content:"\e039"}.glyphicon-barcode:before{content:"\e040"}.glyphicon-tag:before{content:"\e041"}.glyphicon-tags:before{content:"\e042"}.glyphicon-book:before{content:"\e043"}.glyphicon-bookmark:before{content:"\e044"}.glyphicon-print:before{content:"\e045"}.glyphicon-camera:before{content:"\e046"}.glyphicon-font:before{content:"\e047"}.glyphicon-bold:before{content:"\e048"}.glyphicon-italic:before{content:"\e049"}.glyphicon-text-height:before{content:"\e050"}.glyphicon-text-width:before{content:"\e051"}.glyphicon-align-left:before{content:"\e052"}.glyphicon-align-center:before{content:"\e053"}.glyphicon-align-right:before{content:"\e054"}.glyphicon-align-justify:before{content:"\e055"}.glyphicon-list:before{content:"\e056"}.glyphicon-indent-left:before{content:"\e057"}.glyphicon-indent-right:before{content:"\e058"}.glyphicon-facetime-video:before{content:"\e059"}.glyphicon-picture:before{content:"\e060"}.glyphicon-map-marker:before{content:"\e062"}.glyphicon-adjust:before{content:"\e063"}.glyphicon-tint:before{content:"\e064"}.glyphicon-edit:before{content:"\e065"}.glyphicon-share:before{content:"\e066"}.glyphicon-check:before{content:"\e067"}.glyphicon-move:before{content:"\e068"}.glyphicon-step-backward:before{content:"\e069"}.glyphicon-fast-backward:before{content:"\e070"}.glyphicon-backward:before{content:"\e071"}.glyphicon-play:before{content:"\e072"}.glyphicon-pause:before{content:"\e073"}.glyphicon-stop:before{content:"\e074"}.glyphicon-forward:before{content:"\e075"}.glyphicon-fast-forward:before{content:"\e076"}.glyphicon-step-forward:before{content:"\e077"}.glyphicon-eject:before{content:"\e078"}.glyphicon-chevron-left:before{content:"\e079"}.glyphicon-chevron-right:before{content:"\e080"}.glyphicon-plus-sign:before{content:"\e081"}.glyphicon-minus-sign:before{content:"\e082"}.glyphicon-remove-sign:before{content:"\e083"}.glyphicon-ok-sign:before{content:"\e084"}.glyphicon-question-sign:before{content:"\e085"}.glyphicon-info-sign:before{content:"\e086"}.glyphicon-screenshot:before{content:"\e087"}.glyphicon-remove-circle:before{content:"\e088"}.glyphicon-ok-circle:before{content:"\e089"}.glyphicon-ban-circle:before{content:"\e090"}.glyphicon-arrow-left:before{content:"\e091"}.glyphicon-arrow-right:before{content:"\e092"}.glyphicon-arrow-up:before{content:"\e093"}.glyphicon-arrow-down:before{content:"\e094"}.glyphicon-share-alt:before{content:"\e095"}.glyphicon-resize-full:before{content:"\e096"}.glyphicon-resize-small:before{content:"\e097"}.glyphicon-exclamation-sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{content:"\e109"}.glyphicon-random:before{content:"\e110"}.glyphicon-comment:before{content:"\e111"}.glyphicon-magnet:before{content:"\e112"}.glyphicon-chevron-up:before{content:"\e113"}.glyphicon-chevron-down:before{content:"\e114"}.glyphicon-retweet:before{content:"\e115"}.glyphicon-shopping-cart:before{content:"\e116"}.glyphicon-folder-close:before{content:"\e117"}.glyphicon-folder-open:before{content:"\e118"}.glyphicon-resize-vertical:before{content:"\e119"}.glyphicon-resize-horizontal:before{content:"\e120"}.glyphicon-hdd:before{content:"\e121"}.glyphicon-bullhorn:before{content:"\e122"}.glyphicon-bell:before{content:"\e123"}.glyphicon-certificate:before{content:"\e124"}.glyphicon-thumbs-up:before{content:"\e125"}.glyphicon-thumbs-down:before{content:"\e126"}.glyphicon-hand-right:before{content:"\e127"}.glyphicon-hand-left:before{content:"\e128"}.glyphicon-hand-up:before{content:"\e129"}.glyphicon-hand-down:before{content:"\e130"}.glyphicon-circle-arrow-right:before{content:"\e131"}.glyphicon-circle-arrow-left:before{content:"\e132"}.glyphicon-circle-arrow-up:before{content:"\e133"}.glyphicon-circle-arrow-down:before{content:"\e134"}.glyphicon-globe:before{content:"\e135"}.glyphicon-wrench:before{content:"\e136"}.glyphicon-tasks:before{content:"\e137"}.glyphicon-filter:before{content:"\e138"}.glyphicon-briefcase:before{content:"\e139"}.glyphicon-fullscreen:before{content:"\e140"}.glyphicon-dashboard:before{content:"\e141"}.glyphicon-paperclip:before{content:"\e142"}.glyphicon-heart-empty:before{content:"\e143"}.glyphicon-link:before{content:"\e144"}.glyphicon-phone:before{content:"\e145"}.glyphicon-pushpin:before{content:"\e146"}.glyphicon-usd:before{content:"\e148"}.glyphicon-gbp:before{content:"\e149"}.glyphicon-sort:before{content:"\e150"}.glyphicon-sort-by-alphabet:before{content:"\e151"}.glyphicon-sort-by-alphabet-alt:before{content:"\e152"}.glyphicon-sort-by-order:before{content:"\e153"}.glyphicon-sort-by-order-alt:before{content:"\e154"}.glyphicon-sort-by-attributes:before{content:"\e155"}.glyphicon-sort-by-attributes-alt:before{content:"\e156"}.glyphicon-unchecked:before{content:"\e157"}.glyphicon-expand:before{content:"\e158"}.glyphicon-collapse-down:before{content:"\e159"}.glyphicon-collapse-up:before{content:"\e160"}.glyphicon-log-in:before{content:"\e161"}.glyphicon-flash:before{content:"\e162"}.glyphicon-log-out:before{content:"\e163"}.glyphicon-new-window:before{content:"\e164"}.glyphicon-record:before{content:"\e165"}.glyphicon-save:before{content:"\e166"}.glyphicon-open:before{content:"\e167"}.glyphicon-saved:before{content:"\e168"}.glyphicon-import:before{content:"\e169"}.glyphicon-export:before{content:"\e170"}.glyphicon-send:before{content:"\e171"}.glyphicon-floppy-disk:before{content:"\e172"}.glyphicon-floppy-saved:before{content:"\e173"}.glyphicon-floppy-remove:before{content:"\e174"}.glyphicon-floppy-save:before{content:"\e175"}.glyphicon-floppy-open:before{content:"\e176"}.glyphicon-credit-card:before{content:"\e177"}.glyphicon-transfer:before{content:"\e178"}.glyphicon-cutlery:before{content:"\e179"}.glyphicon-header:before{content:"\e180"}.glyphicon-compressed:before{content:"\e181"}.glyphicon-earphone:before{content:"\e182"}.glyphicon-phone-alt:before{content:"\e183"}.glyphicon-tower:before{content:"\e184"}.glyphicon-stats:before{content:"\e185"}.glyphicon-sd-video:before{content:"\e186"}.glyphicon-hd-video:before{content:"\e187"}.glyphicon-subtitles:before{content:"\e188"}.glyphicon-sound-stereo:before{content:"\e189"}.glyphicon-sound-dolby:before{content:"\e190"}.glyphicon-sound-5-1:before{content:"\e191"}.glyphicon-sound-6-1:before{content:"\e192"}.glyphicon-sound-7-1:before{content:"\e193"}.glyphicon-copyright-mark:before{content:"\e194"}.glyphicon-registration-mark:before{content:"\e195"}.glyphicon-cloud-download:before{content:"\e197"}.glyphicon-cloud-upload:before{content:"\e198"}.glyphicon-tree-conifer:before{content:"\e199"}.glyphicon-tree-deciduous:before{content:"\e200"}.glyphicon-cd:before{content:"\e201"}.glyphicon-save-file:before{content:"\e202"}.glyphicon-open-file:before{content:"\e203"}.glyphicon-level-up:before{content:"\e204"}.glyphicon-copy:before{content:"\e205"}.glyphicon-paste:before{content:"\e206"}.glyphicon-alert:before{content:"\e209"}.glyphicon-equalizer:before{content:"\e210"}.glyphicon-king:before{content:"\e211"}.glyphicon-queen:before{content:"\e212"}.glyphicon-pawn:before{content:"\e213"}.glyphicon-bishop:before{content:"\e214"}.glyphicon-knight:before{content:"\e215"}.glyphicon-baby-formula:before{content:"\e216"}.glyphicon-tent:before{content:"\26fa"}.glyphicon-blackboard:before{content:"\e218"}.glyphicon-bed:before{content:"\e219"}.glyphicon-apple:before{content:"\f8ff"}.glyphicon-erase:before{content:"\e221"}.glyphicon-hourglass:before{content:"\231b"}.glyphicon-lamp:before{content:"\e223"}.glyphicon-duplicate:before{content:"\e224"}.glyphicon-piggy-bank:before{content:"\e225"}.glyphicon-scissors:before{content:"\e226"}.glyphicon-bitcoin:before{content:"\e227"}.glyphicon-btc:before{content:"\e227"}.glyphicon-xbt:before{content:"\e227"}.glyphicon-yen:before{content:"\00a5"}.glyphicon-jpy:before{content:"\00a5"}.glyphicon-ruble:before{content:"\20bd"}.glyphicon-rub:before{content:"\20bd"}.glyphicon-scale:before{content:"\e230"}.glyphicon-ice-lolly:before{content:"\e231"}.glyphicon-ice-lolly-tasted:before{content:"\e232"}.glyphicon-education:before{content:"\e233"}.glyphicon-option-horizontal:before{content:"\e234"}.glyphicon-option-vertical:before{content:"\e235"}.glyphicon-menu-hamburger:before{content:"\e236"}.glyphicon-modal-window:before{content:"\e237"}.glyphicon-oil:before{content:"\e238"}.glyphicon-grain:before{content:"\e239"}.glyphicon-sunglasses:before{content:"\e240"}.glyphicon-text-size:before{content:"\e241"}.glyphicon-text-color:before{content:"\e242"}.glyphicon-text-background:before{content:"\e243"}.glyphicon-object-align-top:before{content:"\e244"}.glyphicon-object-align-bottom:before{content:"\e245"}.glyphicon-object-align-horizontal:before{content:"\e246"}.glyphicon-object-align-left:before{content:"\e247"}.glyphicon-object-align-vertical:before{content:"\e248"}.glyphicon-object-align-right:before{content:"\e249"}.glyphicon-triangle-right:before{content:"\e250"}.glyphicon-triangle-left:before{content:"\e251"}.glyphicon-triangle-bottom:before{content:"\e252"}.glyphicon-triangle-top:before{content:"\e253"}.glyphicon-console:before{content:"\e254"}.glyphicon-superscript:before{content:"\e255"}.glyphicon-subscript:before{content:"\e256"}.glyphicon-menu-left:before{content:"\e257"}.glyphicon-menu-right:before{content:"\e258"}.glyphicon-menu-down:before{content:"\e259"}.glyphicon-menu-up:before{content:"\e260"}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.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}[role=button]{cursor:pointer}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.small,small{font-size:85%}.mark,mark{padding:.2em;background-color:#fcf8e3}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#777}.text-primary{color:#337ab7}a.text-primary:focus,a.text-primary:hover{color:#286090}.text-success{color:#3c763d}a.text-success:focus,a.text-success:hover{color:#2b542c}.text-info{color:#31708f}a.text-info:focus,a.text-info:hover{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:focus,a.text-warning:hover{color:#66512c}.text-danger{color:#a94442}a.text-danger:focus,a.text-danger:hover{color:#843534}.bg-primary{color:#fff;background-color:#337ab7}a.bg-primary:focus,a.bg-primary:hover{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:focus,a.bg-success:hover{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:focus,a.bg-info:hover{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:focus,a.bg-warning:hover{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:focus,a.bg-danger:hover{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ol,ul{margin-top:0;margin-bottom:10px}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;margin-left:-5px;list-style:none}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-top:0;margin-bottom:20px}dd,dt{line-height:1.42857143}dt{font-weight:700}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #777}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child{margin-bottom:0}blockquote .small,blockquote footer,blockquote small{display:block;font-size:80%;line-height:1.42857143;color:#777}blockquote .small:before,blockquote footer:before,blockquote small:before{content:'\2014 \00A0'}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;text-align:right;border-right:5px solid #eee;border-left:0}.blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before{content:''}.blockquote-reverse .small:after,.blockquote-reverse footer:after,.blockquote-reverse small:after,blockquote.pull-right .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after{content:'\00A0 \2014'}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;font-weight:700;-webkit-box-shadow:none;box-shadow:none}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border-bottom-width:2px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}table col[class*=col-]{position:static;display:table-column;float:none}table td[class*=col-],table th[class*=col-]{position:static;display:table-cell;float:none}.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#f5f5f5}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover{background-color:#e8e8e8}.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#dff0d8}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover{background-color:#d0e9c6}.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#d9edf7}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover{background-color:#c4e3f3}.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#fcf8e3}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover{background-color:#faf2cc}.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#f2dede}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover{background-color:#ebcccc}.table-responsive{min-height:.01%;overflow-x:auto}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px\9;line-height:normal}input[type=file]{display:block}input[type=range]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#555}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{background-color:transparent;border:0}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}input[type=search]{-webkit-appearance:none}@media screen and (-webkit-min-device-pixel-ratio:0){input[type=date].form-control,input[type=time].form-control,input[type=datetime-local].form-control,input[type=month].form-control{line-height:34px}.input-group-sm input[type=date],.input-group-sm input[type=time],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],input[type=date].input-sm,input[type=time].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm{line-height:30px}.input-group-lg input[type=date],.input-group-lg input[type=time],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],input[type=date].input-lg,input[type=time].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg{line-height:46px}}.form-group{margin-bottom:15px}.checkbox,.radio{position:relative;display:block;margin-top:10px;margin-bottom:10px}.checkbox label,.radio label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio]{position:absolute;margin-top:4px\9;margin-left:-20px}.checkbox+.checkbox,.radio+.radio{margin-top:-5px}.checkbox-inline,.radio-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;font-weight:400;vertical-align:middle;cursor:pointer}.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{margin-top:0;margin-left:10px}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed}.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline{cursor:not-allowed}.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label{cursor:not-allowed}.form-control-static{min-height:34px;padding-top:7px;padding-bottom:7px;margin-bottom:0}.form-control-static.input-lg,.form-control-static.input-sm{padding-right:0;padding-left:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm{height:30px;line-height:30px}select[multiple].input-sm,textarea.input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm select[multiple].form-control,.form-group-sm textarea.form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-lg{height:46px;line-height:46px}select[multiple].input-lg,textarea.input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg select[multiple].form-control,.form-group-lg textarea.form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.3333333}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.form-group-lg .form-control+.form-control-feedback,.input-group-lg+.form-control-feedback,.input-lg+.form-control-feedback{width:46px;height:46px;line-height:46px}.form-group-sm .form-control+.form-control-feedback,.input-group-sm+.form-control-feedback,.input-sm+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}.has-success .form-control-feedback{color:#3c763d}.has-warning .checkbox,.has-warning .checkbox-inline,.has-warning .control-label,.has-warning .help-block,.has-warning .radio,.has-warning .radio-inline,.has-warning.checkbox label,.has-warning.checkbox-inline label,.has-warning.radio label,.has-warning.radio-inline label{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;background-color:#fcf8e3;border-color:#8a6d3b}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;background-color:#f2dede;border-color:#a94442}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .checkbox,.form-inline .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .checkbox label,.form-inline .radio label{padding-left:0}.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{padding-top:7px;margin-top:0;margin-bottom:0}.form-horizontal .checkbox,.form-horizontal .radio{min-height:27px}.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.form-horizontal .control-label{padding-top:7px;margin-bottom:0;text-align:right}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.focus,.btn:focus,.btn:hover{color:#333;text-decoration:none}.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default.focus,.btn-default:focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{background-image:none}.btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color:#fff;background-color:#204d74;border-color:#122b40}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#337ab7;border-color:#2e6da4}.btn-primary .badge{color:#337ab7;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#449d44;border-color:#255625}.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{color:#fff;background-color:#398439;border-color:#255625}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{background-image:none}.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{color:#fff;background-color:#269abc;border-color:#1b6d85}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{background-image:none}.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning.focus,.btn-warning:focus{color:#fff;background-color:#ec971f;border-color:#985f0d}.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{color:#fff;background-color:#d58512;border-color:#985f0d}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{color:#fff;background-color:#ac2925;border-color:#761c19}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{font-weight:400;color:#337ab7;border-radius:0}.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#23527c;text-decoration:underline;background-color:transparent}.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color:#777;text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-group-xs>.btn,.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-property:height,visibility;-o-transition-property:height,visibility;transition-property:height,visibility}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\9;border-right:4px solid transparent;border-left:4px solid transparent}.dropdown,.dropup{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{color:#777}.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{right:0;left:auto}.dropdown-menu-left{right:auto;left:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px dashed;border-bottom:4px solid\9}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{right:0;left:auto}.navbar-right .dropdown-menu-left{right:auto;left:0}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;float:left}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{display:table-cell;float:none;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*=col-]{float:none;padding-right:0;padding-left:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group .form-control:focus{z-index:3}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn,textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn,textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn{height:auto}.input-group .form-control,.input-group-addon,.input-group-btn{display:table-cell}.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:4px}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{z-index:2;margin-left:-1px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#777}.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{color:#fff;background-color:#337ab7}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-right:0;padding-left:0}}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}}.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-brand>img{display:block}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}.navbar-form{padding:10px 15px;margin-top:8px;margin-right:-15px;margin-bottom:8px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1)}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .form-control-static{display:inline-block}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .form-control,.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .checkbox,.navbar-form .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .checkbox label,.navbar-form .radio label{padding-left:0}.navbar-form .checkbox input[type=checkbox],.navbar-form .radio input[type=radio]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}.navbar-form .form-group:last-child{margin-bottom:0}}@media (min-width:768px){.navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:8px;margin-bottom:8px}.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}.navbar-text{margin-top:15px;margin-bottom:15px}@media (min-width:768px){.navbar-text{float:left;margin-right:15px;margin-left:15px}}@media (min-width:768px){.navbar-left{float:left!important}.navbar-right{float:right!important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{color:#ccc;background-color:transparent}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#e7e7e7}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:focus,.navbar-default .btn-link:hover{color:#333}.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover{color:#ccc}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#9d9d9d}.navbar-inverse .navbar-brand:focus,.navbar-inverse .navbar-brand:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a:focus,.navbar-inverse .navbar-nav>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:focus,.navbar-inverse .navbar-nav>.disabled>a:hover{color:#444;background-color:transparent}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:hover{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:focus,.navbar-inverse .navbar-nav>.open>a:hover{color:#fff;background-color:#080808}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#444;background-color:transparent}}.navbar-inverse .navbar-link{color:#9d9d9d}.navbar-inverse .navbar-link:hover{color:#fff}.navbar-inverse .btn-link{color:#9d9d9d}.navbar-inverse .btn-link:focus,.navbar-inverse .btn-link:hover{color:#fff}.navbar-inverse .btn-link[disabled]:focus,.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:focus,fieldset[disabled] .navbar-inverse .btn-link:hover{color:#444}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}.breadcrumb>.active{color:#777}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span{color:#777;cursor:not-allowed;background-color:#fff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:focus,a.label:hover{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#777}.label-default[href]:focus,.label-default[href]:hover{background-color:#5e5e5e}.label-primary{background-color:#337ab7}.label-primary[href]:focus,.label-primary[href]:hover{background-color:#286090}.label-success{background-color:#5cb85c}.label-success[href]:focus,.label-success[href]:hover{background-color:#449d44}.label-info{background-color:#5bc0de}.label-info[href]:focus,.label-info[href]:hover{background-color:#31b0d5}.label-warning{background-color:#f0ad4e}.label-warning[href]:focus,.label-warning[href]:hover{background-color:#ec971f}.label-danger{background-color:#d9534f}.label-danger[href]:focus,.label-danger[href]:hover{background-color:#c9302c}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#777;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-group-xs>.btn .badge,.btn-xs .badge{top:0;padding:1px 5px}a.badge:focus,a.badge:hover{color:#fff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#337ab7;background-color:#fff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.jumbotron{padding-top:30px;padding-bottom:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron .h1,.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.jumbotron>hr{border-top-color:#d5d5d5}.container .jumbotron,.container-fluid .jumbotron{padding-right:15px;padding-left:15px;border-radius:6px}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}.jumbotron .h1,.jumbotron h1{font-size:63px}}.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.thumbnail a>img,.thumbnail>img{margin-right:auto;margin-left:auto}a.thumbnail.active,a.thumbnail:focus,a.thumbnail:hover{border-color:#337ab7}.thumbnail .caption{padding:9px;color:#333}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-bar-striped,.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:40px 40px;background-size:40px 40px}.progress-bar.active,.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.media{margin-top:15px}.media:first-child{margin-top:0}.media,.media-body{overflow:hidden;zoom:1}.media-body{width:10000px}.media-object{display:block}.media-object.img-thumbnail{max-width:none}.media-right,.media>.pull-right{padding-left:10px}.media-left,.media>.pull-left{padding-right:10px}.media-body,.media-left,.media-right{display:table-cell;vertical-align:top}.media-middle{vertical-align:middle}.media-bottom{vertical-align:bottom}.media-heading{margin-top:0;margin-bottom:5px}.media-list{padding-left:0;list-style:none}.list-group{padding-left:0;margin-bottom:20px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}a.list-group-item,button.list-group-item{color:#555}a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{color:#333}a.list-group-item:focus,a.list-group-item:hover,button.list-group-item:focus,button.list-group-item:hover{color:#555;text-decoration:none;background-color:#f5f5f5}button.list-group-item{width:100%;text-align:left}.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover{color:#777;cursor:not-allowed;background-color:#eee}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading{color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text{color:#777}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{z-index:2;color:#fff;background-color:#337ab7;border-color:#337ab7}.list-group-item.active .list-group-item-heading,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>small{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:focus .list-group-item-text,.list-group-item.active:hover .list-group-item-text{color:#c7ddef}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success,button.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,a.list-group-item-success.active:focus,a.list-group-item-success.active:hover,button.list-group-item-success.active,button.list-group-item-success.active:focus,button.list-group-item-success.active:hover{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#31708f;background-color:#d9edf7}a.list-group-item-info,button.list-group-item-info{color:#31708f}a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover{color:#31708f;background-color:#c4e3f3}a.list-group-item-info.active,a.list-group-item-info.active:focus,a.list-group-item-info.active:hover,button.list-group-item-info.active,button.list-group-item-info.active:focus,button.list-group-item-info.active:hover{color:#fff;background-color:#31708f;border-color:#31708f}.list-group-item-warning{color:#8a6d3b;background-color:#fcf8e3}a.list-group-item-warning,button.list-group-item-warning{color:#8a6d3b}a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover{color:#8a6d3b;background-color:#faf2cc}a.list-group-item-warning.active,a.list-group-item-warning.active:focus,a.list-group-item-warning.active:hover,button.list-group-item-warning.active,button.list-group-item-warning.active:focus,button.list-group-item-warning.active:hover{color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger,button.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover,button.list-group-item-danger.active,button.list-group-item-danger.active:focus,button.list-group-item-danger.active:hover{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-left-radius:3px;border-top-right-radius:3px}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.list-group+.panel-footer{border-top-width:0}.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table{margin-bottom:0}.panel>.panel-collapse>.table caption,.panel>.table caption,.panel>.table-responsive>.table caption{padding-right:15px;padding-left:15px}.panel>.table-responsive:first-child>.table:first-child,.panel>.table:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table:first-child>thead:first-child>tr:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child{border-top-left-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child{border-top-right-radius:3px}.panel>.table-responsive:last-child>.table:last-child,.panel>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child td,.panel>.table>tbody:first-child>tr:first-child th{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{margin-bottom:0;border:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:4px}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#ddd}.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#333}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd}.panel-primary{border-color:#337ab7}.panel-primary>.panel-heading{color:#fff;background-color:#337ab7;border-color:#337ab7}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#337ab7}.panel-primary>.panel-heading .badge{color:#337ab7;background-color:#fff}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#337ab7}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#bce8f1}.panel-info>.panel-heading{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1}.panel-info>.panel-heading .badge{color:#d9edf7;background-color:#31708f}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bce8f1}.panel-warning{border-color:#faebcc}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}.panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,.15)}.well-lg{padding:24px;border-radius:6px}.well-sm{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.tooltip{position:absolute;z-index:1070;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;filter:alpha(opacity=0);opacity:0;line-break:auto}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover-title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow{border-width:11px}.popover>.arrow:after{content:"";border-width:10px}.popover.top>.arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.popover.top>.arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover.right>.arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}.popover.bottom>.arrow{top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25)}.popover.bottom>.arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover.left>.arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);background-color:rgba(0,0,0,0);filter:alpha(opacity=50);opacity:.5}.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=90);outline:0;opacity:.9}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block;margin-top:-10px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000\9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-10px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-10px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-lg,.visible-md,.visible-sm,.visible-xs{display:none!important}.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table!important}tr.visible-xs{display:table-row!important}td.visible-xs,th.visible-xs{display:table-cell!important}}@media (max-width:767px){.visible-xs-block{display:block!important}}@media (max-width:767px){.visible-xs-inline{display:inline!important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table!important}tr.visible-sm{display:table-row!important}td.visible-sm,th.visible-sm{display:table-cell!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table!important}tr.visible-md{display:table-row!important}td.visible-md,th.visible-md{display:table-cell!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table!important}tr.visible-lg{display:table-row!important}td.visible-lg,th.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:block!important}table.visible-print{display:table!important}tr.visible-print{display:table-row!important}td.visible-print,th.visible-print{display:table-cell!important}}.visible-print-block{display:none!important}@media print{.visible-print-block{display:block!important}}.visible-print-inline{display:none!important}@media print{.visible-print-inline{display:inline!important}}.visible-print-inline-block{display:none!important}@media print{.visible-print-inline-block{display:inline-block!important}}@media print{.hidden-print{display:none!important}}
/* Front styles */

/* Variables */
:root {
	--theme-colour-text: #ffffff;
	--theme-colour-main: #3b82f6;
	--theme-colour-main-light: #525252;
	--theme-colour-link: #0076d6;
	--theme-colour-link-hover: #2dc26b;
	--theme-colour-background: #1c1c1c;
	--theme-colour-light-blue: #099ad3;
	--theme-colour-lighter-blue: #03b7ef;
}

/* Global */
body {
    background: #1d1d1d;
    font-family: "Lato Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
img, iframe {
	max-width: 100%;
}
.relative {
    position: relative;
}
.container img {
    margin: 0;
}
a, a:link, a:visited, a:focus {
	color: var(--theme-colour-main);
	transition: color 0.35s;
	text-decoration: none;
}
a:hover {
	color: var(--theme-colour-link-hover);
	transition: color 0.25s;
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    color: #fff;
    background-color: rgb(97,97,97);
    border: 1px solid transparent;
}

/* Grid adjustment */
@media screen and (max-width: 814px) {
	.row {
		margin-right: 0;
		margin-left: 0;
	}
	img, iframe {
		max-width: 100% !IMPORTANT;
	}
}

/* Hero Feature */
.row-hero {
	align-items: center;
}
.col-hero-img {
	text-align: center;
}
.col-hero-img img {
	margin: 0 auto;
}

/* Header/Hero Buttons */
#header-signup-btn,
#header-login-btn,
#hero-signup-btn,
#hero-contact-btn {
	display: block;
    line-height: 1.5em;
    padding: 5px 20px;
    color: #ffffff;
    margin: 0 0 3px;
}
#hero-signup-btn,
#hero-contact-btn {
	padding: 11px 25px;
	margin: 0 0 9px;
	font-weight: 500;
	font-size: 1.25em;
}
#header-signup-btn,
#hero-signup-btn {
	background: var(--theme-colour-main);
}
#header-login-btn,
#hero-contact-btn {
	background: var(--theme-colour-link-hover);
	margin: 0;
}

/* Main Menu */
nav.navbar {
	padding: 0;
	margin: 15px 0 0;
    min-height: 61px;
}
nav.navbar ul.nav-menu {
	list-style-type: none;
    margin: 0;
    padding: 0;
}
nav.navbar ul.nav-menu li {
	margin: 0;
    padding: 0;
	float: left;
	line-height: 1.35rem;
}
nav.navbar ul.nav-menu li a,
nav.navbar ul.nav-menu li a:link,
nav.navbar ul.nav-menu li a:visited {
	display: inline-block;
	padding: 10px;
	font-size: 1.25rem;
	text-decoration: none;
	font-weight: 500;
	color: var(--theme-colour-text);
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}
nav.navbar ul.nav-menu li a i {
	font-size: 16px;
}
nav.navbar ul.nav-menu li a:hover {
	color: var(--theme-colour-light-blue);
	-webkit-transition: all 0.25s;
	-moz-transition: all 0.25s;
	transition: all 0.25s;
}
nav.navbar ul.nav-menu li:first-child a {
	padding-left: 0;
}
nav.navbar ul.nav-menu li:last-child a {
	padding-right: 0;
}
nav.navbar ul.nav-menu li.has-child {}
nav.navbar ul.nav-menu li.has-child .child-wrapper {
	position: absolute;
	display: block;
	width: auto;
	opacity: 0;
	margin: 0 0 0 10px;
	padding: 5px 10px;
	border: 1px solid var(--theme-colour-main-light);
	background: #ffffff;
	z-index: -1;
	-webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.33);
    box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.33);
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}
nav.navbar ul.nav-menu li:first-child .child-wrapper {
	margin-left: 0;
}
nav.navbar ul.nav-menu li.has-child:hover > .child-wrapper {
	opacity: 1;
	z-index: 9999;
	-webkit-transition: all 0.45s;
	-moz-transition: all 0.45s;
	transition: all 0.45s;
}
nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu {
	list-style-type: none;
    margin: 0;
    padding: 0;
}
nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu li {
	margin: 0;
    padding: 0;
	float: none;
}
nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu li a,
nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu li a:link,
nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu li a:visited {
	margin: 0;
	padding: 5px 0;
	font-size: 1.15rem;
	color: var(--theme-colour-main);
}
nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu li a:hover {
	color: var(--theme-colour-link-hover);
}
.mobile-menu-close {
    position: fixed;
    top: 5px;
    right: -1000px;
	margin-right: 10px;
    font-size: 36px;
	color: var(--theme-colour-main);
    cursor: pointer;
	transition: right 0.35s;
	z-index: 99999;
}
@media screen and (max-width: 991px) {
	nav.navbar ul.nav-menu li a, 
	nav.navbar ul.nav-menu li a:link, 
	nav.navbar ul.nav-menu li a:visited {
		padding: 5px;
		font-size: 1rem;
	}
}
@media screen and (max-width: 414px) {
	/* Adjust Logo bottom margin */
	#nwm-tools-header img {
		margin-bottom: 15px;
	}
	
	/* Adjust menu to work with mobiles */
	nav.navbar {
		position: fixed;
		top: 0;
		right: -1000px;
		width: 100%;
		margin: 0 0 15px 0;
		padding: 15px;
		z-index: 99999;
		background: #fff;
		border-bottom: 1px solid var(--theme-colour-main);
		transition: right 0.35s;
		z-index: 99999;
	}
	nav.navbar ul.nav-menu li {
		display: block;
		float: none;
	}
	nav.navbar ul.nav-menu li a,
	nav.navbar ul.nav-menu li a:link,
	nav.navbar ul.nav-menu li a:visited {
		padding: 15px;
	}
	.mobile-menu-close {
		
	}
}
/* Mobile Menu */
.mobile-menu {
	margin-top: 15px;
    text-align: center;
}
.mobile-menu i {
	font-size: 36px;
	color: var(--theme-colour-main);
	cursor: pointer;
}
@media screen and (min-width: 415px) {
	.mobile-menu {
		display: none;
	}
}

/* Front Web Forms */
.app-front-form textarea {
	min-height: 80px;
}
.app-front-form .input-group button {
	height: 100%;
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	background-color: var(--theme-colour-main);
}
.app-front-form .input-group button:hover {
	background-color: var(--theme-colour-link-hover);
	border-color: var(--theme-colour-link-hover);
	color: #fff;
}
.app-front-form .form-group button {
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	background-color: var(--theme-colour-main);
}
.app-front-form .form-group button:hover {
	background-color: var(--theme-colour-link-hover);
	border-color: var(--theme-colour-link-hover);
	color: #fff;
}
.app-front-form .app-front-form-msg {
	height: 32px;
	max-height: 32px;
	margin-top: 5px;
}
.app-front-form .app-front-form-msg span.nwm-red {
	font-weight: bold;
	color: #cc0000;
}
.app-front-form .app-front-form-msg span.nwm-green {
	font-weight: bold;
	color: #008000;
}
.app-front-form .input-override {
	display: none;
}

/* Footer */
.container-footer,
.container-footer p,
.container-footer ul {
	color: #ffffff;
}
.container-footer a, .container-footer a:link, .container-footer a:visited, .container-footer a:focus {
	color: #ffffff;
	transition: color 0.35s;
}
.container-footer a:hover {
	color: var(--theme-colour-lighter-blue)!IMPORTANT;
	transition: color 0.25s;
}
#checkout {
    display: none;
    position: fixed;
    width: 94%;
    max-height: 80%;
    top: 5%;
    left: 3%;
    z-index: 99999;
    padding: 15px;
    overflow-y: auto;
    background: #000000;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.66);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.66);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.66);
    border: 2px solid #3078db;
}
.btn-checkout {
    margin-top: 5px;
}
.powered-by-stripe svg {
    max-width: 160px;
    margin-top: 0;
}
@media screen and (min-width: 415px) {
    #checkout {
        width: 50%;
        top: 10%;
        left: 25%;
    }
}
@media screen and (min-width: 1024px) {
	#checkout {
        width: 33%;
        top: 10%;
        left: 33%;
        padding: 30px;
    }
}
@media screen and (max-width: 430px) {
	.footer div,
    .footer div ul li {
        display: block;
        width: 100%;
        text-align: center;
    }
    .footer div ul {
        margin-top: 10px;
    }
    .footer div ul li {
        padding: 5px 0;
    }
    .footer div ul li:last-child {
        padding: 15px 0 5px;
    }
}
.btn-success {
    color: #fff;
    background-color: #3078db!important;
    border-color: #3078db!important;
}
/* ===================================================================
   LOG IN AND SIGN UP -- ONE GREEN, ONE BLUE
   -------------------------------------------------------------------
   They were both green. Log In filled #2dc26b, Sign Up black with a
   white outline that turned #2dc26b on hover, so pointing at either one
   produced the same green button and the pair had no hierarchy at all
   -- it just had a delay before it lost its hierarchy.

   Green is GO and price, and only that. Two greens in one corner spend
   the one colour that is supposed to mean something. So Log In keeps
   the green, which is what Martin asked for this morning, and Sign Up
   takes the app's blue.

   THE BLUE IS NOT A NEW COLOUR. It is the treatment the hamburger on
   the other side of this bar already uses and the app uses for every
   secondary control: an outline at rest -- rgba(91,147,255,.55) on
   #5b93ff text -- filling to #2563eb when you commit to it. Whatever
   else changes, the public bar now speaks the app's language for "this
   is the quiet one".

   NOT chosen from the ribbons. The obvious story was that the blue slab
   sits over Log In and the green over Sign Up, so the buttons should
   match the slab above them -- but the slabs CROSSFADE and swap sides.
   Sampled over ten seconds: path A ran green while B ran blue, and a
   minute earlier it was the other way round. An argument from adjacency
   would have been wrong within the minute.

   THE HOVER DOES SOMETHING NOW. It was a flat colour swap, which on the
   outlined button meant the border simply changed colour. Both buttons
   lift 1px and cast a shadow in their own hue, so the feedback is the
   button coming toward you rather than repainting. :focus-visible gets
   the same ring, because a keyboard should not be the one state with no
   answer. Motion is dropped for anyone who asked for it to be.
   =================================================================== */
.btn-public-signup,
.btn-public-login {
    border-radius: 15px!important;
    padding: 3px 18px!important;
}
/* THE TRANSITION NEEDS THE LONGER SELECTOR, and the colours above do not,
   because they carry !important and this does not. These buttons are <a>
   elements, and the theme has `a, a:link, a:visited, a:focus { transition:
   color .35s }`. `a:link` is (0,1,1); a bare `.btn-public-login` is
   (0,1,0) and loses -- so the first version of this animated nothing but
   the text colour, and only the transition, silently. Measured, not
   spotted: transition-property computed as `color`. */
.top-button-menu a.btn-public-signup,
.top-button-menu a.btn-public-login {
    transition: background-color .16s ease, border-color .16s ease,
                color .16s ease, transform .16s ease, box-shadow .16s ease;
}
/* Log In -- outlined at rest like Sign Up, and it fills from a rotating
   sweep rather than by swapping colour. Both buttons now start as
   outlines, so the difference between them is what happens when you
   reach for them, which is the only moment the difference matters.

   The fill is NOT a background transition on the button. It is an
   ::after that goes green on a delay, sitting over an ::before that
   carries the spinning gradient -- so the sweep runs first and is then
   covered by the green it was promising. A background transition cannot
   do that, because there is only one background. */
.btn-public-login {
    background: transparent!important;
    border: 2px solid rgba(45,194,107,.55)!important;
    color: #2dc26b!important;
}
.btn-public-login:hover,
.btn-public-login:focus-visible {
    border-color: #2dc26b!important;
    color: #fff!important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(45,194,107,.34);
}
/* Sign Up -- outlined, the blue one. */
.btn-public-signup {
    background: transparent!important;
    border: 2px solid rgba(91,147,255,.55)!important;
    color: #5b93ff!important;
}
.btn-public-signup:hover,
.btn-public-signup:focus-visible {
    background: #2563eb!important;
    border-color: #2563eb!important;
    color: #fff!important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37,99,235,.38);
}
/* Pressed goes back down. A lift that stays lifted while the mouse is
   held is the one part of this that would read as broken. */
.btn-public-login:active,
.btn-public-signup:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ---- THE ROTATING SWEEP ON LOG IN --------------------------------
   Scoped to the bar. The same two classes are on links in the flyout
   menu, where the button skin is deliberately stripped further down
   this file -- but nothing there resets a pseudo-element, so an
   unscoped ::before would have a conic gradient spinning behind a
   plain menu row on hover.

   HOW IT IS BUILT, since none of it is obvious from the declarations:

   ::before is a 200px SQUARE, centred, carrying the conic gradient. It
   is square because a rotating rectangle sweeps its own corners through
   the frame and the light pulses as it turns; a square rotating about
   its centre presents the same silhouette at every angle. 200 clears
   the pill's ~88px diagonal, so no corner ever enters the view.

   It is the ELEMENT that rotates, not the gradient's `from` angle.
   Animating an angle inside conic-gradient needs @property to be
   interpolable at all, and where that is unsupported it does not
   degrade -- it simply never moves. A transform rotation runs
   everywhere and on the compositor.

   overflow:hidden clips it to the pill. That clips to the PADDING box,
   inside the border, so the sweep runs within the outline rather than
   around it and the green rim stays a rim throughout.

   ::after is the fill, on a .25s delay -- long enough for about a
   quarter turn to read before the green covers it. The label sits above
   both on z-index 2, and takes the same delay so the text turns white
   as the green arrives underneath it rather than a beat early against
   nothing. -------------------------------------------------------- */
.top-button-menu a.btn-public-login {
    position: relative;
    overflow: hidden;
    transition: border-color .16s ease, transform .16s ease,
                box-shadow .16s ease, color .3s ease .25s;
}
.top-button-menu a.btn-public-login > i,
.top-button-menu a.btn-public-login > span {
    position: relative;
    z-index: 2;
}
.top-button-menu a.btn-public-login::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    z-index: 0;
    opacity: 0;
    background: conic-gradient(from 0deg,
        rgba(122,240,170,0) 0deg,
        rgba(122,240,170,.9) 60deg,
        rgba(190,255,220,1) 105deg,
        rgba(122,240,170,.9) 150deg,
        rgba(122,240,170,0) 240deg,
        rgba(122,240,170,0) 360deg);
    transition: opacity .16s ease;
}
.top-button-menu a.btn-public-login::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(45,194,107,0);
    transition: background-color .3s ease .25s;
}
.top-button-menu a.btn-public-login:hover::before,
.top-button-menu a.btn-public-login:focus-visible::before {
    opacity: 1;
    animation: lhq-login-sweep .9s linear infinite;
}
.top-button-menu a.btn-public-login:hover::after,
.top-button-menu a.btn-public-login:focus-visible::after {
    background-color: #2dc26b;
}
@keyframes lhq-login-sweep {
    to { transform: rotate(360deg); }
}
/* Reduced motion keeps the outline-to-fill, which is the information,
   and drops the spinning, which is the flourish. The fill loses its
   delay too -- a quarter-second of nothing happening only makes sense
   while something is happening in it. */
@media (prefers-reduced-motion: reduce) {
    .top-button-menu a.btn-public-login {
        transition: border-color .16s ease, color .16s ease;
    }
    .top-button-menu a.btn-public-login:hover::before,
    .top-button-menu a.btn-public-login:focus-visible::before {
        opacity: 0;
        animation: none;
    }
    .top-button-menu a.btn-public-login::after {
        transition: background-color .16s ease;
    }
}
@media (prefers-reduced-motion: reduce) {
    .top-button-menu a.btn-public-signup,
    .top-button-menu a.btn-public-login {
        transition: background-color .16s ease, border-color .16s ease, color .16s ease;
    }
    .btn-public-login:hover,
    .btn-public-login:focus-visible,
    .btn-public-signup:hover,
    .btn-public-signup:focus-visible {
        transform: none;
    }
}
.btn-back,
.btn-subscribe,
.btn-purchase-digital,
.btn-join-login {
    background-color: rgb(52, 199, 89)!important;
    color: rgb(255, 255, 255)!important;
    border-color: rgb(52, 199, 89)!important;
}
.btn-back:hover,
.btn-subscribe:hover,
.btn-purchase-digital:hover,
.btn-join-login:hover {
    background-color: rgb(97, 97, 97)!important;
    color: rgb(255, 255, 255)!important;
    border-color: rgb(97, 97, 97)!important;
}
.input-group-addon {
    color: #fff!important;
    background: #3078db!important;
    border-radius: 0!important;
}
.input-group-addon-help {
    background: #28a72c!important;
}
.popover-title {
    background-color: #3078db!important;
    color: #fff;
    font-weight: 500;
}
.row.row-public {
    display: flex;
    width: 100%;
    margin-left: 0;
    background: #3d3d3d;
    align-items: center;
}
/* THE PHONE GUTTER WAS 35px A SIDE, on a 375px screen -- 19% of the
   display spent on margin. Two wrappers stack it: .container-content
   pads 20 and Bootstrap's .col-md-12 pads another 15, and neither was
   written with a phone in mind. Measured on a 375 viewport: the grid
   had 255px to draw in and sat off-centre, because the 10px the
   scrollbar takes comes off one side only.

   16 a side is the figure, which is the ordinary phone gutter and what
   the cards were designed against. Scoped to the marketplace rather
   than applied to every public page, because the landing pages and the
   storefront have their own layouts and are not what is being looked
   at -- they are worth the same measurement, separately. */
/* .container-content-full's padding MOVED TO brand.css. It was here, and
   here is wrong: public.css is only in the public bundle, so the rule
   covered a signed-out visitor and silently left a signed-in one with no
   padding at all -- the wrapper's 20px had been an inline style that
   applied in both. brand.css is one of the two sheets both bundles load.
   The full note is there. */

/* THE BAR STOPS BEING A BAR, so the plate can be a layer on top of it.
   chrome.css paints `.navbar-static-top, .footer` #003142 -- one rule for
   both -- and the plate is #0f3d4a. Two teals a few units apart, so the
   thing that is supposed to be sitting ON the page read as part of a
   strip instead, and the drop shadow under it had nothing to fall on.

   Page colour instead. Every public page's body is #1d1d1d -- checked on
   /, /contact-us/ and /products/, where the sections over it are all
   transparent -- so one value works everywhere and the bar simply stops
   being visible. What is left is a logo and a plate floating on the page,
   which is what the signed-in chrome looks like.

   OPAQUE, NOT TRANSPARENT, and that is the whole reason a band is still
   here. The nav is position:fixed and content scrolls underneath it; make
   it transparent and product cards travel up through the logo. Matching
   the page gets the look without the collision.

   Scoped to .row-public so the admin bar and the footer, which share that
   chrome.css rule, keep their own colour. */
.row-public nav.navbar-static-top {
    background-color: #1d1d1d;
}
body.courses .row.row-public {
    margin-bottom: 15px;
}
nav.navbar {
    padding: 0;
    margin: 0;
}
.top-student-menu {
    display: inline-block!important;
    margin-left: 15px;
}
/* #35c95b LIVED HERE -- a THIRD green, and the one the earlier sweep walked
   past because it was hunting #00bf63, #00d16d and rgb(0,191,99). Three
   greens for one button across one stylesheet.

   It is gone rather than corrected: the full rule further down this file now
   owns this button in both its states, and a second declaration that happens
   to lose on source order is a trap for whoever next moves a block. */
.student-menu-flyout {
    margin-top: 0;
}
body.courses .student-menu-flyout {
    margin-top: -15px;
}
body.public .student-menu-flyout .nav-label {
    display: block!important;
}
.student-menu-flyout li.standard-menu-item:hover {
    border-left: 5px solid #2f77db;
    background: #2f77db;
}
.student-menu-flyout li.standard-menu-item:hover > a {
    color: #ffff !important;
}
/* ===================================================================
   THE PUBLIC CLUSTER, BUILT AS THE SIGNED-IN BAR'S PLATE
   -------------------------------------------------------------------
   The signed-in chrome puts the store picker, the two animated slabs
   and the icon cluster on one angled teal plate in the top right
   corner. This is that plate with Log In and Sign Up in the outer two
   slots, so a visitor and a creator are looking at the same object.

   THE NUMBERS ARE NOT RE-CHOSEN. They are v2.css's, which are
   appShellChrome.html's, which were swept rather than picked:
   --rib-gap 37 is the distance at which the pair -- measured across
   every mode, pose and blend, 3.9M states -- still clears what sits
   beside it, and --rib-span 66.9 is the width the pair actually
   paints on average rather than the 91 it could theoretically reach.
   Reserving the maximum leaves a hole the eye reads as bad spacing.
   Re-derive them there, not here, if the artwork ever changes.

   They are declared ON THE CLUSTER rather than on :root because
   v2.css does not load on a public page and :root here would put six
   chrome variables into every landing page a creator builds.
   =================================================================== */
.top-button-menu {
    --pub-bar-h: 50px;
    --pub-pad: 22px;
    --pub-cut: 14px;      /* 50 x tan(16deg), so the cut stays parallel
                             to the slabs -- change one, change both */
    --rib-gap: 37px;
    --rib-span: 66.9;
    --rib-reach: 0;

    position: relative;
    display: flex;
    align-items: center;
    gap: var(--rib-gap);
    height: var(--pub-bar-h);
    /* nav.navbar is a fixed 65px flex row that does NOT centre its
       children -- they stretch from the top. The old margin-top:16px was
       doing this by hand for two 30px buttons; a 50px plate needs the
       real thing, or it sits flush to the top with 15px of bar under it. */
    align-self: center;
    margin-left: auto;
    margin-right: 0;
    margin-top: 0;
    padding: 0 var(--pub-pad) 0 calc(var(--pub-pad) + var(--pub-cut) / 2);
}
/* The old rule. A flex `gap` owns the spacing now, and a margin-right
   on the last child would push Sign Up off the plate's padding. */
.top-button-menu a {
    margin-right: 0;
}
/* Rounded on the leading edge only -- the trailing edge runs to the
   screen edge, so rounding it would be a corner nobody can see doing
   the opposite of what the shape says. Lifted from .sh-plate. */
.pub-plate {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 5px 0 0 5px;
    clip-path: polygon(var(--pub-cut) 0, 100% 0, 100% 100%, 0 100%);
    background: linear-gradient(97deg, #0f3d4a 0%, #0c3340 46%, #0a2733 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 28px rgba(0,0,0,.45);
}
/* The slot is a real flex item with no height, so the gaps either side
   of the slabs are measurable. The slabs themselves are 222x225 turned
   16deg and hang well outside it -- that is the point, they bleed below
   the bar -- so nothing here may clip. */
.top-button-menu .sh-ribwrap {
    position: relative;
    flex: none;
    height: 0;
    z-index: 2;
    pointer-events: none;
    width: calc((var(--rib-span) + 2 * var(--rib-reach)) * 1px);
}
/* 164deg is 180 minus the 16 the element is turned by, so the fade
   arrives on the page pointing straight down and both slabs end on the
   same line. Turning it any other way staggers them by about 14px and
   reads as one slab hanging below the other. */
.top-button-menu .sh-rib {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -111px;
    width: 222px;
    height: 225px;
    transform: translateY(-50%) rotate(16deg);
    transform-origin: 50% 50%;
    -webkit-mask-image: linear-gradient(164deg, #000 0, #000 50%, rgba(0,0,0,.3) 66.9%, transparent 74.5%);
    mask-image: linear-gradient(164deg, #000 0, #000 50%, rgba(0,0,0,.3) 66.9%, transparent 74.5%);
}
.top-button-menu .sh-rib svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* Everything anyone actually presses sits above the slabs. */
.top-button-menu .btn-public-login,
.top-button-menu .btn-public-signup {
    position: relative;
    z-index: 4;
    flex: none;
}
/* Too narrow for the cluster to carry everything. The ribbons go first
   because they are the decoration -- and 1060 is not a number picked
   here, it is the one v2.css drops .sh-ribwrap at, for that same reason.
   The two bars should not disagree about when the artwork stops fitting.

   The engine keeps drawing into the hidden slot below this width, which
   is what the signed-in bar does too. Matching it is deliberate: a
   second, cleverer behaviour out here is a second thing to keep in step.
   If it is ever worth stopping, stop it in both. */
@media (max-width: 1060px) {
    .top-button-menu .sh-ribwrap {
        display: none;
    }
    .top-button-menu {
        gap: 14px;
    }
}
/* ===================================================================
   THE PHONE BAR IS THE SAME OBJECT SIGNED IN OR OUT
   -------------------------------------------------------------------
   780 is the app's breakpoint, not a new one: it is where the signed-in
   plate stops being a plate and becomes a full-width bar with a burger
   on the left, the mark in the middle and one control on the right.
   Seen side by side on a phone, the signed-out bar was the odd one out
   -- no burger, no background, and two pills where the other had one
   icon. Three differences for a visitor who is about to become one of
   the other two.

   So it is the same bar. The plate goes, the teal comes back, the
   burger returns, and Sign Up steps out of the bar into the flyout,
   which has carried it all along -- Home, Sign Up, Log In, Contact Us.
   Log In stays as the single icon on the right, where the signed-in bar
   puts the way out.

   THE BURGER NEEDS THE !important AND THE LONGER SELECTOR. Signed out
   it carries .bar-menu-hidden, which is itself `display:none
   !important` -- it has to be, because three separate rules in this
   file set this element's display that way. Undoing it takes the same
   weight plus one more class.
   =================================================================== */
@media (max-width: 780px) {
    .row-public nav.navbar-static-top {
        background-color: #003142;
    }
    /* .row-public IN FRONT, and it is load-bearing. The rule that hides
       this signed out is `.top-student-menu.bar-menu-hidden` -- the same
       two classes -- and it sits ~1200 lines further down this file. A
       media query adds NO specificity, so an identical selector inside
       one still loses on source order, and the first version of this
       changed nothing at all. One more ancestor class settles it without
       moving either block. */
    .row-public .top-student-menu.bar-menu-hidden {
        display: inline-flex !important;
    }
    /* AND IT LOOKS LIKE THE SIGNED-IN ONE HERE. On the wide bar this
       button is an outlined blue chip that fills when the menu opens --
       Martin asked for that, and it is the app's secondary-control
       language. The signed-in PHONE bar's burger is a plain glyph, so
       at this width the outline is the one thing still telling you
       which of the two bars you are on. It goes.

       The desktop rule is untouched: this is scoped to the phone, which
       is where "the same bar" was the ask. The open state still reads,
       because the flyout it opens covers most of the screen. */
    .row-public .top-student-menu .student-nav,
    body.menu-open .row-public .top-student-menu .student-nav {
        background-color: transparent !important;
        border: 0 !important;
        color: #98a1ad !important;
        width: 38px;
        height: 38px;
        padding: 0 !important;
        border-radius: 9px !important;
    }
    body.menu-open .row-public .top-student-menu .student-nav {
        color: #e9edf2 !important;
        background-color: rgba(255,255,255,.08) !important;
    }
    .top-button-menu {
        height: auto;
        padding: 0;
        gap: 0;
    }
    .pub-plate {
        display: none;
    }
    /* In the flyout, not gone: a visitor who wants to sign up is the
       point of the page, and the flyout is one press away. Two pills in
       a 375px bar is what crowded the mark. */
    .top-button-menu .btn-public-signup {
        display: none !important;
    }
    /* The one control, sized and shaped like the signed-in bar's exit
       icon rather than like a pill that lost its label. */
    .top-button-menu > a.btn-public-login {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        border-radius: 9px !important;
        color: #2dc26b !important;
    }
    .top-button-menu > a.btn-public-login i {
        margin: 0;
        font-size: 18px;
        color: #2dc26b !important;
    }
    .top-button-menu > a.btn-public-login span {
        display: none;
    }
    /* The sweep has no outline to run inside once the button is a bare
       glyph, and there is no hover on a phone to start it -- it could
       only ever fire as a flash on tap. */
    .top-button-menu > a.btn-public-login::before,
    .top-button-menu > a.btn-public-login::after {
        display: none;
    }
}
/* The storefront's search box and its phone magnifier stood here, with the same
   hidden-by-default pair chrome.css carried. Both are gone -- the search reached
   /offers/, which is the marketplace, and that is being held back for now. See
   top_bar.tpl for the full note. The width rules the media blocks below kept
   re-tuning for it (1079, 979, 579, 429) went at the same time, and so did the
   two rules at 500 and 419 that first showed the magnifier and then hid it again
   on a narrow bar. */
.footer {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
}
.container-footer {}
.container-footer .row {
    border-top: 1px solid #fff!important;
}
.hero-container {
    margin-top: -15px;
    margin-bottom: 30px;
    background-size: cover;
    background-position: center;
}
.hero-container .hero-col {
    padding-top: 100px;
    padding-bottom: 100px;
}
.hero-h1 {
    margin: 0;
    color: #fff;
    text-align: center;
    font-size: 48px; 
    line-height: 1.45;
}
@media (max-width: 1179px) {
    .btn-public-signup,
    .btn-public-login {
        padding: 3px 6px!important;
    }
}
@media (max-width: 879px) {
    .hero-container .hero-col {
        padding-top: 90px;
        padding-bottom: 90px;
    }
    .hero-h1 {
        font-size: 40px; 
    }
}
@media (max-width: 679px) {
    .hero-container .hero-col {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .hero-h1 {
        font-size: 36px; 
    }
}
@media (max-width: 579px) {
    .btn-public-signup,
    .btn-public-login {
        padding: 2px 4px!important;
        font-size: 12px!important;
    }
    .top-student-menu {
        margin-top: 8px;
        margin-right: 12px;
        padding: 3px 6px!important;
    }
    .hero-container .hero-col {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .hero-h1 {
        font-size: 32px; 
    }
}
@media (max-width: 429px) {
    nav.navbar {
        position: relative;
        right: auto;
        background: none;
        border-bottom: none;
    }
    .top-student-menu {
        margin-right: 5px;
        margin-left: 5px;
    }
    .hero-container .hero-col {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .hero-h1 {
        font-size: 28px; 
        line-height: 1.35;
    }
}
.btn-public-login i,
.btn-public-signup i {
    display: none;
}
.btn-public-login i {
    font-size: 16px;
    color: #18bf18;
}
@media (max-width: 500px) {
    .img-logo-a {
        display: inline-block!important;
        margin-top: 8px!important;
        margin-left: -4px!important;
    }
    .top-button-menu {
        margin-top: 18px;
    }
    .btn-public-login,
    .btn-public-signup {
        background: none!important;
        border: none!important;
    }
    .btn-public-login i,
    .btn-public-signup i {
        display: inline-block;
    }
    .btn-public-login span,
    .btn-public-signup span {
        display: none;
    }
}
@media (max-width: 379px) {
    nav.navbar {
        background: #000;
    }
    .img-logo-a {
        width: 200px;
        margin-top: 6px!important;
        margin-left: -15px!important;
    }
}
.signup-form-modal {
    text-align: center;
}
/* THE AUTH PANEL. Was pure #000 with a 3px radius and a z-index of 2,
   floating over the page with nothing behind it to say the page had stopped
   -- so it read as a box that had landed on the hero rather than as a thing
   asking for your attention.

   #242424 and a hairline is the panel surface the rest of the product uses;
   14px is the radius the marketplace cards use. z-index is raised because 2
   is below almost anything, and a login form that something else can cover
   is a login form that sometimes cannot be filled in.

   NO SCRIM HERE. There is already a .public-forms-overlay in
   footer_public.tpl and public.js already closes the panel when it is
   clicked. A ::before on this element was tried and was a bad idea: it
   painted over that overlay and swallowed the clicks, leaving a modal with
   no button, no Escape and no click-out -- unclosable. See the note on
   .public-forms-overlay further down. */
#public-login-wrapper,
#public-signup-wrapper,
#public-signup-login-wrapper {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 400px;
   max-width: calc(100vw - 32px);
   max-height: calc(100vh - 48px);
   overflow-y: auto;
   padding: 26px 24px 24px;
   background: #242424;
   border: 1px solid rgba(255,255,255,.09);
   color: #e9edf2;
   text-align: center;
   border-radius: 14px;
   box-shadow: 0 24px 60px rgba(0,0,0,.6);
   z-index: 1200;
}
/* The combined one is taller because it carries both forms. It no longer
   forces height:80% and overflow:scroll -- which drew a scrollbar on a panel
   that did not need one -- because max-height and overflow-y:auto above
   already do it, and only when there is something to scroll. */
#public-signup-login-wrapper {
    width: 420px;
}
#public-login-wrapper h3,
#public-signup-wrapper h3,
#public-signup-login-wrapper h3 {
    width: 100%;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
}
#public-login-wrapper p,
#public-signup-wrapper p,
#public-signup-login-wrapper p {
    color: #f1f1f1;
}
#public-login-wrapper .actions .btn,
#public-signup-wrapper .actions .btn,
#public-signup-login-wrapper .actions .btn {
    margin-right: 0!important;
}
#public-login-wrapper .btn-success {
    margin-bottom: 10px;
    padding: 6px 36px;
    font-weight: 700;
    font-size: 16px;
    border-radius: 4px!important;
}
#submit-login-modal, 
#submit-login-modal-2 {
    background: #18bf18!important;
    border: 1px solid #18bf18!important;
    border-radius: 15px!important;
}
/* .btn-public-signup IS NO LONGER IN THESE TWO SELECTORS, and taking it
   out is the whole reason the skin above works. This block is later in
   the file, so its `background:#000!important` beat the rule that owns
   the button 500 lines up -- the same trap the note in the phone block
   at the foot of this file describes, still set, still catching things.
   One button, one place, and that place is the block above.

   .btn-public-signup-2 is left because removing it is not this change,
   but it appears in no template, no module and no script -- it looks
   like dead CSS and is worth deleting once someone has checked. */
.btn-public-signup-2 {
    background: #000!important;
    border: 2px solid #fff!important;
    border-radius: 15px!important;
}
#submit-login-modal:hover,
#submit-login-modal-2:hover,
.btn-public-signup-2:hover {
    opacity: 0.85;
}
/* THE SCRIM WAS ALREADY HERE, and public.js already closes the panel when
   you click it. Raising the panel to z-index 1200 without raising this left
   the scrim underneath the page it was meant to cover -- and briefly I
   "fixed" that by adding a ::before to the panel, which painted over this
   element and swallowed the clicks that dismiss it. The modal became
   impossible to close by any means: no button, no Escape, no click-out.

   Styling the element that exists is the fix. It keeps its handler, and
   1199 puts it under the panel and over everything else. */
/* A WAY OUT OF EVERY WINDOW (14 Oct 2026, Martin: "a way for people to also just close
   down the modal even if they dont want to create an account"). The dimmed area closed
   them, but nothing said so, and over Try Merlin's full-screen editor it read as part of
   the window. A close button in the corner of each, and Escape (public.js). */
#public-login-wrapper .pfm-close,
#public-signup-wrapper .pfm-close,
#public-signup-login-wrapper .pfm-close {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 34px;
   height: 34px;
   padding: 0;
   border: 0;
   border-radius: 8px;
   background: transparent;
   color: #98a1ad;
   font-size: 24px;
   line-height: 34px;
   text-align: center;
   cursor: pointer;
   z-index: 1;
}
#public-login-wrapper .pfm-close:hover,
#public-signup-wrapper .pfm-close:hover,
#public-signup-login-wrapper .pfm-close:hover {
   background: rgba(255,255,255,.08);
   color: #e9edf2;
}
#public-login-wrapper .pfm-close:focus-visible,
#public-signup-wrapper .pfm-close:focus-visible,
#public-signup-login-wrapper .pfm-close:focus-visible {
   outline: 2px solid #2563eb;
   outline-offset: 2px;
}
.public-forms-overlay {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(8,10,12,.66);
    backdrop-filter: blur(3px);
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 1199;
    cursor: pointer;
}
#js-msg-login-modal,
#js-msg-login-modal-2,
#js-msg-signup-modal,
#js-msg-signup-modal-2 {
    display: none;
}
@media (max-width: 472px) {
    html {
        overflow-x: hidden;
    }
    /* CENTRED ONCE (16 Oct 2026). This said left: calc(50% - 172px), centring
       by hand, and the rule above now centres with translate(-50%) as well:
       on a phone the window was moved left twice and sat half off the screen.
       It keeps left:50% from above and only takes the screen's width, padding
       included, so 16px shows either side. */
    #public-login-wrapper,
    #public-signup-wrapper,
    #public-signup-login-wrapper {
       box-sizing: border-box;
       width: calc(100vw - 32px);
    }
}
#public-welcome-modal {
   display: none;
   position: fixed;
   top: calc(50% - 215px);
   left: calc(50% - 200px);
   width: 400px;
   height: 430px;
   padding: 15px;
   background: #000;
   color: #f1f1f1;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.33);
   -moz-box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.33);
   box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.33);
   z-index: 2;
}
#public-welcome-modal h3 {
    text-align: center;
    margin-bottom: 30px;
}
#public-welcome-modal ol li {
    padding-bottom: 10px;
}
#public-welcome-modal-buttons {
    text-align: center;
}
@media (max-width: 472px) {
    #public-welcome-modal {
        top: calc(50% - 240px);
        left: calc(50% - 150px);
        width: 300px;
        height: 480px;
    }
}

.modal-form-toggle {
    background: #000;
    border: 1px solid #fff;
    border-radius: 5px;
    stroke: none;
}
.modal-form-toggle.modal-form-toggle-active,
.modal-form-toggle:hover {
    background: #18bf18;
    border: 1px solid #18bf18;
}
#signup-form-modal-2 {
    display: none;
}

/* WHAT A CUSTOMER ACCOUNT LEAVES OUT (16 Oct 2026, Martin), shown only while
   CUSTOMER is picked (public.js). A div, not a p: p here is line-height 2. */
.signup-cust-note {
    margin: -4px 0 14px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    color: #b8c0ca;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}
.toggle-btn-wrapper {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
/* The gap used to be an empty <div> </div> between the two buttons, padded
   0 10px. It is a flex container, so `gap` does the same job without a
   third child -- and the spacer only existed in one of the two panels, so
   the combined one had the buttons touching. */
/* CUSTOMER / CREATOR, as a segmented control rather than two buttons.
   19px was larger than the heading above it, and two heavily outlined pills
   read as two calls to action when only one of them is a choice you are
   making about yourself.

   #17addc is gone. It was the only colour on this panel in no palette this
   company has -- brandGuide lists exactly this kind of near-miss under open
   conflicts -- and the toggle disagreed with the submit button it sets the
   colour of. Both now take --theme-colour-main, so a theme change moves them
   together instead of leaving one behind.

   HOVER IS NOT SELECTION. The old rule painted :hover the same as .active,
   so pointing at CREATOR made it look chosen while CUSTOMER still was.

   EACH SEGMENT SAYS WHAT IT MEANS. The heading above used to read "Are you
   a CUSTOMER or a CREATOR?", which named the two buttons directly beneath
   it and so said everything twice -- and it spent the panel's only heading
   on the question, leaving the signup panel with no title at all while the
   login panel had one.

   The heading is now the title. The choice explains itself instead, because
   a segmented control with one segment already filled reads as a state
   rather than a question: the risk is not that nobody knows what the words
   mean, it is that nobody notices CUSTOMER was a choice they could change,
   fills the form and gets the wrong kind of account. A second line under
   each label makes it a question again without a sentence above it.

   "I'm buying" / "I'm selling" is vocabulary.md's own definition of the two
   words, so the hint teaches the word rather than replacing it -- Creator
   means nothing to someone who has never been here before. */
.modal-form-account-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-grow: 1;
    width: 40%;
    margin-bottom: 15px;
    padding: 9px 0;
    background: transparent!important;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    stroke: none;
    color: #98a1ad!important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    transition: background-color .14s, color .14s, border-color .14s;
}
.modal-form-account-toggle:hover {
    color: #e9edf2!important;
    border-color: rgba(255,255,255,.3);
}
.modal-form-account-toggle .toggle-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.1;
}
/* The hint is deliberately quiet and deliberately not italic: it is a
   definition, not an aside. It stays legible on the filled segment, where
   the background is --theme-colour-main or #2dc26b rather than the panel. */
.modal-form-account-toggle .toggle-hint {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.1;
    opacity: .72;
    text-transform: none;
}
.modal-form-account-toggle.modal-form-account-toggle-active {
    background: var(--theme-colour-main)!important;
    border: 1px solid var(--theme-colour-main)!important;
    color: #fff!important;
}
/* Creator keeps its own colour, which is the one thing the old design got
   right: the two account types are a real fork and reading as different is
   the point. Hover dropped here too -- see the note above. */
#modal-form-account-toggle-creator.modal-form-account-toggle-active,
#modal-form-account-toggle-creator-2.modal-form-account-toggle-active {
    background: #2dc26b!important;
    border: 1px solid #2dc26b!important;
    color: #fff!important;
}
/* ===================================================================
   THE AUTH PANEL'S FIELDS AND BUTTONS
   -------------------------------------------------------------------
   The inputs were Bootstrap's: WHITE, with grey borders, on a black
   panel. That single thing did more to make this look unfinished than
   any colour on it -- five white slabs stacked down the middle of a
   dark page.

   Scoped to the three wrappers rather than to .app-input, which is used
   on public forms all over the site and is not ours to restyle from
   here.
   =================================================================== */
#public-login-wrapper .form-control,
#public-signup-wrapper .form-control,
#public-signup-login-wrapper .form-control {
    height: 42px;
    padding: 10px 13px;
    background: #1c1c1c;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color: #e9edf2;
    font-size: 14.5px;
    box-shadow: none;
    transition: border-color .14s, box-shadow .14s;
    /* As wide as the button under it (2 Oct 2026). Bootstrap's .form-control
       width is not loaded on public pages, so these were a browser's default
       177px, sitting centred above a full-width button. */
    display: block;
    width: 100%;
    box-sizing: border-box;
}
#public-login-wrapper .form-control::placeholder,
#public-signup-wrapper .form-control::placeholder,
#public-signup-login-wrapper .form-control::placeholder {
    color: #6f7885;
}
#public-login-wrapper .form-control:focus,
#public-signup-wrapper .form-control:focus,
#public-signup-login-wrapper .form-control:focus {
    outline: none;
    border-color: var(--theme-colour-main);
    box-shadow: 0 0 0 3px rgba(59,130,246,.22);
}
/* The form groups were separated by <br> in the markup, which cannot be
   tuned. A margin does the same job and can be. */
#public-login-wrapper .form-group,
#public-signup-wrapper .form-group,
#public-signup-login-wrapper .form-group {
    margin-bottom: 10px;
}
#public-login-wrapper br,
#public-signup-wrapper br,
#public-signup-login-wrapper br {
    display: none;
}

/* "Or" was a bare word floating between the Google button and the fields.
   A rule either side makes it a divider, which is what it was trying to be. */
#public-login-wrapper .google_login_or,
#public-signup-wrapper .google_login_or,
#public-signup-login-wrapper .google_login_or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: #6f7885;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
#public-login-wrapper .google_login_or::before,
#public-signup-wrapper .google_login_or::before,
#public-signup-login-wrapper .google_login_or::after,
#public-login-wrapper .google_login_or::after,
#public-signup-wrapper .google_login_or::after,
#public-signup-login-wrapper .google_login_or::before {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.1);
}

/* The heading, which was 18px and the same weight as everything else. */
#public-login-wrapper h3,
#public-signup-wrapper h3,
#public-signup-login-wrapper h3 {
    font-size: 19px!important;
    font-weight: 900;
    letter-spacing: -.01em;
    margin: 0 0 16px;
}

/* THE LOGO'S GREEN, NOT BOOTSTRAP'S. The Login button carries .btn-success,
   which is #18bf18 -- a flat, slightly acid green that belongs to Bootstrap
   and to nothing here. The lockup SVG uses exactly three colours, #2dc26b,
   #3b82f6 and #2563eb, and the first of those is the green this product
   means. Sampled from themes/default/images/brand/lhq-lockup.svg rather
   than remembered, because two greens four points apart is how this file
   got into trouble the first time. */
#public-login-wrapper .btn-success,
#public-signup-wrapper .btn-success,
#public-signup-login-wrapper .btn-success {
    background-color: #2dc26b!important;
    border-color: #2dc26b!important;
    color: #fff!important;
}
#public-login-wrapper .btn-success:hover,
#public-login-wrapper .btn-success:focus,
#public-signup-wrapper .btn-success:hover,
#public-signup-wrapper .btn-success:focus,
#public-signup-login-wrapper .btn-success:hover,
#public-signup-login-wrapper .btn-success:focus {
    background-color: #3ad47a!important;
    border-color: #3ad47a!important;
    color: #fff!important;
}

/* The submit. Full width, because it is the only thing on the panel you
   are meant to press, and it was a 6px-padded Bootstrap default sitting
   in the middle looking like a cancel. */
#public-login-wrapper .btn-public-form,
#public-signup-wrapper .btn-public-form,
#public-signup-login-wrapper .btn-public-form,
#public-login-wrapper .actions .btn,
#public-signup-login-wrapper .actions .btn {
    display: block;
    width: 100%;
    padding: 12px 18px!important;
    border-radius: 10px!important;
    font-size: 15px;
    font-weight: 700;
}

/* THE GREY SLAB UNDER FORGOT PASSWORD was a spinner that never spins.
   .loader-login is 62px of reserved height for a loading indicator that
   public.js does not use -- it swaps the submit button's own icon for
   fa-spinner instead and never touches this div. Styled only in login.css
   under body.login-page, so on this panel it is unstyled, empty and tall.

   Hidden rather than deleted: the markup is in a shared template and other
   forms may still reach for it. */
#public-login-wrapper .loader,
#public-signup-wrapper .loader,
#public-signup-login-wrapper .loader {
    display: none!important;
}

/* And the message row under it held another 32px, from two causes. The
   wrapper had a line box -- whitespace at the panel's font-size -- which
   zeroing the font-size collapses; the span sets its own back when it
   appears. The rest was `min-height: 22px` on the global `.form-msg`
   (dashboard.css), which reserves a line on every form in the app so that
   an error appearing does not shift the fields under it.

   That reservation is right for a form on a page and wrong for this panel.
   The panel is `position: fixed` and centred by transform, so nothing below
   it can be pushed anywhere -- the only cost of reserving is that everyone
   who signs in without error pays 22px of empty panel for a message they
   never see. Collapsed here, scoped to the three wrappers, so the global
   keeps doing its job everywhere else.

   The colour goes with it: the global sets #cc0000, picked against a white
   form and nearly unreadable on #242424.

   Do not give the span a `display` here. It is hidden by
   `#js-msg-login-modal { display: none }` further up and revealed by
   public.js with .show(), which writes an inline display when it fires. A
   `display: block` in the rule below outranks that ID rule -- one ID plus a
   class beats one ID alone -- and the effect is that the panel opens with
   "Both username and password are required!" already showing in red, before
   the visitor has typed anything. That shipped for a few minutes on
   22 September. Size and spacing here, nothing that governs visibility. */
#public-login-wrapper .app-front-form-msg,
#public-signup-wrapper .app-front-form-msg,
#public-signup-login-wrapper .app-front-form-msg,
#public-login-wrapper .form-msg,
#public-signup-login-wrapper .form-msg {
    font-size: 0;
    margin: 0;
    min-height: 0;
    color: #ed5565;
}
#public-login-wrapper .app-front-form-msg span,
#public-signup-wrapper .app-front-form-msg span,
#public-signup-login-wrapper .app-front-form-msg span,
#public-login-wrapper .form-msg span,
#public-signup-login-wrapper .form-msg span {
    font-size: 13px;
    margin-top: 10px;
}

/* The forgot link sat tight under the button with nothing after it. */
#public-login-wrapper .forgot-link,
#public-signup-login-wrapper .forgot-link {
    margin-top: 2px;
    font-size: 13px;
}

/* The T&C line is small print and was competing with the fields. */
#public-signup-wrapper .form-group p,
#public-signup-login-wrapper .form-group p {
    font-size: 12px;
    color: #6f7885;
    margin: 6px 0 12px;
}

.signup-form-modal .btn-public-form {
  border-color: var(--theme-colour-main)!important;
}
.signup-form-modal .btn-public-form:hover {
  border-color: var(--theme-colour-link-hover)!important;
}
.signup-form-modal .btn-public-form.creator {
  background-color: #2dc26b!important;
  border-color: #2dc26b!important;
}
.signup-form-modal .btn-public-form.creator:hover {
  background-color: var(--theme-colour-main)!important;
  border-color: var(--theme-colour-main)!important;
}

.why-we-care-overlay {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9997;
}
.why-we-care-modal {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    height: 100%;
    max-height: 100%;
    overflow-x: auto;
    z-index: 9998;
}
.why-we-care-overlay-close {
    display: none;
    opacity: 0;
    position: fixed;
    top: 10px;
    right: 15px;
    padding: 0 13px;
    font-size: 32px;
    font-weight: bold;
    color: red;
    background: #000;
    border-radius: 9px;
    cursor: pointer;
    z-index: 9999;
}

#ai-helper-widget-start-business {
    min-height:640px;
    height:auto !important;
}

/* Google Sign In Button */
/* SIGN IN WITH LINKEDIN, DISCORD, TWITCH (15 Oct 2026): under Google's button,
   in its shape and colours, so they read as one set. helpers\SocialSignIn. */
.lhq-soc {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 100%;
   height: 40px;
   margin: 8px 0 0;
   padding: 0 12px;
   box-sizing: border-box;
   border: 1px solid #8e918f;
   border-radius: 4px;
   background: #131314;
   color: #e3e3e3;
   font-family: 'Roboto', arial, sans-serif;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: .25px;
   text-decoration: none;
}
.lhq-soc:hover,
.lhq-soc:focus {
   background: #1f2021;
   color: #fff;
   text-decoration: none;
}
.lhq-soc:focus-visible {
   outline: 2px solid #2563eb;
   outline-offset: 2px;
}
.lhq-soc .lhq-soc-i {
   display: inline-flex;
   width: 20px;
   height: 20px;
}
.lhq-soc .lhq-soc-i svg {
   width: 20px;
   height: 20px;
}
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: #131314;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #e3e3e3;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
  border-color: #8e918f;
  width: 100%;
  margin: 15px 0;
}
.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 10px;
  min-width: 20px;
  width: 20px;
}
.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}
.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 0;
  flex-grow: 0;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.gsi-material-button:disabled {
  cursor: default;
  background-color: #13131461;
  border-color: #8e918f1f;
}
.gsi-material-button:disabled .gsi-material-button-state {
  background-color: #e3e3e31f;
}
.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}
.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}
.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: white;
  opacity: 12%;
}
.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}
.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: white;
  opacity: 8%;
}
.google_login_or {
  margin-bottom: 15px;
  display: block;
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
}
.google-login-creator {
    display: none;
}

@media screen and (max-width: 500px) {
    #ai-helper-widget-start-business {
        min-height:430px;
    }
}

/* ---------------------------------------------------------------------------
   THE STOREFRONT MENU
   ---------------------------------------------------------------------------
   This panel is the storefront's only navigation, and until now it had no rules
   that placed it. That was a regression with a traceable cause: the flyout used
   to be styled in dashboard.css, which reached a public page whenever the Pages
   module drew one -- the front page included. When the app's own copy of the
   flyout was removed from top_bar.tpl, its eighteen rules went with it, and the
   one that mattered went too:

       .student-menu-flyout { position: fixed; left: -400px; }

   That `left` was the only thing hiding it. public.css had kept the cosmetics
   (a hover colour, a margin) but nothing structural, so with the offset gone the
   panel rendered as what it actually is in the markup -- a static block of links
   sitting between the bar and the hero, pushing the page down by ~280px. On a
   phone it showed list bullets and default-blue links.

   It is rebuilt here rather than restored, because the old version was a black
   slab on a teal bar, and because two of its habits are worth not repeating.

   ONE PANEL AT EVERY WIDTH, not an inline bar on desktop. {$menu} is filtered by
   user_group in PHP, so this same list is four items to a visitor (Home, Sign Up,
   Log In, Contact Us) and seven to a signed-in learner (My Offers, My
   Subscriptions, My Product Purchases, FAQ's, Profile, Logout, Become a Creator).
   Seven inline items do not fit beside a centred logo and the two right-hand
   buttons, and a nav that fits when logged out and overflows when logged in is
   worse than one that never tries. A panel is the same shape either way.

   TRANSFORM, NOT `left`. The old rule animated `left` from -400px, which lays out
   and paints every frame. This translates instead, and the panel's resting
   position is off-canvas by its own width rather than by a guessed 400.

   VIEWPORT-ANCHORED. nav.navbar is `position: fixed` above 429px and
   `position: relative` below it (see the max-width: 429px block above). A panel
   measured from the bar would therefore need two different tops. It is measured
   from the viewport instead and carries its own header, so the bar's own
   positioning stops mattering. */

.student-menu-flyout {
    position: fixed;
    /* UNDER THE BAR, NOT OVER IT.

       This was top:0 with a note explaining that the panel carried its own
       header precisely so it could cover the bar, rather than depend on the
       height of "a bar whose height and positioning both change with width".
       The constraint was real; the conclusion was the expensive one. Covering
       the bar hides the hamburger, and the hamburger changing state is the
       only thing on screen that says the menu is open -- which is exactly the
       feedback a logged-in person already gets from the app's rail, opening
       at top:60px underneath its own bar.

       So the height is measured instead of assumed. measurePublicBar() in
       dashboard.js sets --public-bar-h from the bar's own bounding box, on
       load and on resize. The fallback is this install's current 65px, so a
       stylesheet arriving before the script is wrong by a pixel or two rather
       than by the whole bar. */
    top: var(--public-bar-h, 65px);
    left: 0;
    bottom: 0;
    /* Above nav.navbar, which is z-index 99999 -- still, because the panel
       must clear everything else on the page. It simply starts lower. */
    z-index: 100001;
    width: 300px;
    max-width: 86vw;
    margin: 0;
    padding: 0;
    background: #002230;
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 2px 0 26px rgba(0,0,0,.45);
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.student-menu-flyout.flyout-open {
    transform: translateX(0);
}
/* body.courses had its own -15px nudge when this was in the flow. It is not in
   the flow any more, and a margin on a fixed panel would just push it off line. */
body.courses .student-menu-flyout,
.student-menu-flyout {
    margin-top: 0;
}

/* The panel's own header. It exists so the panel can be anchored to the viewport
   rather than to a bar whose height and positioning both change with width. */
/* THE PANEL'S OWN HEADER IS GONE, and it goes with the reason it existed.
   It carried a "Menu" title and a close button because the panel covered the
   bar and there was nothing else to close it with. The panel now opens
   beneath the bar, so the hamburger is visible, lit, and toggles -- a second
   bar saying "Menu" directly under the real one is a row of chrome repeating
   what is immediately above it.

   Closing still has three ways out: the hamburger, the backdrop, and Escape,
   all bound in dashboard.js and none of them dependent on this element. */
.student-menu-head {
    display: none;
}
.student-menu-head-unused {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 61px;
    padding: 0 10px 0 22px;
    background: #003142;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.student-menu-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.student-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 8px;
    color: rgba(255,255,255,.65);
    font-size: 17px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.student-menu-close:hover,
.student-menu-close:focus {
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
}

/* The backdrop is a sibling that follows the panel, so it can be opened by the
   same class the existing handler already toggles -- no second class to keep in
   step. It sits under the panel on z-index, not on DOM order. */
.student-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: rgba(0,14,20,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}
.student-menu-flyout.flyout-open ~ .student-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* The list. `padding-left: 0` and the list-style reset are not tidying: without
   them a phone showed real bullets, because nothing above ever restyled this ul. */
.student-menu-flyout .student-menu-list {
    flex: 1 1 auto;
    margin: 0;
    padding: 10px 0 24px;
    list-style: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.student-menu-flyout li.standard-menu-item,
.student-menu-flyout .student-menu-list > li {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s;
}

/* Two of these links carry .btn-public-signup and .btn-public-login -- the same
   classes as the pill buttons in the bar -- so they were inheriting
   `background:#000!important; border:2px solid #fff!important; border-radius:15px`
   from the button rules further up. On an inline element a pill border draws only
   its two end arcs, which is where the stray "(" and ")" on either side of Sign Up
   came from. They are links here, not buttons, so the button skin is taken off.
   `!important` is required to reach the source declarations, not preferred. */
.student-menu-flyout .student-menu-list a,
.student-menu-flyout .student-menu-list a.btn-public-signup,
.student-menu-flyout .student-menu-list a.btn-public-login {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 22px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 15px !important;
    line-height: 1.3;
    text-decoration: none;
    transition: color .15s;
}
.student-menu-flyout .student-menu-list a i {
    width: 20px;
    margin-right: 12px;
    font-size: 15px !important;
    text-align: center;
    color: rgba(255,255,255,.45);
    transition: color .15s;
}
.student-menu-flyout .student-menu-list .nav-label {
    display: block !important;
}

/* Hover and focus. The rule this replaces painted the whole row #2f77db -- a blue
   that appears nowhere else on the storefront, whose bar and footer are #003142
   and whose calls to action are #2dc26b. The accent is the green. */
.student-menu-flyout li.standard-menu-item:hover,
.student-menu-flyout li.standard-menu-item:focus-within,
.student-menu-flyout .student-menu-list > li:hover {
    background: rgba(45,194,107,.12);
    border-left-color: #2dc26b;
}
.student-menu-flyout li.standard-menu-item:hover > a,
.student-menu-flyout li.standard-menu-item:focus-within > a,
.student-menu-flyout .student-menu-list > li:hover > a {
    color: #fff !important;
}
.student-menu-flyout li.standard-menu-item:hover > a i,
.student-menu-flyout .student-menu-list > li:hover > a i {
    color: #2dc26b;
}

/* "Become a Creator" -- the one row that is a call to action rather than a
   destination, and the reason a learner opens this menu at all. It was a flat
   green block before; it reads as a button now without leaving the list. */
.student-menu-flyout li.upgrade {
    margin: 14px 16px 4px;
    border-left: 0;
    border-radius: 10px;
    background: #2dc26b;
}
.student-menu-flyout li.upgrade > a {
    justify-content: center;
    min-height: 44px;
    padding: 11px 16px !important;
    color: #fff !important;
    font-weight: 700;
}
.student-menu-flyout li.upgrade > a i {
    color: rgba(255,255,255,.85);
}
.student-menu-flyout li.upgrade:hover {
    background: #3ad47a;
    border-left: 0;
}
.student-menu-flyout li.upgrade:hover > a,
.student-menu-flyout li.upgrade:hover > a i {
    color: #fff !important;
}

/* Second-level rows. These were `display: none` with nothing on the storefront to
   open them, so any child item was unreachable. metisMenu is initialised on this
   list now (see dashboard.js); these are its open and closed states. */
.student-menu-flyout .nav-second-level {
    margin: 0;
    padding: 0;
    list-style: none;
    background: rgba(0,0,0,.22);
}
.student-menu-flyout .nav-second-level li a {
    min-height: 42px;
    padding: 10px 22px 10px 54px !important;
    font-size: 14px;
    color: rgba(255,255,255,.7) !important;
}
.student-menu-flyout .nav-second-level li a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.05) !important;
}
.student-menu-flyout .student-menu-list a .arrow {
    margin-left: auto;
    font-size: 12px;
    color: rgba(255,255,255,.35);
}

/* The button that opens it. Square, 40px, matching the close inside the panel --
   and 40px because below 579px this was 3px 6px of padding around a 14px glyph,
   which is a tap target of about 26px against a 44px guideline. */
.top-student-menu {
    display: inline-block !important;
    margin: 0 0 0 15px;
    padding: 0 !important;
    vertical-align: middle;
}
/* THE PUBLIC SIDE HAD ITS OWN GREEN, and this file was where it lived:
   #00bf63 on the menu button, the Sign Up chip and the flyout's hover, against
   #2dc26b everywhere in the app. Four points apart -- far enough to read as a
   mistake when the two met, close enough that nobody caught it while they never
   did. brandGuide.html lists it under open conflicts and rules on it: "The app
   is already on the right one; the storefront is the outlier."

   They met on 22 September, when the marketplace got a menu item and a
   logged-in creator saw the public bar for the first time. Martin: "Why does
   the top bar look different and have green colors in the hamburger menu."

   Eight values changed here and nowhere else in the repo -- six hex, one
   rgba() of the same colour that a hex search misses, and the #00d16d hover,
   now --green-lit #3ad47a. Four uses of #2dc26b were already in this file,
   which is what made the split visible inside one stylesheet. */
/* THE SAME TOGGLE THE APP HAS, and deliberately the same rule: OUTLINE
   WHILE THE MENU IS AWAY, FILLED WHILE IT IS HERE. chrome.css says it in
   those words for the creator and learner rails; this is the public bar
   catching up, so a person who signs up does not meet a third behaviour for
   the same control.

   BLUE, NOT GREEN. Green on this platform means go and price -- a menu
   button is neither, and #2dc26b sitting beside the green Sign Up button
   made two different promises in one bar. #2563eb is the app's toggle
   colour and is one of the three in the logo.

   body.menu-open is set by openStudentMenu() in dashboard.js, which already
   existed, so this needs no script change. */
.top-student-menu .student-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 !important;
    min-height: 0;
    background-color: transparent;
    border: 1px solid rgba(91,147,255,.55);
    border-radius: 9px;
    color: #5b93ff;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.top-student-menu .student-nav:hover,
.top-student-menu .student-nav:focus {
    background-color: rgba(37,99,235,.20);
    border-color: rgba(91,147,255,.85);
    color: #fff;
}
/* Menu here: filled. */
body.menu-open .top-student-menu .student-nav {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
body.menu-open .top-student-menu .student-nav:hover,
body.menu-open .top-student-menu .student-nav:focus {
    background-color: #1d4fd7;
    border-color: #1d4fd7;
    color: #fff;
}
/* No lift on a touch screen: there is no hover there, so the transform would
   stick to whatever was tapped last. */
@media (hover: hover) {
    .top-student-menu .student-nav:hover {
        transform: translateY(-1px);
    }
}

/* The page behind the panel should not scroll while it is open. */
body.menu-open {
    overflow: hidden;
}

/* The bar's right-hand cluster. Below 500px these collapse to bare icons, but
   with no gap between them and no tap target around them. */
@media (max-width: 500px) {
    .top-button-menu {
        display: flex;
        align-items: center;
        gap: 0;
        margin-top: 0 !important;
        margin-right: 4px;
    }
    .top-button-menu > a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 9px !important;
    }
    .top-button-menu > a i {
        margin: 0;
        font-size: 17px;
    }
}

/* nav.navbar is `display: flex` with `align-items: normal`, so a flex item that
   does not set its own alignment stretches the full 65px and puts its contents at
   the top. That is why the menu button sat against the bar's top edge while the
   right-hand icons -- which are inside their own centred flex box -- sat correctly
   on the line. This centres the button in its own item box instead of changing the
   bar's alignment, which the desktop search form is positioned against. */
.top-student-menu {
    display: inline-flex !important;
    align-items: center;
}
/* HIDDEN FOR A SIGNED-OUT VISITOR, and it has to be a class rather than
   the inline `style` the cluster next to it uses, because three separate
   rules in this file set this element's display with !important and an
   inline style without !important loses to every one of them. The first
   attempt was inline and the hamburger simply stayed on screen.

   Output.class.php decides which viewer gets the class; the reasoning for
   hiding it at all -- and for keeping it when signed in -- is there. */
.top-student-menu.bar-menu-hidden {
    display: none !important;
}

/* The logo is centred on the bar by logo.css: `position: absolute; left: 50%;
   top: 0; bottom: 0; transform: translateX(-50%); margin: 0`. The margins below
   were written when it still sat in the flow, and they are !important, so they
   outlive that: on a phone they were a 6px drop and a 15px shove left of a logo
   that is otherwise dead centre. Zeroed at the same weight, and later in the file
   so they win on order rather than on a specificity bump. */
@media (max-width: 500px) {
    nav.navbar .img-logo-a {
        margin: 0 !important;
    }
}

/* The right-hand icons. Below 500px the buttons drop their labels and the rules
   above strip their skin -- but .btn-public-signup is restyled again further down
   the file with `background:#000!important; border:2px solid #fff!important`, which
   is later and therefore wins, so Sign Up kept a black chip with a white outline
   while Log In next to it was a bare glyph. Two buttons of equal weight, drawn
   differently for no reason anyone chose.

   Given a choice about which one to emphasise: Sign Up is the storefront's whole
   purpose, so it is the filled one, in the same green as the menu button on the
   other side of the bar. Log In is quiet next to it. (Search was the third icon
   here and shared Log In's quiet treatment; it is gone -- see top_bar.tpl.) */
@media (max-width: 500px) {
    /* THE TWO COLOURS SURVIVE THE BREAKPOINT. This block used to fill
       Sign Up green and leave Log In a white glyph, which is the
       opposite emphasis to the desktop bar above, where Log In is the
       filled green one. The same two controls disagreed about which of
       them mattered depending on how wide the window was.

       They now carry the same hues they carry everywhere else: Log In
       green, Sign Up blue. At this size both are 40px glyphs, so the
       filled one is Sign Up -- a filled chip is easier to hit and to
       find than an outline, and the outline treatment does not survive
       being shrunk to an icon anyway. */
    .top-button-menu > a.btn-public-login {
        background: none !important;
        border: 0 !important;
        color: #2dc26b !important;
    }
    /* No sweep at this size. The button is a 40px glyph with no outline
       for it to run inside, and there is no hover on a phone to start
       it -- it would only ever fire as a flash on tap. */
    .top-button-menu > a.btn-public-login::before,
    .top-button-menu > a.btn-public-login::after {
        display: none;
    }
    .top-button-menu > a.btn-public-signup {
        background: #2563eb !important;
        border: 0 !important;
        color: #fff !important;
    }
    .top-button-menu > a.btn-public-login i {
        color: #2dc26b !important;
    }
    .top-button-menu > a.btn-public-signup i {
        color: #fff !important;
    }
    .top-button-menu > a:hover {
        opacity: .85;
    }
}

/* THE 419px BLOCK THAT STOOD HERE IS GONE, and its arithmetic is now the whole
   bar's rather than one breakpoint's.

   It dropped the search magnifier below 419 because the centred logo and three
   icons could not both have the room: the menu button takes 55px on the left,
   three 40px icons and a 4px margin take 124 on the right, and a centred 150px
   wordmark therefore needs 2 x 124 + 150 = 398px of bar before something touches.
   At 320 the magnifier landed on top of "HQ".

   Search is now gone at every width, so the two icons that remain need
   2 x 84 + 150 = 318px -- clear at 320 and 80px in hand at 400, with no rule
   needed to make it so. Should search ever come back, this is the sum to redo. */

/* Logout is not a destination like the rows above it, and it was sitting directly
   against Become a Creator -- an account action butted up against the one call to
   action in the list. A hairline separates the two kinds of row. The class comes
   from the module name, the same way Courses2 and Users7 do on their own rows. */
.student-menu-flyout li.standard-menu-item.Logout {
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.09);
}

/* Logout hovers red here too. The storefront's menu is a different object from
   the app's rail -- this one is CSS where the rail's is the spotlight in
   chrome.js -- but it holds the same row and it should say the same thing about
   it. #ed5565 is main.css's danger colour; the green above is for the rows you
   cannot regret. */
.student-menu-flyout li.standard-menu-item.Logout:hover,
.student-menu-flyout li.standard-menu-item.Logout:focus-within {
    background: rgba(237,85,101,.12);
    border-left-color: #ed5565;
}
.student-menu-flyout li.standard-menu-item.Logout:hover > a,
.student-menu-flyout li.standard-menu-item.Logout:focus-within > a,
.student-menu-flyout li.standard-menu-item.Logout:hover > a i {
    color: #ed5565 !important;
}

/* ===================================================================
   THE CONTACT FORM'S FIELDS
   -------------------------------------------------------------------
   Five white boxes stacked down a #1d1d1d page, with dark grey text in
   them -- Bootstrap's .form-control defaults, never restyled, on a page
   that went dark around them. The same thing the auth modal had this
   morning and the same answer: the panel colour, a hairline border and
   the text colour the rest of the product uses.

   SCOPED TO .contact-form, NOT TO .app-input. That class is on public
   forms all over the site, including inside landing pages -- which a
   creator designs, and which may well be light. Dark fields injected
   into somebody's pale landing page would be a worse bug than the one
   being fixed. Anywhere else with this problem wants the same treatment
   and its own look first.

   THE !important IS FOR A STALE INLINE COLOUR. The first field carries
   `style="border-color: rgb(204, 0, 0)"` in the markup the server
   sends -- page content, saved that way in the builder, not something
   the code does -- and an inline style cannot be answered any other
   way. The validator no longer writes inline colours (see
   forms_public.js), so nothing else is being fought here.
   =================================================================== */
.contact-form .form-control,
.contact-form .app-input {
    background-color: #1c1c1c !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    color: #e9edf2 !important;
    height: auto;
    padding: 11px 13px;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.contact-form .form-control::placeholder,
.contact-form .app-input::placeholder {
    color: #6f7885;
    opacity: 1;
}
.contact-form .form-control:focus,
.contact-form .app-input:focus {
    border-color: #2dc26b !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(45,194,107,.18);
}
/* The flag the validator raises now. --danger, not the #cc0000 it used
   to write inline, which is unreadable on a dark field. */
.contact-form .form-control.field-invalid,
.contact-form .app-input.field-invalid {
    border-color: #ed5565 !important;
    box-shadow: 0 0 0 3px rgba(237,85,101,.16);
}

/* THE "18 OR OVER" BOX (27 Sep 2026, Neil) -- on every signup form, where the
   line "By signing up you accept our T&C's" used to be. A row: the box, then
   the sentence, with the whole label clickable. Inherits the form's colour,
   so it reads on the light modal and on a creator's dark page alike. */
.app-front-form .signup-adult-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
.app-front-form .signup-adult-label input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: #2dc26b;
    cursor: pointer;
}
.app-front-form .signup-adult-label a {
    text-decoration: underline;
}

/* ---- TWO-STEP SIGN-IN: the code view of the sign-in box (2 Oct 2026) ------
   Output::authViews draws it while a sign-in waits for its code. One box
   for the six digits (or an app user's backup code), spaced like a code. */
#public-login-wrapper .ts-ico {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45,194,107,.12);
    color: #3ad47a;
}
#public-login-wrapper .ts-ico svg { width: 22px; height: 22px; }
#public-login-wrapper .ts-view p b { color: #fff; }
#public-login-wrapper .form-control.ts-code {
    height: 54px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .35em;
}
#public-login-wrapper .form-control.ts-code::placeholder {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
}
#public-login-wrapper .ts-trust {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #1c1c1c;
    border: 1px solid rgba(255,255,255,.08);
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    color: #c9d0d8;
    cursor: pointer;
}
#public-login-wrapper .ts-trust input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; accent-color: #2563eb; }
#public-login-wrapper .ts-trust small { display: block; color: #6f7885; font-size: 12px; }
#public-login-wrapper .ts-view .btn-success { width: 100%; }
#public-login-wrapper .ts-links { display: flex; justify-content: center; gap: 16px; margin-top: 4px; }
#public-login-wrapper .ts-links form { margin: 0; }
#public-login-wrapper .ts-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: color-mix(in srgb, #2563eb 55%, white);
    text-decoration: none;
    cursor: pointer;
}
#public-login-wrapper .ts-link:hover { text-decoration: underline; }
#public-login-wrapper .ts-note { margin: 14px 0 0; font-size: 12px; color: #6f7885; }

/* NO GAP ABOVE A CREATOR'S STORE (3 Oct 2026, Martin: "there's space before
   the page actually starts"). dashboard.css gives every body 61px at the top,
   !important, for the old fixed bar; a store has no bar of ours above it
   (top_bar_store.tpl), so the 61px was a dark band over the creator's page.
   body.lhq-bare is set by Output for exactly those pages; body.v2 does the
   same for the app (v2.css). */
body.lhq-bare { margin-top: 0 !important; }

/* reCAPTCHA'S BADGE, HIDDEN (3 Oct 2026, Martin). Google allows it when the
   form says so instead, which the sign-in and sign-up boxes now do (.rc-note,
   footer_public.tpl). The script itself only loads when one of those forms is
   started -- lhqCaptcha in public.js. */
.grecaptcha-badge { visibility: hidden !important; }
.rc-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.45; color: #6f7885; text-align: center; }
.rc-note a { color: #98a1ad; text-decoration: underline; }
/**
 *    © Copyright 2016 Variation Design Consultants Limited | copyright@variationdesign.co.uk
 *    All rights reserved.
 *
 *    The account's brand colours, published as CSS custom properties.
 *
 *    WHY THIS FILE EXISTS. The platform has always had per-account colours -- an
 *    account sets them in Settings and they land in the session as main_colour,
 *    link_colour and the rest. But the only way to USE one has been the [$TOKEN]
 *    substitution that styles/css/dynamic.php and public_dynamic.php run over the
 *    stylesheets they concatenate. A stylesheet that is not in one of those bundles
 *    never sees a brand colour at all.
 *
 *    Most module stylesheets are not in them. AjaxStylesJS::returnStyles() emits a
 *    plain <link rel="stylesheet" href="..."> straight to the file, so the browser
 *    fetches it from disk with no PHP anywhere near it -- which is why
 *    modules/Courses/styles/courses.css contains hardcoded #2563eb and #3078db and
 *    could not do otherwise.
 *
 *    So the tokens are resolved ONCE here, into custom properties, and after that
 *    any stylesheet in the platform can use var(--lhq-brand) with no parsing at all.
 *    Custom properties are inherited and resolved at use time, so it does not matter
 *    that this file loads before or after the one using them.
 *
 *    ALWAYS PASS A FALLBACK. var(--lhq-brand, #2563eb), never a bare var().
 *
 *    This is not defensive habit, it is a real case: Styles::saveStylesFiles() seeds
 *    every one of these to an empty string and only fills them if the account has a
 *    settings record. An account without one emits `--lhq-brand: ;`, which is a
 *    valid but EMPTY custom property -- and a bare var() referring to it makes the
 *    whole declaration invalid at computed-value time, which is to say the colour
 *    does not fall back to anything, it disappears. A fallback in the var() is what
 *    turns that into the platform default instead of a missing rule.
 *
 *    HOW IT IS LOADED. Appended by both styles/css/dynamic.php and
 *    styles/css/public_dynamic.php, the same way logo.css is, so the variables exist
 *    on logged-in screens and on the public storefront alike.
 */

:root {
    /* The account's primary colour. Most of the platform's own chrome uses a fixed
       cobalt rather than this; the two are different things and should stay so --
       this is the CREATOR's colour, for surfaces that represent them. */
    --lhq-brand: #3b82f6;
    --lhq-brand-light: #525252;

    --lhq-link: #0076d6;
    --lhq-link-hover: #2dc26b;

    --lhq-text: #ffffff;
    --lhq-bg: #1c1c1c;

    /* A family NAME, not a stack -- the theme stores one face. Anything using it
       should supply its own fallbacks after it:
       font-family: var(--lhq-font, open_sansregular), Helvetica, Arial, sans-serif; */
    --lhq-font: Lato Regular;
}

/* ===================================================================
   THE FULL-WIDTH PAGE WRAPPER
   -------------------------------------------------------------------
   Pages.class.php gives the course and marketplace pages a wrapper
   that runs the full width instead of Bootstrap's fixed .container.
   Its padding used to be an inline style on that div, which meant no
   media query could answer it -- on a 375px phone it held 20px a side
   that no breakpoint could reach.

   IT LIVES IN brand.css BECAUSE BOTH BUNDLES LOAD IT. The first
   version of this rule went into public.css, and public.css is only in
   the public bundle -- so a signed-in viewer, who gets the app bundle
   and the app chrome, lost the 20px entirely and the marketplace ran
   edge to edge. brand.css and logo.css are the only two sheets in both
   styles/css/dynamic.php and styles/css/public_dynamic.php.

   The row reset below is not tidying either. Signed OUT the Bootstrap
   row sits flush and its column's padding is the gutter; signed IN the
   row carries its -15 margins, so the same column padding nets to
   nothing and the cards touched the glass. Zeroing the margins makes
   the two states agree on one 16px gutter instead of 16 and 0.
   =================================================================== */
.container-content-full {
    padding: 0 20px;
}
@media (max-width: 600px) {
    .container-content-full {
        padding-left: 8px;
        padding-right: 8px;
    }
    .container-content-full > .row {
        margin-left: 0;
        margin-right: 0;
    }
    .container-content-full > .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ===================================================================
   THE COOKIE BAR
   -------------------------------------------------------------------
   It was three declarations of inline <style>, duplicated in
   header.tpl and header_public.tpl, and the two copies had already
   drifted -- the public one styles a Reject button the app one has
   never had. Both are gone; this is the one copy, in the one sheet
   both bundles load.

   NOTHING IN IT WAS A BRAND COLOUR. Accept was #090, a dark green in
   no palette this company has and nowhere near --green #2dc26b.
   Reject was #cc0000, which is --danger's job, and DECLINING COOKIES
   IS NOT AN ERROR -- it is one of the two answers to a fair question.
   Painting it the colour that means "something has gone wrong"
   everywhere else in the product is the same mistake as the Log In
   hover that turned red.

   So: Accept is the green one because it is what the button does, and
   Reject is a quiet outline. Equal size, equal weight, no dark
   pattern -- the one that keeps your data is not harder to press than
   the one that does not.

   A CARD, NOT A STRIP. Fixed full-width bar, centred text and two
   buttons wrapping onto their own line is what made it read as
   boilerplate. On a wide screen it is a panel in the corner with the
   text left and the buttons right; on a phone it is a sheet across the
   bottom with the buttons side by side under the text, where thumbs
   are.
   =================================================================== */
#cookieConsent {
    display: none;                 /* the plugin turns this on */
    position: fixed;
    z-index: 65000;
    right: 16px;
    bottom: 16px;
    left: auto;
    width: auto;
    max-width: 440px;
    box-sizing: border-box;
    padding: 16px 18px;
    background: #242424;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0,0,0,.5);
    color: #c8ced6;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}
#cookieConsent .cookieText {
    margin: 0;
    color: #c8ced6;
    font-size: 13px;
    line-height: 1.5;
}
/* The buttons get their own row, and share it. Equal width on a phone so
   neither answer is the easier one to hit -- the one that keeps your data
   is not the harder one to press. */
#cookieConsent .cookieActions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
#cookieConsent button {
    appearance: none;
    margin: 0;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
#cookieConsent button.cookieAccept {
    background: #2dc26b;
    border: 1px solid #2dc26b;
    color: #fff;
}
#cookieConsent button.cookieAccept:hover,
#cookieConsent button.cookieAccept:focus-visible {
    background: #3ad47a;
    border-color: #3ad47a;
}
/* Quiet, not red. See the note above. */
#cookieConsent button.cookieReject {
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    color: #98a1ad;
}
#cookieConsent button.cookieReject:hover,
#cookieConsent button.cookieReject:focus-visible {
    border-color: rgba(255,255,255,.34);
    color: #e9edf2;
}
/* A sheet on a phone. Corner-to-corner at the bottom rather than a
   floating card, because a card with 16px of page showing either side
   of it on a 375px screen is just a strip with rounded ends. */
@media (max-width: 600px) {
    #cookieConsent {
        right: 0;
        left: 0;
        bottom: 0;
        max-width: none;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: 14px 14px 0 0;
    }
    /* Equal halves of the row, by growing rather than by a width
       calculation -- the flex gap already owns the 8px between them and
       a calc that also subtracts it would be the same number written
       twice, in two places, waiting to disagree. */
    #cookieConsent .cookieActions > button {
        flex: 1 1 0;
    }
}
/**
 *    © Copyright 2016 Variation Design Consultants Limited | copyright@variationdesign.co.uk
 *    All rights reserved.
 *
 *    The logo treatment, in its own file so that it loads on EVERY surface.
 *
 *    WHY THIS IS NOT IN dashboard.css ANY MORE. It was, and that is precisely why the
 *    climber never ran on the public site. dashboard.css is registered by four modules
 *    only -- Dashboard, Landing, Pages and PageBuilder -- so whether these rules reached
 *    a given page depended on which module happened to draw it. The public home page got
 *    them (Pages registers dashboard.css into the PUBLIC bundle, which is easy to miss);
 *    a page drawn by any other module did not.
 *
 *    The same reasoning later moved the top bar and the side menu out of dashboard.css
 *    into chrome.css, which is why the line references below name that file rather than
 *    the one these rules were originally lifted from.
 *
 *    That matters more than a missing animation. The brand lockup is INLINED as an <svg>
 *    by Output.class.php, and lhq-lockup.svg carries a viewBox and no width or height --
 *    deliberately, so it scales. An inline SVG sized that way and given no CSS height
 *    fills its container: measured at 1260x218 in a 1306px bar, against the 32px it is
 *    meant to be. So the one rule that MUST always be present is the height below. The
 *    animation is the nice part; the sizing is the load-bearing part.
 *
 *    HOW IT IS LOADED. Appended by styles/css/dynamic.php and styles/css/public_dynamic.php
 *    after every other stylesheet those bundles emit, and before the theme's custom_css so
 *    an account can still override it. Last position is not cosmetic: chrome.css's
 *    own .img-logo-a rule (the one under its "Sidebar" heading)
 *    sets .img-logo-a { width: 160px } and this file sets width: auto at equal
 *    specificity, so whichever comes second wins. It has to be this one.
 */

/* ---------------------------------------------------------------------------
   The logo, on hover and while the app is busy: a ball falling down the steps.

   TWO TREATMENTS, because the logo is whatever the account uploaded.

   A RASTER is one flat rectangle. You can move it; you cannot move anything inside
   it. So jpg, png and gif logos get a band of light travelling across on a 105deg
   angle, up as well as across, plus a small lift. It works on artwork we know
   nothing about and asks nothing of it.

   AN SVG is inlined by Output.class.php rather than sent as a src, because an <img>
   pointing at an SVG is a sealed document: page CSS cannot reach inside it and it
   takes no pointer events, so hovering the anchor can never drive anything within
   the drawing. Inlined, the parts are addressable, and the brand lockup carries a
   ball and three lights.

   THE BALL (3 Oct 2026, Martin, replacing the climber that went UP the stairs):
   it falls onto the top step, bounces down one, two, three, drops through the
   floor to the left of the bottom step, and the next one is already falling in
   at the top; each step lights as the ball lands on it. Its rules are in the
   GENERATED block further down, written with the lockup itself by
   Planning/steps/lhq-logo-build.js from a physics simulation, so the keyframes
   are sampled parabolas rather than hand-placed easings. Change it there.
   --------------------------------------------------------------------------- */
/* THE BAR IS WHAT THE LOGO IS CENTRED IN, so the bar has to say so (29 Sep
   2026, Martin: the logo "appearing oddly on certain pages"). The rule below
   is absolute with top:0 and bottom:0, and relied on Bootstrap's
   `.navbar { position: relative }` to make the bar its box. A public page
   without Bootstrap -- Privacy, Help -- left the bar static, so the anchor
   stretched down the whole page and drew the logo in the middle of it,
   over the content. Said here, next to the rule that needs it. */
nav.navbar:has(> .img-logo-a) {
    position: relative;
}
.img-logo-a {
    /* CENTRED ON THE BAR, at every width.

       Absolute rather than in flow, because the two sides are not the same
       size -- the hamburger is about 63px and the links on the right 124 to
       218 depending on who is looking -- so an in-flow logo sits visibly right
       of centre and moves as the right-hand side changes. Taking it out of the
       flow means the bar centres it and neither neighbour has a vote.

       Nothing is in the middle to collide with: the bar holds the hamburger,
       this, and the links. It used to hold .courses-search-top-bar too, which
       was display:none at every width and only ever shown by the mobile toggle,
       as a drawer beneath the bar rather than inside it -- that is gone now, so
       there is one less thing in the middle than when this was measured at 768,
       800, 900, 1100 and 1400 and the gap was never less than 340px. */
    position: absolute;
    left: 50%;
    /* AND vertically -- by spanning the bar rather than by a percentage.

       left:50% with a translateX centred it across the bar and left it wherever
       the flow had put it down the bar: measured on a phone, the bar centre is
       32.5 and the logo sat at 38. `top: 50%` then made it worse, not better,
       landing at 42.5 -- the percentage was resolving against a containing
       block 85px tall rather than the 65px bar, so half of it was not half the
       bar.

       top:0 bottom:0 does not care what that box measures. The anchor stretches
       the full height of whatever it is in and centres the drawing inside
       itself, which is what align-items below is already for. */
    top: 0;
    bottom: 0;
    height: auto;
    transform: translateX(-50%);
    /* chrome.css gives this anchor `margin: 0 40px 0 10px`, which was fine while
       it sat in the flow and is a 10px shove to the right once it is centred on
       left:50%. Measured: dead centre on a phone where the mobile rule already
       zeroed it, and 10px off on every desktop width. */
    margin: 0;
    isolation: isolate;
    width: auto;
    /* THESE THREE USED TO COME FROM chrome.css -- its two .img-logo-a rules, one under
       the "Sidebar" heading and one in the logo-centring block -- and this file has to
       stand on its own now, because the pages that most needed it were the ones that
       never loaded that file. display and align-items are a no-op wherever the bar is
       already flex -- a flex item's inline-flex is blockified to flex -- and they give
       the anchor a box to centre in everywhere else. overflow is what clips the sweep
       to the logo; without it the band of light runs off the side of the mark. */
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    /* Headroom for the raster lift. The anchor carries overflow:hidden, which is
       what clips the sweep to the logo, so without this it would clip the top off
       anything that rises. Symmetric, so the flex centring set further up is
       unchanged, and 46px still sits inside the 65px bar. */
    padding: 6px 0;
}

/* --- the raster treatment ------------------------------------------------- */
.img-logo-a .img-logo {
    transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.28, 1);
}
.img-logo-a:hover .img-logo {
    transform: translateY(-2px);
}

/* Only when there is no inlined SVG. A sweep of light across the lockup while the
   climber is running is two things competing for the same second. */
.img-logo-a:not(:has(.img-logo-svg))::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 42%,
        rgba(255, 255, 255, 0.38) 50%,
        rgba(255, 255, 255, 0) 58%);
    transform: translateX(-130%);
}
.img-logo-a:not(:has(.img-logo-svg)):hover::after {
    animation: lhq-logo-sweep 0.72s cubic-bezier(0.4, 0, 0.2, 1);
}

/* THE ACCOUNT THAT HAS NO CLIMBER TO RUN.
 *
 * The climber lives inside the brand lockup, and the lockup is only inlined when
 * that is the logo. An account that uploaded its own jpg or png has a raster: one
 * flat rectangle, nothing inside it to move. So a busy state that only animated the
 * climber would say nothing at all on most accounts -- and this is the signal that
 * replaced the spinner, so saying nothing is not an option.
 *
 * The sweep is already this file's answer for artwork it knows nothing about, and
 * it is already keyed to the same anchor. Busy just runs it on a loop instead of
 * once, slower and linear: the hover sweep is a flourish and eases, a progress
 * signal is a metronome and should not. One hook, two treatments, using the
 * distinction the file already draws. */
body.app-busy .img-logo-a:not(:has(.img-logo-svg))::after {
    animation: lhq-logo-sweep 1.1s linear infinite;
}

@keyframes lhq-logo-sweep {
    from { transform: translateX(-130%); }
    to   { transform: translateX(130%); }
}

/* --- the inlined lockup --------------------------------------------------- */
.img-logo-a .img-logo-svg {
    height: 32px;
    width: auto;
    overflow: visible;
}
/* The lockup does not lift. The climber is the gesture; moving the whole thing as
   well would be a second one on top of it. */
.img-logo-a:hover .img-logo-svg {
    transform: none;
}

/* Less movement asked for: the raster lift and sweep stop. The falling ball's
   own guard is in the generated block below. */
@media (prefers-reduced-motion: reduce) {
    .img-logo-a .img-logo { transition: none; }
    .img-logo-a:hover .img-logo { transform: none; }
    .img-logo-a:hover::after,
    body.app-busy .img-logo-a::after { animation: none; }
}

/* ===== GENERATED by Planning/steps/lhq-logo-build.js =====================
   Everything down to the END marker is written by that file; edit it there.

   THE FALLING BALL. On hover, and while the app is busy (body.app-busy, set by
   appMain.busy() in main.js), a ball falls onto the logo's top step, bounces
   down one, two, three and drops through the floor, and the next one is
   already falling in at the top -- an indeterminate loop with no seam, which
   is what a "something is happening" signal needs to be. Each step lights up
   as the ball lands on it.

   The path is a SIMULATION (Planning/steps/logoPhysics.js), sampled into the
   keyframes below: true parabolas between bounces, each bounce keeping only
   part of its speed, squash scaled by how hard it lands, and a check that the
   ball never overlaps a step. The light is timed from the same landings.

   ONE DEFINITION FOR EVERY SURFACE. The top bar's logo, the rail's mark, the
   designed storefront's credit and the undesigned one's all carry the same
   markup, so they are all listed here rather than each restating the rules.
   This file is in both bundles, so it reaches every one of them.

   The ball and the lights are hidden by opacity ATTRIBUTES in the markup;
   these rules only ever reveal them, so an <img> of the logo stays still. */
:root { --lhq-fall: 2.221s; }

.lhq-ball { transform-box: fill-box; transform-origin: 50% 100%; }

/* The ball falls in from above the box and leaves through a strip to its
   left, so nothing that holds the mark may clip it. */
.img-logo-a:has(.img-logo-svg),
.v2-front .foot-by svg,
.store-credit .sc-by svg { overflow: visible; }

/* The ball is white, which is right on the top bar and the rail. A store's
   footer can be light (its Footer setting, Plain or Banded on a light page),
   so there the ball takes the credit's own text colour, the way LEARNERS
   does: light on a dark foot, dark on a light one. */
.v2-front .foot-by .lhq-ball,
.store-credit .sc-by .lhq-ball { fill: currentColor; }

.img-logo-a:hover .lhq-fall,
.sh-mark:hover .lhq-fall,
.v2-front .foot-by:hover .lhq-fall,
.store-credit .sc-by:hover .lhq-fall,
body.app-busy .img-logo-a .lhq-fall,
body.app-busy .sh-mark .lhq-fall { opacity: 1; }
.img-logo-a:hover .lhq-fall-p,
.sh-mark:hover .lhq-fall-p,
.v2-front .foot-by:hover .lhq-fall-p,
.store-credit .sc-by:hover .lhq-fall-p,
body.app-busy .img-logo-a .lhq-fall-p,
body.app-busy .sh-mark .lhq-fall-p { animation: lhq-fall-p var(--lhq-fall) linear infinite; }
.img-logo-a:hover .lhq-ball,
.sh-mark:hover .lhq-ball,
.v2-front .foot-by:hover .lhq-ball,
.store-credit .sc-by:hover .lhq-ball,
body.app-busy .img-logo-a .lhq-ball,
body.app-busy .sh-mark .lhq-ball { animation: lhq-fall-s var(--lhq-fall) linear infinite; }
.img-logo-a:hover .lhq-lit-top,
.sh-mark:hover .lhq-lit-top,
.v2-front .foot-by:hover .lhq-lit-top,
.store-credit .sc-by:hover .lhq-lit-top,
body.app-busy .img-logo-a .lhq-lit-top,
body.app-busy .sh-mark .lhq-lit-top { animation: lhq-lit-top var(--lhq-fall) linear infinite; }
.img-logo-a:hover .lhq-lit-mid,
.sh-mark:hover .lhq-lit-mid,
.v2-front .foot-by:hover .lhq-lit-mid,
.store-credit .sc-by:hover .lhq-lit-mid,
body.app-busy .img-logo-a .lhq-lit-mid,
body.app-busy .sh-mark .lhq-lit-mid { animation: lhq-lit-mid var(--lhq-fall) linear infinite; }
.img-logo-a:hover .lhq-lit-bot,
.sh-mark:hover .lhq-lit-bot,
.v2-front .foot-by:hover .lhq-lit-bot,
.store-credit .sc-by:hover .lhq-lit-bot,
body.app-busy .img-logo-a .lhq-lit-bot,
body.app-busy .sh-mark .lhq-lit-bot { animation: lhq-lit-bot var(--lhq-fall) linear infinite; }

@keyframes lhq-fall-p { 0% { transform:translate(53.20px,-1.50px); } 0.593% { transform:translate(52.87px,-0.96px); } 1.186% { transform:translate(52.53px,-0.37px); } 1.779% { transform:translate(52.20px,0.26px); } 2.372% { transform:translate(51.86px,0.94px); } 2.965% { transform:translate(51.53px,1.67px); } 3.558% { transform:translate(51.19px,2.43px); } 4.151% { transform:translate(50.86px,3.25px); } 4.744% { transform:translate(50.52px,4.11px); } 5.337% { transform:translate(50.19px,5.01px); } 5.93% { transform:translate(49.85px,5.96px); } 6.523% { transform:translate(49.52px,6.95px); } 7.116% { transform:translate(49.18px,7.99px); } 7.709% { transform:translate(48.85px,9.08px); } 8.302% { transform:translate(48.51px,10.21px); } 8.895% { transform:translate(48.18px,11.38px); } 9.44% { transform:translate(47.87px,12.50px); } 11.148% { transform:translate(47.87px,12.50px); } 11.195% { transform:translate(47.84px,12.44px); } 11.788% { transform:translate(47.51px,11.78px); } 12.381% { transform:translate(47.17px,11.16px); } 12.974% { transform:translate(46.84px,10.58px); } 13.567% { transform:translate(46.50px,10.05px); } 14.16% { transform:translate(46.17px,9.56px); } 14.753% { transform:translate(45.83px,9.12px); } 15.346% { transform:translate(45.50px,8.72px); } 15.939% { transform:translate(45.16px,8.37px); } 16.532% { transform:translate(44.83px,8.06px); } 17.125% { transform:translate(44.49px,7.80px); } 17.718% { transform:translate(44.16px,7.58px); } 18.311% { transform:translate(43.82px,7.41px); } 18.904% { transform:translate(43.49px,7.29px); } 19.497% { transform:translate(43.15px,7.21px); } 20.09% { transform:translate(42.82px,7.17px); } 20.683% { transform:translate(42.48px,7.18px); } 21.276% { transform:translate(42.15px,7.23px); } 21.869% { transform:translate(41.82px,7.33px); } 22.462% { transform:translate(41.48px,7.48px); } 23.055% { transform:translate(41.15px,7.67px); } 23.648% { transform:translate(40.81px,7.90px); } 24.241% { transform:translate(40.48px,8.18px); } 24.834% { transform:translate(40.14px,8.51px); } 25.427% { transform:translate(39.81px,8.88px); } 26.02% { transform:translate(39.47px,9.29px); } 26.613% { transform:translate(39.14px,9.75px); } 27.206% { transform:translate(38.80px,10.26px); } 27.799% { transform:translate(38.47px,10.81px); } 28.392% { transform:translate(38.13px,11.41px); } 28.985% { transform:translate(37.80px,12.05px); } 29.578% { transform:translate(37.46px,12.73px); } 30.171% { transform:translate(37.13px,13.46px); } 30.764% { transform:translate(36.79px,14.24px); } 31.357% { transform:translate(36.46px,15.06px); } 31.95% { transform:translate(36.12px,15.93px); } 32.543% { transform:translate(35.79px,16.84px); } 33.136% { transform:translate(35.45px,17.80px); } 33.729% { transform:translate(35.12px,18.80px); } 34.322% { transform:translate(34.78px,19.85px); } 34.915% { transform:translate(34.45px,20.94px); } 35.508% { transform:translate(34.11px,22.08px); } 36.101% { transform:translate(33.78px,23.26px); } 36.694% { transform:translate(33.44px,24.49px); } 37.287% { transform:translate(33.11px,25.76px); } 37.88% { transform:translate(32.77px,27.08px); } 38.472% { transform:translate(32.44px,28.44px); } 38.499% { transform:translate(32.42px,28.50px); } 40.207% { transform:translate(32.42px,28.50px); } 40.773% { transform:translate(32.10px,27.78px); } 41.366% { transform:translate(31.77px,27.07px); } 41.959% { transform:translate(31.43px,26.40px); } 42.552% { transform:translate(31.10px,25.78px); } 43.145% { transform:translate(30.77px,25.20px); } 43.738% { transform:translate(30.43px,24.67px); } 44.331% { transform:translate(30.10px,24.19px); } 44.924% { transform:translate(29.76px,23.75px); } 45.517% { transform:translate(29.43px,23.35px); } 46.11% { transform:translate(29.09px,23.00px); } 46.703% { transform:translate(28.76px,22.70px); } 47.296% { transform:translate(28.42px,22.44px); } 47.889% { transform:translate(28.09px,22.22px); } 48.482% { transform:translate(27.75px,22.05px); } 49.075% { transform:translate(27.42px,21.93px); } 49.668% { transform:translate(27.08px,21.85px); } 50.261% { transform:translate(26.75px,21.81px); } 50.854% { transform:translate(26.41px,21.82px); } 51.447% { transform:translate(26.08px,21.88px); } 52.04% { transform:translate(25.74px,21.98px); } 52.633% { transform:translate(25.41px,22.13px); } 53.226% { transform:translate(25.07px,22.32px); } 53.819% { transform:translate(24.74px,22.55px); } 54.412% { transform:translate(24.40px,22.83px); } 55.005% { transform:translate(24.07px,23.16px); } 55.598% { transform:translate(23.73px,23.53px); } 56.191% { transform:translate(23.40px,23.95px); } 56.784% { transform:translate(23.06px,24.41px); } 57.377% { transform:translate(22.73px,24.92px); } 57.97% { transform:translate(22.39px,25.47px); } 58.563% { transform:translate(22.06px,26.07px); } 59.156% { transform:translate(21.72px,26.71px); } 59.749% { transform:translate(21.39px,27.40px); } 60.342% { transform:translate(21.05px,28.13px); } 60.935% { transform:translate(20.72px,28.91px); } 61.528% { transform:translate(20.38px,29.73px); } 62.12% { transform:translate(20.05px,30.60px); } 62.713% { transform:translate(19.72px,31.51px); } 63.306% { transform:translate(19.38px,32.47px); } 63.899% { transform:translate(19.05px,33.47px); } 64.492% { transform:translate(18.71px,34.52px); } 65.085% { transform:translate(18.38px,35.61px); } 65.678% { transform:translate(18.04px,36.75px); } 66.271% { transform:translate(17.71px,37.93px); } 66.864% { transform:translate(17.37px,39.16px); } 67.457% { transform:translate(17.04px,40.44px); } 67.487% { transform:translate(17.02px,40.50px); } 69.194% { transform:translate(17.02px,40.50px); } 69.758% { transform:translate(16.70px,39.83px); } 70.351% { transform:translate(16.37px,39.17px); } 70.944% { transform:translate(16.03px,38.55px); } 71.537% { transform:translate(15.70px,37.98px); } 72.13% { transform:translate(15.36px,37.45px); } 72.723% { transform:translate(15.03px,36.97px); } 73.316% { transform:translate(14.69px,36.54px); } 73.909% { transform:translate(14.36px,36.14px); } 74.502% { transform:translate(14.02px,35.80px); } 75.095% { transform:translate(13.69px,35.50px); } 75.688% { transform:translate(13.35px,35.24px); } 76.281% { transform:translate(13.02px,35.03px); } 76.874% { transform:translate(12.68px,34.87px); } 77.467% { transform:translate(12.35px,34.75px); } 78.06% { transform:translate(12.01px,34.67px); } 78.653% { transform:translate(11.68px,34.64px); } 79.246% { transform:translate(11.34px,34.65px); } 79.839% { transform:translate(11.01px,34.71px); } 80.432% { transform:translate(10.67px,34.82px); } 81.025% { transform:translate(10.34px,34.97px); } 81.618% { transform:translate(10.00px,35.17px); } 82.211% { transform:translate(9.67px,35.41px); } 82.804% { transform:translate(9.33px,35.69px); } 83.397% { transform:translate(9.00px,36.02px); } 83.99% { transform:translate(8.67px,36.40px); } 84.583% { transform:translate(8.33px,36.82px); } 85.176% { transform:translate(8.00px,37.29px); } 85.769% { transform:translate(7.66px,37.80px); } 86.361% { transform:translate(7.33px,38.35px); } 86.954% { transform:translate(6.99px,38.95px); } 87.547% { transform:translate(6.66px,39.60px); } 88.14% { transform:translate(6.32px,40.29px); } 88.733% { transform:translate(5.99px,41.03px); } 89.326% { transform:translate(5.65px,41.81px); } 89.919% { transform:translate(5.32px,42.64px); } 90.512% { transform:translate(4.98px,43.51px); } 91.105% { transform:translate(4.65px,44.43px); } 91.698% { transform:translate(4.31px,45.39px); } 92.291% { transform:translate(3.98px,46.40px); } 92.884% { transform:translate(3.64px,47.45px); } 93.477% { transform:translate(3.31px,48.55px); } 94.07% { transform:translate(2.97px,49.69px); } 94.663% { transform:translate(2.64px,50.88px); } 95.256% { transform:translate(2.30px,52.11px); } 95.849% { transform:translate(1.97px,53.39px); } 96.442% { transform:translate(1.63px,54.71px); } 97.035% { transform:translate(1.30px,56.08px); } 97.628% { transform:translate(0.96px,57.49px); } 98.221% { transform:translate(0.63px,58.95px); } 98.814% { transform:translate(0.29px,60.46px); } 99.407% { transform:translate(-0.04px,62.01px); } 100% { transform:translate(-0.38px,63.60px); } }
@keyframes lhq-fall-s { 0% { transform:scale(0.940,1.084); } 7.543% { transform:scale(0.942,1.071); } 9.44% { transform:scale(1.000,1.000); } 10.294% { transform:scale(1.322,0.678); } 11.148% { transform:scale(1.097,0.903); } 13.994% { transform:scale(0.974,1.032); } 17.789% { transform:scale(1.000,1.000); } 36.601% { transform:scale(0.935,1.079); } 38.499% { transform:scale(1.000,1.000); } 39.353% { transform:scale(1.360,0.640); } 40.207% { transform:scale(1.108,0.892); } 43.053% { transform:scale(0.971,1.036); } 46.848% { transform:scale(1.000,1.000); } 65.589% { transform:scale(0.939,1.074); } 67.487% { transform:scale(1.000,1.000); } 68.341% { transform:scale(1.337,0.663); } 69.194% { transform:scale(1.101,0.899); } 72.041% { transform:scale(0.973,1.034); } 75.836% { transform:scale(1.000,1.000); } 100% { transform:scale(0.940,1.084); } }
@keyframes lhq-lit-top { 0%, 9.24% { opacity: 0; } 9.44%, 16.70% { opacity: 1; } 38.50%, 100% { opacity: 0; } }
@keyframes lhq-lit-mid { 0%, 38.30% { opacity: 0; } 38.50%, 45.75% { opacity: 1; } 67.49%, 100% { opacity: 0; } }
@keyframes lhq-lit-bot { 0%, 67.29% { opacity: 0; } 67.49%, 74.73% { opacity: 1; } 96.47%, 100% { opacity: 0; } }

/* A TAP IS NOT A HOVER. A tap synthesises :hover and nothing takes it away, so
   the ball would start on a tap and keep falling -- which reads as "the app is
   busy", because that is what the same loop means. Only the hover half is put
   back: every busy selector carries body in front and so outweighs these. */
@media (hover: none) {
.img-logo-a:hover .lhq-fall,
.sh-mark:hover .lhq-fall,
.v2-front .foot-by:hover .lhq-fall,
.store-credit .sc-by:hover .lhq-fall { opacity: 0; }
.img-logo-a:hover .lhq-fall-p,
.sh-mark:hover .lhq-fall-p,
.v2-front .foot-by:hover .lhq-fall-p,
.store-credit .sc-by:hover .lhq-fall-p,
.img-logo-a:hover .lhq-ball,
.sh-mark:hover .lhq-ball,
.v2-front .foot-by:hover .lhq-ball,
.store-credit .sc-by:hover .lhq-ball,
.img-logo-a:hover .lhq-lit rect,
.sh-mark:hover .lhq-lit rect,
.v2-front .foot-by:hover .lhq-lit rect,
.store-credit .sc-by:hover .lhq-lit rect { animation: none; }
}

/* Less movement asked for: the mark stays as drawn and nothing runs, busy
   included -- that one starts on its own, which is exactly what the setting
   exists to stop. PACE's bar across the top still says the page is working. */
@media (prefers-reduced-motion: reduce) {
    .lhq-fall { opacity: 0 !important; }
    .lhq-fall-p, .lhq-ball, .lhq-lit rect { animation: none !important; }
}
/* ===== END GENERATED ===================================================== */

/* ---------------------------------------------------------------------------
   PHONES: THE WHOLE LOCKUP, SCALED TO FIT.

   Measured at 386px before this: the anchor was 139px, the lockup rendered at
   185px, and the anchor's overflow:hidden ate the last 46 -- a quarter of the
   logo, so the wordmark stopped mid-letter. A truncated logo reads as broken
   rather than as a compact treatment, and it is the clipping that was wrong,
   not the width.

   The theme's own answer was to drop the logo entirely below 579 and give the
   width to the search box, then below 500 bring it back and move search into a
   button. An honest trade, but it left the logo missing between 501 and 579 --
   measured, gone at 520, 540 and 575 -- and shrinking the lockup avoids having
   to make the trade at all.

   WIDTH IS NOT SET HERE, height is. The lockup is 643.4 x 111.5, so its width
   follows from its height at 5.77:1, and the anchor is width:auto so it takes
   whatever that comes to. Setting both is how the clipping happened in the
   first place: a fixed anchor narrower than the drawing it holds.

   26px of height puts the lockup at 150, which clears the widest the icons get
   once they are at their 44px tap size. Below 380 there is no longer room for
   that, so it steps down again rather than being clipped.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .img-logo-a {
        width: auto;
        margin: 0;
        padding: 0;
        /* The logo is a link to the dashboard, so it gets the same 44px floor as
           every other control -- on the height, since 150px of width was never
           the problem. The anchor is already inline-flex and centred, so the
           drawing sits in the middle of the taller box rather than moving. */
        min-height: 44px;
        /* Do not let flex squeeze it. The anchor is a flex item on the bar, so
           width:auto still shrinks under pressure -- measured 136px holding a
           150px drawing, clipped by 14 -- and the anchor clips rather than
           scales. Refusing to shrink is what makes the height above the only
           thing deciding the size. */
        flex: 0 0 auto;
    }
    .img-logo-a .img-logo-svg {
        height: 26px;
    }
}
@media (max-width: 379px) {
    .img-logo-a .img-logo-svg {
        height: 22px;
    }
}

/* ---------------------------------------------------------------------------
   THE LOGO'S HOVER ANIMATIONS DO NOT RUN ON A TOUCHSCREEN.

   Same fault the rail glow had. A tap synthesises :hover and nothing takes it
   away until you touch something else, so the climber would start on a tap and
   keep running -- a logo animating by itself, with no cursor anywhere near it,
   which on this logo reads as "the app is busy" because that is exactly what
   the same animation means.

   THE BUSY STATE IS UNAFFECTED, and that is the point of resetting rather than
   wrapping the originals in @media (hover: hover). Every rule here matches at
   (0,3,0) or (0,3,1); its body.app-busy counterpart is one higher, because of
   the `body` in front. So when the app is genuinely working the climber still
   runs on a phone, and only the hover half is put back.
   --------------------------------------------------------------------------- */
@media (hover: none) {
    /* The lift. */
    .img-logo-a:hover .img-logo {
        transform: none;
    }
    /* The sweep, for an account whose logo is a raster and has no climber. */
    .img-logo-a:not(:has(.img-logo-svg)):hover::after {
        animation: none;
    }
    /* The falling ball's own tap guard is in the generated block. */
}

/* ---- between pages ---------------------------------------------------------
   The other half of the loading signal (Martin, 30 Sep 2026). Moving around
   the platform is a full page load, and it used to arrive as three jolts: the
   old page went, a half-built one appeared, and the screen popped in after.
   header.tpl and header_public.tpl now hold the first paint until the screen
   is built; this crossfades the old page into the finished one.

   The rail and the top bar are named, so Chrome carries each across as the
   same object instead of fading it out and back in -- the frame stays put and
   only the page inside it changes. The top bar SWAPS rather than blends: its
   slabs are never at the same phase on two pages, and two of them blended
   read as a double exposure. The new page settles downwards a few pixels, the
   way the slabs move.

   In this file because logo.css is in both bundles, and a crossfade only
   happens when both pages ask for one. Browsers without view transitions
   ignore all of it and load pages exactly as before. */
@view-transition {
    navigation: auto;
}

body.v2 .sh-rail {
    view-transition-name: lhq-rail;
}

/* THE BAR'S PIECES ARE NAMED, NOT THE BAR. A named element is its own
   stacking context, always, not only during a change -- and naming .sh-top
   trapped the cluster and the store picker (z-index 60, so their menus clear
   the page) at the header's own level, under anything positioned after it.
   On the marketplace, whose wrapper is positioned and painted solid, the whole
   bar vanished behind the page (Martin, 30 Sep). Each piece named here is
   ALREADY a stacking context -- positioned with a z-index in v2.css -- so the
   names change nothing about how the bar stacks. The rail is the same: fixed
   at z-index 50. Hidden pieces (the upgrade link for a creator) are skipped
   by Chrome. */
body.v2 .sh-plate { view-transition-name: lhq-plate; view-transition-class: lhq-hold; }
body.v2 .sh-storewrap { view-transition-name: lhq-store; view-transition-class: lhq-hold; }
body.v2 .sh-upgrade { view-transition-name: lhq-upgrade; view-transition-class: lhq-hold; }
body.v2 .sh-ribwrap { view-transition-name: lhq-slabs; view-transition-class: lhq-hold; }
body.v2 .sh-right { view-transition-name: lhq-cluster; view-transition-class: lhq-hold; }

/* The old page does NOT fade. It used to, faster than the new one came in,
   so for a moment both were half transparent and the background showed
   through between them -- the blink Martin still saw. Held solid underneath,
   there is always a whole page on screen, and the new one covers it. */
::view-transition-old(root) {
    animation: none;
}

::view-transition-new(root) {
    animation: 260ms cubic-bezier(.2, .7, .3, 1) both lhq-page-in;
}

/* The OLD bar is the one held through the change, and the live one takes
   over when it ends. The other way round, the first frame of the new page
   was what showed -- and in that frame the slabs are not drawn yet (their
   script starts at DOMContentLoaded) and the profile picture may still be
   decoding, so the bar blinked half empty (Martin, 30 Sep). 260ms later
   both are there, and the slabs pick up from where the old bar left them. */
::view-transition-old(*.lhq-hold) {
    animation: none;
}

::view-transition-new(*.lhq-hold) {
    animation: none;
    opacity: 0;
}

@keyframes lhq-page-in {
    from { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}
/* ---------------------------------------------------------------------------
   THE FOOTER, ONE DESIGN FOR EVERY PAGE THAT HAS ONE (26 September 2026).

   There were two: a faint grey line of capitals inside the app (footer.tpl)
   and a solid teal bar of white capitals on public pages (built in
   Output::render()). Martin asked for one, cohesive, in the stripped-back
   look the rail now has. Both places now print the same markup from
   Output::footerBar(), and this file dresses it.

   Loaded by BOTH dynamic bundles (dynamic.php and public_dynamic.php), like
   logo.css, because the footer is on both kinds of page. That is also why
   every colour is var(--token, fallback): a public page does not carry the
   v2 :root tokens, so the fallback is the canon value itself.

   NEW CLASS NAMES ON PURPOSE. main.css and public.css both style .footer
   (padding, a fill, fixed variants). Keeping the old name would have meant
   winning an argument with each of them on every property; a new name has
   nothing to argue with.

   Also here: the footer's own pages when they open inside the app
   (.lhq-doc -- Privacy and Terms, see Pages::registeredRoutes()), and the
   back-to-top button, which sat on top of "Contact us".
   --------------------------------------------------------------------------- */

.lhq-foot { border-top:1px solid var(--line, rgba(255,255,255,.09)); background:transparent;
  margin-top:40px; font-family:"Lato", Helvetica, Arial, sans-serif; }
/* 84px on the right is the back-to-top button's lane (47 wide, 20 off the
   edge, and room to breathe): moved bottom-right below, it would otherwise
   land on the last link instead of the middle one. */
.lhq-foot-in { max-width:1320px; margin:0 auto; padding:18px 84px 22px 20px; display:flex;
  align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 28px; }

.lhq-foot-id { display:flex; align-items:center; gap:10px; margin:0;
  color:var(--dim, #6f7885); font-size:12px; font-variant-numeric:tabular-nums; }
.lhq-foot-mark { width:15px; height:15px; display:block; flex:none; }
/* The full logo (28 Sep 2026): LEARNERS in white, HQ in blue, the green mark
   before it, at the height of a line of footer text. */
.lhq-foot .lhq-foot-logo { display:block; flex:none; height:16px; width:auto; max-width:none; }

.lhq-foot-links { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:6px 22px; }
.lhq-foot-links li { margin:0; padding:0; }
/* Grey at rest, the HQ blue under the pointer -- the rail's own rule, so the
   two edges of the screen behave the same way. */
.lhq-foot .lhq-foot-links a { color:var(--muted, #98a1ad); font-size:12.5px; font-weight:400;
  letter-spacing:0; text-transform:none; text-decoration:none; transition:color .15s; }
.lhq-foot .lhq-foot-links a:hover { color:var(--brand, #2563eb); text-decoration:none; }
.lhq-foot .lhq-foot-links a:focus-visible { color:var(--brand, #2563eb); outline:2px solid var(--brand, #2563eb);
  outline-offset:3px; border-radius:2px; }
/* The one action in the footer, so it is the green one. Only printed for
   somebody who can take it: logged out, or a customer. */
.lhq-foot .lhq-foot-links a.lhq-foot-go { color:var(--green-lit, #3ad47a); font-weight:700; }
.lhq-foot .lhq-foot-links a.lhq-foot-go:hover { color:var(--green-lit, #3ad47a); text-decoration:underline; }

/* "Prices in" for a visitor (2 Oct 2026): the currency their prices are shown
   in, quiet like the links beside it. Output::currencyPicker(), in our footer
   and in a store's own (.foot, V2StorefrontComponents::foot -- where it sits
   on the right, before the links). public.js answers it. */
.lhq-foot .lhq-foot-cur, .foot .lhq-foot-cur { display:flex; align-items:center; gap:6px; margin:0; color:var(--muted, #98a1ad);
  font-size:12.5px; font-weight:400; }
.foot .lhq-foot-cur { margin-left:auto; }
.lhq-foot .lhq-foot-cur select, .foot .lhq-foot-cur select { height:28px; padding:0 6px; border-radius:7px;
  border:1px solid var(--line, #31363d); background:var(--ground, #1c1c1c); color:var(--text, #e9edf2);
  font:inherit; font-size:12.5px; color-scheme:dark; }
.lhq-foot .lhq-foot-cur select:focus, .foot .lhq-foot-cur select:focus { outline:none; border-color:var(--brand, #2563eb); }

@media (max-width:640px) {
  .lhq-foot-in { flex-direction:column; justify-content:center; text-align:center;
    padding-right:20px; padding-bottom:72px; }  /* room for the back-to-top button below the links */
  .lhq-foot-links { justify-content:center; }
}

/* THE BACK-TO-TOP BUTTON, bottom right at every width. ui.totop.css puts it
   at left:52% and dashboard.css pins it at the centre with !important, which
   is the footer's middle -- it covered "Contact us". chrome.css already moved
   it right below 768px; this does it everywhere. The id plus two elements is
   what outranks dashboard.css's own !important. */
html body #toTop { left:auto !important; right:20px !important; margin:0 !important; bottom:20px; }

/* ---- the footer's pages: Privacy, Terms, Contact --------------------------
   Rebuilt 27 September 2026 (Martin: "more in line with the current design
   fully ... accordions perhaps for those lengthy policies"). Their markup is
   modules/Pages/tpl/doc_*.tpl, rendered in place of the old CMS content, and
   it is the same page logged in (inside the app) and logged out (public
   chrome) -- which is why this lives here, in the one sheet both bundles load,
   and why every colour carries its canon value as the fallback.

   The canon's grammar throughout: an uppercase eyebrow, a 25/900 title, one
   muted sentence under it; a single card for the one thing set apart (the
   short version, the form); green for the one action; the HQ blue under the
   pointer and green for what is open, exactly as the rail does it. */
body .lhq-doc { max-width:820px; margin:0 auto; padding:8px 20px 8px;
  font-family:"Lato", Helvetica, Arial, sans-serif; font-size:14.5px; line-height:1.65;
  color:var(--muted, #98a1ad); }
body .lhq-doc.lhq-doc-wide { max-width:1040px; }
/* Inside the app the 50px top bar lies over the page and the back strip sits
   in its row, so the eyebrow at 48px was under the bar's lower edge. */
body.v2 .lhq-doc { padding-top:30px; }
.lhq-docpage { display:flex; flex-direction:column; gap:24px; }

.lhq-doc-head { display:flex; flex-direction:column; gap:8px; padding-top:10px; }
.lhq-doc .lhq-doc-eyebrow { margin:0; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim, #6f7885); }
body .lhq-doc h1.lhq-doc-title { margin:0; font-family:inherit; font-size:25px; font-weight:900;
  letter-spacing:-.015em; line-height:1.2; color:var(--text, #e9edf2); text-transform:none; text-wrap:balance; }
.lhq-doc .lhq-doc-meta { margin:0; font-size:12px; color:var(--dim, #6f7885); font-variant-numeric:tabular-nums; }
.lhq-doc .lhq-doc-lede { margin:0; font-size:15px; color:var(--muted, #98a1ad); max-width:64ch; }

.lhq-doc a { color:var(--brand, #2563eb); text-decoration:underline; text-underline-offset:2px; }
.lhq-doc a:hover { color:var(--brand, #2563eb); text-decoration-thickness:2px; }
.lhq-doc a:focus-visible { outline:2px solid var(--brand, #2563eb); outline-offset:2px; border-radius:2px; }
.lhq-doc strong { color:var(--text, #e9edf2); font-weight:700; }

/* The short version: the one card on a policy page. */
.lhq-doc-short { background:var(--panel, #2a2a2a); border:1px solid var(--line, rgba(255,255,255,.09));
  border-radius:8px; padding:16px 20px; }
body .lhq-doc .lhq-doc-short h2 { margin:0 0 10px; font-family:inherit; font-size:11.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--dim, #6f7885); }
.lhq-doc-short ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.lhq-doc-short li { margin:0; color:var(--text, #e9edf2); font-size:14px; line-height:1.55; }

.lhq-doc-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lhq-doc-all { font:700 11.5px/1 "Lato", Helvetica, Arial, sans-serif; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text, #e9edf2); background:transparent; border:1px solid rgba(255,255,255,.18);
  border-radius:6px; padding:8px 12px; cursor:pointer; }
.lhq-doc-all:hover { border-color:rgba(255,255,255,.34); }
.lhq-doc-all:focus-visible { outline:2px solid var(--brand, #2563eb); outline-offset:2px; }
.lhq-doc-all[hidden] { display:none; }

/* The accordion. Native <details>; lhq-docs.js only adds Expand all and
   opening the section a #link names. */
.lhq-acc { border-top:1px solid var(--line, rgba(255,255,255,.09)); }
.lhq-acc-item { border-bottom:1px solid var(--line, rgba(255,255,255,.09)); scroll-margin-top:70px; }
.lhq-acc-item > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px;
  padding:15px 4px; border-radius:4px; }
.lhq-acc-item > summary::-webkit-details-marker { display:none; }
.lhq-acc-item > summary::marker { content:""; }
.lhq-acc-item > summary .n { width:22px; flex:none; color:var(--dim, #6f7885); font-size:12px; font-weight:700;
  font-variant-numeric:tabular-nums; transition:color .15s; }
.lhq-acc-item > summary .t { flex:1; min-width:0; color:var(--text, #e9edf2); font-size:15px; font-weight:700;
  line-height:1.35; transition:color .15s; }
.lhq-acc-item > summary .chev { width:16px; height:16px; flex:none; color:var(--dim, #6f7885);
  transition:transform .2s ease, color .15s; }
.lhq-acc-item > summary:hover .t, .lhq-acc-item > summary:hover .chev { color:var(--brand, #2563eb); }
.lhq-acc-item > summary:focus-visible { outline:2px solid var(--brand, #2563eb); outline-offset:2px; }
.lhq-acc-item[open] > summary .chev { transform:rotate(90deg); color:var(--green-lit, #3ad47a); }
.lhq-acc-item[open] > summary .n { color:var(--green-lit, #3ad47a); }
.lhq-acc-body { padding:0 4px 20px 40px; }
.lhq-acc-body > :last-child { margin-bottom:0; }
.lhq-doc .lhq-acc-body p { margin:0 0 10px; }
body .lhq-doc .lhq-acc-body h3 { margin:18px 0 6px; font-family:inherit; font-size:13.5px; font-weight:700;
  line-height:1.4; color:var(--text, #e9edf2); }
.lhq-doc .lhq-acc-body ul, .lhq-doc .lhq-acc-body ol { margin:0 0 12px; padding-left:18px; }
.lhq-doc .lhq-acc-body li { margin:0 0 6px; }
.lhq-doc .lhq-doc-end { margin:0; font-size:13.5px; color:var(--muted, #98a1ad); }
@media (max-width:640px) {
  .lhq-acc-body { padding-left:4px; }
  .lhq-acc-item > summary { gap:10px; }
}
@media (prefers-reduced-motion:reduce) { .lhq-acc-item > summary .chev { transition:none; } }

/* ---- Contact ------------------------------------------------------------- */
.lhq-contact-grid { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:28px; align-items:start; }
.lhq-contact, .lhq-contact-done { background:var(--panel, #2a2a2a); border:1px solid var(--line, rgba(255,255,255,.09));
  border-radius:8px; padding:22px; display:flex; flex-direction:column; gap:16px; margin:0; }
.lhq-contact[hidden], .lhq-contact-done[hidden] { display:none; }
.lhq-contact-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lhq-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.lhq-doc .lhq-field label { margin:0; font-size:11.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted, #98a1ad); }
.lhq-field label .opt { font-weight:400; letter-spacing:0; text-transform:none; color:var(--dim, #6f7885); }
.lhq-doc .lhq-field input, .lhq-doc .lhq-field select, .lhq-doc .lhq-field textarea {
  width:100%; box-sizing:border-box; height:auto; margin:0; font:14px/1.4 "Lato", Helvetica, Arial, sans-serif;
  color:var(--text, #e9edf2); background:var(--ground, #1c1c1c); border:1px solid rgba(255,255,255,.14);
  border-radius:6px; padding:10px 12px; box-shadow:none; color-scheme:dark; transition:border-color .15s, box-shadow .15s; }
.lhq-doc .lhq-field textarea { min-height:160px; resize:vertical; line-height:1.55; }
.lhq-doc .lhq-field ::placeholder { color:var(--dim, #6f7885); opacity:1; }
.lhq-doc .lhq-field input:focus, .lhq-doc .lhq-field select:focus, .lhq-doc .lhq-field textarea:focus {
  outline:none; border-color:var(--brand, #2563eb); box-shadow:0 0 0 3px rgba(37,99,235,.25); }
.lhq-doc .lhq-field [aria-invalid="true"] { border-color:var(--danger, #ed5565); }
.lhq-doc .lhq-err, .lhq-doc .lhq-contact-note { margin:0; font-size:12.5px; color:#f08d98; }
.lhq-err[hidden], .lhq-contact-note[hidden] { display:none; }
/* The bot trap: off screen rather than display:none, which some bots skip. */
.lhq-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lhq-contact-foot { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; }
.lhq-doc .lhq-contact-small { margin:0; font-size:11.5px; line-height:1.5; color:var(--dim, #6f7885); max-width:46ch; }
.lhq-doc .lhq-contact-small a { color:var(--muted, #98a1ad); }
.lhq-contact-send { font:700 13.5px/1 "Lato", Helvetica, Arial, sans-serif; color:#fff; background:var(--green, #2dc26b);
  border:0; border-radius:6px; padding:12px 20px; cursor:pointer; transition:background .15s; }
.lhq-contact-send:hover { background:var(--green-lit, #3ad47a); }
.lhq-contact-send:focus-visible { outline:2px solid var(--brand, #2563eb); outline-offset:2px; }
.lhq-contact-send:disabled { opacity:.6; cursor:default; }
.lhq-contact-done:focus { outline:none; }
body .lhq-doc .lhq-contact-done h2 { margin:0; font-family:inherit; font-size:18px; font-weight:900; color:var(--text, #e9edf2); }
.lhq-doc .lhq-contact-done p { margin:0; }
.lhq-contact-again { align-self:flex-start; font:700 11.5px/1 "Lato", Helvetica, Arial, sans-serif; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text, #e9edf2); background:transparent; border:1px solid rgba(255,255,255,.18);
  border-radius:6px; padding:9px 13px; cursor:pointer; }
.lhq-contact-again:hover { border-color:rgba(255,255,255,.34); }

.lhq-contact-aside { display:flex; flex-direction:column; gap:22px; padding-top:4px; }
.lhq-contact-aside section { display:flex; flex-direction:column; gap:8px; }
body .lhq-doc .lhq-contact-aside h2 { margin:0; font-family:inherit; font-size:11.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--dim, #6f7885); }
.lhq-contact-aside dl { margin:0; display:flex; flex-direction:column; gap:10px; }
.lhq-contact-aside dt { margin:0; font-size:13.5px; font-weight:700; color:var(--text, #e9edf2); }
.lhq-contact-aside dd { margin:0; font-size:13.5px; }
.lhq-doc .lhq-contact-aside p { margin:0; font-size:13.5px; }

/* Who you are, at the top of the form: logged in it names you, logged out
   it offers to log you in. */
.lhq-doc .lhq-contact-hint { margin:0; padding:0 0 14px; border-bottom:1px solid var(--line, rgba(255,255,255,.09));
  font-size:13.5px; color:var(--muted, #98a1ad); }
.lhq-doc .lhq-field-hint { margin:0; font-size:12px; color:var(--dim, #6f7885); }

/* Our channels. A channel with no address yet is not a link and says so;
   the main one, once chosen, goes first and is tagged in green. */
.lhq-socs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.lhq-soc a, .lhq-soc .lhq-soc-in { display:flex; align-items:center; gap:10px; padding:9px 12px;
  border:1px solid var(--line, rgba(255,255,255,.09)); border-radius:8px; text-decoration:none;
  color:var(--text, #e9edf2); font-size:13.5px; font-weight:700; transition:border-color .15s, color .15s; }
.lhq-soc .ic { width:20px; height:20px; flex:none; display:grid; place-items:center; color:var(--muted, #98a1ad); }
.lhq-soc .ic svg { width:18px; height:18px; display:block; }
.lhq-soc .nm { flex:1; min-width:0; }
.lhq-soc a:hover { border-color:var(--brand, #2563eb); color:var(--text, #e9edf2); text-decoration:none; }
.lhq-soc a:hover .ic { color:var(--brand, #2563eb); }
.lhq-soc.is-main a { border-color:rgba(45,194,107,.45); }
.lhq-soc.is-main .ic { color:var(--green-lit, #3ad47a); }
.lhq-soc-tag { font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--green-lit, #3ad47a); }
.lhq-soc.is-soon .lhq-soc-in { color:var(--muted, #98a1ad); border-style:dashed; }
.lhq-soc.is-soon .ic { color:var(--dim, #6f7885); }
.lhq-soc-soon { font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--dim, #6f7885); }
.lhq-doc .lhq-soc-note { margin:2px 0 0; font-size:12px; color:var(--dim, #6f7885); }

/* The reCAPTCHA badge would sit on the back-to-top button in the corner.
   Google allows hiding it when the form carries its notice instead, which
   .lhq-contact-small does. */
body:has(.lhq-contact) .grecaptcha-badge { visibility:hidden; }

@media (max-width:760px) {
  .lhq-contact-grid { grid-template-columns:1fr; }
  .lhq-contact-row { grid-template-columns:1fr; }
}

/* ---- a store inside the app ------------------------------------------------
   A logged-in visitor sees a storefront inside the app shell, and the shell's
   top row (.sh-top: the store switcher, bell, messages, profile) floats over
   the top of every screen -- a negative bottom margin, so screens run up
   underneath it and leave that corner free. A storefront does not leave it
   free: its own header, name and tabs, runs the full width, and the two sat
   on top of each other (Martin, 27 Sep 2026, on ZenPower Academy).

   So on a store page the row stops floating and the store starts below it.
   Desktop only: below 780 the row is already a bar in the flow of the page
   (v2.css), and has no overlap to undo. Other screens keep the float.
   -------------------------------------------------------------------------- */
@media (min-width: 781px) {
    body.v2.offers-page .sh-top {
        margin-bottom: 12px;
    }
}

/* AND THE STORE STAYS OUT OF THE RAIL. courses.css (2016) gives
   #courses-content "margin: 0 -30px" to cancel padding the old page wrapper
   had. Inside the app shell the wrapper has none, so the store ran 10px under
   the rail and 20px past the right edge (Martin, 27 Sep 2026). Only store
   pages use #courses-content inside the app; logged out, the old wrapper and
   its padding are still there, so the -30px stays for them. */
body.v2.offers-page #courses-content {
    margin-left: 0;
    margin-right: 0;
}

/* ===========================================================================
   v2-follow.css -- the Follow button (28 Sep 2026) and the Following page.
   In both bundles, like its script. The storefront carries its own tokens
   (a store's colours); the fallbacks are the platform's, for pages without.
   =========================================================================== */
.lhq-follow-slot:empty { display:none; }
.lhq-follow { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--green, #2dc26b); background:var(--green, #2dc26b); color:#fff;
  font:inherit; font-size:13px; font-weight:700; line-height:1.2; cursor:pointer; text-decoration:none;
  transition:background .15s, border-color .15s, color .15s; white-space:nowrap; }
.lhq-follow:hover { background:var(--green-lit, #3ad47a); border-color:var(--green-lit, #3ad47a); color:#fff; text-decoration:none; }
.lhq-follow.is-on { background:transparent; border-color:var(--line, rgba(255,255,255,.18)); color:var(--text, #e9edf2); }
.lhq-follow.is-on:hover { border-color:var(--danger, #ed5565); color:#f08d98; background:transparent; }
.lhq-follow.is-on:hover span { font-size:0; }
.lhq-follow.is-on:hover span::after { content:"Unfollow"; font-size:13px; }
.lhq-follow:disabled { opacity:.6; cursor:default; }
.lhq-follow:focus-visible { outline:2px solid var(--brand, #2563eb); outline-offset:2px; }

/* Beside "Visit store" on a product page. */
.lhq-follow-pp { display:inline-flex; margin-left:10px; vertical-align:middle; }
.lhq-follow-pp .lhq-follow { padding:5px 11px; font-size:12px; }
/* In the byline, "from <the store>" (30 Sep 2026): a line of small text. */
.byline .lhq-follow-pp .lhq-follow { padding:3px 10px; font-size:11.5px; }
.lhq-follow-pp .lhq-follow.is-on:hover span::after { font-size:12px; }

.lhq-follow-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:100001;
  max-width:calc(100vw - 32px); padding:10px 16px; border-radius:10px; background:#272b31;
  border:1px solid rgba(255,255,255,.18); color:#e9edf2; font:700 13px/1.4 Lato, Helvetica, Arial, sans-serif;
  box-shadow:0 14px 34px rgba(0,0,0,.55); }

/* ---- the Following page ---- */
.v2-following .fl-list { max-width:760px; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.v2-following .fl-row { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line); }
.v2-following .fl-pic { flex:none; width:40px; height:40px; border-radius:50%; background:var(--panel-2) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; }
.v2-following .fl-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.v2-following .fl-main a { font-size:14.5px; font-weight:700; color:var(--text); text-decoration:none; }
.v2-following .fl-main a:hover { text-decoration:underline; }
.v2-following .fl-state { font-size:12px; color:var(--dim); }
.v2-following .fl-row.is-off .fl-main a { color:var(--muted); }
.v2-following .fl-acts { display:flex; gap:8px; flex:none; }
.v2-following .fl-acts button { padding:6px 12px; border-radius:8px; border:1px solid var(--line); background:transparent;
  color:var(--muted); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.v2-following .fl-acts button:hover { color:var(--text); border-color:rgba(255,255,255,.22); }
.v2-following .fl-acts button[hidden] { display:none; }
.v2-following .fl-note { max-width:760px; font-size:12.5px; color:var(--dim); margin:14px 0 0; }
@media (max-width:640px) {
  .v2-following .fl-row { flex-wrap:wrap; }
  .v2-following .fl-acts { width:100%; justify-content:flex-end; }
}
/* The sale alerts switch above the list (28 Sep 2026). */
.v2-following .fl-alerts { max-width:760px; display:flex; align-items:flex-start; gap:12px; margin:0 0 18px; padding:14px 16px;
  border-radius:12px; background:var(--panel); border:1px solid var(--line); cursor:pointer; }
.v2-following .fl-alerts input { flex:none; margin:2px 0 0; width:16px; height:16px; accent-color:var(--green); }
.v2-following .fl-alerts > span { flex:1; display:flex; flex-direction:column; gap:3px; }
.v2-following .fl-alerts b { font-size:13.5px; color:var(--text); }
.v2-following .fl-alerts > span > span { font-size:12.5px; color:var(--dim); }
.v2-following .fl-alerts-said { flex:none; font-style:normal; font-size:12px; color:var(--green-lit); }


/* Custom Styles */

