@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic|Source+Code+Pro:400");

/* =========================================================
   READ ONLY — Neutral Professional Theme
   - Palette + tokens
   - Tightened selectors, no visual changes in layout
   ========================================================= */

:root{
  --bg: #ffffff;           /* page background */
  --bg-alt: #f6f6f7;       /* subtle section/stripes */
  --ink: #1f2937;          /* body text (charcoal) */
  --ink-muted: #6b7280;    /* secondary text */
  --heading: #111827;      /* headings (near-black) */
  --border: #e5e7eb;       /* light border */
  --muted-border: #d1d5db;

  --accent: #3f4b5a;       /* blue-gray */
  --accent-600: #323b47;
  --accent-700: #28313b;
  --accent-soft: #eef1f5;

  --header-bg: #111827;    /* sidebar/nav */
  --header-fg: #e5e7eb;

  --radius: 5px;
  --radius-lg: 8px;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.05);
}

/* =========================================================
   Reset
   ========================================================= */

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u,
i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video{
  margin:0; padding:0; border:0; font-size:100%;
  font:inherit; vertical-align:baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{ display:block; }
body{ line-height:1; -webkit-text-size-adjust:none; }
ol, ul{ list-style:none; }
blockquote, q{ quotes:none; }
blockquote::before, blockquote::after, q::before, q::after{ content:''; }
table{ border-collapse:collapse; border-spacing:0; }
mark{ background-color:transparent; color:inherit; }
input::-moz-focus-inner{ border:0; padding:0; }
input, select, textarea{
  -moz-appearance:none; -webkit-appearance:none; -ms-appearance:none; appearance:none;
}
html{ box-sizing:border-box; }
*, *::before, *::after{ box-sizing:inherit; }

/* =========================================================
   Base Typography
   ========================================================= */

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Lato", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  font-size:16pt; line-height:1.75em; font-weight:400;
}
body.is-preload *, body.is-preload *::before, body.is-preload *::after{
  animation:none !important; transition:none !important;
}

a{
  transition:color .2s ease-in-out, border-color .2s ease-in-out;
  border-bottom:1px solid var(--border);
  color:inherit; text-decoration:none;
}
a:hover{ border-bottom-color:transparent; color:var(--accent) !important; }

strong, b{ color:var(--heading); font-weight:700; }
em, i{ font-style:italic; }
p{ margin:0 0 2.25em; }

h1, h2, h3, h4, h5, h6{
  color:var(--heading); font-weight:700; line-height:1.1; margin:0 0 .5625em;
}
h2{ font-size:2em; line-height:1.5; }
h3{ font-size:1.75em; line-height:1.5; }
h4{ font-size:1.25em; line-height:1.5; }
h5{ font-size:.9em;  line-height:1.5; }
h6{ font-size:.75em; line-height:1.5; }

sub, sup{ font-size:.8em; position:relative; }
sub{ top:.5em; } sup{ top:-.5em; }

hr{ border:0; border-bottom:2px solid var(--border); margin:2.25em 0; }
hr.major{ margin:3.375em 0; }

blockquote{
  border-left:8px solid var(--border);
  font-style:italic; margin:0 0 2.25em; padding:.5em 0 .5em 2em;
}

code{
  background:#374151; color:#fff; border-radius:var(--radius);
  font-family:"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.9em; padding:.25em .65em; margin:0 .25em;
}
pre{ font-family:"Source Code Pro", monospace; font-size:.9em; margin:0 0 2.25em; }
pre code{
  display:block; line-height:1.5; overflow-x:auto; padding:1em 1.5em;
  -webkit-overflow-scrolling:touch;
}

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

/* =========================================================
   Grid (unchanged behavior, simplified duplication)
   ========================================================= */

.row{
  display:flex; flex-wrap:wrap; box-sizing:border-box; align-items:stretch;
  margin-top:0; margin-left:-2em;
}
.row > *{ padding:0 0 0 2em; box-sizing:border-box; }
.row.gtr-uniform{ margin-top:-2em; }
.row.gtr-uniform > *{ padding-top:2em; }

.row.aln-left{ justify-content:flex-start; }
.row.aln-center{ justify-content:center; }
.row.aln-right{ justify-content:flex-end; }
.row.aln-top{ align-items:flex-start; }
.row.aln-middle{ align-items:center; }
.row.aln-bottom{ align-items:flex-end; }

