/* ============================================================
   landing2026.css — Morad Creative
   Self-contained styles for the landing2026.* Morweb templates
   (hero / problem / services / testimonials / final_cta).

   Structure:
     1. Tokens          .landing2026 base variables
     2. Theme blocks    .landing-theme--green / --blue / --orange
     3. Primitives      container, typography, em, buttons, links, label
     4. Sections        hero, problem, services, testimonials, final CTA
     5. Responsive
     6. Motion

   Patterns (container width, buttons, em accent, section label,
   entrance animation) are adapted from css/landing.css. The old
   file is NOT linked — everything the 2026 templates need lives here.
   Root class is .landing2026 (not .landing-page) so the two families
   never collide. Colour is driven by a Theme <select> that stamps
   .landing-theme--{green|blue|orange} onto each section root.
   ============================================================ */


.ctaLink {display: none;}

/* ============ 1. TOKENS ============ */
.landing2026 {
  /* Neutrals — shared across all three themes (pixel-sampled from mockups) */
  --paper: #ffffff;
  --paper-warm: #f8f8f8;   /* testimonials background */
  --paper-deep: #efefef;

  --ink: #111111;
  --ink-soft: #333333;
  --muted: #888B8D;

  /* Dark "problem" section */
  --dark: #0f170e;
  --dark-card: rgba(255, 255, 255, 0.04);
  --dark-card-border: rgba(255, 255, 255, 0.08);

  --rule: rgba(17, 17, 17, 0.10);
  --rule-strong: rgba(17, 17, 17, 0.20);

  --on-dark-strong: rgba(255, 255, 255, 0.95);
  --on-dark-muted: rgba(255, 255, 255, 0.65);
  --on-dark-faint: rgba(255, 255, 255, 0.45);

  --on-color-strong: rgba(255, 255, 255, 0.95);
  --on-color-muted: rgba(255, 255, 255, 0.75);

  /* Theme fallbacks — overridden by .landing-theme--* below.
     Default to green so an un-themed block still renders sanely. */
  --theme-bg: #01914f;
  --accent: #01914f;
  --accent-rgb: 1, 145, 79;
  --accent-deep: #017a42;
  --accent-soft: #7fd6a6;
  --accent-bright: #4fdd8c;
  --bubble: rgba(255, 255, 255, 0.22);

  --section-y: clamp(4rem, 10vw, 8rem);

  --weight-display: 400;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-base: 280ms;
  --duration-slow: 480ms;
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.35);

  font-family: graphie, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.landing2026 :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.landing2026 ::selection { background: var(--accent); color: var(--paper); }
.landing2026 *, .landing2026 *::before, .landing2026 *::after { box-sizing: border-box; }

/* ============ 2. THEME BLOCKS ============
   Values pixel-sampled from the mockups (Group 1 green, 2 blue, 3 orange).
   Set on each section root, e.g. class="landing2026 landing2026-hero landing-theme--green".
   Everything accent-driven (headings, icons, highlights, hero/CTA bg) follows. */
