@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
     ========================================================================== */
/**
   * Remove the margin in all browsers.
   */
body {
  margin: 0;
}

/**
   * Render the `main` element consistently in IE.
   */
main {
  display: block;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
     ========================================================================== */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
     ========================================================================== */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
  background-color: transparent;
  text-decoration: none;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
strong {
  font-weight: bold;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */
small {
  font-size: 80%;
  margin-left: 2px;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
     ========================================================================== */
/**
   * Remove the border on images inside links in IE 10.
   */
img {
  border-style: none;
}

/* Forms
     ========================================================================== */
/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
   * Remove the inner border and padding in Firefox.
   */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
   * Restore the focus styles unset by the previous rule.
   */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
   * Correct the padding in Firefox.
   */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
  vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
  overflow: auto;
}

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
     ========================================================================== */
/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
details {
  display: block;
}

/*
   * Add the correct display in all browsers.
   */
summary {
  display: list-item;
}

/* Misc
     ========================================================================== */
/**
   * Add the correct display in IE 10+.
   */
template {
  display: none;
}

/**
   * Add the correct display in IE 10.
   */
[hidden] {
  display: none;
}

:root {
  --layout-max-width: 1960px;
  --container-max-width: 600px;
}
@media screen and (min-width: 640px) {
  :root {
    --container-max-width: 800px;
  }
}
@media screen and (min-width: 1024px) {
  :root {
    --container-max-width: 1100px;
  }
}
@media screen and (min-width: 1280px) {
  :root {
    --container-max-width: 1240px;
  }
}
:root {
  --container-padding: 16px;
}
@media screen and (min-width: 1024px) {
  :root {
    --container-padding: 20px;
  }
}
@media screen and (min-width: 1440px) {
  :root {
    --container-padding: 30px;
  }
}
:root {
  --gap: 20px;
}
:root {
  --p-mb: 23px;
}
@media screen and (min-width: 1280px) {
  :root {
    --p-mb: 25px;
  }
}
:root {
  --header-bar-height: 80px;
}
@media screen and (min-width: 1024px) {
  :root {
    --header-bar-height: 162px;
  }
}
:root {
  --breadcrumbs-height: 78px;
}
:root body.home {
  --breadcrumbs-height: 0px;
}
:root {
  --transition-duration: 0.2s;
  --transition-timing-function: ease-out;
}
:root {
  --f-poppins: "Poppins",
    helvetica,
    arial,
    sans-serif;
}

.crm-container {
  width: min(100% - 2 * var(--container-padding), var(--container-max-width));
  margin-inline: auto;
}

.crm-grid {
  --columns-total: 6;
}
@media screen and (min-width: 768px) {
  .crm-grid {
    --columns-total: 12;
  }
}
.crm-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--columns-total), 1fr);
}
.crm-grid > * {
  --span: 6;
}
@media screen and (min-width: 768px) {
  .crm-grid > * {
    --span: 12;
  }
}
.crm-grid > * {
  --offset: 0;
  --columns: calc(var(--span) + var(--offset));
  --grid-width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns) * var(--columns-total));
  grid-column-start: auto;
  grid-column-end: span var(--columns);
  margin-left: calc((var(--grid-width) / var(--columns-total) + var(--gap)) * var(--offset));
}

@media screen and (min-width: 375px) {
  .m-1 {
    --span: 1;
  }
  .m-2 {
    --span: 2;
  }
  .m-3 {
    --span: 3;
  }
  .m-4 {
    --span: 4;
  }
  .m-5 {
    --span: 5;
  }
  .m-6 {
    --span: 6;
  }
}
@media screen and (min-width: 480px) {
  .ml-1 {
    --span: 1;
  }
  .ml-2 {
    --span: 2;
  }
  .ml-3 {
    --span: 3;
  }
  .ml-4 {
    --span: 4;
  }
  .ml-5 {
    --span: 5;
  }
  .ml-6 {
    --span: 6;
  }
}
@media screen and (min-width: 640px) {
  .ts-1 {
    --span: 1;
  }
  .ts-2 {
    --span: 2;
  }
  .ts-3 {
    --span: 3;
  }
  .ts-4 {
    --span: 4;
  }
  .ts-5 {
    --span: 5;
  }
  .ts-6 {
    --span: 6;
  }
}
@media screen and (min-width: 768px) {
  .t-1 {
    --span: 1;
  }
  .t-2 {
    --span: 2;
  }
  .t-3 {
    --span: 3;
  }
  .t-4 {
    --span: 4;
  }
  .t-5 {
    --span: 5;
  }
  .t-6 {
    --span: 6;
  }
  .t-7 {
    --span: 7;
  }
  .t-8 {
    --span: 8;
  }
  .t-9 {
    --span: 9;
  }
  .t-10 {
    --span: 10;
  }
  .t-11 {
    --span: 11;
  }
  .t-12 {
    --span: 12;
  }
}
@media screen and (min-width: 1024px) {
  .tl-1 {
    --span: 1;
  }
  .tl-2 {
    --span: 2;
  }
  .tl-3 {
    --span: 3;
  }
  .tl-4 {
    --span: 4;
  }
  .tl-5 {
    --span: 5;
  }
  .tl-6 {
    --span: 6;
  }
  .tl-7 {
    --span: 7;
  }
  .tl-8 {
    --span: 8;
  }
  .tl-9 {
    --span: 9;
  }
  .tl-10 {
    --span: 10;
  }
  .tl-11 {
    --span: 11;
  }
  .tl-12 {
    --span: 12;
  }
}
@media screen and (min-width: 1280px) {
  .ds-1 {
    --span: 1;
  }
  .ds-2 {
    --span: 2;
  }
  .ds-3 {
    --span: 3;
  }
  .ds-4 {
    --span: 4;
  }
  .ds-5 {
    --span: 5;
  }
  .ds-6 {
    --span: 6;
  }
  .ds-7 {
    --span: 7;
  }
  .ds-8 {
    --span: 8;
  }
  .ds-9 {
    --span: 9;
  }
  .ds-10 {
    --span: 10;
  }
  .ds-11 {
    --span: 11;
  }
  .ds-12 {
    --span: 12;
  }
}
@media screen and (min-width: 1440px) {
  .d-1 {
    --span: 1;
  }
  .d-2 {
    --span: 2;
  }
  .d-3 {
    --span: 3;
  }
  .d-4 {
    --span: 4;
  }
  .d-5 {
    --span: 5;
  }
  .d-6 {
    --span: 6;
  }
  .d-7 {
    --span: 7;
  }
  .d-8 {
    --span: 8;
  }
  .d-9 {
    --span: 9;
  }
  .d-10 {
    --span: 10;
  }
  .d-11 {
    --span: 11;
  }
  .d-12 {
    --span: 12;
  }
}
@media screen and (min-width: 1920px) {
  .dl-1 {
    --span: 1;
  }
  .dl-2 {
    --span: 2;
  }
  .dl-3 {
    --span: 3;
  }
  .dl-4 {
    --span: 4;
  }
  .dl-5 {
    --span: 5;
  }
  .dl-6 {
    --span: 6;
  }
  .dl-7 {
    --span: 7;
  }
  .dl-8 {
    --span: 8;
  }
  .dl-9 {
    --span: 9;
  }
  .dl-10 {
    --span: 10;
  }
  .dl-11 {
    --span: 11;
  }
  .dl-12 {
    --span: 12;
  }
}
@media screen and (min-width: 375px) {
  .m-o-0 {
    --offset: 0;
  }
  .m-o-1 {
    --offset: 1;
  }
  .m-o-2 {
    --offset: 2;
  }
  .m-o-3 {
    --offset: 3;
  }
}
@media screen and (min-width: 480px) {
  .ml-o-0 {
    --offset: 0;
  }
  .ml-o-1 {
    --offset: 1;
  }
  .ml-o-2 {
    --offset: 2;
  }
  .ml-o-3 {
    --offset: 3;
  }
}
@media screen and (min-width: 640px) {
  .ts-o-0 {
    --offset: 0;
  }
  .ts-o-1 {
    --offset: 1;
  }
  .ts-o-2 {
    --offset: 2;
  }
  .ts-o-3 {
    --offset: 3;
  }
}
@media screen and (min-width: 768px) {
  .t-o-0 {
    --offset: 0;
  }
  .t-o-1 {
    --offset: 1;
  }
  .t-o-2 {
    --offset: 2;
  }
  .t-o-3 {
    --offset: 3;
  }
}
@media screen and (min-width: 1024px) {
  .tl-o-0 {
    --offset: 0;
  }
  .tl-o-1 {
    --offset: 1;
  }
  .tl-o-2 {
    --offset: 2;
  }
  .tl-o-3 {
    --offset: 3;
  }
}
@media screen and (min-width: 1280px) {
  .ds-o-0 {
    --offset: 0;
  }
  .ds-o-1 {
    --offset: 1;
  }
  .ds-o-2 {
    --offset: 2;
  }
  .ds-o-3 {
    --offset: 3;
  }
}
@media screen and (min-width: 1440px) {
  .d-o-0 {
    --offset: 0;
  }
  .d-o-1 {
    --offset: 1;
  }
  .d-o-2 {
    --offset: 2;
  }
  .d-o-3 {
    --offset: 3;
  }
}
@media screen and (min-width: 1920px) {
  .dl-o-0 {
    --offset: 0;
  }
  .dl-o-1 {
    --offset: 1;
  }
  .dl-o-2 {
    --offset: 2;
  }
  .dl-o-3 {
    --offset: 3;
  }
}
body {
  font-family: var(--f-poppins);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  color: var(--c-primary);
  line-height: 24px;
}