.row > .imp{ order:-1; }
.row > .col-1{ width:8.33333%; }   .row > .off-1{ margin-left:8.33333%; }
.row > .col-2{ width:16.66667%; }  .row > .off-2{ margin-left:16.66667%; }
.row > .col-3{ width:25%; }        .row > .off-3{ margin-left:25%; }
.row > .col-4{ width:33.33333%; }  .row > .off-4{ margin-left:33.33333%; }
.row > .col-5{ width:41.66667%; }  .row > .off-5{ margin-left:41.66667%; }
.row > .col-6{ width:50%; }        .row > .off-6{ margin-left:50%; }
.row > .col-7{ width:58.33333%; }  .row > .off-7{ margin-left:58.33333%; }
.row > .col-8{ width:66.66667%; }  .row > .off-8{ margin-left:66.66667%; }
.row > .col-9{ width:75%; }        .row > .off-9{ margin-left:75%; }
.row > .col-10{ width:83.33333%; } .row > .off-10{ margin-left:83.33333%; }
.row > .col-11{ width:91.66667%; } .row > .off-11{ margin-left:91.66667%; }
.row > .col-12{ width:100%; }      .row > .off-12{ margin-left:100%; }

/* Gutters (variants) */
.row.gtr-0{ margin-left:0; } .row.gtr-0 > *{ padding-left:0; }
.row.gtr-0.gtr-uniform{ margin-top:0; } .row.gtr-0.gtr-uniform > *{ padding-top:0; }

.row.gtr-25{ margin-left:-.5em; } .row.gtr-25 > *{ padding-left:.5em; }
.row.gtr-25.gtr-uniform{ margin-top:-.5em; } .row.gtr-25.gtr-uniform > *{ padding-top:.5em; }

.row.gtr-50{ margin-left:-1em; } .row.gtr-50 > *{ padding-left:1em; }
.row.gtr-50.gtr-uniform{ margin-top:-1em; } .row.gtr-50.gtr-uniform > *{ padding-top:1em; }

.row.gtr-150{ margin-left:-3em; } .row.gtr-150 > *{ padding-left:3em; }
.row.gtr-150.gtr-uniform{ margin-top:-3em; } .row.gtr-150.gtr-uniform > *{ padding-top:3em; }

.row.gtr-200{ margin-left:-4em; } .row.gtr-200 > *{ padding-left:4em; }
.row.gtr-200.gtr-uniform{ margin-top:-4em; } .row.gtr-200.gtr-uniform > *{ padding-top:4em; }

/* Breakpoints map original names */
@media screen and (max-width:1680px){
  .row > .imp-xlarge{ order:-1; }
  .row > .col-1-xlarge{ width:8.33333%; } .row > .off-1-xlarge{ margin-left:8.33333%; }
  .row > .col-2-xlarge{ width:16.66667%; } .row > .off-2-xlarge{ margin-left:16.66667%; }
  .row > .col-3-xlarge{ width:25%; } .row > .off-3-xlarge{ margin-left:25%; }
  .row > .col-4-xlarge{ width:33.33333%; } .row > .off-4-xlarge{ margin-left:33.33333%; }
  .row > .col-5-xlarge{ width:41.66667%; } .row > .off-5-xlarge{ margin-left:41.66667%; }
  .row > .col-6-xlarge{ width:50%; } .row > .off-6-xlarge{ margin-left:50%; }
  .row > .col-7-xlarge{ width:58.33333%; } .row > .off-7-xlarge{ margin-left:58.33333%; }
  .row > .col-8-xlarge{ width:66.66667%; } .row > .off-8-xlarge{ margin-left:66.66667%; }
  .row > .col-9-xlarge{ width:75%; } .row > .off-9-xlarge{ margin-left:75%; }
  .row > .col-10-xlarge{ width:83.33333%; } .row > .off-10-xlarge{ margin-left:83.33333%; }
  .row > .col-11-xlarge{ width:91.66667%; } .row > .off-11-xlarge{ margin-left:91.66667%; }
  .row > .col-12-xlarge{ width:100%; } .row > .off-12-xlarge{ margin-left:100%; }
  .row.gtr-25{ margin-left:-.5em; } .row.gtr-25 > *{ padding-left:.5em; }
  .row.gtr-50{ margin-left:-1em; } .row.gtr-50 > *{ padding-left:1em; }
  .row{ margin-left:-2em; } .row > *{ padding-left:2em; }
  .row.gtr-150{ margin-left:-3em; } .row.gtr-150 > *{ padding-left:3em; }
  .row.gtr-200{ margin-left:-4em; } .row.gtr-200 > *{ padding-left:4em; }
}