.landing-theme--green  { --theme-bg:#01914f; --accent:#01914f; --accent-rgb:1,145,79;  --accent-deep:#017a42; --accent-soft:#7fd6a6; --accent-bright:#4fdd8c; --bubble:rgba(255,255,255,0.22); }
.landing-theme--blue   { --theme-bg:#0e57c2; --accent:#0e57c2; --accent-rgb:14,87,194; --accent-deep:#0b49a3; --accent-soft:#8fb8f2; --accent-bright:#66a8ff; --bubble:rgba(255,255,255,0.22); }
.landing-theme--orange { --theme-bg:#a55800; --accent:#a55800; --accent-rgb:165,88,0;  --accent-deep:#8a4900; --accent-soft:#f0b26a; --accent-bright:#ffb35c; --bubble:rgba(255,255,255,0.20); }

/* ============ 3. PRIMITIVES ============ */
.landing2026-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  position: relative;
  z-index: 5;
}

.landing2026 h1, .landing2026 h2, .landing2026 h3,
.landing2026 h4, .landing2026 h5, .landing2026 h6 {
  font-family: ivyjournal, serif;
  font-weight: var(--weight-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.landing2026 h1, .landing2026 h2 { text-wrap: balance; }
.landing2026 p { margin: 0; }

/* Accent-word convention: wrap emphasis in <em>. */
.landing2026 em { font-style: italic; color: var(--accent); font-weight: var(--weight-display); }

/* Eyebrow / section label — small uppercase audience tag */
.landing2026-eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: graphie, sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 1.6rem;
}
/* On a full-colour band the eyebrow reads as a lightened tint of the theme */
.landing2026-hero .landing2026-eyebrow { color: var(--accent-soft); }

/* --- Buttons ---
   --light : white pill, dark text  (hero primary, on colour)
   --dark  : near-black pill, white text (services + final CTA) */
.landing2026-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1.05rem 1.9rem;
  border-radius: 100px;
  text-decoration: none;
  font-family: graphie, sans-serif;
  font-size: 1rem; font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}
.landing2026-btn .arrow { transition: transform var(--duration-base) var(--ease); }

.landing2026-btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.landing2026-btn--dark  { background: var(--ink);   color: var(--paper); border-color: var(--ink); }

@media (hover: hover) {
  .landing2026-btn--light:hover { background: var(--ink);   color: var(--paper); border-color: var(--ink);   transform: translateY(-2px); }
  .landing2026-btn--dark:hover  { background: var(--accent); color: var(--paper); border-color: var(--accent); transform: translateY(-2px); }
  .landing2026-btn:hover .arrow { transform: translateX(4px); }
}
.landing2026-btn:active { transform: translateY(0); }

/* Text link — "View our case studies →" */
.landing2026-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: graphie, sans-serif;
  font-size: 0.95rem; font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--duration-base) var(--ease), gap var(--duration-base) var(--ease);
}
.landing2026-link .arrow { transition: transform var(--duration-base) var(--ease); }
@media (hover: hover) { .landing2026-link:hover { color: var(--accent); } .landing2026-link:hover .arrow { transform: translateX(4px); } }
/* On the colour hero the link sits on the theme background */
.landing2026-hero .landing2026-link { color: var(--on-color-strong); }
@media (hover: hover) { .landing2026-hero .landing2026-link:hover { color: var(--paper); } }

/* ============ 4a. HERO ============ */
.landing2026-hero {
  background: var(--theme-bg);
  color: var(--paper);
  padding: clamp(3rem, 8vw, 6.5rem) 0 0;
  position: relative;
  overflow: hidden;
}
.landing2026-hero .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.landing2026-hero .hero-copy { padding-bottom: clamp(3rem, 7vw, 6rem); }
.landing2026-hero h1 {
  color: var(--paper);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
  max-width: 15ch;
}
.landing2026-hero .hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.65;
  max-width: 52ch;
  color: var(--on-color-strong);
  margin-bottom: 2.4rem;
}
.landing2026-hero .hero-actions {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
}

/* Right column: speech-bubble quote above a B&W cut-out photo */
.landing2026-hero .hero-visual {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}
.landing2026-hero .hero-bubble {
  position: relative;
  z-index: 3;
  background: var(--bubble);
  color: var(--paper);
  border-radius: 18px;
  padding: 1.6rem 1.8rem;
  /* Negative margin drops the bubble down into the cut-out's transparent
     headroom so it sits closer to the person. Make it MORE negative to move
     the quote further down toward the person, less to raise it. */
  margin-bottom: -3.5rem;
  max-width: 30rem;
  font-family: graphie, sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  backdrop-filter: blur(2px);
}
.landing2026-hero .hero-bubble em { color: var(--accent-bright); font-style: normal; font-weight: 700; }
.landing2026-hero .hero-bubble::after {
  content: '';
  position: absolute;
  left: 2.2rem; bottom: -30px;
  width: 34px; height: 30px;
  background: var(--bubble);
  /* Bigger, curved tail: vertical right edge, arc sweeping up on the left. */
  border-radius: 0 0 0 100%;
}
.landing2026-hero .hero-cutout {
  position: relative;
  z-index: 2;
  align-self: end;
  max-width: 100%;
}
.landing2026-hero .hero-cutout img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.05);
  /* Cut-out PNGs sit flush to the section's bottom edge. */
}