a {
  color: inherit;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
a:hover, a.active {
  color: var(--c-blue);
}
a:hover span, a.active span {
  color: inherit;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 500;
  line-height: 1.2;
}

h1 {
  margin-top: 0;
  font-size: 30px;
}
h1 span {
  color: var(--c-blue);
}

h1:not([class]) {
  margin-bottom: 24px;
}

h2 {
  margin-top: 0;
  font-size: 26px;
}
h2.fi-section-header-heading {
  font-size: 18px;
}

.fi-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h2:not([class]) {
  margin-bottom: 24px;
}

h3:not([class]) {
  margin-top: 0;
  font-size: 22px;
  margin-bottom: 18px;
}

h4:not([class]) {
  margin-top: 0;
  font-size: 18px;
  margin-bottom: 16px;
}

h5:not([class]) {
  margin-top: 0;
  font-size: 16px;
  margin-bottom: 16px;
}

ol.ol {
  padding-left: 18px;
}
ol.ol li {
  font-size: 14px;
  margin-bottom: 5px;
}
ol.ol li:last-child {
  margin-bottom: 0;
}
ol.ol li::marker {
  color: var(--c-blue);
}

.font-semibold {
  font-weight: 500;
}

.text-sm {
  font-size: 13px;
}

ul.ul {
  padding-left: 12px;
}
ul.ul li {
  font-size: 14px;
  padding-left: 5px;
  margin-bottom: 5px;
}
ul.ul li:last-child {
  margin-bottom: 0;
}
ul.ul li::marker {
  content: "✓";
  color: var(--c-blue);
}

@keyframes pulseWhite {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes pulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(39, 101, 245, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(39, 101, 245, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(39, 101, 245, 0);
  }
}
@keyframes pulseRed {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}
@keyframes pulseYellow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(243, 199, 42, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}
@keyframes pulseBlue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}
@keyframes showCart {
  100% {
    transform: translateX(0);
  }
}
@keyframes hideCart {
  100% {
    transform: translateX(100%);
  }
}
:root {
  --c-white: #fff;
  --c-white10: rgba(255, 255, 255, 0.1);
  --c-white20: rgba(255, 255, 255, 0.2);
  --c-white30: rgba(255, 255, 255, 0.3);
  --c-white40: rgba(255, 255, 255, 0.4);
  --c-white60: rgba(255, 255, 255, 0.6);
  --c-white70: rgba(255, 255, 255, 0.7);
  --c-white80: rgba(255, 255, 255, 0.8);
  --c-white90: rgba(255, 255, 255, 0.9);
  --c-primary: #252525;
  --c-primary10: rgba(37, 37, 37, 0.1);
  --c-primary20: rgba(37, 37, 37, 0.2);
  --c-primary30: rgba(37, 37, 37, 0.3);
  --c-primary40: rgba(37, 37, 37, 0.4);
  --c-primary60: rgba(37, 37, 37, 0.6);
  --c-primary70: rgba(37, 37, 37, 0.7);
  --c-primary80: rgba(37, 37, 37, 0.8);
  --c-primary90: rgba(37, 37, 37, 0.9);
  --c-gray: #f0f1f5;
  --c-gray10: rgba(240, 241, 245, 0.1);
  --c-gray20: rgba(240, 241, 245, 0.2);
  --c-gray30: rgba(240, 241, 245, 0.3);
  --c-gray40: rgba(240, 241, 245, 0.4);
  --c-gray60: rgba(240, 241, 245, 0.6);
  --c-gray70: rgba(240, 241, 245, 0.7);
  --c-gray80: rgba(240, 241, 245, 0.8);
  --c-gray90: rgba(240, 241, 245, 0.9);
  --c-dark-gray: #919397;
  --c-dark-gray10: rgba(145, 147, 151, 0.1);
  --c-dark-gray20: rgba(145, 147, 151, 0.2);
  --c-dark-gray30: rgba(145, 147, 151, 0.3);
  --c-dark-gray40: rgba(145, 147, 151, 0.4);
  --c-dark-gray60: rgba(145, 147, 151, 0.6);
  --c-dark-gray70: rgba(145, 147, 151, 0.7);
  --c-dark-gray80: rgba(145, 147, 151, 0.8);
  --c-dark-gray90: rgba(145, 147, 151, 0.9);
  --c-border-gray: #dde1ea;
  --c-border-gray10: rgba(221, 225, 234, 0.1);
  --c-border-gray20: rgba(221, 225, 234, 0.2);
  --c-border-gray30: rgba(221, 225, 234, 0.3);
  --c-border-gray40: rgba(221, 225, 234, 0.4);
  --c-border-gray60: rgba(221, 225, 234, 0.6);
  --c-border-gray70: rgba(221, 225, 234, 0.7);
  --c-border-gray80: rgba(221, 225, 234, 0.8);
  --c-border-gray90: rgba(221, 225, 234, 0.9);
  --c-green: #1F8D6F;
  --c-green10: rgba(31, 141, 111, 0.1);
  --c-green20: rgba(31, 141, 111, 0.2);
  --c-green30: rgba(31, 141, 111, 0.3);
  --c-green40: rgba(31, 141, 111, 0.4);
  --c-green60: rgba(31, 141, 111, 0.6);
  --c-green70: rgba(31, 141, 111, 0.7);
  --c-green80: rgba(31, 141, 111, 0.8);
  --c-green90: rgba(31, 141, 111, 0.9);
  --c-yellow: #f3c72a;
  --c-yellow10: rgba(243, 199, 42, 0.1);
  --c-yellow20: rgba(243, 199, 42, 0.2);
  --c-yellow30: rgba(243, 199, 42, 0.3);
  --c-yellow40: rgba(243, 199, 42, 0.4);
  --c-yellow60: rgba(243, 199, 42, 0.6);
  --c-yellow70: rgba(243, 199, 42, 0.7);
  --c-yellow80: rgba(243, 199, 42, 0.8);
  --c-yellow90: rgba(243, 199, 42, 0.9);
  --c-yellow-dirr: #d9aa1f;
  --c-yellow-dirr10: rgba(217, 170, 31, 0.1);
  --c-yellow-dirr20: rgba(217, 170, 31, 0.2);
  --c-yellow-dirr30: rgba(217, 170, 31, 0.3);
  --c-yellow-dirr40: rgba(217, 170, 31, 0.4);
  --c-yellow-dirr60: rgba(217, 170, 31, 0.6);
  --c-yellow-dirr70: rgba(217, 170, 31, 0.7);
  --c-yellow-dirr80: rgba(217, 170, 31, 0.8);
  --c-yellow-dirr90: rgba(217, 170, 31, 0.9);
  --c-red: #CA2C54;
  --c-red10: rgba(202, 44, 84, 0.1);
  --c-red20: rgba(202, 44, 84, 0.2);
  --c-red30: rgba(202, 44, 84, 0.3);
  --c-red40: rgba(202, 44, 84, 0.4);
  --c-red60: rgba(202, 44, 84, 0.6);
  --c-red70: rgba(202, 44, 84, 0.7);
  --c-red80: rgba(202, 44, 84, 0.8);
  --c-red90: rgba(202, 44, 84, 0.9);
  --c-blue: #2765f5;
  --c-blue10: rgba(39, 101, 245, 0.1);
  --c-blue20: rgba(39, 101, 245, 0.2);
  --c-blue30: rgba(39, 101, 245, 0.3);
  --c-blue40: rgba(39, 101, 245, 0.4);
  --c-blue60: rgba(39, 101, 245, 0.6);
  --c-blue70: rgba(39, 101, 245, 0.7);
  --c-blue80: rgba(39, 101, 245, 0.8);
  --c-blue90: rgba(39, 101, 245, 0.9);
  --c-info: #447af8;
  --c-info10: rgba(68, 122, 248, 0.1);
  --c-info20: rgba(68, 122, 248, 0.2);
  --c-info30: rgba(68, 122, 248, 0.3);
  --c-info40: rgba(68, 122, 248, 0.4);
  --c-info60: rgba(68, 122, 248, 0.6);
  --c-info70: rgba(68, 122, 248, 0.7);
  --c-info80: rgba(68, 122, 248, 0.8);
  --c-info90: rgba(68, 122, 248, 0.9);
  --c-black: #000;
  --c-black10: rgba(0, 0, 0, 0.1);
  --c-black20: rgba(0, 0, 0, 0.2);
  --c-black30: rgba(0, 0, 0, 0.3);
  --c-black40: rgba(0, 0, 0, 0.4);
  --c-black60: rgba(0, 0, 0, 0.6);
  --c-black70: rgba(0, 0, 0, 0.7);
  --c-black80: rgba(0, 0, 0, 0.8);
  --c-black90: rgba(0, 0, 0, 0.9);
  --danger-50: oklch(0.971 0.013 17.38);
  --danger-100: oklch(0.936 0.032 17.717);
  --danger-200: oklch(0.885 0.062 18.334);
  --danger-300: oklch(0.808 0.114 19.571);
  --danger-400: oklch(0.704 0.191 22.216);
  --danger-500: oklch(0.637 0.237 25.331);
  --danger-600: oklch(0.577 0.245 27.325);
  --danger-700: oklch(0.505 0.213 27.518);
  --danger-800: oklch(0.444 0.177 26.899);
  --danger-900: oklch(0.396 0.141 25.723);
  --danger-950: oklch(0.258 0.092 26.042);
  --gray-50: oklch(0.985 0 0);
  --gray-100: oklch(0.967 0.001 286.375);
  --gray-200: oklch(0.92 0.004 286.32);
  --gray-300: oklch(0.871 0.006 286.286);
  --gray-400: oklch(0.705 0.015 286.067);
  --gray-500: oklch(0.552 0.016 285.938);
  --gray-600: oklch(0.442 0.017 285.786);
  --gray-700: oklch(0.37 0.013 285.805);
  --gray-800: oklch(0.274 0.006 286.033);
  --gray-900: oklch(0.21 0.006 285.885);
  --gray-950: oklch(0.141 0.005 285.823);
  --info-50: oklch(0.97 0.014 254.604);
  --info-100: oklch(0.932 0.032 255.585);
  --info-200: oklch(0.882 0.059 254.128);
  --info-300: oklch(0.809 0.105 251.813);
  --info-400: oklch(0.707 0.165 254.624);
  --info-500: oklch(0.623 0.214 259.815);
  --info-600: oklch(0.546 0.245 262.881);
  --info-700: oklch(0.488 0.243 264.376);
  --info-800: oklch(0.424 0.199 265.638);
  --info-900: oklch(0.379 0.146 265.522);
  --info-950: oklch(0.282 0.091 267.935);
  --primary-50: oklch(0.97717647058824 0.01395454545455 263.309);
  --primary-100: oklch(0.95035294117647 0.03272727272727 263.309);
  --primary-200: oklch(0.90547058823529 0.06318181818182 263.309);
  --primary-300: oklch(0.84047058823529 0.10604545454546 263.309);
  --primary-400: oklch(0.75352941176471 0.15027272727273 263.309);
  --primary-500: oklch(0.68270588235294 0.17009090909091 263.309);
  --primary-600: oklch(0.59782352941176 0.16913636363636 263.309);
  --primary-700: oklch(0.51494117647059 0.14940909090909 263.309);
  --primary-800: oklch(0.44611764705882 0.12331818181818 263.309);
  --primary-900: oklch(0.39458823529412 0.09963636363636 263.309);
  --primary-950: oklch(0.27788235294118 0.07136363636364 263.309);
  --success-50: oklch(0.982 0.018 155.826);
  --success-100: oklch(0.962 0.044 156.743);
  --success-200: oklch(0.925 0.084 155.995);
  --success-300: oklch(0.871 0.15 154.449);
  --success-400: oklch(0.792 0.209 151.711);
  --success-500: oklch(0.723 0.219 149.579);
  --success-600: oklch(0.627 0.194 149.214);
  --success-700: oklch(0.527 0.154 150.069);
  --success-800: oklch(0.448 0.119 151.328);
  --success-900: oklch(0.393 0.095 152.535);
  --success-950: oklch(0.266 0.065 152.934);
  --warning-50: oklch(0.987 0.022 95.277);
  --warning-100: oklch(0.962 0.059 95.617);
  --warning-200: oklch(0.924 0.12 95.746);
  --warning-300: oklch(0.879 0.169 91.605);
  --warning-400: oklch(0.828 0.189 84.429);
  --warning-500: oklch(0.769 0.188 70.08);
  --warning-600: oklch(0.666 0.179 58.318);
  --warning-700: oklch(0.555 0.163 48.998);
  --warning-800: oklch(0.473 0.137 46.201);
  --warning-900: oklch(0.414 0.112 45.904);
  --warning-950: oklch(0.279 0.077 45.635);
}

.color-white {
  color: var(--c-white);
}

.background-white {
  background-color: var(--c-white);
}

.background-op10-white {
  background-color: var(--c-white10);
}

.background-op20-white {
  background-color: var(--c-white20);
}

.background-op40-white {
  background-color: var(--c-white40);
}

.color-primary {
  color: var(--c-primary);
}

.background-primary {
  background-color: var(--c-primary);
}

.background-op10-primary {
  background-color: var(--c-primary10);
}

.background-op20-primary {
  background-color: var(--c-primary20);
}

.background-op40-primary {
  background-color: var(--c-primary40);
}

.color-gray {
  color: var(--c-gray);
}

.background-gray {
  background-color: var(--c-gray);
}

.background-op10-gray {
  background-color: var(--c-gray10);
}

.background-op20-gray {
  background-color: var(--c-gray20);
}

.background-op40-gray {
  background-color: var(--c-gray40);
}

.color-dark-gray {
  color: var(--c-dark-gray);
}

.background-dark-gray {
  background-color: var(--c-dark-gray);
}

.background-op10-dark-gray {
  background-color: var(--c-dark-gray10);
}

.background-op20-dark-gray {
  background-color: var(--c-dark-gray20);
}

.background-op40-dark-gray {
  background-color: var(--c-dark-gray40);
}

.color-border-gray {
  color: var(--c-border-gray);
}

.background-border-gray {
  background-color: var(--c-border-gray);
}

.background-op10-border-gray {
  background-color: var(--c-border-gray10);
}

.background-op20-border-gray {
  background-color: var(--c-border-gray20);
}

.background-op40-border-gray {
  background-color: var(--c-border-gray40);
}

.color-green {
  color: var(--c-green);
}

.background-green {
  background-color: var(--c-green);
}

.background-op10-green {
  background-color: var(--c-green10);
}

.background-op20-green {
  background-color: var(--c-green20);
}

.background-op40-green {
  background-color: var(--c-green40);
}

.color-yellow {
  color: var(--c-yellow);
}

.background-yellow {
  background-color: var(--c-yellow);
}

.background-op10-yellow {
  background-color: var(--c-yellow10);
}

.background-op20-yellow {
  background-color: var(--c-yellow20);
}

.background-op40-yellow {
  background-color: var(--c-yellow40);
}

.color-yellow-dirr {
  color: var(--c-yellow-dirr);
}

.background-yellow-dirr {
  background-color: var(--c-yellow-dirr);
}

.background-op10-yellow-dirr {
  background-color: var(--c-yellow-dirr10);
}

.background-op20-yellow-dirr {
  background-color: var(--c-yellow-dirr20);
}

.background-op40-yellow-dirr {
  background-color: var(--c-yellow-dirr40);
}

.color-red {
  color: var(--c-red);
}

.background-red {
  background-color: var(--c-red);
}

.background-op10-red {
  background-color: var(--c-red10);
}

.background-op20-red {
  background-color: var(--c-red20);
}

.background-op40-red {
  background-color: var(--c-red40);
}

.color-blue {
  color: var(--c-blue);
}

.background-blue {
  background-color: var(--c-blue);
}

.background-op10-blue {
  background-color: var(--c-blue10);
}

.background-op20-blue {
  background-color: var(--c-blue20);
}

.background-op40-blue {
  background-color: var(--c-blue40);
}

.color-info {
  color: var(--c-info);
}

.background-info {
  background-color: var(--c-info);
}

.background-op10-info {
  background-color: var(--c-info10);
}

.background-op20-info {
  background-color: var(--c-info20);
}

.background-op40-info {
  background-color: var(--c-info40);
}

.color-black {
  color: var(--c-black);
}

.background-black {
  background-color: var(--c-black);
}

.background-op10-black {
  background-color: var(--c-black10);
}

.background-op20-black {
  background-color: var(--c-black20);
}

.background-op40-black {
  background-color: var(--c-black40);
}

.btn {
  display: inline-flex;
  color: var(--c-white);
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
  border-radius: 4px;
  border: 1px solid var(--c-blue);
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  align-items: center;
  cursor: pointer;
}
.btn svg {
  width: 16px;
  height: 16px;
}
.btn.disabled {
  pointer-events: none;
  opacity: 0.7;
}
.btn.hidden {
  display: none !important;
}
.btn.btn-wait {
  gap: 5px;
}
.btn.btn-wait:disabled svg {
  display: block;
}
.btn.btn-wait svg {
  display: none;
}
.btn-border {
  background-color: var(--c-white);
  color: var(--c-blue);
  padding: 3px 8px;
}
.btn-border:hover {
  color: var(--c-blue);
  animation: pulseGreen 2s infinite;
}
.btn.full-btn {
  background-color: var(--c-blue);
  color: var(--c-white);
}
.btn.full-btn:hover {
  background-color: var(--c-white);
  color: var(--c-blue);
  animation: pulseGreen 2s infinite;
}
.btn.full-btn.no-p:hover {
  animation: none;
}
.btn.full-btn svg {
  color: inherit;
}
.btn.full-btn.color-blue {
  background-color: var(--c-info);
  border-color: var(--c-info);
}
.btn.full-btn.color-blue:hover {
  background-color: var(--c-white);
  color: var(--c-info);
  animation: pulseBlue 2s infinite;
}
.btn.full-btn.color-yellow {
  background-color: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--c-primary);
}
.btn.full-btn.color-yellow:hover {
  background-color: var(--c-white);
  color: var(--c-yellow);
  animation: pulseYellow 2s infinite;
}
.btn.full-btn.color-red {
  background-color: var(--c-red);
  border-color: var(--c-red);
}
.btn.full-btn.color-red:hover {
  background-color: var(--c-white);
  color: var(--c-red);
  animation: pulseRed 2s infinite;
}
.btn.full-btn.color-white {
  background-color: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-blue);
}
.btn.full-btn.color-white:hover {
  background-color: transparent;
  color: var(--c-white);
  animation: pulseWhite 2s infinite;
}
.btn-text {
  cursor: pointer;
  color: var(--c-blue);
}
.btn-text:hover {
  color: var(--c-blue);
}

