/* --- Theme base styles --- */

/* --- Font Family --- */
/* Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');



/* --- Generic
This is where reset, normalize & box-sizing styles go.
*/
*, *:before, *:after {
  box-sizing: border-box;
}
/*! 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;
}

/**
* 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
========================================================================== */

/**
* Add the correct box sizing in Firefox.
*/

hr {
  box-sizing: content-box;
  height: 0;
}

/**
* 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
========================================================================== */

/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
*/

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
* 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%;
}

/**
* 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;
}

/* 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 */
}

/**
* Remove the inheritance of text transform in Edge and Firefox.
* 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;
}

/**
* Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
*/

legend {
  padding: 0;
}

/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/

progress {
  vertical-align: baseline;
}

/**
* 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 and Firefox.
*/

details {
  display: block;
}

/*
* Add the correct display in all browsers.
*/

summary {
  display: list-item;
}

/* --- Objects
Non-cosmetic design patterns including grid and layout classes)
*/


/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


.row-fluid .span1,
.row-fluid .span2,
.row-fluid .span3,
.row-fluid .span4,
.row-fluid .span5,
.row-fluid .span6,
.row-fluid .span7,
.row-fluid .span8,
.row-fluid .span9,
.row-fluid .span10,
.row-fluid .span11,
.row-fluid .span12{
/*   min-height: 1px; */
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
  .row-fluid .span1 {
    width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span2 {
    width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span3 {
    width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span4 {
    width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span5 {
    width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span6 {
    width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span7 {
    width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span8 {
    width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span9 {
    width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span10 {
    width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span11 {
    width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
  }
  
}
/* --- Unknown but removes bottom invisible padding */
.body-wrapper {
  height: 100px;
}


.content-wrapper {
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* --- Global components --- */

/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/



.p-b-1 {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  border-radius: 4px;
  background-color: var(--p-b-d);
  color: var(--w-t);
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
}

.p-b-1:disabled {
  background-color:  var(--border);
}

.p-b-1:hover { 
  background-color:  var(--p-b-h);
}

.p-b-2 {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  border-radius: 4px;
  background-color:  var(--p-b-h);
  color: var(--w-t);
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
  border: 1px solid transparent;
}

.p-b-2:disabled {
  background-color:  var(--border);
}

.p-b-2:hover { 
  background-color:  transparent;
  border: 1px solid var(--w-t);
}

.p-b-3 {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* Spacing between text and icon */
  padding: 12px 24px;
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  border-radius: 4px;
  background-color:  var(--p-b-d);
  color: var(--w-t);
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
}

.p-b-3::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g clip-path="url(%23clip0)"><path d="M12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM8.72123 17.2193V6.7807L17.7613 12L8.72123 17.2193Z" fill="white"/></g><defs><clipPath id="clip0"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>');
  margin-top: 5px;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-b-3:disabled {
  background-color:  var(--border);
}

.p-b-3:hover { 
  background-color:  var(--p-b-h);
}

.s-b {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  border-radius: 4px;
  background-color: transparent;
  color: var(--s-b-d);
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
  border: 1px solid var(--s-b-d);
}

.s-b:disabled {
  background-color:  var(--border);
}

.s-b:hover { 
  color: var(--w-t);
  background-color:  var(--p-b-h);
  border: 1px solid transparent;
}

.link {
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  color: var(--l-d);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  /* Remove default underline */
}

.link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px; /* Thickness of the border */
  width: 0;
  background-color: var(--l-d); /* Use same color as text or customize */
  transition: width 0.3s ease;
}

.link:hover::before {
  width: 100%;
}

.link::after {
  content: url('data:image/svg+xml;utf8,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_5817_15621)"><path d="M3.125 10.5H16.875M16.875 10.5L11.25 4.875M16.875 10.5L11.25 16.125" stroke="%233B7A57" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_5817_15621"><rect width="20" height="20" fill="white" transform="translate(0 0.5)"/></clipPath></defs></svg>');
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 21px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.link:hover::after {
  opacity: 1;
}



.btn_default-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.75em; /* Spacing between text and icon */
  padding: 0.9375em 1.5em 1.0625em 1.5em; /* Padding around the button */
  justify-content: center;
  border-radius: 12px; /* Rounded corners */
  border: 0px;
  background: var(--primary); /* Primary background color */
  color: var(--white); /* Text color */
  transition: all 150ms ease-out; /* Smooth transition on hover */
  text-decoration: none; /* Remove underline */
  cursor: pointer;
}

.btn_default-icon::after {
  content: url('https://1682788.fs1.hubspotusercontent-na1.net/hubfs/1682788/2024%20Files%20%28Sorted%29/Swept%20Website/Download%20Icon.svg');
  width: 1.1875em;
  height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 150ms ease-out;
}

.btn_default-icon:hover {
  background: var(--blue); /* Change background color on hover */
  cursor: pointer; /* Pointer cursor on hover */
}


@media (max-width: 768px) {

  .p-b-1 {
    display: block;
    padding: 10px 24px;
    font-family: var(--button-1-mobile-font-family);
    font-weight: var(--button-1-mobile-font-weight);
    font-size: var(--button-1-mobile-font-size);
    line-height: var(--button-1-mobile-line-height);
    letter-spacing: var(--button-1-mobile-letter-spacing);
  }

  .p-b-2 {
    display: block;
    padding: 10px 24px;
    font-weight: var(--button-1-mobile-font-weight);
    font-size: var(--button-1-mobile-font-size);
    line-height: var(--button-1-mobile-line-height);
    letter-spacing: var(--button-1-mobile-letter-spacing);
  }

  .p-b-3 {
    display: flex;
    justify-content: center;
    padding: 10px 24px;
    font-weight: var(--button-1-mobile-font-weight);
    font-size: var(--button-1-mobile-font-size);
    line-height: var(--button-1-mobile-line-height);
    letter-spacing: var(--button-1-mobile-letter-spacing);
  }

  .s-b {
    display: block;
    padding: 10px 24px;
    font-weight: var(--button-1-mobile-font-weight);
    font-size: var(--button-1-mobile-font-size);
    line-height: var(--button-1-mobile-line-height);
    letter-spacing: var(--button-1-mobile-letter-spacing);
  }

}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


:root {

  /* --- Existing Global Colors --- */
  --p-c: #52B2E2;
  --s-c: #000033;

  --l-b: #FFFFFF;
  --l-a-b-1: #F4F7FA;
  --l-a-b-2: #E8F2FC; 
  --h-c-b: #FB5E34;
  --s-b: #F6FAF4;
  --a-b: #FCEEEE;
  --n-b: #FFFDED;

  --b-b: #e2e8f0;
  --b-l: rgba(203, 213, 225, .5);
  --b-n: #FEF08A;  

  --p-b-d: #52B2E2;
  --p-b-h: #000033;

  --s-b-d: #52B2E2;
  --s-b-h: #000033;

  --l-d: #52B2E2;

  --d-t-1: #161717;
  --d-t-2: #33383C;
  --d-t-3: #222528;
  --d-t-s: #334155;
  --w-t: #FFFFFF;
  --s-t: #437F15;
  --a-t: #D62424;

  --ds1: 0px 10px 50px rgba(251, 94, 52, 0.25);
  --ds2: 0px 10px 40px rgba(15, 15, 15, 0.075);
  --d-s-1: 0px 1px 4px rgba(15, 23, 42, 0.04);

  /* ********** Loveable styles ************** */
  --c-d-t-1: #020817;
  --c-d-t-2: #64748B;
  --c-ds1: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; 
  --c-ds2: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; 

  /* ********** Module Specific Colors ************** */

  /* Primary Blue Variations */
  --btn-primary: #0DA2E7;
  --btn-primary-hover: #0895b4;
  --btn-primary-alpha: #0da2e7e6; 
  --bg-blue-light: #F7FCFE;

  /* Status: Success (Green) */
  --success-bg: #dcfce7;
  --success-border: #bbf7d0;
  --success-text: #166534;
  --success-text-2: #16a34a; 
  --success-text-3: rgba(83,157,26,1);
  --success-main: #22c55e; 

  /* Status: Danger (Red) */
  --danger-main: #EF4444; 
  --danger-hover: #F05656;
  --danger-bg: #fee2e2;
  --danger-text: #991b1b;
  --danger-text-2: #DC2626;

  /* Status: Warning/Upcoming (Yellow) */
  --warning-main: #eab308;
  --warning-bg: #fef9c3;
  --warning-text: #854d0e;
  --warning-text-2: #CA8A04;

  /* Dashboard & Chart Colors */

  --blue-text: #2563eb;
  --blue-text-dark: #1e40af;
  --link-blue: #4076ED;
  --purple-bg-light: #f3e8ff;
  --purple-text: #9333ea;
  --cyan-bg-light: #cffafe;
  --cyan-text: #0891b2;
  --amber-bg-light: #fef3c7;
  --amber-text: #d97706;
  --icon-bg-gold-alpha: #E2CA521A;
  --chart-blue-stroke: rgba(74, 144, 226, 1);
  --chart-blue-fill: rgba(74, 144, 226, 0.2);

  /* Updates & Progress Module */

  --text-gray-mid: #9ca3af;
  --bg-gray-light: #f3f4f6;
  --progress-bar-track: #f1f5f9;

  /* JS Logic Card Borders/Backgrounds */
  --card-border-blue: #c5e5f8;
  --card-border-green: #bcf7d1;
  --card-border-gray: #d1d1d1;
  --card-bg-blue: #eaf5fd;

  --card-bg-gray: #f9fafb;

  /* Request Form Module */
  --pill-bg-blue: #dbe9fe;
  --pill-text-blue: #1d40b0;
  --pill-bg-red: #fee2e1; 
  --notice-border: rgba(254, 240, 138, 1);
  --cyan-bg-lighter: #cefafe;
  --cyan-text-dark: #0a91b1;

  /* Chat & Support Module */
  --warning-card-bg: #fffbeb;
  --warning-card-border: #fde68a;
  --warning-text-dark: #92400e;
  --warning-text-darker: #b45309;
  --hover-gray-bg: #f9fafb;
  --popup-shadow: rgba(0, 0, 0, 0.2);
  --backdrop-bg: rgba(0, 0, 0, 0.5);
  --close-btn-text: #333;
  --faq-icon-blue: #0da2e7;

  /* --- NEWLY ADDED FOR VIDEO GALLERY MODULE --- */
  --bg-body-gray: #f4f4f4;
  --shadow-video-card: 0 2px 10px rgba(0, 0, 0, 0.1);
  --text-gray-500: #555555;



  /****************** redesign colors  start here *****************/

  /*  section-1 */
  --card-1:#6DCDFF;
  --card-2:#FEE889;
  --card-3:#F53F5F;
  --card-4:#9FE870;
  --blood-work-btn:#551C18;


  /*  header-2  */
  --menu-active:#CDEFFF;
  --blue-text:#20B4FF;
  --input-gray:#F9FAFA;
  --icon-active:#007AFF;


  /* home section-3   */
  --item-type:#009AFF;
  --item-type-bg:#EEF8FF;
  --item-type-border:#CDEFFF;
  --item-card-bg:#F9FAFA;
  --border:#DDE2E9;

  /*  chart  */
  --section-bg:#FFFFFF;


  /*  medication req status    */
  --success-bg-lighter: #F0FDF4; 
  --blue-bg-light: #DBEAFE;
  --card-bg-green: #F0FDF4;
  --blue-bg-lighter: #EFF6FF;

  /*  p-btn bg  */
  --btn-bg:#007AFF;  
  --btn-border:#DDE2E9;


  /*  table header  */
  --th:#F9FAFA;

  /*  Medication and blood work progress cards  */
  --progress-card-done-bg:#CDEFFF;
  --prgress-card-bg:#DDE2E9;

  --tertiary-text:#009AFF;


  /*  form  */
  --choice-bg:#F3F4F5;


  /*  tab  */
  --tab-active:#DEE3EA;


  --h-card:#EEF8FF;

  /* clien checklist   */
  --card-gray:#F6F7F7;



  /*   chat   */
  --notice-bg:#FFFAEB;
  --notice-border:#FEDF89;
  --notice-text:#DC6803;

}



[data-theme="dark"] {

  --l-b: #1A1D21;
  --d-t-1: #DDE2E9;
  --d-t-2: #858E9F;


  /*  header-2  */
  --menu-active:#222528;
  --blue-text:#20B4FF;
  --input-gray:#161717;
  --icon-active:#007AFF;

  /* home section 3   */
  --border:#3D4247;
  --item-type:#009AFF;
  --item-type-bg:#EEF8FF;
  --item-type-border:#CDEFFF;
  --item-card-bg:#222528;


  /* medication req status   */
  --success-bg-lighter: #1C2E38; 
  --card-bg-green: #1C2E38;
  --blue-bg-light: #1C2E38;
  --blue-bg-lighter: 222528;

  --progress-card-done-bg:#1C2E38;
  --prgress-card-bg:#3D4247;
  --tertiary-text:#6DCDFF;

  /*  chart  */
  --section-bg:#222528;

  /* p-btn */
  --btn-border:#3D4247;

  /*  table header  */
  --th:#222528;

  /*  form  */
  --choice-bg:#222528;

  /*  tab  */
  --tab-active:#3D4247;


  --h-card:#001B34;

  /* clien checklist   */
  --card-gray:#222528;


  /*   chat   */
  --notice-bg:#4E1D09;
  --notice-border:#93370D;
  --notice-text:#FDB022;

}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap');
*/

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');


a {
  text-decoration: none;
}




:root {
  --p-font:'Geist', sans-serif;

  /* Desktop Large */
  --h1-desktop-large-font-family: 'Geist', sans-serif;
  --h1-desktop-large-font-weight: 700; /* Bold */
  --h1-desktop-large-font-size: 3.125em;
  --h1-desktop-large-line-height: 120%;
  --h1-desktop-large-letter-spacing: 0%;

  /* Mobile */
  --h1-mobile-font-family: 'Geist', sans-serif;
  --h1-mobile-font-weight: 700; /* Bold */
  --h1-mobile-font-size: 2.75em;
  --h1-mobile-line-height: 120%;
  --h1-mobile-letter-spacing: 0%;

  /* h2 Desktop Large */
  --h2-desktop-large-font-family: 'Geist', sans-serif;
  --h2-desktop-large-font-weight: 500; /* Semi Bold */
  --h2-desktop-large-font-size: 2.75em; /*  */
  --h2-desktop-large-line-height: 120%;
  --h2-desktop-large-letter-spacing: 0%;

  /* h2 Mobile */
  --h2-mobile-font-family: 'Geist', sans-serif;
  --h2-mobile-font-weight: 500; /* Bold */
  --h2-mobile-font-size: 1.625em; /*  */
  --h2-mobile-line-height: 120%;
  --h2-mobile-letter-spacing: 0%;

  /* h3 Desktop Large */
  --h3-desktop-large-font-family: 'Geist', sans-serif;
  --h3-desktop-large-font-weight: 400; 
  --h3-desktop-large-font-size: 2.25em; 
  --h3-desktop-large-line-height: 150%;
  --h3-desktop-large-letter-spacing: 0%;

  /* h3 Mobile */
  --h3-mobile-font-family: 'Geist', sans-serif;
  --h3-mobile-font-weight: 400; /* Medium */
  --h3-mobile-font-size: 1.5em; /* 28px */
  --h3-mobile-line-height: 150%;
  --h3-mobile-letter-spacing: 0%;

  /* h4 Desktop Large */
  --h4-desktop-large-font-family: 'Geist', sans-serif;
  --h4-desktop-large-font-weight: 500; /* Bold */
  --h4-desktop-large-font-size: 2em; /* 36px */
  --h4-desktop-large-line-height: 120%;
  --h4-desktop-large-letter-spacing: 0%;

  /* h4 Mobile */
  --h4-mobile-font-family: 'Geist', sans-serif;
  --h4-mobile-font-weight: 500; /* Bold */
  --h4-mobile-font-size: 1.375em; /* 24px */
  --h4-mobile-line-height: 120%;
  --h4-mobile-letter-spacing: 0%;

  /* h5 Desktop Large */
  --h5-desktop-large-font-family: 'Geist', sans-serif;
  --h5-desktop-large-font-weight: 500; /* Bold */
  --h5-desktop-large-font-size: 1.5em; /* 28px */
  --h5-desktop-large-line-height: 120%;
  --h5-desktop-large-letter-spacing: 0%;

  /* h5 Mobile */
  --h5-mobile-font-family: 'Geist', sans-serif;
  --h5-mobile-font-weight: 500; /* Bold */
  --h5-mobile-font-size: 1.125em; /* 20px */
  --h5-mobile-line-height: 120%;
  --h5-mobile-letter-spacing: 0%;


  /* h6 Desktop Large */
  --h6-desktop-large-font-family: 'Geist', sans-serif;
  --h6-desktop-large-font-weight: 700; 
  --h6-desktop-large-font-size: 1.25em; 
  --h6-desktop-large-line-height: 120%;
  --h6-desktop-large-letter-spacing: 0%;

  /* h6 Mobile */
  --h6-mobile-font-family: 'Geist', sans-serif;
  --h6-mobile-font-weight: 700; 
  --h6-mobile-font-size: 1em; 
  --h6-mobile-line-height: 120%;
  --h6-mobile-letter-spacing: 0%;


  /* body-1 Desktop Large */
  --body-1-desktop-large-font-family:'Geist', sans-serif;
  --body-1-desktop-large-font-weight: 400; /* Regular */
  --body-1-desktop-large-font-size: 1.125em;
  --body-1-desktop-large-line-height: 150%;
  --body-1-desktop-large-letter-spacing: 0%;

  /* body-1 Mobile */
  --body-1-mobile-font-family: 'Geist', sans-serif;
  --body-1-mobile-font-weight: 400; /* Regular */
  --body-1-mobile-font-size: 0.875em; 
  --body-1-mobile-line-height: 150%;
  --body-1-mobile-letter-spacing: 0%;


  /* body-1-highlight Desktop Large */
  --body-1-highlight-desktop-large-font-family: 'Geist', sans-serif;
  --body-1-highlight-desktop-large-font-weight: 600; /* SemiBold */
  --body-1-highlight-desktop-large-font-size: 1.125em;
  --body-1-highlight-desktop-large-line-height: 150%;
  --body-1-highlight-desktop-large-letter-spacing: 0%;

  /* body-1-highlight Mobile */
  --body-1-highlight-mobile-font-family: 'Geist', sans-serif;
  --body-1-highlight-mobile-font-weight: 600; /* SemiBold */
  --body-1-highlight-mobile-font-size: 0.875em;
  --body-1-highlight-mobile-line-height: 150%;
  --body-1-highlight-mobile-letter-spacing: 0%;


  /* body-2 Desktop Large */
  --body-2-desktop-large-font-family: 'Geist', sans-serif;
  --body-2-desktop-large-font-weight: 400; /* Regular */
  --body-2-desktop-large-highlight-font-weight: 600; /* Regular */
  --body-2-desktop-large-font-size: 1em; /* 16px */
  --body-2-desktop-large-line-height: 150%;
  --body-2-desktop-large-letter-spacing: 0%;

  /* body-2 Mobile */
  --body-2-mobile-font-family:'Geist', sans-serif;
  --body-2-mobile-font-weight: 400; /* Regular */
  --body-2-mobile-font-size: 0.75em; /* 12px */
  --body-2-mobile-highlight-font-size: 0.875em; /* 12px */
  --body-2-mobile-line-height: 150%;
  --body-2-mobile-letter-spacing: 0%;

  /* button-1 Desktop Large */
  --button-1-desktop-large-font-family: 'Geist', sans-serif;

  --button-2-desktop-large-font-weight: 500; /* SemiBold */
  --button-1-desktop-large-font-size: 1.25em; /* 20px */
  --button-1-desktop-large-line-height: 150%;
  --button-1-desktop-large-letter-spacing: 0%;

  /* button-1 Mobile */
  --button-1-mobile-font-family: 'Geist', sans-serif;
  --button-1-mobile-font-weight: 500; /* Medium */
  --button-1-mobile-font-size: .875em; /* 16px */
  --button-1-mobile-line-height: 150%;
  --button-1-mobile-letter-spacing: 0%;


}

.h1-font {
  font-family: var(--h1-desktop-large-font-family);
  font-weight: var(--h1-desktop-large-font-weight);
  font-size: var(--h1-desktop-large-font-size);
  line-height: var(--h1-desktop-large-line-height);
  letter-spacing: var(--h1-desktop-large-letter-spacing);
}

h1 {

  font-family: var(--h1-desktop-large-font-family);
  font-weight: var(--h1-desktop-large-font-weight);
  font-size: var(--h1-desktop-large-font-size);
  line-height: var(--h1-desktop-large-line-height);
  letter-spacing: var(--h1-desktop-large-letter-spacing);

}

.h2-font {
  font-family: var(--h2-desktop-large-font-family);
  font-weight: var(--h2-desktop-large-font-weight);
  font-size: var(--h2-desktop-large-font-size);
  line-height: var(--h2-desktop-large-line-height);
  letter-spacing: var(--h2-desktop-large-letter-spacing);
}

h2 {
  font-family: var(--h2-desktop-large-font-family);
  font-weight: var(--h2-desktop-large-font-weight);
  font-size: var(--h2-desktop-large-font-size);
  line-height: var(--h2-desktop-large-line-height);
  letter-spacing: var(--h2-desktop-large-letter-spacing);
}

.h3-font {
  font-family: var(--h3-desktop-large-font-family);
  font-weight: var(--h3-desktop-large-font-weight);
  font-size: var(--h3-desktop-large-font-size);
  line-height: var(--h3-desktop-large-line-height);
  letter-spacing: var(--h3-desktop-large-letter-spacing);
}

h3 {
  font-family: var(--h3-desktop-large-font-family);
  font-weight: var(--h3-desktop-large-font-weight);
  font-size: var(--h3-desktop-large-font-size);
  line-height: var(--h3-desktop-large-line-height);
  letter-spacing: var(--h3-desktop-large-letter-spacing);
}

.h4-font {
  font-family: var(--h4-desktop-large-font-family);
  font-weight: var(--h4-desktop-large-font-weight);
  font-size: var(--h4-desktop-large-font-size);
  line-height: var(--h4-desktop-large-line-height);
  letter-spacing: var(--h4-desktop-large-letter-spacing);
}

h4 {
  font-family: var(--h4-desktop-large-font-family);
  font-weight: var(--h4-desktop-large-font-weight);
  font-size: var(--h4-desktop-large-font-size);
  line-height: var(--h4-desktop-large-line-height);
  letter-spacing: var(--h4-desktop-large-letter-spacing);
}

.h5-font {
  font-family: var(--h5-desktop-large-font-family);
  font-weight: var(--h5-desktop-large-font-weight);
  font-size: var(--h5-desktop-large-font-size);
  line-height: var(--h5-desktop-large-line-height);
  letter-spacing: var(--h5-desktop-large-letter-spacing);
}

h5 {
  font-family: var(--h5-desktop-large-font-family);
  font-weight: var(--h5-desktop-large-font-weight);
  font-size: var(--h5-desktop-large-font-size);
  line-height: var(--h5-desktop-large-line-height);
  letter-spacing: var(--h5-desktop-large-letter-spacing);
}

.h6-font {
  font-family: var(--h6-desktop-large-font-family);
  font-weight: var(--h6-desktop-large-font-weight);
  font-size: var(--h6-desktop-large-font-size);
  line-height: var(--h6-desktop-large-line-height);
  letter-spacing: var(--h6-desktop-large-letter-spacing);
}

h6 {
  font-family: var(--h6-desktop-large-font-family);
  font-weight: var(--h6-desktop-large-font-weight);
  font-size: var(--h6-desktop-large-font-size);
  line-height: var(--h6-desktop-large-line-height);
  letter-spacing: var(--h6-desktop-large-letter-spacing);
}


.body-1 {
  font-family: var(--body-1-desktop-large-font-family);
  font-weight: var(--body-1-desktop-large-font-weight);
  font-size: var(--body-1-desktop-large-font-size);
  line-height: var(--body-1-desktop-large-line-height);
  letter-spacing: var(--body-1-desktop-large-letter-spacing);
}

.body-1-highlight {
  font-family: var(--body-1-highlight-desktop-large-font-family);
  font-weight: var(--body-1-highlight-desktop-large-font-weight);
  font-size: var(--body-1-highlight-desktop-large-font-size);
  line-height: var(--body-1-highlight-desktop-large-line-height);
  letter-spacing: var(--body-1-highlight-desktop-large-letter-spacing);
}

.body-2 {
  font-family: var(--body-2-desktop-large-font-family);
  font-weight: var(--body-2-desktop-large-font-weight);
  font-size: var(--body-2-desktop-large-font-size);
  line-height: var(--body-2-desktop-large-line-height);
  letter-spacing: var(--body-2-desktop-large-letter-spacing);
}

.body-2-highlight {
  font-family: var(--body-2-desktop-large-font-family);
  font-weight: var( --body-2-desktop-large-highlight-font-weight);
  font-size: var(--body-2-desktop-large-font-size);
  line-height: var(--body-2-desktop-large-line-height);
  letter-spacing: var(--body-2-desktop-large-letter-spacing);
}

.button {
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
}


.button-2 {
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var( --button-2-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
}


p,h1,h2,h3,h4,h5,h6 {
  margin: 0;
  font-family: var(--p-font);
}



/******************* Loveable CSS ***********************/

.text-3xl-bold {
  font-size: 30px; 
  font-family: var(--p-font);
  font-weight: 700; /* Semibold */
  line-height: 1; /* leading-none */
  letter-spacing: -0.015em; /* tracking-tight */
}

.text-2xl-bold {
  font-size: 24px; /* 24px converted to em based on the standard 16px font size */
  font-family: var(--p-font);
  font-weight: 700; /* Semibold */
  line-height: 1; /* leading-none */
  letter-spacing: -0.015em; /* tracking-tight */
}

.text-2xl {
  font-size: 24px; /* 24px converted to em based on the standard 16px font size */
  font-family: var(--p-font);
  font-weight: 600; /* Semibold */
  line-height: 1; /* leading-none */
  letter-spacing: -0.015em; /* tracking-tight */

}

.text-xl {
  font-size: 20px;
  font-family: var(--p-font);
  font-weight: 700;
}

.text-lg {
  font-size: 18px;
  font-family: var(--p-font);
  font-weight: 500;
}

.text-lg-r {
  font-size: 18px;
  font-family: var(--p-font);
  font-weight: 400;
}


.text-md-bold {
  font-size: 16px;
  font-family: var(--p-font);
  font-weight: 600;
}

.text-md {
  font-size: 16px;
  font-family: var(--p-font);
  font-weight: 500;
}

.text-md-r {
  font-size: 16px;
  font-family: var(--p-font);
  font-weight: 400;

}

.text-sm-bold {
  font-size: 14px;
  font-family: var(--p-font);
  font-weight: 700;
  line-height: 1.5;
}

.text-sm {
  font-size: 14px;
  font-family: var(--p-font);
  font-weight: 500;
  line-height: 1.5;
}

.text-sm-r {
  font-size: 14px;
  font-family: var(--p-font);
  font-weight: 400;
  line-height: 1.5;

}

.text-xs-bold {
  font-size: 12px;
  font-family: var(--p-font);
  font-weight: 600;

}

.text-xs {
  font-size: 12px;
  font-family: var(--p-font);
  font-weight: 400;

}

.d-t-1{
  color:var(--d-t-1);
  font-family:var(--p-font);
}

.d-t-2{
  color:var(--d-t-2);
  font-family:var(--p-font);
}



body{
  background: var(--l-b);
}



/******************* Loveable CSS ***********************/



/*  buttons */

.s-btn{
  font-family:var(--p-font);
  color:var(--d-t-1);
  padding:0.5em;
  border-radius:0.5em;
  border:1px solid var(--btn-border);
  font-size:0.875em;
  font-weight:600;
  line-height:20px;
  letter-spacing:-0.1px;
  background:var(--l-b);
  transition:all 0.3s ease;
}

.btn{
  font-family:var(--p-font);
  color:var(--w-t);
  padding:0.5em;
  border-radius:0.5em;
  border:none;
  font-size:0.875em;
  font-weight:600;
  line-height:20px;
  letter-spacing:-0.1px;
  background:var(--btn-bg);
  transition:all 0.3s ease;
}


/* end buttons  */



/* Forms */

label{
  color:var(--d-t-1);
}

legend{
  color:var(--d-t-2);
}



/* scrollbar */


/* Width of the scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

/* Track (background) */
::-webkit-scrollbar-track {
  background: var(--l-b);
  margin:0 5px;
}

/* Thumb (handle) */
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px; /* Optional: Makes it round */
}



/* end scrollbar */




/* Responsive for mobile */
@media (max-width: 768px) {

  .h1-font {
    font-family: var(--h1-mobile-font-family);
    font-weight: var(--h1-mobile-font-weight);
    font-size: var(--h1-mobile-font-size);
    line-height: var(--h1-mobile-line-height);
    letter-spacing: var(--h1-mobile-letter-spacing);
  }

  h1 {
    font-family: var(--h1-mobile-font-family);
    font-weight: var(--h1-mobile-font-weight);
    font-size: var(--h1-mobile-font-size);
    line-height: var(--h1-mobile-line-height);
    letter-spacing: var(--h1-mobile-letter-spacing);
  }

  .h2-font {
    font-family: var(--h2-mobile-font-family);
    font-weight: var(--h2-mobile-font-weight);
    font-size: var(--h2-mobile-font-size);
    line-height: var(--h2-mobile-line-height);
    letter-spacing: var(--h2-mobile-letter-spacing);
  }

  h2 {
    font-family: var(--h2-mobile-font-family);
    font-weight: var(--h2-mobile-font-weight);
    font-size: var(--h2-mobile-font-size);
    line-height: var(--h2-mobile-line-height);
    letter-spacing: var(--h2-mobile-letter-spacing);
  }

  .h3-font {
    font-family: var(--h3-mobile-font-family);
    font-weight: var(--h3-mobile-font-weight);
    font-size: var(--h3-mobile-font-size);
    line-height: var(--h3-mobile-line-height);
    letter-spacing: var(--h3-mobile-letter-spacing);
  }

  h3 {
    font-family: var(--h3-mobile-font-family);
    font-weight: var(--h3-mobile-font-weight);
    font-size: var(--h3-mobile-font-size);
    line-height: var(--h3-mobile-line-height);
    letter-spacing: var(--h3-mobile-letter-spacing);
  }

  .h4-font {
    font-family: var(--h4-mobile-font-family);
    font-weight: var(--h4-mobile-font-weight);
    font-size: var(--h4-mobile-font-size);
    line-height: var(--h4-mobile-line-height);
    letter-spacing: var(--h4-mobile-letter-spacing);
  }

  h4 {
    font-family: var(--h4-mobile-font-family);
    font-weight: var(--h4-mobile-font-weight);
    font-size: var(--h4-mobile-font-size);
    line-height: var(--h4-mobile-line-height);
    letter-spacing: var(--h4-mobile-letter-spacing);
  }

  .h5-font {
    font-family: var(--h5-mobile-font-family);
    font-weight: var(--h5-mobile-font-weight);
    font-size: var(--h5-mobile-font-size);
    line-height: var(--h5-mobile-line-height);
    letter-spacing: var(--h5-mobile-letter-spacing);
  }

  h5 {
    font-family: var(--h5-mobile-font-family);
    font-weight: var(--h5-mobile-font-weight);
    font-size: var(--h5-mobile-font-size);
    line-height: var(--h5-mobile-line-height);
    letter-spacing: var(--h5-mobile-letter-spacing);
  }

  .h6-font {
    font-family: var(--h6-mobile-font-family);
    font-weight: var(--h6-mobile-font-weight);
    font-size: var(--h6-mobile-font-size);
    line-height: var(--h6-mobile-line-height);
    letter-spacing: var(--h6-mobile-letter-spacing);
  }

  h6 {
    font-family: var(--h6-mobile-font-family);
    font-weight: var(--h6-mobile-font-weight);
    font-size: var(--h6-mobile-font-size);
    line-height: var(--h6-mobile-line-height);
    letter-spacing: var(--h6-mobile-letter-spacing);
  }

  .body-1 {
    font-family: var(--body-1-mobile-font-family);
    font-weight: var(--body-1-mobile-font-weight);
    font-size: var(--body-1-mobile-font-size);
    line-height: var(--body-1-mobile-line-height);
    letter-spacing: var(--body-1-mobile-letter-spacing);
  }

  .body-1-highlight {
    font-family: var(--body-1-highlight-mobile-font-family);
    font-weight: var(--body-1-highlight-mobile-font-weight);
    font-size: var(--body-1-highlight-mobile-font-size);
    line-height: var(--body-1-highlight-mobile-line-height);
    letter-spacing: var(--body-1-highlight-mobile-letter-spacing);
  }

  .body-2 {
    font-family: var(--body-2-mobile-font-family);
    font-weight: var(--body-2-mobile-font-weight);
    font-size: var(--body-2-mobile-font-size);
    line-height: var(--body-2-mobile-line-height);
    letter-spacing: var(--body-2-mobile-letter-spacing);
  }

  .body-2-highlight {
    font-family: var(--body-2-mobile-font-family);
    font-weight: var(--body-2-desktop-large-highlight-font-weight);
    font-size: var(--body-2-mobile-highlight-font-size);
    line-height: var(--body-2-mobile-line-height);
    letter-spacing: var(--body-2-mobile-letter-spacing);
  }

  .button {
    font-family: var(--button-1-mobile-font-family);
    font-weight: var(--button-1-mobile-font-weight);
    font-size: var(--button-1-mobile-font-size);
    line-height: var(--button-1-mobile-line-height);
    letter-spacing: var(--button-1-mobile-letter-spacing);
  }


  .button-2 {
    font-family: var(--button-1-mobile-font-family);
    font-weight: var( --button-2-desktop-large-font-weight);
    font-size: var(--button-1-mobile-font-size);
    line-height: var(--button-1-mobile-line-height);
    letter-spacing: var(--button-1-mobile-letter-spacing);
  }


}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/********** Colors ***************/


/* Standard syntax */
.form input[type="file"]::file-selector-button {
  background: var(--l-b);
  color: var(--d-t-2);
  border: 1px solid var(--border); 
  border-radius: 4px; 
  cursor: pointer;
}

.form .hs-form-field{
  margin-top:1em;
}


.form input[type="file"]::-webkit-file-upload-button {
  background: var(--l-b);
  color: var(--d-t-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}



.form .form-columns-1 .input{
  margin-right: 0 !important;
}

.form .form-columns-1 .hs-input:not([type="checkbox"]){
  width:100% !important;
}

.form .form-columns-2 .input, .form-columns-2 .hs-form-field{
  margin-right: 0 !important;
  max-width:100% !important;
  width:100% !important;
}
.form .form-columns-2 {
  display: flex;
  gap: 1.5em;
  /*   margin-bottom:1.5em; */
}

.form .form-columns-1{
  /*   margin-bottom:1.5em; */
}

.form .form-columns-3 {
  display: flex;
  gap: 1.5em;
  /*   margin-bottom:1.5em; */
}

.form fieldset {
  max-width: 100% !important;
}




.form input,
.form textarea,
.form select {
  padding: 8px 16px;
  width: 100%;
  display: block;
  background: var(--input-gray);
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 0.5em; 
  box-sizing: border-box;
  font-size: 14px;
  font-family: var(--p-font);
  font-weight: 400;
  color :var(--d-t-2);
}

.form .hs-form-required{
  display:none;

}

.form select { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #000 50%),
    linear-gradient(135deg, #000 50%, transparent 50%),
    linear-gradient(to right, #000, #000);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat; 
}


.form select:focus {
  /*     background-image:
  linear-gradient(45deg,  50%, transparent 50%),
  linear-gradient(135deg, transparent 50%,  50%),
  linear-gradient(to right, #ccc, #ccc);
  background-position:
  calc(100% - 15px) 1em,
  calc(100% - 20px) 1em,
  calc(100% - 2.5em) 0.5em;
  background-size:
  5px 5px,
  5px 5px,
  1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0; */
}


.form select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.form input::placeholder, .form textarea::placeholder,.form select::placeholder { /* Standard */
  color: ;
}

.form label {
  margin-bottom: 0.5em;
  font-size: 14px;
  font-family: var(--p-font);
  font-weight: 500;
  color :var(--d-t-1);

}


.hs-error-msg {
  font-size: 0.875em !important;
  font-weight: 500;
  text-align: left;
  color: red !important;
}
/* .hs-error-msgs {
margin-top: -1em;
} */
/* .form input[type="submit"] {
display: block;
background-color: ;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
color: !important;

} */

.form input[type="submit"]  {
  color:white;
  background-color:var(--tertiary-text);
  padding: 8px 16px;
  border: none;
  display: block;
  transition: all .2s ease;
  border-radius: 6px;
  cursor: pointer;
  margin-top:1.5em;
  margin-bottom:0em;
  transition: all .2s ease;
  width:11em;
  font-size: 14px;
  font-family: var(--p-font);
  font-weight: 500;

}

/* .form input[type="submit"]:hover {
background-color: #3aabe8;
transition: all .2s ease;
} */


.form input[type="radio"] {
  appearance: none;
  padding: 9px;
  border-radius: 100px;
  border: 1px solid var(--border); /* Border color */
  position: relative; /* Needed for positioning the ::before pseudo-element */
  width: 18px; /* Adjust the size of the radio button */
  height: 18px;
  background-color: var(--input-gray); /* Initial background color */
  transition: all 0.3s ease; /* Smooth transition for changes */
  box-sizing: border-box; /* Ensure padding and border are included in the element's size */
}

/* When the radio button is checked */
.form input[type="radio"]:checked { 
  border-color: var(--p-c); /* Change border to match the checked color */
}

/* Creating the inner circle (filled circle) on check */
.form input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 3.5px; /* Adjust the position to create the gap */
  left: 3.3px; /* Adjust the position to create the gap */
  width: 11px; /* Adjust the width of the filled circle */
  height: 11px; /* Adjust the height of the filled circle */
  border-radius: 50%; /* Make the inner circle round */
  background-color: var(--p-c); /* Color of the fill when checked */
  transition: all 0.2s ease; /* Smooth transition for filling */
} 


/*     .form input[type="radio"]:checked::after {
content: "";
display: block;
position: absolute;
left: 5px;
top: 0px;
width: 6px;
height: 12px;
border: solid #fff; 
border-width: 0 2px 2px 0;
transform: rotate(45deg);
transition: all 0.2s ease;
} */


.hs-form-radio-display{
  display:flex;
  flex-direction:row;
  width:90%;
  gap:8px;
}

.hs-form-radio-display input {
  margin: 0;
  width: auto;
}

/* .hs-form-radio-display input {
appearance: none;
margin: 0;
width: 1px;
border-radius: 100%;
padding: 9px;
border-color: blue;

} */

/* .form input[type="submit"] :hover {
background-color: #000033;
} */

.form {
  background-color: var(--l-b);
  padding: 24px ;
  border: none;
  border-radius: 12px;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: ;
}

.form textarea {
  resize: none;
  min-height: 9em;
  box-sizing: border-box;
}

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

.form legend{
  font-family: var(--body-2-desktop-large-font-family);
  font-weight: var(--body-2-desktop-large-font-weight);
  font-size: var(--body-2-desktop-large-font-size);
  line-height: var(--body-2-desktop-large-line-height);
  letter-spacing: var(--body-2-desktop-large-letter-spacing);
  color:var(--d-t-2);
}


.form .inputs-list{
  padding-left:0px;

}

.form .hs-form-booleancheckbox-display{

  display:flex ;
  /*   gap:1em; */
  align-items:center;
}

.form input[type='checkbox']{
  appearance:none;
  width:2px;
  display:inline;
  cursor:pointer;
  margin-right:0.4375em;
  margin-bottom:0;
  margin-top:0;
  border: 1px solid #0fa2e7;
  background:var(--input-gray);
  padding:8px;
  border-radius: 4px; 
}

.form input[type="checkbox"]:checked {
  background-color: var(--p-c); /* Checked background color */
  border-color: var(--p-c); /* Change border to match */
  position: relative;
}
.form input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  position: absolute;
  left: 5px;
  top: 0px;
  width: 6px;
  height: 12px;
  border: solid #fff; /* Checkmark color */
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: all 0.2s ease;
}

.form h1,
.form h2,
.form h3,
.form h4,
.form h5,
.form h6,{
  color:var(--d-t-1);
  font-family:var(--p-font);
}

.form input:focus,
.form textarea:focus,
.form select:focus,
input:focus,
select:focus {
  outline: 1px solid #20B4FF;
}

@media (max-width: 768px) {
  .form {
    padding: 1.5em 1em ;
  }

  .form input,
  .form textarea,
  .form select {
    /*     margin-bottom: 1em; */
    font-size: 1em; 
  }
  .form .form-columns-2 {
    flex-direction: column;
    gap: 1em;
  }
  .hs-error-msgs {
    margin-top: -10px;
  }
}

@media (max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px) {
  .form .form-columns-1 .input{
    margin-right: 0 !important;
  }

  /*   
  .form .form-columns-1 .hs-input:not([type="checkbox"]), .form-columns-2 .hs-form-field .hs-input{
  width:100% !important;
} */

  .form .form-columns-2 .input, .form-columns-2 .hs-form-field{
    margin-right: 0 !important;
    max-width:100% !important;
    width:100% !important;
  }
}


/* --- Utilities --- */
/* common-Macro */
/* --- Macro CSS --- */