@media screen and (max-width:1280px){
  .row > .imp-large{ order:-1; }
  .row > .col-1-large{ width:8.33333%; } .row > .off-1-large{ margin-left:8.33333%; }
  .row > .col-2-large{ width:16.66667%; } .row > .off-2-large{ margin-left:16.66667%; }
  .row > .col-3-large{ width:25%; } .row > .off-3-large{ margin-left:25%; }
  .row > .col-4-large{ width:33.33333%; } .row > .off-4-large{ margin-left:33.33333%; }
  .row > .col-5-large{ width:41.66667%; } .row > .off-5-large{ margin-left:41.66667%; }
  .row > .col-6-large{ width:50%; } .row > .off-6-large{ margin-left:50%; }
  .row > .col-7-large{ width:58.33333%; } .row > .off-7-large{ margin-left:58.33333%; }
  .row > .col-8-large{ width:66.66667%; } .row > .off-8-large{ margin-left:66.66667%; }
  .row > .col-9-large{ width:75%; } .row > .off-9-large{ margin-left:75%; }
  .row > .col-10-large{ width:83.33333%; } .row > .off-10-large{ margin-left:83.33333%; }
  .row > .col-11-large{ width:91.66667%; } .row > .off-11-large{ margin-left:91.66667%; }
  .row > .col-12-large{ width:100%; } .row > .off-12-large{ margin-left:100%; }

  .row.gtr-25{ margin-left:-.375em; } .row.gtr-25 > *{ padding-left:.375em; }
  .row.gtr-50{ margin-left:-.75em; } .row.gtr-50 > *{ padding-left:.75em; }
  .row{ margin-left:-1.5em; } .row > *{ padding-left:1.5em; }
  .row.gtr-150{ margin-left:-2.25em; } .row.gtr-150 > *{ padding-left:2.25em; }
  .row.gtr-200{ margin-left:-3em; } .row.gtr-200 > *{ padding-left:3em; }
}

@media screen and (max-width:1024px){
  .row > .imp-medium{ order:-1; }
  .row > .col-1-medium{ width:8.33333%; } .row > .off-1-medium{ margin-left:8.33333%; }
  .row > .col-2-medium{ width:16.66667%; } .row > .off-2-medium{ margin-left:16.66667%; }
  .row > .col-3-medium{ width:25%; } .row > .off-3-medium{ margin-left:25%; }
  .row > .col-4-medium{ width:33.33333%; } .row > .off-4-medium{ margin-left:33.33333%; }
  .row > .col-5-medium{ width:41.66667%; } .row > .off-5-medium{ margin-left:41.66667%; }
  .row > .col-6-medium{ width:50%; } .row > .off-6-medium{ margin-left:50%; }
  .row > .col-7-medium{ width:58.33333%; } .row > .off-7-medium{ margin-left:58.33333%; }
  .row > .col-8-medium{ width:66.66667%; } .row > .off-8-medium{ margin-left:66.66667%; }
  .row > .col-9-medium{ width:75%; } .row > .off-9-medium{ margin-left:75%; }
  .row > .col-10-medium{ width:83.33333%; } .row > .off-10-medium{ margin-left:83.33333%; }
  .row > .col-11-medium{ width:91.66667%; } .row > .off-11-medium{ margin-left:91.66667%; }
  .row > .col-12-medium{ width:100%; } .row > .off-12-medium{ margin-left:100%; }

  .row.gtr-0{ margin-left:0; } .row.gtr-0 > *{ padding-left:0; }
  .row.gtr-0.gtr-uniform{ margin-top:0; } .row.gtr-0.gtr-uniform > *{ padding-top:0; }
  .row.gtr-25{ margin-left:-.375em; } .row.gtr-25 > *{ padding-left:.375em; }
  .row.gtr-50{ margin-left:-.75em; } .row.gtr-50 > *{ padding-left:.75em; }
  .row{ margin-left:-1.5em; } .row > *{ padding-left:1.5em; }
  .row.gtr-150{ margin-left:-2.25em; } .row.gtr-150 > *{ padding-left:2.25em; }
  .row.gtr-200{ margin-left:-3em; } .row.gtr-200 > *{ padding-left:3em; }
}