.delete-action button {
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
  border-radius: 4px;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  border: 1px solid var(--c-red);
}
.delete-action button svg {
  color: var(--c-white);
}
.delete-action button:hover {
  background-color: var(--c-white);
  color: var(--c-red);
  animation: pulseRed 2s infinite;
}
.delete-action button:hover span,
.delete-action button:hover svg {
  color: var(--c-red);
}

html,
body {
  height: 100%;
}

.crm-color-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-color-picker__button {
  width: 34px;
  height: 26px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
}

.crm-color-picker__clear {
  font-size: 12px;
}

.crm-color-picker__global {
  font-size: 12px;
  color: #6b7280;
}

.crm-color-picker__target,
.pickr .pcr-button {
  height: 2em;
  width: 2em;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

select {
  outline: none;
}
select:hover, select:focus, select:focus-visible {
  outline: none;
}

trix-editor {
  cursor: initial;
}

.crm-page {
  overflow: hidden;
}

.stripe-box-payment {
  padding: 10px;
  border: 1px solid var(--c-border-gray);
  background: var(--c-gray60);
  border-radius: 4px;
}

.crm-select-xs {
  font-size: 10px;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.crm-main-grid {
  gap: 0;
  display: flex;
  height: 100%;
  overflow: hidden;
}

.col-content {
  height: 100%;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.crm-loading {
  display: none;
}

.loading {
  pointer-events: none;
}
.loading .rc-loading {
  display: block !important;
}

[x-cloak] {
  display: none !important;
}

.crm-thumbnail {
  width: 100%;
  padding-bottom: 54.7%;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.crm-thumbnail .rc-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s ease;
}
.crm-thumbnail .rc-image:hover {
  transform: scale(1.2);
}

.login-page {
  height: auto;
  background: var(--c-gray40);
  padding-bottom: 100px;
}
.login-page .login-container {
  margin: auto;
  max-width: 500px;
  margin-top: 100px;
  background: var(--c-gray);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--c-border-gray);
}
.login-page .login-container .dashboard-login-card__header {
  margin-bottom: 10px;
}
.login-page .login-container .dashboard-login-form__actions {
  margin-top: 24px;
}

.crm-header-nav {
  height: 100vh;
  width: 65px;
  flex: 0 0 65px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.crm-header-nav.active {
  max-width: 250px;
  flex: 0 0 250px;
  width: 250px;
}
.crm-header-nav-toggle {
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 1;
  left: -1px;
  top: 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  background: var(--c-white);
  color: var(--c-blue);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.crm-header-nav-toggle span svg {
  width: 14px;
}

.col-header {
  background-color: var(--c-blue);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  flex: 0 0 250px;
  padding: 16px;
  width: 250px;
  max-width: 250px;
}

.crm-dashboard-region {
  display: flex;
  flex-direction: column;
  color: var(--c-white);
}
.crm-dashboard-region h4 {
  height: 30px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-blue);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  padding: 0 8px;
  gap: 22px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.crm-dashboard-region h4 svg {
  width: 24px;
}
.crm-dashboard-region h4 span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.crm-dashboard-region h4:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.crm-dashboard-region h4 .crm-dashboard-region-toggle-icon {
  transition: transform 0.25s ease;
}
.crm-dashboard-region h4 .crm-dashboard-region-toggle-icon svg {
  width: 16px;
}
.crm-dashboard-region h4 .crm-dashboard-region-toggle-icon.is-open {
  transform: rotate(180deg);
}
.crm-dashboard-region form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 12px;
}
.crm-dashboard-region-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.crm-dashboard-region-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.2s ease;
}
.crm-dashboard-region-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
}
.crm-dashboard-region-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.2s ease;
}
.crm-dashboard-region-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
}
.crm-dashboard-region-option input[type=radio] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  position: relative;
}
.crm-dashboard-region-option input[type=radio]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-white);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.crm-dashboard-region-option input[type=radio]:checked::after {
  transform: scale(1);
}
.crm-dashboard-region-option-content {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.crm-dashboard-region-option strong {
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: var(--c-white);
  letter-spacing: -0.01em;
}
.crm-dashboard-region-option small {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}
.crm-dashboard-region-option.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.crm-dashboard-region-submit, .crm-dashboard-region-logout .logout-btn {
  height: 30px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-blue);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.crm-dashboard-region-submit:hover, .crm-dashboard-region-logout .logout-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.crm-dashboard-region-logout {
  margin-top: 14px;
}
.crm-dashboard-region-logout .logout-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  text-align: center;
}
.crm-dashboard-region-logout .logout-btn svg {
  flex: 0 0 24px;
}
.crm-header-c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.crm-header-c.is-open-region .crm-header {
  height: calc(100% - 322px);
}
.crm-header {
  display: flex;
  flex-direction: column;
  height: calc(100% - 90px);
  transition: all 0.3s ease;
}
.crm-header .rolda-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 16px;
  gap: 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.crm-header .rolda-info-brand {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-white);
}
.crm-header .rolda-info strong {
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c-white);
}
.crm-header .rolda-info-separator {
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  flex: 0 0 14px;
}
.crm-header .rolda-info .user-item {
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-header-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.crm-header-menu-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crm-header-menu-group.is-open .crm-header-menu-item-arrow {
  transform: rotate(180deg);
}
.crm-header-menu-group.is-active .crm-header-menu-item-arrow {
  transform: rotate(180deg);
}
.crm-header-menu-group.is-active:not(.is-open) .crm-header-menu-item-arrow {
  transform: rotate(0);
}
.crm-header-menu-item {
  display: flex;
  text-align: left;
  align-items: center;
  gap: 22px;
  min-height: 42px;
  padding: 0 8px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.crm-header-menu-item-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}
.crm-header-menu-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}
.crm-header-menu-item-arrow {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  opacity: 0.9;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.crm-header-menu-item-arrow svg {
  width: 14px;
  height: 14px;
}
.crm-header-menu-item svg {
  width: 18px;
  height: 18px;
  display: block;
}
.crm-header-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-white);
}
.crm-header-menu-item.is-active {
  background: var(--c-white);
  color: var(--c-blue);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.crm-header-submenu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 11px;
  padding-left: 11px;
  padding-top: 2px;
}
.crm-header-submenu-item {
  display: flex;
  text-align: left;
  align-items: center;
  gap: 14px;
  min-height: 32px;
  padding: 0 10px 0 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.crm-header-submenu-item-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
}
.crm-header-submenu-item-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.crm-header-submenu-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-header-submenu-item:hover {
  color: var(--c-white);
  transform: translateX(2px);
}
.crm-header-submenu-item.is-active {
  color: var(--c-white);
  font-weight: 600;
}
.crm-header-submenu-item.is-active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--c-white);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