/* ============ 4b. PROBLEM (dark) ============ */
.landing2026-problem {
  background: var(--dark);
  color: var(--paper);
  padding: var(--section-y) 0;
}
.landing2026-problem .problem-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.landing2026-problem h2 {
  color: var(--accent);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}
.landing2026-problem .problem-sub {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--on-dark-muted);
  max-width: 60ch;
}
.landing2026-problem .problem-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.landing2026-problem .card {
  background: var(--dark-card);
  border: 1px solid var(--dark-card-border);
  border-radius: 6px;
  padding: 2.25rem 1.9rem;
}
.landing2026-problem .card-icon {
  color: var(--accent);
  margin-bottom: 1.5rem;
  display: inline-flex;
}
.landing2026-problem .card-icon svg,
.landing2026-problem .card-icon img { width: auto; height: 40px; max-width: 100%; display: block; }
.landing2026-problem .card-icon .fa { font-size: 32px; line-height: 1; }
.landing2026-problem .card-title {
  font-family: ivyjournal, serif;
  font-weight: var(--weight-display);
  font-size: 1.4rem;
  color: var(--paper);
  margin-bottom: 0.7rem;
}
.landing2026-problem .card-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

/* ============ 4c. SERVICES (white) ============ */
.landing2026-services {
  background: var(--paper);
  padding: var(--section-y) 0;
}
.landing2026-services .services-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.landing2026-services h2 {
  color: var(--accent);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.landing2026-services .services-header .landing2026-btn { flex-shrink: 0; margin-top: 0.4rem; }
.landing2026-services .services-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.landing2026-services .col-icon { color: var(--accent); margin-bottom: 1rem; display: inline-flex; }
.landing2026-services .col-icon svg,
.landing2026-services .col-icon img { width: auto; height: 36px; max-width: 100%; display: block; }
.landing2026-services .col-icon .fa { font-size: 28px; line-height: 1; }
.landing2026-services .col-title {
  font-family: ivyjournal, serif;
  font-weight: var(--weight-display);
  font-size: 1.3rem;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.landing2026-services .col-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34ch;
}
.landing2026-services .services-image {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--paper-deep);
}
.landing2026-services .services-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ 4d. TESTIMONIALS (light gray) ============ */
.landing2026-testimonials {
  background: var(--paper-warm);
  padding: var(--section-y) 0;
}
.landing2026-testimonials h2 {
  text-align: center;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.landing2026-testimonials .quote-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  max-width: 1000px;
  margin: 0 auto;
}
.landing2026-testimonials .quote-card {
  background: var(--paper);
  border-radius: 6px;
  padding: 2.25rem 2.25rem 2rem;
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.05);
}
.landing2026-testimonials .quote-text {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.landing2026-testimonials .quote-name {
  font-family: graphie, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
  margin-bottom: 0.2rem;
}
.landing2026-testimonials .quote-role {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ============ 4e. FINAL CTA (full colour) ============ */
.landing2026-final-cta {
  background: var(--theme-bg);
  color: var(--paper);
  padding: clamp(4rem, 10vw, 8rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.landing2026-final-cta::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.landing2026-final-cta .final-inner {position: relative;z-index: 2;max-width: 850px;margin: 0 auto;}
.landing2026-final-cta h2 {
  color: var(--paper);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
}
.landing2026-final-cta h2 em { color: var(--paper); }
.landing2026-final-cta .final-line {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--on-color-muted);
  margin-bottom: 2.4rem;
}
/* The CTA band background IS --accent, so the default dark-button hover
   (→ --accent) would blend in. Invert to white-on-dark here instead. */
@media (hover: hover) {
  .landing2026-final-cta .landing2026-btn--dark:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
  }
}

/* ============ 5. RESPONSIVE ============ */
@media (max-width: 960px) {
  .landing2026-hero .hero-grid { grid-template-columns: 1fr; }
  .landing2026-hero .hero-copy { padding-bottom: 2rem; }
  .landing2026-hero .hero-visual { max-width: 460px; }
  .landing2026-services .services-header { flex-direction: column; }
}
@media (max-width: 820px) {
  .landing2026-problem .problem-cards,
  .landing2026-services .services-cols,
  .landing2026-testimonials .quote-cards { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .landing2026-hero .hero-bubble { font-size: 34px; }
}
@media (max-width: 768px) {
  /* Extra top clearance so the fixed page header (logo / menu) doesn't
     overlap the hero eyebrow on mobile. */
  .landing2026-hero { padding-top: 6rem; }
}
@media (max-width: 560px) {
  .landing2026-hero .hero-actions { gap: 1rem; }
  .landing2026-btn { width: 100%; justify-content: center; }
  .landing2026-hero .hero-bubble { font-size: 26px; }
}

/* ============ 6. MOTION ============ */
@keyframes landing2026FadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing2026-hero .landing2026-eyebrow { animation: landing2026FadeUp 0.8s ease 0.1s backwards; }
.landing2026-hero h1                   { animation: landing2026FadeUp 1s ease 0.2s backwards; }
.landing2026-hero .hero-sub            { animation: landing2026FadeUp 0.8s ease 0.4s backwards; }
.landing2026-hero .hero-actions        { animation: landing2026FadeUp 0.8s ease 0.55s backwards; }
.landing2026-hero .hero-bubble         { animation: landing2026FadeUp 1s ease 0.5s backwards; }
.landing2026-hero .hero-cutout         { animation: landing2026FadeUp 1s ease 0.65s backwards; }

@media (prefers-reduced-motion: reduce) {
  .landing2026 *, .landing2026 *::before, .landing2026 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   MORWEB OVERRIDES — TEMPLATE OPTIONS
   Styles the Morweb CMS block-options dialogs so `_tpl-box` groups
   render as clean labelled boxes with a coloured `.formGroup`
   header bar. Verbatim port of the ___ brent11 essential.css
   "Template Options" block — the full `.mwWindow .optionsPanel`
   selectors are kept so these rules match Morweb's own specificity
   and override the platform defaults.

   The variables the block references (--black, --info, …) live in
   root.css on brent11 but not on this site, so they are defined
   below on `.mwWindow`. Scoping them to `.mwWindow` keeps them
   editor-only — zero effect on the public-facing pages.
   ============================================================ */
.mwWindow {
  --black: #000000;
  --white: #ffffff;
  --gray-7: #495057;
  --info: #007BFF;
  --border-radius: 4px;
  --font-weight-bold: 700;
  --font-weight-normal: 400;
}

/*!
 |-----------------------------------------------------------------------------------------
 |
 |
 | Morweb Overrides - Template Options - Start
 |
 |
 |-----------------------------------------------------------------------------------------
*/
.mwWindow .optionsPanel .mwDialog {
  margin-bottom: 30px;
}
.mwWindow .optionsPanel .mwDialog label {
  color: var(--black);
  font-weight: var(--font-weight-bold);
}
.mwWindow .optionsPanel .mwDialog dt {
  padding-left: 4px;
  padding-right: 4px;
  color: var(--black);
  font-weight: var(--font-weight-bold);
}
.mwWindow .optionsPanel .mwDialog dt:before {
  display: none;
}
.mwWindow .optionsPanel .mwDialog input[type=color] {
  margin: 4px;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox {
  background-color: transparent;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox:before {
  background-color: #ffffff;
}
.mwWindow .optionsPanel .mwDialog dd dl {
  margin: 0;
}
.mwWindow .optionsPanel .mwDialog dd dt {
  padding-left: 4px;
  padding-right: 4px;
}
.mwWindow .optionsPanel .mwDialog dd dd {
  padding-left: 0;
  padding-right: 0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.selectEx.browseFile {
  height: 266px;
}
.mwWindow .optionsPanel .mwDialog .mwInput.selectEx .inputWrap .image {
  background-size: contain;
}
.mwWindow .optionsPanel .mwDialog .formGroup {
  margin-bottom: 5px;
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
}
.mwWindow .optionsPanel .mwDialog dd > hr {
  height: 1px;
  margin: 16px 4px 6px;
}
.mwWindow .optionsPanel .mwDialog ._tpl-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.mwWindow .optionsPanel .mwDialog ._tpl-inline label {
  flex: 0 1 auto;
  margin-right: 10px;
}
.mwWindow .optionsPanel .mwDialog ._tpl-inline .mwInput {
  flex: 1 0 auto;
}
.mwWindow .optionsPanel .mwDialog dt._tpl-info,
.mwWindow .optionsPanel .mwDialog dd._tpl-info {
  position: relative;
  padding: 5px 10px;
  margin: 0 4px 4px;
  font-size: 13px;
  color: var(--gray-7);
  font-weight: var(--font-weight-normal);
  border-left: 3px solid var(--info);
  background-color: #eee;
}
.mwWindow .optionsPanel .mwDialog._tpl-box {
  margin: 30px 0;
  padding: 0 0 15px;
  border-radius: var(--border-radius);
  background-color: #eee;
}
.mwWindow .optionsPanel .mwDialog._tpl-box > dt {
  padding-left: 19px;
  padding-right: 19px;
}
.mwWindow .optionsPanel .mwDialog._tpl-box > dd {
  padding-left: 15px;
  padding-right: 15px;
}
.mwWindow .optionsPanel .mwDialog._tpl-box.shiftUp, .mwWindow .optionsPanel .mwDialog._tpl-box:first-of-type {
  margin-top: 0;
}
.mwWindow .optionsPanel .mwDialog._tpl-box .formGroup {
  padding: 10px 19px;
  margin-bottom: 0;
  color: #fff;
  background: var(--info);
}
.mwWindow .optionsPanel .mwDialog._tpl-box .formGroup + dd {
  margin-top: 14px;
}
.mwWindow .optionsPanel .mwDialog._tpl-box dt._tpl-info,
.mwWindow .optionsPanel .mwDialog._tpl-box dd._tpl-info {
  margin: 0 19px 4px;
  background-color: #ddd;
}
.mwWindow .optionsPanel .mwDialog._tpl-box dd dt._tpl-info,
.mwWindow .optionsPanel .mwDialog._tpl-box dd dd._tpl-info {
  padding: 5px 10px;
  margin: 0 4px 4px;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color {
  height: auto;
  border: 2px solid #DEDEDE;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
  background-image: none;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color:before {
  display: none;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color .icon {
  height: auto;
  line-height: 0;
  text-indent: -9999px;
  padding: 0 0 100% 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--white);
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color .icon:before {
  display: none;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color.hover {
  border-color: #2EB7A0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color.checked {
  background-image: url(/images/static/svg/icon-checkmark-1-green.svg);
  border: 4px solid #2EB7A0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color-empty {
  height: auto;
  border: 2px solid #DEDEDE;
  border-radius: 50%;
  transition: border linear 200ms;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color-empty:before {
  display: none;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color-empty .icon {
  overflow: hidden;
  height: auto;
  line-height: 0;
  text-indent: -9999px;
  padding: 0 0 100% 0;
  border-radius: 50%;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color-empty .icon:before {
  display: none;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color-empty .icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 145%;
  height: 2px;
  background-color: #DEDEDE;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  transition: background-color linear 200ms;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color-empty.hover {
  border-color: #2EB7A0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color-empty.hover .icon:after {
  background-color: #2EB7A0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color-empty.checked {
  border: 4px solid #2EB7A0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-color-empty.checked .icon:after {
  background-color: #2EB7A0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img {
  height: auto;
  border: 2px solid #DEDEDE;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: var(--white);
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img:before {
  display: none;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img .icon {
  height: auto;
  line-height: 0;
  text-indent: -9999px;
  padding: 0 0 56% 0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img .icon:before {
  display: none;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img.hover {
  border-color: #2EB7A0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img.checked {
  border-color: #2EB7A0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img-empty {
  height: auto;
  border: 2px solid #DEDEDE;
  transition: border linear 200ms;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img-empty:before {
  display: none;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img-empty .icon {
  overflow: hidden;
  height: auto;
  line-height: 0;
  text-indent: -9999px;
  padding: 0 0 56% 0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img-empty .icon:before {
  display: none;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img-empty .icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 145%;
  height: 2px;
  background-color: #DEDEDE;
  -webkit-transform: translate(-50%, -50%) rotate(30deg);
          transform: translate(-50%, -50%) rotate(30deg);
  transition: background-color linear 200ms;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img-empty.hover {
  border-color: #2EB7A0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img-empty.hover .icon:after {
  background-color: #2EB7A0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img-empty.checked {
  border-color: #2EB7A0;
}
.mwWindow .optionsPanel .mwDialog .mwInput.checkbox._tpl-checkbox-img-empty.checked .icon:after {
  background-color: #2EB7A0;
}

/*
 |-----------------------------------------------------------------------------------------
 |
 |
 | Morweb Overrides - Template Options - End
 |
 |
 |-----------------------------------------------------------------------------------------
*/

/*!
 |-----------------------------------------------------------------------------------------
 | Morweb Overrides - Window - Start
 | Ported from ___ brent11 essential.css. Widens the Subtemplate / items-browser
 | options sidebar (optionsPanel 500px + itemsPanel room) and adds the transparent
 | checkerboard behind the file picker. Editor-only (.mwWindow) — no public effect.
 |-----------------------------------------------------------------------------------------
*/
.mwWindow .itemsBrowser .groupsPanel {
  overflow: auto;
}
.mwWindow .itemsBrowser .groupsPanel .group {
  height: auto;
  line-height: 1.218;
  margin-bottom: 10px;
}
.mwWindow .itemsBrowser .groupsPanel .group.current:before, .mwWindow .itemsBrowser .groupsPanel .group.current:after {
  top: 4px;
}
.mwWindow .itemsBrowser .itemsPanel li {
  overflow: visible;
  margin-bottom: 52px;
}
.mwWindow .itemsBrowser .itemsPanel li .title {
  bottom: -32px;
}
.mwWindow .itemsBrowser.fixed .itemsPanel,
.mwWindow .mwInput.selectEx.inline.fixed .itemsBrowser .itemsPanel {
  margin-right: 500px;
}
.mwWindow .itemsBrowser.fixed .itemsPanel,
.mwWindow .mwInput.selectEx.inline.fixed .itemsBrowser .itemsPanel {
  width: 400px;
}
.mwWindow .itemsBrowser.fixed.noOptions .itemsPanel,
.mwWindow .mwInput.selectEx.inline.fixed .itemsBrowser.noOptions .itemsPanel {
  width: 450px;
  margin-right: 0;
}
.mwWindow .itemsBrowser .optionsPanel {
  width: 500px;
}
.mwWindow .itemsBrowser.noOptions .optionsPanel {
  width: 0;
}
.mwWindow .mwInput.selectEx.browseFile {
  background-image: url("/images/static/pattern/pattern-transparent-1.jpg");
  background-repeat: repeat;
  background-size: 12px 12px;
}
.mwWindow .mwInput.selectEx.browseFile .titleWrap {
  background-color: #fff;
}
.mwWindow #mwFilesEd .fileDetails .preview {
  background-image: url("/images/static/pattern/pattern-transparent-1.jpg");
  background-repeat: repeat;
  background-size: 6px 6px;
}
.mwWindow #mwFilesEd .itemsList li.thumbs {
  background-color: #ededed;
}
/*!
 | Morweb Overrides - Window - End
 |-----------------------------------------------------------------------------------------
*/