@media screen and (max-width:736px){
  .row > .imp-small{ order:-1; }
  .row > .col-1-small{ width:8.33333%; } .row > .off-1-small{ margin-left:8.33333%; }
  .row > .col-2-small{ width:16.66667%; } .row > .off-2-small{ margin-left:16.66667%; }
  .row > .col-3-small{ width:25%; } .row > .off-3-small{ margin-left:25%; }
  .row > .col-4-small{ width:33.33333%; } .row > .off-4-small{ margin-left:33.33333%; }
  .row > .col-5-small{ width:41.66667%; } .row > .off-5-small{ margin-left:41.66667%; }
  .row > .col-6-small{ width:50%; } .row > .off-6-small{ margin-left:50%; }
  .row > .col-7-small{ width:58.33333%; } .row > .off-7-small{ margin-left:58.33333%; }
  .row > .col-8-small{ width:66.66667%; } .row > .off-8-small{ margin-left:66.66667%; }
  .row > .col-9-small{ width:75%; } .row > .off-9-small{ margin-left:75%; }
  .row > .col-10-small{ width:83.33333%; } .row > .off-10-small{ margin-left:83.33333%; }
  .row > .col-11-small{ width:91.66667%; } .row > .off-11-small{ margin-left:91.66667%; }
  .row > .col-12-small{ width:100%; } .row > .off-12-small{ margin-left:100%; }

  .row.gtr-25{ margin-left:-.3125em; } .row.gtr-25 > *{ padding-left:.3125em; }
  .row.gtr-50{ margin-left:-.625em; } .row.gtr-50 > *{ padding-left:.625em; }
  .row{ margin-left:-1.25em; } .row > *{ padding-left:1.25em; }
  .row.gtr-150{ margin-left:-1.875em; } .row.gtr-150 > *{ padding-left:1.875em; }
  .row.gtr-200{ margin-left:-2.5em; } .row.gtr-200 > *{ padding-left:2.5em; }
}

@media screen and (max-width:480px){
  .row > .imp-xsmall{ order:-1; }
  .row > .col-1-xsmall{ width:8.33333%; } .row > .off-1-xsmall{ margin-left:8.33333%; }
  .row > .col-2-xsmall{ width:16.66667%; } .row > .off-2-xsmall{ margin-left:16.66667%; }
  .row > .col-3-xsmall{ width:25%; } .row > .off-3-xsmall{ margin-left:25%; }
  .row > .col-4-xsmall{ width:33.33333%; } .row > .off-4-xsmall{ margin-left:33.33333%; }
  .row > .col-5-xsmall{ width:41.66667%; } .row > .off-5-xsmall{ margin-left:41.66667%; }
  .row > .col-6-xsmall{ width:50%; } .row > .off-6-xsmall{ margin-left:50%; }
  .row > .col-7-xsmall{ width:58.33333%; } .row > .off-7-xsmall{ margin-left:58.33333%; }
  .row > .col-8-xsmall{ width:66.66667%; } .row > .off-8-xsmall{ margin-left:66.66667%; }
  .row > .col-9-xsmall{ width:75%; } .row > .off-9-xsmall{ margin-left:75%; }
  .row > .col-10-xsmall{ width:83.33333%; } .row > .off-10-xsmall{ margin-left:83.33333%; }
  .row > .col-11-xsmall{ width:91.66667%; } .row > .off-11-xsmall{ margin-left:91.66667%; }
  .row > .col-12-xsmall{ width:100%; } .row > .off-12-xsmall{ margin-left:100%; }

  .row.gtr-25{ margin-left:-.3125em; } .row.gtr-25 > *{ padding-left:.3125em; }
  .row.gtr-50{ margin-left:-.625em; } .row.gtr-50 > *{ padding-left:.625em; }
  .row{ margin-left:-1.25em; } .row > *{ padding-left:1.25em; }
  .row.gtr-150{ margin-left:-1.875em; } .row.gtr-150 > *{ padding-left:1.875em; }
  .row.gtr-200{ margin-left:-2.5em; } .row.gtr-200 > *{ padding-left:2.5em; }
}

/* =========================================================
   Containers
   ========================================================= */

.container{ margin:0 auto; max-width:calc(100% - 4.5em); width:45em; }
.container.xsmall{ width:11.25em; }
.container.small{ width:22.5em; }
.container.medium{ width:33.75em; }
.container.large{ width:56.25em; }
.container.xlarge{ width:67.5em; }
.container.max{ width:100%; }