.dashboard-page {
  height: 100%;
  background: var(--c-gray40);
}

.directories-grid {
  margin-bottom: 50px;
}

.crm-gallery-breadcrumbs {
  margin-bottom: 4px;
}

.crm-email-preview-report {
  padding: 10px 0;
}
.crm-email-preview-report-item {
  background: var(--c-gray60);
  border-radius: 4px;
  border: 1px solid var(--c-border-gray);
  display: flex;
  flex-direction: column;
  line-height: 1;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-align: center;
}

.two-factor-setup {
  margin-bottom: 16px;
}
.two-factor-setup__recovery {
  margin-top: 16px;
}

.crm-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0;
}
.crm-page__head {
  padding: 12px 20px;
}
.crm-page__head__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.crm-page__head__actions .btn {
  height: 28px;
}
.crm-page-container {
  height: calc(100% - 60px);
  overflow: auto;
  padding: 20px;
}
.crm-page-container-h-100 {
  height: 100%;
}
.crm-page__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crm-page__head h1 {
  margin-bottom: 0;
  line-height: 1;
  font-size: 20px;
}
.crm-page__filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.crm-page__filter select {
  min-width: 160px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  background-color: var(--c-white);
  color: var(--c-primary);
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}
.crm-page__filter select:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px var(--c-blue10);
}
.crm-page-card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.crm-page-card-head {
  padding: 16px;
}
.crm-page-card.gallery-dirr {
  background: var(--c-gray60);
  box-shadow: none;
  text-align: center;
  justify-content: center;
}
.crm-page-card.gallery-dirr .crm-page-card__meta {
  text-align: center;
  justify-content: center;
}
.crm-page-card.gallery-dirr svg {
  width: 100%;
  height: 50px;
  color: var(--c-blue);
}
.crm-page-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--c-blue40);
}
.crm-page-card__select {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.crm-page-card__select input {
  cursor: pointer;
  accent-color: var(--c-blue);
}
.crm-page-card__image {
  width: 100%;
  height: 140px;
  background: var(--c-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--c-border-gray);
}
.crm-page-card__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.crm-page-card__placeholder {
  font-size: 13px;
  color: var(--c-dark-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.crm-page-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.crm-page-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
}
.crm-page-card__meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--c-dark-gray);
}
.crm-page-card__meta span {
  white-space: nowrap;
}
.crm-page-card__actions {
  margin-top: auto;
  display: flex;
  gap: 6px;
}
.crm-page-card__actions .btn {
  flex: 1;
  justify-content: center;
  font-size: 12px;
  padding: 4px 8px;
}
.crm-page-card--active {
  border-color: var(--c-green40);
}
.crm-page-card--draft {
  opacity: 0.85;
}
.crm-import-progress-bar {
  height: 10px;
  background: var(--c-border-gray);
  border-radius: 999px;
  overflow: hidden;
  width: 100px;
  font-size: 12px;
}
.crm-import-progress-bar-progress {
  height: 10px;
  background: var(--c-blue);
  transition: width 0.3s ease;
  min-width: 20px;
  display: flex;
  align-items: center;
  color: #fff;
  justify-content: flex-end;
  padding-right: 2px;
}
.crm-import .crm-contacts-content-head.has-filters {
  padding: 12px 16px;
}
.crm-import-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.crm-import-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.crm-import-toolbar__actions .btn {
  height: 28px;
}
.crm-import-toolbar .crm-contacts-field input {
  min-height: 28px;
  padding: 4px 10px;
  width: auto;
  min-width: 20px;
  max-width: 200px;
}
.crm-import-row-box {
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  overflow: hidden;
}
.crm-import-row-head {
  display: flex;
  background: var(--c-gray60);
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
}
.crm-import-row-meta {
  display: flex;
  align-items: center;
  position: relative;
  gap: 30px;
}
.crm-import-row-meta::after {
  content: "";
  position: absolute;
}
.crm-import .crm-contacts-table tbody tr {
  cursor: initial;
}
.crm-import .crm-contacts-table tbody tr td {
  cursor: initial;
  border-bottom: none;
}
.crm-import .crm-contacts-table tbody tr:hover td {
  background: none;
  color: var(--c-primary);
}
.crm-import-section {
  padding: 5px 10px;
  margin-top: 10px;
}
.crm-import-section-head {
  padding: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--c-border-gray);
  background: var(--c-gray60);
}
.crm-import-grid {
  padding: 5px;
}
.crm-import-grid-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.crm-import-grid-col label {
  font-weight: 500;
}
.crm-import-grid input,
.crm-import-grid select {
  width: auto;
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid var(--c-border-gray);
  background-color: var(--c-white);
  color: var(--c-primary);
  font-size: 13px;
  line-height: 1.2;
  outline: none;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.crm-import-grid input.border-red,
.crm-import-grid select.border-red {
  border: 1px solid var(--c-red);
}

.dashboard-widgets-picker-container {
  display: grid;
  overflow: hidden;
  transition: grid-template-rows 0.2s ease, opacity 0.2s ease;
  grid-template-rows: 0fr;
  opacity: 0;
}
.dashboard-widgets-picker-container.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.crm-widget {
  height: 100%;
}
.crm-widget-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 4px;
  background: var(--c-gray60);
  border: 1px solid var(--c-border-gray);
  cursor: pointer;
  text-align: center;
  height: 100%;
  transition: all 0.2s ease;
}
.crm-widget-btn.is-active {
  background: var(--c-blue);
  color: var(--c-white);
}

