/*----------------------- Desktop -----------------------*/

/*--------- Form Container (These should be the same for gated downloads and fully gated pages) ---------*/

display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;

/*--------- Fields Containers (These should be the same for gated downloads and fully gated pages) ---------*/

/*--- 2 column field container---*/
display: flex;
align-items: flex-start;
gap: 24px;
align-self: stretch;

/*--- form fields container (due to different spacing between fields vs. opt-in + button) ---*/
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
align-self: stretch;

/*--------- Fields (These should be the same for gated downloads and fully gated pages) ---------*/

/*--- short text field container in 2 column ---*/
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;

/*--- short text field container in 1 column ---*/
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;

/*--- field label ---*/
flex: 1 0 0;

color: var(--primary-green-primary-main, #003F2D);
font-variant-numeric: lining-nums tabular-nums;

font-family: Calibre;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 137.5%*/


/*--- short text, long text, and dropdown input field - default---*/
display: flex;
height: 48px;
padding: 1px 12px 2px 12px;
align-items: center;
gap: 8px;
align-self: stretch;

background: var(--Misc-Text-Field-Light-Normal, rgba(26, 26, 26, 0.04));
box-shadow: 0px -1px 0px 0px #435254 inset;

/*--- short text input field - error---*/
display: flex;
height: 48px;
padding: 0px 12px;
align-items: center;
gap: 8px;
align-self: stretch;

/*--- short text and dropdown textfield content---*/
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 0 0;
align-self: stretch;

color: var(--Text-Dark-Text-Dark, #1A1A1A);
font-variant-numeric: lining-nums tabular-nums;

font-family: Calibre;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 137.5%*/

/*--- dropdown input field - default - down arrow icon ---*/
width: 24px;
height: 24px;

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
  <path d="M7 10L12 15L17 10H7Z" fill="#003F2D"/>
</svg>

/*--- dropdown input field - default - up arrow icon---*/
width: 24px;
height: 24px;

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path d="M8.2002 14C8.0502 14 7.92936 13.95 7.8377 13.85C7.74603 13.75 7.7002 13.6334 7.7002 13.5C7.7002 13.4667 7.7502 13.35 7.8502 13.15L11.4752 9.52505C11.5585 9.44172 11.6419 9.38338 11.7252 9.35005C11.8085 9.31672 11.9002 9.30005 12.0002 9.30005C12.1002 9.30005 12.1919 9.31672 12.2752 9.35005C12.3585 9.38338 12.4419 9.44172 12.5252 9.52505L16.1502 13.15C16.2002 13.2 16.2377 13.2542 16.2627 13.3125C16.2877 13.3709 16.3002 13.4334 16.3002 13.5C16.3002 13.6334 16.2544 13.75 16.1627 13.85C16.071 13.95 15.9502 14 15.8002 14H8.2002Z" fill="#003F2D"/>
</svg>

/*--- dropdown menu ---*/
display: inline-flex;
flex-direction: column;
align-items: flex-start;

/*--- dropdown menu item - default ---*/

display: flex;
height: 48px;
min-width: 56px;
min-height: 48px;
padding: 12px 16px;
align-items: center;
gap: 16px;
align-self: stretch;

background: var(--Backgrounds-Surface, #FFF);

/*--- dropdown menu item text - default ---*/

display: flex;
flex-direction: column;
justify-content: center;
flex: 1 0 0;
align-self: stretch;

color: var(--Text-Dark-Text-Dark, #1A1A1A);

font-family: Calibre-R;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */

/*--- dropdown menu item - hover ---*/

background: var(--overlay-light-overlay-on-white-hover, rgba(26, 26, 26, 0.04));

/*--- dropdown menu item - selected ---*/

background: var(--overlay-light-overlay-on-white-selected, rgba(0, 63, 45, 0.08));

/*--- dropdown menu item text - selected ---*/

color: var(--Text-Dark-Text-Dark, #1A1A1A);
font-family: Calibre-R;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */

/*--- long text field container in 1 column---*/
display: flex;
height: 160px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;

/*--- long text input field - default---*/
display: flex;
padding: 1px 12px 2px 12px;
align-items: center;
gap: 8px;
flex: 1 0 0;
align-self: stretch;

background: var(--Misc-Text-Field-Light-Normal, rgba(26, 26, 26, 0.04));
box-shadow: 0px -1px 0px 0px #435254 inset;

/*--- long text textfield content---*/
flex: 1 0 0;
align-self: stretch;

color: var(--Text-Dark-Text-Dark, #1A1A1A);
font-variant-numeric: lining-nums tabular-nums;

font-family: Calibre;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 137.5%*/

/*--- all input fields - hover---*/

background: var(--Misc-Text-Field-Light-Hover, rgba(26, 26, 26, 0.08));

box-shadow: 0px -1px 0px 0px #003F2D inset;


/*---  all input fields - error ---*/
background: var(--Misc-Text-Field-Light-Normal, rgba(26, 26, 26, 0.04));

box-shadow: 0px -1px 0px 0px #CD411D inset;

/*--- assistive element container---*/
display: flex;
padding-top: 3px;
align-items: flex-end;
align-self: stretch;

/*--- assistive text container---*/
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;

/*--- assistive text top spacer---*/
height: 1px;
align-self: stretch;

/*--- assistive text---*/
display: flex;
padding-left: 12px;
align-items: flex-start;

/*--- assistive text - error ---*/
color: var(--Semantic-Colors-Error-Main, #FF543E);

font-family: Calibre;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333%*/


/*--------- Opt-in (These should be the same for gated downloads and fully gated pages) ---------*/

/*--- opt-in container---*/
display: flex;
align-items: flex-start;
gap: 4px;
align-self: stretch;

/*--- opt-in text container---*/
display: flex;
padding: 4px 0px;
align-items: flex-start;
flex: 1 0 0;

/*--- opt-in text---*/
flex: 1 0 0;
color: var(--Brand-Primary-Dark-Grey, #435254);
font-variant-numeric: lining-nums tabular-nums;

font-family: Calibre;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 137.5%*/

/*--- opt-in link - default ---*/
color: var(--Brand-Primary-Dark-Grey, #435254);
font-variant-numeric: lining-nums tabular-nums;

font-family: Calibre;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;

/*--- opt-in link - hover ---*/
text-decoration-color: #17E88F;


/*--- checkbox - unchecked ---*/
width: 24px;
height: 24px;

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path d="M3 21V3H21V21H3ZM5 19H19V5H5V19Z" fill="#435254"/>
</svg>

/*--- checkbox - checked ---*/
width: 24px;
height: 24px;

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path d="M10.6 16.2L17.65 9.15L16.25 7.75L10.6 13.4L7.75 10.55L6.35 11.95L10.6 16.2ZM3 21V3H21V21H3Z" fill="#435254"/>
</svg>

/*--------- Button (This should be the same as the existing styles in Sitecore and the same for gated downloads and fully gated pages.)---------*/

/*--- button - default ---*/
display: flex;
height: 48px;
padding: 10px 24px;
justify-content: center;
align-items: center;
gap: 8px;

background: var(--Primiry-Green-1, #003F2D);

/*--- button - default - text  ---*/

color: var(--Greyscale-0, #FFF);
leading-trim: both;
text-edge: cap;
font-family: Calibre;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 130%; /* 23.4px*/
letter-spacing: -0.36px;

/*--- button - default - download icon  ---*/

width: 24px;
height: 24px;

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path d="M12 16L7 11L8.4 9.55L11 12.15V4H13V12.15L15.6 9.55L17 11L12 16ZM4 20V15H6V18H18V15H20V20H4Z" fill="white"/>
</svg>

/*--- button - hover ---*/
display: inline-flex;
height: 48px;
padding: 10px 24px;
justify-content: center;
align-items: center;
gap: 8px;

/*--- button - default - text ---*/

color: var(--Primiry-Grey-1, #012A2D);
leading-trim: both;
text-edge: cap;
font-family: Calibre;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 130%; /* 23.4px*/
letter-spacing: -0.36px;

/*--- button - hover - download icon  ---*/

width: 24px;
height: 24px;

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path d="M12 16L7 11L8.4 9.55L11 12.15V4H13V12.15L15.6 9.55L17 11L12 16ZM4 20V15H6V18H18V15H20V20H4Z" fill="#012A2D"/>
</svg>

/*--- button - default - external link icon  ---*/
width: 24px;
height: 24px;

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path d="M3 21V3H12V5H5V19H19V12H21V21H3ZM9.7 15.7L8.3 14.3L17.6 5H14V3H21V10H19V6.4L9.7 15.7Z" fill="white"/>
</svg>

/*--- button - hover - external link icon  ---*/

width: 24px;
height: 24px;

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path d="M3 21V3H12V5H5V19H19V12H21V21H3ZM9.7 15.7L8.3 14.3L17.6 5H14V3H21V10H19V6.4L9.7 15.7Z" fill="#012A2D"/>
</svg>


/*----------------------- Mobile -----------------------*/

/*--------- Form Container (These should be the same for gated downloads and fully gated pages) ---------*/

/*--- form container (Flexes to fill embed space provided by Sitecore. ) ---*/
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;

/*--------- Fields Containers (These should be the same for gated downloads and fully gated pages) ---------*/

/*--- 2 column field container (Changes to stacked. Remove spacing between fields.)---*/
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;

/*--------- Fields (These should be the same for gated downloads and fully gated pages) ---------*/

/*--- label container ---*/
display: flex;
align-items: flex-end;
align-self: stretch;

/*--- label text ---*/

flex: 1 0 0;
color: var(--primary-green-primary-main, #003F2D);

font-family: Calibre;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333%*/

/*--------- Opt-in (These should be the same for gated downloads and fully gated pages) ---------*/
/*--- opt-in container---*/
display: flex;
align-items: flex-start;
gap: 4px;
flex: 1 0 0;


/*--- opt-in text---*/
flex: 1 0 0;
color: var(--Brand-Primary-Dark-Grey, #435254);

font-family: Calibre;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571%*/

/*--- opt-in link---*/
color: var(--Brand-Primary-Dark-Grey, #435254);

font-family: Calibre;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;