@media screen and (max-width:1024px){ .container{ width:100% !important; } }
@media screen and (max-width:480px){ .container{ max-width:calc(100% - 3.375em); } }

/* =========================================================
   Sections & Headers
   ========================================================= */

section.special, article.special{ text-align:center; }

header p{ color:var(--ink-muted); margin:0 0 1.6875em; }
header h2 + p{ font-size:1.25em; margin-top:-.5em; line-height:1.5; }
header h3 + p{ font-size:1.1em; margin-top:-.35em; line-height:1.5; }
header h4 + p, header h5 + p, header h6 + p{ font-size:.9em; margin-top:-.25em; line-height:1.5; }

header.major h2{ color:var(--accent); font-size:3.5em; }
header.major h2 + p{ color:var(--ink); font-size:1.75em; font-weight:700; margin-top:-.75em; }

/* =========================================================
   Forms
   ========================================================= */

form{ margin:0 0 2.25em; }
label{
  color:var(--heading); display:block; font-size:.9em; font-weight:700; margin:0 0 1.125em;
}
input[type="text"], input[type="password"], input[type="email"], select, textarea{
  border-radius:var(--radius); border:2px solid var(--border); color:inherit; display:block; width:100%;
  outline:0; padding:0 1em; background:#fff;
}
input[type="text"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid, select:invalid, textarea:invalid{ box-shadow:none; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus{ border-color:var(--accent); }

select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23e5e7eb' /%3E%3C/svg%3E");
  background-size:1.25em; background-repeat:no-repeat; background-position:calc(100% - 1em) center;
  height:2.75em; padding-right:2.75em; text-overflow:ellipsis;
}
select option{ color:var(--heading); background:#fff; }
select:focus::-ms-value{ background-color:transparent; }
select::-ms-expand{ display:none; }

input[type="text"], input[type="password"], input[type="email"], select{ height:2.75em; }
textarea{ padding:.75em 1em; }

input[type="checkbox"], input[type="radio"]{
  appearance:none; display:block; float:left; margin-right:-2em; opacity:0; width:1em; z-index:-1;
}
input[type="checkbox"] + label, input[type="radio"] + label{
  color:var(--ink); cursor:pointer; display:inline-block; font-size:1em; font-weight:400;
  padding-left:2.4em; padding-right:.75em; position:relative; text-decoration:none;
}
input[type="checkbox"] + label::before, input[type="radio"] + label::before{
  display:inline-block; background:#fafafa; border-radius:var(--radius); border:2px solid var(--border);
  content:''; font-size:.8em; height:2.0625em; width:2.0625em; line-height:2.0625em; text-align:center;
  position:absolute; left:0; top:0;
}
input[type="radio"] + label::before{ border-radius:100%; }

input[type="checkbox"]:checked + label::before, input[type="radio"]:checked + label::before{
  background:var(--accent); border-color:var(--accent); color:#fff; content:'\f00c';
  font-family:'Font Awesome 5 Free'; font-weight:900;
}
input[type="checkbox"]:focus + label::before, input[type="radio"]:focus + label::before{ border-color:var(--accent); }

::placeholder{ color:#9ca3af !important; font-style:italic; opacity:1; }

/* =========================================================
   Components
   ========================================================= */

.box{
  border-radius:var(--radius); border:2px solid var(--border); padding:1.5em; margin-bottom:2.25em;
  box-shadow:var(--shadow-soft); background:#fff;
}
.box > :last-child, .box > :last-child > :last-child, .box > :last-child > :last-child > :last-child{ margin-bottom:0; }
.box.alt{ border:0; border-radius:0; padding:0; box-shadow:none; }

.icon{ text-decoration:none; border-bottom:none; position:relative; }
.icon::before{
  display:inline-block; line-height:inherit; font-family:'Font Awesome 5 Free'; font-weight:400;
  -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; text-rendering:auto;
}
.icon.solid::before{ font-weight:900; }
.icon.brands::before{ font-family:'Font Awesome 5 Brands'; }
.icon > .label{ display:none; }

/* Images */
.image{ border:0; border-radius:var(--radius); display:inline-block; position:relative; }
.image img{ display:block; border-radius:var(--radius); width:100%; }
.image[data-position] img{ object-fit:cover; position:absolute; inset:0; width:100%; height:100%; }
.image.left{ float:left; margin:0 2.5em 2em 0; top:.25em; }
.image.right{ float:right; margin:0 0 2em 2.5em; top:.25em; }
.image.fit{ display:block; margin:0 0 2.25em; width:100%; }
.image.avatar{ border-radius:100%; overflow:hidden; }
.image.avatar img{ border-radius:100%; }
.image.main{ display:block; height:20em; border-radius:0; }
.image.main img{ border-radius:0; }

/* Lists */
ol{ list-style:decimal; margin:0 0 2.25em; padding-left:1.25em; }
ol li{ padding-left:.25em; }
ul{ list-style:disc; margin:0 0 2.25em; padding-left:1em; }
ul li{ padding-left:.5em; }
ul.alt{ list-style:none; padding-left:0; }
ul.alt li{ border-top:2px solid var(--border); padding:.5em 0; }
ul.alt li:first-child{ border-top:0; padding-top:0; }

ul.actions{
  display:flex; list-style:none; margin-left:-1.125em; padding-left:0; gap:0;
}
ul.actions li{ padding:0 0 0 1.125em; vertical-align:middle; }
ul.actions.special{ justify-content:center; width:100%; margin-left:0; }
ul.actions.special li:first-child{ padding-left:0; }
ul.actions.stacked{ flex-direction:column; margin-left:0; }
ul.actions.stacked li{ padding:1.125em 0 0 0; }
ul.actions.stacked li:first-child{ padding-top:0; }
ul.actions.fit{ width:calc(100% + 1.125em); }
ul.actions.fit li{ flex:1 1 0%; width:100%; }
ul.actions.fit li > *{ width:100%; }
ul.actions.fit.stacked{ width:100%; }

@media screen and (max-width:480px){
  ul.actions:not(.fixed){
    flex-direction:column; margin-left:0; width:100% !important;
  }
  ul.actions:not(.fixed) li{ flex:1 1 auto; padding:1.125em 0 0 0; text-align:center; width:100%; }
  ul.actions:not(.fixed) li > *{ width:100%; }
  ul.actions:not(.fixed) li:first-child{ padding-top:0; }
  ul.actions:not(.fixed) li .button.icon:before{ margin-left:-.5rem; }
}

/* Feature Icons */
ul.feature-icons{ list-style:none; padding-left:0; }
ul.feature-icons li{
  display:inline-block; width:48%; margin:0 0 1.6875em; padding:.35em 0 0 3.5em; position:relative; vertical-align:top;
}
ul.feature-icons li::before{
  content:''; display:block; background:var(--accent); color:#fff; border-radius:100%;
  height:2.5em; width:2.5em; line-height:2.5em; position:absolute; left:0; top:0; text-align:center;
  -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased;
}

/* Icons cluster */
ul.icons{ list-style:none; padding-left:0; }
ul.icons li{ display:inline-block; padding:0 1em 0 0; }
ul.icons li:last-child{ padding-right:0 !important; }
ul.icons li .icon::before{ font-size:1.25em; }

/* Tables */
.table-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; margin:0 0 2.25em; }
table tbody tr{ border:2px solid var(--border); border-left:0; border-right:0; }
table tbody tr:nth-child(2n+1){ background:var(--bg-alt); }
table td{ padding:.75em; }
table th{
  color:var(--ink-muted); font-size:.9em; font-weight:700; padding:0 .75em .75em .75em; text-align:left;
}
table thead{ border-bottom:4px solid var(--border); }
table tfoot{ border-top:4px solid var(--border); }
table.alt{ border-collapse:separate; }
table.alt tbody tr td{
  border:2px solid var(--border); border-left-width:0; border-top-width:0;
}
table.alt tbody tr td:first-child{ border-left-width:2px; }
table.alt tbody tr:first-child td{ border-top-width:2px; }
table.alt thead{ border-bottom:0; } table.alt tfoot{ border-top:0; }

/* Buttons */
.button, input[type="submit"], input[type="reset"], input[type="button"]{
  appearance:none; transition:background-color .2s ease-in-out, color .2s ease-in-out;
  background:var(--accent); color:#fff !important; border:0; border-radius:var(--radius);
  cursor:pointer; display:inline-block; font-weight:700; height:2.75em; line-height:2.75em; padding:0 1.5em; white-space:nowrap;
}
.button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover{ background:var(--accent-600); }
.button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active{ background:var(--accent-700); }

.button.icon, input[type="submit"].icon, input[type="reset"].icon, input[type="button"].icon{ padding-left:1.35em; }
.button.icon:before, input[type="submit"].icon:before, input[type="reset"].icon:before, input[type="button"].icon:before{ margin-right:.5em; }

.button.fit, input[type="submit"].fit, input[type="reset"].fit, input[type="button"].fit{ width:100%; }
.button.small, input[type="submit"].small, input[type="reset"].small, input[type="button"].small{ font-size:.8em; }
.button.large, input[type="submit"].large, input[type="reset"].large, input[type="button"].large{ font-size:1.35em; }

.button.alt, input[type="submit"].alt, input[type="reset"].alt, input[type="button"].alt{
  background:transparent; box-shadow:inset 0 0 0 2px var(--border); color:var(--ink) !important;
}
.button.alt:hover, input[type="submit"].alt:hover, input[type="reset"].alt:hover, input[type="button"].alt:hover{
  background:var(--bg-alt);
}
.button.alt.icon:before, input[type="submit"].alt.icon:before, input[type="reset"].alt.icon:before, input[type="button"].alt.icon:before{
  color:var(--ink-muted);
}

.button.primary, input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary{
  background:var(--accent); color:#fff !important;
}
.button.primary:hover, input[type="submit"].primary:hover, input[type="reset"].primary:hover, input[type="button"].primary:hover{
  background:var(--accent-600);
}
.button.primary:active, input[type="submit"].primary:active, input[type="reset"].primary:active, input[type="button"].primary:active{
  background:var(--accent-700);
}

.button:disabled, .button.disabled,
input[type="submit"]:disabled, input[type="reset"]:disabled, input[type="button"]:disabled{
  background:#9ca3af !important; color:#fff !important; box-shadow:inset 0 -.15em 0 rgba(0,0,0,.15);
  opacity:.5; cursor:default;
}

/* =========================================================
   Header (Right Sidebar)
   ========================================================= */

#header{
  display:flex; flex-direction:column; justify-content:space-between;
  position:fixed; top:0; right:0; width:23em; height:100%;
  background:var(--header-bg); color:var(--header-fg); text-align:center; overflow-y:auto;
}
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6{ color:#fff; }
#header a{ color:var(--header-fg); } #header a:hover{ color:#ffffff !important; }
#header > header{ padding:3em; flex-shrink:0; }
#header > header .avatar{ display:block; margin:0 auto 2.25em; width:8em; }
#header > header h1{ font-size:1.75em; margin:0; }
#header > header p{ color:var(--header-fg); font-style:italic; margin:1em 0 0; }
#header > footer{ flex-shrink:0; padding:2em; width:100%; }
#header > footer .icons{ margin:0; }
#header > footer .icons li a{ color:#cfd5de; }

#header > nav{ flex-grow:1; }
#header > nav ul{ margin:0; padding:0; }
#header > nav ul li{ border-top:2px solid #1f2530; }
#header > nav ul li:first-child{ border-top:0; }
#header > nav ul li a{
  transition:none; border:0; color:#fff !important; display:block; padding:.85em 0; text-decoration:none;
}
#header > nav ul li a.active{ background:#fff; color:var(--header-bg) !important; }

/* =========================================================
   Layout Wrapper & Main
   ========================================================= */

#wrapper{ background:#fff; padding-right:23em; }

#main > section{ border-top:6px solid var(--border); }
#main > section:first-child{ border-top:0; }
#main > section > .container{ padding:6em 0 4em; }

/* =========================================================
   Footer
   ========================================================= */

#footer{
  background:var(--bg-alt); border-top:0; color:#9ca3af; overflow:hidden; padding:4em 0 2em;
}
#footer .copyright{ line-height:1em; list-style:none; padding:0; }
#footer .copyright li{
  display:inline-block; font-size:.8em; margin-left:1em; padding-left:1em; border-left:1px solid var(--muted-border);
}
#footer .copyright li:first-child{ border-left:0; margin-left:0; padding-left:0; }
#footer .copyright li a{ color:inherit; }