.dashboard-widget-picker-item {
  padding: 10px;
  background: var(--c-gray60);
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  outline: none;
}
.dashboard-widget-picker-item.is-active {
  background: var(--c-green);
  color: var(--c-white);
}

.crm-price-range {
  padding: 5px;
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  background: var(--c-gray60);
}

.crm-price-range__values,
.crm-price-range__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.crm-price-range__values span {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}

.crm-price-range__slider {
  position: relative;
  height: 34px;
  margin: 8px 0;
}

.crm-price-range__slider input[type=range] {
  position: absolute;
  width: 100%;
  pointer-events: none;
  padding: 0;
  background: transparent;
}

.crm-price-range__slider input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
}

.crm-price-range__inputs input {
  width: 100%;
}

.add-circle-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crm-contact-notes-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.crm-contact-notes-list__user {
  font-weight: 700;
}
.crm-contact-notes-list__item {
  border: 1px solid var(--c-border-gray);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}
.crm-contact-notes-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.crm-contact-notes-list__date {
  font-size: 13px;
  color: var(--c-primary);
}
.crm-contact-notes-list__delete {
  color: var(--c-red);
  font-size: 13px;
  font-weight: 600;
}
.crm-contact-notes-list__content {
  font-size: 13px;
  color: var(--c-primary);
}
.crm-contacts {
  width: 100%;
  padding: 0;
  height: 100%;
}
.crm-contacts-grid {
  display: flex;
  align-items: flex-start;
  gap: 0;
  height: 100%;
  overflow: hidden;
}
.crm-contacts-sidebar, .crm-contacts-content {
  min-width: 0;
  background: var(--c-white);
  border: 1px solid var(--c-border-gray);
}
.crm-contacts-sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 250px;
}
.crm-contacts-sidebar-container {
  height: 100vh;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease-in-out;
}
.crm-contacts-sidebar-container.active {
  width: 250px;
}
.crm-contacts-sidebar-head {
  flex: 0 0 auto;
  padding: 16px 20px;
  display: flex;
  height: 55px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-border-gray);
  background: var(--c-gray40);
}
.crm-contacts-sidebar-head h2 {
  margin: 0;
  color: var(--c-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
.crm-contacts-filter-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 1024px) {
  .crm-contacts-filter-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}
.crm-contacts-filter-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  z-index: 2;
  background: #fff;
  width: 100%;
  height: 200px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  font-size: 13px;
  box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.crm-contacts-filter-dropdown-c {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  overflow-y: auto;
  height: 100%;
  gap: 5px;
  width: 100%;
}
.crm-contacts-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  border-left: 0;
  overflow: hidden;
  position: relative;
  height: 100vh;
}
.crm-contacts-content-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 55px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border-gray);
  background: var(--c-gray40);
}
.crm-contacts-content-head.has-filters {
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  padding: 12px 20px;
  gap: 5px;
}
.crm-contacts-content-head-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.crm-contacts-content-head__active-filters {
  display: flex;
  align-items: center;
  gap: 5px 10px;
  flex-wrap: wrap;
}
.crm-contacts-content-head__active-filters .active-filter {
  font-size: 12px;
  background: var(--c-gray40);
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
}
.crm-contacts-content-head__active-filters .active-filter svg {
  width: 12px;
  height: 12px;
}
.crm-contacts-content-head__active-filters .active-filter:hover {
  color: var(--c-white);
  background: var(--c-blue);
}
.crm-contacts-content-head__active-filters .active-filter.has-selected {
  cursor: not-allowed;
  pointer-events: none;
}
.crm-contacts-content-head p {
  margin: 0;
  color: var(--c-dark-gray);
  font-size: 13px;
  line-height: 1.4;
}
.crm-contacts-title {
  margin: 0;
  color: var(--c-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 20px;
}
.crm-contacts-title .open-filters {
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--c-blue);
  transition: all 0.2s ease;
  opacity: 0.75;
}
.crm-contacts-title .open-filters svg {
  width: 16px;
  height: 16px;
  color: var(--c-white);
}
.crm-contacts-title .open-filters:hover {
  opacity: 1;
}
.crm-contacts-title .open-filters.active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
.crm-contacts-title .open-filters .count-filters {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: white;
  background: var(--c-black);
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.crm-contacts-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.crm-contacts-field label {
  margin: 0;
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.crm-contacts-field input,
.crm-contacts-field select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--c-border-gray);
  background-color: var(--c-white);
  border-radius: 4px;
  color: var(--c-primary);
  font-size: 13px;
  line-height: 1.2;
  outline: none;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.crm-contacts-field input:focus,
.crm-contacts-field select:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px var(--c-blue10);
}
.crm-contacts-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: auto;
  position: relative;
}
.crm-contacts-table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
}
.crm-contacts-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 16px;
  background: var(--c-gray);
  border-bottom: 1px solid var(--c-border-gray);
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
.crm-contacts-table thead th .sortable {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.crm-contacts-table thead th .sortable .sort-arrow {
  cursor: pointer;
  flex: 0 0 15px;
  transition: all 0.3s ease;
}
.crm-contacts-table thead th .sortable .sort-arrow.asc {
  transform: rotate(180deg);
}
.crm-contacts-table tbody tr {
  cursor: pointer;
}
.crm-contacts-table tbody tr svg {
  width: 16px;
  height: 16px;
}
.crm-contacts-table tbody tr.is-not-contact td.id {
  color: var(--c-white);
  background-color: var(--c-red);
}
.crm-contacts-table tbody tr td {
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.crm-contacts-table tbody tr:last-child td {
  border-bottom: 0;
}
.crm-contacts-table tbody tr:hover td, .crm-contacts-table tbody tr.selected td {
  color: var(--c-white);
  background-color: var(--c-blue);
}
.crm-contacts-table tbody td {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--c-border-gray);
  color: var(--c-primary);
  font-size: 13px;
  line-height: 1.3;
  vertical-align: middle;
  background: var(--c-white);
}
.crm-contacts-table tbody .crm-table-group td {
  background: var(--c-gray);
  font-weight: 600;
  padding: 10px 12px;
}
.crm-contacts-table tbody .crm-table-group td:hover {
  background: var(--c-gray);
  color: var(--c-primary);
}
.crm-contacts-table tbody .crm-table-child td {
  padding-left: 20px;
}
.crm-contacts-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--c-dark-gray);
}
.crm-contacts-load-more {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: var(--c-white);
}
.crm-modal {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  width: 80%;
  max-width: 1100px;
  height: 100%;
  overflow: hidden;
  background: var(--c-white);
  border-left: 1px solid var(--c-border-gray);
  box-shadow: -8px 0 24px var(--c-black10);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.crm-modal.p-fixed {
  position: fixed;
}
.crm-modal.child-modal {
  width: calc(100% - 400px);
}
.crm-modal.l-modal {
  max-width: 900px;
}
.crm-modal.m-modal {
  max-width: 700px;
}
.crm-modal.small-modal {
  max-width: 500px;
}
.crm-modal.top-l {
  top: 96px;
  height: calc(100% - 96px);
}
.crm-modal.top-m {
  top: 63px;
  height: calc(100% - 63px);
}
.crm-modal.is-open {
  transform: translateX(1px);
}
.crm-modal.user-modal .fi-section, .crm-modal.segment-modal .fi-section, .crm-modal.add-new-donation-modal .fi-section {
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  overflow: hidden;
}
.crm-modal.user-modal .fi-section-header, .crm-modal.segment-modal .fi-section-header, .crm-modal.add-new-donation-modal .fi-section-header {
  background: var(--c-gray60);
  line-height: 1;
  padding: 10px;
}
.crm-modal.user-modal .fi-section-header .fi-icon-btn, .crm-modal.segment-modal .fi-section-header .fi-icon-btn, .crm-modal.add-new-donation-modal .fi-section-header .fi-icon-btn {
  height: auto;
  width: auto;
}
.crm-modal.user-modal .fi-section-header h2.fi-section-header-heading, .crm-modal.segment-modal .fi-section-header h2.fi-section-header-heading, .crm-modal.add-new-donation-modal .fi-section-header h2.fi-section-header-heading {
  font-size: 13px;
}
.crm-modal.user-modal .fi-section-content, .crm-modal.segment-modal .fi-section-content, .crm-modal.add-new-donation-modal .fi-section-content {
  padding: 10px !important;
}
.crm-modal.user-modal .fi-section-content .fi-fo-field-label-col, .crm-modal.segment-modal .fi-section-content .fi-fo-field-label-col, .crm-modal.add-new-donation-modal .fi-section-content .fi-fo-field-label-col {
  display: none;
}
.crm-modal.segment-modal .fi-section-content .fi-fo-field-label-col, .crm-modal.add-new-donation-modal .fi-section-content .fi-fo-field-label-col, .crm-modal.add-new-contact-modal .fi-section-content .fi-fo-field-label-col {
  display: block;
}
.crm-modal.add-new-contact-modal .fi-section-header {
  background: var(--c-gray60);
  line-height: 1;
  padding: 10px;
}
.crm-modal.add-new-contact-modal .fi-section-header .fi-icon-btn {
  height: auto;
  width: auto;
}
.crm-modal.add-new-contact-modal .fi-section-header h2.fi-section-header-heading {
  font-size: 13px;
}
.crm-modal.add-new-contact-modal .crm-modal-contact-info__details {
  padding-bottom: 0;
}
.crm-modal__dialog {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-white);
}
.crm-modal-contact-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.crm-modal-contact-info.forms-entries .crm-modal.child-modal {
  width: 80%;
}
.crm-modal-contact-info__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 54px;
  min-height: 54px;
  border-bottom: 1px solid var(--c-border-gray);
  background: var(--c-gray40);
  transition: all 0.3s ease;
}
.crm-modal-contact-info__header.red-header {
  background: var(--c-red);
}
.crm-modal-contact-info__header.red-header .crm-modal-contact-info__title {
  color: var(--c-white);
}
.crm-modal-contact-info__close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--c-border-gray);
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.crm-modal-contact-info__close:hover {
  background: var(--c-red);
}
.crm-modal-contact-info__title {
  color: var(--c-primary);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
}
.crm-modal-contact-info .tabs-container {
  height: calc(100% - 54px);
  display: flex;
}
.crm-modal-contact-info__tabs {
  display: flex;
  gap: 10px;
  padding: 16px;
  background: var(--c-blue);
  max-width: 250px;
  flex: 0 0 250px;
  flex-direction: column;
}
.crm-modal-contact-info__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.crm-modal-contact-info__tab-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}
.crm-modal-contact-info__tab svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
}
.crm-modal-contact-info__tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-modal-contact-info__tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-white);
}
.crm-modal-contact-info__tab.is-active {
  background: var(--c-white);
  color: var(--c-blue);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.crm-modal-contact-info__body {
  flex: 1 1 auto;
  padding: 20px;
  overflow-y: auto;
}
.crm-modal-contact-info__body.has-actions {
  padding-bottom: 70px;
}
.crm-modal-contact-info__body.sample-body {
  padding: 0;
}
.crm-modal-contact-info__body.sample-body .crm-contacts-table-wrap {
  height: 100%;
  overflow: auto;
}
.crm-modal-contact-info__body.transactions-tab, .crm-modal-contact-info__body.statements-tab, .crm-modal-contact-info__body.recurrence-tab, .crm-modal-contact-info__body.communications-tab {
  padding-right: 0;
}
.crm-modal-contact-info__body.transactions-tab .crm-contact-info-transactions__head, .crm-modal-contact-info__body.statements-tab .crm-contact-info-transactions__head, .crm-modal-contact-info__body.recurrence-tab .crm-contact-info-transactions__head, .crm-modal-contact-info__body.communications-tab .crm-contact-info-transactions__head {
  padding-right: 20px;
}
.crm-modal-contact-info__body.statements-tab, .crm-modal-contact-info__body.recurrence-tab, .crm-modal-contact-info__body.communications-tab {
  padding-bottom: 0;
}
.crm-modal-contact-info__body.statements-tab .crm-modal-contact-info-transactions__table-scroll, .crm-modal-contact-info__body.recurrence-tab .crm-modal-contact-info-transactions__table-scroll, .crm-modal-contact-info__body.communications-tab .crm-modal-contact-info-transactions__table-scroll {
  height: 100%;
  padding-bottom: 0;
}
.crm-modal-contact-info__body.statements-tab .crm-modal-contact-info__details, .crm-modal-contact-info__body.communications-tab .crm-modal-contact-info__details {
  height: 100%;
}
.crm-modal-contact-info__body.statement-edit {
  height: calc(100% - 104px);
  flex: initial;
}
.crm-modal-contact-info__body.statement-form {
  height: calc(100% - 104px);
  flex: initial;
}
.crm-modal-contact-info__body.statement-form .crm-modal-contact-info__meta {
  gap: 20px;
}
.crm-modal-contact-info__body.statement-form label {
  margin: 0;
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.crm-modal-contact-info__body.statement-form input,
.crm-modal-contact-info__body.statement-form select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--c-border-gray);
  background-color: var(--c-white);
  color: var(--c-primary);
  font-size: 13px;
  line-height: 1.2;
  outline: none;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.crm-modal-contact-info__body.statement-form input:focus,
.crm-modal-contact-info__body.statement-form select:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px var(--c-blue10);
}
.crm-modal-contact-info__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media screen and (min-width: 768px) {
  .crm-modal-contact-info__grid {
    grid-template-columns: 40% 1fr;
  }
}
.crm-modal-contact-info__panel-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.crm-modal-contact-info__panel-left-sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.crm-modal-contact-info__panel {
  background: var(--c-white);
  border: 1px solid var(--c-border-gray);
  border-radius: 6px;
  overflow: hidden;
}
.crm-modal-contact-info__panel-box {
  padding-top: 20px;
}
.crm-modal-contact-info__panel-box .crm-modal-contact-info__panel {
  margin-bottom: 8px;
}
.crm-modal-contact-info__panel-box .crm-modal-contact-info__panel:last-child {
  margin-bottom: 0;
}
.crm-modal-contact-info__panel-head {
  padding: 15px 18px;
  border-bottom: 1px solid var(--c-border-gray);
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  background-color: var(--c-gray40);
}
.crm-modal-contact-info__panel-head.slide-down {
  cursor: pointer;
}
.crm-modal-contact-info__panel-head.has-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crm-modal-contact-info__panel-head.has-actions svg {
  width: 14px;
}
.crm-modal-contact-info__panel-head.has-actions span {
  transition: all 0.3s ease;
}
.crm-modal-contact-info__panel-head.has-actions input {
  background: var(--c-white);
  outline: none;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--c-border-gray);
  font-size: 13px;
  line-height: 1;
  font-weight: 300;
}
.crm-modal-contact-info__panel-body {
  padding: 18px;
}
.crm-modal-contact-info__panel-body.prev-email {
  padding: 0;
}
.crm-modal-contact-info__panel-body iframe {
  max-width: 1000px;
  margin: auto;
}
.crm-modal-contact-info__panel-body .crm-email-template-wrap {
  margin-bottom: 0;
  padding: 0;
}
.crm-modal-contact-info__name {
  margin-bottom: 10px;
  color: var(--c-dark-gray);
  font-size: 12px;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.crm-modal-contact-info__name .profile-image {
  width: 70px;
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 70px;
  height: 70px;
}
.crm-modal-contact-info__name .profile-image img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.crm-modal-contact-info__name span {
  color: var(--c-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
}
.crm-modal-contact-info__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crm-modal-contact-info__location {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.crm-modal-contact-info__location-block {
  border-bottom: 1px solid var(--c-border-gray);
  padding-bottom: 18px;
}
.crm-modal-contact-info__location-block:last-child {
  padding-bottom: 0;
  border: 0;
}
.crm-modal-contact-info__location-title {
  margin-bottom: 8px;
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 4px;
}
.crm-modal-contact-info__location-title svg {
  width: 16px;
  color: var(--c-blue);
  flex: 0 0 16px;
}
.crm-modal-contact-info__location-value {
  color: var(--c-dark-gray);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.crm-modal-contact-info__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.crm-modal-contact-info__meta-item .crm-email-template-wrap {
  font-size: 14px;
}
.crm-modal-contact-info__meta-item svg {
  width: 16px;
  color: var(--c-blue);
  flex: 0 0 16px;
}
.crm-modal-contact-info__meta-item {
  color: var(--c-primary);
  font-size: 13px;
  line-height: 1.1;
}
.crm-modal-contact-info__meta-item.address {
  align-items: flex-start;
}
.crm-modal-contact-info__placeholder {
  padding: 40px;
  background: var(--c-white);
  border: 1px dashed var(--c-border-gray);
  border-radius: 6px;
  color: var(--c-dark-gray);
  font-size: 13px;
  width: 100%;
  text-align: center;
}
.crm-modal-contact-info__empty {
  padding: 40px;
  background: var(--c-white);
  color: var(--c-dark-gray);
  font-size: 13px;
  text-align: center;
}
.crm-modal-contact-info__placeholder-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.crm-modal-contact-info__placeholder-row {
  padding: 12px 14px;
  border: 1px solid var(--c-border-gray);
  border-radius: 6px;
  background: var(--c-gray);
  color: var(--c-dark-gray);
  font-size: 13px;
}
.crm-modal-contact-info .fi-tabs-item.fi-active, .crm-modal-contact-info .fi-tabs-item:hover {
  background: var(--c-blue);
  border-radius: 4px;
}
.crm-modal-contact-info .fi-tabs-item.fi-active .fi-tabs-item-label, .crm-modal-contact-info .fi-tabs-item:hover .fi-tabs-item-label {
  color: var(--c-white);
}
.crm-modal-contact-info .fi-tabs {
  background: var(--c-gray40);
}
.crm-modal-contact-info .fi-sc-tabs-tab {
  padding: 20px;
  overflow: hidden;
}
.crm-modal-contact-info .fi-section {
  box-shadow: none;
  border: 0;
  padding: 0;
}
.crm-modal-contact-info .fi-section .fi-section-content {
  padding: 0;
}
.crm-modal-contact-info .fi-section .fi-section {
  box-shadow: none;
  border: 1px solid var(--c-border-gray);
  padding: 0;
  overflow: hidden;
}
.crm-modal-contact-info .fi-section .fi-section .fi-section-header {
  background: var(--c-gray40);
}
.crm-modal-contact-info .fi-section .fi-section .fi-section-content {
  padding: 20px;
}
.crm-modal-contact-info__details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 50px;
}
.crm-modal-contact-info__details.pb-none {
  padding-bottom: 0;
}
.crm-modal-contact-info__details-actions {
  position: absolute;
  bottom: 0;
  background-color: var(--c-gray);
  right: 0;
  height: 50px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding: 0 20px;
  z-index: 2;
}
.crm-modal-contact-info__details-actions.small-container {
  left: 250px;
}
.crm-modal-contact-info__change-log-table {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-height: 206px;
  overflow: auto;
  scrollbar-width: none;
}
.crm-modal-contact-info__change-log-item {
  padding: 10px;
  width: 100%;
  text-align: left;
  background-color: var(--c-gray40);
  border-radius: 4px;
  font-size: 13px;
  border: 1px solid var(--c-border-gray);
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.crm-modal-contact-info__change-log-item svg {
  width: 14px;
  height: 14px;
}
.crm-modal-contact-info__change-log-item.selected, .crm-modal-contact-info__change-log-item:hover {
  color: var(--c-white);
  background-color: var(--c-blue);
}
.crm-modal-contact-info__log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crm-modal-contact-info__log-values-container {
  border-top: 1px solid var(--c-border-gray);
  margin-top: 10px;
  padding-top: 10px;
}
.crm-modal-contact-info__log-row {
  padding: 10px;
  width: 100%;
  text-align: left;
  background-color: var(--c-gray40);
  border-radius: 4px;
  font-size: 13px;
  border: 1px solid var(--c-border-gray);
}
.crm-modal-contact-info__log-field {
  line-height: 1;
}
.crm-modal-contact-info__log-content {
  font-weight: 500;
}
.crm-modal-contact-info-transactions {
  height: 100%;
}
.crm-modal-contact-info-transactions__table-scroll {
  overflow: auto;
  height: calc(100% - 30px);
  padding-right: 20px;
  padding-bottom: 20px;
}
.crm-modal-contact-info-transactions__actions {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.crm-modal-contact-info-transactions__actions select {
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  height: 28px;
}

.crm-panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.crm-panel-actions .btn.full-btn.color-yellow {
  padding: 8px 10px;
  height: 32px;
}

.crm-contact-merge .crm-modal-contact-info__panel-body {
  overflow: auto;
}
.crm-contact-merge__search {
  display: flex;
  align-items: center;
}
.crm-contact-merge__search-field {
  flex: 1;
}
.crm-contact-merge__search input {
  height: 28px;
  border: 1px solid var(--c-border-gray);
  outline: none;
  width: 100%;
  padding: 0 10px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.crm-contact-merge__search input:focus {
  border-color: var(--c-blue);
}
.crm-contact-merge__search .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.crm-contact-merge__actions {
  margin-top: 20px;
}
.crm-contact-merge .crm-contacts-table tbody tr:hover td {
  color: var(--c-primary);
  background: transparent;
}
.crm-contact-merge .crm-contacts-table tbody td.primary:hover, .crm-contact-merge .crm-contacts-table tbody td.primary.selected {
  color: var(--c-white);
  background: var(--c-blue);
}
.crm-contact-merge .crm-contacts-table tbody td.secondary:hover, .crm-contact-merge .crm-contacts-table tbody td.secondary.selected {
  color: var(--c-primary);
  background: var(--c-yellow);
}
.crm-contact-merge .crm-contacts-table tbody td.merge-result {
  font-size: 13px;
}
.crm-contact-merge .crm-contacts-table tbody td.merge-result.primary {
  color: var(--c-blue);
  background: transparent;
}
.crm-contact-merge .crm-contacts-table tbody td.merge-result.secondary {
  color: var(--c-yellow);
  background: transparent;
}

.merge-grid {
  margin: 20px 0;
  grid-template-columns: 50% 1fr;
}

.template-page .sortable-ghost {
  opacity: 0;
}
.template-page .sortable-chosen {
  opacity: 1;
  box-shadow: none !important;
}
.template-page .sortable-drag {
  opacity: 1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.template-page .crm-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0;
}
.template-page .crm-page__head {
  padding: 16px 20px;
}
.template-page .crm-page-card {
  background: #fff;
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  box-shadow: none;
  padding: 16px;
}
.template-page .crm-page-card:hover {
  box-shadow: none;
  outline: none;
  transform: none;
}
.template-page .crm-input-color {
  height: 30px;
  padding: 0;
  cursor: pointer;
  width: 30px;
}
.template-page .crm-block-actions {
  color: var(--c-primary);
  line-height: 1;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px 20px;
  flex: 1;
  flex-wrap: wrap;
}
.template-page .crm-block-actions .actions-container {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.template-page .crm-block-actions .is-active {
  color: var(--c-blue);
}
.template-page .crm-block-actions svg {
  width: 16px;
}
.template-page .crm-template-component {
  height: 100%;
}
.template-page .crm-template-editor {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1000px;
  margin: auto;
}
.template-page .crm-template-editor__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--c-gray60);
  border-radius: 4px;
  padding: 10px;
}
.template-page .crm-template-editor__section label {
  font-size: 13px;
  font-weight: 500;
}
.template-page .crm-template-editor__section input {
  height: 30px;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  outline: none;
  border: 1px solid var(--c-border-gray);
}
.template-page .crm-template-editor__section select {
  min-width: 160px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  background-color: var(--c-white);
  color: var(--c-primary);
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}
.template-page .crm-template-editor__section select:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px var(--c-blue10);
}
.template-page .crm-template-editor__textarea {
  min-height: 260px;
}
.template-page .crm-template-editor__css {
  min-height: 220px;
  font-family: monospace;
}
.template-page .crm-template-builder__canvas, .template-page .crm-template-builder__preview {
  min-height: 420px;
  border-radius: 4px;
  padding: 16px;
  background: var(--c-gray60);
}
.template-page .crm-template-builder__canvas-head {
  margin-bottom: 14px;
}
.template-page .crm-template-builder__canvas-head h3 {
  margin: 0;
  font-size: 16px;
}
.template-page .crm-template-builder__canvas-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.template-page .crm-template-builder__preview-card {
  gap: 20px;
  display: flex;
  flex-direction: column;
}
.template-page .crm-template-builder__preview-card .crm-textarea {
  width: 100%;
  outline: none;
  border: 1px solid var(--c-border-gray);
  padding: 5px;
  border-radius: 4px;
  text-align: inherit;
}
.template-page .crm-template-builder__preview-card input {
  outline: none;
  border: 1px solid var(--c-border-gray);
  padding: 2px;
  border-radius: 4px;
}
.template-page .crm-template-preview__block {
  position: relative;
  margin-bottom: 0;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.7;
  border: 1px solid var(--c-border-gray);
  padding: 10px;
}
.template-page .crm-template-preview__block .crm-template-preview__item ul {
  list-style: disc;
  padding-left: 20px;
}
.template-page .crm-template-preview__block .crm-template-preview__item ol {
  padding-left: 20px;
  list-style: decimal;
}
.template-page .crm-template-preview__block .crm-template-preview__item blockquote {
  border-left: 4px solid #d1d5db;
  padding-left: 16px;
  margin: 16px 0;
  font-style: italic;
}
.template-page .crm-template-preview__block.is-selected {
  border: 1px solid var(--c-blue);
  padding: 10px;
  background: #fff;
  color: var(--c-primary);
}
.template-page .crm-template-preview__block.is-selected .crm-action-button {
  color: var(--c-blue);
}
.template-page .crm-template-preview__block-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-primary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.template-page .crm-template-preview__block-title span {
  max-width: 150px;
}
.template-page .crm-template-preview__block .crm-template-editor__section {
  margin-top: 10px;
}
.template-page .crm-template-preview__block input {
  width: 100%;
  padding: 5px;
}
.template-page .crm-template-preview__block .crm-form-label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}
.template-page .crm-template-preview__block .crm-image-editor {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.template-page .crm-template-preview__block .crm-image-upload__drop img {
  margin-top: 5px;
}
.template-page .crm-template-preview__block .crm-image-upload__actions {
  margin-top: 10px;
}
.template-page .crm-template-preview__block .crm-grid-image .col-img {
  margin-bottom: 20px;
}
.template-page .crm-template-preview__block .crm-grid-image .col-img:last-child {
  margin-bottom: 0;
}
.template-page .crm-template-preview__block:last-child {
  margin-bottom: 0;
}
.template-page .crm-template-block {
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}
.template-page .crm-template-block.is-selected {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  background: rgba(59, 130, 246, 0.04);
}
.template-page .crm-template-block {
  cursor: grab;
}
.template-page .crm-template-block:active {
  cursor: grabbing;
}
.template-page .crm-template-block__main {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.template-page .crm-template-block__main strong {
  font-size: 13px;
  color: var(--c-primary);
}
.template-page .crm-template-block__main span {
  font-size: 13px;
  color: var(--c-dark-gray);
}
.template-page .crm-template-block__actions {
  display: flex;
  gap: 10px;
  padding: 0 16px 14px;
}
.template-page .crm-template-block__actions button {
  border: 0;
  background: transparent;
  color: var(--c-primary);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.template-page .crm-template-block-divider .crm-grid {
  margin-bottom: 2px;
}
.template-page .crm-template-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 0;
}
.template-page .crm-template-sidebar__colors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.template-page .crm-template-sidebar__color {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-border-gray);
  padding-bottom: 8px;
}
.template-page .crm-template-sidebar__color:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.template-page .crm-template-sidebar__section {
  display: flex;
  flex-direction: column;
  background: var(--c-gray60);
  border-radius: 4px;
  border-bottom: 1px solid var(--c-border-gray);
}
.template-page .crm-template-sidebar__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 10px;
  cursor: pointer;
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.template-page .crm-template-sidebar__title svg {
  width: 16px;
}
.template-page .crm-template-sidebar__title span {
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.template-page .crm-template-sidebar__title span.is-open {
  transform: rotate(-180deg);
}
.template-page .crm-template-sidebar__content {
  padding: 10px;
  border-top: 1px solid var(--c-border-gray);
}
.template-page .crm-template-sidebar__content input {
  height: 30px;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  outline: none;
  border: 1px solid var(--c-border-gray);
}
.template-page .crm-template-sidebar__content .crm-input-color {
  background: transparent;
  padding: 0;
  border: 0;
}
.template-page .crm-template-sidebar__content select {
  height: 30px;
  background: #fff;
  border-radius: 4px;
  outline: none;
  border: 1px solid var(--c-border-gray);
}
.template-page .crm-template-sidebar__actions {
  padding: 10px;
  border-top: 1px solid var(--c-border-gray);
  display: flex;
  align-items: center;
  gap: 10px;
}
.template-page .crm-template-sidebar__actions .btn {
  justify-content: center;
  flex: 1;
}
.template-page .crm-template-sidebar__blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.template-page .crm-template-sidebar__inspector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.template-page .crm-template-sidebar__inspector-type {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-dark-gray);
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--c-light);
}
.template-page .crm-template-section-settings {
  width: 100%;
}
.template-page .crm-template-section-settings .crm-section-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.template-page .crm-template-section-settings .crm-section-settings-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.template-page .crm-template-preview__section {
  background: var(--c-white);
  padding: 16px;
  border-radius: 4px;
  border: 1px solid var(--c-border-gray);
}
.template-page .crm-template-preview__section-title {
  flex-direction: column;
}
.template-page .crm-template-preview__section-title_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.template-page .crm-template-preview__section-body {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  padding: 10px;
  border-top: 1px solid var(--c-border-gray);
  margin-top: 16px;
  padding-top: 32px;
}
.template-page .crm-template-preview__section-body .crm-contacts-empty {
  grid-column: span 6;
}
.template-page .crm-template-preview__section .crm-template-section-add {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border-gray);
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--c-primary) !important;
}
.template-page .crm-template-preview__item {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 14px;
}
.template-page .crm-template-preview__item:last-child {
  margin-bottom: 0;
}
.template-page .crm-template-preview__item-heading {
  font-size: 22px;
  font-weight: 700;
}
.template-page .crm-template-preview__item-button .crm-template-preview__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
}
.template-page .crm-template-preview__button {
  text-decoration: none;
}
@media (max-width: 1024px) {
  .template-page .crm-template-editor__grid {
    grid-template-columns: 1fr;
  }
  .template-page .crm-template-builder {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 64rem) {
  .fi-fo-file-upload .filepond--root[data-style-panel-layout=grid] .filepond--item {
    width: calc(25% - 0.5rem);
  }
}
.crm-gallery {
  display: block;
}
.crm-gallery .crm-page-container {
  height: 100%;
}
.crm-gallery-upload {
  margin-bottom: 50px;
}
.crm-gallery-upload__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.crm-gallery-upload__actions input {
  height: 28px;
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  flex: 1;
  padding: 0 5px;
  outline: none;
}
.crm-gallery-upload__actions select {
  height: 28px;
  border: 1px solid var(--c-border-gray);
  border-radius: 4px;
  padding: 0 5px;
  outline: none;
}
.crm-template-directory-manager .crm-page__head {
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0;
}
.crm-template-directory-manager .crm-page__head .crm-copy-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.crm-template-directory-manager .crm-page__head select {
  padding: 2px 10px;
  border: 1px solid var(--c-border-gray);
  background-color: var(--c-white);
  color: var(--c-primary);
  font-size: 13px;
  line-height: 1.2;
  outline: none;
  transition-property: all;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.crm-template-directory-manager .crm-contacts-sidebar-container.active,
.crm-template-directory-manager .crm-contacts-sidebar {
  width: 350px;
}
.crm-template-directory-manager .directory-content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: auto;
  position: relative;
  padding: 16px 20px;
}
.crm-template-directory-manager .directory-content.single-directory {
  padding: 0;
}
.crm-template-directory-manager .directory-content.single-directory .crm-page-container {
  height: 100%;
}
.crm-template-tree__list {
  gap: var(--gap);
}
.crm-template-tree__item {
  display: flex;
  flex-direction: column;
  background: var(--c-gray60);
  border-radius: 4px;
  padding: 10px;
  transition: all 0.3s ease;
}
.crm-template-tree__item svg {
  width: 20px;
  color: var(--c-yellow-dirr);
  transition: all 0.3s ease;
}
.crm-template-tree__item .dirr-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-border-gray);
}
.crm-template-tree__item .dirr-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.crm-template-tree__item .dirr-head-actions .view-link {
  font-size: 13px;
  line-height: 1;
  color: var(--c-blue);
}
.crm-template-tree__item .dirr-head button {
  color: var(--c-blue);
  font-size: 13px;
  line-height: 1;
}
.crm-template-tree__item.single-dir .dirr-head {
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.crm-template-tree__item.is-editing {
  background: var(--c-blue);
  color: var(--c-white);
}
.crm-template-tree__item.is-editing svg {
  color: var(--c-white);
}
.crm-template-tree__item.is-editing .dirr-head button,
.crm-template-tree__item.is-editing .dirr-head .view-link {
  color: var(--c-white);
}
.crm-template-tree__item.is-editing ul {
  color: var(--c-primary);
}
.crm-template-tree__item.is-editing ul svg {
  color: var(--c-yellow-dirr);
}
.crm-template-tree__item.is-editing ul .dirr-head button {
  color: var(--c-blue);
}
.crm-template-tree__item.is-editing .crm-template-tree__item button,
.crm-template-tree__item.is-editing .crm-template-tree__item .view-link {
  color: var(--c-blue);
}
.crm-template-tree__item.is-active {
  background: var(--c-primary);
  color: var(--c-white);
}
.crm-template-tree__item.is-active svg {
  color: var(--c-white);
}
.crm-template-tree__item.is-active .dirr-head button,
.crm-template-tree__item.is-active .dirr-head .view-link {
  color: var(--c-white);
}
.crm-template-tree__item.is-active ul {
  color: var(--c-primary);
}
.crm-template-tree__item.is-active ul svg {
  color: var(--c-yellow-dirr);
}
.crm-template-tree__item.is-active ul .dirr-head button {
  color: var(--c-primary);
}
.crm-template-tree__item.is-active .crm-template-tree__item button,
.crm-template-tree__item.is-active .crm-template-tree__item .view-link {
  color: var(--c-blue);
}
.crm-template-tree__item ul {
  background: var(--c-white);
  padding: 5px;
  border-radius: 4px;
  margin-top: 10px;
}
.crm-directories-search input {
  min-height: 30px;
  border-radius: 4px;
}
.crm-directory-panel {
  background: var(--c-gray60);
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.crm-directory-panel h3 {
  border-bottom: 1px solid var(--c-border-gray);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.crm-directory-panel:last-child {
  margin-bottom: 0;
}
.crm-directory-search {
  padding: 12px 16px;
}
.crm-directory-search input {
  min-height: 30px;
  border-radius: 4px;
}
.crm-directory-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.crm-directory-form .crm-contacts-field {
  width: 100%;
}

.crm-template-preview__section-wrap {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: hidden;
  transition: grid-template-rows 0.2s ease, opacity 0.2s ease;
}

.crm-template-preview__section.is-collapsed .crm-template-preview__section-wrap {
  grid-template-rows: 0fr;
  opacity: 0;
}

.crm-template-preview__section-wrap .crm-template-preview__section-wrap-content {
  min-height: 0;
}