/* =========================================================
   Title Bar (Mobile Panel)
   ========================================================= */

#titleBar{ display:none; }

@media screen and (max-width:1024px){
  html, body{ overflow-x:hidden; }
  body, input, select, textarea{ font-size:12pt; }

  .image.left, .image.right{ max-width:40%; }
  .image.left img, .image.right img{ width:100%; }
  .image.main{ height:20em; }

  #header{
    backface-visibility:hidden; transition:transform .5s ease;
    display:block; position:fixed; top:0; right:0; width:23em; height:100%; z-index:10002;
    transform:translateX(23em);
  }
  #header > footer{ position:relative; margin:.5em 0 0; }

  #wrapper{
    backface-visibility:hidden; transition:transform .5s ease; padding:44px 0 1px 0;
  }

  #titleBar{
    display:block; position:fixed; top:0; left:0; width:100%; height:44px; z-index:10001;
    background:var(--header-bg); color:#fff; min-width:320px;
    backface-visibility:hidden; transition:transform .5s ease;
  }
  #titleBar .title{ color:#fff; display:block; font-weight:700; height:44px; line-height:44px; padding:0 1em; text-align:left; }
  #titleBar .title a{ border:0; text-decoration:none; }
  #titleBar .toggle{
    position:absolute; top:0; right:0; width:6em; height:4em; text-decoration:none; border:0; outline:0;
  }
  #titleBar .toggle:before{
    content:'\f0c9'; display:block; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:18px;
    background:var(--accent); color:#fff; width:64px; height:44px; line-height:44px; text-align:center; position:absolute; right:0; top:0;
  }

  body.header-visible #wrapper, body.header-visible #titleBar{ transform:translateX(-23em); }
  body.header-visible #header{ transform:translateX(0); }
}

/* =========================================================
   Size Tweaks
   ========================================================= */

@media screen and (max-width:1680px){
  body, input, select, textarea{ font-size:13pt; }
  #header{ width:21em; }
  #header > header{ padding:2em; }
  #header > footer{ padding:1.5em; }
  #wrapper{ padding-right:21em; }
  #main > section > .container{ padding:4em 0 2em; }
}

@media screen and (max-width:1280px){
  body, input, select, textarea{ font-size:11pt; }
  #header{ width:20em; }
  #wrapper{ padding-right:20em; }
}

@media screen and (max-width:736px){
  body, input, select, textarea{ font-size:12pt; }
  h1 br, h2 br, h3 br, h4 br, h5 br, h6 br{ display:none; }
  h2{ font-size:1.75em; }
  h3{ font-size:1.5em; }
  h4{ font-size:1em; }

  .image.left{ margin:0 1.5em 1em 0; }
  .image.right{ margin:0 0 1em 1.5em; }
  .image.main{ height:12em; }

  header br{ display:none; }
  header.major h2{ font-size:2.5em; }
  header.major h2 + p{ font-size:1.5em; }

  .features article .image{ display:block; margin:0 0 2.25em; padding-right:0; width:100%; }
  .features article .inner{ display:block; width:100%; }

  #header{ width:17em; transform:translateX(17em); right:0; }
  #header > header{ padding:2em; }
  #header > header .avatar{ margin:0 auto 1.6875em; width:6em; }
  #header > header h1{ font-size:1.5em; }
  #header > header p{ margin:1em 0 0; }
  #header > footer{ padding:1.5em; }

  #main > section > .container{ padding:2em 0 0; }

  #footer{ text-align:center; }
  #footer .copyright li{
    border-left:0; display:block; line-height:1.75em; margin:.75em 0 0 0; padding-left:0;
  }
  #footer .copyright li:first-child{ margin-top:0; }

  #titleBar .toggle{ width:6em; height:4em; }
  #titleBar .toggle:before{ font-size:14px; width:44px; }
  body.header-visible #wrapper, body.header-visible #titleBar{ transform:translateX(-17em); }
}

@media screen and (max-width:480px){
  html, body{ min-width:320px; }
  body, input, select, textarea{ font-size:12pt; }

  ul.actions{ margin:0 0 2.25em; }
  ul.actions li{ display:block; padding:1.125em 0 0 0; text-align:center; width:100%; }
  ul.actions li:first-child{ padding-top:0; }
  ul.actions li > *{ width:100%; margin:0 !important; }
  ul.actions li > *.icon:before{ margin-left:-2em; }

  ul.actions.small li{ padding:.5625em 0 0 0; }
  ul.actions.small li:first-child{ padding-top:0; }

  ul.feature-icons li{ display:block; width:100%; }

  .button, input[type="submit"], input[type="reset"], input[type="button"]{ padding:0; }
}